{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tailwind-colorslider",
  "type": "registry:ui",
  "title": "ColorSlider",
  "dependencies": [
    "react",
    "react-aria-components",
    "tailwind-variants",
    "tailwindcss-react-aria-components",
    "tw-animate-css"
  ],
  "registryDependencies": [
    "https://react-aria.adobe.com/registry/tailwind-field.json",
    "https://react-aria.adobe.com/registry/tailwind-utils.json",
    "https://react-aria.adobe.com/registry/tailwind-colorthumb.json"
  ],
  "files": [
    {
      "path": "components/ui/ColorSlider.tsx",
      "type": "registry:ui",
      "content": "'use client';\nimport React from 'react';\nimport {\n  ColorSlider as AriaColorSlider,\n  type ColorSliderProps as AriaColorSliderProps,\n  SliderOutput,\n  SliderTrack\n} from 'react-aria-components/ColorSlider';\nimport {tv} from 'tailwind-variants';\nimport {Label} from '@/registry/react-aria/ui/Field';\nimport {composeTailwindRenderProps} from '@/registry/react-aria/lib/react-aria-utils';\nimport {ColorThumb} from '@/registry/react-aria/ui/ColorThumb';\n\nconst trackStyles = tv({\n  base: 'group col-span-2 rounded-md',\n  variants: {\n    orientation: {\n      horizontal: 'w-full h-6',\n      vertical: 'w-6 h-50'\n    },\n    isDisabled: {\n      true: 'bg-neutral-300 dark:bg-neutral-800 forced-colors:bg-[GrayText]'\n    }\n  }\n});\n\ninterface ColorSliderProps extends AriaColorSliderProps {\n  label?: string;\n}\n\nexport function ColorSlider({label, ...props}: ColorSliderProps) {\n  return (\n    <AriaColorSlider\n      {...props}\n      className={composeTailwindRenderProps(\n        props.className,\n        'font-sans orientation-horizontal:grid orientation-vertical:flex grid-cols-[1fr_auto] flex-col items-center gap-2 orientation-horizontal:w-56'\n      )}>\n      <Label>{label}</Label>\n      <SliderOutput className=\"text-sm text-neutral-500 dark:text-neutral-400 font-medium orientation-vertical:hidden\" />\n      <SliderTrack\n        className={trackStyles}\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        <ColorThumb />\n      </SliderTrack>\n    </AriaColorSlider>\n  );\n}\n"
    }
  ],
  "css": {
    "@plugin \"tailwindcss-react-aria-components\"": {},
    "@import \"tw-animate-css\"": {}
  }
}