{
  "name": "badge-overflow-interactive-demo",
  "type": "registry:example",
  "registryDependencies": [
    "badge",
    "badge-overflow",
    "button",
    "input"
  ],
  "files": [
    {
      "path": "examples/badge-overflow-interactive-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport { X } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { Badge } from \"@/registry/bases/radix/ui/badge\";\nimport { BadgeOverflow } from \"@/registry/bases/radix/ui/badge-overflow\";\nimport { Button } from \"@/registry/bases/radix/ui/button\";\nimport { Input } from \"@/registry/bases/radix/ui/input\";\n\ninterface Tag {\n  label: string;\n  value: string;\n}\n\nexport default function BadgeOverflowInteractiveDemo() {\n  const [tags, setTags] = React.useState<Tag[]>([\n    { label: \"React\", value: \"react\" },\n    { label: \"TypeScript\", value: \"typescript\" },\n    { label: \"Next.js\", value: \"nextjs\" },\n    { label: \"Tailwind CSS\", value: \"tailwindcss\" },\n    { label: \"Shadcn UI\", value: \"shadcn-ui\" },\n    { label: \"Radix UI\", value: \"radix-ui\" },\n    { label: \"Zustand\", value: \"zustand\" },\n    { label: \"React Query\", value: \"react-query\" },\n    { label: \"Prisma\", value: \"prisma\" },\n    { label: \"PostgreSQL\", value: \"postgresql\" },\n    { label: \"MySQL\", value: \"mysql\" },\n    { label: \"MongoDB\", value: \"mongodb\" },\n  ]);\n  const [input, setInput] = React.useState(\"\");\n\n  const onInputChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      setInput(event.target.value);\n    },\n    [],\n  );\n\n  const onTagAdd = React.useCallback(() => {\n    if (input.trim()) {\n      setTags([\n        ...tags,\n        {\n          label: input.trim(),\n          value: input.trim(),\n        },\n      ]);\n      setInput(\"\");\n    }\n  }, [input, tags]);\n\n  const onTagRemove = React.useCallback(\n    (value: string) => {\n      setTags(tags.filter((tag) => tag.value !== value));\n    },\n    [tags],\n  );\n\n  const onKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\n      if (event.key === \"Enter\") {\n        event.preventDefault();\n        onTagAdd();\n      }\n    },\n    [onTagAdd],\n  );\n\n  return (\n    <div className=\"flex flex-col gap-6\">\n      <div className=\"flex flex-col gap-3\">\n        <h3 className=\"text-sm font-medium\">Tags with Overflow</h3>\n        <div className=\"w-full max-w-80 rounded-md border p-3\">\n          <BadgeOverflow\n            items={tags}\n            getBadgeLabel={(tag) => tag.label}\n            lineCount={2}\n            renderBadge={(tag, label) => (\n              <Badge\n                variant=\"secondary\"\n                className=\"cursor-pointer\"\n                onClick={() => onTagRemove(tag.value)}\n              >\n                <span>{label}</span>\n                <X className=\"size-3\" />\n              </Badge>\n            )}\n            renderOverflow={(count) => (\n              <Badge variant=\"outline\" className=\"bg-muted\">\n                +{count} more\n              </Badge>\n            )}\n          />\n        </div>\n      </div>\n      <div className=\"flex items-center gap-2\">\n        <Input\n          placeholder=\"Add a tag...\"\n          className=\"max-w-64 flex-1\"\n          value={input}\n          onChange={onInputChange}\n          onKeyDown={onKeyDown}\n        />\n        <Button type=\"button\" onClick={onTagAdd}>\n          Add\n        </Button>\n      </div>\n      <div className=\"flex flex-col gap-px text-sm text-balance text-muted-foreground\">\n        <p>Click on a badge to remove it.</p>\n        <p>Resize the container to see overflow behavior.</p>\n      </div>\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}