Segmented control

"use client";

import { useEffect, useId, useRef, useState, type ButtonHTMLAttributes, type InputHTMLAttributes, type ReactNode } from "react";
import { animate, motion, useMotionValue, useReducedMotion, useTransform } from "motion/react";
import { Check } from "lucide-react";
import { cn } from "@/lib/utils";

type ThemeProps = { colorTheme?: "white" | "black"; className?: string };
type Choice = { value: string; label: ReactNode; disabled?: boolean };

export function IconButton3D({ label, colorTheme = "white", className, children, pressed, ...props }: ThemeProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "aria-label"> & { label: string; pressed?: boolean }) {
  return <button {...props} type={props.type ?? "button"} aria-label={label} aria-pressed={pressed} data-theme={colorTheme} data-selected={pressed} className={cn("glass-control glass-icon", className)}>{children}</button>;
}

type CheckProps = ThemeProps & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "className"> & { label: ReactNode };

export function Checkbox3D({ label, colorTheme = "black", className, ...props }: CheckProps) {
  return (
    <label className={cn("glass-check-label", className)}>
      <input {...props} type="checkbox" className="glass-native-input" />
      <span aria-hidden="true" data-theme={colorTheme} className="glass-control glass-check"><Check size={15} strokeWidth={3} /></span>
      <span>{label}</span>
    </label>
  );
}

export function Switch3D({ label, colorTheme = "black", className, ...props }: CheckProps) {
  return (
    <label className={cn("glass-check-label", className)}>
      <input {...props} type="checkbox" role="switch" className="glass-native-input" />
      <span aria-hidden="true" data-theme={colorTheme} className="glass-switch"><span className="glass-control glass-switch-thumb" data-theme="white" style={{ transform: "translateX(calc(var(--switch-progress) * 20px))", transition: "none" }} /></span>
      <span>{label}</span>
    </label>
  );
}

type ChoiceProps = ThemeProps & { options: Choice[]; value?: string; defaultValue?: string; onValueChange?: (value: string) => void; label: string; disabled?: boolean };

export function SegmentedControl3D({ options, value, defaultValue, onValueChange, label, colorTheme = "black", className, disabled = false }: ChoiceProps) {
  const name = useId();
  const [internal, setInternal] = useState(defaultValue ?? options.find((option) => !option.disabled)?.value ?? "");
  const selected = value ?? internal;
  return (
    <div role="radiogroup" aria-label={label} className={cn("glass-tray", className)}>
      {options.map((option) => (
        <label key={option.value} className="glass-segment-label">
          <input type="radio" name={name} value={option.value} checked={selected === option.value} disabled={disabled || option.disabled} className="glass-native-input" onChange={() => { setInternal(option.value); onValueChange?.(option.value); }} />
          <span data-theme={colorTheme} className="glass-control glass-segment">{option.label}</span>
        </label>
      ))}
    </div>
  );
}

type Tab = Choice & { content: ReactNode };
export function Tabs3D({ tabs, value, defaultValue, onValueChange, label, colorTheme = "black", className }: Omit<ChoiceProps, "options" | "disabled"> & { tabs: Tab[] }) {
  const id = useId();
  const reducedMotion = useReducedMotion();
  const trayRef = useRef<HTMLDivElement>(null);
  const initialized = useRef(false);
  const left = useMotionValue(0);
  const indicatorWidth = useMotionValue(0);
  const opacity = useTransform(indicatorWidth, (width) => width > 0 ? 1 : 0);
  const [internal, setInternal] = useState(defaultValue ?? tabs.find((tab) => !tab.disabled)?.value ?? "");
  const selected = value ?? internal;
  const [hovered, setHovered] = useState<string | null>(null);

  useEffect(() => {
    const tray = trayRef.current;
    if (!tray) return;
    let stopLeft = () => {};
    let stopWidth = () => {};
    const measure = () => {
      const active = tray.querySelector<HTMLButtonElement>('[aria-selected="true"]');
      if (!active) return;
      stopLeft();
      stopWidth();
      if (!initialized.current || reducedMotion) {
        left.set(active.offsetLeft);
        indicatorWidth.set(active.offsetWidth);
        initialized.current = true;
      } else {
        const transition = { duration: 0.16, ease: [0.22, 1, 0.36, 1] as [number, number, number, number] };
        const slide = animate(left, active.offsetLeft, transition);
        const resize = animate(indicatorWidth, active.offsetWidth, transition);
        stopLeft = () => slide.stop();
        stopWidth = () => resize.stop();
      }
    };
    measure();
    const observer = new ResizeObserver(measure);
    observer.observe(tray);
    tray.querySelectorAll('button').forEach((button) => observer.observe(button));
    return () => { observer.disconnect(); stopLeft(); stopWidth(); };
  }, [selected, left, indicatorWidth, reducedMotion]);
  const select = (next: string) => { setInternal(next); onValueChange?.(next); };
  return (
    <div className={className}>
      <div ref={trayRef} role="tablist" aria-label={label} className="glass-tray glass-tabs-tray max-w-full" style={{ overflow: "clip" }}>
        <motion.span
          aria-hidden="true"
          className="glass-tab-indicator pointer-events-none rounded-full"
          style={{ position: "absolute", top: 5, bottom: 5, left: 0, zIndex: 0, x: left, width: indicatorWidth, opacity }}
        >
          <motion.span
            data-theme={colorTheme}
            className="glass-control rounded-full"
            style={{ position: "absolute", inset: 0, transition: "none" }}
            animate={{ scale: !reducedMotion && hovered === selected ? 1.04 : 1 }}
            transition={{ duration: reducedMotion ? 0 : 0.14, ease: "easeOut" }}
          />
        </motion.span>
        {tabs.map((tab, index) => (
          <button key={tab.value} type="button" role="tab" id={`${id}-tab-${index}`} aria-selected={selected === tab.value} aria-controls={`${id}-panel-${index}`} tabIndex={selected === tab.value ? 0 : -1} disabled={tab.disabled} data-selected={selected === tab.value} data-theme={colorTheme} className="glass-tab" onPointerEnter={(event) => { if (event.pointerType === "mouse" && !tab.disabled) setHovered(tab.value); }} onPointerLeave={() => setHovered(null)} onClick={() => select(tab.value)} onKeyDown={(event) => {
            if (!["ArrowRight", "ArrowLeft", "Home", "End"].includes(event.key)) return;
            event.preventDefault();
            const enabled = tabs.filter((item) => !item.disabled);
            if (!enabled.length) return;
            const current = enabled.findIndex((item) => item.value === tab.value);
            const next = event.key === "Home" ? enabled[0] : event.key === "End" ? enabled[enabled.length - 1] : enabled[(current + (event.key === "ArrowRight" ? 1 : -1) + enabled.length) % enabled.length];
            select(next.value);
            const nextIndex = tabs.findIndex((item) => item.value === next.value);
            document.getElementById(`${id}-tab-${nextIndex}`)?.focus();
          }}>
            {tab.label}
          </button>
        ))}
      </div>
      {tabs.map((tab, index) => <div key={tab.value} role="tabpanel" id={`${id}-panel-${index}`} aria-labelledby={`${id}-tab-${index}`} hidden={selected !== tab.value} tabIndex={0} className="mt-5 text-sm leading-relaxed text-zinc-600">{tab.content}</div>)}
    </div>
  );
}

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

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