Segmented Control

"use client";

import * as React from "react";
import { motion } from "motion/react";

export interface SegmentedOption {
  /** Unique value submitted with forms and passed to `onValueChange`. */
  value: string;
  /** Visible label. With `iconOnly`, it becomes the accessible name. */
  label: string;
  /** Optional leading icon (decorative). */
  icon?: React.ReactNode;
  disabled?: boolean;
}

type Spring = { stiffness: number; damping: number; mass: number };

export interface SegmentedControlProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange" | "children"> {
  options: SegmentedOption[];
  /** Selected value (controlled). */
  value?: string;
  /** Initially selected value (uncontrolled). Defaults to the first enabled option. */
  defaultValue?: string;
  /** Called when the user picks another option. */
  onValueChange?: (value: string) => void;
  /** Accessible name of the radio group. Use this or `aria-labelledby`. */
  label?: string;
  size?: "sm" | "md" | "lg";
  /** "neutral" raises a white thumb; "accent" fills it with the accent colour. */
  variant?: "neutral" | "accent";
  /** Stretch the control and share the width equally between options. */
  fullWidth?: boolean;
  /** Hide the labels visually and show icons only (labels stay the accessible names). */
  iconOnly?: boolean;
  /** Spring that slides the thumb between options. */
  spring?: Spring;
  /** Thumb fill (accent variant) and focus ring colour. */
  accent?: string;
  /** Disable the whole control. */
  disabled?: boolean;
  /** Adds a hidden input with this name so the value submits with a form. */
  name?: string;
}

const SIZES = {
  sm: { root: "h-8 rounded-[10px] p-[3px]", item: "gap-1.5 rounded-[7px] px-2.5 text-xs", icon: "[&_svg]:size-3.5", square: "w-[26px]" },
  md: { root: "h-10 rounded-[12px] p-1", item: "gap-2 rounded-[8px] px-3.5 text-sm", icon: "[&_svg]:size-4", square: "w-8" },
  lg: { root: "h-12 rounded-[14px] p-1", item: "gap-2 rounded-[10px] px-5 text-[15px]", icon: "[&_svg]:size-[18px]", square: "w-10" },
} as const;

const THUMB = {
  neutral:
    "bg-white shadow-[0_1px_2px_rgb(0_0_0/0.08),0_0_0_1px_rgb(0_0_0/0.05)] dark:bg-zinc-700 dark:shadow-[0_1px_2px_rgb(0_0_0/0.5),0_0_0_1px_rgb(255_255_255/0.07)]",
  accent: "bg-[var(--sc-accent)] shadow-[0_1px_2px_rgb(0_0_0/0.12)]",
} as const;

const TEXT = {
  neutral: "aria-checked:text-zinc-950 dark:aria-checked:text-white",
  accent: "aria-checked:text-zinc-950 dark:aria-checked:text-zinc-950",
} as const;

function subscribeReducedMotion(callback: () => void) {
  const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
  mq.addEventListener("change", callback);
  return () => mq.removeEventListener("change", callback);
}

function usePrefersReducedMotion() {
  return React.useSyncExternalStore(
    subscribeReducedMotion,
    () => window.matchMedia("(prefers-reduced-motion: reduce)").matches,
    () => false,
  );
}

/**
 * A segmented control built on the WAI-ARIA radio group pattern (not tabs): one option is always
 * checked, arrow keys move focus and selection together (roving tabindex), and a single thumb
 * slides between options with a shared-layout spring.
 */
