{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tailwind-colorthumb",
  "type": "registry:ui",
  "title": "ColorThumb",
  "dependencies": [
    "react",
    "react-aria-components",
    "tailwind-variants",
    "tailwindcss-react-aria-components",
    "tw-animate-css"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/ui/ColorThumb.tsx",
      "type": "registry:ui",
      "content": "'use client';\nimport React from 'react';\nimport {ColorThumb as AriaColorThumb, type ColorThumbProps} from 'react-aria-components/ColorThumb';\nimport {tv} from 'tailwind-variants';\n\nconst thumbStyles = tv({\n  base: 'w-4.5 h-4.5 top-[50%] left-[50%] rounded-full border-2 border-white box-border',\n  variants: {\n    isFocusVisible: {\n      true: 'w-8 h-8'\n    },\n    isDragging: {\n      true: 'bg-neutral-700 dark:bg-neutral-300 forced-colors:bg-[ButtonBorder]'\n    },\n    isDisabled: {\n      true: 'border-neutral-300 dark:border-neutral-700 forced-colors:border-[GrayText] bg-neutral-300 dark:bg-neutral-800 forced-colors:bg-[GrayText]'\n    }\n  }\n});\n\nexport function ColorThumb(props: ColorThumbProps) {\n  return (\n    <AriaColorThumb\n      {...props}\n      style={({defaultStyle, isDisabled}) => ({\n        ...defaultStyle,\n        backgroundColor: isDisabled ? undefined : defaultStyle.backgroundColor,\n        boxShadow: '0 0 0 1px black, inset 0 0 0 1px black'\n      })}\n      className={thumbStyles}\n    />\n  );\n}\n"
    }
  ],
  "css": {
    "@plugin \"tailwindcss-react-aria-components\"": {},
    "@import \"tw-animate-css\"": {}
  }
}