xertica-ui 2.5.2 → 2.6.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 (577) hide show
  1. package/CHANGELOG.md +687 -656
  2. package/README.md +482 -482
  3. package/assets/xertica-logo.svg +37 -37
  4. package/assets/xertica-x-logo.svg +20 -20
  5. package/bin/cli.ts +1293 -1256
  6. package/bin/generate-tokens.ts +256 -262
  7. package/bin/language-config.test.ts +32 -0
  8. package/bin/language-config.ts +36 -11
  9. package/components/Introduction.mdx +121 -121
  10. package/components/assistant/code-block/CodeBlock.tsx +7 -6
  11. package/components/assistant/code-block/code-block.mdx +38 -38
  12. package/components/assistant/code-block/code-block.test.tsx +2 -1
  13. package/components/assistant/formatted-document/FormattedDocument.tsx +3 -0
  14. package/components/assistant/formatted-document/formatted-document.mdx +31 -31
  15. package/components/assistant/formatted-document/formatted-document.test.tsx +5 -4
  16. package/components/assistant/markdown-message/MarkdownMessage.tsx +1 -1
  17. package/components/assistant/markdown-message/markdown-message.mdx +44 -44
  18. package/components/assistant/modern-chat-input/modern-chat-input.mdx +71 -71
  19. package/components/assistant/modern-chat-input/modern-chat-input.test.tsx +3 -2
  20. package/components/assistant/xertica-assistant/parts/AssistantMessageBubble.tsx +1 -1
  21. package/components/assistant/xertica-assistant/types.ts +3 -2
  22. package/components/assistant/xertica-assistant/use-assistant.ts +5 -4
  23. package/components/assistant/xertica-assistant/xertica-assistant.mdx +66 -66
  24. package/components/assistant/xertica-assistant/xertica-assistant.test.tsx +2 -1
  25. package/components/blocks/card-patterns/card-patterns.mdx +123 -123
  26. package/components/brand/branding/branding.mdx +27 -27
  27. package/components/brand/language-selector/language-selector.mdx +126 -126
  28. package/components/brand/theme-toggle/theme-toggle.mdx +47 -47
  29. package/components/brand/theme-toggle/theme-toggle.test.tsx +6 -2
  30. package/components/brand/xertica-logo/xertica-logo.mdx +56 -56
  31. package/components/brand/xertica-orbe/xertica-orbe.mdx +38 -38
  32. package/components/brand/xertica-provider/XerticaProvider.tsx +112 -112
  33. package/components/brand/xertica-provider/xertica-provider.mdx +61 -61
  34. package/components/brand/xertica-provider/xertica-provider.test.tsx +25 -13
  35. package/components/brand/xertica-xlogo/xertica-xlogo.mdx +55 -55
  36. package/components/examples/DrawingMapExample.tsx +1 -4
  37. package/components/layout/header/header.mdx +117 -117
  38. package/components/layout/header/header.test.tsx +2 -1
  39. package/components/layout/sidebar/sidebar.mdx +99 -99
  40. package/components/layout/sidebar/sidebar.stories.tsx +1033 -1033
  41. package/components/layout/sidebar/sidebar.test.tsx +2 -1
  42. package/components/layout/sidebar/sidebar.tsx +1509 -1501
  43. package/components/media/audio-player/AudioPlayer.mdx +67 -67
  44. package/components/media/audio-player/AudioPlayer.test.tsx +2 -1
  45. package/components/media/floating-media-wrapper.mdx +74 -74
  46. package/components/media/video-player/VideoPlayer.mdx +102 -102
  47. package/components/media/video-player/VideoPlayer.test.tsx +3 -2
  48. package/components/pages/forgot-password-page/ForgotPasswordPage.tsx +188 -188
  49. package/components/pages/forgot-password-page/forgot-password-page.mdx +60 -60
  50. package/components/pages/forgot-password-page/forgot-password-page.test.tsx +2 -1
  51. package/components/pages/home-content/HomeContent.tsx +2 -3
  52. package/components/pages/home-content/home-content.mdx +62 -62
  53. package/components/pages/home-page/HomePage.stories.tsx +8 -15
  54. package/components/pages/home-page/home-page.mdx +53 -53
  55. package/components/pages/home-page/home-page.test.tsx +2 -1
  56. package/components/pages/login-page/LoginPage.mdx +31 -31
  57. package/components/pages/login-page/LoginPage.tsx +218 -218
  58. package/components/pages/login-page/login-page.test.tsx +2 -1
  59. package/components/pages/reset-password-page/ResetPasswordPage.tsx +243 -243
  60. package/components/pages/reset-password-page/reset-password-page.mdx +63 -63
  61. package/components/pages/template-content/TemplateContent.tsx +2 -3
  62. package/components/pages/template-content/template-content.mdx +61 -61
  63. package/components/pages/template-page/TemplatePage.stories.tsx +32 -32
  64. package/components/pages/template-page/template-page.mdx +53 -53
  65. package/components/pages/template-page/template-page.test.tsx +2 -1
  66. package/components/pages/verify-email-page/VerifyEmailPage.tsx +206 -206
  67. package/components/pages/verify-email-page/verify-email-page.mdx +55 -55
  68. package/components/public-api-smoke.test.tsx +10 -6
  69. package/components/shared/assistant-utils.ts +3 -2
  70. package/components/shared/navigation.ts +2 -2
  71. package/components/ui/accordion/accordion.mdx +29 -29
  72. package/components/ui/alert/alert.mdx +29 -29
  73. package/components/ui/alert-dialog/alert-dialog.mdx +26 -26
  74. package/components/ui/aspect-ratio/aspect-ratio.mdx +25 -25
  75. package/components/ui/assistant-chart/AssistantChart.tsx +8 -2
  76. package/components/ui/assistant-chart/assistant-chart.mdx +25 -25
  77. package/components/ui/avatar/avatar.mdx +26 -26
  78. package/components/ui/badge/badge.mdx +28 -28
  79. package/components/ui/breadcrumb/breadcrumb.mdx +26 -26
  80. package/components/ui/button/button.mdx +29 -29
  81. package/components/ui/calendar/calendar.mdx +26 -26
  82. package/components/ui/card/card.mdx +26 -26
  83. package/components/ui/carousel/carousel.mdx +26 -26
  84. package/components/ui/chart/chart.mdx +26 -26
  85. package/components/ui/chart/chart.test.tsx +178 -178
  86. package/components/ui/chart/chart.tsx +2252 -2245
  87. package/components/ui/checkbox/checkbox.mdx +26 -26
  88. package/components/ui/collapsible/collapsible.mdx +25 -25
  89. package/components/ui/command/command.mdx +26 -26
  90. package/components/ui/context-menu/context-menu.mdx +26 -26
  91. package/components/ui/dialog/dialog.mdx +26 -26
  92. package/components/ui/drawer/drawer.mdx +26 -26
  93. package/components/ui/dropdown-menu/dropdown-menu.mdx +26 -26
  94. package/components/ui/empty/empty.mdx +26 -26
  95. package/components/ui/file-upload/file-upload.mdx +26 -26
  96. package/components/ui/form/form.mdx +20 -20
  97. package/components/ui/google-maps-loader/google-maps-loader.mdx +68 -68
  98. package/components/ui/hover-card/hover-card.mdx +26 -26
  99. package/components/ui/input/input.mdx +29 -29
  100. package/components/ui/input-otp/input-otp.mdx +26 -26
  101. package/components/ui/label/label.mdx +25 -25
  102. package/components/ui/map/map.mdx +26 -26
  103. package/components/ui/map/map.tsx +6 -1
  104. package/components/ui/menubar/menubar.mdx +26 -26
  105. package/components/ui/navigation-menu/navigation-menu.mdx +26 -26
  106. package/components/ui/notification-badge/notification-badge.mdx +26 -26
  107. package/components/ui/page-header/page-header.mdx +44 -44
  108. package/components/ui/pagination/pagination.mdx +26 -26
  109. package/components/ui/popover/popover.mdx +26 -26
  110. package/components/ui/progress/progress.mdx +25 -25
  111. package/components/ui/radio-group/radio-group.mdx +26 -26
  112. package/components/ui/rating/rating.mdx +26 -26
  113. package/components/ui/resizable/resizable.mdx +26 -26
  114. package/components/ui/resizable/resizable.tsx +13 -8
  115. package/components/ui/rich-text-editor/rich-text-editor.mdx +47 -47
  116. package/components/ui/route-map/route-map.mdx +26 -26
  117. package/components/ui/scroll-area/scroll-area.mdx +25 -25
  118. package/components/ui/search/search.mdx +27 -27
  119. package/components/ui/select/select.mdx +26 -26
  120. package/components/ui/separator/separator.mdx +25 -25
  121. package/components/ui/sheet/sheet.mdx +26 -26
  122. package/components/ui/simple-map/simple-map.mdx +25 -25
  123. package/components/ui/skeleton/skeleton.mdx +25 -25
  124. package/components/ui/slider/slider.mdx +26 -26
  125. package/components/ui/sonner/sonner.mdx +26 -26
  126. package/components/ui/stats-card/stats-card.mdx +26 -26
  127. package/components/ui/stats-card/stats-card.stories.tsx +117 -117
  128. package/components/ui/stats-card/stats-card.tsx +109 -109
  129. package/components/ui/stepper/stepper.mdx +26 -26
  130. package/components/ui/switch/switch.mdx +25 -25
  131. package/components/ui/table/table.mdx +27 -27
  132. package/components/ui/tabs/tabs.mdx +26 -26
  133. package/components/ui/textarea/textarea.mdx +25 -25
  134. package/components/ui/timeline/timeline.mdx +26 -26
  135. package/components/ui/toggle/toggle.mdx +26 -26
  136. package/components/ui/toggle-group/toggle-group.mdx +26 -26
  137. package/components/ui/tooltip/tooltip.mdx +26 -26
  138. package/components/ui/tree-view/tree-view.mdx +26 -26
  139. package/components.json +511 -511
  140. package/contexts/BrandColorsContext.tsx +282 -282
  141. package/contexts/i18n-singleton.test.tsx +57 -0
  142. package/contexts/theme-data.ts +391 -391
  143. package/dist/{AssistantChart-DMJJ_Amf.js → AssistantChart-BMNSA_Pk.js} +5 -5
  144. package/dist/{AssistantChart-D0A1FPYt.cjs → AssistantChart-BzM7plyc.cjs} +150 -114
  145. package/dist/{AssistantChart-BXU1ACnh.js → AssistantChart-C842evTi.js} +134 -240
  146. package/dist/{AssistantChart-BZTPJ5dP.cjs → AssistantChart-CVF2uh37.cjs} +5 -5
  147. package/dist/{AssistantChart-COGiOV-g.cjs → AssistantChart-JooMdVQU.cjs} +17 -7
  148. package/dist/{AssistantChart-CWX1OWNM.js → AssistantChart-KHS-tp-L.js} +17 -7
  149. package/dist/{BrandColorsContext-BwY-b6M4.cjs → BrandColorsContext-B4_81eas.cjs} +2 -2
  150. package/dist/{BrandColorsContext-BMRJ04Wf.js → BrandColorsContext-DbK5LnQ_.js} +2 -2
  151. package/dist/{CodeBlock-CjeFavqV.js → CodeBlock-DiKO8ocT.js} +11 -11
  152. package/dist/{CodeBlock-CV6dtsTM.cjs → CodeBlock-ZYThr7Kn.cjs} +12 -9
  153. package/dist/{XerticaXLogo-mqjoBiLI.js → LanguageSelector-CmTj3lWq.js} +85 -82
  154. package/dist/{XerticaXLogo-BX3ueACh.js → LanguageSelector-DxW6o7bt.js} +81 -81
  155. package/dist/{XerticaXLogo-uQgwns_E.cjs → LanguageSelector-Sw73qvWV.cjs} +84 -81
  156. package/dist/{ThemeContext-BgclCB35.js → ThemeContext-BGeh_Kdr.js} +290 -212
  157. package/dist/{ThemeContext-BblcjQup.cjs → ThemeContext-D50irx5T.cjs} +291 -205
  158. package/dist/{VerifyEmailPage-C_Zk6Gen.cjs → VerifyEmailPage-B6bOrybJ.cjs} +17 -17
  159. package/dist/{VerifyEmailPage-B31mCrMc.js → VerifyEmailPage-BRE5Fz59.js} +8 -8
  160. package/dist/{VerifyEmailPage-BJjAMUTW.js → VerifyEmailPage-BcCluouh.js} +151 -78
  161. package/dist/VerifyEmailPage-Bx1sr0uQ.cjs +3298 -0
  162. package/dist/{VerifyEmailPage-X14vhdyl.js → VerifyEmailPage-DUYyXCX9.js} +12 -12
  163. package/dist/VerifyEmailPage-DXXMHbzq.js +3289 -0
  164. package/dist/{VerifyEmailPage-u_Dn7t1U.cjs → VerifyEmailPage-DpYtFk35.cjs} +21 -21
  165. package/dist/{VerifyEmailPage-Cyl55sJb.js → VerifyEmailPage-NXKWW3Dk.js} +134 -64
  166. package/dist/{VerifyEmailPage-Bv8Ah_TK.cjs → VerifyEmailPage-QrCz4Wqr.cjs} +143 -73
  167. package/dist/{VerifyEmailPage-CkBYfsNy.cjs → VerifyEmailPage-ZmQra0Wi.cjs} +160 -87
  168. package/dist/{XerticaProvider-BErr83Bg.js → XerticaProvider-BF3q_myt.js} +5 -4
  169. package/dist/{XerticaProvider-CeS5G_n5.cjs → XerticaProvider-C_JSOz1U.cjs} +2 -2
  170. package/dist/{XerticaProvider-CwOkHxiT.cjs → XerticaProvider-D5zjrqZq.cjs} +5 -4
  171. package/dist/{XerticaProvider-ra2NciRq.js → XerticaProvider-KTGl4Cn1.js} +2 -2
  172. package/dist/{alert-dialog-DqlRW_An.js → alert-dialog-BrpwXKwS.js} +3 -3
  173. package/dist/{alert-dialog-DhwPioBa.cjs → alert-dialog-CZU1Zase.cjs} +3 -3
  174. package/dist/{alert-dialog-KpoabzJb.js → alert-dialog-ClRoLH7l.js} +40 -56
  175. package/dist/{alert-dialog-B4M3vQKS.cjs → alert-dialog-DBBqvU-V.cjs} +53 -38
  176. package/dist/assistant.cjs.js +2 -2
  177. package/dist/assistant.es.js +2 -2
  178. package/dist/brand.cjs.js +6 -6
  179. package/dist/brand.es.js +2 -2
  180. package/dist/cli.js +63 -21
  181. package/dist/components/assistant/code-block/CodeBlock.d.ts +2 -1
  182. package/dist/components/assistant/formatted-document/FormattedDocument.d.ts +2 -1
  183. package/dist/components/assistant/markdown-message/MarkdownMessage.d.ts +2 -1
  184. package/dist/components/assistant/modern-chat-input/ModernChatInput.d.ts +2 -1
  185. package/dist/components/assistant/xertica-assistant/parts/AssistantCollapsedView.d.ts +2 -1
  186. package/dist/components/assistant/xertica-assistant/parts/AssistantConversationList.d.ts +2 -1
  187. package/dist/components/assistant/xertica-assistant/parts/AssistantDocumentEditor.d.ts +2 -1
  188. package/dist/components/assistant/xertica-assistant/parts/AssistantFeedbackDialog.d.ts +2 -1
  189. package/dist/components/assistant/xertica-assistant/parts/AssistantHeader.d.ts +2 -1
  190. package/dist/components/assistant/xertica-assistant/parts/AssistantMessageBubble.d.ts +2 -1
  191. package/dist/components/assistant/xertica-assistant/parts/AssistantTabBar.d.ts +2 -1
  192. package/dist/components/assistant/xertica-assistant/parts/AssistantTypingIndicator.d.ts +2 -1
  193. package/dist/components/assistant/xertica-assistant/parts/AssistantWelcomeScreen.d.ts +2 -1
  194. package/dist/components/assistant/xertica-assistant/types.d.ts +3 -2
  195. package/dist/components/assistant/xertica-assistant/use-assistant.d.ts +1 -1
  196. package/dist/components/assistant/xertica-assistant/xertica-assistant.d.ts +2 -1
  197. package/dist/components/blocks/card-patterns/ActivityCard.d.ts +1 -1
  198. package/dist/components/blocks/card-patterns/ActivityCardSkeleton.d.ts +1 -1
  199. package/dist/components/blocks/card-patterns/FeatureCard.d.ts +1 -1
  200. package/dist/components/blocks/card-patterns/FeatureCardSkeleton.d.ts +1 -1
  201. package/dist/components/blocks/card-patterns/NotificationCard.d.ts +1 -1
  202. package/dist/components/blocks/card-patterns/NotificationCardSkeleton.d.ts +1 -1
  203. package/dist/components/blocks/card-patterns/ProfileCard.d.ts +1 -1
  204. package/dist/components/blocks/card-patterns/ProfileCardSkeleton.d.ts +1 -1
  205. package/dist/components/blocks/card-patterns/ProjectCard.d.ts +1 -1
  206. package/dist/components/blocks/card-patterns/ProjectCardSkeleton.d.ts +1 -1
  207. package/dist/components/blocks/card-patterns/QuickActionCard.d.ts +1 -1
  208. package/dist/components/blocks/card-patterns/QuickActionCardSkeleton.d.ts +1 -1
  209. package/dist/components/brand/language-selector/LanguageSelector.d.ts +2 -1
  210. package/dist/components/brand/theme-toggle/ThemeToggle.d.ts +2 -1
  211. package/dist/components/brand/xertica-logo/XerticaLogo.d.ts +2 -1
  212. package/dist/components/brand/xertica-orbe/XerticaOrbe.d.ts +2 -1
  213. package/dist/components/brand/xertica-provider/XerticaProvider.d.ts +1 -1
  214. package/dist/components/brand/xertica-xlogo/XerticaXLogo.d.ts +2 -1
  215. package/dist/components/examples/DrawingMapExample.d.ts +2 -1
  216. package/dist/components/examples/FilterableMapExample.d.ts +1 -1
  217. package/dist/components/examples/MapShowcase.d.ts +2 -1
  218. package/dist/components/examples/SimpleFilterableMap.d.ts +2 -1
  219. package/dist/components/figma/ImageWithFallback.d.ts +1 -1
  220. package/dist/components/layout/header/header.d.ts +1 -1
  221. package/dist/components/layout/sidebar/sidebar.d.ts +25 -13
  222. package/dist/components/media/FloatingMediaWrapper.d.ts +1 -1
  223. package/dist/components/media/audio-player/AudioPlayer.d.ts +2 -1
  224. package/dist/components/media/video-player/VideoPlayer.d.ts +2 -1
  225. package/dist/components/pages/forgot-password-page/ForgotPasswordPage.d.ts +2 -1
  226. package/dist/components/pages/home-content/HomeContent.d.ts +2 -1
  227. package/dist/components/pages/home-page/HomePage.d.ts +2 -1
  228. package/dist/components/pages/login-page/LoginPage.d.ts +2 -1
  229. package/dist/components/pages/reset-password-page/ResetPasswordPage.d.ts +2 -1
  230. package/dist/components/pages/template-content/TemplateContent.d.ts +2 -1
  231. package/dist/components/pages/template-page/TemplatePage.d.ts +2 -1
  232. package/dist/components/pages/verify-email-page/VerifyEmailPage.d.ts +2 -1
  233. package/dist/components/shared/CustomTooltipContent.d.ts +1 -1
  234. package/dist/components/shared/assistant-utils.d.ts +3 -2
  235. package/dist/components/shared/error-boundary.d.ts +4 -4
  236. package/dist/components/shared/error-fallbacks.d.ts +4 -3
  237. package/dist/components/shared/navigation.d.ts +6 -2
  238. package/dist/components/ui/accordion/accordion.d.ts +4 -4
  239. package/dist/components/ui/alert/alert.d.ts +3 -3
  240. package/dist/components/ui/alert-dialog/alert-dialog.d.ts +10 -10
  241. package/dist/components/ui/aspect-ratio/aspect-ratio.d.ts +1 -1
  242. package/dist/components/ui/assistant-chart/AssistantChart.d.ts +4 -3
  243. package/dist/components/ui/avatar/avatar.d.ts +3 -3
  244. package/dist/components/ui/badge/badge.d.ts +1 -1
  245. package/dist/components/ui/breadcrumb/breadcrumb.d.ts +7 -7
  246. package/dist/components/ui/calendar/calendar.d.ts +2 -2
  247. package/dist/components/ui/card/card.d.ts +7 -7
  248. package/dist/components/ui/carousel/carousel.d.ts +5 -5
  249. package/dist/components/ui/chart/chart.d.ts +16 -16
  250. package/dist/components/ui/collapsible/collapsible.d.ts +3 -3
  251. package/dist/components/ui/command/command.d.ts +9 -9
  252. package/dist/components/ui/context-menu/context-menu.d.ts +15 -15
  253. package/dist/components/ui/dialog/dialog.d.ts +9 -9
  254. package/dist/components/ui/drawer/drawer.d.ts +10 -10
  255. package/dist/components/ui/dropdown-menu/dropdown-menu.d.ts +15 -15
  256. package/dist/components/ui/form/form.d.ts +7 -7
  257. package/dist/components/ui/google-maps-loader/google-maps-loader.d.ts +3 -3
  258. package/dist/components/ui/hover-card/hover-card.d.ts +3 -3
  259. package/dist/components/ui/input-otp/input-otp.d.ts +4 -4
  260. package/dist/components/ui/label/label.d.ts +1 -1
  261. package/dist/components/ui/menubar/menubar.d.ts +16 -16
  262. package/dist/components/ui/navigation-menu/navigation-menu.d.ts +8 -8
  263. package/dist/components/ui/page-header/page-header.d.ts +3 -3
  264. package/dist/components/ui/pagination/pagination.d.ts +7 -7
  265. package/dist/components/ui/popover/popover.d.ts +4 -4
  266. package/dist/components/ui/progress/progress.d.ts +1 -1
  267. package/dist/components/ui/resizable/resizable.d.ts +11 -7
  268. package/dist/components/ui/rich-text-editor/rich-text-editor.d.ts +1 -1
  269. package/dist/components/ui/scroll-area/scroll-area.d.ts +2 -2
  270. package/dist/components/ui/separator/separator.d.ts +1 -1
  271. package/dist/components/ui/sheet/sheet.d.ts +10 -10
  272. package/dist/components/ui/skeleton/skeleton.d.ts +1 -1
  273. package/dist/components/ui/sonner/sonner.d.ts +2 -1
  274. package/dist/components/ui/stats-card/stats-card-skeleton.d.ts +1 -1
  275. package/dist/components/ui/table/table.d.ts +8 -8
  276. package/dist/components/ui/tabs/tabs.d.ts +4 -4
  277. package/dist/components/ui/tooltip/tooltip.d.ts +4 -4
  278. package/dist/contexts/ApiKeyContext.d.ts +2 -2
  279. package/dist/contexts/AssistenteContext.d.ts +1 -1
  280. package/dist/contexts/AuthContext.d.ts +1 -1
  281. package/dist/contexts/LanguageContext.d.ts +2 -2
  282. package/dist/contexts/LayoutContext.d.ts +2 -2
  283. package/dist/contexts/ThemeContext.d.ts +1 -1
  284. package/dist/features/assistant/hooks/useAssistantConfig.d.ts +1 -1
  285. package/dist/features/home/hooks/useDashboardStats.d.ts +1 -1
  286. package/dist/features/home/hooks/useFeatureCards.d.ts +1 -1
  287. package/dist/features/home/hooks/useTeamMembers.d.ts +1 -1
  288. package/dist/{google-maps-loader-BCe58h9D.js → google-maps-loader-BOug999f.js} +0 -4
  289. package/dist/{google-maps-loader-casMyxlo.cjs → google-maps-loader-DfeBRI8Q.cjs} +0 -5
  290. package/dist/hooks.cjs.js +2 -2
  291. package/dist/hooks.es.js +2 -2
  292. package/dist/{index-9GWd0qxq.cjs → index-BQjx1Mdf.cjs} +1 -1
  293. package/dist/index-Bei5DzAL.js +6 -0
  294. package/dist/index.cjs.js +18 -18
  295. package/dist/index.es.js +12 -12
  296. package/dist/{input-cc-PTD4R.js → input-B0_vbA3g.js} +3 -61
  297. package/dist/{input-C_UiS2Py.cjs → input-ByYuOv8A.cjs} +1 -62
  298. package/dist/layout.cjs.js +1 -1
  299. package/dist/layout.es.js +1 -1
  300. package/dist/pages.cjs.js +1 -1
  301. package/dist/pages.es.js +1 -1
  302. package/dist/{rich-text-editor-DxO1Hz3a.cjs → rich-text-editor-BuqSu718.cjs} +70 -5
  303. package/dist/{rich-text-editor-DqLICivI.js → rich-text-editor-CV8FtA_l.js} +68 -6
  304. package/dist/{rich-text-editor-DloeW0wc.js → rich-text-editor-DV1SixzE.js} +61 -3
  305. package/dist/{rich-text-editor-B2CKz7nx.cjs → rich-text-editor-DnSDglzW.cjs} +63 -2
  306. package/dist/{sidebar-BS1p2V7t.cjs → sidebar-BGJ0j567.cjs} +367 -9
  307. package/dist/{sidebar-3XyzjVBw.js → sidebar-BI6mZlC8.js} +364 -6
  308. package/dist/{sidebar-DyYvgyBj.cjs → sidebar-BtmotOg-.cjs} +367 -9
  309. package/dist/{sidebar-Duermn32.js → sidebar-D3EgGVxF.js} +77 -63
  310. package/dist/{sidebar-CLmIjgNd.cjs → sidebar-DDTqMGnR.cjs} +80 -66
  311. package/dist/{sidebar-B4ZWaMrE.js → sidebar-I7EXyf5D.js} +364 -6
  312. package/dist/ui.cjs.js +7 -7
  313. package/dist/ui.es.js +5 -5
  314. package/dist/{xertica-assistant-QFUnv5I2.cjs → xertica-assistant-BrF9jScR.cjs} +4 -4
  315. package/dist/{xertica-assistant-BbgzsgsG.js → xertica-assistant-CJVnvMqU.js} +55 -45
  316. package/dist/{xertica-assistant-d2qs2Vd9.cjs → xertica-assistant-CKPtc1z5.cjs} +58 -40
  317. package/dist/{xertica-assistant-CyikE3N_.js → xertica-assistant-CsBsxTsI.js} +2 -2
  318. package/dist/{xertica-assistant-CIaUlbIt.cjs → xertica-assistant-DER0brPQ.cjs} +6 -5
  319. package/dist/{xertica-assistant-B1NaSFFj.js → xertica-assistant-DQCjpk5M.js} +4 -3
  320. package/dist/{xertica-assistant-B687qEPU.js → xertica-assistant-Dk-9AJzw.js} +16 -7
  321. package/dist/{xertica-assistant-sOHwTgIP.cjs → xertica-assistant-DxhIKvuY.cjs} +18 -9
  322. package/dist/xertica-ui.css +2 -2
  323. package/docs/components/audio-player.md +1 -1
  324. package/docs/components/sidebar.md +331 -331
  325. package/docs/components/stats-card.md +138 -138
  326. package/docs/components/toggle.md +12 -0
  327. package/docs/doc-audit.md +35 -229
  328. package/docs/i18n.md +31 -10
  329. package/docs/llms.md +6 -4
  330. package/llms-compact.txt +444 -444
  331. package/llms-full.txt +12144 -12144
  332. package/llms.txt +187 -187
  333. package/package.json +223 -219
  334. package/scripts/a11y-audit.mjs +162 -162
  335. package/scripts/fix-stories.cjs +19 -19
  336. package/styles/globals.css +0 -1
  337. package/styles/xertica/base.css +8 -0
  338. package/styles/xertica/tokens.css +240 -240
  339. package/templates/.env.example +2 -2
  340. package/templates/.prettierignore +4 -4
  341. package/templates/.prettierrc +10 -10
  342. package/templates/guidelines/Guidelines.md +865 -865
  343. package/templates/index.html +13 -13
  344. package/templates/package.json +69 -69
  345. package/templates/src/app/components/AuthGuard.tsx +11 -0
  346. package/templates/src/features/auth/ui/AuthPageShell.tsx +32 -32
  347. package/templates/src/features/home/ui/HomeContent.tsx +2 -3
  348. package/templates/src/features/settings/index.ts +2 -0
  349. package/templates/src/features/settings/ui/SettingsContent.tsx +134 -0
  350. package/templates/src/features/template/ui/TemplateContent.tsx +2 -3
  351. package/templates/src/i18n.ts +36 -13
  352. package/templates/src/locales/en/pages/settings.json +15 -0
  353. package/templates/src/locales/es/pages/settings.json +15 -0
  354. package/templates/src/locales/pt-BR/pages/settings.json +15 -0
  355. package/templates/src/pages/SettingsPage.tsx +28 -0
  356. package/templates/src/shared/config/navigation.ts +2 -2
  357. package/templates/src/styles/xertica/tokens.css +240 -240
  358. package/templates/vite.config.d.ts +2 -2
  359. package/templates/vite.config.js +20 -20
  360. package/utils/gemini.ts +2 -2
  361. package/dist/AssistantChart-9w31gdAb.cjs +0 -3363
  362. package/dist/AssistantChart-BAudAfne.cjs +0 -3591
  363. package/dist/AssistantChart-BAx9VQvb.cjs +0 -3374
  364. package/dist/AssistantChart-BP8upjMk.js +0 -3565
  365. package/dist/AssistantChart-CVko2A1W.js +0 -3348
  366. package/dist/AssistantChart-CVzmmhx4.js +0 -3337
  367. package/dist/AssistantChart-CeU2dIb6.js +0 -3469
  368. package/dist/AssistantChart-DO5UuX4J.cjs +0 -3495
  369. package/dist/AudioPlayer-1ypwE2Wh.cjs +0 -936
  370. package/dist/AudioPlayer-BJ2IuRQW.cjs +0 -1275
  371. package/dist/AudioPlayer-BWDW6TN9.cjs +0 -1279
  372. package/dist/AudioPlayer-CM962GEh.js +0 -1280
  373. package/dist/AudioPlayer-CbZId7cj.cjs +0 -998
  374. package/dist/AudioPlayer-DU8zt8-z.js +0 -999
  375. package/dist/AudioPlayer-DuKXrCfy.js +0 -937
  376. package/dist/AudioPlayer-Xxma6_-H.js +0 -1276
  377. package/dist/BrandColorsContext-DLVJgtmH.js +0 -666
  378. package/dist/BrandColorsContext-DZT7JjeD.js +0 -659
  379. package/dist/BrandColorsContext-GUyFmkX0.cjs +0 -665
  380. package/dist/BrandColorsContext-awnBCmC4.cjs +0 -666
  381. package/dist/CodeBlock-C2ZUXt8V.js +0 -219
  382. package/dist/CodeBlock-C5oYnLQp.cjs +0 -218
  383. package/dist/CodeBlock-DuxdtN-l.js +0 -219
  384. package/dist/CodeBlock-POVYONvC.cjs +0 -218
  385. package/dist/CustomTooltipContent-BT6brkVJ.cjs +0 -49
  386. package/dist/CustomTooltipContent-CfOfikhq.js +0 -33
  387. package/dist/CustomTooltipContent-DHjkY0ww.js +0 -40
  388. package/dist/CustomTooltipContent-c_K-DWRr.cjs +0 -56
  389. package/dist/FeatureCard-9GhnlgL3.js +0 -336
  390. package/dist/FeatureCard-Bcb3Zi54.js +0 -302
  391. package/dist/FeatureCard-Cfs6Ishq.js +0 -485
  392. package/dist/FeatureCard-CkPd2psQ.cjs +0 -301
  393. package/dist/FeatureCard-Dkp-xmzM.cjs +0 -335
  394. package/dist/FeatureCard-ie3L8Fpr.cjs +0 -484
  395. package/dist/FeatureCardSkeleton-CAgu8stE.js +0 -27
  396. package/dist/FeatureCardSkeleton-mO3Bdm_V.cjs +0 -26
  397. package/dist/LanguageContext-BwhwC3G2.js +0 -657
  398. package/dist/LanguageContext-DvUt5jBg.cjs +0 -656
  399. package/dist/LayoutContext-BDmcZfMH.cjs +0 -84
  400. package/dist/LayoutContext-C4kKN9RV.cjs +0 -93
  401. package/dist/LayoutContext-CGEe1oPq.js +0 -94
  402. package/dist/LayoutContext-CwT5KLiW.cjs +0 -104
  403. package/dist/LayoutContext-DVLCsoQn.js +0 -105
  404. package/dist/LayoutContext-dbQvdC4O.js +0 -85
  405. package/dist/ThemeContext-BbBNoFTG.js +0 -735
  406. package/dist/ThemeContext-Bo-W2WZH.js +0 -1856
  407. package/dist/ThemeContext-CP3a0jxy.cjs +0 -1855
  408. package/dist/ThemeContext-Cmr8Ex8H.cjs +0 -734
  409. package/dist/ThemeContext-CpqYShLq.cjs +0 -324
  410. package/dist/ThemeContext-D3LzacmG.js +0 -188
  411. package/dist/ThemeContext-DQUOeziy.cjs +0 -1855
  412. package/dist/ThemeContext-Du2nE1PL.js +0 -325
  413. package/dist/ThemeContext-GeEBTJ3q.cjs +0 -1621
  414. package/dist/ThemeContext-JyLK9B1o.js +0 -1622
  415. package/dist/ThemeContext-RTy1m2Uq.js +0 -82
  416. package/dist/ThemeContext-U4dEYc6C.cjs +0 -187
  417. package/dist/ThemeContext-bSzuOit2.cjs +0 -81
  418. package/dist/ThemeContext-ept8jhXI.js +0 -1856
  419. package/dist/VerifyEmailPage-BE-L9mB7.js +0 -2828
  420. package/dist/VerifyEmailPage-BIBOKV7Z.js +0 -3214
  421. package/dist/VerifyEmailPage-BRSP-Pwt.cjs +0 -3196
  422. package/dist/VerifyEmailPage-Bae2cBXT.cjs +0 -2827
  423. package/dist/VerifyEmailPage-BiRm7Nh4.cjs +0 -3213
  424. package/dist/VerifyEmailPage-Bvfv8HVQ.js +0 -3214
  425. package/dist/VerifyEmailPage-CR7kb5df.cjs +0 -2827
  426. package/dist/VerifyEmailPage-C_ihbcth.js +0 -2828
  427. package/dist/VerifyEmailPage-CbgjOF0v.js +0 -2828
  428. package/dist/VerifyEmailPage-CdYPSJoO.js +0 -2828
  429. package/dist/VerifyEmailPage-D-FRj5TU.cjs +0 -3213
  430. package/dist/VerifyEmailPage-DF2ilhum.cjs +0 -3210
  431. package/dist/VerifyEmailPage-DMBh4NM9.cjs +0 -2827
  432. package/dist/VerifyEmailPage-DTtFfC-J.js +0 -3197
  433. package/dist/VerifyEmailPage-Dt7zgA4w.cjs +0 -2827
  434. package/dist/VerifyEmailPage-EhudUdqF.js +0 -3211
  435. package/dist/VerifyEmailPage-RrUApqBN.js +0 -3214
  436. package/dist/VerifyEmailPage-VoMI7MYH.cjs +0 -3213
  437. package/dist/VerifyEmailPage-hdB8JQGv.cjs +0 -3213
  438. package/dist/VerifyEmailPage-vYHbYK3q.js +0 -3214
  439. package/dist/XerticaOrbe-BCUVSPPB.cjs +0 -1924
  440. package/dist/XerticaOrbe-BGIB1CTK.js +0 -1355
  441. package/dist/XerticaOrbe-By8eEvR-.js +0 -1925
  442. package/dist/XerticaOrbe-FWGjBj0U.cjs +0 -1354
  443. package/dist/XerticaProvider-AChwphCO.cjs +0 -48
  444. package/dist/XerticaProvider-AbWlr7Af.cjs +0 -48
  445. package/dist/XerticaProvider-B8CaV7xu.cjs +0 -39
  446. package/dist/XerticaProvider-BITjgC5p.js +0 -39
  447. package/dist/XerticaProvider-BSyFrmC0.js +0 -49
  448. package/dist/XerticaProvider-By8q3Roe.cjs +0 -38
  449. package/dist/XerticaProvider-CUYJZc32.js +0 -49
  450. package/dist/XerticaProvider-CW9hpCdF.cjs +0 -39
  451. package/dist/XerticaProvider-CWgby5mY.js +0 -49
  452. package/dist/XerticaProvider-CWs6EwNa.js +0 -49
  453. package/dist/XerticaProvider-CiNKjMx1.cjs +0 -48
  454. package/dist/XerticaProvider-CjQAQPcn.cjs +0 -48
  455. package/dist/XerticaProvider-D5lLumH-.js +0 -49
  456. package/dist/XerticaProvider-DQtvJU7m.js +0 -40
  457. package/dist/XerticaProvider-DUOJg9iX.js +0 -49
  458. package/dist/XerticaProvider-Dl_b72_l.cjs +0 -51
  459. package/dist/XerticaProvider-qQUDop71.cjs +0 -48
  460. package/dist/XerticaProvider-siSt9uG2.js +0 -40
  461. package/dist/XerticaXLogo-8TTzBjHw.cjs +0 -251
  462. package/dist/XerticaXLogo-B2svDGZh.cjs +0 -251
  463. package/dist/XerticaXLogo-BWaag64t.js +0 -252
  464. package/dist/XerticaXLogo-CFuIlYFH.js +0 -252
  465. package/dist/XerticaXLogo-CU-U-GP4.cjs +0 -251
  466. package/dist/XerticaXLogo-ChryA6xj.js +0 -252
  467. package/dist/XerticaXLogo-CowGv7BC.js +0 -252
  468. package/dist/XerticaXLogo-CziKMQil.cjs +0 -242
  469. package/dist/XerticaXLogo-D8jf0SNv.cjs +0 -214
  470. package/dist/XerticaXLogo-DHz5SugF.js +0 -252
  471. package/dist/XerticaXLogo-DTee_y8X.cjs +0 -251
  472. package/dist/XerticaXLogo-DfUvz-lD.js +0 -243
  473. package/dist/XerticaXLogo-DzXKZBtG.js +0 -231
  474. package/dist/XerticaXLogo-fAJMy3H4.js +0 -215
  475. package/dist/XerticaXLogo-kslQ8Tk_.cjs +0 -251
  476. package/dist/XerticaXLogo-xWbElCZj.cjs +0 -230
  477. package/dist/alert-dialog-iDe5VE5o.js +0 -842
  478. package/dist/alert-dialog-yckpaOpy.cjs +0 -865
  479. package/dist/avatar-Cq5_E8r9.cjs +0 -78
  480. package/dist/avatar-CuYu2MKt.cjs +0 -72
  481. package/dist/avatar-Cxyofu1H.js +0 -56
  482. package/dist/avatar-DSBfJMRJ.js +0 -62
  483. package/dist/breadcrumb-CVzzzqfo.js +0 -103
  484. package/dist/breadcrumb-DIJ0X3Ot.js +0 -96
  485. package/dist/breadcrumb-DjSxkjlQ.cjs +0 -95
  486. package/dist/breadcrumb-DnDlQFg2.cjs +0 -102
  487. package/dist/button-0CXwCRTm.cjs +0 -85
  488. package/dist/button-Bnv9SvYK.cjs +0 -79
  489. package/dist/button-C6uvh0rV.js +0 -63
  490. package/dist/button-qkz7Icqf.js +0 -69
  491. package/dist/card-B8-Gl5DL.js +0 -73
  492. package/dist/card-Bv_c57KU.cjs +0 -72
  493. package/dist/card-DJTsYhLL.cjs +0 -89
  494. package/dist/card-fi8zAN-I.js +0 -90
  495. package/dist/dropdown-menu-B_uEXNc4.cjs +0 -220
  496. package/dist/dropdown-menu-CFuCssWA.js +0 -204
  497. package/dist/dropdown-menu-Ze1YZFyc.cjs +0 -247
  498. package/dist/dropdown-menu-nc_Lvg-u.js +0 -231
  499. package/dist/google-maps-loader-BVoVhUwA.js +0 -316
  500. package/dist/google-maps-loader-BqsYL48U.cjs +0 -285
  501. package/dist/google-maps-loader-DjJaYhV6.cjs +0 -316
  502. package/dist/google-maps-loader-t2IlYBzw.js +0 -286
  503. package/dist/index-B7A523O_.js +0 -8
  504. package/dist/index-BabBx2pa.js +0 -6
  505. package/dist/index-CkTUgOwX.js +0 -8
  506. package/dist/index-D3RLKRAs.cjs +0 -7
  507. package/dist/index-DmHhnb7a.cjs +0 -7
  508. package/dist/index.umd.js +0 -13712
  509. package/dist/input-CNFHVKvo.cjs +0 -145
  510. package/dist/input-CPl84zAx.cjs +0 -151
  511. package/dist/input-D-6IsAca.js +0 -133
  512. package/dist/input-wPYg0d0P.js +0 -127
  513. package/dist/progress-BLwqortq.cjs +0 -105
  514. package/dist/progress-Cs9i4DPx.js +0 -81
  515. package/dist/progress-D9mtsf6j.js +0 -89
  516. package/dist/progress-DDeuWPZw.cjs +0 -97
  517. package/dist/rich-text-editor-1UW3Y2JK.js +0 -2891
  518. package/dist/rich-text-editor-BM-LPpTh.js +0 -2902
  519. package/dist/rich-text-editor-BmsjY03B.js +0 -2949
  520. package/dist/rich-text-editor-BrdC5evx.js +0 -2244
  521. package/dist/rich-text-editor-CyggTOLQ.cjs +0 -2908
  522. package/dist/rich-text-editor-DbV-S7Fi.cjs +0 -2261
  523. package/dist/rich-text-editor-DoCkKhzk.cjs +0 -2919
  524. package/dist/rich-text-editor-GS2kpTAK.cjs +0 -2966
  525. package/dist/routes.d.ts +0 -10
  526. package/dist/select-Cmb8zF7w.cjs +0 -156
  527. package/dist/select-CprSNX0z.js +0 -139
  528. package/dist/select-DT7Zjn42.cjs +0 -162
  529. package/dist/select-En8DkoaQ.js +0 -145
  530. package/dist/sidebar-B3EYhli0.cjs +0 -800
  531. package/dist/sidebar-B9NR0lCe.cjs +0 -800
  532. package/dist/sidebar-BcJ6LxvX.cjs +0 -733
  533. package/dist/sidebar-BvF5I2Ue.cjs +0 -800
  534. package/dist/sidebar-C5B_LHek.cjs +0 -795
  535. package/dist/sidebar-CA6_ek3f.js +0 -801
  536. package/dist/sidebar-CRMiBtAi.js +0 -801
  537. package/dist/sidebar-CVUGHOS_.cjs +0 -756
  538. package/dist/sidebar-CZ2mWaMM.cjs +0 -800
  539. package/dist/sidebar-CmvwjnVb.js +0 -757
  540. package/dist/sidebar-CplprZpM.js +0 -801
  541. package/dist/sidebar-Dz7bd3zP.js +0 -796
  542. package/dist/sidebar-KIS0C2JH.js +0 -801
  543. package/dist/sidebar-OTO_up7Z.js +0 -801
  544. package/dist/sidebar-WoKvFWCN.js +0 -717
  545. package/dist/sidebar-zowjejT2.cjs +0 -800
  546. package/dist/skeleton-4zoHiFJ_.cjs +0 -83
  547. package/dist/skeleton-C4bHqUBf.js +0 -84
  548. package/dist/slider-C0JKA9k3.js +0 -56
  549. package/dist/slider-CPmwzm_3.cjs +0 -73
  550. package/dist/slider-DcJharR9.cjs +0 -73
  551. package/dist/slider-Pay3fka2.js +0 -56
  552. package/dist/sonner-DeUIj0Zg.cjs +0 -63
  553. package/dist/sonner-g9RIfi35.js +0 -47
  554. package/dist/tooltip-CNtsL5cB.cjs +0 -71
  555. package/dist/tooltip-CTyZCD8h.js +0 -55
  556. package/dist/tooltip-CwgSdy3h.cjs +0 -67
  557. package/dist/tooltip-D-OrYnKO.js +0 -51
  558. package/dist/use-audio-player-BJFV24XW.js +0 -188
  559. package/dist/use-audio-player-Bkh23vQ3.js +0 -177
  560. package/dist/use-audio-player-Dn1NR9xN.cjs +0 -176
  561. package/dist/use-audio-player-DyVYlOnR.cjs +0 -187
  562. package/dist/use-mobile-BB4M_4Ru.cjs +0 -47
  563. package/dist/use-mobile-CLu9nqGL.js +0 -31
  564. package/dist/use-mobile-CNwiBNxu.js +0 -33
  565. package/dist/use-mobile-Dlf74ufz.cjs +0 -49
  566. package/dist/xertica-assistant-B1IaHXnB.cjs +0 -1894
  567. package/dist/xertica-assistant-BMqdyRVi.js +0 -2082
  568. package/dist/xertica-assistant-Bj3vBCq_.cjs +0 -2081
  569. package/dist/xertica-assistant-CfBCo21g.js +0 -2148
  570. package/dist/xertica-assistant-DIM_Do1k.js +0 -1866
  571. package/dist/xertica-assistant-DPsESB6t.js +0 -1878
  572. package/dist/xertica-assistant-DrsRwla1.cjs +0 -2147
  573. package/dist/xertica-assistant-Qp3ydksa.cjs +0 -1882
  574. package/dist/xertica-assistant-gnCJdcZY.js +0 -1866
  575. package/dist/xertica-assistant-yyrR0JKl.cjs +0 -1882
  576. package/styles/xertica/app-overrides/scrollbar.css +0 -33
  577. package/dist/{XerticaXLogo-qBPhwK3g.cjs → LanguageSelector-1cINLJ23.cjs} +80 -80
