4c: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T2569,import { useState } from "react" import { Slider as SliderPrimitive } from "@base-ui/react/slider" import { cn } from "@/lib/utils" /** * Material 3 Expressive slider. * * Kit geometry (Sliders page): five sizes with a thick track and a narrow 4dp * handle that squeezes to 2dp while dragged. The active and inactive tracks * are separate shapes — outer ends fully round, handle-facing ends 2dp — with * a real 6dp gap either side of the handle, so the handle appears to part the * track rather than sit on top of it. * * | Size | Track | Handle | * | ---- | ----- | ------ | * | xs | 16 | 44 | * | sm | 24 | 44 | * | md | 40 | 52 | * | lg | 56 | 68 | * | xl | 96 | 108 | */ type SliderSize = "xs" | "sm" | "md" | "lg" | "xl" /** @deprecated `small` / `medium` / `large` map to `xs` / `sm` / `md`. */ type LegacySliderSize = "small" | "medium" | "large" type SliderVariant = "standard" | "centered" type SliderProps = SliderPrimitive.Root.Props & { getAriaLabel?: SliderPrimitive.Thumb.Props["getAriaLabel"] showTicks?: boolean showValue?: boolean size?: SliderSize | LegacySliderSize variant?: SliderVariant } const legacySizes: Record = { small: "xs", medium: "sm", large: "md" } const trackSize: Record = { xs: "data-horizontal:h-4 data-vertical:w-4", sm: "data-horizontal:h-6 data-vertical:w-6", md: "data-horizontal:h-10 data-vertical:w-10", lg: "data-horizontal:h-14 data-vertical:w-14", xl: "data-horizontal:h-24 data-vertical:w-24", } const handleSize: Record = { xs: "data-horizontal:h-11 data-vertical:w-11", sm: "data-horizontal:h-11 data-vertical:w-11", md: "data-horizontal:h-13 data-vertical:w-13", lg: "data-horizontal:h-17 data-vertical:w-17", xl: "data-horizontal:h-27 data-vertical:w-27", } /** Half the 4dp handle plus the kit's 6dp gap. */ const HANDLE_CLEARANCE = 8 function Slider({ "aria-label": ariaLabel, className, defaultValue, getAriaLabel, max = 100, min = 0, onValueChange, orientation = "horizontal", showTicks = false, showValue = false, size: sizeProp = "xs", step = 1, value, variant = "standard", ...props }: SliderProps) { const size: SliderSize = sizeProp in legacySizes ? legacySizes[sizeProp as LegacySliderSize] : (sizeProp as SliderSize) const normalizeValues = (input: number | readonly number[] | undefined) => typeof input === "number" ? [input] : Array.isArray(input) ? [...input] : [min] const [uncontrolledValues, setUncontrolledValues] = useState(() => normalizeValues(defaultValue)) const values = value === undefined ? uncontrolledValues : normalizeValues(value) const percentage = (number: number) => ((number - min) / (max - min)) * 100 const centered = variant === "centered" && values.length === 1 const currentPercentage = percentage(values[0] ?? min) const tickCount = Math.min(100, Math.max(1, Math.floor((max - min) / step))) const horizontal = orientation === "horizontal" // The track is drawn as segments between the thumbs (and the midpoint for a // centered slider) so each one can carry its own corners and clearance. type Boundary = { at: number; handle: boolean } const boundaries: Boundary[] = [ { at: 0, handle: false }, ...values.map((item) => ({ at: percentage(item), handle: true })), ...(centered ? [{ at: 50, handle: false }] : []), { at: 100, handle: false }, ].sort((a, b) => a.at - b.at) const segments = boundaries.slice(0, -1).map((start, index) => { const end = boundaries[index + 1] const active = centered ? Math.min(start.at, end.at) >= Math.min(50, currentPercentage) && Math.max(start.at, end.at) <= Math.max(50, currentPercentage) && start.at !== end.at : values.length > 1 ? index === 1 : index === 0 return { start, end, active } }) const clearance = (boundary: Boundary) => (boundary.handle ? HANDLE_CLEARANCE : 0) const segmentStyle = (start: Boundary, end: Boundary) => horizontal ? { left: `calc(${start.at}% + ${clearance(start)}px)`, right: `calc(${100 - end.at}% + ${clearance(end)}px)` } : { bottom: `calc(${start.at}% + ${clearance(start)}px)`, top: `calc(${100 - end.at}% + ${clearance(end)}px)` } // Outer ends are round; ends that face a handle are the kit's 2dp corner. const segmentRadius = (start: Boundary, end: Boundary) => cn( "rounded-[2px]", !start.handle && (horizontal ? "rounded-l-m3-full" : "rounded-b-m3-full"), !end.handle && (horizontal ? "rounded-r-m3-full" : "rounded-t-m3-full"), ) return ( { if (value === undefined) setUncontrolledValues(normalizeValues(nextValue)) onValueChange?.(nextValue, eventDetails) }} {...props} > {/* Base UI's indicator is kept for its semantics but painted by the segments below. */} {segments.map(({ start, end, active }, index) => ( ))} {centered && ( )} {showTicks && Array.from({ length: tickCount + 1 }, (_, index) => { const at = (index / tickCount) * 100 const onActive = values.length > 1 ? at >= percentage(values[0]) && at <= percentage(values[1]) : centered ? at >= Math.min(50, currentPercentage) && at <= Math.max(50, currentPercentage) : at <= currentPercentage return ( {Array.from({ length: values.length }, (_, index) => ( values.length > 1 ? `${ariaLabel} ${thumbIndex === 0 ? "minimum" : "maximum"}` : ariaLabel : undefined)} className={cn( "group/slider-thumb relative block shrink-0 cursor-grab rounded-[2px] bg-m3-primary select-none", handleSize[size], // Expressive squeezes the 4dp handle to 2dp while it is dragged. horizontal ? "w-1 active:w-0.5 data-dragging:w-0.5" : "h-1 active:h-0.5 data-dragging:h-0.5", "transition-[width,height] duration-(--m3-spring-effects-fast-duration) ease-(--m3-spring-effects-fast)", // 48dp minimum touch target. "after:absolute after:-inset-x-6 after:-inset-y-1", "active:cursor-grabbing", "outline-none focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-m3-secondary", "data-disabled:pointer-events-none data-disabled:bg-m3-on-surface/38", )} > {showValue && ( {values[index]} )} ))} ) } export { Slider, type SliderProps, type SliderSize, type SliderVariant } 4b:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@base-ui/react@^1.7.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@base-ui/react@^1.7.0"}]]}]}]]}],["$","$L4c",null,{"namespace":"@materialcn","registryDependencies":["https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json","https://guillermo-rebolledo.github.io/materialcn/r/utils.json"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"src/components/ui/slider.tsx","content":"$4e","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]