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:T16ae,"use client"; import { forwardRef, useState } from "react"; import type { ChangeEvent, ComponentPropsWithoutRef, ReactNode } from "react"; import { cn } from "../../utils"; import { useField } from "../../internals/field"; import { useSoundCue } from "../../sound/use-sound"; import "./switch.css"; export type SwitchSize = "sm" | "md" | "lg"; interface SwitchOwnProps { /** * Whether the switch is on. Controlled when supplied: pair it with * `onCheckedChange`, the React counterpart of the Svelte source's * `bind:checked`. */ checked?: boolean; /** Initial on/off state when uncontrolled (no `checked` prop given). */ defaultChecked?: boolean; /** Called with the new value whenever the switch is activated. */ onCheckedChange?: (checked: boolean) => void; /** Blocks interaction; excluded from form submission. Overridden by a surrounding FormField. */ disabled?: boolean; /** Native `required`. Overridden by a surrounding FormField. */ required?: boolean; /** Element id. Overridden by a surrounding FormField's own `controlId`. */ id?: string; /** Native `name`, read on form submission. */ name?: string; /** Form value submitted while on. */ value?: string; /** * Accessible name, rendered as `aria-label`. Typically for a control * with no visible `children` text; also applies alongside `children` * that render no text of their own (e.g. an icon), since the two props * aren't mutually exclusive and there is no way to detect from here * whether an arbitrary node renders text. Skip this when `children` * already supplies the visible label text — passing both means * `aria-label` wins the accessible name and the visible text is * announced by nothing. */ label?: string; /** Visible label text, rendered beside the track. */ children?: ReactNode; /** Track/knob size. */ size?: SwitchSize; /** Additional CSS classes, merged onto the wrapping ``. */ className?: string; /** * Plays the matching interface cue through the sound controller. Off * by default; only audible once the user has enabled sound. */ sound?: boolean; } export interface SwitchProps extends Omit, keyof SwitchOwnProps | "type" | "role">, SwitchOwnProps {} /** * A native `` with `role="switch"` — the input IS the * track, restyled rather than replaced, with the knob drawn as a pseudo-element * so the input stays the only focusable, checkable thing. * * The element reference arrives through the ref channel (the Svelte source * declares `ref = $bindable(null)`), pointing at the native ``. */ export const Switch = forwardRef( ( { checked: checkedProp, defaultChecked = false, onCheckedChange, disabled = false, required = false, id, name, value, label, children, size = "md", className, sound = false, onChange, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, "aria-invalid": ariaInvalid, ...rest }, forwardedRef ) => { const isControlled = checkedProp !== undefined; const [uncontrolledChecked, setUncontrolledChecked] = useState(defaultChecked); const checked = isControlled ? checkedProp : uncontrolledChecked; // Undefined outside a FormField — every fallback below then uses this // component's own props instead of the context, so the control works // standalone exactly as it does wrapped. Switch has no own `invalid` // prop (a switch takes effect immediately; there is usually nothing to // validate), but it still surfaces aria-invalid when a surrounding // FormField says the field is invalid. const field = useField(); const effectiveId = field?.controlId ?? id; const effectiveDisabled = field?.disabled ?? disabled; const effectiveRequired = field?.required ?? required; const effectiveInvalid = field?.invalid ?? false; const playCue = useSoundCue(sound); // The native `disabled` attribute already blocks real interaction, but // a synthetic event dispatched straight at the element — as a test // does — walks past that guard, so the handler repeats it. function handleChange(event: ChangeEvent) { if (effectiveDisabled) { // A disabled control must never let its visible state drift // from the app's own model. A real browser already refuses to // run the default toggle action on a disabled checkbox, but a // synthetic event dispatched straight at the element — as a // test does — can still mutate the DOM property directly, so // the handler puts it back rather than trusting the guard // above alone. event.currentTarget.checked = checked; return; } const next = event.currentTarget.checked; if (!isControlled) setUncontrolledChecked(next); playCue(next ? "toggle-on" : "toggle-off"); onCheckedChange?.(next); onChange?.(event); } const wrapperClasses = cn( "ft-switch-wrap inline-flex items-center gap-[10px] text-[13px]", effectiveDisabled ? "cursor-not-allowed opacity-50" : "cursor-pointer", className ); return ( {children} ); } ); Switch.displayName = "Switch"; 53:Td81,/* * The native input IS the track — restyled, not replaced. The knob is a * `::after` pseudo-element on it rather than a second DOM node, so the * input stays the only focusable, checkable thing (same rule * RadioGroupItem's own filled centre follows). */ .ft-switch { --ft-switch-accent: var( --ft-accent, light-dark(oklch(0.5432 0.2528 300.22), oklch(0.604 0.2606 301.75)) ); /* One local INTERNAL alias so the token pair is typed once rather than four times. Declared here, on the control itself, so a value inherited from an ancestor never reaches it — it is deliberately not a theming knob, and the README says so. Retiming a Switch is done through --ft-duration-fast / --ft-ease-inout, which this reads and which do inherit. 150ms = tokens.DURATIONS.fast, cubic-bezier(0.4, 0, 0.2, 1) = tokens.EASINGS.inout. `inout` and not `out`: a switch is a reversible state flip, not an arrival — the knob travels the same way in both directions. */ --ft-switch-motion: var(--ft-duration-fast, 150ms) var(--ft-ease-inout, cubic-bezier(0.4, 0, 0.2, 1)); appearance: none; flex: none; margin: 0; border-radius: 999px; background-color: var(--color-input, rgba(154, 163, 178, 0.3)); position: relative; cursor: pointer; vertical-align: middle; /* Colour is a state change, not motion (the knob's slide below is the only thing here that travels), so it stays outside the reduced-motion query — the same rule Toggle's and Input's own colour transitions follow. */ transition: background-color var(--ft-switch-motion); } .ft-switch::after { content: ""; position: absolute; top: 3px; left: 3px; border-radius: 50%; background-color: var(--color-muted-foreground, #9aa3b2); transition: background-color var(--ft-switch-motion); } .ft-switch:checked { background-color: var(--ft-switch-accent); } .ft-switch:checked::after { background-color: white; } .ft-switch:disabled { cursor: not-allowed; } .ft-switch:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--ft-switch-accent) 25%, transparent); } /* * Geometry per size — exact pixel values, not the closest Tailwind scale * step, so the three sizes stay proportioned to each other and the * knob's travel always lands exactly on * track width − knob size − 2 × inset. */ .ft-switch[data-size="sm"] { width: 32px; height: 18px; } .ft-switch[data-size="sm"]::after { width: 12px; height: 12px; } .ft-switch[data-size="sm"]:checked::after { transform: translateX(14px); } .ft-switch[data-size="md"] { width: 40px; height: 22px; } .ft-switch[data-size="md"]::after { width: 16px; height: 16px; } .ft-switch[data-size="md"]:checked::after { transform: translateX(18px); } .ft-switch[data-size="lg"] { width: 48px; height: 26px; } .ft-switch[data-size="lg"]::after { width: 20px; height: 20px; } .ft-switch[data-size="lg"]:checked::after { transform: translateX(22px); } /* * The knob's slide is the only motion here — colour changes above are * exempt from reduced-motion the same way Toggle's and Input's own * hover/pressed colour transitions are, but a moving element needs the * opt-out. Under reduced motion the knob still lands in the right place, * it just snaps instead of sliding. */ @media (prefers-reduced-motion: no-preference) { .ft-switch::after { transition: background-color var(--ft-switch-motion), transform var(--ft-switch-motion); } } 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/sound.json","https://fancy-ui.rama.app/r/utils.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"react/src/components/switch/Switch.tsx","content":"$52","type":"registry:ui","target":"@ui/fancy/components/switch/Switch.tsx"},{"path":"react/src/components/switch/index.ts","content":"\"use client\";\n\nexport { Switch } from \"./Switch\";\nexport type { SwitchProps, SwitchSize } from \"./Switch\";\n","type":"registry:ui","target":"@ui/fancy/components/switch/index.ts"},{"path":"react/src/components/switch/switch.css","content":"$53","type":"registry:ui","target":"@ui/fancy/components/switch/switch.css"}],"className":"h-[70svh] min-h-80"}]]}]