{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "color-slider",
  "title": "color-slider",
  "description": "color-slider",
  "dependencies": [
    "react-aria-components"
  ],
  "registryDependencies": [
    "https://intentui.com/r/field",
    "https://intentui.com/r/primitive"
  ],
  "files": [
    {
      "path": "src/components/ui/color-slider.tsx",
      "content": "\"use client\"\n\nimport type {\n  ColorSliderProps,\n  SliderOutputProps,\n  SliderTrackProps,\n} from \"react-aria-components/ColorSlider\"\nimport {\n  ColorSlider as PrimitiveColorSlider,\n  SliderOutput,\n  SliderTrack,\n} from \"react-aria-components/ColorSlider\"\nimport { fieldStyles } from \"@/components/ui/field\"\nimport { cx } from \"@/lib/primitive\"\n\nexport function ColorSlider({ className, ...props }: ColorSliderProps) {\n  return (\n    <PrimitiveColorSlider\n      data-slot=\"control\"\n      className={cx(\n        \"orientation-vertical:flex orientation-horizontal:grid orientation-horizontal:w-full grid-cols-[1fr_auto] flex-col items-center gap-2\",\n        fieldStyles(),\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport function ColorSliderOutput({ className, ...props }: SliderOutputProps) {\n  return (\n    <SliderOutput\n      className={cx(\"orientation-vertical:hidden font-medium text-base/6 sm:text-sm/6\", className)}\n      {...props}\n    />\n  )\n}\n\nexport function ColorSliderTrack({ className, ...props }: SliderTrackProps) {\n  return (\n    <SliderTrack\n      className={cx(\n        \"group col-span-2 orientation-horizontal:h-6 rounded-lg\",\n        \"orientation-horizontal:h-6 orientation-horizontal:w-full\",\n        \"orientation-vertical:ms-[50%] orientation-vertical:h-56 orientation-vertical:w-6 orientation-vertical:-translate-x-[50%]\",\n        \"disabled:bg-muted-foreground disabled:opacity-50 forced-colors:bg-[GrayText]\",\n        className\n      )}\n      {...props}\n      style={({ defaultStyle, isDisabled }) => ({\n        ...defaultStyle,\n        background: isDisabled\n          ? undefined\n          : `${defaultStyle.background}, repeating-conic-gradient(#CCC 0% 25%, white 0% 50%) 50% / 16px 16px`,\n      })}\n    />\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}