# SecretValue

Masks a secret and adds reveal and copy buttons.

[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/SecretValue.tsx)

## Overview

A secret value masks a secret behind 16 dots and adds reveal and copy buttons. A click anywhere on the block copies the value without revealing it.

Name the group with `label`, such as Recovery key, so each button has context.

## Examples

### Basic

```tsx
import { SecretValue, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <SecretValue label="API key" value="sk_demo_4eC39HqLyjWDarjtT1zdp7dc" {...styles.value()} />
  )
}

namespace styles {
  export const value = style({ maxWidth: '28rem !custom' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/SecretValue/Basic.tsx)

### Size

Set `size` to `small`, `medium`, or `large`. It defaults to `medium`.

```tsx
import { SecretValue, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <div {...styles.column()}>
      {(['small', 'medium', 'large'] as const).map((size) => (
        <SecretValue
          key={size}
          label="API key"
          size={size}
          value="sk_demo_4eC39HqLyjWDarjtT1zdp7dc"
        />
      ))}
    </div>
  )
}

namespace styles {
  export const column = style({
    display: 'grid',
    gap: '3',
    gridTemplateColumns: 'minmax(0, 28rem) !custom',
  })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/SecretValue/Size.tsx)

### DefaultRevealed

Set `defaultRevealed` to start with the value shown.

```tsx
import { SecretValue, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <SecretValue
      defaultRevealed
      label="API key"
      value="sk_demo_4eC39HqLyjWDarjtT1zdp7dc"
      {...styles.value()}
    />
  )
}

namespace styles {
  export const value = style({ maxWidth: '28rem !custom' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/SecretValue/DefaultRevealed.tsx)

## Guidelines

TODO: Write guidelines for SecretValue.