{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tailwind-colorswatchpicker",
  "type": "registry:ui",
  "title": "ColorSwatchPicker",
  "dependencies": [
    "react",
    "react-aria-components",
    "tailwind-variants",
    "tailwindcss-react-aria-components",
    "tw-animate-css"
  ],
  "registryDependencies": [
    "https://react-aria.adobe.com/registry/tailwind-colorswatch.json",
    "https://react-aria.adobe.com/registry/tailwind-utils.json"
  ],
  "files": [
    {
      "path": "components/ui/ColorSwatchPicker.tsx",
      "type": "registry:ui",
      "content": "'use client';\nimport React from 'react';\nimport {\n  ColorSwatchPicker as AriaColorSwatchPicker,\n  ColorSwatchPickerItem as AriaColorSwatchPickerItem,\n  type ColorSwatchPickerItemProps,\n  type ColorSwatchPickerProps\n} from 'react-aria-components/ColorSwatchPicker';\nimport {composeRenderProps} from 'react-aria-components/composeRenderProps';\nimport {ColorSwatch} from '@/registry/react-aria/ui/ColorSwatch';\nimport {focusRing} from '@/registry/react-aria/lib/react-aria-utils';\nimport {tv} from 'tailwind-variants';\n\nconst pickerStyles = tv({\n  base: 'flex gap-1',\n  variants: {\n    layout: {\n      stack: 'flex-col',\n      grid: 'flex-wrap'\n    }\n  }\n});\n\nexport function ColorSwatchPicker({children, ...props}: Omit<ColorSwatchPickerProps, 'layout'>) {\n  return (\n    <AriaColorSwatchPicker\n      {...props}\n      className={composeRenderProps(props.className, (className, renderProps) =>\n        pickerStyles({...renderProps, className})\n      )}>\n      {children}\n    </AriaColorSwatchPicker>\n  );\n}\n\nconst itemStyles = tv({\n  extend: focusRing,\n  base: 'relative rounded-xs [-webkit-tap-highlight-color:transparent]'\n});\n\nexport function ColorSwatchPickerItem(props: ColorSwatchPickerItemProps) {\n  return (\n    <AriaColorSwatchPickerItem {...props} className={itemStyles}>\n      {({isSelected}) => (\n        <>\n          <ColorSwatch />\n          {isSelected && (\n            <div className=\"absolute top-0 left-0 w-full h-full box-border border border-2 border-black dark:border-white outline outline-2 outline-white dark:outline-black -outline-offset-4 rounded-md forced-color-adjust-none\" />\n          )}\n        </>\n      )}\n    </AriaColorSwatchPickerItem>\n  );\n}\n"
    }
  ],
  "css": {
    "@plugin \"tailwindcss-react-aria-components\"": {},
    "@import \"tw-animate-css\"": {}
  }
}