{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "p-input-group-22",
  "description": "Input group with clear button",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "@coss/button",
    "@coss/input-group"
  ],
  "files": [
    {
      "path": "registry/default/particles/p-input-group-22.tsx",
      "content": "\"use client\";\n\nimport { XIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/default/ui/input-group\";\n\nexport default function Particle() {\n  const [value, setValue] = useState(\"Clear me\");\n\n  return (\n    <InputGroup>\n      <InputGroupInput\n        aria-label=\"Text input with clear button\"\n        onChange={(e) => setValue(e.target.value)}\n        placeholder=\"Enter text\"\n        type=\"text\"\n        value={value}\n      />\n      {value && (\n        <InputGroupAddon align=\"inline-end\">\n          <Button\n            aria-label=\"Clear input\"\n            onClick={() => setValue(\"\")}\n            size=\"icon-xs\"\n            variant=\"ghost\"\n          >\n            <XIcon aria-hidden=\"true\" />\n          </Button>\n        </InputGroupAddon>\n      )}\n    </InputGroup>\n  );\n}\n",
      "type": "registry:block"
    }
  ],
  "meta": {
    "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64"
  },
  "categories": [
    "button",
    "input",
    "input group"
  ],
  "type": "registry:block"
}