51: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"] 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:T2c66,"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 { useSoundCue } from "../../sound/use-sound"; import { TOGGLE_GROUP_KEY } from "./types"; import type { ToggleGroupContext } from "./types"; import "./toggle-group.css"; export interface ToggleGroupProps { /** Whether one item can be active at a time, or several. Defaults to `"single"`. */ type?: "single" | "multiple"; /** * The active value(s) — a string when `type="single"`, an array of strings * when `type="multiple"`. Omit it entirely to let the group own its own * selection and report every change through `onValueChange`. */ value?: string | string[]; /** Called with the new value, shaped to match `type`, whenever the selection changes. */ onValueChange?: (value: string | string[]) => void; /** Disables every item in the group. */ disabled?: boolean; /** Sizes every item. */ size?: "sm" | "md" | "lg"; /** The rail's stacking axis. Arrow keys work in both pairs regardless — see the README. */ orientation?: "horizontal" | "vertical"; /** Accessible name for the group. */ label?: string; /** The `ToggleGroupItem`s. */ children?: ReactNode; /** Additional CSS classes */ className?: string; /** * Plays the matching interface cue through the sound controller. Off by * default; only audible once the user has enabled sound. */ sound?: boolean; /** * Form field name. When set, one hidden input named `name` is rendered per * selected value, so a single group submits its value and a multiple group * submits every selected one. Items are `type="button"` and never submit. * A disabled group submits nothing. The selection is the group's data, so a * selected item that is disabled on its own still submits: disabling an item * locks that choice, it does not retract it. */ name?: string; /** `id` of the `

` the hidden inputs belong to, when not nested in it. */ form?: string; } /** * A rail of mutually-aware toggles with one selection model and one roving * tab stop. * * 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 ToggleGroup = forwardRef( ( { type = "single", value: valueProp, onValueChange, disabled = false, size = "md", orientation = "horizontal", label, children, className, sound = false, name, form, }, 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, 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); // 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 shape. const [uncontrolledValue, setUncontrolledValue] = useState(""); const isControlled = valueProp !== undefined; const value = isControlled ? valueProp : uncontrolledValue; // The public prop is a string or an array depending on `type`; everything // below works off one normalised shape so `isSelected`/`toggle` never // have to branch on which one they were handed. function toArray(current: string | string[]): string[] { if (type === "single") { // A single-select group has at most one active value, whatever // shape arrives — a caller handing it an array anyway (leftover // state from a `type` prop that used to be `"multiple"`, say) // gets just the first entry rather than every item lighting up // as selected at once. if (Array.isArray(current)) return current.length > 0 ? [current[0]!] : []; return current === "" ? [] : [current]; } return Array.isArray(current) ? current : current === "" ? [] : [current]; } const selected = toArray(value); // Values currently taking part in roving focus. A disabled item never // appears here — see ToggleGroupItem's registration effect — so this // list doubles as "mounted and enabled, in the order each one arrived". const [registeredOrder, setRegisteredOrder] = useState([]); const [focusedValueState, setFocusedValueState] = useState(null); const playCue = useSoundCue(sound); function isSelected(itemValue: string): boolean { return selected.includes(itemValue); } function commit(next: string[]) { if (type === "single") { const shaped = next[0] ?? ""; if (!isControlled) setUncontrolledValue(shaped); onValueChange?.(shaped); } else { if (!isControlled) setUncontrolledValue(next); onValueChange?.(next); } } function toggle(itemValue: string) { if (disabled) return; const current = toArray(value); const isOn = current.includes(itemValue); // Three cues, chosen from the PRE-commit state and played before it: // a multiple-select rail reports the direction it is moving in, a // single-select one reports a pick — including the clear-on-repick // case below, which is still a pick from the reader's point of view. // The cue lives here rather than in the item's click handler, so an // item outside a group stays silent. playCue(type === "multiple" ? (isOn ? "toggle-off" : "toggle-on") : "select"); if (type === "single") { // Activating the already-active item clears the selection instead of // no-op-ing — the one state a native radio group can't express, and // the brief this component follows asks for it explicitly. commit(isOn ? [] : [itemValue]); } else { commit(isOn ? current.filter((v) => v !== itemValue) : [...current, itemValue]); } } // Both functions are commands, invoked from a ToggleGroupItem'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 item // 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. The updater also returns the array unchanged when there is // nothing to do, so a repeated register never schedules a render. 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 item buttons in actual DOM order, filtered to the enabled ones. * Queried fresh on every call instead of cached, so a reordered or * newly-mounted item 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-toggle-item]:not(:disabled)") ); }, []); const goTo = useCallback((button: HTMLButtonElement) => { const nextValue = button.dataset.value; if (nextValue === undefined) return; setFocusedValueState(nextValue); button.focus(); }, []); const move = useCallback( (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]!); }, [goTo, orderedEnabledButtons] ); const moveToEdge = useCallback( (edge: "first" | "last") => { const buttons = orderedEnabledButtons(); if (buttons.length === 0) return; goTo(edge === "first" ? buttons[0]! : buttons[buttons.length - 1]!); }, [goTo, orderedEnabledButtons] ); // Recomputed on every render, so it settles the instant an item // registers, unregisters, or flips disabled — including when the item // 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 item so Tab lands on the active choice; // otherwise the first item to have registered. focusedValue = registeredOrder.find((v) => selected.includes(v)) ?? registeredOrder[0]!; } // Rebuilt on every render rather than memoised, and that rebuild is what // re-renders the items — the React counterpart of the Svelte context's // live getters. A memo would have to be keyed on `selected`, which is a // fresh array each render by construction (its shape depends on `type`), // so the memo would either never hit or need a hand-rolled // serialisation. Nothing under a toggle rail is expensive enough to buy // that back. The two members an item depends on by identity — // `register` and `unregister` — are stable regardless. const context: ToggleGroupContext = { type, value: selected, disabled, size, orientation, isSelected, toggle, register, unregister, focusedValue, focus, move, moveToEdge, }; return (

{children} {name ? selected.map((picked) => ( )) : null}

); } ); ToggleGroup.displayName = "ToggleGroup"; 54:T1c4a,"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 { TOGGLE_GROUP_KEY } from "./types"; import "./toggle-group-item.css"; interface ToggleGroupItemOwnProps { /** This item's value — what gets added to or removed from the group's selection. */ value: string; /** Disables just this item, independent of the group's own `disabled`. */ disabled?: boolean; /** Accessible name, for icon-only content. Falls back to the rendered content. */ label?: string; /** The item's content, typically a glyph or a short label. */ children?: ReactNode; /** Additional CSS classes */ className?: string; } /** * Native ` ); } ); ToggleGroupItem.displayName = "ToggleGroupItem"; 55:Tb72,/* * Same brand-accent shape as Toggle's own `--ft-toggle-accent`: no * semantic token owns this purple, so it is declared locally with a * light-dark() fallback, retintable from higher up the tree via * `--ft-accent`. * * Every rule is anchored on `.ft-toggle-group-item` — the Svelte source's own * root class for this element, already the first token of its class list — so * nothing here escapes into the rest of a consumer's page now that Svelte's * compiler scoping is gone. */ .ft-toggle-group-item { --ft-toggle-group-accent: var( --ft-accent, light-dark(oklch(0.5432 0.2528 300.22), oklch(0.604 0.2606 301.75)) ); /* One local alias so the token pair is typed once rather than six times. 150ms = tokens.DURATIONS.fast, cubic-bezier(0.4, 0, 0.2, 1) = tokens.EASINGS.inout */ --ft-toggle-group-motion: var(--ft-duration-fast, 150ms) var(--ft-ease-inout, cubic-bezier(0.4, 0, 0.2, 1)); /* Replaces the `transition-colors` utility removed from the class string in ToggleGroupItem.tsx. Colour is a state change, not motion, so it stays outside the reduced-motion query. `text-decoration-color`, `fill` and `stroke` never change on this control, so the three that do are the faithful subset of what the utility covered. */ transition: color var(--ft-toggle-group-motion), background-color var(--ft-toggle-group-motion), border-color var(--ft-toggle-group-motion); /* Kills the ~300ms tap delay without blocking scroll — the same rule, for the same reason, as `.ft-pressable`. */ touch-action: manipulation; } /* The focus ring stays an untransitioned `box-shadow`: a ring that fades in is a ring a keyboard user has to wait for. */ .ft-toggle-group-item:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklab, var(--ft-toggle-group-accent) 35%, transparent); } /* Universal fallback — press feedback must survive reduced motion, and a UA that supports neither query still needs some pressed affordance. */ .ft-toggle-group-item:active:not(:disabled) { opacity: var(--ft-toggle-group-press-opacity, 0.85); } @media (prefers-reduced-motion: no-preference) { .ft-toggle-group-item { /* The individual `scale` property, not `transform: scale()`: this rule is unlayered, so a `transform` here would beat any transform utility a consumer passes through the public `className` prop — a `rotate-45` would silently vanish, at rest AND under the press. `scale` composes with the consumer's `transform` instead of replacing it. */ scale: 1; transition: color var(--ft-toggle-group-motion), background-color var(--ft-toggle-group-motion), border-color var(--ft-toggle-group-motion), scale var(--ft-toggle-group-motion); } .ft-toggle-group-item:active:not(:disabled) { scale: var(--ft-toggle-group-press-scale, 0.97); /* Full motion = scale only; reduced motion = opacity only. Never both. */ opacity: 1; } } 56:Tf16,"use client"; /** * The contract between the toggle group root and its items. * * `ToggleGroup` owns the selection and the roving-focus position; every item * reads and drives both through context instead of a prop and a callback * threaded down by hand for each of them. An item mounted outside a group * degrades to a plain, ungrouped button rather than throwing — see * `ToggleGroupItem`. * * 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 items * 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 * item starts out tabbable. */ import { createContext } from "react"; /** What the root publishes. Items read it; only the root writes it. */ export interface ToggleGroupContext { /** Whether one value can be active at a time, or several. */ readonly type: "single" | "multiple"; /** The active values, always as an array — `type="single"` just keeps at most one. */ readonly value: string[]; /** Disables every item, regardless of its own `disabled` prop. */ readonly disabled: boolean; /** Sizes every item. */ readonly size: "sm" | "md" | "lg"; /** The rail's stacking axis. Both arrow-key pairs work in either orientation — see `move`. */ readonly orientation: "horizontal" | "vertical"; /** Whether `itemValue` is part of the current selection. */ isSelected(itemValue: string): boolean; /** Activates or deactivates `itemValue`, following `type`'s rule. */ toggle(itemValue: string): void; /** * Joins the roving-focus order. An item skips this entirely while disabled. * * Identity-stable for the life of the root: it is called from an item'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 items and wrapping at both ends, and moves DOM focus * along with it. */ move(from: string, delta: number): void; /** Moves the roving-focus position, and DOM focus, to the first or last enabled item in DOM order. */ moveToEdge(edge: "first" | "last"): void; } /** * The context an item reads to find its surrounding group. 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 group = useContext(TOGGLE_GROUP_KEY); * ``` * * Read it as optional — an item rendered outside a `ToggleGroup` gets * `undefined` rather than throwing. */ export const TOGGLE_GROUP_KEY = createContext(undefined); TOGGLE_GROUP_KEY.displayName = "ToggleGroupContext"; 50:["$","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,["$","$L51",null,{"namespace":"@fancy-ui","registryDependencies":["https://fancy-ui.rama.app/r/internals-dom.json","https://fancy-ui.rama.app/r/sound.json","https://fancy-ui.rama.app/r/utils.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"react/src/components/toggle-group/ToggleGroup.tsx","content":"$53","type":"registry:ui","target":"@ui/fancy/components/toggle-group/ToggleGroup.tsx"},{"path":"react/src/components/toggle-group/ToggleGroupItem.tsx","content":"$54","type":"registry:ui","target":"@ui/fancy/components/toggle-group/ToggleGroupItem.tsx"},{"path":"react/src/components/toggle-group/index.ts","content":"\"use client\";\n\nexport { ToggleGroup } from \"./ToggleGroup\";\nexport type { ToggleGroupProps } from \"./ToggleGroup\";\nexport { ToggleGroupItem } from \"./ToggleGroupItem\";\nexport type { ToggleGroupItemProps } from \"./ToggleGroupItem\";\nexport { TOGGLE_GROUP_KEY } from \"./types\";\nexport type { ToggleGroupContext } from \"./types\";\n","type":"registry:ui","target":"@ui/fancy/components/toggle-group/index.ts"},{"path":"react/src/components/toggle-group/toggle-group-item.css","content":"$55","type":"registry:ui","target":"@ui/fancy/components/toggle-group/toggle-group-item.css"},{"path":"react/src/components/toggle-group/toggle-group.css","content":"/*\n * Exact rail padding/gap/radius from the mockup — not expressible as a\n * single Tailwind utility. The fill is `bg-background`, not `bg-muted`:\n * this app's dark theme has `--muted` *lighter* than `--card` (0.15 vs\n * 0.1 lightness), so a muted fill on a card-nested rail reads as raised,\n * the opposite of the mockup's recessed strip. `--background` is the\n * darkest token in dark mode and ties `--card` in light mode, so it can\n * only ever read as recessed or flush with its surroundings — never\n * inverted — at the cost of no visible fill contrast on a bare page in\n * light mode, where the 1px border alone carries the shape.\n *\n * `.ft-toggle-group` is the Svelte source's own root class, already the\n * first token of the root class list, so the rule below is anchored on it\n * exactly as the compiler-scoped original was.\n */\n.ft-toggle-group {\n\tborder-radius: 0.5rem; /* 8px */\n\tpadding: 3px;\n\tgap: 2px;\n}\n","type":"registry:ui","target":"@ui/fancy/components/toggle-group/toggle-group.css"},{"path":"react/src/components/toggle-group/types.ts","content":"$56","type":"registry:ui","target":"@ui/fancy/components/toggle-group/types.ts"}],"className":"h-[70svh] min-h-80"}]]}]