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:T1003,import * as React from "react"; import { cn } from "@/lib/utils"; export interface SliderProps extends Omit, "onChange" | "type" | "value"> { /** Optional label shown above the slider. */ label?: React.ReactNode; value: number; onChange: (value: number) => void; /** * Optional formatter for the value display shown to the right of the label. * If `label` is present and `formatValue` is provided (or the value is a * finite number), the formatted value is rendered as a mono / tabular hint. */ formatValue?: (value: number) => string; } /** * A thin, accent-themed range slider. Uses a native `` * with styling injected via Tailwind arbitrary variants for both the WebKit * and Firefox thumb pseudo-elements. The label + value-readout row above the * track follows the design-system "field label" pattern (small caps, mono). */ const Slider = React.forwardRef( ({ label, value, onChange, formatValue, className, min, max, step, id: idProp, ...props }, ref) => { const autoId = React.useId(); const id = idProp ?? (label !== undefined ? autoId : undefined); const display = formatValue ? formatValue(value) : String(value); return (

{label !== undefined && (

{label} {formatValue && ( {display} )}

)} onChange(Number(e.target.value))} className={cn( "appearance-none w-full h-1.5 rounded-full cursor-pointer", // Track: neutral-700 in dark (NOT neutral-800, which equals // --color-surface-dark #27272a -- the track would vanish on a Card). "bg-[var(--color-warm-200)] dark:bg-[var(--color-neutral-700)]", "wj-focus-ring", // WebKit thumb "[&::-webkit-slider-thumb]:appearance-none", "[&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4", "[&::-webkit-slider-thumb]:rounded-full", "[&::-webkit-slider-thumb]:bg-[var(--color-accent-500)]", "[&::-webkit-slider-thumb]:shadow-md-bevel-accent", // Hover and press are the SAME size: the thumb grows while the // pointer is on it or dragging it, and only returns once both end. // A separate press size made a click read as shrink-then-grow, // since releasing over the thumb lands back in the hover state. "[&::-webkit-slider-thumb]:transition-transform", "hover:[&::-webkit-slider-thumb]:scale-110", "active:[&::-webkit-slider-thumb]:scale-110", // Firefox thumb "[&::-moz-range-thumb]:appearance-none", "[&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4", "[&::-moz-range-thumb]:rounded-full", "[&::-moz-range-thumb]:bg-[var(--color-accent-500)]", "[&::-moz-range-thumb]:border-0", "[&::-moz-range-thumb]:shadow-md-bevel-accent", "[&::-moz-range-thumb]:transition-transform", "hover:[&::-moz-range-thumb]:scale-110", "active:[&::-moz-range-thumb]:scale-110", "disabled:opacity-50 disabled:cursor-not-allowed", className, )} {...props} />

); }, ); Slider.displayName = "Slider"; export { Slider }; 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":"@whiskeyjack","registryDependencies":["https://whiskeyjack.net/r/utils.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/ui/slider.tsx","content":"$52","type":"registry:ui","target":"components/ui/slider.tsx"}],"className":"h-[70svh] min-h-80"}]]}]