{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "slider",
  "type": "registry:ui",
  "title": "Slider",
  "description": "Native accessible range control with RawkitUI label and value treatment.",
  "dependencies": [
    "clsx",
    "tailwind-merge"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/ui/slider.tsx",
      "content": "import * as React from 'react'\nimport { cn } from '@/lib/utils'\n\nexport interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'type' | 'size'> {\n  value?: number\n  defaultValue?: number\n  onValueChange?: (value: number) => void\n  label?: React.ReactNode\n  description?: React.ReactNode\n  showValue?: boolean\n  showPin?: boolean\n  showTicks?: boolean\n  size?: 'sm' | 'md' | 'lg'\n  variant?: 'yellow' | 'orange' | 'mint' | 'violet' | 'pink' | 'sky' | 'lime' | 'gradient' | 'sunset' | 'neon'\n  thumbShape?: 'circle' | 'square'\n}\n\nconst variantFills = {\n  yellow: 'bg-rk-primary text-rk-ink',\n  orange: 'bg-rk-secondary text-rk-ink',\n  mint: 'bg-rk-success text-rk-ink',\n  violet: 'bg-rk-accent text-rk-ink',\n  pink: 'bg-rk-pink text-rk-ink',\n  sky: 'bg-rk-sky text-rk-ink',\n  lime: 'bg-[#A3E635] text-rk-ink',\n  gradient: 'bg-gradient-to-r from-[#FB923C] via-[#F87171] to-[#DC2626] text-white',\n  sunset: 'bg-gradient-to-r from-rk-primary via-rk-secondary to-[#F87171] text-rk-ink',\n  neon: 'bg-gradient-to-r from-[#A3E635] via-[#34D399] to-[#38BDF8] text-rk-ink',\n}\n\nconst trackSizeClasses = {\n  sm: 'h-5',\n  md: 'h-7',\n  lg: 'h-9',\n}\n\nconst thumbSizeClasses = {\n  sm: 'h-6 w-6 text-[10px]',\n  md: 'h-8 w-8 text-xs',\n  lg: 'h-10 w-10 text-sm',\n}\n\nexport const Slider = React.forwardRef<HTMLInputElement, SliderProps>(\n  (\n    {\n      value: controlledValue,\n      defaultValue = 50,\n      onValueChange,\n      label,\n      description,\n      showValue = false,\n      showPin = false,\n      showTicks = false,\n      size = 'md',\n      variant = 'orange',\n      thumbShape = 'circle',\n      min = 0,\n      max = 100,\n      step = 1,\n      disabled = false,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const [internalValue, setInternalValue] = React.useState(defaultValue)\n    const [isFocused, setIsFocused] = React.useState(false)\n\n    const currentValue = controlledValue ?? internalValue\n    const numMin = Number(min)\n    const numMax = Number(max)\n    const numStep = Number(step)\n    const safeMax = numMax > numMin ? numMax : 100\n    const percentage = Math.min(100, Math.max(0, ((currentValue - numMin) / (safeMax - numMin)) * 100))\n\n    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      const val = Number(e.target.value)\n      if (controlledValue === undefined) {\n        setInternalValue(val)\n      }\n      onValueChange?.(val)\n    }\n\n    const ticksCount = showTicks ? Math.min(11, Math.floor((safeMax - numMin) / numStep) + 1) : 0\n    const ticks = showTicks ? Array.from({ length: ticksCount }) : []\n\n    return (\n      <div className={cn('w-full space-y-2.5 font-sans', disabled && 'opacity-60 cursor-not-allowed', className)}>\n        {/* Header with Label, Description & Value Tag */}\n        {(label || description || showValue) && (\n          <div className=\"flex items-center justify-between gap-3\">\n            <div>\n              {label && (\n                <span className=\"font-display text-sm font-extrabold text-rk-ink tracking-tight\">\n                  {label}\n                </span>\n              )}\n              {description && (\n                <p className=\"text-xs font-semibold text-rk-ink/60 leading-none mt-0.5\">\n                  {description}\n                </p>\n              )}\n            </div>\n            {showValue && (\n              <span className=\"inline-flex items-center justify-center rounded-full border-2 border-rk-ink bg-rk-primary px-2.5 py-0.5 font-mono text-xs font-black text-rk-ink rk-shadow-xs\">\n                {currentValue}\n              </span>\n            )}\n          </div>\n        )}\n\n        {/* Interactive Track Area */}\n        <div className=\"relative w-full py-4 select-none\">\n          {/* Invisible Native Input on Top */}\n          <input\n            ref={ref}\n            type=\"range\"\n            min={min}\n            max={max}\n            step={step}\n            value={currentValue}\n            disabled={disabled}\n            onChange={handleInputChange}\n            onFocus={() => setIsFocused(true)}\n            onBlur={() => setIsFocused(false)}\n            className=\"absolute inset-0 w-full h-full opacity-0 z-30 cursor-pointer disabled:cursor-not-allowed\"\n            {...props}\n          />\n\n          {/* Custom Visual Track Container */}\n          <div className=\"relative w-full flex items-center\">\n            {/* Background Track */}\n            <div\n              className={cn(\n                'relative w-full overflow-hidden bg-white p-1 rk-border rk-shadow-sm rounded-full',\n                trackSizeClasses[size]\n              )}\n            >\n              {/* Active Filled Progress Track (Instant update with zero drag lag) */}\n              <div\n                className={cn('h-full rounded-full', variantFills[variant])}\n                style={{ width: `${percentage}%` }}\n              />\n\n              {/* Optional Step Ticks */}\n              {showTicks && ticks.length > 0 && (\n                <div className=\"absolute inset-0 flex items-center justify-between px-2 pointer-events-none z-10\">\n                  {ticks.map((_, i) => (\n                    <div key={i} className=\"h-1.5 w-1.5 rounded-full bg-rk-ink/40\" />\n                  ))}\n                </div>\n              )}\n            </div>\n\n            {/* Custom Thumb Handle (Vertically centered over track) */}\n            <div\n              className={cn(\n                'absolute top-1/2 -translate-y-1/2 -translate-x-1/2 flex items-center justify-center font-mono font-black border-3 border-rk-ink rk-shadow-sm pointer-events-none z-20',\n                isFocused && 'ring-4 ring-rk-ink/25',\n                thumbShape === 'circle' ? 'rounded-full' : 'rounded-xl',\n                thumbSizeClasses[size],\n                variantFills[variant]\n              )}\n              style={{ left: `${percentage}%` }}\n            >\n              {/* Floating Tooltip Pin */}\n              {showPin && (\n                <div className=\"absolute -top-9 left-1/2 -translate-x-1/2 rounded-md border-2 border-rk-ink bg-rk-ink px-2 py-0.5 font-mono text-[11px] font-black text-rk-primary rk-shadow-xs whitespace-nowrap\">\n                  {currentValue}\n                  <div className=\"absolute -bottom-1 left-1/2 -translate-x-1/2 h-2 w-2 rotate-45 border-b-2 border-r-2 border-rk-ink bg-rk-ink\" />\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    )\n  }\n)\nSlider.displayName = 'Slider'\n\n",
      "type": "registry:ui",
      "target": "components/ui/slider.tsx"
    }
  ]
}