{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"inputs-com-addons","type":"registry:component","title":"Inputs com addons","description":"Busca com atalho, prefixo de URL, botão inline, senha com olho e textarea com contador.","author":"UI Catalog <https://ui.codehall.io>","dependencies":[],"registryDependencies":["input-group","kbd","label"],"files":[{"path":"components/inputs-com-addons.tsx","type":"registry:component","content":"'use client'\n\nimport { useState } from 'react'\nimport { Eye, EyeOff, Link2, Mail, Search } from 'lucide-react'\nimport { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from '@/components/ui/input-group'\nimport { Kbd } from '@/components/ui/kbd'\nimport { Label } from '@/components/ui/label'\n\nexport default function InputGroupIcones() {\n  const [show, setShow] = useState(false)\n  const [bio, setBio] = useState('Cuido do time comercial.')\n  return (\n    <div className=\"w-full max-w-sm space-y-4\">\n      <div className=\"space-y-1.5\">\n        <Label htmlFor=\"busca\">Busca</Label>\n        <InputGroup>\n          <InputGroupAddon>\n            <Search />\n          </InputGroupAddon>\n          <InputGroupInput id=\"busca\" placeholder=\"Buscar contatos…\" />\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>⌘K</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n      <div className=\"space-y-1.5\">\n        <Label htmlFor=\"site\">Site</Label>\n        <InputGroup>\n          <InputGroupText>https://</InputGroupText>\n          <InputGroupInput id=\"site\" placeholder=\"suaempresa.com.br\" />\n          <InputGroupAddon align=\"inline-end\">\n            <Link2 />\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n      <div className=\"space-y-1.5\">\n        <Label htmlFor=\"email\">E-mail</Label>\n        <InputGroup>\n          <InputGroupAddon>\n            <Mail />\n          </InputGroupAddon>\n          <InputGroupInput id=\"email\" type=\"email\" placeholder=\"voce@empresa.com\" />\n          <InputGroupAddon align=\"inline-end\">\n            <InputGroupButton size=\"xs\" variant=\"secondary\">\n              Verificar\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n      <div className=\"space-y-1.5\">\n        <Label htmlFor=\"senha\">Senha</Label>\n        <InputGroup>\n          <InputGroupInput id=\"senha\" type={show ? 'text' : 'password'} placeholder=\"••••••••\" />\n          <InputGroupAddon align=\"inline-end\">\n            <InputGroupButton size=\"icon-xs\" variant=\"ghost\" aria-label={show ? 'Ocultar senha' : 'Mostrar senha'} onClick={() => setShow((s) => !s)}>\n              {show ? <EyeOff /> : <Eye />}\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n      <div className=\"space-y-1.5\">\n        <Label htmlFor=\"bio\">Bio</Label>\n        <InputGroup>\n          <InputGroupTextarea id=\"bio\" value={bio} onChange={(e) => setBio(e.target.value.slice(0, 120))} rows={3} />\n          <InputGroupAddon align=\"block-end\">\n            <InputGroupText className=\"ml-auto tabular-nums\">{bio.length}/120</InputGroupText>\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </div>\n  )\n}\n"}]}