Segmented Control

npm install motion clsx tailwind-merge

import { clsx, type ClassValue } from "clsx";
import { extendTailwindMerge } from "tailwind-merge";

/* tailwind-merge must know the site's type scale (globals.css) is a font size, not a text color — otherwise
   cn("text-h6 text-muted-foreground") drops text-h6. */
const twMerge = extendTailwindMerge({
  extend: { classGroups: { "font-size": [{ text: ["display", "h1", "h2", "h3", "h4", "h5", "h6"] }] } },
});

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

"use client";

import * as React from "react";
import { motion, type Transition } from "motion/react";
import { cn } from "@/lib/utils";

/*
 * Segmented Control — a shadcn Tabs-style row of options with one selected (from the Nitip "Switch").
 * The selected fill slides to the chosen option (Nitip swaps it instantly). Unselected options brighten on hover
 * instead of Nitip's fade to 50%, which is too faint on muted text.
 * Keyboard: arrow keys, Home and End move the selection (radio group pattern).
 */

const spring: Transition = { type: "spring", bounce: 0.15, duration: 0.45 };

export type SegmentedOption<T extends string> = { value: T; label: React.ReactNode; disabled?: boolean };

export type SegmentedControlProps<T extends string> = {
  options: SegmentedOption<T>[];
  value?: T;
  defaultValue?: T;
  onValueChange?: (value: T) => void;
  /** Accessible name of the group. */
  label: string;
  size?: "sm" | "md";
  className?: string;
};

export function SegmentedControl<T extends string>({
  options,
  value,
  defaultValue,
  onValueChange,
  label,
  size = "md",
  className,
}: SegmentedControlProps<T>) {
  const [internal, setInternal] = React.useState<T | undefined>(defaultValue ?? options[0]?.value);
  const selected = value ?? internal;
  const layoutId = React.useId();
  const refs = React.useRef<(HTMLButtonElement | null)[]>([]);

  function select(next: T) {
    if (value === undefined) setInternal(next);
    onValueChange?.(next);
  }

  function onKeyDown(event: React.KeyboardEvent, index: number) {
    const enabled = options.map((o, i) => (o.disabled ? -1 : i)).filter((i) => i >= 0);
    const at = enabled.indexOf(index);
    let target: number | undefined;
    if (event.key === "ArrowRight" || event.key === "ArrowDown") target = enabled[(at + 1) % enabled.length];
    else if (event.key === "ArrowLeft" || event.key === "ArrowUp")
      target = enabled[(at - 1 + enabled.length) % enabled.length];
    else if (event.key === "Home") target = enabled[0];
    else if (event.key === "End") target = enabled[enabled.length - 1];
    if (target === undefined) return;
    event.preventDefault();
    select(options[target].value);
    refs.current[target]?.focus();
  }

  return (
    <div
      role="radiogroup"
      aria-label={label}
      className={cn(
        "inline-flex w-fit items-center justify-center rounded-lg bg-muted p-[3px] text-muted-foreground",
        size === "sm" ? "h-8" : "h-9",
        className,
      )}
    >
      {options.map((option, index) => {
        const active = option.value === selected;
        return (
          <button
            key={option.value}
            ref={(el) => {
              refs.current[index] = el;
            }}
            type="button"
            role="radio"
            aria-checked={active}
            disabled={option.disabled}
            tabIndex={active ? 0 : -1}
            onClick={() => select(option.value)}
            onKeyDown={(e) => onKeyDown(e, index)}
            className={cn(
              "relative inline-flex h-full cursor-pointer items-center justify-center rounded-md border border-transparent font-medium whitespace-nowrap transition-colors duration-200 outline-none",
              "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
              "disabled:pointer-events-none disabled:opacity-50",
              size === "sm" ? "px-2.5 text-xs" : "px-3 text-sm",
              active ? "text-foreground" : "text-muted-foreground hover:text-foreground",
            )}
          >
            {active && (
              <motion.span
                layoutId={layoutId}
                transition={spring}
                className="absolute -inset-px rounded-md border border-transparent bg-background shadow-sm dark:border-input dark:bg-input/30"
                aria-hidden
              />
            )}
            <span className="relative">{option.label}</span>
          </button>
        );
      })}
    </div>
  );
}