{"$schema":"https://ui.artbloom.tech/schema/registry-item.json","name":"segmented-control","type":"registry:ui","title":"Segmented Control","description":"An iOS-style segmented control with a sliding indicator that tracks the active segment, full keyboard support and roving focus. One file, no dependencies.","author":"@artbloom","dependencies":[],"registryDependencies":[],"files":[{"path":"components/ui/segmented-control.tsx","target":"components/ui/segmented-control.tsx","content":"'use client';\n\nimport {\n useCallback,\n useEffect,\n useId,\n useRef,\n useState,\n type KeyboardEvent,\n type ReactNode,\n} from 'react';\n\n/**\n * A sliding-pill segmented control — the iOS pattern, built with one accent.\n *\n * There is a single indicator, not one box per state: a pill that lives behind the\n * active segment and glides to the next on a CSS transform. The geometry is pure\n * arithmetic rather than measurement, because the segments are equal width — the pill\n * is one nth of the track wide and travels exactly one segment per index, so a\n * `translateX(value * 100%)` puts it under segment `value` at any track size or zoom.\n *\n * FULL mode is a live radiogroup: arrow keys move the selection, tabindex roves so the\n * group is one tab stop, and a slow auto-cycle glides the pill on its own until a\n * pointer or focus arrives. COMPACT mode is the catalogue card — the same look frozen\n * on one selection, out of the tab order, with no timer running.\n */\n\n/** prefers-reduced-motion, read in JS so the auto-cycle can be skipped outright. The\n * CSS transition is disabled separately by Tailwind's `motion-reduce:` variant, so\n * the pill never eases even before this hook has hydrated. */\nfunction usePrefersReducedMotion(): boolean {\n const [reduced, setReduced] = useState(false);\n useEffect(() => {\n if (typeof window === 'undefined' || !window.matchMedia) return;\n const query = window.matchMedia('(prefers-reduced-motion: reduce)');\n const update = () => setReduced(query.matches);\n update();\n query.addEventListener('change', update);\n return () => query.removeEventListener('change', update);\n }, []);\n return reduced;\n}\n\ntype Variant = 'neutral' | 'accent';\n\ninterface Segment {\n value: string;\n label: string;\n icon?: ReactNode;\n}\n\ninterface SegmentsProps {\n options: Segment[];\n /** Index of the active segment. */\n value: number;\n onChange: (index: number) => void;\n /** Visible caption, also the radiogroup's accessible name. */\n label: string;\n variant?: Variant;\n /** FULL sets true; COMPACT sets false to drop the tab stop and key handling. */\n interactive?: boolean;\n compact?: boolean;\n}\n\nconst ICON = 'h-4 w-4 shrink-0';\n\nfunction OverviewIcon() {\n return (\n \n );\n}\n\nfunction ActivityIcon() {\n return (\n \n );\n}\n\nfunction SettingsIcon() {\n return (\n \n );\n}\n\nfunction Segments({\n options,\n value,\n onChange,\n label,\n variant = 'neutral',\n interactive = true,\n compact = false,\n}: SegmentsProps) {\n const uid = useId();\n const buttons = useRef<(HTMLButtonElement | null)[]>([]);\n const count = options.length;\n\n // Arrow keys walk the group and carry focus with the selection; roving tabindex\n // keeps the whole control a single tab stop. Home/End jump to the ends.\n const onKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if (!interactive) return;\n let next = value;\n if (event.key === 'ArrowRight' || event.key === 'ArrowDown') next = (value + 1) % count;\n else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') next = (value - 1 + count) % count;\n else if (event.key === 'Home') next = 0;\n else if (event.key === 'End') next = count - 1;\n else return;\n event.preventDefault();\n onChange(next);\n buttons.current[next]?.focus();\n },\n [count, interactive, onChange, value],\n );\n\n return (\n
\n \n {label}\n \n \n {/* The one moving part: a pill one segment wide, slid to the active index. */}\n \n {options.map((option, index) => {\n const active = index === value;\n const activeText = variant === 'accent' ? 'text-white' : 'text-foreground';\n return (\n {\n buttons.current[index] = node;\n }}\n type=\"button\"\n role=\"radio\"\n aria-checked={active}\n tabIndex={!interactive ? -1 : active ? 0 : -1}\n onClick={interactive ? () => onChange(index) : undefined}\n className={[\n 'relative z-10 flex items-center justify-center gap-1.5 rounded-full font-medium transition-colors',\n 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n compact ? 'text-xs' : 'text-sm',\n interactive ? 'cursor-pointer' : 'cursor-default',\n active ? activeText : 'text-muted-foreground',\n interactive && !active ? 'hover:text-foreground' : '',\n ].join(' ')}\n style={{ gridColumn: index + 1 }}\n >\n {option.icon}\n {option.label}\n \n );\n })}\n
\n \n );\n}\n\nconst RANGES: Segment[] = [\n { value: 'day', label: 'Day' },\n { value: 'week', label: 'Week' },\n { value: 'month', label: 'Month' },\n];\n\nconst SECTIONS: Segment[] = [\n { value: 'overview', label: 'Overview', icon: },\n { value: 'activity', label: 'Activity', icon: },\n { value: 'settings', label: 'Settings', icon: },\n];\n\nexport function SegmentedControl({\n compact = false,\n className,\n}: {\n compact?: boolean;\n className?: string;\n}) {\n const reduced = usePrefersReducedMotion();\n const [range, setRange] = useState(1);\n const [section, setSection] = useState(0);\n // Two reasons to pause the auto-cycle, tracked apart: a pointer that leaves while\n // focus stays inside must not restart the timer, and vice versa.\n const [hovered, setHovered] = useState(false);\n const [focused, setFocused] = useState(false);\n const engaged = hovered || focused;\n\n // The pill glides on its own until someone arrives, so the static card looks alive.\n // Skipped in compact (a frozen card), under reduced motion, and while engaged.\n useEffect(() => {\n if (compact || reduced || engaged) return;\n const id = window.setInterval(() => {\n setRange((value) => (value + 1) % RANGES.length);\n setSection((value) => (value + 1) % SECTIONS.length);\n }, 2200);\n return () => window.clearInterval(id);\n }, [compact, reduced, engaged]);\n\n const wrap = ['flex w-full items-center justify-center', className].filter(Boolean).join(' ');\n\n if (compact) {\n // The catalogue card: both controls, one selection each, nothing tabbable, and\n // centred on `h-full` so the pair fills the frame instead of pinning to the top\n // over a slab of empty space.\n return (\n