Highlight Tabs

1"use client";
2 
3import * as React from "react";
4import { LayoutGroup, motion, useReducedMotion } from "motion/react";
5 
6import { cn } from "@/lib/utils";
7 
8export type HighlightTab = {
9  value: string;
10  label: React.ReactNode;
11  disabled?: boolean;
12};
13 
14export type HighlightTabsProps = Omit<
15  React.ComponentPropsWithoutRef<"div">,
16  "defaultValue" | "onChange"
17> & {
18  tabs: HighlightTab[];
19  value?: string;
20  defaultValue?: string;
21  onValueChange?: (value: string) => void;
22  selectOnHover?: boolean;
23  listClassName?: string;
24  tabClassName?: string;
25  indicatorClassName?: string;
26  "aria-label"?: string;
27};
28 
29function getEnabledTabs(tabs: HighlightTab[]) {
30  return tabs.filter((tab) => !tab.disabled);
31}
32 
33function getInitialValue(tabs: HighlightTab[], value?: string) {
34  const enabledTabs = getEnabledTabs(tabs);
35 
36  return enabledTabs.some((tab) => tab.value === value)
37    ? value
38    : enabledTabs[0]?.value;
39}
40 
41export function HighlightTabs({
42  tabs,
43  value,
44  defaultValue,
45  onValueChange,
46  selectOnHover = true,
47  className,
48  listClassName,
49  tabClassName,
50  indicatorClassName,
51  "aria-label": ariaLabel = "Tabs",
52  ...props
53}: HighlightTabsProps) {
54  const shouldReduceMotion = useReducedMotion();
55  const reactId = React.useId();
56  const layoutId = `highlight-tabs-${reactId}`;
57  const isControlled = value !== undefined;
58  const tabRefs = React.useRef(new Map<string, HTMLButtonElement>());
59  const [uncontrolledValue, setUncontrolledValue] = React.useState(
60    () => getInitialValue(tabs, defaultValue) ?? "",
61  );
62 
63  const enabledTabs = React.useMemo(() => getEnabledTabs(tabs), [tabs]);
64  const activeValue = isControlled
65    ? value
66    : enabledTabs.some((tab) => tab.value === uncontrolledValue)
67      ? uncontrolledValue
68      : enabledTabs[0]?.value;
69 
70  const setActiveValue = React.useCallback(
71    (nextValue: string) => {
72      const nextTab = tabs.find((tab) => tab.value === nextValue);
73 
74      if (!nextTab || nextTab.disabled || nextValue === activeValue) return;
75 
76      if (!isControlled) {
77        setUncontrolledValue(nextValue);
78      }
79 
80      onValueChange?.(nextValue);
81    },
82    [activeValue, isControlled, onValueChange, tabs],
83  );
84 
85  const focusTab = React.useCallback((nextValue: string) => {
86    tabRefs.current.get(nextValue)?.focus();
87  }, []);
88 
89  const handleKeyDown = React.useCallback(
90    (event: React.KeyboardEvent<HTMLButtonElement>, currentValue: string) => {
91      if (enabledTabs.length === 0) return;
92 
93// … truncated