{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "slider",
  "title": "slider",
  "dependencies": [
    "@radix-ui/react-slider"
  ],
  "registryDependencies": [
    "@dwellir/dwellir-theme",
    "@dwellir/utils"
  ],
  "files": [
    {
      "path": "components/ui/slider.tsx",
      "content": "'use client';\n\nimport * as SliderPrimitive from '@radix-ui/react-slider';\nimport { type ComponentProps, useState } from 'react';\nimport { cn } from '@/lib/utils';\n\ntype SliderProps = ComponentProps<typeof SliderPrimitive.Root> & {\n  /** The accessible name of each thumb. Two thumbs read \"<label>, minimum\" and \"<label>, maximum\". */\n  label: string;\n  /** What a screen reader says for a value, such as \"120 million responses\". Without it, the number. */\n  valueText?: (value: number) => string;\n};\n\nfunction thumbLabel(label: string, index: number, count: number) {\n  if (count < 2) return label;\n  return `${label}, ${index === 0 ? 'minimum' : 'maximum'}`;\n}\n\n/* With no value, a range from min to max, as upstream. orientation=\"vertical\" stands it up; give its parent a height. */\n/* A vertical swipe that starts on a horizontal slider scrolls the page; a sideways drag moves the thumb. */\nfunction Slider({\n  className,\n  label,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  valueText,\n  onValueChange,\n  ...props\n}: SliderProps) {\n  const values = value ?? defaultValue ?? [min, max];\n  const thumbs = values.length;\n  /* The values an uncontrolled slider holds, for each thumb's value text. */\n  const [held, setHeld] = useState(values);\n  const shown = value ?? held;\n  return (\n    <SliderPrimitive.Root\n      data-slot=\"slider\"\n      defaultValue={value === undefined ? values : undefined}\n      value={value}\n      min={min}\n      max={max}\n      onValueChange={(next) => {\n        setHeld(next);\n        onValueChange?.(next);\n      }}\n      className={cn(\n        'slider-touch relative flex w-full items-center py-2 select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col data-[orientation=vertical]:px-2 data-[orientation=vertical]:py-0',\n        className,\n      )}\n      {...props}\n    >\n      <SliderPrimitive.Track\n        data-slot=\"slider-track\"\n        className=\"relative grow overflow-hidden rounded-full bg-foreground-15 data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5\"\n      >\n        <SliderPrimitive.Range\n          data-slot=\"slider-range\"\n          className=\"absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full\"\n        />\n      </SliderPrimitive.Track>\n      {Array.from({ length: thumbs }, (_, index) => (\n        <SliderPrimitive.Thumb\n          data-slot=\"slider-thumb\"\n          key={index}\n          aria-label={thumbLabel(label, index, thumbs)}\n          aria-valuetext={valueText?.(shown[index] ?? min)}\n          className=\"relative block size-5 shrink-0 cursor-grab rounded-full border-2 border-ring bg-background shadow-xs transition-[box-shadow] duration-200 outline-none hover:shadow-button focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring active:cursor-grabbing disabled:pointer-events-none\"\n        />\n      ))}\n    </SliderPrimitive.Root>\n  );\n}\n\nexport { Slider };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}