xertica-ui 2.3.0 → 2.4.0

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 (534) hide show
  1. package/CHANGELOG.md +564 -552
  2. package/README.md +417 -406
  3. package/assets/xertica-logo.svg +37 -37
  4. package/assets/xertica-x-logo.svg +20 -20
  5. package/bin/cli.ts +1244 -1155
  6. package/bin/language-config.ts +358 -361
  7. package/components/assistant/code-block/CodeBlock.tsx +268 -268
  8. package/components/assistant/formatted-document/FormattedDocument.tsx +147 -147
  9. package/components/assistant/modern-chat-input/ModernChatInput.tsx +564 -554
  10. package/components/assistant/xertica-assistant/parts/AssistantCollapsedView.tsx +99 -99
  11. package/components/assistant/xertica-assistant/parts/AssistantConversationList.tsx +104 -106
  12. package/components/assistant/xertica-assistant/parts/AssistantDocumentEditor.tsx +81 -81
  13. package/components/assistant/xertica-assistant/parts/AssistantFeedbackDialog.tsx +88 -78
  14. package/components/assistant/xertica-assistant/parts/AssistantHeader.tsx +75 -75
  15. package/components/assistant/xertica-assistant/parts/AssistantMessageBubble.tsx +564 -560
  16. package/components/assistant/xertica-assistant/parts/AssistantTabBar.tsx +67 -67
  17. package/components/assistant/xertica-assistant/parts/AssistantWelcomeScreen.tsx +103 -103
  18. package/components/assistant/xertica-assistant/use-assistant.ts +615 -615
  19. package/components/assistant/xertica-assistant/xertica-assistant.tsx +611 -613
  20. package/components/blocks/card-patterns/ActivityCard.tsx +100 -100
  21. package/components/blocks/card-patterns/ActivityCardSkeleton.tsx +56 -56
  22. package/components/blocks/card-patterns/FeatureCardSkeleton.tsx +58 -63
  23. package/components/blocks/card-patterns/NotificationCard.tsx +140 -140
  24. package/components/blocks/card-patterns/NotificationCardSkeleton.tsx +81 -81
  25. package/components/blocks/card-patterns/ProfileCard.tsx +112 -114
  26. package/components/blocks/card-patterns/ProfileCardSkeleton.tsx +69 -69
  27. package/components/blocks/card-patterns/ProjectCard.tsx +123 -123
  28. package/components/blocks/card-patterns/ProjectCardSkeleton.tsx +67 -72
  29. package/components/blocks/card-patterns/QuickActionCardSkeleton.tsx +44 -44
  30. package/components/blocks/card-patterns/card-patterns.stories.tsx +594 -594
  31. package/components/blocks/card-patterns/index.ts +29 -29
  32. package/components/brand/language-selector/LanguageSelector.tsx +102 -102
  33. package/components/brand/language-selector/language-selector.stories.tsx +111 -114
  34. package/components/brand/language-selector/language-selector.test.tsx +101 -101
  35. package/components/brand/theme-toggle/ThemeToggle.tsx +74 -70
  36. package/components/brand/xertica-provider/XerticaProvider.tsx +109 -112
  37. package/components/brand/xertica-provider/xertica-provider.mdx +61 -61
  38. package/components/index.ts +86 -90
  39. package/components/layout/sidebar/sidebar.mdx +1 -1
  40. package/components/layout/sidebar/sidebar.tsx +1079 -1073
  41. package/components/media/FloatingMediaWrapper.tsx +371 -371
  42. package/components/media/audio-player/AudioPlayer.tsx +768 -766
  43. package/components/media/video-player/VideoPlayer.tsx +310 -310
  44. package/components/pages/forgot-password-page/ForgotPasswordPage.tsx +1 -1
  45. package/components/pages/home-content/HomeContent.tsx +120 -120
  46. package/components/pages/home-content/home-content.mdx +62 -62
  47. package/components/pages/home-page/HomePage.tsx +78 -74
  48. package/components/pages/home-page/home-page.mdx +53 -53
  49. package/components/pages/login-page/LoginPage.tsx +218 -216
  50. package/components/pages/reset-password-page/ResetPasswordPage.tsx +243 -239
  51. package/components/pages/template-content/TemplateContent.tsx +1354 -1235
  52. package/components/pages/template-content/template-content.mdx +61 -61
  53. package/components/pages/template-page/template-page.mdx +53 -53
  54. package/components/pages/verify-email-page/VerifyEmailPage.tsx +206 -206
  55. package/components/shared/error-boundary.stories.tsx +4 -22
  56. package/components/shared/error-boundary.tsx +1 -5
  57. package/components/shared/error-fallbacks.tsx +4 -8
  58. package/components/ui/accordion/accordion.mdx +8 -8
  59. package/components/ui/alert/alert.mdx +8 -8
  60. package/components/ui/alert-dialog/alert-dialog.mdx +8 -8
  61. package/components/ui/aspect-ratio/aspect-ratio.mdx +8 -8
  62. package/components/ui/assistant-chart/assistant-chart.mdx +8 -8
  63. package/components/ui/avatar/avatar.mdx +8 -8
  64. package/components/ui/badge/badge.mdx +8 -8
  65. package/components/ui/breadcrumb/breadcrumb.mdx +8 -8
  66. package/components/ui/button/button.mdx +8 -8
  67. package/components/ui/calendar/calendar.mdx +8 -8
  68. package/components/ui/card/card.mdx +8 -8
  69. package/components/ui/carousel/carousel.mdx +8 -8
  70. package/components/ui/chart/chart.mdx +8 -8
  71. package/components/ui/checkbox/checkbox.mdx +8 -8
  72. package/components/ui/collapsible/collapsible.mdx +8 -8
  73. package/components/ui/command/command.mdx +8 -8
  74. package/components/ui/context-menu/context-menu.mdx +8 -8
  75. package/components/ui/dialog/dialog.mdx +8 -8
  76. package/components/ui/drawer/drawer.mdx +8 -8
  77. package/components/ui/dropdown-menu/dropdown-menu.mdx +8 -8
  78. package/components/ui/empty/empty.mdx +8 -8
  79. package/components/ui/file-upload/file-upload.mdx +8 -8
  80. package/components/ui/hover-card/hover-card.mdx +8 -8
  81. package/components/ui/input/input.mdx +8 -8
  82. package/components/ui/input-otp/input-otp.mdx +8 -8
  83. package/components/ui/label/label.mdx +8 -8
  84. package/components/ui/map/map.mdx +8 -8
  85. package/components/ui/menubar/menubar.mdx +8 -8
  86. package/components/ui/navigation-menu/navigation-menu.mdx +8 -8
  87. package/components/ui/notification-badge/notification-badge.mdx +8 -8
  88. package/components/ui/pagination/pagination.mdx +8 -8
  89. package/components/ui/popover/popover.mdx +8 -8
  90. package/components/ui/progress/progress.mdx +8 -8
  91. package/components/ui/radio-group/radio-group.mdx +8 -8
  92. package/components/ui/rating/rating.mdx +8 -8
  93. package/components/ui/resizable/resizable.mdx +8 -8
  94. package/components/ui/route-map/route-map.mdx +8 -8
  95. package/components/ui/scroll-area/scroll-area.mdx +8 -8
  96. package/components/ui/search/search.mdx +8 -8
  97. package/components/ui/select/select.mdx +8 -8
  98. package/components/ui/separator/separator.mdx +8 -8
  99. package/components/ui/sheet/sheet.mdx +8 -8
  100. package/components/ui/simple-map/simple-map.mdx +8 -8
  101. package/components/ui/skeleton/skeleton.mdx +8 -8
  102. package/components/ui/slider/slider.mdx +8 -8
  103. package/components/ui/sonner/sonner.mdx +8 -8
  104. package/components/ui/stats-card/index.ts +2 -2
  105. package/components/ui/stats-card/stats-card-skeleton.tsx +60 -62
  106. package/components/ui/stats-card/stats-card.mdx +8 -8
  107. package/components/ui/stats-card/stats-card.stories.tsx +99 -99
  108. package/components/ui/stepper/stepper.mdx +8 -8
  109. package/components/ui/switch/switch.mdx +8 -8
  110. package/components/ui/table/table.mdx +8 -8
  111. package/components/ui/tabs/tabs.mdx +8 -8
  112. package/components/ui/textarea/textarea.mdx +8 -8
  113. package/components/ui/timeline/timeline.mdx +8 -8
  114. package/components/ui/toggle/toggle.mdx +8 -8
  115. package/components/ui/toggle-group/toggle-group.mdx +8 -8
  116. package/components/ui/tooltip/tooltip.mdx +8 -8
  117. package/components/ui/tree-view/tree-view.mdx +8 -8
  118. package/components.json +892 -892
  119. package/contexts/AuthContext.tsx +11 -8
  120. package/contexts/LanguageContext.test.tsx +121 -121
  121. package/contexts/LanguageContext.tsx +250 -251
  122. package/dist/{AssistantChart-DoZCyS5r.cjs → AssistantChart-9w31gdAb.cjs} +4 -4
  123. package/dist/{AssistantChart-CldVCVDe.cjs → AssistantChart-BAudAfne.cjs} +5 -5
  124. package/dist/{AssistantChart-Bdd44uBn.cjs → AssistantChart-BAx9VQvb.cjs} +127 -388
  125. package/dist/{AssistantChart-Cu3m7RBo.js → AssistantChart-BP8upjMk.js} +5 -5
  126. package/dist/{AssistantChart-CFhDdGyU.js → AssistantChart-CVko2A1W.js} +130 -391
  127. package/dist/{AssistantChart-C_hwFRRr.js → AssistantChart-CVzmmhx4.js} +4 -4
  128. package/dist/{AudioPlayer-IAU5q5T1.cjs → AudioPlayer-1ypwE2Wh.cjs} +1 -1
  129. package/dist/{AudioPlayer-CGRUtUdN.js → AudioPlayer-DuKXrCfy.js} +1 -1
  130. package/dist/{LanguageContext-CS14yCpi.js → LanguageContext-BwhwC3G2.js} +2 -2
  131. package/dist/{LanguageContext-B_KFTCzT.cjs → LanguageContext-DvUt5jBg.cjs} +2 -2
  132. package/dist/{ThemeContext-C2EwAPDt.js → ThemeContext-BbBNoFTG.js} +2 -2
  133. package/dist/{ThemeContext-Bmod0Cg2.cjs → ThemeContext-BblcjQup.cjs} +13 -8
  134. package/dist/{ThemeContext-BWq9ACPo.js → ThemeContext-Bo-W2WZH.js} +13 -8
  135. package/dist/{ThemeContext-j5aGtPky.cjs → ThemeContext-CP3a0jxy.cjs} +193 -262
  136. package/dist/{ThemeContext-vTjumZeM.cjs → ThemeContext-Cmr8Ex8H.cjs} +2 -2
  137. package/dist/ThemeContext-CpqYShLq.cjs +324 -0
  138. package/dist/{ThemeContext-CQSo4Iwc.js → ThemeContext-D3LzacmG.js} +8 -1
  139. package/dist/ThemeContext-Du2nE1PL.js +325 -0
  140. package/dist/ThemeContext-GeEBTJ3q.cjs +1621 -0
  141. package/dist/ThemeContext-JyLK9B1o.js +1622 -0
  142. package/dist/{ThemeContext-CGk3KK0k.cjs → ThemeContext-U4dEYc6C.cjs} +8 -1
  143. package/dist/{ThemeContext-BXjrgUjW.js → ThemeContext-ept8jhXI.js} +200 -261
  144. package/dist/{VerifyEmailPage-C0c2e5n0.js → VerifyEmailPage-BE-L9mB7.js} +7 -7
  145. package/dist/{VerifyEmailPage-DSBMRHtl.js → VerifyEmailPage-BIBOKV7Z.js} +41 -36
  146. package/dist/{VerifyEmailPage-DgIid028.js → VerifyEmailPage-BJjAMUTW.js} +4 -4
  147. package/dist/{VerifyEmailPage--1Vurewl.cjs → VerifyEmailPage-BRSP-Pwt.cjs} +3 -3
  148. package/dist/{VerifyEmailPage-Cwi3kbol.cjs → VerifyEmailPage-Bae2cBXT.cjs} +7 -7
  149. package/dist/{VerifyEmailPage-De6bQjrz.cjs → VerifyEmailPage-BiRm7Nh4.cjs} +41 -36
  150. package/dist/{VerifyEmailPage-ByerOcm4.cjs → VerifyEmailPage-Bv8Ah_TK.cjs} +23 -20
  151. package/dist/VerifyEmailPage-Bvfv8HVQ.js +3214 -0
  152. package/dist/{VerifyEmailPage-BComraR7.cjs → VerifyEmailPage-CR7kb5df.cjs} +22 -12
  153. package/dist/{VerifyEmailPage-MTD7AG1Z.js → VerifyEmailPage-C_ihbcth.js} +4 -4
  154. package/dist/{VerifyEmailPage-1WwWczAn.js → VerifyEmailPage-CbgjOF0v.js} +22 -12
  155. package/dist/{VerifyEmailPage-DvMLZgFt.js → VerifyEmailPage-CdYPSJoO.js} +1 -1
  156. package/dist/{VerifyEmailPage-By3Jf__L.cjs → VerifyEmailPage-CkBYfsNy.cjs} +4 -4
  157. package/dist/{VerifyEmailPage-CJLz3jrn.js → VerifyEmailPage-Cyl55sJb.js} +23 -20
  158. package/dist/VerifyEmailPage-D-FRj5TU.cjs +3213 -0
  159. package/dist/VerifyEmailPage-DF2ilhum.cjs +3210 -0
  160. package/dist/{VerifyEmailPage-CYXtbKi3.cjs → VerifyEmailPage-DMBh4NM9.cjs} +1 -1
  161. package/dist/{VerifyEmailPage-CgMxRb4z.js → VerifyEmailPage-DTtFfC-J.js} +3 -3
  162. package/dist/{VerifyEmailPage-CFLMls1p.cjs → VerifyEmailPage-Dt7zgA4w.cjs} +4 -4
  163. package/dist/VerifyEmailPage-EhudUdqF.js +3211 -0
  164. package/dist/{VerifyEmailPage-C5TNQTBa.js → VerifyEmailPage-X14vhdyl.js} +148 -75
  165. package/dist/VerifyEmailPage-hdB8JQGv.cjs +3213 -0
  166. package/dist/{VerifyEmailPage-B4peJjAT.cjs → VerifyEmailPage-u_Dn7t1U.cjs} +148 -75
  167. package/dist/VerifyEmailPage-vYHbYK3q.js +3214 -0
  168. package/dist/{XerticaProvider-CBGc4EMA.cjs → XerticaProvider-AChwphCO.cjs} +4 -4
  169. package/dist/{XerticaProvider-BIrqfZ-i.cjs → XerticaProvider-AbWlr7Af.cjs} +8 -11
  170. package/dist/{XerticaProvider-D-yNhF94.cjs → XerticaProvider-B8CaV7xu.cjs} +1 -1
  171. package/dist/{XerticaProvider-DDuiIcKo.js → XerticaProvider-BErr83Bg.js} +14 -11
  172. package/dist/{XerticaProvider-CEoWMTxu.js → XerticaProvider-BITjgC5p.js} +2 -2
  173. package/dist/{XerticaProvider-CllrbMEJ.cjs → XerticaProvider-By8q3Roe.cjs} +2 -2
  174. package/dist/{XerticaProvider-C1DKnvLh.js → XerticaProvider-CUYJZc32.js} +4 -4
  175. package/dist/{XerticaProvider-ET0ihewn.cjs → XerticaProvider-CW9hpCdF.cjs} +2 -2
  176. package/dist/{XerticaProvider-Dt5HEzbQ.js → XerticaProvider-CWgby5mY.js} +10 -10
  177. package/dist/XerticaProvider-CWs6EwNa.js +49 -0
  178. package/dist/XerticaProvider-CjQAQPcn.cjs +48 -0
  179. package/dist/XerticaProvider-CwOkHxiT.cjs +44 -0
  180. package/dist/XerticaProvider-D5lLumH-.js +49 -0
  181. package/dist/{XerticaProvider-DYq4JWtg.js → XerticaProvider-DQtvJU7m.js} +1 -1
  182. package/dist/XerticaProvider-qQUDop71.cjs +48 -0
  183. package/dist/{XerticaProvider-B7EVH-NF.js → XerticaProvider-siSt9uG2.js} +2 -2
  184. package/dist/{XerticaXLogo-Zw2B276b.cjs → XerticaXLogo-8TTzBjHw.cjs} +1 -1
  185. package/dist/{XerticaXLogo-B7xQ5dhi.js → XerticaXLogo-BWaag64t.js} +1 -1
  186. package/dist/{XerticaXLogo-DZbo4vOE.js → XerticaXLogo-BX3ueACh.js} +5 -2
  187. package/dist/XerticaXLogo-CFuIlYFH.js +252 -0
  188. package/dist/XerticaXLogo-CU-U-GP4.cjs +251 -0
  189. package/dist/XerticaXLogo-ChryA6xj.js +252 -0
  190. package/dist/{XerticaXLogo-CQUUjXoH.cjs → XerticaXLogo-CziKMQil.cjs} +8 -8
  191. package/dist/XerticaXLogo-DHz5SugF.js +252 -0
  192. package/dist/XerticaXLogo-DTee_y8X.cjs +251 -0
  193. package/dist/{XerticaXLogo-Cmsp-Eey.js → XerticaXLogo-DfUvz-lD.js} +9 -9
  194. package/dist/XerticaXLogo-kslQ8Tk_.cjs +251 -0
  195. package/dist/{XerticaXLogo-bvZSgwGF.cjs → XerticaXLogo-qBPhwK3g.cjs} +5 -2
  196. package/dist/{alert-dialog-s-vmNkJ_.js → alert-dialog-iDe5VE5o.js} +3 -3
  197. package/dist/{alert-dialog-DSKByiKZ.cjs → alert-dialog-yckpaOpy.cjs} +3 -3
  198. package/dist/assistant.cjs.js +1 -1
  199. package/dist/assistant.es.js +1 -1
  200. package/dist/brand.cjs.js +2 -2
  201. package/dist/brand.es.js +2 -2
  202. package/dist/cli.js +90 -37
  203. package/dist/components/brand/theme-toggle/ThemeToggle.d.ts +1 -1
  204. package/dist/components/index.d.ts +1 -1
  205. package/dist/{google-maps-loader-Y-QkD-Li.cjs → google-maps-loader-BqsYL48U.cjs} +0 -5
  206. package/dist/{google-maps-loader-CTYySAun.js → google-maps-loader-t2IlYBzw.js} +0 -4
  207. package/dist/index-CkTUgOwX.js +8 -0
  208. package/dist/{index-COtD8bRW.cjs → index-D3RLKRAs.cjs} +1 -1
  209. package/dist/index.cjs.js +5 -5
  210. package/dist/index.es.js +5 -5
  211. package/dist/index.umd.js +454 -1027
  212. package/dist/layout.cjs.js +1 -1
  213. package/dist/layout.es.js +1 -1
  214. package/dist/pages.cjs.js +1 -1
  215. package/dist/pages.es.js +1 -1
  216. package/dist/{sidebar-DAaY8bRU.cjs → sidebar-B3EYhli0.cjs} +33 -24
  217. package/dist/{sidebar-B6SlKZYN.js → sidebar-B4ZWaMrE.js} +1 -1
  218. package/dist/{sidebar-DQj1z3jG.cjs → sidebar-B9NR0lCe.cjs} +269 -227
  219. package/dist/{sidebar-nzPoVHBQ.cjs → sidebar-BS1p2V7t.cjs} +1 -1
  220. package/dist/sidebar-BvF5I2Ue.cjs +800 -0
  221. package/dist/{sidebar-q7P2Godd.cjs → sidebar-C5B_LHek.cjs} +1 -1
  222. package/dist/{sidebar-CrQDDdcz.js → sidebar-CA6_ek3f.js} +33 -24
  223. package/dist/{sidebar-BxGXsDAd.cjs → sidebar-CVUGHOS_.cjs} +8 -16
  224. package/dist/{sidebar-BViy8Eeu.js → sidebar-CmvwjnVb.js} +9 -17
  225. package/dist/sidebar-CplprZpM.js +801 -0
  226. package/dist/{sidebar-BbVIQvlP.js → sidebar-Dz7bd3zP.js} +1 -1
  227. package/dist/sidebar-KIS0C2JH.js +801 -0
  228. package/dist/sidebar-OTO_up7Z.js +801 -0
  229. package/dist/sidebar-zowjejT2.cjs +800 -0
  230. package/dist/{use-audio-player-nv8ZSGa1.js → use-audio-player-Bkh23vQ3.js} +3 -7
  231. package/dist/{use-audio-player-NKsWyjWu.cjs → use-audio-player-Dn1NR9xN.cjs} +3 -7
  232. package/dist/{xertica-assistant-dyP7KHM5.cjs → xertica-assistant-B1IaHXnB.cjs} +388 -529
  233. package/dist/{xertica-assistant-DCsnQyi5.js → xertica-assistant-B1NaSFFj.js} +46 -29
  234. package/dist/{xertica-assistant-ciJaWqm1.js → xertica-assistant-BMqdyRVi.js} +10 -28
  235. package/dist/{xertica-assistant-V_IdW4WF.cjs → xertica-assistant-Bj3vBCq_.cjs} +9 -27
  236. package/dist/{xertica-assistant-CrgTb6Hs.cjs → xertica-assistant-CIaUlbIt.cjs} +47 -22
  237. package/dist/{xertica-assistant-yX1CFBBo.js → xertica-assistant-DPsESB6t.js} +390 -531
  238. package/dist/{CodeBlock-BgfYL_rD.cjs → xertica-assistant-Qp3ydksa.cjs} +51 -263
  239. package/dist/{CodeBlock-BeSt1h5P.js → xertica-assistant-gnCJdcZY.js} +7 -219
  240. package/dist/xertica-ui.css +2 -2
  241. package/docs/architecture-improvements.md +456 -456
  242. package/docs/architecture.md +312 -306
  243. package/docs/components/assistant.md +428 -428
  244. package/docs/components/branding.md +252 -252
  245. package/docs/components/card-patterns.md +447 -445
  246. package/docs/components/error-boundary.md +32 -22
  247. package/docs/components/hooks.md +432 -430
  248. package/docs/components/language-selector.md +176 -172
  249. package/docs/components/pages.md +20 -6
  250. package/docs/doc-audit.md +244 -243
  251. package/docs/getting-started.md +616 -603
  252. package/docs/guidelines.md +330 -328
  253. package/docs/i18n.md +480 -476
  254. package/docs/installation.md +7 -6
  255. package/docs/llms.md +295 -295
  256. package/docs/state-management.md +289 -289
  257. package/guidelines/Guidelines.md +409 -406
  258. package/llms-compact.txt +1 -1
  259. package/llms.txt +1 -1
  260. package/package.json +219 -219
  261. package/styles/xertica/base.css +6 -0
  262. package/templates/.prettierignore +4 -4
  263. package/templates/.prettierrc +10 -10
  264. package/templates/CLAUDE.md +180 -165
  265. package/templates/guidelines/Guidelines.md +577 -553
  266. package/templates/package.json +69 -69
  267. package/templates/src/app/App.tsx +46 -46
  268. package/templates/src/app/components/AuthGuard.tsx +57 -8
  269. package/templates/src/features/assistant/data/mock.ts +75 -75
  270. package/templates/src/features/assistant/hooks/useAssistantConfig.ts +20 -20
  271. package/templates/src/features/assistant/index.ts +5 -5
  272. package/templates/src/features/auth/ui/AuthPageShell.tsx +1 -1
  273. package/templates/src/features/auth/ui/ForgotPasswordContent.tsx +70 -72
  274. package/templates/src/features/auth/ui/LoginContent.tsx +92 -92
  275. package/templates/src/features/auth/ui/ResetPasswordContent.tsx +183 -179
  276. package/templates/src/features/auth/ui/SocialLoginButtons.tsx +78 -78
  277. package/templates/src/features/auth/ui/VerifyEmailContent.tsx +80 -84
  278. package/templates/src/features/home/data/mock.ts +6 -0
  279. package/templates/src/features/home/hooks/useFeatureCards.ts +20 -20
  280. package/templates/src/features/home/index.ts +11 -11
  281. package/templates/src/features/home/ui/HomeContent.tsx +117 -119
  282. package/templates/src/features/template/ui/CrudTemplate.tsx +112 -115
  283. package/templates/src/features/template/ui/DashboardTemplate.tsx +110 -110
  284. package/templates/src/features/template/ui/FormTemplate.tsx +117 -117
  285. package/templates/src/features/template/ui/LoginTemplate.tsx +59 -59
  286. package/templates/src/features/template/ui/TemplateContent.tsx +1322 -1314
  287. package/templates/src/i18n.ts +124 -124
  288. package/templates/src/locales/en/common.json +21 -21
  289. package/templates/src/locales/en/components/activityCard.json +10 -10
  290. package/templates/src/locales/en/components/assistant.json +119 -119
  291. package/templates/src/locales/en/components/media.json +29 -29
  292. package/templates/src/locales/en/components/notificationCard.json +5 -5
  293. package/templates/src/locales/en/components/profileCard.json +8 -8
  294. package/templates/src/locales/en/components/projectCard.json +10 -10
  295. package/templates/src/locales/en/components/sidebar.json +14 -14
  296. package/templates/src/locales/en/components/stats.json +8 -8
  297. package/templates/src/locales/en/components/team.json +14 -14
  298. package/templates/src/locales/en/errors.json +9 -9
  299. package/templates/src/locales/en/languageSelector.json +7 -7
  300. package/templates/src/locales/en/nav.json +6 -6
  301. package/templates/src/locales/en/pages/crudTemplate.json +25 -25
  302. package/templates/src/locales/en/pages/dashboardTemplate.json +20 -20
  303. package/templates/src/locales/en/pages/forgotPassword.json +10 -10
  304. package/templates/src/locales/en/pages/formTemplate.json +16 -16
  305. package/templates/src/locales/en/pages/home.json +7 -7
  306. package/templates/src/locales/en/pages/login.json +15 -15
  307. package/templates/src/locales/en/pages/loginTemplate.json +9 -9
  308. package/templates/src/locales/en/pages/resetPassword.json +18 -18
  309. package/templates/src/locales/en/pages/templates.json +317 -317
  310. package/templates/src/locales/en/pages/verifyEmail.json +12 -12
  311. package/templates/src/locales/en/themeToggle.json +6 -6
  312. package/templates/src/locales/es/common.json +21 -21
  313. package/templates/src/locales/es/components/activityCard.json +10 -10
  314. package/templates/src/locales/es/components/assistant.json +119 -119
  315. package/templates/src/locales/es/components/media.json +29 -29
  316. package/templates/src/locales/es/components/notificationCard.json +5 -5
  317. package/templates/src/locales/es/components/profileCard.json +8 -8
  318. package/templates/src/locales/es/components/projectCard.json +10 -10
  319. package/templates/src/locales/es/components/sidebar.json +14 -14
  320. package/templates/src/locales/es/components/stats.json +8 -8
  321. package/templates/src/locales/es/components/team.json +14 -14
  322. package/templates/src/locales/es/errors.json +9 -9
  323. package/templates/src/locales/es/languageSelector.json +7 -7
  324. package/templates/src/locales/es/nav.json +6 -6
  325. package/templates/src/locales/es/pages/crudTemplate.json +25 -25
  326. package/templates/src/locales/es/pages/dashboardTemplate.json +20 -20
  327. package/templates/src/locales/es/pages/forgotPassword.json +10 -10
  328. package/templates/src/locales/es/pages/formTemplate.json +16 -16
  329. package/templates/src/locales/es/pages/home.json +7 -7
  330. package/templates/src/locales/es/pages/login.json +15 -15
  331. package/templates/src/locales/es/pages/loginTemplate.json +9 -9
  332. package/templates/src/locales/es/pages/resetPassword.json +18 -18
  333. package/templates/src/locales/es/pages/templates.json +317 -317
  334. package/templates/src/locales/es/pages/verifyEmail.json +12 -12
  335. package/templates/src/locales/es/themeToggle.json +6 -6
  336. package/templates/src/locales/pt-BR/common.json +21 -21
  337. package/templates/src/locales/pt-BR/components/activityCard.json +10 -10
  338. package/templates/src/locales/pt-BR/components/assistant.json +119 -119
  339. package/templates/src/locales/pt-BR/components/media.json +29 -29
  340. package/templates/src/locales/pt-BR/components/notificationCard.json +5 -5
  341. package/templates/src/locales/pt-BR/components/profileCard.json +8 -8
  342. package/templates/src/locales/pt-BR/components/projectCard.json +10 -10
  343. package/templates/src/locales/pt-BR/components/sidebar.json +14 -14
  344. package/templates/src/locales/pt-BR/components/stats.json +8 -8
  345. package/templates/src/locales/pt-BR/components/team.json +14 -14
  346. package/templates/src/locales/pt-BR/errors.json +9 -9
  347. package/templates/src/locales/pt-BR/languageSelector.json +7 -7
  348. package/templates/src/locales/pt-BR/nav.json +6 -6
  349. package/templates/src/locales/pt-BR/pages/crudTemplate.json +25 -25
  350. package/templates/src/locales/pt-BR/pages/dashboardTemplate.json +20 -20
  351. package/templates/src/locales/pt-BR/pages/forgotPassword.json +10 -10
  352. package/templates/src/locales/pt-BR/pages/formTemplate.json +16 -16
  353. package/templates/src/locales/pt-BR/pages/home.json +7 -7
  354. package/templates/src/locales/pt-BR/pages/login.json +15 -15
  355. package/templates/src/locales/pt-BR/pages/loginTemplate.json +9 -9
  356. package/templates/src/locales/pt-BR/pages/resetPassword.json +18 -18
  357. package/templates/src/locales/pt-BR/pages/templates.json +317 -317
  358. package/templates/src/locales/pt-BR/pages/verifyEmail.json +12 -12
  359. package/templates/src/locales/pt-BR/themeToggle.json +6 -6
  360. package/templates/src/pages/AssistantPage.tsx +470 -464
  361. package/templates/src/pages/HomePage.tsx +53 -49
  362. package/templates/src/shared/error-boundary.tsx +1 -5
  363. package/templates/src/shared/error-fallbacks.tsx +4 -8
  364. package/templates/vite.config.js +20 -20
  365. package/templates/vite.config.ts +55 -52
  366. package/dist/AssistantChart-CxGjH7Qk.js +0 -3477
  367. package/dist/AssistantChart-DIpshm3i.js +0 -4784
  368. package/dist/AssistantChart-D_PTeu8P.cjs +0 -3503
  369. package/dist/AssistantChart-zjsy2GaZ.cjs +0 -4810
  370. package/dist/AudioPlayer-B1lt5cPl.cjs +0 -989
  371. package/dist/AudioPlayer-BZ7bibzU.cjs +0 -982
  372. package/dist/AudioPlayer-BpRPS4-1.cjs +0 -1277
  373. package/dist/AudioPlayer-C12BjQBV.cjs +0 -997
  374. package/dist/AudioPlayer-CFeV8t-5.cjs +0 -936
  375. package/dist/AudioPlayer-Coly3q5R.js +0 -1278
  376. package/dist/AudioPlayer-CySJIyvL.js +0 -937
  377. package/dist/AudioPlayer-DMcG_c7L.js +0 -990
  378. package/dist/AudioPlayer-DcFKRJE_.js +0 -998
  379. package/dist/AudioPlayer-e8LfNoqO.js +0 -983
  380. package/dist/BrandColorsContext-565dDHd5.js +0 -660
  381. package/dist/BrandColorsContext-BcJbtkqn.cjs +0 -659
  382. package/dist/CodeBlock-7TTgmdGG.cjs +0 -2094
  383. package/dist/CodeBlock-BlcqlA9M.cjs +0 -2094
  384. package/dist/CodeBlock-Bnmeu5ez.cjs +0 -2094
  385. package/dist/CodeBlock-BtfPlbAI.js +0 -2078
  386. package/dist/CodeBlock-CIySIuYr.js +0 -2078
  387. package/dist/CodeBlock-CuPtUM-7.cjs +0 -2094
  388. package/dist/CodeBlock-D6ffWXgc.js +0 -2078
  389. package/dist/CodeBlock-D8dcwbit.cjs +0 -2094
  390. package/dist/CodeBlock-DMZrFnlw.cjs +0 -2094
  391. package/dist/CodeBlock-DlBehYN8.js +0 -2078
  392. package/dist/CodeBlock-DnYNI8rQ.js +0 -2078
  393. package/dist/CodeBlock-DvKWbSnE.cjs +0 -2094
  394. package/dist/CodeBlock-DwMCfkFY.js +0 -2078
  395. package/dist/CodeBlock-Dy6CNYyj.js +0 -2078
  396. package/dist/CodeBlock-U1pPOQI7.cjs +0 -2094
  397. package/dist/CodeBlock-f_GpNhEB.js +0 -2078
  398. package/dist/CodeBlock-oB6u8nI1.js +0 -2078
  399. package/dist/CodeBlock-tZC31B73.cjs +0 -2094
  400. package/dist/FeatureCard-CxC-7C-C.cjs +0 -300
  401. package/dist/FeatureCard-DbHWCb4E.js +0 -301
  402. package/dist/ImageWithFallback-CGtidP6B.cjs +0 -4542
  403. package/dist/ImageWithFallback-lsg3pdFg.js +0 -4508
  404. package/dist/LanguageSelector-B5YfbHra.js +0 -231
  405. package/dist/LanguageSelector-D6uacAIM.cjs +0 -230
  406. package/dist/LayoutContext-B45-e9DI.cjs +0 -93
  407. package/dist/LayoutContext-BAql6ZRY.js +0 -97
  408. package/dist/LayoutContext-Bav3UMEA.js +0 -94
  409. package/dist/LayoutContext-BvK-ggDa.cjs +0 -96
  410. package/dist/ThemeContext-BoH4NLfN.js +0 -734
  411. package/dist/ThemeContext-r69W20Xg.cjs +0 -733
  412. package/dist/VerifyEmailPage-COiyNl1y.js +0 -2825
  413. package/dist/VerifyEmailPage-CqKsR2v8.js +0 -2827
  414. package/dist/VerifyEmailPage-DjQKRlUS.cjs +0 -2824
  415. package/dist/VerifyEmailPage-s-1X3LDJ.cjs +0 -2826
  416. package/dist/XerticaOrbe-KL1RBHzw.cjs +0 -1354
  417. package/dist/XerticaOrbe-zwS1p2a8.js +0 -1355
  418. package/dist/XerticaProvider-6btlAlzc.js +0 -17
  419. package/dist/XerticaProvider-BNoNOxQ5.cjs +0 -16
  420. package/dist/XerticaProvider-BlY2limY.cjs +0 -38
  421. package/dist/XerticaProvider-cI9hSs27.cjs +0 -38
  422. package/dist/XerticaProvider-hSwhNQex.js +0 -39
  423. package/dist/alert-dialog-BOje--vD.js +0 -847
  424. package/dist/alert-dialog-BtEuQqrg.cjs +0 -870
  425. package/dist/breadcrumb-CqJ7bHY5.js +0 -161
  426. package/dist/breadcrumb-m9Hb2_XN.cjs +0 -177
  427. package/dist/components/assistant/xertica-assistant/hooks/index.d.ts +0 -6
  428. package/dist/components/assistant/xertica-assistant/hooks/use-assistant-conversations.d.ts +0 -21
  429. package/dist/components/assistant/xertica-assistant/hooks/use-assistant-messages.d.ts +0 -49
  430. package/dist/components/assistant/xertica-assistant/hooks/use-assistant-suggestions.d.ts +0 -16
  431. package/dist/components/blocks/audio-player/AudioPlayer.d.ts +0 -35
  432. package/dist/components/blocks/audio-player/index.d.ts +0 -1
  433. package/dist/components/blocks/document-editor/DocumentEditor.d.ts +0 -26
  434. package/dist/components/blocks/document-editor/index.d.ts +0 -1
  435. package/dist/components/blocks/podcast-player/PodcastPlayer.d.ts +0 -41
  436. package/dist/components/blocks/podcast-player/index.d.ts +0 -1
  437. package/dist/components/ui/chart/parts/chart-dashboard.d.ts +0 -113
  438. package/dist/components/ui/chart/parts/chart-metric.d.ts +0 -118
  439. package/dist/components/ui/chart/parts/chart-primitives.d.ts +0 -101
  440. package/dist/components/ui/chart/parts/chart-shared.d.ts +0 -20
  441. package/dist/components/ui/chart/parts/chart-utils.d.ts +0 -12
  442. package/dist/components/ui/chart/parts/index.d.ts +0 -5
  443. package/dist/dropdown-menu-BDB5CmQs.cjs +0 -247
  444. package/dist/dropdown-menu-DQidbKBD.js +0 -231
  445. package/dist/google-maps-loader-BFWp6VPd.js +0 -287
  446. package/dist/google-maps-loader-BKcdgFbu.cjs +0 -312
  447. package/dist/google-maps-loader-CumCNXeG.js +0 -312
  448. package/dist/google-maps-loader-eS3uQ5TA.cjs +0 -287
  449. package/dist/header-Cgy6vYPk.cjs +0 -731
  450. package/dist/header-DRlT4jgI.js +0 -715
  451. package/dist/header-Dux00SI4.cjs +0 -731
  452. package/dist/header-EkGKXPsD.js +0 -715
  453. package/dist/header-WfEywpyc.cjs +0 -731
  454. package/dist/header-tifNQn2U.js +0 -715
  455. package/dist/index-BhapVLVj.js +0 -8
  456. package/dist/index-D6fxYEY8.cjs +0 -7
  457. package/dist/index-DAIp0_HK.js +0 -8
  458. package/dist/index-DW5tYe26.js +0 -8
  459. package/dist/index-GA__GvnG.cjs +0 -7
  460. package/dist/input-2R4loU86.js +0 -127
  461. package/dist/input-DWANSKGb.cjs +0 -145
  462. package/dist/progress-DPtzoVV8.js +0 -175
  463. package/dist/progress-EeaoqqUs.cjs +0 -191
  464. package/dist/rich-text-editor-0mraWT5y.cjs +0 -2376
  465. package/dist/rich-text-editor-B-IkcPD0.js +0 -2874
  466. package/dist/rich-text-editor-B6jMRLzk.cjs +0 -1939
  467. package/dist/rich-text-editor-B8_oYcIR.js +0 -1730
  468. package/dist/rich-text-editor-B9UbSXNb.js +0 -1203
  469. package/dist/rich-text-editor-BYuRBNBU.js +0 -2373
  470. package/dist/rich-text-editor-Bb9pySTs.cjs +0 -2374
  471. package/dist/rich-text-editor-BcL6L3cm.cjs +0 -2374
  472. package/dist/rich-text-editor-BoVZYtTs.cjs +0 -2391
  473. package/dist/rich-text-editor-Bp3zQqMC.js +0 -2954
  474. package/dist/rich-text-editor-CMgSN_w2.js +0 -1189
  475. package/dist/rich-text-editor-CPV1lEPH.cjs +0 -1748
  476. package/dist/rich-text-editor-CeucBdIv.cjs +0 -2971
  477. package/dist/rich-text-editor-CoKqbCtu.cjs +0 -1799
  478. package/dist/rich-text-editor-Cw56T_mB.js +0 -2356
  479. package/dist/rich-text-editor-Cyt8qs2b.js +0 -1921
  480. package/dist/rich-text-editor-D6H84OcX.cjs +0 -1220
  481. package/dist/rich-text-editor-D76gD-QI.js +0 -2328
  482. package/dist/rich-text-editor-DKkokOnA.js +0 -1781
  483. package/dist/rich-text-editor-DNsdpN64.cjs +0 -2359
  484. package/dist/rich-text-editor-DfG8bCyY.js +0 -2358
  485. package/dist/rich-text-editor-Dxjw31Z4.js +0 -2341
  486. package/dist/rich-text-editor-DzP0Epmb.js +0 -2356
  487. package/dist/rich-text-editor-bRkNoeZY.cjs +0 -2891
  488. package/dist/rich-text-editor-lyYE2ZG5.cjs +0 -1207
  489. package/dist/rich-text-editor-skplNlBM.cjs +0 -2345
  490. package/dist/select-Bkbr0f-Z.cjs +0 -162
  491. package/dist/select-CvIVdX2n.js +0 -145
  492. package/dist/sidebar-CK_0ZQHj.cjs +0 -803
  493. package/dist/sidebar-CUuOvYhK.js +0 -787
  494. package/dist/sidebar-Djn5syhi.cjs +0 -786
  495. package/dist/sidebar-LluMXfam.js +0 -759
  496. package/dist/sidebar-_rT7rBMk.js +0 -787
  497. package/dist/slider-Bc5Hd0y1.js +0 -56
  498. package/dist/slider-N7hFFj6X.cjs +0 -73
  499. package/dist/tooltip-Ded96neP.cjs +0 -137
  500. package/dist/tooltip-HDOoD2-0.js +0 -120
  501. package/dist/use-audio-player-B31J-aqh.cjs +0 -187
  502. package/dist/use-audio-player-BkmEmj8Q.js +0 -185
  503. package/dist/use-audio-player-CLFTWFW1.cjs +0 -184
  504. package/dist/use-audio-player-CLLn00I6.js +0 -188
  505. package/dist/use-file-upload-BcjEo2S5.js +0 -404
  506. package/dist/use-file-upload-CRJR68Tj.cjs +0 -403
  507. package/dist/use-mobile-B0hNy_Y6.cjs +0 -4303
  508. package/dist/use-mobile-BXuYROXM.js +0 -4202
  509. package/dist/use-mobile-Bbd51ASU.cjs +0 -4392
  510. package/dist/use-mobile-Bk6CX-TC.js +0 -4359
  511. package/dist/use-mobile-BvYdisLP.js +0 -4202
  512. package/dist/use-mobile-BzuxjzNX.cjs +0 -4392
  513. package/dist/use-mobile-CG2-SdXV.cjs +0 -4235
  514. package/dist/use-mobile-CKb5pqTs.js +0 -4269
  515. package/dist/use-mobile-CYuAuGDl.js +0 -4202
  516. package/dist/use-mobile-CaENcqm-.js +0 -4508
  517. package/dist/use-mobile-CbrYgJGJ.js +0 -4203
  518. package/dist/use-mobile-Cd4xPrKq.cjs +0 -46
  519. package/dist/use-mobile-DMOvImGQ.cjs +0 -4542
  520. package/dist/use-mobile-DRB3BQgD.cjs +0 -4235
  521. package/dist/use-mobile-DZvv7QMR.js +0 -4359
  522. package/dist/use-mobile-DdI_TXam.cjs +0 -4235
  523. package/dist/use-mobile-DlceKf8a.js +0 -4359
  524. package/dist/use-mobile-DsOnow1o.cjs +0 -4236
  525. package/dist/use-mobile-Kcj6jSnK.cjs +0 -4392
  526. package/dist/use-mobile-bnKcua_i.js +0 -4202
  527. package/dist/use-mobile-j4w2Jrf1.js +0 -30
  528. package/dist/use-mobile-ncXBeE2z.cjs +0 -4235
  529. package/dist/use-rich-text-editor-DjiddBGv.js +0 -282
  530. package/dist/use-rich-text-editor-lpeswbCs.cjs +0 -281
  531. package/dist/xertica-assistant-BdiZag0h.js +0 -2187
  532. package/dist/xertica-assistant-DUBpmEgo.cjs +0 -2186
  533. package/dist/{rich-text-editor-DgF8s7xW.js → rich-text-editor-BmsjY03B.js} +26 -26
  534. package/dist/{rich-text-editor-mWoaSCE4.cjs → rich-text-editor-GS2kpTAK.cjs} +26 -26
