4b:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4c:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4d:T253c,import { forwardRef, createContext, useContext, useState, useCallback, useRef, useEffect, useId, type HTMLAttributes, type ButtonHTMLAttributes, type ReactNode, type KeyboardEvent, } from 'react' import { cn } from '@/lib/utils' import { useReducedMotion } from '@/hooks/use-reduced-motion' type TabsVariant = 'underline' | 'pill' interface TabsContextValue { activeValue: string setActiveValue: (value: string) => void variant: TabsVariant baseId: string registerTab: (value: string, element: HTMLButtonElement | null) => void getTabElements: () => Map } const TabsContext = createContext(null) function useTabsContext() { const context = useContext(TabsContext) if (!context) { throw new Error('Tabs compound components must be used within a parent') } return context } // --- Tabs Root --- export interface TabsProps extends Omit, 'onChange'> { /** The controlled active tab value */ value?: string /** Callback when active tab changes */ onChange?: (value: string) => void /** The default active tab value for uncontrolled mode */ defaultValue?: string /** Visual variant */ variant?: TabsVariant children: ReactNode } export const Tabs = forwardRef( ({ value, onChange, defaultValue, variant = 'underline', children, className, ...props }, ref) => { const [internalValue, setInternalValue] = useState(defaultValue ?? '') const tabElementsRef = useRef>(new Map()) const baseId = useId() const activeValue = value !== undefined ? value : internalValue const setActiveValue = useCallback( (newValue: string) => { if (value === undefined) { setInternalValue(newValue) } onChange?.(newValue) }, [value, onChange] ) const registerTab = useCallback((tabValue: string, element: HTMLButtonElement | null) => { if (element) { tabElementsRef.current.set(tabValue, element) } else { tabElementsRef.current.delete(tabValue) } }, []) const getTabElements = useCallback(() => tabElementsRef.current, []) return (

{children}

) } ) Tabs.displayName = 'Tabs' // --- TabsList --- export interface TabsListProps extends HTMLAttributes { /** Enable glass morphism background */ glass?: boolean children: ReactNode } export const TabsList = forwardRef( ({ glass = false, children, className, ...props }, ref) => { const { variant, activeValue, getTabElements } = useTabsContext() const listRef = useRef(null) const indicatorRef = useRef(null) const prefersReducedMotion = useReducedMotion() // Merge forwarded ref with internal ref const mergedRef = useCallback( (node: HTMLDivElement | null) => { (listRef as React.MutableRefObject).current = node if (typeof ref === 'function') ref(node) else if (ref) (ref as React.MutableRefObject).current = node }, [ref] ) // Animate indicator position useEffect(() => { const indicator = indicatorRef.current const list = listRef.current if (!indicator || !list) return const tabs = getTabElements() const activeTab = tabs.get(activeValue) if (!activeTab) { indicator.style.opacity = '0' return } const listRect = list.getBoundingClientRect() const tabRect = activeTab.getBoundingClientRect() const left = tabRect.left - listRect.left const width = tabRect.width indicator.style.opacity = '1' indicator.style.transform = `translateX(${left}px)` indicator.style.width = `${width}px` if (variant === 'pill') { indicator.style.height = `${tabRect.height}px` } }, [activeValue, variant, getTabElements]) const isUnderline = variant === 'underline' const isPill = variant === 'pill' return (

{/* Animated indicator */}

{children}

) } ) TabsList.displayName = 'TabsList' // --- TabsTab --- export interface TabsTabProps extends ButtonHTMLAttributes { /** Unique value identifying this tab */ value: string children: ReactNode } export const TabsTab = forwardRef( ({ value, children, className, onKeyDown, ...props }, ref) => { const { activeValue, setActiveValue, variant, baseId, registerTab, getTabElements } = useTabsContext() const internalRef = useRef(null) const isActive = activeValue === value const mergedRef = useCallback( (node: HTMLButtonElement | null) => { internalRef.current = node registerTab(value, node) if (typeof ref === 'function') ref(node) else if (ref) (ref as React.MutableRefObject).current = node }, [ref, registerTab, value] ) const handleKeyDown = useCallback( (e: KeyboardEvent) => { onKeyDown?.(e) if (e.defaultPrevented) return const tabs = getTabElements() const tabValues = Array.from(tabs.keys()) const currentIndex = tabValues.indexOf(value) let targetIndex: number switch (e.key) { case 'ArrowRight': targetIndex = (currentIndex + 1) % tabValues.length break case 'ArrowLeft': targetIndex = (currentIndex - 1 + tabValues.length) % tabValues.length break case 'Home': targetIndex = 0 break case 'End': targetIndex = tabValues.length - 1 break default: return } e.preventDefault() const targetValue = tabValues[targetIndex] const targetElement = tabs.get(targetValue) if (targetElement) { targetElement.focus() setActiveValue(targetValue) } }, [onKeyDown, getTabElements, value, setActiveValue] ) const isUnderline = variant === 'underline' const isPill = variant === 'pill' return ( ) } ) TabsTab.displayName = 'TabsTab' // --- TabsPanel --- export interface TabsPanelProps extends HTMLAttributes { /** The tab value this panel corresponds to */ value: string children: ReactNode } export const TabsPanel = forwardRef( ({ value, children, className, ...props }, ref) => { const { activeValue, baseId } = useTabsContext() const isActive = activeValue === value if (!isActive) return null return (

{children}

) } ) TabsPanel.displayName = 'TabsPanel' 4a:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4b",null,{"namespace":"@n3wth","registryDependencies":["cn","use-reduced-motion"]}]]}],null]}],["$","$L4c",null,{"files":[{"path":"registry/new-york/tabs/tabs.tsx","content":"$4d","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]