export function SegmentedControl({
  options,
  value,
  defaultValue,
  onValueChange,
  label,
  size = "md",
  variant = "neutral",
  fullWidth = false,
  iconOnly = false,
  spring = { stiffness: 420, damping: 34, mass: 0.8 },
  accent = "#FF7448",
  disabled = false,
  name,
  className = "",
  style,
  ...props
}: SegmentedControlProps) {
  const id = React.useId();
  const reduceMotion = usePrefersReducedMotion();
  const radioRefs = React.useRef(new Map<string, HTMLButtonElement>());
  const enabled = disabled ? [] : options.filter((option) => !option.disabled);
  const [internal, setInternal] = React.useState(defaultValue ?? options.find((o) => !o.disabled)?.value);
  const selected = value ?? internal;
  // Tab lands on the checked radio; if it is disabled (or nothing is checked) on the first enabled one.
  const tabStop = enabled.some((o) => o.value === selected) ? selected : enabled[0]?.value;
  const s = SIZES[size];

  const select = (next: string) => {
    if (next === selected) return;
    if (value === undefined) setInternal(next);
    onValueChange?.(next);
  };

  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
    if (!enabled.length) return;
    const current = (event.target as HTMLElement).dataset.value;
    const index = enabled.findIndex((o) => o.value === current);
    let nextIndex: number;
    switch (event.key) {
      case "ArrowRight":
      case "ArrowDown":
        nextIndex = (index + 1) % enabled.length;
        break;
      case "ArrowLeft":
      case "ArrowUp":
        nextIndex = (index - 1 + enabled.length) % enabled.length;
        break;
      case "Home":
        nextIndex = 0;
        break;
      case "End":
        nextIndex = enabled.length - 1;
        break;
      case " ":
        // Space checks the focused radio (it is normally already checked).
        event.preventDefault();
        if (current) select(current);
        return;
      default:
        return;
    }
    event.preventDefault();
    const next = enabled[nextIndex];
    radioRefs.current.get(next.value)?.focus();
    select(next.value);
  };

  const transition = reduceMotion ? { duration: 0 } : { type: "spring" as const, ...spring };

  return (
    <div
      role="radiogroup"
      aria-label={label}
      aria-disabled={disabled || undefined}
      onKeyDown={handleKeyDown}
      className={`relative ${fullWidth ? "flex w-full" : "inline-flex"} select-none items-stretch border border-zinc-900/[0.07] bg-zinc-900/[0.045] dark:border-white/[0.07] dark:bg-white/[0.05] ${
        s.root
      } ${disabled ? "opacity-50" : ""} ${className}`}
      style={{ ["--sc-accent" as string]: accent, ...style }}
      {...props}
    >
      {options.map((option, index) => {
        const isChecked = option.value === selected;
        const isDisabled = disabled || option.disabled;
        return (
          <React.Fragment key={option.value}>
            {/* Hairline divider between two unselected neighbours, like a native segmented control. */}
            {index > 0 && (
              <span
                aria-hidden="true"
                className={`my-[22%] w-px shrink-0 bg-zinc-900/10 transition-opacity duration-200 motion-reduce:transition-none dark:bg-white/10 ${
                  isChecked || options[index - 1].value === selected ? "opacity-0" : "opacity-100"
                }`}
              />
            )}
            <button
              ref={(node) => {
                if (node) radioRefs.current.set(option.value, node);
                else radioRefs.current.delete(option.value);
              }}
              type="button"
              role="radio"
              data-value={option.value}
              aria-checked={isChecked}
              aria-label={iconOnly ? option.label : undefined}
              title={iconOnly ? option.label : undefined}
              tabIndex={option.value === tabStop ? 0 : -1}
              disabled={isDisabled}
              onClick={() => select(option.value)}
              className={`relative inline-flex min-w-0 items-center justify-center whitespace-nowrap font-medium tracking-tight text-zinc-500 outline-hidden transition-colors duration-200 hover:text-zinc-900 focus-visible:z-20 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-solid focus-visible:outline-[var(--sc-accent)] disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-100 ${
                s.item
              } ${TEXT[variant]} ${fullWidth ? "flex-1" : ""} ${iconOnly ? `${s.square} px-0` : ""}`}
            >
              {isChecked && (
                <motion.span
                  aria-hidden="true"
                  // useId scopes the layoutId, so several controls on one page never share a thumb.
                  layoutId={`${id}-thumb`}
                  transition={transition}
                  className={`absolute inset-0 rounded-[inherit] ${THUMB[variant]}`}
                />
              )}
              {option.icon && (
                <span aria-hidden="true" className={`relative z-10 inline-flex shrink-0 ${s.icon}`}>
                  {option.icon}
                </span>
              )}
              {!iconOnly && <span className="relative z-10 truncate">{option.label}</span>}
            </button>
          </React.Fragment>
        );
      })}
      {name !== undefined && <input type="hidden" name={name} value={selected ?? ""} disabled={disabled} />}
    </div>
  );
}