{
  "$schema": "https://blode.co/ui/schema/registry-item.json",
  "name": "slider",
  "title": "Slider",
  "author": "Matthew Blode",
  "description": "A draggable control for selecting a numeric value within a range.",
  "dependencies": ["@base-ui/react"],
  "files": [
    {
      "path": "ui/slider.tsx",
      "content": "\"use client\";\n\nimport { Slider as SliderPrimitive } from \"@base-ui/react/slider\";\nimport type * as React from \"react\";\nimport { useMemo } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype SliderProps = Omit<\n  React.ComponentProps<typeof SliderPrimitive.Root>,\n  \"defaultValue\" | \"onValueChange\" | \"value\"\n> & {\n  value?: number[];\n  defaultValue?: number[];\n  onValueChange?: (value: number[]) => void;\n  showValue?: boolean;\n  showOrigin?: boolean;\n};\n\nconst Slider = ({\n  className,\n  defaultValue,\n  onValueChange,\n  value,\n  min = 0,\n  max = 100,\n  showOrigin,\n  showValue,\n  ...props\n}: SliderProps) => {\n  const values = useMemo(() => {\n    if (Array.isArray(value)) {\n      return value;\n    }\n    if (Array.isArray(defaultValue)) {\n      return defaultValue;\n    }\n    return [min, max];\n  }, [value, defaultValue, min, max]);\n\n  return (\n    <SliderPrimitive.Root\n      className={cn(\n        \"data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full\",\n        className,\n      )}\n      data-slot=\"slider\"\n      defaultValue={defaultValue}\n      max={max}\n      min={min}\n      onValueChange={(nextValue) =>\n        onValueChange?.(Array.isArray(nextValue) ? [...nextValue] : [nextValue])\n      }\n      value={value}\n      {...props}\n    >\n      <SliderPrimitive.Control className=\"relative flex h-[var(--field-height)] w-full cursor-grab touch-none select-none items-center data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col data-[disabled]:opacity-50\">\n        <SliderPrimitive.Track\n          className=\"relative h-[12px] w-full grow overflow-hidden rounded-full bg-muted\"\n          data-slot=\"slider-track\"\n        >\n          <SliderPrimitive.Indicator\n            className=\"absolute h-full bg-primary\"\n            data-slot=\"slider-range\"\n          />\n          {showOrigin && (\n            <div className=\"pointer-events-none absolute top-1/2 left-1/2 h-[12px] w-[2px] -translate-x-1/2 -translate-y-1/2 bg-foreground/30\" />\n          )}\n        </SliderPrimitive.Track>\n        {Array.from({ length: values.length }, (_, index) => (\n          <SliderPrimitive.Thumb\n            className=\"block size-[28px] rounded-full border-[0.5px] border-border bg-white shadow-lg ring-offset-background transition-colors hover:border-input-hover focus:border-ring focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\"\n            data-slot=\"slider-thumb\"\n            key={index}\n          >\n            {showValue && (\n              <div className=\"absolute top-[36px] left-1/2 h-[32px] w-fit -translate-x-1/2 text-center text-foreground text-xs\">\n                {values[index]}\n              </div>\n            )}\n          </SliderPrimitive.Thumb>\n        ))}\n      </SliderPrimitive.Control>\n    </SliderPrimitive.Root>\n  );\n};\n\nexport { Slider };\n",
      "type": "registry:ui",
      "target": ""
    }
  ],
  "type": "registry:ui"
}