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[544296,["/_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"],"ItemStyles"] 52:I[34002,["/_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"],"CodeEditor"] 53: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"] 54:T24f3,// Hairline UI · feature-tabs · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components "use client"; import * as React from "react"; /* ───────────────────────────────────────────────────────── * FEATURE TABS: one panel, many features * * tabs the line under the chosen tab slides over with a * little give * autoplay that line fills like a progress bar; when it's * full the next tab takes over. Pointing at it pauses * panel its height eases to the new content while the * content slides in from the side you went, through * a light blur * * A real tablist: arrow keys, Home and End move between tabs. * ───────────────────────────────────────────────────────── */ export interface FeatureTab { id: string; label: string; content: React.ReactNode; } export interface FeatureTabsProps extends Omit, "onChange"> { tabs: FeatureTab[]; value?: string; defaultValue?: string; onValueChange?: (id: string) => void; /** Move to the next tab every this many ms. Pointing at the tabs pauses it. */ autoplay?: number; } type Leaving = { id: string; dir: number; key: number }; const EASE = "cubic-bezier(0.16,1,0.3,1)"; const THROW = "cubic-bezier(0.34,1.36,0.64,1)"; const MORPH = 460; const FOCUS = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"; const reducedQuery = "(prefers-reduced-motion: reduce)"; const subscribeReduced = (onChange: () => void) => { const query = window.matchMedia(reducedQuery); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); }; const useReducedMotion = () => React.useSyncExternalStore(subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false); function Pane({ children, dir, leaving, reduced, paneRef }: { children: React.ReactNode; dir: number; leaving: boolean; reduced: boolean; paneRef?: React.Ref }) { const ref = React.useRef(null); React.useLayoutEffect(() => { const el = ref.current; if (!el || reduced || dir === 0) return; const shift = 32 * dir; const animation = leaving ? el.animate( [ { opacity: 1, filter: "blur(0px)", transform: "none" }, { opacity: 0, filter: "blur(6px)", transform: `translateX(${-shift}px)` }, ], { duration: MORPH * 0.6, easing: EASE, fill: "forwards" } ) : el.animate( [ { opacity: 0, filter: "blur(6px)", transform: `translateX(${shift}px)` }, { opacity: 1, filter: "blur(0px)", transform: "none" }, ], { duration: MORPH, easing: EASE, delay: 60, fill: "backwards" } ); return () => animation.cancel(); }, [dir, leaving, reduced]); return (

{ ref.current = el; if (typeof paneRef === "function") paneRef(el); else if (paneRef) (paneRef as React.MutableRefObject).current = el; }} inert={leaving} aria-hidden={leaving || undefined} className="absolute inset-x-0 top-0" > {children}

); } export function FeatureTabs({ tabs, value, defaultValue, onValueChange, autoplay, className = "", ...props }: FeatureTabsProps) { const reduced = useReducedMotion(); const id = React.useId(); const [own, setOwn] = React.useState(defaultValue ?? tabs[0]?.id); const active = value ?? own; const index = Math.max(0, tabs.findIndex((t) => t.id === active)); const [leaving, setLeaving] = React.useState([]); const [dir, setDir] = React.useState(0); const [cycle, setCycle] = React.useState(0); const [paused, setPaused] = React.useState(false); const [line, setLine] = React.useState({ left: 0, width: 0, ready: false }); const [height, setHeight] = React.useState(null); const tabRefs = React.useRef<(HTMLButtonElement | null)[]>([]); const paneRef = React.useRef(null); const keyCounter = React.useRef(0); const select = (next: number, focus = false) => { const tab = tabs[(next + tabs.length) % tabs.length]; if (!tab) return; setCycle((c) => c + 1); if (tab.id === active) return; const nextIndex = tabs.indexOf(tab); setDir(Math.sign(nextIndex - index) || 1); setLeaving((l) => [...l, { id: active, dir: Math.sign(nextIndex - index) || 1, key: ++keyCounter.current }]); if (value === undefined) setOwn(tab.id); onValueChange?.(tab.id); if (focus) tabRefs.current[nextIndex]?.focus(); }; React.useEffect(() => { if (!leaving.length) return; const timer = window.setTimeout(() => setLeaving([]), MORPH); return () => window.clearTimeout(timer); }, [leaving]); // The line sits under the chosen tab. React.useLayoutEffect(() => { const measure = () => { const tab = tabRefs.current[index]; if (!tab) return; const left = tab.offsetLeft; const width = tab.offsetWidth; setLine((l) => (l.left === left && l.width === width ? l : { left, width, ready: l.width > 0 })); }; measure(); const observer = new ResizeObserver(measure); tabRefs.current.forEach((t) => t && observer.observe(t)); return () => observer.disconnect(); }, [index, tabs]); // The panel takes the height of what it's showing. React.useLayoutEffect(() => { const pane = paneRef.current; if (!pane) return; const measure = () => setHeight((h) => (h === pane.offsetHeight ? h : pane.offsetHeight)); measure(); const observer = new ResizeObserver(measure); observer.observe(pane); return () => observer.disconnect(); }, [active]); const onKeyDown = (e: React.KeyboardEvent) => { const moves: Record = { ArrowRight: index + 1, ArrowLeft: index - 1, Home: 0, End: tabs.length - 1 }; if (!(e.key in moves)) return; e.preventDefault(); select(moves[e.key], true); }; const playing = Boolean(autoplay) && !reduced && !paused; const current = tabs[index]; return (

setPaused(true)} onPointerLeave={() => setPaused(false)} onFocus={() => setPaused(true)} onBlur={(e) => !e.currentTarget.contains(e.relatedTarget as Node) && setPaused(false)} {...props} >

{tabs.map((tab, i) => { const selected = i === index; return ( ); })} {/* The hairline under the row, then the line: it slides to the chosen tab and, with autoplay, fills as its time runs. */}

{leaving.map((l) => ( {tabs.find((t) => t.id === l.id)?.content} ))} {current && ( {current.content} )}

); } 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":[null,["$","$L50",null,{"namespace":"@hairline","registryDependencies":[]}]]}],["$","$L51",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L52",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@keyframes ui-progress {\n\tfrom {\n\t\ttransform: scaleX(0);\n\t}\n\tto {\n\t\ttransform: scaleX(1);\n\t}\n}"}]}]]}]]}]}]}]]}],["$","$L53",null,{"files":[{"path":"registry/feature-tabs.tsx","content":"$54","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]