Swatch Picker

'use client'

import { useRef } from 'react'
import './swatch-picker.css'

export interface Swatch {
  name: string
  hex: string
}

export interface SwatchPickerProps {
  swatches: Swatch[]
  value: string
  onValueChange: (hex: string) => void
  label?: string
  shape?: 'circle' | 'square'
  /** Swatch size in px. */
  size?: number
  fill?: 'dark' | 'light'
  className?: string
}

/** A colour radio group: the selection ring springs between swatches and a preview shows the name and hex. */
export function SwatchPicker({ swatches, value, onValueChange, label = 'Colour', shape = 'circle', size = 34, fill = 'dark', className }: SwatchPickerProps) {
  const refs = useRef<(HTMLButtonElement | null)[]>([])
  const idx = Math.max(0, swatches.findIndex((s) => s.hex === value))
  const cur = swatches[idx]
  const move = (d: number) => {
    const n = (idx + d + swatches.length) % swatches.length
    onValueChange(swatches[n].hex)
    refs.current[n]?.focus()
  }
  return (
    <div className={['sd-sw', className].filter(Boolean).join(' ')} data-fill={fill} data-shape={shape} style={{ '--sw-size': `${size}px`, '--sw-cur': cur.hex } as React.CSSProperties}>
      <div className="sd-sw__preview" aria-hidden>
        <span className="sd-sw__blob" />
        <span>
          <b>{cur.name}</b>
          <code>{cur.hex.toUpperCase()}</code>
        </span>
      </div>
      <div role="radiogroup" aria-label={label} className="sd-sw__row">
        <span className="sd-sw__ring" style={{ transform: `translateX(calc(${idx} * (var(--sw-size) + 10px)))` }} aria-hidden />
        {swatches.map((s, i) => (
          <button
            key={s.hex}
            ref={(el) => {
              refs.current[i] = el
            }}
            type="button"
            role="radio"
            aria-checked={i === idx}
            aria-label={s.name}
            tabIndex={i === idx ? 0 : -1}
            className="sd-sw__dot"
            style={{ background: s.hex }}
            onClick={() => onValueChange(s.hex)}
            onKeyDown={(e) => {
              if (e.key === 'ArrowRight' || e.key === 'ArrowDown') (e.preventDefault(), move(1))
              if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') (e.preventDefault(), move(-1))
            }}
          />
        ))}
      </div>
    </div>
  )
}

.sd-sw { --fg: #fafafa; --mute: #8e8e8e; --bg: #1d1d1d; --line: rgb(255 255 255 / 0.08); --r: 999px;
  display: grid; gap: 16px; padding: 16px; border-radius: 22px; background: var(--bg); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); }
.sd-sw[data-fill='light'] { --fg: #121212; --mute: #6f6f6f; --bg: #fff; --line: rgb(0 0 0 / 0.08); }
.sd-sw[data-shape='square'] { --r: 10px; }
.sd-sw__preview { display: flex; align-items: center; gap: 12px; }
.sd-sw__blob { width: 52px; height: 52px; border-radius: calc(var(--r) * 1.4); background: var(--sw-cur); box-shadow: 0 10px 26px -8px var(--sw-cur); transition: background-color 400ms, box-shadow 400ms; }
.sd-sw__preview b { display: block; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.sd-sw__preview code { font-size: 12.5px; color: var(--mute); font-family: ui-monospace, monospace; }
.sd-sw__row { position: relative; display: flex; gap: 10px; }
.sd-sw__dot { width: var(--sw-size); height: var(--sw-size); border-radius: var(--r); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.15); transition: transform 300ms cubic-bezier(0.3, 1.6, 0.4, 1); }
.sd-sw__dot:hover { transform: scale(1.08); }
.sd-sw__dot[aria-checked='true'] { transform: scale(0.72); }
.sd-sw__dot:focus-visible { outline: 2px solid var(--fg); outline-offset: 5px; }
.sd-sw__ring { position: absolute; left: 0; top: 0; width: var(--sw-size); height: var(--sw-size); border-radius: var(--r); box-shadow: inset 0 0 0 2.5px var(--sw-cur); transition: transform 480ms cubic-bezier(0.25, 1.4, 0.35, 1), box-shadow 400ms; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .sd-sw * { transition: none !important; } }