@espressif/dashboard-ui-components 1.10.0 → 1.11.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 (340) hide show
  1. package/CHANGELOG.md +65 -0
  2. package/dist/_vendor/@radix-ui/primitive/dist/index.js +9 -0
  3. package/dist/_vendor/@radix-ui/react-checkbox/dist/index.js +185 -0
  4. package/dist/_vendor/@radix-ui/react-compose-refs/dist/index.js +28 -0
  5. package/dist/_vendor/@radix-ui/react-context/dist/index.js +68 -0
  6. package/dist/_vendor/@radix-ui/react-presence/dist/index.js +127 -0
  7. package/dist/_vendor/@radix-ui/react-primitive/dist/index.js +42 -0
  8. package/dist/_vendor/@radix-ui/react-use-controllable-state/dist/index.js +55 -0
  9. package/dist/_vendor/@radix-ui/react-use-layout-effect/dist/index.js +5 -0
  10. package/dist/_vendor/@radix-ui/react-use-previous/dist/index.js +17 -0
  11. package/dist/_vendor/@radix-ui/react-use-size/dist/index.js +39 -0
  12. package/dist/_vendor/lottie-react/build/index.es.js +537 -0
  13. package/dist/_vendor/lottie-web/build/player/lottie.js +14149 -0
  14. package/dist/_virtual/_rolldown/runtime.js +24 -0
  15. package/dist/assets/illustrations/bulb-cloud-drawing.js +4 -0
  16. package/dist/assets/illustrations/rm-dashboard-update.js +4 -0
  17. package/dist/assets/illustrations/rm-data-download.js +4 -0
  18. package/dist/assets/logos/espressif/espressif-no-text.js +4 -0
  19. package/dist/assets/logos/espressif/espressif-with-text-dm.js +4 -0
  20. package/dist/assets/logos/espressif/espressif-with-text.js +4 -0
  21. package/dist/assets/logos/insights/insights-no-text.js +4 -0
  22. package/dist/assets/logos/insights/insights-with-text-dm.js +4 -0
  23. package/dist/assets/logos/insights/insights-with-text.js +4 -0
  24. package/dist/assets/logos/launchpad/launchpad-no-text-dm.js +4 -0
  25. package/dist/assets/logos/launchpad/launchpad-no-text.js +4 -0
  26. package/dist/assets/logos/launchpad/launchpad-with-text-dm.js +4 -0
  27. package/dist/assets/logos/launchpad/launchpad-with-text.js +4 -0
  28. package/dist/assets/logos/private-agents/private-agents-no-text.js +4 -0
  29. package/dist/assets/logos/private-agents/private-agents-with-text-dm.js +4 -0
  30. package/dist/assets/logos/private-agents/private-agents-with-text.js +4 -0
  31. package/dist/assets/logos/rainmaker/rainmaker-no-text.js +4 -0
  32. package/dist/assets/logos/rainmaker/rainmaker-with-text-dm.js +4 -0
  33. package/dist/assets/logos/rainmaker/rainmaker-with-text.js +4 -0
  34. package/dist/assets/logos/rainmaker-classic/rainmaker-classic-no-text-dm.js +4 -0
  35. package/dist/assets/logos/rainmaker-classic/rainmaker-classic-no-text.js +4 -0
  36. package/dist/assets/logos/rainmaker-classic/rainmaker-classic-with-text-dm.js +4 -0
  37. package/dist/assets/logos/rainmaker-classic/rainmaker-classic-with-text.js +4 -0
  38. package/dist/assets/logos/rainmaker-neo/rainmaker-neo-no-text.js +4 -0
  39. package/dist/assets/logos/rainmaker-neo/rainmaker-neo-with-text-dm.js +4 -0
  40. package/dist/assets/logos/rainmaker-neo/rainmaker-neo-with-text.js +4 -0
  41. package/dist/assets/logos/ui-components/ui-components-no-text.js +4 -0
  42. package/dist/assets/logos/ui-components/ui-components-with-text-dm.js +4 -0
  43. package/dist/assets/logos/ui-components/ui-components-with-text.js +4 -0
  44. package/dist/assets/logos/zerocode/zerocode-no-text.js +4 -0
  45. package/dist/assets/logos/zerocode/zerocode-with-text-dm.js +4 -0
  46. package/dist/assets/logos/zerocode/zerocode-with-text.js +4 -0
  47. package/dist/assets/logos/zerocode-ai/zerocode-ai-no-text.js +4 -0
  48. package/dist/assets/logos/zerocode-ai/zerocode-ai-with-text-dm.js +4 -0
  49. package/dist/assets/logos/zerocode-ai/zerocode-ai-with-text.js +4 -0
  50. package/dist/common/animated-rainmaker-logo/animated-rainmaker-logo.constants.js +18 -0
  51. package/dist/common/animated-rainmaker-logo/animated-rainmaker-logo.js +24 -0
  52. package/dist/common/animated-rainmaker-logo/rainmaker-c-logo.js +50 -0
  53. package/dist/common/animated-rainmaker-logo/use-animated-rainmaker-logo-animation.js +85 -0
  54. package/dist/common/app-logo/app-logo.js +59 -0
  55. package/dist/common/app-logo/logo-config.js +297 -0
  56. package/dist/common/copyright-card/copyright-card.js +39 -0
  57. package/dist/common/footer-card/footer-card.js +22 -0
  58. package/dist/common/index.js +8 -8
  59. package/dist/common/my-account-menu/my-account-menu.js +32 -0
  60. package/dist/common/page-loader/page-loader.js +21 -0
  61. package/dist/common/profile-card/profile-card.js +26 -0
  62. package/dist/components/accordion/accordion.js +52 -0
  63. package/dist/components/advanced-search-box/advanced-search-box.js +106 -0
  64. package/dist/components/alert/alert.js +85 -0
  65. package/dist/components/animated-containers/pop-collection-item.js +28 -0
  66. package/dist/components/async-multi-select/async-multi-select.js +199 -0
  67. package/dist/components/avatar/avatar.js +41 -0
  68. package/dist/components/button/button.js +191 -0
  69. package/dist/components/button/flash-button.js +110 -0
  70. package/dist/components/button/invert-button.js +13 -0
  71. package/dist/components/calendar/calendar.js +105 -0
  72. package/dist/components/cards/animated-card/animated-card-animations.js +57 -0
  73. package/dist/components/cards/animated-card/animated-card.js +42 -0
  74. package/dist/components/cards/basic-details-card.js +46 -0
  75. package/dist/components/cards/collapsible-card.js +48 -0
  76. package/dist/components/cards/no-data-card/no-data-card.js +30 -0
  77. package/dist/components/cards/section-card.js +265 -0
  78. package/dist/components/cards/simple-card.js +24 -0
  79. package/dist/components/carousel/carousel.js +158 -0
  80. package/dist/components/chart/area-chart.js +135 -0
  81. package/dist/components/chart/bar-chart.js +151 -0
  82. package/dist/components/chart/chart-colors.js +85 -0
  83. package/dist/components/chart/chart-series-data.js +53 -0
  84. package/dist/components/chart/chart.js +147 -0
  85. package/dist/components/chart/chart.types.js +7 -0
  86. package/dist/components/chart/composed-chart.js +182 -0
  87. package/dist/components/chart/donut-chart.js +177 -0
  88. package/dist/components/chart/line-chart.js +137 -0
  89. package/dist/components/chart/treemap-chart.js +294 -0
  90. package/dist/components/circular-progress/circular-progress.js +125 -0
  91. package/dist/components/code-editor/code-editor.js +235 -0
  92. package/dist/components/code-editor/code-editor.utils.js +122 -0
  93. package/dist/components/code-editor/use-code-editor-keys.js +79 -0
  94. package/dist/components/code-editor/use-highlighted-html.js +102 -0
  95. package/dist/components/confirmation-dialog/confirmation-dialog.js +72 -0
  96. package/dist/components/content-container/content-container.js +20 -0
  97. package/dist/components/copiable-text/copiable-text.js +46 -0
  98. package/dist/components/data-table/data-table.js +186 -0
  99. package/dist/components/data-table/responsive-columns.js +65 -0
  100. package/dist/components/data-table/row-actions.js +27 -0
  101. package/dist/components/data-table/sticky-columns.js +71 -0
  102. package/dist/components/data-table/table-body.js +57 -0
  103. package/dist/components/data-table/table-header.js +21 -0
  104. package/dist/components/date-picker/date-picker.js +95 -0
  105. package/dist/components/date-range-picker/date-range-picker.js +301 -0
  106. package/dist/components/date-range-picker/presets.js +174 -0
  107. package/dist/components/date-time-picker/date-time-picker.js +144 -0
  108. package/dist/components/date-time-picker/date-time-picker.utils.js +32 -0
  109. package/dist/components/device-icon/device-icon.config.js +194 -0
  110. package/dist/components/device-icon/device-icon.js +17 -0
  111. package/dist/components/device-icon/icons/air-conditioner.js +22 -0
  112. package/dist/components/device-icon/icons/blind.js +24 -0
  113. package/dist/components/device-icon/icons/dimmer.js +14 -0
  114. package/dist/components/device-icon/icons/extension-board.js +42 -0
  115. package/dist/components/device-icon/icons/fan.js +14 -0
  116. package/dist/components/device-icon/icons/knob.js +14 -0
  117. package/dist/components/device-icon/icons/led-strip.js +22 -0
  118. package/dist/components/device-icon/icons/light.js +14 -0
  119. package/dist/components/device-icon/icons/refrigerator.js +18 -0
  120. package/dist/components/device-icon/icons/retro-switch.js +18 -0
  121. package/dist/components/device-icon/icons/router.js +20 -0
  122. package/dist/components/device-icon/icons/sensor.js +20 -0
  123. package/dist/components/device-icon/icons/socket.js +19 -0
  124. package/dist/components/device-icon/icons/switch.js +19 -0
  125. package/dist/components/device-icon/icons/thermostat.js +21 -0
  126. package/dist/components/device-icon/icons/washing-machine.js +22 -0
  127. package/dist/components/device-icon/match-device.js +61 -0
  128. package/dist/components/dynamic-list/dynamic-list.js +445 -0
  129. package/dist/components/error-display/full-size-error/full-size-error.js +20 -0
  130. package/dist/components/error-display/inline-error/inline-error.js +12 -0
  131. package/dist/components/file-input/file-input.js +318 -0
  132. package/dist/components/file-upload/file-upload.js +317 -0
  133. package/dist/components/filters-bar/filters-bar.js +36 -0
  134. package/dist/components/fullscreen-dialog/fullscreen-dialog.js +68 -0
  135. package/dist/components/icon-avatar/icon-avatar.js +130 -0
  136. package/dist/components/icon-text-action-card/icon-text-action-card.js +190 -0
  137. package/dist/components/illustration/illustration-registry.js +37 -0
  138. package/dist/components/illustration/illustration-variants.js +21 -0
  139. package/dist/components/illustration/illustration.js +68 -0
  140. package/dist/components/index.d.ts +0 -20
  141. package/dist/components/index.js +134 -6
  142. package/dist/components/key-value-manager/key-value-manager-add-popover.js +126 -0
  143. package/dist/components/key-value-manager/key-value-manager-field.js +47 -0
  144. package/dist/components/key-value-manager/key-value-manager-table.js +188 -0
  145. package/dist/components/key-value-manager/key-value-manager.js +111 -0
  146. package/dist/components/key-value-manager/key-value-manager.props.js +28 -0
  147. package/dist/components/key-value-manager/key-value-manager.utils.js +21 -0
  148. package/dist/components/link/link.js +67 -0
  149. package/dist/components/list/dropdown-list-item.js +60 -0
  150. package/dist/components/list/list-item.utils.js +76 -0
  151. package/dist/components/list/list.js +49 -0
  152. package/dist/components/list/list.props.js +27 -0
  153. package/dist/components/list/standard-list-item.js +66 -0
  154. package/dist/components/list-details/list-details-item-button.js +46 -0
  155. package/dist/components/list-details/list-details-item-dropdown.js +112 -0
  156. package/dist/components/list-details/list-details-item-strip.js +125 -0
  157. package/dist/components/list-details/list-details.js +148 -0
  158. package/dist/components/lottie-animation-container/lottie-animation-container.js +31 -0
  159. package/dist/components/lottie-animations/animation-data/access-denied.js +3980 -0
  160. package/dist/components/lottie-animations/animation-data/active.js +825 -0
  161. package/dist/components/lottie-animations/animation-data/bar-chart.js +610 -0
  162. package/dist/components/lottie-animations/animation-data/chart-loading.js +5368 -0
  163. package/dist/components/lottie-animations/animation-data/cloud-download.js +1660 -0
  164. package/dist/components/lottie-animations/animation-data/cloud-sync.js +932 -0
  165. package/dist/components/lottie-animations/animation-data/coud-upload.js +7060 -0
  166. package/dist/components/lottie-animations/animation-data/cross-throb.js +1506 -0
  167. package/dist/components/lottie-animations/animation-data/dashboard-loading.js +14330 -0
  168. package/dist/components/lottie-animations/animation-data/error-spread-out.js +5567 -0
  169. package/dist/components/lottie-animations/animation-data/error.js +1211 -0
  170. package/dist/components/lottie-animations/animation-data/green-success.js +14826 -0
  171. package/dist/components/lottie-animations/animation-data/inactive.js +723 -0
  172. package/dist/components/lottie-animations/animation-data/light.js +2678 -0
  173. package/dist/components/lottie-animations/animation-data/lock.js +900 -0
  174. package/dist/components/lottie-animations/animation-data/lock2.js +1686 -0
  175. package/dist/components/lottie-animations/animation-data/locked.js +641 -0
  176. package/dist/components/lottie-animations/animation-data/search-error.js +954 -0
  177. package/dist/components/lottie-animations/animation-data/security.js +4121 -0
  178. package/dist/components/lottie-animations/animation-data/success.js +404 -0
  179. package/dist/components/lottie-animations/animation-data/verification-in-progress.js +10138 -0
  180. package/dist/components/lottie-animations/animation-data/warning.js +843 -0
  181. package/dist/components/lottie-animations/verification-in-progress/verification-in-progress.js +19 -0
  182. package/dist/components/markdown-content/markdown-content.components.js +114 -0
  183. package/dist/components/markdown-content/markdown-content.js +39 -0
  184. package/dist/components/menu/menu.js +19 -0
  185. package/dist/components/monospace-content/monospace-content.js +80 -0
  186. package/dist/components/nav-bar/nav-bar-details-panel.js +51 -0
  187. package/dist/components/nav-bar/nav-bar-mobile-menu.js +105 -0
  188. package/dist/components/nav-bar/nav-bar.js +449 -0
  189. package/dist/components/nav-bar/use-nav-bar-overflow.js +74 -0
  190. package/dist/components/nav-bar/use-nav-bar-scroll.js +42 -0
  191. package/dist/components/overflow-badge-list/overflow-badge-list.js +58 -0
  192. package/dist/components/page-container/page-container-skeleton.js +72 -0
  193. package/dist/components/page-container/page-container.js +93 -0
  194. package/dist/components/pagination/pagination.js +96 -0
  195. package/dist/components/pagination/pagination.props.js +16 -0
  196. package/dist/components/progress-bar/progress-bar.js +106 -0
  197. package/dist/components/radio-group/radio-group.js +41 -0
  198. package/dist/components/requirement-list/requirement-list.js +83 -0
  199. package/dist/components/scrollable-sections/scrollable-sections.js +270 -0
  200. package/dist/components/search-box/search-box.js +54 -0
  201. package/dist/components/search-field-shell.js +24 -0
  202. package/dist/components/selectable-card-list/checkbox-card-list.js +85 -0
  203. package/dist/components/selectable-card-list/radio-card-list.js +99 -0
  204. package/dist/components/selectable-card-list/selectable-card-list-shared.js +135 -0
  205. package/dist/components/selectable-card-list/selectable-card-list.js +34 -0
  206. package/dist/components/sidebar/sidebar.js +344 -0
  207. package/dist/components/sidebar/types.js +6 -0
  208. package/dist/components/simple-clickable-card/simple-clickable-card-shared.js +309 -0
  209. package/dist/components/simple-clickable-card/simple-clickable-card.js +106 -0
  210. package/dist/components/simple-info-card/simple-info-card.js +154 -0
  211. package/dist/components/simple-list/simple-list.js +146 -0
  212. package/dist/components/simple-paginated-list/simple-paginated-list.js +178 -0
  213. package/dist/components/simplified-date/simplified-date.js +56 -0
  214. package/dist/components/skeletons/table-skeleton.js +16 -0
  215. package/dist/components/spinner/spinner.js +25 -0
  216. package/dist/components/stat-card/stat-card.js +206 -0
  217. package/dist/components/status-badge/status-badge.js +108 -0
  218. package/dist/components/status-card-list/status-card-list.js +282 -0
  219. package/dist/components/tag/tag.js +144 -0
  220. package/dist/components/tag-input/tag-input.js +161 -0
  221. package/dist/components/text-effects/glitch-effect/glitch-text.js +115 -0
  222. package/dist/components/text-effects/gradient-text/gradient-text.js +32 -0
  223. package/dist/components/text-effects/highlight-text/highlight-text.js +35 -0
  224. package/dist/components/text-effects/parse-text-markup.js +53 -0
  225. package/dist/components/text-effects/shimmer-text/shimmer-text.js +67 -0
  226. package/dist/components/time-picker/time-picker.js +23 -0
  227. package/dist/components/toast/toast.js +126 -0
  228. package/dist/components/togglable-items-list/togglable-items-list.js +28 -0
  229. package/dist/components/tooltip/tooltip.js +21 -0
  230. package/dist/components/transfer-list/transfer-list.js +413 -0
  231. package/dist/components/truncated-line-with-tooltip/truncated-line-with-tooltip.js +61 -0
  232. package/dist/components/typography/typography-variants.js +41 -0
  233. package/dist/components/typography/typography.js +15 -0
  234. package/dist/components/user-type-badge/user-type-badge.js +40 -0
  235. package/dist/components/user-type-badge/user-type-badge.registry.js +17 -0
  236. package/dist/components/vertical-stepper/vertical-stepper.js +171 -0
  237. package/dist/core/alert.js +33 -0
  238. package/dist/core/animate-ui/components/animate/code-header.js +30 -0
  239. package/dist/core/animate-ui/components/animate/code.js +35 -0
  240. package/dist/core/animate-ui/components/animate/tabs.js +188 -0
  241. package/dist/core/animate-ui/components/animate/tooltip.js +39 -0
  242. package/dist/core/animate-ui/components/base/preview-card.js +29 -0
  243. package/dist/core/animate-ui/components/base/progress.js +32 -0
  244. package/dist/core/animate-ui/components/base/radio.js +24 -0
  245. package/dist/core/animate-ui/components/buttons/copy.js +95 -0
  246. package/dist/core/animate-ui/components/radix/accordion.js +36 -0
  247. package/dist/core/animate-ui/components/radix/dialog.js +60 -0
  248. package/dist/core/animate-ui/components/radix/dropdown-menu.js +129 -0
  249. package/dist/core/animate-ui/components/radix/sheet.js +110 -0
  250. package/dist/core/animate-ui/components/radix/sidebar.js +416 -0
  251. package/dist/core/animate-ui/components/radix/switch.js +34 -0
  252. package/dist/core/animate-ui/components/radix/toggle-group.js +115 -0
  253. package/dist/core/animate-ui/components/radix/toggle.js +24 -0
  254. package/dist/core/animate-ui/primitives/animate/code-block.js +131 -0
  255. package/dist/core/animate-ui/primitives/animate/escape-html.js +7 -0
  256. package/dist/core/animate-ui/primitives/animate/shiki-highlighter.js +64 -0
  257. package/dist/core/animate-ui/primitives/animate/slot.js +39 -0
  258. package/dist/core/animate-ui/primitives/animate/tabs.js +202 -0
  259. package/dist/core/animate-ui/primitives/animate/tooltip.js +351 -0
  260. package/dist/core/animate-ui/primitives/base/preview-card.js +107 -0
  261. package/dist/core/animate-ui/primitives/base/progress.js +60 -0
  262. package/dist/core/animate-ui/primitives/base/radio.js +83 -0
  263. package/dist/core/animate-ui/primitives/buttons/button.js +15 -0
  264. package/dist/core/animate-ui/primitives/effects/highlight.js +407 -0
  265. package/dist/core/animate-ui/primitives/radix/accordion.js +76 -0
  266. package/dist/core/animate-ui/primitives/radix/dialog.js +136 -0
  267. package/dist/core/animate-ui/primitives/radix/dropdown-menu.js +305 -0
  268. package/dist/core/animate-ui/primitives/radix/sheet.js +165 -0
  269. package/dist/core/animate-ui/primitives/radix/switch.js +86 -0
  270. package/dist/core/animate-ui/primitives/radix/toggle-group.js +100 -0
  271. package/dist/core/animate-ui/primitives/texts/counting-number.js +75 -0
  272. package/dist/core/avatar.js +32 -0
  273. package/dist/core/badge.js +27 -0
  274. package/dist/core/breadcrumb.js +62 -0
  275. package/dist/core/button/button.js +43 -0
  276. package/dist/core/button/craft-button.js +78 -0
  277. package/dist/core/button-group.js +38 -0
  278. package/dist/core/button.js +40 -0
  279. package/dist/core/card.js +42 -0
  280. package/dist/core/carousel/carousel.js +149 -0
  281. package/dist/core/checkbox/motion-checkbox.js +103 -0
  282. package/dist/core/collapsible.js +54 -0
  283. package/dist/core/combobox/combobox.js +85 -0
  284. package/dist/core/command.js +61 -0
  285. package/dist/core/field-end-icons.js +36 -0
  286. package/dist/core/field-label-row.js +33 -0
  287. package/dist/core/form.js +92 -0
  288. package/dist/core/hooks/use-controlled-state.js +27 -0
  289. package/dist/core/hooks/use-data-state.js +39 -0
  290. package/dist/core/hooks/use-is-in-view.js +18 -0
  291. package/dist/core/hooks/use-mobile.js +19 -0
  292. package/dist/core/hooks/use-reveal-on-scroll-up.js +141 -0
  293. package/dist/core/hooks/use-scroll-overflow.js +50 -0
  294. package/dist/core/index.js +18 -52
  295. package/dist/core/input/input-password.js +30 -0
  296. package/dist/core/input/input.js +147 -0
  297. package/dist/core/input-otp/input-otp.js +183 -0
  298. package/dist/core/label.js +15 -0
  299. package/dist/core/popover.js +31 -0
  300. package/dist/core/scroll-area.js +42 -0
  301. package/dist/core/select.js +121 -0
  302. package/dist/core/separator.js +40 -0
  303. package/dist/core/skeleton.js +11 -0
  304. package/dist/core/table.js +59 -0
  305. package/dist/core/textarea/textarea.js +97 -0
  306. package/dist/core/utils/get-strict-context.js +18 -0
  307. package/dist/index.js +148 -9
  308. package/dist/layouts/entry-layout/entry-layout-bg.js +4 -0
  309. package/dist/layouts/entry-layout/entry-layout.js +52 -0
  310. package/dist/layouts/index.js +7 -6
  311. package/dist/layouts/workspace-layout/account-menu/account-menu.js +108 -0
  312. package/dist/layouts/workspace-layout/breadcrumbs/derive-breadcrumbs.js +37 -0
  313. package/dist/layouts/workspace-layout/breadcrumbs/workspace-breadcrumbs.js +22 -0
  314. package/dist/layouts/workspace-layout/footer/footer.js +15 -0
  315. package/dist/layouts/workspace-layout/header/header.js +54 -0
  316. package/dist/layouts/workspace-layout/workspace-layout.js +157 -0
  317. package/dist/tailwind-preset.js +3 -4
  318. package/dist/utils/cn.js +8 -0
  319. package/dist/utils/color.js +72 -0
  320. package/dist/utils/index.js +3 -2
  321. package/dist/utils/path-match.js +17 -0
  322. package/dist/utils/silver-shine.js +63 -0
  323. package/dist/utils/variant-gradient-underlay.js +45 -0
  324. package/dist/utils/variant.js +426 -0
  325. package/package.json +7 -4
  326. package/dist/chunk-2GDYZAKR.js +0 -505
  327. package/dist/chunk-ALCWXFUC.js +0 -733
  328. package/dist/chunk-CDHBLANU.js +0 -59
  329. package/dist/chunk-LUESSJAF.js +0 -70068
  330. package/dist/chunk-TMORRNEB.js +0 -323
  331. package/dist/chunk-TRTQSARU.js +0 -31
  332. package/dist/chunk-VU4CZ76T.js +0 -43
  333. package/dist/chunk-XNLCVHBC.js +0 -364
  334. package/dist/chunk-Z4776NRY.js +0 -4347
  335. package/src/assets/illustrations/add-to-group.svg +0 -32
  336. package/src/assets/illustrations/chip.svg +0 -51
  337. package/src/assets/illustrations/create-new-group.svg +0 -27
  338. package/src/assets/illustrations/new-ota.svg +0 -61
  339. package/src/assets/illustrations/secured-key.svg +0 -48
  340. /package/dist/assets/{entry-layout-bg-JPI7GJ42.webp → entry-layout-bg-DUM0UhT3.webp} +0 -0
