{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "slider",
  "dependencies": [
    "@radix-ui/react-slider"
  ],
  "registryDependencies": [
    "https://powui.dev/r/utils.json",
    "https://powui.dev/r/theme.json"
  ],
  "files": [
    {
      "path": "src/components/ui/slider.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as SliderPrimitive from \"@radix-ui/react-slider\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport type SliderProps = React.ComponentProps<typeof SliderPrimitive.Root> & {\n  thumbClassName?: string;\n  shape?: \"circular\" | \"rectangular\";\n  trackClassName?: string;\n  rangeClassName?: string;\n  thickness?: number | string;\n};\n\nfunction Slider({\n  className,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  thumbClassName,\n  shape = \"circular\",\n  trackClassName = \"\",\n  rangeClassName = \"\",\n  thickness = 16,\n  style,\n  ...props\n}: SliderProps) {\n  const thicknessValue =\n    typeof thickness === \"number\" ? `${thickness}px` : thickness;\n\n  const _values = React.useMemo(\n    () =>\n      Array.isArray(value)\n        ? value\n        : Array.isArray(defaultValue)\n        ? defaultValue\n        : [min, max],\n    [value, defaultValue, min, max]\n  );\n\n  const sliderStyle = {\n    ...style,\n    \"--slider-thickness\": thicknessValue,\n    \"--slider-thumb-size\": thicknessValue,\n    \"--slider-thumb-rect-height\": thicknessValue,\n    \"--slider-thumb-rect-width\": `calc(${thicknessValue} * 1.5)`,\n  } as React.CSSProperties;\n\n  return (\n    <SliderPrimitive.Root\n      data-slot=\"slider\"\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      className={cn(\n        \"relative flex w-full touch-none items-center 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\",\n        \"border border-solid border-primary rounded-full\",\n        className\n      )}\n      style={sliderStyle}\n      {...props}\n    >\n      <SliderPrimitive.Track\n        data-slot=\"slider-track\"\n        className={cn(\n          \"bg-muted relative grow overflow-hidden data-[orientation=horizontal]:h-[var(--slider-thickness)] data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-[var(--slider-thickness)]\",\n          \"border border-solid border-secondary rounded-full\",\n          trackClassName\n        )}\n      >\n        <SliderPrimitive.Range\n          data-slot=\"slider-range\"\n          className={cn(\n            \"bg-amber-400 absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full\",\n            rangeClassName\n          )}\n        />\n      </SliderPrimitive.Track>\n      {Array.from({ length: _values.length }, (_, index) => (\n        <SliderPrimitive.Thumb\n          data-slot=\"slider-thumb\"\n          key={index}\n          className={cn(\n            \"border-primary bg-background ring-ring/50 block shrink-0 border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50\",\n            shape === \"circular\" &&\n              \"rounded-full size-[var(--slider-thumb-size)] active:scale-200 \",\n            shape === \"rectangular\" &&\n              \"h-[var(--slider-thumb-rect-height)] w-[var(--slider-thumb-rect-width)] rounded-xs flex items-center justify-center active:scale-150 \",\n            \"active:cursor-grabbing cursor-grab scale-125\",\n            thumbClassName\n          )}\n        >\n          <div\n            className={cn(\n              \"rounded-[inherit] h-4/5 w-full\",\n              \"flex items-stretch justify-center\"\n            )}\n            style={{ gap: \"calc(var(--slider-thickness) * 0.1875)\" }}\n          >\n            {shape === \"rectangular\" && Array(3)\n              .fill(null)\n              .map((_, index) => (\n                <div\n                  key={index}\n                  className=\"bg-zinc-800\"\n                  style={{ width: \"calc(var(--slider-thickness) * 0.0625)\" }}\n                />\n              ))}\n          </div>\n        </SliderPrimitive.Thumb>\n      ))}\n    </SliderPrimitive.Root>\n  );\n}\n\nexport { Slider };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}