Radio Cards

'use client'

import { useRef, useState } from 'react'
import './radio-cards.css'

export interface RadioCardOption { value: string; title: string; detail?: string; aside?: string }
export interface RadioCardsProps {
  options: RadioCardOption[]
  value?: string
  defaultValue?: string
  onValueChange?: (v: string) => void
  label?: string
  layout?: 'stack' | 'grid'
  fill?: 'dark' | 'light'
  className?: string
}

/** Option cards that behave like radios. */
export function RadioCards({ options, value, defaultValue, onValueChange, label = 'Options', layout = 'stack', fill = 'dark', className }: RadioCardsProps) {
  const [inner, setInner] = useState(defaultValue ?? options[0]?.value)
  const v = value ?? inner
  const refs = useRef<(HTMLButtonElement | null)[]>([])
  const pick = (i: number) => {
    const j = (i + options.length) % options.length
    setInner(options[j].value); onValueChange?.(options[j].value); refs.current[j]?.focus()
  }
  return (
    <div role="radiogroup" aria-label={label} className={['sd-rcd', className].filter(Boolean).join(' ')} data-fill={fill} data-layout={layout}>
      {options.map((o, i) => (
        <button
          key={o.value}
          ref={(el) => { refs.current[i] = el }}
          type="button"
          role="radio"
          aria-checked={o.value === v}
          tabIndex={o.value === v ? 0 : -1}
          className="sd-rcd__card"
          onClick={() => pick(i)}
          onKeyDown={(e) => {
            if (e.key === 'ArrowDown' || e.key === 'ArrowRight') (e.preventDefault(), pick(i + 1))
            if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') (e.preventDefault(), pick(i - 1))
          }}
        >
          <span className="sd-rcd__ring" aria-hidden />
          <span><span className="sd-rcd__t">{o.title}</span>{o.detail && <span className="sd-rcd__d" style={{ display: 'block' }}>{o.detail}</span>}</span>
          {o.aside && <span className="sd-rcd__aside">{o.aside}</span>}
        </button>
      ))}
    </div>
  )
}

.sd-rcd { --bg: #1c1c1c; --fg: #f6f6f6; --mute: #8e8e8e; --line: rgb(255 255 255 / 0.1); --soft: rgb(255 255 255 / 0.07); --strong: #fafafa; --on: #111; 
  color: var(--fg); font-size: 14px; line-height: 1.4; -webkit-tap-highlight-color: transparent; }
.sd-rcd[data-fill='light'] { --bg: #fff; --fg: #121212; --mute: #6f6f6f; --line: rgb(0 0 0 / 0.09); --soft: rgb(0 0 0 / 0.05); --strong: #111; --on: #fff; }
.sd-rcd button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.sd-rcd :focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.sd-rcd .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sd-rcd { width: min(100%, 320px); display: grid; gap: 8px; }
.sd-rcd[data-layout='grid'] { grid-template-columns: 1fr 1fr; }
.sd-rcd__card { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; padding: 14px; border-radius: 14px; text-align: left; background: var(--bg) !important; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 220ms, transform 150ms; }
.sd-rcd[data-layout='grid'] .sd-rcd__card { grid-template-columns: auto 1fr; }
.sd-rcd[data-layout='grid'] .sd-rcd__aside { grid-column: 2; }
.sd-rcd__card:hover { box-shadow: inset 0 0 0 1px var(--mute); }
.sd-rcd__card:active { transform: scale(0.985); }
.sd-rcd__card[aria-checked='true'] { box-shadow: inset 0 0 0 1.5px var(--fg); }
.sd-rcd__ring { position: relative; width: 18px; height: 18px; margin-top: 1px; border-radius: 99px; box-shadow: inset 0 0 0 1.5px var(--mute); transition: box-shadow 200ms; }
.sd-rcd__ring::after { content: ''; position: absolute; inset: 4px; border-radius: 99px; background: var(--fg); transform: scale(0); transition: transform 300ms cubic-bezier(0.3, 1.8, 0.4, 1); }
.sd-rcd__card[aria-checked='true'] .sd-rcd__ring { box-shadow: inset 0 0 0 1.5px var(--fg); }
.sd-rcd__card[aria-checked='true'] .sd-rcd__ring::after { transform: scale(1); }
.sd-rcd__t { font-weight: 600; font-size: 14px; }
.sd-rcd__d { font-size: 12.5px; color: var(--mute); margin-top: 2px; }
.sd-rcd__aside { font-weight: 600; font-size: 13.5px; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .sd-rcd *, .sd-rcd *::before, .sd-rcd *::after { animation: none !important; transition: none !important; } }