forlogic-core 2.0.0 → 2.0.1

package/dist/assets/DialogDoc-CMQqnTV-.js

@@ -0,0 +1,981 @@
+import{j as e,E as x,fW as h,x as a,G as g,H as v,I as f,fX as M,X as j,J as d,K as u,a$ as Se,fY as E,fZ as z,f_ as q,f$ as R,g0 as V,g1 as we,g2 as ye,r as i,F as Te,as as W,A as U,T as Be,i as ke,k as te,l as D,dC as F,p as Fe,bl as Pe,q as C,bm as Le,bk as Oe,o as y,aH as He,bp as Ae,aI as Ie,B as P,bo as Ee,M as le,bs as ne,dn as oe,ab as ie,w as ze,dv as G,dh as qe,a4 as Re,aX as de,g3 as ce,g4 as me,g5 as pe,g6 as ue,g7 as xe,g8 as he,g9 as ge,dD as Ve}from"./index-DkiftrvI.js";import{C as We}from"./ComponentDocTemplate-CQbBhfvZ.js";import{D as Me,a as Ue,b as Ge,c as Xe,d as Qe,e as Je,f as $e,g as Ke}from"./drawer-D5rflIcD.js";import{C as Ye}from"./circle-plus-CpIcep-O.js";import{G as Ze}from"./git-branch-BcXv9mpp.js";import{S as X}from"./step-selector-ATTh_9Wa.js";import{D as re}from"./date-picker-BW3eGOe_.js";import"./ExampleCard-DuLrb3t-.js";function T({icon:l,title:o,description:s,selected:r,onClick:t}){return e.jsxs("div",{onClick:t,className:y("flex items-center gap-4 p-4 border rounded-lg cursor-pointer transition-all","hover:border-primary/50 hover:bg-muted/30",r&&"border-primary bg-primary/5"),children:[e.jsx("div",{className:"flex-shrink-0 w-12 h-12 rounded-lg bg-muted flex items-center justify-center text-primary",children:l}),e.jsxs("div",{className:"flex-1 min-w-0",children:[e.jsx("h4",{className:"font-semibold text-foreground text-sm",children:o}),e.jsx("p",{className:"text-sm text-muted-foreground",children:s})]})]})}function _e(){const[l,o]=i.useState(!1),[s,r]=i.useState(null),[t,m]=i.useState(1),p=3,N=["Seleção","Configuração","Confirmação"];return e.jsxs(x,{open:l,onOpenChange:o,children:[e.jsx(h,{asChild:!0,children:e.jsx(a,{variant:"outline",children:"Dialog com Seleção"})}),e.jsxs(g,{size:"md",children:[e.jsx(v,{showSeparator:!0,children:e.jsx(f,{children:"Título"})}),e.jsxs("div",{className:"flex-1 min-h-0 overflow-auto py-4 px-1 -mx-1",children:[e.jsxs("div",{className:"mb-4",children:[e.jsx("h4",{className:"font-semibold text-foreground",children:"Subtítulo"}),e.jsx("p",{className:"text-sm text-muted-foreground",children:"Texto descritivo"})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsx(T,{icon:e.jsx(Te,{className:"h-5 w-5"}),title:"Card 1",description:"Texto descritivo",selected:s===1,onClick:()=>r(1)}),e.jsx(T,{icon:e.jsx(Ye,{className:"h-5 w-5"}),title:"Card 2",description:"Texto descritivo",selected:s===2,onClick:()=>r(2)}),e.jsx(T,{icon:e.jsx(W,{className:"h-5 w-5"}),title:"Card 3",description:"Texto descritivo",selected:s===3,onClick:()=>r(3)})]})]}),e.jsxs(j,{className:"flex-row items-center justify-between sm:justify-between",children:[e.jsx(X,{currentStep:t,totalSteps:p,onStepChange:m,stepLabels:N}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(a,{variant:"outline",onClick:()=>o(!1),children:"Cancelar"}),e.jsxs(a,{disabled:!s,children:["Avançar",e.jsx(U,{className:"h-4 w-4 ml-2"})]})]})]})]})]})}function ea({icon:l,title:o,description:s,type:r,onView:t}){return e.jsxs("div",{className:"flex items-start gap-3 p-3 border rounded-lg bg-background",children:[e.jsx("div",{className:"flex-shrink-0 w-8 h-8 rounded-full bg-success/10 flex items-center justify-center text-success",children:l}),e.jsxs("div",{className:"flex-1 min-w-0",children:[e.jsx("h5",{className:"font-medium text-sm text-foreground",children:o}),e.jsx("p",{className:"text-xs text-muted-foreground line-clamp-1",children:s})]}),e.jsxs("div",{className:"flex items-center gap-2 flex-shrink-0",children:[e.jsx(P,{className:"bg-success hover:bg-success/90 text-success-foreground",children:r}),e.jsx(a,{variant:"ghost",size:"icon",className:"h-8 w-8",onClick:t,children:e.jsx(de,{className:"h-4 w-4"})})]})]})}const aa=[{id:1,name:"Título",code:"9876543210",responsible:"Leonardo Paes Horácio",email:"leonardo@forlogic.net",date:"01/01/2026",linksCount:6,description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",linkedItems:[{id:1,title:"Título",description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod",type:"Fluxos"},{id:2,title:"Título",description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod",type:"Fluxos"},{id:3,title:"Título",description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod",type:"Fluxos"},{id:4,title:"Título",description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod",type:"Fluxos"},{id:5,title:"Título",description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod",type:"Fluxos"},{id:6,title:"Título",description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod",type:"Fluxos"}]},{id:2,name:"Título",code:"9081726354",responsible:"Leonardo Paes Horácio",email:"leonardo@forlogic.net",date:"01/01/2026",linksCount:6,description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",linkedItems:[{id:1,title:"Título",description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod",type:"Fluxos"},{id:2,title:"Título",description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod",type:"Fluxos"}]},{id:3,name:"Título",code:"2468135790",responsible:"Leonardo Paes Horácio",email:"leonardo@forlogic.net",date:"01/01/2026",linksCount:6,description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit",linkedItems:[{id:1,title:"Título",description:"Lorem ipsum dolor sit amet",type:"Fluxos"}]},{id:4,name:"Título",code:"1357924680",responsible:"Leonardo Paes Horácio",email:"leonardo@forlogic.net",date:"01/01/2026",linksCount:6,description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit",linkedItems:[]}];function sa(){const[l,o]=i.useState(!1),[s,r]=i.useState(1),[t,m]=i.useState(1),p=3,N=["Seleção de Dados","Revisão","Conclusão"];return e.jsxs(x,{open:l,onOpenChange:o,children:[e.jsx(h,{asChild:!0,children:e.jsx(a,{variant:"outline",children:"Dialog com Tabela"})}),e.jsxs(g,{size:"lg",children:[e.jsx(v,{showSeparator:!0,children:e.jsx(f,{children:"Título"})}),e.jsxs("div",{className:"flex-1 min-h-0 overflow-auto py-4 space-y-4",children:[e.jsxs("div",{children:[e.jsx("h4",{className:"font-semibold text-foreground",children:"Subtítulo"}),e.jsx("p",{className:"text-sm text-muted-foreground",children:"Texto descritivo"})]}),e.jsx("div",{className:"border rounded-lg overflow-hidden",children:e.jsxs(Be,{children:[e.jsx(ke,{children:e.jsxs(te,{className:"bg-muted/50",children:[e.jsx(D,{className:"w-[40px]"}),e.jsx(D,{children:e.jsxs("div",{className:"flex items-center gap-1",children:["Nome",e.jsx(F,{className:"h-4 w-4 text-muted-foreground"})]})}),e.jsx(D,{children:e.jsxs("div",{className:"flex items-center gap-1",children:["Código/ID",e.jsx(F,{className:"h-4 w-4 text-muted-foreground"})]})}),e.jsx(D,{children:e.jsxs("div",{className:"flex items-center gap-1",children:["Responsável",e.jsx(F,{className:"h-4 w-4 text-muted-foreground"})]})}),e.jsx(D,{children:e.jsxs("div",{className:"flex items-center gap-1",children:["Criado em",e.jsx(F,{className:"h-4 w-4 text-muted-foreground"})]})}),e.jsx(D,{children:e.jsxs("div",{className:"flex items-center gap-1",children:["Vínculos",e.jsx(F,{className:"h-4 w-4 text-muted-foreground"})]})}),e.jsx(D,{className:"w-[120px]"})]})}),e.jsx(Fe,{children:aa.map(n=>e.jsx(Pe,{open:s===n.id,onOpenChange:b=>r(b?n.id:null),asChild:!0,children:e.jsxs(e.Fragment,{children:[e.jsxs(te,{className:"border-b",children:[e.jsx(C,{children:e.jsx(Le,{asChild:!0,children:e.jsx(a,{variant:"ghost",size:"icon",className:"h-8 w-8",children:e.jsx(Oe,{className:y("h-4 w-4 transition-transform duration-200",s===n.id&&"rotate-180")})})})}),e.jsx(C,{className:"font-medium",children:n.name}),e.jsx(C,{children:n.code}),e.jsx(C,{children:e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs(He,{className:"h-8 w-8",children:[e.jsx(Ae,{src:""}),e.jsx(Ie,{className:"text-xs bg-primary/10 text-primary",children:"LP"})]}),e.jsxs("div",{children:[e.jsx("p",{className:"text-sm font-medium",children:n.responsible}),e.jsx("p",{className:"text-xs text-muted-foreground",children:n.email})]})]})}),e.jsx(C,{children:n.date}),e.jsx(C,{children:e.jsxs(P,{variant:"outline",children:[n.linksCount," Vínculos"]})}),e.jsx(C,{children:e.jsx(a,{size:"sm",children:"Selecionar"})})]}),e.jsx(Ee,{asChild:!0,children:e.jsx("tr",{children:e.jsx("td",{colSpan:7,className:"p-4 bg-muted/30 border-b",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{children:[e.jsx("h4",{className:"font-semibold text-foreground",children:"Título"}),e.jsx("p",{className:"text-sm text-muted-foreground",children:n.description})]}),e.jsxs("div",{children:[e.jsxs("div",{className:"flex items-center justify-between mb-3",children:[e.jsx("h4",{className:"font-semibold text-foreground",children:"Título"}),e.jsxs(P,{variant:"outline",children:[n.linkedItems.length," vínculos"]})]}),e.jsx("div",{className:"grid grid-cols-2 gap-3",children:n.linkedItems.map(b=>e.jsx(ea,{icon:e.jsx(Ze,{className:"h-4 w-4"}),title:b.title,description:b.description,type:b.type},b.id))})]})]})})})})]})},n.id))})]})})]}),e.jsxs(j,{className:"flex-row items-center justify-between sm:justify-between",children:[e.jsx(X,{currentStep:t,totalSteps:p,onStepChange:m,stepLabels:N}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(a,{variant:"outline",onClick:()=>o(!1),children:"Cancelar"}),e.jsxs(a,{children:["Avançar",e.jsx(U,{className:"h-4 w-4 ml-2"})]})]})]})]})]})}function ta(){const[l,o]=i.useState(!1);return e.jsxs(x,{open:l,onOpenChange:o,children:[e.jsx(h,{asChild:!0,children:e.jsx(a,{variant:"outline",children:"Dialog com Formulário"})}),e.jsxs(g,{size:"lg",children:[e.jsx(v,{showSeparator:!0,children:e.jsx(f,{children:"Novo Plano de Controle"})}),e.jsxs("div",{className:"flex-1 min-h-0 overflow-auto py-4 px-1 -mx-1 space-y-6",children:[e.jsxs("div",{className:"space-y-4",children:[e.jsx("h3",{className:"font-semibold text-foreground",children:"Identificação"}),e.jsxs("div",{className:"grid grid-cols-3 gap-4",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsxs(d,{htmlFor:"planNumber",children:["Número do Plano ",e.jsx("span",{className:"text-destructive",children:"*"})]}),e.jsx(u,{id:"planNumber",defaultValue:"9876543210"})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(d,{htmlFor:"emissionDate",children:"Data de emissão"}),e.jsx(u,{id:"emissionDate",type:"date",defaultValue:"2025-09-17"})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(d,{htmlFor:"revisionDate",children:"Data de revisão"}),e.jsx(u,{id:"revisionDate",type:"date",defaultValue:"2025-10-17"})]})]})]}),e.jsxs("div",{className:"space-y-4",children:[e.jsx("h3",{className:"font-semibold text-foreground",children:"Cliente e Organização"}),e.jsxs("div",{className:"grid grid-cols-2 gap-4",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsxs(d,{htmlFor:"clientName",children:["Nome do cliente ",e.jsx("span",{className:"text-destructive",children:"*"})]}),e.jsx(u,{id:"clientName",placeholder:"Insira o nome do cliente"})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsxs(d,{htmlFor:"orgName",children:["Nome da organização ",e.jsx("span",{className:"text-destructive",children:"*"})]}),e.jsx(u,{id:"orgName",placeholder:"Insira o nome da organização"})]})]})]}),e.jsxs("div",{className:"space-y-4",children:[e.jsx("h3",{className:"font-semibold text-foreground",children:"Produto/Peça"}),e.jsxs("div",{className:"grid grid-cols-2 gap-4",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsxs(d,{htmlFor:"partNumber",children:["Número da peça ",e.jsx("span",{className:"text-destructive",children:"*"})]}),e.jsx(u,{id:"partNumber",placeholder:"Insira o número da peça"})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsxs(d,{htmlFor:"engLevel",children:["Nível de engenharia ",e.jsx("span",{className:"text-destructive",children:"*"})]}),e.jsx(u,{id:"engLevel",placeholder:"Insira o nível"})]})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsxs(d,{htmlFor:"partDescription",children:["Descrição da peça ",e.jsx("span",{className:"text-destructive",children:"*"})]}),e.jsx(le,{id:"partDescription",placeholder:"Descreva detalhes sobre a peça...",rows:3})]})]})]}),e.jsxs(j,{children:[e.jsx(a,{variant:"outline",onClick:()=>o(!1),children:"Cancelar"}),e.jsxs(a,{children:[e.jsx(ne,{className:"h-4 w-4 mr-2"}),"Salvar"]})]})]})]})}function oa(){const[l,o]=i.useState(!1),[s,r]=i.useState(1),[t,m]=i.useState(null),[p,N]=i.useState(""),[n,b]=i.useState(""),[L,Q]=i.useState(""),[O,J]=i.useState(""),[S,$]=i.useState(void 0),[H,K]=i.useState(void 0),[B,Y]=i.useState(null),[k,Z]=i.useState(!0),A=4,ve=["Tipo do Projeto","Informações Básicas","Configurações","Confirmação"],_=["Projeto Interno","Projeto Cliente","Projeto Temporário"],ee=["Para uso da equipe interna","Para entrega a clientes externos","Com data de expiração definida"],ae=["Baixa","Média","Alta","Crítica"],fe=["bg-muted","bg-primary/20","bg-warning/20","bg-destructive/20"],I=c=>{switch(c){case 1:return t!==null;case 2:return p.trim().length>0&&L.trim().length>0;case 3:return!!S&&B!==null;case 4:return!0;default:return!1}},je=c=>{for(let w=1;w<c;w++)if(!I(w))return!1;return!0},Ne=()=>{s<A&&I(s)&&r(s+1)},be=()=>{s>1&&r(s-1)},De=()=>{o(!1),se()},se=()=>{r(1),m(null),N(""),b(""),Q(""),J(""),$(void 0),K(void 0),Y(null),Z(!0)},Ce=c=>{o(c),c||se()};return e.jsxs(x,{open:l,onOpenChange:Ce,children:[e.jsx(h,{asChild:!0,children:e.jsx(a,{variant:"outline",children:"Dialog com Wizard"})}),e.jsxs(g,{size:"lg",children:[e.jsx(v,{showSeparator:!0,children:e.jsx(f,{children:"Novo Projeto"})}),e.jsxs("div",{className:"flex-1 min-h-0 overflow-auto py-4 px-1 -mx-1",children:[s===1&&e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{children:[e.jsx("h4",{className:"font-semibold text-foreground",children:"Selecione o tipo de projeto"}),e.jsx("p",{className:"text-sm text-muted-foreground",children:"Escolha uma opção para continuar"})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-3",children:[e.jsx(T,{icon:e.jsx(oe,{className:"h-5 w-5"}),title:"Projeto Interno",description:"Para uso da equipe interna",selected:t===1,onClick:()=>m(1)}),e.jsx(T,{icon:e.jsx(ie,{className:"h-5 w-5"}),title:"Projeto Cliente",description:"Para entrega a clientes externos",selected:t===2,onClick:()=>m(2)}),e.jsx(T,{icon:e.jsx(W,{className:"h-5 w-5"}),title:"Projeto Temporário",description:"Com data de expiração definida",selected:t===3,onClick:()=>m(3)})]}),t&&e.jsx("div",{className:"p-3 bg-primary/5 border border-primary/20 rounded-lg",children:e.jsxs("p",{className:"text-sm text-primary",children:[e.jsxs("strong",{children:[_[t-1],":"]})," ",ee[t-1]]})})]}),s===2&&e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{children:[e.jsx("h4",{className:"font-semibold text-foreground",children:"Informações básicas"}),e.jsx("p",{className:"text-sm text-muted-foreground",children:"Preencha os dados do projeto"})]}),e.jsxs("div",{className:"grid grid-cols-2 gap-4",children:[e.jsxs("div",{className:"col-span-2 space-y-2",children:[e.jsxs(d,{htmlFor:"projectName",children:["Nome do projeto ",e.jsx("span",{className:"text-destructive",children:"*"})]}),e.jsx(u,{id:"projectName",placeholder:"Ex: Sistema de Gestão de Qualidade",value:p,onChange:c=>N(c.target.value)})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsxs(d,{htmlFor:"responsible",children:["Responsável ",e.jsx("span",{className:"text-destructive",children:"*"})]}),e.jsx(u,{id:"responsible",placeholder:"Nome do responsável",value:L,onChange:c=>Q(c.target.value)})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(d,{htmlFor:"department",children:"Departamento"}),e.jsx(u,{id:"department",placeholder:"Ex: Tecnologia",value:O,onChange:c=>J(c.target.value)})]}),e.jsxs("div",{className:"col-span-2 space-y-2",children:[e.jsx(d,{htmlFor:"projectDesc",children:"Descrição"}),e.jsx(le,{id:"projectDesc",placeholder:"Descreva o objetivo e escopo do projeto...",rows:3,value:n,onChange:c=>b(c.target.value)})]})]})]}),s===3&&e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{children:[e.jsx("h4",{className:"font-semibold text-foreground",children:"Configurações do projeto"}),e.jsx("p",{className:"text-sm text-muted-foreground",children:"Defina prazos e prioridade"})]}),e.jsxs("div",{className:"grid grid-cols-2 gap-4",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsxs(d,{children:["Data de início ",e.jsx("span",{className:"text-destructive",children:"*"})]}),e.jsx(re,{date:S,onDateChange:$,placeholder:"Selecione a data de início",className:"w-full"})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(d,{children:"Data prevista de conclusão"}),e.jsx(re,{date:H,onDateChange:K,placeholder:"Selecione a data de término",disabledDates:c=>S?c<S:!1,className:"w-full"})]})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsxs(d,{children:["Prioridade ",e.jsx("span",{className:"text-destructive",children:"*"})]}),e.jsx("div",{className:"grid grid-cols-4 gap-2",children:ae.map((c,w)=>e.jsx("button",{type:"button",onClick:()=>Y(w),className:y("p-3 rounded-lg border text-center transition-all text-sm font-medium",B===w?"border-primary bg-primary/10 text-primary":"border-border hover:border-primary/50 hover:bg-muted/50"),children:c},c))})]}),e.jsx(ze,{}),e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsxs("div",{children:[e.jsx(d,{className:"text-base",children:"Notificar equipe"}),e.jsx("p",{className:"text-sm text-muted-foreground",children:"Enviar e-mail para os membros quando o projeto for criado"})]}),e.jsx("button",{type:"button",onClick:()=>Z(!k),className:y("relative inline-flex h-6 w-11 items-center rounded-full transition-colors",k?"bg-primary":"bg-muted"),children:e.jsx("span",{className:y("inline-block h-4 w-4 transform rounded-full bg-white transition-transform",k?"translate-x-6":"translate-x-1")})})]})]}),s===4&&e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{children:[e.jsx("h4",{className:"font-semibold text-foreground",children:"Confirmar criação"}),e.jsx("p",{className:"text-sm text-muted-foreground",children:"Revise as informações antes de concluir"})]}),e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex items-center gap-3 p-3 border rounded-lg bg-muted/30",children:[e.jsxs("div",{className:"w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center text-primary",children:[t===1&&e.jsx(oe,{className:"h-5 w-5"}),t===2&&e.jsx(ie,{className:"h-5 w-5"}),t===3&&e.jsx(W,{className:"h-5 w-5"})]}),e.jsxs("div",{children:[e.jsx("p",{className:"font-medium",children:t?_[t-1]:"-"}),e.jsx("p",{className:"text-sm text-muted-foreground",children:t?ee[t-1]:""})]})]}),e.jsxs("div",{className:"border rounded-lg divide-y",children:[e.jsxs("div",{className:"p-3 flex justify-between items-center",children:[e.jsx("span",{className:"text-sm text-muted-foreground",children:"Nome do projeto"}),e.jsx("span",{className:"text-sm font-medium",children:p})]}),e.jsxs("div",{className:"p-3 flex justify-between items-center",children:[e.jsx("span",{className:"text-sm text-muted-foreground",children:"Responsável"}),e.jsx("span",{className:"text-sm font-medium",children:L})]}),O&&e.jsxs("div",{className:"p-3 flex justify-between items-center",children:[e.jsx("span",{className:"text-sm text-muted-foreground",children:"Departamento"}),e.jsx("span",{className:"text-sm font-medium",children:O})]}),e.jsxs("div",{className:"p-3 flex justify-between items-center",children:[e.jsx("span",{className:"text-sm text-muted-foreground",children:"Período"}),e.jsxs("span",{className:"text-sm font-medium",children:[S?S.toLocaleDateString("pt-BR"):"-",H&&" até "+H.toLocaleDateString("pt-BR")]})]}),e.jsxs("div",{className:"p-3 flex justify-between items-center",children:[e.jsx("span",{className:"text-sm text-muted-foreground",children:"Prioridade"}),e.jsx(P,{className:y(fe[B||0],"text-foreground"),children:B!==null?ae[B]:"-"})]}),e.jsxs("div",{className:"p-3 flex justify-between items-center",children:[e.jsx("span",{className:"text-sm text-muted-foreground",children:"Notificar equipe"}),e.jsx(P,{variant:k?"default":"outline",children:k?"Sim":"Não"})]})]}),n&&e.jsxs("div",{className:"p-3 border rounded-lg",children:[e.jsx("p",{className:"text-sm text-muted-foreground mb-1",children:"Descrição"}),e.jsx("p",{className:"text-sm",children:n})]}),e.jsxs("div",{className:"flex items-start gap-2 p-3 bg-primary/5 border border-primary/20 rounded-lg",children:[e.jsx(G,{className:"h-4 w-4 text-primary mt-0.5 shrink-0"}),e.jsx("p",{className:"text-sm text-primary",children:"Ao concluir, o projeto será criado e você poderá adicionar tarefas, membros e documentos."})]})]})]})]}),e.jsxs(j,{className:"flex-row items-center justify-between sm:justify-between",children:[e.jsx(X,{currentStep:s,totalSteps:A,onStepChange:r,stepLabels:ve,canGoToStep:je}),e.jsxs("div",{className:"flex gap-2",children:[s>1&&e.jsxs(a,{variant:"outline",onClick:be,children:[e.jsx(qe,{className:"h-4 w-4 mr-2"}),"Voltar"]}),s<A?e.jsxs(a,{onClick:Ne,disabled:!I(s),children:["Avançar",e.jsx(U,{className:"h-4 w-4 ml-2"})]}):e.jsxs(a,{onClick:De,children:[e.jsx(ne,{className:"h-4 w-4 mr-2"}),"Criar Projeto"]})]})]})]})]})}function ia(){return e.jsxs(x,{children:[e.jsx(h,{asChild:!0,children:e.jsx(a,{variant:"outline",children:"Dialog Simples"})}),e.jsxs(g,{size:"md",children:[e.jsx(v,{showSeparator:!0,children:e.jsx(f,{children:"Título"})}),e.jsxs("div",{className:"flex-1 min-h-0 overflow-auto py-4 px-1 -mx-1",children:[e.jsx("h4",{className:"font-semibold text-foreground",children:"Subtítulo"}),e.jsx("p",{className:"text-sm text-muted-foreground",children:"Texto descritivo com informações adicionais sobre o conteúdo do dialog."})]})]})]})}function ra(){const[l,o]=i.useState(!1),[s,r]=i.useState(""),t="EXCLUIR",m=p=>{o(p),p||r("")};return e.jsxs(ce,{open:l,onOpenChange:m,children:[e.jsx(me,{asChild:!0,children:e.jsx(a,{variant:"destructive",children:"Excluir Permanentemente"})}),e.jsxs(pe,{children:[e.jsx(ue,{className:"border-b pb-4",children:e.jsx(xe,{children:"Exclusão com Confirmação"})}),e.jsxs("div",{className:"py-4 space-y-4",children:[e.jsxs("div",{className:"flex items-start gap-3",children:[e.jsx("div",{className:"flex h-10 w-10 items-center justify-center rounded-full bg-destructive/10 shrink-0",children:e.jsx(G,{className:"h-5 w-5 text-destructive"})}),e.jsxs("div",{children:[e.jsx("h4",{className:"font-semibold text-foreground",children:"Excluir permanentemente?"}),e.jsx("p",{className:"text-sm text-muted-foreground",children:"Esta ação não pode ser desfeita. Isso excluirá permanentemente o registro e removerá todos os dados associados de nossos servidores."})]})]}),e.jsxs("div",{children:[e.jsxs(d,{htmlFor:"confirm-text",className:"text-sm",children:["Digite ",e.jsx("span",{className:"font-semibold text-destructive",children:t})," para confirmar:"]}),e.jsx(u,{id:"confirm-text",className:"mt-2",placeholder:t,value:s,onChange:p=>r(p.target.value)})]})]}),e.jsxs(he,{children:[e.jsx(ge,{children:"Cancelar"}),e.jsx(a,{variant:"destructive",disabled:s!==t,onClick:()=>o(!1),children:"Excluir Permanentemente"})]})]})]})}function la(){const[l,o]=i.useState(!1),[s,r]=i.useState(""),[t,m]=i.useState(!1),p=n=>{o(n),n||(r(""),m(!1))},N=s.length>=6;return e.jsxs(ce,{open:l,onOpenChange:p,children:[e.jsx(me,{asChild:!0,children:e.jsx(a,{variant:"destructive",children:"Excluir com Senha"})}),e.jsxs(pe,{children:[e.jsx(ue,{className:"border-b pb-4",children:e.jsx(xe,{children:"Confirmação de Segurança"})}),e.jsxs("div",{className:"py-4 space-y-4",children:[e.jsxs("div",{className:"flex items-start gap-3",children:[e.jsx("div",{className:"flex h-10 w-10 items-center justify-center rounded-full bg-destructive/10 shrink-0",children:e.jsx(G,{className:"h-5 w-5 text-destructive"})}),e.jsxs("div",{children:[e.jsx("h4",{className:"font-semibold text-foreground",children:"Confirmar exclusão"}),e.jsx("p",{className:"text-sm text-muted-foreground",children:"Para confirmar esta ação, digite sua senha de acesso."})]})]}),e.jsxs("div",{children:[e.jsx(d,{htmlFor:"password-confirm",className:"text-sm",children:"Digite sua senha para confirmar:"}),e.jsxs("div",{className:"relative mt-2",children:[e.jsx(u,{id:"password-confirm",type:t?"text":"password",placeholder:"••••••••",value:s,onChange:n=>r(n.target.value)}),e.jsx(a,{type:"button",variant:"ghost",size:"icon",className:"absolute right-0 top-0 h-full px-3 hover:bg-transparent",onClick:()=>m(!t),children:t?e.jsx(Ve,{className:"h-4 w-4"}):e.jsx(de,{className:"h-4 w-4"})})]})]})]}),e.jsxs(he,{children:[e.jsx(ge,{children:"Cancelar"}),e.jsx(a,{variant:"destructive",disabled:!N,onClick:()=>o(!1),children:"Confirmar Exclusão"})]})]})]})}function na(){return e.jsxs("div",{className:"flex gap-2",children:[e.jsx(ra,{}),e.jsx(la,{})]})}function da(){const[l,o]=i.useState(!1),[s,r]=i.useState(!1),[t,m]=i.useState(!1),[p,N]=i.useState(!1);return e.jsxs("div",{className:"flex flex-wrap gap-2",children:[e.jsxs(x,{open:l,onOpenChange:o,children:[e.jsx(h,{asChild:!0,children:e.jsx(a,{variant:"outline",size:"sm",children:"Pequeno (sm)"})}),e.jsxs(g,{size:"sm",children:[e.jsx(v,{showSeparator:!0,children:e.jsx(f,{children:"Dialog Pequeno"})}),e.jsx("div",{className:"py-4",children:e.jsx("p",{className:"text-sm text-muted-foreground",children:"Ideal para confirmações rápidas e alertas simples."})}),e.jsx(j,{children:e.jsx(a,{variant:"outline",onClick:()=>o(!1),children:"Fechar"})})]})]}),e.jsxs(x,{open:s,onOpenChange:r,children:[e.jsx(h,{asChild:!0,children:e.jsx(a,{variant:"outline",size:"sm",children:"Médio (md)"})}),e.jsxs(g,{size:"md",children:[e.jsx(v,{showSeparator:!0,children:e.jsx(f,{children:"Dialog Médio"})}),e.jsx("div",{className:"py-4",children:e.jsx("p",{className:"text-sm text-muted-foreground",children:"Tamanho padrão para formulários e conteúdo moderado."})}),e.jsxs(j,{children:[e.jsx(a,{variant:"outline",onClick:()=>r(!1),children:"Cancelar"}),e.jsx(a,{onClick:()=>r(!1),children:"Confirmar"})]})]})]}),e.jsxs(x,{open:t,onOpenChange:m,children:[e.jsx(h,{asChild:!0,children:e.jsx(a,{variant:"outline",size:"sm",children:"Grande (lg)"})}),e.jsxs(g,{size:"lg",children:[e.jsx(v,{showSeparator:!0,children:e.jsx(f,{children:"Dialog Grande"})}),e.jsxs("div",{className:"flex-1 min-h-0 overflow-auto py-4",children:[e.jsx("p",{className:"text-sm text-muted-foreground mb-4",children:"Ideal para tabelas, formulários complexos e conteúdo extenso."}),e.jsxs("div",{className:"grid grid-cols-2 gap-4",children:[e.jsxs("div",{className:"p-4 border rounded-lg",children:[e.jsx("h4",{className:"font-medium mb-2",children:"Seção 1"}),e.jsx("p",{className:"text-sm text-muted-foreground",children:"Conteúdo da primeira seção."})]}),e.jsxs("div",{className:"p-4 border rounded-lg",children:[e.jsx("h4",{className:"font-medium mb-2",children:"Seção 2"}),e.jsx("p",{className:"text-sm text-muted-foreground",children:"Conteúdo da segunda seção."})]})]})]}),e.jsx(j,{children:e.jsx(a,{variant:"outline",onClick:()=>m(!1),children:"Fechar"})})]})]}),e.jsxs(x,{open:p,onOpenChange:N,children:[e.jsx(h,{asChild:!0,children:e.jsx(a,{variant:"outline",size:"sm",children:"Customizado"})}),e.jsxs(g,{size:"md",customMaxWidth:"600px",customMaxHeight:"400px",children:[e.jsx(v,{showSeparator:!0,children:e.jsx(f,{children:"Dimensões Customizadas"})}),e.jsx("div",{className:"py-4",children:e.jsxs("p",{className:"text-sm text-muted-foreground",children:["Usa ",e.jsx("code",{className:"bg-muted px-1 rounded",children:'size="md"'})," como base, com ",e.jsx("code",{className:"bg-muted px-1 rounded",children:'customMaxWidth="600px"'}),"."]})}),e.jsx(j,{children:e.jsx(a,{variant:"outline",onClick:()=>N(!1),children:"Fechar"})})]})]})]})}function ca(){const[l,o]=i.useState(!1);return e.jsxs(x,{open:l,onOpenChange:o,children:[e.jsx(h,{asChild:!0,children:e.jsx(a,{variant:"outline",children:"Informative"})}),e.jsxs(g,{variant:"informative",size:"md",children:[e.jsx(v,{showSeparator:!0,children:e.jsx(f,{children:"Informações do Sistema"})}),e.jsx(M,{children:e.jsx("p",{className:"text-sm text-muted-foreground",children:"Este dialog pode ser fechado clicando fora, pressionando ESC ou no botão X. Ideal para exibir informações, instruções ou avisos."})})]})]})}function ma(){const[l,o]=i.useState(!1),[s,r]=i.useState(""),t=s.length>0;return e.jsxs(x,{open:l,onOpenChange:o,children:[e.jsx(h,{asChild:!0,children:e.jsx(a,{variant:"outline",children:"Form (com isDirty)"})}),e.jsxs(g,{variant:"form",isDirty:t,size:"md",children:[e.jsx(v,{showSeparator:!0,children:e.jsx(f,{children:"Novo Registro"})}),e.jsx(M,{children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsx("label",{className:"text-sm font-medium",children:"Nome *"}),e.jsx("input",{className:"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm",placeholder:"Digite algo para ativar isDirty...",value:s,onChange:m=>r(m.target.value)})]}),e.jsx("p",{className:"text-xs text-muted-foreground",children:t?"⚠️ isDirty=true — ESC e X pedirão confirmação. Clique fora está bloqueado.":"isDirty=false — ESC e X fecham normalmente. Clique fora está bloqueado."})]})}),e.jsxs(j,{children:[e.jsx(a,{variant:"outline",onClick:()=>o(!1),children:"Cancelar"}),e.jsx(a,{onClick:()=>{r(""),o(!1)},children:"Salvar"})]})]})]})}function pa(){const[l,o]=i.useState(!1);return e.jsxs(x,{open:l,onOpenChange:o,children:[e.jsx(h,{asChild:!0,children:e.jsx(a,{variant:"destructive",children:"Destructive"})}),e.jsxs(g,{variant:"destructive",size:"sm",children:[e.jsx(v,{showSeparator:!0,children:e.jsx(f,{className:"sr-only",children:"Confirmação"})}),e.jsxs("div",{className:"flex flex-col items-center text-center space-y-3 py-4",children:[e.jsx("div",{className:"w-12 h-12 rounded-full bg-destructive/10 flex items-center justify-center",children:e.jsx(Re,{className:"h-6 w-6 text-destructive"})}),e.jsx("h3",{className:"text-lg font-semibold",children:"Tem certeza?"}),e.jsx("p",{className:"text-sm text-muted-foreground",children:"Esta ação não pode ser desfeita. Não há botão X, ESC ou clique fora."})]}),e.jsxs(j,{className:"justify-center gap-2",children:[e.jsx(a,{variant:"outline",onClick:()=>o(!1),children:"Cancelar"}),e.jsx(a,{variant:"destructive",onClick:()=>o(!1),children:"Sim, excluir"})]})]})]})}function ua(){return e.jsxs("div",{className:"flex flex-wrap gap-2",children:[e.jsx(ca,{}),e.jsx(ma,{}),e.jsx(pa,{})]})}function Da(){return e.jsx(We,{title:"Dialog",description:"Uma janela sobreposta à janela principal ou a outra janela de diálogo, tornando o conteúdo abaixo inerte. Inclui variações para seleção, tabelas e formulários.",component:e.jsx(ia,{}),usage:`import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "forlogic-core"
+
+// Tamanhos disponíveis: sm, md (padrão), lg
+<Dialog>
+  <DialogTrigger asChild>
+    <Button variant="outline">Dialog Simples</Button>
+  </DialogTrigger>
+  <DialogContent size="md">
+    <DialogHeader showSeparator>
+      <DialogTitle>Título</DialogTitle>
+    </DialogHeader>
+    <div className="flex-1 min-h-0 overflow-auto py-4 px-1 -mx-1">
+      <p className="text-sm text-muted-foreground">Conteúdo</p>
+    </div>
+  </DialogContent>
+</Dialog>
+
+// Com dimensões customizadas
+<DialogContent 
+  size="md" 
+  customMaxWidth="600px"
+  customMaxHeight="400px"
+>
+  ...
+</DialogContent>`,examples:[{title:"Variantes Semânticas",description:"O DialogContent possui 3 variantes que controlam o comportamento de fechamento: informative (fecha livremente), form (bloqueia clique externo, confirma se isDirty) e destructive (exige ação explícita).",preview:e.jsx(ua,{}),code:`// Informative (padrão) — fecha livremente
+<DialogContent variant="informative" size="md">
+  <DialogHeader showSeparator>
+    <DialogTitle>Informações</DialogTitle>
+  </DialogHeader>
+  <DialogBody>
+    <p>Conteúdo informativo...</p>
+  </DialogBody>
+</DialogContent>
+
+// Form — bloqueia clique externo, confirma se isDirty
+<DialogContent variant="form" isDirty={form.formState.isDirty} size="lg">
+  <DialogHeader showSeparator>
+    <DialogTitle>Novo Registro</DialogTitle>
+  </DialogHeader>
+  <DialogBody>
+    <form>...</form>
+  </DialogBody>
+  <DialogFooter>
+    <Button variant="outline" onClick={() => onOpenChange(false)}>Cancelar</Button>
+    <Button type="submit">Salvar</Button>
+  </DialogFooter>
+</DialogContent>
+
+// Destructive — sem botão X, sem ESC, sem clique fora
+<DialogContent variant="destructive" size="sm">
+  <DialogHeader showSeparator>
+    <DialogTitle className="sr-only">Confirmação</DialogTitle>
+  </DialogHeader>
+  <DialogBody>
+    <p>Esta ação não pode ser desfeita.</p>
+  </DialogBody>
+  <DialogFooter>
+    <Button variant="outline" onClick={() => onOpenChange(false)}>Cancelar</Button>
+    <Button variant="destructive" onClick={handleDelete}>Excluir</Button>
+  </DialogFooter>
+</DialogContent>`},{title:"Tamanhos Responsivos",description:"O dialog possui 3 tamanhos pré-definidos que se adaptam a diferentes resoluções de tela.",preview:e.jsx(da,{}),code:`// Tamanhos disponíveis: sm, md, lg
+// sm: width 30vw, min 320px, max 480px, maxHeight 320px
+// md: width 50vw, min 480px, max 720px, maxHeight 70vh (padrão)
+// lg: width 85vw, min 720px, max 1440px, height 85vh, maxHeight 900px
+
+<DialogContent size="sm">Pequeno</DialogContent>
+<DialogContent size="md">Médio (padrão)</DialogContent>
+<DialogContent size="lg">Grande</DialogContent>
+
+// Customização de dimensões individuais
+<DialogContent 
+  size="md" 
+  customMaxWidth="600px"
+  customMaxHeight="400px"
+  customMinWidth="400px"
+>
+  Dimensões customizadas
+</DialogContent>`},{title:"Dialog com Seleção de Cards",description:"Permite ao usuário escolher uma opção entre múltiplos cards antes de prosseguir. Usa StepSelector para navegação.",preview:e.jsx(_e,{}),code:`// Componente SelectionCard para opções
+function SelectionCard({ icon, title, description, selected, onClick }) {
+  return (
+    <div
+      onClick={onClick}
+      className={cn(
+        "flex items-center gap-4 p-4 border rounded-lg cursor-pointer transition-all",
+        "hover:border-primary/50 hover:bg-muted/30",
+        selected && "border-primary bg-primary/5"
+      )}
+    >
+      <div className="flex-shrink-0 w-12 h-12 rounded-lg bg-muted flex items-center justify-center text-primary">
+        {icon}
+      </div>
+      <div className="flex-1 min-w-0">
+        <h4 className="font-semibold text-foreground text-sm">{title}</h4>
+        <p className="text-sm text-muted-foreground">{description}</p>
+      </div>
+    </div>
+  );
+}
+
+// Dialog com Seleção
+function DialogWithSelection() {
+  const [open, setOpen] = useState(false);
+  const [selected, setSelected] = useState<number | null>(null);
+  const [step, setStep] = useState(1);
+  const totalSteps = 3;
+  const stepLabels = ['Seleção', 'Configuração', 'Confirmação'];
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant="outline">Dialog com Seleção</Button>
+      </DialogTrigger>
+      <DialogContent size="md">
+        <DialogHeader showSeparator>
+          <DialogTitle>Título</DialogTitle>
+        </DialogHeader>
+        <div className="flex-1 min-h-0 overflow-auto py-4 px-1 -mx-1">
+          <div className="mb-4">
+            <h4 className="font-semibold text-foreground">Subtítulo</h4>
+            <p className="text-sm text-muted-foreground">Texto descritivo</p>
+          </div>
+          <div className="space-y-3">
+            <SelectionCard 
+              icon={<FileText className="h-5 w-5" />} 
+              title="Card 1" 
+              description="Texto descritivo" 
+              selected={selected === 1} 
+              onClick={() => setSelected(1)} 
+            />
+            <SelectionCard 
+              icon={<PlusCircle className="h-5 w-5" />} 
+              title="Card 2" 
+              description="Texto descritivo" 
+              selected={selected === 2} 
+              onClick={() => setSelected(2)} 
+            />
+            <SelectionCard 
+              icon={<Clock className="h-5 w-5" />} 
+              title="Card 3" 
+              description="Texto descritivo" 
+              selected={selected === 3} 
+              onClick={() => setSelected(3)} 
+            />
+          </div>
+        </div>
+        <DialogFooter className="flex-row items-center justify-between sm:justify-between">
+          <StepSelector 
+            currentStep={step} 
+            totalSteps={totalSteps} 
+            onStepChange={setStep}
+            stepLabels={stepLabels}
+          />
+          <div className="flex items-center gap-2">
+            <Button variant="outline" onClick={() => setOpen(false)}>
+              Cancelar
+            </Button>
+            <Button disabled={!selected}>
+              Avançar
+              <ArrowRight className="h-4 w-4 ml-2" />
+            </Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}`},{title:"Dialog com Tabela Expansível",description:"Tabela com linhas expansíveis que mostram conteúdo detalhado e itens vinculados. Usa StepSelector para navegação.",preview:e.jsx(sa,{}),code:`// Componente para card de item vinculado
+function LinkedItemCard({ icon, title, description, type }) {
+  return (
+    <div className="flex items-start gap-3 p-3 border rounded-lg bg-background">
+      <div className="w-8 h-8 rounded-full bg-success/10 flex items-center justify-center text-success">
+        {icon}
+      </div>
+      <div className="flex-1 min-w-0">
+        <h5 className="font-medium text-sm">{title}</h5>
+        <p className="text-xs text-muted-foreground line-clamp-1">{description}</p>
+      </div>
+      <div className="flex items-center gap-2">
+        <Badge className="bg-success text-success-foreground">{type}</Badge>
+        <Button variant="ghost" size="icon" className="h-8 w-8">
+          <Eye className="h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+// Dialog com Tabela Expansível
+function DialogWithTable() {
+  const [open, setOpen] = useState(false);
+  const [expandedRow, setExpandedRow] = useState<number | null>(1);
+  const [step, setStep] = useState(1);
+  const totalSteps = 3;
+  const stepLabels = ['Seleção de Dados', 'Revisão', 'Conclusão'];
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant="outline">Dialog com Tabela</Button>
+      </DialogTrigger>
+      <DialogContent size="lg">
+        <DialogHeader showSeparator>
+          <DialogTitle>Título</DialogTitle>
+        </DialogHeader>
+        <div className="flex-1 min-h-0 overflow-auto py-4 space-y-4">
+          <div>
+            <h4 className="font-semibold text-foreground">Subtítulo</h4>
+            <p className="text-sm text-muted-foreground">Texto descritivo</p>
+          </div>
+          <div className="border rounded-lg overflow-hidden">
+            <Table>
+              <TableHeader>
+                <TableRow className="bg-muted/50">
+                  <TableHead className="w-[40px]"></TableHead>
+                  <TableHead>Nome</TableHead>
+                  <TableHead>Código/ID</TableHead>
+                  <TableHead>Responsável</TableHead>
+                  <TableHead>Criado em</TableHead>
+                  <TableHead>Vínculos</TableHead>
+                  <TableHead className="w-[120px]"></TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {tableData.map(row => (
+                  <Collapsible 
+                    key={row.id} 
+                    open={expandedRow === row.id}
+                    onOpenChange={(isOpen) => setExpandedRow(isOpen ? row.id : null)}
+                    asChild
+                  >
+                    <>
+                      <TableRow className="border-b">
+                        <TableCell>
+                          <CollapsibleTrigger asChild>
+                            <Button variant="ghost" size="icon" className="h-8 w-8">
+                              <ChevronDown className={cn(
+                                "h-4 w-4 transition-transform duration-200",
+                                expandedRow === row.id && "rotate-180"
+                              )} />
+                            </Button>
+                          </CollapsibleTrigger>
+                        </TableCell>
+                        <TableCell className="font-medium">{row.name}</TableCell>
+                        <TableCell>{row.code}</TableCell>
+                        <TableCell>
+                          <div className="flex items-center gap-2">
+                            <Avatar className="h-8 w-8">
+                              <AvatarFallback className="text-xs bg-primary/10 text-primary">LP</AvatarFallback>
+                            </Avatar>
+                            <div>
+                              <p className="text-sm font-medium">{row.responsible}</p>
+                              <p className="text-xs text-muted-foreground">{row.email}</p>
+                            </div>
+                          </div>
+                        </TableCell>
+                        <TableCell>{row.date}</TableCell>
+                        <TableCell>
+                          <Badge variant="outline">{row.linksCount} Vínculos</Badge>
+                        </TableCell>
+                        <TableCell>
+                          <Button size="sm">Selecionar</Button>
+                        </TableCell>
+                      </TableRow>
+                      <CollapsibleContent asChild>
+                        <tr>
+                          <td colSpan={7} className="p-4 bg-muted/30 border-b">
+                            <div className="space-y-4">
+                              <div>
+                                <h4 className="font-semibold text-foreground">Título</h4>
+                                <p className="text-sm text-muted-foreground">{row.description}</p>
+                              </div>
+                              <div>
+                                <div className="flex items-center justify-between mb-3">
+                                  <h4 className="font-semibold text-foreground">Título</h4>
+                                  <Badge variant="outline">{row.linkedItems.length} vínculos</Badge>
+                                </div>
+                                <div className="grid grid-cols-2 gap-3">
+                                  {row.linkedItems.map(item => (
+                                    <LinkedItemCard 
+                                      key={item.id} 
+                                      icon={<GitBranch className="h-4 w-4" />}
+                                      title={item.title}
+                                      description={item.description}
+                                      type={item.type}
+                                    />
+                                  ))}
+                                </div>
+                              </div>
+                            </div>
+                          </td>
+                        </tr>
+                      </CollapsibleContent>
+                    </>
+                  </Collapsible>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </div>
+        <DialogFooter className="flex-row items-center justify-between sm:justify-between">
+          <StepSelector 
+            currentStep={step} 
+            totalSteps={totalSteps} 
+            onStepChange={setStep}
+            stepLabels={stepLabels}
+          />
+          <div className="flex items-center gap-2">
+            <Button variant="outline" onClick={() => setOpen(false)}>
+              Cancelar
+            </Button>
+            <Button>
+              Avançar
+              <ArrowRight className="h-4 w-4 ml-2" />
+            </Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}`},{title:"Dialog com Formulário",description:"Formulário completo com seções e campos obrigatórios organizados em grid responsivo.",preview:e.jsx(ta,{}),code:`function DialogWithForm() {
+  const [open, setOpen] = useState(false);
+  
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant="outline">Dialog com Formulário</Button>
+      </DialogTrigger>
+      <DialogContent size="lg">
+        <DialogHeader showSeparator>
+          <DialogTitle>Novo Plano de Controle</DialogTitle>
+        </DialogHeader>
+        <div className="flex-1 min-h-0 overflow-auto py-4 px-1 -mx-1 space-y-6">
+          {/* Seção Identificação */}
+          <div className="space-y-4">
+            <h3 className="font-semibold text-foreground">Identificação</h3>
+            <div className="grid grid-cols-3 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="planNumber">
+                  Número do Plano <span className="text-destructive">*</span>
+                </Label>
+                <Input id="planNumber" defaultValue="9876543210" />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="emissionDate">Data de emissão</Label>
+                <Input id="emissionDate" type="date" defaultValue="2025-09-17" />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="revisionDate">Data de revisão</Label>
+                <Input id="revisionDate" type="date" defaultValue="2025-10-17" />
+              </div>
+            </div>
+          </div>
+
+          {/* Seção Cliente e Organização */}
+          <div className="space-y-4">
+            <h3 className="font-semibold text-foreground">Cliente e Organização</h3>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="clientName">
+                  Nome do cliente <span className="text-destructive">*</span>
+                </Label>
+                <Input id="clientName" placeholder="Insira o nome do cliente" />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="orgName">
+                  Nome da organização <span className="text-destructive">*</span>
+                </Label>
+                <Input id="orgName" placeholder="Insira o nome da organização" />
+              </div>
+            </div>
+          </div>
+
+          {/* Seção Produto/Peça */}
+          <div className="space-y-4">
+            <h3 className="font-semibold text-foreground">Produto/Peça</h3>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="partNumber">
+                  Número da peça <span className="text-destructive">*</span>
+                </Label>
+                <Input id="partNumber" placeholder="Insira o número da peça" />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="engLevel">
+                  Nível de engenharia <span className="text-destructive">*</span>
+                </Label>
+                <Input id="engLevel" placeholder="Insira o nível" />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="partDescription">
+                Descrição da peça <span className="text-destructive">*</span>
+              </Label>
+              <Textarea id="partDescription" placeholder="Descreva detalhes sobre a peça..." rows={3} />
+            </div>
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => setOpen(false)}>
+            Cancelar
+          </Button>
+          <Button>
+            <Check className="h-4 w-4 mr-2" />
+            Salvar
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}`},{title:"Dialog com Wizard Multi-etapas",description:"Wizard funcional com 4 etapas: seleção de tipo, informações básicas, configurações e confirmação. Inclui validação de campos obrigatórios, navegação controlada via StepSelector e reset ao fechar.",preview:e.jsx(oa,{}),code:`function DialogWithWizard() {
+  const [open, setOpen] = useState(false);
+  const [step, setStep] = useState(1);
+  
+  // Step 1: Tipo
+  const [selectedType, setSelectedType] = useState<number | null>(null);
+  
+  // Step 2: Informações básicas
+  const [projectName, setProjectName] = useState('');
+  const [projectDesc, setProjectDesc] = useState('');
+  const [responsible, setResponsible] = useState('');
+  const [department, setDepartment] = useState('');
+  
+  // Step 3: Configurações
+  const [startDate, setStartDate] = useState<Date | undefined>(undefined);
+  const [endDate, setEndDate] = useState<Date | undefined>(undefined);
+  const [priority, setPriority] = useState<number | null>(null);
+  const [notifyTeam, setNotifyTeam] = useState(true);
+  
+  const totalSteps = 4;
+  const stepLabels = ['Tipo do Projeto', 'Informações Básicas', 'Configurações', 'Confirmação'];
+  const typeLabels = ['Projeto Interno', 'Projeto Cliente', 'Projeto Temporário'];
+  const priorityLabels = ['Baixa', 'Média', 'Alta', 'Crítica'];
+
+  // Validação por step
+  const isStepValid = (stepToCheck: number) => {
+    switch (stepToCheck) {
+      case 1: return selectedType !== null;
+      case 2: return projectName.trim().length > 0 && responsible.trim().length > 0;
+      case 3: return !!startDate && priority !== null;
+      case 4: return true;
+      default: return false;
+    }
+  };
+
+  // Verifica se pode ir para um step (todos anteriores precisam estar válidos)
+  const canGoToStep = (targetStep: number) => {
+    for (let i = 1; i < targetStep; i++) {
+      if (!isStepValid(i)) return false;
+    }
+    return true;
+  };
+
+  const handleNext = () => {
+    if (step < totalSteps && isStepValid(step)) setStep(step + 1);
+  };
+
+  const handleBack = () => {
+    if (step > 1) setStep(step - 1);
+  };
+
+  const resetForm = () => {
+    setStep(1);
+    setSelectedType(null);
+    setProjectName('');
+    setProjectDesc('');
+    setResponsible('');
+    setDepartment('');
+    setStartDate(undefined);
+    setEndDate(undefined);
+    setPriority(null);
+    setNotifyTeam(true);
+  };
+
+  const handleOpenChange = (isOpen: boolean) => {
+    setOpen(isOpen);
+    if (!isOpen) resetForm();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogTrigger asChild>
+        <Button variant="outline">Dialog com Wizard</Button>
+      </DialogTrigger>
+      <DialogContent size="lg">
+        <DialogHeader showSeparator>
+          <DialogTitle>Novo Projeto</DialogTitle>
+        </DialogHeader>
+        
+        <div className="flex-1 min-h-0 overflow-auto py-4 px-1 -mx-1">
+          {/* Step 1: Seleção de tipo */}
+          {step === 1 && (
+            <div className="space-y-4">
+              <div>
+                <h4 className="font-semibold text-foreground">Selecione o tipo de projeto</h4>
+                <p className="text-sm text-muted-foreground">Escolha uma opção para continuar</p>
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+                <SelectionCard 
+                  icon={<Building2 className="h-5 w-5" />} 
+                  title="Projeto Interno" 
+                  description="Para uso da equipe interna" 
+                  selected={selectedType === 1}
+                  onClick={() => setSelectedType(1)}
+                />
+                <SelectionCard 
+                  icon={<Users className="h-5 w-5" />} 
+                  title="Projeto Cliente" 
+                  description="Para entrega a clientes externos"
+                  selected={selectedType === 2}
+                  onClick={() => setSelectedType(2)}
+                />
+                <SelectionCard 
+                  icon={<Clock className="h-5 w-5" />} 
+                  title="Projeto Temporário" 
+                  description="Com data de expiração definida"
+                  selected={selectedType === 3}
+                  onClick={() => setSelectedType(3)}
+                />
+              </div>
+            </div>
+          )}
+
+          {/* Step 2: Informações Básicas */}
+          {step === 2 && (
+            <div className="space-y-6">
+              <div>
+                <h4 className="font-semibold text-foreground">Informações básicas</h4>
+                <p className="text-sm text-muted-foreground">Preencha os dados do projeto</p>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="col-span-2 space-y-2">
+                  <Label htmlFor="projectName">
+                    Nome do projeto <span className="text-destructive">*</span>
+                  </Label>
+                  <Input 
+                    id="projectName" 
+                    placeholder="Ex: Sistema de Gestão de Qualidade" 
+                    value={projectName}
+                    onChange={(e) => setProjectName(e.target.value)}
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="responsible">
+                    Responsável <span className="text-destructive">*</span>
+                  </Label>
+                  <Input 
+                    id="responsible" 
+                    placeholder="Nome do responsável" 
+                    value={responsible}
+                    onChange={(e) => setResponsible(e.target.value)}
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="department">Departamento</Label>
+                  <Input 
+                    id="department" 
+                    placeholder="Ex: Tecnologia" 
+                    value={department}
+                    onChange={(e) => setDepartment(e.target.value)}
+                  />
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Step 3: Configurações */}
+          {step === 3 && (
+            <div className="space-y-6">
+              <div>
+                <h4 className="font-semibold text-foreground">Configurações do projeto</h4>
+                <p className="text-sm text-muted-foreground">Defina prazos e prioridade</p>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label>
+                    Data de início <span className="text-destructive">*</span>
+                  </Label>
+                  <DatePicker
+                    date={startDate}
+                    onDateChange={setStartDate}
+                    placeholder="Selecione a data de início"
+                    className="w-full"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label>Data prevista de conclusão</Label>
+                  <DatePicker
+                    date={endDate}
+                    onDateChange={setEndDate}
+                    placeholder="Selecione a data de término"
+                    disabledDates={(date) => (startDate ? date < startDate : false)}
+                    className="w-full"
+                  />
+                </div>
+              </div>
+              <div className="space-y-3">
+                <Label>Prioridade <span className="text-destructive">*</span></Label>
+                <div className="grid grid-cols-4 gap-2">
+                  {priorityLabels.map((label, idx) => (
+                    <button
+                      key={label}
+                      type="button"
+                      onClick={() => setPriority(idx)}
+                      className={cn(
+                        "p-3 rounded-lg border text-center transition-all text-sm font-medium",
+                        priority === idx 
+                          ? "border-primary bg-primary/10 text-primary" 
+                          : "border-border hover:border-primary/50 hover:bg-muted/50"
+                      )}
+                    >
+                      {label}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Step 4: Confirmação */}
+          {step === 4 && (
+            <div className="space-y-6">
+              <div>
+                <h4 className="font-semibold text-foreground">Confirmar criação</h4>
+                <p className="text-sm text-muted-foreground">Revise as informações antes de concluir</p>
+              </div>
+              <div className="border rounded-lg divide-y">
+                <div className="p-3 flex justify-between items-center">
+                  <span className="text-sm text-muted-foreground">Tipo</span>
+                  <span className="text-sm font-medium">{selectedType ? typeLabels[selectedType - 1] : '-'}</span>
+                </div>
+                <div className="p-3 flex justify-between items-center">
+                  <span className="text-sm text-muted-foreground">Nome do projeto</span>
+                  <span className="text-sm font-medium">{projectName}</span>
+                </div>
+                <div className="p-3 flex justify-between items-center">
+                  <span className="text-sm text-muted-foreground">Responsável</span>
+                  <span className="text-sm font-medium">{responsible}</span>
+                </div>
+                <div className="p-3 flex justify-between items-center">
+                  <span className="text-sm text-muted-foreground">Período</span>
+                  <span className="text-sm font-medium">
+                    {startDate ? startDate.toLocaleDateString('pt-BR') : '-'}
+                    {endDate && ' até ' + endDate.toLocaleDateString('pt-BR')}
+                  </span>
+                </div>
+                <div className="p-3 flex justify-between items-center">
+                  <span className="text-sm text-muted-foreground">Prioridade</span>
+                  <Badge>{priority !== null ? priorityLabels[priority] : '-'}</Badge>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+
+        <DialogFooter className="flex-row items-center justify-between sm:justify-between">
+          <StepSelector 
+            currentStep={step} 
+            totalSteps={totalSteps} 
+            onStepChange={setStep}
+            stepLabels={stepLabels}
+            canGoToStep={canGoToStep}
+          />
+          <div className="flex gap-2">
+            {step > 1 && (
+              <Button variant="outline" onClick={handleBack}>
+                <ArrowLeft className="h-4 w-4 mr-2" />
+                Voltar
+              </Button>
+            )}
+            {step < totalSteps ? (
+              <Button onClick={handleNext} disabled={!isStepValid(step)}>
+                Avançar
+                <ArrowRight className="h-4 w-4 ml-2" />
+              </Button>
+            ) : (
+              <Button onClick={() => setOpen(false)}>
+                <Check className="h-4 w-4 mr-2" />
+                Criar Projeto
+              </Button>
+            )}
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}`},{title:"DialogBody – Padrão Obrigatório",description:"O componente DialogBody DEVE ser usado para envolver o conteúdo entre DialogHeader e DialogFooter. Ele garante scroll adequado e evita problemas de overflow.",preview:e.jsxs(x,{children:[e.jsx(h,{asChild:!0,children:e.jsx(a,{variant:"outline",children:"Dialog com DialogBody"})}),e.jsxs(g,{children:[e.jsx(v,{showSeparator:!0,children:e.jsx(f,{children:"Exemplo com DialogBody"})}),e.jsx(M,{children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs("p",{className:"text-sm text-muted-foreground",children:["O DialogBody aplica automaticamente as classes para scroll interno:",e.jsx("code",{className:"ml-2 px-1 py-0.5 bg-muted rounded text-xs",children:"flex-1 min-h-0 overflow-auto py-4 px-1 -mx-1"})]}),e.jsxs("div",{className:"p-4 border rounded-lg bg-muted/30",children:[e.jsx("h4",{className:"font-medium mb-2",children:"Benefícios:"}),e.jsxs("ul",{className:"text-sm text-muted-foreground space-y-1",children:[e.jsx("li",{children:"✓ Scroll automático quando conteúdo excede altura"}),e.jsx("li",{children:"✓ Focus rings não são cortados (px-1 -mx-1)"}),e.jsx("li",{children:"✓ Padding consistente (py-4)"}),e.jsx("li",{children:"✓ Flex adequado para dialogs responsivos"})]})]})]})}),e.jsxs(j,{children:[e.jsx(a,{variant:"outline",children:"Cancelar"}),e.jsx(a,{children:"Confirmar"})]})]})]}),code:`// ✅ CORRETO: Usar DialogBody
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogBody, DialogFooter } from 'forlogic-core';
+
+<Dialog>
+  <DialogTrigger asChild>
+    <Button variant="outline">Abrir</Button>
+  </DialogTrigger>
+  <DialogContent>
+    <DialogHeader showSeparator>
+      <DialogTitle>Título</DialogTitle>
+    </DialogHeader>
+    <DialogBody>
+      {/* Seu conteúdo aqui */}
+      <p>Conteúdo com scroll automático</p>
+    </DialogBody>
+    <DialogFooter>
+      <Button variant="outline">Cancelar</Button>
+      <Button>Confirmar</Button>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>
+
+// ❌ ERRADO: Conteúdo direto sem DialogBody
+<Dialog>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Título</DialogTitle>
+    </DialogHeader>
+    {/* Conteúdo direto causa overflow */}
+    <p>Este conteúdo pode vazar do dialog!</p>
+    <DialogFooter>...</DialogFooter>
+  </DialogContent>
+</Dialog>
+
+// ❌ ERRADO: Usando div com classes manuais
+<Dialog>
+  <DialogContent>
+    <DialogHeader>...</DialogHeader>
+    <div className="flex-1 min-h-0 overflow-auto py-4">
+      {/* Funciona, mas DialogBody é mais semântico */}
+    </div>
+    <DialogFooter>...</DialogFooter>
+  </DialogContent>
+</Dialog>`},{title:"Dialog de Confirmação",preview:e.jsxs(x,{children:[e.jsx(h,{asChild:!0,children:e.jsx(a,{variant:"destructive",children:"Deletar Conta"})}),e.jsxs(g,{children:[e.jsx(v,{showSeparator:!0,children:e.jsx(f,{children:"Você tem certeza absoluta?"})}),e.jsx("div",{className:"flex-1 min-h-0 overflow-auto py-4 px-1 -mx-1",children:e.jsx("p",{className:"text-sm text-muted-foreground",children:"Esta ação não pode ser desfeita. Isso irá deletar permanentemente sua conta e remover seus dados de nossos servidores."})}),e.jsxs(j,{children:[e.jsx(a,{variant:"outline",children:"Cancelar"}),e.jsx(a,{variant:"destructive",children:"Sim, deletar"})]})]})]}),code:`<Dialog>
+  <DialogTrigger asChild>
+    <Button variant="destructive">Deletar Conta</Button>
+  </DialogTrigger>
+  <DialogContent>
+    <DialogHeader showSeparator>
+      <DialogTitle>Você tem certeza absoluta?</DialogTitle>
+    </DialogHeader>
+    <div className="flex-1 min-h-0 overflow-auto py-4 px-1 -mx-1">
+      <p className="text-sm text-muted-foreground">
+        Esta ação não pode ser desfeita.
+      </p>
+    </div>
+    <DialogFooter>
+      <Button variant="outline">Cancelar</Button>
+      <Button variant="destructive">Sim, deletar</Button>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>`},{title:"Dialog com Ação Customizada",preview:e.jsxs(x,{children:[e.jsx(h,{asChild:!0,children:e.jsx(a,{variant:"outline",children:"Compartilhar"})}),e.jsxs(g,{className:"sm:max-w-md",children:[e.jsx(v,{showSeparator:!0,children:e.jsx(f,{children:"Compartilhar link"})}),e.jsxs("div",{className:"flex-1 min-h-0 overflow-auto py-4 px-1 -mx-1",children:[e.jsx("p",{className:"text-sm text-muted-foreground mb-4",children:"Qualquer pessoa com o link poderá visualizar este documento."}),e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsxs("div",{className:"grid flex-1 gap-2",children:[e.jsx(d,{htmlFor:"link",className:"sr-only",children:"Link"}),e.jsx(u,{id:"link",defaultValue:"https://ui.shadcn.com/docs/installation",readOnly:!0})]}),e.jsxs(a,{type:"submit",size:"sm",className:"px-3",children:[e.jsx("span",{className:"sr-only",children:"Copiar"}),e.jsx(Se,{className:"h-4 w-4"})]})]})]}),e.jsx(j,{className:"sm:justify-start",children:e.jsx(a,{type:"button",variant:"secondary",children:"Fechar"})})]})]}),code:`<Dialog>
+  <DialogTrigger asChild>
+    <Button variant="outline">Compartilhar</Button>
+  </DialogTrigger>
+  <DialogContent className="sm:max-w-md">
+    <DialogHeader showSeparator>
+      <DialogTitle>Compartilhar link</DialogTitle>
+    </DialogHeader>
+    <div className="flex-1 min-h-0 overflow-auto py-4 px-1 -mx-1">
+      <p className="text-sm text-muted-foreground mb-4">
+        Qualquer pessoa com o link poderá visualizar.
+      </p>
+      <div className="flex items-center space-x-2">
+        <Input defaultValue="https://..." readOnly />
+        <Button size="sm">
+          <Copy className="h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  </DialogContent>
+</Dialog>`},{title:"AlertDialog - Exclusão com Confirmação",description:'AlertDialog para ações destrutivas. Oferece duas variações: confirmação por palavra-chave ("EXCLUIR") ou por senha do usuário.',preview:e.jsx(na,{}),code:`// Variação 1: Confirmação por palavra-chave
+function AlertDialogWithConfirmation() {
+  const [open, setOpen] = useState(false);
+  const [confirmText, setConfirmText] = useState('');
+  const confirmPhrase = 'EXCLUIR';
+
+  const handleOpenChange = (isOpen: boolean) => {
+    setOpen(isOpen);
+    if (!isOpen) setConfirmText('');
+  };
+
+  return (
+    <AlertDialog open={open} onOpenChange={handleOpenChange}>
+      <AlertDialogTrigger asChild>
+        <Button variant="destructive">Excluir Permanentemente</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader className="border-b pb-4">
+          <AlertDialogTitle>Exclusão com Confirmação</AlertDialogTitle>
+        </AlertDialogHeader>
+        <div className="py-4 space-y-4">
+          <div className="flex items-start gap-3">
+            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-destructive/10 shrink-0">
+              <AlertCircle className="h-5 w-5 text-destructive" />
+            </div>
+            <div>
+              <h4 className="font-semibold text-foreground">Excluir permanentemente?</h4>
+              <p className="text-sm text-muted-foreground">
+                Esta ação não pode ser desfeita. Isso excluirá permanentemente o registro
+                e removerá todos os dados associados de nossos servidores.
+              </p>
+            </div>
+          </div>
+          <div>
+            <Label htmlFor="confirm-text" className="text-sm">
+              Digite <span className="font-semibold text-destructive">{confirmPhrase}</span> para confirmar:
+            </Label>
+            <Input
+              id="confirm-text"
+              className="mt-2"
+              placeholder={confirmPhrase}
+              value={confirmText}
+              onChange={(e) => setConfirmText(e.target.value)}
+            />
+          </div>
+        </div>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancelar</AlertDialogCancel>
+          <Button 
+            variant="destructive" 
+            disabled={confirmText !== confirmPhrase}
+            onClick={() => setOpen(false)}
+          >
+            Excluir Permanentemente
+          </Button>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
+
+// Variação 2: Confirmação por senha do usuário
+function AlertDialogWithPasswordConfirmation() {
+  const [open, setOpen] = useState(false);
+  const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+  
+  const handleOpenChange = (isOpen: boolean) => {
+    setOpen(isOpen);
+    if (!isOpen) {
+      setPassword('');
+      setShowPassword(false);
+    }
+  };
+  
+  const isPasswordValid = password.length >= 6;
+  
+  return (
+    <AlertDialog open={open} onOpenChange={handleOpenChange}>
+      <AlertDialogTrigger asChild>
+        <Button variant="destructive">Excluir com Senha</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader className="border-b pb-4">
+          <AlertDialogTitle>Confirmação de Segurança</AlertDialogTitle>
+        </AlertDialogHeader>
+        <div className="py-4 space-y-4">
+          <div className="flex items-start gap-3">
+            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-destructive/10 shrink-0">
+              <AlertCircle className="h-5 w-5 text-destructive" />
+            </div>
+            <div>
+              <h4 className="font-semibold text-foreground">Confirmar exclusão</h4>
+              <p className="text-sm text-muted-foreground">
+                Para confirmar esta ação, digite sua senha de acesso.
+              </p>
+            </div>
+          </div>
+          <div>
+            <Label htmlFor="password-confirm" className="text-sm">
+              Digite sua senha para confirmar:
+            </Label>
+            <div className="relative mt-2">
+              <Input
+                id="password-confirm"
+                type={showPassword ? 'text' : 'password'}
+                placeholder="••••••••"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+              />
+              <Button
+                variant="ghost"
+                size="icon"
+                className="absolute right-0 top-0 h-full px-3 hover:bg-transparent"
+                onClick={() => setShowPassword(!showPassword)}
+              >
+                {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+              </Button>
+            </div>
+          </div>
+        </div>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancelar</AlertDialogCancel>
+          <Button 
+            variant="destructive" 
+            disabled={!isPasswordValid}
+            onClick={() => setOpen(false)}
+          >
+            Confirmar Exclusão
+          </Button>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}`},{title:"Sheet - Painel Lateral Direito",description:"Sheet abre um painel lateral para edição ou detalhes.",preview:e.jsxs(E,{children:[e.jsx(z,{asChild:!0,children:e.jsx(a,{variant:"outline",children:"Abrir Sheet"})}),e.jsxs(q,{children:[e.jsx(R,{showSeparator:!0,children:e.jsx(V,{children:"Editar perfil"})}),e.jsx("div",{className:"flex-1 min-h-0 overflow-auto py-4 px-1 -mx-1",children:e.jsxs("div",{className:"grid gap-4",children:[e.jsxs("div",{className:"grid grid-cols-4 items-center gap-4",children:[e.jsx(d,{htmlFor:"name",className:"text-right",children:"Nome"}),e.jsx(u,{id:"name",defaultValue:"Pedro Duarte",className:"col-span-3"})]}),e.jsxs("div",{className:"grid grid-cols-4 items-center gap-4",children:[e.jsx(d,{htmlFor:"username",className:"text-right",children:"Username"}),e.jsx(u,{id:"username",defaultValue:"@peduarte",className:"col-span-3"})]})]})}),e.jsx(we,{children:e.jsx(ye,{asChild:!0,children:e.jsx(a,{type:"submit",children:"Salvar alterações"})})})]})]}),code:`import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetFooter,
+  SheetTrigger,
+} from 'forlogic-core';
+
+<Sheet>
+  <SheetTrigger asChild>
+    <Button variant="outline">Abrir</Button>
+  </SheetTrigger>
+  <SheetContent>
+    <SheetHeader showSeparator>
+      <SheetTitle>Editar perfil</SheetTitle>
+    </SheetHeader>
+    <div className="flex-1 min-h-0 overflow-auto py-4 px-1 -mx-1">
+      <div className="grid gap-4">
+        <div className="grid grid-cols-4 items-center gap-4">
+          <Label htmlFor="name" className="text-right">Nome</Label>
+          <Input id="name" className="col-span-3" />
+        </div>
+      </div>
+    </div>
+    <SheetFooter>
+      <SheetClose asChild>
+        <Button type="submit">Salvar</Button>
+      </SheetClose>
+    </SheetFooter>
+  </SheetContent>
+</Sheet>`},{title:"Sheet – Lado Esquerdo",description:"Sheet abre do lado esquerdo da tela, ideal para menus de navegação.",preview:e.jsxs(E,{children:[e.jsx(z,{asChild:!0,children:e.jsx(a,{variant:"outline",children:"Esquerda"})}),e.jsxs(q,{side:"left",children:[e.jsx(R,{showSeparator:!0,children:e.jsx(V,{children:"Menu Lateral"})}),e.jsx("div",{className:"flex-1 min-h-0 overflow-auto py-4 px-1 -mx-1",children:e.jsx("p",{className:"text-sm text-muted-foreground",children:'Conteúdo do painel esquerdo. Use side="left" para posicionar.'})})]})]}),code:`<Sheet>
+  <SheetTrigger asChild>
+    <Button variant="outline">Esquerda</Button>
+  </SheetTrigger>
+  <SheetContent side="left">
+    <SheetHeader showSeparator>
+      <SheetTitle>Menu Lateral</SheetTitle>
+    </SheetHeader>
+    <div className="py-4">Conteúdo do painel esquerdo</div>
+  </SheetContent>
+</Sheet>`},{title:"Sheet – Topo",description:"Sheet abre do topo da tela, ideal para notificações ou buscas.",preview:e.jsxs(E,{children:[e.jsx(z,{asChild:!0,children:e.jsx(a,{variant:"outline",children:"Topo"})}),e.jsxs(q,{side:"top",children:[e.jsx(R,{showSeparator:!0,children:e.jsx(V,{children:"Notificações"})}),e.jsx("div",{className:"flex-1 min-h-0 overflow-auto py-4 px-1 -mx-1",children:e.jsx("p",{className:"text-sm text-muted-foreground",children:'Conteúdo do painel superior. Use side="top" para posicionar.'})})]})]}),code:`<Sheet>
+  <SheetTrigger asChild>
+    <Button variant="outline">Topo</Button>
+  </SheetTrigger>
+  <SheetContent side="top">
+    <SheetHeader showSeparator>
+      <SheetTitle>Notificações</SheetTitle>
+    </SheetHeader>
+    <div className="py-4">Conteúdo do painel superior</div>
+  </SheetContent>
+</Sheet>`},{title:"Sheet – Inferior",description:"Painel que desliza da parte inferior da tela. Baseado na biblioteca vaul, suporta gestos de swipe. Ideal para mobile e ações secundárias.",preview:e.jsxs(Me,{children:[e.jsx(Ue,{asChild:!0,children:e.jsx(a,{variant:"outline",children:"Inferior (Drawer)"})}),e.jsxs(Ge,{children:[e.jsxs(Xe,{children:[e.jsx(Qe,{children:"Editar Perfil"}),e.jsx(Je,{children:"Faça alterações no seu perfil aqui. Clique em salvar quando terminar."})]}),e.jsx("div",{className:"p-4",children:e.jsx("p",{className:"text-sm text-muted-foreground",children:"Conteúdo do drawer. Suporta gestos de swipe para fechar."})}),e.jsxs($e,{children:[e.jsx(a,{children:"Salvar"}),e.jsx(Ke,{asChild:!0,children:e.jsx(a,{variant:"outline",children:"Cancelar"})})]})]})]}),code:`// Sheet Inferior usa Drawer (biblioteca vaul) para gestos de swipe
+import { 
+  Drawer, DrawerTrigger, DrawerContent, DrawerHeader, 
+  DrawerTitle, DrawerDescription, DrawerFooter, DrawerClose 
+} from "forlogic-core";
+
+<Drawer>
+  <DrawerTrigger asChild>
+    <Button variant="outline">Abrir</Button>
+  </DrawerTrigger>
+  <DrawerContent>
+    <DrawerHeader>
+      <DrawerTitle>Título</DrawerTitle>
+      <DrawerDescription>Descrição opcional</DrawerDescription>
+    </DrawerHeader>
+    <div className="p-4">Conteúdo</div>
+    <DrawerFooter>
+      <Button>Salvar</Button>
+      <DrawerClose asChild>
+        <Button variant="outline">Cancelar</Button>
+      </DrawerClose>
+    </DrawerFooter>
+  </DrawerContent>
+</Drawer>`}],props:[{name:"variant",type:'"informative" | "form" | "destructive"',default:'"informative"',description:"Variante semântica que controla o comportamento de fechamento. informative: fecha livremente. form: bloqueia clique externo, confirma se isDirty. destructive: exige ação explícita nos botões."},{name:"isDirty",type:"boolean",default:"false",description:'Quando variant="form", exibe window.confirm antes de fechar via ESC ou botão X se houver alterações não salvas.'},{name:"size",type:'"sm" | "md" | "lg"',default:'"md"',description:"Tamanho responsivo do dialog. sm: confirmações rápidas, md: formulários padrão, lg: tabelas e conteúdo extenso."},{name:"customWidth",type:"string",default:"-",description:'Sobrescreve a largura do tamanho selecionado (ex: "600px", "50vw").'},{name:"customMinWidth",type:"string",default:"-",description:"Sobrescreve a largura mínima do tamanho selecionado."},{name:"customMaxWidth",type:"string",default:"-",description:"Sobrescreve a largura máxima do tamanho selecionado."},{name:"customHeight",type:"string",default:"-",description:"Sobrescreve a altura do tamanho selecionado."},{name:"customMinHeight",type:"string",default:"-",description:"Sobrescreve a altura mínima do tamanho selecionado."},{name:"customMaxHeight",type:"string",default:"-",description:"Sobrescreve a altura máxima do tamanho selecionado."},{name:"open",type:"boolean",default:"-",description:"O estado controlado de abertura do dialog."},{name:"onOpenChange",type:"(open: boolean) => void",default:"-",description:"Callback quando o estado de abertura muda."},{name:"modal",type:"boolean",default:"true",description:"Se o dialog deve bloquear interação com elementos fora."},{name:"showSeparator",type:"boolean",default:"false",description:"Exibe um separador abaixo do Header (Dialog/Sheet)."},{name:"DialogBody",type:"component",default:"-",description:"OBRIGATÓRIO para envolver conteúdo entre Header e Footer. Aplica flex-1 min-h-0 overflow-auto py-4 px-1 -mx-1 automaticamente."},{name:"className",type:"string",default:"-",description:"Classes CSS adicionais para Content."},{name:"Sheet.side",type:'"top" | "right" | "bottom" | "left"',default:'"right"',description:"Lado da tela onde o Sheet abre (exceto inferior que usa Drawer)."},{name:"Drawer (Sheet Inferior)",type:"component",default:"-",description:"Painel inferior baseado em vaul. Suporta gestos de swipe."},{name:"shouldScaleBackground",type:"boolean",default:"true",description:"Escala o background ao abrir (Sheet Inferior/Drawer)."}],notes:["⚠️ OBRIGATÓRIO: Use DialogBody para envolver conteúdo entre Header e Footer. Evita problemas de overflow!","🔒 Variantes semânticas: informative (fecha livremente), form (bloqueia clique externo, confirma isDirty), destructive (exige ação explícita).","Tamanhos responsivos: sm (30vw, 320-480px), md (50vw, 480-720px), lg (85vw, 720-1440px).","Use props custom* para sobrescrever dimensões específicas quando necessário.",'variant="form" com isDirty=true exibe window.confirm ao tentar fechar via ESC ou botão X.','variant="destructive" oculta o botão X e bloqueia ESC — fechamento apenas por botões no Footer.',"AlertDialog: requer ação explícita (não fecha com clique fora). Use para ações destrutivas com confirmação por texto/senha.","Sheet: painel que desliza da borda da tela (left, right, top). Ideal para formulários e detalhes.","Sheet Inferior (Drawer): usa biblioteca vaul, suporta gestos de swipe. Prefira para mobile.","Use DialogHeader/SheetHeader, DialogBody e DialogFooter/SheetFooter para estruturar.","showSeparator adiciona linha visual abaixo do Header."],accessibility:["Foco capturado automaticamente (focus trap)","Esc fecha dialog/sheet (comportamento depende da variant)","Clique fora fecha dialog/sheet (bloqueado em variant form/destructive)","Tab navega entre elementos focáveis",'aria-modal="true" aplicado automaticamente','role="dialog" ou "alertdialog" apropriado',"aria-labelledby vinculado ao Title","Compatível com leitores de tela (NVDA, VoiceOver, JAWS)"]})}export{Da as DialogDoc};