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:T25d2,"use client"; import { forwardRef, useEffect, useRef, useState } from "react"; import type { ChangeEvent, ComponentPropsWithoutRef } from "react"; import { cn } from "../../utils"; import { useField } from "../../internals/field"; import { useComposedRefs } from "../../internals/dom/use-composed-refs"; import { useElementRef } from "../../internals/dom/use-element-ref"; import { useLiveRef } from "../../internals/dom/use-live-ref"; import { useSoundCue } from "../../sound/use-sound"; import "./slider.css"; interface SliderOwnProps { /** Current value; seeds internal state and resyncs whenever the prop changes. */ value?: number; /** Called with the new value on every input event. */ onValueChange?: (value: number) => void; /** Lower bound. */ min?: number; /** Upper bound. */ max?: number; /** Increment size, including fractional steps. */ step?: number; /** Blocks dragging and keyboard interaction. Overridden by a surrounding FormField. */ disabled?: boolean; /** Element id. Overridden by a surrounding FormField's own `controlId`. */ id?: string; /** Native `name`, read on form submission. */ name?: string; /** Accessible name — for a control with no visible Label next to it. */ label?: string; /** Shows the current value in a bubble that tracks the thumb. */ showValue?: boolean; /** Shows `min` and `max` as end labels below the track. */ showBounds?: boolean; /** Additional CSS classes, applied to the outer wrapper. */ 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 SliderProps extends Omit< ComponentPropsWithoutRef<"input">, keyof SliderOwnProps | "type" | "role" | "defaultValue" >, SliderOwnProps {} export const Slider = forwardRef( ( { value: valueProp = 0, onValueChange, min = 0, max = 100, step = 1, disabled = false, id, name, label, showValue = false, showBounds = false, className, sound = false, onChange, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, "aria-invalid": ariaInvalid, // An `` is a void element: a stray `children` must not reach it. children: _children, ...rest }, ref ) => { // `value` mirrors the Svelte side's `value = $bindable(0)`: the prop // seeds internal state, the component keeps writing that state itself // on every input event, and a caller that re-passes a NEW prop value // resyncs it — the render-phase adjust below, same shape as Input's. const [value, setValue] = useState(valueProp); const [seededFrom, setSeededFrom] = useState(valueProp); if (valueProp !== seededFrom) { setSeededFrom(valueProp); setValue(valueProp); } // Undefined outside a FormField — every derived below then falls back to // this component's own props instead of the context, so the control works // standalone exactly as it does wrapped. const field = useField(); const effectiveId = field?.controlId ?? id; const effectiveDisabled = field?.disabled ?? disabled; // Slider carries no local `invalid` prop of its own — a surrounding // FormField is the only source for it, same as aria-describedby below. // `field.required` has no counterpart here at all: the ARIA slider role // does not support aria-required (a range always carries a value, so // there is no "empty" state to require filling in), and any visible // required marker is the FormField's own Label to render, not this input's. const effectiveInvalid = field?.invalid ?? false; // A native range input clamps its own displayed value to [min,max] // automatically, but a `value` prop set out of range (or left there // after `max` shrinks past it at runtime) would otherwise leave // aria-valuenow and the showValue bubble reporting the raw, unclamped // number while the thumb sits wherever the browser actually clamped it — // visible to a sighted user as a bubble that disagrees with the thumb's // own position. Every render below reads `clampedValue`, not `value`, so // this is correct from the very first paint (including SSR) regardless // of when the effect below gets around to correcting the state itself. const clampedValue = Math.min(max, Math.max(min, value)); // Also corrects `value` itself, the same way NumberInput clamps on // blur, so a caller's own state does not stay silently out of range // forever. `min`/`max` are the only tracked dependency, matching the // Svelte source's `$effect` which reads `value` through `untrack` — // here that untracked read is `valueRef`, a plain mutable ref kept in // sync with `value` on every render (not `useLiveRef`, whose contract // is read-only: this effect also WRITES the mirror back, below, so a // StrictMode re-invoke sees the already-corrected number instead of // the stale one). The clamp is computed in the effect BODY, never // inside a `setValue` updater: React runs updaters during the next // render pass (twice under StrictMode), so calling `onValueChange` // from one would fire a consumer's callback twice for a single clamp // and update a parent from another component's render phase. const valueRef = useRef(value); valueRef.current = value; useEffect(() => { const current = valueRef.current; const clamped = Math.min(max, Math.max(min, current)); if (clamped !== current) { // Written back before the state lands so a StrictMode // re-invoke of this same effect sees the corrected number and // stays a no-op. valueRef.current = clamped; setValue(clamped); onValueChange?.(clamped); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [min, max]); // The one number the gradient fill and the value bubble both need, // computed once here rather than duplicated as a CSS calc() on each // consumer of it. const fraction = max > min ? Math.min(1, Math.max(0, (clampedValue - min) / (max - min))) : 0; // The single place `value` changes. A native `disabled` input never fires // `input` from a real drag or key press, but a synthetic dispatch walks // straight past that guard the same way a synthetic click does on a // button — so the early return is repeated here rather than trusted to // the attribute alone. function handleInput(event: ChangeEvent) { if (effectiveDisabled) return; const next = Number(event.currentTarget.value); setValue(next); onValueChange?.(next); onChange?.(event); } // React's `onChange` prop on a controlled range input is wired to the // native `input` event (handleInput above), which fires continuously // while dragging — the wrong moment for a cue that must fire once per // commit. The native `change` event (drag release, or once per // committed keyboard step) has no React prop of its own, so it is // picked up with a plain listener on the node itself, mirroring the // Svelte source's separate `oninput`/`onchange` handlers. const [inputNode, inputNodeRef] = useElementRef(); const composedRef = useComposedRefs(ref, inputNodeRef); const effectiveDisabledRef = useLiveRef(effectiveDisabled); const playCue = useSoundCue(sound); useEffect(() => { if (!inputNode) return; function handleChange() { if (effectiveDisabledRef.current) return; playCue("tick"); } inputNode.addEventListener("change", handleChange); return () => inputNode.removeEventListener("change", handleChange); }, [inputNode, effectiveDisabledRef, playCue]); return (

{showValue && ( // Decorative: the input's own aria-valuenow already carries this // number for assistive tech, so the bubble is hidden from it to // avoid announcing the value twice. )}

{showBounds && ( // Decorative echo of min/max; the authoritative values live on the // input's own min/max/aria-valuemin/aria-valuemax attributes. )}

); } ); Slider.displayName = "Slider"; 53:Td8f,/* * Declared on the wrapper, not on `.ft-slider` itself, so the value bubble * — a sibling ``, not a descendant of the input — can inherit the * same two custom properties for its text colour instead of duplicating * the values. Custom properties inherit down the whole subtree (including * into the input's own vendor thumb/track pseudo-elements below), just * not sideways between siblings, which is what forced this up a level. */ .ft-slider-wrap { --ft-slider-accent: var( --ft-accent, light-dark(oklch(0.5432 0.2528 300.22), oklch(0.604 0.2606 301.75)) ); /* * The fill's cool end has no semantic token either — declared the same * shape as the accent above, just a second stop for the purple-to-cyan * gradient the mockup shows tracking the current value. * Precomputed: #42cfff = oklch(0.8001 0.1345 225.49). Its darker * light-mode partner is derived the same way the accent pair's is — * lightness and chroma scaled by the accent pair's own light:dark * ratios (≈0.899 and ≈0.970), hue shifted by the same ≈-1.53° — giving * oklch(0.7196 0.1305 223.96). Light mode takes the darker end. */ --ft-slider-accent-end: light-dark(oklch(0.7196 0.1305 223.96), oklch(0.8001 0.1345 225.49)); } /* * A native range input has no cross-browser "filled portion" of its own. * WebKit lets the track's background do double duty: a hard-stop gradient * paints the accent up to --ft-slider-fill and the resting track colour * after it. Firefox has no equivalent hook on ::-moz-range-track, so its * filled portion is drawn as the separate ::-moz-range-progress layer * below instead. */ .ft-slider::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: linear-gradient( to right, var(--ft-slider-accent), var(--ft-slider-accent-end) var(--ft-slider-fill, 0%), var(--color-input, color-mix(in oklab, currentColor 12%, transparent)) var(--ft-slider-fill, 0%) ); } .ft-slider::-moz-range-track { height: 4px; border-radius: 999px; background: var(--color-input, color-mix(in oklab, currentColor 12%, transparent)); } .ft-slider::-moz-range-progress { height: 4px; border-radius: 999px; background: linear-gradient(to right, var(--ft-slider-accent), var(--ft-slider-accent-end)); } /* * Vendor pseudo-elements for the thumb cannot be combined into one * selector list — a selector list is invalid in its entirety the moment * one part of it is unrecognised, so folding ::-webkit-slider-thumb and * ::-moz-range-thumb together would make the whole rule drop silently in * whichever browser doesn't own the other vendor's part. Two separate * rules, restyled identically, is the only way both browsers apply either * of them. */ .ft-slider::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; margin-top: -5px; /* centers a 14px thumb on the 4px track */ border-radius: 50%; background: var(--color-background, #0f0f13); border: 2px solid var(--ft-slider-accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--ft-slider-accent) 25%, transparent); } .ft-slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--color-background, #0f0f13); border: 2px solid var(--ft-slider-accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--ft-slider-accent) 25%, transparent); } .ft-slider:disabled::-webkit-slider-thumb { box-shadow: none; } .ft-slider:disabled::-moz-range-thumb { box-shadow: none; } 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/slider/Slider.tsx","content":"$52","type":"registry:ui","target":"@ui/fancy/components/slider/Slider.tsx"},{"path":"react/src/components/slider/index.ts","content":"\"use client\";\n\nexport { Slider } from \"./Slider\";\nexport type { SliderProps } from \"./Slider\";\n","type":"registry:ui","target":"@ui/fancy/components/slider/index.ts"},{"path":"react/src/components/slider/slider.css","content":"$53","type":"registry:ui","target":"@ui/fancy/components/slider/slider.css"}],"className":"h-[70svh] min-h-80"}]]}]