{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-input-group-22","type":"registry:block","title":"Input group with popover trigger addon","description":"Input group with popover trigger addon","dependencies":[],"registryDependencies":["field","input-group","popover"],"files":[{"path":"c-input-group-22.tsx","type":"registry:block","content":"import { Field } from \"@/components/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/components/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/components/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Pattern() {\n  return (\n    <Field className=\"max-w-xs\">\n      <InputGroup className=\"gap-0\">\n        <InputGroupAddon>\n          <Popover>\n            <PopoverTrigger\n              render={\n                <InputGroupButton\n                  variant=\"ghost\"\n                  size=\"icon-xs\"\n                  className=\"cursor-help\"\n                />\n              }\n            >\n              <IconPlaceholder\n                lucide=\"ShieldCheckIcon\"\n                tabler=\"IconShieldCheck\"\n                hugeicons=\"ShieldEnergyIcon\"\n                phosphor=\"ShieldCheckIcon\"\n                remixicon=\"RiShieldCheckLine\"\n                className=\"text-emerald-500\"\n              />\n            </PopoverTrigger>\n            <PopoverContent align=\"start\" className=\"w-72\">\n              <PopoverHeader>\n                <PopoverTitle>Secure Connection</PopoverTitle>\n                <PopoverDescription>\n                  Your data is encrypted end-to-end using industry-standard\n                  protocols.\n                </PopoverDescription>\n              </PopoverHeader>\n            </PopoverContent>\n          </Popover>\n        </InputGroupAddon>\n        <InputGroupInput\n          defaultValue=\"https://reui.com\"\n          className=\"pl-0.5!\"\n          readOnly\n        />\n      </InputGroup>\n    </Field>\n  )\n}","target":"components/examples/c-input-group-22.tsx"}],"meta":{"order":22}}