Color Swatch Picker

import * as React from 'react'
import { ColorSwatchPicker } from '@hamur/react/color-swatch-picker'

const tokens = [
  { name: 'Danger', value: '#e5484d' },
  { name: 'Warning', value: '#f76b15' },
  { name: 'Caution', value: '#ffc53d' },
  { name: 'Success', value: '#46a758' },
  { name: 'Info', value: '#0090ff' },
  { name: 'Brand', value: '#8e4ec6' },
]

export default function ColorSwatchPickerExample() {
  const [value, setValue] = React.useState<string | null>('#0090ff')
  const token = tokens.find((t) => t.value === value)
  return (
    <div className="field">
      <span id="color-token-label" className="color-swatch-picker-label">
        Accent token
      </span>
      <ColorSwatchPicker.Root
        className="color-swatch-picker"
        aria-labelledby="color-token-label"
        value={value}
        onValueChange={setValue}
      >
        {tokens.map((t) => (
          <ColorSwatchPicker.Item
            key={t.value}
            value={t.value}
            aria-label={t.name}
            className="color-swatch-picker-item"
          />
        ))}
      </ColorSwatchPicker.Root>
      <p className="muted">Selected: {token ? `${token.name} (${token.value})` : 'none'}</p>
    </div>
  )
}