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:T2771,"use client"; import { forwardRef, useCallback, useRef, useState } from "react"; import type { ReactNode } from "react"; import { cn } from "../../utils"; import { useComposedRefs } from "../../internals/dom/use-composed-refs"; import { useFancyId } from "../../internals/use-id"; import { useSoundCue } from "../../sound/use-sound"; import { TABS_KEY } from "./types"; import type { TabsContext } from "./types"; import "./tabs.css"; export interface TabsProps { /** * The active tab's value. Passing it makes the selection controlled — the * React counterpart of the Svelte source's `$bindable`; omit it entirely to * let the root own its own selection and report every change through * `onValueChange`. */ value?: string; /** Called with the new value whenever the active tab changes. */ onValueChange?: (value: string) => void; /** The tablist's stacking axis and which arrow-key pair moves it. Defaults to `"horizontal"`. */ orientation?: "horizontal" | "vertical"; /** * Whether arrowing to a trigger selects it immediately (`"automatic"`), * or only moves focus, leaving Enter/Space to select (`"manual"`). * Defaults to `"automatic"`. */ activation?: "automatic" | "manual"; /** Accent underline, or a segmented pill rail. Defaults to `"underline"`. */ variant?: "underline" | "segmented"; /** A `TabsList` and one or more `TabsContent`s. */ children?: ReactNode; /** Additional CSS classes. */ className?: string; /** * Plays the select cue through the sound controller. Off by default; * only audible once the user has enabled sound. */ sound?: boolean; } /** * The root of the tabs compound: it owns the active value, the roving-focus * position, and the id pair every trigger/panel couple is wired up with. * * The root element arrives through the ref channel rather than a `ref` prop, * per PORTING.md — the Svelte source declares `ref = $bindable(null)`. * * Rest props are not spread: the Svelte source reads only these props off * `$props()` and has no `...restProps`, so the port carries no wider attribute * surface than the component it mirrors. */ export const Tabs = forwardRef( ( { value: valueProp, onValueChange, orientation = "horizontal", activation = "automatic", variant = "underline", children, className, sound = false, }, forwardedRef ) => { // The root queries its own subtree in `orderedEnabledButtons`, and the // consumer may also want the node. A plain ref rather than // `useElementRef`: nothing here is a hook keyed on the node's existence // (convention C-1's hazard) — the node is only ever read from inside an // event handler or an effect, by which time it is long since attached — // and a ref keeps every callback below identity-stable. const rootRef = useRef(null); const setRootRef = useComposedRefs(forwardedRef, rootRef); // SSR-stable: `internals/use-id.js`'s `uid()` is client-only, and // trigger/panel ids must already agree on the very first server-rendered // paint so `aria-controls`/`aria-labelledby` are correct before hydration. const uid = useFancyId(); const playCue = useSoundCue(sound); // The Svelte source's `value` is `$bindable("")`: a consumer can bind it, // or leave it alone and let the component keep writing its own copy. // React has no such channel, so the prop is controlled when it is passed // and this local copy takes over when it is not. Either way // `onValueChange` fires with the same value. const [uncontrolledValue, setUncontrolledValue] = useState(""); const isControlled = valueProp !== undefined; const value = isControlled ? valueProp : uncontrolledValue; function isSelected(itemValue: string): boolean { return value === itemValue; } // The only place `value` changes. // // The cue is guarded on an actual move: re-activating the tab that is // already active is silent, while `onValueChange` fires either way. The // comparison has to happen before the write, exactly as it does in the // source, so the guard reads the outgoing value rather than the one it // is about to become. function select(itemValue: string) { const changed = value !== itemValue; if (!isControlled) setUncontrolledValue(itemValue); if (changed) playCue("select"); onValueChange?.(itemValue); } // Values currently taking part in roving focus. A disabled trigger never // appears here — see TabsTrigger's registration effect — so this list // doubles as "mounted and enabled, in the order each one arrived". Used // only as the pre-interaction tabbable fallback; `move`/`moveToEdge` // below re-query the live DOM instead of trusting this order, exactly // like ToggleGroup. const [registeredOrder, setRegisteredOrder] = useState([]); const [focusedValueState, setFocusedValueState] = useState(null); // Both functions are commands, invoked from a TabsTrigger's own effect — // first to register on mount, then again as that same effect's cleanup, // to unregister. They are the one part of the context that MUST keep a // stable identity across renders: the trigger lists them in its effect's // dependency array, so a fresh function per root render would re-run that // effect on every root render, and the re-run's cleanup (unregister) plus // body (register) would alternate forever. See the note on // `TabsContext.register` — this codebase has already shipped that // infinite loop once, on ToggleGroup. const register = useCallback((itemValue: string) => { setRegisteredOrder((order) => (order.includes(itemValue) ? order : [...order, itemValue])); }, []); const unregister = useCallback((itemValue: string) => { setRegisteredOrder((order) => { const index = order.indexOf(itemValue); if (index === -1) return order; const next = order.slice(); next.splice(index, 1); return next; }); }, []); const focus = useCallback((itemValue: string) => { setFocusedValueState(itemValue); }, []); /** * The trigger buttons in actual DOM order, filtered to the enabled ones. * Queried fresh on every call instead of cached, so a reordered or * newly-mounted trigger is correct on the very next arrow press even * though nothing about mounting or registration told this component the * order had changed. */ const orderedEnabledButtons = useCallback((): HTMLButtonElement[] => { const root = rootRef.current; if (!root) return []; return Array.from( root.querySelectorAll("[data-ft-tabs-trigger]:not(:disabled)") ); }, []); function goTo(button: HTMLButtonElement) { const nextValue = button.dataset.value; if (nextValue === undefined) return; setFocusedValueState(nextValue); button.focus(); // Fused focus+select: with automatic activation, arrowing onto a tab // is what activates it — the WAI-ARIA Tabs pattern's default. Manual // activation only moves focus here; the trigger's own click handler // (which a native button already fires for Enter/Space) selects. if (activation === "automatic") select(nextValue); } function move(from: string, delta: number) { const buttons = orderedEnabledButtons(); if (buttons.length === 0) return; const fromIndex = buttons.findIndex((el) => el.dataset.value === from); const base = fromIndex === -1 ? 0 : fromIndex; const nextIndex = (((base + delta) % buttons.length) + buttons.length) % buttons.length; goTo(buttons[nextIndex]!); } function moveToEdge(edge: "first" | "last") { const buttons = orderedEnabledButtons(); if (buttons.length === 0) return; goTo(edge === "first" ? buttons[0]! : buttons[buttons.length - 1]!); } // Deliberately does not call `select` — unlike `goTo`, which arrow-key // navigation drives and which fuses focus with selection under automatic // activation. This is used to *reclaim* DOM focus after a trigger // disappears out from under it (going disabled), and disabling the // selected trigger must not change the selection or the visible panel — // only where DOM focus lands. // // Identity-stable: a trigger reads it from an effect's dependency list. const focusElement = useCallback( (itemValue: string) => { const button = orderedEnabledButtons().find((el) => el.dataset.value === itemValue); if (!button) return; setFocusedValueState(itemValue); button.focus(); }, [orderedEnabledButtons] ); // Recomputed on every render, so it settles the instant a trigger // registers, unregisters, or flips disabled — including when the trigger // that currently holds the roving position is the one that disappears. let focusedValue: string | null = null; if (focusedValueState !== null && registeredOrder.includes(focusedValueState)) { focusedValue = focusedValueState; } else if (registeredOrder.length > 0) { // Prefer the selected tab so Tab lands on the active one; otherwise // the first trigger to have registered. focusedValue = registeredOrder.find((v) => v === value) ?? registeredOrder[0]!; } // Rebuilt on every render rather than memoised, and that rebuild is what // re-renders the pieces below — the React counterpart of the Svelte // context's live getters. The three members a trigger depends on by // identity — `register`, `unregister` and `focusElement` — are stable // regardless. const context: TabsContext = { value, orientation, activation, variant, isSelected, select, register, unregister, focusedValue, focus, move, moveToEdge, focusElement, triggerId(itemValue) { return `${uid}-trigger-${itemValue}`; }, panelId(itemValue) { return `${uid}-panel-${itemValue}`; }, }; return (

{children}

); } ); Tabs.displayName = "Tabs"; 53:T1777,"use client"; import { forwardRef, useContext, useRef } from "react"; import type { ReactNode } from "react"; import { cn } from "../../utils"; import { useComposedRefs } from "../../internals/dom/use-composed-refs"; import { useIsomorphicLayoutEffect } from "../../internals/dom/ssr"; import { runTransition } from "../../internals/motion/animate"; import type { TransitionRun } from "../../internals/motion/animate"; import { preset } from "../../internals/motion/transitions"; import { prefersReducedMotion } from "../../internals/motion/anchored"; import { DURATIONS } from "../../internals/motion/tokens"; import { TABS_KEY } from "./types"; export interface TabsContentProps { /** Which `TabsTrigger` shows this panel. */ value: string; /** * Keeps this panel mounted in the DOM (with the `hidden` attribute) * even while inactive, instead of the default of unmounting it * entirely. Needed for content — an iframe, a video, a form with * uncommitted input — that must not remount every time the user tabs * away and back. */ forceMount?: boolean; /** The panel's content. */ children?: ReactNode; /** Additional CSS classes. */ className?: string; } // An ENTRANCE, never a cross-fade, and an enter-only leg rather than a // two-way transition. // // TabsContent instances are siblings the caller places by hand: there is no // shared container to stack an outgoing panel inside, and each panel owns its // own conditional below. A true cross-fade would need the outgoing panel taken // out of flow inside a containing block this component does not own and cannot // create without wrapping every caller's content in a layer element — a // permanent structural change to every panel in the library, for one 150ms // dissolve. So the panel being left cuts away exactly as it always did, and // only the arriving one is animated: the hard cut is the defect that was // actually visible. // // Because the entrance never delays an unmount, nothing that observes the swap // changes — the previous panel is out of the DOM in the same commit the new one // lands, and no assertion in the suite had to be rewritten for this. // // Module scope, not per instance: `preset()` is a pure factory returning a // pure function, so one instance serves every panel. const panelFade = preset("fade"); /** * One tab's panel. Rendered only while its trigger is selected, unless * `forceMount` keeps it in the DOM behind the `hidden` attribute. * * The element arrives through the ref channel rather than a `ref` prop, per * PORTING.md — the Svelte source declares `ref = $bindable(null)`. Rest props * are not spread, for the same reason as on the root. */ export const TabsContent = forwardRef( ({ value, forceMount = false, children, className }, forwardedRef) => { // Undefined outside a Tabs root: nothing is ever "selected", so this // panel only renders when `forceMount` is set, matching the graceful // degradation every other compound piece in this library falls back to. const context = useContext(TABS_KEY); const isSelected = context?.isSelected(value) ?? false; const rendered = isSelected || forceMount; const innerRef = useRef(null); const setRef = useComposedRefs(forwardedRef, innerRef); // The entrance plays on a real selection change only, not on first // render: Svelte's local `in:` runs only once the block that owns it has // already run, so a panel that starts selected simply appears. The React // counterpart is the false→true EDGE of `rendered`, seeded from the very // first render — never a one-shot "have I run yet" latch, which // StrictMode's mount → cleanup → mount rehearsal would consume on the // first invocation and leave the second one animating a panel that // started selected. Tracking the edge instead makes every repeated setup // on the same `rendered` value a no-op, which is what a dev-only // rehearsal has to be. With `forceMount` every panel is mounted // permanently and the entrance never plays at all after that first // render — correct, since `forceMount` exists precisely to keep panels // alive and there is no way to animate a `hidden` attribute flip. const prevRenderedRef = useRef(rendered); // A layout effect, per the effect-phase policy: Svelte starts intros // pre-paint, and a passive effect would paint one frame at rest first. // // `prefersReducedMotion()` is called here, at the instant the leg starts, // rather than kept as state: the preference is read then, never at // construction and never during SSR. `duration: 0` makes `runTransition` // finish synchronously and never touch `element.animate()`. useIsomorphicLayoutEffect(() => { const wasRendered = prevRenderedRef.current; prevRenderedRef.current = rendered; if (wasRendered || !rendered) return; const el = innerRef.current; if (!el) return; let run: TransitionRun | undefined; run = runTransition( el, panelFade(el, { duration: prefersReducedMotion() ? 0 : DURATIONS.fast }, { direction: "in", }), 1, undefined, () => { // On enter finish, abort: that drops the `fill: forwards` so // the panel falls back to its resting style instead of // carrying a finished animation — whose output outranks // author CSS — for the rest of its life. run?.abort(); run = undefined; } ); // And a leg still in flight when the panel leaves is cancelled // rather than left running against a detached node. return () => { run?.abort(); run = undefined; }; }, [rendered]); if (!rendered) return null; return ( ); } ); TabsContent.displayName = "TabsContent"; 54:T35a2,"use client"; import { forwardRef, useContext, useRef } from "react"; import type { ReactNode } from "react"; import { cn } from "../../utils"; import { useComposedRefs } from "../../internals/dom/use-composed-refs"; import { useEventCallback } from "../../internals/dom/use-event-callback"; import { useIsomorphicLayoutEffect } from "../../internals/dom/ssr"; import { prefersReducedMotion } from "../../internals/motion/anchored"; import { DURATIONS } from "../../internals/motion/tokens"; import { TABS_KEY } from "./types"; import "./tabs-list.css"; export interface TabsListProps { /** The `TabsTrigger`s. */ children?: ReactNode; /** Additional CSS classes. */ className?: string; } /** Backstop that drops `will-change` again after a tween. * * `will-change: transform` is a promise to the compositor, not a style; * leaving it on permanently costs a permanent layer for a bar that moves a few * times a session. `transitionend` is the honest signal to drop it, but jsdom * never fires one, so the release is keyed to the same token the CSS * transition below uses plus a slack margin — deterministic in both. */ const WILL_CHANGE_RELEASE = DURATIONS.fast + 50; /** * The rail of triggers, plus the single sliding indicator that paints the * selection. * * The element arrives through the ref channel rather than a `ref` prop, per * PORTING.md — the Svelte source declares `ref = $bindable(null)`. Rest props * are not spread, for the same reason as on the root. */ export const TabsList = forwardRef( ({ children, className }, forwardedRef) => { // Undefined outside a Tabs root: orientation/variant then fall back to // this component's own defaults rather than throwing, matching every // other compound in this library. const context = useContext(TABS_KEY); const orientation = context?.orientation ?? "horizontal"; const variant = context?.variant ?? "underline"; const classes = cn( "ft-tabs-list inline-flex", orientation === "vertical" ? "flex-col" : "flex-row", variant === "underline" ? cn("border-border", orientation === "vertical" ? "border-r" : "border-b") : "ft-tabs-list-segmented bg-background border-border w-fit border", className ); /* * --------------------------------------------------------------------- * The sliding indicator * --------------------------------------------------------------------- * * A single `aria-hidden` box, absolutely positioned at the list's own * origin and moved with `transform` alone — never `left`/`width`, which * would relayout the whole rail on every keystroke of an arrow-key walk. * It is a 1×1 box that `translate()` puts at the selected trigger and * `scale()` stretches to its size, so one transform carries both the * position and the length. * * It is a progressive enhancement, never the only selection signal: the * selected trigger keeps `aria-selected="true"` and its own foreground * colour, so a screen reader, a forced-colors user and a JS-off render * all still see which tab is active. */ // Plain refs, not `useElementRef`: both nodes are rendered // unconditionally, so they are attached by the time any effect below // runs — convention C-1's hazard is a node whose very existence is // conditional, which neither of these is. const listRef = useRef(null); const setListRef = useComposedRefs(forwardedRef, listRef); const indicatorRef = useRef(null); const willChangeTimerRef = useRef | undefined>(undefined); // Snapshots of the inputs the last placement ran with. Refs, not state — // only the placement effect reads or writes them, and nothing needs to // re-render when they change. They are what lets one effect tell three // cases apart: a selection moving (tween), a geometry change (snap, // because tweening between two different geometries is meaningless), and // the very first paint (snap, because the bar must not fly in from // `translate(0) scale(0)`). const placedOnceRef = useRef(false); const lastValueRef = useRef(undefined); const lastOrientationRef = useRef<"horizontal" | "vertical" | undefined>(undefined); const lastVariantRef = useRef<"underline" | "segmented" | undefined>(undefined); function activeTrigger(): HTMLElement | null { return ( listRef.current?.querySelector( '[data-ft-tabs-trigger][aria-selected="true"]' ) ?? null ); } function releaseWillChange(): void { clearTimeout(willChangeTimerRef.current); willChangeTimerRef.current = undefined; const el = indicatorRef.current; if (el) el.style.willChange = ""; } /** * Writes the indicator's transform. `animate: false` snaps: first paint, * a resize, an orientation/variant change, and every write made while the * user asks for reduced motion — the bar still tracks the selection then, * it just arrives without a tween. * * Wrapped in `useEventCallback` so the long-lived observer callbacks * below always call the latest render's version — the React counterpart * of a Svelte function closing over live reactive state. */ const place = useEventCallback((animate: boolean): void => { const el = indicatorRef.current; if (!el) return; const active = activeTrigger(); if (!active) { // Nothing is selected — `value` was never set, or points at a // value no trigger claims. The bar is not "at zero", it is absent. el.style.opacity = "0"; return; } const vertical = orientation === "vertical"; const off = vertical ? active.offsetTop : active.offsetLeft; const size = vertical ? active.offsetHeight : active.offsetWidth; // A zero-size measurement is jsdom, a `display: none` ancestor, or a // first paint the browser has not laid out yet — never a real state. // Stay hidden rather than collapsing to a 0-wide sliver at the origin. if (size === 0) { el.style.opacity = "0"; return; } el.style.opacity = "1"; // The segmented pill is the trigger's whole box, so it stretches on // both axes; the underline bar is a 2px rule that only ever grows // along the rail's own axis. const transform = variant === "segmented" ? `translate(${active.offsetLeft}px, ${active.offsetTop}px) scale(${active.offsetWidth}, ${active.offsetHeight})` : vertical ? `translateY(${off}px) scaleY(${size})` : `translateX(${off}px) scaleX(${size})`; if (variant === "segmented") { // Feeds the `calc()` in the CSS that pre-divides the pill's radius // by its own scale factors, so the rendered corner keeps the // theme's own radius instead of being stretched into an ellipse. // Written by JS, and therefore internal — not a knob a consumer // should set. el.style.setProperty("--ft-tabs-indicator-sx", String(active.offsetWidth)); el.style.setProperty("--ft-tabs-indicator-sy", String(active.offsetHeight)); } // The selection did not move — this is a focus walk (the effect below // reads `focusedValue`), or a resize that changed nothing. Rewriting a // byte-identical transform would force a layout for nothing, and — on // the `animate: false` path, which suspends the transition — would // cancel a slide that is still in flight and teleport the bar to its // destination. if (el.style.transform === transform) return; // Nothing to tween FROM: the bar has never been successfully placed // (nothing was selected at mount, or the last measurement was zero, so // the branches above returned before writing anything). A transition // from the identity matrix would fly a 1x1 box in from the list's own // origin — the same artifact the first-paint snap exists to prevent. if (animate && !el.style.transform) animate = false; if (animate) { el.style.willChange = "transform"; el.style.transform = transform; clearTimeout(willChangeTimerRef.current); willChangeTimerRef.current = setTimeout(releaseWillChange, WILL_CHANGE_RELEASE); return; } // Suspend → write → force a reflow → restore. Without the forced read // between suspending and restoring, the browser coalesces all three // writes into one style recalculation and the "snap" tweens anyway. // Restoring the *previous* value rather than clearing it is what keeps // a consumer's own inline `transition` (or a later tween) alive. releaseWillChange(); const previous = el.style.transition; el.style.transition = "none"; el.style.transform = transform; void el.offsetWidth; el.style.transition = previous; }); // Everything that outlives a single render lives here, and this effect // depends on nothing that changes — deliberately NOT on the selection. // // DEVIATION from the contract's "one effect owns all of it": a // `ResizeObserver` delivers a callback as soon as `observe()` runs, so // folding the observer into the placement effect below would tear it down // and re-establish it on every tab change, and that first callback would // land right after the tween's write and snap it. Keeping it in its own // mount-scoped effect keeps the observer alive across selections; the // cleanup still does both jobs the contract asks of it, on unmount. useIsomorphicLayoutEffect(() => { const list = listRef.current; if (!list) return; // The list's own box changing means every trigger's offset may have // moved: a wrap, a font swap, a sibling arriving. R8: a resize snaps, // it never tweens — the bar was never "travelling" to its new place. const observer = new ResizeObserver(() => place(false)); observer.observe(list); // The list's border box is not enough on its own. Inside a fixed-width // `TabsList` a trigger can change its own label — and therefore its // width and every later trigger's offset — while the list measures the // same to the pixel. Observing the triggers as well is what catches it. function observeTriggers(el: HTMLElement): void { for (const trigger of el.querySelectorAll("[data-ft-tabs-trigger]")) { // `ResizeObserver.observe` on an element already observed is a // no-op, so re-running this on every mutation costs nothing and // saves tracking which triggers are new. observer.observe(trigger); } } observeTriggers(list); // And geometry can move with NO box changing size at all: reordering // equal-width keyed tabs swaps two offsets while every observed border // box stays identical, so no resize ever fires. The mutation is the // only signal there is — it also picks up triggers that arrive later, // which is why `observeTriggers` runs again from here. const mutations = new MutationObserver(() => { observeTriggers(list); place(false); }); mutations.observe(list, { childList: true, subtree: true, characterData: true }); return () => { observer.disconnect(); mutations.disconnect(); releaseWillChange(); }; // `place` is identity-stable for the life of the component; nothing // else here is read from a render scope. // eslint-disable-next-line react-hooks/exhaustive-deps }, [place]); const value = context?.value ?? ""; // Read, not used: `focusedValue` recomputes from the roving-focus // registry, so a trigger mounting or unmounting re-runs this effect and // re-places the bar. The list's own `ResizeObserver` catches the same // thing in a browser, but only once layout has settled — this gets there // in the same commit. const focusedValue = context?.focusedValue ?? null; useIsomorphicLayoutEffect(() => { const first = !placedOnceRef.current; const geometryChanged = orientation !== lastOrientationRef.current || variant !== lastVariantRef.current; const selectionMoved = value !== lastValueRef.current; placedOnceRef.current = true; lastValueRef.current = value; lastOrientationRef.current = orientation; lastVariantRef.current = variant; // The tween is the one case where all three conditions hold. Reduced // motion is read here, at the instant of the write, rather than kept // as reactive state: a preference that flips mid-flight should not // retro-cancel a bar already on its way. place(selectionMoved && !first && !geometryChanged && !prefersReducedMotion()); }, [value, focusedValue, orientation, variant, place]); return ( /* * role="tablist" needs no accessible name of its own per the WAI-ARIA * Tabs pattern unless a page has more than one — a consumer with * several tab groups on screen at once can still add one through * `className` plus their own `aria-label` via a wrapping element, or by * giving each Tabs root a distinct heading before it. */