package/templates/src/features/template/ui/TemplateContent.tsx CHANGED
@@ -1,1314 +1,1322 @@
1
- import React, { useState } from 'react';
2
- import {
3
- Button,
4
- Input,
5
- Label,
6
- Card,
7
- CardHeader,
8
- CardTitle,
9
- CardDescription,
10
- CardContent,
11
- CardFooter,
12
- Tabs,
13
- TabsContent,
14
- TabsList,
15
- TabsTrigger,
16
- Badge,
17
- Alert,
18
- AlertDescription,
19
- AlertTitle,
20
- Checkbox,
21
- RadioGroup,
22
- RadioGroupItem,
23
- Switch,
24
- Select,
25
- SelectContent,
26
- SelectItem,
27
- SelectTrigger,
28
- SelectValue,
29
- Textarea,
30
- Progress,
31
- Separator,
32
- Table,
33
- TableBody,
34
- TableCell,
35
- TableHead,
36
- TableHeader,
37
- TableRow,
38
- Slider,
39
- ScrollArea,
40
- Dialog,
41
- DialogTrigger,
42
- DialogContent,
43
- DialogHeader,
44
- DialogTitle,
45
- DialogDescription,
46
- DialogFooter,
47
- AlertDialog,
48
- AlertDialogTrigger,
49
- AlertDialogContent,
50
- AlertDialogHeader,
51
- AlertDialogTitle,
52
- AlertDialogDescription,
53
- AlertDialogFooter,
54
- AlertDialogAction,
55
- AlertDialogCancel,
56
- Pagination,
57
- PaginationContent,
58
- PaginationItem,
59
- PaginationLink,
60
- PaginationNext,
61
- PaginationPrevious,
62
- PaginationEllipsis,
63
- Stepper,
64
- Step,
65
- TreeView,
66
- RichTextEditor,
67
- usePagination,
68
- useStepper,
69
- } from 'xertica-ui/ui';
70
- import { Header, Sidebar } from 'xertica-ui/layout';
71
- import { useLayout } from 'xertica-ui/hooks';
72
- import { toast } from 'sonner';
73
- import { Link } from 'react-router-dom';
74
- import { Trans, useTranslation } from 'react-i18next';
75
- import {
76
- Settings,
77
- User,
78
- Mail,
79
- Phone,
80
- Calendar,
81
- Search,
82
- PanelLeft,
83
- Home,
84
- Users,
85
- Plus,
86
- Trash2,
87
- Archive,
88
- ArrowRightLeft,
89
- FileEdit,
90
- Clock,
91
- Map,
92
- } from 'lucide-react';
93
-
94
- export function TemplateContent() {
95
- const { t } = useTranslation();
96
-
97
- // ── TreeView demo data (built inside the component so labels react to language switches) ──
98
- const treeData = [
99
- {
100
- id: 'components',
101
- label: t('templates.enhanced.treeView.nodes.components'),
102
- children: [
103
- {
104
- id: 'ui',
105
- label: t('templates.enhanced.treeView.nodes.ui'),
106
- children: [
107
- { id: 'button', label: t('templates.enhanced.treeView.nodes.button') },
108
- { id: 'input', label: t('templates.enhanced.treeView.nodes.input') },
109
- { id: 'pagination', label: t('templates.enhanced.treeView.nodes.pagination') },
110
- ],
111
- },
112
- {
113
- id: 'layout',
114
- label: t('templates.enhanced.treeView.nodes.layout'),
115
- children: [
116
- { id: 'sidebar', label: t('templates.enhanced.treeView.nodes.sidebar') },
117
- { id: 'header', label: t('templates.enhanced.treeView.nodes.header') },
118
- ],
119
- },
120
- ],
121
- },
122
- {
123
- id: 'hooks',
124
- label: t('templates.enhanced.treeView.nodes.hooks'),
125
- // Hook identifiers stay as code — not translated.
126
- children: [
127
- { id: 'use-pagination', label: 'usePagination' },
128
- { id: 'use-stepper', label: 'useStepper' },
129
- { id: 'use-tree-view', label: 'useTreeView' },
130
- ],
131
- },
132
- ];
133
- const { sidebarExpanded, sidebarWidth } = useLayout();
134
- const [progress, setProgress] = useState(45);
135
- const [sliderValue, setSliderValue] = useState([50]);
136
- const [switchEnabled, setSwitchEnabled] = useState(false);
137
- const [richText, setRichText] = useState('');
138
-
139
- // Dialog demo inputs (controlled so they re-localise on language switch).
140
- // Seeded lazily from `t(...)` so the initial value reflects the current
141
- // language at first render; subsequent language switches don't overwrite
142
- // user edits.
143
- const [dialogName, setDialogName] = useState(() => t('templates.dialogs.nameDefaultValue'));
144
- const [dialogUsername, setDialogUsername] = useState(() =>
145
- t('templates.dialogs.usernameDefaultValue')
146
- );
147
-
148
- // ── Pagination demo ─────────────────────────────────────────────────────────
149
- const { currentPage, totalPages, items, next, prev, goTo, canGoPrev, canGoNext } = usePagination({
150
- totalItems: 120,
151
- pageSize: 10,
152
- });
153
-
154
- // ── Stepper demo ────────────────────────────────────────────────────────────
155
- const {
156
- currentStep,
157
- next: stepNext,
158
- prev: stepPrev,
159
- isFirstStep,
160
- isLastStep,
161
- } = useStepper({ totalSteps: 3 });
162
-
163
- const handleFormSubmit = (e: React.FormEvent) => {
164
- e.preventDefault();
165
- toast.success(t('templates.formSubmitSuccess'));
166
- };
167
-
168
- return (
169
- <div
170
- style={{
171
- paddingLeft: sidebarExpanded ? `${sidebarWidth}px` : '80px',
172
- }}
173
- className="flex-1 flex flex-col overflow-hidden transition-all duration-300"
174
- >
175
- <Header
176
- showThemeToggle={true}
177
- showLanguageSelector={true}
178
- breadcrumbs={[
179
- { label: t('nav.designSystem'), href: '/home' },
180
- { label: t('templates.breadcrumb') },
181
- ]}
182
- renderLink={(href: string, props: any) => <Link to={href} {...props} />}
183
- />
184
-
185
- <main className="flex-1 overflow-hidden bg-muted">
186
- <ScrollArea className="h-full">
187
- <div className="p-5 sm:p-4 md:p-6">
188
- <div className="max-w-6xl mx-auto space-y-8">
189
- <div className="space-y-2">
190
- <h2>{t('templates.title')}</h2>
191
- <p className="text-muted-foreground">{t('templates.subtitle')}</p>
192
- </div>
193
-
194
- {/* Alert Examples */}
195
- <section>
196
- <h3 className="mb-4">{t('templates.sections.alerts')}</h3>
197
- <div className="grid gap-4 md:grid-cols-2">
198
- <Alert variant="info">
199
- <AlertTitle>{t('templates.alerts.infoTitle')}</AlertTitle>
200
- <AlertDescription>{t('templates.alerts.infoDescription')}</AlertDescription>
201
- </Alert>
202
-
203
- <Alert variant="destructive">
204
- <AlertTitle>{t('templates.alerts.errorTitle')}</AlertTitle>
205
- <AlertDescription>{t('templates.alerts.errorDescription')}</AlertDescription>
206
- </Alert>
207
-
208
- <Alert variant="success">
209
- <AlertTitle>{t('templates.alerts.successTitle')}</AlertTitle>
210
- <AlertDescription>{t('templates.alerts.successDescription')}</AlertDescription>
211
- </Alert>
212
-
213
- <Alert variant="warning">
214
- <AlertTitle>{t('templates.alerts.warningTitle')}</AlertTitle>
215
- <AlertDescription>{t('templates.alerts.warningDescription')}</AlertDescription>
216
- </Alert>
217
- </div>
218
- </section>
219
-
220
- <Separator className="my-8" />
221
-
222
- {/* Cards & Tabs */}
223
- <section>
224
- <h3 className="mb-4">{t('templates.sections.cardsAndTabs')}</h3>
225
-
226
- <Tabs defaultValue="overview" className="w-full">
227
- <TabsList className="grid w-full grid-cols-4">
228
- <TabsTrigger value="overview">{t('templates.tabs.overview')}</TabsTrigger>
229
- <TabsTrigger value="forms">{t('templates.tabs.forms')}</TabsTrigger>
230
- <TabsTrigger value="data">{t('templates.tabs.data')}</TabsTrigger>
231
- <TabsTrigger value="settings">{t('templates.tabs.settings')}</TabsTrigger>
232
- </TabsList>
233
-
234
- {/* Overview Tab */}
235
- <TabsContent value="overview" className="space-y-4">
236
- <div className="grid gap-4 md:grid-cols-3">
237
- <Card>
238
- <CardHeader>
239
- <CardTitle>{t('stats.totalUsers')}</CardTitle>
240
- <CardDescription>{t('stats.last30Days')}</CardDescription>
241
- </CardHeader>
242
- <CardContent>
243
- <div className="text-foreground">
244
- <span className="[font-size:var(--text-stats)] [font-weight:var(--font-weight-bold)]">
245
- {t('templates.overview.totalUsersDemoValue')}
246
- </span>
247
- <Badge variant="default" className="ml-2">
248
- +12%
249
- </Badge>
250
- </div>
251
- </CardContent>
252
- </Card>
253
-
254
- <Card>
255
- <CardHeader>
256
- <CardTitle>{t('stats.totalRevenue')}</CardTitle>
257
- <CardDescription>{t('stats.currentMonth')}</CardDescription>
258
- </CardHeader>
259
- <CardContent>
260
- <div className="text-foreground">
261
- <span className="[font-size:var(--text-stats)] [font-weight:var(--font-weight-bold)]">
262
- {t('templates.overview.revenueDemoValue')}
263
- </span>
264
- <Badge variant="secondary" className="ml-2">
265
- +8%
266
- </Badge>
267
- </div>
268
- </CardContent>
269
- </Card>
270
-
271
- <Card>
272
- <CardHeader>
273
- <CardTitle>{t('stats.conversionRate')}</CardTitle>
274
- <CardDescription>{t('stats.currentWeek')}</CardDescription>
275
- </CardHeader>
276
- <CardContent>
277
- <div className="text-foreground">
278
- <span className="[font-size:var(--text-stats)] [font-weight:var(--font-weight-bold)]">
279
- {t('templates.overview.conversionRateDemoValue')}
280
- </span>
281
- <Badge variant="outline" className="ml-2">
282
- -2%
283
- </Badge>
284
- </div>
285
- </CardContent>
286
- </Card>
287
- </div>
288
-
289
- <Card>
290
- <CardHeader>
291
- <CardTitle>{t('templates.overview.progressTitle')}</CardTitle>
292
- <CardDescription>
293
- {t('templates.overview.progressDescription')}
294
- </CardDescription>
295
- </CardHeader>
296
- <CardContent className="space-y-6">
297
- <div className="space-y-2">
298
- <div className="flex items-center justify-between">
299
- <Label>{t('templates.overview.projectProgress')}</Label>
300
- <span className="[font-size:var(--text-small)] text-muted-foreground">
301
- {progress}%
302
- </span>
303
- </div>
304
- <Progress value={progress} className="w-full" />
305
- <div className="flex gap-2">
306
- <Button
307
- size="sm"
308
- onClick={() => setProgress(Math.max(0, progress - 10))}
309
- >
310
- -10%
311
- </Button>
312
- <Button
313
- size="sm"
314
- onClick={() => setProgress(Math.min(100, progress + 10))}
315
- >
316
- +10%
317
- </Button>
318
- </div>
319
- </div>
320
-
321
- <Separator />
322
-
323
- <div className="space-y-2">
324
- <div className="flex items-center justify-between">
325
- <Label>{t('templates.overview.volume')}</Label>
326
- <span className="[font-size:var(--text-small)] text-muted-foreground">
327
- {sliderValue[0]}%
328
- </span>
329
- </div>
330
- <Slider
331
- value={sliderValue}
332
- onValueChange={setSliderValue}
333
- min={0}
334
- max={100}
335
- step={1}
336
- className="w-full"
337
- />
338
- </div>
339
- </CardContent>
340
- </Card>
341
- </TabsContent>
342
-
343
- {/* Forms Tab */}
344
- <TabsContent value="forms" className="space-y-4">
345
- <Card>
346
- <CardHeader>
347
- <CardTitle>{t('templates.forms.registrationTitle')}</CardTitle>
348
- <CardDescription>
349
- {t('templates.forms.registrationDescription')}
350
- </CardDescription>
351
- </CardHeader>
352
- <CardContent>
353
- <form onSubmit={handleFormSubmit} className="space-y-4">
354
- <div className="grid gap-4 md:grid-cols-2">
355
- <div className="space-y-2">
356
- <Label htmlFor="firstName">{t('templates.forms.firstName')}</Label>
357
- <Input
358
- id="firstName"
359
- placeholder={t('templates.forms.firstNamePlaceholder')}
360
- />
361
- </div>
362
- <div className="space-y-2">
363
- <Label htmlFor="lastName">{t('templates.forms.lastName')}</Label>
364
- <Input
365
- id="lastName"
366
- placeholder={t('templates.forms.lastNamePlaceholder')}
367
- />
368
- </div>
369
- </div>
370
-
371
- <div className="space-y-2">
372
- <Label htmlFor="email">{t('templates.forms.email')}</Label>
373
- <div className="relative">
374
- <Mail className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
375
- <Input
376
- id="email"
377
- type="email"
378
- placeholder={t('templates.forms.emailPlaceholder')}
379
- className="pl-10"
380
- />
381
- </div>
382
- </div>
383
-
384
- <div className="space-y-2">
385
- <Label htmlFor="phone">{t('templates.forms.phone')}</Label>
386
- <div className="relative">
387
- <Phone className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
388
- <Input
389
- id="phone"
390
- type="tel"
391
- placeholder={t('templates.forms.phonePlaceholder')}
392
- className="pl-10"
393
- />
394
- </div>
395
- </div>
396
-
397
- <div className="space-y-2">
398
- <Label htmlFor="role">{t('templates.forms.role')}</Label>
399
- <Select>
400
- <SelectTrigger id="role">
401
- <SelectValue placeholder={t('templates.forms.rolePlaceholder')} />
402
- </SelectTrigger>
403
- <SelectContent>
404
- <SelectItem value="developer">
405
- {t('templates.forms.roles.developer')}
406
- </SelectItem>
407
- <SelectItem value="designer">
408
- {t('templates.forms.roles.designer')}
409
- </SelectItem>
410
- <SelectItem value="manager">
411
- {t('templates.forms.roles.manager')}
412
- </SelectItem>
413
- <SelectItem value="analyst">
414
- {t('templates.forms.roles.analyst')}
415
- </SelectItem>
416
- </SelectContent>
417
- </Select>
418
- </div>
419
-
420
- <div className="space-y-2">
421
- <Label htmlFor="bio">{t('templates.forms.bio')}</Label>
422
- <Textarea
423
- id="bio"
424
- placeholder={t('templates.forms.bioPlaceholder')}
425
- rows={4}
426
- />
427
- </div>
428
-
429
- <Separator />
430
-
431
- <div className="space-y-4">
432
- <h4>{t('templates.forms.preferences')}</h4>
433
-
434
- <div className="space-y-3">
435
- <div className="flex items-center space-x-2">
436
- <Checkbox id="newsletter" />
437
- <Label htmlFor="newsletter" className="font-normal">
438
- {t('templates.forms.newsletter')}
439
- </Label>
440
- </div>
441
-
442
- <div className="flex items-center space-x-2">
443
- <Checkbox id="notifications" />
444
- <Label htmlFor="notifications" className="font-normal">
445
- {t('templates.forms.pushNotifications')}
446
- </Label>
447
- </div>
448
-
449
- <div className="flex items-center space-x-2">
450
- <Checkbox id="updates" />
451
- <Label htmlFor="updates" className="font-normal">
452
- {t('templates.forms.featureUpdates')}
453
- </Label>
454
- </div>
455
- </div>
456
-
457
- <Separator />
458
-
459
- <div className="space-y-3">
460
- <Label>{t('templates.forms.accountType')}</Label>
461
- <RadioGroup defaultValue="personal">
462
- <div className="flex items-center space-x-2">
463
- <RadioGroupItem value="personal" id="personal" />
464
- <Label htmlFor="personal" className="font-normal">
465
- {t('templates.forms.accountPersonal')}
466
- </Label>
467
- </div>
468
- <div className="flex items-center space-x-2">
469
- <RadioGroupItem value="business" id="business" />
470
- <Label htmlFor="business" className="font-normal">
471
- {t('templates.forms.accountBusiness')}
472
- </Label>
473
- </div>
474
- <div className="flex items-center space-x-2">
475
- <RadioGroupItem value="enterprise" id="enterprise" />
476
- <Label htmlFor="enterprise" className="font-normal">
477
- {t('templates.forms.accountEnterprise')}
478
- </Label>
479
- </div>
480
- </RadioGroup>
481
- </div>
482
- </div>
483
- </form>
484
- </CardContent>
485
- <CardFooter className="flex justify-between">
486
- <Button variant="outline">{t('templates.forms.cancel')}</Button>
487
- <Button onClick={handleFormSubmit}>
488
- {t('templates.forms.createAccount')}
489
- </Button>
490
- </CardFooter>
491
- </Card>
492
- </TabsContent>
493
-
494
- {/* Data Tab */}
495
- <TabsContent value="data" className="space-y-4">
496
- <Card>
497
- <CardHeader>
498
- <CardTitle>{t('templates.data.title')}</CardTitle>
499
- <CardDescription>{t('templates.data.description')}</CardDescription>
500
- </CardHeader>
501
- <CardContent>
502
- <div className="mb-4">
503
- <div className="relative">
504
- <Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
505
- <Input
506
- placeholder={t('templates.data.searchPlaceholder')}
507
- className="pl-10"
508
- />
509
- </div>
510
- </div>
511
-
512
- <div className="rounded-[var(--radius-lg)] border border-border overflow-hidden">
513
- <Table>
514
- <TableHeader>
515
- <TableRow>
516
- <TableHead>{t('templates.data.headers.name')}</TableHead>
517
- <TableHead>{t('templates.data.headers.email')}</TableHead>
518
- <TableHead>{t('templates.data.headers.role')}</TableHead>
519
- <TableHead>{t('templates.data.headers.status')}</TableHead>
520
- <TableHead className="text-right">
521
- {t('templates.data.headers.actions')}
522
- </TableHead>
523
- </TableRow>
524
- </TableHeader>
525
- <TableBody>
526
- <TableRow>
527
- <TableCell>Ana Silva</TableCell>
528
- <TableCell>{`ana.silva@${t('templates.data.demoEmailDomain')}`}</TableCell>
529
- <TableCell>{t('templates.data.roles.developerFemale')}</TableCell>
530
- <TableCell>
531
- <Badge variant="default">
532
- {t('templates.data.status.active')}
533
- </Badge>
534
- </TableCell>
535
- <TableCell className="text-right">
536
- <Button variant="ghost" size="sm">
537
- {t('templates.data.edit')}
538
- </Button>
539
- </TableCell>
540
- </TableRow>
541
- <TableRow>
542
- <TableCell>Bruno Costa</TableCell>
543
- <TableCell>{`bruno.costa@${t('templates.data.demoEmailDomain')}`}</TableCell>
544
- <TableCell>{t('templates.data.roles.designer')}</TableCell>
545
- <TableCell>
546
- <Badge variant="default">
547
- {t('templates.data.status.active')}
548
- </Badge>
549
- </TableCell>
550
- <TableCell className="text-right">
551
- <Button variant="ghost" size="sm">
552
- {t('templates.data.edit')}
553
- </Button>
554
- </TableCell>
555
- </TableRow>
556
- <TableRow>
557
- <TableCell>Carla Oliveira</TableCell>
558
- <TableCell>{`carla.oliveira@${t('templates.data.demoEmailDomain')}`}</TableCell>
559
- <TableCell>{t('templates.data.roles.manager')}</TableCell>
560
- <TableCell>
561
- <Badge variant="secondary">
562
- {t('templates.data.status.away')}
563
- </Badge>
564
- </TableCell>
565
- <TableCell className="text-right">
566
- <Button variant="ghost" size="sm">
567
- {t('templates.data.edit')}
568
- </Button>
569
- </TableCell>
570
- </TableRow>
571
- <TableRow>
572
- <TableCell>Diego Santos</TableCell>
573
- <TableCell>{`diego.santos@${t('templates.data.demoEmailDomain')}`}</TableCell>
574
- <TableCell>{t('templates.data.roles.analyst')}</TableCell>
575
- <TableCell>
576
- <Badge variant="outline">
577
- {t('templates.data.status.inactive')}
578
- </Badge>
579
- </TableCell>
580
- <TableCell className="text-right">
581
- <Button variant="ghost" size="sm">
582
- {t('templates.data.edit')}
583
- </Button>
584
- </TableCell>
585
- </TableRow>
586
- </TableBody>
587
- </Table>
588
- </div>
589
- </CardContent>
590
- <CardFooter className="flex justify-between items-center">
591
- <p className="text-muted-foreground">
592
- {t('templates.data.showing', { count: 4, total: 127 })}
593
- </p>
594
- <div className="flex gap-2">
595
- <Button variant="outline" size="sm">
596
- {t('templates.data.previous')}
597
- </Button>
598
- <Button variant="outline" size="sm">
599
- {t('templates.data.next')}
600
- </Button>
601
- </div>
602
- </CardFooter>
603
- </Card>
604
- </TabsContent>
605
-
606
- {/* Settings Tab */}
607
- <TabsContent value="settings" className="space-y-4">
608
- <Card>
609
- <CardHeader>
610
- <CardTitle>{t('templates.settings.title')}</CardTitle>
611
- <CardDescription>{t('templates.settings.description')}</CardDescription>
612
- </CardHeader>
613
- <CardContent className="space-y-6">
614
- <div className="flex items-center justify-between">
615
- <div className="space-y-1">
616
- <Label>{t('templates.settings.darkMode')}</Label>
617
- <p className="text-muted-foreground">
618
- {t('templates.settings.darkModeDescription')}
619
- </p>
620
- </div>
621
- <Switch checked={switchEnabled} onCheckedChange={setSwitchEnabled} />
622
- </div>
623
-
624
- <Separator />
625
-
626
- <div className="flex items-center justify-between">
627
- <div className="space-y-1">
628
- <Label>{t('templates.settings.emailNotifications')}</Label>
629
- <p className="text-muted-foreground">
630
- {t('templates.settings.emailNotificationsDescription')}
631
- </p>
632
- </div>
633
- <Switch defaultChecked />
634
- </div>
635
-
636
- <Separator />
637
-
638
- <div className="flex items-center justify-between">
639
- <div className="space-y-1">
640
- <Label>{t('templates.settings.pushNotifications')}</Label>
641
- <p className="text-muted-foreground">
642
- {t('templates.settings.pushNotificationsDescription')}
643
- </p>
644
- </div>
645
- <Switch />
646
- </div>
647
-
648
- <Separator />
649
-
650
- <div className="space-y-3">
651
- <Label>{t('templates.settings.language')}</Label>
652
- <Select defaultValue="pt-br">
653
- <SelectTrigger>
654
- <SelectValue />
655
- </SelectTrigger>
656
- <SelectContent>
657
- <SelectItem value="pt-br">
658
- {t('templates.settings.languages.ptBR')}
659
- </SelectItem>
660
- <SelectItem value="en">
661
- {t('templates.settings.languages.en')}
662
- </SelectItem>
663
- <SelectItem value="es">
664
- {t('templates.settings.languages.es')}
665
- </SelectItem>
666
- </SelectContent>
667
- </Select>
668
- </div>
669
-
670
- <Separator />
671
-
672
- <div className="space-y-3">
673
- <Label>{t('templates.settings.timezone')}</Label>
674
- <Select defaultValue="america-sao-paulo">
675
- <SelectTrigger>
676
- <SelectValue />
677
- </SelectTrigger>
678
- <SelectContent>
679
- <SelectItem value="america-sao-paulo">
680
- {t('templates.settings.timezones.saoPaulo')}
681
- </SelectItem>
682
- <SelectItem value="america-new-york">
683
- {t('templates.settings.timezones.newYork')}
684
- </SelectItem>
685
- <SelectItem value="europe-london">
686
- {t('templates.settings.timezones.london')}
687
- </SelectItem>
688
- </SelectContent>
689
- </Select>
690
- </div>
691
- </CardContent>
692
- <CardFooter className="flex justify-between">
693
- <Button variant="outline">{t('templates.settings.restoreDefaults')}</Button>
694
- <Button>{t('templates.settings.saveChanges')}</Button>
695
- </CardFooter>
696
- </Card>
697
- </TabsContent>
698
- </Tabs>
699
- </section>
700
-
701
- <Separator className="my-8" />
702
-
703
- {/* Button Variants */}
704
- <section>
705
- <h3 className="mb-4">{t('templates.sections.buttons')}</h3>
706
- <Card>
707
- <CardHeader>
708
- <CardTitle>{t('templates.buttons.title')}</CardTitle>
709
- <CardDescription>{t('templates.buttons.description')}</CardDescription>
710
- </CardHeader>
711
- <CardContent className="space-y-6">
712
- <div className="space-y-3">
713
- <Label>{t('templates.buttons.variants')}</Label>
714
- <div className="flex flex-wrap gap-3">
715
- <Button variant="default">
716
- {t('templates.buttons.variantLabels.default')}
717
- </Button>
718
- <Button variant="secondary">
719
- {t('templates.buttons.variantLabels.secondary')}
720
- </Button>
721
- <Button variant="outline">
722
- {t('templates.buttons.variantLabels.outline')}
723
- </Button>
724
- <Button variant="ghost">
725
- {t('templates.buttons.variantLabels.ghost')}
726
- </Button>
727
- <Button variant="link">{t('templates.buttons.variantLabels.link')}</Button>
728
- <Button variant="destructive">
729
- {t('templates.buttons.variantLabels.destructive')}
730
- </Button>
731
- </div>
732
- </div>
733
-
734
- <Separator />
735
-
736
- <div className="space-y-3">
737
- <Label>{t('templates.buttons.sizes')}</Label>
738
- <div className="flex flex-wrap items-center gap-3">
739
- <Button size="sm">{t('templates.buttons.sizeLabels.small')}</Button>
740
- <Button size="default">{t('templates.buttons.sizeLabels.default')}</Button>
741
- <Button size="lg">{t('templates.buttons.sizeLabels.large')}</Button>
742
- <Button size="icon">
743
- <Settings className="h-4 w-4" />
744
- </Button>
745
- </div>
746
- </div>
747
-
748
- <Separator />
749
-
750
- <div className="space-y-3">
751
- <Label>{t('templates.buttons.withIcons')}</Label>
752
- <div className="flex flex-wrap gap-3">
753
- <Button>
754
- <User className="mr-2 h-4 w-4" />
755
- {t('templates.buttons.profile')}
756
- </Button>
757
- <Button variant="secondary">
758
- <Mail className="mr-2 h-4 w-4" />
759
- {t('templates.buttons.messages')}
760
- </Button>
761
- <Button variant="outline">
762
- <Calendar className="mr-2 h-4 w-4" />
763
- {t('templates.buttons.schedule')}
764
- </Button>
765
- </div>
766
- </div>
767
-
768
- <Separator />
769
-
770
- <div className="space-y-3">
771
- <Label>{t('templates.buttons.states')}</Label>
772
- <div className="flex flex-wrap gap-3">
773
- <Button disabled>{t('templates.buttons.disabled')}</Button>
774
- <Button variant="outline" disabled>
775
- {t('templates.buttons.outlineDisabled')}
776
- </Button>
777
- </div>
778
- </div>
779
- </CardContent>
780
- </Card>
781
- </section>
782
-
783
- <Separator className="my-8" />
784
-
785
- {/* Badges */}
786
- <section>
787
- <h3 className="mb-4">{t('templates.sections.badges')}</h3>
788
- <Card>
789
- <CardHeader>
790
- <CardTitle>{t('templates.badges.title')}</CardTitle>
791
- <CardDescription>{t('templates.badges.description')}</CardDescription>
792
- </CardHeader>
793
- <CardContent>
794
- <div className="flex flex-wrap gap-3">
795
- <Badge variant="default">{t('templates.badges.labels.default')}</Badge>
796
- <Badge variant="secondary">{t('templates.badges.labels.secondary')}</Badge>
797
- <Badge variant="outline">{t('templates.badges.labels.outline')}</Badge>
798
- <Badge variant="destructive">
799
- {t('templates.badges.labels.destructive')}
800
- </Badge>
801
- <Badge className="bg-success text-success-foreground">
802
- {t('templates.badges.labels.success')}
803
- </Badge>
804
- <Badge className="bg-warning text-warning-foreground">
805
- {t('templates.badges.labels.warning')}
806
- </Badge>
807
- <Badge className="bg-info text-info-foreground">
808
- {t('templates.badges.labels.info')}
809
- </Badge>
810
- </div>
811
- </CardContent>
812
- </Card>
813
- </section>
814
-
815
- <Separator className="my-8" />
816
-
817
- {/* Dialogs */}
818
- <section>
819
- <h3 className="mb-4">{t('templates.sections.dialogs')}</h3>
820
- <div className="grid gap-4 md:grid-cols-2">
821
- <Card>
822
- <CardHeader>
823
- <CardTitle>{t('templates.dialogs.dialogTitle')}</CardTitle>
824
- <CardDescription>{t('templates.dialogs.dialogDescription')}</CardDescription>
825
- </CardHeader>
826
- <CardContent className="flex justify-center py-6">
827
- <Dialog>
828
- <DialogTrigger asChild>
829
- <Button variant="outline">{t('templates.dialogs.editProfile')}</Button>
830
- </DialogTrigger>
831
- <DialogContent className="sm:max-w-[425px]">
832
- <DialogHeader>
833
- <DialogTitle>{t('templates.dialogs.editProfile')}</DialogTitle>
834
- <DialogDescription>
835
- {t('templates.dialogs.editProfileDescription')}
836
- </DialogDescription>
837
- </DialogHeader>
838
- <div className="grid gap-4 py-4">
839
- <div className="grid grid-cols-4 items-center gap-4">
840
- <Label htmlFor="name" className="text-right">
841
- {t('templates.dialogs.name')}
842
- </Label>
843
- <Input
844
- id="name"
845
- value={dialogName}
846
- onChange={e => setDialogName(e.target.value)}
847
- className="col-span-3"
848
- />
849
- </div>
850
- <div className="grid grid-cols-4 items-center gap-4">
851
- <Label htmlFor="username" className="text-right">
852
- {t('templates.dialogs.username')}
853
- </Label>
854
- <Input
855
- id="username"
856
- value={dialogUsername}
857
- onChange={e => setDialogUsername(e.target.value)}
858
- className="col-span-3"
859
- />
860
- </div>
861
- </div>
862
- <DialogFooter>
863
- <Button type="submit">{t('templates.dialogs.update')}</Button>
864
- </DialogFooter>
865
- </DialogContent>
866
- </Dialog>
867
- </CardContent>
868
- </Card>
869
-
870
- <Card>
871
- <CardHeader>
872
- <CardTitle>{t('templates.dialogs.alertDialogTitle')}</CardTitle>
873
- <CardDescription>
874
- {t('templates.dialogs.alertDialogDescription')}
875
- </CardDescription>
876
- </CardHeader>
877
- <CardContent className="flex justify-center py-6">
878
- <AlertDialog>
879
- <AlertDialogTrigger asChild>
880
- <Button variant="destructive">
881
- {t('templates.dialogs.deleteAccount')}
882
- </Button>
883
- </AlertDialogTrigger>
884
- <AlertDialogContent className="sm:max-w-[425px]">
885
- <AlertDialogHeader>
886
- <AlertDialogTitle>
887
- {t('templates.dialogs.areYouSure')}
888
- </AlertDialogTitle>
889
- <AlertDialogDescription>
890
- {t('templates.dialogs.deleteWarning')}
891
- </AlertDialogDescription>
892
- </AlertDialogHeader>
893
- <AlertDialogFooter>
894
- <AlertDialogCancel>{t('templates.dialogs.cancel')}</AlertDialogCancel>
895
- <AlertDialogAction className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
896
- {t('templates.dialogs.continue')}
897
- </AlertDialogAction>
898
- </AlertDialogFooter>
899
- </AlertDialogContent>
900
- </AlertDialog>
901
- </CardContent>
902
- </Card>
903
- </div>
904
- </section>
905
-
906
- <Separator className="my-8" />
907
-
908
- {/* Sidebar Variations */}
909
- <section>
910
- <h3 className="mb-4">{t('templates.sections.sidebarVariations')}</h3>
911
- <Card>
912
- <CardHeader>
913
- <CardTitle>{t('templates.sidebar.title')}</CardTitle>
914
- <CardDescription>{t('templates.sidebar.description')}</CardDescription>
915
- </CardHeader>
916
- <CardContent>
917
- <Tabs defaultValue="assistant" className="w-full">
918
- <TabsList className="mb-4">
919
- <TabsTrigger value="assistant">
920
- {t('templates.sidebar.assistantMode')}
921
- </TabsTrigger>
922
- <TabsTrigger value="default">
923
- {t('templates.sidebar.defaultMode')}
924
- </TabsTrigger>
925
- </TabsList>
926
-
927
- <TabsContent value="assistant">
928
- <div
929
- className="relative h-[600px] border rounded-[var(--radius-lg)] bg-muted/20 overflow-hidden"
930
- style={{ transform: 'translateZ(0)' }}
931
- >
932
- <Sidebar
933
- expanded={true}
934
- width={sidebarWidth}
935
- onToggle={() => {}}
936
- user={{ email: 'admin@xertica.com' }}
937
- onLogout={() => toast(t('templates.sidebar.logoutToast'))}
938
- location={{ pathname: '/assistant/current' }}
939
- navigate={() => {}}
940
- variant="assistant"
941
- search={{
942
- show: true,
943
- placeholder: t('templates.sidebar.searchTopicsPlaceholder'),
944
- }}
945
- fixedArea={{
946
- show: true,
947
- content: (
948
- <Button className="w-full bg-sidebar-primary hover:bg-sidebar-primary/90 text-sidebar-primary-foreground shadow-lg font-bold border-none transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98]">
949
- <Plus className="w-4 h-4 mr-2" />
950
- {t('templates.sidebar.newConversation')}
951
- </Button>
952
- ),
953
- }}
954
- navigationGroups={[
955
- {
956
- id: 'recent',
957
- label: t('templates.sidebar.recent'),
958
- icon: Clock,
959
- items: [
960
- {
961
- path: '/assistant/refatoracao',
962
- label: t('templates.sidebar.items.sidebarRefactor'),
963
- icon: PanelLeft,
964
- description: t(
965
- 'templates.sidebar.items.sidebarRefactorDescription'
966
- ),
967
- actions: [
968
- {
969
- label: t('templates.sidebar.actions.rename'),
970
- icon: FileEdit,
971
- onClick: () =>
972
- toast(t('templates.sidebar.actions.renameToast')),
973
- },
974
- {
975
- label: t('templates.sidebar.actions.move'),
976
- icon: ArrowRightLeft,
977
- children: [
978
- {
979
- label: t('templates.sidebar.actions.moveActive'),
980
- onClick: () =>
981
- toast(
982
- t('templates.sidebar.actions.moveActiveToast')
983
- ),
984
- },
985
- {
986
- label: t('templates.sidebar.actions.moveMonitoring'),
987
- onClick: () =>
988
- toast(
989
- t('templates.sidebar.actions.moveMonitoringToast')
990
- ),
991
- },
992
- {
993
- label: t('templates.sidebar.actions.moveArchive'),
994
- onClick: () =>
995
- toast(
996
- t('templates.sidebar.actions.moveArchiveToast')
997
- ),
998
- },
999
- ],
1000
- },
1001
- {
1002
- label: t('templates.sidebar.actions.clear'),
1003
- icon: Trash2,
1004
- onClick: () =>
1005
- toast(t('templates.sidebar.actions.clearToast')),
1006
- variant: 'destructive',
1007
- },
1008
- ],
1009
- },
1010
- ],
1011
- },
1012
- {
1013
- id: 'projects',
1014
- label: t('templates.sidebar.constructionMonitoring'),
1015
- icon: Map,
1016
- actions: [
1017
- {
1018
- label: t('templates.sidebar.actions.newCategory'),
1019
- icon: Plus,
1020
- onClick: () =>
1021
- toast(t('templates.sidebar.actions.newCategoryToast')),
1022
- },
1023
- {
1024
- label: t('templates.sidebar.actions.archiveGroup'),
1025
- icon: Archive,
1026
- onClick: () =>
1027
- toast(t('templates.sidebar.actions.archiveGroupToast')),
1028
- },
1029
- ],
1030
- items: [
1031
- {
1032
- path: '/assistant/br163',
1033
- label: t('templates.sidebar.items.br163Restoration'),
1034
- icon: () => (
1035
- <div className="w-2 h-2 rounded-full bg-yellow-500" />
1036
- ),
1037
- description: (
1038
- <div className="space-y-1.5 min-w-[160px]">
1039
- <Progress
1040
- value={67}
1041
- className="h-1.5 bg-sidebar-foreground/10"
1042
- />
1043
- <div className="flex justify-between items-center text-[10px] text-sidebar-foreground/60">
1044
- <span>{t('templates.sidebar.items.br163Location')}</span>
1045
- <span>67%</span>
1046
- </div>
1047
- </div>
1048
- ),
1049
- },
1050
- ],
1051
- },
1052
- ]}
1053
- />
1054
- <div
1055
- className="absolute inset-y-0 right-0 p-8 flex items-center justify-center transition-all duration-300"
1056
- style={{ left: `${sidebarWidth}px` }}
1057
- >
1058
- <p className="text-muted-foreground text-center">
1059
- {t('templates.sidebar.assistantContent')}
1060
- </p>
1061
- </div>
1062
- </div>
1063
- </TabsContent>
1064
-
1065
- <TabsContent value="default">
1066
- <div
1067
- className="relative h-[600px] border rounded-[var(--radius-lg)] bg-muted/20 overflow-hidden"
1068
- style={{ transform: 'translateZ(0)' }}
1069
- >
1070
- <Sidebar
1071
- expanded={true}
1072
- width={sidebarWidth}
1073
- onToggle={() => {}}
1074
- user={{
1075
- name: 'Ariel Santos',
1076
- email: 'admin@xertica.com',
1077
- avatar: 'https://github.com/shadcn.png',
1078
- }}
1079
- onLogout={() => toast(t('templates.sidebar.logoutToast'))}
1080
- onSettingsClick={() =>
1081
- toast(t('templates.sidebar.settingsClickedToast'))
1082
- }
1083
- location={{ pathname: '/home' }}
1084
- navigate={() => {}}
1085
- variant="default"
1086
- routes={[
1087
- { path: '/home', label: t('templates.sidebar.routes.home'), icon: Home },
1088
- {
1089
- path: '/dashboard',
1090
- label: t('templates.sidebar.routes.dashboard'),
1091
- icon: Users,
1092
- },
1093
- {
1094
- path: '/settings',
1095
- label: t('templates.sidebar.routes.settings'),
1096
- icon: Settings,
1097
- },
1098
- ]}
1099
- />
1100
- <div
1101
- className="absolute inset-y-0 right-0 p-8 flex items-center justify-center transition-all duration-300"
1102
- style={{ left: `${sidebarWidth}px` }}
1103
- >
1104
- <p className="text-muted-foreground text-center">
1105
- {t('templates.sidebar.defaultContent')}
1106
- </p>
1107
- </div>
1108
- </div>
1109
- </TabsContent>
1110
- </Tabs>
1111
- </CardContent>
1112
- </Card>
1113
- </section>
1114
-
1115
- <Separator className="my-8" />
1116
-
1117
- {/* ── v2.2.1 Components ──────────────────────────────────── */}
1118
- <Separator className="my-8" />
1119
-
1120
- <section>
1121
- <h3 className="mb-4">{t('templates.sections.enhancedComponents')}</h3>
1122
- <div className="space-y-6">
1123
- {/* Pagination com disabled */}
1124
- <Card>
1125
- <CardHeader>
1126
- <CardTitle>{t('templates.enhanced.pagination.title')}</CardTitle>
1127
- <CardDescription>
1128
- <Trans
1129
- i18nKey="templates.enhanced.pagination.description"
1130
- components={{ code: <code className="bg-muted px-1 rounded text-xs" /> }}
1131
- />
1132
- </CardDescription>
1133
- </CardHeader>
1134
- <CardContent className="space-y-4">
1135
- <p className="text-sm text-muted-foreground">
1136
- {t('templates.enhanced.pagination.pageOfTotal', {
1137
- current: currentPage,
1138
- total: totalPages,
1139
- })}
1140
- </p>
1141
- <Pagination>
1142
- <PaginationContent>
1143
- <PaginationItem>
1144
- <PaginationPrevious
1145
- href="#"
1146
- onClick={e => {
1147
- e.preventDefault();
1148
- prev();
1149
- }}
1150
- disabled={!canGoPrev}
1151
- />
1152
- </PaginationItem>
1153
- {items.map((item) =>
1154
- item.type === 'ellipsis' ? (
1155
- <PaginationItem key={item.key}>
1156
- <PaginationEllipsis />
1157
- </PaginationItem>
1158
- ) : (
1159
- <PaginationItem key={item.page}>
1160
- <PaginationLink
1161
- href="#"
1162
- isActive={item.page === currentPage}
1163
- onClick={e => {
1164
- e.preventDefault();
1165
- goTo(item.page);
1166
- }}
1167
- >
1168
- {item.page}
1169
- </PaginationLink>
1170
- </PaginationItem>
1171
- )
1172
- )}
1173
- <PaginationItem>
1174
- <PaginationNext
1175
- href="#"
1176
- onClick={e => {
1177
- e.preventDefault();
1178
- next();
1179
- }}
1180
- disabled={!canGoNext}
1181
- />
1182
- </PaginationItem>
1183
- </PaginationContent>
1184
- </Pagination>
1185
- </CardContent>
1186
- </Card>
1187
-
1188
- {/* Stepper com ARIA */}
1189
- <Card>
1190
- <CardHeader>
1191
- <CardTitle>{t('templates.enhanced.stepper.title')}</CardTitle>
1192
- <CardDescription>
1193
- <Trans
1194
- i18nKey="templates.enhanced.stepper.description"
1195
- components={{ code: <code className="bg-muted px-1 rounded text-xs" /> }}
1196
- />
1197
- </CardDescription>
1198
- </CardHeader>
1199
- <CardContent className="space-y-4">
1200
- <Stepper currentStep={currentStep}>
1201
- <Step
1202
- step={1}
1203
- label={t('templates.enhanced.stepper.step1Label')}
1204
- description={t('templates.enhanced.stepper.step1Description')}
1205
- />
1206
- <Step
1207
- step={2}
1208
- label={t('templates.enhanced.stepper.step2Label')}
1209
- description={t('templates.enhanced.stepper.step2Description')}
1210
- />
1211
- <Step
1212
- step={3}
1213
- label={t('templates.enhanced.stepper.step3Label')}
1214
- description={t('templates.enhanced.stepper.step3Description')}
1215
- />
1216
- </Stepper>
1217
- <div className="flex gap-2 pt-2">
1218
- <Button
1219
- variant="outline"
1220
- size="sm"
1221
- onClick={stepPrev}
1222
- disabled={isFirstStep}
1223
- >
1224
- {t('templates.enhanced.stepper.previous')}
1225
- </Button>
1226
- <Button size="sm" onClick={stepNext} disabled={isLastStep}>
1227
- {isLastStep
1228
- ? t('templates.enhanced.stepper.finish')
1229
- : t('templates.enhanced.stepper.next')}
1230
- </Button>
1231
- </div>
1232
- </CardContent>
1233
- </Card>
1234
-
1235
- {/* TreeView com ariaLabel */}
1236
- <Card>
1237
- <CardHeader>
1238
- <CardTitle>{t('templates.enhanced.treeView.title')}</CardTitle>
1239
- <CardDescription>
1240
- <Trans
1241
- i18nKey="templates.enhanced.treeView.description"
1242
- components={{ code: <code className="bg-muted px-1 rounded text-xs" /> }}
1243
- />
1244
- </CardDescription>
1245
- </CardHeader>
1246
- <CardContent>
1247
- <TreeView
1248
- data={treeData}
1249
- aria-label={t('templates.enhanced.treeView.ariaLabel')}
1250
- defaultExpanded={['components', 'ui']}
1251
- onNodeSelect={node =>
1252
- console.log(t('templates.enhanced.treeView.selectedConsoleLog'), node.label)
1253
- }
1254
- className="max-w-xs border border-border rounded-[var(--radius-lg)] p-2"
1255
- />
1256
- </CardContent>
1257
- </Card>
1258
-
1259
- {/* RichTextEditor sem Auto-save */}
1260
- <Card>
1261
- <CardHeader>
1262
- <CardTitle>{t('templates.enhanced.richText.title')}</CardTitle>
1263
- <CardDescription>
1264
- <Trans
1265
- i18nKey="templates.enhanced.richText.description"
1266
- components={{ code: <code className="bg-muted px-1 rounded text-xs" /> }}
1267
- />
1268
- </CardDescription>
1269
- </CardHeader>
1270
- <CardContent className="h-64">
1271
- <RichTextEditor
1272
- value={richText}
1273
- onChange={setRichText}
1274
- placeholder={t('templates.enhanced.richText.placeholder')}
1275
- showWordCount
1276
- showCharacterCount
1277
- allowSearch={false}
1278
- />
1279
- </CardContent>
1280
- </Card>
1281
- </div>
1282
- </section>
1283
-
1284
- {/* Footer Note */}
1285
- <Card className="mt-8">
1286
- <CardHeader>
1287
- <CardTitle>{t('templates.footer.title')}</CardTitle>
1288
- <CardDescription>{t('templates.footer.subtitle')}</CardDescription>
1289
- </CardHeader>
1290
- <CardContent className="space-y-4">
1291
- <p className="text-muted-foreground">
1292
- {t('templates.footer.descriptionPart1')}
1293
- <code className="bg-muted px-2 py-1 rounded-[var(--radius-sm)] [font-size:var(--text-small)]">
1294
- xertica-ui
1295
- </code>
1296
- {t('templates.footer.descriptionPart2')}
1297
- </p>
1298
- <Alert variant="info">
1299
- <AlertTitle>{t('templates.footer.tipTitle')}</AlertTitle>
1300
- <AlertDescription>
1301
- {t('templates.footer.tipDescriptionPart1')}
1302
- <code className="bg-muted px-1 rounded">styles/xertica/tokens.css</code>
1303
- {t('templates.footer.tipDescriptionPart2')}
1304
- </AlertDescription>
1305
- </Alert>
1306
- </CardContent>
1307
- </Card>
1308
- </div>
1309
- </div>
1310
- </ScrollArea>
1311
- </main>
1312
- </div>
1313
- );
1314
- }
1
+ import React, { useState } from 'react';
2
+ import {
3
+ Button,
4
+ Input,
5
+ Label,
6
+ Card,
7
+ CardHeader,
8
+ CardTitle,
9
+ CardDescription,
10
+ CardContent,
11
+ CardFooter,
12
+ Tabs,
13
+ TabsContent,
14
+ TabsList,
15
+ TabsTrigger,
16
+ Badge,
17
+ Alert,
18
+ AlertDescription,
19
+ AlertTitle,
20
+ Checkbox,
21
+ RadioGroup,
22
+ RadioGroupItem,
23
+ Switch,
24
+ Select,
25
+ SelectContent,
26
+ SelectItem,
27
+ SelectTrigger,
28
+ SelectValue,
29
+ Textarea,
30
+ Progress,
31
+ Separator,
32
+ Table,
33
+ TableBody,
34
+ TableCell,
35
+ TableHead,
36
+ TableHeader,
37
+ TableRow,
38
+ Slider,
39
+ ScrollArea,
40
+ Dialog,
41
+ DialogTrigger,
42
+ DialogContent,
43
+ DialogHeader,
44
+ DialogTitle,
45
+ DialogDescription,
46
+ DialogFooter,
47
+ AlertDialog,
48
+ AlertDialogTrigger,
49
+ AlertDialogContent,
50
+ AlertDialogHeader,
51
+ AlertDialogTitle,
52
+ AlertDialogDescription,
53
+ AlertDialogFooter,
54
+ AlertDialogAction,
55
+ AlertDialogCancel,
56
+ Pagination,
57
+ PaginationContent,
58
+ PaginationItem,
59
+ PaginationLink,
60
+ PaginationNext,
61
+ PaginationPrevious,
62
+ PaginationEllipsis,
63
+ Stepper,
64
+ Step,
65
+ TreeView,
66
+ RichTextEditor,
67
+ usePagination,
68
+ useStepper,
69
+ } from 'xertica-ui/ui';
70
+ import { Header, Sidebar } from 'xertica-ui/layout';
71
+ import { useLayout, useTheme } from 'xertica-ui/hooks';
72
+ import { toast } from 'sonner';
73
+ import { Link } from 'react-router-dom';
74
+ import { Trans, useTranslation } from 'react-i18next';
75
+ import {
76
+ Settings,
77
+ User,
78
+ Mail,
79
+ Phone,
80
+ Calendar,
81
+ Search,
82
+ PanelLeft,
83
+ Home,
84
+ Users,
85
+ Plus,
86
+ Trash2,
87
+ Archive,
88
+ ArrowRightLeft,
89
+ FileEdit,
90
+ Clock,
91
+ Map,
92
+ } from 'lucide-react';
93
+
94
+ export function TemplateContent() {
95
+ const { t } = useTranslation();
96
+
97
+ // ── TreeView demo data (built inside the component so labels react to language switches) ──
98
+ const treeData = [
99
+ {
100
+ id: 'components',
101
+ label: t('templates.enhanced.treeView.nodes.components'),
102
+ children: [
103
+ {
104
+ id: 'ui',
105
+ label: t('templates.enhanced.treeView.nodes.ui'),
106
+ children: [
107
+ { id: 'button', label: t('templates.enhanced.treeView.nodes.button') },
108
+ { id: 'input', label: t('templates.enhanced.treeView.nodes.input') },
109
+ { id: 'pagination', label: t('templates.enhanced.treeView.nodes.pagination') },
110
+ ],
111
+ },
112
+ {
113
+ id: 'layout',
114
+ label: t('templates.enhanced.treeView.nodes.layout'),
115
+ children: [
116
+ { id: 'sidebar', label: t('templates.enhanced.treeView.nodes.sidebar') },
117
+ { id: 'header', label: t('templates.enhanced.treeView.nodes.header') },
118
+ ],
119
+ },
120
+ ],
121
+ },
122
+ {
123
+ id: 'hooks',
124
+ label: t('templates.enhanced.treeView.nodes.hooks'),
125
+ // Hook identifiers stay as code — not translated.
126
+ children: [
127
+ { id: 'use-pagination', label: 'usePagination' },
128
+ { id: 'use-stepper', label: 'useStepper' },
129
+ { id: 'use-tree-view', label: 'useTreeView' },
130
+ ],
131
+ },
132
+ ];
133
+ const { sidebarExpanded, sidebarWidth } = useLayout();
134
+ const { disableDarkMode } = useTheme();
135
+ const [progress, setProgress] = useState(45);
136
+ const [sliderValue, setSliderValue] = useState([50]);
137
+ const [switchEnabled, setSwitchEnabled] = useState(false);
138
+ const [richText, setRichText] = useState('');
139
+
140
+ // Dialog demo inputs (controlled so they re-localise on language switch).
141
+ // Seeded lazily from `t(...)` so the initial value reflects the current
142
+ // language at first render; subsequent language switches don't overwrite
143
+ // user edits.
144
+ const [dialogName, setDialogName] = useState(() => t('templates.dialogs.nameDefaultValue'));
145
+ const [dialogUsername, setDialogUsername] = useState(() =>
146
+ t('templates.dialogs.usernameDefaultValue')
147
+ );
148
+
149
+ // ── Pagination demo ─────────────────────────────────────────────────────────
150
+ const { currentPage, totalPages, items, next, prev, goTo, canGoPrev, canGoNext } = usePagination({
151
+ totalItems: 120,
152
+ pageSize: 10,
153
+ });
154
+
155
+ // ── Stepper demo ────────────────────────────────────────────────────────────
156
+ const {
157
+ currentStep,
158
+ next: stepNext,
159
+ prev: stepPrev,
160
+ isFirstStep,
161
+ isLastStep,
162
+ } = useStepper({ totalSteps: 3 });
163
+
164
+ const handleFormSubmit = (e: React.FormEvent) => {
165
+ e.preventDefault();
166
+ toast.success(t('templates.formSubmitSuccess'));
167
+ };
168
+
169
+ return (
170
+ <div
171
+ style={{
172
+ paddingLeft: sidebarExpanded ? `${sidebarWidth}px` : '80px',
173
+ }}
174
+ className="flex-1 flex flex-col overflow-hidden transition-all duration-300"
175
+ >
176
+ <Header
177
+ showThemeToggle={true}
178
+ showLanguageSelector={true}
179
+ breadcrumbs={[
180
+ { label: t('nav.designSystem'), href: '/home' },
181
+ { label: t('templates.breadcrumb') },
182
+ ]}
183
+ renderLink={(href: string, props: any) => <Link to={href} {...props} />}
184
+ />
185
+
186
+ <main className="flex-1 overflow-hidden bg-muted">
187
+ <ScrollArea className="h-full">
188
+ <div className="p-5 sm:p-4 md:p-6">
189
+ <div className="max-w-6xl mx-auto space-y-8">
190
+ <div className="space-y-2">
191
+ <h2>{t('templates.title')}</h2>
192
+ <p className="text-muted-foreground">{t('templates.subtitle')}</p>
193
+ </div>
194
+
195
+ {/* Alert Examples */}
196
+ <section>
197
+ <h3 className="mb-4">{t('templates.sections.alerts')}</h3>
198
+ <div className="grid gap-4 md:grid-cols-2">
199
+ <Alert variant="info">
200
+ <AlertTitle>{t('templates.alerts.infoTitle')}</AlertTitle>
201
+ <AlertDescription>{t('templates.alerts.infoDescription')}</AlertDescription>
202
+ </Alert>
203
+
204
+ <Alert variant="destructive">
205
+ <AlertTitle>{t('templates.alerts.errorTitle')}</AlertTitle>
206
+ <AlertDescription>{t('templates.alerts.errorDescription')}</AlertDescription>
207
+ </Alert>
208
+
209
+ <Alert variant="success">
210
+ <AlertTitle>{t('templates.alerts.successTitle')}</AlertTitle>
211
+ <AlertDescription>{t('templates.alerts.successDescription')}</AlertDescription>
212
+ </Alert>
213
+
214
+ <Alert variant="warning">
215
+ <AlertTitle>{t('templates.alerts.warningTitle')}</AlertTitle>
216
+ <AlertDescription>{t('templates.alerts.warningDescription')}</AlertDescription>
217
+ </Alert>
218
+ </div>
219
+ </section>
220
+
221
+ <Separator className="my-8" />
222
+
223
+ {/* Cards & Tabs */}
224
+ <section>
225
+ <h3 className="mb-4">{t('templates.sections.cardsAndTabs')}</h3>
226
+
227
+ <Tabs defaultValue="overview" className="w-full">
228
+ <TabsList className="grid w-full grid-cols-4">
229
+ <TabsTrigger value="overview">{t('templates.tabs.overview')}</TabsTrigger>
230
+ <TabsTrigger value="forms">{t('templates.tabs.forms')}</TabsTrigger>
231
+ <TabsTrigger value="data">{t('templates.tabs.data')}</TabsTrigger>
232
+ <TabsTrigger value="settings">{t('templates.tabs.settings')}</TabsTrigger>
233
+ </TabsList>
234
+
235
+ {/* Overview Tab */}
236
+ <TabsContent value="overview" className="space-y-4">
237
+ <div className="grid gap-4 md:grid-cols-3">
238
+ <Card>
239
+ <CardHeader>
240
+ <CardTitle>{t('stats.totalUsers')}</CardTitle>
241
+ <CardDescription>{t('stats.last30Days')}</CardDescription>
242
+ </CardHeader>
243
+ <CardContent>
244
+ <div className="text-foreground">
245
+ <span className="[font-size:var(--text-stats)] [font-weight:var(--font-weight-bold)]">
246
+ {t('templates.overview.totalUsersDemoValue')}
247
+ </span>
248
+ <Badge variant="default" className="ml-2">
249
+ +12%
250
+ </Badge>
251
+ </div>
252
+ </CardContent>
253
+ </Card>
254
+
255
+ <Card>
256
+ <CardHeader>
257
+ <CardTitle>{t('stats.totalRevenue')}</CardTitle>
258
+ <CardDescription>{t('stats.currentMonth')}</CardDescription>
259
+ </CardHeader>
260
+ <CardContent>
261
+ <div className="text-foreground">
262
+ <span className="[font-size:var(--text-stats)] [font-weight:var(--font-weight-bold)]">
263
+ {t('templates.overview.revenueDemoValue')}
264
+ </span>
265
+ <Badge variant="secondary" className="ml-2">
266
+ +8%
267
+ </Badge>
268
+ </div>
269
+ </CardContent>
270
+ </Card>
271
+
272
+ <Card>
273
+ <CardHeader>
274
+ <CardTitle>{t('stats.conversionRate')}</CardTitle>
275
+ <CardDescription>{t('stats.currentWeek')}</CardDescription>
276
+ </CardHeader>
277
+ <CardContent>
278
+ <div className="text-foreground">
279
+ <span className="[font-size:var(--text-stats)] [font-weight:var(--font-weight-bold)]">
280
+ {t('templates.overview.conversionRateDemoValue')}
281
+ </span>
282
+ <Badge variant="outline" className="ml-2">
283
+ -2%
284
+ </Badge>
285
+ </div>
286
+ </CardContent>
287
+ </Card>
288
+ </div>
289
+
290
+ <Card>
291
+ <CardHeader>
292
+ <CardTitle>{t('templates.overview.progressTitle')}</CardTitle>
293
+ <CardDescription>
294
+ {t('templates.overview.progressDescription')}
295
+ </CardDescription>
296
+ </CardHeader>
297
+ <CardContent className="space-y-6">
298
+ <div className="space-y-2">
299
+ <div className="flex items-center justify-between">
300
+ <Label>{t('templates.overview.projectProgress')}</Label>
301
+ <span className="[font-size:var(--text-small)] text-muted-foreground">
302
+ {progress}%
303
+ </span>
304
+ </div>
305
+ <Progress value={progress} className="w-full" />
306
+ <div className="flex gap-2">
307
+ <Button
308
+ size="sm"
309
+ onClick={() => setProgress(Math.max(0, progress - 10))}
310
+ >
311
+ -10%
312
+ </Button>
313
+ <Button
314
+ size="sm"
315
+ onClick={() => setProgress(Math.min(100, progress + 10))}
316
+ >
317
+ +10%
318
+ </Button>
319
+ </div>
320
+ </div>
321
+
322
+ <Separator />
323
+
324
+ <div className="space-y-2">
325
+ <div className="flex items-center justify-between">
326
+ <Label>{t('templates.overview.volume')}</Label>
327
+ <span className="[font-size:var(--text-small)] text-muted-foreground">
328
+ {sliderValue[0]}%
329
+ </span>
330
+ </div>
331
+ <Slider
332
+ value={sliderValue}
333
+ onValueChange={setSliderValue}
334
+ min={0}
335
+ max={100}
336
+ step={1}
337
+ className="w-full"
338
+ />
339
+ </div>
340
+ </CardContent>
341
+ </Card>
342
+ </TabsContent>
343
+
344
+ {/* Forms Tab */}
345
+ <TabsContent value="forms" className="space-y-4">
346
+ <Card>
347
+ <CardHeader>
348
+ <CardTitle>{t('templates.forms.registrationTitle')}</CardTitle>
349
+ <CardDescription>
350
+ {t('templates.forms.registrationDescription')}
351
+ </CardDescription>
352
+ </CardHeader>
353
+ <CardContent>
354
+ <form onSubmit={handleFormSubmit} className="space-y-4">
355
+ <div className="grid gap-4 md:grid-cols-2">
356
+ <div className="space-y-2">
357
+ <Label htmlFor="firstName">{t('templates.forms.firstName')}</Label>
358
+ <Input
359
+ id="firstName"
360
+ placeholder={t('templates.forms.firstNamePlaceholder')}
361
+ />
362
+ </div>
363
+ <div className="space-y-2">
364
+ <Label htmlFor="lastName">{t('templates.forms.lastName')}</Label>
365
+ <Input
366
+ id="lastName"
367
+ placeholder={t('templates.forms.lastNamePlaceholder')}
368
+ />
369
+ </div>
370
+ </div>
371
+
372
+ <div className="space-y-2">
373
+ <Label htmlFor="email">{t('templates.forms.email')}</Label>
374
+ <div className="relative">
375
+ <Mail className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
376
+ <Input
377
+ id="email"
378
+ type="email"
379
+ placeholder={t('templates.forms.emailPlaceholder')}
380
+ className="pl-10"
381
+ />
382
+ </div>
383
+ </div>
384
+
385
+ <div className="space-y-2">
386
+ <Label htmlFor="phone">{t('templates.forms.phone')}</Label>
387
+ <div className="relative">
388
+ <Phone className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
389
+ <Input
390
+ id="phone"
391
+ type="tel"
392
+ placeholder={t('templates.forms.phonePlaceholder')}
393
+ className="pl-10"
394
+ />
395
+ </div>
396
+ </div>
397
+
398
+ <div className="space-y-2">
399
+ <Label htmlFor="role">{t('templates.forms.role')}</Label>
400
+ <Select>
401
+ <SelectTrigger id="role">
402
+ <SelectValue placeholder={t('templates.forms.rolePlaceholder')} />
403
+ </SelectTrigger>
404
+ <SelectContent>
405
+ <SelectItem value="developer">
406
+ {t('templates.forms.roles.developer')}
407
+ </SelectItem>
408
+ <SelectItem value="designer">
409
+ {t('templates.forms.roles.designer')}
410
+ </SelectItem>
411
+ <SelectItem value="manager">
412
+ {t('templates.forms.roles.manager')}
413
+ </SelectItem>
414
+ <SelectItem value="analyst">
415
+ {t('templates.forms.roles.analyst')}
416
+ </SelectItem>
417
+ </SelectContent>
418
+ </Select>
419
+ </div>
420
+
421
+ <div className="space-y-2">
422
+ <Label htmlFor="bio">{t('templates.forms.bio')}</Label>
423
+ <Textarea
424
+ id="bio"
425
+ placeholder={t('templates.forms.bioPlaceholder')}
426
+ rows={4}
427
+ />
428
+ </div>
429
+
430
+ <Separator />
431
+
432
+ <div className="space-y-4">
433
+ <h4>{t('templates.forms.preferences')}</h4>
434
+
435
+ <div className="space-y-3">
436
+ <div className="flex items-center space-x-2">
437
+ <Checkbox id="newsletter" />
438
+ <Label htmlFor="newsletter" className="font-normal">
439
+ {t('templates.forms.newsletter')}
440
+ </Label>
441
+ </div>
442
+
443
+ <div className="flex items-center space-x-2">
444
+ <Checkbox id="notifications" />
445
+ <Label htmlFor="notifications" className="font-normal">
446
+ {t('templates.forms.pushNotifications')}
447
+ </Label>
448
+ </div>
449
+
450
+ <div className="flex items-center space-x-2">
451
+ <Checkbox id="updates" />
452
+ <Label htmlFor="updates" className="font-normal">
453
+ {t('templates.forms.featureUpdates')}
454
+ </Label>
455
+ </div>
456
+ </div>
457
+
458
+ <Separator />
459
+
460
+ <div className="space-y-3">
461
+ <Label>{t('templates.forms.accountType')}</Label>
462
+ <RadioGroup defaultValue="personal">
463
+ <div className="flex items-center space-x-2">
464
+ <RadioGroupItem value="personal" id="personal" />
465
+ <Label htmlFor="personal" className="font-normal">
466
+ {t('templates.forms.accountPersonal')}
467
+ </Label>
468
+ </div>
469
+ <div className="flex items-center space-x-2">
470
+ <RadioGroupItem value="business" id="business" />
471
+ <Label htmlFor="business" className="font-normal">
472
+ {t('templates.forms.accountBusiness')}
473
+ </Label>
474
+ </div>
475
+ <div className="flex items-center space-x-2">
476
+ <RadioGroupItem value="enterprise" id="enterprise" />
477
+ <Label htmlFor="enterprise" className="font-normal">
478
+ {t('templates.forms.accountEnterprise')}
479
+ </Label>
480
+ </div>
481
+ </RadioGroup>
482
+ </div>
483
+ </div>
484
+ </form>
485
+ </CardContent>
486
+ <CardFooter className="flex justify-between">
487
+ <Button variant="outline">{t('templates.forms.cancel')}</Button>
488
+ <Button onClick={handleFormSubmit}>
489
+ {t('templates.forms.createAccount')}
490
+ </Button>
491
+ </CardFooter>
492
+ </Card>
493
+ </TabsContent>
494
+
495
+ {/* Data Tab */}
496
+ <TabsContent value="data" className="space-y-4">
497
+ <Card>
498
+ <CardHeader>
499
+ <CardTitle>{t('templates.data.title')}</CardTitle>
500
+ <CardDescription>{t('templates.data.description')}</CardDescription>
501
+ </CardHeader>
502
+ <CardContent>
503
+ <div className="mb-4">
504
+ <div className="relative">
505
+ <Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
506
+ <Input
507
+ placeholder={t('templates.data.searchPlaceholder')}
508
+ className="pl-10"
509
+ />
510
+ </div>
511
+ </div>
512
+
513
+ <div className="rounded-[var(--radius-lg)] border border-border overflow-hidden">
514
+ <Table>
515
+ <TableHeader>
516
+ <TableRow>
517
+ <TableHead>{t('templates.data.headers.name')}</TableHead>
518
+ <TableHead>{t('templates.data.headers.email')}</TableHead>
519
+ <TableHead>{t('templates.data.headers.role')}</TableHead>
520
+ <TableHead>{t('templates.data.headers.status')}</TableHead>
521
+ <TableHead className="text-right">
522
+ {t('templates.data.headers.actions')}
523
+ </TableHead>
524
+ </TableRow>
525
+ </TableHeader>
526
+ <TableBody>
527
+ <TableRow>
528
+ <TableCell>Ana Silva</TableCell>
529
+ <TableCell>{`ana.silva@${t('templates.data.demoEmailDomain')}`}</TableCell>
530
+ <TableCell>{t('templates.data.roles.developerFemale')}</TableCell>
531
+ <TableCell>
532
+ <Badge variant="default">
533
+ {t('templates.data.status.active')}
534
+ </Badge>
535
+ </TableCell>
536
+ <TableCell className="text-right">
537
+ <Button variant="ghost" size="sm">
538
+ {t('templates.data.edit')}
539
+ </Button>
540
+ </TableCell>
541
+ </TableRow>
542
+ <TableRow>
543
+ <TableCell>Bruno Costa</TableCell>
544
+ <TableCell>{`bruno.costa@${t('templates.data.demoEmailDomain')}`}</TableCell>
545
+ <TableCell>{t('templates.data.roles.designer')}</TableCell>
546
+ <TableCell>
547
+ <Badge variant="default">
548
+ {t('templates.data.status.active')}
549
+ </Badge>
550
+ </TableCell>
551
+ <TableCell className="text-right">
552
+ <Button variant="ghost" size="sm">
553
+ {t('templates.data.edit')}
554
+ </Button>
555
+ </TableCell>
556
+ </TableRow>
557
+ <TableRow>
558
+ <TableCell>Carla Oliveira</TableCell>
559
+ <TableCell>{`carla.oliveira@${t('templates.data.demoEmailDomain')}`}</TableCell>
560
+ <TableCell>{t('templates.data.roles.manager')}</TableCell>
561
+ <TableCell>
562
+ <Badge variant="secondary">
563
+ {t('templates.data.status.away')}
564
+ </Badge>
565
+ </TableCell>
566
+ <TableCell className="text-right">
567
+ <Button variant="ghost" size="sm">
568
+ {t('templates.data.edit')}
569
+ </Button>
570
+ </TableCell>
571
+ </TableRow>
572
+ <TableRow>
573
+ <TableCell>Diego Santos</TableCell>
574
+ <TableCell>{`diego.santos@${t('templates.data.demoEmailDomain')}`}</TableCell>
575
+ <TableCell>{t('templates.data.roles.analyst')}</TableCell>
576
+ <TableCell>
577
+ <Badge variant="outline">
578
+ {t('templates.data.status.inactive')}
579
+ </Badge>
580
+ </TableCell>
581
+ <TableCell className="text-right">
582
+ <Button variant="ghost" size="sm">
583
+ {t('templates.data.edit')}
584
+ </Button>
585
+ </TableCell>
586
+ </TableRow>
587
+ </TableBody>
588
+ </Table>
589
+ </div>
590
+ </CardContent>
591
+ <CardFooter className="flex justify-between items-center">
592
+ <p className="text-muted-foreground">
593
+ {t('templates.data.showing', { count: 4, total: 127 })}
594
+ </p>
595
+ <div className="flex gap-2">
596
+ <Button variant="outline" size="sm">
597
+ {t('templates.data.previous')}
598
+ </Button>
599
+ <Button variant="outline" size="sm">
600
+ {t('templates.data.next')}
601
+ </Button>
602
+ </div>
603
+ </CardFooter>
604
+ </Card>
605
+ </TabsContent>
606
+
607
+ {/* Settings Tab */}
608
+ <TabsContent value="settings" className="space-y-4">
609
+ <Card>
610
+ <CardHeader>
611
+ <CardTitle>{t('templates.settings.title')}</CardTitle>
612
+ <CardDescription>{t('templates.settings.description')}</CardDescription>
613
+ </CardHeader>
614
+ <CardContent className="space-y-6">
615
+ {!disableDarkMode && (
616
+ <>
617
+ <div className="flex items-center justify-between">
618
+ <div className="space-y-1">
619
+ <Label>{t('templates.settings.darkMode')}</Label>
620
+ <p className="text-muted-foreground">
621
+ {t('templates.settings.darkModeDescription')}
622
+ </p>
623
+ </div>
624
+ <Switch checked={switchEnabled} onCheckedChange={setSwitchEnabled} />
625
+ </div>
626
+
627
+ <Separator />
628
+ </>
629
+ )}
630
+
631
+ <div className="flex items-center justify-between">
632
+ <div className="space-y-1">
633
+ <Label>{t('templates.settings.emailNotifications')}</Label>
634
+ <p className="text-muted-foreground">
635
+ {t('templates.settings.emailNotificationsDescription')}
636
+ </p>
637
+ </div>
638
+ <Switch defaultChecked />
639
+ </div>
640
+
641
+ <Separator />
642
+
643
+ <div className="flex items-center justify-between">
644
+ <div className="space-y-1">
645
+ <Label>{t('templates.settings.pushNotifications')}</Label>
646
+ <p className="text-muted-foreground">
647
+ {t('templates.settings.pushNotificationsDescription')}
648
+ </p>
649
+ </div>
650
+ <Switch />
651
+ </div>
652
+
653
+ <Separator />
654
+
655
+ <div className="space-y-3">
656
+ <Label>{t('templates.settings.language')}</Label>
657
+ <Select defaultValue="pt-br">
658
+ <SelectTrigger>
659
+ <SelectValue />
660
+ </SelectTrigger>
661
+ <SelectContent>
662
+ <SelectItem value="pt-br">
663
+ {t('templates.settings.languages.ptBR')}
664
+ </SelectItem>
665
+ <SelectItem value="en">
666
+ {t('templates.settings.languages.en')}
667
+ </SelectItem>
668
+ <SelectItem value="es">
669
+ {t('templates.settings.languages.es')}
670
+ </SelectItem>
671
+ </SelectContent>
672
+ </Select>
673
+ </div>
674
+
675
+ <Separator />
676
+
677
+ <div className="space-y-3">
678
+ <Label>{t('templates.settings.timezone')}</Label>
679
+ <Select defaultValue="america-sao-paulo">
680
+ <SelectTrigger>
681
+ <SelectValue />
682
+ </SelectTrigger>
683
+ <SelectContent>
684
+ <SelectItem value="america-sao-paulo">
685
+ {t('templates.settings.timezones.saoPaulo')}
686
+ </SelectItem>
687
+ <SelectItem value="america-new-york">
688
+ {t('templates.settings.timezones.newYork')}
689
+ </SelectItem>
690
+ <SelectItem value="europe-london">
691
+ {t('templates.settings.timezones.london')}
692
+ </SelectItem>
693
+ </SelectContent>
694
+ </Select>
695
+ </div>
696
+ </CardContent>
697
+ <CardFooter className="flex justify-between">
698
+ <Button variant="outline">{t('templates.settings.restoreDefaults')}</Button>
699
+ <Button>{t('templates.settings.saveChanges')}</Button>
700
+ </CardFooter>
701
+ </Card>
702
+ </TabsContent>
703
+ </Tabs>
704
+ </section>
705
+
706
+ <Separator className="my-8" />
707
+
708
+ {/* Button Variants */}
709
+ <section>
710
+ <h3 className="mb-4">{t('templates.sections.buttons')}</h3>
711
+ <Card>
712
+ <CardHeader>
713
+ <CardTitle>{t('templates.buttons.title')}</CardTitle>
714
+ <CardDescription>{t('templates.buttons.description')}</CardDescription>
715
+ </CardHeader>
716
+ <CardContent className="space-y-6">
717
+ <div className="space-y-3">
718
+ <Label>{t('templates.buttons.variants')}</Label>
719
+ <div className="flex flex-wrap gap-3">
720
+ <Button variant="default">
721
+ {t('templates.buttons.variantLabels.default')}
722
+ </Button>
723
+ <Button variant="secondary">
724
+ {t('templates.buttons.variantLabels.secondary')}
725
+ </Button>
726
+ <Button variant="outline">
727
+ {t('templates.buttons.variantLabels.outline')}
728
+ </Button>
729
+ <Button variant="ghost">
730
+ {t('templates.buttons.variantLabels.ghost')}
731
+ </Button>
732
+ <Button variant="link">{t('templates.buttons.variantLabels.link')}</Button>
733
+ <Button variant="destructive">
734
+ {t('templates.buttons.variantLabels.destructive')}
735
+ </Button>
736
+ </div>
737
+ </div>
738
+
739
+ <Separator />
740
+
741
+ <div className="space-y-3">
742
+ <Label>{t('templates.buttons.sizes')}</Label>
743
+ <div className="flex flex-wrap items-center gap-3">
744
+ <Button size="sm">{t('templates.buttons.sizeLabels.small')}</Button>
745
+ <Button size="default">{t('templates.buttons.sizeLabels.default')}</Button>
746
+ <Button size="lg">{t('templates.buttons.sizeLabels.large')}</Button>
747
+ <Button size="icon">
748
+ <Settings className="h-4 w-4" />
749
+ </Button>
750
+ </div>
751
+ </div>
752
+
753
+ <Separator />
754
+
755
+ <div className="space-y-3">
756
+ <Label>{t('templates.buttons.withIcons')}</Label>
757
+ <div className="flex flex-wrap gap-3">
758
+ <Button>
759
+ <User className="mr-2 h-4 w-4" />
760
+ {t('templates.buttons.profile')}
761
+ </Button>
762
+ <Button variant="secondary">
763
+ <Mail className="mr-2 h-4 w-4" />
764
+ {t('templates.buttons.messages')}
765
+ </Button>
766
+ <Button variant="outline">
767
+ <Calendar className="mr-2 h-4 w-4" />
768
+ {t('templates.buttons.schedule')}
769
+ </Button>
770
+ </div>
771
+ </div>
772
+
773
+ <Separator />
774
+
775
+ <div className="space-y-3">
776
+ <Label>{t('templates.buttons.states')}</Label>
777
+ <div className="flex flex-wrap gap-3">
778
+ <Button disabled>{t('templates.buttons.disabled')}</Button>
779
+ <Button variant="outline" disabled>
780
+ {t('templates.buttons.outlineDisabled')}
781
+ </Button>
782
+ </div>
783
+ </div>
784
+ </CardContent>
785
+ </Card>
786
+ </section>
787
+
788
+ <Separator className="my-8" />
789
+
790
+ {/* Badges */}
791
+ <section>
792
+ <h3 className="mb-4">{t('templates.sections.badges')}</h3>
793
+ <Card>
794
+ <CardHeader>
795
+ <CardTitle>{t('templates.badges.title')}</CardTitle>
796
+ <CardDescription>{t('templates.badges.description')}</CardDescription>
797
+ </CardHeader>
798
+ <CardContent>
799
+ <div className="flex flex-wrap gap-3">
800
+ <Badge variant="default">{t('templates.badges.labels.default')}</Badge>
801
+ <Badge variant="secondary">{t('templates.badges.labels.secondary')}</Badge>
802
+ <Badge variant="outline">{t('templates.badges.labels.outline')}</Badge>
803
+ <Badge variant="destructive">
804
+ {t('templates.badges.labels.destructive')}
805
+ </Badge>
806
+ <Badge className="bg-success text-success-foreground">
807
+ {t('templates.badges.labels.success')}
808
+ </Badge>
809
+ <Badge className="bg-warning text-warning-foreground">
810
+ {t('templates.badges.labels.warning')}
811
+ </Badge>
812
+ <Badge className="bg-info text-info-foreground">
813
+ {t('templates.badges.labels.info')}
814
+ </Badge>
815
+ </div>
816
+ </CardContent>
817
+ </Card>
818
+ </section>
819
+
820
+ <Separator className="my-8" />
821
+
822
+ {/* Dialogs */}
823
+ <section>
824
+ <h3 className="mb-4">{t('templates.sections.dialogs')}</h3>
825
+ <div className="grid gap-4 md:grid-cols-2">
826
+ <Card>
827
+ <CardHeader>
828
+ <CardTitle>{t('templates.dialogs.dialogTitle')}</CardTitle>
829
+ <CardDescription>{t('templates.dialogs.dialogDescription')}</CardDescription>
830
+ </CardHeader>
831
+ <CardContent className="flex justify-center py-6">
832
+ <Dialog>
833
+ <DialogTrigger asChild>
834
+ <Button variant="outline">{t('templates.dialogs.editProfile')}</Button>
835
+ </DialogTrigger>
836
+ <DialogContent className="sm:max-w-[425px]">
837
+ <DialogHeader>
838
+ <DialogTitle>{t('templates.dialogs.editProfile')}</DialogTitle>
839
+ <DialogDescription>
840
+ {t('templates.dialogs.editProfileDescription')}
841
+ </DialogDescription>
842
+ </DialogHeader>
843
+ <div className="grid gap-4 py-4">
844
+ <div className="grid grid-cols-4 items-center gap-4">
845
+ <Label htmlFor="name" className="text-right">
846
+ {t('templates.dialogs.name')}
847
+ </Label>
848
+ <Input
849
+ id="name"
850
+ value={dialogName}
851
+ onChange={e => setDialogName(e.target.value)}
852
+ className="col-span-3"
853
+ />
854
+ </div>
855
+ <div className="grid grid-cols-4 items-center gap-4">
856
+ <Label htmlFor="username" className="text-right">
857
+ {t('templates.dialogs.username')}
858
+ </Label>
859
+ <Input
860
+ id="username"
861
+ value={dialogUsername}
862
+ onChange={e => setDialogUsername(e.target.value)}
863
+ className="col-span-3"
864
+ />
865
+ </div>
866
+ </div>
867
+ <DialogFooter>
868
+ <Button type="submit">{t('templates.dialogs.update')}</Button>
869
+ </DialogFooter>
870
+ </DialogContent>
871
+ </Dialog>
872
+ </CardContent>
873
+ </Card>
874
+
875
+ <Card>
876
+ <CardHeader>
877
+ <CardTitle>{t('templates.dialogs.alertDialogTitle')}</CardTitle>
878
+ <CardDescription>
879
+ {t('templates.dialogs.alertDialogDescription')}
880
+ </CardDescription>
881
+ </CardHeader>
882
+ <CardContent className="flex justify-center py-6">
883
+ <AlertDialog>
884
+ <AlertDialogTrigger asChild>
885
+ <Button variant="destructive">
886
+ {t('templates.dialogs.deleteAccount')}
887
+ </Button>
888
+ </AlertDialogTrigger>
889
+ <AlertDialogContent className="sm:max-w-[425px]">
890
+ <AlertDialogHeader>
891
+ <AlertDialogTitle>{t('templates.dialogs.areYouSure')}</AlertDialogTitle>
892
+ <AlertDialogDescription>
893
+ {t('templates.dialogs.deleteWarning')}
894
+ </AlertDialogDescription>
895
+ </AlertDialogHeader>
896
+ <AlertDialogFooter>
897
+ <AlertDialogCancel>{t('templates.dialogs.cancel')}</AlertDialogCancel>
898
+ <AlertDialogAction className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
899
+ {t('templates.dialogs.continue')}
900
+ </AlertDialogAction>
901
+ </AlertDialogFooter>
902
+ </AlertDialogContent>
903
+ </AlertDialog>
904
+ </CardContent>
905
+ </Card>
906
+ </div>
907
+ </section>
908
+
909
+ <Separator className="my-8" />
910
+
911
+ {/* Sidebar Variations */}
912
+ <section>
913
+ <h3 className="mb-4">{t('templates.sections.sidebarVariations')}</h3>
914
+ <Card>
915
+ <CardHeader>
916
+ <CardTitle>{t('templates.sidebar.title')}</CardTitle>
917
+ <CardDescription>{t('templates.sidebar.description')}</CardDescription>
918
+ </CardHeader>
919
+ <CardContent>
920
+ <Tabs defaultValue="assistant" className="w-full">
921
+ <TabsList className="mb-4">
922
+ <TabsTrigger value="assistant">
923
+ {t('templates.sidebar.assistantMode')}
924
+ </TabsTrigger>
925
+ <TabsTrigger value="default">
926
+ {t('templates.sidebar.defaultMode')}
927
+ </TabsTrigger>
928
+ </TabsList>
929
+
930
+ <TabsContent value="assistant">
931
+ <div
932
+ className="relative h-[600px] border rounded-[var(--radius-lg)] bg-muted/20 overflow-hidden"
933
+ style={{ transform: 'translateZ(0)' }}
934
+ >
935
+ <Sidebar
936
+ expanded={true}
937
+ width={sidebarWidth}
938
+ onToggle={() => {}}
939
+ user={{ email: 'admin@xertica.com' }}
940
+ onLogout={() => toast(t('templates.sidebar.logoutToast'))}
941
+ location={{ pathname: '/assistant/current' }}
942
+ navigate={() => {}}
943
+ variant="assistant"
944
+ search={{
945
+ show: true,
946
+ placeholder: t('templates.sidebar.searchTopicsPlaceholder'),
947
+ }}
948
+ fixedArea={{
949
+ show: true,
950
+ content: (
951
+ <Button className="w-full bg-sidebar-primary hover:bg-sidebar-primary/90 text-sidebar-primary-foreground shadow-lg font-bold border-none transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98]">
952
+ <Plus className="w-4 h-4 mr-2" />
953
+ {t('templates.sidebar.newConversation')}
954
+ </Button>
955
+ ),
956
+ }}
957
+ navigationGroups={[
958
+ {
959
+ id: 'recent',
960
+ label: t('templates.sidebar.recent'),
961
+ icon: Clock,
962
+ items: [
963
+ {
964
+ path: '/assistant/refatoracao',
965
+ label: t('templates.sidebar.items.sidebarRefactor'),
966
+ icon: PanelLeft,
967
+ description: t(
968
+ 'templates.sidebar.items.sidebarRefactorDescription'
969
+ ),
970
+ actions: [
971
+ {
972
+ label: t('templates.sidebar.actions.rename'),
973
+ icon: FileEdit,
974
+ onClick: () =>
975
+ toast(t('templates.sidebar.actions.renameToast')),
976
+ },
977
+ {
978
+ label: t('templates.sidebar.actions.move'),
979
+ icon: ArrowRightLeft,
980
+ children: [
981
+ {
982
+ label: t('templates.sidebar.actions.moveActive'),
983
+ onClick: () =>
984
+ toast(t('templates.sidebar.actions.moveActiveToast')),
985
+ },
986
+ {
987
+ label: t('templates.sidebar.actions.moveMonitoring'),
988
+ onClick: () =>
989
+ toast(
990
+ t('templates.sidebar.actions.moveMonitoringToast')
991
+ ),
992
+ },
993
+ {
994
+ label: t('templates.sidebar.actions.moveArchive'),
995
+ onClick: () =>
996
+ toast(
997
+ t('templates.sidebar.actions.moveArchiveToast')
998
+ ),
999
+ },
1000
+ ],
1001
+ },
1002
+ {
1003
+ label: t('templates.sidebar.actions.clear'),
1004
+ icon: Trash2,
1005
+ onClick: () =>
1006
+ toast(t('templates.sidebar.actions.clearToast')),
1007
+ variant: 'destructive',
1008
+ },
1009
+ ],
1010
+ },
1011
+ ],
1012
+ },
1013
+ {
1014
+ id: 'projects',
1015
+ label: t('templates.sidebar.constructionMonitoring'),
1016
+ icon: Map,
1017
+ actions: [
1018
+ {
1019
+ label: t('templates.sidebar.actions.newCategory'),
1020
+ icon: Plus,
1021
+ onClick: () =>
1022
+ toast(t('templates.sidebar.actions.newCategoryToast')),
1023
+ },
1024
+ {
1025
+ label: t('templates.sidebar.actions.archiveGroup'),
1026
+ icon: Archive,
1027
+ onClick: () =>
1028
+ toast(t('templates.sidebar.actions.archiveGroupToast')),
1029
+ },
1030
+ ],
1031
+ items: [
1032
+ {
1033
+ path: '/assistant/br163',
1034
+ label: t('templates.sidebar.items.br163Restoration'),
1035
+ icon: () => (
1036
+ <div className="w-2 h-2 rounded-full bg-yellow-500" />
1037
+ ),
1038
+ description: (
1039
+ <div className="space-y-1.5 min-w-[160px]">
1040
+ <Progress
1041
+ value={67}
1042
+ className="h-1.5 bg-sidebar-foreground/10"
1043
+ />
1044
+ <div className="flex justify-between items-center text-[10px] text-sidebar-foreground/60">
1045
+ <span>{t('templates.sidebar.items.br163Location')}</span>
1046
+ <span>67%</span>
1047
+ </div>
1048
+ </div>
1049
+ ),
1050
+ },
1051
+ ],
1052
+ },
1053
+ ]}
1054
+ />
1055
+ <div
1056
+ className="absolute inset-y-0 right-0 p-8 flex items-center justify-center transition-all duration-300"
1057
+ style={{ left: `${sidebarWidth}px` }}
1058
+ >
1059
+ <p className="text-muted-foreground text-center">
1060
+ {t('templates.sidebar.assistantContent')}
1061
+ </p>
1062
+ </div>
1063
+ </div>
1064
+ </TabsContent>
1065
+
1066
+ <TabsContent value="default">
1067
+ <div
1068
+ className="relative h-[600px] border rounded-[var(--radius-lg)] bg-muted/20 overflow-hidden"
1069
+ style={{ transform: 'translateZ(0)' }}
1070
+ >
1071
+ <Sidebar
1072
+ expanded={true}
1073
+ width={sidebarWidth}
1074
+ onToggle={() => {}}
1075
+ user={{
1076
+ name: 'Ariel Santos',
1077
+ email: 'admin@xertica.com',
1078
+ avatar: 'https://github.com/shadcn.png',
1079
+ }}
1080
+ onLogout={() => toast(t('templates.sidebar.logoutToast'))}
1081
+ onSettingsClick={() =>
1082
+ toast(t('templates.sidebar.settingsClickedToast'))
1083
+ }
1084
+ location={{ pathname: '/home' }}
1085
+ navigate={() => {}}
1086
+ variant="default"
1087
+ routes={[
1088
+ {
1089
+ path: '/home',
1090
+ label: t('templates.sidebar.routes.home'),
1091
+ icon: Home,
1092
+ },
1093
+ {
1094
+ path: '/dashboard',
1095
+ label: t('templates.sidebar.routes.dashboard'),
1096
+ icon: Users,
1097
+ },
1098
+ {
1099
+ path: '/settings',
1100
+ label: t('templates.sidebar.routes.settings'),
1101
+ icon: Settings,
1102
+ },
1103
+ ]}
1104
+ />
1105
+ <div
1106
+ className="absolute inset-y-0 right-0 p-8 flex items-center justify-center transition-all duration-300"
1107
+ style={{ left: `${sidebarWidth}px` }}
1108
+ >
1109
+ <p className="text-muted-foreground text-center">
1110
+ {t('templates.sidebar.defaultContent')}
1111
+ </p>
1112
+ </div>
1113
+ </div>
1114
+ </TabsContent>
1115
+ </Tabs>
1116
+ </CardContent>
1117
+ </Card>
1118
+ </section>
1119
+
1120
+ <Separator className="my-8" />
1121
+
1122
+ {/* ── v2.2.1 Components ──────────────────────────────────── */}
1123
+ <Separator className="my-8" />
1124
+
1125
+ <section>
1126
+ <h3 className="mb-4">{t('templates.sections.enhancedComponents')}</h3>
1127
+ <div className="space-y-6">
1128
+ {/* Pagination com disabled */}
1129
+ <Card>
1130
+ <CardHeader>
1131
+ <CardTitle>{t('templates.enhanced.pagination.title')}</CardTitle>
1132
+ <CardDescription>
1133
+ <Trans
1134
+ i18nKey="templates.enhanced.pagination.description"
1135
+ components={{ code: <code className="bg-muted px-1 rounded text-xs" /> }}
1136
+ />
1137
+ </CardDescription>
1138
+ </CardHeader>
1139
+ <CardContent className="space-y-4">
1140
+ <p className="text-sm text-muted-foreground">
1141
+ {t('templates.enhanced.pagination.pageOfTotal', {
1142
+ current: currentPage,
1143
+ total: totalPages,
1144
+ })}
1145
+ </p>
1146
+ <Pagination>
1147
+ <PaginationContent>
1148
+ <PaginationItem>
1149
+ <PaginationPrevious
1150
+ href="#"
1151
+ onClick={e => {
1152
+ e.preventDefault();
1153
+ prev();
1154
+ }}
1155
+ disabled={!canGoPrev}
1156
+ />
1157
+ </PaginationItem>
1158
+ {items.map(item =>
1159
+ item.type === 'ellipsis' ? (
1160
+ <PaginationItem key={item.key}>
1161
+ <PaginationEllipsis />
1162
+ </PaginationItem>
1163
+ ) : (
1164
+ <PaginationItem key={item.page}>
1165
+ <PaginationLink
1166
+ href="#"
1167
+ isActive={item.page === currentPage}
1168
+ onClick={e => {
1169
+ e.preventDefault();
1170
+ goTo(item.page);
1171
+ }}
1172
+ >
1173
+ {item.page}
1174
+ </PaginationLink>
1175
+ </PaginationItem>
1176
+ )
1177
+ )}
1178
+ <PaginationItem>
1179
+ <PaginationNext
1180
+ href="#"
1181
+ onClick={e => {
1182
+ e.preventDefault();
1183
+ next();
1184
+ }}
1185
+ disabled={!canGoNext}
1186
+ />
1187
+ </PaginationItem>
1188
+ </PaginationContent>
1189
+ </Pagination>
1190
+ </CardContent>
1191
+ </Card>
1192
+
1193
+ {/* Stepper com ARIA */}
1194
+ <Card>
1195
+ <CardHeader>
1196
+ <CardTitle>{t('templates.enhanced.stepper.title')}</CardTitle>
1197
+ <CardDescription>
1198
+ <Trans
1199
+ i18nKey="templates.enhanced.stepper.description"
1200
+ components={{ code: <code className="bg-muted px-1 rounded text-xs" /> }}
1201
+ />
1202
+ </CardDescription>
1203
+ </CardHeader>
1204
+ <CardContent className="space-y-4">
1205
+ <Stepper currentStep={currentStep}>
1206
+ <Step
1207
+ step={1}
1208
+ label={t('templates.enhanced.stepper.step1Label')}
1209
+ description={t('templates.enhanced.stepper.step1Description')}
1210
+ />
1211
+ <Step
1212
+ step={2}
1213
+ label={t('templates.enhanced.stepper.step2Label')}
1214
+ description={t('templates.enhanced.stepper.step2Description')}
1215
+ />
1216
+ <Step
1217
+ step={3}
1218
+ label={t('templates.enhanced.stepper.step3Label')}
1219
+ description={t('templates.enhanced.stepper.step3Description')}
1220
+ />
1221
+ </Stepper>
1222
+ <div className="flex gap-2 pt-2">
1223
+ <Button
1224
+ variant="outline"
1225
+ size="sm"
1226
+ onClick={stepPrev}
1227
+ disabled={isFirstStep}
1228
+ >
1229
+ {t('templates.enhanced.stepper.previous')}
1230
+ </Button>
1231
+ <Button size="sm" onClick={stepNext} disabled={isLastStep}>
1232
+ {isLastStep
1233
+ ? t('templates.enhanced.stepper.finish')
1234
+ : t('templates.enhanced.stepper.next')}
1235
+ </Button>
1236
+ </div>
1237
+ </CardContent>
1238
+ </Card>
1239
+
1240
+ {/* TreeView com ariaLabel */}
1241
+ <Card>
1242
+ <CardHeader>
1243
+ <CardTitle>{t('templates.enhanced.treeView.title')}</CardTitle>
1244
+ <CardDescription>
1245
+ <Trans
1246
+ i18nKey="templates.enhanced.treeView.description"
1247
+ components={{ code: <code className="bg-muted px-1 rounded text-xs" /> }}
1248
+ />
1249
+ </CardDescription>
1250
+ </CardHeader>
1251
+ <CardContent>
1252
+ <TreeView
1253
+ data={treeData}
1254
+ aria-label={t('templates.enhanced.treeView.ariaLabel')}
1255
+ defaultExpanded={['components', 'ui']}
1256
+ onNodeSelect={node =>
1257
+ console.log(
1258
+ t('templates.enhanced.treeView.selectedConsoleLog'),
1259
+ node.label
1260
+ )
1261
+ }
1262
+ className="max-w-xs border border-border rounded-[var(--radius-lg)] p-2"
1263
+ />
1264
+ </CardContent>
1265
+ </Card>
1266
+
1267
+ {/* RichTextEditor sem Auto-save */}
1268
+ <Card>
1269
+ <CardHeader>
1270
+ <CardTitle>{t('templates.enhanced.richText.title')}</CardTitle>
1271
+ <CardDescription>
1272
+ <Trans
1273
+ i18nKey="templates.enhanced.richText.description"
1274
+ components={{ code: <code className="bg-muted px-1 rounded text-xs" /> }}
1275
+ />
1276
+ </CardDescription>
1277
+ </CardHeader>
1278
+ <CardContent className="h-64">
1279
+ <RichTextEditor
1280
+ value={richText}
1281
+ onChange={setRichText}
1282
+ placeholder={t('templates.enhanced.richText.placeholder')}
1283
+ showWordCount
1284
+ showCharacterCount
1285
+ allowSearch={false}
1286
+ />
1287
+ </CardContent>
1288
+ </Card>
1289
+ </div>
1290
+ </section>
1291
+
1292
+ {/* Footer Note */}
1293
+ <Card className="mt-8">
1294
+ <CardHeader>
1295
+ <CardTitle>{t('templates.footer.title')}</CardTitle>
1296
+ <CardDescription>{t('templates.footer.subtitle')}</CardDescription>
1297
+ </CardHeader>
1298
+ <CardContent className="space-y-4">
1299
+ <p className="text-muted-foreground">
1300
+ {t('templates.footer.descriptionPart1')}
1301
+ <code className="bg-muted px-2 py-1 rounded-[var(--radius-sm)] [font-size:var(--text-small)]">
1302
+ xertica-ui
1303
+ </code>
1304
+ {t('templates.footer.descriptionPart2')}
1305
+ </p>
1306
+ <Alert variant="info">
1307
+ <AlertTitle>{t('templates.footer.tipTitle')}</AlertTitle>
1308
+ <AlertDescription>
1309
+ {t('templates.footer.tipDescriptionPart1')}
1310
+ <code className="bg-muted px-1 rounded">styles/xertica/tokens.css</code>
1311
+ {t('templates.footer.tipDescriptionPart2')}
1312
+ </AlertDescription>
1313
+ </Alert>
1314
+ </CardContent>
1315
+ </Card>
1316
+ </div>
1317
+ </div>
1318
+ </ScrollArea>
1319
+ </main>
1320
+ </div>
1321
+ );
1322
+ }