{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "retro-slider",
  "title": "RetroSlider",
  "description": "A Mac OS 9 styled slider with rectangular raised bevel thumb and inset track, built on Radix UI Slider.",
  "dependencies": [
    "@radix-ui/react-slider"
  ],
  "registryDependencies": [
    "https://nostalgia-ui.com/r/nostalgia-theme.json"
  ],
  "files": [
    {
      "path": "registry/new-york/ui/retro-slider.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SliderPrimitive from \"@radix-ui/react-slider\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction RetroSlider(\n  {\n    className,\n    defaultValue,\n    value,\n    min = 0,\n    ...props\n  }: React.ComponentProps<typeof SliderPrimitive.Root>,\n  ref: React.ForwardedRef<React.ComponentRef<typeof SliderPrimitive.Root>>\n) {\n  // One thumb per value (supports range sliders)\n  const thumbCount = (value ?? defaultValue ?? [min]).length\n\n  return (\n    <SliderPrimitive.Root\n      ref={ref}\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      className={cn(\n        \"relative flex w-full touch-none select-none items-center py-[8px]\",\n        className\n      )}\n      {...props}\n    >\n      {/* Track: thin inset line */}\n      <SliderPrimitive.Track\n        className={cn(\n          \"relative h-[4px] w-full\",\n          \"border border-os9-black\",\n          \"bg-os9-gray-300\",\n          \"shadow-[inset_1px_1px_0_var(--os9-gray-700),inset_-1px_-1px_0_var(--os9-white)]\"\n        )}\n      >\n        {/* Range: filled portion, slightly darker */}\n        <SliderPrimitive.Range\n          className={cn(\n            \"absolute h-full\",\n            \"bg-os9-gray-400\"\n          )}\n        />\n      </SliderPrimitive.Track>\n\n      {/* Thumb: rectangular raised bevel (OS9 style) */}\n      {Array.from({ length: thumbCount }, (_, i) => (\n      <SliderPrimitive.Thumb\n        key={i}\n        className={cn(\n          \"block w-[12px] h-[20px]\",\n          \"border border-os9-black\",\n          \"bg-os9-gray-300\",\n          \"shadow-[inset_1px_1px_0_var(--os9-white),inset_-1px_-1px_0_var(--os9-gray-700)]\",\n          \"cursor-pointer\",\n          \"focus-visible:os9-focus-ring\",\n          \"active:shadow-[inset_1px_1px_0_var(--os9-gray-700),inset_-1px_-1px_0_var(--os9-white)]\",\n          \"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\"\n        )}\n      />\n      ))}\n    </SliderPrimitive.Root>\n  )\n}\n\nconst ForwardedRetroSlider = React.forwardRef(RetroSlider)\nForwardedRetroSlider.displayName = \"RetroSlider\"\n\nexport { ForwardedRetroSlider as RetroSlider }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}