Tabs Subtle

1'use client'
2 
3import {
4  Children,
5  createContext,
6  forwardRef,
7  isValidElement,
8  useContext,
9  useId,
10  useMemo,
11  useRef,
12  useState,
13  type HTMLAttributes,
14  type KeyboardEvent,
15  type ReactElement,
16  type ReactNode,
17} from 'react'
18import { motion, useReducedMotion } from 'motion/react'
19import { cn } from '@/lib/utils'
20import { springs } from '@/lib/motion-tokens'
21 
22interface TabsSubtleContextValue {
23  selectedValue: string
24  onSelect: (value: string) => void
25  idPrefix: string
26  layoutId: string
27}
28 
29const TabsSubtleContext = createContext<TabsSubtleContextValue | null>(null)
30 
31function useTabsSubtleContext() {
32  const ctx = useContext(TabsSubtleContext)
33  if (!ctx) throw new Error('TabsSubtleItem/TabsSubtlePanel must be used within TabsSubtle')
34  return ctx
35}
36 
37export interface TabsSubtleProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
38  children: ReactNode
39  value?: string
40  defaultValue?: string
41  onValueChange?: (value: string) => void
42  idPrefix?: string
43}
44 
45export const TabsSubtle = forwardRef<HTMLDivElement, TabsSubtleProps>(
46  (
47    { children, value, defaultValue, onValueChange, idPrefix: idPrefixProp, className, ...props },
48    ref,
49  ) => {
50    const containerRef = useRef<HTMLDivElement>(null)
51    const generatedId = useId()
52    const layoutId = useId()
53    const idPrefix = idPrefixProp ?? generatedId
54 
55    const items = useMemo(
56      () =>
57        Children.toArray(children).filter(
58          (child): child is ReactElement<{ value: string }> =>
59            isValidElement(child) &&
60            typeof child.props === 'object' &&
61            child.props !== null &&
62            'value' in child.props,
63        ),
64      [children],
65    )
66 
67    const isControlled = value !== undefined
68    const [internal, setInternal] = useState(defaultValue ?? items[0]?.props.value ?? '')
69    const selectedValue = isControlled ? value : internal
70 
71    const onSelect = (next: string) => {
72      if (!isControlled) setInternal(next)
73      onValueChange?.(next)
74    }
75 
76    const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
77      const els = Array.from(
78        containerRef.current?.querySelectorAll('[role="tab"]') ?? [],
79      ) as HTMLElement[]
80      const currentIdx = els.findIndex((el) => el === document.activeElement)
81      if (currentIdx === -1) return
82 
83      if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(e.key)) {
84        e.preventDefault()
85        const dir = ['ArrowRight', 'ArrowDown'].includes(e.key) ? 1 : -1
86// … truncated