{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tailwind-colorarea",
  "type": "registry:ui",
  "title": "ColorArea",
  "dependencies": [
    "react",
    "react-aria-components",
    "tailwindcss-react-aria-components",
    "tw-animate-css"
  ],
  "registryDependencies": [
    "https://react-aria.adobe.com/registry/tailwind-utils.json",
    "https://react-aria.adobe.com/registry/tailwind-colorthumb.json"
  ],
  "files": [
    {
      "path": "components/ui/ColorArea.tsx",
      "type": "registry:ui",
      "content": "'use client';\nimport React from 'react';\nimport {\n  ColorArea as AriaColorArea,\n  type ColorAreaProps as AriaColorAreaProps\n} from 'react-aria-components/ColorArea';\nimport {composeTailwindRenderProps} from '@/registry/react-aria/lib/react-aria-utils';\nimport {ColorThumb} from '@/registry/react-aria/ui/ColorThumb';\n\nexport interface ColorAreaProps extends AriaColorAreaProps {}\n\nexport function ColorArea(props: ColorAreaProps) {\n  return (\n    <AriaColorArea\n      {...props}\n      className={composeTailwindRenderProps(\n        props.className,\n        'w-full max-w-56 aspect-square rounded-lg bg-neutral-300 dark:bg-neutral-800 forced-colors:bg-[GrayText]'\n      )}\n      style={({defaultStyle, isDisabled}) => ({\n        ...defaultStyle,\n        background: isDisabled ? undefined : defaultStyle.background\n      })}>\n      <ColorThumb />\n    </AriaColorArea>\n  );\n}\n"
    }
  ],
  "css": {
    "@plugin \"tailwindcss-react-aria-components\"": {},
    "@import \"tw-animate-css\"": {}
  }
}