forlogic-core 1.20.1 → 2.0.0

package/dist/assets/InputDoc-BK-SdpJ7.js

@@ -1,211 +0,0 @@
-import{r as d,j as e,l as m,I as s,f as N,cU as w,z as G,L as a,M as h,c0 as C,ci as v,bV as A,aN as S,bD as L,ah as b,b1 as F,bG as k,bf as E,t as T,J as B}from"./index-CE0k7Rdh.js";import{C as D}from"./ComponentDocTemplate-CRbRY-v5.js";import{D as V,A as P,H as q}from"./hash-B4MTXppl.js";const t=d.forwardRef(({className:l,...i},n)=>e.jsx("div",{ref:n,"data-slot":"input-group",className:m("flex min-w-0 items-center rounded-md border border-input bg-background","focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-background","has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50","has-[textarea:disabled]:cursor-not-allowed has-[textarea:disabled]:opacity-50",l),...i}));t.displayName="InputGroup";const z=G("flex items-center justify-center text-sm text-muted-foreground shrink-0",{variants:{align:{"inline-start":"border-r border-input px-3","inline-end":"border-l border-input px-3","block-start":"border-b border-input px-3 py-2 w-full justify-start","block-end":"border-t border-input px-3 py-2 w-full justify-start"}},defaultVariants:{align:"inline-start"}}),o=d.forwardRef(({className:l,align:i,...n},p)=>e.jsx("div",{ref:p,"data-slot":"input-group-addon",className:m(z({align:i}),l),...n}));o.displayName="InputGroupAddon";const M=G("",{variants:{size:{xs:"h-6 px-2 text-xs","icon-xs":"h-6 w-6",sm:"h-7 px-3 text-xs","icon-sm":"h-7 w-7"}},defaultVariants:{size:"xs"}}),c=d.forwardRef(({className:l,size:i,variant:n="ghost",...p},x)=>e.jsx(N,{ref:x,"data-slot":"input-group-button",variant:n,className:m(M({size:i}),"rounded-none first:rounded-l-md last:rounded-r-md",l),...p}));c.displayName="InputGroupButton";const r=d.forwardRef(({className:l,...i},n)=>e.jsx(s,{ref:n,"data-slot":"input-group-control",className:m("flex-1 border-0 bg-transparent shadow-none","focus-visible:ring-0 focus-visible:ring-offset-0",l),...i}));r.displayName="InputGroupInput";const j=d.forwardRef(({className:l,...i},n)=>e.jsx(w,{ref:n,"data-slot":"input-group-control",className:m("flex-1 border-0 bg-transparent shadow-none resize-none","focus-visible:ring-0 focus-visible:ring-offset-0",l),...i}));j.displayName="InputGroupTextarea";const R=`import { Input, Label } from "forlogic-core"
-
-// Input básico
-<Input placeholder="Digite algo..." />
-
-// Com Label
-<div className="grid w-full items-center gap-1.5">
-  <Label htmlFor="email">Email</Label>
-  <Input type="email" id="email" placeholder="email@exemplo.com" />
-</div>
-
-// InputGroup com prefixo e sufixo
-import { InputGroup, InputGroupInput, InputGroupAddon, InputGroupButton } from "forlogic-core"
-
-<InputGroup>
-  <InputGroupAddon align="inline-start">https://</InputGroupAddon>
-  <InputGroupInput placeholder="exemplo.com" />
-  <InputGroupAddon align="inline-end">.com.br</InputGroupAddon>
-</InputGroup>`;function J(){const[l,i]=d.useState(!1),[n,p]=d.useState(!1),[x,f]=d.useState(""),[g,I]=d.useState(""),y=()=>{p(!0),setTimeout(()=>p(!1),1e3)};return e.jsx(D,{title:"Input",description:"Campo de entrada de texto com suporte a todos os tipos HTML. Inclui Label para rótulos acessíveis e InputGroup para agrupar inputs com addons de prefixo, sufixo, ícones e botões.",component:e.jsx(s,{placeholder:"Digite algo...",className:"max-w-sm"}),usage:R,examples:[{title:"Tipos de Input",description:"Suporta todos os tipos HTML nativos com estilização consistente",preview:e.jsxs("div",{className:"grid grid-cols-2 gap-4 max-w-lg",children:[e.jsxs("div",{className:"space-y-1.5",children:[e.jsx(a,{htmlFor:"text-example",children:"Texto"}),e.jsx(s,{type:"text",id:"text-example",placeholder:"Nome completo"})]}),e.jsxs("div",{className:"space-y-1.5",children:[e.jsx(a,{htmlFor:"email-example",children:"Email"}),e.jsx(s,{type:"email",id:"email-example",placeholder:"email@exemplo.com"})]}),e.jsxs("div",{className:"space-y-1.5",children:[e.jsx(a,{htmlFor:"password-example",children:"Senha"}),e.jsx(s,{type:"password",id:"password-example",placeholder:"••••••••"})]}),e.jsxs("div",{className:"space-y-1.5",children:[e.jsx(a,{htmlFor:"number-example",children:"Número"}),e.jsx(s,{type:"number",id:"number-example",placeholder:"0"})]}),e.jsxs("div",{className:"space-y-1.5",children:[e.jsx(a,{htmlFor:"tel-example",children:"Telefone"}),e.jsx(s,{type:"tel",id:"tel-example",placeholder:"(11) 99999-9999"})]}),e.jsxs("div",{className:"space-y-1.5",children:[e.jsx(a,{htmlFor:"url-example",children:"URL"}),e.jsx(s,{type:"url",id:"url-example",placeholder:"https://..."})]}),e.jsxs("div",{className:"space-y-1.5",children:[e.jsx(a,{htmlFor:"date-example",children:"Data"}),e.jsx(s,{type:"date",id:"date-example"})]}),e.jsxs("div",{className:"space-y-1.5",children:[e.jsx(a,{htmlFor:"search-example",children:"Busca"}),e.jsx(s,{type:"search",id:"search-example",placeholder:"Pesquisar..."})]})]}),code:`<Input type="text" placeholder="Nome completo" />
-<Input type="email" placeholder="email@exemplo.com" />
-<Input type="password" placeholder="••••••••" />
-<Input type="number" placeholder="0" />
-<Input type="tel" placeholder="(11) 99999-9999" />
-<Input type="url" placeholder="https://..." />
-<Input type="date" />
-<Input type="search" placeholder="Pesquisar..." />`},{title:"Com Label",description:"Use Label com htmlFor para associar corretamente ao input e melhorar acessibilidade",preview:e.jsxs("div",{className:"flex flex-col gap-4 max-w-sm",children:[e.jsxs("div",{className:"grid w-full items-center gap-1.5",children:[e.jsx(a,{htmlFor:"name",children:"Nome *"}),e.jsx(s,{type:"text",id:"name",placeholder:"Seu nome completo"})]}),e.jsxs("div",{className:"grid w-full items-center gap-1.5",children:[e.jsx(a,{htmlFor:"email-label",children:"Email *"}),e.jsx(s,{type:"email",id:"email-label",placeholder:"email@exemplo.com"}),e.jsx("p",{className:"text-xs text-muted-foreground",children:"Nunca compartilharemos seu email."})]})]}),code:`<div className="grid w-full items-center gap-1.5">
-  <Label htmlFor="name">Nome *</Label>
-  <Input type="text" id="name" placeholder="Seu nome completo" />
-</div>
-
-<div className="grid w-full items-center gap-1.5">
-  <Label htmlFor="email">Email *</Label>
-  <Input type="email" id="email" placeholder="email@exemplo.com" />
-  <p className="text-xs text-muted-foreground">Nunca compartilharemos seu email.</p>
-</div>`},{title:"Estados",description:"Estados visuais para feedback do usuário",preview:e.jsxs("div",{className:"flex flex-col gap-4 max-w-sm",children:[e.jsxs("div",{className:"space-y-1.5",children:[e.jsx(a,{children:"Normal"}),e.jsx(s,{placeholder:"Campo editável"})]}),e.jsxs("div",{className:"space-y-1.5",children:[e.jsx(a,{className:"text-muted-foreground",children:"Desabilitado"}),e.jsx(s,{placeholder:"Campo desabilitado",disabled:!0})]}),e.jsxs("div",{className:"space-y-1.5",children:[e.jsx(a,{children:"Somente Leitura"}),e.jsx(s,{value:"Valor fixo",readOnly:!0})]}),e.jsxs("div",{className:"space-y-1.5",children:[e.jsx(a,{className:"text-destructive",children:"Com Erro"}),e.jsx(s,{placeholder:"Campo com erro",className:"border-destructive focus-visible:ring-destructive"}),e.jsx("p",{className:"text-xs text-destructive",children:"Este campo é obrigatório."})]})]}),code:`// Normal
-<Input placeholder="Campo editável" />
-
-// Desabilitado
-<Input placeholder="Campo desabilitado" disabled />
-
-// Somente Leitura
-<Input value="Valor fixo" readOnly />
-
-// Com Erro (adicione classes de erro)
-<Input 
-  placeholder="Campo com erro" 
-  className="border-destructive focus-visible:ring-destructive" 
-/>
-<p className="text-xs text-destructive">Este campo é obrigatório.</p>`},{title:"Com Ícones (posicionamento manual)",description:"Ícones posicionados com CSS absoluto para inputs simples",preview:e.jsxs("div",{className:"flex flex-col gap-4 max-w-sm",children:[e.jsxs("div",{className:"relative",children:[e.jsx(h,{className:"absolute left-3 top-3 h-4 w-4 text-muted-foreground"}),e.jsx(s,{placeholder:"Email",className:"pl-10"})]}),e.jsxs("div",{className:"relative",children:[e.jsx(C,{className:"absolute left-3 top-3 h-4 w-4 text-muted-foreground"}),e.jsx(s,{placeholder:"Buscar...",className:"pl-10 pr-10",value:x,onChange:u=>f(u.target.value)}),x&&e.jsx("button",{className:"absolute right-3 top-3 text-muted-foreground hover:text-foreground",onClick:()=>f(""),children:e.jsx(v,{className:"h-4 w-4"})})]}),e.jsxs("div",{className:"relative",children:[e.jsx(A,{className:"absolute left-3 top-3 h-4 w-4 text-muted-foreground"}),e.jsx(s,{placeholder:"Telefone",className:"pl-10",type:"tel"})]})]}),code:`// Ícone à esquerda
-<div className="relative">
-  <Mail className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
-  <Input placeholder="Email" className="pl-10" />
-</div>
-
-// Com botão de limpar
-<div className="relative">
-  <Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
-  <Input 
-    placeholder="Buscar..." 
-    className="pl-10 pr-10"
-    value={searchValue}
-    onChange={(e) => setSearchValue(e.target.value)}
-  />
-  {searchValue && (
-    <button 
-      className="absolute right-3 top-3"
-      onClick={() => setSearchValue('')}
-    >
-      <X className="h-4 w-4" />
-    </button>
-  )}
-</div>`},{title:"InputGroup - Prefixo e Sufixo de Texto",description:"Use InputGroupAddon para textos fixos antes ou depois do input",preview:e.jsxs("div",{className:"flex flex-col gap-4 max-w-md",children:[e.jsxs("div",{className:"space-y-1.5",children:[e.jsx(a,{children:"Website"}),e.jsxs(t,{children:[e.jsx(o,{align:"inline-start",children:"https://"}),e.jsx(r,{placeholder:"seusite.com"})]})]}),e.jsxs("div",{className:"space-y-1.5",children:[e.jsx(a,{children:"Valor"}),e.jsxs(t,{children:[e.jsx(o,{align:"inline-start",children:"R$"}),e.jsx(r,{type:"number",placeholder:"0,00"})]})]}),e.jsxs("div",{className:"space-y-1.5",children:[e.jsx(a,{children:"Email"}),e.jsxs(t,{children:[e.jsx(r,{placeholder:"usuario"}),e.jsx(o,{align:"inline-end",children:"@empresa.com.br"})]})]}),e.jsxs("div",{className:"space-y-1.5",children:[e.jsx(a,{children:"Peso"}),e.jsxs(t,{children:[e.jsx(r,{type:"number",placeholder:"0"}),e.jsx(o,{align:"inline-end",children:"kg"})]})]})]}),code:`// Prefixo
-<InputGroup>
-  <InputGroupAddon align="inline-start">https://</InputGroupAddon>
-  <InputGroupInput placeholder="seusite.com" />
-</InputGroup>
-
-// Prefixo de moeda
-<InputGroup>
-  <InputGroupAddon align="inline-start">R$</InputGroupAddon>
-  <InputGroupInput type="number" placeholder="0,00" />
-</InputGroup>
-
-// Sufixo de domínio
-<InputGroup>
-  <InputGroupInput placeholder="usuario" />
-  <InputGroupAddon align="inline-end">@empresa.com.br</InputGroupAddon>
-</InputGroup>
-
-// Sufixo de unidade
-<InputGroup>
-  <InputGroupInput type="number" placeholder="0" />
-  <InputGroupAddon align="inline-end">kg</InputGroupAddon>
-</InputGroup>`},{title:"InputGroup - Com Ícones",description:"Combine ícones com inputs de forma elegante e consistente",preview:e.jsxs("div",{className:"flex flex-col gap-4 max-w-md",children:[e.jsxs(t,{children:[e.jsx(o,{align:"inline-start",children:e.jsx(S,{className:"h-4 w-4"})}),e.jsx(r,{placeholder:"Nome de usuário"})]}),e.jsxs(t,{children:[e.jsx(o,{align:"inline-start",children:e.jsx(h,{className:"h-4 w-4"})}),e.jsx(r,{placeholder:"seu@email.com"})]}),e.jsxs(t,{children:[e.jsx(o,{align:"inline-start",children:e.jsx(L,{className:"h-4 w-4"})}),e.jsx(r,{placeholder:"https://..."}),e.jsx(o,{align:"inline-end",children:e.jsx(b,{className:"h-4 w-4 text-success"})})]}),e.jsxs(t,{children:[e.jsx(o,{align:"inline-start",children:e.jsx(F,{className:"h-4 w-4"})}),e.jsx(r,{type:"date"})]})]}),code:`// Ícone de usuário
-<InputGroup>
-  <InputGroupAddon align="inline-start">
-    <User className="h-4 w-4" />
-  </InputGroupAddon>
-  <InputGroupInput placeholder="Nome de usuário" />
-</InputGroup>
-
-// Com ícone de validação
-<InputGroup>
-  <InputGroupAddon align="inline-start">
-    <Link className="h-4 w-4" />
-  </InputGroupAddon>
-  <InputGroupInput placeholder="https://..." />
-  <InputGroupAddon align="inline-end">
-    <Check className="h-4 w-4 text-success" />
-  </InputGroupAddon>
-</InputGroup>`},{title:"InputGroup - Com Botões",description:"Botões integrados para ações como mostrar/ocultar senha, copiar ou limpar",preview:e.jsxs("div",{className:"flex flex-col gap-4 max-w-md",children:[e.jsxs("div",{className:"space-y-1.5",children:[e.jsx(a,{children:"Senha"}),e.jsxs(t,{children:[e.jsx(o,{align:"inline-start",children:e.jsx(k,{className:"h-4 w-4"})}),e.jsx(r,{type:l?"text":"password",placeholder:"Digite sua senha"}),e.jsx(c,{variant:"ghost",size:"icon-xs",onClick:()=>i(!l),type:"button",children:l?e.jsx(E,{className:"h-4 w-4"}):e.jsx(T,{className:"h-4 w-4"})})]})]}),e.jsxs("div",{className:"space-y-1.5",children:[e.jsx(a,{children:"Link para compartilhar"}),e.jsxs(t,{children:[e.jsx(r,{value:"https://meusite.com/abc123",readOnly:!0}),e.jsxs(c,{variant:"secondary",size:"sm",onClick:y,type:"button",children:[n?e.jsx(b,{className:"h-4 w-4"}):e.jsx(B,{className:"h-4 w-4"}),e.jsx("span",{className:"ml-1",children:n?"Copiado!":"Copiar"})]})]})]}),e.jsxs("div",{className:"space-y-1.5",children:[e.jsx(a,{children:"Campo com ação"}),e.jsxs(t,{children:[e.jsx(r,{placeholder:"Digite um valor",value:g,onChange:u=>I(u.target.value)}),g&&e.jsx(c,{variant:"ghost",size:"icon-xs",onClick:()=>I(""),type:"button",children:e.jsx(v,{className:"h-4 w-4"})})]})]})]}),code:`const [showPassword, setShowPassword] = useState(false);
-
-// Campo de senha com toggle
-<InputGroup>
-  <InputGroupAddon align="inline-start">
-    <Lock className="h-4 w-4" />
-  </InputGroupAddon>
-  <InputGroupInput 
-    type={showPassword ? "text" : "password"} 
-    placeholder="Digite sua senha" 
-  />
-  <InputGroupButton 
-    variant="ghost" 
-    size="icon-xs"
-    onClick={() => setShowPassword(!showPassword)}
-    type="button"
-  >
-    {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-  </InputGroupButton>
-</InputGroup>
-
-// Campo com botão de copiar
-<InputGroup>
-  <InputGroupInput value="https://meusite.com/abc123" readOnly />
-  <InputGroupButton variant="secondary" size="sm" onClick={handleCopy}>
-    <Copy className="h-4 w-4" />
-    <span className="ml-1">Copiar</span>
-  </InputGroupButton>
-</InputGroup>`},{title:"InputGroup - Combinações Avançadas",description:"Combine múltiplos addons, ícones e botões para casos complexos",preview:e.jsxs("div",{className:"flex flex-col gap-4 max-w-md",children:[e.jsxs("div",{className:"space-y-1.5",children:[e.jsx(a,{children:"Preço em dólares"}),e.jsxs(t,{children:[e.jsx(o,{align:"inline-start",children:e.jsx(V,{className:"h-4 w-4"})}),e.jsx(r,{type:"number",placeholder:"0.00",step:"0.01"}),e.jsx(o,{align:"inline-end",children:"USD"})]})]}),e.jsxs("div",{className:"space-y-1.5",children:[e.jsx(a,{children:"Verificar usuário"}),e.jsxs(t,{children:[e.jsx(o,{align:"inline-start",children:e.jsx(P,{className:"h-4 w-4"})}),e.jsx(r,{placeholder:"username"}),e.jsx(c,{variant:"default",size:"sm",children:"Verificar"})]})]}),e.jsxs("div",{className:"space-y-1.5",children:[e.jsx(a,{children:"Código de referência"}),e.jsxs(t,{children:[e.jsx(o,{align:"inline-start",children:e.jsx(q,{className:"h-4 w-4"})}),e.jsx(o,{align:"inline-start",children:"REF-"}),e.jsx(r,{placeholder:"0000",maxLength:4}),e.jsx(c,{variant:"outline",size:"sm",children:"Gerar"})]})]})]}),code:`// Preço com ícone e unidade
-<InputGroup>
-  <InputGroupAddon align="inline-start">
-    <DollarSign className="h-4 w-4" />
-  </InputGroupAddon>
-  <InputGroupInput type="number" placeholder="0.00" step="0.01" />
-  <InputGroupAddon align="inline-end">USD</InputGroupAddon>
-</InputGroup>
-
-// Username com verificação
-<InputGroup>
-  <InputGroupAddon align="inline-start">
-    <AtSign className="h-4 w-4" />
-  </InputGroupAddon>
-  <InputGroupInput placeholder="username" />
-  <InputGroupButton variant="default" size="sm">
-    Verificar
-  </InputGroupButton>
-</InputGroup>
-
-// Múltiplos addons
-<InputGroup>
-  <InputGroupAddon align="inline-start">
-    <Hash className="h-4 w-4" />
-  </InputGroupAddon>
-  <InputGroupAddon align="inline-start">REF-</InputGroupAddon>
-  <InputGroupInput placeholder="0000" maxLength={4} />
-  <InputGroupButton variant="outline" size="sm">
-    Gerar
-  </InputGroupButton>
-</InputGroup>`},{title:"InputGroup - Com Textarea",description:"Use InputGroupTextarea para áreas de texto com header ou footer",preview:e.jsxs("div",{className:"flex flex-col gap-4 max-w-md",children:[e.jsxs("div",{className:"space-y-1.5",children:[e.jsx(a,{children:"Mensagem com header"}),e.jsxs(t,{className:"flex-col",children:[e.jsx(o,{align:"block-start",className:"bg-muted/50",children:e.jsx("span",{className:"text-xs font-medium",children:"Escreva sua mensagem"})}),e.jsx(j,{placeholder:"Digite sua mensagem aqui...",rows:3})]})]}),e.jsxs("div",{className:"space-y-1.5",children:[e.jsx(a,{children:"Descrição com contador"}),e.jsxs(t,{className:"flex-col",children:[e.jsx(j,{placeholder:"Descreva o problema...",rows:3,maxLength:500}),e.jsx(o,{align:"block-end",className:"justify-end bg-muted/30",children:e.jsx("span",{className:"text-xs",children:"0/500 caracteres"})})]})]})]}),code:`// Textarea com header
-<InputGroup className="flex-col">
-  <InputGroupAddon align="block-start" className="bg-muted/50">
-    <span className="text-xs font-medium">Escreva sua mensagem</span>
-  </InputGroupAddon>
-  <InputGroupTextarea placeholder="Digite sua mensagem..." rows={3} />
-</InputGroup>
-
-// Textarea com footer contador
-<InputGroup className="flex-col">
-  <InputGroupTextarea placeholder="Descreva..." rows={3} maxLength={500} />
-  <InputGroupAddon align="block-end" className="justify-end bg-muted/30">
-    <span className="text-xs">0/500 caracteres</span>
-  </InputGroupAddon>
-</InputGroup>`},{title:"Formulário Completo",description:"Exemplo de formulário combinando Input, Label e InputGroup",preview:e.jsxs("form",{className:"flex flex-col gap-4 max-w-md",onSubmit:u=>u.preventDefault(),children:[e.jsxs("div",{className:"grid grid-cols-2 gap-4",children:[e.jsxs("div",{className:"space-y-1.5",children:[e.jsx(a,{htmlFor:"first-name",children:"Nome *"}),e.jsx(s,{id:"first-name",placeholder:"João",required:!0})]}),e.jsxs("div",{className:"space-y-1.5",children:[e.jsx(a,{htmlFor:"last-name",children:"Sobrenome *"}),e.jsx(s,{id:"last-name",placeholder:"Silva",required:!0})]})]}),e.jsxs("div",{className:"space-y-1.5",children:[e.jsx(a,{htmlFor:"form-email",children:"Email *"}),e.jsxs(t,{children:[e.jsx(o,{align:"inline-start",children:e.jsx(h,{className:"h-4 w-4"})}),e.jsx(r,{id:"form-email",type:"email",placeholder:"joao@exemplo.com",required:!0})]})]}),e.jsxs("div",{className:"space-y-1.5",children:[e.jsx(a,{htmlFor:"form-phone",children:"Telefone"}),e.jsxs(t,{children:[e.jsx(o,{align:"inline-start",children:"+55"}),e.jsx(r,{id:"form-phone",type:"tel",placeholder:"(11) 99999-9999"})]})]}),e.jsxs("div",{className:"space-y-1.5",children:[e.jsx(a,{htmlFor:"form-website",children:"Website"}),e.jsxs(t,{children:[e.jsx(o,{align:"inline-start",children:"https://"}),e.jsx(r,{id:"form-website",placeholder:"seusite.com"})]})]}),e.jsx(N,{type:"submit",className:"w-full",children:"Enviar"})]}),code:`<form className="flex flex-col gap-4 max-w-md">
-  <div className="grid grid-cols-2 gap-4">
-    <div className="space-y-1.5">
-      <Label htmlFor="first-name">Nome *</Label>
-      <Input id="first-name" placeholder="João" required />
-    </div>
-    <div className="space-y-1.5">
-      <Label htmlFor="last-name">Sobrenome *</Label>
-      <Input id="last-name" placeholder="Silva" required />
-    </div>
-  </div>
-  <div className="space-y-1.5">
-    <Label htmlFor="email">Email *</Label>
-    <InputGroup>
-      <InputGroupAddon align="inline-start">
-        <Mail className="h-4 w-4" />
-      </InputGroupAddon>
-      <InputGroupInput id="email" type="email" placeholder="joao@exemplo.com" required />
-    </InputGroup>
-  </div>
-  <div className="space-y-1.5">
-    <Label htmlFor="phone">Telefone</Label>
-    <InputGroup>
-      <InputGroupAddon align="inline-start">+55</InputGroupAddon>
-      <InputGroupInput id="phone" type="tel" placeholder="(11) 99999-9999" />
-    </InputGroup>
-  </div>
-  <Button type="submit" className="w-full">Enviar</Button>
-</form>`}],props:[{name:"type",type:"string",default:'"text"',description:'Tipo do input HTML: "text", "email", "password", "number", "tel", "url", "search", "date", "time", etc.'},{name:"placeholder",type:"string",default:"-",description:"Texto de placeholder exibido quando o campo está vazio."},{name:"value",type:"string | number",default:"-",description:"Valor controlado do input."},{name:"defaultValue",type:"string | number",default:"-",description:"Valor inicial para input não controlado."},{name:"disabled",type:"boolean",default:"false",description:"Se o input está desabilitado (não editável e não envia no form)."},{name:"readOnly",type:"boolean",default:"false",description:"Se o input é somente leitura (não editável mas envia no form)."},{name:"required",type:"boolean",default:"false",description:"Se o campo é obrigatório para submissão do formulário."},{name:"maxLength",type:"number",default:"-",description:"Número máximo de caracteres permitidos."},{name:"minLength",type:"number",default:"-",description:"Número mínimo de caracteres necessários."},{name:"pattern",type:"string",default:"-",description:"Regex para validação do valor (HTML5)."},{name:"autoComplete",type:"string",default:"-",description:'Dica de autocompletar: "off", "email", "name", "tel", etc.'},{name:"autoFocus",type:"boolean",default:"false",description:"Se o input deve receber foco automaticamente ao montar."},{name:"className",type:"string",default:"-",description:"Classes CSS adicionais para customização."},{name:"onChange",type:"(e: ChangeEvent) => void",default:"-",description:"Callback chamado quando o valor muda."},{name:"onBlur",type:"(e: FocusEvent) => void",default:"-",description:"Callback chamado quando o input perde foco."},{name:"onFocus",type:"(e: FocusEvent) => void",default:"-",description:"Callback chamado quando o input recebe foco."}],notes:["**Label**: Componente de rótulo acessível. Use `htmlFor` para associar ao `id` do input.","**InputGroup**: Container que agrupa input com addons. Adiciona borda unificada e foco visual compartilhado.","**InputGroupInput**: Input estilizado para uso dentro do InputGroup (remove bordas próprias).","**InputGroupTextarea**: Textarea estilizado para uso com addons `block-start` ou `block-end`.","**InputGroupAddon**: Elemento decorativo (texto, ícone). Props: `align`: `inline-start` (prefixo), `inline-end` (sufixo), `block-start` (topo), `block-end` (base).","**InputGroupButton**: Botão integrado ao InputGroup. Props: `size`: `xs`, `sm`, `icon-xs`, `icon-sm`. Aceita todas as `variant` do Button.","Para validação de formulários, use react-hook-form com FormField, FormControl e FormMessage.","Para estados de erro, adicione as classes `border-destructive focus-visible:ring-destructive` ao Input."],accessibility:["Sempre associe Label ao Input usando htmlFor/id para melhor navegação com leitores de tela","Use placeholder como dica adicional, nunca como substituto do Label","O estado disabled é comunicado automaticamente para tecnologias assistivas","O estado required é comunicado e valida automaticamente no submit","InputGroup mantém foco visual unificado (ring) quando qualquer elemento interno está focado","Indicadores de foco visíveis atendem WCAG 2.4.7 (Focus Visible)","Inputs são totalmente navegáveis via teclado (Tab, Shift+Tab)","Para campos de senha, forneça toggle de visibilidade com ícone descritivo","Mensagens de erro devem ser associadas ao input via aria-describedby para leitores de tela"]})}export{J as InputDoc};

