{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "slider",
  "type": "registry:ui",
  "title": "Slider",
  "description": "An interactive slider with glass effects for selecting values smoothly within a range.",
  "author": "Ahdeetai <https://aditya.is-cool.dev>",
  "registryDependencies": [],
  "dependencies": ["@radix-ui/react-slider", "clsx", "tailwind-merge"],
  "files": [
    {
      "type": "registry:ui",
      "path": "components/ui/slider.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport * as SliderPrimitive from '@radix-ui/react-slider';\nimport { cn } from '@/lib/utils';\n\nfunction Slider({\n  className,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  ...props\n}: React.ComponentProps<typeof SliderPrimitive.Root>) {\n  const [isPressed, setIsPressed] = React.useState(false);\n  const [isDragging, setIsDragging] = React.useState(false);\n  const [isKeyboardFocused, setIsKeyboardFocused] = React.useState(false);\n  const lastInteractionWasTab = React.useRef(false);\n  const pointerActive = React.useRef(false);\n\n  React.useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Tab') lastInteractionWasTab.current = true;\n    };\n    const handlePointerDown = () => {\n      pointerActive.current = true;\n      lastInteractionWasTab.current = false;\n    };\n    const handlePointerUp = () => {\n      pointerActive.current = false;\n    };\n\n    window.addEventListener('keydown', handleKeyDown);\n    window.addEventListener('mousedown', handlePointerDown);\n    window.addEventListener('touchstart', handlePointerDown);\n    window.addEventListener('mouseup', handlePointerUp);\n    window.addEventListener('touchend', handlePointerUp);\n\n    return () => {\n      window.removeEventListener('keydown', handleKeyDown);\n      window.removeEventListener('mousedown', handlePointerDown);\n      window.removeEventListener('touchstart', handlePointerDown);\n      window.removeEventListener('mouseup', handlePointerUp);\n      window.removeEventListener('touchend', handlePointerUp);\n    };\n  }, []);\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 showGlass = isPressed || isDragging || isKeyboardFocused;\n\n  return (\n    <SliderPrimitive.Root\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        className,\n      )}\n      {...props}\n    >\n      <SliderPrimitive.Track\n        className={cn(\n          'relative grow overflow-visible rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5',\n          'bg-muted mx-2 sm:mx-4 lg:mx-6 z-0',\n        )}\n      >\n        <SliderPrimitive.Range className='absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full rounded-full bg-primary z-0' />\n      </SliderPrimitive.Track>\n\n      {Array.from({ length: _values.length }, (_, index) => (\n        <SliderPrimitive.Thumb\n          key={index}\n          onPointerDown={(e: React.PointerEvent<HTMLDivElement>) => {\n            setIsPressed(true);\n            pointerActive.current = true;\n            lastInteractionWasTab.current = false;\n          }}\n          onPointerMove={(e: React.PointerEvent<HTMLDivElement>) =>\n            e.buttons > 0 && setIsDragging(true)\n          }\n          onPointerUp={(e: React.PointerEvent<HTMLDivElement>) => {\n            setIsPressed(false);\n            setIsDragging(false);\n            pointerActive.current = false;\n          }}\n          onPointerCancel={(e: React.PointerEvent<HTMLDivElement>) => {\n            setIsPressed(false);\n            setIsDragging(false);\n            pointerActive.current = false;\n          }}\n          onFocus={() => {\n            if (lastInteractionWasTab.current && !pointerActive.current)\n              setIsKeyboardFocused(true);\n          }}\n          onBlur={() => setIsKeyboardFocused(false)}\n          onKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => {\n            if (\n              !isKeyboardFocused &&\n              ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(\n                e.key,\n              )\n            ) {\n              e.preventDefault();\n            }\n          }}\n          className={cn(\n            'relative block shrink-0 rounded-full transition-all duration-200 ease-out z-10',\n            'outline-hidden disabled:pointer-events-none disabled:opacity-50 cursor-grab active:cursor-grabbing',\n            'h-5 w-8 sm:h-6 sm:w-10 lg:h-7 lg:w-12',\n            showGlass\n              ? 'scale-105 bg-white/8 backdrop-blur-lg backdrop-brightness-100 border border-white/25 border-t-white/50 shadow-[0_8px_32px_0_rgba(31,38,135,0.25)] ring-2 ring-foreground/15'\n              : 'bg-background border border-primary shadow-xs',\n          )}\n        >\n          {showGlass && (\n            <div className='absolute top-0.5 left-1 right-1 h-0.5 rounded-full pointer-events-none opacity-60 bg-linear-to-r from-white/60 via-white/30 to-white/60' />\n          )}\n        </SliderPrimitive.Thumb>\n      ))}\n    </SliderPrimitive.Root>\n  );\n}\n\nexport { Slider };\n"
    },
    {
      "type": "registry:lib",
      "path": "lib/utils.ts",
      "content": "import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}"
    }
  ]
}