53 lines
1.7 KiB
TypeScript
53 lines
1.7 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
import * as SliderPrimitive from "@radix-ui/react-slider"
|
|
|
|
import { Slider as SubframeSlider } from "~/ui/components/Slider"
|
|
import { cn } from "~/lib/utils"
|
|
|
|
// Subframe migration (strangler shim):
|
|
// This file keeps the original shadcn `Slider` API (the Radix `SliderPrimitive.Root`
|
|
// props) but renders the Subframe design-system Slider. Subframe's Slider wraps the same
|
|
// Radix Slider primitive, so value/defaultValue/onValueChange/onValueCommit/min/max/step/
|
|
// disabled and controlled+uncontrolled all pass straight through.
|
|
//
|
|
// Trade-off: Subframe renders a fixed number of thumbs — one by default, plus a second when
|
|
// `range` is set. We derive `range` from the value count so single- and dual-thumb sliders
|
|
// (the only shapes used in this repo) render correctly. Sliders with 3+ thumbs are not
|
|
// expressible with the Subframe component; those would need the legacy shadcn rendering.
|
|
function Slider({
|
|
className,
|
|
defaultValue,
|
|
value,
|
|
min = 0,
|
|
max = 100,
|
|
...props
|
|
}: React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>) {
|
|
// Note: ref is intentionally excluded — Radix Root's ref targets a span while Subframe's
|
|
// Slider ref targets a div; the slider is unused in-app so no caller relies on forwarding.
|
|
const _values = React.useMemo(
|
|
() =>
|
|
Array.isArray(value)
|
|
? value
|
|
: Array.isArray(defaultValue)
|
|
? defaultValue
|
|
: [min, max],
|
|
[value, defaultValue, min, max]
|
|
)
|
|
|
|
return (
|
|
<SubframeSlider
|
|
defaultValue={defaultValue}
|
|
value={value}
|
|
min={min}
|
|
max={max}
|
|
range={_values.length > 1}
|
|
className={cn("w-full", className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export { Slider }
|