{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tailwind-tokenfield",
  "type": "registry:ui",
  "title": "TokenField",
  "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"
  ],
  "files": [
    {
      "path": "components/ui/TokenField.tsx",
      "type": "registry:ui",
      "content": "'use client';\nimport React from 'react';\nimport {\n  TokenField as AriaTokenField,\n  TokenInput as AriaTokenInput,\n  Token as AriaToken,\n  type TokenFieldProps as AriaTokenFieldProps,\n  type TokenInputProps,\n  type TokenProps,\n  type TokenFieldValue\n} from 'react-aria-components/TokenField';\nimport {composeRenderProps} from 'react-aria-components/composeRenderProps';\nimport {tv} from 'tailwind-variants';\nimport {Description, Label, fieldBorderStyles} from '@/registry/react-aria/ui/Field';\nimport {composeTailwindRenderProps, focusRing} from '@/registry/react-aria/lib/react-aria-utils';\n\nconst tokenFieldStyles = tv({\n  base: 'flex flex-col gap-1 font-sans w-full'\n});\n\nconst tokenInputStyles = tv({\n  extend: focusRing,\n  base: 'group border-1 rounded-lg font-sans text-sm py-2 px-3 [&[aria-multiline=true]]:min-h-[100px] box-border w-full transition bg-white dark:bg-neutral-900 forced-colors:bg-[Field] text-neutral-800 dark:text-neutral-200 outline-0 disabled:text-neutral-200 dark:disabled:text-neutral-600 disabled:select-none [-webkit-tap-highlight-color:transparent]',\n  variants: {\n    isFocused: fieldBorderStyles.variants.isFocusWithin,\n    isDisabled: fieldBorderStyles.variants.isDisabled\n  }\n});\n\nconst tokenStyles = tv({\n  extend: focusRing,\n  base: 'inline-flex items-center rounded-full h-5 px-2 py-px mx-0.5 cursor-default whitespace-nowrap bg-blue-100 text-blue-700 dark:bg-blue-400/20 dark:text-blue-300 transition [-webkit-tap-highlight-color:transparent] selection:bg-transparent group-data-disabled:bg-neutral-100 group-data-disabled:text-neutral-300 dark:group-data-disabled:bg-neutral-800 dark:group-data-disabled:text-neutral-600 forced-colors:group-data-disabled:text-[GrayText]',\n  variants: {\n    isSelected: {\n      true: 'bg-blue-600 text-white dark:bg-blue-600 dark:text-white forced-colors:bg-[Highlight] forced-colors:text-[HighlightText] forced-color-adjust-none'\n    }\n  }\n});\n\nexport interface TokenFieldProps<T extends TokenFieldValue = TokenFieldValue> extends Omit<\n  AriaTokenFieldProps<T>,\n  'children'\n> {\n  label?: string;\n  description?: string;\n  inputRef?: React.Ref<HTMLDivElement>;\n  children: TokenInputProps['children'];\n}\n\nexport function TokenField<T extends TokenFieldValue = TokenFieldValue>({\n  label,\n  description,\n  className,\n  inputRef,\n  children,\n  ...props\n}: TokenFieldProps<T>) {\n  return (\n    <AriaTokenField\n      {...props}\n      className={composeTailwindRenderProps(className, tokenFieldStyles())}>\n      {label && <Label>{label}</Label>}\n      <AriaTokenInput ref={inputRef} className={tokenInputStyles}>\n        {children}\n      </AriaTokenInput>\n      {description && <Description>{description}</Description>}\n    </AriaTokenField>\n  );\n}\n\nexport function Token(props: TokenProps) {\n  return (\n    <AriaToken\n      {...props}\n      className={composeRenderProps(props.className, (className, renderProps) =>\n        tokenStyles({...renderProps, className})\n      )}\n    />\n  );\n}\n"
    }
  ],
  "css": {
    "@plugin \"tailwindcss-react-aria-components\"": {},
    "@import \"tw-animate-css\"": {}
  }
}