"use client"; import type { HTMLAttributes, KeyboardEvent } from "react"; import { useEffect, useLayoutEffect, useRef, useState } from "react"; const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect; export type SegmentedOption = { value: string; label: string; disabled?: boolean }; export type SegmentedControlProps = Omit, "onChange" | "defaultValue"> & { options: SegmentedOption[]; /** Accessible name of the radio group. */ label: string; value?: string; defaultValue?: string; onValueChange?: (value: string) => void; size?: "sm" | "md"; /** Moves the indicator without a transition. */ reducedMotion?: boolean; }; export function SegmentedControl({ options, label, value, defaultValue, onValueChange, size = "md", reducedMotion = false, className = "", ...props }: SegmentedControlProps) { const [internalValue, setInternalValue] = useState(defaultValue ?? options.find((option) => !option.disabled)?.value ?? ""); const selected = value !== undefined ? value : internalValue; const root = useRef(null); const buttons = useRef(new Map()); const [indicator, setIndicator] = useState<{ left: number; width: number } | null>(null); useIsomorphicLayoutEffect(() => { const measure = () => { const active = buttons.current.get(selected); if (!active) return setIndicator(null); setIndicator({ left: active.offsetLeft, width: active.offsetWidth }); }; measure(); if (typeof ResizeObserver === "undefined" || !root.current) return; const observer = new ResizeObserver(measure); observer.observe(root.current); return () => observer.disconnect(); }, [selected, options]); function select(next: string) { if (value === undefined) setInternalValue(next); if (next !== selected) onValueChange?.(next); } function handleKeyDown(event: KeyboardEvent, index: number) { const enabled = options.map((option, optionIndex) => ({ option, optionIndex })).filter((item) => !item.option.disabled); const position = enabled.findIndex((item) => item.optionIndex === index); let target: number | undefined; if (event.key === "ArrowRight" || event.key === "ArrowDown") target = (position + 1) % enabled.length; else if (event.key === "ArrowLeft" || event.key === "ArrowUp") target = (position - 1 + enabled.length) % enabled.length; else if (event.key === "Home") target = 0; else if (event.key === "End") target = enabled.length - 1; if (target === undefined) return; event.preventDefault(); const next = enabled[target].option.value; select(next); buttons.current.get(next)?.focus(); } const height = size === "sm" ? "h-7 px-2.5 text-[13px]" : "h-8 px-3.5 text-sm"; const measured = indicator !== null && indicator.width > 0; return (

{measured ? ( ) : null} {options.map((option, index) => { const checked = option.value === selected; return ( ); })}

); }