{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tags-input",
  "title": "Tags Input",
  "description": "A shadcn-style tags input component built with Ark UI primitives.",
  "dependencies": ["@ark-ui/react", "lucide-react"],
  "files": [
    {
      "path": "src/components/ui/tags-input.tsx",
      "content": "\"use client\";\n\nimport {\n  TagsInput as TagsInputPrimitive,\n  useTagsInput,\n  useTagsInputContext,\n} from \"@ark-ui/react/tags-input\";\nimport { XIcon } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type TagsInputProps = TagsInputPrimitive.RootProps;\n\nexport const TagsInput = ({\n  className,\n  children,\n  ...props\n}: TagsInputProps) => (\n  <TagsInputPrimitive.Root\n    className={cn(\"flex w-full flex-col gap-1.5\", className)}\n    data-slot=\"tags-input\"\n    {...props}\n  >\n    {children}\n    <TagsInputPrimitive.HiddenInput />\n  </TagsInputPrimitive.Root>\n);\n\nexport type TagsInputRootProviderProps = TagsInputPrimitive.RootProviderProps;\n\nexport const TagsInputRootProvider = ({\n  className,\n  children,\n  ...props\n}: TagsInputRootProviderProps) => (\n  <TagsInputPrimitive.RootProvider\n    className={cn(\"flex w-full flex-col gap-1.5\", className)}\n    data-slot=\"tags-input-root-provider\"\n    {...props}\n  >\n    {children}\n    <TagsInputPrimitive.HiddenInput />\n  </TagsInputPrimitive.RootProvider>\n);\n\nexport const TagsInputLabel = ({\n  className,\n  ...props\n}: TagsInputPrimitive.LabelProps) => (\n  <TagsInputPrimitive.Label\n    className={cn(\n      \"text-sm font-medium text-foreground data-disabled:opacity-64\",\n      className,\n    )}\n    data-slot=\"tags-input-label\"\n    {...props}\n  />\n);\n\nexport const TagsInputControl = ({\n  className,\n  ...props\n}: TagsInputPrimitive.ControlProps) => (\n  <TagsInputPrimitive.Control\n    className={cn(\n      \"relative inline-flex min-h-9 w-full flex-wrap items-center gap-1 rounded-lg border border-input bg-background p-[calc(--spacing(1)-1px)] text-base shadow-xs/5 outline-none ring-ring/24 transition-shadow focus-within:border-ring focus-within:ring-[3px] has-disabled:pointer-events-none has-disabled:opacity-64 has-data-invalid:border-destructive/40 focus-within:has-data-invalid:border-destructive/70 focus-within:has-data-invalid:ring-destructive/16 sm:min-h-8 sm:text-sm\",\n      className,\n    )}\n    data-slot=\"tags-input-control\"\n    {...props}\n  />\n);\n\nexport const TagsInputItem = ({\n  className,\n  ...props\n}: TagsInputPrimitive.ItemProps) => (\n  <TagsInputPrimitive.Item\n    className={cn(\n      \"inline-flex max-w-full items-center outline-none\",\n      className,\n    )}\n    data-slot=\"tags-input-item\"\n    {...props}\n  />\n);\n\nexport const TagsInputItemPreview = ({\n  className,\n  ...props\n}: TagsInputPrimitive.ItemPreviewProps) => (\n  <TagsInputPrimitive.ItemPreview\n    className={cn(\n      \"inline-flex h-6 max-w-full items-center gap-1 rounded-md border border-border bg-muted/50 px-1.5 text-xs data-highlighted:border-primary/30 data-highlighted:bg-primary/10\",\n      className,\n    )}\n    data-slot=\"tags-input-item-preview\"\n    {...props}\n  />\n);\n\nexport const TagsInputItemText = ({\n  className,\n  ...props\n}: TagsInputPrimitive.ItemTextProps) => (\n  <TagsInputPrimitive.ItemText\n    className={cn(\"truncate\", className)}\n    data-slot=\"tags-input-item-text\"\n    {...props}\n  />\n);\n\nexport const TagsInputItemDeleteTrigger = ({\n  className,\n  children,\n  ...props\n}: TagsInputPrimitive.ItemDeleteTriggerProps) => (\n  <TagsInputPrimitive.ItemDeleteTrigger\n    className={cn(\n      \"inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded p-0.5 text-muted-foreground hover:bg-background hover:text-foreground\",\n      className,\n    )}\n    data-slot=\"tags-input-item-delete-trigger\"\n    {...props}\n  >\n    {children ?? <XIcon className=\"size-3\" />}\n  </TagsInputPrimitive.ItemDeleteTrigger>\n);\n\nexport const TagsInputItemInput = ({\n  className,\n  ...props\n}: TagsInputPrimitive.ItemInputProps) => (\n  <TagsInputPrimitive.ItemInput\n    className={cn(\n      \"h-6 min-w-18 rounded-md border border-input bg-background px-2 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n      className,\n    )}\n    data-slot=\"tags-input-item-input\"\n    {...props}\n  />\n);\n\nexport const TagsInputInput = ({\n  className,\n  ...props\n}: TagsInputPrimitive.InputProps) => (\n  <TagsInputPrimitive.Input\n    className={cn(\n      \"min-w-18 flex-1 border-0 bg-transparent py-0.5 text-sm outline-none placeholder:text-muted-foreground/72\",\n      className,\n    )}\n    data-slot=\"tags-input-input\"\n    {...props}\n  />\n);\n\nexport const TagsInputClearTrigger = ({\n  className,\n  children,\n  ...props\n}: TagsInputPrimitive.ClearTriggerProps) => (\n  <TagsInputPrimitive.ClearTrigger\n    className={cn(\n      \"inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded text-muted-foreground hover:bg-muted hover:text-foreground\",\n      className,\n    )}\n    data-slot=\"tags-input-clear-trigger\"\n    {...props}\n  >\n    {children ?? <XIcon className=\"size-3.5\" />}\n  </TagsInputPrimitive.ClearTrigger>\n);\n\nexport const TagsInputContext = TagsInputPrimitive.Context;\n\nexport type TagsInputScaffoldProps = {\n  label?: string;\n  placeholder?: string;\n};\n\nexport const TagsInputScaffold = ({\n  label = \"Frameworks\",\n  placeholder = \"Add framework\",\n}: TagsInputScaffoldProps) => (\n  <TagsInputContext>\n    {(api) => (\n      <>\n        <TagsInputLabel>{label}</TagsInputLabel>\n        <TagsInputControl>\n          {api.value.map((value, index) => (\n            <TagsInputItem\n              key={`${value}-${index}`}\n              index={index}\n              value={value}\n            >\n              <TagsInputItemPreview>\n                <TagsInputItemText>{value}</TagsInputItemText>\n                <TagsInputItemDeleteTrigger />\n              </TagsInputItemPreview>\n              <TagsInputItemInput />\n            </TagsInputItem>\n          ))}\n          <TagsInputInput placeholder={placeholder} />\n          <TagsInputClearTrigger />\n        </TagsInputControl>\n      </>\n    )}\n  </TagsInputContext>\n);\n\nexport { useTagsInput, useTagsInputContext };\n",
      "type": "registry:ui",
      "target": "src/components/ui/tags-input.tsx"
    }
  ],
  "type": "registry:ui"
}