{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "badge-removable",
  "title": "Badge Removable",
  "description": "Badge example: Removable.",
  "registryDependencies": [
    "badge"
  ],
  "files": [
    {
      "path": "apps/docs/demos/badge/removable.tsx",
      "content": "\"use client\";\n\nimport { Badge } from \"@keystoneui/react/badge\";\nimport { X as XIcon } from \"lucide-react\";\nimport { useState } from \"react\";\n\nconst initialTags = [\"React\", \"TypeScript\", \"Tailwind\", \"Next.js\"];\n\nexport default function BadgeRemovable() {\n  const [tags, setTags] = useState(initialTags);\n\n  return (\n    <div className=\"flex flex-wrap items-center gap-2\">\n      {tags.map((tag) => (\n        <Badge className=\"gap-0\" key={tag} variant=\"outline\">\n          {tag}\n          <button\n            className=\"-my-px -ms-px -me-1.5 inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-[inherit] p-0 text-foreground/60 outline-none transition-[color,box-shadow] hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n            onClick={() => setTags((prev) => prev.filter((t) => t !== tag))}\n            type=\"button\"\n          >\n            <XIcon aria-hidden=\"true\" size={12} />\n          </button>\n        </Badge>\n      ))}\n      {tags.length < initialTags.length && (\n        <button\n          className=\"text-muted-foreground text-sm hover:text-foreground\"\n          onClick={() => setTags(initialTags)}\n          type=\"button\"\n        >\n          Reset\n        </button>\n      )}\n    </div>\n  );\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}