{
  "$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'\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-fg 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"
}