@@ -1,4347 +0,0 @@
1
- import { getStrictContext, Button, Avatar, AvatarImage, AvatarFallback, AvatarBadge, useControlledState, useIsMobile, Separator, Skeleton, useDataState, Collapsible, CollapsibleTrigger, CollapsibleContent } from './chunk-XNLCVHBC.js';
2
- import { cn, resolveColor, isPresetColor } from './chunk-VU4CZ76T.js';
3
- import { LoaderCircle, EyeOffIcon, EyeIcon, User, CheckIcon, CircleIcon, ChevronRightIcon, ArrowUpRightIcon, ZapIcon, CopyIcon, XIcon, PanelLeftIcon, X, ChevronDown, CircleDot, Circle, ChevronRight } from 'lucide-react';
4
- import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
5
- import * as React from 'react';
6
- import React__default, { useState, useMemo, useEffect, useRef } from 'react';
7
- import { Slot as Slot$2, DropdownMenu as DropdownMenu$1, Dialog } from 'radix-ui';
8
- import { motion, LayoutGroup, AnimatePresence, isMotionComponent, useAnimate, useInView } from 'motion/react';
9
- import * as motion5 from 'motion/react-client';
10
- import { FloatingArrow, useFloating, autoUpdate, offset, flip, shift, arrow, FloatingPortal } from '@floating-ui/react';
11
- import { motion as motion$1 } from 'framer-motion';
12
- import { Slot as Slot$1 } from '@radix-ui/react-slot';
13
- import { cva } from 'class-variance-authority';
14
- import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
15
-
16
- var sizeClasses = {
17
- sm: "h-5 w-5 text-[10px]",
18
- default: "h-7 w-7 text-xs",
19
- lg: "h-10 w-10 text-sm"
20
- };
21
- function Avatar2({
22
- name,
23
- imageUrl,
24
- size = "default",
25
- className,
26
- badgeColor,
27
- badgeIcon
28
- }) {
29
- const displayInitial = name ? name.charAt(0).toUpperCase() : null;
30
- const showIconBadge = badgeIcon != null && badgeIcon !== false;
31
- const colorResolved = !showIconBadge && badgeColor != null ? resolveColor(badgeColor, "bg") : void 0;
32
- const hasBadge = showIconBadge || Boolean(colorResolved);
33
- const avatar = /* @__PURE__ */ jsxs(Avatar, { className: cn(sizeClasses[size], className), children: [
34
- imageUrl && /* @__PURE__ */ jsx(AvatarImage, { src: imageUrl, alt: name ?? "User avatar" }),
35
- /* @__PURE__ */ jsx(
36
- AvatarFallback,
37
- {
38
- className: cn(
39
- "bg-primary text-primary-foreground font-medium",
40
- sizeClasses[size],
41
- className
42
- ),
43
- children: displayInitial ?? /* @__PURE__ */ jsx(User, { className: "h-3/5 w-3/5" })
44
- }
45
- )
46
- ] });
47
- if (!hasBadge) {
48
- return avatar;
49
- }
50
- return /* @__PURE__ */ jsxs("span", { className: "relative inline-flex shrink-0", children: [
51
- avatar,
52
- showIconBadge ? /* @__PURE__ */ jsx(AvatarBadge, { variant: "icon", children: badgeIcon }) : colorResolved ? /* @__PURE__ */ jsx(
53
- AvatarBadge,
54
- {
55
- variant: "dot",
56
- className: cn(colorResolved.className),
57
- style: colorResolved.style
58
- }
59
- ) : null
60
- ] });
61
- }
62
- var DEFAULT_BOUNDS_OFFSET = {
63
- top: 0,
64
- left: 0,
65
- width: 0,
66
- height: 0
67
- };
68
- var HighlightContext = React.createContext(void 0);
69
- function useHighlight() {
70
- const context = React.useContext(HighlightContext);
71
- if (!context) {
72
- throw new Error("useHighlight must be used within a HighlightProvider");
73
- }
74
- return context;
75
- }
76
- function Highlight({
77
- ref,
78
- ...props
79
- }) {
80
- const {
81
- as: Component = "div",
82
- children,
83
- value,
84
- defaultValue,
85
- onValueChange,
86
- className,
87
- style,
88
- transition = { type: "spring", stiffness: 350, damping: 35 },
89
- hover = false,
90
- click = true,
91
- enabled = true,
92
- controlledItems,
93
- disabled = false,
94
- exitDelay = 200,
95
- mode = "children"
96
- } = props;
97
- const localRef = React.useRef(null);
98
- React.useImperativeHandle(ref, () => localRef.current);
99
- const parentProps = props;
100
- const propsBoundsOffset = parentProps?.boundsOffset;
101
- const boundsOffset = propsBoundsOffset ?? DEFAULT_BOUNDS_OFFSET;
102
- const boundsOffsetTop = boundsOffset.top ?? 0;
103
- const boundsOffsetLeft = boundsOffset.left ?? 0;
104
- const boundsOffsetWidth = boundsOffset.width ?? 0;
105
- const boundsOffsetHeight = boundsOffset.height ?? 0;
106
- const variant = parentProps?.variant;
107
- const lineHeight = parentProps?.lineHeight ?? 2;
108
- const boundsOffsetRef = React.useRef({
109
- top: boundsOffsetTop,
110
- left: boundsOffsetLeft,
111
- width: boundsOffsetWidth,
112
- height: boundsOffsetHeight,
113
- variant,
114
- lineHeight
115
- });
116
- React.useEffect(() => {
117
- boundsOffsetRef.current = {
118
- top: boundsOffsetTop,
119
- left: boundsOffsetLeft,
120
- width: boundsOffsetWidth,
121
- height: boundsOffsetHeight,
122
- variant,
123
- lineHeight
124
- };
125
- }, [
126
- boundsOffsetTop,
127
- boundsOffsetLeft,
128
- boundsOffsetWidth,
129
- boundsOffsetHeight,
130
- variant,
131
- lineHeight
132
- ]);
133
- const [activeValue, setActiveValue] = React.useState(
134
- value ?? defaultValue ?? null
135
- );
136
- const [boundsState, setBoundsState] = React.useState(
137
- null
138
- );
139
- const [activeClassNameState, setActiveClassNameState] = React.useState("");
140
- const safeSetActiveValue = (id2) => {
141
- setActiveValue((prev) => {
142
- if (prev !== id2) {
143
- onValueChange?.(id2);
144
- return id2;
145
- }
146
- return prev;
147
- });
148
- };
149
- const safeSetBoundsRef = React.useRef(void 0);
150
- React.useEffect(() => {
151
- safeSetBoundsRef.current = (bounds, opts) => {
152
- if (!localRef.current) return;
153
- const container = localRef.current;
154
- const containerRect = container.getBoundingClientRect();
155
- const offset = boundsOffsetRef.current;
156
- const relativeTop = bounds.top - containerRect.top + container.scrollTop;
157
- const relativeLeft = bounds.left - containerRect.left + container.scrollLeft;
158
- const isLineVariant = offset.variant === "line" && offset.lineHeight != null;
159
- const newBounds = isLineVariant ? {
160
- top: relativeTop + bounds.height - offset.lineHeight + (offset.top ?? 0),
161
- left: relativeLeft + (offset.left ?? 0),
162
- width: bounds.width + (offset.width ?? 0),
163
- height: offset.lineHeight
164
- } : {
165
- top: relativeTop + offset.top,
166
- left: relativeLeft + offset.left,
167
- width: bounds.width + offset.width,
168
- height: bounds.height + offset.height
169
- };
170
- setBoundsState((prev) => {
171
- if (prev && prev.top === newBounds.top && prev.left === newBounds.left && prev.width === newBounds.width && prev.height === newBounds.height) {
172
- return prev;
173
- }
174
- return {
175
- ...newBounds,
176
- instant: prev ? opts?.instant ?? false : false
177
- };
178
- });
179
- };
180
- });
181
- const safeSetBounds = (bounds, opts) => {
182
- safeSetBoundsRef.current?.(bounds, opts);
183
- };
184
- const clearBounds = React.useCallback(() => {
185
- setBoundsState((prev) => prev === null ? prev : null);
186
- }, []);
187
- React.useEffect(() => {
188
- if (value !== void 0) setActiveValue(value);
189
- else if (defaultValue !== void 0) setActiveValue(defaultValue);
190
- }, [value, defaultValue]);
191
- const id = React.useId();
192
- const getActiveElement = React.useCallback(() => {
193
- const container = localRef.current;
194
- if (mode !== "parent" || !activeValue || !container) return null;
195
- return container.querySelector(
196
- `[data-value="${activeValue}"][data-highlight="true"]`
197
- );
198
- }, [mode, activeValue]);
199
- const measureActiveRef = React.useRef(void 0);
200
- React.useEffect(() => {
201
- measureActiveRef.current = (opts) => {
202
- const activeEl = getActiveElement();
203
- if (activeEl)
204
- safeSetBoundsRef.current?.(activeEl.getBoundingClientRect(), opts);
205
- };
206
- });
207
- React.useEffect(() => {
208
- if (mode !== "parent") return;
209
- const container = localRef.current;
210
- if (!container) return;
211
- const onScroll = () => measureActiveRef.current?.();
212
- container.addEventListener("scroll", onScroll, { passive: true });
213
- return () => container.removeEventListener("scroll", onScroll);
214
- }, [mode]);
215
- React.useEffect(() => {
216
- if (mode !== "parent") return;
217
- const container = localRef.current;
218
- if (!container || typeof ResizeObserver === "undefined") return;
219
- const observer = new ResizeObserver(
220
- () => measureActiveRef.current?.({ instant: true })
221
- );
222
- observer.observe(container);
223
- const activeEl = getActiveElement();
224
- if (activeEl) observer.observe(activeEl);
225
- return () => observer.disconnect();
226
- }, [mode, getActiveElement]);
227
- React.useLayoutEffect(() => {
228
- if (mode !== "parent" || !activeValue) return;
229
- const raf = requestAnimationFrame(() => measureActiveRef.current?.());
230
- return () => cancelAnimationFrame(raf);
231
- }, [mode, activeValue]);
232
- const render = (children2) => {
233
- if (mode === "parent") {
234
- return /* @__PURE__ */ jsxs(
235
- Component,
236
- {
237
- ref: localRef,
238
- "data-slot": "motion-highlight-container",
239
- style: { position: "relative", zIndex: 1 },
240
- className: props?.containerClassName,
241
- children: [
242
- /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "wait", children: boundsState && /* @__PURE__ */ jsx(
243
- motion.div,
244
- {
245
- "data-slot": "motion-highlight",
246
- animate: {
247
- top: boundsState.top,
248
- left: boundsState.left,
249
- width: boundsState.width,
250
- height: boundsState.height,
251
- opacity: 1
252
- },
253
- initial: {
254
- top: boundsState.top,
255
- left: boundsState.left,
256
- width: boundsState.width,
257
- height: boundsState.height,
258
- opacity: 0
259
- },
260
- exit: {
261
- opacity: 0,
262
- transition: {
263
- ...transition,
264
- delay: (transition?.delay ?? 0) + (exitDelay ?? 0) / 1e3
265
- }
266
- },
267
- transition: boundsState.instant ? { duration: 0 } : transition,
268
- style: { position: "absolute", zIndex: 0, ...style },
269
- className: cn(className, activeClassNameState)
270
- }
271
- ) }),
272
- children2
273
- ]
274
- }
275
- );
276
- }
277
- return children2;
278
- };
279
- return /* @__PURE__ */ jsx(
280
- HighlightContext.Provider,
281
- {
282
- value: {
283
- mode,
284
- activeValue,
285
- setActiveValue: safeSetActiveValue,
286
- id,
287
- hover,
288
- click,
289
- className,
290
- style,
291
- transition,
292
- disabled,
293
- enabled,
294
- exitDelay,
295
- setBounds: safeSetBounds,
296
- clearBounds,
297
- activeClassName: activeClassNameState,
298
- setActiveClassName: setActiveClassNameState,
299
- forceUpdateBounds: props?.forceUpdateBounds
300
- },
301
- children: enabled ? controlledItems ? render(children) : render(
302
- React.Children.map(children, (child, index) => /* @__PURE__ */ jsx(HighlightItem, { className: props?.itemsClassName, children: child }, index))
303
- ) : children
304
- }
305
- );
306
- }
307
- function getNonOverridingDataAttributes(element, dataAttributes) {
308
- return Object.keys(dataAttributes).reduce(
309
- (acc, key) => {
310
- if (element.props[key] === void 0) {
311
- acc[key] = dataAttributes[key];
312
- }
313
- return acc;
314
- },
315
- {}
316
- );
317
- }
318
- function HighlightItem({
319
- ref,
320
- as,
321
- children,
322
- id,
323
- value,
324
- className,
325
- style,
326
- transition,
327
- disabled = false,
328
- activeClassName,
329
- exitDelay,
330
- asChild = false,
331
- forceUpdateBounds,
332
- ...props
333
- }) {
334
- const itemId = React.useId();
335
- const {
336
- activeValue,
337
- setActiveValue,
338
- mode,
339
- setBounds,
340
- clearBounds,
341
- hover,
342
- click,
343
- enabled,
344
- className: contextClassName,
345
- style: contextStyle,
346
- transition: contextTransition,
347
- id: contextId,
348
- disabled: contextDisabled,
349
- exitDelay: contextExitDelay,
350
- forceUpdateBounds: contextForceUpdateBounds,
351
- setActiveClassName
352
- } = useHighlight();
353
- const Component = as ?? "div";
354
- const element = children;
355
- const childValue = id ?? value ?? element.props?.["data-value"] ?? element.props?.id ?? itemId;
356
- const isActive = activeValue === childValue;
357
- const isDisabled = disabled === void 0 ? contextDisabled : disabled;
358
- const itemTransition = transition ?? contextTransition;
359
- const localRef = React.useRef(null);
360
- React.useImperativeHandle(ref, () => localRef.current);
361
- const refCallback = React.useCallback((node) => {
362
- localRef.current = node;
363
- }, []);
364
- React.useEffect(() => {
365
- if (mode !== "parent") return;
366
- let rafId;
367
- let previousBounds = null;
368
- const shouldUpdateBounds = forceUpdateBounds === true || contextForceUpdateBounds && forceUpdateBounds !== false;
369
- const updateBounds = () => {
370
- if (!localRef.current) return;
371
- const bounds = localRef.current.getBoundingClientRect();
372
- if (shouldUpdateBounds) {
373
- if (previousBounds && previousBounds.top === bounds.top && previousBounds.left === bounds.left && previousBounds.width === bounds.width && previousBounds.height === bounds.height) {
374
- rafId = requestAnimationFrame(updateBounds);
375
- return;
376
- }
377
- previousBounds = bounds;
378
- rafId = requestAnimationFrame(updateBounds);
379
- }
380
- setBounds(bounds);
381
- };
382
- if (isActive) {
383
- updateBounds();
384
- setActiveClassName(activeClassName ?? "");
385
- } else if (!activeValue) clearBounds();
386
- if (shouldUpdateBounds) return () => cancelAnimationFrame(rafId);
387
- }, [
388
- mode,
389
- isActive,
390
- activeValue,
391
- setBounds,
392
- clearBounds,
393
- activeClassName,
394
- setActiveClassName,
395
- forceUpdateBounds,
396
- contextForceUpdateBounds
397
- ]);
398
- if (!React.isValidElement(children)) return children;
399
- const dataAttributes = {
400
- "data-active": isActive ? "true" : "false",
401
- "aria-selected": isActive,
402
- "data-disabled": isDisabled,
403
- "data-value": childValue,
404
- "data-highlight": true
405
- };
406
- const incomingHandlers = props;
407
- const commonHandlers = hover ? {
408
- onMouseEnter: (e) => {
409
- setActiveValue(childValue);
410
- element.props.onMouseEnter?.(e);
411
- incomingHandlers.onMouseEnter?.(e);
412
- },
413
- onMouseLeave: (e) => {
414
- setActiveValue(null);
415
- element.props.onMouseLeave?.(e);
416
- incomingHandlers.onMouseLeave?.(e);
417
- }
418
- } : click ? {
419
- onClick: (e) => {
420
- setActiveValue(childValue);
421
- element.props.onClick?.(e);
422
- incomingHandlers.onClick?.(e);
423
- }
424
- } : {};
425
- if (asChild) {
426
- if (mode === "children") {
427
- return React.cloneElement(
428
- element,
429
- {
430
- key: childValue,
431
- ref: refCallback,
432
- className: cn("relative", element.props.className),
433
- ...getNonOverridingDataAttributes(element, {
434
- ...dataAttributes,
435
- "data-slot": "motion-highlight-item-container"
436
- }),
437
- ...commonHandlers,
438
- ...props
439
- },
440
- /* @__PURE__ */ jsxs(Fragment, { children: [
441
- /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "wait", children: isActive && !isDisabled && /* @__PURE__ */ jsx(
442
- motion.div,
443
- {
444
- layoutId: `transition-background-${contextId}`,
445
- "data-slot": "motion-highlight",
446
- style: {
447
- position: "absolute",
448
- zIndex: 0,
449
- ...contextStyle,
450
- ...style
451
- },
452
- className: cn(contextClassName, activeClassName),
453
- transition: itemTransition,
454
- initial: { opacity: 0 },
455
- animate: { opacity: 1 },
456
- exit: {
457
- opacity: 0,
458
- transition: {
459
- ...itemTransition,
460
- delay: (itemTransition?.delay ?? 0) + (exitDelay ?? contextExitDelay ?? 0) / 1e3
461
- }
462
- },
463
- ...dataAttributes
464
- }
465
- ) }),
466
- /* @__PURE__ */ jsx(
467
- Component,
468
- {
469
- "data-slot": "motion-highlight-item",
470
- style: { position: "relative", zIndex: 1 },
471
- className,
472
- ...dataAttributes,
473
- children
474
- }
475
- )
476
- ] })
477
- );
478
- }
479
- return React.cloneElement(element, {
480
- ref: refCallback,
481
- ...getNonOverridingDataAttributes(element, {
482
- ...dataAttributes,
483
- "data-slot": "motion-highlight-item"
484
- }),
485
- ...commonHandlers
486
- });
487
- }
488
- return enabled ? /* @__PURE__ */ jsxs(
489
- Component,
490
- {
491
- ref: localRef,
492
- "data-slot": "motion-highlight-item-container",
493
- className: cn(mode === "children" && "relative", className),
494
- ...dataAttributes,
495
- ...props,
496
- ...commonHandlers,
497
- children: [
498
- mode === "children" && /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "wait", children: isActive && !isDisabled && /* @__PURE__ */ jsx(
499
- motion.div,
500
- {
501
- layoutId: `transition-background-${contextId}`,
502
- "data-slot": "motion-highlight",
503
- style: {
504
- position: "absolute",
505
- zIndex: 0,
506
- ...contextStyle,
507
- ...style
508
- },
509
- className: cn(contextClassName, activeClassName),
510
- transition: itemTransition,
511
- initial: { opacity: 0 },
512
- animate: { opacity: 1 },
513
- exit: {
514
- opacity: 0,
515
- transition: {
516
- ...itemTransition,
517
- delay: (itemTransition?.delay ?? 0) + (exitDelay ?? contextExitDelay ?? 0) / 1e3
518
- }
519
- },
520
- ...dataAttributes
521
- }
522
- ) }),
523
- React.cloneElement(element, {
524
- style: { position: "relative", zIndex: 1 },
525
- className: element.props.className,
526
- ...getNonOverridingDataAttributes(element, {
527
- ...dataAttributes,
528
- "data-slot": "motion-highlight-item"
529
- })
530
- })
531
- ]
532
- },
533
- childValue
534
- ) : children;
535
- }
536
- var [DropdownMenuProvider, useDropdownMenu] = getStrictContext("DropdownMenuContext");
537
- var [DropdownMenuSubProvider, useDropdownMenuSub] = getStrictContext("DropdownMenuSubContext");
538
- function DropdownMenu(props) {
539
- const [isOpen, setIsOpen] = useControlledState({
540
- value: props?.open,
541
- defaultValue: props?.defaultOpen,
542
- onChange: props?.onOpenChange
543
- });
544
- const [highlightedValue, setHighlightedValue] = React.useState(
545
- null
546
- );
547
- return /* @__PURE__ */ jsx(
548
- DropdownMenuProvider,
549
- {
550
- value: { isOpen, setIsOpen, highlightedValue, setHighlightedValue },
551
- children: /* @__PURE__ */ jsx(
552
- DropdownMenu$1.Root,
553
- {
554
- "data-slot": "dropdown-menu",
555
- ...props,
556
- onOpenChange: setIsOpen
557
- }
558
- )
559
- }
560
- );
561
- }
562
- function DropdownMenuTrigger(props) {
563
- return /* @__PURE__ */ jsx(
564
- DropdownMenu$1.Trigger,
565
- {
566
- "data-slot": "dropdown-menu-trigger",
567
- ...props
568
- }
569
- );
570
- }
571
- function DropdownMenuPortal(props) {
572
- return /* @__PURE__ */ jsx(DropdownMenu$1.Portal, { "data-slot": "dropdown-menu-portal", ...props });
573
- }
574
- function DropdownMenuGroup(props) {
575
- return /* @__PURE__ */ jsx(DropdownMenu$1.Group, { "data-slot": "dropdown-menu-group", ...props });
576
- }
577
- function DropdownMenuSub(props) {
578
- const [isOpen, setIsOpen] = useControlledState({
579
- value: props?.open,
580
- defaultValue: props?.defaultOpen,
581
- onChange: props?.onOpenChange
582
- });
583
- return /* @__PURE__ */ jsx(DropdownMenuSubProvider, { value: { isOpen, setIsOpen }, children: /* @__PURE__ */ jsx(
584
- DropdownMenu$1.Sub,
585
- {
586
- "data-slot": "dropdown-menu-sub",
587
- ...props,
588
- onOpenChange: setIsOpen
589
- }
590
- ) });
591
- }
592
- function DropdownMenuRadioGroup(props) {
593
- return /* @__PURE__ */ jsx(
594
- DropdownMenu$1.RadioGroup,
595
- {
596
- "data-slot": "dropdown-menu-radio-group",
597
- ...props
598
- }
599
- );
600
- }
601
- function DropdownMenuSubTrigger({
602
- disabled,
603
- textValue,
604
- ...props
605
- }) {
606
- const { setHighlightedValue } = useDropdownMenu();
607
- const [, highlightedRef] = useDataState(
608
- "highlighted",
609
- void 0,
610
- (value) => {
611
- if (value === true) {
612
- const el = highlightedRef.current;
613
- const v = el?.dataset.value || el?.id || null;
614
- if (v) setHighlightedValue(v);
615
- }
616
- }
617
- );
618
- return /* @__PURE__ */ jsx(
619
- DropdownMenu$1.SubTrigger,
620
- {
621
- ref: highlightedRef,
622
- disabled,
623
- textValue,
624
- asChild: true,
625
- children: /* @__PURE__ */ jsx(
626
- motion.div,
627
- {
628
- "data-slot": "dropdown-menu-sub-trigger",
629
- "data-disabled": disabled,
630
- ...props
631
- }
632
- )
633
- }
634
- );
635
- }
636
- function DropdownMenuSubContent({
637
- loop,
638
- onEscapeKeyDown,
639
- onPointerDownOutside,
640
- onFocusOutside,
641
- onInteractOutside,
642
- sideOffset,
643
- alignOffset,
644
- avoidCollisions,
645
- collisionBoundary,
646
- collisionPadding,
647
- arrowPadding,
648
- sticky,
649
- hideWhenDetached,
650
- transition = { duration: 0.2 },
651
- style,
652
- container,
653
- ...props
654
- }) {
655
- const { isOpen } = useDropdownMenuSub();
656
- return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(DropdownMenuPortal, { forceMount: true, container, children: /* @__PURE__ */ jsx(
657
- DropdownMenu$1.SubContent,
658
- {
659
- asChild: true,
660
- forceMount: true,
661
- loop,
662
- onEscapeKeyDown,
663
- onPointerDownOutside,
664
- onFocusOutside,
665
- onInteractOutside,
666
- sideOffset,
667
- alignOffset,
668
- avoidCollisions,
669
- collisionBoundary,
670
- collisionPadding,
671
- arrowPadding,
672
- sticky,
673
- hideWhenDetached,
674
- children: /* @__PURE__ */ jsx(
675
- motion.div,
676
- {
677
- "data-slot": "dropdown-menu-sub-content",
678
- initial: { opacity: 0, scale: 0.95 },
679
- animate: { opacity: 1, scale: 1 },
680
- exit: { opacity: 0, scale: 0.95 },
681
- transition,
682
- style: { willChange: "opacity, transform", ...style },
683
- ...props
684
- },
685
- "dropdown-menu-sub-content"
686
- )
687
- }
688
- ) }) });
689
- }
690
- function DropdownMenuHighlight({
691
- transition = { type: "spring", stiffness: 350, damping: 35 },
692
- ...props
693
- }) {
694
- const { highlightedValue } = useDropdownMenu();
695
- return /* @__PURE__ */ jsx(
696
- Highlight,
697
- {
698
- "data-slot": "dropdown-menu-highlight",
699
- click: false,
700
- controlledItems: true,
701
- transition,
702
- value: highlightedValue,
703
- ...props
704
- }
705
- );
706
- }
707
- function DropdownMenuContent({
708
- loop,
709
- onCloseAutoFocus,
710
- onEscapeKeyDown,
711
- onPointerDownOutside,
712
- onFocusOutside,
713
- onInteractOutside,
714
- side,
715
- sideOffset,
716
- align,
717
- alignOffset,
718
- avoidCollisions,
719
- collisionBoundary,
720
- collisionPadding,
721
- arrowPadding,
722
- sticky,
723
- hideWhenDetached,
724
- transition = { duration: 0.2 },
725
- style,
726
- container,
727
- ...props
728
- }) {
729
- const { isOpen } = useDropdownMenu();
730
- return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(DropdownMenuPortal, { forceMount: true, container, children: /* @__PURE__ */ jsx(
731
- DropdownMenu$1.Content,
732
- {
733
- asChild: true,
734
- loop,
735
- onCloseAutoFocus,
736
- onEscapeKeyDown,
737
- onPointerDownOutside,
738
- onFocusOutside,
739
- onInteractOutside,
740
- side,
741
- sideOffset,
742
- align,
743
- alignOffset,
744
- avoidCollisions,
745
- collisionBoundary,
746
- collisionPadding,
747
- arrowPadding,
748
- sticky,
749
- hideWhenDetached,
750
- children: /* @__PURE__ */ jsx(
751
- motion.div,
752
- {
753
- "data-slot": "dropdown-menu-content",
754
- initial: { opacity: 0, scale: 0.95 },
755
- animate: { opacity: 1, scale: 1 },
756
- exit: { opacity: 0, scale: 0.95 },
757
- transition,
758
- style: { willChange: "opacity, transform", ...style },
759
- ...props
760
- },
761
- "dropdown-menu-content"
762
- )
763
- }
764
- ) }) });
765
- }
766
- function DropdownMenuHighlightItem(props) {
767
- return /* @__PURE__ */ jsx(HighlightItem, { "data-slot": "dropdown-menu-highlight-item", ...props });
768
- }
769
- function DropdownMenuItem({
770
- disabled,
771
- onSelect,
772
- textValue,
773
- ...props
774
- }) {
775
- const { setHighlightedValue } = useDropdownMenu();
776
- const [, highlightedRef] = useDataState(
777
- "highlighted",
778
- void 0,
779
- (value) => {
780
- if (value === true) {
781
- const el = highlightedRef.current;
782
- const v = el?.dataset.value || el?.id || null;
783
- if (v) setHighlightedValue(v);
784
- }
785
- }
786
- );
787
- return /* @__PURE__ */ jsx(
788
- DropdownMenu$1.Item,
789
- {
790
- ref: highlightedRef,
791
- disabled,
792
- onSelect,
793
- textValue,
794
- asChild: true,
795
- children: /* @__PURE__ */ jsx(
796
- motion.div,
797
- {
798
- "data-slot": "dropdown-menu-item",
799
- "data-disabled": disabled,
800
- ...props
801
- }
802
- )
803
- }
804
- );
805
- }
806
- function DropdownMenuCheckboxItem({
807
- checked,
808
- onCheckedChange,
809
- disabled,
810
- onSelect,
811
- textValue,
812
- ...props
813
- }) {
814
- const { setHighlightedValue } = useDropdownMenu();
815
- const [, highlightedRef] = useDataState(
816
- "highlighted",
817
- void 0,
818
- (value) => {
819
- if (value === true) {
820
- const el = highlightedRef.current;
821
- const v = el?.dataset.value || el?.id || null;
822
- if (v) setHighlightedValue(v);
823
- }
824
- }
825
- );
826
- return /* @__PURE__ */ jsx(
827
- DropdownMenu$1.CheckboxItem,
828
- {
829
- ref: highlightedRef,
830
- checked,
831
- onCheckedChange,
832
- disabled,
833
- onSelect,
834
- textValue,
835
- asChild: true,
836
- children: /* @__PURE__ */ jsx(
837
- motion.div,
838
- {
839
- "data-slot": "dropdown-menu-checkbox-item",
840
- "data-disabled": disabled,
841
- ...props
842
- }
843
- )
844
- }
845
- );
846
- }
847
- function DropdownMenuRadioItem({
848
- value,
849
- disabled,
850
- onSelect,
851
- textValue,
852
- ...props
853
- }) {
854
- const { setHighlightedValue } = useDropdownMenu();
855
- const [, highlightedRef] = useDataState(
856
- "highlighted",
857
- void 0,
858
- (value2) => {
859
- if (value2 === true) {
860
- const el = highlightedRef.current;
861
- const v = el?.dataset.value || el?.id || null;
862
- if (v) setHighlightedValue(v);
863
- }
864
- }
865
- );
866
- return /* @__PURE__ */ jsx(
867
- DropdownMenu$1.RadioItem,
868
- {
869
- ref: highlightedRef,
870
- value,
871
- disabled,
872
- onSelect,
873
- textValue,
874
- asChild: true,
875
- children: /* @__PURE__ */ jsx(
876
- motion.div,
877
- {
878
- "data-slot": "dropdown-menu-radio-item",
879
- "data-disabled": disabled,
880
- ...props
881
- }
882
- )
883
- }
884
- );
885
- }
886
- function DropdownMenuLabel(props) {
887
- return /* @__PURE__ */ jsx(DropdownMenu$1.Label, { "data-slot": "dropdown-menu-label", ...props });
888
- }
889
- function DropdownMenuSeparator(props) {
890
- return /* @__PURE__ */ jsx(
891
- DropdownMenu$1.Separator,
892
- {
893
- "data-slot": "dropdown-menu-separator",
894
- ...props
895
- }
896
- );
897
- }
898
- function DropdownMenuShortcut(props) {
899
- return /* @__PURE__ */ jsx("span", { "data-slot": "dropdown-menu-shortcut", ...props });
900
- }
901
- function DropdownMenuItemIndicator(props) {
902
- return /* @__PURE__ */ jsx(
903
- DropdownMenu$1.ItemIndicator,
904
- {
905
- "data-slot": "dropdown-menu-item-indicator",
906
- asChild: true,
907
- children: /* @__PURE__ */ jsx(motion.div, { ...props })
908
- }
909
- );
910
- }
911
- function DropdownMenu2(props) {
912
- return /* @__PURE__ */ jsx(DropdownMenu, { ...props });
913
- }
914
- function DropdownMenuTrigger2(props) {
915
- return /* @__PURE__ */ jsx(DropdownMenuTrigger, { ...props });
916
- }
917
- function DropdownMenuContent2({
918
- sideOffset = 4,
919
- className,
920
- children,
921
- ...props
922
- }) {
923
- return /* @__PURE__ */ jsx(
924
- DropdownMenuContent,
925
- {
926
- sideOffset,
927
- className: cn(
928
- "bg-popover text-popover-foreground z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] max-w-xs origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-2xl border px-1 py-1.5 shadow-lg outline-none will-change-[opacity,transform] select-none",
929
- className
930
- ),
931
- ...props,
932
- children: /* @__PURE__ */ jsx(DropdownMenuHighlight, { className: "absolute inset-0 bg-accent z-0 rounded-sm", children })
933
- }
934
- );
935
- }
936
- function DropdownMenuGroup2({ ...props }) {
937
- return /* @__PURE__ */ jsx(DropdownMenuGroup, { ...props });
938
- }
939
- function DropdownMenuItem2({
940
- className,
941
- inset,
942
- variant = "default",
943
- disabled,
944
- ...props
945
- }) {
946
- return /* @__PURE__ */ jsx(
947
- DropdownMenuHighlightItem,
948
- {
949
- activeClassName: variant === "destructive" ? "bg-destructive/10 dark:bg-destructive/20" : "",
950
- disabled,
951
- children: /* @__PURE__ */ jsx(
952
- DropdownMenuItem,
953
- {
954
- disabled,
955
- "data-inset": inset,
956
- "data-variant": variant,
957
- className: cn(
958
- "focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
959
- className
960
- ),
961
- ...props
962
- }
963
- )
964
- }
965
- );
966
- }
967
- function DropdownMenuCheckboxItem2({
968
- className,
969
- children,
970
- checked,
971
- disabled,
972
- ...props
973
- }) {
974
- return /* @__PURE__ */ jsx(DropdownMenuHighlightItem, { disabled, children: /* @__PURE__ */ jsxs(
975
- DropdownMenuCheckboxItem,
976
- {
977
- disabled,
978
- className: cn(
979
- "focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
980
- className
981
- ),
982
- checked,
983
- ...props,
984
- children: [
985
- /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(
986
- DropdownMenuItemIndicator,
987
- {
988
- initial: { opacity: 0, scale: 0.5 },
989
- animate: { opacity: 1, scale: 1 },
990
- children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" })
991
- }
992
- ) }),
993
- children
994
- ]
995
- }
996
- ) });
997
- }
998
- function DropdownMenuRadioGroup2(props) {
999
- return /* @__PURE__ */ jsx(DropdownMenuRadioGroup, { ...props });
1000
- }
1001
- function DropdownMenuRadioItem2({
1002
- className,
1003
- children,
1004
- disabled,
1005
- ...props
1006
- }) {
1007
- return /* @__PURE__ */ jsx(DropdownMenuHighlightItem, { disabled, children: /* @__PURE__ */ jsxs(
1008
- DropdownMenuRadioItem,
1009
- {
1010
- disabled,
1011
- className: cn(
1012
- "focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
1013
- className
1014
- ),
1015
- ...props,
1016
- children: [
1017
- /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuItemIndicator, { layoutId: "dropdown-menu-item-indicator-radio", children: /* @__PURE__ */ jsx(CircleIcon, { className: "size-2 fill-current" }) }) }),
1018
- children
1019
- ]
1020
- }
1021
- ) });
1022
- }
1023
- function DropdownMenuLabel2({
1024
- className,
1025
- inset,
1026
- ...props
1027
- }) {
1028
- return /* @__PURE__ */ jsx(
1029
- DropdownMenuLabel,
1030
- {
1031
- "data-inset": inset,
1032
- className: cn(
1033
- "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
1034
- className
1035
- ),
1036
- ...props
1037
- }
1038
- );
1039
- }
1040
- function DropdownMenuSeparator2({
1041
- className,
1042
- ...props
1043
- }) {
1044
- return /* @__PURE__ */ jsx(
1045
- DropdownMenuSeparator,
1046
- {
1047
- className: cn("bg-border -mx-1 my-1 h-px", className),
1048
- ...props
1049
- }
1050
- );
1051
- }
1052
- function DropdownMenuShortcut2({
1053
- className,
1054
- ...props
1055
- }) {
1056
- return /* @__PURE__ */ jsx(
1057
- DropdownMenuShortcut,
1058
- {
1059
- className: cn(
1060
- "text-muted-foreground ml-auto text-xs tracking-widest",
1061
- className
1062
- ),
1063
- ...props
1064
- }
1065
- );
1066
- }
1067
- function DropdownMenuSub2(props) {
1068
- return /* @__PURE__ */ jsx(DropdownMenuSub, { ...props });
1069
- }
1070
- function DropdownMenuSubTrigger2({
1071
- disabled,
1072
- className,
1073
- inset,
1074
- children,
1075
- ...props
1076
- }) {
1077
- return /* @__PURE__ */ jsx(DropdownMenuHighlightItem, { disabled, children: /* @__PURE__ */ jsxs(
1078
- DropdownMenuSubTrigger,
1079
- {
1080
- disabled,
1081
- "data-inset": inset,
1082
- className: cn(
1083
- "focus:text-accent-foreground data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
1084
- "data-[state=open]:[&_[data-slot=chevron]]:rotate-90 [&_[data-slot=chevron]]:transition-transform [&_[data-slot=chevron]]:duration-300 [&_[data-slot=chevron]]:ease-in-out",
1085
- className
1086
- ),
1087
- ...props,
1088
- children: [
1089
- children,
1090
- /* @__PURE__ */ jsx(ChevronRightIcon, { "data-slot": "chevron", className: "ml-auto size-4" })
1091
- ]
1092
- }
1093
- ) });
1094
- }
1095
- function DropdownMenuSubContent2({
1096
- className,
1097
- ...props
1098
- }) {
1099
- return /* @__PURE__ */ jsx(
1100
- DropdownMenuSubContent,
1101
- {
1102
- className: cn(
1103
- "bg-popover text-popover-foreground z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg outline-none",
1104
- className
1105
- ),
1106
- ...props
1107
- }
1108
- );
1109
- }
1110
-
1111
- // src/components/list/list.props.ts
1112
- var LIST_CLASS_NAMES = {
1113
- /** Flex column wrapping every group. Standard (`role="list"`) rendering only. */
1114
- container: "espd-list",
1115
- /** Heading rendered for a {@link ListGroup.label}. */
1116
- groupLabel: "espd-list-group-label",
1117
- /** Every row rendered from a {@link ListItem}, in both roles and at any nesting depth. */
1118
- item: "espd-list-item",
1119
- /** Wrapper around a raw `ReactNode` passed in {@link ListGroup.items}. */
1120
- customItem: "espd-list-custom-item",
1121
- /** Divider drawn between groups. */
1122
- separator: "espd-list-separator"
1123
- };
1124
- var listItemBase = "min-h-[var(--menu-item-height)] w-full scroll-mt-[calc(var(--spacing)*1.5)] px-[calc(var(--spacing)*2.5)] py-[calc(var(--spacing)*1.5)] my-[calc(var(--spacing)*0.5)] text-sm leading-[var(--tw-leading,var(--text-sm--line-height))] select-none rounded-[10px] items-center flex relative no-underline";
1125
- var listItemInteractive = "w-full text-left cursor-pointer hover:bg-accent focus:bg-accent focus:outline-none";
1126
- var presetColorStyles = {
1127
- primary: "text-primary",
1128
- secondary: "text-secondary-foreground",
1129
- error: "text-error",
1130
- info: "text-info",
1131
- success: "text-success",
1132
- warning: "text-warning",
1133
- disabled: "text-disabled",
1134
- gray: "text-gray",
1135
- mist: "text-mist-foreground"
1136
- };
1137
- var sizeStyles = {
1138
- sm: "text-xs py-1 px-2",
1139
- default: "text-sm py-1.5 px-2",
1140
- lg: "text-base py-2 px-3"
1141
- };
1142
- function isListItem(item) {
1143
- return typeof item === "object" && item !== null && !React__default.isValidElement(item) && "id" in item && "label" in item && typeof item.id === "string" && typeof item.label === "string";
1144
- }
1145
- function getItemStyles(item) {
1146
- const color = item.color || "default";
1147
- const size = item.size || "default";
1148
- const isSelected = item.isSelected || false;
1149
- if (color === "default" || isPresetColor(color) && presetColorStyles[color]) {
1150
- return {
1151
- className: cn(
1152
- LIST_CLASS_NAMES.item,
1153
- listItemBase,
1154
- color === "default" ? "" : presetColorStyles[color],
1155
- sizeStyles[size],
1156
- isSelected && "bg-accent font-medium"
1157
- )
1158
- };
1159
- }
1160
- const resolved = resolveColor(color, "text");
1161
- return {
1162
- className: cn(
1163
- LIST_CLASS_NAMES.item,
1164
- listItemBase,
1165
- sizeStyles[size],
1166
- isSelected && "bg-accent font-medium"
1167
- ),
1168
- style: resolved.style
1169
- };
1170
- }
1171
- function getItemClassName(item, itemClassName) {
1172
- return cn(getItemStyles(item).className, itemClassName, item.className);
1173
- }
1174
- function getInteractiveItemClassName(item, itemClassName) {
1175
- return cn(
1176
- getItemStyles(item).className,
1177
- listItemInteractive,
1178
- itemClassName,
1179
- item.className
1180
- );
1181
- }
1182
- function renderItemContent(item) {
1183
- return /* @__PURE__ */ jsxs(Fragment, { children: [
1184
- item.startIcon && /* @__PURE__ */ jsx("span", { className: "mr-2 flex-shrink-0", children: item.startIcon }),
1185
- /* @__PURE__ */ jsx("span", { className: "flex-1", children: item.label }),
1186
- item.endIcon && /* @__PURE__ */ jsx("span", { className: "ml-2 flex-shrink-0", children: item.endIcon })
1187
- ] });
1188
- }
1189
- function StandardLeafItem({
1190
- item,
1191
- itemClassName,
1192
- linkComponent: LinkComponent
1193
- }) {
1194
- const itemStyles = getItemStyles(item);
1195
- const className = getInteractiveItemClassName(item, itemClassName);
1196
- if (item.href && LinkComponent) {
1197
- return /* @__PURE__ */ jsx(
1198
- LinkComponent,
1199
- {
1200
- to: item.href,
1201
- className,
1202
- style: itemStyles.style,
1203
- "aria-current": item.isSelected ? "page" : void 0,
1204
- children: renderItemContent(item)
1205
- }
1206
- );
1207
- }
1208
- return /* @__PURE__ */ jsx(
1209
- "button",
1210
- {
1211
- type: "button",
1212
- className,
1213
- style: itemStyles.style,
1214
- onClick: item.onClick,
1215
- children: renderItemContent(item)
1216
- }
1217
- );
1218
- }
1219
- function StandardListItem({
1220
- item,
1221
- itemClassName,
1222
- linkComponent
1223
- }) {
1224
- const hasNestedItems = item.items && item.items.length > 0;
1225
- if (hasNestedItems) {
1226
- const itemStyles = getItemStyles(item);
1227
- return /* @__PURE__ */ jsxs(Collapsible, { className: "w-full", children: [
1228
- /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
1229
- "button",
1230
- {
1231
- type: "button",
1232
- className: cn("group", getInteractiveItemClassName(item, itemClassName)),
1233
- style: itemStyles.style,
1234
- children: [
1235
- /* @__PURE__ */ jsx("span", { className: "flex flex-1 items-center", children: renderItemContent(item) }),
1236
- /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-180" })
1237
- ]
1238
- }
1239
- ) }),
1240
- /* @__PURE__ */ jsx(CollapsibleContent, { className: "w-full", children: /* @__PURE__ */ jsx("div", { className: "pl-4 w-full", children: item.items?.map((subItem) => /* @__PURE__ */ jsx(
1241
- StandardLeafItem,
1242
- {
1243
- item: subItem,
1244
- itemClassName,
1245
- linkComponent
1246
- },
1247
- subItem.id
1248
- )) }) })
1249
- ] });
1250
- }
1251
- return /* @__PURE__ */ jsx(
1252
- StandardLeafItem,
1253
- {
1254
- item,
1255
- itemClassName,
1256
- linkComponent
1257
- }
1258
- );
1259
- }
1260
- function DropdownLeafItem({
1261
- item,
1262
- itemClassName,
1263
- linkComponent: LinkComponent
1264
- }) {
1265
- const itemStyles = getItemStyles(item);
1266
- if (item.href && LinkComponent) {
1267
- return (
1268
- // The row's padding lives on the link so the whole row is the click/context target;
1269
- // the menu item itself is only the focus/keyboard wrapper.
1270
- /* @__PURE__ */ jsx(DropdownMenuItem2, { className: "p-0", onClick: item.onClick, children: /* @__PURE__ */ jsx(
1271
- LinkComponent,
1272
- {
1273
- to: item.href,
1274
- className: cn(
1275
- "gap-1.5 cursor-pointer",
1276
- getItemClassName(item, itemClassName)
1277
- ),
1278
- style: itemStyles.style,
1279
- "aria-current": item.isSelected ? "page" : void 0,
1280
- children: renderItemContent(item)
1281
- }
1282
- ) })
1283
- );
1284
- }
1285
- return /* @__PURE__ */ jsx(
1286
- DropdownMenuItem2,
1287
- {
1288
- className: cn("gap-1.5", getItemClassName(item, itemClassName)),
1289
- style: itemStyles.style,
1290
- onClick: item.onClick,
1291
- children: renderItemContent(item)
1292
- }
1293
- );
1294
- }
1295
- function DropdownListItem({
1296
- item,
1297
- itemClassName,
1298
- linkComponent
1299
- }) {
1300
- const hasNestedItems = item.items && item.items.length > 0;
1301
- if (hasNestedItems) {
1302
- const itemStyles = getItemStyles(item);
1303
- return /* @__PURE__ */ jsxs(DropdownMenuSub2, { children: [
1304
- /* @__PURE__ */ jsx(
1305
- DropdownMenuSubTrigger2,
1306
- {
1307
- className: cn("gap-1.5", getItemClassName(item, itemClassName)),
1308
- style: itemStyles.style,
1309
- children: renderItemContent(item)
1310
- }
1311
- ),
1312
- /* @__PURE__ */ jsx(DropdownMenuSubContent2, { sideOffset: 4, className: "z-[60] min-w-[8rem]", children: item.items?.map((subItem) => /* @__PURE__ */ jsx(
1313
- DropdownLeafItem,
1314
- {
1315
- item: subItem,
1316
- itemClassName,
1317
- linkComponent
1318
- },
1319
- subItem.id
1320
- )) })
1321
- ] });
1322
- }
1323
- return /* @__PURE__ */ jsx(
1324
- DropdownLeafItem,
1325
- {
1326
- item,
1327
- itemClassName,
1328
- linkComponent
1329
- }
1330
- );
1331
- }
1332
- var groupLabelBase = "text-sm font-normal truncate overflow-ellipsis font-inter text-gray-400 flex items-center gap-2";
1333
- function List({
1334
- items,
1335
- role = "list",
1336
- showSeparators = true,
1337
- className,
1338
- itemClassName,
1339
- separatorClassName,
1340
- linkComponent
1341
- }) {
1342
- const shouldShowSeparators = showSeparators && items.length > 1;
1343
- const isDropdown = role === "dropdown-list";
1344
- const ItemComponent = isDropdown ? DropdownListItem : StandardListItem;
1345
- const Wrapper = isDropdown ? React__default.Fragment : ({ children }) => /* @__PURE__ */ jsx(
1346
- "div",
1347
- {
1348
- className: cn(LIST_CLASS_NAMES.container, "flex flex-col", className),
1349
- children
1350
- }
1351
- );
1352
- return /* @__PURE__ */ jsx(Wrapper, { children: items.map((group, groupIndex) => {
1353
- const isLastGroup = groupIndex === items.length - 1;
1354
- const labelContent = group.label && /* @__PURE__ */ jsxs(Fragment, { children: [
1355
- group.icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: group.icon }),
1356
- /* @__PURE__ */ jsx("span", { children: group.label })
1357
- ] });
1358
- const labelClassName = cn(
1359
- LIST_CLASS_NAMES.groupLabel,
1360
- groupLabelBase,
1361
- !isDropdown && "px-2.5 py-1.5",
1362
- group.labelClassName
1363
- );
1364
- return /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
1365
- group.label && (isDropdown ? /* @__PURE__ */ jsx(DropdownMenuLabel2, { className: labelClassName, children: labelContent }) : /* @__PURE__ */ jsx("div", { className: labelClassName, children: labelContent })),
1366
- group.items.map((item, index) => {
1367
- if (isListItem(item)) {
1368
- return /* @__PURE__ */ jsx(
1369
- ItemComponent,
1370
- {
1371
- item,
1372
- itemClassName,
1373
- linkComponent
1374
- },
1375
- item.id
1376
- );
1377
- } else {
1378
- return /* @__PURE__ */ jsx(
1379
- "div",
1380
- {
1381
- className: cn(
1382
- LIST_CLASS_NAMES.customItem,
1383
- "px-2.5 py-1.5",
1384
- itemClassName
1385
- ),
1386
- children: item
1387
- },
1388
- index
1389
- );
1390
- }
1391
- }),
1392
- shouldShowSeparators && !isLastGroup && (isDropdown ? /* @__PURE__ */ jsx(
1393
- DropdownMenuSeparator2,
1394
- {
1395
- className: cn(LIST_CLASS_NAMES.separator, separatorClassName)
1396
- }
1397
- ) : /* @__PURE__ */ jsx(
1398
- "hr",
1399
- {
1400
- className: cn(
1401
- LIST_CLASS_NAMES.separator,
1402
- "my-1 border-border",
1403
- separatorClassName
1404
- )
1405
- }
1406
- ))
1407
- ] }, group.id);
1408
- }) });
1409
- }
1410
- function mergeRefs(...refs) {
1411
- return (node) => {
1412
- refs.forEach((ref) => {
1413
- if (!ref) return;
1414
- if (typeof ref === "function") {
1415
- ref(node);
1416
- } else {
1417
- ref.current = node;
1418
- }
1419
- });
1420
- };
1421
- }
1422
- function mergeProps(childProps, slotProps) {
1423
- const merged = { ...childProps, ...slotProps };
1424
- if (childProps.className || slotProps.className) {
1425
- merged.className = cn(
1426
- childProps.className,
1427
- slotProps.className
1428
- );
1429
- }
1430
- if (childProps.style || slotProps.style) {
1431
- merged.style = {
1432
- ...childProps.style,
1433
- ...slotProps.style
1434
- };
1435
- }
1436
- return merged;
1437
- }
1438
- function Slot({
1439
- children,
1440
- ref,
1441
- ...props
1442
- }) {
1443
- const isAlreadyMotion = typeof children.type === "object" && children.type !== null && isMotionComponent(children.type);
1444
- const Base = React.useMemo(
1445
- () => isAlreadyMotion ? children.type : motion.create(children.type),
1446
- [isAlreadyMotion, children.type]
1447
- );
1448
- if (!React.isValidElement(children)) return null;
1449
- const { ref: childRef, ...childProps } = children.props;
1450
- const mergedProps = mergeProps(childProps, props);
1451
- return /* @__PURE__ */ jsx(Base, { ...mergedProps, ref: mergeRefs(childRef, ref) });
1452
- }
1453
- var [GlobalTooltipProvider, useGlobalTooltip] = getStrictContext("GlobalTooltipProvider");
1454
- var [LocalTooltipProvider, useTooltip] = getStrictContext(
1455
- "LocalTooltipProvider"
1456
- );
1457
- function getResolvedSide(placement) {
1458
- if (placement.includes("-")) {
1459
- return placement.split("-")[0];
1460
- }
1461
- return placement;
1462
- }
1463
- function initialFromSide(side) {
1464
- if (side === "top") return { y: 15 };
1465
- if (side === "bottom") return { y: -15 };
1466
- if (side === "left") return { x: 15 };
1467
- return { x: -15 };
1468
- }
1469
- function TooltipProvider({
1470
- children,
1471
- id,
1472
- openDelay = 700,
1473
- closeDelay = 300,
1474
- transition = { type: "spring", stiffness: 300, damping: 35 }
1475
- }) {
1476
- const globalId = React.useId();
1477
- const [currentTooltip, setCurrentTooltip] = React.useState(null);
1478
- const timeoutRef = React.useRef(null);
1479
- const lastCloseTimeRef = React.useRef(0);
1480
- const referenceElRef = React.useRef(null);
1481
- const showTooltip = React.useCallback(
1482
- (data) => {
1483
- if (timeoutRef.current) clearTimeout(timeoutRef.current);
1484
- if (currentTooltip !== null) {
1485
- setCurrentTooltip(data);
1486
- return;
1487
- }
1488
- const now = Date.now();
1489
- const delay = now - lastCloseTimeRef.current < closeDelay ? 0 : openDelay;
1490
- timeoutRef.current = window.setTimeout(
1491
- () => setCurrentTooltip(data),
1492
- delay
1493
- );
1494
- },
1495
- [openDelay, closeDelay, currentTooltip]
1496
- );
1497
- const hideTooltip = React.useCallback(() => {
1498
- if (timeoutRef.current) clearTimeout(timeoutRef.current);
1499
- timeoutRef.current = window.setTimeout(() => {
1500
- setCurrentTooltip(null);
1501
- lastCloseTimeRef.current = Date.now();
1502
- }, closeDelay);
1503
- }, [closeDelay]);
1504
- const hideImmediate = React.useCallback(() => {
1505
- if (timeoutRef.current) clearTimeout(timeoutRef.current);
1506
- setCurrentTooltip(null);
1507
- lastCloseTimeRef.current = Date.now();
1508
- }, []);
1509
- const setReferenceEl = React.useCallback((el) => {
1510
- referenceElRef.current = el;
1511
- }, []);
1512
- React.useEffect(() => {
1513
- const onKeyDown = (e) => {
1514
- if (e.key === "Escape") hideImmediate();
1515
- };
1516
- window.addEventListener("keydown", onKeyDown, true);
1517
- window.addEventListener("scroll", hideImmediate, true);
1518
- window.addEventListener("resize", hideImmediate, true);
1519
- return () => {
1520
- window.removeEventListener("keydown", onKeyDown, true);
1521
- window.removeEventListener("scroll", hideImmediate, true);
1522
- window.removeEventListener("resize", hideImmediate, true);
1523
- };
1524
- }, [hideImmediate]);
1525
- return /* @__PURE__ */ jsxs(
1526
- GlobalTooltipProvider,
1527
- {
1528
- value: {
1529
- showTooltip,
1530
- hideTooltip,
1531
- hideImmediate,
1532
- currentTooltip,
1533
- transition,
1534
- globalId: id ?? globalId,
1535
- setReferenceEl,
1536
- referenceElRef
1537
- },
1538
- children: [
1539
- /* @__PURE__ */ jsx(LayoutGroup, { children }),
1540
- /* @__PURE__ */ jsx(TooltipOverlay, {})
1541
- ]
1542
- }
1543
- );
1544
- }
1545
- var [RenderedTooltipProvider, useRenderedTooltip] = getStrictContext("RenderedTooltipContext");
1546
- var [FloatingProvider, useFloatingContext] = getStrictContext("FloatingContext");
1547
- var MotionTooltipArrow = motion.create(FloatingArrow);
1548
- function TooltipArrow({
1549
- ref,
1550
- withTransition = true,
1551
- ...props
1552
- }) {
1553
- const { side, align, open } = useRenderedTooltip();
1554
- const { context, arrowRef } = useFloatingContext();
1555
- const { transition, globalId } = useGlobalTooltip();
1556
- React.useImperativeHandle(ref, () => arrowRef.current);
1557
- const deg = { top: 0, right: 90, bottom: 180, left: -90 }[side];
1558
- return /* @__PURE__ */ jsx(
1559
- MotionTooltipArrow,
1560
- {
1561
- ref: arrowRef,
1562
- context,
1563
- "data-state": open ? "open" : "closed",
1564
- "data-side": side,
1565
- "data-align": align,
1566
- "data-slot": "tooltip-arrow",
1567
- style: { rotate: deg },
1568
- layoutId: withTransition ? `tooltip-arrow-${globalId}` : void 0,
1569
- transition: withTransition ? transition : void 0,
1570
- ...props
1571
- }
1572
- );
1573
- }
1574
- function TooltipPortal(props) {
1575
- return /* @__PURE__ */ jsx(FloatingPortal, { ...props });
1576
- }
1577
- function TooltipOverlay() {
1578
- const { currentTooltip, transition, globalId, referenceElRef } = useGlobalTooltip();
1579
- const [rendered, setRendered] = React.useState({ data: null, open: false });
1580
- const arrowRef = React.useRef(null);
1581
- const side = rendered.data?.side ?? "top";
1582
- const align = rendered.data?.align ?? "center";
1583
- const { refs, x, y, strategy, context, update } = useFloating({
1584
- placement: align === "center" ? side : `${side}-${align}`,
1585
- whileElementsMounted: autoUpdate,
1586
- middleware: [
1587
- offset({
1588
- mainAxis: rendered.data?.sideOffset ?? 0,
1589
- crossAxis: rendered.data?.alignOffset ?? 0
1590
- }),
1591
- flip(),
1592
- shift({ padding: 8 }),
1593
- arrow({ element: arrowRef })
1594
- ]
1595
- });
1596
- React.useEffect(() => {
1597
- if (currentTooltip) {
1598
- setRendered({ data: currentTooltip, open: true });
1599
- } else {
1600
- setRendered((p) => p.data ? { ...p, open: false } : p);
1601
- }
1602
- }, [currentTooltip]);
1603
- React.useLayoutEffect(() => {
1604
- if (referenceElRef.current) {
1605
- refs.setReference(referenceElRef.current);
1606
- update();
1607
- }
1608
- }, [referenceElRef, refs, update, rendered.data]);
1609
- const ready = x != null && y != null;
1610
- const Component = rendered.data?.contentAsChild ? Slot : motion.div;
1611
- const resolvedSide = getResolvedSide(context.placement);
1612
- return /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: rendered.data && ready && /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(
1613
- "div",
1614
- {
1615
- ref: refs.setFloating,
1616
- "data-slot": "tooltip-overlay",
1617
- "data-side": resolvedSide,
1618
- "data-align": rendered.data.align,
1619
- "data-state": rendered.open ? "open" : "closed",
1620
- style: {
1621
- position: strategy,
1622
- top: 0,
1623
- left: 0,
1624
- zIndex: 50,
1625
- transform: `translate3d(${x}px, ${y}px, 0)`
1626
- },
1627
- children: /* @__PURE__ */ jsx(FloatingProvider, { value: { context, arrowRef }, children: /* @__PURE__ */ jsx(
1628
- RenderedTooltipProvider,
1629
- {
1630
- value: {
1631
- side: resolvedSide,
1632
- align: rendered.data.align,
1633
- open: rendered.open
1634
- },
1635
- children: /* @__PURE__ */ jsx(
1636
- Component,
1637
- {
1638
- "data-slot": "tooltip-content",
1639
- "data-side": resolvedSide,
1640
- "data-align": rendered.data.align,
1641
- "data-state": rendered.open ? "open" : "closed",
1642
- layoutId: `tooltip-content-${globalId}`,
1643
- initial: {
1644
- opacity: 0,
1645
- scale: 0,
1646
- ...initialFromSide(rendered.data.side)
1647
- },
1648
- animate: rendered.open ? { opacity: 1, scale: 1, x: 0, y: 0 } : {
1649
- opacity: 0,
1650
- scale: 0,
1651
- ...initialFromSide(rendered.data.side)
1652
- },
1653
- exit: {
1654
- opacity: 0,
1655
- scale: 0,
1656
- ...initialFromSide(rendered.data.side)
1657
- },
1658
- onAnimationComplete: () => {
1659
- if (!rendered.open)
1660
- setRendered({ data: null, open: false });
1661
- },
1662
- transition,
1663
- ...rendered.data.contentProps,
1664
- style: {
1665
- position: "relative",
1666
- ...rendered.data.contentProps?.style || {}
1667
- }
1668
- }
1669
- )
1670
- }
1671
- ) })
1672
- }
1673
- ) }) });
1674
- }
1675
- function Tooltip({
1676
- children,
1677
- side = "top",
1678
- sideOffset = 0,
1679
- align = "center",
1680
- alignOffset = 0
1681
- }) {
1682
- const id = React.useId();
1683
- const [props, setProps] = React.useState({});
1684
- const [asChild, setAsChild] = React.useState(false);
1685
- return /* @__PURE__ */ jsx(
1686
- LocalTooltipProvider,
1687
- {
1688
- value: {
1689
- props,
1690
- setProps,
1691
- asChild,
1692
- setAsChild,
1693
- side,
1694
- sideOffset,
1695
- align,
1696
- alignOffset,
1697
- id
1698
- },
1699
- children
1700
- }
1701
- );
1702
- }
1703
- function shallowEqualWithoutChildren(a, b) {
1704
- if (a === b) return true;
1705
- if (!a || !b) return false;
1706
- const keysA = Object.keys(a).filter((k) => k !== "children");
1707
- const keysB = Object.keys(b).filter((k) => k !== "children");
1708
- if (keysA.length !== keysB.length) return false;
1709
- for (const k of keysA) {
1710
- if (a[k] !== b[k]) return false;
1711
- }
1712
- return true;
1713
- }
1714
- function TooltipContent({ asChild = false, ...props }) {
1715
- const { setProps, setAsChild } = useTooltip();
1716
- const lastPropsRef = React.useRef(
1717
- void 0
1718
- );
1719
- React.useEffect(() => {
1720
- if (!shallowEqualWithoutChildren(lastPropsRef.current, props)) {
1721
- lastPropsRef.current = props;
1722
- setProps(props);
1723
- }
1724
- }, [props, setProps]);
1725
- React.useEffect(() => {
1726
- setAsChild(asChild);
1727
- }, [asChild, setAsChild]);
1728
- return null;
1729
- }
1730
- function TooltipTrigger({
1731
- ref,
1732
- onMouseEnter,
1733
- onMouseLeave,
1734
- onFocus,
1735
- onBlur,
1736
- onPointerDown,
1737
- asChild = false,
1738
- ...props
1739
- }) {
1740
- const {
1741
- props: contentProps,
1742
- asChild: contentAsChild,
1743
- side,
1744
- sideOffset,
1745
- align,
1746
- alignOffset,
1747
- id
1748
- } = useTooltip();
1749
- const {
1750
- showTooltip,
1751
- hideTooltip,
1752
- hideImmediate,
1753
- currentTooltip,
1754
- setReferenceEl
1755
- } = useGlobalTooltip();
1756
- const triggerRef = React.useRef(null);
1757
- React.useImperativeHandle(ref, () => triggerRef.current);
1758
- const suppressNextFocusRef = React.useRef(false);
1759
- const handleOpen = React.useCallback(() => {
1760
- if (!triggerRef.current) return;
1761
- setReferenceEl(triggerRef.current);
1762
- const rect = triggerRef.current.getBoundingClientRect();
1763
- showTooltip({
1764
- contentProps,
1765
- contentAsChild,
1766
- rect,
1767
- side,
1768
- sideOffset,
1769
- align,
1770
- alignOffset,
1771
- id
1772
- });
1773
- }, [
1774
- showTooltip,
1775
- setReferenceEl,
1776
- contentProps,
1777
- contentAsChild,
1778
- side,
1779
- sideOffset,
1780
- align,
1781
- alignOffset,
1782
- id
1783
- ]);
1784
- const handlePointerDown = React.useCallback(
1785
- (e) => {
1786
- onPointerDown?.(e);
1787
- if (currentTooltip?.id === id) {
1788
- suppressNextFocusRef.current = true;
1789
- hideImmediate();
1790
- Promise.resolve().then(() => {
1791
- suppressNextFocusRef.current = false;
1792
- });
1793
- }
1794
- },
1795
- [onPointerDown, currentTooltip?.id, id, hideImmediate]
1796
- );
1797
- const handleMouseEnter = React.useCallback(
1798
- (e) => {
1799
- onMouseEnter?.(e);
1800
- handleOpen();
1801
- },
1802
- [handleOpen, onMouseEnter]
1803
- );
1804
- const handleMouseLeave = React.useCallback(
1805
- (e) => {
1806
- onMouseLeave?.(e);
1807
- hideTooltip();
1808
- },
1809
- [hideTooltip, onMouseLeave]
1810
- );
1811
- const handleFocus = React.useCallback(
1812
- (e) => {
1813
- onFocus?.(e);
1814
- if (suppressNextFocusRef.current) return;
1815
- handleOpen();
1816
- },
1817
- [handleOpen, onFocus]
1818
- );
1819
- const handleBlur = React.useCallback(
1820
- (e) => {
1821
- onBlur?.(e);
1822
- hideTooltip();
1823
- },
1824
- [hideTooltip, onBlur]
1825
- );
1826
- const Component = asChild ? Slot : motion.div;
1827
- return /* @__PURE__ */ jsx(
1828
- Component,
1829
- {
1830
- ref: triggerRef,
1831
- onPointerDown: handlePointerDown,
1832
- onMouseEnter: handleMouseEnter,
1833
- onMouseLeave: handleMouseLeave,
1834
- onFocus: handleFocus,
1835
- onBlur: handleBlur,
1836
- "data-slot": "tooltip-trigger",
1837
- "data-side": side,
1838
- "data-align": align,
1839
- "data-state": currentTooltip?.id === id ? "open" : "closed",
1840
- ...props
1841
- }
1842
- );
1843
- }
1844
- function TooltipProvider2({ openDelay = 0, ...props }) {
1845
- return /* @__PURE__ */ jsx(TooltipProvider, { openDelay, ...props });
1846
- }
1847
- function Tooltip2({ sideOffset = 10, ...props }) {
1848
- return /* @__PURE__ */ jsx(Tooltip, { sideOffset, ...props });
1849
- }
1850
- function TooltipTrigger2({ ...props }) {
1851
- return /* @__PURE__ */ jsx(TooltipTrigger, { ...props });
1852
- }
1853
- function TooltipContent2({
1854
- className,
1855
- children,
1856
- layout = "preserve-aspect",
1857
- ...props
1858
- }) {
1859
- return /* @__PURE__ */ jsxs(
1860
- TooltipContent,
1861
- {
1862
- className: cn(
1863
- "z-50 w-fit bg-tooltip text-tooltip-foreground rounded-md",
1864
- className
1865
- ),
1866
- ...props,
1867
- children: [
1868
- /* @__PURE__ */ jsx(motion5.div, { className: "overflow-hidden px-3 py-1.5 text-xs text-balance", children: /* @__PURE__ */ jsx(motion5.div, { layout, children }) }),
1869
- /* @__PURE__ */ jsx(
1870
- TooltipArrow,
1871
- {
1872
- className: "fill-tooltip size-3 data-[side='bottom']:translate-y-[1px] data-[side='right']:translate-x-[1px] data-[side='left']:translate-x-[-1px] data-[side='top']:translate-y-[-1px]",
1873
- tipRadius: 2
1874
- }
1875
- )
1876
- ]
1877
- }
1878
- );
1879
- }
1880
- function Tooltip3({
1881
- content,
1882
- children,
1883
- side,
1884
- sideOffset,
1885
- align,
1886
- alignOffset,
1887
- openDelay,
1888
- closeDelay
1889
- }) {
1890
- return /* @__PURE__ */ jsx(TooltipProvider2, { openDelay, closeDelay, children: /* @__PURE__ */ jsxs(
1891
- Tooltip2,
1892
- {
1893
- side,
1894
- sideOffset,
1895
- align,
1896
- alignOffset,
1897
- children: [
1898
- /* @__PURE__ */ jsx(TooltipTrigger2, { asChild: true, children }),
1899
- /* @__PURE__ */ jsx(TooltipContent2, { children: content })
1900
- ]
1901
- }
1902
- ) });
1903
- }
1904
- var presetButtonColors = {
1905
- primary: {
1906
- default: "bg-primary text-primary-foreground hover:bg-primary/90",
1907
- outline: "border-primary/30 text-primary hover:bg-primary/5 hover:border-primary",
1908
- ghost: "text-primary hover:bg-primary/10",
1909
- link: "text-primary"
1910
- },
1911
- secondary: {
1912
- default: "bg-secondary text-secondary-foreground hover:bg-secondary/90",
1913
- outline: "border-secondary/30 text-secondary hover:bg-secondary/5 hover:border-secondary",
1914
- ghost: "text-secondary hover:bg-secondary/10",
1915
- link: "text-secondary"
1916
- },
1917
- error: {
1918
- default: "bg-error text-error-foreground hover:bg-error/90",
1919
- outline: "border-error/30 text-error hover:bg-error/5 hover:border-error",
1920
- ghost: "text-error hover:bg-error/10",
1921
- link: "text-error"
1922
- },
1923
- info: {
1924
- default: "bg-info text-info-foreground hover:bg-info/90",
1925
- outline: "border-info/30 text-info hover:bg-info/5 hover:border-info",
1926
- ghost: "text-info hover:bg-info/10",
1927
- link: "text-info"
1928
- },
1929
- success: {
1930
- default: "bg-success text-success-foreground hover:bg-success/90",
1931
- outline: "border-success/30 text-success hover:bg-success/5 hover:border-success",
1932
- ghost: "text-success hover:bg-success/10",
1933
- link: "text-success"
1934
- },
1935
- warning: {
1936
- default: "bg-warning text-warning-foreground hover:bg-warning/90",
1937
- outline: "border-warning/30 text-warning hover:bg-warning/5 hover:border-warning",
1938
- ghost: "text-warning hover:bg-warning/10",
1939
- link: "text-warning"
1940
- },
1941
- disabled: {
1942
- default: "bg-disabled text-disabled-foreground",
1943
- outline: "border-disabled/30 text-disabled",
1944
- ghost: "text-disabled",
1945
- link: "text-disabled"
1946
- },
1947
- gray: {
1948
- default: "bg-gray text-gray-foreground hover:bg-gray/90",
1949
- outline: "border-input text-gray hover:bg-gray/5 hover:border-gray",
1950
- ghost: "text-gray hover:bg-gray/10",
1951
- link: "text-gray"
1952
- },
1953
- mist: {
1954
- default: "bg-mist text-mist-foreground hover:bg-mist/90",
1955
- outline: "border-mist-border text-mist-foreground hover:bg-mist hover:border-mist-border",
1956
- ghost: "text-mist-foreground hover:bg-mist",
1957
- link: "text-mist-foreground"
1958
- }
1959
- };
1960
- var primaryHoverRingClasses = "hover:ring-primary/90 focus-visible:ring-primary/90";
1961
- var presetRingColors = {
1962
- primary: "hover:ring-primary/90 focus-visible:ring-primary/90",
1963
- secondary: "hover:ring-secondary/90 focus-visible:ring-secondary/90",
1964
- error: "hover:ring-error/90 focus-visible:ring-error/90",
1965
- info: "hover:ring-info/90 focus-visible:ring-info/90",
1966
- success: "hover:ring-success/90 focus-visible:ring-success/90",
1967
- warning: "hover:ring-warning/90 focus-visible:ring-warning/90",
1968
- disabled: "hover:ring-disabled/90 focus-visible:ring-disabled/90",
1969
- gray: "hover:ring-gray/90 focus-visible:ring-gray/90",
1970
- mist: "hover:ring-mist-border focus-visible:ring-mist-border"
1971
- };
1972
- var presetFocusVisibleRingColors = {
1973
- primary: "focus-visible:ring-primary/90",
1974
- secondary: "focus-visible:ring-secondary/90",
1975
- error: "focus-visible:ring-error/90",
1976
- info: "focus-visible:ring-info/90",
1977
- success: "focus-visible:ring-success/90",
1978
- warning: "focus-visible:ring-warning/90",
1979
- disabled: "focus-visible:ring-disabled/90",
1980
- gray: "focus-visible:ring-gray/90",
1981
- mist: "focus-visible:ring-mist-border"
1982
- };
1983
- var iconOnlyLabelClasses = {
1984
- sm: "max-sm:sr-only",
1985
- md: "max-md:sr-only"
1986
- };
1987
- var iconOnlyButtonClasses = {
1988
- sm: {
1989
- square: "max-sm:w-9 max-sm:gap-0 max-sm:px-0",
1990
- squareLarge: "max-sm:w-10 max-sm:gap-0 max-sm:px-0",
1991
- withEndIcon: "max-sm:px-2"
1992
- },
1993
- md: {
1994
- square: "max-md:w-9 max-md:gap-0 max-md:px-0",
1995
- squareLarge: "max-md:w-10 max-md:gap-0 max-md:px-0",
1996
- withEndIcon: "max-md:px-2"
1997
- }
1998
- };
1999
- function getIconOnlyButtonClasses(breakpoint, size, hasEndIcon) {
2000
- if (!breakpoint || size === "icon") return void 0;
2001
- const classes = iconOnlyButtonClasses[breakpoint];
2002
- if (hasEndIcon) return classes.withEndIcon;
2003
- if (size === "lg") return classes.squareLarge;
2004
- return classes.square;
2005
- }
2006
- function ProgressBarOverlay() {
2007
- const [progress, setProgress] = React.useState(10);
2008
- React.useEffect(() => {
2009
- if (progress >= 90) return;
2010
- const timeout = setTimeout(() => {
2011
- const increment = Math.random() * 15 + 5;
2012
- setProgress((prev) => Math.min(prev + increment, 90));
2013
- }, Math.random() * 800 + 200);
2014
- return () => clearTimeout(timeout);
2015
- }, [progress]);
2016
- return /* @__PURE__ */ jsx(
2017
- motion$1.div,
2018
- {
2019
- className: "absolute inset-y-0 left-0 bg-black/20 pointer-events-none rounded-[inherit]",
2020
- initial: { width: "10%" },
2021
- animate: { width: `${progress}%` },
2022
- transition: { duration: 0.4, ease: "easeOut" }
2023
- }
2024
- );
2025
- }
2026
- var iconAnimateClasses = "transition-transform duration-200";
2027
- var Button2 = React.forwardRef(
2028
- ({
2029
- children,
2030
- color = "primary",
2031
- startIcon,
2032
- endIcon,
2033
- fullWidth = true,
2034
- loading = false,
2035
- loadingIndicator = "spinner",
2036
- animateStartIconOnHover = false,
2037
- animateEndIconOnHover = false,
2038
- hideRingOnHover = false,
2039
- usePrimaryColorOnHover = false,
2040
- tooltip,
2041
- iconOnlyBelow,
2042
- disabled,
2043
- className,
2044
- variant = "default",
2045
- size,
2046
- ...props
2047
- }, ref) => {
2048
- const needsGroup = animateStartIconOnHover || animateEndIconOnHover;
2049
- const isProgressBar = loading && loadingIndicator === "progress-bar";
2050
- const isSpinner = loading && loadingIndicator === "spinner";
2051
- const resolvedVariant = variant ?? "default";
2052
- const colorClasses2 = presetButtonColors[color]?.[resolvedVariant] ?? "";
2053
- const ringClasses = presetRingColors[color] ?? "";
2054
- const primaryHoverSurface = usePrimaryColorOnHover && (resolvedVariant === "outline" || resolvedVariant === "ghost");
2055
- const primaryHoverLink = usePrimaryColorOnHover && resolvedVariant === "link";
2056
- const label = iconOnlyBelow && children != null ? /* @__PURE__ */ jsx("span", { className: iconOnlyLabelClasses[iconOnlyBelow], children }) : children;
2057
- const wrapIcon = (icon, direction) => {
2058
- if (!icon) return null;
2059
- const animate = direction === "start" ? animateStartIconOnHover : animateEndIconOnHover;
2060
- if (!animate) return icon;
2061
- const translateClass = direction === "start" ? "group-hover:-translate-x-0.5" : "group-hover:translate-x-0.5";
2062
- return /* @__PURE__ */ jsx("span", { className: cn(iconAnimateClasses, translateClass), children: icon });
2063
- };
2064
- const button = /* @__PURE__ */ jsxs(
2065
- Button,
2066
- {
2067
- ref,
2068
- variant,
2069
- size,
2070
- disabled: disabled || loading,
2071
- className: cn(
2072
- colorClasses2,
2073
- primaryHoverSurface && "hover:bg-primary/10",
2074
- primaryHoverLink && "hover:text-primary",
2075
- fullWidth && size !== "icon" && "w-full",
2076
- needsGroup && "group",
2077
- isProgressBar && "relative overflow-hidden",
2078
- !hideRingOnHover && variant !== "link" && [
2079
- "ring-offset-background transition-all duration-300",
2080
- "hover:ring-2 hover:ring-offset-2 focus-visible:ring-2 focus-visible:ring-offset-2",
2081
- primaryHoverSurface ? primaryHoverRingClasses : ringClasses
2082
- ],
2083
- hideRingOnHover && variant !== "link" && [
2084
- "ring-offset-background transition-all duration-300",
2085
- "hover:ring-0 focus-visible:ring-2 focus-visible:ring-offset-2",
2086
- primaryHoverSurface ? "focus-visible:ring-primary/90" : presetFocusVisibleRingColors[color]
2087
- ],
2088
- variant === "link" && "hover:ring-0 focus-visible:underline",
2089
- "shadow-none",
2090
- getIconOnlyButtonClasses(iconOnlyBelow, size, Boolean(endIcon)),
2091
- className
2092
- ),
2093
- ...props,
2094
- children: [
2095
- isProgressBar && /* @__PURE__ */ jsx(ProgressBarOverlay, {}),
2096
- isProgressBar ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("span", { className: "relative z-10 inline-flex items-center gap-2", children: [
2097
- wrapIcon(startIcon, "start"),
2098
- label,
2099
- wrapIcon(endIcon, "end")
2100
- ] }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
2101
- isSpinner ? /* @__PURE__ */ jsx(LoaderCircle, { className: "animate-spin" }) : wrapIcon(startIcon, "start"),
2102
- label,
2103
- !isSpinner && wrapIcon(endIcon, "end")
2104
- ] })
2105
- ]
2106
- }
2107
- );
2108
- if (!tooltip) return button;
2109
- return /* @__PURE__ */ jsx(Tooltip3, { content: tooltip, children: button });
2110
- }
2111
- );
2112
- Button2.displayName = "Button";
2113
- var buttonVariants2 = cva(
2114
- "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
2115
- {
2116
- variants: {
2117
- variant: {
2118
- default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
2119
- destructive: "text-destructive [background:color-mix(in_oklab,var(--color-destructive)_15%,transparent)] hover:[background:color-mix(in_oklab,var(--color-destructive)_20%,transparent)]",
2120
- outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
2121
- secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
2122
- ghost: "hover:bg-accent hover:text-accent-foreground",
2123
- link: "text-primary underline-offset-4 hover:underline"
2124
- },
2125
- size: {
2126
- default: "h-9 px-4 py-2",
2127
- sm: "h-8 rounded-md px-3 text-xs",
2128
- lg: "h-10 rounded-md px-8",
2129
- icon: "h-9 w-9"
2130
- }
2131
- },
2132
- defaultVariants: {
2133
- variant: "default",
2134
- size: "default"
2135
- }
2136
- }
2137
- );
2138
- var Button3 = React.forwardRef(
2139
- ({ className, variant, size, asChild = false, type, ...props }, ref) => {
2140
- const Comp = asChild ? Slot$1 : "button";
2141
- return /* @__PURE__ */ jsx(
2142
- Comp,
2143
- {
2144
- className: cn(buttonVariants2({ variant, size, className })),
2145
- ref,
2146
- type: asChild ? type : type ?? "button",
2147
- ...props
2148
- }
2149
- );
2150
- }
2151
- );
2152
- Button3.displayName = "Button";
2153
- var craftButtonBgClasses = {
2154
- primary: "bg-primary text-primary-foreground",
2155
- secondary: "bg-secondary text-secondary-foreground",
2156
- error: "bg-error text-error-foreground",
2157
- info: "bg-info text-info-foreground",
2158
- success: "bg-success text-success-foreground",
2159
- warning: "bg-warning text-warning-foreground",
2160
- disabled: "bg-disabled text-disabled-foreground",
2161
- gray: "bg-gray text-gray-foreground",
2162
- mist: "bg-mist text-mist-foreground"
2163
- };
2164
- var craftButtonDarkBorderClasses = {
2165
- primary: "dark:hover:border-primary/30",
2166
- secondary: "dark:hover:border-secondary/30",
2167
- error: "dark:hover:border-error/30",
2168
- info: "dark:hover:border-info/30",
2169
- success: "dark:hover:border-success/30",
2170
- warning: "dark:hover:border-warning/30",
2171
- disabled: "dark:hover:border-disabled/30",
2172
- gray: "dark:hover:border-gray/30",
2173
- mist: "dark:hover:border-mist-border/30"
2174
- };
2175
- var craftIconColorClasses = {
2176
- primary: "text-primary group-hover:bg-primary group-hover:text-primary-foreground",
2177
- secondary: "text-secondary group-hover:bg-secondary group-hover:text-secondary-foreground",
2178
- error: "text-error group-hover:bg-error group-hover:text-error-foreground",
2179
- info: "text-info group-hover:bg-info group-hover:text-info-foreground",
2180
- success: "text-success group-hover:bg-success group-hover:text-success-foreground",
2181
- warning: "text-warning group-hover:bg-warning group-hover:text-warning-foreground",
2182
- disabled: "text-disabled group-hover:bg-disabled group-hover:text-disabled-foreground",
2183
- gray: "text-gray group-hover:bg-gray group-hover:text-gray-foreground",
2184
- mist: "text-mist-foreground group-hover:bg-mist group-hover:text-mist-foreground"
2185
- };
2186
- var CraftButtonContext = React.createContext({});
2187
- function CraftButtonLabel({ children, className }) {
2188
- return /* @__PURE__ */ jsx(
2189
- "span",
2190
- {
2191
- className: cn(
2192
- "group-hover:text-foreground relative z-2 transition-colors duration-500",
2193
- className
2194
- ),
2195
- children
2196
- }
2197
- );
2198
- }
2199
- function CraftButtonIcon({ children, className }) {
2200
- const { size, color = "primary" } = React.useContext(CraftButtonContext);
2201
- const iconSize = size === "lg" ? "size-6" : size === "sm" ? "size-4" : "size-5";
2202
- return /* @__PURE__ */ jsxs("span", { className: cn("relative z-1", iconSize, className), children: [
2203
- /* @__PURE__ */ jsx(
2204
- "span",
2205
- {
2206
- className: cn(
2207
- "bg-background absolute inset-0 -z-1 rounded-full transition-transform duration-500 group-hover:scale-[15]",
2208
- iconSize
2209
- )
2210
- }
2211
- ),
2212
- /* @__PURE__ */ jsx(
2213
- "span",
2214
- {
2215
- className: cn(
2216
- "bg-background relative z-2 flex items-center justify-center rounded-full transition-all duration-500",
2217
- craftIconColorClasses[color],
2218
- iconSize
2219
- ),
2220
- children
2221
- }
2222
- )
2223
- ] });
2224
- }
2225
- function CraftButton(props) {
2226
- const {
2227
- children,
2228
- size,
2229
- color = "primary",
2230
- asChild = false,
2231
- className,
2232
- ...rest
2233
- } = props;
2234
- return /* @__PURE__ */ jsx(CraftButtonContext.Provider, { value: { size, color }, children: /* @__PURE__ */ jsx(
2235
- Button3,
2236
- {
2237
- size,
2238
- asChild,
2239
- className: cn(
2240
- craftButtonBgClasses[color],
2241
- "group hover:bg-background relative cursor-pointer overflow-hidden rounded-full duration-500 hover:shadow-md dark:border dark:border-transparent",
2242
- craftButtonDarkBorderClasses[color],
2243
- className
2244
- ),
2245
- ...rest,
2246
- children
2247
- }
2248
- ) });
2249
- }
2250
- function InvertButton({ label, icon, ...props }) {
2251
- return /* @__PURE__ */ jsxs(CraftButton, { ...props, children: [
2252
- /* @__PURE__ */ jsx(CraftButtonLabel, { children: label }),
2253
- /* @__PURE__ */ jsx(CraftButtonIcon, { children: icon ?? /* @__PURE__ */ jsx(ArrowUpRightIcon, { className: "size-3 stroke-2 transition-transform duration-500 group-hover:rotate-45" }) })
2254
- ] });
2255
- }
2256
- var flashButtonBgClasses = {
2257
- primary: "bg-primary hover:bg-background text-primary-foreground",
2258
- secondary: "bg-secondary hover:bg-background text-secondary-foreground",
2259
- error: "bg-error hover:bg-background text-error-foreground",
2260
- info: "bg-info hover:bg-background text-info-foreground",
2261
- success: "bg-success hover:bg-background text-success-foreground",
2262
- warning: "bg-warning hover:bg-background text-warning-foreground",
2263
- disabled: "bg-disabled hover:bg-background text-disabled-foreground",
2264
- gray: "bg-gray hover:bg-background text-gray-foreground",
2265
- mist: "bg-mist hover:bg-background text-mist-foreground"
2266
- };
2267
- var flashOverlayClasses = {
2268
- primary: "bg-primary",
2269
- secondary: "bg-secondary",
2270
- error: "bg-error",
2271
- info: "bg-info",
2272
- success: "bg-success",
2273
- warning: "bg-warning",
2274
- disabled: "bg-disabled",
2275
- gray: "bg-gray",
2276
- mist: "bg-mist"
2277
- };
2278
- var flashButtonDarkBorderClasses = {
2279
- primary: "dark:hover:border-primary/30",
2280
- secondary: "dark:hover:border-secondary/30",
2281
- error: "dark:hover:border-error/30",
2282
- info: "dark:hover:border-info/30",
2283
- success: "dark:hover:border-success/30",
2284
- warning: "dark:hover:border-warning/30",
2285
- disabled: "dark:hover:border-disabled/30",
2286
- gray: "dark:hover:border-gray/30",
2287
- mist: "dark:hover:border-mist-border/30"
2288
- };
2289
- function FlashButton({
2290
- label,
2291
- icon,
2292
- iconPosition = "end",
2293
- hideIcon = false,
2294
- size,
2295
- color = "primary",
2296
- className,
2297
- onMouseEnter,
2298
- onMouseLeave,
2299
- ...props
2300
- }) {
2301
- const [scope, animate] = useAnimate();
2302
- const isHovering = React.useRef(false);
2303
- const flashLoop = React.useCallback(async () => {
2304
- while (isHovering.current && scope.current) {
2305
- const peakOpacity = 0.5 + Math.random() * 0.5;
2306
- try {
2307
- await animate(
2308
- scope.current,
2309
- { opacity: [0, peakOpacity, 0] },
2310
- { duration: 0.08 + Math.random() * 0.14, ease: "easeOut" }
2311
- );
2312
- } catch {
2313
- break;
2314
- }
2315
- if (!isHovering.current) break;
2316
- const pause = 60 + Math.random() * 250;
2317
- await new Promise((r) => setTimeout(r, pause));
2318
- }
2319
- }, [animate, scope]);
2320
- const handleMouseEnter = React.useCallback(
2321
- (e) => {
2322
- isHovering.current = true;
2323
- flashLoop();
2324
- onMouseEnter?.(e);
2325
- },
2326
- [flashLoop, onMouseEnter]
2327
- );
2328
- const handleMouseLeave = React.useCallback(
2329
- (e) => {
2330
- isHovering.current = false;
2331
- if (scope.current) {
2332
- animate(scope.current, { opacity: 0 }, { duration: 0.05 });
2333
- }
2334
- onMouseLeave?.(e);
2335
- },
2336
- [animate, scope, onMouseLeave]
2337
- );
2338
- const iconSize = size === "lg" ? "size-4" : size === "sm" ? "size-2.5" : "size-3";
2339
- return /* @__PURE__ */ jsxs(
2340
- Button3,
2341
- {
2342
- size,
2343
- className: cn(
2344
- flashButtonBgClasses[color],
2345
- "group relative cursor-pointer gap-1.5 overflow-hidden rounded-full transition-all duration-500 hover:shadow-md dark:border dark:border-transparent",
2346
- flashButtonDarkBorderClasses[color],
2347
- className
2348
- ),
2349
- onMouseEnter: handleMouseEnter,
2350
- onMouseLeave: handleMouseLeave,
2351
- ...props,
2352
- children: [
2353
- /* @__PURE__ */ jsx(
2354
- "span",
2355
- {
2356
- ref: scope,
2357
- className: cn(
2358
- "pointer-events-none absolute inset-0 z-0 rounded-[inherit] opacity-0",
2359
- flashOverlayClasses[color]
2360
- )
2361
- }
2362
- ),
2363
- !hideIcon && iconPosition === "start" && /* @__PURE__ */ jsx("span", { className: "relative z-[1]", children: icon ?? /* @__PURE__ */ jsx(
2364
- ZapIcon,
2365
- {
2366
- className: cn(
2367
- iconSize,
2368
- "stroke-2 transition-all duration-500 group-hover:scale-110 group-hover:text-foreground"
2369
- )
2370
- }
2371
- ) }),
2372
- /* @__PURE__ */ jsx("span", { className: "relative z-[1] transition-colors duration-500 group-hover:text-foreground", children: label }),
2373
- !hideIcon && iconPosition === "end" && /* @__PURE__ */ jsx("span", { className: "relative z-[1]", children: icon ?? /* @__PURE__ */ jsx(
2374
- ZapIcon,
2375
- {
2376
- className: cn(
2377
- iconSize,
2378
- "stroke-2 transition-all duration-500 group-hover:scale-110 group-hover:text-foreground"
2379
- )
2380
- }
2381
- ) })
2382
- ]
2383
- }
2384
- );
2385
- }
2386
- function Button4({
2387
- hoverScale = 1.05,
2388
- tapScale = 0.95,
2389
- asChild = false,
2390
- ...props
2391
- }) {
2392
- const Component = asChild ? Slot : motion.button;
2393
- return /* @__PURE__ */ jsx(
2394
- Component,
2395
- {
2396
- whileTap: { scale: tapScale },
2397
- whileHover: { scale: hoverScale },
2398
- ...props
2399
- }
2400
- );
2401
- }
2402
- var buttonVariants3 = cva(
2403
- "flex items-center justify-center rounded-md transition-[box-shadow,_color,_background-color,_border-color,_outline-color,_text-decoration-color,_fill,_stroke] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
2404
- {
2405
- variants: {
2406
- variant: {
2407
- default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
2408
- accent: "bg-accent text-accent-foreground shadow-xs hover:bg-accent/90",
2409
- destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
2410
- outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
2411
- secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
2412
- ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
2413
- link: "text-primary underline-offset-4 hover:underline"
2414
- },
2415
- size: {
2416
- default: "size-9",
2417
- sm: "size-8 rounded-md",
2418
- lg: "size-10 rounded-md"
2419
- }
2420
- },
2421
- defaultVariants: {
2422
- variant: "default",
2423
- size: "default"
2424
- }
2425
- }
2426
- );
2427
- function CopyButton({
2428
- className,
2429
- content,
2430
- copied,
2431
- onCopiedChange,
2432
- onClick,
2433
- variant,
2434
- size,
2435
- delay = 3e3,
2436
- ...props
2437
- }) {
2438
- const [isCopied, setIsCopied] = useControlledState({
2439
- value: copied,
2440
- onChange: onCopiedChange
2441
- });
2442
- const handleCopy = React.useCallback(
2443
- (e) => {
2444
- onClick?.(e);
2445
- if (copied) return;
2446
- if (content) {
2447
- navigator.clipboard.writeText(content).then(() => {
2448
- setIsCopied(true);
2449
- onCopiedChange?.(true, content);
2450
- setTimeout(() => {
2451
- setIsCopied(false);
2452
- onCopiedChange?.(false);
2453
- }, delay);
2454
- }).catch((error) => {
2455
- console.error("Error copying command", error);
2456
- });
2457
- }
2458
- },
2459
- [onClick, copied, content, setIsCopied, onCopiedChange, delay]
2460
- );
2461
- const Icon = isCopied ? CheckIcon : CopyIcon;
2462
- return /* @__PURE__ */ jsx(
2463
- Button4,
2464
- {
2465
- "data-slot": "copy-button",
2466
- className: cn(buttonVariants3({ variant, size, className })),
2467
- onClick: handleCopy,
2468
- ...props,
2469
- children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: /* @__PURE__ */ jsx(
2470
- motion.span,
2471
- {
2472
- "data-slot": "copy-button-icon",
2473
- initial: { scale: 0, opacity: 0.4, filter: "blur(4px)" },
2474
- animate: { scale: 1, opacity: 1, filter: "blur(0px)" },
2475
- exit: { scale: 0, opacity: 0.4, filter: "blur(4px)" },
2476
- transition: { duration: 0.25 },
2477
- children: /* @__PURE__ */ jsx(Icon, {})
2478
- },
2479
- isCopied ? "check" : "copy"
2480
- ) })
2481
- }
2482
- );
2483
- }
2484
- function hasHorizontalScrollBarChild(children) {
2485
- return React.Children.toArray(children).some(
2486
- (child) => React.isValidElement(child) && child.type === ScrollBar && child.props.orientation === "horizontal"
2487
- );
2488
- }
2489
- var ScrollArea = React.forwardRef(({ className, children, orientation = "vertical", ...props }, ref) => {
2490
- const scrollsX = orientation !== "vertical" || hasHorizontalScrollBarChild(children);
2491
- const scrollsY = orientation !== "horizontal";
2492
- return /* @__PURE__ */ jsxs(
2493
- ScrollAreaPrimitive.Root,
2494
- {
2495
- ref,
2496
- className: cn("relative overflow-hidden", className),
2497
- ...props,
2498
- children: [
2499
- /* @__PURE__ */ jsx(
2500
- ScrollAreaPrimitive.Viewport,
2501
- {
2502
- className: cn(
2503
- "h-full w-full rounded-[inherit]",
2504
- // Radix wraps children in an inline-styled `display: table` div that
2505
- // grows to fit its widest child. Without horizontal scrolling that
2506
- // only clips content, so make it a block at the viewport's width.
2507
- !scrollsX && "[&>div]:block!"
2508
- ),
2509
- children
2510
- }
2511
- ),
2512
- scrollsY && /* @__PURE__ */ jsx(ScrollBar, {}),
2513
- orientation !== "vertical" && /* @__PURE__ */ jsx(ScrollBar, { orientation: "horizontal" }),
2514
- /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
2515
- ]
2516
- }
2517
- );
2518
- });
2519
- ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
2520
- var ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
2521
- ScrollAreaPrimitive.ScrollAreaScrollbar,
2522
- {
2523
- ref,
2524
- orientation,
2525
- className: cn(
2526
- "flex touch-none select-none transition-colors",
2527
- orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
2528
- orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
2529
- className
2530
- ),
2531
- ...props,
2532
- children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
2533
- }
2534
- ));
2535
- ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
2536
- function Menu({
2537
- children,
2538
- trigger,
2539
- align = "end",
2540
- side = "bottom",
2541
- sideOffset = 4,
2542
- minWidth
2543
- }) {
2544
- return /* @__PURE__ */ jsxs(DropdownMenu2, { children: [
2545
- /* @__PURE__ */ jsx(DropdownMenuTrigger2, { asChild: true, children: trigger }),
2546
- /* @__PURE__ */ jsx(
2547
- DropdownMenuContent2,
2548
- {
2549
- align,
2550
- side,
2551
- sideOffset,
2552
- className: "",
2553
- style: minWidth ? {
2554
- minWidth: typeof minWidth === "number" ? `${minWidth}px` : minWidth
2555
- } : void 0,
2556
- children
2557
- }
2558
- )
2559
- ] });
2560
- }
2561
- var [SheetProvider, useSheet] = getStrictContext("SheetContext");
2562
- function Sheet(props) {
2563
- const [isOpen, setIsOpen] = useControlledState({
2564
- value: props.open,
2565
- defaultValue: props.defaultOpen,
2566
- onChange: props.onOpenChange
2567
- });
2568
- return /* @__PURE__ */ jsx(SheetProvider, { value: { isOpen, setIsOpen }, children: /* @__PURE__ */ jsx(
2569
- Dialog.Root,
2570
- {
2571
- "data-slot": "sheet",
2572
- ...props,
2573
- onOpenChange: setIsOpen
2574
- }
2575
- ) });
2576
- }
2577
- function SheetTrigger(props) {
2578
- return /* @__PURE__ */ jsx(Dialog.Trigger, { "data-slot": "sheet-trigger", ...props });
2579
- }
2580
- function SheetClose(props) {
2581
- return /* @__PURE__ */ jsx(Dialog.Close, { "data-slot": "sheet-close", ...props });
2582
- }
2583
- function SheetPortal(props) {
2584
- return /* @__PURE__ */ jsx(Dialog.Portal, { forceMount: true, "data-slot": "sheet-portal", ...props });
2585
- }
2586
- function SheetOverlay({
2587
- transition = { duration: 0.2, ease: "easeInOut" },
2588
- ...props
2589
- }) {
2590
- const { isOpen } = useSheet();
2591
- return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(Dialog.Overlay, { asChild: true, forceMount: true, children: /* @__PURE__ */ jsx(
2592
- motion.div,
2593
- {
2594
- "data-slot": "sheet-overlay",
2595
- initial: { opacity: 0, filter: "blur(4px)" },
2596
- animate: { opacity: 1, filter: "blur(0px)" },
2597
- exit: { opacity: 0, filter: "blur(4px)" },
2598
- transition,
2599
- ...props
2600
- },
2601
- "sheet-overlay"
2602
- ) }) });
2603
- }
2604
- function SheetContent({
2605
- side = "right",
2606
- transition = { type: "spring", stiffness: 150, damping: 22 },
2607
- style,
2608
- children,
2609
- ...props
2610
- }) {
2611
- const { isOpen } = useSheet();
2612
- const axis = side === "left" || side === "right" ? "x" : "y";
2613
- const offscreen = {
2614
- right: { x: "100%", opacity: 0 },
2615
- left: { x: "-100%", opacity: 0 },
2616
- top: { y: "-100%", opacity: 0 },
2617
- bottom: { y: "100%", opacity: 0 }
2618
- };
2619
- const positionStyle = {
2620
- right: { insetBlock: 0, right: 0 },
2621
- left: { insetBlock: 0, left: 0 },
2622
- top: { insetInline: 0, top: 0 },
2623
- bottom: { insetInline: 0, bottom: 0 }
2624
- };
2625
- return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(Dialog.Content, { asChild: true, forceMount: true, ...props, children: /* @__PURE__ */ jsx(
2626
- motion.div,
2627
- {
2628
- "data-slot": "sheet-content",
2629
- "data-side": side,
2630
- initial: offscreen[side],
2631
- animate: { [axis]: 0, opacity: 1 },
2632
- exit: offscreen[side],
2633
- style: {
2634
- position: "fixed",
2635
- ...positionStyle[side],
2636
- ...style
2637
- },
2638
- transition,
2639
- children
2640
- },
2641
- "sheet-content"
2642
- ) }) });
2643
- }
2644
- function SheetHeader(props) {
2645
- return /* @__PURE__ */ jsx("div", { "data-slot": "sheet-header", ...props });
2646
- }
2647
- function SheetFooter(props) {
2648
- return /* @__PURE__ */ jsx("div", { "data-slot": "sheet-footer", ...props });
2649
- }
2650
- function SheetTitle(props) {
2651
- return /* @__PURE__ */ jsx(Dialog.Title, { "data-slot": "sheet-title", ...props });
2652
- }
2653
- function SheetDescription(props) {
2654
- return /* @__PURE__ */ jsx(Dialog.Description, { "data-slot": "sheet-description", ...props });
2655
- }
2656
- var SheetFloatingContext = React.createContext(false);
2657
- var SheetDismissContext = React.createContext({
2658
- closeOnEscape: true,
2659
- closeOnOutsideClick: true
2660
- });
2661
- function Sheet2({
2662
- floating = false,
2663
- closeOnEscape = true,
2664
- closeOnOutsideClick = true,
2665
- ...props
2666
- }) {
2667
- const dismissBehavior = React.useMemo(
2668
- () => ({ closeOnEscape, closeOnOutsideClick }),
2669
- [closeOnEscape, closeOnOutsideClick]
2670
- );
2671
- return /* @__PURE__ */ jsx(SheetFloatingContext.Provider, { value: floating, children: /* @__PURE__ */ jsx(SheetDismissContext.Provider, { value: dismissBehavior, children: /* @__PURE__ */ jsx(Sheet, { ...props }) }) });
2672
- }
2673
- function SheetTrigger2(props) {
2674
- return /* @__PURE__ */ jsx(SheetTrigger, { ...props });
2675
- }
2676
- function SheetOverlay2({ className, ...props }) {
2677
- return /* @__PURE__ */ jsx(
2678
- SheetOverlay,
2679
- {
2680
- className: cn("fixed inset-0 z-50 bg-black/50", className),
2681
- ...props
2682
- }
2683
- );
2684
- }
2685
- function SheetClose2(props) {
2686
- return /* @__PURE__ */ jsx(SheetClose, { ...props });
2687
- }
2688
- function SheetContent2({
2689
- className,
2690
- children,
2691
- side = "right",
2692
- showCloseButton = true,
2693
- onEscapeKeyDown,
2694
- onPointerDownOutside,
2695
- ...props
2696
- }) {
2697
- const floating = React.useContext(SheetFloatingContext);
2698
- const { closeOnEscape, closeOnOutsideClick } = React.useContext(SheetDismissContext);
2699
- const closeClassName = "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none";
2700
- if (floating) {
2701
- return /* @__PURE__ */ jsxs(SheetPortal, { children: [
2702
- /* @__PURE__ */ jsx(SheetOverlay2, {}),
2703
- /* @__PURE__ */ jsx(
2704
- SheetContent,
2705
- {
2706
- className: cn(
2707
- "fixed z-50 !p-3",
2708
- side === "right" && "h-full w-[350px] max-w-full",
2709
- side === "left" && "h-full w-[350px] max-w-full",
2710
- side === "top" && "h-[350px] w-full",
2711
- side === "bottom" && "h-[350px] w-full",
2712
- className
2713
- ),
2714
- side,
2715
- onEscapeKeyDown: (event) => {
2716
- onEscapeKeyDown?.(event);
2717
- if (!closeOnEscape) event.preventDefault();
2718
- },
2719
- onPointerDownOutside: (event) => {
2720
- onPointerDownOutside?.(event);
2721
- if (!closeOnOutsideClick) event.preventDefault();
2722
- },
2723
- ...props,
2724
- children: /* @__PURE__ */ jsxs("div", { className: "bg-background relative flex h-full flex-col gap-0 rounded-lg shadow-lg overflow-auto", children: [
2725
- children,
2726
- showCloseButton && /* @__PURE__ */ jsxs(SheetClose2, { className: closeClassName, children: [
2727
- /* @__PURE__ */ jsx(XIcon, { className: "size-4" }),
2728
- /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
2729
- ] })
2730
- ] })
2731
- }
2732
- )
2733
- ] });
2734
- }
2735
- return /* @__PURE__ */ jsxs(SheetPortal, { children: [
2736
- /* @__PURE__ */ jsx(SheetOverlay2, {}),
2737
- /* @__PURE__ */ jsxs(
2738
- SheetContent,
2739
- {
2740
- className: cn(
2741
- "bg-background fixed z-50 flex flex-col gap-0 shadow-lg",
2742
- side === "right" && "h-full w-[350px] max-w-full border-l",
2743
- side === "left" && "h-full w-[350px] max-w-full border-r",
2744
- side === "top" && "h-[350px] w-full border-b",
2745
- side === "bottom" && "h-[350px] w-full border-t",
2746
- className
2747
- ),
2748
- side,
2749
- onEscapeKeyDown: (event) => {
2750
- onEscapeKeyDown?.(event);
2751
- if (!closeOnEscape) event.preventDefault();
2752
- },
2753
- onPointerDownOutside: (event) => {
2754
- onPointerDownOutside?.(event);
2755
- if (!closeOnOutsideClick) event.preventDefault();
2756
- },
2757
- ...props,
2758
- children: [
2759
- children,
2760
- showCloseButton && /* @__PURE__ */ jsxs(SheetClose2, { className: closeClassName, children: [
2761
- /* @__PURE__ */ jsx(XIcon, { className: "size-4" }),
2762
- /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
2763
- ] })
2764
- ]
2765
- }
2766
- )
2767
- ] });
2768
- }
2769
- function SheetHeader2({ className, ...props }) {
2770
- return /* @__PURE__ */ jsx(
2771
- SheetHeader,
2772
- {
2773
- className: cn("flex flex-col gap-1.5 p-4", className),
2774
- ...props
2775
- }
2776
- );
2777
- }
2778
- function SheetFooter2({ className, ...props }) {
2779
- return /* @__PURE__ */ jsx(
2780
- SheetFooter,
2781
- {
2782
- className: cn("mt-auto flex flex-col gap-2 p-4", className),
2783
- ...props
2784
- }
2785
- );
2786
- }
2787
- function SheetTitle2({ className, ...props }) {
2788
- return /* @__PURE__ */ jsx(
2789
- SheetTitle,
2790
- {
2791
- className: cn("text-foreground font-semibold", className),
2792
- ...props
2793
- }
2794
- );
2795
- }
2796
- function SheetDescription2({ className, ...props }) {
2797
- return /* @__PURE__ */ jsx(
2798
- SheetDescription,
2799
- {
2800
- className: cn("text-muted-foreground text-sm", className),
2801
- ...props
2802
- }
2803
- );
2804
- }
2805
- var inputLabelClassName = "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50";
2806
- var fieldHintClassName = "text-sm leading-none text-muted-foreground";
2807
- function FieldLabelRow({
2808
- htmlFor,
2809
- label,
2810
- required = false,
2811
- hintContent,
2812
- className
2813
- }) {
2814
- return (
2815
- // `items-end`: when a long hint wraps, the label stays bottom-aligned so
2816
- // its text is still exactly one stack gap above the control.
2817
- /* @__PURE__ */ jsxs("div", { className: cn("flex items-end justify-between gap-2", className), children: [
2818
- /* @__PURE__ */ jsxs("label", { htmlFor, className: cn(inputLabelClassName, "shrink-0 whitespace-nowrap"), children: [
2819
- label,
2820
- required && /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "*" })
2821
- ] }),
2822
- hintContent && /* @__PURE__ */ jsx("span", { className: cn(fieldHintClassName, "min-w-0 text-end"), children: hintContent })
2823
- ] })
2824
- );
2825
- }
2826
- var sizeClasses2 = {
2827
- sm: "h-8 px-2 text-xs",
2828
- default: "h-10 px-3 py-2 text-base md:text-sm",
2829
- lg: "h-12 px-4 text-lg"
2830
- };
2831
- var Input = React.forwardRef(
2832
- ({
2833
- className,
2834
- type,
2835
- label,
2836
- size,
2837
- rounded,
2838
- startHelperContent,
2839
- endHelperContent,
2840
- hintContent,
2841
- error,
2842
- errorContent,
2843
- startIcon,
2844
- endIcon,
2845
- startAddOnContent,
2846
- endAddOnContent,
2847
- startAddOn,
2848
- endAddOn,
2849
- floatingLabel,
2850
- charLimit,
2851
- onChange,
2852
- value,
2853
- defaultValue,
2854
- id,
2855
- required,
2856
- placeholder,
2857
- ...restProps
2858
- }, ref) => {
2859
- const autoId = React.useId();
2860
- const inputId = id || autoId;
2861
- const [charCount, setCharCount] = React.useState(() => {
2862
- if (charLimit === void 0) return 0;
2863
- if (typeof value === "string") return value.length;
2864
- if (typeof defaultValue === "string") return defaultValue.length;
2865
- return 0;
2866
- });
2867
- React.useEffect(() => {
2868
- if (charLimit !== void 0 && typeof value === "string") {
2869
- setCharCount(value.length);
2870
- }
2871
- }, [value, charLimit]);
2872
- const hasEnhancedProps = label !== void 0 || size !== void 0 || rounded !== void 0 || startHelperContent !== void 0 || endHelperContent !== void 0 || hintContent !== void 0 || error !== void 0 || errorContent !== void 0 || startIcon !== void 0 || endIcon !== void 0 || startAddOnContent !== void 0 || endAddOnContent !== void 0 || startAddOn !== void 0 || endAddOn !== void 0 || floatingLabel !== void 0 || charLimit !== void 0;
2873
- if (!hasEnhancedProps) {
2874
- return /* @__PURE__ */ jsx(
2875
- "input",
2876
- {
2877
- type,
2878
- id,
2879
- className: cn(
2880
- "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background transition-[box-shadow,border-color] duration-200 ease-in-out file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 read-only:bg-muted md:text-sm",
2881
- className
2882
- ),
2883
- ref,
2884
- onChange,
2885
- value,
2886
- defaultValue,
2887
- required,
2888
- placeholder,
2889
- ...restProps
2890
- }
2891
- );
2892
- }
2893
- const effectiveSize = size || "default";
2894
- const hasError = error || !!errorContent;
2895
- const handleChange = (e) => {
2896
- if (charLimit !== void 0) {
2897
- setCharCount(e.target.value.length);
2898
- }
2899
- onChange?.(e);
2900
- };
2901
- const effectivePlaceholder = floatingLabel ? " " : placeholder;
2902
- const resolveAddOn = (content, text) => content != null && content !== false && content !== "" ? content : text || void 0;
2903
- const startAddOnNode = resolveAddOn(startAddOnContent, startAddOn);
2904
- const endAddOnNode = resolveAddOn(endAddOnContent, endAddOn);
2905
- const hasAddOn = startAddOnNode != null || endAddOnNode != null;
2906
- const hasOverlay = !!startIcon || !!endIcon || charLimit !== void 0 || !!floatingLabel;
2907
- const helperStartId = `${inputId}-helper-start`;
2908
- const helperEndId = `${inputId}-helper-end`;
2909
- const describedBy = [
2910
- errorContent && `${inputId}-error`,
2911
- startHelperContent && !errorContent && helperStartId,
2912
- endHelperContent && !errorContent && helperEndId
2913
- ].filter(Boolean).join(" ") || void 0;
2914
- const inputClasses = cn(
2915
- "flex w-full border border-input bg-background ring-offset-background transition-[box-shadow,border-color] duration-200 ease-in-out file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 read-only:bg-muted z-10",
2916
- floatingLabel ? "h-12 px-3 pt-4 pb-1 text-base md:text-sm" : sizeClasses2[effectiveSize],
2917
- rounded ? "rounded-full" : "rounded-md",
2918
- hasError && "border-destructive focus-visible:ring-destructive",
2919
- startIcon && "ps-9",
2920
- endIcon && "pe-9",
2921
- charLimit !== void 0 && !endIcon && "pe-14",
2922
- charLimit !== void 0 && endIcon && "pe-20",
2923
- startAddOnNode != null && "rounded-s-none shadow-none",
2924
- endAddOnNode != null && "rounded-e-none shadow-none",
2925
- // `peer` is a marker only; the overlay decorators are later siblings and
2926
- // rely on it for `peer-disabled:` / `peer-placeholder-shown:` variants.
2927
- "peer",
2928
- floatingLabel && "placeholder:text-transparent",
2929
- className
2930
- );
2931
- const inputElement = /* @__PURE__ */ jsx(
2932
- "input",
2933
- {
2934
- type,
2935
- id: inputId,
2936
- ref,
2937
- className: inputClasses,
2938
- required,
2939
- "aria-invalid": hasError || void 0,
2940
- "aria-describedby": describedBy,
2941
- onChange: handleChange,
2942
- value,
2943
- defaultValue,
2944
- maxLength: charLimit,
2945
- placeholder: effectivePlaceholder,
2946
- ...restProps
2947
- }
2948
- );
2949
- let inputContainer = inputElement;
2950
- if (hasOverlay) {
2951
- inputContainer = /* @__PURE__ */ jsxs("div", { className: "group relative min-w-0 flex-1", children: [
2952
- inputElement,
2953
- startIcon && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50", children: startIcon }),
2954
- (endIcon || charLimit !== void 0) && /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center gap-2 pe-3 text-muted-foreground/80 peer-disabled:opacity-50", children: [
2955
- charLimit !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-xs tabular-nums text-muted-foreground", children: [
2956
- charCount,
2957
- "/",
2958
- charLimit
2959
- ] }),
2960
- endIcon
2961
- ] }),
2962
- floatingLabel && label && /* @__PURE__ */ jsxs(
2963
- "label",
2964
- {
2965
- htmlFor: inputId,
2966
- className: "absolute start-2 top-0 z-10 block -translate-y-1/2 bg-background px-2 text-xs font-medium text-foreground/70 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-placeholder-shown:font-normal peer-focus:top-0 peer-focus:text-xs peer-focus:font-medium",
2967
- children: [
2968
- label,
2969
- required && /* @__PURE__ */ jsx("span", { className: "text-destructive", children: " *" })
2970
- ]
2971
- }
2972
- )
2973
- ] });
2974
- }
2975
- if (hasAddOn) {
2976
- inputContainer = /* @__PURE__ */ jsxs("div", { className: "flex rounded-lg", children: [
2977
- startAddOnNode != null && /* @__PURE__ */ jsx("span", { className: "-me-px inline-flex items-center rounded-s-lg border border-input bg-background px-3 text-sm text-muted-foreground", children: startAddOnNode }),
2978
- inputContainer,
2979
- endAddOnNode != null && /* @__PURE__ */ jsx("span", { className: "-ms-px inline-flex items-center rounded-e-lg border border-input bg-background px-3 text-sm text-muted-foreground", children: endAddOnNode })
2980
- ] });
2981
- }
2982
- return /* @__PURE__ */ jsxs("div", { className: "space-y-2 flex-1", children: [
2983
- label && !floatingLabel && /* @__PURE__ */ jsx(
2984
- FieldLabelRow,
2985
- {
2986
- htmlFor: inputId,
2987
- label,
2988
- required,
2989
- hintContent
2990
- }
2991
- ),
2992
- !label && hintContent && /* @__PURE__ */ jsx("span", { className: fieldHintClassName, children: hintContent }),
2993
- inputContainer,
2994
- errorContent && /* @__PURE__ */ jsx("div", { id: `${inputId}-error`, className: "text-sm text-destructive", children: errorContent }),
2995
- startHelperContent && !errorContent && /* @__PURE__ */ jsx("div", { id: helperStartId, className: "text-sm text-muted-foreground", children: startHelperContent }),
2996
- endHelperContent && !errorContent && /* @__PURE__ */ jsx(
2997
- "div",
2998
- {
2999
- id: helperEndId,
3000
- className: "text-sm text-end text-muted-foreground",
3001
- children: endHelperContent
3002
- }
3003
- )
3004
- ] });
3005
- }
3006
- );
3007
- Input.displayName = "Input";
3008
- var InputPassword = React.forwardRef(
3009
- ({ className, ...props }, ref) => {
3010
- const [isVisible, setIsVisible] = useState(false);
3011
- return /* @__PURE__ */ jsx(
3012
- Input,
3013
- {
3014
- ref,
3015
- type: isVisible ? "text" : "password",
3016
- className: cn("pr-9", className),
3017
- endIcon: /* @__PURE__ */ jsxs(
3018
- "button",
3019
- {
3020
- type: "button",
3021
- onClick: () => setIsVisible((prev) => !prev),
3022
- className: "pointer-events-auto cursor-pointer text-muted-foreground hover:text-foreground",
3023
- tabIndex: -1,
3024
- children: [
3025
- isVisible ? /* @__PURE__ */ jsx(EyeOffIcon, { size: 16 }) : /* @__PURE__ */ jsx(EyeIcon, { size: 16 }),
3026
- /* @__PURE__ */ jsx("span", { className: "sr-only", children: isVisible ? "Hide password" : "Show password" })
3027
- ]
3028
- }
3029
- ),
3030
- ...props
3031
- }
3032
- );
3033
- }
3034
- );
3035
- InputPassword.displayName = "InputPassword";
3036
- var SIDEBAR_COOKIE_NAME = "sidebar_state";
3037
- var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
3038
- var SIDEBAR_WIDTH = "var(--espd-sidebar-width)";
3039
- var SIDEBAR_WIDTH_MOBILE = "18rem";
3040
- var SIDEBAR_WIDTH_COLLAPSED = "var(--espd-sidebar-width-collapsed)";
3041
- var SIDEBAR_KEYBOARD_SHORTCUT = "b";
3042
- var [LocalSidebarProvider, useSidebar] = getStrictContext("SidebarContext");
3043
- function SidebarProvider({
3044
- defaultOpen = true,
3045
- open: openProp,
3046
- onOpenChange: setOpenProp,
3047
- className,
3048
- style,
3049
- children,
3050
- ...props
3051
- }) {
3052
- const isMobile = useIsMobile();
3053
- const [openMobile, setOpenMobile] = React.useState(false);
3054
- const [_open, _setOpen] = React.useState(defaultOpen);
3055
- const open = openProp ?? _open;
3056
- const setOpen = React.useCallback(
3057
- (value) => {
3058
- const openState = typeof value === "function" ? value(open) : value;
3059
- if (setOpenProp) {
3060
- setOpenProp(openState);
3061
- } else {
3062
- _setOpen(openState);
3063
- }
3064
- document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
3065
- },
3066
- [setOpenProp, open]
3067
- );
3068
- const toggleSidebar = React.useCallback(() => {
3069
- return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
3070
- }, [isMobile, setOpen, setOpenMobile]);
3071
- React.useEffect(() => {
3072
- const handleKeyDown = (event) => {
3073
- if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
3074
- event.preventDefault();
3075
- toggleSidebar();
3076
- }
3077
- };
3078
- window.addEventListener("keydown", handleKeyDown);
3079
- return () => window.removeEventListener("keydown", handleKeyDown);
3080
- }, [toggleSidebar]);
3081
- const state = open ? "expanded" : "collapsed";
3082
- const contextValue = React.useMemo(
3083
- () => ({
3084
- state,
3085
- open,
3086
- setOpen,
3087
- isMobile,
3088
- openMobile,
3089
- setOpenMobile,
3090
- toggleSidebar
3091
- }),
3092
- [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
3093
- );
3094
- return /* @__PURE__ */ jsx(LocalSidebarProvider, { value: contextValue, children: /* @__PURE__ */ jsx(TooltipProvider2, { children: /* @__PURE__ */ jsx(
3095
- "div",
3096
- {
3097
- "data-slot": "sidebar-wrapper",
3098
- style: {
3099
- "--sidebar-width": SIDEBAR_WIDTH,
3100
- "--sidebar-width-collapsed": SIDEBAR_WIDTH_COLLAPSED,
3101
- ...style
3102
- },
3103
- className: cn(
3104
- "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
3105
- className
3106
- ),
3107
- ...props,
3108
- children
3109
- }
3110
- ) }) });
3111
- }
3112
- function Sidebar({
3113
- side = "left",
3114
- variant = "sidebar",
3115
- collapsible = "offcanvas",
3116
- className,
3117
- children,
3118
- animateOnHover = true,
3119
- containerClassName,
3120
- transition = { type: "spring", stiffness: 350, damping: 35 },
3121
- ...props
3122
- }) {
3123
- const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
3124
- if (collapsible === "none") {
3125
- return /* @__PURE__ */ jsx(
3126
- Highlight,
3127
- {
3128
- enabled: animateOnHover,
3129
- hover: true,
3130
- controlledItems: true,
3131
- mode: "parent",
3132
- containerClassName,
3133
- transition,
3134
- children: /* @__PURE__ */ jsx(
3135
- "div",
3136
- {
3137
- "data-slot": "sidebar",
3138
- className: cn(
3139
- "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
3140
- className
3141
- ),
3142
- ...props,
3143
- children
3144
- }
3145
- )
3146
- }
3147
- );
3148
- }
3149
- if (isMobile) {
3150
- return /* @__PURE__ */ jsx(Sheet2, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ jsxs(
3151
- SheetContent2,
3152
- {
3153
- "data-sidebar": "sidebar",
3154
- "data-slot": "sidebar",
3155
- "data-mobile": "true",
3156
- className: "bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden",
3157
- style: {
3158
- "--sidebar-width": SIDEBAR_WIDTH_MOBILE
3159
- },
3160
- side,
3161
- children: [
3162
- /* @__PURE__ */ jsxs(SheetHeader2, { className: "sr-only", children: [
3163
- /* @__PURE__ */ jsx(SheetTitle2, { children: "Sidebar" }),
3164
- /* @__PURE__ */ jsx(SheetDescription2, { children: "Displays the mobile sidebar." })
3165
- ] }),
3166
- /* @__PURE__ */ jsx(
3167
- Highlight,
3168
- {
3169
- enabled: animateOnHover,
3170
- hover: true,
3171
- controlledItems: true,
3172
- mode: "parent",
3173
- containerClassName: cn("h-full", containerClassName),
3174
- transition,
3175
- children: /* @__PURE__ */ jsx("div", { className: "flex h-full w-full flex-col", children })
3176
- }
3177
- )
3178
- ]
3179
- }
3180
- ) });
3181
- }
3182
- return /* @__PURE__ */ jsxs(
3183
- "div",
3184
- {
3185
- className: "group peer text-sidebar-foreground hidden md:block",
3186
- "data-state": state,
3187
- "data-collapsible": state === "collapsed" ? collapsible : "",
3188
- "data-variant": variant,
3189
- "data-side": side,
3190
- "data-slot": "sidebar",
3191
- children: [
3192
- /* @__PURE__ */ jsx(
3193
- "div",
3194
- {
3195
- "data-slot": "sidebar-gap",
3196
- className: cn(
3197
- "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-[cubic-bezier(0.7,-0.15,0.25,1.15)]",
3198
- "group-data-[collapsible=offcanvas]:w-0",
3199
- "group-data-[side=right]:rotate-180",
3200
- variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-collapsed)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-collapsed)"
3201
- )
3202
- }
3203
- ),
3204
- /* @__PURE__ */ jsx(
3205
- "div",
3206
- {
3207
- "data-slot": "sidebar-container",
3208
- className: cn(
3209
- "fixed inset-y-0 z-10 hidden h-svh w-[calc(var(--sidebar-width)+1px)] transition-[left,right,width] duration-200 ease-[cubic-bezier(0.75,0,0.25,1)] md:flex",
3210
- side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
3211
- // Adjust the padding for floating and inset variants.
3212
- variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-collapsed)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-collapsed)+1px)] group-data-[side=left]:border-r group-data-[side=right]:border-l border-sidebar-border",
3213
- className
3214
- ),
3215
- ...props,
3216
- children: /* @__PURE__ */ jsx(
3217
- Highlight,
3218
- {
3219
- containerClassName: cn("size-full", containerClassName),
3220
- enabled: animateOnHover,
3221
- hover: true,
3222
- controlledItems: true,
3223
- mode: "parent",
3224
- forceUpdateBounds: true,
3225
- transition,
3226
- children: /* @__PURE__ */ jsx(
3227
- "div",
3228
- {
3229
- "data-sidebar": "sidebar",
3230
- "data-slot": "sidebar-inner",
3231
- className: "bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm",
3232
- children
3233
- }
3234
- )
3235
- }
3236
- )
3237
- }
3238
- )
3239
- ]
3240
- }
3241
- );
3242
- }
3243
- function SidebarTrigger({ className, onClick, ...props }) {
3244
- const { toggleSidebar } = useSidebar();
3245
- return /* @__PURE__ */ jsxs(
3246
- Button,
3247
- {
3248
- "data-sidebar": "trigger",
3249
- "data-slot": "sidebar-trigger",
3250
- variant: "ghost",
3251
- size: "icon",
3252
- className: cn("size-7", className),
3253
- onClick: (event) => {
3254
- onClick?.(event);
3255
- toggleSidebar();
3256
- },
3257
- ...props,
3258
- children: [
3259
- /* @__PURE__ */ jsx(PanelLeftIcon, {}),
3260
- /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle Sidebar" })
3261
- ]
3262
- }
3263
- );
3264
- }
3265
- function SidebarRail({ className, ...props }) {
3266
- const { toggleSidebar } = useSidebar();
3267
- return /* @__PURE__ */ jsx(
3268
- "button",
3269
- {
3270
- "data-sidebar": "rail",
3271
- "data-slot": "sidebar-rail",
3272
- "aria-label": "Toggle Sidebar",
3273
- tabIndex: -1,
3274
- onClick: toggleSidebar,
3275
- title: "Toggle Sidebar",
3276
- className: cn(
3277
- "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
3278
- "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
3279
- "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
3280
- "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
3281
- "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
3282
- "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
3283
- className
3284
- ),
3285
- ...props
3286
- }
3287
- );
3288
- }
3289
- function SidebarInset({ className, ...props }) {
3290
- return /* @__PURE__ */ jsx(
3291
- "main",
3292
- {
3293
- "data-slot": "sidebar-inset",
3294
- className: cn(
3295
- "bg-background relative flex w-full flex-1 flex-col",
3296
- "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
3297
- className
3298
- ),
3299
- ...props
3300
- }
3301
- );
3302
- }
3303
- function SidebarInput({ className, ...props }) {
3304
- return /* @__PURE__ */ jsx(
3305
- Input,
3306
- {
3307
- "data-slot": "sidebar-input",
3308
- "data-sidebar": "input",
3309
- className: cn("bg-background h-8 w-full shadow-none", className),
3310
- ...props
3311
- }
3312
- );
3313
- }
3314
- function SidebarHeader({ className, ...props }) {
3315
- return /* @__PURE__ */ jsx(
3316
- "div",
3317
- {
3318
- "data-slot": "sidebar-header",
3319
- "data-sidebar": "header",
3320
- className: cn("flex flex-col gap-2 p-2", className),
3321
- ...props
3322
- }
3323
- );
3324
- }
3325
- function SidebarFooter({ className, ...props }) {
3326
- return /* @__PURE__ */ jsx(
3327
- "div",
3328
- {
3329
- "data-slot": "sidebar-footer",
3330
- "data-sidebar": "footer",
3331
- className: cn("flex flex-col gap-2 p-2", className),
3332
- ...props
3333
- }
3334
- );
3335
- }
3336
- function SidebarSeparator({ className, ...props }) {
3337
- return /* @__PURE__ */ jsx(
3338
- Separator,
3339
- {
3340
- "data-slot": "sidebar-separator",
3341
- "data-sidebar": "separator",
3342
- className: cn("bg-sidebar-border mx-2 w-auto", className),
3343
- ...props
3344
- }
3345
- );
3346
- }
3347
- function SidebarContent({ className, children, ...props }) {
3348
- return /* @__PURE__ */ jsx(
3349
- "div",
3350
- {
3351
- "data-slot": "sidebar-content",
3352
- "data-sidebar": "content",
3353
- className: cn(
3354
- "flex min-h-0 flex-1 flex-col group-data-[collapsible=icon]:overflow-hidden",
3355
- className
3356
- ),
3357
- ...props,
3358
- children: /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children }) })
3359
- }
3360
- );
3361
- }
3362
- function SidebarGroup({ className, ...props }) {
3363
- return /* @__PURE__ */ jsx(
3364
- "div",
3365
- {
3366
- "data-slot": "sidebar-group",
3367
- "data-sidebar": "group",
3368
- className: cn("relative flex w-full min-w-0 flex-col p-2", className),
3369
- ...props
3370
- }
3371
- );
3372
- }
3373
- function SidebarGroupLabel({
3374
- className,
3375
- asChild = false,
3376
- ...props
3377
- }) {
3378
- const Comp = asChild ? Slot$2.Root : "div";
3379
- return /* @__PURE__ */ jsx(
3380
- Comp,
3381
- {
3382
- "data-slot": "sidebar-group-label",
3383
- "data-sidebar": "group-label",
3384
- className: cn(
3385
- "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-300 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
3386
- "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
3387
- className
3388
- ),
3389
- ...props
3390
- }
3391
- );
3392
- }
3393
- function SidebarGroupAction({
3394
- className,
3395
- asChild = false,
3396
- ...props
3397
- }) {
3398
- const Comp = asChild ? Slot$2.Root : "button";
3399
- return /* @__PURE__ */ jsx(
3400
- Comp,
3401
- {
3402
- "data-slot": "sidebar-group-action",
3403
- "data-sidebar": "group-action",
3404
- className: cn(
3405
- "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
3406
- // Increases the hit area of the button on mobile.
3407
- "after:absolute after:-inset-2 md:after:hidden",
3408
- "group-data-[collapsible=icon]:hidden",
3409
- className
3410
- ),
3411
- ...props
3412
- }
3413
- );
3414
- }
3415
- function SidebarGroupContent({
3416
- className,
3417
- ...props
3418
- }) {
3419
- return /* @__PURE__ */ jsx(
3420
- "div",
3421
- {
3422
- "data-slot": "sidebar-group-content",
3423
- "data-sidebar": "group-content",
3424
- className: cn("w-full text-sm flex", className),
3425
- ...props
3426
- }
3427
- );
3428
- }
3429
- function SidebarMenu({ className, ...props }) {
3430
- return /* @__PURE__ */ jsx(
3431
- "ul",
3432
- {
3433
- "data-slot": "sidebar-menu",
3434
- "data-sidebar": "menu",
3435
- className: cn("flex w-full min-w-0 flex-col gap-1", className),
3436
- ...props
3437
- }
3438
- );
3439
- }
3440
- function SidebarMenuItem({ className, ...props }) {
3441
- return /* @__PURE__ */ jsx(
3442
- "li",
3443
- {
3444
- "data-slot": "sidebar-menu-item",
3445
- "data-sidebar": "menu-item",
3446
- className: cn("group/menu-item relative group-data-[collapsible=icon]:flex group-data-[collapsible=icon]:justify-center", className),
3447
- ...props
3448
- }
3449
- );
3450
- }
3451
- var sidebarMenuButtonActiveVariants = cva(
3452
- "bg-sidebar-accent text-sidebar-accent-foreground rounded-md",
3453
- {
3454
- variants: {
3455
- variant: {
3456
- default: "bg-sidebar-accent text-sidebar-accent-foreground",
3457
- outline: "bg-sidebar-accent text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"
3458
- }
3459
- },
3460
- defaultVariants: {
3461
- variant: "default"
3462
- }
3463
- }
3464
- );
3465
- var sidebarMenuButtonVariants = cva(
3466
- "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] [&:not([data-highlight])]:hover:bg-sidebar-accent [&:not([data-highlight])]:hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground [&:not([data-highlight])]:data-[state=open]:hover:bg-sidebar-accent [&:not([data-highlight])]:data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
3467
- {
3468
- variants: {
3469
- variant: {
3470
- default: "[&:not([data-highlight])]:hover:bg-sidebar-accent [&:not([data-highlight])]:hover:text-sidebar-accent-foreground",
3471
- outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] [&:not([data-highlight])]:hover:bg-sidebar-accent [&:not([data-highlight])]:hover:text-sidebar-accent-foreground [&:not([data-highlight])]:hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"
3472
- },
3473
- size: {
3474
- default: "h-8 text-sm",
3475
- sm: "h-7 text-xs",
3476
- lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!"
3477
- }
3478
- },
3479
- defaultVariants: {
3480
- variant: "default",
3481
- size: "default"
3482
- }
3483
- }
3484
- );
3485
- function SidebarMenuButton({
3486
- asChild = false,
3487
- isActive = false,
3488
- variant = "default",
3489
- size = "default",
3490
- tooltip,
3491
- className,
3492
- ...props
3493
- }) {
3494
- const Comp = asChild ? Slot$2.Root : "button";
3495
- const { isMobile, state } = useSidebar();
3496
- const button = /* @__PURE__ */ jsx(
3497
- HighlightItem,
3498
- {
3499
- activeClassName: sidebarMenuButtonActiveVariants({ variant }),
3500
- children: /* @__PURE__ */ jsx(
3501
- Comp,
3502
- {
3503
- "data-slot": "sidebar-menu-button",
3504
- "data-sidebar": "menu-button",
3505
- "data-size": size,
3506
- "data-active": isActive,
3507
- className: cn(sidebarMenuButtonVariants({ variant, size }), className),
3508
- ...props
3509
- }
3510
- )
3511
- }
3512
- );
3513
- if (!tooltip) {
3514
- return button;
3515
- }
3516
- if (typeof tooltip === "string") {
3517
- tooltip = {
3518
- children: tooltip
3519
- };
3520
- }
3521
- return /* @__PURE__ */ jsxs(Tooltip2, { children: [
3522
- /* @__PURE__ */ jsx(TooltipTrigger2, { asChild: true, children: button }),
3523
- /* @__PURE__ */ jsx(TooltipContent2, { hidden: state !== "collapsed" || isMobile, ...tooltip })
3524
- ] });
3525
- }
3526
- function SidebarMenuAction({
3527
- className,
3528
- asChild = false,
3529
- showOnHover = false,
3530
- ...props
3531
- }) {
3532
- const Comp = asChild ? Slot$2.Root : "button";
3533
- return /* @__PURE__ */ jsx(
3534
- Comp,
3535
- {
3536
- "data-slot": "sidebar-menu-action",
3537
- "data-sidebar": "menu-action",
3538
- className: cn(
3539
- // Increases the hit area of the button on mobile.
3540
- "z-[1] text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1/2 right-1 flex aspect-square w-5 -translate-y-1/2 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
3541
- "after:absolute after:-inset-2 md:after:hidden",
3542
- "group-data-[collapsible=icon]:hidden",
3543
- showOnHover && "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
3544
- className
3545
- ),
3546
- ...props
3547
- }
3548
- );
3549
- }
3550
- function SidebarMenuBadge({ className, ...props }) {
3551
- return /* @__PURE__ */ jsx(
3552
- "div",
3553
- {
3554
- "data-slot": "sidebar-menu-badge",
3555
- "data-sidebar": "menu-badge",
3556
- className: cn(
3557
- "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
3558
- "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
3559
- "peer-data-[size=sm]/menu-button:top-1",
3560
- "peer-data-[size=default]/menu-button:top-1.5",
3561
- "peer-data-[size=lg]/menu-button:top-2.5",
3562
- "group-data-[collapsible=icon]:hidden",
3563
- className
3564
- ),
3565
- ...props
3566
- }
3567
- );
3568
- }
3569
- function SidebarMenuSkeleton({
3570
- className,
3571
- showIcon = false,
3572
- ...props
3573
- }) {
3574
- const width = React.useMemo(() => {
3575
- return `${Math.floor(Math.random() * 40) + 50}%`;
3576
- }, []);
3577
- return /* @__PURE__ */ jsxs(
3578
- "div",
3579
- {
3580
- "data-slot": "sidebar-menu-skeleton",
3581
- "data-sidebar": "menu-skeleton",
3582
- className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
3583
- ...props,
3584
- children: [
3585
- showIcon && /* @__PURE__ */ jsx(
3586
- Skeleton,
3587
- {
3588
- className: "size-4 rounded-md",
3589
- "data-sidebar": "menu-skeleton-icon"
3590
- }
3591
- ),
3592
- /* @__PURE__ */ jsx(
3593
- Skeleton,
3594
- {
3595
- className: "h-4 max-w-(--skeleton-width) flex-1",
3596
- "data-sidebar": "menu-skeleton-text",
3597
- style: {
3598
- "--skeleton-width": width
3599
- }
3600
- }
3601
- )
3602
- ]
3603
- }
3604
- );
3605
- }
3606
- function SidebarMenuSub({ className, ...props }) {
3607
- return /* @__PURE__ */ jsx(
3608
- "ul",
3609
- {
3610
- "data-slot": "sidebar-menu-sub",
3611
- "data-sidebar": "menu-sub",
3612
- className: cn(
3613
- "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
3614
- "group-data-[collapsible=icon]:hidden",
3615
- className
3616
- ),
3617
- ...props
3618
- }
3619
- );
3620
- }
3621
- function SidebarMenuSubItem({ className, ...props }) {
3622
- return /* @__PURE__ */ jsx(
3623
- "li",
3624
- {
3625
- "data-slot": "sidebar-menu-sub-item",
3626
- "data-sidebar": "menu-sub-item",
3627
- className: cn("group/menu-sub-item relative", className),
3628
- ...props
3629
- }
3630
- );
3631
- }
3632
- function SidebarMenuSubButton({
3633
- asChild = false,
3634
- size = "md",
3635
- isActive = false,
3636
- className,
3637
- ...props
3638
- }) {
3639
- const Comp = asChild ? Slot$2.Root : "a";
3640
- return /* @__PURE__ */ jsx(HighlightItem, { activeClassName: "bg-sidebar-accent text-sidebar-accent-foreground rounded-md", children: /* @__PURE__ */ jsx(
3641
- Comp,
3642
- {
3643
- "data-slot": "sidebar-menu-sub-button",
3644
- "data-sidebar": "menu-sub-button",
3645
- "data-size": size,
3646
- "data-active": isActive,
3647
- className: cn(
3648
- "text-sidebar-foreground ring-sidebar-ring [&:not([data-highlight])]:hover:bg-sidebar-accent [&:not([data-highlight])]:hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
3649
- "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
3650
- size === "sm" && "text-xs",
3651
- size === "md" && "text-sm",
3652
- "group-data-[collapsible=icon]:hidden",
3653
- className
3654
- ),
3655
- ...props
3656
- }
3657
- ) });
3658
- }
3659
-
3660
- // src/components/sidebar/types.ts
3661
- function isSidebarGroup(entry) {
3662
- return "items" in entry;
3663
- }
3664
-
3665
- // src/utils/path-match.ts
3666
- function isPathPrefixOf(prefix, fullPath) {
3667
- if (prefix === fullPath) return true;
3668
- return fullPath.startsWith(prefix) && (prefix.endsWith("/") || fullPath[prefix.length] === "/");
3669
- }
3670
- var sidebarGroupClassName = "py-0 px-2";
3671
- var rowIconClass = "[&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0";
3672
- var rowFontStyle = {
3673
- fontSize: "var(--espd-sidebar-item-font-size, 0.875rem)",
3674
- lineHeight: "1.25rem"
3675
- };
3676
- var flyoutGroupLabelStyle = {
3677
- fontSize: "var(--espd-sidebar-flyout-group-label-font-size, 0.875rem)",
3678
- lineHeight: "1.25rem"
3679
- };
3680
- function ItemIcon({
3681
- icon: Icon,
3682
- active,
3683
- className
3684
- }) {
3685
- if (Icon) return /* @__PURE__ */ jsx(Icon, { className });
3686
- if (active) return /* @__PURE__ */ jsx(CircleDot, { className });
3687
- return /* @__PURE__ */ jsx(Circle, { className: cn("opacity-50", className) });
3688
- }
3689
- function forwardRowClickToLink(e) {
3690
- if (e.target !== e.currentTarget) return;
3691
- e.currentTarget.firstElementChild?.click();
3692
- }
3693
- function GroupMenuItems({
3694
- group,
3695
- isSelected,
3696
- linkComponent: LinkComponent,
3697
- onItemClick,
3698
- onItemPointerDown
3699
- }) {
3700
- return /* @__PURE__ */ jsxs(Fragment, { children: [
3701
- /* @__PURE__ */ jsxs(
3702
- DropdownMenuLabel2,
3703
- {
3704
- className: cn(
3705
- "flex items-center gap-2 px-3 py-2 font-normal text-muted-foreground",
3706
- // DropdownMenuLabel, unlike DropdownMenuItem, ships no svg sizing of its own.
3707
- rowIconClass
3708
- ),
3709
- style: flyoutGroupLabelStyle,
3710
- children: [
3711
- group.icon ? /* @__PURE__ */ jsx(ItemIcon, { icon: group.icon, className: "text-foreground" }) : null,
3712
- /* @__PURE__ */ jsx("span", { className: "truncate", children: group.label })
3713
- ]
3714
- }
3715
- ),
3716
- /* @__PURE__ */ jsx(DropdownMenuSeparator2, {}),
3717
- group.items.map((item) => {
3718
- const active = isSelected(item.path);
3719
- return /* @__PURE__ */ jsx(
3720
- DropdownMenuItem2,
3721
- {
3722
- className: active ? "bg-accent" : "",
3723
- style: rowFontStyle,
3724
- onPointerDown: onItemPointerDown,
3725
- onClickCapture: onItemClick,
3726
- onClick: forwardRowClickToLink,
3727
- children: /* @__PURE__ */ jsxs(LinkComponent, { to: item.path, className: "flex items-center gap-2 cursor-pointer w-full", children: [
3728
- /* @__PURE__ */ jsx(ItemIcon, { icon: item.icon, active }),
3729
- /* @__PURE__ */ jsx("span", { className: active ? "font-semibold" : "font-medium", children: item.label })
3730
- ] })
3731
- },
3732
- item.id
3733
- );
3734
- })
3735
- ] });
3736
- }
3737
- function CollapsedSidebarGroup({
3738
- group,
3739
- isSelected,
3740
- linkComponent: LinkComponent
3741
- }) {
3742
- const [open, setOpen] = useState(false);
3743
- const pickedWithPointer = useRef(false);
3744
- return /* @__PURE__ */ jsx(SidebarGroup, { className: sidebarGroupClassName, children: /* @__PURE__ */ jsx(SidebarMenu, { className: "w-auto", children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(
3745
- DropdownMenu2,
3746
- {
3747
- open,
3748
- onOpenChange: (next) => {
3749
- if (next) pickedWithPointer.current = false;
3750
- setOpen(next);
3751
- },
3752
- children: [
3753
- /* @__PURE__ */ jsx(DropdownMenuTrigger2, { asChild: true, children: /* @__PURE__ */ jsx(SidebarMenuButton, { size: "sm", tooltip: group.label, className: rowIconClass, children: /* @__PURE__ */ jsx(ItemIcon, { icon: group.icon }) }) }),
3754
- /* @__PURE__ */ jsx(
3755
- DropdownMenuContent2,
3756
- {
3757
- side: "right",
3758
- align: "start",
3759
- sideOffset: 8,
3760
- className: "z-50 max-w-xs rounded-2xl shadow-lg will-change-[opacity,transform] py-1.5 overflow-visible select-none",
3761
- style: { minWidth: 180 },
3762
- onCloseAutoFocus: (e) => {
3763
- if (pickedWithPointer.current) e.preventDefault();
3764
- },
3765
- children: /* @__PURE__ */ jsx(
3766
- GroupMenuItems,
3767
- {
3768
- group,
3769
- isSelected,
3770
- linkComponent: LinkComponent,
3771
- onItemClick: () => setOpen(false),
3772
- onItemPointerDown: () => {
3773
- pickedWithPointer.current = true;
3774
- }
3775
- }
3776
- )
3777
- }
3778
- )
3779
- ]
3780
- }
3781
- ) }) }) });
3782
- }
3783
- var groupHeaderClass = cn(
3784
- // No `flex-1`: this button is a column flex item, so growing made it take its
3785
- // content height (36px) and render taller than the `h-7` item rows below it.
3786
- // `w-full` keeps the full-width hit area, `overflow-hidden` makes the label truncate.
3787
- "flex w-full items-center gap-2 rounded-md p-2 h-7 overflow-hidden font-medium text-sidebar-foreground hover:bg-sidebar-accent/50 transition-colors cursor-pointer",
3788
- // Sizes both the group icon and the expand/collapse chevron.
3789
- rowIconClass
3790
- );
3791
- function ExpandedSidebarGroup({
3792
- group,
3793
- isGroupOpen,
3794
- onToggle,
3795
- renderMenuItem
3796
- }) {
3797
- return /* @__PURE__ */ jsx(Collapsible, { open: isGroupOpen, onOpenChange: onToggle, children: /* @__PURE__ */ jsxs(SidebarGroup, { className: sidebarGroupClassName, children: [
3798
- /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("button", { type: "button", className: groupHeaderClass, style: rowFontStyle, children: [
3799
- /* @__PURE__ */ jsx(ItemIcon, { icon: group.icon }),
3800
- /* @__PURE__ */ jsx("span", { className: "truncate", children: group.label }),
3801
- isGroupOpen ? /* @__PURE__ */ jsx(ChevronDown, { className: "ml-auto transition-transform" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto transition-transform" })
3802
- ] }) }),
3803
- /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsx(SidebarMenu, { className: "pl-6 pt-1", children: group.items.map((item) => renderMenuItem(item)) }) }) })
3804
- ] }) });
3805
- }
3806
- function TopLevelLinkRow({
3807
- item,
3808
- isCollapsed,
3809
- isMobile,
3810
- renderMenuItem
3811
- }) {
3812
- return /* @__PURE__ */ jsx(SidebarGroup, { className: sidebarGroupClassName, children: /* @__PURE__ */ jsx(SidebarMenu, { className: isCollapsed && !isMobile ? "w-auto" : void 0, children: renderMenuItem(item) }) });
3813
- }
3814
- function Sidebar2({
3815
- items,
3816
- currentPath,
3817
- header,
3818
- headerHeight,
3819
- footer,
3820
- linkComponent: LinkComponent,
3821
- collapsible = "icon",
3822
- variant = "sidebar",
3823
- focusActiveGroup = false
3824
- }) {
3825
- const { state, isMobile, setOpenMobile } = useSidebar();
3826
- const isCollapsed = state === "collapsed";
3827
- const closeMobileSidebar = () => {
3828
- if (isMobile) setOpenMobile(false);
3829
- };
3830
- const activeGroupId = useMemo(() => {
3831
- for (const entry of items) {
3832
- if (!isSidebarGroup(entry)) continue;
3833
- if (entry.items.some((item) => isPathPrefixOf(item.path, currentPath))) {
3834
- return entry.id;
3835
- }
3836
- }
3837
- return null;
3838
- }, [items, currentPath]);
3839
- const [expandedGroups, setExpandedGroups] = useState(() => {
3840
- if (focusActiveGroup && activeGroupId) return /* @__PURE__ */ new Set([activeGroupId]);
3841
- const set = /* @__PURE__ */ new Set();
3842
- for (const entry of items) {
3843
- if (isSidebarGroup(entry) && entry.defaultExpanded !== false) set.add(entry.id);
3844
- }
3845
- return set;
3846
- });
3847
- useEffect(() => {
3848
- if (!focusActiveGroup || !activeGroupId) return;
3849
- setExpandedGroups(/* @__PURE__ */ new Set([activeGroupId]));
3850
- }, [focusActiveGroup, activeGroupId]);
3851
- const toggleGroup = (id, open) => {
3852
- setExpandedGroups((prev) => {
3853
- const next = new Set(prev);
3854
- if (open) next.add(id);
3855
- else next.delete(id);
3856
- return next;
3857
- });
3858
- };
3859
- const isSelected = (path) => {
3860
- return isPathPrefixOf(path, currentPath);
3861
- };
3862
- const renderMenuItem = (item) => {
3863
- const EndActionIcon = item.endAction?.icon;
3864
- const active = isSelected(item.path);
3865
- return /* @__PURE__ */ jsxs(SidebarMenuItem, { children: [
3866
- /* @__PURE__ */ jsx(
3867
- SidebarMenuButton,
3868
- {
3869
- asChild: true,
3870
- isActive: active,
3871
- size: "sm",
3872
- tooltip: item.label,
3873
- className: cn(
3874
- rowIconClass,
3875
- // Selected-row fill spelled out here rather than left to the primitive's
3876
- // `data-[active=true]:bg-sidebar-accent`: that rule needs `data-active` on the
3877
- // rendered element, and `asChild` hands the data attributes to the app's
3878
- // `linkComponent`, which need not forward them. `className` is the one prop every
3879
- // `linkComponent` takes, so it is the only reliable channel. `isActive` above
3880
- // still sets `data-active` for apps that do forward it, and for test selectors.
3881
- active && "bg-sidebar-accent text-sidebar-accent-foreground",
3882
- // Reserve room for the endAction. The primitive does this with
3883
- // `:has([data-sidebar=menu-action])`, which cannot fire here: `asChild` hands
3884
- // its data attributes to the app's LinkComponent, which need not forward them.
3885
- item.endAction && "pr-8"
3886
- ),
3887
- children: /* @__PURE__ */ jsx(LinkComponent, { to: item.path, children: /* @__PURE__ */ jsxs("span", { className: "contents", onClick: closeMobileSidebar, children: [
3888
- /* @__PURE__ */ jsx(ItemIcon, { icon: item.icon, active }),
3889
- /* @__PURE__ */ jsx(
3890
- "span",
3891
- {
3892
- className: cn(
3893
- "whitespace-nowrap max-w-[168px] truncate",
3894
- // Set on the label, so it has to restate the row's colour: a plain
3895
- // `text-sidebar-foreground` here would beat the parent's accent colour.
3896
- active ? "font-semibold text-sidebar-accent-foreground" : "font-medium text-sidebar-foreground"
3897
- ),
3898
- style: rowFontStyle,
3899
- children: item.label
3900
- }
3901
- )
3902
- ] }) })
3903
- }
3904
- ),
3905
- item.endAction && EndActionIcon && /* @__PURE__ */ jsx(Tooltip3, { content: item.endAction.tooltip, side: "right", sideOffset: 8, children: /* @__PURE__ */ jsx(SidebarMenuAction, { asChild: true, className: cn(rowIconClass, "right-1.5"), children: /* @__PURE__ */ jsx(LinkComponent, { to: item.endAction.path, children: /* @__PURE__ */ jsx("span", { className: "contents", onClick: closeMobileSidebar, children: /* @__PURE__ */ jsx(EndActionIcon, {}) }) }) }) })
3906
- ] }, item.id);
3907
- };
3908
- const renderGroup = (group) => {
3909
- if (isCollapsed && !isMobile) {
3910
- return /* @__PURE__ */ jsx(
3911
- CollapsedSidebarGroup,
3912
- {
3913
- group,
3914
- isSelected,
3915
- linkComponent: LinkComponent
3916
- },
3917
- group.id
3918
- );
3919
- }
3920
- return /* @__PURE__ */ jsx(
3921
- ExpandedSidebarGroup,
3922
- {
3923
- group,
3924
- isGroupOpen: expandedGroups.has(group.id),
3925
- onToggle: (open) => toggleGroup(group.id, open),
3926
- renderMenuItem
3927
- },
3928
- group.id
3929
- );
3930
- };
3931
- const renderEntry = (entry) => {
3932
- if (!isSidebarGroup(entry)) {
3933
- return /* @__PURE__ */ jsx(
3934
- TopLevelLinkRow,
3935
- {
3936
- item: entry,
3937
- isCollapsed,
3938
- isMobile,
3939
- renderMenuItem
3940
- },
3941
- entry.id
3942
- );
3943
- }
3944
- return renderGroup(entry);
3945
- };
3946
- return /* @__PURE__ */ jsxs(Sidebar, { collapsible, variant, children: [
3947
- (header || isMobile) && /* @__PURE__ */ jsxs(
3948
- SidebarHeader,
3949
- {
3950
- className: cn(
3951
- headerHeight ? "flex flex-row items-center gap-0 px-2 py-0 box-border shrink-0" : "flex items-start",
3952
- // Mobile sheet: logo flush left (matching the nav below), close button flush right.
3953
- isMobile ? "justify-between" : "justify-center"
3954
- ),
3955
- style: headerHeight ? { height: headerHeight, minHeight: headerHeight } : void 0,
3956
- children: [
3957
- header,
3958
- isMobile && /* @__PURE__ */ jsxs(
3959
- Button2,
3960
- {
3961
- variant: "ghost",
3962
- size: "icon",
3963
- className: "size-8 shrink-0 ml-auto text-sidebar-foreground",
3964
- onClick: () => setOpenMobile(false),
3965
- children: [
3966
- /* @__PURE__ */ jsx(X, { className: "size-5" }),
3967
- /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close sidebar" })
3968
- ]
3969
- }
3970
- )
3971
- ]
3972
- }
3973
- ),
3974
- /* @__PURE__ */ jsx(SidebarContent, { className: "overflow-hidden", children: items.map((entry) => renderEntry(entry)) }),
3975
- footer && /* @__PURE__ */ jsx(SidebarFooter, { children: footer })
3976
- ] });
3977
- }
3978
- var EXTERNAL_PROTOCOL = /^(https?:|mailto:|tel:|sms:|ftp:)/i;
3979
- var PROTOCOL_RELATIVE = /^\/\//;
3980
- function isExternalHref(to) {
3981
- return EXTERNAL_PROTOCOL.test(to) || PROTOCOL_RELATIVE.test(to);
3982
- }
3983
- var baseClasses = "inline-flex items-center gap-1.5 rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0";
3984
- var colorClasses = {
3985
- primary: "px-2 h-8 text-sm font-medium text-primary hover:bg-primary/10",
3986
- secondary: "px-2 h-8 text-sm font-medium text-secondary hover:bg-secondary/10",
3987
- error: "px-2 h-8 text-sm font-medium text-error hover:bg-error/10",
3988
- info: "px-2 h-8 text-sm font-medium text-info hover:bg-info/10",
3989
- success: "px-2 h-8 text-sm font-medium text-success hover:bg-success/10",
3990
- warning: "px-2 h-8 text-sm font-medium text-warning hover:bg-warning/10",
3991
- gray: "px-2 h-8 text-sm font-medium text-gray hover:bg-gray/10"
3992
- };
3993
- var variantClasses = {
3994
- default: "",
3995
- ghost: "h-auto hover:bg-transparent p-0"
3996
- };
3997
- var underlineClasses = "relative no-underline after:absolute after:-bottom-0.5 after:left-0 after:h-px after:w-full after:bg-current hover:after:animate-underline-slide";
3998
- function renderIconSlot(icon) {
3999
- if (icon == null) return null;
4000
- return /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0", children: icon });
4001
- }
4002
- var Link = React.forwardRef(
4003
- function Link2({
4004
- to,
4005
- params,
4006
- search,
4007
- linkComponent,
4008
- color = "primary",
4009
- variant = "default",
4010
- underline = false,
4011
- startIcon,
4012
- endIcon,
4013
- className,
4014
- children,
4015
- ...rest
4016
- }, ref) {
4017
- const merged = cn(
4018
- baseClasses,
4019
- color != null && colorClasses[color],
4020
- variantClasses[variant],
4021
- underline && underlineClasses,
4022
- className
4023
- );
4024
- const content = /* @__PURE__ */ jsxs(Fragment, { children: [
4025
- renderIconSlot(startIcon),
4026
- children,
4027
- renderIconSlot(endIcon)
4028
- ] });
4029
- const external = isExternalHref(to);
4030
- if (external) {
4031
- return /* @__PURE__ */ jsx(
4032
- "a",
4033
- {
4034
- ...rest,
4035
- ref,
4036
- href: to,
4037
- target: "_blank",
4038
- rel: "noopener noreferrer",
4039
- className: merged,
4040
- children: content
4041
- }
4042
- );
4043
- }
4044
- if (linkComponent) {
4045
- const LinkComp = linkComponent;
4046
- return /* @__PURE__ */ jsx(
4047
- LinkComp,
4048
- {
4049
- ...rest,
4050
- ref,
4051
- to,
4052
- params,
4053
- search,
4054
- className: merged,
4055
- children: content
4056
- }
4057
- );
4058
- }
4059
- return /* @__PURE__ */ jsx("a", { ...rest, ref, href: to, className: merged, children: content });
4060
- }
4061
- );
4062
- Link.displayName = "Link";
4063
- var GlitchText = ({
4064
- text,
4065
- children,
4066
- speed = 15,
4067
- enableShadows = true,
4068
- enableOnHover = false,
4069
- className = ""
4070
- }) => {
4071
- const containerRef = useRef(null);
4072
- const [isHovered, setIsHovered] = useState(false);
4073
- const [frame, setFrame] = useState(0);
4074
- const content = text ?? (typeof children === "string" ? children : "");
4075
- const clipPaths = [
4076
- "inset(10% 0 85% 0)",
4077
- "inset(45% 0 40% 0)",
4078
- "inset(80% 0 5% 0)",
4079
- "inset(10% 0 60% 0)",
4080
- "inset(70% 0 20% 0)",
4081
- "inset(25% 0 50% 0)",
4082
- "inset(55% 0 35% 0)",
4083
- "inset(5% 0 75% 0)",
4084
- "inset(90% 0 2% 0)",
4085
- "inset(30% 0 55% 0)",
4086
- "inset(15% 0 70% 0)",
4087
- "inset(65% 0 25% 0)",
4088
- "inset(40% 0 45% 0)",
4089
- "inset(85% 0 10% 0)",
4090
- "inset(20% 0 65% 0)",
4091
- "inset(50% 0 30% 0)",
4092
- "inset(75% 0 15% 0)",
4093
- "inset(35% 0 52% 0)",
4094
- "inset(60% 0 28% 0)",
4095
- "inset(8% 0 82% 0)"
4096
- ];
4097
- const shouldAnimate = enableOnHover ? isHovered : true;
4098
- useEffect(() => {
4099
- if (!shouldAnimate) {
4100
- return;
4101
- }
4102
- const intervalMs = speed * 1e3 / clipPaths.length;
4103
- const interval = setInterval(() => {
4104
- setFrame((f) => (f + 1) % clipPaths.length);
4105
- }, intervalMs);
4106
- return () => clearInterval(interval);
4107
- }, [shouldAnimate, speed, clipPaths.length]);
4108
- const containerStyle = {
4109
- position: "relative",
4110
- display: "inline-block",
4111
- cursor: "pointer",
4112
- userSelect: "none"
4113
- };
4114
- const textStyle = {
4115
- position: "relative",
4116
- fontSize: "clamp(2rem, 10vw, 4rem)",
4117
- fontWeight: 900,
4118
- color: "white"
4119
- };
4120
- const layerBaseStyle = {
4121
- position: "absolute",
4122
- top: 0,
4123
- left: 0,
4124
- width: "100%",
4125
- height: "100%",
4126
- fontSize: "clamp(2rem, 10vw, 4rem)",
4127
- fontWeight: 900,
4128
- color: "white",
4129
- background: "black",
4130
- overflow: "hidden"
4131
- };
4132
- const afterIndex = frame;
4133
- const beforeIndex = (frame + 10) % clipPaths.length;
4134
- const showLayers = enableOnHover ? isHovered : true;
4135
- const afterStyle = {
4136
- ...layerBaseStyle,
4137
- left: "10px",
4138
- textShadow: enableShadows ? "-5px 0 red" : "none",
4139
- clipPath: showLayers ? clipPaths[afterIndex] : "inset(0 0 100% 0)",
4140
- opacity: showLayers ? 1 : 0,
4141
- transition: "opacity 0.1s"
4142
- };
4143
- const beforeStyle = {
4144
- ...layerBaseStyle,
4145
- left: "-10px",
4146
- textShadow: enableShadows ? "5px 0 cyan" : "none",
4147
- clipPath: showLayers ? clipPaths[beforeIndex] : "inset(0 0 100% 0)",
4148
- opacity: showLayers ? 1 : 0,
4149
- transition: "opacity 0.1s"
4150
- };
4151
- return /* @__PURE__ */ jsxs(
4152
- "div",
4153
- {
4154
- className,
4155
- onMouseEnter: () => setIsHovered(true),
4156
- onMouseLeave: () => setIsHovered(false),
4157
- ref: containerRef,
4158
- role: "button",
4159
- tabIndex: 0,
4160
- style: containerStyle,
4161
- children: [
4162
- /* @__PURE__ */ jsx("span", { style: textStyle, children: content }),
4163
- /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: beforeStyle, children: content }),
4164
- /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: afterStyle, children: content })
4165
- ]
4166
- }
4167
- );
4168
- };
4169
- function GradientText({
4170
- text,
4171
- className,
4172
- gradient = "linear-gradient(90deg, #3b82f6 0%, #a855f7 20%, #ec4899 50%, #a855f7 80%, #3b82f6 100%)",
4173
- neon = false,
4174
- transition = { duration: 3, repeat: Number.POSITIVE_INFINITY, ease: "linear" },
4175
- ...props
4176
- }) {
4177
- const baseStyle = {
4178
- backgroundImage: gradient
4179
- };
4180
- return /* @__PURE__ */ jsxs(
4181
- "span",
4182
- {
4183
- className: cn("relative inline-block", className),
4184
- "data-slot": "gradient-text",
4185
- ...props,
4186
- children: [
4187
- /* @__PURE__ */ jsx(
4188
- motion.span,
4189
- {
4190
- animate: { backgroundPositionX: ["0%", "200%"] },
4191
- className: "m-0 text-transparent bg-clip-text bg-[length:200%_100%]",
4192
- style: baseStyle,
4193
- transition,
4194
- children: text
4195
- }
4196
- ),
4197
- neon && /* @__PURE__ */ jsx(
4198
- motion.span,
4199
- {
4200
- animate: { backgroundPositionX: ["0%", "200%"] },
4201
- className: "m-0 absolute top-0 left-0 text-transparent bg-clip-text blur-[8px] mix-blend-plus-lighter bg-[length:200%_100%]",
4202
- style: baseStyle,
4203
- transition,
4204
- children: text
4205
- }
4206
- )
4207
- ]
4208
- }
4209
- );
4210
- }
4211
- function HighlightText({
4212
- ref,
4213
- text,
4214
- className,
4215
- inView = false,
4216
- inViewMargin = "0px",
4217
- inViewOnce = true,
4218
- transition = { duration: 2, ease: "easeInOut" },
4219
- ...props
4220
- }) {
4221
- const localRef = React.useRef(null);
4222
- React.useImperativeHandle(ref, () => localRef.current);
4223
- const inViewResult = useInView(localRef, {
4224
- once: inViewOnce,
4225
- margin: inViewMargin
4226
- });
4227
- const isInView = !inView || inViewResult;
4228
- return /* @__PURE__ */ jsx(
4229
- motion.span,
4230
- {
4231
- animate: isInView ? { backgroundSize: "100% 100%" } : void 0,
4232
- className: cn(
4233
- "relative inline-block px-2 py-1 rounded-lg bg-gradient-to-r from-blue-100 to-purple-100 dark:from-blue-500 dark:to-purple-500",
4234
- className
4235
- ),
4236
- "data-slot": "highlight-text",
4237
- initial: {
4238
- backgroundSize: "0% 100%"
4239
- },
4240
- ref: localRef,
4241
- style: {
4242
- backgroundRepeat: "no-repeat",
4243
- backgroundPosition: "left center",
4244
- display: "inline"
4245
- },
4246
- transition,
4247
- ...props,
4248
- children: text
4249
- }
4250
- );
4251
- }
4252
- function ShimmeringText({
4253
- text,
4254
- duration = 2.5,
4255
- transition,
4256
- wave = false,
4257
- className,
4258
- color = "var(--color-neutral-500)",
4259
- shimmeringColor = "var(--color-neutral-300)",
4260
- ...props
4261
- }) {
4262
- return /* @__PURE__ */ jsx(
4263
- motion.span,
4264
- {
4265
- className: cn("relative inline-block [perspective:500px]", className),
4266
- style: {
4267
- "--shimmering-color": shimmeringColor,
4268
- "--color": color,
4269
- color: "var(--color)"
4270
- },
4271
- ...props,
4272
- children: text?.split("")?.map((char, i) => /* @__PURE__ */ jsx(
4273
- motion.span,
4274
- {
4275
- animate: {
4276
- ...wave ? {
4277
- x: [0, 5, 0],
4278
- y: [0, -5, 0],
4279
- scale: [1, 1.1, 1],
4280
- rotateY: [0, 15, 0]
4281
- } : {},
4282
- color: ["var(--color)", "var(--shimmering-color)", "var(--color)"]
4283
- },
4284
- className: "inline-block whitespace-pre [transform-style:preserve-3d]",
4285
- initial: {
4286
- ...wave ? {
4287
- scale: 1,
4288
- rotateY: 0
4289
- } : {},
4290
- color: "var(--color)"
4291
- },
4292
- transition: {
4293
- duration,
4294
- repeat: Number.POSITIVE_INFINITY,
4295
- repeatType: "loop",
4296
- repeatDelay: text.length * 0.05,
4297
- delay: i * duration / text.length,
4298
- ease: "easeInOut",
4299
- ...transition
4300
- },
4301
- children: char
4302
- },
4303
- i
4304
- ))
4305
- }
4306
- );
4307
- }
4308
- var TEXT_EFFECT_REGISTRY = {
4309
- "glitch-text": GlitchText,
4310
- "gradient-text": GradientText,
4311
- "highlight-text": HighlightText,
4312
- "shimmer-text": ShimmeringText
4313
- };
4314
- function buildTagRegex(tags) {
4315
- const patterns = tags.map(
4316
- (tag) => `<${tag}>(.*?)<\\/${tag}>`
4317
- );
4318
- return new RegExp(patterns.join("|"), "g");
4319
- }
4320
- var tagNames = Object.keys(TEXT_EFFECT_REGISTRY);
4321
- var TAG_REGEX = buildTagRegex(tagNames);
4322
- function parseTextMarkup(text) {
4323
- const parts = [];
4324
- let lastIndex = 0;
4325
- let match;
4326
- TAG_REGEX.lastIndex = 0;
4327
- while ((match = TAG_REGEX.exec(text)) !== null) {
4328
- if (match.index > lastIndex) {
4329
- parts.push(text.slice(lastIndex, match.index));
4330
- }
4331
- for (let i = 0; i < tagNames.length; i++) {
4332
- const captured = match[i + 1];
4333
- if (captured !== void 0) {
4334
- const Component = TEXT_EFFECT_REGISTRY[tagNames[i]];
4335
- parts.push(/* @__PURE__ */ jsx(Component, { text: captured }, match.index));
4336
- break;
4337
- }
4338
- }
4339
- lastIndex = TAG_REGEX.lastIndex;
4340
- }
4341
- if (lastIndex < text.length) {
4342
- parts.push(text.slice(lastIndex));
4343
- }
4344
- return parts;
4345
- }
4346
-
4347
- export { Avatar2 as Avatar, Button2 as Button, CopyButton, DropdownMenu2 as DropdownMenu, DropdownMenuCheckboxItem2 as DropdownMenuCheckboxItem, DropdownMenuContent2 as DropdownMenuContent, DropdownMenuGroup2 as DropdownMenuGroup, DropdownMenuItem2 as DropdownMenuItem, DropdownMenuLabel2 as DropdownMenuLabel, DropdownMenuRadioGroup2 as DropdownMenuRadioGroup, DropdownMenuRadioItem2 as DropdownMenuRadioItem, DropdownMenuSeparator2 as DropdownMenuSeparator, DropdownMenuShortcut2 as DropdownMenuShortcut, DropdownMenuSub2 as DropdownMenuSub, DropdownMenuSubContent2 as DropdownMenuSubContent, DropdownMenuSubTrigger2 as DropdownMenuSubTrigger, DropdownMenuTrigger2 as DropdownMenuTrigger, FieldLabelRow, FlashButton, GlitchText, GradientText, Highlight, HighlightItem, HighlightText, Input, InputPassword, InvertButton, LIST_CLASS_NAMES, Link, List, Menu, ScrollArea, ScrollBar, Sheet2 as Sheet, SheetClose2 as SheetClose, SheetContent2 as SheetContent, SheetDescription2 as SheetDescription, SheetFooter2 as SheetFooter, SheetHeader2 as SheetHeader, SheetTitle2 as SheetTitle, SheetTrigger2 as SheetTrigger, ShimmeringText, Sidebar, Sidebar2, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Slot, Tooltip2 as Tooltip, Tooltip3 as Tooltip2, TooltipContent2 as TooltipContent, TooltipProvider2 as TooltipProvider, TooltipTrigger2 as TooltipTrigger, buttonVariants3 as buttonVariants, fieldHintClassName, inputLabelClassName, isPathPrefixOf, isSidebarGroup, parseTextMarkup, useSidebar };