52: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"] 53:T1447,'use client' import { useEffect, useRef } from 'react' import { cn } from '@/lib/utils' /** * @title Sliding tabs * @description Segmented tabs whose pill indicator slides to follow the active tab. * * Adapted from Transitions.dev "Tabs sliding". * * Measure the active tab's offsetLeft/offsetWidth and tween transform + width. Snap without * animating on first paint and on resize, so the pill never drifts away from its tab — a tweened * initial position would slide in from the left on every mount. */ const DEFAULT_DURATION_MS = 250 const EASE = 'cubic-bezier(0.22, 1, 0.36, 1)' export interface SlidingTabItem { value: T label: React.ReactNode } const SHAPES = { rounded: { root: 'rounded-lg', pill: 'rounded-md', height: 'h-8', pillHeight: 'h-8', top: 'top-[3px]' }, pill: { root: 'rounded-full', pill: 'rounded-full', height: 'h-[30px]', pillHeight: 'h-[30px]', top: 'top-[3px]' }, } as const export function SlidingTabs({ items, value, onValueChange, label, shape = 'rounded', durationMs = DEFAULT_DURATION_MS, fill = false, className, tabClassName, }: { items: ReadonlyArray> value: T onValueChange: (value: T) => void /** Accessible name for the tablist. */ label: string /** `rounded` is the squared segmented control; `pill` is the fully-round capsule. */ shape?: keyof typeof SHAPES /** Travel time for the pill. Slow it down for a large, leisurely hero control. */ durationMs?: number /** Stretch the tabs to fill their container, for a segmented control in a narrow column. */ fill?: boolean className?: string /** Extra classes for each tab button, for per-block touches like `capitalize`. */ tabClassName?: string }) { const style = SHAPES[shape] const duration = `${durationMs}ms` const pillRef = useRef(null) const tabRefs = useRef>([]) const activeIndexRef = useRef(0) const activeIndex = Math.max( 0, items.findIndex(item => item.value === value) ) activeIndexRef.current = activeIndex const moveTo = (index: number, animate: boolean) => { const tab = tabRefs.current[index] const pill = pillRef.current if (!tab || !pill) { return } if (!animate) { const previous = pill.style.transition pill.style.transition = 'none' pill.style.transform = `translateX(${tab.offsetLeft}px)` pill.style.width = `${tab.offsetWidth}px` void pill.offsetWidth pill.style.transition = previous return } pill.style.transform = `translateX(${tab.offsetLeft}px)` pill.style.width = `${tab.offsetWidth}px` } const mountedRef = useRef(false) /** * The pill follows `value`, never the click. A parent that ignores or overrides the change keeps * the pill on the tab that is really selected, so no tab can be left unreachable. */ useEffect(() => { if (!mountedRef.current) { mountedRef.current = true return } moveTo(activeIndex, true) }, [activeIndex]) useEffect(() => { const frame = window.requestAnimationFrame(() => moveTo(activeIndexRef.current, false)) const onResize = () => moveTo(activeIndexRef.current, false) window.addEventListener('resize', onResize) return () => { window.cancelAnimationFrame(frame) window.removeEventListener('resize', onResize) } }, []) return (

{items.map((item, index) => { const selected = item.value === value return ( ) })}

) } export default SlidingTabs 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L52",null,{"files":[{"path":"storage/app/registry-sources/motion/sliding-tabs.tsx","content":"$53","type":"registry:ui","target":"@components/motion/sliding-tabs.tsx"}],"className":"h-[70svh] min-h-80"}]]}]