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:T10c8,"use client"; import { forwardRef, useState } from "react"; import type { ButtonHTMLAttributes, ReactNode } from "react"; import { cn } from "../../utils"; import { useSoundCue } from "../../sound/use-sound"; import "./toggle.css"; export type ToggleSize = "sm" | "md" | "lg"; export type ToggleVariant = "ghost" | "outline"; type BaseProps = { /** Whether the toggle is currently pressed (active) */ pressed?: boolean; /** Called with the new pressed state whenever the toggle is activated */ onPressedChange?: (pressed: boolean) => void; /** Visual size of the control */ size?: ToggleSize; /** `"ghost"` has no resting border, `"outline"` keeps one at rest */ variant?: ToggleVariant; /** Accessible name — required when `children` is icon-only */ label?: string; /** Toggle content, typically a single glyph or a short label */ 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, a hidden input named `name` is rendered inside * the button and submits `value` (default `"on"`) while pressed, nothing * while off or disabled, like a checkbox. The button is `type="button"` and * never submits. */ name?: string; /** * Value submitted under `name` while pressed. Defaults to `"on"`. Keeps the * native button `value` type, so a number is still accepted. */ value?: ButtonHTMLAttributes["value"]; /** `id` of the `

` the hidden input belongs to, when not nested in it. */ form?: string; }; export interface ToggleProps extends BaseProps, Omit, keyof BaseProps> {} const SIZE_CLASSES: Record = { sm: "size-[30px] rounded-[6px] text-xs", md: "size-[36px] rounded-[8px] text-sm", lg: "size-[42px] rounded-[10px] text-base", }; export const Toggle = forwardRef( ( { pressed: pressedProp, onPressedChange, disabled = false, size = "md", variant = "ghost", label, children, className, onClick, sound = false, name, value, form, ...rest }, ref ) => { // `pressed` mirrors the Svelte side's `pressed = $bindable(false)`: an // initial value the caller can seed, held afterward as the component's // own state and reassigned locally on every toggle regardless of // whether the caller re-passes the prop. `useState`'s lazy initializer // runs once, matching a bindable prop's one-time seed. const [pressed, setPressed] = useState(pressedProp ?? false); const playCue = useSoundCue(sound); const classes = cn( // No `transition-colors` here: the colocated CSS below declares a // `transition` shorthand on this same element, and it is loaded after // Tailwind's utility layer, so the utility would have been silently // replaced anyway. The colour channel is re-declared by hand there // instead. "ft-toggle inline-flex shrink-0 cursor-pointer items-center justify-center font-medium", "focus-visible:outline-none", "disabled:pointer-events-none disabled:opacity-50", SIZE_CLASSES[size], variant === "outline" && "border border-border", pressed ? "bg-secondary text-secondary-foreground" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground", className ); // The only place `pressed` changes. function toggle(event: React.MouseEvent) { if (disabled) return; const next = !pressed; setPressed(next); playCue(next ? "toggle-on" : "toggle-off"); onPressedChange?.(next); onClick?.(event); } return ( ); } ); Toggle.displayName = "Toggle"; 53:Tfeb,/* * The brand accent has no semantic token in the app's theme layer, so it is * declared locally with a light-dark() fallback — the same shape the AI * family components use for --ft-status-error. A consumer theme can still * override it by setting --ft-accent higher up the tree. */ .ft-toggle { --ft-toggle-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-motion: var(--ft-duration-fast, 150ms) var(--ft-ease-inout, cubic-bezier(0.4, 0, 0.2, 1)); /* The pressed ring is painted by an absolutely-positioned pseudo, which needs a containing block. `relative` on an inline-flex button changes no layout. */ position: relative; /* Replaces the `transition-colors` utility removed from the class string above. 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-motion), background-color var(--ft-toggle-motion), border-color var(--ft-toggle-motion); /* Kills the ~300ms tap delay without blocking scroll — the same rule, for the same reason, as `.ft-pressable`. */ touch-action: manipulation; } /* Pressed state gets an inset accent ring on top of the secondary surface, rather than a plain border, so the active look survives on both the ghost and outline variants without fighting their own border. It lives on `::before` rather than on the button itself because the button's own `box-shadow` is its focus ring: a ring that must never animate cannot share a property with a signal that should. Same shadow, same inherited radius, one layer down — the resting look is unchanged. */ .ft-toggle::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ft-toggle-accent) 50%, transparent); opacity: 0; } .ft-toggle[aria-pressed="true"]::before { opacity: 1; } /* One rule, not two: with the pressed ring on the pseudo, focus while pressed no longer has to spell out both shadows at once — the pseudo paints the inset ring and the host paints the focus ring, on separate layers that cannot overwrite each other. */ .ft-toggle:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklab, var(--ft-toggle-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:active:not(:disabled) { opacity: var(--ft-toggle-press-opacity, 0.85); } @media (prefers-reduced-motion: no-preference) { .ft-toggle { /* The individual `scale` property, not `transform: scale()`: this rule is loaded after Tailwind's utility layer, 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-motion), background-color var(--ft-toggle-motion), border-color var(--ft-toggle-motion), scale var(--ft-toggle-motion); } .ft-toggle:active:not(:disabled) { scale: var(--ft-toggle-press-scale, 0.97); /* Full motion = scale only; reduced motion = opacity only. Never both. */ opacity: 1; } /* A 1px inset ring has no axis to grow along, so only its opacity travels — the signal arrives on the same clock as the colour beside it instead of a frame ahead of it. */ .ft-toggle::before { transition: opacity var(--ft-toggle-signal-duration, var(--ft-duration-fast, 150ms)) var(--ft-ease-inout, cubic-bezier(0.4, 0, 0.2, 1)); } } 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-dom.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/toggle/Toggle.tsx","content":"$52","type":"registry:ui","target":"@ui/fancy/components/toggle/Toggle.tsx"},{"path":"react/src/components/toggle/index.ts","content":"\"use client\";\n\nexport { Toggle } from \"./Toggle\";\nexport type { ToggleProps, ToggleSize, ToggleVariant } from \"./Toggle\";\n","type":"registry:ui","target":"@ui/fancy/components/toggle/index.ts"},{"path":"react/src/components/toggle/toggle.css","content":"$53","type":"registry:ui","target":"@ui/fancy/components/toggle/toggle.css"}],"className":"h-[70svh] min-h-80"}]]}]