{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "p-input-10",
  "description": "Input group mimicking a URL bar",
  "registryDependencies": [
    "@coss/button",
    "@coss/input-group",
    "@coss/popover"
  ],
  "files": [
    {
      "path": "registry/default/particles/p-input-10.tsx",
      "content": "\"use client\";\n\nimport { InfoIcon, StarIcon } 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\";\nimport {\n  Popover,\n  PopoverDescription,\n  PopoverPopup,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nexport default function Particle() {\n  const [isFavorite, setIsFavorite] = useState(false);\n\n  return (\n    <InputGroup className=\"[--radius-lg:9999px] [--radius:9999rem]\">\n      <Popover>\n        <InputGroupAddon>\n          <PopoverTrigger\n            render={<Button size=\"icon-xs\" variant=\"secondary\" />}\n          >\n            <InfoIcon />\n          </PopoverTrigger>\n        </InputGroupAddon>\n        <PopoverPopup\n          align=\"start\"\n          alignOffset={-5}\n          className=\"w-64\"\n          sideOffset={6}\n        >\n          <PopoverTitle className=\"text-sm\">\n            Your connection is not secure.\n          </PopoverTitle>\n          <PopoverDescription>\n            You should not enter any sensitive information on this site.\n          </PopoverDescription>\n        </PopoverPopup>\n      </Popover>\n      <InputGroupAddon className=\"pl-1.5 text-muted-foreground\">\n        https://\n      </InputGroupAddon>\n      <InputGroupInput\n        aria-label=\"Url\"\n        className=\"*:[input]:ps-1!\"\n        type=\"text\"\n      />\n      <InputGroupAddon align=\"inline-end\">\n        <Button\n          onClick={() => setIsFavorite(!isFavorite)}\n          size=\"icon-xs\"\n          variant=\"ghost\"\n        >\n          <StarIcon\n            className=\"data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary\"\n            data-favorite={isFavorite}\n          />\n        </Button>\n      </InputGroupAddon>\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",
    "popover"
  ],
  "type": "registry:block"
}