{
  "name": "tags-input",
  "type": "registry:ui",
  "dependencies": [
    "@diceui/tags-input"
  ],
  "files": [
    {
      "path": "ui/tags-input.tsx",
      "type": "registry:ui",
      "content": "import type * as React from \"react\";\n\nimport * as TagsInputPrimitive from \"@diceui/tags-input\";\nimport { X } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction TagsInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof TagsInputPrimitive.Root>) {\n  return (\n    <TagsInputPrimitive.Root\n      data-slot=\"tags-input\"\n      className={cn(\"flex w-[380px] flex-col gap-2\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction TagsInputLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof TagsInputPrimitive.Label>) {\n  return (\n    <TagsInputPrimitive.Label\n      data-slot=\"tags-input-label\"\n      className={cn(\n        \"text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TagsInputList({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"tags-input-list\"\n      className={cn(\n        \"flex min-h-10 w-full flex-wrap items-center gap-1.5 rounded-md border border-input bg-background px-3 py-2 text-sm focus-within:ring-1 focus-within:ring-ring disabled:cursor-not-allowed disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TagsInputInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof TagsInputPrimitive.Input>) {\n  return (\n    <TagsInputPrimitive.Input\n      data-slot=\"tags-input-input\"\n      className={cn(\n        \"flex-1 bg-transparent outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TagsInputItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof TagsInputPrimitive.Item>) {\n  return (\n    <TagsInputPrimitive.Item\n      data-slot=\"tags-input-item\"\n      className={cn(\n        \"inline-flex max-w-[calc(100%-8px)] items-center gap-1.5 rounded border bg-transparent px-2.5 py-1 text-sm focus:outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-50 data-editable:select-none data-editing:bg-transparent data-editing:ring-1 data-editing:ring-ring [&:not([data-editing])]:pr-1.5 [&[data-highlighted]:not([data-editing])]:bg-accent [&[data-highlighted]:not([data-editing])]:text-accent-foreground\",\n        className,\n      )}\n      {...props}\n    >\n      <TagsInputPrimitive.ItemText className=\"truncate\">\n        {children}\n      </TagsInputPrimitive.ItemText>\n      <TagsInputPrimitive.ItemDelete className=\"size-4 shrink-0 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100\">\n        <X className=\"size-3.5\" />\n      </TagsInputPrimitive.ItemDelete>\n    </TagsInputPrimitive.Item>\n  );\n}\n\nfunction TagsInputClear({\n  ...props\n}: React.ComponentProps<typeof TagsInputPrimitive.Clear>) {\n  return <TagsInputPrimitive.Clear data-slot=\"tags-input-clear\" {...props} />;\n}\n\nexport {\n  TagsInput,\n  TagsInputClear,\n  TagsInputInput,\n  TagsInputItem,\n  TagsInputLabel,\n  TagsInputList,\n};\n",
      "target": ""
    }
  ]
}