{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "slider",
  "type": "registry:ui",
  "dependencies": [
    "@base-ui/react",
    "clsx",
    "tailwind-merge",
    "class-variance-authority"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "slider.tsx",
      "target": "components/ui/slider.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\nimport { Slider as Base, type SliderRootProps } from \"@base-ui/react/slider\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nconst trackVariants = cva(\n  \"relative w-full select-none rounded-full border border-border bg-surface-2\",\n  {\n    variants: {\n      size: {\n        sm: \"h-1\",\n        md: \"h-1.5\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\nconst thumbVariants = cva(\n  cn(\n    \"rounded-full border border-accent bg-gradient-accent shadow-raised outline-none transition-control duration-base ease-soft hover:glow-ring has-[:focus-visible]:ring-focus data-[dragging]:glow-ring\",\n    \"after:absolute after:content-['']\",\n  ),\n  {\n    variants: {\n      size: {\n        sm: \"size-3.5 after:-inset-[5px]\",\n        md: \"size-4 after:-inset-1\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\nconst controlVariants = cva(\"flex w-full touch-none items-center py-1.5\", {\n  variants: {\n    size: {\n      sm: \"px-[7px]\",\n      md: \"px-2\",\n    },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport interface SliderProps\n  extends Omit<SliderRootProps<number>, \"render\" | \"className\">,\n    VariantProps<typeof trackVariants> {\n  className?: string;\n  label?: React.ReactNode;\n  showValue?: boolean;\n  formatValue?: (value: number) => string;\n}\n\nexport const Slider = React.forwardRef<HTMLDivElement, SliderProps>(\n  (\n    { className, size, label, showValue, formatValue, disabled, ...props },\n    ref,\n  ) => (\n    <Base.Root\n      ref={ref}\n      disabled={disabled}\n      className={cn(\n        \"flex w-full flex-col gap-2\",\n        disabled && \"cursor-not-allowed opacity-50\",\n        className,\n      )}\n      {...props}\n    >\n      {label || showValue ? (\n        <div className=\"flex items-center justify-between gap-4\">\n          {label ? (\n            <Base.Label className=\"text-sm text-ink select-none\">\n              {label}\n            </Base.Label>\n          ) : (\n            <span />\n          )}\n          {showValue ? (\n            <Base.Value className=\"font-mono text-xs tabular-nums text-muted\">\n              {(formatted, values) =>\n                formatValue ? formatValue(values[0] ?? 0) : (formatted[0] ?? \"\")\n              }\n            </Base.Value>\n          ) : null}\n        </div>\n      ) : null}\n      <Base.Control className={controlVariants({ size })}>\n        <Base.Track className={trackVariants({ size })}>\n          <Base.Indicator className=\"rounded-full bg-accent bg-gradient-accent\" />\n          <Base.Thumb className={thumbVariants({ size })} />\n        </Base.Track>\n      </Base.Control>\n    </Base.Root>\n  ),\n);\nSlider.displayName = \"Slider\";\n"
    }
  ]
}