package/dist/assets/LabelDoc-DHvgzhaJ.js

@@ -1,42 +0,0 @@
-import{j as e,L as a,I as s,e as i}from"./index-CE0k7Rdh.js";import{C as l}from"./ComponentDocTemplate-CRbRY-v5.js";function o(){return e.jsx(l,{title:"Label",description:"Renderiza uma label acessível associada a controles de formulário.",component:e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(i,{id:"terms-main"}),e.jsx(a,{htmlFor:"terms-main",children:"Aceitar termos e condições"})]}),usage:`import { Label } from "forlogic-core"
-
-<Label htmlFor="email">Email</Label>
-<Input id="email" type="email" />`,examples:[{title:"Com Input",description:"Label associada a um campo de texto.",preview:e.jsxs("div",{className:"grid w-full max-w-sm gap-1.5",children:[e.jsx(a,{htmlFor:"email",children:"Email"}),e.jsx(s,{id:"email",type:"email",placeholder:"seu@email.com"})]}),code:`<div className="grid gap-1.5">
-  <Label htmlFor="email">Email</Label>
-  <Input id="email" type="email" placeholder="seu@email.com" />
-</div>`},{title:"Campo Obrigatório",description:"Indicador visual de campo obrigatório.",preview:e.jsxs("div",{className:"grid w-full max-w-sm gap-1.5",children:[e.jsxs(a,{htmlFor:"name",children:["Nome completo ",e.jsx("span",{className:"text-destructive",children:"*"})]}),e.jsx(s,{id:"name",required:!0})]}),code:`<Label htmlFor="name">
-  Nome completo <span className="text-destructive">*</span>
-</Label>
-<Input id="name" required />`},{title:"Com Texto de Ajuda",description:"Label com descrição auxiliar abaixo.",preview:e.jsxs("div",{className:"grid w-full max-w-sm gap-1.5",children:[e.jsx(a,{htmlFor:"password",children:"Senha"}),e.jsx(s,{id:"password",type:"password"}),e.jsx("p",{className:"text-xs text-muted-foreground",children:"Mínimo de 8 caracteres com letras e números."})]}),code:`<div className="grid gap-1.5">
-  <Label htmlFor="password">Senha</Label>
-  <Input id="password" type="password" />
-  <p className="text-xs text-muted-foreground">
-    Mínimo de 8 caracteres com letras e números.
-  </p>
-</div>`},{title:"Estado de Erro",description:"Label estilizada para indicar erro de validação.",preview:e.jsxs("div",{className:"grid w-full max-w-sm gap-1.5",children:[e.jsx(a,{htmlFor:"email-error",className:"text-destructive",children:"Email"}),e.jsx(s,{id:"email-error",type:"email",className:"border-destructive",defaultValue:"email-invalido"}),e.jsx("p",{className:"text-xs text-destructive",children:"Por favor, insira um email válido."})]}),code:`<Label htmlFor="email" className="text-destructive">Email</Label>
-<Input id="email" className="border-destructive" />
-<p className="text-xs text-destructive">
-  Por favor, insira um email válido.
-</p>`},{title:"Campo Desabilitado",description:"Label com aparência desabilitada.",preview:e.jsxs("div",{className:"grid w-full max-w-sm gap-1.5",children:[e.jsx(a,{htmlFor:"disabled-field",className:"text-muted-foreground",children:"Campo bloqueado"}),e.jsx(s,{id:"disabled-field",disabled:!0,defaultValue:"Valor fixo"})]}),code:`<Label htmlFor="field" className="text-muted-foreground">
-  Campo bloqueado
-</Label>
-<Input id="field" disabled defaultValue="Valor fixo" />`},{title:"Com Checkbox",description:"Label associada a checkbox para área de clique maior.",preview:e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsx(i,{id:"newsletter"}),e.jsx(a,{htmlFor:"newsletter",className:"cursor-pointer",children:"Receber novidades por email"})]}),code:`<div className="flex items-center space-x-2">
-  <Checkbox id="newsletter" />
-  <Label htmlFor="newsletter" className="cursor-pointer">
-    Receber novidades por email
-  </Label>
-</div>`},{title:"Formulário Completo",description:"Múltiplos campos com labels estruturadas.",preview:e.jsxs("div",{className:"grid w-full max-w-sm gap-4",children:[e.jsxs("div",{className:"grid gap-1.5",children:[e.jsxs(a,{htmlFor:"full-name",children:["Nome ",e.jsx("span",{className:"text-destructive",children:"*"})]}),e.jsx(s,{id:"full-name"})]}),e.jsxs("div",{className:"grid gap-1.5",children:[e.jsxs(a,{htmlFor:"full-email",children:["Email ",e.jsx("span",{className:"text-destructive",children:"*"})]}),e.jsx(s,{id:"full-email",type:"email"})]}),e.jsxs("div",{className:"grid gap-1.5",children:[e.jsx(a,{htmlFor:"full-phone",children:"Telefone"}),e.jsx(s,{id:"full-phone",type:"tel"}),e.jsx("p",{className:"text-xs text-muted-foreground",children:"Opcional"})]})]}),code:`<div className="grid gap-4">
-  <div className="grid gap-1.5">
-    <Label htmlFor="name">Nome <span className="text-destructive">*</span></Label>
-    <Input id="name" />
-  </div>
-  <div className="grid gap-1.5">
-    <Label htmlFor="email">Email <span className="text-destructive">*</span></Label>
-    <Input id="email" type="email" />
-  </div>
-  <div className="grid gap-1.5">
-    <Label htmlFor="phone">Telefone</Label>
-    <Input id="phone" type="tel" />
-    <p className="text-xs text-muted-foreground">Opcional</p>
-  </div>
-</div>`}],props:[{name:"htmlFor",type:"string",default:"-",description:"O id do controle de formulário para associar."},{name:"className",type:"string",default:"-",description:"Classes CSS para estilização."},{name:"children",type:"ReactNode",default:"-",description:"Conteúdo da label."}],accessibility:["Associa adequadamente com controles de formulário via htmlFor","Clicar na label foca automaticamente o input associado","Suporte completo para leitores de tela","Compatível com WCAG - melhora a área de clique","Use com Checkbox/Radio para melhor UX"],notes:["Sempre associe Labels a seus campos via htmlFor/id","Use o componente Label (não <label>) para formulários acessíveis","Indique campos obrigatórios com asterisco ou texto descritivo","Labels aumentam a área de clique para inputs (especialmente útil em mobile)","Adicione cursor-pointer quando associada a checkboxes/radios","Combine com texto de ajuda abaixo do input para instruções adicionais"]})}export{o as LabelDoc};