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:T188c,"use client"; import { Slider as SliderPrimitive } from "@base-ui/react/slider"; import * as stylex from "@stylexjs/stylex"; import { labelStyles } from "@/components/primitives/label"; import type { Sx } from "@/lib/constella/styles"; import { typeStyles } from "@/lib/constella/styles"; import { colors, durations, easings, opacities, presses, radii, shadows, sizes, space, strokes, } from "@/lib/constella/tokens.stylex"; type Styled = Omit & { sx?: Sx; }; const halfThumb = `calc(${sizes.thumb} / 2)`; const halfThumbOut = `calc(${sizes.thumb} / -2)`; const vertical = ":is([data-orientation='vertical'])"; const styles = stylex.create({ // Label and value share the first row; the control spans the second. slider: { alignItems: "center", columnGap: space.sm, display: "grid", gridTemplateColumns: "minmax(0, 1fr) auto", opacity: { default: 1, ":is([data-disabled])": opacities.disabled }, width: { default: "100%", [vertical]: "auto" }, }, value: { color: colors.textSecondary, fontVariantNumeric: "tabular-nums", gridColumn: 2, }, control: { alignItems: "center", cursor: { default: "pointer", ":is([data-disabled])": "not-allowed" }, display: "flex", flexDirection: { default: "row", [vertical]: "column" }, gridColumn: "1 / -1", height: { default: sizes.controlXxs, [vertical]: "100%" }, // Centered thumbs need no measuring, so they render before hydration; Base UI maps the // pointer inside this padding, so the thumb stays within the bar and still tracks the pointer. paddingBlock: { default: 0, [vertical]: halfThumb }, paddingInline: { default: halfThumb, [vertical]: 0 }, touchAction: "none", userSelect: "none", width: { default: null, [vertical]: sizes.controlXxs }, }, // The bar reaches past the track into the control's padding, under the thumb at either end. track: { height: { default: strokes.track, [vertical]: "100%" }, position: "relative", width: { default: "100%", [vertical]: strokes.track }, "::before": { backgroundColor: colors.fillOpaque, borderStartStartRadius: radii.full, borderStartEndRadius: radii.full, borderEndStartRadius: radii.full, borderEndEndRadius: radii.full, content: "''", insetBlockEnd: { default: 0, [vertical]: halfThumbOut }, insetBlockStart: { default: 0, [vertical]: halfThumbOut }, insetInlineEnd: { default: halfThumbOut, [vertical]: 0 }, insetInlineStart: { default: halfThumbOut, [vertical]: 0 }, position: "absolute", }, }, // Base UI sizes the indicator along the track; the bar reaches back under the start thumb. indicator: { height: { default: "100%", [vertical]: null }, width: { default: null, [vertical]: "100%" }, "::before": { backgroundColor: colors.accentSolid, borderStartStartRadius: radii.full, borderStartEndRadius: radii.full, borderEndStartRadius: radii.full, borderEndEndRadius: radii.full, content: "''", insetBlockEnd: { default: 0, [vertical]: halfThumbOut }, insetBlockStart: 0, insetInlineEnd: 0, insetInlineStart: { default: halfThumbOut, [vertical]: 0 }, position: "absolute", }, }, thumb: { backgroundColor: colors.accentSolid, borderStartStartRadius: radii.full, borderStartEndRadius: radii.full, borderEndStartRadius: radii.full, borderEndEndRadius: radii.full, boxShadow: shadows.defaultRing, height: sizes.thumb, // Base UI positions the thumb with `translate`, so `transform` is free for the press. transform: { default: null, ":is([data-dragging])": presses.icon }, transitionDuration: durations.press, transitionProperty: "transform", transitionTimingFunction: easings.out, width: sizes.thumb, "::before": { content: "''", insetBlockEnd: `calc((${sizes.thumb} - ${sizes.hitArea}) / 2)`, insetBlockStart: `calc((${sizes.thumb} - ${sizes.hitArea}) / 2)`, insetInlineEnd: `calc((${sizes.thumb} - ${sizes.hitArea}) / 2)`, insetInlineStart: `calc((${sizes.thumb} - ${sizes.hitArea}) / 2)`, position: "absolute", }, }, }); function Slider({ sx, ...props }: Styled>) { return ( ); } function SliderLabel({ sx, ...props }: Styled) { return ( ); } function SliderValue({ sx, ...props }: Styled) { return ( ); } /** Renders the track, the filled indicator and one thumb. For a range, compose the parts. */ function SliderControl({ children, sx, ...props }: Styled) { return ( {children ?? ( )} ); } function SliderTrack({ sx, ...props }: Styled) { return ( ); } function SliderIndicator({ sx, ...props }: Styled) { return ( ); } function SliderThumb({ sx, ...props }: Styled) { return ( ); } export { Slider, SliderControl, SliderIndicator, SliderLabel, SliderThumb, SliderTrack, SliderValue, }; 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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@base-ui/react",{"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"}]]}]}],["$","li","@stylexjs/stylex",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40stylexjs%2Fstylex","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":"@stylexjs/stylex"}]]}]}]]}],["$","$L50",null,{"namespace":"@constella","registryDependencies":["https://constella.aayush.cv/r/base.json","https://constella.aayush.cv/r/label.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/components/primitives/slider.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]