# Theme Swatch

A horizontal strip displaying all shades of a color token, with smooth hover expansion for easy shade selection. Shows the label and hex value of the hovered/selected shade.

## Basic usage

```js
const shades = {
  50: '#FFF7ED',
  100: '#FFEDD5',
  200: '#FED7AA',
  300: '#FDBA74',
  400: '#FB923C',
  500: '#F97316',
  600: '#EA580C',
  700: '#C2410C',
  800: '#9A3412',
  900: '#7C2D12',
  950: '#431407',
};

<SilkeThemeSwatch
  label="Accent"
  shades={shades}
  token="Orange"
  selectedShade={500}
  onSelect={(shade) => console.log('Selected shade:', shade)}
/>;
```

## With selection state

```js
const shades = {
  50: '#EFF6FF',
  100: '#DBEAFE',
  200: '#BFDBFE',
  300: '#93C5FD',
  400: '#60A5FA',
  500: '#3B82F6',
  600: '#2563EB',
  700: '#1D4ED8',
  800: '#1E40AF',
  900: '#1E3A8A',
  950: '#172554',
};

const [selected, setSelected] = React.useState(500);

<SilkeBox column gap="m">
  <SilkeThemeSwatch
    label="Primary"
    shades={shades}
    selectedShade={selected}
    onSelect={setSelected}
  />
  <SilkeText>Selected: {selected}</SilkeText>
</SilkeBox>;
```