@@ -1,2949 +0,0 @@
1
- import { jsxs, jsx, Fragment } from "react/jsx-runtime";
2
- import * as React from "react";
3
- import { useRef, useState, useCallback, useEffect } from "react";
4
- import * as RechartsPrimitive from "recharts";
5
- import { c as cn, B as Button } from "./button-qkz7Icqf.js";
6
- import { cva } from "class-variance-authority";
7
- import { XCircle, AlertTriangle, Info, CheckCircle, RefreshCw, BarChart3, WifiOff, XIcon, Undo, Redo, ChevronDown, Type, Heading1, Heading2, Heading3, Bold, Italic, Underline, AlignLeft, AlignCenter, AlignRight, List, ListOrdered, Link, X, Search, ChevronUp } from "lucide-react";
8
- import { C as Card, e as CardHeader, f as CardTitle, c as CardDescription, a as CardAction, b as CardContent, d as CardFooter } from "./card-fi8zAN-I.js";
9
- import { S as Select, h as SelectTrigger, i as SelectValue, a as SelectContent, c as SelectItem } from "./select-En8DkoaQ.js";
10
- import * as DialogPrimitive from "@radix-ui/react-dialog";
11
- import { D as DropdownMenu, n as DropdownMenuTrigger, b as DropdownMenuContent, d as DropdownMenuItem } from "./dropdown-menu-nc_Lvg-u.js";
12
- import { P as Popover, c as PopoverTrigger, b as PopoverContent, I as Input } from "./input-D-6IsAca.js";
13
- const alertVariants = cva(
14
- "relative w-full rounded-[var(--radius)] border-l-4 px-4 py-3 grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-5 [&>svg]:translate-y-0.5 [&>svg]:text-current",
15
- {
16
- variants: {
17
- variant: {
18
- default: "bg-muted/50 border-l-border text-foreground [&>svg]:text-muted-foreground",
19
- success: "bg-[color:var(--success)]/10 dark:bg-[color:var(--success)]/20 border-l-[color:var(--success)] text-foreground [&>svg]:text-[color:var(--success)]",
20
- info: "bg-[color:var(--info)]/10 dark:bg-[color:var(--info)]/20 border-l-[color:var(--info)] text-foreground [&>svg]:text-[color:var(--info)]",
21
- warning: "bg-[color:var(--warning)]/10 dark:bg-[color:var(--warning)]/20 border-l-[color:var(--warning)] text-foreground [&>svg]:text-[color:var(--warning)]",
22
- destructive: "bg-[color:var(--destructive)]/10 dark:bg-[color:var(--destructive)]/20 border-l-[color:var(--destructive)] text-foreground [&>svg]:text-[color:var(--destructive)]"
23
- }
24
- },
25
- defaultVariants: {
26
- variant: "default"
27
- }
28
- }
29
- );
30
- const alertIcons = {
31
- default: Info,
32
- success: CheckCircle,
33
- info: Info,
34
- warning: AlertTriangle,
35
- destructive: XCircle
36
- };
37
- function Alert({
38
- className,
39
- variant,
40
- icon,
41
- children,
42
- ...props
43
- }) {
44
- const alertVariant = variant && variant in alertIcons ? variant : "default";
45
- const DefaultIcon = alertIcons[alertVariant];
46
- return /* @__PURE__ */ jsxs(
47
- "div",
48
- {
49
- "data-slot": "alert",
50
- role: "alert",
51
- className: cn(alertVariants({ variant }), className),
52
- ...props,
53
- children: [
54
- icon !== void 0 ? icon : /* @__PURE__ */ jsx(DefaultIcon, { className: "flex-shrink-0" }),
55
- /* @__PURE__ */ jsx("div", { className: "flex-1", children })
56
- ]
57
- }
58
- );
59
- }
60
- function AlertTitle({ className, ...props }) {
61
- return /* @__PURE__ */ jsx(
62
- "div",
63
- {
64
- "data-slot": "alert-title",
65
- className: cn(
66
- "font-medium mb-1 leading-tight",
67
- className
68
- ),
69
- ...props
70
- }
71
- );
72
- }
73
- function AlertDescription({
74
- className,
75
- ...props
76
- }) {
77
- return /* @__PURE__ */ jsx(
78
- "div",
79
- {
80
- "data-slot": "alert-description",
81
- className: cn(
82
- "leading-relaxed",
83
- className
84
- ),
85
- ...props
86
- }
87
- );
88
- }
89
- const Empty = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
90
- "div",
91
- {
92
- ref,
93
- className: cn(
94
- "flex min-h-[400px] flex-col items-center justify-center rounded-[var(--radius-card)] border border-dashed border-border p-8 text-center animate-in fade-in-50",
95
- className
96
- ),
97
- ...props
98
- }
99
- ));
100
- Empty.displayName = "Empty";
101
- const EmptyIcon = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
102
- "div",
103
- {
104
- ref,
105
- className: cn(
106
- "mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-muted",
107
- className
108
- ),
109
- ...props
110
- }
111
- ));
112
- EmptyIcon.displayName = "EmptyIcon";
113
- const EmptyImage = React.forwardRef(({ className, alt, ...props }, ref) => /* @__PURE__ */ jsx(
114
- "img",
115
- {
116
- ref,
117
- alt,
118
- className: cn("mx-auto mb-4 h-48 w-48 object-contain opacity-50", className),
119
- ...props
120
- }
121
- ));
122
- EmptyImage.displayName = "EmptyImage";
123
- const EmptyTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
124
- "h3",
125
- {
126
- ref,
127
- className: cn("mt-4 font-semibold text-foreground", className),
128
- ...props
129
- }
130
- ));
131
- EmptyTitle.displayName = "EmptyTitle";
132
- const EmptyDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
133
- "p",
134
- {
135
- ref,
136
- className: cn("mt-2 text-sm text-muted-foreground max-w-sm mx-auto", className),
137
- ...props
138
- }
139
- ));
140
- EmptyDescription.displayName = "EmptyDescription";
141
- const EmptyAction = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
142
- "div",
143
- {
144
- ref,
145
- className: cn("mt-6 flex flex-col gap-2 sm:flex-row sm:gap-4", className),
146
- ...props
147
- }
148
- ));
149
- EmptyAction.displayName = "EmptyAction";
150
- function Skeleton({ className, ...props }) {
151
- return /* @__PURE__ */ jsx(
152
- "div",
153
- {
154
- "data-slot": "skeleton",
155
- className: cn("bg-accent animate-pulse rounded-md", className),
156
- ...props
157
- }
158
- );
159
- }
160
- const THEMES = { light: "", dark: ".dark" };
161
- const defaultPeriods = [
162
- { value: "7d", label: "7 days" },
163
- { value: "30d", label: "30 days" },
164
- { value: "90d", label: "90 days" }
165
- ];
166
- const defaultChartColors = [
167
- "var(--chart-1)",
168
- "var(--chart-2)",
169
- "var(--chart-3)",
170
- "var(--chart-4)",
171
- "var(--chart-5)",
172
- "var(--chart-6)",
173
- "var(--chart-7)",
174
- "var(--chart-8)"
175
- ];
176
- const chartBarSizes = {
177
- sm: 8,
178
- md: 14,
179
- lg: 22,
180
- xl: 32
181
- };
182
- const ChartContext = React.createContext(null);
183
- function useChart() {
184
- const context = React.useContext(ChartContext);
185
- if (!context) {
186
- throw new Error("useChart must be used within a <ChartContainer />");
187
- }
188
- return context;
189
- }
190
- function ChartContainer({
191
- id,
192
- className,
193
- children,
194
- config,
195
- ...props
196
- }) {
197
- const uniqueId = React.useId();
198
- const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
199
- return /* @__PURE__ */ jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs(
200
- "div",
201
- {
202
- "data-slot": "chart",
203
- "data-chart": chartId,
204
- className: cn(
205
- "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border relative h-[300px] min-h-[200px] w-full min-w-0 overflow-hidden text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
206
- className
207
- ),
208
- ...props,
209
- children: [
210
- /* @__PURE__ */ jsx(ChartStyle, { id: chartId, config }),
211
- /* @__PURE__ */ jsx(RechartsPrimitive.ResponsiveContainer, { width: "100%", height: "100%", children })
212
- ]
213
- }
214
- ) });
215
- }
216
- const ChartStyle = ({ id, config }) => {
217
- const colorConfig = Object.entries(config).filter(
218
- ([, config2]) => config2.theme || config2.color
219
- );
220
- if (!colorConfig.length) {
221
- return null;
222
- }
223
- return /* @__PURE__ */ jsx(
224
- "style",
225
- {
226
- dangerouslySetInnerHTML: {
227
- __html: Object.entries(THEMES).map(
228
- ([theme, prefix]) => `
229
- ${prefix} [data-chart=${id}] {
230
- ${colorConfig.map(([key, itemConfig]) => {
231
- var _a;
232
- const color = ((_a = itemConfig.theme) == null ? void 0 : _a[theme]) || itemConfig.color;
233
- return color ? ` --color-${key}: ${color};` : null;
234
- }).join("\n")}
235
- }
236
- `
237
- ).join("\n")
238
- }
239
- }
240
- );
241
- };
242
- const ChartTooltip = RechartsPrimitive.Tooltip;
243
- function ChartTooltipContent({
244
- active,
245
- payload,
246
- className,
247
- indicator = "dot",
248
- hideLabel = false,
249
- hideIndicator = false,
250
- label,
251
- labelFormatter,
252
- labelClassName,
253
- formatter,
254
- color,
255
- nameKey,
256
- labelKey
257
- }) {
258
- const { config } = useChart();
259
- const tooltipLabel = React.useMemo(() => {
260
- var _a;
261
- if (hideLabel || !(payload == null ? void 0 : payload.length)) {
262
- return null;
263
- }
264
- const [item] = payload;
265
- const key = `${labelKey || (item == null ? void 0 : item.dataKey) || (item == null ? void 0 : item.name) || "value"}`;
266
- const itemConfig = getPayloadConfigFromPayload(config, item, key);
267
- const value = !labelKey && typeof label === "string" ? ((_a = config[label]) == null ? void 0 : _a.label) || label : itemConfig == null ? void 0 : itemConfig.label;
268
- if (labelFormatter) {
269
- return /* @__PURE__ */ jsx("div", { className: cn("font-medium", labelClassName), children: labelFormatter(value, payload) });
270
- }
271
- if (!value) {
272
- return null;
273
- }
274
- return /* @__PURE__ */ jsx("div", { className: cn("font-medium", labelClassName), children: value });
275
- }, [
276
- label,
277
- labelFormatter,
278
- payload,
279
- hideLabel,
280
- labelClassName,
281
- config,
282
- labelKey
283
- ]);
284
- if (!active || !(payload == null ? void 0 : payload.length)) {
285
- return null;
286
- }
287
- const nestLabel = payload.length === 1 && indicator !== "dot";
288
- return /* @__PURE__ */ jsxs(
289
- "div",
290
- {
291
- className: cn(
292
- "border-border/50 bg-background/95 backdrop-blur-sm grid min-w-[8rem] items-start gap-1.5 rounded-xl border px-3 py-2 text-xs shadow-xl",
293
- className
294
- ),
295
- children: [
296
- !nestLabel ? tooltipLabel : null,
297
- /* @__PURE__ */ jsx("div", { className: "grid gap-1.5", children: payload.map((item, index) => {
298
- var _a;
299
- const key = `${nameKey || item.name || item.dataKey || "value"}`;
300
- const itemConfig = getPayloadConfigFromPayload(config, item, key);
301
- const indicatorColor = color || ((_a = item.payload) == null ? void 0 : _a.fill) || item.color;
302
- return /* @__PURE__ */ jsx(
303
- "div",
304
- {
305
- className: cn(
306
- "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
307
- indicator === "dot" && "items-center"
308
- ),
309
- children: formatter && (item == null ? void 0 : item.value) !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ jsxs(Fragment, { children: [
310
- (itemConfig == null ? void 0 : itemConfig.icon) ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ jsx(
311
- "div",
312
- {
313
- className: cn(
314
- "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
315
- {
316
- "h-2.5 w-2.5": indicator === "dot",
317
- "w-1": indicator === "line",
318
- "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
319
- "my-0.5": nestLabel && indicator === "dashed"
320
- }
321
- ),
322
- style: {
323
- "--color-bg": indicatorColor,
324
- "--color-border": indicatorColor
325
- }
326
- }
327
- ),
328
- /* @__PURE__ */ jsxs(
329
- "div",
330
- {
331
- className: cn(
332
- "flex flex-1 justify-between leading-none",
333
- nestLabel ? "items-end" : "items-center"
334
- ),
335
- children: [
336
- /* @__PURE__ */ jsxs("div", { className: "grid gap-1.5", children: [
337
- nestLabel ? tooltipLabel : null,
338
- /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: (itemConfig == null ? void 0 : itemConfig.label) || item.name })
339
- ] }),
340
- item.value && /* @__PURE__ */ jsx("span", { className: "text-foreground font-mono font-semibold tabular-nums", children: item.value.toLocaleString() })
341
- ]
342
- }
343
- )
344
- ] })
345
- },
346
- item.dataKey
347
- );
348
- }) })
349
- ]
350
- }
351
- );
352
- }
353
- const ChartLegend = RechartsPrimitive.Legend;
354
- function ChartLegendContent({
355
- className,
356
- hideIcon = false,
357
- payload,
358
- verticalAlign = "bottom",
359
- nameKey
360
- }) {
361
- const { config } = useChart();
362
- if (!(payload == null ? void 0 : payload.length)) {
363
- return null;
364
- }
365
- return /* @__PURE__ */ jsx(
366
- "div",
367
- {
368
- className: cn(
369
- "flex items-center justify-center gap-4",
370
- verticalAlign === "top" ? "pb-3" : "pt-3",
371
- className
372
- ),
373
- children: payload.map((item) => {
374
- const key = `${nameKey ? item.value : item.dataKey || item.value || "value"}`;
375
- const itemConfig = getPayloadConfigFromPayload(config, item, key);
376
- return /* @__PURE__ */ jsxs(
377
- "div",
378
- {
379
- className: cn(
380
- "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
381
- ),
382
- children: [
383
- (itemConfig == null ? void 0 : itemConfig.icon) && !hideIcon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsx(
384
- "div",
385
- {
386
- className: "h-2 w-2 shrink-0 rounded-full bg-(--color-bg)",
387
- style: {
388
- "--color-bg": item.color || `var(--color-${key})`
389
- }
390
- }
391
- ),
392
- /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: (itemConfig == null ? void 0 : itemConfig.label) || item.value })
393
- ]
394
- },
395
- item.value
396
- );
397
- })
398
- }
399
- );
400
- }
401
- function getPayloadConfigFromPayload(config, payload, key) {
402
- if (typeof payload !== "object" || payload === null) {
403
- return void 0;
404
- }
405
- const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
406
- let configLabelKey = key;
407
- if (key in payload && typeof payload[key] === "string") {
408
- configLabelKey = payload[key];
409
- } else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === "string") {
410
- configLabelKey = payloadPayload[key];
411
- }
412
- return configLabelKey in config ? config[configLabelKey] : config[key];
413
- }
414
- function getChartSeries(config, series) {
415
- if (series == null ? void 0 : series.length) {
416
- return series;
417
- }
418
- return Object.entries(config).map(([key, item]) => ({
419
- key,
420
- label: item.label
421
- }));
422
- }
423
- function getSeriesColor(key, index, colors) {
424
- if (Array.isArray(colors)) {
425
- return colors[index] || defaultChartColors[index % defaultChartColors.length];
426
- }
427
- return (colors == null ? void 0 : colors[key]) || defaultChartColors[index % defaultChartColors.length];
428
- }
429
- function getChartConfigWithColors(config, keys, colors) {
430
- return keys.reduce((nextConfig, key, index) => {
431
- const item = config[key];
432
- if ((item == null ? void 0 : item.theme) && !colors) {
433
- nextConfig[key] = item;
434
- return nextConfig;
435
- }
436
- nextConfig[key] = {
437
- label: (item == null ? void 0 : item.label) || key,
438
- icon: item == null ? void 0 : item.icon,
439
- color: colors ? getSeriesColor(key, index, colors) : (item == null ? void 0 : item.color) || getSeriesColor(key, index)
440
- };
441
- return nextConfig;
442
- }, {});
443
- }
444
- function buildChartConfig(keys, colors) {
445
- return keys.reduce((cfg, key, index) => {
446
- cfg[key] = {
447
- label: key,
448
- color: getSeriesColor(key, index, colors)
449
- };
450
- return cfg;
451
- }, {});
452
- }
453
- function formatTick(value) {
454
- if (typeof value !== "number") {
455
- return value;
456
- }
457
- return Intl.NumberFormat("en", {
458
- notation: "compact",
459
- maximumFractionDigits: 1
460
- }).format(value);
461
- }
462
- function defaultFilterData(data, period) {
463
- const match = period.match(/^(\d+)/);
464
- if (!match) {
465
- return data;
466
- }
467
- const limit = Number(match[1]);
468
- return data.slice(Math.max(data.length - limit, 0));
469
- }
470
- function getErrorDescription(error) {
471
- if (typeof error === "string") {
472
- return error;
473
- }
474
- if (error instanceof Error) {
475
- return error.message;
476
- }
477
- return void 0;
478
- }
479
- function getBarSize(barSize = "md") {
480
- return typeof barSize === "number" ? barSize : chartBarSizes[barSize];
481
- }
482
- function hasChartData(data, series) {
483
- if (!data.length || !series.length) {
484
- return false;
485
- }
486
- return data.some(
487
- (item) => series.some((serie) => {
488
- const value = item[serie.key];
489
- return value !== null && value !== void 0 && value !== "";
490
- })
491
- );
492
- }
493
- function hasPieData(data, nameKey, valueKey) {
494
- return data.some((item) => {
495
- const name = item[nameKey];
496
- const value = item[valueKey];
497
- return name !== null && name !== void 0 && name !== "" && value !== null && value !== void 0 && value !== "";
498
- });
499
- }
500
- function ChartState({
501
- type,
502
- className,
503
- error,
504
- onRetry,
505
- retryLabel = "Try again",
506
- emptyTitle = "No data available",
507
- emptyDescription = "There is no data available for this chart yet.",
508
- errorTitle = "Connection error",
509
- errorDescription,
510
- loadingLabel = "Loading chart data"
511
- }) {
512
- if (type === "loading") {
513
- return /* @__PURE__ */ jsxs(
514
- "div",
515
- {
516
- className: cn(
517
- "flex min-h-[240px] flex-col justify-end gap-3 rounded-[var(--radius-card)] border border-border p-6",
518
- className
519
- ),
520
- "aria-label": typeof loadingLabel === "string" ? loadingLabel : void 0,
521
- children: [
522
- /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-2/5" }),
523
- /* @__PURE__ */ jsx(Skeleton, { className: "h-14 w-3/5" }),
524
- /* @__PURE__ */ jsx(Skeleton, { className: "h-24 w-4/5" }),
525
- /* @__PURE__ */ jsx(Skeleton, { className: "h-36 w-full" })
526
- ]
527
- }
528
- );
529
- }
530
- if (type === "error") {
531
- return /* @__PURE__ */ jsx(
532
- "div",
533
- {
534
- className: cn(
535
- "flex min-h-[240px] items-center justify-center rounded-[var(--radius-card)] border border-border p-6",
536
- className
537
- ),
538
- children: /* @__PURE__ */ jsxs(Alert, { variant: "destructive", className: "max-w-xl", children: [
539
- /* @__PURE__ */ jsx(AlertTitle, { children: errorTitle }),
540
- /* @__PURE__ */ jsx(AlertDescription, { children: errorDescription || getErrorDescription(error) || "Unable to load chart data. Check your connection and try again." }),
541
- onRetry ? /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsxs(Button, { size: "sm", variant: "outline", onClick: onRetry, children: [
542
- /* @__PURE__ */ jsx(RefreshCw, { className: "size-4" }),
543
- retryLabel
544
- ] }) }) : null
545
- ] })
546
- }
547
- );
548
- }
549
- return /* @__PURE__ */ jsxs(Empty, { className: cn("min-h-[240px]", className), children: [
550
- /* @__PURE__ */ jsx(EmptyIcon, { children: /* @__PURE__ */ jsx(BarChart3, { className: "size-10 text-muted-foreground" }) }),
551
- /* @__PURE__ */ jsx(EmptyTitle, { children: emptyTitle }),
552
- /* @__PURE__ */ jsx(EmptyDescription, { children: emptyDescription }),
553
- onRetry ? /* @__PURE__ */ jsx(EmptyAction, { children: /* @__PURE__ */ jsxs(Button, { size: "sm", variant: "outline", onClick: onRetry, children: [
554
- /* @__PURE__ */ jsx(WifiOff, { className: "size-4" }),
555
- retryLabel
556
- ] }) }) : null
557
- ] });
558
- }
559
- function getChartState(state, hasData, className) {
560
- if (state.isLoading) {
561
- return /* @__PURE__ */ jsx(ChartState, { ...state, type: "loading", className });
562
- }
563
- if (state.error) {
564
- return /* @__PURE__ */ jsx(ChartState, { ...state, type: "error", className });
565
- }
566
- if (!hasData) {
567
- return /* @__PURE__ */ jsx(ChartState, { ...state, type: "empty", className });
568
- }
569
- return null;
570
- }
571
- function ChartCard({
572
- title,
573
- description,
574
- action,
575
- footer,
576
- children,
577
- className,
578
- contentClassName,
579
- ...props
580
- }) {
581
- return /* @__PURE__ */ jsxs(Card, { className: cn("w-full min-w-0 overflow-hidden", className), ...props, children: [
582
- /* @__PURE__ */ jsxs(CardHeader, { children: [
583
- /* @__PURE__ */ jsx(CardTitle, { children: title }),
584
- description ? /* @__PURE__ */ jsx(CardDescription, { children: description }) : null,
585
- action ? /* @__PURE__ */ jsx(CardAction, { children: action }) : null
586
- ] }),
587
- /* @__PURE__ */ jsx(CardContent, { className: contentClassName, children }),
588
- footer ? /* @__PURE__ */ jsx(CardFooter, { children: footer }) : null
589
- ] });
590
- }
591
- function AreaGradientDefs({
592
- seriesKeys,
593
- opacity = 0.3
594
- }) {
595
- return /* @__PURE__ */ jsx("defs", { children: seriesKeys.map((key) => /* @__PURE__ */ jsxs(
596
- "linearGradient",
597
- {
598
- id: `gradient-${key}`,
599
- x1: "0",
600
- y1: "0",
601
- x2: "0",
602
- y2: "1",
603
- children: [
604
- /* @__PURE__ */ jsx(
605
- "stop",
606
- {
607
- offset: "5%",
608
- stopColor: `var(--color-${key})`,
609
- stopOpacity: opacity
610
- }
611
- ),
612
- /* @__PURE__ */ jsx(
613
- "stop",
614
- {
615
- offset: "95%",
616
- stopColor: `var(--color-${key})`,
617
- stopOpacity: 0
618
- }
619
- )
620
- ]
621
- },
622
- key
623
- )) });
624
- }
625
- function DashboardBarChart({
626
- data,
627
- config,
628
- indexKey = "name",
629
- series,
630
- colors,
631
- barSize = "md",
632
- stacked = false,
633
- showGrid = true,
634
- showLegend = true,
635
- valueFormatter = formatTick,
636
- isLoading,
637
- error,
638
- onRetry,
639
- retryLabel,
640
- emptyTitle,
641
- emptyDescription,
642
- errorTitle,
643
- errorDescription,
644
- loadingLabel,
645
- stateClassName,
646
- className,
647
- ...props
648
- }) {
649
- const chartSeries = getChartSeries(config, series);
650
- const chartConfig = getChartConfigWithColors(
651
- config,
652
- chartSeries.map((item) => item.key),
653
- colors
654
- );
655
- const chartState = getChartState(
656
- {
657
- isLoading,
658
- error,
659
- onRetry,
660
- retryLabel,
661
- emptyTitle,
662
- emptyDescription,
663
- errorTitle,
664
- errorDescription,
665
- loadingLabel
666
- },
667
- hasChartData(data, chartSeries),
668
- cn("h-[320px] w-full", stateClassName)
669
- );
670
- if (chartState) {
671
- return chartState;
672
- }
673
- return /* @__PURE__ */ jsx(
674
- ChartContainer,
675
- {
676
- config: chartConfig,
677
- className: cn("h-[320px] w-full", className),
678
- ...props,
679
- children: /* @__PURE__ */ jsxs(RechartsPrimitive.BarChart, { data, accessibilityLayer: true, barGap: 4, children: [
680
- showGrid ? /* @__PURE__ */ jsx(
681
- RechartsPrimitive.CartesianGrid,
682
- {
683
- vertical: false,
684
- strokeDasharray: "3 3",
685
- stroke: "var(--border)",
686
- strokeOpacity: 0.5
687
- }
688
- ) : null,
689
- /* @__PURE__ */ jsx(
690
- RechartsPrimitive.XAxis,
691
- {
692
- dataKey: indexKey,
693
- tickLine: false,
694
- axisLine: false,
695
- tickMargin: 8
696
- }
697
- ),
698
- /* @__PURE__ */ jsx(
699
- RechartsPrimitive.YAxis,
700
- {
701
- tickLine: false,
702
- axisLine: false,
703
- tickMargin: 8,
704
- tickFormatter: valueFormatter
705
- }
706
- ),
707
- /* @__PURE__ */ jsx(
708
- ChartTooltip,
709
- {
710
- cursor: { fill: "var(--muted)", opacity: 0.4, radius: 4 },
711
- content: /* @__PURE__ */ jsx(ChartTooltipContent, {})
712
- }
713
- ),
714
- showLegend ? /* @__PURE__ */ jsx(ChartLegend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}) }) : null,
715
- (() => {
716
- const topOfStack = /* @__PURE__ */ new Set();
717
- if (stacked) {
718
- const lastByStack = /* @__PURE__ */ new Map();
719
- chartSeries.forEach((s) => lastByStack.set(s.stackId || "total", s.key));
720
- lastByStack.forEach((key) => topOfStack.add(key));
721
- }
722
- return chartSeries.map((item) => {
723
- const isTop = !stacked || topOfStack.has(item.key);
724
- return /* @__PURE__ */ jsx(
725
- RechartsPrimitive.Bar,
726
- {
727
- dataKey: item.key,
728
- fill: `var(--color-${item.key})`,
729
- radius: isTop ? [4, 4, 0, 0] : [0, 0, 0, 0],
730
- barSize: getBarSize(barSize),
731
- stackId: stacked ? item.stackId || "total" : item.stackId,
732
- isAnimationActive: true,
733
- animationDuration: 600,
734
- animationEasing: "ease-out"
735
- },
736
- item.key
737
- );
738
- });
739
- })()
740
- ] })
741
- }
742
- );
743
- }
744
- function DashboardLineChart({
745
- data,
746
- config,
747
- indexKey = "name",
748
- series,
749
- colors,
750
- showDots = false,
751
- showGrid = true,
752
- showLegend = true,
753
- curveType = "monotone",
754
- strokeWidth = 2,
755
- valueFormatter = formatTick,
756
- isLoading,
757
- error,
758
- onRetry,
759
- retryLabel,
760
- emptyTitle,
761
- emptyDescription,
762
- errorTitle,
763
- errorDescription,
764
- loadingLabel,
765
- stateClassName,
766
- className,
767
- ...props
768
- }) {
769
- const chartSeries = getChartSeries(config, series);
770
- const chartConfig = getChartConfigWithColors(
771
- config,
772
- chartSeries.map((item) => item.key),
773
- colors
774
- );
775
- const chartState = getChartState(
776
- {
777
- isLoading,
778
- error,
779
- onRetry,
780
- retryLabel,
781
- emptyTitle,
782
- emptyDescription,
783
- errorTitle,
784
- errorDescription,
785
- loadingLabel
786
- },
787
- hasChartData(data, chartSeries),
788
- cn("h-[320px] w-full", stateClassName)
789
- );
790
- if (chartState) {
791
- return chartState;
792
- }
793
- return /* @__PURE__ */ jsx(
794
- ChartContainer,
795
- {
796
- config: chartConfig,
797
- className: cn("h-[320px] w-full", className),
798
- ...props,
799
- children: /* @__PURE__ */ jsxs(RechartsPrimitive.LineChart, { data, accessibilityLayer: true, children: [
800
- showGrid ? /* @__PURE__ */ jsx(
801
- RechartsPrimitive.CartesianGrid,
802
- {
803
- vertical: false,
804
- strokeDasharray: "3 3",
805
- stroke: "var(--border)",
806
- strokeOpacity: 0.5
807
- }
808
- ) : null,
809
- /* @__PURE__ */ jsx(
810
- RechartsPrimitive.XAxis,
811
- {
812
- dataKey: indexKey,
813
- tickLine: false,
814
- axisLine: false,
815
- tickMargin: 8
816
- }
817
- ),
818
- /* @__PURE__ */ jsx(
819
- RechartsPrimitive.YAxis,
820
- {
821
- tickLine: false,
822
- axisLine: false,
823
- tickMargin: 8,
824
- tickFormatter: valueFormatter
825
- }
826
- ),
827
- /* @__PURE__ */ jsx(ChartTooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, { indicator: "line" }) }),
828
- showLegend ? /* @__PURE__ */ jsx(ChartLegend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}) }) : null,
829
- chartSeries.map((item) => /* @__PURE__ */ jsx(
830
- RechartsPrimitive.Line,
831
- {
832
- type: curveType,
833
- dataKey: item.key,
834
- stroke: `var(--color-${item.key})`,
835
- strokeWidth,
836
- dot: showDots ? { r: 3, fill: `var(--color-${item.key})`, strokeWidth: 0 } : false,
837
- activeDot: { r: 5, strokeWidth: 0 },
838
- yAxisId: item.yAxisId,
839
- isAnimationActive: true,
840
- animationDuration: 600,
841
- animationEasing: "ease-out"
842
- },
843
- item.key
844
- ))
845
- ] })
846
- }
847
- );
848
- }
849
- function HorizontalBarChart({
850
- data,
851
- config,
852
- indexKey = "name",
853
- series,
854
- colors,
855
- barSize = "md",
856
- stacked = false,
857
- categoryWidth = 96,
858
- showGrid = true,
859
- showLegend = true,
860
- valueFormatter = formatTick,
861
- isLoading,
862
- error,
863
- onRetry,
864
- retryLabel,
865
- emptyTitle,
866
- emptyDescription,
867
- errorTitle,
868
- errorDescription,
869
- loadingLabel,
870
- stateClassName,
871
- className,
872
- ...props
873
- }) {
874
- const chartSeries = getChartSeries(config, series);
875
- const chartConfig = getChartConfigWithColors(
876
- config,
877
- chartSeries.map((item) => item.key),
878
- colors
879
- );
880
- const chartState = getChartState(
881
- {
882
- isLoading,
883
- error,
884
- onRetry,
885
- retryLabel,
886
- emptyTitle,
887
- emptyDescription,
888
- errorTitle,
889
- errorDescription,
890
- loadingLabel
891
- },
892
- hasChartData(data, chartSeries),
893
- cn("h-[320px] w-full", stateClassName)
894
- );
895
- if (chartState) {
896
- return chartState;
897
- }
898
- return /* @__PURE__ */ jsx(
899
- ChartContainer,
900
- {
901
- config: chartConfig,
902
- className: cn("h-[320px] w-full", className),
903
- ...props,
904
- children: /* @__PURE__ */ jsxs(
905
- RechartsPrimitive.BarChart,
906
- {
907
- data,
908
- layout: "vertical",
909
- accessibilityLayer: true,
910
- margin: { left: 8, right: 16 },
911
- children: [
912
- showGrid ? /* @__PURE__ */ jsx(
913
- RechartsPrimitive.CartesianGrid,
914
- {
915
- horizontal: false,
916
- strokeDasharray: "3 3",
917
- stroke: "var(--border)",
918
- strokeOpacity: 0.5
919
- }
920
- ) : null,
921
- /* @__PURE__ */ jsx(
922
- RechartsPrimitive.XAxis,
923
- {
924
- type: "number",
925
- tickLine: false,
926
- axisLine: false,
927
- tickMargin: 8,
928
- tickFormatter: valueFormatter
929
- }
930
- ),
931
- /* @__PURE__ */ jsx(
932
- RechartsPrimitive.YAxis,
933
- {
934
- dataKey: indexKey,
935
- type: "category",
936
- tickLine: false,
937
- axisLine: false,
938
- tickMargin: 8,
939
- width: categoryWidth
940
- }
941
- ),
942
- /* @__PURE__ */ jsx(ChartTooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) }),
943
- showLegend ? /* @__PURE__ */ jsx(ChartLegend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}) }) : null,
944
- chartSeries.map((item) => /* @__PURE__ */ jsx(
945
- RechartsPrimitive.Bar,
946
- {
947
- dataKey: item.key,
948
- fill: `var(--color-${item.key})`,
949
- radius: [0, 4, 4, 0],
950
- barSize: getBarSize(barSize),
951
- stackId: stacked ? item.stackId || "total" : item.stackId,
952
- isAnimationActive: true,
953
- animationDuration: 600,
954
- animationEasing: "ease-out"
955
- },
956
- item.key
957
- ))
958
- ]
959
- }
960
- )
961
- }
962
- );
963
- }
964
- function InteractiveTimeSeriesChart({
965
- data,
966
- config,
967
- indexKey = "date",
968
- series,
969
- colors,
970
- periods = defaultPeriods,
971
- defaultPeriod = ((_a) => (_a = periods[1]) == null ? void 0 : _a.value)() || ((_b) => (_b = periods[0]) == null ? void 0 : _b.value)() || "30d",
972
- defaultSeries,
973
- filterData = defaultFilterData,
974
- showGrid = true,
975
- showLegend = false,
976
- showDots = false,
977
- gradientFill = true,
978
- curveType = "monotone",
979
- strokeWidth = 2,
980
- valueFormatter = formatTick,
981
- isLoading,
982
- error,
983
- onRetry,
984
- retryLabel,
985
- emptyTitle,
986
- emptyDescription,
987
- errorTitle,
988
- errorDescription,
989
- loadingLabel,
990
- stateClassName,
991
- className,
992
- ...props
993
- }) {
994
- var _a2;
995
- const chartSeries = getChartSeries(config, series);
996
- const chartConfig = getChartConfigWithColors(
997
- config,
998
- chartSeries.map((item) => item.key),
999
- colors
1000
- );
1001
- const [period, setPeriod] = React.useState(defaultPeriod);
1002
- const [activeSeries, setActiveSeries] = React.useState(
1003
- defaultSeries || ((_a2 = chartSeries[0]) == null ? void 0 : _a2.key) || ""
1004
- );
1005
- const filteredData = React.useMemo(
1006
- () => filterData(data, period),
1007
- [data, filterData, period]
1008
- );
1009
- const visibleSeries = chartSeries.length > 1 ? chartSeries.filter((item) => item.key === activeSeries) : chartSeries;
1010
- const chartState = getChartState(
1011
- {
1012
- isLoading,
1013
- error,
1014
- onRetry,
1015
- retryLabel,
1016
- emptyTitle,
1017
- emptyDescription,
1018
- errorTitle,
1019
- errorDescription,
1020
- loadingLabel
1021
- },
1022
- hasChartData(filteredData, visibleSeries),
1023
- cn("h-[320px] w-full", stateClassName)
1024
- );
1025
- return /* @__PURE__ */ jsxs("div", { className: "w-full space-y-4", children: [
1026
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [
1027
- chartSeries.length > 1 ? /* @__PURE__ */ jsx(
1028
- "div",
1029
- {
1030
- className: "inline-flex h-10 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
1031
- role: "group",
1032
- "aria-label": "Selecionar metrica do grafico",
1033
- children: chartSeries.map((item) => {
1034
- var _a3;
1035
- const label = item.label || ((_a3 = config[item.key]) == null ? void 0 : _a3.label) || item.key;
1036
- return /* @__PURE__ */ jsx(
1037
- Button,
1038
- {
1039
- type: "button",
1040
- variant: "ghost",
1041
- size: "sm",
1042
- "aria-pressed": activeSeries === item.key,
1043
- onClick: () => setActiveSeries(item.key),
1044
- className: cn(
1045
- "h-8 px-3 text-sm font-medium transition-all",
1046
- activeSeries === item.key ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
1047
- ),
1048
- children: label
1049
- },
1050
- item.key
1051
- );
1052
- })
1053
- }
1054
- ) : /* @__PURE__ */ jsx("div", {}),
1055
- /* @__PURE__ */ jsxs(Select, { value: period, onValueChange: setPeriod, children: [
1056
- /* @__PURE__ */ jsx(SelectTrigger, { className: "w-full sm:w-[160px]", size: "sm", "aria-label": "Selecionar periodo do grafico", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Period" }) }),
1057
- /* @__PURE__ */ jsx(SelectContent, { children: periods.map((item) => /* @__PURE__ */ jsx(SelectItem, { value: item.value, children: item.label }, item.value)) })
1058
- ] })
1059
- ] }),
1060
- chartState || /* @__PURE__ */ jsx(
1061
- ChartContainer,
1062
- {
1063
- config: chartConfig,
1064
- className: cn("h-[320px] w-full", className),
1065
- ...props,
1066
- children: /* @__PURE__ */ jsxs(RechartsPrimitive.AreaChart, { data: filteredData, accessibilityLayer: true, children: [
1067
- gradientFill && /* @__PURE__ */ jsx(
1068
- AreaGradientDefs,
1069
- {
1070
- seriesKeys: visibleSeries.map((s) => s.key),
1071
- opacity: 0.4
1072
- }
1073
- ),
1074
- showGrid ? /* @__PURE__ */ jsx(
1075
- RechartsPrimitive.CartesianGrid,
1076
- {
1077
- vertical: false,
1078
- strokeDasharray: "3 3",
1079
- stroke: "var(--border)",
1080
- strokeOpacity: 0.5
1081
- }
1082
- ) : null,
1083
- /* @__PURE__ */ jsx(
1084
- RechartsPrimitive.XAxis,
1085
- {
1086
- dataKey: indexKey,
1087
- tickLine: false,
1088
- axisLine: false,
1089
- tickMargin: 8
1090
- }
1091
- ),
1092
- /* @__PURE__ */ jsx(
1093
- RechartsPrimitive.YAxis,
1094
- {
1095
- tickLine: false,
1096
- axisLine: false,
1097
- tickMargin: 8,
1098
- tickFormatter: valueFormatter
1099
- }
1100
- ),
1101
- /* @__PURE__ */ jsx(ChartTooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, { indicator: "line" }) }),
1102
- showLegend ? /* @__PURE__ */ jsx(ChartLegend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}) }) : null,
1103
- visibleSeries.map((item) => /* @__PURE__ */ jsx(
1104
- RechartsPrimitive.Area,
1105
- {
1106
- type: curveType,
1107
- dataKey: item.key,
1108
- stroke: `var(--color-${item.key})`,
1109
- fill: gradientFill ? `url(#gradient-${item.key})` : `var(--color-${item.key})`,
1110
- fillOpacity: gradientFill ? 1 : 0.16,
1111
- strokeWidth,
1112
- dot: showDots ? { r: 3, fill: `var(--color-${item.key})`, strokeWidth: 0 } : false,
1113
- activeDot: { r: 5, strokeWidth: 0 },
1114
- isAnimationActive: true,
1115
- animationDuration: 600,
1116
- animationEasing: "ease-out"
1117
- },
1118
- item.key
1119
- ))
1120
- ] })
1121
- }
1122
- )
1123
- ] });
1124
- }
1125
- function ComboMetricChart({
1126
- data,
1127
- config,
1128
- indexKey = "name",
1129
- series,
1130
- colors,
1131
- barSize = "md",
1132
- showGrid = true,
1133
- showLegend = true,
1134
- gradientFill = false,
1135
- curveType = "monotone",
1136
- valueFormatter = formatTick,
1137
- isLoading,
1138
- error,
1139
- onRetry,
1140
- retryLabel,
1141
- emptyTitle,
1142
- emptyDescription,
1143
- errorTitle,
1144
- errorDescription,
1145
- loadingLabel,
1146
- stateClassName,
1147
- className,
1148
- ...props
1149
- }) {
1150
- const chartSeries = getChartSeries(config, series);
1151
- const chartConfig = getChartConfigWithColors(
1152
- config,
1153
- chartSeries.map((item) => item.key),
1154
- colors
1155
- );
1156
- const chartState = getChartState(
1157
- {
1158
- isLoading,
1159
- error,
1160
- onRetry,
1161
- retryLabel,
1162
- emptyTitle,
1163
- emptyDescription,
1164
- errorTitle,
1165
- errorDescription,
1166
- loadingLabel
1167
- },
1168
- hasChartData(data, chartSeries),
1169
- cn("h-[340px] w-full", stateClassName)
1170
- );
1171
- if (chartState) {
1172
- return chartState;
1173
- }
1174
- const areaSeries = gradientFill ? chartSeries.filter((s) => s.type === "area").map((s) => s.key) : [];
1175
- return /* @__PURE__ */ jsx(
1176
- ChartContainer,
1177
- {
1178
- config: chartConfig,
1179
- className: cn("h-[340px] w-full", className),
1180
- ...props,
1181
- children: /* @__PURE__ */ jsxs(RechartsPrimitive.ComposedChart, { data, accessibilityLayer: true, children: [
1182
- gradientFill && areaSeries.length > 0 && /* @__PURE__ */ jsx(AreaGradientDefs, { seriesKeys: areaSeries, opacity: 0.35 }),
1183
- showGrid ? /* @__PURE__ */ jsx(
1184
- RechartsPrimitive.CartesianGrid,
1185
- {
1186
- vertical: false,
1187
- strokeDasharray: "3 3",
1188
- stroke: "var(--border)",
1189
- strokeOpacity: 0.5
1190
- }
1191
- ) : null,
1192
- /* @__PURE__ */ jsx(
1193
- RechartsPrimitive.XAxis,
1194
- {
1195
- dataKey: indexKey,
1196
- tickLine: false,
1197
- axisLine: false,
1198
- tickMargin: 8
1199
- }
1200
- ),
1201
- /* @__PURE__ */ jsx(
1202
- RechartsPrimitive.YAxis,
1203
- {
1204
- tickLine: false,
1205
- axisLine: false,
1206
- tickMargin: 8,
1207
- tickFormatter: valueFormatter
1208
- }
1209
- ),
1210
- /* @__PURE__ */ jsx(ChartTooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) }),
1211
- showLegend ? /* @__PURE__ */ jsx(ChartLegend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}) }) : null,
1212
- chartSeries.map(
1213
- (item) => item.type === "line" ? /* @__PURE__ */ jsx(
1214
- RechartsPrimitive.Line,
1215
- {
1216
- type: curveType,
1217
- dataKey: item.key,
1218
- stroke: `var(--color-${item.key})`,
1219
- strokeWidth: 2,
1220
- dot: false,
1221
- activeDot: { r: 5, strokeWidth: 0 },
1222
- yAxisId: item.yAxisId,
1223
- isAnimationActive: true,
1224
- animationDuration: 600,
1225
- animationEasing: "ease-out"
1226
- },
1227
- item.key
1228
- ) : item.type === "area" ? /* @__PURE__ */ jsx(
1229
- RechartsPrimitive.Area,
1230
- {
1231
- type: curveType,
1232
- dataKey: item.key,
1233
- stroke: `var(--color-${item.key})`,
1234
- fill: gradientFill ? `url(#gradient-${item.key})` : `var(--color-${item.key})`,
1235
- fillOpacity: gradientFill ? 1 : 0.12,
1236
- strokeWidth: 2,
1237
- dot: false,
1238
- activeDot: { r: 5, strokeWidth: 0 },
1239
- yAxisId: item.yAxisId,
1240
- isAnimationActive: true,
1241
- animationDuration: 600,
1242
- animationEasing: "ease-out"
1243
- },
1244
- item.key
1245
- ) : /* @__PURE__ */ jsx(
1246
- RechartsPrimitive.Bar,
1247
- {
1248
- dataKey: item.key,
1249
- fill: `var(--color-${item.key})`,
1250
- radius: [4, 4, 0, 0],
1251
- barSize: getBarSize(barSize),
1252
- yAxisId: item.yAxisId,
1253
- isAnimationActive: true,
1254
- animationDuration: 600,
1255
- animationEasing: "ease-out"
1256
- },
1257
- item.key
1258
- )
1259
- )
1260
- ] })
1261
- }
1262
- );
1263
- }
1264
- function DonutBreakdownChart({
1265
- data,
1266
- config,
1267
- nameKey = "name",
1268
- valueKey = "value",
1269
- colors,
1270
- centerLabel,
1271
- centerValue,
1272
- showLegend = true,
1273
- innerRadius = "58%",
1274
- outerRadius = "82%",
1275
- isLoading,
1276
- error,
1277
- onRetry,
1278
- retryLabel,
1279
- emptyTitle,
1280
- emptyDescription,
1281
- errorTitle,
1282
- errorDescription,
1283
- loadingLabel,
1284
- stateClassName,
1285
- className,
1286
- ...props
1287
- }) {
1288
- const [activeIndex, setActiveIndex] = React.useState(0);
1289
- const chartKeys = data.map(
1290
- (entry, index) => String(entry[nameKey] || `segment-${index}`)
1291
- );
1292
- const chartConfig = getChartConfigWithColors(config, chartKeys, colors);
1293
- const chartState = getChartState(
1294
- {
1295
- isLoading,
1296
- error,
1297
- onRetry,
1298
- retryLabel,
1299
- emptyTitle,
1300
- emptyDescription,
1301
- errorTitle,
1302
- errorDescription,
1303
- loadingLabel
1304
- },
1305
- hasPieData(data, nameKey, valueKey),
1306
- cn("h-[320px] w-full", stateClassName)
1307
- );
1308
- if (chartState) {
1309
- return chartState;
1310
- }
1311
- return /* @__PURE__ */ jsx(
1312
- ChartContainer,
1313
- {
1314
- config: chartConfig,
1315
- className: cn("h-[320px] w-full", className),
1316
- ...props,
1317
- children: /* @__PURE__ */ jsxs(RechartsPrimitive.PieChart, { accessibilityLayer: true, children: [
1318
- /* @__PURE__ */ jsx(
1319
- ChartTooltip,
1320
- {
1321
- cursor: false,
1322
- content: /* @__PURE__ */ jsx(ChartTooltipContent, { hideLabel: true, nameKey })
1323
- }
1324
- ),
1325
- showLegend ? /* @__PURE__ */ jsx(
1326
- ChartLegend,
1327
- {
1328
- content: /* @__PURE__ */ jsx(ChartLegendContent, { nameKey }),
1329
- verticalAlign: "bottom"
1330
- }
1331
- ) : null,
1332
- /* @__PURE__ */ jsxs(
1333
- RechartsPrimitive.Pie,
1334
- {
1335
- data,
1336
- dataKey: valueKey,
1337
- nameKey,
1338
- innerRadius,
1339
- outerRadius,
1340
- paddingAngle: 3,
1341
- activeIndex,
1342
- onMouseEnter: (_, index) => setActiveIndex(index),
1343
- isAnimationActive: true,
1344
- animationDuration: 600,
1345
- animationEasing: "ease-out",
1346
- children: [
1347
- data.map((entry, index) => {
1348
- const key = String(entry[nameKey] || `segment-${index}`);
1349
- return /* @__PURE__ */ jsx(
1350
- RechartsPrimitive.Cell,
1351
- {
1352
- fill: `var(--color-${key})`,
1353
- opacity: index === activeIndex ? 1 : 0.7,
1354
- stroke: "transparent"
1355
- },
1356
- key
1357
- );
1358
- }),
1359
- centerValue || centerLabel ? /* @__PURE__ */ jsx(
1360
- RechartsPrimitive.Label,
1361
- {
1362
- position: "center",
1363
- content: ({ viewBox }) => {
1364
- if (!viewBox || !("cx" in viewBox) || !("cy" in viewBox)) {
1365
- return null;
1366
- }
1367
- return /* @__PURE__ */ jsxs(
1368
- "text",
1369
- {
1370
- x: viewBox.cx,
1371
- y: viewBox.cy,
1372
- textAnchor: "middle",
1373
- dominantBaseline: "middle",
1374
- children: [
1375
- centerValue ? /* @__PURE__ */ jsx(
1376
- "tspan",
1377
- {
1378
- x: viewBox.cx,
1379
- y: viewBox.cy,
1380
- className: "fill-foreground text-2xl font-semibold",
1381
- children: centerValue
1382
- }
1383
- ) : null,
1384
- centerLabel ? /* @__PURE__ */ jsx(
1385
- "tspan",
1386
- {
1387
- x: viewBox.cx,
1388
- y: Number(viewBox.cy) + 22,
1389
- className: "fill-muted-foreground text-xs",
1390
- children: centerLabel
1391
- }
1392
- ) : null
1393
- ]
1394
- }
1395
- );
1396
- }
1397
- }
1398
- ) : null
1399
- ]
1400
- }
1401
- )
1402
- ] })
1403
- }
1404
- );
1405
- }
1406
- function SparklineChart({
1407
- data,
1408
- dataKey,
1409
- color = "var(--chart-1)",
1410
- filled = true,
1411
- showEndDot = true,
1412
- curveType = "monotone",
1413
- strokeWidth = 2,
1414
- className
1415
- }) {
1416
- const sparkId = React.useId().replace(/:/g, "");
1417
- const lastPoint = data[data.length - 1];
1418
- const lastValue = lastPoint ? lastPoint[dataKey] : void 0;
1419
- return /* @__PURE__ */ jsxs("div", { className: cn("relative h-12 w-full min-w-0", className), children: [
1420
- /* @__PURE__ */ jsx(RechartsPrimitive.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
1421
- RechartsPrimitive.AreaChart,
1422
- {
1423
- data,
1424
- margin: { top: 4, right: showEndDot ? 8 : 0, bottom: 0, left: 0 },
1425
- children: [
1426
- filled && /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
1427
- "linearGradient",
1428
- {
1429
- id: `spark-gradient-${sparkId}`,
1430
- x1: "0",
1431
- y1: "0",
1432
- x2: "0",
1433
- y2: "1",
1434
- children: [
1435
- /* @__PURE__ */ jsx("stop", { offset: "5%", stopColor: color, stopOpacity: 0.3 }),
1436
- /* @__PURE__ */ jsx("stop", { offset: "95%", stopColor: color, stopOpacity: 0 })
1437
- ]
1438
- }
1439
- ) }),
1440
- /* @__PURE__ */ jsx(
1441
- RechartsPrimitive.Area,
1442
- {
1443
- type: curveType,
1444
- dataKey,
1445
- stroke: color,
1446
- strokeWidth,
1447
- fill: filled ? `url(#spark-gradient-${sparkId})` : "none",
1448
- fillOpacity: 1,
1449
- dot: false,
1450
- activeDot: false,
1451
- isAnimationActive: true,
1452
- animationDuration: 600,
1453
- animationEasing: "ease-out"
1454
- }
1455
- )
1456
- ]
1457
- }
1458
- ) }),
1459
- showEndDot && lastValue !== void 0 && lastValue !== null && /* @__PURE__ */ jsx(
1460
- "div",
1461
- {
1462
- className: "pointer-events-none absolute right-0 top-1/2 h-2.5 w-2.5 -translate-y-1/2 rounded-full ring-2 ring-background",
1463
- style: { backgroundColor: color }
1464
- }
1465
- )
1466
- ] });
1467
- }
1468
- function RadarMetricChart({
1469
- data,
1470
- labelKey,
1471
- series,
1472
- colors,
1473
- filled = true,
1474
- fillOpacity = 0.25,
1475
- showDots = false,
1476
- showGrid = true,
1477
- showLegend,
1478
- valueFormatter,
1479
- isLoading,
1480
- error,
1481
- onRetry,
1482
- retryLabel,
1483
- emptyTitle,
1484
- emptyDescription,
1485
- errorTitle,
1486
- errorDescription,
1487
- loadingLabel,
1488
- stateClassName,
1489
- className
1490
- }) {
1491
- const chartConfig = React.useMemo(
1492
- () => buildChartConfig(series.map((s) => s.key), colors),
1493
- [series, colors]
1494
- );
1495
- const hasData = data.length > 0 && series.length > 0;
1496
- const chartState = getChartState(
1497
- { isLoading, error, emptyTitle, emptyDescription, errorTitle, errorDescription, loadingLabel, stateClassName, onRetry, retryLabel },
1498
- hasData,
1499
- stateClassName
1500
- );
1501
- const displayLegend = showLegend ?? series.length > 1;
1502
- return /* @__PURE__ */ jsx(ChartContainer, { config: chartConfig, className: cn("h-[300px] w-full", className), children: chartState ?? /* @__PURE__ */ jsxs(RechartsPrimitive.RadarChart, { data, accessibilityLayer: true, children: [
1503
- showGrid && /* @__PURE__ */ jsx(
1504
- RechartsPrimitive.PolarGrid,
1505
- {
1506
- stroke: "var(--border)",
1507
- strokeOpacity: 0.6
1508
- }
1509
- ),
1510
- /* @__PURE__ */ jsx(
1511
- RechartsPrimitive.PolarAngleAxis,
1512
- {
1513
- dataKey: labelKey,
1514
- tick: { fill: "var(--muted-foreground)", fontSize: 12 }
1515
- }
1516
- ),
1517
- /* @__PURE__ */ jsx(
1518
- RechartsPrimitive.PolarRadiusAxis,
1519
- {
1520
- tick: false,
1521
- axisLine: false,
1522
- tickFormatter: valueFormatter
1523
- }
1524
- ),
1525
- /* @__PURE__ */ jsx(
1526
- ChartTooltip,
1527
- {
1528
- content: /* @__PURE__ */ jsx(
1529
- ChartTooltipContent,
1530
- {
1531
- formatter: valueFormatter ? (v) => valueFormatter(v) : void 0
1532
- }
1533
- )
1534
- }
1535
- ),
1536
- displayLegend && /* @__PURE__ */ jsx(ChartLegend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}) }),
1537
- series.map((s) => /* @__PURE__ */ jsx(
1538
- RechartsPrimitive.Radar,
1539
- {
1540
- name: s.label ?? s.key,
1541
- dataKey: s.key,
1542
- stroke: `var(--color-${s.key})`,
1543
- fill: filled ? `var(--color-${s.key})` : "none",
1544
- fillOpacity: filled ? fillOpacity : 0,
1545
- dot: showDots ? { r: 3, fill: `var(--color-${s.key})` } : false,
1546
- isAnimationActive: true,
1547
- animationDuration: 600,
1548
- animationEasing: "ease-out"
1549
- },
1550
- s.key
1551
- ))
1552
- ] }) });
1553
- }
1554
- function PieMetricChart({
1555
- data,
1556
- nameKey,
1557
- valueKey,
1558
- colors,
1559
- outerRadius = "80%",
1560
- innerRadius = 0,
1561
- showLabels = false,
1562
- showLegend = true,
1563
- explodeIndex,
1564
- explodeOffset = 12,
1565
- valueFormatter,
1566
- isLoading,
1567
- error,
1568
- onRetry,
1569
- retryLabel,
1570
- emptyTitle,
1571
- emptyDescription,
1572
- errorTitle,
1573
- errorDescription,
1574
- loadingLabel,
1575
- stateClassName,
1576
- className
1577
- }) {
1578
- const names = React.useMemo(
1579
- () => data.map((d) => String(d[nameKey] ?? "")),
1580
- [data, nameKey]
1581
- );
1582
- const chartConfig = React.useMemo(
1583
- () => buildChartConfig(names, colors),
1584
- [names, colors]
1585
- );
1586
- const hasData = hasPieData(data, nameKey, valueKey);
1587
- const chartState = getChartState(
1588
- { isLoading, error, emptyTitle, emptyDescription, errorTitle, errorDescription, loadingLabel, stateClassName, onRetry, retryLabel },
1589
- hasData,
1590
- stateClassName
1591
- );
1592
- return /* @__PURE__ */ jsx(ChartContainer, { config: chartConfig, className: cn("h-[300px] w-full", className), children: chartState ?? /* @__PURE__ */ jsxs(RechartsPrimitive.PieChart, { accessibilityLayer: true, children: [
1593
- /* @__PURE__ */ jsx(
1594
- ChartTooltip,
1595
- {
1596
- content: /* @__PURE__ */ jsx(
1597
- ChartTooltipContent,
1598
- {
1599
- nameKey,
1600
- formatter: valueFormatter ? (v) => valueFormatter(v) : void 0
1601
- }
1602
- )
1603
- }
1604
- ),
1605
- showLegend && /* @__PURE__ */ jsx(ChartLegend, { content: /* @__PURE__ */ jsx(ChartLegendContent, { nameKey }) }),
1606
- /* @__PURE__ */ jsx(
1607
- RechartsPrimitive.Pie,
1608
- {
1609
- data,
1610
- dataKey: valueKey,
1611
- nameKey,
1612
- outerRadius,
1613
- innerRadius,
1614
- paddingAngle: 2,
1615
- label: showLabels ? ({ cx, cy, midAngle, innerRadius: ir, outerRadius: or, percent }) => {
1616
- const RADIAN = Math.PI / 180;
1617
- const radius = Number(ir) + (Number(or) - Number(ir)) * 1.35;
1618
- const x = Number(cx) + radius * Math.cos(-midAngle * RADIAN);
1619
- const y = Number(cy) + radius * Math.sin(-midAngle * RADIAN);
1620
- return percent > 0.04 ? /* @__PURE__ */ jsx(
1621
- "text",
1622
- {
1623
- x,
1624
- y,
1625
- fill: "var(--foreground)",
1626
- textAnchor: x > Number(cx) ? "start" : "end",
1627
- dominantBaseline: "central",
1628
- fontSize: 12,
1629
- fontWeight: 500,
1630
- children: `${(percent * 100).toFixed(0)}%`
1631
- }
1632
- ) : null;
1633
- } : false,
1634
- labelLine: false,
1635
- isAnimationActive: true,
1636
- animationDuration: 600,
1637
- animationEasing: "ease-out",
1638
- children: data.map((entry, index) => {
1639
- var _a, _b;
1640
- const name = String(entry[nameKey] ?? "");
1641
- const isExploded = index === explodeIndex;
1642
- return /* @__PURE__ */ jsx(
1643
- RechartsPrimitive.Cell,
1644
- {
1645
- fill: ((_a = chartConfig[name]) == null ? void 0 : _a.color) ?? `var(--chart-${index % 8 + 1})`,
1646
- stroke: "var(--background)",
1647
- strokeWidth: 2,
1648
- style: isExploded ? { filter: `drop-shadow(0 4px 8px color-mix(in srgb, ${((_b = chartConfig[name]) == null ? void 0 : _b.color) ?? "var(--chart-1)"} 40%, transparent))` } : void 0
1649
- },
1650
- `cell-${index}`
1651
- );
1652
- })
1653
- }
1654
- )
1655
- ] }) });
1656
- }
1657
- function RadialBarMetricChart({
1658
- data,
1659
- dataKey = "value",
1660
- nameKey = "name",
1661
- colors,
1662
- innerRadius = "30%",
1663
- outerRadius = "100%",
1664
- startAngle = 90,
1665
- endAngle = -270,
1666
- showBackground = true,
1667
- showLegend = true,
1668
- valueFormatter,
1669
- isLoading,
1670
- error,
1671
- onRetry,
1672
- retryLabel,
1673
- emptyTitle,
1674
- emptyDescription,
1675
- errorTitle,
1676
- errorDescription,
1677
- loadingLabel,
1678
- stateClassName,
1679
- className
1680
- }) {
1681
- const names = React.useMemo(
1682
- () => data.map((d) => String(d[nameKey] ?? "")),
1683
- [data, nameKey]
1684
- );
1685
- const chartConfig = React.useMemo(
1686
- () => buildChartConfig(names, colors),
1687
- [names, colors]
1688
- );
1689
- const hasData = data.length > 0;
1690
- const chartState = getChartState(
1691
- { isLoading, error, emptyTitle, emptyDescription, errorTitle, errorDescription, loadingLabel, stateClassName, onRetry, retryLabel },
1692
- hasData,
1693
- stateClassName
1694
- );
1695
- const coloredData = React.useMemo(
1696
- () => data.map((item, index) => {
1697
- var _a;
1698
- const name = String(item[nameKey] ?? "");
1699
- return {
1700
- ...item,
1701
- fill: ((_a = chartConfig[name]) == null ? void 0 : _a.color) ?? `var(--chart-${index % 8 + 1})`
1702
- };
1703
- }),
1704
- [data, nameKey, chartConfig]
1705
- );
1706
- return /* @__PURE__ */ jsxs("div", { className: cn("flex w-full flex-col gap-3", className), children: [
1707
- /* @__PURE__ */ jsx(ChartContainer, { config: chartConfig, className: "h-[260px] w-full", children: chartState ?? /* @__PURE__ */ jsxs(
1708
- RechartsPrimitive.RadialBarChart,
1709
- {
1710
- data: coloredData,
1711
- innerRadius,
1712
- outerRadius,
1713
- startAngle,
1714
- endAngle,
1715
- accessibilityLayer: true,
1716
- children: [
1717
- /* @__PURE__ */ jsx(
1718
- ChartTooltip,
1719
- {
1720
- cursor: false,
1721
- content: /* @__PURE__ */ jsx(
1722
- ChartTooltipContent,
1723
- {
1724
- nameKey,
1725
- formatter: valueFormatter ? (v) => valueFormatter(v) : void 0
1726
- }
1727
- )
1728
- }
1729
- ),
1730
- /* @__PURE__ */ jsx(
1731
- RechartsPrimitive.RadialBar,
1732
- {
1733
- dataKey,
1734
- background: showBackground ? { fill: "var(--muted)" } : false,
1735
- cornerRadius: 6,
1736
- isAnimationActive: true,
1737
- animationDuration: 700,
1738
- animationEasing: "ease-out"
1739
- }
1740
- )
1741
- ]
1742
- }
1743
- ) }),
1744
- showLegend && !chartState && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap justify-center gap-x-4 gap-y-1.5 px-2", children: coloredData.map((item, index) => {
1745
- const d = item;
1746
- const name = String(d[nameKey] ?? "");
1747
- const fillColor = d.fill ?? `var(--chart-${index % 8 + 1})`;
1748
- const val = d[dataKey];
1749
- return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
1750
- /* @__PURE__ */ jsx(
1751
- "span",
1752
- {
1753
- className: "inline-block h-2.5 w-2.5 shrink-0 rounded-full",
1754
- style: { backgroundColor: fillColor }
1755
- }
1756
- ),
1757
- /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
1758
- name,
1759
- val !== void 0 && val !== null && /* @__PURE__ */ jsx("span", { className: "ml-1 font-medium text-foreground", children: valueFormatter ? valueFormatter(val) : String(val) })
1760
- ] })
1761
- ] }, name);
1762
- }) })
1763
- ] });
1764
- }
1765
- function GaugeChart({
1766
- value,
1767
- min = 0,
1768
- max = 100,
1769
- thresholds,
1770
- label,
1771
- valueFormatter,
1772
- showNeedle = true,
1773
- className
1774
- }) {
1775
- const percent = Math.min(1, Math.max(0, (value - min) / (max - min)));
1776
- const percentInt = Math.round(percent * 100);
1777
- const activeColor = React.useMemo(() => {
1778
- if (!thresholds || thresholds.length === 0) return "var(--chart-1)";
1779
- for (const t of thresholds) {
1780
- if (percentInt <= t.value) return t.color;
1781
- }
1782
- return thresholds[thresholds.length - 1].color;
1783
- }, [thresholds, percentInt]);
1784
- const displayText = valueFormatter ? valueFormatter(value, percentInt) : `${percentInt}%`;
1785
- const cx = 100;
1786
- const cy = 100;
1787
- const R = 80;
1788
- const r = 54;
1789
- const polar = (angleDeg, radius) => {
1790
- const rad = angleDeg * Math.PI / 180;
1791
- return {
1792
- x: cx + radius * Math.cos(rad),
1793
- y: cy - radius * Math.sin(rad)
1794
- };
1795
- };
1796
- const trackStart = polar(180, R);
1797
- const trackEnd = polar(0, R);
1798
- const trackStartI = polar(180, r);
1799
- const trackEndI = polar(0, r);
1800
- const trackPath = [
1801
- `M ${trackStart.x} ${trackStart.y}`,
1802
- `A ${R} ${R} 0 0 1 ${trackEnd.x} ${trackEnd.y}`,
1803
- `L ${trackEndI.x} ${trackEndI.y}`,
1804
- `A ${r} ${r} 0 0 0 ${trackStartI.x} ${trackStartI.y}`,
1805
- "Z"
1806
- ].join(" ");
1807
- const valueAngle = 180 - percent * 180;
1808
- const valueEnd = polar(valueAngle, R);
1809
- const valueEndI = polar(valueAngle, r);
1810
- const valuePath = percent <= 0 ? "" : percent >= 1 ? trackPath : [
1811
- `M ${trackStart.x} ${trackStart.y}`,
1812
- `A ${R} ${R} 0 0 1 ${valueEnd.x} ${valueEnd.y}`,
1813
- `L ${valueEndI.x} ${valueEndI.y}`,
1814
- `A ${r} ${r} 0 0 0 ${trackStartI.x} ${trackStartI.y}`,
1815
- "Z"
1816
- ].join(" ");
1817
- const needleAngle = 180 - percent * 180;
1818
- const needleTip = polar(needleAngle, r - 6);
1819
- const needleBase1 = polar(needleAngle + 90, 5);
1820
- const needleBase2 = polar(needleAngle - 90, 5);
1821
- return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center gap-2", className), children: [
1822
- /* @__PURE__ */ jsx("div", { className: "relative w-full max-w-[260px]", children: /* @__PURE__ */ jsxs(
1823
- "svg",
1824
- {
1825
- viewBox: "0 0 200 130",
1826
- className: "w-full",
1827
- "aria-label": `Gauge: ${displayText}`,
1828
- children: [
1829
- /* @__PURE__ */ jsx("path", { d: trackPath, fill: "var(--muted)" }),
1830
- valuePath && /* @__PURE__ */ jsx("path", { d: valuePath, fill: activeColor }),
1831
- showNeedle && /* @__PURE__ */ jsxs("g", { children: [
1832
- /* @__PURE__ */ jsx(
1833
- "polygon",
1834
- {
1835
- points: `${needleTip.x},${needleTip.y} ${needleBase1.x},${needleBase1.y} ${needleBase2.x},${needleBase2.y}`,
1836
- fill: "var(--foreground)",
1837
- opacity: 0.85
1838
- }
1839
- ),
1840
- /* @__PURE__ */ jsx("circle", { cx, cy, r: 5, fill: "var(--foreground)" })
1841
- ] }),
1842
- /* @__PURE__ */ jsx(
1843
- "text",
1844
- {
1845
- x: cx,
1846
- y: cy + 18,
1847
- textAnchor: "middle",
1848
- dominantBaseline: "middle",
1849
- fontSize: 22,
1850
- fontWeight: 700,
1851
- fill: "currentColor",
1852
- className: "fill-foreground",
1853
- children: displayText
1854
- }
1855
- ),
1856
- label && /* @__PURE__ */ jsx(
1857
- "text",
1858
- {
1859
- x: cx,
1860
- y: cy + 36,
1861
- textAnchor: "middle",
1862
- dominantBaseline: "middle",
1863
- fontSize: 10,
1864
- fill: "currentColor",
1865
- className: "fill-muted-foreground",
1866
- children: label
1867
- }
1868
- )
1869
- ]
1870
- }
1871
- ) }),
1872
- thresholds && thresholds.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap justify-center gap-x-3 gap-y-1", children: thresholds.map((t, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
1873
- /* @__PURE__ */ jsx(
1874
- "span",
1875
- {
1876
- className: "inline-block h-2 w-2 shrink-0 rounded-full",
1877
- style: { backgroundColor: t.color }
1878
- }
1879
- ),
1880
- /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t.label })
1881
- ] }, i)) })
1882
- ] });
1883
- }
1884
- function Table({ className, ...props }) {
1885
- return /* @__PURE__ */ jsx(
1886
- "div",
1887
- {
1888
- "data-slot": "table-container",
1889
- className: "relative w-full overflow-x-auto",
1890
- children: /* @__PURE__ */ jsx(
1891
- "table",
1892
- {
1893
- "data-slot": "table",
1894
- className: cn("w-full caption-bottom text-sm", className),
1895
- ...props
1896
- }
1897
- )
1898
- }
1899
- );
1900
- }
1901
- function TableHeader({ className, ...props }) {
1902
- return /* @__PURE__ */ jsx(
1903
- "thead",
1904
- {
1905
- "data-slot": "table-header",
1906
- className: cn("[&_tr]:border-b", className),
1907
- ...props
1908
- }
1909
- );
1910
- }
1911
- function TableBody({ className, ...props }) {
1912
- return /* @__PURE__ */ jsx(
1913
- "tbody",
1914
- {
1915
- "data-slot": "table-body",
1916
- className: cn("[&_tr:last-child]:border-0", className),
1917
- ...props
1918
- }
1919
- );
1920
- }
1921
- function TableFooter({ className, ...props }) {
1922
- return /* @__PURE__ */ jsx(
1923
- "tfoot",
1924
- {
1925
- "data-slot": "table-footer",
1926
- className: cn(
1927
- "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
1928
- className
1929
- ),
1930
- ...props
1931
- }
1932
- );
1933
- }
1934
- function TableRow({ className, ...props }) {
1935
- return /* @__PURE__ */ jsx(
1936
- "tr",
1937
- {
1938
- "data-slot": "table-row",
1939
- className: cn(
1940
- "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
1941
- className
1942
- ),
1943
- ...props
1944
- }
1945
- );
1946
- }
1947
- function TableHead({ className, ...props }) {
1948
- return /* @__PURE__ */ jsx(
1949
- "th",
1950
- {
1951
- "data-slot": "table-head",
1952
- className: cn(
1953
- "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
1954
- className
1955
- ),
1956
- ...props
1957
- }
1958
- );
1959
- }
1960
- function TableCell({ className, ...props }) {
1961
- return /* @__PURE__ */ jsx(
1962
- "td",
1963
- {
1964
- "data-slot": "table-cell",
1965
- className: cn(
1966
- "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
1967
- className
1968
- ),
1969
- ...props
1970
- }
1971
- );
1972
- }
1973
- function TableCaption({
1974
- className,
1975
- ...props
1976
- }) {
1977
- return /* @__PURE__ */ jsx(
1978
- "caption",
1979
- {
1980
- "data-slot": "table-caption",
1981
- className: cn("text-muted-foreground mt-4 text-sm", className),
1982
- ...props
1983
- }
1984
- );
1985
- }
1986
- const Textarea = React.forwardRef(
1987
- ({ className, size = "md", ...props }, ref) => {
1988
- const sizeClasses = {
1989
- sm: "px-2 py-1 text-sm",
1990
- md: "px-3 py-2 text-base",
1991
- lg: "px-4 py-3 text-base"
1992
- };
1993
- return /* @__PURE__ */ jsx(
1994
- "textarea",
1995
- {
1996
- "data-slot": "textarea",
1997
- className: cn(
1998
- "flex min-h-16 w-full bg-background rounded-[var(--radius)] border border-border transition-colors outline-none resize-none text-foreground",
1999
- "placeholder:text-muted-foreground",
2000
- "focus:ring-2 focus:ring-primary focus:border-transparent",
2001
- "disabled:cursor-not-allowed disabled:opacity-50",
2002
- sizeClasses[size],
2003
- className
2004
- ),
2005
- ref,
2006
- ...props
2007
- }
2008
- );
2009
- }
2010
- );
2011
- Textarea.displayName = "Textarea";
2012
- function Dialog({
2013
- ...props
2014
- }) {
2015
- return /* @__PURE__ */ jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
2016
- }
2017
- function DialogTrigger({
2018
- ...props
2019
- }) {
2020
- return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
2021
- }
2022
- function DialogPortal({
2023
- ...props
2024
- }) {
2025
- return /* @__PURE__ */ jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
2026
- }
2027
- function DialogClose({
2028
- ...props
2029
- }) {
2030
- return /* @__PURE__ */ jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
2031
- }
2032
- const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
2033
- DialogPrimitive.Overlay,
2034
- {
2035
- ref,
2036
- "data-slot": "dialog-overlay",
2037
- className: cn(
2038
- "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/40 backdrop-blur-sm",
2039
- className
2040
- ),
2041
- ...props
2042
- }
2043
- ));
2044
- DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
2045
- const dialogVariants = cva(
2046
- "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 flex flex-col w-full translate-x-[-50%] translate-y-[-50%] border shadow-elevation-sm duration-200 rounded-[var(--radius-card)] overflow-hidden max-h-[calc(100dvh-2rem)]",
2047
- {
2048
- variants: {
2049
- size: {
2050
- sm: "max-w-sm",
2051
- md: "max-w-md",
2052
- lg: "max-w-lg",
2053
- xl: "max-w-xl",
2054
- "2xl": "max-w-2xl",
2055
- "3xl": "max-w-3xl",
2056
- "4xl": "max-w-4xl",
2057
- "5xl": "max-w-5xl",
2058
- full: "max-w-[calc(100vw-2rem)] h-[calc(100dvh-2rem)]"
2059
- }
2060
- },
2061
- defaultVariants: {
2062
- size: "lg"
2063
- }
2064
- }
2065
- );
2066
- const DialogContent = React.forwardRef(({ className, children, size, showClose = true, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
2067
- /* @__PURE__ */ jsx(DialogOverlay, {}),
2068
- /* @__PURE__ */ jsxs(
2069
- DialogPrimitive.Content,
2070
- {
2071
- ref,
2072
- "data-slot": "dialog-content",
2073
- className: cn(dialogVariants({ size }), className),
2074
- ...props,
2075
- children: [
2076
- /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 p-6 overflow-y-auto flex-1 min-h-0", children }),
2077
- showClose && /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute top-4 right-4 z-10 rounded-full p-2 opacity-70 transition-all hover:opacity-100 hover:bg-accent focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:outline-none disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", children: [
2078
- /* @__PURE__ */ jsx(XIcon, {}),
2079
- /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
2080
- ] })
2081
- ]
2082
- }
2083
- )
2084
- ] }));
2085
- DialogContent.displayName = DialogPrimitive.Content.displayName;
2086
- function DialogHeader({ className, ...props }) {
2087
- return /* @__PURE__ */ jsx(
2088
- "div",
2089
- {
2090
- "data-slot": "dialog-header",
2091
- className: cn("flex flex-col gap-2 text-left shrink-0", className),
2092
- ...props
2093
- }
2094
- );
2095
- }
2096
- function DialogBody({ className, ...props }) {
2097
- return /* @__PURE__ */ jsx(
2098
- "div",
2099
- {
2100
- "data-slot": "dialog-body",
2101
- className: cn("flex-1 overflow-y-auto min-h-0 -mx-6 px-6", className),
2102
- ...props
2103
- }
2104
- );
2105
- }
2106
- function DialogFooter({ className, ...props }) {
2107
- return /* @__PURE__ */ jsx(
2108
- "div",
2109
- {
2110
- "data-slot": "dialog-footer",
2111
- className: cn(
2112
- "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end shrink-0",
2113
- className
2114
- ),
2115
- ...props
2116
- }
2117
- );
2118
- }
2119
- function DialogTitle({
2120
- className,
2121
- ...props
2122
- }) {
2123
- return /* @__PURE__ */ jsx(
2124
- DialogPrimitive.Title,
2125
- {
2126
- "data-slot": "dialog-title",
2127
- className: cn("text-foreground font-semibold leading-tight text-[length:var(--text-h4)]", className),
2128
- ...props
2129
- }
2130
- );
2131
- }
2132
- function DialogDescription({
2133
- className,
2134
- ...props
2135
- }) {
2136
- return /* @__PURE__ */ jsx(
2137
- DialogPrimitive.Description,
2138
- {
2139
- "data-slot": "dialog-description",
2140
- className: cn("text-muted-foreground", className),
2141
- ...props
2142
- }
2143
- );
2144
- }
2145
- function useRichTextEditor({
2146
- value,
2147
- onChange
2148
- }) {
2149
- const editorRef = useRef(null);
2150
- const searchInputRef = useRef(null);
2151
- const linkInputRef = useRef(null);
2152
- const savedSelection = useRef(null);
2153
- const [activeFormats, setActiveFormats] = useState({
2154
- bold: false,
2155
- italic: false,
2156
- underline: false,
2157
- justifyLeft: false,
2158
- justifyCenter: false,
2159
- justifyRight: false,
2160
- insertUnorderedList: false,
2161
- insertOrderedList: false,
2162
- link: false,
2163
- h1: false,
2164
- h2: false,
2165
- h3: false,
2166
- p: true
2167
- });
2168
- const [isSearchOpen, setIsSearchOpen] = useState(false);
2169
- const [searchQuery, setSearchQuery] = useState("");
2170
- const [linkUrl, setLinkUrl] = useState("https://");
2171
- const [isLinkOpen, setIsLinkOpen] = useState(false);
2172
- const [hasSavedSelection, setHasSavedSelection] = useState(false);
2173
- const findParentTag = useCallback((node, tagName) => {
2174
- let current = node;
2175
- while (current && current !== editorRef.current) {
2176
- if (current.nodeName === tagName) return current;
2177
- current = current.parentNode;
2178
- }
2179
- return null;
2180
- }, []);
2181
- const updateActiveFormats = useCallback(() => {
2182
- let formatBlock = "";
2183
- try {
2184
- formatBlock = document.queryCommandValue("formatBlock");
2185
- } catch (_e) {
2186
- }
2187
- const selection = window.getSelection();
2188
- const anchorNode = selection == null ? void 0 : selection.anchorNode;
2189
- const focusNode = selection == null ? void 0 : selection.focusNode;
2190
- setActiveFormats({
2191
- bold: document.queryCommandState("bold"),
2192
- italic: document.queryCommandState("italic"),
2193
- underline: document.queryCommandState("underline"),
2194
- justifyLeft: document.queryCommandState("justifyLeft"),
2195
- justifyCenter: document.queryCommandState("justifyCenter"),
2196
- justifyRight: document.queryCommandState("justifyRight"),
2197
- insertUnorderedList: document.queryCommandState("insertUnorderedList"),
2198
- insertOrderedList: document.queryCommandState("insertOrderedList"),
2199
- link: !!(findParentTag(anchorNode || null, "A") || findParentTag(focusNode || null, "A")),
2200
- h1: formatBlock === "h1" || formatBlock === "H1",
2201
- h2: formatBlock === "h2" || formatBlock === "H2",
2202
- h3: formatBlock === "h3" || formatBlock === "H3",
2203
- p: formatBlock === "p" || formatBlock === "P" || formatBlock === "div" || formatBlock === "DIV" || formatBlock === ""
2204
- });
2205
- }, [findParentTag]);
2206
- useEffect(() => {
2207
- if (editorRef.current && editorRef.current.innerHTML !== value) {
2208
- editorRef.current.innerHTML = value;
2209
- }
2210
- const handleSelectionChange = () => {
2211
- if (document.activeElement === editorRef.current) {
2212
- updateActiveFormats();
2213
- }
2214
- };
2215
- document.addEventListener("selectionchange", handleSelectionChange);
2216
- return () => document.removeEventListener("selectionchange", handleSelectionChange);
2217
- }, []);
2218
- const wordCount = (() => {
2219
- var _a;
2220
- const text = ((_a = editorRef.current) == null ? void 0 : _a.innerText) || "";
2221
- return text.trim() ? text.trim().split(/\s+/).length : 0;
2222
- })();
2223
- const characterCount = (() => {
2224
- var _a;
2225
- const text = ((_a = editorRef.current) == null ? void 0 : _a.innerText) || "";
2226
- return text.trim() ? text.length : 0;
2227
- })();
2228
- const handleInput = useCallback(() => {
2229
- if (editorRef.current) {
2230
- onChange == null ? void 0 : onChange(editorRef.current.innerHTML);
2231
- updateActiveFormats();
2232
- }
2233
- }, [onChange, updateActiveFormats]);
2234
- const execCommand = useCallback((command, val = "") => {
2235
- var _a;
2236
- document.execCommand(command, false, val);
2237
- updateActiveFormats();
2238
- (_a = editorRef.current) == null ? void 0 : _a.focus();
2239
- if (editorRef.current) {
2240
- onChange == null ? void 0 : onChange(editorRef.current.innerHTML);
2241
- }
2242
- }, [onChange, updateActiveFormats]);
2243
- const performSearch = useCallback((text, backward = false) => {
2244
- var _a, _b;
2245
- if (!text || !editorRef.current) return;
2246
- const editor = editorRef.current;
2247
- const selection = window.getSelection();
2248
- if (!selection) return;
2249
- const walker = document.createTreeWalker(editor, NodeFilter.SHOW_TEXT);
2250
- const segments = [];
2251
- let offset = 0;
2252
- let node;
2253
- while (node = walker.nextNode()) {
2254
- segments.push({ node, start: offset });
2255
- offset += node.length;
2256
- }
2257
- const fullText = segments.reduce((acc, s) => acc + (s.node.textContent ?? ""), "");
2258
- let searchFrom = 0;
2259
- if (selection.rangeCount > 0) {
2260
- const range2 = selection.getRangeAt(0);
2261
- if (editor.contains(range2.startContainer)) {
2262
- const seg = segments.find((s) => s.node === range2.startContainer);
2263
- if (seg) {
2264
- searchFrom = backward ? seg.start + range2.startOffset - 1 : seg.start + range2.endOffset;
2265
- }
2266
- }
2267
- }
2268
- const lowerFull = fullText.toLowerCase();
2269
- const lowerQuery = text.toLowerCase();
2270
- let matchStart = -1;
2271
- if (backward) {
2272
- matchStart = lowerFull.lastIndexOf(lowerQuery, Math.max(0, searchFrom));
2273
- if (matchStart === -1) matchStart = lowerFull.lastIndexOf(lowerQuery);
2274
- } else {
2275
- matchStart = lowerFull.indexOf(lowerQuery, searchFrom);
2276
- if (matchStart === -1) matchStart = lowerFull.indexOf(lowerQuery);
2277
- }
2278
- if (matchStart === -1) return;
2279
- const matchEnd = matchStart + text.length;
2280
- const range = document.createRange();
2281
- let startSet = false;
2282
- let endSet = false;
2283
- for (let i = 0; i < segments.length && !endSet; i++) {
2284
- const seg = segments[i];
2285
- const segEnd = seg.start + seg.node.length;
2286
- if (!startSet && matchStart < segEnd && matchStart >= seg.start) {
2287
- range.setStart(seg.node, matchStart - seg.start);
2288
- startSet = true;
2289
- }
2290
- if (startSet && matchEnd <= segEnd) {
2291
- range.setEnd(seg.node, matchEnd - seg.start);
2292
- endSet = true;
2293
- }
2294
- }
2295
- if (startSet && endSet) {
2296
- selection.removeAllRanges();
2297
- selection.addRange(range);
2298
- (_b = (_a = range.startContainer.parentElement) == null ? void 0 : _a.scrollIntoView) == null ? void 0 : _b.call(_a, { block: "nearest" });
2299
- }
2300
- }, []);
2301
- const handleCreateLink = useCallback(() => {
2302
- if (savedSelection.current) {
2303
- const selection2 = window.getSelection();
2304
- selection2 == null ? void 0 : selection2.removeAllRanges();
2305
- selection2 == null ? void 0 : selection2.addRange(savedSelection.current);
2306
- }
2307
- const selection = window.getSelection();
2308
- const anchorNode = selection == null ? void 0 : selection.anchorNode;
2309
- const existingLink = findParentTag(anchorNode || null, "A");
2310
- if (existingLink) {
2311
- if (linkUrl) {
2312
- existingLink.setAttribute("href", linkUrl);
2313
- existingLink.setAttribute("target", "_blank");
2314
- existingLink.setAttribute("rel", "noopener noreferrer");
2315
- existingLink.style.color = "hsl(var(--primary))";
2316
- existingLink.style.textDecoration = "underline";
2317
- existingLink.style.cursor = "pointer";
2318
- }
2319
- handleInput();
2320
- setIsLinkOpen(false);
2321
- savedSelection.current = null;
2322
- return;
2323
- }
2324
- if (!selection || selection.rangeCount === 0 || selection.isCollapsed) {
2325
- return;
2326
- }
2327
- if (linkUrl) {
2328
- document.execCommand("createLink", false, linkUrl);
2329
- setTimeout(() => {
2330
- var _a;
2331
- const anchor = findParentTag(((_a = window.getSelection()) == null ? void 0 : _a.anchorNode) || null, "A");
2332
- if (anchor) {
2333
- anchor.setAttribute("target", "_blank");
2334
- anchor.setAttribute("rel", "noopener noreferrer");
2335
- anchor.style.color = "hsl(var(--primary))";
2336
- anchor.style.textDecoration = "underline";
2337
- anchor.style.cursor = "pointer";
2338
- }
2339
- handleInput();
2340
- }, 10);
2341
- setIsLinkOpen(false);
2342
- savedSelection.current = null;
2343
- }
2344
- }, [linkUrl, findParentTag, handleInput]);
2345
- const handleUnlink = useCallback(() => {
2346
- const selection = window.getSelection();
2347
- const anchorNode = selection == null ? void 0 : selection.anchorNode;
2348
- const existingLink = findParentTag(anchorNode || null, "A");
2349
- if (existingLink) {
2350
- const parent = existingLink.parentNode;
2351
- while (existingLink.firstChild) {
2352
- parent == null ? void 0 : parent.insertBefore(existingLink.firstChild, existingLink);
2353
- }
2354
- parent == null ? void 0 : parent.removeChild(existingLink);
2355
- handleInput();
2356
- } else {
2357
- document.execCommand("unlink", false, "");
2358
- }
2359
- }, [findParentTag, handleInput]);
2360
- const onLinkPopoverOpenChange = useCallback((open) => {
2361
- if (open) {
2362
- const selection = window.getSelection();
2363
- const anchorNode = selection == null ? void 0 : selection.anchorNode;
2364
- const focusNode = selection == null ? void 0 : selection.focusNode;
2365
- const existingLink = findParentTag(anchorNode || null, "A") || findParentTag(focusNode || null, "A");
2366
- if (existingLink) {
2367
- setLinkUrl(existingLink.getAttribute("href") || "https://");
2368
- } else {
2369
- setLinkUrl("https://");
2370
- }
2371
- if (selection && selection.rangeCount > 0 && (!selection.isCollapsed || existingLink)) {
2372
- savedSelection.current = selection.getRangeAt(0).cloneRange();
2373
- setHasSavedSelection(true);
2374
- } else {
2375
- savedSelection.current = null;
2376
- setHasSavedSelection(false);
2377
- }
2378
- setTimeout(() => {
2379
- var _a;
2380
- return (_a = linkInputRef.current) == null ? void 0 : _a.focus();
2381
- }, 100);
2382
- } else {
2383
- setHasSavedSelection(false);
2384
- }
2385
- setIsLinkOpen(open);
2386
- }, [findParentTag]);
2387
- return {
2388
- // Refs
2389
- editorRef,
2390
- searchInputRef,
2391
- linkInputRef,
2392
- // State
2393
- activeFormats,
2394
- isSearchOpen,
2395
- setIsSearchOpen,
2396
- searchQuery,
2397
- setSearchQuery,
2398
- linkUrl,
2399
- setLinkUrl,
2400
- isLinkOpen,
2401
- hasSavedSelection,
2402
- // Computed
2403
- wordCount,
2404
- characterCount,
2405
- // Handlers
2406
- updateActiveFormats,
2407
- execCommand,
2408
- handleInput,
2409
- performSearch,
2410
- handleCreateLink,
2411
- handleUnlink,
2412
- onLinkPopoverOpenChange
2413
- };
2414
- }
2415
- function RichTextEditor({
2416
- value,
2417
- onChange,
2418
- placeholder,
2419
- className,
2420
- actionButton,
2421
- allowSearch = true,
2422
- allowLinks = true,
2423
- allowUndoRedo = true,
2424
- allowHeadings = true,
2425
- allowFormatting = true,
2426
- allowAlignment = true,
2427
- allowLists = true,
2428
- showWordCount = true,
2429
- showCharacterCount = true,
2430
- disabled = false,
2431
- readOnly = false,
2432
- onFocus,
2433
- onBlur,
2434
- minHeight,
2435
- maxHeight
2436
- }) {
2437
- const isEditable = !disabled && !readOnly;
2438
- const showToolbar = isEditable;
2439
- const {
2440
- editorRef,
2441
- searchInputRef,
2442
- linkInputRef,
2443
- activeFormats,
2444
- isSearchOpen,
2445
- setIsSearchOpen,
2446
- searchQuery,
2447
- setSearchQuery,
2448
- linkUrl,
2449
- setLinkUrl,
2450
- isLinkOpen,
2451
- hasSavedSelection,
2452
- wordCount,
2453
- characterCount,
2454
- updateActiveFormats,
2455
- execCommand,
2456
- handleInput,
2457
- performSearch,
2458
- handleCreateLink,
2459
- handleUnlink,
2460
- onLinkPopoverOpenChange
2461
- } = useRichTextEditor({ value, onChange });
2462
- const getCurrentBlockLabel = () => {
2463
- if (activeFormats.h1) return /* @__PURE__ */ jsxs(Fragment, { children: [
2464
- /* @__PURE__ */ jsx(Heading1, { className: "w-4 h-4 mr-1 shrink-0" }),
2465
- /* @__PURE__ */ jsx("span", { className: "truncate", children: "Título 1" })
2466
- ] });
2467
- if (activeFormats.h2) return /* @__PURE__ */ jsxs(Fragment, { children: [
2468
- /* @__PURE__ */ jsx(Heading2, { className: "w-4 h-4 mr-1 shrink-0" }),
2469
- /* @__PURE__ */ jsx("span", { className: "truncate", children: "Título 2" })
2470
- ] });
2471
- if (activeFormats.h3) return /* @__PURE__ */ jsxs(Fragment, { children: [
2472
- /* @__PURE__ */ jsx(Heading3, { className: "w-4 h-4 mr-1 shrink-0" }),
2473
- /* @__PURE__ */ jsx("span", { className: "truncate", children: "Título 3" })
2474
- ] });
2475
- return /* @__PURE__ */ jsxs(Fragment, { children: [
2476
- /* @__PURE__ */ jsx(Type, { className: "w-4 h-4 mr-1 shrink-0" }),
2477
- /* @__PURE__ */ jsx("span", { className: "truncate", children: "Parágrafo" })
2478
- ] });
2479
- };
2480
- return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col h-full w-full bg-background sm:border border-border sm:shadow-sm sm:rounded-lg overflow-hidden", disabled && "opacity-50 pointer-events-none", className), children: [
2481
- /* @__PURE__ */ jsx("style", { children: `
2482
- [contenteditable]:empty:before {
2483
- content: attr(data-placeholder);
2484
- color: hsl(var(--muted-foreground));
2485
- pointer-events: none;
2486
- display: block;
2487
- }
2488
- .prose-editor ul {
2489
- list-style-type: disc !important;
2490
- padding-left: 1.5rem !important;
2491
- margin-top: 0.5rem !important;
2492
- margin-bottom: 0.5rem !important;
2493
- }
2494
- .prose-editor ol {
2495
- list-style-type: decimal !important;
2496
- padding-left: 1.5rem !important;
2497
- margin-top: 0.5rem !important;
2498
- margin-bottom: 0.5rem !important;
2499
- }
2500
- .prose-editor b, .prose-editor strong {
2501
- font-weight: 600 !important;
2502
- }
2503
- .prose-editor i, .prose-editor em {
2504
- font-style: italic !important;
2505
- }
2506
- .prose-editor u {
2507
- text-decoration: underline !important;
2508
- }
2509
- .prose-editor h1 {
2510
- font-size: 2.25rem !important;
2511
- font-weight: 700 !important;
2512
- margin-bottom: 1.25rem !important;
2513
- line-height: 1.2 !important;
2514
- margin-top: 2rem !important;
2515
- color: hsl(var(--foreground));
2516
- }
2517
- .prose-editor h2 {
2518
- font-size: 1.75rem !important;
2519
- font-weight: 600 !important;
2520
- margin-bottom: 1rem !important;
2521
- margin-top: 1.5rem !important;
2522
- color: hsl(var(--foreground));
2523
- }
2524
- .prose-editor h3 {
2525
- font-size: 1.35rem !important;
2526
- font-weight: 600 !important;
2527
- margin-bottom: 0.75rem !important;
2528
- margin-top: 1.25rem !important;
2529
- color: hsl(var(--foreground));
2530
- }
2531
- .prose-editor p {
2532
- margin-bottom: 1rem !important;
2533
- line-height: 1.6 !important;
2534
- }
2535
- .prose-editor a {
2536
- color: var(--info) !important;
2537
- text-decoration: underline !important;
2538
- cursor: pointer !important;
2539
- }
2540
- .prose-editor h1:first-child, .prose-editor h2:first-child, .prose-editor h3:first-child, .prose-editor p:first-child {
2541
- margin-top: 0 !important;
2542
- }
2543
- .prose-editor {
2544
- outline: none !important;
2545
- }
2546
- ` }),
2547
- showToolbar && /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 border-b border-border bg-muted/30 flex items-center gap-1 flex-wrap shrink-0", children: [
2548
- allowUndoRedo && /* @__PURE__ */ jsxs(Fragment, { children: [
2549
- /* @__PURE__ */ jsx(
2550
- Button,
2551
- {
2552
- variant: "ghost",
2553
- size: "icon",
2554
- className: "h-8 w-8 text-muted-foreground",
2555
- onClick: () => execCommand("undo"),
2556
- title: "Desfazer",
2557
- "aria-label": "Desfazer",
2558
- children: /* @__PURE__ */ jsx(Undo, { className: "w-4 h-4" })
2559
- }
2560
- ),
2561
- /* @__PURE__ */ jsx(
2562
- Button,
2563
- {
2564
- variant: "ghost",
2565
- size: "icon",
2566
- className: "h-8 w-8 text-muted-foreground",
2567
- onClick: () => execCommand("redo"),
2568
- title: "Refazer",
2569
- "aria-label": "Refazer",
2570
- children: /* @__PURE__ */ jsx(Redo, { className: "w-4 h-4" })
2571
- }
2572
- ),
2573
- /* @__PURE__ */ jsx("div", { className: "w-px h-6 bg-border mx-1 hidden sm:block" })
2574
- ] }),
2575
- allowHeadings && /* @__PURE__ */ jsxs(Fragment, { children: [
2576
- /* @__PURE__ */ jsxs(DropdownMenu, { modal: false, children: [
2577
- /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", className: "h-8 gap-0 text-muted-foreground w-[120px] justify-start px-2", children: [
2578
- getCurrentBlockLabel(),
2579
- /* @__PURE__ */ jsx(ChevronDown, { className: "w-3 h-3 ml-auto opacity-50 shrink-0" })
2580
- ] }) }),
2581
- /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", className: "w-[160px]", style: { zIndex: 9999 }, children: [
2582
- /* @__PURE__ */ jsxs(DropdownMenuItem, { onPointerDown: (e) => e.preventDefault(), onClick: () => execCommand("formatBlock", "P"), className: "gap-2", children: [
2583
- /* @__PURE__ */ jsx(Type, { className: "w-4 h-4 text-muted-foreground" }),
2584
- " Parágrafo"
2585
- ] }),
2586
- /* @__PURE__ */ jsxs(DropdownMenuItem, { onPointerDown: (e) => e.preventDefault(), onClick: () => execCommand("formatBlock", "H1"), className: "gap-2", children: [
2587
- /* @__PURE__ */ jsx(Heading1, { className: "w-4 h-4 text-muted-foreground" }),
2588
- " Título 1"
2589
- ] }),
2590
- /* @__PURE__ */ jsxs(DropdownMenuItem, { onPointerDown: (e) => e.preventDefault(), onClick: () => execCommand("formatBlock", "H2"), className: "gap-2", children: [
2591
- /* @__PURE__ */ jsx(Heading2, { className: "w-4 h-4 text-muted-foreground" }),
2592
- " Título 2"
2593
- ] }),
2594
- /* @__PURE__ */ jsxs(DropdownMenuItem, { onPointerDown: (e) => e.preventDefault(), onClick: () => execCommand("formatBlock", "H3"), className: "gap-2", children: [
2595
- /* @__PURE__ */ jsx(Heading3, { className: "w-4 h-4 text-muted-foreground" }),
2596
- " Título 3"
2597
- ] })
2598
- ] })
2599
- ] }),
2600
- /* @__PURE__ */ jsx("div", { className: "w-px h-6 bg-border mx-1 hidden sm:block" })
2601
- ] }),
2602
- allowFormatting && /* @__PURE__ */ jsxs(Fragment, { children: [
2603
- /* @__PURE__ */ jsx(
2604
- Button,
2605
- {
2606
- variant: "ghost",
2607
- size: "icon",
2608
- className: cn("h-8 w-8 text-muted-foreground", activeFormats.bold && "bg-muted text-foreground"),
2609
- onClick: () => execCommand("bold"),
2610
- title: "Negrito",
2611
- "aria-label": "Negrito",
2612
- children: /* @__PURE__ */ jsx(Bold, { className: "w-4 h-4" })
2613
- }
2614
- ),
2615
- /* @__PURE__ */ jsx(
2616
- Button,
2617
- {
2618
- variant: "ghost",
2619
- size: "icon",
2620
- className: cn("h-8 w-8 text-muted-foreground", activeFormats.italic && "bg-muted text-foreground"),
2621
- onClick: () => execCommand("italic"),
2622
- title: "Itálico",
2623
- "aria-label": "Itálico",
2624
- children: /* @__PURE__ */ jsx(Italic, { className: "w-4 h-4" })
2625
- }
2626
- ),
2627
- /* @__PURE__ */ jsx(
2628
- Button,
2629
- {
2630
- variant: "ghost",
2631
- size: "icon",
2632
- className: cn("h-8 w-8 text-muted-foreground", activeFormats.underline && "bg-muted text-foreground"),
2633
- onClick: () => execCommand("underline"),
2634
- title: "Sublinhado",
2635
- "aria-label": "Sublinhado",
2636
- children: /* @__PURE__ */ jsx(Underline, { className: "w-4 h-4" })
2637
- }
2638
- ),
2639
- /* @__PURE__ */ jsx("div", { className: "w-px h-6 bg-border mx-1 hidden sm:block" })
2640
- ] }),
2641
- allowAlignment && /* @__PURE__ */ jsxs(Fragment, { children: [
2642
- /* @__PURE__ */ jsx(
2643
- Button,
2644
- {
2645
- variant: "ghost",
2646
- size: "icon",
2647
- className: cn("h-8 w-8 text-muted-foreground", activeFormats.justifyLeft && "bg-muted text-foreground"),
2648
- onClick: () => execCommand("justifyLeft"),
2649
- title: "Alinhar à esquerda",
2650
- "aria-label": "Alinhar à esquerda",
2651
- children: /* @__PURE__ */ jsx(AlignLeft, { className: "w-4 h-4" })
2652
- }
2653
- ),
2654
- /* @__PURE__ */ jsx(
2655
- Button,
2656
- {
2657
- variant: "ghost",
2658
- size: "icon",
2659
- className: cn("h-8 w-8 text-muted-foreground", activeFormats.justifyCenter && "bg-muted text-foreground"),
2660
- onClick: () => execCommand("justifyCenter"),
2661
- title: "Centralizar",
2662
- "aria-label": "Centralizar",
2663
- children: /* @__PURE__ */ jsx(AlignCenter, { className: "w-4 h-4" })
2664
- }
2665
- ),
2666
- /* @__PURE__ */ jsx(
2667
- Button,
2668
- {
2669
- variant: "ghost",
2670
- size: "icon",
2671
- className: cn("h-8 w-8 text-muted-foreground", activeFormats.justifyRight && "bg-muted text-foreground"),
2672
- onClick: () => execCommand("justifyRight"),
2673
- title: "Alinhar à direita",
2674
- "aria-label": "Alinhar à direita",
2675
- children: /* @__PURE__ */ jsx(AlignRight, { className: "w-4 h-4" })
2676
- }
2677
- ),
2678
- /* @__PURE__ */ jsx("div", { className: "w-px h-6 bg-border mx-1 hidden sm:block" })
2679
- ] }),
2680
- allowLists && /* @__PURE__ */ jsxs(Fragment, { children: [
2681
- /* @__PURE__ */ jsx(
2682
- Button,
2683
- {
2684
- variant: "ghost",
2685
- size: "icon",
2686
- className: cn("h-8 w-8 text-muted-foreground", activeFormats.insertUnorderedList && "bg-muted text-foreground"),
2687
- onClick: () => execCommand("insertUnorderedList"),
2688
- title: "Lista com marcadores",
2689
- "aria-label": "Lista com marcadores",
2690
- children: /* @__PURE__ */ jsx(List, { className: "w-4 h-4" })
2691
- }
2692
- ),
2693
- /* @__PURE__ */ jsx(
2694
- Button,
2695
- {
2696
- variant: "ghost",
2697
- size: "icon",
2698
- className: cn("h-8 w-8 text-muted-foreground", activeFormats.insertOrderedList && "bg-muted text-foreground"),
2699
- onClick: () => execCommand("insertOrderedList"),
2700
- title: "Lista numerada",
2701
- "aria-label": "Lista numerada",
2702
- children: /* @__PURE__ */ jsx(ListOrdered, { className: "w-4 h-4" })
2703
- }
2704
- ),
2705
- /* @__PURE__ */ jsx("div", { className: "w-px h-6 bg-border mx-1 hidden sm:block" })
2706
- ] }),
2707
- allowLinks && /* @__PURE__ */ jsxs(Fragment, { children: [
2708
- /* @__PURE__ */ jsxs(Popover, { open: isLinkOpen, onOpenChange: onLinkPopoverOpenChange, modal: false, children: [
2709
- /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
2710
- Button,
2711
- {
2712
- variant: "ghost",
2713
- size: "icon",
2714
- className: cn("h-8 w-8 text-muted-foreground", (activeFormats.link || isLinkOpen) && "bg-muted text-foreground"),
2715
- title: "Inserir link",
2716
- "aria-label": "Inserir link",
2717
- children: /* @__PURE__ */ jsx(Link, { className: "w-4 h-4" })
2718
- }
2719
- ) }),
2720
- /* @__PURE__ */ jsx(PopoverContent, { className: "w-80 p-3", align: "start", style: { zIndex: 9999 }, children: !activeFormats.link && !hasSavedSelection ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground py-1", children: "Selecione um texto para criar um link." }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
2721
- /* @__PURE__ */ jsx("div", { className: "text-xs font-medium", children: activeFormats.link ? "Editar Link" : "Inserir Link" }),
2722
- /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
2723
- /* @__PURE__ */ jsx(
2724
- Input,
2725
- {
2726
- ref: linkInputRef,
2727
- placeholder: "https://...",
2728
- value: linkUrl,
2729
- onChange: (e) => setLinkUrl(e.target.value),
2730
- onKeyDown: (e) => {
2731
- if (e.key === "Enter") {
2732
- e.preventDefault();
2733
- e.stopPropagation();
2734
- handleCreateLink();
2735
- }
2736
- },
2737
- className: "h-8 text-xs"
2738
- }
2739
- ),
2740
- /* @__PURE__ */ jsx(Button, { size: "sm", className: "h-8", onClick: handleCreateLink, children: "Aplicar" })
2741
- ] })
2742
- ] }) })
2743
- ] }),
2744
- /* @__PURE__ */ jsx(
2745
- Button,
2746
- {
2747
- variant: "ghost",
2748
- size: "icon",
2749
- className: "h-8 w-8 text-muted-foreground",
2750
- onClick: handleUnlink,
2751
- title: "Remover link",
2752
- "aria-label": "Remover link",
2753
- children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
2754
- }
2755
- ),
2756
- /* @__PURE__ */ jsx("div", { className: "w-px h-6 bg-border mx-1 hidden sm:block" })
2757
- ] }),
2758
- (allowFormatting || allowHeadings || allowAlignment || allowLists || allowLinks) && /* @__PURE__ */ jsx(
2759
- Button,
2760
- {
2761
- variant: "ghost",
2762
- size: "icon",
2763
- className: "h-8 w-8 text-muted-foreground",
2764
- onClick: () => execCommand("removeFormat"),
2765
- title: "Limpar formatação",
2766
- "aria-label": "Limpar formatação",
2767
- children: /* @__PURE__ */ jsx(Type, { className: "w-4 h-4" })
2768
- }
2769
- ),
2770
- allowSearch && /* @__PURE__ */ jsx(
2771
- Button,
2772
- {
2773
- variant: "ghost",
2774
- size: "icon",
2775
- className: cn("h-8 w-8 text-muted-foreground", isSearchOpen && "bg-muted text-foreground"),
2776
- onClick: () => {
2777
- setIsSearchOpen(!isSearchOpen);
2778
- if (!isSearchOpen) setTimeout(() => {
2779
- var _a;
2780
- return (_a = searchInputRef.current) == null ? void 0 : _a.focus();
2781
- }, 100);
2782
- },
2783
- title: "Buscar",
2784
- "aria-label": "Buscar",
2785
- children: /* @__PURE__ */ jsx(Search, { className: "w-4 h-4" })
2786
- }
2787
- ),
2788
- actionButton && /* @__PURE__ */ jsxs(Fragment, { children: [
2789
- /* @__PURE__ */ jsx("div", { className: "flex-1" }),
2790
- actionButton
2791
- ] })
2792
- ] }),
2793
- isSearchOpen && /* @__PURE__ */ jsxs("div", { className: "px-3 py-1.5 border-b border-border bg-muted/20 flex items-center gap-2", children: [
2794
- /* @__PURE__ */ jsxs("div", { className: "relative flex-1 max-w-sm", children: [
2795
- /* @__PURE__ */ jsx(Search, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" }),
2796
- /* @__PURE__ */ jsx(
2797
- Input,
2798
- {
2799
- ref: searchInputRef,
2800
- placeholder: "Buscar no texto...",
2801
- value: searchQuery,
2802
- onChange: (e) => setSearchQuery(e.target.value),
2803
- onKeyDown: (e) => {
2804
- if (e.key === "Enter") {
2805
- e.preventDefault();
2806
- performSearch(searchQuery, e.shiftKey);
2807
- }
2808
- if (e.key === "Escape") {
2809
- setIsSearchOpen(false);
2810
- }
2811
- },
2812
- className: "h-8 pl-8 text-xs bg-background"
2813
- }
2814
- )
2815
- ] }),
2816
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
2817
- /* @__PURE__ */ jsx(
2818
- Button,
2819
- {
2820
- variant: "ghost",
2821
- size: "icon",
2822
- className: "h-7 w-7",
2823
- onMouseDown: (e) => e.preventDefault(),
2824
- onClick: () => performSearch(searchQuery, true),
2825
- title: "Anterior",
2826
- children: /* @__PURE__ */ jsx(ChevronUp, { className: "w-4 h-4" })
2827
- }
2828
- ),
2829
- /* @__PURE__ */ jsx(
2830
- Button,
2831
- {
2832
- variant: "ghost",
2833
- size: "icon",
2834
- className: "h-7 w-7",
2835
- onMouseDown: (e) => e.preventDefault(),
2836
- onClick: () => performSearch(searchQuery, false),
2837
- title: "Próximo",
2838
- children: /* @__PURE__ */ jsx(ChevronDown, { className: "w-4 h-4" })
2839
- }
2840
- ),
2841
- /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-border mx-1" }),
2842
- /* @__PURE__ */ jsx(
2843
- Button,
2844
- {
2845
- variant: "ghost",
2846
- size: "icon",
2847
- className: "h-7 w-7 text-muted-foreground hover:text-foreground",
2848
- onClick: () => setIsSearchOpen(false),
2849
- title: "Fechar busca",
2850
- children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
2851
- }
2852
- )
2853
- ] }),
2854
- /* @__PURE__ */ jsx("div", { className: "hidden sm:block text-[10px] text-muted-foreground ml-auto uppercase tracking-wider font-medium", children: "Pressione Enter para buscar" })
2855
- ] }),
2856
- /* @__PURE__ */ jsx(
2857
- "div",
2858
- {
2859
- className: "flex-1 overflow-y-auto p-4 sm:p-8 bg-background scrollbar-thin",
2860
- style: { minHeight, maxHeight },
2861
- children: /* @__PURE__ */ jsx(
2862
- "div",
2863
- {
2864
- ref: editorRef,
2865
- contentEditable: isEditable,
2866
- onInput: handleInput,
2867
- onSelect: isEditable ? updateActiveFormats : void 0,
2868
- onFocus: () => {
2869
- updateActiveFormats();
2870
- onFocus == null ? void 0 : onFocus();
2871
- },
2872
- onBlur,
2873
- className: "prose-editor min-h-full max-w-none focus:outline-none",
2874
- "data-placeholder": placeholder
2875
- }
2876
- )
2877
- }
2878
- ),
2879
- (showWordCount || showCharacterCount) && /* @__PURE__ */ jsxs("div", { className: "px-4 py-2 border-t border-border bg-muted/20 flex items-center justify-between", children: [
2880
- /* @__PURE__ */ jsxs("div", { className: "text-[10px] sm:text-xs text-muted-foreground font-medium uppercase tracking-wider flex items-center gap-2", children: [
2881
- showWordCount && /* @__PURE__ */ jsxs("span", { children: [
2882
- wordCount,
2883
- " ",
2884
- wordCount === 1 ? "palavra" : "palavras"
2885
- ] }),
2886
- showWordCount && showCharacterCount && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "•" }),
2887
- showCharacterCount && /* @__PURE__ */ jsxs("span", { children: [
2888
- characterCount,
2889
- " ",
2890
- characterCount === 1 ? "caractere" : "caracteres"
2891
- ] })
2892
- ] }),
2893
- /* @__PURE__ */ jsx("div", { className: "text-[10px] sm:text-xs text-muted-foreground italic", children: "Auto-save ativo" })
2894
- ] })
2895
- ] });
2896
- }
2897
- export {
2898
- Alert as A,
2899
- EmptyTitle as B,
2900
- ChartCard as C,
2901
- DashboardBarChart as D,
2902
- Empty as E,
2903
- RadialBarMetricChart as F,
2904
- GaugeChart as G,
2905
- HorizontalBarChart as H,
2906
- InteractiveTimeSeriesChart as I,
2907
- RichTextEditor as J,
2908
- SparklineChart as K,
2909
- TableBody as L,
2910
- TableCaption as M,
2911
- TableCell as N,
2912
- TableFooter as O,
2913
- PieMetricChart as P,
2914
- TableHead as Q,
2915
- RadarMetricChart as R,
2916
- Skeleton as S,
2917
- Table as T,
2918
- TableHeader as U,
2919
- TableRow as V,
2920
- Textarea as W,
2921
- useChart as X,
2922
- useRichTextEditor as Y,
2923
- AlertDescription as a,
2924
- AlertTitle as b,
2925
- ChartContainer as c,
2926
- ChartLegend as d,
2927
- ChartLegendContent as e,
2928
- ChartStyle as f,
2929
- ChartTooltip as g,
2930
- ChartTooltipContent as h,
2931
- ComboMetricChart as i,
2932
- DashboardLineChart as j,
2933
- Dialog as k,
2934
- DialogBody as l,
2935
- DialogClose as m,
2936
- DialogContent as n,
2937
- DialogDescription as o,
2938
- DialogFooter as p,
2939
- DialogHeader as q,
2940
- DialogOverlay as r,
2941
- DialogPortal as s,
2942
- DialogTitle as t,
2943
- DialogTrigger as u,
2944
- DonutBreakdownChart as v,
2945
- EmptyAction as w,
2946
- EmptyDescription as x,
2947
- EmptyIcon as y,
2948
- EmptyImage as z
2949
- };