{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "slider",
  "title": "Slider",
  "description": "An easily stylable range input.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/slider.tsx",
      "content": "\"use client\";\n\nimport { Slider as BaseSlider } from \"@base-ui/react/slider\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/registry/lib/utils\";\n\nfunction SliderRoot({ className, ...props }: BaseSlider.Root.Props) {\n  return (\n    <BaseSlider.Root\n      className={cn(\"touch-none select-none\", className)}\n      data-slot=\"slider\"\n      {...props}\n    />\n  );\n}\n\nfunction SliderLabel({\n  children,\n  className,\n  ...props\n}: BaseSlider.Label.Props) {\n  return (\n    <BaseSlider.Label\n      className={cn(\n        \"text-sm leading-none font-medium cursor-default\",\n        className,\n      )}\n      data-slot=\"slider-label\"\n      {...props}\n    >\n      {children}\n    </BaseSlider.Label>\n  );\n}\n\nfunction SliderControl({ className, ...props }: BaseSlider.Control.Props) {\n  return (\n    <BaseSlider.Control\n      className={cn(\"touch-none select-none\", className)}\n      data-slot=\"slider-control\"\n      {...props}\n    />\n  );\n}\n\nfunction SliderTrack({ className, ...props }: BaseSlider.Track.Props) {\n  return (\n    <BaseSlider.Track\n      className={cn(\"rounded-full select-none\", className)}\n      data-slot=\"slider-track\"\n      {...props}\n    />\n  );\n}\n\nfunction SliderValue({\n  className,\n  children,\n  ...props\n}: BaseSlider.Value.Props) {\n  return (\n    <BaseSlider.Value\n      className={cn(\"text-sm font-medium\", className)}\n      data-slot=\"slider-value\"\n      {...props}\n    >\n      {children}\n    </BaseSlider.Value>\n  );\n}\n\nfunction SliderIndicator({ className, ...props }: BaseSlider.Indicator.Props) {\n  return (\n    <BaseSlider.Indicator\n      className={cn(\"select-none\")}\n      data-slot=\"slider-indicator\"\n      {...props}\n    />\n  );\n}\n\nfunction SliderThumb({ className, ...props }: BaseSlider.Thumb.Props) {\n  return (\n    <BaseSlider.Thumb\n      className={cn(\n        \"data-disabled:pointer-events-none data-disabled:opacity-50 select-none\",\n        className,\n      )}\n      data-slot=\"slider-thumb\"\n      {...props}\n    />\n  );\n}\n\nconst sliderTrackVariants = cva(\n  [\n    \"bg-input relative w-full grow rounded-full select-none\",\n    \"data-[orientation=vertical]:h-full data-[orientation=vertical]:w-auto\",\n  ],\n  {\n    defaultVariants: {\n      size: \"default\",\n    },\n    variants: {\n      size: {\n        default: \"h-1 data-[orientation=vertical]:w-1\",\n        lg: \"h-1.5 data-[orientation=vertical]:w-1.5\",\n        sm: \"h-0.5 data-[orientation=vertical]:w-0.5\",\n      },\n    },\n  },\n);\n\nconst sliderThumbVariants = cva(\n  [\n    \"outline-1 outline-border ring-primary/30 shrink-0 rounded-full bg-background transition-[color,box-shadow] select-none block\",\n    \"hover:ring-4 data-dragging:has-focus:ring-4\",\n    \"has-focus-visible:outline-2 has-focus-visible:outline-ring has-focus-visible:ring-4\",\n    \"data-invalid:outline-destructive/80 data-invalid:ring-4 data-invalid:ring-destructive/20\",\n    \"data-invalid:has-focus-visible:outline-destructive data-invalid:has-focus-visible:ring-destructive/20\",\n    \"data-disabled:pointer-events-none\",\n  ],\n  {\n    defaultVariants: {\n      size: \"default\",\n    },\n    variants: {\n      size: {\n        default: \"size-3\",\n        lg: \"size-4\",\n        sm: \"size-2.5\",\n      },\n    },\n  },\n);\n\nfunction Slider({\n  className,\n  defaultValue,\n  value,\n  children,\n  inputRef,\n  label,\n  size = \"default\",\n  thumbLabels,\n  ...props\n}: BaseSlider.Root.Props &\n  VariantProps<typeof sliderThumbVariants> & {\n    inputRef?: React.Ref<HTMLInputElement>;\n    label?: string;\n    thumbLabels?: string[];\n  }) {\n  const thumbCount = React.useMemo(() => {\n    const valueToInspect = value ?? defaultValue;\n    if (Array.isArray(valueToInspect)) return valueToInspect.length;\n    return 1;\n  }, [value, defaultValue]);\n\n  return (\n    <BaseSlider.Root\n      className={cn(\n        \"data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full space-y-4\",\n        \"data-disabled:opacity-50 data-disabled:cursor-default\",\n        className,\n      )}\n      data-slot=\"slider\"\n      defaultValue={defaultValue}\n      value={value}\n      {...props}\n    >\n      {(label || children) && (\n        <div className=\"flex items-center justify-between\">\n          {label && (\n            <BaseSlider.Label className=\"text-sm leading-none font-medium cursor-default\">\n              {label}\n            </BaseSlider.Label>\n          )}\n          {children}\n        </div>\n      )}\n\n      <BaseSlider.Control\n        className={cn(\n          \"flex w-full items-center\",\n          \"touch-none select-none\",\n          \"data-[orientation=vertical]:h-full data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col data-[orientation=vertical]:px-2 data-[orientation=vertical]:py-0\",\n        )}\n        data-slot=\"slider-control\"\n      >\n        <BaseSlider.Track\n          className={cn(sliderTrackVariants({ size }))}\n          data-slot=\"slider-track\"\n        >\n          <BaseSlider.Indicator\n            className={cn(\n              \"bg-primary/50 absolute h-full rounded-full select-none\",\n              \"data-[orientation=vertical]:w-full\",\n            )}\n            data-slot=\"slider-indicator\"\n          />\n          {Array.from({ length: thumbCount }, (_, i) => (\n            <BaseSlider.Thumb\n              aria-label={thumbLabels?.[i]}\n              className={cn(sliderThumbVariants({ size }))}\n              data-slot=\"slider-thumb\"\n              index={i}\n              inputRef={i === 0 ? inputRef : undefined}\n              key={i}\n            />\n          ))}\n        </BaseSlider.Track>\n      </BaseSlider.Control>\n    </BaseSlider.Root>\n  );\n}\n\nexport {\n  SliderRoot,\n  SliderLabel,\n  SliderControl,\n  SliderTrack,\n  SliderIndicator,\n  SliderThumb,\n  SliderValue,\n  // Composite component\n  Slider,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}