50: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T2095,'use client' import * as React from 'react' import { motion, useReducedMotion } from 'motion/react' import { useControllableState } from '@radix-ui/react-use-controllable-state' import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' import { cn } from '@/lib/utils' type AnimatedTabsContextValue = { value: string previousValue: string | null direction: number activationMode: 'automatic' | 'manual' shouldReduceMotion: boolean setValue: (value: string) => void registerTrigger: (value: string) => () => void } const AnimatedTabsContext = React.createContext(null) function useAnimatedTabs() { const context = React.useContext(AnimatedTabsContext) if (!context) { throw new Error('AnimatedTabs components must be used within .') } return context } function AnimatedTabs({ value: valueProp, defaultValue, onValueChange, activationMode = 'automatic', className, children, ...props }: React.ComponentProps) { const triggerValues = React.useRef([]) const shouldReduceMotion = useReducedMotion() const lastValue = React.useRef(valueProp ?? defaultValue ?? '') const [previousValue, setPreviousValue] = React.useState(null) const [direction, setDirection] = React.useState(0) const [value = '', setValue] = useControllableState({ prop: valueProp, defaultProp: defaultValue ?? '', onChange: onValueChange, }) const registerTrigger = React.useCallback((triggerValue: string) => { if (!triggerValues.current.includes(triggerValue)) { triggerValues.current.push(triggerValue) } return () => { triggerValues.current = triggerValues.current.filter((value) => value !== triggerValue) } }, []) React.useLayoutEffect(() => { const previous = lastValue.current if (!value || previous === value) return const previousIndex = triggerValues.current.indexOf(previous) const nextIndex = triggerValues.current.indexOf(value) setPreviousValue(previous || null) setDirection(previousIndex === -1 || nextIndex === -1 ? 0 : nextIndex > previousIndex ? 1 : -1) lastValue.current = value }, [value]) React.useEffect(() => { if (!previousValue) return const timeout = window.setTimeout(() => setPreviousValue(null), 240) return () => window.clearTimeout(timeout) }, [previousValue]) return ( {children} ) } function AnimatedTabsList({ className, children, ref, ...props }: React.ComponentProps) { const context = useAnimatedTabs() const listRef = React.useRef>(null) const [indicator, setIndicator] = React.useState({ x: 0, width: 0, ready: false }) const setListRef = React.useCallback( (node: React.ComponentRef | null) => { listRef.current = node if (typeof ref === 'function') ref(node) else if (ref) ref.current = node }, [ref], ) const measureIndicator = React.useCallback(() => { const list = listRef.current const activeTrigger = list?.querySelector( '[data-slot="animated-tabs-trigger"][data-state="active"]', ) if (!list || !activeTrigger) return setIndicator((current) => { const next = { x: activeTrigger.offsetLeft, width: activeTrigger.offsetWidth, ready: true, } return current.x === next.x && current.width === next.width && current.ready === next.ready ? current : next }) }, []) React.useLayoutEffect(measureIndicator, [context.value, children, measureIndicator]) React.useEffect(() => { if (typeof ResizeObserver === 'undefined' || !listRef.current) return const observer = new ResizeObserver(measureIndicator) observer.observe(listRef.current) const activeTrigger = listRef.current.querySelector( '[data-slot="animated-tabs-trigger"][data-state="active"]', ) if (activeTrigger) observer.observe(activeTrigger) return () => observer.disconnect() }, [context.value, measureIndicator]) return ( ) } function AnimatedTabsTrigger({ value, className, children, onClick, onFocus, ...props }: React.ComponentProps) { const context = useAnimatedTabs() const registerTrigger = context.registerTrigger React.useLayoutEffect(() => registerTrigger(value), [registerTrigger, value]) function handleClick(event: React.MouseEvent) { onClick?.(event) if (!event.defaultPrevented) context.setValue(value) } function handleFocus(event: React.FocusEvent) { onFocus?.(event) if (!event.defaultPrevented && context.activationMode === 'automatic') { context.setValue(value) } } return ( {children} ) } function AnimatedTabsViewport({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function AnimatedTabsContent({ value, className, children, tabIndex, ...props }: React.ComponentProps) { const context = useAnimatedTabs() const isActive = context.value === value const isPrevious = !context.shouldReduceMotion && context.previousValue === value const isVisible = isActive || isPrevious const animation = isActive ? { opacity: 1, x: 0, filter: 'blur(0px)' } : { opacity: 0, x: context.shouldReduceMotion ? 0 : context.direction > 0 ? -32 : context.direction < 0 ? 32 : 0, filter: context.shouldReduceMotion ? 'blur(0px)' : 'blur(4px)', } return ( {children} ) } export { AnimatedTabs, AnimatedTabsContent, AnimatedTabsList, AnimatedTabsTrigger, AnimatedTabsViewport, } 4f:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@radix-ui/react-use-controllable-state",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-use-controllable-state","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-use-controllable-state"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L50",null,{"namespace":"@navui","registryDependencies":["tabs"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/registry/components/animated-tabs/animated-tabs.tsx","content":"$52","type":"registry:ui","target":"@components/animated-tabs.tsx"}],"className":"h-[70svh] min-h-80"}]]}]