forlogic-core 1.16.3 → 1.16.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (134) hide show
  1. package/README.md +113 -109
  2. package/dist/README.md +113 -109
  3. package/dist/components/modules/AccessDeniedDialog.d.ts +41 -0
  4. package/dist/components/modules/ModuleAccessGuard.d.ts +3 -1
  5. package/dist/components/modules/ModuleOfferContent.d.ts +20 -0
  6. package/dist/components/modules/ModulesContent.d.ts +15 -0
  7. package/dist/components/modules/ModulesFooterCards.d.ts +6 -0
  8. package/dist/components/modules/index.d.ts +8 -0
  9. package/dist/components/modules/types.d.ts +2 -0
  10. package/dist/index.css +1 -1
  11. package/dist/index.css.map +1 -1
  12. package/dist/index.esm.js +1 -1
  13. package/dist/index.js +1 -1
  14. package/docs/DESIGN_SYSTEM.md +17 -32
  15. package/package.json +4 -2
  16. package/dist/assets/AccordionDoc-BnfxyOi9.js +0 -31
  17. package/dist/assets/ActionButtonDoc-b4F_J8gn.js +0 -47
  18. package/dist/assets/AlertDoc-PkiHguSJ.js +0 -37
  19. package/dist/assets/AppHeaderDoc-CsFMZGV0.js +0 -67
  20. package/dist/assets/AppSidebarDoc-Bg71N-zq.js +0 -196
  21. package/dist/assets/AuthDoc-DDm57y_J.js +0 -192
  22. package/dist/assets/AvatarDoc-C6wiZIZR.js +0 -11
  23. package/dist/assets/BadgeDoc-Bsg7cfm0.js +0 -36
  24. package/dist/assets/BaseFormDoc-DeIlV273.js +0 -169
  25. package/dist/assets/BodyContentDoc-Q3DGvyN9.js +0 -83
  26. package/dist/assets/BreadcrumbDoc-ChsVFjMF.js +0 -75
  27. package/dist/assets/ButtonDoc-C7Q31Bh3.js +0 -41
  28. package/dist/assets/ButtonGroupDoc-Bn5vhjBq.js +0 -7
  29. package/dist/assets/CalendarDoc-iVjNyxyr.js +0 -81
  30. package/dist/assets/CardDoc-D511dll7.js +0 -49
  31. package/dist/assets/ChartDoc-CQyYOEHL.js +0 -111
  32. package/dist/assets/CheckboxDoc-Cjsy4XAq.js +0 -55
  33. package/dist/assets/ColorPickerDoc-hnYJUWpF.js +0 -10
  34. package/dist/assets/ColorsFoundationDoc-B8Z4tAyZ.js +0 -13
  35. package/dist/assets/ComboTreeDoc-ChEbW4a3.js +0 -21
  36. package/dist/assets/ComboboxDoc-CHWeGE_F.js +0 -134
  37. package/dist/assets/ComponentDocTemplate-BtOCnlM2.js +0 -1
  38. package/dist/assets/ContextMenuDoc-C3mFO_Yx.js +0 -182
  39. package/dist/assets/ContextsDoc-ChEbQxom.js +0 -184
  40. package/dist/assets/CreateCrudPageDoc-C9tXisCF.js +0 -106
  41. package/dist/assets/CrudActionBarDoc-Cp1L4gpO.js +0 -112
  42. package/dist/assets/CrudGridDoc-D-kSFBAQ.js +0 -85
  43. package/dist/assets/CrudOverviewDoc-CeLBwg-B.js +0 -14
  44. package/dist/assets/CrudPrimitivesDoc-B2u1vZog.js +0 -164
  45. package/dist/assets/CrudTableDoc-CvV-II_X.js +0 -95
  46. package/dist/assets/DataListDoc-BLRii0jB.js +0 -13
  47. package/dist/assets/DesignSystemHome-TE0Ubaup.js +0 -1
  48. package/dist/assets/DialogDoc--LC5Jvat.js +0 -981
  49. package/dist/assets/DropdownMenuDoc-oPlEriRY.js +0 -175
  50. package/dist/assets/EmptyStateDoc-rNqfWKok.js +0 -35
  51. package/dist/assets/EnvironmentsDoc-CT7l5s2u.js +0 -96
  52. package/dist/assets/ErrorBoundaryDoc-rPHOUygA.js +0 -111
  53. package/dist/assets/ExampleCard-DfuMYM6E.js +0 -1
  54. package/dist/assets/FormDoc-B0L_QaCT.js +0 -81
  55. package/dist/assets/FoundationOverview-Dbb8rBsU.js +0 -1
  56. package/dist/assets/GridDoc-ifcGA2Yw.js +0 -28
  57. package/dist/assets/HooksDoc-CUOT_3Du.js +0 -665
  58. package/dist/assets/HoverCardDoc-CdTU2QkI.js +0 -31
  59. package/dist/assets/I18nDoc-CMEvFqsz.js +0 -232
  60. package/dist/assets/IconPickerDoc-DF9hEwnJ.js +0 -10
  61. package/dist/assets/IconsFoundationDoc-D4Y0wKbm.js +0 -33
  62. package/dist/assets/InputDoc-d_IL4dsq.js +0 -211
  63. package/dist/assets/LabelDoc-Dr64ISiJ.js +0 -42
  64. package/dist/assets/LeadershipDoc-BnrTuaeV.js +0 -416
  65. package/dist/assets/MediaDoc-CLuVprAr.js +0 -459
  66. package/dist/assets/MenubarDoc-CW7L4QJ4.js +0 -165
  67. package/dist/assets/ModulesDialogDoc-CUb_g4X-.js +0 -71
  68. package/dist/assets/NavigationMenuDoc-Csc0U6bV.js +0 -116
  69. package/dist/assets/OnboardingDialogDoc-3RtjNH1O.js +0 -55
  70. package/dist/assets/PaginationDoc-BGurD4xQ.js +0 -27
  71. package/dist/assets/PaginationDoc-DqFyou6O.js +0 -98
  72. package/dist/assets/PlacesDoc-Dyx8gsqb.js +0 -226
  73. package/dist/assets/PopoverDoc-DHF-ItUX.js +0 -64
  74. package/dist/assets/ProgressDoc-DXKV-fkI.js +0 -29
  75. package/dist/assets/QualiexUserFieldDoc-BbP7w-Pu.js +0 -149
  76. package/dist/assets/RadioGroupDoc-D845uweM.js +0 -57
  77. package/dist/assets/RadiusDoc-vN4tTsay.js +0 -7
  78. package/dist/assets/RequiredFieldsCounterDoc-TzR9r-U9.js +0 -58
  79. package/dist/assets/ResizableDoc-Bkfz_25O.js +0 -104
  80. package/dist/assets/RichTextEditorDoc-BUQrg7M8.js +0 -24
  81. package/dist/assets/ScrollAreaDoc-B6ODYHMX.js +0 -28
  82. package/dist/assets/SecurityDoc-Chbt6w1s.js +0 -204
  83. package/dist/assets/SelectDoc-BhcpBIAO.js +0 -80
  84. package/dist/assets/SeparatorDoc-C3fhatb0.js +0 -4
  85. package/dist/assets/ServicesDoc-_uao-HA_.js +0 -308
  86. package/dist/assets/ShadowsDoc-DpkO_TZQ.js +0 -9
  87. package/dist/assets/SignDoc-BJtnoT6I.js +0 -66
  88. package/dist/assets/SkeletonDoc-BZS07PJh.js +0 -54
  89. package/dist/assets/SliderDoc-D2ApV3XT.js +0 -41
  90. package/dist/assets/SpacingDoc-PNrU24B2.js +0 -12
  91. package/dist/assets/SplitButtonDoc-D5tUF2Ja.js +0 -53
  92. package/dist/assets/StepSelectorDoc-Cj0ALYar.js +0 -41
  93. package/dist/assets/SwitchDoc-DtsT8oh_.js +0 -56
  94. package/dist/assets/TableDoc-BC-jQnXu.js +0 -128
  95. package/dist/assets/TableOfContents-DBMJMbI4.js +0 -1
  96. package/dist/assets/TabsDoc-DtXJ0xY5.js +0 -42
  97. package/dist/assets/TextareaDoc-nuW5tqBQ.js +0 -46
  98. package/dist/assets/ToastDoc-D1aX5zda.js +0 -157
  99. package/dist/assets/ToggleDoc-ILass4CS.js +0 -51
  100. package/dist/assets/TooltipDoc-lPbdWe_9.js +0 -58
  101. package/dist/assets/TruncatedCellDoc-DOAzbF2F.js +0 -12
  102. package/dist/assets/TypographyFoundationDoc-3ZD-rQZw.js +0 -7
  103. package/dist/assets/UtilitiesDoc-D7lkYhuz.js +0 -145
  104. package/dist/assets/blocks-Jy49RoqJ.js +0 -1
  105. package/dist/assets/calendar-days-Cvf2zLJl.js +0 -1
  106. package/dist/assets/circle-plus-MnG9kjyq.js +0 -1
  107. package/dist/assets/circle-x-B9ouupla.js +0 -1
  108. package/dist/assets/crown-BweN5jpI.js +0 -1
  109. package/dist/assets/date-picker-ttyYeYvC.js +0 -1
  110. package/dist/assets/disabled-menu-item-WlpPOqxg.js +0 -1
  111. package/dist/assets/drawer-DvU6_eK5.js +0 -3
  112. package/dist/assets/file-pen-line-C0VV-QjF.js +0 -1
  113. package/dist/assets/git-branch-DCjGGwvF.js +0 -1
  114. package/dist/assets/globe-BdFDFP_k.js +0 -1
  115. package/dist/assets/grip-vertical-CgXp0oI-.js +0 -1
  116. package/dist/assets/hash-BAYi_wfk.js +0 -1
  117. package/dist/assets/index-BtX5DZqb.js +0 -310
  118. package/dist/assets/index-C1So5Sai.css +0 -1
  119. package/dist/assets/life-buoy-BydIgTyJ.js +0 -1
  120. package/dist/assets/lucide-react-ZIMhRYmb.js +0 -1
  121. package/dist/assets/monitor-B6txWJPg.js +0 -1
  122. package/dist/assets/package-DNe3FsCh.js +0 -1
  123. package/dist/assets/pen-CzTmQ16z.js +0 -1
  124. package/dist/assets/pin-CJJgLEBz.js +0 -1
  125. package/dist/assets/radio-group-Btv_BY60.js +0 -1
  126. package/dist/assets/server-XQDXtrjm.js +0 -1
  127. package/dist/assets/share-2-Dz_89MJb.js +0 -1
  128. package/dist/assets/step-selector-D0_Y1dow.js +0 -1
  129. package/dist/assets/text-align-start-WsHo7CNJ.js +0 -1
  130. package/dist/assets/trash-CeK-mWnM.js +0 -1
  131. package/dist/assets/useMockCrud-RV9z9n5x.js +0 -1
  132. package/dist/assets/user-check-CrbWcnPN.js +0 -1
  133. package/dist/assets/user-plus-Dce9DbqQ.js +0 -1
  134. package/dist/index.html +0 -35
