Segmented Control

'use client'

import { useLayoutEffect, useRef, useState } from 'react'
import './segmented-control.css'

export interface SegmentedControlProps {
  options: { value: string; label: string }[]
  value?: string
  defaultValue?: string
  onValueChange?: (v: string) => void
  label?: string
  shape?: 'pill' | 'square'
  fill?: 'dark' | 'light'
  className?: string
}

/** Radiogroup with a sliding pill. */
export function SegmentedControl({ options, value, defaultValue, onValueChange, label = 'View', shape = 'pill', fill = 'dark', className }: SegmentedControlProps) {
  const [inner, setInner] = useState(defaultValue ?? options[0]?.value)
  const v = value ?? inner
  const refs = useRef<(HTMLButtonElement | null)[]>([])
  const [pill, setPill] = useState({ x: 0, w: 0 })
  const idx = Math.max(0, options.findIndex((o) => o.value === v))
  useLayoutEffect(() => {
    const el = refs.current[idx]
    if (el) setPill({ x: el.offsetLeft, w: el.offsetWidth })
  }, [idx, options.length])
  const pick = (i: number) => {
    const o = options[(i + options.length) % options.length]
    setInner(o.value)
    onValueChange?.(o.value)
    refs.current[(i + options.length) % options.length]?.focus()
  }
  return (
    <div role="radiogroup" aria-label={label} className={['sd-seg', className].filter(Boolean).join(' ')} data-fill={fill} data-shape={shape}>
      <span className="sd-seg__pill" aria-hidden style={{ width: pill.w, transform: `translateX(${pill.x}px)` }} />
      {options.map((o, i) => (
        <button
          key={o.value}
          ref={(el) => { refs.current[i] = el }}
          type="button"
          role="radio"
          aria-checked={i === idx}
          tabIndex={i === idx ? 0 : -1}
          className="sd-seg__opt"
          onClick={() => pick(i)}
          onKeyDown={(e) => {
            const k = e.key
            if (k === 'ArrowRight' || k === 'ArrowDown') (e.preventDefault(), pick(i + 1))
            else if (k === 'ArrowLeft' || k === 'ArrowUp') (e.preventDefault(), pick(i - 1))
            else if (k === 'Home') (e.preventDefault(), pick(0))
            else if (k === 'End') (e.preventDefault(), pick(options.length - 1))
          }}
        >
          {o.label}
        </button>
      ))}
    </div>
  )
}

.sd-seg { --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-seg[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-seg button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.sd-seg :focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.sd-seg .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sd-seg { position: relative; display: inline-flex; padding: 4px; border-radius: 999px; background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); max-width: 100%; }
.sd-seg[data-shape='square'], .sd-seg[data-shape='square'] .sd-seg__pill, .sd-seg[data-shape='square'] .sd-seg__opt { border-radius: 10px; }
.sd-seg__pill { position: absolute; top: 4px; bottom: 4px; left: 0; border-radius: 999px; background: var(--bg); box-shadow: 0 1px 2px rgb(0 0 0 / 0.25), inset 0 0 0 1px var(--line); transition: transform 380ms cubic-bezier(0.3, 1.3, 0.4, 1), width 380ms cubic-bezier(0.3, 1.3, 0.4, 1); }
.sd-seg[data-fill='light'] .sd-seg__pill { box-shadow: 0 1px 3px rgb(0 0 0 / 0.12), inset 0 0 0 1px var(--line); }
.sd-seg__opt { position: relative; z-index: 1; height: 34px; padding: 0 16px; border-radius: 999px; font-weight: 500; font-size: 13.5px; color: var(--mute); white-space: nowrap; transition: color 220ms; }
.sd-seg__opt[aria-checked='true'] { color: var(--fg); }
.sd-seg__opt:hover { color: var(--fg); }
@media (prefers-reduced-motion: reduce) { .sd-seg *, .sd-seg *::before, .sd-seg *::after { animation: none !important; transition: none !important; } }