{children} {/* * Last child so it paints under the triggers in the segmented * variant without needing a stacking context on the list itself. * `aria-hidden` plus no role and no tabindex: it is never announced, * never focusable, and `pointer-events: none` keeps it out of the * hit-test entirely. */} ); } ); TabsList.displayName = "TabsList"; 55:T3099,"use client"; import { forwardRef, useContext, useEffect, useRef } from "react"; import type { ComponentPropsWithoutRef, FocusEvent, KeyboardEvent, MouseEvent, ReactNode, } from "react"; import { cn } from "../../utils"; import { useComposedRefs } from "../../internals/dom/use-composed-refs"; import { useIsomorphicLayoutEffect } from "../../internals/dom/ssr"; import { TABS_KEY } from "./types"; import "./tabs-trigger.css"; interface TabsTriggerOwnProps { /** This trigger's value — which `TabsContent` it activates. */ value: string; /** Disables just this trigger. A disabled trigger is skipped by the arrows and Home/End. */ disabled?: boolean; /** The trigger's content, typically the tab's label. */ children?: ReactNode; /** Additional CSS classes. */ className?: string; } /** * Native ` ); } ); TabsTrigger.displayName = "TabsTrigger"; 56:T10c7,/* * Makes the list the triggers' `offsetParent`, so `offsetLeft`/`offsetTop` * and the indicator's own `left: 0; top: 0` share one origin (both are * measured from the list's padding box). That shared origin is what * removes every fudge factor from the arithmetic in `TabsList.tsx` — * including the segmented rail's 3px padding, which simply falls out of * `offsetLeft`. * * `.ft-tabs-list` is the Svelte source's own root class, already the first * token of the root class list, so every rule below is anchored exactly as * the compiler-scoped originals were. */ .ft-tabs-list { position: relative; } /* * Exact rail padding/gap/radius from the mockup — not expressible as a * single Tailwind utility. Same `bg-background` reasoning as ToggleGroup's * rail: this app's dark theme has `--muted` *lighter* than `--card`, so a * muted fill on a card-nested rail would read as raised, the opposite of the * mockup's recessed strip. */ .ft-tabs-list-segmented { border-radius: 0.5rem; /* 8px */ padding: 3px; gap: 2px; } .ft-tabs-indicator { position: absolute; left: 0; top: 0; pointer-events: none; /* Hidden until the first successful measurement, so a not-yet-laid-out first paint shows nothing rather than a sliver at the origin. */ opacity: 0; transform-origin: left top; } /* * Underline, horizontal: a 2px bar pinned to the list's bottom edge and * grown along x only. `bottom: 0` overrides the base `top: 0` because the * height is explicit. This lands on exactly the pixels the retired * `inset 0 -2px 0` box-shadow on the trigger used to paint — the trigger's * bottom edge and the list's padding-box bottom are the same line. */ .ft-tabs-indicator[data-variant="underline"][data-orientation="horizontal"] { top: auto; bottom: 0; width: 1px; height: 2px; background: var(--ft-tabs-indicator-color, var(--ft-nav-accent)); transform-origin: left bottom; } /* Underline, vertical: a 2px bar on the list's inline-start edge, grown along y — where `inset 2px 0 0` used to sit, for the same reason. */ .ft-tabs-indicator[data-variant="underline"][data-orientation="vertical"] { width: 2px; height: 1px; background: var(--ft-tabs-indicator-color, var(--ft-nav-accent)); transform-origin: left top; } /* * Segmented: the pill itself, sized to the trigger's whole box on both * axes. Two variables carry the retired utilities' own values rather than * new numbers, so the resting look is unchanged: `--color-accent` is what * `bg-accent` resolved to, and `--radius-md` is what `rounded-md` resolved * to (Tailwind's stock `0.375rem` is only the last-resort literal — a * theme that redefines the scale, as this app's does, must be followed). * * The corner is then pre-divided by the scale factors JS writes, so what * renders after `scale()` has stretched a 1x1 box is the intended radius * rather than an ellipse — CSS `border-radius` takes a * ` / ` pair for exactly this. */ .ft-tabs-indicator[data-variant="segmented"] { width: 1px; height: 1px; background: var(--ft-tabs-indicator-color, var(--color-accent)); border-radius: calc( var(--ft-tabs-indicator-radius, var(--radius-md, 0.375rem)) / var(--ft-tabs-indicator-sx, 1) ) / calc( var(--ft-tabs-indicator-radius, var(--radius-md, 0.375rem)) / var(--ft-tabs-indicator-sy, 1) ); z-index: 0; } @media (prefers-reduced-motion: no-preference) { .ft-tabs-indicator { /* 150ms = tokens.DURATIONS.fast, cubic-bezier(0.4, 0, 0.2, 1) = tokens.EASINGS.inout. `inout`, not `out`: selecting a tab is a reversible flip between two resting places, not an arrival. */ transition: transform var(--ft-tabs-indicator-duration, var(--ft-duration-fast, 150ms)) var(--ft-tabs-indicator-ease, var(--ft-ease-inout, cubic-bezier(0.4, 0, 0.2, 1))); } } /* * A forced-colors palette replaces every author background with a system * colour, so the fill has to be re-stated as one of that palette's own * keywords or the bar disappears. Repeating both attributes matches the * specificity of the most specific variant rule above, so this later * declaration actually wins rather than losing to it. */ @media (forced-colors: active) { .ft-tabs-indicator[data-variant][data-orientation] { background: Highlight; } } 57:T7c2,/* * Lifts every trigger above `TabsList`'s indicator, which sits at * `z-index: 0` in the same stacking context. Only the segmented variant * actually overlaps — the pill is painted under the label it belongs to — * but the rule is unconditional so a consumer restyling the underline * variant into something that overlaps cannot fall through the floor. * * `.ft-tabs-trigger` is the Svelte source's own root class, already the first * token of the root class list, so every rule below is anchored exactly as * the compiler-scoped originals were. */ .ft-tabs-trigger { position: relative; z-index: 1; } /* * The only `box-shadow` left on this element. It used to have to be * composited with an `inset` accent bar, because two `box-shadow` rules on * one element cannot both apply — the more specific simply wins and the * other disappears. The bar now lives on `TabsList`'s indicator, so the * focus ring stands alone and is never part of any transition: R13, no * animated focus. */ .ft-tabs-trigger:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklab, var(--ft-nav-accent) 35%, transparent); } /* * The segmented variant's selection is now painted by `TabsList`'s * indicator, which repaints as `Highlight` in a forced-colors palette and * sits *under* this label — whose own colour that same palette forces * independently, to `ButtonText`. `HighlightText` is the partner the * palette guarantees contrast against, and a system-colour keyword * declared inside the query is honoured rather than re-forced, which is * what makes re-stating it work at all (same mechanism as the indicator's * own fill, and as `Skeleton`/`TextRoll` elsewhere in the library). * * The underline variant needs nothing here: its bar sits on the list's * edge, not under the label, so the forced `ButtonText` stays legible. */ @media (forced-colors: active) { .ft-tabs-trigger[data-variant="segmented"][aria-selected="true"] { color: HighlightText; } } 58:T12cd,"use client"; /** * The contract between the tabs root and its list/trigger/content pieces. * * `Tabs` owns the active value and the roving-focus position; `TabsTrigger` * and `TabsContent` read both through context instead of a prop and a * callback threaded down by hand for each of them. * * The arrow-key sequence is never read off `register`/`unregister` order: * the root re-queries the live DOM at the moment a key is pressed, so * triggers that mount out of order, or that get reordered by a keyed list * after mounting, still step through in the order they actually appear on * screen. Registration order is used only as the pre-interaction fallback * for which trigger starts out tabbable — the same split `ToggleGroup` uses, * for the same reason. */ import { createContext } from "react"; /** What the root publishes. `TabsTrigger`/`TabsContent` read it; only the root writes it. */ export interface TabsContext { /** The active tab's value. */ readonly value: string; /** The tablist's stacking axis and which arrow-key pair moves it. */ readonly orientation: "horizontal" | "vertical"; /** Whether arrowing to a trigger selects it immediately, or only moves focus. */ readonly activation: "automatic" | "manual"; /** Visual treatment, published so both `TabsList` and `TabsTrigger` render in step. */ readonly variant: "underline" | "segmented"; /** Whether `itemValue` is the active tab. */ isSelected(itemValue: string): boolean; /** Makes `itemValue` the active tab and fires the root's `onValueChange`. */ select(itemValue: string): void; /** * Joins the roving-focus order. A trigger skips this entirely while disabled. * * Identity-stable for the life of the root: it is called from a trigger's own * effect and therefore appears in that effect's dependency list. This is the * React counterpart of the `untrack` the Svelte source wraps the body in — * there, an effect that reads the registry it just mutated alternates between * register and unregister until the scheduler gives up; here, a context member * whose identity changed on every root render would re-run the same effect on * every root render, unregistering and re-registering forever. The state * updater is also a no-op returning the *same* array when nothing changes, so * a duplicate register never schedules a render. */ register(itemValue: string): void; /** Leaves the roving-focus order. Identity-stable, for the same reason as `register`. */ unregister(itemValue: string): void; /** The value that currently carries `tabindex="0"`, or `null` before anything has registered. */ readonly focusedValue: string | null; /** Marks `itemValue` as the roving-focus position, without moving DOM focus. */ focus(itemValue: string): void; /** * Moves the roving-focus position `delta` steps from `from` in DOM order, * skipping disabled triggers and wrapping at both ends, and moves DOM * focus along with it. With `activation="automatic"` this also selects * the trigger it lands on. */ move(from: string, delta: number): void; /** * Moves the roving-focus position, and DOM focus, to the first or last * enabled trigger in DOM order. With `activation="automatic"` this also * selects it. */ moveToEdge(edge: "first" | "last"): void; /** * Moves real DOM focus to `itemValue`'s trigger, if it is currently * registered and enabled, and updates the roving-focus position to * match. Distinct from `focus()`, which only updates the roving-focus * position without touching DOM focus: this exists for the one case * where DOM focus itself has to follow, because the element that held * it just left the roving order — typically because it just became * disabled out from under a keyboard user. * * Identity-stable, for the same reason as `register`: a trigger reads it * from an effect's dependency list. */ focusElement(itemValue: string): void; /** The id a `TabsTrigger` for `itemValue` renders, and the matching `TabsContent`'s `aria-labelledby` target. */ triggerId(itemValue: string): string; /** The id a `TabsContent` for `itemValue` renders, and the matching `TabsTrigger`'s `aria-controls` target. */ panelId(itemValue: string): string; } /** * The context a list/trigger/panel reads to find its surrounding root. The * Svelte source publishes it under a `Symbol` context key; React's own context * object plays that role here, so the exported name is kept and the value is a * `React.Context` rather than a symbol: * * ```tsx * const tabs = useContext(TABS_KEY); * ``` * * Read it as optional — a piece rendered outside a `Tabs` root gets * `undefined` rather than throwing. */ export const TABS_KEY = createContext(undefined); TABS_KEY.displayName = "TabsContext"; 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":"@fancy-ui","registryDependencies":["https://fancy-ui.rama.app/r/internals.json","https://fancy-ui.rama.app/r/internals-dom.json","https://fancy-ui.rama.app/r/internals-motion.json","https://fancy-ui.rama.app/r/sound.json","https://fancy-ui.rama.app/r/utils.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"react/src/components/tabs/Tabs.tsx","content":"$52","type":"registry:ui","target":"@ui/fancy/components/tabs/Tabs.tsx"},{"path":"react/src/components/tabs/TabsContent.tsx","content":"$53","type":"registry:ui","target":"@ui/fancy/components/tabs/TabsContent.tsx"},{"path":"react/src/components/tabs/TabsList.tsx","content":"$54","type":"registry:ui","target":"@ui/fancy/components/tabs/TabsList.tsx"},{"path":"react/src/components/tabs/TabsTrigger.tsx","content":"$55","type":"registry:ui","target":"@ui/fancy/components/tabs/TabsTrigger.tsx"},{"path":"react/src/components/tabs/index.ts","content":"\"use client\";\n\nexport { Tabs } from \"./Tabs\";\nexport type { TabsProps } from \"./Tabs\";\nexport { TabsList } from \"./TabsList\";\nexport type { TabsListProps } from \"./TabsList\";\nexport { TabsTrigger } from \"./TabsTrigger\";\nexport type { TabsTriggerProps } from \"./TabsTrigger\";\nexport { TabsContent } from \"./TabsContent\";\nexport type { TabsContentProps } from \"./TabsContent\";\nexport { TABS_KEY } from \"./types\";\nexport type { TabsContext } from \"./types\";\n","type":"registry:ui","target":"@ui/fancy/components/tabs/index.ts"},{"path":"react/src/components/tabs/tabs-list.css","content":"$56","type":"registry:ui","target":"@ui/fancy/components/tabs/tabs-list.css"},{"path":"react/src/components/tabs/tabs-trigger.css","content":"$57","type":"registry:ui","target":"@ui/fancy/components/tabs/tabs-trigger.css"},{"path":"react/src/components/tabs/tabs.css","content":"/*\n * Declared once, here, on the compound's actual root — TabsList and\n * TabsTrigger both read `var(--ft-nav-accent)` without redeclaring the\n * fallback. Custom-property inheritance is what carries it to both of them in\n * the live DOM, exactly as it did when the Svelte compiler scoped this rule.\n *\n * `.ft-tabs` is the Svelte source's own root class, already the first token of\n * the root class list, so the rule below is anchored on it exactly as the\n * compiler-scoped original was.\n */\n.ft-tabs {\n\t--ft-nav-accent: var(\n\t\t--ft-accent,\n\t\tlight-dark(oklch(0.5432 0.2528 300.22), oklch(0.604 0.2606 301.75))\n\t);\n}\n","type":"registry:ui","target":"@ui/fancy/components/tabs/tabs.css"},{"path":"react/src/components/tabs/types.ts","content":"$58","type":"registry:ui","target":"@ui/fancy/components/tabs/types.ts"}],"className":"h-[70svh] min-h-80"}]]}]