@@ -1,128 +0,0 @@
1
- import{j as e,ar as t,as as R,at as i,au as l,av as s,aw as n,ax as a,r,ay as v,az as o}from"./index-BtX5DZqb.js";import{C as f}from"./ComponentDocTemplate-BtOCnlM2.js";import"./ExampleCard-DfuMYM6E.js";import"./TableOfContents-DBMJMbI4.js";function S(){const[c,H]=r.useState(150),[m,g]=r.useState(200),[T,b]=r.useState(null),x=d=>h=>{h.preventDefault(),b(d);const w=h.clientX,u=d===1?c:m,j=N=>{const C=N.clientX-w;d===1?H(Math.max(80,u+C)):g(Math.max(100,u+C))},p=()=>{b(null),document.removeEventListener("mousemove",j),document.removeEventListener("mouseup",p)};document.addEventListener("mousemove",j),document.addEventListener("mouseup",p)};return e.jsx("div",{className:"rounded-md border overflow-hidden",children:e.jsxs(t,{children:[e.jsx(i,{children:e.jsxs(l,{children:[e.jsxs(s,{style:{width:c},className:"relative",children:["Nome",e.jsx(v,{direction:"horizontal",onMouseDown:x(1),isDragging:T===1})]}),e.jsxs(s,{style:{width:m},className:"relative",children:["Email",e.jsx(v,{direction:"horizontal",onMouseDown:x(2),isDragging:T===2})]}),e.jsx(s,{children:"Status"})]})}),e.jsxs(n,{children:[e.jsxs(l,{children:[e.jsx(a,{children:"João Silva"}),e.jsx(a,{children:"joao.silva@example.com"}),e.jsx(a,{children:"Ativo"})]}),e.jsxs(l,{children:[e.jsx(a,{children:"Maria Santos"}),e.jsx(a,{children:"maria.santos@example.com"}),e.jsx(a,{children:"Ativo"})]})]})]})})}function M(){return e.jsx("div",{className:"rounded-md border overflow-hidden",children:e.jsxs(t,{children:[e.jsx(i,{children:e.jsxs(l,{children:[e.jsx(s,{className:"w-[100px]",children:"ID"}),e.jsx(s,{className:"w-[150px]",children:"Nome"}),e.jsx(s,{className:"w-[200px]",children:"Descrição"})]})}),e.jsxs(n,{children:[e.jsxs(l,{children:[e.jsx(a,{children:"001"}),e.jsx(a,{children:e.jsx(o,{children:"João da Silva Santos"})}),e.jsx(a,{children:e.jsx(o,{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore."})})]}),e.jsxs(l,{children:[e.jsx(a,{children:"002"}),e.jsx(a,{children:e.jsx(o,{children:"Maria"})}),e.jsx(a,{children:e.jsx(o,{children:"Descrição curta"})})]}),e.jsxs(l,{children:[e.jsx(a,{children:"003"}),e.jsx(a,{children:e.jsx(o,{children:"Pedro Henrique Costa Oliveira"})}),e.jsx(a,{children:e.jsx(o,{children:"Esta é uma descrição muito longa que será truncada automaticamente e mostrará um tooltip quando o usuário passar o mouse sobre o texto."})})]})]})]})})}function L(){return e.jsx(f,{title:"Table",description:"Uma tabela semântica para exibir dados tabulares. Inclui TableResizeHandle para redimensionamento de colunas e TruncatedCell para texto truncado com tooltip automático.",component:e.jsxs(t,{children:[e.jsx(i,{children:e.jsxs(l,{children:[e.jsx(s,{children:"Nome"}),e.jsx(s,{children:"Status"})]})}),e.jsx(n,{children:e.jsxs(l,{children:[e.jsx(a,{children:"João Silva"}),e.jsx(a,{children:"Ativo"})]})})]}),usage:`import {
2
- Table,
3
- TableBody,
4
- TableCaption,
5
- TableCell,
6
- TableHead,
7
- TableHeader,
8
- TableRow,
9
- TableResizeHandle,
10
- TruncatedCell,
11
- } from "forlogic-core"
12
-
13
- <Table>
14
- <TableCaption>Lista de usuários</TableCaption>
15
- <TableHeader>
16
- <TableRow>
17
- <TableHead>Nome</TableHead>
18
- <TableHead>Email</TableHead>
19
- <TableHead>Status</TableHead>
20
- </TableRow>
21
- </TableHeader>
22
- <TableBody>
23
- <TableRow>
24
- <TableCell>João Silva</TableCell>
25
- <TableCell>joao@example.com</TableCell>
26
- <TableCell>Ativo</TableCell>
27
- </TableRow>
28
- </TableBody>
29
- </Table>`,examples:[{title:"Tabela Básica",preview:e.jsxs(t,{children:[e.jsx(R,{children:"Lista de usuários recentes"}),e.jsx(i,{children:e.jsxs(l,{children:[e.jsx(s,{className:"w-[100px]",children:"ID"}),e.jsx(s,{children:"Nome"}),e.jsx(s,{children:"Email"}),e.jsx(s,{className:"text-right",children:"Status"})]})}),e.jsxs(n,{children:[e.jsxs(l,{children:[e.jsx(a,{className:"font-medium",children:"001"}),e.jsx(a,{children:"João Silva"}),e.jsx(a,{children:"joao@example.com"}),e.jsx(a,{className:"text-right",children:"Ativo"})]}),e.jsxs(l,{children:[e.jsx(a,{className:"font-medium",children:"002"}),e.jsx(a,{children:"Maria Santos"}),e.jsx(a,{children:"maria@example.com"}),e.jsx(a,{className:"text-right",children:"Ativo"})]}),e.jsxs(l,{children:[e.jsx(a,{className:"font-medium",children:"003"}),e.jsx(a,{children:"Pedro Costa"}),e.jsx(a,{children:"pedro@example.com"}),e.jsx(a,{className:"text-right",children:"Inativo"})]})]})]}),code:`<Table>
30
- <TableCaption>Lista de usuários recentes</TableCaption>
31
- <TableHeader>
32
- <TableRow>
33
- <TableHead className="w-[100px]">ID</TableHead>
34
- <TableHead>Nome</TableHead>
35
- <TableHead>Email</TableHead>
36
- <TableHead className="text-right">Status</TableHead>
37
- </TableRow>
38
- </TableHeader>
39
- <TableBody>
40
- <TableRow>
41
- <TableCell className="font-medium">001</TableCell>
42
- <TableCell>João Silva</TableCell>
43
- <TableCell>joao@example.com</TableCell>
44
- <TableCell className="text-right">Ativo</TableCell>
45
- </TableRow>
46
- </TableBody>
47
- </Table>`},{title:"TableResizeHandle - Colunas Redimensionáveis",description:"Arraste a borda entre as colunas para redimensionar.",preview:e.jsx(S,{}),code:`const [colWidth, setColWidth] = useState(150);
48
- const [isDragging, setIsDragging] = useState(false);
49
-
50
- const handleMouseDown = (e: React.MouseEvent) => {
51
- setIsDragging(true);
52
- const startX = e.clientX;
53
- const startWidth = colWidth;
54
-
55
- const handleMouseMove = (moveEvent: MouseEvent) => {
56
- const delta = moveEvent.clientX - startX;
57
- setColWidth(Math.max(80, startWidth + delta));
58
- };
59
-
60
- const handleMouseUp = () => {
61
- setIsDragging(false);
62
- document.removeEventListener('mousemove', handleMouseMove);
63
- document.removeEventListener('mouseup', handleMouseUp);
64
- };
65
-
66
- document.addEventListener('mousemove', handleMouseMove);
67
- document.addEventListener('mouseup', handleMouseUp);
68
- };
69
-
70
- <Table>
71
- <TableHeader>
72
- <TableRow>
73
- <TableHead style={{ width: colWidth }} className="relative">
74
- Nome
75
- <TableResizeHandle
76
- direction="horizontal"
77
- onMouseDown={handleMouseDown}
78
- isDragging={isDragging}
79
- />
80
- </TableHead>
81
- <TableHead>Email</TableHead>
82
- </TableRow>
83
- </TableHeader>
84
- <TableBody>
85
- <TableRow>
86
- <TableCell>João Silva</TableCell>
87
- <TableCell>joao@example.com</TableCell>
88
- </TableRow>
89
- </TableBody>
90
- </Table>`},{title:"TruncatedCell - Texto Truncado com Tooltip",description:"Passe o mouse sobre células com texto longo para ver o conteúdo completo.",preview:e.jsx(M,{}),code:`<Table>
91
- <TableHeader>
92
- <TableRow>
93
- <TableHead className="w-[100px]">ID</TableHead>
94
- <TableHead className="w-[150px]">Nome</TableHead>
95
- <TableHead className="w-[200px]">Descrição</TableHead>
96
- </TableRow>
97
- </TableHeader>
98
- <TableBody>
99
- <TableRow>
100
- <TableCell>001</TableCell>
101
- <TableCell>
102
- <TruncatedCell>João da Silva Santos</TruncatedCell>
103
- </TableCell>
104
- <TableCell>
105
- <TruncatedCell>
106
- Lorem ipsum dolor sit amet, consectetur adipiscing elit...
107
- </TruncatedCell>
108
- </TableCell>
109
- </TableRow>
110
- </TableBody>
111
- </Table>`},{title:"Tabela com Valores Monetários",preview:e.jsxs(t,{children:[e.jsx(i,{children:e.jsxs(l,{children:[e.jsx(s,{children:"Fatura"}),e.jsx(s,{children:"Status"}),e.jsx(s,{children:"Método"}),e.jsx(s,{className:"text-right",children:"Valor"})]})}),e.jsxs(n,{children:[e.jsxs(l,{children:[e.jsx(a,{className:"font-medium",children:"INV001"}),e.jsx(a,{children:"Pago"}),e.jsx(a,{children:"Cartão de Crédito"}),e.jsx(a,{className:"text-right",children:"R$ 250,00"})]}),e.jsxs(l,{children:[e.jsx(a,{className:"font-medium",children:"INV002"}),e.jsx(a,{children:"Pendente"}),e.jsx(a,{children:"PayPal"}),e.jsx(a,{className:"text-right",children:"R$ 150,00"})]}),e.jsxs(l,{children:[e.jsx(a,{className:"font-medium",children:"INV003"}),e.jsx(a,{children:"Não Pago"}),e.jsx(a,{children:"Transferência"}),e.jsx(a,{className:"text-right",children:"R$ 350,00"})]})]})]}),code:`<Table>
112
- <TableHeader>
113
- <TableRow>
114
- <TableHead>Fatura</TableHead>
115
- <TableHead>Status</TableHead>
116
- <TableHead>Método</TableHead>
117
- <TableHead className="text-right">Valor</TableHead>
118
- </TableRow>
119
- </TableHeader>
120
- <TableBody>
121
- <TableRow>
122
- <TableCell className="font-medium">INV001</TableCell>
123
- <TableCell>Pago</TableCell>
124
- <TableCell>Cartão de Crédito</TableCell>
125
- <TableCell className="text-right">R$ 250,00</TableCell>
126
- </TableRow>
127
- </TableBody>
128
- </Table>`}],props:[{name:"className",type:"string",default:"-",description:"Classes CSS adicionais para a tabela."},{name:"TableResizeHandle.direction",type:'"horizontal" | "vertical"',default:"-",description:"Direção do redimensionamento (colunas ou linhas)."},{name:"TableResizeHandle.onMouseDown",type:"(e: MouseEvent) => void",default:"-",description:"Handler para iniciar o redimensionamento."},{name:"TableResizeHandle.isDragging",type:"boolean",default:"false",description:"Se o handle está sendo arrastado (altera visual)."},{name:"TruncatedCell.children",type:"ReactNode",default:"-",description:"Conteúdo a ser truncado."},{name:"TruncatedCell.className",type:"string",default:"-",description:"Classes CSS adicionais."}],notes:["TableResizeHandle deve ser posicionado dentro de um TableHead com position: relative.","TruncatedCell detecta automaticamente se o texto está truncado e exibe tooltip apenas quando necessário.","Use larguras fixas (w-[Xpx]) nos TableHead para melhor controle do layout.","TruncatedCell usa CSS text-overflow: ellipsis internamente."],accessibility:["Usa elementos HTML semânticos de tabela","Suporta navegação por teclado","TableCaption fornece contexto para leitores de tela","TableHeader define cabeçalhos de coluna apropriados","TruncatedCell mostra tooltip acessível com conteúdo completo","TableResizeHandle suporta interação via teclado","Funciona com leitores de tela"]})}export{L as TableDoc};
@@ -1 +0,0 @@
1
- import{j as e,bz as r}from"./index-BtX5DZqb.js";function a({items:l}){if(l.length===0)return null;const n=t=>{const s=document.getElementById(t);s&&s.scrollIntoView({behavior:"smooth",block:"start"})};return e.jsxs("nav",{className:"mb-8 p-4 rounded-lg border bg-muted/30",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-3 text-sm font-medium text-muted-foreground",children:[e.jsx(r,{className:"h-4 w-4"}),e.jsx("span",{children:"Nesta página"})]}),e.jsx("ul",{className:"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-x-4 gap-y-2",children:l.map(t=>e.jsx("li",{children:e.jsx("button",{onClick:()=>n(t.id),className:"text-sm text-muted-foreground hover:text-foreground hover:underline transition-colors text-left truncate max-w-full",title:t.label,children:t.label})},t.id))})]})}export{a as T};
@@ -1,42 +0,0 @@
1
- import{j as a,cJ as u,l as r,aq as b,cd as i,ce as l,cf as t,cg as o,f as d}from"./index-BtX5DZqb.js";import{C as p}from"./ComponentDocTemplate-BtOCnlM2.js";import"./ExampleCard-DfuMYM6E.js";import"./TableOfContents-DBMJMbI4.js";function m({children:s,className:e}){return a.jsx("div",{className:r("flex flex-col h-full",e),children:a.jsx(u,{className:"flex-1",children:a.jsx("div",{className:"space-y-6 p-6",children:s})})})}function g({title:s,description:e,actions:n,className:c}){return a.jsxs("div",{className:r("space-y-4",c),children:[a.jsxs("div",{className:"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between",children:[a.jsxs("div",{className:"space-y-1",children:[a.jsx("h2",{className:"text-2xl font-bold tracking-tight",children:s}),e&&a.jsx("p",{className:"text-muted-foreground text-sm",children:e})]}),n&&a.jsx("div",{className:"flex items-center gap-2 flex-wrap",children:n})]}),a.jsx(b,{})]})}function T({children:s,className:e}){return a.jsx("div",{className:r("space-y-6",e),children:s})}function j(){return a.jsx(p,{title:"Tabs & TabPageLayout",description:"Componentes de navegação em abas. Tabs para conteúdo simples e TabPageLayout para páginas completas com header fixo e scroll.",component:a.jsxs(i,{defaultValue:"account",className:"w-[400px]",children:[a.jsxs(l,{children:[a.jsx(t,{value:"account",children:"Conta"}),a.jsx(t,{value:"password",children:"Senha"})]}),a.jsx(o,{value:"account"}),a.jsx(o,{value:"password"})]}),usage:`import { Tabs, TabsContent, TabsList, TabsTrigger } from "forlogic-core"
2
-
3
- <Tabs defaultValue="account">
4
- <TabsList>
5
- <TabsTrigger value="account">Conta</TabsTrigger>
6
- <TabsTrigger value="password">Senha</TabsTrigger>
7
- </TabsList>
8
- <TabsContent value="account">
9
- Faça alterações na sua conta aqui.
10
- </TabsContent>
11
- <TabsContent value="password">
12
- Altere sua senha aqui.
13
- </TabsContent>
14
- </Tabs>`,examples:[{title:"Basic Tabs",preview:a.jsxs(i,{defaultValue:"tab1",className:"w-[400px]",children:[a.jsxs(l,{children:[a.jsx(t,{value:"tab1",children:"Tab 1"}),a.jsx(t,{value:"tab2",children:"Tab 2"}),a.jsx(t,{value:"tab3",children:"Tab 3"})]}),a.jsx(o,{value:"tab1"}),a.jsx(o,{value:"tab2"}),a.jsx(o,{value:"tab3"})]}),code:`<Tabs defaultValue="tab1">
15
- <TabsList>
16
- <TabsTrigger value="tab1">Aba 1</TabsTrigger>
17
- <TabsTrigger value="tab2">Aba 2</TabsTrigger>
18
- </TabsList>
19
- <TabsContent value="tab1">Conteúdo 1</TabsContent>
20
- <TabsContent value="tab2">Conteúdo 2</TabsContent>
21
- </Tabs>`},{title:"TabPageLayout",description:"Layout padronizado para páginas dentro de tabs com header, ações e conteúdo scrollável",preview:a.jsx("div",{className:"w-full h-80 border rounded-lg overflow-hidden bg-background",children:a.jsxs(m,{children:[a.jsx(g,{title:"Configurações",description:"Gerencie as configurações do sistema",actions:a.jsxs(a.Fragment,{children:[a.jsx(d,{variant:"outline",size:"sm",children:"Cancelar"}),a.jsx(d,{size:"sm",children:"Salvar"})]})}),a.jsx(T,{children:a.jsx("div",{className:"space-y-4",children:Array.from({length:6}).map((s,e)=>a.jsxs("div",{className:"p-4 border rounded-md",children:[a.jsxs("h4",{className:"font-medium",children:["Seção ",e+1]}),a.jsxs("p",{className:"text-sm text-muted-foreground mt-1",children:["Conteúdo da seção ",e+1]})]},e))})})]})}),code:`import {
22
- TabPageLayout,
23
- TabPageHeader,
24
- TabPageContent
25
- } from "forlogic-core"
26
-
27
- <TabPageLayout>
28
- <TabPageHeader
29
- title="Configurações"
30
- description="Gerencie as configurações do sistema"
31
- actions={
32
- <>
33
- <Button variant="outline">Cancelar</Button>
34
- <Button>Salvar</Button>
35
- </>
36
- }
37
- />
38
-
39
- <TabPageContent>
40
- <div>Seu conteúdo aqui...</div>
41
- </TabPageContent>
42
- </TabPageLayout>`}],props:[{name:"defaultValue",type:"string",default:"-",description:"O valor da aba que deve estar ativa por padrão."},{name:"value",type:"string",default:"-",description:"O valor controlado da aba ativa."},{name:"onValueChange",type:"(value: string) => void",default:"-",description:"Manipulador de evento quando a aba ativa muda."},{name:"TabPageHeader.title",type:"string | ReactNode",default:"-",description:"Título do header."},{name:"TabPageHeader.description",type:"string",default:"-",description:"Descrição opcional."},{name:"TabPageHeader.actions",type:"ReactNode",default:"-",description:"Ações (botões) do header."}],accessibility:["Navegação completa por teclado (teclas de seta para navegar entre abas)","Segue o padrão WAI-ARIA de tabs","Gerenciamento adequado de foco","Anúncios para leitores de tela"],notes:["**Tabs** é ideal para alternar entre visualizações simples","**TabPageLayout** é ideal para páginas dentro de tabs com header fixo e scroll","TabPageLayout inclui separador automático e scroll area","Para barras de menu estilo desktop, veja o componente **Menubar**"]})}export{j as TabsDoc};
@@ -1,46 +0,0 @@
1
- import{j as e,cL as a,r as d,L as t,f as n}from"./index-BtX5DZqb.js";import{C as m}from"./ComponentDocTemplate-BtOCnlM2.js";import"./ExampleCard-DfuMYM6E.js";import"./TableOfContents-DBMJMbI4.js";function v(){return e.jsx(m,{title:"Textarea",description:"Exibe um textarea de formulário ou um componente que se parece com um textarea.",component:e.jsx(a,{placeholder:"Digite sua mensagem aqui.",className:"w-full max-w-md"}),usage:`import { Textarea } from "forlogic-core"
2
-
3
- <Textarea placeholder="Digite sua mensagem aqui." />`,examples:[{title:"Padrão",preview:e.jsx(a,{placeholder:"Digite sua mensagem aqui.",className:"max-w-md"}),code:'<Textarea placeholder="Digite sua mensagem aqui." />'},{title:"Com Contador de Caracteres",preview:(()=>{const[s,l]=d.useState(""),r=200;return e.jsxs("div",{className:"space-y-2 max-w-md",children:[e.jsx(a,{placeholder:"Digite sua mensagem...",value:s,onChange:o=>l(o.target.value),maxLength:r}),e.jsxs("div",{className:"flex justify-end text-sm text-muted-foreground",children:[s.length,"/",r," caracteres"]})]})})(),code:`const [text, setText] = useState('');
4
- const maxLength = 200;
5
-
6
- <Textarea
7
- value={text}
8
- onChange={(e) => setText(e.target.value)}
9
- maxLength={maxLength}
10
- />
11
- <div className="text-sm text-muted-foreground">
12
- {text.length}/{maxLength} caracteres
13
- </div>`},{title:"Com Label",preview:e.jsxs("div",{className:"grid w-full max-w-md gap-1.5",children:[e.jsx(t,{htmlFor:"message",children:"Sua mensagem"}),e.jsx(a,{placeholder:"Digite sua mensagem aqui.",id:"message"})]}),code:`<div className="grid gap-1.5">
14
- <Label htmlFor="message">Sua mensagem</Label>
15
- <Textarea id="message" />
16
- </div>`},{title:"Estados",preview:e.jsxs("div",{className:"space-y-4 max-w-md",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsx(t,{children:"Normal"}),e.jsx(a,{placeholder:"Digite aqui..."})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(t,{className:"text-muted-foreground",children:"Desabilitado"}),e.jsx(a,{placeholder:"Textarea desabilitado",disabled:!0})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(t,{children:"Somente Leitura"}),e.jsx(a,{value:"Este texto não pode ser editado",readOnly:!0})]})]}),code:`<Textarea placeholder="Normal" />
17
- <Textarea placeholder="Desabilitado" disabled />
18
- <Textarea value="Somente leitura" readOnly />`},{title:"Tamanhos Customizados",preview:e.jsxs("div",{className:"space-y-4 max-w-md",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsx(t,{children:"Pequeno (3 linhas)"}),e.jsx(a,{rows:3,placeholder:"Textarea pequeno..."})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(t,{children:"Médio (5 linhas)"}),e.jsx(a,{rows:5,placeholder:"Textarea médio..."})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(t,{children:"Grande (10 linhas)"}),e.jsx(a,{rows:10,placeholder:"Textarea grande..."})]})]}),code:`<Textarea rows={3} placeholder="Pequeno" />
19
- <Textarea rows={5} placeholder="Médio" />
20
- <Textarea rows={10} placeholder="Grande" />`},{title:"Casos de Uso - Formulário de Feedback",preview:(()=>{const[s,l]=d.useState(""),[r,o]=d.useState(!1),i=()=>{o(!0),setTimeout(()=>{o(!1),l("")},2e3)};return e.jsxs("div",{className:"space-y-4 max-w-md",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsx(t,{htmlFor:"feedback",children:"Como podemos melhorar?"}),e.jsx(a,{id:"feedback",placeholder:"Compartilhe suas sugestões ou problemas...",value:s,onChange:c=>l(c.target.value),rows:5}),e.jsx("p",{className:"text-xs text-muted-foreground",children:"Seu feedback nos ajuda a melhorar o produto"})]}),e.jsx(n,{onClick:i,disabled:!s||r,className:"w-full",children:r?"Enviado!":"Enviar Feedback"})]})})(),code:`const [feedback, setFeedback] = useState('');
21
-
22
- <div className="space-y-2">
23
- <Label>Como podemos melhorar?</Label>
24
- <Textarea
25
- value={feedback}
26
- onChange={(e) => setFeedback(e.target.value)}
27
- rows={5}
28
- />
29
- </div>
30
- <Button onClick={handleSubmit}>
31
- Enviar Feedback
32
- </Button>`},{title:"Casos de Uso - Editor de Notas",preview:(()=>{const[s,l]=d.useState(""),[r,o]=d.useState(!1),i=s.trim().split(/\s+/).filter(Boolean).length;return e.jsx("div",{className:"space-y-4 max-w-md",children:e.jsxs("div",{className:"space-y-2",children:[e.jsxs("div",{className:"flex justify-between items-center",children:[e.jsx(t,{children:"Minhas Notas"}),e.jsxs("div",{className:"flex gap-2",children:[e.jsx(n,{variant:"outline",size:"sm",onClick:()=>{o(!0),setTimeout(()=>o(!1),1500)},disabled:!s,children:r?"✓ Salvo":"Salvar"}),e.jsx(n,{variant:"ghost",size:"sm",onClick:()=>l(""),disabled:!s,children:"Limpar"})]})]}),e.jsx(a,{placeholder:"Comece a escrever suas notas...",value:s,onChange:c=>l(c.target.value),rows:6}),e.jsxs("div",{className:"flex justify-between text-xs text-muted-foreground",children:[e.jsxs("span",{children:[s.length," caracteres"]}),e.jsxs("span",{children:[i," palavras"]})]})]})})})(),code:`const [note, setNote] = useState('');
33
- const wordCount = note.trim().split(/s+/).filter(Boolean).length;
34
-
35
- <div className="space-y-2">
36
- <Label>Minhas Notas</Label>
37
- <Textarea
38
- value={note}
39
- onChange={(e) => setNote(e.target.value)}
40
- rows={6}
41
- />
42
- <div className="flex justify-between text-xs">
43
- <span>{note.length} caracteres</span>
44
- <span>{wordCount} palavras</span>
45
- </div>
46
- </div>`}],props:[{name:"placeholder",type:"string",default:"-",description:"Texto do placeholder."},{name:"disabled",type:"boolean",default:"false",description:"Se o textarea está desabilitado."},{name:"rows",type:"number",default:"-",description:"Número de linhas de texto visíveis."}],accessibility:["Elemento HTML textarea padrão","Funciona com labels e controles de formulário","Acessível por teclado","Amigável para leitores de tela"]})}export{v as TextareaDoc};
@@ -1,157 +0,0 @@
1
- import{j as e,aA as c,aL as j,aB as g,aC as l,ar as d,at as m,au as i,av as n,aw as u,ax as o,f as a,u as s,C as p,a as x,b as h,aM as N,d as v,aD as C,ac as F,ad as b,ae as E,x as w,B,aN as T,E as k}from"./index-BtX5DZqb.js";import{C as A}from"./ComponentDocTemplate-BtOCnlM2.js";import{C as S}from"./circle-x-B9ouupla.js";import"./ExampleCard-DfuMYM6E.js";import"./TableOfContents-DBMJMbI4.js";function q(){return e.jsx(A,{title:"Toast",description:"Componente de notificação toast usando Sonner. Feedback temporário e não bloqueante que informa rapidamente o usuário sem competir visualmente com outros Toasts.",component:e.jsx(a,{variant:"outline",onClick:()=>s("Evento foi criado",{description:"Domingo, 03 de dezembro de 2023 às 9:00"}),children:"Mostrar Toast"}),usage:`import { toast } from "sonner"
2
-
3
- // Informativo (BG #FFFFFF)
4
- toast("Mensagem simples")
5
- toast.info("Informação importante")
6
-
7
- // Sucesso (BG #E0FBE8)
8
- toast.success("Operação concluída")
9
-
10
- // Alerta (BG #FEF3C8)
11
- toast.warning("Atenção necessária")
12
-
13
- // Erro (BG #FEE1E1)
14
- toast.error("Algo deu errado")`,examples:[{title:"Definição Conceitual",preview:e.jsxs(c,{children:[e.jsx(j,{className:"h-4 w-4"}),e.jsx(g,{children:"Toast é um feedback temporário e não bloqueante"}),e.jsx(l,{className:"mt-2",children:e.jsxs("ul",{className:"list-disc pl-4 space-y-1 text-sm",children:[e.jsx("li",{children:"Informa rapidamente o usuário sobre o resultado de uma ação"}),e.jsx("li",{children:"Não compete visualmente com outros Toasts"}),e.jsx("li",{children:"Quando múltiplos Toasts são exibidos, eles empilham sem sobreposição"}),e.jsx("li",{children:"Seguem uma ordem previsível (mais recente no topo)"})]})})]}),code:`// Toast é um feedback temporário e não bloqueante
15
- // - Informa rapidamente o usuário
16
- // - Não compete visualmente com outros Toasts
17
- // - Empilhamento vertical sem sobreposição
18
- // - Ordem previsível: mais recente no topo`},{title:"Regras de Empilhamento",preview:e.jsxs("div",{className:"flex flex-col gap-4",children:[e.jsxs(d,{children:[e.jsx(m,{children:e.jsxs(i,{children:[e.jsx(n,{children:"Regra"}),e.jsx(n,{children:"Comportamento"})]})}),e.jsxs(u,{children:[e.jsxs(i,{children:[e.jsx(o,{className:"font-medium",children:"Direção"}),e.jsx(o,{children:"Empilhamento vertical (de cima para baixo)"})]}),e.jsxs(i,{children:[e.jsx(o,{className:"font-medium",children:"Ordem"}),e.jsx(o,{children:"Mais recente aparece no topo"})]}),e.jsxs(i,{children:[e.jsx(o,{className:"font-medium",children:"Espaçamento"}),e.jsx(o,{children:"8px entre cada toast"})]}),e.jsxs(i,{children:[e.jsx(o,{className:"font-medium",children:"Visibilidade"}),e.jsx(o,{children:"Até 5 toasts simultâneos"})]}),e.jsxs(i,{children:[e.jsx(o,{className:"font-medium",children:"Sobreposição"}),e.jsx(o,{children:"Nunca sobrepõe conteúdo ou outros toasts"})]})]})]}),e.jsx(a,{variant:"outline",onClick:()=>{s.success("Toast 1 - Mais antigo"),setTimeout(()=>s.info("Toast 2"),300),setTimeout(()=>s.warning("Toast 3"),600),setTimeout(()=>s.error("Toast 4 - Mais recente"),900)},children:"Testar Empilhamento (4 toasts)"})]}),code:`// Empilhamento vertical com espaçamento consistente
19
- toast.success("Toast 1 - Mais antigo");
20
- setTimeout(() => toast.info("Toast 2"), 300);
21
- setTimeout(() => toast.warning("Toast 3"), 600);
22
- setTimeout(() => toast.error("Toast 4 - Mais recente"), 900);
23
-
24
- // Configuração do Toaster:
25
- // position="top-right"
26
- // expand={true}
27
- // visibleToasts={5}
28
- // gap={8}`},{title:"Regras de Posição",preview:e.jsxs(d,{children:[e.jsx(m,{children:e.jsxs(i,{children:[e.jsx(n,{children:"Propriedade"}),e.jsx(n,{children:"Valor"})]})}),e.jsxs(u,{children:[e.jsxs(i,{children:[e.jsx(o,{className:"font-medium",children:"Posição"}),e.jsx(o,{children:"Canto superior direito (top-right)"})]}),e.jsxs(i,{children:[e.jsx(o,{className:"font-medium",children:"Offset"}),e.jsx(o,{children:"16px das bordas da tela"})]}),e.jsxs(i,{children:[e.jsx(o,{className:"font-medium",children:"Z-index"}),e.jsx(o,{children:"1400 (acima de dialogs e modais)"})]}),e.jsxs(i,{children:[e.jsx(o,{className:"font-medium",children:"Área"}),e.jsx(o,{children:"Fixa, suporta múltiplos toasts sem quebrar layout"})]})]})]}),code:`// Configuração de posição no Toaster:
29
- <Sonner
30
- position="top-right"
31
- offset={16}
32
- />
33
-
34
- // CSS z-index:
35
- [data-sonner-toaster] {
36
- z-index: 1400 !important;
37
- }`},{title:"Regras de Interação",preview:e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[e.jsxs(p,{className:"border-green-200 bg-green-50/50",children:[e.jsx(x,{className:"pb-2",children:e.jsxs(h,{className:"text-green-700 flex items-center gap-2 text-base",children:[e.jsx(N,{className:"h-4 w-4"}),"Correto"]})}),e.jsx(v,{children:e.jsxs("ul",{className:"text-sm space-y-1 text-green-800",children:[e.jsx("li",{children:"• Cada toast possui botão de fechar individual"}),e.jsx("li",{children:"• Fechamento reorganiza automaticamente o empilhamento"}),e.jsx("li",{children:"• Toasts não bloqueiam clique ou leitura de outros"}),e.jsx("li",{children:"• pointer-events habilitado para cada toast"})]})})]}),e.jsxs(p,{className:"border-red-200 bg-red-50/50",children:[e.jsx(x,{className:"pb-2",children:e.jsxs(h,{className:"text-red-700 flex items-center gap-2 text-base",children:[e.jsx(S,{className:"h-4 w-4"}),"Evitar"]})}),e.jsx(v,{children:e.jsxs("ul",{className:"text-sm space-y-1 text-red-800",children:[e.jsx("li",{children:"• Toasts sem opção de fechar"}),e.jsx("li",{children:"• Duração infinita sem botão de fechar"}),e.jsx("li",{children:"• Sobrepor outros toasts ou conteúdo"}),e.jsx("li",{children:"• Bloquear interação com a página"})]})})]})]}),code:`// Cada toast tem fechamento individual
38
- toast("Mensagem", { closeButton: true })
39
-
40
- // Fechamento reorganiza automaticamente
41
- // Não é possível bloquear cliques em outros toasts
42
-
43
- // CSS garante pointer-events:
44
- [data-sonner-toast] {
45
- pointer-events: auto !important;
46
- }`},{title:"Tipos de Toast (Comportamento Consistente)",preview:e.jsxs("div",{className:"flex flex-col gap-4",children:[e.jsxs(c,{variant:"info",children:[e.jsx(C,{className:"h-4 w-4 text-blue-600"}),e.jsxs(l,{className:"text-blue-800",children:["O comportamento de empilhamento é ",e.jsx("strong",{children:"consistente entre todos os tipos"}),". A variação visual (cor, ícone) não altera o layout ou empilhamento."]})]}),e.jsxs("div",{className:"flex flex-wrap gap-2",children:[e.jsx(a,{variant:"outline",onClick:()=>s.success("Operação realizada com sucesso!"),children:"Sucesso"}),e.jsx(a,{variant:"outline",onClick:()=>s.warning("Atenção requerida"),children:"Alerta"}),e.jsx(a,{variant:"outline",onClick:()=>s.error("Falha na operação"),children:"Erro"}),e.jsx(a,{variant:"outline",onClick:()=>s.info("Informação importante"),children:"Informativo"})]})]}),code:`// Todos os tipos seguem as mesmas regras de empilhamento
47
-
48
- // Sucesso (BG #E0FBE8)
49
- toast.success("Operação realizada com sucesso!")
50
-
51
- // Alerta (BG #FEF3C8)
52
- toast.warning("Atenção requerida")
53
-
54
- // Erro (BG #FEE1E1)
55
- toast.error("Falha na operação")
56
-
57
- // Informativo (BG #FFFFFF)
58
- toast.info("Informação importante")`},{title:"Informativo - Com Descrição",preview:e.jsx(a,{variant:"outline",onClick:()=>s("Evento foi criado",{description:"Domingo, 03 de dezembro de 2023 às 9:00"}),children:"Toast com Descrição"}),code:`// Informativo (BG #FFFFFF)
59
- toast("Evento foi criado", {
60
- description: "Domingo, 03 de dezembro de 2023 às 9:00",
61
- })`},{title:"Informativo - Com Ação",preview:e.jsx(a,{variant:"outline",onClick:()=>s("Arquivo excluído",{action:{label:"Desfazer",onClick:()=>s.success("Arquivo restaurado")}}),children:"Toast com Ação"}),code:`// Informativo (BG #FFFFFF) com ação que exibe Sucesso (BG #E0FBE8)
62
- toast("Arquivo excluído", {
63
- action: {
64
- label: "Desfazer",
65
- onClick: () => toast.success("Arquivo restaurado"),
66
- },
67
- })`},{title:"Promise - Loading → Sucesso/Erro",preview:e.jsxs("div",{className:"flex flex-wrap gap-2",children:[e.jsx(a,{variant:"outline",onClick:()=>{const r=new Promise(t=>setTimeout(t,2e3));s.promise(r,{loading:"Salvando...",success:"Salvo com sucesso!",error:"Erro ao salvar"})},children:"Promise (Sucesso)"}),e.jsx(a,{variant:"outline",onClick:()=>{const r=new Promise((t,f)=>setTimeout(f,2e3));s.promise(r,{loading:"Processando...",success:"Concluído!",error:"Falha no processamento"})},children:"Promise (Erro)"})]}),code:`// Promise com transição: Loading → Sucesso (BG #E0FBE8)
68
- const promiseSuccess = new Promise((resolve) => setTimeout(resolve, 2000));
69
- toast.promise(promiseSuccess, {
70
- loading: "Salvando...",
71
- success: "Salvo com sucesso!",
72
- error: "Erro ao salvar",
73
- });
74
-
75
- // Promise com transição: Loading → Erro (BG #FEE1E1)
76
- const promiseError = new Promise((_, reject) => setTimeout(reject, 2000));
77
- toast.promise(promiseError, {
78
- loading: "Processando...",
79
- success: "Concluído!",
80
- error: "Falha no processamento",
81
- });`},{title:"Promise com Dados",preview:e.jsx(a,{variant:"outline",onClick:()=>{const r=new Promise(t=>setTimeout(()=>t({name:"Projeto Alpha"}),2e3));s.promise(r,{loading:"Carregando projeto...",success:t=>`Projeto "${t.name}" carregado!`,error:"Erro ao carregar projeto"})},children:"Promise com Dados"}),code:`// Sucesso (BG #E0FBE8) com dados dinâmicos
82
- const promise = fetchProject(id);
83
-
84
- toast.promise(promise, {
85
- loading: "Carregando projeto...",
86
- success: (data) => \`Projeto "\${data.name}" carregado!\`,
87
- error: "Erro ao carregar projeto",
88
- })`},{title:"Casos de Uso por Variação",preview:e.jsxs("div",{className:"flex flex-col gap-4",children:[e.jsxs("div",{className:"flex flex-col gap-2",children:[e.jsx("span",{className:"text-sm font-medium text-muted-foreground",children:"Informativo"}),e.jsxs("div",{className:"flex flex-wrap gap-2",children:[e.jsx(a,{size:"sm",variant:"outline",onClick:()=>s.info("Copiado para área de transferência"),children:"Copiar"}),e.jsx(a,{size:"sm",variant:"outline",onClick:()=>s("Arquivo enviado para processamento"),children:"Enviar"})]})]}),e.jsxs("div",{className:"flex flex-col gap-2",children:[e.jsx("span",{className:"text-sm font-medium text-muted-foreground",children:"Sucesso"}),e.jsxs("div",{className:"flex flex-wrap gap-2",children:[e.jsx(a,{size:"sm",variant:"outline",onClick:()=>s.success("Alterações salvas com sucesso"),children:"Salvar"}),e.jsx(a,{size:"sm",variant:"outline",onClick:()=>s.success("Usuário criado com sucesso"),children:"Criar"})]})]}),e.jsxs("div",{className:"flex flex-col gap-2",children:[e.jsx("span",{className:"text-sm font-medium text-muted-foreground",children:"Alerta"}),e.jsxs("div",{className:"flex flex-wrap gap-2",children:[e.jsx(a,{size:"sm",variant:"outline",onClick:()=>s.warning("Você tem alterações não salvas"),children:"Alterações pendentes"}),e.jsx(a,{size:"sm",variant:"outline",onClick:()=>s.warning("Sessão expira em 5 minutos"),children:"Sessão"})]})]}),e.jsxs("div",{className:"flex flex-col gap-2",children:[e.jsx("span",{className:"text-sm font-medium text-muted-foreground",children:"Erro"}),e.jsxs("div",{className:"flex flex-wrap gap-2",children:[e.jsx(a,{size:"sm",variant:"outline",onClick:()=>s.error("Falha ao conectar com o servidor"),children:"Conexão"}),e.jsx(a,{size:"sm",variant:"outline",onClick:()=>s.error("Permissão negada"),children:"Permissão"})]})]})]}),code:`// Informativo (BG #FFFFFF)
89
- toast.info("Copiado para área de transferência")
90
- toast("Arquivo enviado para processamento")
91
-
92
- // Sucesso (BG #E0FBE8)
93
- toast.success("Alterações salvas com sucesso")
94
- toast.success("Usuário criado com sucesso")
95
-
96
- // Alerta (BG #FEF3C8)
97
- toast.warning("Você tem alterações não salvas")
98
- toast.warning("Sessão expira em 5 minutos")
99
-
100
- // Erro (BG #FEE1E1)
101
- toast.error("Falha ao conectar com o servidor")
102
- toast.error("Permissão negada")`},{title:"Toast Customizado com JSX",preview:e.jsxs("div",{className:"flex flex-wrap gap-2",children:[e.jsx(a,{variant:"outline",onClick:()=>s(e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsxs(F,{className:"h-10 w-10",children:[e.jsx(b,{src:"https://github.com/shadcn.png"}),e.jsx(E,{children:"JD"})]}),e.jsxs("div",{className:"flex flex-col",children:[e.jsx("span",{className:"font-medium",children:"João da Silva"}),e.jsx("span",{className:"text-sm text-muted-foreground",children:"Comentou no seu projeto"})]})]}),{duration:5e3}),children:"Notificação de Usuário"}),e.jsx(a,{variant:"outline",onClick:()=>s.success(e.jsxs("div",{className:"flex flex-col gap-2",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(w,{className:"h-4 w-4"}),e.jsx("span",{className:"font-medium",children:"Download concluído"})]}),e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsx("span",{className:"text-sm text-muted-foreground",children:"relatorio-2024.pdf"}),e.jsx(B,{variant:"secondary",children:"2.4 MB"})]})]}),{duration:5e3}),children:"Download (Sucesso)"}),e.jsx(a,{variant:"outline",onClick:()=>s(e.jsxs("div",{className:"flex flex-col gap-3",children:[e.jsxs("div",{className:"flex items-start gap-3",children:[e.jsx("div",{className:"rounded-full bg-primary/10 p-2",children:e.jsx(T,{className:"h-4 w-4 text-primary"})}),e.jsxs("div",{className:"flex flex-col",children:[e.jsx("span",{className:"font-medium",children:"Novo convite recebido"}),e.jsx("span",{className:"text-sm text-muted-foreground",children:'Maria te convidou para o projeto "Design System"'})]})]}),e.jsxs("div",{className:"flex gap-2",children:[e.jsx(a,{size:"sm",variant:"default",onClick:()=>s.success("Convite aceito!"),children:"Aceitar"}),e.jsx(a,{size:"sm",variant:"outline",onClick:()=>s.warning("Convite recusado"),children:"Recusar"})]})]}),{duration:1/0,closeButton:!0}),children:"Com Botões Personalizados"}),e.jsx(a,{variant:"outline",onClick:()=>s.info(e.jsxs("div",{className:"flex items-center justify-between gap-4",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(k,{className:"h-4 w-4"}),e.jsx("span",{children:"Link copiado!"})]}),e.jsx(a,{size:"sm",variant:"link",className:"h-auto p-0",onClick:()=>window.open("https://lovable.dev","_blank"),children:"Abrir"})]})),children:"Com Link Externo"})]}),code:`// Informativo (BG #FFFFFF) - Notificação de usuário
103
- toast(
104
- <div className="flex items-center gap-3">
105
- <Avatar className="h-10 w-10">
106
- <AvatarImage src="https://github.com/shadcn.png" />
107
- <AvatarFallback>JD</AvatarFallback>
108
- </Avatar>
109
- <div className="flex flex-col">
110
- <span className="font-medium">João da Silva</span>
111
- <span className="text-sm text-muted-foreground">
112
- Comentou no seu projeto
113
- </span>
114
- </div>
115
- </div>,
116
- { duration: 5000 }
117
- )
118
-
119
- // Sucesso (BG #E0FBE8) - Download com Badge
120
- toast.success(
121
- <div className="flex flex-col gap-2">
122
- <div className="flex items-center gap-2">
123
- <Download className="h-4 w-4" />
124
- <span className="font-medium">Download concluído</span>
125
- </div>
126
- <div className="flex items-center justify-between">
127
- <span className="text-sm text-muted-foreground">relatorio-2024.pdf</span>
128
- <Badge variant="secondary">2.4 MB</Badge>
129
- </div>
130
- </div>
131
- )
132
-
133
- // Informativo (BG #FFFFFF) com botões que disparam outras variações
134
- toast(
135
- <div className="flex flex-col gap-3">
136
- <div className="flex items-start gap-3">
137
- <div className="rounded-full bg-primary/10 p-2">
138
- <User className="h-4 w-4 text-primary" />
139
- </div>
140
- <div className="flex flex-col">
141
- <span className="font-medium">Novo convite recebido</span>
142
- <span className="text-sm text-muted-foreground">
143
- Maria te convidou para o projeto "Design System"
144
- </span>
145
- </div>
146
- </div>
147
- <div className="flex gap-2">
148
- <Button size="sm" onClick={() => toast.success("Aceito!")}>
149
- Aceitar
150
- </Button>
151
- <Button size="sm" variant="outline" onClick={() => toast.warning("Recusado")}>
152
- Recusar
153
- </Button>
154
- </div>
155
- </div>,
156
- { duration: Infinity, closeButton: true }
157
- )`}],props:[{name:"message",type:"string | ReactNode",default:"-",description:"Texto principal ou conteúdo do toast."},{name:"description",type:"string | ReactNode",default:"-",description:"Descrição adicional exibida abaixo do título."},{name:"action",type:"{ label: string, onClick: () => void }",default:"-",description:"Botão de ação principal."},{name:"cancel",type:"{ label: string, onClick: () => void }",default:"-",description:"Botão de cancelamento secundário."},{name:"duration",type:"number",default:"4000",description:"Duração em ms antes de dispensar. Use Infinity para persistir."},{name:"closeButton",type:"boolean",default:"false",description:"Exibe botão X para fechar o toast."},{name:"icon",type:"ReactNode",default:"-",description:"Ícone personalizado para o toast."},{name:"id",type:"string | number",default:"-",description:"ID único para atualizar ou dispensar o toast."},{name:"onDismiss",type:"(toast) => void",default:"-",description:"Callback executado quando o toast é dispensado."},{name:"onAutoClose",type:"(toast) => void",default:"-",description:"Callback executado quando o toast fecha automaticamente."}],accessibility:["Utiliza ARIA live regions para anunciar toasts aos leitores de tela","Dispensável via tecla Escape","Auto-dispensa com duração configurável respeitando usabilidade","Suporte a swipe para dispensar em dispositivos touch","Respeita prefers-reduced-motion do sistema operacional","Foco gerenciado corretamente quando toast contém elementos interativos"],notes:["Informativo (#FFFFFF): toast() e toast.info() - Para informações contextuais e notificações neutras","Sucesso (#E0FBE8): toast.success() - Para feedback de operações bem-sucedidas","Alerta (#FEF3C8): toast.warning() - Para alertas que requerem atenção do usuário","Erro (#FEE1E1): toast.error() - Para erros e falhas, considere incluir ação de retry","Use toast.promise() para operações assíncronas com feedback de loading","Mantenha mensagens curtas e objetivas (máximo 2 linhas)",'Forneça ação de "Desfazer" para operações destrutivas quando possível',"Evite usar duration: Infinity sem closeButton ou action para dispensar"]})}export{q as ToastDoc};
@@ -1,51 +0,0 @@
1
- import{j as e,N as r,O as a,Q as o,R as l,U as i,V as t}from"./index-BtX5DZqb.js";import{C as s}from"./ComponentDocTemplate-BtOCnlM2.js";import{T as g,a as n,b as d}from"./text-align-start-WsHo7CNJ.js";import"./ExampleCard-DfuMYM6E.js";import"./TableOfContents-DBMJMbI4.js";function h(){return e.jsx(s,{title:"Toggle",description:"Botões de dois estados que podem estar ligados ou desligados, individualmente ou em grupo.",component:e.jsxs(o,{type:"multiple",children:[e.jsx(l,{value:"bold","aria-label":"Toggle bold",children:e.jsx(a,{className:"h-4 w-4"})}),e.jsx(l,{value:"italic","aria-label":"Toggle italic",children:e.jsx(i,{className:"h-4 w-4"})}),e.jsx(l,{value:"underline","aria-label":"Toggle underline",children:e.jsx(t,{className:"h-4 w-4"})})]}),usage:`import { Toggle, ToggleGroup, ToggleGroupItem } from "forlogic-core"
2
- import { Bold, Italic } from "lucide-react"
3
-
4
- // Toggle individual
5
- <Toggle aria-label="Alternar negrito">
6
- <Bold className="h-4 w-4" />
7
- </Toggle>
8
-
9
- // Toggle em grupo (seleção única)
10
- <ToggleGroup type="single" defaultValue="center">
11
- <ToggleGroupItem value="left" aria-label="Alinhar à esquerda">
12
- <AlignLeft className="h-4 w-4" />
13
- </ToggleGroupItem>
14
- <ToggleGroupItem value="center" aria-label="Centralizar">
15
- <AlignCenter className="h-4 w-4" />
16
- </ToggleGroupItem>
17
- </ToggleGroup>`,examples:[{title:"Toggle Simples",preview:e.jsx(r,{"aria-label":"Alternar negrito",children:e.jsx(a,{className:"h-4 w-4"})}),code:`import { Toggle } from "forlogic-core"
18
- import { Bold } from "lucide-react"
19
-
20
- <Toggle aria-label="Alternar negrito">
21
- <Bold className="h-4 w-4" />
22
- </Toggle>`},{title:"Toggle com Texto",preview:e.jsxs(r,{"aria-label":"Alternar negrito",children:[e.jsx(a,{className:"h-4 w-4 mr-2"}),"Negrito"]}),code:`<Toggle aria-label="Alternar negrito">
23
- <Bold className="h-4 w-4 mr-2" />
24
- Negrito
25
- </Toggle>`},{title:"Grupo - Seleção Múltipla",preview:e.jsxs(o,{type:"multiple",children:[e.jsx(l,{value:"bold","aria-label":"Alternar negrito",children:e.jsx(a,{className:"h-4 w-4"})}),e.jsx(l,{value:"italic","aria-label":"Alternar itálico",children:e.jsx(i,{className:"h-4 w-4"})}),e.jsx(l,{value:"underline","aria-label":"Alternar sublinhado",children:e.jsx(t,{className:"h-4 w-4"})})]}),code:`import { ToggleGroup, ToggleGroupItem } from "forlogic-core"
26
- import { Bold, Italic, Underline } from "lucide-react"
27
-
28
- <ToggleGroup type="multiple">
29
- <ToggleGroupItem value="bold" aria-label="Alternar negrito">
30
- <Bold className="h-4 w-4" />
31
- </ToggleGroupItem>
32
- <ToggleGroupItem value="italic" aria-label="Alternar itálico">
33
- <Italic className="h-4 w-4" />
34
- </ToggleGroupItem>
35
- <ToggleGroupItem value="underline" aria-label="Alternar sublinhado">
36
- <Underline className="h-4 w-4" />
37
- </ToggleGroupItem>
38
- </ToggleGroup>`},{title:"Grupo - Seleção Única",preview:e.jsxs(o,{type:"single",defaultValue:"center",children:[e.jsx(l,{value:"left","aria-label":"Alinhar à esquerda",children:e.jsx(g,{className:"h-4 w-4"})}),e.jsx(l,{value:"center","aria-label":"Centralizar",children:e.jsx(n,{className:"h-4 w-4"})}),e.jsx(l,{value:"right","aria-label":"Alinhar à direita",children:e.jsx(d,{className:"h-4 w-4"})})]}),code:`import { ToggleGroup, ToggleGroupItem } from "forlogic-core"
39
- import { AlignLeft, AlignCenter, AlignRight } from "lucide-react"
40
-
41
- <ToggleGroup type="single" defaultValue="center">
42
- <ToggleGroupItem value="left" aria-label="Alinhar à esquerda">
43
- <AlignLeft className="h-4 w-4" />
44
- </ToggleGroupItem>
45
- <ToggleGroupItem value="center" aria-label="Centralizar">
46
- <AlignCenter className="h-4 w-4" />
47
- </ToggleGroupItem>
48
- <ToggleGroupItem value="right" aria-label="Alinhar à direita">
49
- <AlignRight className="h-4 w-4" />
50
- </ToggleGroupItem>
51
- </ToggleGroup>`}],props:[{name:"pressed",type:"boolean",default:"-",description:"Estado controlado do Toggle."},{name:"defaultPressed",type:"boolean",default:"false",description:"Estado inicial não controlado do Toggle."},{name:"onPressedChange",type:"(pressed: boolean) => void",default:"-",description:"Callback quando o estado do Toggle muda."},{name:"disabled",type:"boolean",default:"false",description:"Desabilita a interação."},{name:"aria-label",type:"string",default:"-",description:"Obrigatório para acessibilidade quando não há texto visível."},{name:"type",type:'"single" | "multiple"',default:"-",description:"Modo de seleção do ToggleGroup (obrigatório)."},{name:"value",type:"string | string[]",default:"-",description:"Valor(es) controlado(s) do ToggleGroup."},{name:"defaultValue",type:"string | string[]",default:"-",description:"Valor(es) inicial(is) não controlado(s) do ToggleGroup."},{name:"onValueChange",type:"(value: string | string[]) => void",default:"-",description:"Callback quando o valor do ToggleGroup muda."}],accessibility:['Role "button" com aria-pressed aplicado automaticamente',"Suporte completo de teclado (Espaço/Enter para alternar)","Navegação por setas entre itens do ToggleGroup","aria-label obrigatório para toggles apenas com ícones","Estados aria-pressed comunicados para leitores de tela","Indicadores visuais de foco e estado ativo","ToggleGroup implementa padrão roving tabindex"]})}export{h as ToggleDoc};
@@ -1,58 +0,0 @@
1
- import{j as e,cS as r,cT as o,cU as i,aL as s,cV as t,f as a,b8 as d,b6 as p}from"./index-BtX5DZqb.js";import{C as c}from"./ComponentDocTemplate-BtOCnlM2.js";import"./ExampleCard-DfuMYM6E.js";import"./TableOfContents-DBMJMbI4.js";function T(){const l=`import {
2
- Tooltip,
3
- TooltipContent,
4
- TooltipProvider,
5
- TooltipTrigger,
6
- } from 'forlogic-core';
7
-
8
- <TooltipProvider>
9
- <Tooltip>
10
- <TooltipTrigger asChild>
11
- <Button variant="outline">Hover</Button>
12
- </TooltipTrigger>
13
- <TooltipContent>
14
- <p>Adicionar à biblioteca</p>
15
- </TooltipContent>
16
- </Tooltip>
17
- </TooltipProvider>`,n=e.jsx("div",{className:"flex justify-center py-8",children:e.jsx(r,{children:e.jsxs(o,{children:[e.jsx(i,{asChild:!0,children:e.jsx(a,{variant:"outline",children:"Hover"})}),e.jsx(t,{children:e.jsx("p",{children:"Adicionar à biblioteca"})})]})})});return e.jsx(c,{title:"Tooltip",description:"Um popup que exibe informações relacionadas a um elemento quando o elemento recebe foco do teclado ou o mouse passa sobre ele.",component:n,usage:l,examples:[{title:"Tooltip em Ícone",description:"Tooltip exibido ao passar o cursor sobre um ícone de informação.",preview:e.jsx("div",{className:"flex justify-center py-8",children:e.jsx(r,{children:e.jsxs(o,{children:[e.jsx(i,{asChild:!0,children:e.jsx(s,{className:"h-4 w-4 text-muted-foreground cursor-help"})}),e.jsx(t,{children:e.jsx("p",{children:"Esta é uma dica de ajuda"})})]})})}),code:`<TooltipProvider>
18
- <Tooltip>
19
- <TooltipTrigger asChild>
20
- <Info className="h-4 w-4 text-muted-foreground cursor-help" />
21
- </TooltipTrigger>
22
- <TooltipContent>
23
- <p>Esta é uma dica de ajuda</p>
24
- </TooltipContent>
25
- </Tooltip>
26
- </TooltipProvider>`},{title:"Posicionamento",description:"Controle o lado onde o tooltip aparece usando a prop side.",preview:e.jsxs("div",{className:"flex justify-center gap-4 py-8",children:[e.jsx(r,{children:e.jsxs(o,{children:[e.jsx(i,{asChild:!0,children:e.jsx(a,{variant:"outline",size:"sm",children:"Top"})}),e.jsx(t,{side:"top",children:e.jsx("p",{children:"Tooltip no topo"})})]})}),e.jsx(r,{children:e.jsxs(o,{children:[e.jsx(i,{asChild:!0,children:e.jsx(a,{variant:"outline",size:"sm",children:"Bottom"})}),e.jsx(t,{side:"bottom",children:e.jsx("p",{children:"Tooltip embaixo"})})]})}),e.jsx(r,{children:e.jsxs(o,{children:[e.jsx(i,{asChild:!0,children:e.jsx(a,{variant:"outline",size:"sm",children:"Left"})}),e.jsx(t,{side:"left",children:e.jsx("p",{children:"Tooltip à esquerda"})})]})}),e.jsx(r,{children:e.jsxs(o,{children:[e.jsx(i,{asChild:!0,children:e.jsx(a,{variant:"outline",size:"sm",children:"Right"})}),e.jsx(t,{side:"right",children:e.jsx("p",{children:"Tooltip à direita"})})]})})]}),code:`<TooltipContent side="top">...</TooltipContent>
27
- <TooltipContent side="bottom">...</TooltipContent>
28
- <TooltipContent side="left">...</TooltipContent>
29
- <TooltipContent side="right">...</TooltipContent>`},{title:"Delay Customizado",description:"Ajuste o tempo de exibição com delayDuration e skipDelayDuration.",preview:e.jsxs("div",{className:"flex justify-center gap-4 py-8",children:[e.jsx(r,{delayDuration:0,children:e.jsxs(o,{children:[e.jsx(i,{asChild:!0,children:e.jsx(a,{variant:"outline",size:"sm",children:"Sem delay"})}),e.jsx(t,{children:e.jsx("p",{children:"Aparece instantaneamente"})})]})}),e.jsx(r,{delayDuration:1e3,children:e.jsxs(o,{children:[e.jsx(i,{asChild:!0,children:e.jsx(a,{variant:"outline",size:"sm",children:"1s delay"})}),e.jsx(t,{children:e.jsx("p",{children:"Aparece após 1 segundo"})})]})})]}),code:`// Sem delay
30
- <TooltipProvider delayDuration={0}>
31
- <Tooltip>...</Tooltip>
32
- </TooltipProvider>
33
-
34
- // Delay de 1 segundo
35
- <TooltipProvider delayDuration={1000}>
36
- <Tooltip>...</Tooltip>
37
- </TooltipProvider>`},{title:"Múltiplos Tooltips",description:"Use um único TooltipProvider para compartilhar delay entre tooltips.",preview:e.jsx("div",{className:"flex justify-center gap-4 py-8",children:e.jsxs(r,{delayDuration:100,skipDelayDuration:0,children:[e.jsxs(o,{children:[e.jsx(i,{asChild:!0,children:e.jsx(a,{variant:"ghost",size:"icon",children:e.jsx(s,{className:"h-4 w-4"})})}),e.jsx(t,{children:e.jsx("p",{children:"Informação"})})]}),e.jsxs(o,{children:[e.jsx(i,{asChild:!0,children:e.jsx(a,{variant:"ghost",size:"icon",children:e.jsx(d,{className:"h-4 w-4"})})}),e.jsx(t,{children:e.jsx("p",{children:"Ajuda"})})]}),e.jsxs(o,{children:[e.jsx(i,{asChild:!0,children:e.jsx(a,{variant:"ghost",size:"icon",children:e.jsx(p,{className:"h-4 w-4"})})}),e.jsx(t,{children:e.jsx("p",{children:"Alerta"})})]})]})}),code:`// Provider compartilhado - mover entre tooltips é instantâneo
38
- <TooltipProvider delayDuration={100} skipDelayDuration={0}>
39
- <Tooltip>
40
- <TooltipTrigger asChild>
41
- <Button variant="ghost" size="icon"><Info /></Button>
42
- </TooltipTrigger>
43
- <TooltipContent><p>Informação</p></TooltipContent>
44
- </Tooltip>
45
- <Tooltip>
46
- <TooltipTrigger asChild>
47
- <Button variant="ghost" size="icon"><HelpCircle /></Button>
48
- </TooltipTrigger>
49
- <TooltipContent><p>Ajuda</p></TooltipContent>
50
- </Tooltip>
51
- </TooltipProvider>`},{title:"Com Conteúdo Rico",description:"Tooltips podem conter múltiplas linhas e formatação.",preview:e.jsx("div",{className:"flex justify-center py-8",children:e.jsx(r,{children:e.jsxs(o,{children:[e.jsx(i,{asChild:!0,children:e.jsx(a,{variant:"outline",children:"Mais informações"})}),e.jsx(t,{className:"max-w-xs",children:e.jsxs("div",{className:"space-y-1",children:[e.jsx("p",{className:"font-semibold",children:"Título do Tooltip"}),e.jsx("p",{className:"text-xs text-muted-foreground",children:"Descrição mais detalhada que pode ocupar múltiplas linhas."})]})})]})})}),code:`<TooltipContent className="max-w-xs">
52
- <div className="space-y-1">
53
- <p className="font-semibold">Título do Tooltip</p>
54
- <p className="text-xs text-muted-foreground">
55
- Descrição mais detalhada...
56
- </p>
57
- </div>
58
- </TooltipContent>`}],props:[{name:"delayDuration",type:"number",default:"300",description:"TooltipProvider: Atraso em ms antes de exibir o tooltip"},{name:"skipDelayDuration",type:"number",default:"300",description:"TooltipProvider: Tempo para pular o delay ao mover entre tooltips"},{name:"disableHoverableContent",type:"boolean",default:"false",description:"TooltipProvider: Impede que o conteúdo permaneça aberto ao passar o mouse"},{name:"open",type:"boolean",default:"-",description:"Tooltip: Estado controlado de abertura"},{name:"defaultOpen",type:"boolean",default:"false",description:"Tooltip: Estado inicial (não controlado)"},{name:"onOpenChange",type:"(open: boolean) => void",default:"-",description:"Tooltip: Callback quando o estado muda"},{name:"side",type:'"top" | "right" | "bottom" | "left"',default:'"top"',description:"TooltipContent: Lado preferido de posicionamento"},{name:"sideOffset",type:"number",default:"4",description:"TooltipContent: Distância em pixels do trigger"},{name:"align",type:'"start" | "center" | "end"',default:'"center"',description:"TooltipContent: Alinhamento em relação ao trigger"},{name:"alignOffset",type:"number",default:"0",description:"TooltipContent: Offset do alinhamento em pixels"}],accessibility:["Exibido ao focar no elemento trigger via teclado","Fechado automaticamente ao pressionar Escape",'role="tooltip" aplicado automaticamente',"Associação via aria-describedby","Não depende apenas de hover (acessível via focus)"],notes:["Use TooltipProvider como wrapper para compartilhar delays entre tooltips","Prefira Tooltip para dicas curtas, use Popover para conteúdo interativo","Evite tooltips em elementos que requerem ação rápida (botões principais)","Combine com ícones de informação para ajuda contextual","Use delayDuration={0} para exibição instantânea quando necessário"]})}export{T as TooltipDoc};
@@ -1,12 +0,0 @@
1
- import{j as e,az as s}from"./index-BtX5DZqb.js";import{E as t}from"./ExampleCard-DfuMYM6E.js";function o(){return e.jsx("div",{className:"border rounded-lg overflow-hidden",children:e.jsxs("table",{className:"w-full text-sm",children:[e.jsx("thead",{children:e.jsxs("tr",{className:"border-b bg-muted/50",children:[e.jsx("th",{className:"text-left p-3 w-[200px]",children:"Nome"}),e.jsx("th",{className:"text-left p-3 w-[150px]",children:"Status"})]})}),e.jsxs("tbody",{children:[e.jsxs("tr",{className:"border-b",children:[e.jsx("td",{className:"p-3 w-[200px] max-w-[200px]",children:e.jsx(s,{children:"Texto curto"})}),e.jsx("td",{className:"p-3",children:"Ativo"})]}),e.jsxs("tr",{className:"border-b",children:[e.jsx("td",{className:"p-3 w-[200px] max-w-[200px]",children:e.jsx(s,{children:"Este é um texto muito longo que será truncado automaticamente e mostrará tooltip ao passar o mouse"})}),e.jsx("td",{className:"p-3",children:"Ativo"})]}),e.jsxs("tr",{children:[e.jsx("td",{className:"p-3 w-[200px] max-w-[200px]",children:e.jsx(s,{children:"Outro texto extremamente longo para demonstrar que o tooltip só aparece quando o texto realmente está truncado pelo container"})}),e.jsx("td",{className:"p-3",children:"Inativo"})]})]})]})})}const a=`import { TruncatedCell } from 'forlogic-core';
2
-
3
- <td className="max-w-[200px]">
4
- <TruncatedCell>
5
- Texto que pode ser muito longo...
6
- </TruncatedCell>
7
- </td>
8
-
9
- // Com className customizada
10
- <TruncatedCell className="text-muted-foreground">
11
- {item.description}
12
- </TruncatedCell>`;function r(){return e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{children:[e.jsx("h1",{className:"text-4xl font-bold tracking-tight",children:"Truncated Cell"}),e.jsx("p",{className:"text-xl text-muted-foreground mt-2",children:"Componente utilitário que trunca texto longo e exibe tooltip automático quando o conteúdo está cortado."})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsx("h2",{className:"text-2xl font-semibold",children:"Quando usar"}),e.jsxs("ul",{className:"list-disc pl-6 space-y-1 text-muted-foreground",children:[e.jsx("li",{children:"Células de tabela com texto de tamanho variável"}),e.jsx("li",{children:"Listas com campos de descrição ou nomes longos"}),e.jsx("li",{children:"Qualquer área com largura fixa que pode receber conteúdo maior que o espaço disponível"})]})]}),e.jsx(t,{title:"Uso básico em tabela",description:"Passe o mouse sobre os textos longos para ver o tooltip automático",preview:e.jsx(o,{}),code:a}),e.jsxs("div",{className:"space-y-3",children:[e.jsx("h2",{className:"text-2xl font-semibold",children:"Como funciona"}),e.jsxs("ol",{className:"list-decimal pl-6 space-y-2 text-muted-foreground",children:[e.jsxs("li",{children:["O componente renderiza o conteúdo dentro de um ",e.jsx("code",{className:"text-xs bg-muted px-1 py-0.5 rounded",children:"div"})," com ",e.jsx("code",{className:"text-xs bg-muted px-1 py-0.5 rounded",children:"truncate"})]}),e.jsxs("li",{children:["Um ",e.jsx("code",{className:"text-xs bg-muted px-1 py-0.5 rounded",children:"ResizeObserver"})," monitora se ",e.jsx("code",{className:"text-xs bg-muted px-1 py-0.5 rounded",children:"scrollWidth > clientWidth"})]}),e.jsxs("li",{children:["Se o texto está truncado, envolve automaticamente em um ",e.jsx("code",{className:"text-xs bg-muted px-1 py-0.5 rounded",children:"Tooltip"})]}),e.jsx("li",{children:"Se o texto cabe no espaço, renderiza sem tooltip (zero overhead)"})]})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsx("h2",{className:"text-2xl font-semibold",children:"Props"}),e.jsx("div",{className:"border rounded-lg overflow-hidden",children:e.jsxs("table",{className:"w-full text-sm",children:[e.jsx("thead",{children:e.jsxs("tr",{className:"border-b bg-muted/50",children:[e.jsx("th",{className:"text-left p-3",children:"Prop"}),e.jsx("th",{className:"text-left p-3",children:"Tipo"}),e.jsx("th",{className:"text-left p-3",children:"Descrição"})]})}),e.jsxs("tbody",{children:[e.jsxs("tr",{className:"border-b",children:[e.jsx("td",{className:"p-3 font-mono text-xs",children:"children"}),e.jsx("td",{className:"p-3 font-mono text-xs",children:"ReactNode"}),e.jsx("td",{className:"p-3 text-muted-foreground",children:"Conteúdo a ser renderizado (e truncado se necessário)"})]}),e.jsxs("tr",{children:[e.jsx("td",{className:"p-3 font-mono text-xs",children:"className"}),e.jsx("td",{className:"p-3 font-mono text-xs",children:"string?"}),e.jsx("td",{className:"p-3 text-muted-foreground",children:"Classes CSS adicionais para o container"})]})]})]})})]})]})}export{r as TruncatedCellDoc};