{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "slider",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "src/components/blocks/slider.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Volume2, VolumeX } from \"lucide-react\";\n\nimport { Slider } from \"@/components/ui/slider\";\n\nexport type SliderShowcaseVariant =\n  | \"default\"\n  | \"ticks\"\n  | \"step\"\n  | \"range\"\n  | \"vertical\"\n  | \"prefix-suffix\"\n  | \"description\"\n  | \"controlled\"\n  | \"disabled\";\n\nexport const SLIDER_VARIANTS: Record<SliderShowcaseVariant, true> = {\n  default: true,\n  ticks: true,\n  step: true,\n  range: true,\n  vertical: true,\n  \"prefix-suffix\": true,\n  description: true,\n  controlled: true,\n  disabled: true,\n};\n\nfunction ControlledDemo() {\n  const [temperature, setTemperature] = React.useState(31);\n  return (\n    <Slider\n      label=\"Temperature\"\n      unit=\"°\"\n      value={temperature}\n      onValueChange={(v) =>\n        setTemperature(Array.isArray(v) ? v[0] : (v as number))\n      }\n      caption={`Current temperature: ${temperature}°`}\n    />\n  );\n}\n\nfunction VerticalDemo() {\n  const bands = [\"32Hz\", \"125Hz\", \"500Hz\", \"2kHz\", \"8kHz\"] as const;\n  const [eq, setEq] = React.useState<number[]>([0, 0, 0, 0, 0]);\n  return (\n    <div className=\"flex h-56 items-end justify-center gap-8\">\n      {eq.map((v, i) => (\n        <div key={bands[i]} className=\"flex flex-col items-center gap-2\">\n          <Slider\n            orientation=\"vertical\"\n            min={-12}\n            max={12}\n            step={1}\n            value={v}\n            onValueChange={(n) =>\n              setEq((prev) =>\n                prev.map((x, idx) =>\n                  idx === i ? (Array.isArray(n) ? n[0] : (n as number)) : x,\n                ),\n              )\n            }\n            showValue={false}\n          />\n          <span className=\"text-xs text-muted-foreground tabular-nums\">\n            {bands[i]}\n          </span>\n        </div>\n      ))}\n    </div>\n  );\n}\n\nexport function SliderShowcaseDemo({\n  variant = \"default\",\n}: {\n  variant?: SliderShowcaseVariant;\n}) {\n  switch (variant) {\n    case \"default\":\n      return <Slider label=\"Opacity\" defaultValue={20} unit=\"%\" />;\n    case \"ticks\":\n      return (\n        <Slider\n          variant=\"ticks\"\n          label=\"Brightness\"\n          defaultValue={39}\n          caption=\"Drag to adjust the display brightness.\"\n        />\n      );\n    case \"step\":\n      return (\n        <Slider\n          label=\"Progress tracking\"\n          defaultValue={20}\n          step={10}\n          unit=\"%\"\n          caption=\"Step in 10\"\n        />\n      );\n    case \"range\":\n      return (\n        <Slider label=\"Distance range\" defaultValue={[25, 75]} unit=\"mi\" />\n      );\n    case \"vertical\":\n      return <VerticalDemo />;\n    case \"prefix-suffix\":\n      return (\n        <Slider\n          label=\"Volume\"\n          defaultValue={50}\n          prefixIcon={<VolumeX />}\n          suffixIcon={<Volume2 />}\n        />\n      );\n    case \"description\":\n      return (\n        <Slider\n          label=\"Opacity\"\n          defaultValue={20}\n          unit=\"%\"\n          caption=\"Brightness of the image\"\n        />\n      );\n    case \"controlled\":\n      return <ControlledDemo />;\n    case \"disabled\":\n      return <Slider label=\"Slide\" defaultValue={20} unit=\"%\" disabled />;\n  }\n}\n\nexport default SliderShowcaseDemo;\n",
      "type": "registry:block"
    }
  ],
  "type": "registry:block"
}