@hyddenlabs/hydn-ui 0.3.0-alpha.99 → 0.3.1

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 (649) hide show
  1. package/README.md +46 -29
  2. package/dist/components/branding/google-logo.d.ts +14 -0
  3. package/dist/components/branding/google-logo.d.ts.map +1 -0
  4. package/dist/components/branding/google-logo.js +49 -0
  5. package/dist/components/branding/google-logo.js.map +1 -0
  6. package/dist/components/branding/hydden-logo.d.ts +14 -0
  7. package/dist/components/branding/hydden-logo.d.ts.map +1 -0
  8. package/dist/components/branding/hydden-logo.js +8 -0
  9. package/dist/components/branding/hydden-logo.js.map +1 -0
  10. package/dist/components/branding/microsoft-logo.d.ts +14 -0
  11. package/dist/components/branding/microsoft-logo.d.ts.map +1 -0
  12. package/dist/components/branding/microsoft-logo.js +25 -0
  13. package/dist/components/branding/microsoft-logo.js.map +1 -0
  14. package/dist/components/data-display/avatar/avatar.d.ts +24 -0
  15. package/dist/components/data-display/avatar/avatar.d.ts.map +1 -0
  16. package/dist/components/data-display/avatar/avatar.js +25 -0
  17. package/dist/components/data-display/avatar/avatar.js.map +1 -0
  18. package/dist/components/data-display/avatar/index.d.ts +3 -0
  19. package/dist/components/data-display/avatar/index.d.ts.map +1 -0
  20. package/dist/components/data-display/badge/badge.d.ts +24 -0
  21. package/dist/components/data-display/badge/badge.d.ts.map +1 -0
  22. package/dist/components/data-display/badge/badge.js +27 -0
  23. package/dist/components/data-display/badge/badge.js.map +1 -0
  24. package/dist/components/data-display/badge/index.d.ts +5 -0
  25. package/dist/components/data-display/badge/index.d.ts.map +1 -0
  26. package/dist/components/data-display/badge/status-label.d.ts +25 -0
  27. package/dist/components/data-display/badge/status-label.d.ts.map +1 -0
  28. package/dist/components/data-display/badge/status-label.js +63 -0
  29. package/dist/components/data-display/badge/status-label.js.map +1 -0
  30. package/dist/components/data-display/chip/chip.d.ts +42 -0
  31. package/dist/components/data-display/chip/chip.d.ts.map +1 -0
  32. package/dist/components/data-display/chip/chip.js +79 -0
  33. package/dist/components/data-display/chip/chip.js.map +1 -0
  34. package/dist/components/data-display/chip/index.d.ts +3 -0
  35. package/dist/components/data-display/chip/index.d.ts.map +1 -0
  36. package/dist/components/data-display/code-block/code-block.d.ts +17 -0
  37. package/dist/components/data-display/code-block/code-block.d.ts.map +1 -0
  38. package/dist/components/data-display/code-block/code-block.js +34 -0
  39. package/dist/components/data-display/code-block/code-block.js.map +1 -0
  40. package/dist/components/data-display/data-table/data-table.d.ts +226 -0
  41. package/dist/components/data-display/data-table/data-table.d.ts.map +1 -0
  42. package/dist/components/data-display/data-table/data-table.js +404 -0
  43. package/dist/components/data-display/data-table/data-table.js.map +1 -0
  44. package/dist/components/data-display/data-table/index.d.ts +5 -0
  45. package/dist/components/data-display/data-table/index.d.ts.map +1 -0
  46. package/dist/components/data-display/data-table/use-table.d.ts +42 -0
  47. package/dist/components/data-display/data-table/use-table.d.ts.map +1 -0
  48. package/dist/components/data-display/data-table/use-table.js +120 -0
  49. package/dist/components/data-display/data-table/use-table.js.map +1 -0
  50. package/dist/components/data-display/empty-state/empty-state.d.ts +8 -0
  51. package/dist/components/data-display/empty-state/empty-state.d.ts.map +1 -0
  52. package/dist/components/data-display/empty-state/empty-state.js +17 -0
  53. package/dist/components/data-display/empty-state/empty-state.js.map +1 -0
  54. package/dist/components/data-display/empty-state/index.d.ts +3 -0
  55. package/dist/components/data-display/empty-state/index.d.ts.map +1 -0
  56. package/dist/components/data-display/list/index.d.ts +3 -0
  57. package/dist/components/data-display/list/index.d.ts.map +1 -0
  58. package/dist/components/data-display/list/list.d.ts +31 -0
  59. package/dist/components/data-display/list/list.d.ts.map +1 -0
  60. package/dist/components/data-display/list/list.js +16 -0
  61. package/dist/components/data-display/list/list.js.map +1 -0
  62. package/dist/components/data-display/table/index.d.ts +3 -0
  63. package/dist/components/data-display/table/index.d.ts.map +1 -0
  64. package/dist/components/data-display/table/table.d.ts +101 -0
  65. package/dist/components/data-display/table/table.d.ts.map +1 -0
  66. package/dist/components/data-display/table/table.js +98 -0
  67. package/dist/components/data-display/table/table.js.map +1 -0
  68. package/dist/components/data-display/timeline/index.d.ts +3 -0
  69. package/dist/components/data-display/timeline/index.d.ts.map +1 -0
  70. package/dist/components/data-display/timeline/timeline.d.ts +57 -0
  71. package/dist/components/data-display/timeline/timeline.d.ts.map +1 -0
  72. package/dist/components/data-display/timeline/timeline.js +52 -0
  73. package/dist/components/data-display/timeline/timeline.js.map +1 -0
  74. package/dist/components/feedback/alert/alert.d.ts +27 -0
  75. package/dist/components/feedback/alert/alert.d.ts.map +1 -0
  76. package/dist/components/feedback/alert/alert.js +86 -0
  77. package/dist/components/feedback/alert/alert.js.map +1 -0
  78. package/dist/components/feedback/alert/index.d.ts +3 -0
  79. package/dist/components/feedback/alert/index.d.ts.map +1 -0
  80. package/dist/components/feedback/dialog/delete-dialog.d.ts +41 -0
  81. package/dist/components/feedback/dialog/delete-dialog.d.ts.map +1 -0
  82. package/dist/components/feedback/dialog/delete-dialog.js +52 -0
  83. package/dist/components/feedback/dialog/delete-dialog.js.map +1 -0
  84. package/dist/components/feedback/dialog/dialog.d.ts +24 -0
  85. package/dist/components/feedback/dialog/dialog.d.ts.map +1 -0
  86. package/dist/components/feedback/dialog/dialog.js +15 -0
  87. package/dist/components/feedback/dialog/dialog.js.map +1 -0
  88. package/dist/components/feedback/dialog/index.d.ts +5 -0
  89. package/dist/components/feedback/dialog/index.d.ts.map +1 -0
  90. package/dist/components/feedback/error-page/error-400.d.ts +22 -0
  91. package/dist/components/feedback/error-page/error-400.d.ts.map +1 -0
  92. package/dist/components/feedback/error-page/error-400.js +28 -0
  93. package/dist/components/feedback/error-page/error-400.js.map +1 -0
  94. package/dist/components/feedback/error-page/error-401.d.ts +26 -0
  95. package/dist/components/feedback/error-page/error-401.d.ts.map +1 -0
  96. package/dist/components/feedback/error-page/error-401.js +33 -0
  97. package/dist/components/feedback/error-page/error-401.js.map +1 -0
  98. package/dist/components/feedback/error-page/error-403.d.ts +26 -0
  99. package/dist/components/feedback/error-page/error-403.d.ts.map +1 -0
  100. package/dist/components/feedback/error-page/error-403.js +33 -0
  101. package/dist/components/feedback/error-page/error-403.js.map +1 -0
  102. package/dist/components/feedback/error-page/error-404.d.ts +26 -0
  103. package/dist/components/feedback/error-page/error-404.d.ts.map +1 -0
  104. package/dist/components/feedback/error-page/error-404.js +33 -0
  105. package/dist/components/feedback/error-page/error-404.js.map +1 -0
  106. package/dist/components/feedback/error-page/index.d.ts +9 -0
  107. package/dist/components/feedback/error-page/index.d.ts.map +1 -0
  108. package/dist/components/feedback/loading-container/index.d.ts +3 -0
  109. package/dist/components/feedback/loading-container/index.d.ts.map +1 -0
  110. package/dist/components/feedback/loading-container/loading-container.d.ts +16 -0
  111. package/dist/components/feedback/loading-container/loading-container.d.ts.map +1 -0
  112. package/dist/components/feedback/loading-container/loading-container.js +28 -0
  113. package/dist/components/feedback/loading-container/loading-container.js.map +1 -0
  114. package/dist/components/feedback/modal/index.d.ts +3 -0
  115. package/dist/components/feedback/modal/index.d.ts.map +1 -0
  116. package/dist/components/feedback/modal/modal.d.ts +33 -0
  117. package/dist/components/feedback/modal/modal.d.ts.map +1 -0
  118. package/dist/components/feedback/modal/modal.js +88 -0
  119. package/dist/components/feedback/modal/modal.js.map +1 -0
  120. package/dist/components/feedback/overlay/useOverlay.d.ts +24 -0
  121. package/dist/components/feedback/overlay/useOverlay.d.ts.map +1 -0
  122. package/dist/components/feedback/overlay/useOverlay.js +119 -0
  123. package/dist/components/feedback/overlay/useOverlay.js.map +1 -0
  124. package/dist/components/feedback/popover/index.d.ts +3 -0
  125. package/dist/components/feedback/popover/index.d.ts.map +1 -0
  126. package/dist/components/feedback/popover/popover.d.ts +25 -0
  127. package/dist/components/feedback/popover/popover.d.ts.map +1 -0
  128. package/dist/components/feedback/popover/popover.js +118 -0
  129. package/dist/components/feedback/popover/popover.js.map +1 -0
  130. package/dist/components/feedback/progress-bar/index.d.ts +3 -0
  131. package/dist/components/feedback/progress-bar/index.d.ts.map +1 -0
  132. package/dist/components/feedback/progress-bar/progress-bar.d.ts +22 -0
  133. package/dist/components/feedback/progress-bar/progress-bar.d.ts.map +1 -0
  134. package/dist/components/feedback/progress-bar/progress-bar.js +27 -0
  135. package/dist/components/feedback/progress-bar/progress-bar.js.map +1 -0
  136. package/dist/components/feedback/skeleton/index.d.ts +3 -0
  137. package/dist/components/feedback/skeleton/index.d.ts.map +1 -0
  138. package/dist/components/feedback/skeleton/skeleton.d.ts +19 -0
  139. package/dist/components/feedback/skeleton/skeleton.d.ts.map +1 -0
  140. package/dist/components/feedback/skeleton/skeleton.js +28 -0
  141. package/dist/components/feedback/skeleton/skeleton.js.map +1 -0
  142. package/dist/components/feedback/smooth-transition/index.d.ts +3 -0
  143. package/dist/components/feedback/smooth-transition/index.d.ts.map +1 -0
  144. package/dist/components/feedback/smooth-transition/smooth-transition.d.ts +68 -0
  145. package/dist/components/feedback/smooth-transition/smooth-transition.d.ts.map +1 -0
  146. package/dist/components/feedback/smooth-transition/smooth-transition.js +89 -0
  147. package/dist/components/feedback/smooth-transition/smooth-transition.js.map +1 -0
  148. package/dist/components/feedback/spinner/index.d.ts +3 -0
  149. package/dist/components/feedback/spinner/index.d.ts.map +1 -0
  150. package/dist/components/feedback/spinner/spinner.d.ts +21 -0
  151. package/dist/components/feedback/spinner/spinner.d.ts.map +1 -0
  152. package/dist/components/feedback/spinner/spinner.js +27 -0
  153. package/dist/components/feedback/spinner/spinner.js.map +1 -0
  154. package/dist/components/feedback/toast/index.d.ts +3 -0
  155. package/dist/components/feedback/toast/index.d.ts.map +1 -0
  156. package/dist/components/feedback/toast/toast.d.ts +23 -0
  157. package/dist/components/feedback/toast/toast.d.ts.map +1 -0
  158. package/dist/components/feedback/toast/toast.js +45 -0
  159. package/dist/components/feedback/toast/toast.js.map +1 -0
  160. package/dist/components/feedback/tooltip/index.d.ts +3 -0
  161. package/dist/components/feedback/tooltip/index.d.ts.map +1 -0
  162. package/dist/components/feedback/tooltip/tooltip.d.ts +39 -0
  163. package/dist/components/feedback/tooltip/tooltip.d.ts.map +1 -0
  164. package/dist/components/feedback/tooltip/tooltip.js +129 -0
  165. package/dist/components/feedback/tooltip/tooltip.js.map +1 -0
  166. package/dist/components/forms/button/button-with-icon.d.ts +18 -0
  167. package/dist/components/forms/button/button-with-icon.d.ts.map +1 -0
  168. package/dist/components/forms/button/button-with-icon.js +15 -0
  169. package/dist/components/forms/button/button-with-icon.js.map +1 -0
  170. package/dist/components/forms/button/button.d.ts +66 -0
  171. package/dist/components/forms/button/button.d.ts.map +1 -0
  172. package/dist/components/forms/button/button.examples.d.ts +73 -0
  173. package/dist/components/forms/button/button.examples.d.ts.map +1 -0
  174. package/dist/components/forms/button/button.js +118 -0
  175. package/dist/components/forms/button/button.js.map +1 -0
  176. package/dist/components/forms/button/icon-button.d.ts +23 -0
  177. package/dist/components/forms/button/icon-button.d.ts.map +1 -0
  178. package/dist/components/forms/button/icon-button.js +85 -0
  179. package/dist/components/forms/button/icon-button.js.map +1 -0
  180. package/dist/components/forms/button/index.d.ts +10 -0
  181. package/dist/components/forms/button/index.d.ts.map +1 -0
  182. package/dist/components/forms/button/inline-button.d.ts +45 -0
  183. package/dist/components/forms/button/inline-button.d.ts.map +1 -0
  184. package/dist/components/forms/button/inline-button.js +59 -0
  185. package/dist/components/forms/button/inline-button.js.map +1 -0
  186. package/dist/components/forms/button-group/button-group.d.ts +20 -0
  187. package/dist/components/forms/button-group/button-group.d.ts.map +1 -0
  188. package/dist/components/forms/button-group/button-group.js +24 -0
  189. package/dist/components/forms/button-group/button-group.js.map +1 -0
  190. package/dist/components/forms/button-group/index.d.ts +3 -0
  191. package/dist/components/forms/button-group/index.d.ts.map +1 -0
  192. package/dist/components/forms/calendar/calendar.d.ts +37 -0
  193. package/dist/components/forms/calendar/calendar.d.ts.map +1 -0
  194. package/dist/components/forms/calendar/calendar.js +131 -0
  195. package/dist/components/forms/calendar/calendar.js.map +1 -0
  196. package/dist/components/forms/calendar/index.d.ts +3 -0
  197. package/dist/components/forms/calendar/index.d.ts.map +1 -0
  198. package/dist/components/forms/checkbox/checkbox.d.ts +31 -0
  199. package/dist/components/forms/checkbox/checkbox.d.ts.map +1 -0
  200. package/dist/components/forms/checkbox/checkbox.js +39 -0
  201. package/dist/components/forms/checkbox/checkbox.js.map +1 -0
  202. package/dist/components/forms/checkbox/index.d.ts +3 -0
  203. package/dist/components/forms/checkbox/index.d.ts.map +1 -0
  204. package/dist/components/forms/code/code.d.ts +32 -0
  205. package/dist/components/forms/code/code.d.ts.map +1 -0
  206. package/dist/components/forms/code/code.js +31 -0
  207. package/dist/components/forms/code/code.js.map +1 -0
  208. package/dist/components/forms/code/index.d.ts +1 -0
  209. package/dist/components/forms/code/index.d.ts.map +1 -0
  210. package/dist/components/forms/date-picker/date-picker.d.ts +72 -0
  211. package/dist/components/forms/date-picker/date-picker.d.ts.map +1 -0
  212. package/dist/components/forms/date-picker/date-picker.js +173 -0
  213. package/dist/components/forms/date-picker/date-picker.js.map +1 -0
  214. package/dist/components/forms/date-picker/index.d.ts +3 -0
  215. package/dist/components/forms/date-picker/index.d.ts.map +1 -0
  216. package/dist/components/forms/editable-text/editable-text.d.ts +59 -0
  217. package/dist/components/forms/editable-text/editable-text.d.ts.map +1 -0
  218. package/dist/components/forms/editable-text/editable-text.js +188 -0
  219. package/dist/components/forms/editable-text/editable-text.js.map +1 -0
  220. package/dist/components/forms/editable-text/index.d.ts +3 -0
  221. package/dist/components/forms/editable-text/index.d.ts.map +1 -0
  222. package/dist/components/forms/fieldset/fieldset.d.ts +46 -0
  223. package/dist/components/forms/fieldset/fieldset.d.ts.map +1 -0
  224. package/dist/components/forms/fieldset/fieldset.js +40 -0
  225. package/dist/components/forms/fieldset/fieldset.js.map +1 -0
  226. package/dist/components/forms/fieldset/index.d.ts +3 -0
  227. package/dist/components/forms/fieldset/index.d.ts.map +1 -0
  228. package/dist/components/forms/form/form-example.d.ts +11 -0
  229. package/dist/components/forms/form/form-example.d.ts.map +1 -0
  230. package/dist/components/forms/form/form.d.ts +44 -0
  231. package/dist/components/forms/form/form.d.ts.map +1 -0
  232. package/dist/components/forms/form/form.js +39 -0
  233. package/dist/components/forms/form/form.js.map +1 -0
  234. package/dist/components/forms/form/index.d.ts +3 -0
  235. package/dist/components/forms/form/index.d.ts.map +1 -0
  236. package/dist/components/forms/form-checkbox/form-checkbox.d.ts +27 -0
  237. package/dist/components/forms/form-checkbox/form-checkbox.d.ts.map +1 -0
  238. package/dist/components/forms/form-checkbox/form-checkbox.js +58 -0
  239. package/dist/components/forms/form-checkbox/form-checkbox.js.map +1 -0
  240. package/dist/components/forms/form-checkbox/index.d.ts +3 -0
  241. package/dist/components/forms/form-checkbox/index.d.ts.map +1 -0
  242. package/dist/components/forms/form-checkbox-group/form-checkbox-group.d.ts +40 -0
  243. package/dist/components/forms/form-checkbox-group/form-checkbox-group.d.ts.map +1 -0
  244. package/dist/components/forms/form-checkbox-group/form-checkbox-group.js +74 -0
  245. package/dist/components/forms/form-checkbox-group/form-checkbox-group.js.map +1 -0
  246. package/dist/components/forms/form-field/form-field.d.ts +53 -0
  247. package/dist/components/forms/form-field/form-field.d.ts.map +1 -0
  248. package/dist/components/forms/form-field/form-field.js +56 -0
  249. package/dist/components/forms/form-field/form-field.js.map +1 -0
  250. package/dist/components/forms/form-field/index.d.ts +3 -0
  251. package/dist/components/forms/form-field/index.d.ts.map +1 -0
  252. package/dist/components/forms/form-input/form-input.d.ts +60 -0
  253. package/dist/components/forms/form-input/form-input.d.ts.map +1 -0
  254. package/dist/components/forms/form-input/form-input.js +53 -0
  255. package/dist/components/forms/form-input/form-input.js.map +1 -0
  256. package/dist/components/forms/form-select/form-select.d.ts +32 -0
  257. package/dist/components/forms/form-select/form-select.d.ts.map +1 -0
  258. package/dist/components/forms/form-select/form-select.js +34 -0
  259. package/dist/components/forms/form-select/form-select.js.map +1 -0
  260. package/dist/components/forms/form-textarea/form-textarea.d.ts +31 -0
  261. package/dist/components/forms/form-textarea/form-textarea.d.ts.map +1 -0
  262. package/dist/components/forms/form-textarea/form-textarea.js +34 -0
  263. package/dist/components/forms/form-textarea/form-textarea.js.map +1 -0
  264. package/dist/components/forms/input/index.d.ts +3 -0
  265. package/dist/components/forms/input/index.d.ts.map +1 -0
  266. package/dist/components/forms/input/input.d.ts +71 -0
  267. package/dist/components/forms/input/input.d.ts.map +1 -0
  268. package/dist/components/forms/input/input.js +64 -0
  269. package/dist/components/forms/input/input.js.map +1 -0
  270. package/dist/components/forms/input-group/index.d.ts +3 -0
  271. package/dist/components/forms/input-group/index.d.ts.map +1 -0
  272. package/dist/components/forms/input-group/input-group.d.ts +43 -0
  273. package/dist/components/forms/input-group/input-group.d.ts.map +1 -0
  274. package/dist/components/forms/input-group/input-group.js +55 -0
  275. package/dist/components/forms/input-group/input-group.js.map +1 -0
  276. package/dist/components/forms/multi-select/index.d.ts +3 -0
  277. package/dist/components/forms/multi-select/index.d.ts.map +1 -0
  278. package/dist/components/forms/multi-select/multi-select.d.ts +75 -0
  279. package/dist/components/forms/multi-select/multi-select.d.ts.map +1 -0
  280. package/dist/components/forms/multi-select/multi-select.js +259 -0
  281. package/dist/components/forms/multi-select/multi-select.js.map +1 -0
  282. package/dist/components/forms/radio/index.d.ts +3 -0
  283. package/dist/components/forms/radio/index.d.ts.map +1 -0
  284. package/dist/components/forms/radio/radio.d.ts +31 -0
  285. package/dist/components/forms/radio/radio.d.ts.map +1 -0
  286. package/dist/components/forms/radio/radio.js +74 -0
  287. package/dist/components/forms/radio/radio.js.map +1 -0
  288. package/dist/components/forms/radio-group/index.d.ts +3 -0
  289. package/dist/components/forms/radio-group/index.d.ts.map +1 -0
  290. package/dist/components/forms/radio-group/radio-group.d.ts +32 -0
  291. package/dist/components/forms/radio-group/radio-group.d.ts.map +1 -0
  292. package/dist/components/forms/radio-group/radio-group.js +28 -0
  293. package/dist/components/forms/radio-group/radio-group.js.map +1 -0
  294. package/dist/components/forms/select/index.d.ts +5 -0
  295. package/dist/components/forms/select/index.d.ts.map +1 -0
  296. package/dist/components/forms/select/select-item.d.ts +16 -0
  297. package/dist/components/forms/select/select-item.d.ts.map +1 -0
  298. package/dist/components/forms/select/select-item.js +9 -0
  299. package/dist/components/forms/select/select-item.js.map +1 -0
  300. package/dist/components/forms/select/select.d.ts +52 -0
  301. package/dist/components/forms/select/select.d.ts.map +1 -0
  302. package/dist/components/forms/select/select.js +51 -0
  303. package/dist/components/forms/select/select.js.map +1 -0
  304. package/dist/components/forms/slider/index.d.ts +3 -0
  305. package/dist/components/forms/slider/index.d.ts.map +1 -0
  306. package/dist/components/forms/slider/slider.d.ts +21 -0
  307. package/dist/components/forms/slider/slider.d.ts.map +1 -0
  308. package/dist/components/forms/slider/slider.js +65 -0
  309. package/dist/components/forms/slider/slider.js.map +1 -0
  310. package/dist/components/forms/switch/index.d.ts +3 -0
  311. package/dist/components/forms/switch/index.d.ts.map +1 -0
  312. package/dist/components/forms/switch/switch.d.ts +30 -0
  313. package/dist/components/forms/switch/switch.d.ts.map +1 -0
  314. package/dist/components/forms/switch/switch.js +104 -0
  315. package/dist/components/forms/switch/switch.js.map +1 -0
  316. package/dist/components/forms/textarea/index.d.ts +3 -0
  317. package/dist/components/forms/textarea/index.d.ts.map +1 -0
  318. package/dist/components/forms/textarea/textarea.d.ts +54 -0
  319. package/dist/components/forms/textarea/textarea.d.ts.map +1 -0
  320. package/dist/components/forms/textarea/textarea.js +55 -0
  321. package/dist/components/forms/textarea/textarea.js.map +1 -0
  322. package/dist/components/index.d.ts +124 -0
  323. package/dist/components/index.d.ts.map +1 -0
  324. package/dist/components/layout/accordion/accordion.d.ts +30 -0
  325. package/dist/components/layout/accordion/accordion.d.ts.map +1 -0
  326. package/dist/components/layout/accordion/accordion.js +38 -0
  327. package/dist/components/layout/accordion/accordion.js.map +1 -0
  328. package/dist/components/layout/accordion/index.d.ts +3 -0
  329. package/dist/components/layout/accordion/index.d.ts.map +1 -0
  330. package/dist/components/layout/action-card/action-card.d.ts +37 -0
  331. package/dist/components/layout/action-card/action-card.d.ts.map +1 -0
  332. package/dist/components/layout/action-card/action-card.js +104 -0
  333. package/dist/components/layout/action-card/action-card.js.map +1 -0
  334. package/dist/components/layout/action-card/index.d.ts +3 -0
  335. package/dist/components/layout/action-card/index.d.ts.map +1 -0
  336. package/dist/components/layout/card/card-actions.d.ts +47 -0
  337. package/dist/components/layout/card/card-actions.d.ts.map +1 -0
  338. package/dist/components/layout/card/card-actions.js +30 -0
  339. package/dist/components/layout/card/card-actions.js.map +1 -0
  340. package/dist/components/layout/card/card-body.d.ts +26 -0
  341. package/dist/components/layout/card/card-body.d.ts.map +1 -0
  342. package/dist/components/layout/card/card-body.js +22 -0
  343. package/dist/components/layout/card/card-body.js.map +1 -0
  344. package/dist/components/layout/card/card-figure.d.ts +50 -0
  345. package/dist/components/layout/card/card-figure.d.ts.map +1 -0
  346. package/dist/components/layout/card/card-figure.js +27 -0
  347. package/dist/components/layout/card/card-figure.js.map +1 -0
  348. package/dist/components/layout/card/card-footer.d.ts +46 -0
  349. package/dist/components/layout/card/card-footer.d.ts.map +1 -0
  350. package/dist/components/layout/card/card-footer.js +39 -0
  351. package/dist/components/layout/card/card-footer.js.map +1 -0
  352. package/dist/components/layout/card/card-header.d.ts +41 -0
  353. package/dist/components/layout/card/card-header.d.ts.map +1 -0
  354. package/dist/components/layout/card/card-header.js +27 -0
  355. package/dist/components/layout/card/card-header.js.map +1 -0
  356. package/dist/components/layout/card/card-title.d.ts +43 -0
  357. package/dist/components/layout/card/card-title.d.ts.map +1 -0
  358. package/dist/components/layout/card/card-title.js +21 -0
  359. package/dist/components/layout/card/card-title.js.map +1 -0
  360. package/dist/components/layout/card/card.d.ts +74 -0
  361. package/dist/components/layout/card/card.d.ts.map +1 -0
  362. package/dist/components/layout/card/card.js +64 -0
  363. package/dist/components/layout/card/card.js.map +1 -0
  364. package/dist/components/layout/card/index.d.ts +15 -0
  365. package/dist/components/layout/card/index.d.ts.map +1 -0
  366. package/dist/components/layout/container/container.d.ts +33 -0
  367. package/dist/components/layout/container/container.d.ts.map +1 -0
  368. package/dist/components/layout/container/container.js +36 -0
  369. package/dist/components/layout/container/container.js.map +1 -0
  370. package/dist/components/layout/container/index.d.ts +3 -0
  371. package/dist/components/layout/container/index.d.ts.map +1 -0
  372. package/dist/components/layout/divider/divider.d.ts +15 -0
  373. package/dist/components/layout/divider/divider.d.ts.map +1 -0
  374. package/dist/components/layout/divider/divider.js +10 -0
  375. package/dist/components/layout/divider/divider.js.map +1 -0
  376. package/dist/components/layout/divider/index.d.ts +3 -0
  377. package/dist/components/layout/divider/index.d.ts.map +1 -0
  378. package/dist/components/layout/drawer/drawer.d.ts +35 -0
  379. package/dist/components/layout/drawer/drawer.d.ts.map +1 -0
  380. package/dist/components/layout/drawer/drawer.js +108 -0
  381. package/dist/components/layout/drawer/drawer.js.map +1 -0
  382. package/dist/components/layout/drawer/index.d.ts +3 -0
  383. package/dist/components/layout/drawer/index.d.ts.map +1 -0
  384. package/dist/components/layout/feature-section/feature-section.d.ts +36 -0
  385. package/dist/components/layout/feature-section/feature-section.d.ts.map +1 -0
  386. package/dist/components/layout/feature-section/feature-section.js +37 -0
  387. package/dist/components/layout/feature-section/feature-section.js.map +1 -0
  388. package/dist/components/layout/feature-section/index.d.ts +3 -0
  389. package/dist/components/layout/feature-section/index.d.ts.map +1 -0
  390. package/dist/components/layout/footer/footer.d.ts +37 -0
  391. package/dist/components/layout/footer/footer.d.ts.map +1 -0
  392. package/dist/components/layout/footer/footer.js +36 -0
  393. package/dist/components/layout/footer/footer.js.map +1 -0
  394. package/dist/components/layout/footer/index.d.ts +3 -0
  395. package/dist/components/layout/footer/index.d.ts.map +1 -0
  396. package/dist/components/layout/grid/grid.d.ts +66 -0
  397. package/dist/components/layout/grid/grid.d.ts.map +1 -0
  398. package/dist/components/layout/grid/grid.js +62 -0
  399. package/dist/components/layout/grid/grid.js.map +1 -0
  400. package/dist/components/layout/grid/index.d.ts +3 -0
  401. package/dist/components/layout/grid/index.d.ts.map +1 -0
  402. package/dist/components/layout/hero/hero.d.ts +61 -0
  403. package/dist/components/layout/hero/hero.d.ts.map +1 -0
  404. package/dist/components/layout/hero/hero.js +79 -0
  405. package/dist/components/layout/hero/hero.js.map +1 -0
  406. package/dist/components/layout/hero/index.d.ts +3 -0
  407. package/dist/components/layout/hero/index.d.ts.map +1 -0
  408. package/dist/components/layout/left-nav-layout/index.d.ts +7 -0
  409. package/dist/components/layout/left-nav-layout/index.d.ts.map +1 -0
  410. package/dist/components/layout/left-nav-layout/left-nav-item.d.ts +56 -0
  411. package/dist/components/layout/left-nav-layout/left-nav-item.d.ts.map +1 -0
  412. package/dist/components/layout/left-nav-layout/left-nav-item.js +105 -0
  413. package/dist/components/layout/left-nav-layout/left-nav-item.js.map +1 -0
  414. package/dist/components/layout/left-nav-layout/left-nav-layout.d.ts +67 -0
  415. package/dist/components/layout/left-nav-layout/left-nav-layout.d.ts.map +1 -0
  416. package/dist/components/layout/left-nav-layout/left-nav-layout.js +182 -0
  417. package/dist/components/layout/left-nav-layout/left-nav-layout.js.map +1 -0
  418. package/dist/components/layout/left-nav-layout/left-nav-section.d.ts +40 -0
  419. package/dist/components/layout/left-nav-layout/left-nav-section.d.ts.map +1 -0
  420. package/dist/components/layout/left-nav-layout/left-nav-section.js +119 -0
  421. package/dist/components/layout/left-nav-layout/left-nav-section.js.map +1 -0
  422. package/dist/components/layout/page/index.d.ts +3 -0
  423. package/dist/components/layout/page/index.d.ts.map +1 -0
  424. package/dist/components/layout/page/page.d.ts +17 -0
  425. package/dist/components/layout/page/page.d.ts.map +1 -0
  426. package/dist/components/layout/page/page.js +9 -0
  427. package/dist/components/layout/page/page.js.map +1 -0
  428. package/dist/components/layout/page-header/index.d.ts +3 -0
  429. package/dist/components/layout/page-header/index.d.ts.map +1 -0
  430. package/dist/components/layout/page-header/page-header.d.ts +21 -0
  431. package/dist/components/layout/page-header/page-header.d.ts.map +1 -0
  432. package/dist/components/layout/page-header/page-header.js +18 -0
  433. package/dist/components/layout/page-header/page-header.js.map +1 -0
  434. package/dist/components/layout/page-transition/index.d.ts +3 -0
  435. package/dist/components/layout/page-transition/index.d.ts.map +1 -0
  436. package/dist/components/layout/page-transition/page-transition.d.ts +52 -0
  437. package/dist/components/layout/page-transition/page-transition.d.ts.map +1 -0
  438. package/dist/components/layout/page-transition/page-transition.js +43 -0
  439. package/dist/components/layout/page-transition/page-transition.js.map +1 -0
  440. package/dist/components/layout/section/index.d.ts +3 -0
  441. package/dist/components/layout/section/index.d.ts.map +1 -0
  442. package/dist/components/layout/section/section.d.ts +35 -0
  443. package/dist/components/layout/section/section.d.ts.map +1 -0
  444. package/dist/components/layout/section/section.js +18 -0
  445. package/dist/components/layout/section/section.js.map +1 -0
  446. package/dist/components/layout/section-header/index.d.ts +3 -0
  447. package/dist/components/layout/section-header/index.d.ts.map +1 -0
  448. package/dist/components/layout/section-header/section-header.d.ts +23 -0
  449. package/dist/components/layout/section-header/section-header.d.ts.map +1 -0
  450. package/dist/components/layout/section-header/section-header.js +18 -0
  451. package/dist/components/layout/section-header/section-header.js.map +1 -0
  452. package/dist/components/layout/settings-page/index.d.ts +4 -0
  453. package/dist/components/layout/settings-page/index.d.ts.map +1 -0
  454. package/dist/components/layout/settings-page/setting-item.d.ts +52 -0
  455. package/dist/components/layout/settings-page/setting-item.d.ts.map +1 -0
  456. package/dist/components/layout/settings-page/setting-item.js +31 -0
  457. package/dist/components/layout/settings-page/setting-item.js.map +1 -0
  458. package/dist/components/layout/settings-page/settings-page.d.ts +37 -0
  459. package/dist/components/layout/settings-page/settings-page.d.ts.map +1 -0
  460. package/dist/components/layout/settings-page/settings-page.js +18 -0
  461. package/dist/components/layout/settings-page/settings-page.js.map +1 -0
  462. package/dist/components/layout/settings-page/settings-section.d.ts +35 -0
  463. package/dist/components/layout/settings-page/settings-section.d.ts.map +1 -0
  464. package/dist/components/layout/settings-page/settings-section.js +17 -0
  465. package/dist/components/layout/settings-page/settings-section.js.map +1 -0
  466. package/dist/components/layout/stack/index.d.ts +3 -0
  467. package/dist/components/layout/stack/index.d.ts.map +1 -0
  468. package/dist/components/layout/stack/stack.d.ts +33 -0
  469. package/dist/components/layout/stack/stack.d.ts.map +1 -0
  470. package/dist/components/layout/stack/stack.js +44 -0
  471. package/dist/components/layout/stack/stack.js.map +1 -0
  472. package/dist/components/navigation/breadcrumbs/breadcrumbs.d.ts +61 -0
  473. package/dist/components/navigation/breadcrumbs/breadcrumbs.d.ts.map +1 -0
  474. package/dist/components/navigation/breadcrumbs/breadcrumbs.js +30 -0
  475. package/dist/components/navigation/breadcrumbs/breadcrumbs.js.map +1 -0
  476. package/dist/components/navigation/breadcrumbs/index.d.ts +3 -0
  477. package/dist/components/navigation/breadcrumbs/index.d.ts.map +1 -0
  478. package/dist/components/navigation/dropdown/dropdown.d.ts +83 -0
  479. package/dist/components/navigation/dropdown/dropdown.d.ts.map +1 -0
  480. package/dist/components/navigation/dropdown/dropdown.js +295 -0
  481. package/dist/components/navigation/dropdown/dropdown.js.map +1 -0
  482. package/dist/components/navigation/dropdown/index.d.ts +5 -0
  483. package/dist/components/navigation/dropdown/index.d.ts.map +1 -0
  484. package/dist/components/navigation/nav/index.d.ts +3 -0
  485. package/dist/components/navigation/nav/index.d.ts.map +1 -0
  486. package/dist/components/navigation/nav/nav.d.ts +24 -0
  487. package/dist/components/navigation/nav/nav.d.ts.map +1 -0
  488. package/dist/components/navigation/nav/nav.js +32 -0
  489. package/dist/components/navigation/nav/nav.js.map +1 -0
  490. package/dist/components/navigation/nav-dropdown/index.d.ts +5 -0
  491. package/dist/components/navigation/nav-dropdown/index.d.ts.map +1 -0
  492. package/dist/components/navigation/nav-dropdown/nav-dropdown-item.d.ts +17 -0
  493. package/dist/components/navigation/nav-dropdown/nav-dropdown-item.d.ts.map +1 -0
  494. package/dist/components/navigation/nav-dropdown/nav-dropdown-item.js +17 -0
  495. package/dist/components/navigation/nav-dropdown/nav-dropdown-item.js.map +1 -0
  496. package/dist/components/navigation/nav-dropdown/nav-dropdown.d.ts +20 -0
  497. package/dist/components/navigation/nav-dropdown/nav-dropdown.d.ts.map +1 -0
  498. package/dist/components/navigation/nav-dropdown/nav-dropdown.js +24 -0
  499. package/dist/components/navigation/nav-dropdown/nav-dropdown.js.map +1 -0
  500. package/dist/components/navigation/navbar/index.d.ts +9 -0
  501. package/dist/components/navigation/navbar/index.d.ts.map +1 -0
  502. package/dist/components/navigation/navbar/navbar-brand.d.ts +23 -0
  503. package/dist/components/navigation/navbar/navbar-brand.d.ts.map +1 -0
  504. package/dist/components/navigation/navbar/navbar-brand.js +21 -0
  505. package/dist/components/navigation/navbar/navbar-brand.js.map +1 -0
  506. package/dist/components/navigation/navbar/navbar-link.d.ts +23 -0
  507. package/dist/components/navigation/navbar/navbar-link.d.ts.map +1 -0
  508. package/dist/components/navigation/navbar/navbar-link.js +34 -0
  509. package/dist/components/navigation/navbar/navbar-link.js.map +1 -0
  510. package/dist/components/navigation/navbar/navbar-toggle.d.ts +34 -0
  511. package/dist/components/navigation/navbar/navbar-toggle.d.ts.map +1 -0
  512. package/dist/components/navigation/navbar/navbar-toggle.js +37 -0
  513. package/dist/components/navigation/navbar/navbar-toggle.js.map +1 -0
  514. package/dist/components/navigation/navbar/navbar.d.ts +33 -0
  515. package/dist/components/navigation/navbar/navbar.d.ts.map +1 -0
  516. package/dist/components/navigation/navbar/navbar.js +40 -0
  517. package/dist/components/navigation/navbar/navbar.js.map +1 -0
  518. package/dist/components/navigation/notification-dropdown/index.d.ts +3 -0
  519. package/dist/components/navigation/notification-dropdown/index.d.ts.map +1 -0
  520. package/dist/components/navigation/notification-dropdown/notification-dropdown.d.ts +59 -0
  521. package/dist/components/navigation/notification-dropdown/notification-dropdown.d.ts.map +1 -0
  522. package/dist/components/navigation/notification-dropdown/notification-dropdown.js +456 -0
  523. package/dist/components/navigation/notification-dropdown/notification-dropdown.js.map +1 -0
  524. package/dist/components/navigation/pagination/index.d.ts +3 -0
  525. package/dist/components/navigation/pagination/index.d.ts.map +1 -0
  526. package/dist/components/navigation/pagination/pagination.d.ts +21 -0
  527. package/dist/components/navigation/pagination/pagination.d.ts.map +1 -0
  528. package/dist/components/navigation/pagination/pagination.js +72 -0
  529. package/dist/components/navigation/pagination/pagination.js.map +1 -0
  530. package/dist/components/navigation/scroll-nav/index.d.ts +3 -0
  531. package/dist/components/navigation/scroll-nav/index.d.ts.map +1 -0
  532. package/dist/components/navigation/scroll-nav/scroll-nav.d.ts +53 -0
  533. package/dist/components/navigation/scroll-nav/scroll-nav.d.ts.map +1 -0
  534. package/dist/components/navigation/scroll-nav/scroll-nav.js +188 -0
  535. package/dist/components/navigation/scroll-nav/scroll-nav.js.map +1 -0
  536. package/dist/components/navigation/sidebar/index.d.ts +3 -0
  537. package/dist/components/navigation/sidebar/index.d.ts.map +1 -0
  538. package/dist/components/navigation/sidebar/sidebar.d.ts +18 -0
  539. package/dist/components/navigation/sidebar/sidebar.d.ts.map +1 -0
  540. package/dist/components/navigation/sidebar/sidebar.js +41 -0
  541. package/dist/components/navigation/sidebar/sidebar.js.map +1 -0
  542. package/dist/components/navigation/stepper/index.d.ts +3 -0
  543. package/dist/components/navigation/stepper/index.d.ts.map +1 -0
  544. package/dist/components/navigation/stepper/stepper.d.ts +50 -0
  545. package/dist/components/navigation/stepper/stepper.d.ts.map +1 -0
  546. package/dist/components/navigation/stepper/stepper.js +159 -0
  547. package/dist/components/navigation/stepper/stepper.js.map +1 -0
  548. package/dist/components/navigation/tabs/index.d.ts +3 -0
  549. package/dist/components/navigation/tabs/index.d.ts.map +1 -0
  550. package/dist/components/navigation/tabs/tabs.d.ts +32 -0
  551. package/dist/components/navigation/tabs/tabs.d.ts.map +1 -0
  552. package/dist/components/navigation/tabs/tabs.js +61 -0
  553. package/dist/components/navigation/tabs/tabs.js.map +1 -0
  554. package/dist/components/system/auth-provider/auth-provider.d.ts +103 -0
  555. package/dist/components/system/auth-provider/auth-provider.d.ts.map +1 -0
  556. package/dist/components/system/auth-provider/auth-provider.js +118 -0
  557. package/dist/components/system/auth-provider/auth-provider.js.map +1 -0
  558. package/dist/components/system/auth-provider/auth-utils.d.ts +32 -0
  559. package/dist/components/system/auth-provider/auth-utils.d.ts.map +1 -0
  560. package/dist/components/system/auth-provider/auth-utils.js +83 -0
  561. package/dist/components/system/auth-provider/auth-utils.js.map +1 -0
  562. package/dist/components/system/auth-provider/index.d.ts +4 -0
  563. package/dist/components/system/auth-provider/index.d.ts.map +1 -0
  564. package/dist/components/system/color-mode-toggle/color-mode-toggle.d.ts +18 -0
  565. package/dist/components/system/color-mode-toggle/color-mode-toggle.d.ts.map +1 -0
  566. package/dist/components/system/color-mode-toggle/color-mode-toggle.js +27 -0
  567. package/dist/components/system/color-mode-toggle/color-mode-toggle.js.map +1 -0
  568. package/dist/components/system/color-mode-toggle/index.d.ts +3 -0
  569. package/dist/components/system/color-mode-toggle/index.d.ts.map +1 -0
  570. package/dist/components/system/error-boundary/error-boundary.d.ts +21 -0
  571. package/dist/components/system/error-boundary/error-boundary.d.ts.map +1 -0
  572. package/dist/components/system/icon/icon.d.ts +35 -0
  573. package/dist/components/system/icon/icon.d.ts.map +1 -0
  574. package/dist/components/system/icon/icon.js +83 -0
  575. package/dist/components/system/icon/icon.js.map +1 -0
  576. package/dist/components/system/icon/index.d.ts +3 -0
  577. package/dist/components/system/icon/index.d.ts.map +1 -0
  578. package/dist/components/system/theme-provider/index.d.ts +3 -0
  579. package/dist/components/system/theme-provider/index.d.ts.map +1 -0
  580. package/dist/components/system/theme-provider/theme-provider.d.ts +40 -0
  581. package/dist/components/system/theme-provider/theme-provider.d.ts.map +1 -0
  582. package/dist/components/system/theme-provider/theme-provider.js +55 -0
  583. package/dist/components/system/theme-provider/theme-provider.js.map +1 -0
  584. package/dist/components/typography/code/code.d.ts +24 -0
  585. package/dist/components/typography/code/code.d.ts.map +1 -0
  586. package/dist/components/typography/code/code.js +18 -0
  587. package/dist/components/typography/code/code.js.map +1 -0
  588. package/dist/components/typography/code/index.d.ts +3 -0
  589. package/dist/components/typography/code/index.d.ts.map +1 -0
  590. package/dist/components/typography/heading/heading.d.ts +32 -0
  591. package/dist/components/typography/heading/heading.d.ts.map +1 -0
  592. package/dist/components/typography/heading/heading.js +39 -0
  593. package/dist/components/typography/heading/heading.js.map +1 -0
  594. package/dist/components/typography/heading/index.d.ts +3 -0
  595. package/dist/components/typography/heading/index.d.ts.map +1 -0
  596. package/dist/components/typography/link/index.d.ts +3 -0
  597. package/dist/components/typography/link/index.d.ts.map +1 -0
  598. package/dist/components/typography/link/link.d.ts +44 -0
  599. package/dist/components/typography/link/link.d.ts.map +1 -0
  600. package/dist/components/typography/link/link.js +72 -0
  601. package/dist/components/typography/link/link.js.map +1 -0
  602. package/dist/components/typography/text/index.d.ts +3 -0
  603. package/dist/components/typography/text/index.d.ts.map +1 -0
  604. package/dist/components/typography/text/text.d.ts +104 -0
  605. package/dist/components/typography/text/text.d.ts.map +1 -0
  606. package/dist/components/typography/text/text.js +148 -0
  607. package/dist/components/typography/text/text.js.map +1 -0
  608. package/dist/components.d.ts +2 -0
  609. package/dist/components.d.ts.map +1 -0
  610. package/dist/hooks/useDebounce.d.ts +29 -0
  611. package/dist/hooks/useDebounce.d.ts.map +1 -0
  612. package/dist/hooks/useDebounce.js +26 -0
  613. package/dist/hooks/useDebounce.js.map +1 -0
  614. package/dist/hooks/useScrollReset.d.ts +11 -0
  615. package/dist/hooks/useScrollReset.d.ts.map +1 -0
  616. package/dist/hooks/useScrollReset.js +55 -0
  617. package/dist/hooks/useScrollReset.js.map +1 -0
  618. package/dist/humans.txt +8 -0
  619. package/dist/icons/logo.svg +9 -0
  620. package/dist/index.d.ts +7 -1170
  621. package/dist/index.d.ts.map +1 -0
  622. package/dist/index.js +287 -4333
  623. package/dist/index.js.map +1 -1
  624. package/dist/manifest.json +16 -0
  625. package/dist/node_modules/clsx/dist/clsx.js +18 -0
  626. package/dist/node_modules/clsx/dist/clsx.js.map +1 -0
  627. package/dist/robots.txt +5 -0
  628. package/dist/sitemap.xml +8 -0
  629. package/dist/staticwebapp.config.json +23 -0
  630. package/dist/style.css +2 -2
  631. package/dist/styles.d.ts +9 -0
  632. package/dist/theme/hydn-presets.d.ts +4 -0
  633. package/dist/theme/hydn-presets.d.ts.map +1 -0
  634. package/dist/theme/size-tokens.d.ts +686 -0
  635. package/dist/theme/size-tokens.d.ts.map +1 -0
  636. package/dist/theme/size-tokens.js +636 -0
  637. package/dist/theme/size-tokens.js.map +1 -0
  638. package/dist/theme/tokens.d.ts +116 -0
  639. package/dist/theme/tokens.d.ts.map +1 -0
  640. package/dist/theme/tokens.js +164 -0
  641. package/dist/theme/tokens.js.map +1 -0
  642. package/dist/utils/debounce.d.ts +7 -0
  643. package/dist/utils/debounce.d.ts.map +1 -0
  644. package/dist/utils/debounce.js +40 -0
  645. package/dist/utils/debounce.js.map +1 -0
  646. package/package.json +49 -43
  647. package/dist/index.cjs +0 -4425
  648. package/dist/index.cjs.map +0 -1
  649. package/dist/index.d.cts +0 -1170
package/dist/index.js CHANGED
@@ -1,4335 +1,289 @@
1
- import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
2
- import React5, { createContext, useId, useState, useRef, useEffect, isValidElement, cloneElement, useCallback, useLayoutEffect, useMemo, createElement, useContext } from 'react';
3
- import { IconX, IconChevronDown, IconCheck, IconCalendar, IconMenu2, IconTrash, IconChevronRight, IconChevronLeft, IconSelector, IconChevronUp } from '@tabler/icons-react';
4
- import { Link, NavLink } from 'react-router-dom';
5
- import { createPortal } from 'react-dom';
6
-
7
- // src/components/forms/button/button.tsx
8
- function Button({
9
- children,
10
- onClick,
11
- ariaLabel,
12
- disabled = false,
13
- type = "button",
14
- className = "",
15
- icon,
16
- iconPosition = "left",
17
- variant = "neutral",
18
- style = "solid",
19
- size = "md",
20
- rounded = "default",
21
- loading = false,
22
- fullWidth = false,
23
- wide = false,
24
- active = false
25
- }) {
26
- const isIconOnly = icon && !children;
27
- if (isIconOnly && !ariaLabel) {
28
- console.warn("Button: Icon-only buttons require an ariaLabel for accessibility");
29
- }
30
- const solidVariantClasses = {
31
- neutral: "bg-neutral text-neutral-foreground hover:bg-neutral/90 active:bg-neutral/80",
32
- primary: "bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80",
33
- secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/90 active:bg-secondary/80",
34
- accent: "bg-accent text-accent-foreground hover:bg-accent/90 active:bg-accent/80",
35
- info: "bg-info text-info-foreground hover:bg-info/90 active:bg-info/80",
36
- success: "bg-success text-success-foreground hover:bg-success/90 active:bg-success/80",
37
- warning: "bg-warning text-warning-foreground hover:bg-warning/90 active:bg-warning/80",
38
- error: "bg-destructive text-destructive-foreground hover:bg-destructive/90 active:bg-destructive/80"
39
- };
40
- const outlineVariantClasses = {
41
- neutral: "border-2 border-neutral text-neutral bg-transparent hover:bg-neutral hover:text-neutral-foreground",
42
- primary: "border-2 border-primary text-primary bg-transparent hover:bg-primary hover:text-primary-foreground",
43
- secondary: "border-2 border-secondary text-secondary bg-transparent hover:bg-secondary hover:text-secondary-foreground",
44
- accent: "border-2 border-accent text-accent bg-transparent hover:bg-accent hover:text-accent-foreground",
45
- info: "border-2 border-info text-info bg-transparent hover:bg-info hover:text-info-foreground",
46
- success: "border-2 border-success text-success bg-transparent hover:bg-success hover:text-success-foreground",
47
- warning: "border-2 border-warning text-warning bg-transparent hover:bg-warning hover:text-warning-foreground",
48
- error: "border-2 border-destructive text-destructive bg-transparent hover:bg-destructive hover:text-destructive-foreground"
49
- };
50
- const ghostVariantClasses = {
51
- neutral: "bg-transparent text-foreground hover:bg-neutral/10 active:bg-neutral/20",
52
- primary: "bg-transparent text-primary hover:bg-primary/10 active:bg-primary/20",
53
- secondary: "bg-transparent text-secondary hover:bg-secondary/10 active:bg-secondary/20",
54
- accent: "bg-transparent text-accent hover:bg-accent/10 active:bg-accent/20",
55
- info: "bg-transparent text-info hover:bg-info/10 active:bg-info/20",
56
- success: "bg-transparent text-success hover:bg-success/10 active:bg-success/20",
57
- warning: "bg-transparent text-warning hover:bg-warning/10 active:bg-warning/20",
58
- error: "bg-transparent text-destructive hover:bg-destructive/10 active:bg-destructive/20"
59
- };
60
- const softVariantClasses = {
61
- neutral: "bg-neutral/20 text-foreground hover:bg-neutral/30 active:bg-neutral/40",
62
- primary: "bg-primary/20 text-primary hover:bg-primary/30 active:bg-primary/40",
63
- secondary: "bg-secondary/20 text-secondary hover:bg-secondary/30 active:bg-secondary/40",
64
- accent: "bg-accent/20 text-accent hover:bg-accent/30 active:bg-accent/40",
65
- info: "bg-info/20 text-info hover:bg-info/30 active:bg-info/40",
66
- success: "bg-success/20 text-success hover:bg-success/30 active:bg-success/40",
67
- warning: "bg-warning/20 text-warning hover:bg-warning/30 active:bg-warning/40",
68
- error: "bg-destructive/20 text-destructive hover:bg-destructive/30 active:bg-destructive/40"
69
- };
70
- const linkVariantClasses = {
71
- neutral: "bg-transparent text-foreground underline-offset-4 hover:underline",
72
- primary: "bg-transparent text-primary underline-offset-4 hover:underline",
73
- secondary: "bg-transparent text-secondary underline-offset-4 hover:underline",
74
- accent: "bg-transparent text-accent underline-offset-4 hover:underline",
75
- info: "bg-transparent text-info underline-offset-4 hover:underline",
76
- success: "bg-transparent text-success underline-offset-4 hover:underline",
77
- warning: "bg-transparent text-warning underline-offset-4 hover:underline",
78
- error: "bg-transparent text-destructive underline-offset-4 hover:underline"
79
- };
80
- const getStyleClasses = () => {
81
- const variantKey = variant;
82
- switch (style) {
83
- case "outline":
84
- return `${outlineVariantClasses[variantKey]} active:scale-95`;
85
- case "ghost":
86
- return ghostVariantClasses[variantKey];
87
- case "link":
88
- return linkVariantClasses[variantKey];
89
- case "soft":
90
- return softVariantClasses[variantKey];
91
- case "solid":
92
- default:
93
- return `${solidVariantClasses[variantKey]} shadow-sm hover:shadow-md`;
94
- }
95
- };
96
- const sizeClasses = {
97
- xs: "h-6 px-2 text-xs min-h-6",
98
- sm: "h-8 px-3 text-sm min-h-8",
99
- md: "h-10 px-4 text-base min-h-10",
100
- lg: "h-12 px-6 text-lg min-h-12",
101
- xl: "h-14 px-8 text-xl min-h-14"
102
- };
103
- const roundedClasses = {
104
- default: "rounded-md",
105
- pill: "rounded-full",
106
- square: "rounded-none aspect-square",
107
- circle: "rounded-full aspect-square"
108
- };
109
- const displayIcon = loading ? /* @__PURE__ */ jsxs("svg", { className: "animate-spin h-4 w-4", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
110
- /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
111
- /* @__PURE__ */ jsx(
112
- "path",
113
- {
114
- className: "opacity-75",
115
- fill: "currentColor",
116
- d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
117
- }
118
- )
119
- ] }) : icon;
120
- const styleClasses = getStyleClasses();
121
- const widthClasses = fullWidth ? "w-full" : wide ? "px-8" : "";
122
- const activeClasses = active ? "active:scale-95" : "";
123
- return /* @__PURE__ */ jsxs(
124
- "button",
125
- {
126
- type,
127
- onClick,
128
- "aria-label": ariaLabel,
129
- disabled: disabled || loading,
130
- className: `inline-flex items-center justify-center ${roundedClasses[rounded]} font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 ${styleClasses} ${sizeClasses[size]} ${isIconOnly ? "p-0" : ""} ${widthClasses} ${activeClasses} ${className}`,
131
- children: [
132
- displayIcon && iconPosition === "left" && /* @__PURE__ */ jsx("span", { className: `inline-flex ${children ? "mr-2" : ""}`, children: displayIcon }),
133
- children,
134
- displayIcon && iconPosition === "right" && /* @__PURE__ */ jsx("span", { className: `inline-flex ${children ? "ml-2" : ""}`, children: displayIcon })
135
- ]
136
- }
137
- );
138
- }
139
- Button.displayName = "Button";
140
- var button_default = Button;
141
- function Input({
142
- value,
143
- onChange,
144
- placeholder,
145
- disabled = false,
146
- type = "text",
147
- className = "",
148
- ariaLabel,
149
- id,
150
- name,
151
- required = false,
152
- size = "md",
153
- validationState = "default"
154
- }) {
155
- const sizeClasses = {
156
- sm: "h-8 px-3 py-1.5 text-sm",
157
- md: "h-10 px-3 py-2 text-sm",
158
- lg: "h-12 px-4 py-3 text-base"
159
- };
160
- const validationClasses = {
161
- default: "border-input focus:border-ring",
162
- error: "border-destructive focus:border-destructive",
163
- success: "border-success focus:border-success",
164
- warning: "border-warning focus:border-warning"
165
- };
166
- return /* @__PURE__ */ jsx(
167
- "input",
168
- {
169
- type,
170
- value,
171
- onChange,
172
- placeholder,
173
- disabled,
174
- "aria-label": ariaLabel,
175
- id,
176
- name,
177
- required,
178
- "aria-invalid": validationState === "error",
179
- className: `flex w-full rounded-lg border bg-background shadow-sm transition-all duration-200 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring/20 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted/50 ${sizeClasses[size]} ${validationClasses[validationState]} ${className}`
180
- }
181
- );
182
- }
183
- Input.displayName = "Input";
184
- var input_default = Input;
185
- function Checkbox({
186
- checked,
187
- onChange,
188
- disabled = false,
189
- className = "",
190
- ariaLabel,
191
- id,
192
- name,
193
- validationState = "default"
194
- }) {
195
- const validationClasses = {
196
- default: "border-input focus:ring-ring",
197
- error: "border-destructive focus:ring-destructive",
198
- success: "border-success focus:ring-success",
199
- warning: "border-warning focus:ring-warning"
200
- };
201
- return /* @__PURE__ */ jsx(
202
- "input",
203
- {
204
- type: "checkbox",
205
- checked,
206
- onChange,
207
- disabled,
208
- "aria-label": ariaLabel,
209
- "aria-invalid": validationState === "error",
210
- id,
211
- name,
212
- className: `h-4 w-4 rounded border-2 bg-background text-primary-foreground transition-all duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted/50 checked:bg-primary checked:border-primary checked:hover:bg-primary/90 hover:border-primary/50 hover:shadow-sm cursor-pointer accent-primary ${validationClasses[validationState]} ${className}`
213
- }
214
- );
215
- }
216
- Checkbox.displayName = "Checkbox";
217
- var checkbox_default = Checkbox;
218
- var RadioGroupContext = createContext(null);
219
- var useRadioGroup = () => {
220
- const context = useContext(RadioGroupContext);
221
- return context;
1
+ import { avatarSizes, badgeSizes, borderRadius, cardMargin, cardPadding, cardSizes, chipSizes, codeSizes, containerHeight, containerMaxHeights, containerMaxWidths, containerMinHeights, containerMinWidths, containerWidth, formSpacing, gapSizes, getIconPixels, getInputClasses, getVisualClasses, headingSizes, inputBaseClasses, inputWidthSizes, interactiveSizes, logoSizes, marginX, marginY, overlaySizes, sectionPadding, spinnerSizes, stackHeights, stackMaxHeights, stackMaxWidths, stackMinHeights, stackMinWidths, stackWidths, statusLabelSizes, textSizes, validationBorderClasses, validationRingClasses, validationTextClasses, visualSizes } from "./theme/size-tokens.js";
2
+ import { default as default2, AccordionItem } from "./components/layout/accordion/accordion.js";
3
+ import { default as default3 } from "./components/feedback/alert/alert.js";
4
+ import { default as default4, useAuth } from "./components/system/auth-provider/auth-provider.js";
5
+ import { default as default5 } from "./components/data-display/avatar/avatar.js";
6
+ import { default as default6 } from "./components/data-display/badge/badge.js";
7
+ import { default as default7 } from "./components/navigation/breadcrumbs/breadcrumbs.js";
8
+ import { default as default8 } from "./components/forms/button/button.js";
9
+ import { default as default9 } from "./components/forms/button-group/button-group.js";
10
+ import { default as default10 } from "./components/forms/button/button-with-icon.js";
11
+ import { default as default11 } from "./components/forms/calendar/calendar.js";
12
+ import { default as default12 } from "./components/layout/card/card.js";
13
+ import { default as default13 } from "./components/layout/card/card-actions.js";
14
+ import { default as default14 } from "./components/layout/card/card-body.js";
15
+ import { default as default15 } from "./components/layout/card/card-figure.js";
16
+ import { default as default16 } from "./components/layout/card/card-footer.js";
17
+ import { default as default17 } from "./components/layout/card/card-header.js";
18
+ import { default as default18 } from "./components/layout/card/card-title.js";
19
+ import { default as default19 } from "./components/forms/checkbox/checkbox.js";
20
+ import { default as default20 } from "./components/data-display/chip/chip.js";
21
+ import { default as default21 } from "./components/typography/code/code.js";
22
+ import { default as default22 } from "./components/data-display/code-block/code-block.js";
23
+ import { default as default23 } from "./components/forms/code/code.js";
24
+ import { default as default24 } from "./components/system/color-mode-toggle/color-mode-toggle.js";
25
+ import { default as default25 } from "./components/layout/container/container.js";
26
+ import { default as default26 } from "./components/data-display/data-table/data-table.js";
27
+ import { default as default27 } from "./components/forms/date-picker/date-picker.js";
28
+ import { default as default28 } from "./components/feedback/dialog/delete-dialog.js";
29
+ import { default as default29 } from "./components/feedback/dialog/dialog.js";
30
+ import { default as default30 } from "./components/layout/divider/divider.js";
31
+ import { default as default31 } from "./components/layout/drawer/drawer.js";
32
+ import { default as default32, DropdownItem, DropdownSeparator } from "./components/navigation/dropdown/dropdown.js";
33
+ import { default as default33 } from "./components/forms/editable-text/editable-text.js";
34
+ import { default as default34 } from "./components/data-display/empty-state/empty-state.js";
35
+ import { default as default35 } from "./components/feedback/error-page/error-400.js";
36
+ import { default as default36 } from "./components/feedback/error-page/error-401.js";
37
+ import { default as default37 } from "./components/feedback/error-page/error-403.js";
38
+ import { default as default38 } from "./components/feedback/error-page/error-404.js";
39
+ import { default as default39 } from "./components/layout/feature-section/feature-section.js";
40
+ import { default as default40 } from "./components/forms/fieldset/fieldset.js";
41
+ import { default as default41 } from "./components/layout/footer/footer.js";
42
+ import { default as default42 } from "./components/forms/form/form.js";
43
+ import { default as default43 } from "./components/forms/form-checkbox/form-checkbox.js";
44
+ import { default as default44 } from "./components/forms/form-checkbox-group/form-checkbox-group.js";
45
+ import { default as default45 } from "./components/forms/form-input/form-input.js";
46
+ import { default as default46 } from "./components/forms/form-select/form-select.js";
47
+ import { default as default47 } from "./components/forms/form-textarea/form-textarea.js";
48
+ import { default as default48 } from "./components/layout/grid/grid.js";
49
+ import { default as default49 } from "./components/typography/heading/heading.js";
50
+ import { default as default50 } from "./components/layout/hero/hero.js";
51
+ import { Icon } from "./components/system/icon/icon.js";
52
+ import { default as default51 } from "./components/forms/button/icon-button.js";
53
+ import { default as default52 } from "./components/forms/button/inline-button.js";
54
+ import { default as default53 } from "./components/forms/input/input.js";
55
+ import { default as default54 } from "./components/forms/input-group/input-group.js";
56
+ import { default as default55 } from "./components/layout/left-nav-layout/left-nav-item.js";
57
+ import { default as default56 } from "./components/layout/left-nav-layout/left-nav-layout.js";
58
+ import { default as default57 } from "./components/layout/left-nav-layout/left-nav-section.js";
59
+ import { default as default58 } from "./components/typography/link/link.js";
60
+ import { List, ListItem } from "./components/data-display/list/list.js";
61
+ import { default as default59 } from "./components/feedback/loading-container/loading-container.js";
62
+ import { default as default60 } from "./components/feedback/modal/modal.js";
63
+ import { default as default61 } from "./components/forms/multi-select/multi-select.js";
64
+ import { default as default62 } from "./components/navigation/nav/nav.js";
65
+ import { default as default63 } from "./components/navigation/nav-dropdown/nav-dropdown.js";
66
+ import { default as default64 } from "./components/navigation/nav-dropdown/nav-dropdown-item.js";
67
+ import { default as default65 } from "./components/navigation/navbar/navbar.js";
68
+ import { default as default66 } from "./components/navigation/navbar/navbar-brand.js";
69
+ import { default as default67 } from "./components/navigation/navbar/navbar-link.js";
70
+ import { default as default68 } from "./components/navigation/navbar/navbar-toggle.js";
71
+ import { default as default69 } from "./components/navigation/notification-dropdown/notification-dropdown.js";
72
+ import { default as default70 } from "./components/feedback/overlay/useOverlay.js";
73
+ import { default as default71 } from "./components/layout/page/page.js";
74
+ import { default as default72 } from "./components/layout/page-header/page-header.js";
75
+ import { PageTransition } from "./components/layout/page-transition/page-transition.js";
76
+ import { default as default73 } from "./components/navigation/pagination/pagination.js";
77
+ import { default as default74 } from "./components/feedback/popover/popover.js";
78
+ import { default as default75 } from "./components/feedback/progress-bar/progress-bar.js";
79
+ import { default as default76 } from "./components/forms/radio/radio.js";
80
+ import { default as default77 } from "./components/forms/radio-group/radio-group.js";
81
+ import { default as default78 } from "./components/navigation/scroll-nav/scroll-nav.js";
82
+ import { default as default79 } from "./components/layout/section/section.js";
83
+ import { default as default80 } from "./components/layout/section-header/section-header.js";
84
+ import { default as default81 } from "./components/forms/select/select.js";
85
+ import { default as default82 } from "./components/forms/select/select-item.js";
86
+ import { default as default83 } from "./components/navigation/sidebar/sidebar.js";
87
+ import { default as default84 } from "./components/feedback/skeleton/skeleton.js";
88
+ import { default as default85 } from "./components/forms/slider/slider.js";
89
+ import { default as default86, useStaggeredTransition } from "./components/feedback/smooth-transition/smooth-transition.js";
90
+ import { default as default87 } from "./components/feedback/spinner/spinner.js";
91
+ import { default as default88 } from "./components/layout/stack/stack.js";
92
+ import { default as default89 } from "./components/data-display/badge/status-label.js";
93
+ import { default as default90 } from "./components/navigation/stepper/stepper.js";
94
+ import { default as default91 } from "./components/forms/switch/switch.js";
95
+ import { Table, TableBody, TableCell, TableFooter, TableHeadCell, TableHeader, TableRow } from "./components/data-display/table/table.js";
96
+ import { default as default92 } from "./components/navigation/tabs/tabs.js";
97
+ import { default as default93 } from "./components/typography/text/text.js";
98
+ import { default as default94 } from "./components/forms/textarea/textarea.js";
99
+ import { ThemeProvider, useTheme } from "./components/system/theme-provider/theme-provider.js";
100
+ import { default as default95, TimelineItem } from "./components/data-display/timeline/timeline.js";
101
+ import { default as default96 } from "./components/feedback/toast/toast.js";
102
+ import { default as default97 } from "./components/feedback/tooltip/tooltip.js";
103
+ import { default as default98 } from "./hooks/useDebounce.js";
104
+ import { default as default99 } from "./hooks/useScrollReset.js";
105
+ import { default as default100 } from "./components/data-display/data-table/use-table.js";
106
+ import { ActionCard } from "./components/layout/action-card/action-card.js";
107
+ import { GoogleLogo } from "./components/branding/google-logo.js";
108
+ import { HyddenLogo } from "./components/branding/hydden-logo.js";
109
+ import { MicrosoftLogo } from "./components/branding/microsoft-logo.js";
110
+ import { SettingItem } from "./components/layout/settings-page/setting-item.js";
111
+ import { SettingsPage } from "./components/layout/settings-page/settings-page.js";
112
+ import { SettingsSection } from "./components/layout/settings-page/settings-section.js";
113
+ import { authFetch, checkAuthStatus, getCurrentUser, loginExternal, logoutExternal, openLoginPopup, redirectToLogin } from "./components/system/auth-provider/auth-utils.js";
114
+ export {
115
+ default2 as Accordion,
116
+ AccordionItem,
117
+ ActionCard,
118
+ default3 as Alert,
119
+ default4 as AuthProvider,
120
+ default5 as Avatar,
121
+ default6 as Badge,
122
+ default7 as Breadcrumbs,
123
+ default8 as Button,
124
+ default9 as ButtonGroup,
125
+ default10 as ButtonWithIcon,
126
+ default11 as Calendar,
127
+ default12 as Card,
128
+ default13 as CardActions,
129
+ default14 as CardBody,
130
+ default15 as CardFigure,
131
+ default16 as CardFooter,
132
+ default17 as CardHeader,
133
+ default18 as CardTitle,
134
+ default19 as Checkbox,
135
+ default20 as Chip,
136
+ default21 as Code,
137
+ default22 as CodeBlock,
138
+ default23 as CodeInput,
139
+ default24 as ColorModeToggle,
140
+ default25 as Container,
141
+ default26 as DataTable,
142
+ default27 as DatePicker,
143
+ default28 as DeleteDialog,
144
+ default29 as Dialog,
145
+ default30 as Divider,
146
+ default31 as Drawer,
147
+ default32 as Dropdown,
148
+ DropdownItem,
149
+ DropdownSeparator,
150
+ default33 as EditableText,
151
+ default34 as EmptyState,
152
+ default35 as Error400,
153
+ default36 as Error401,
154
+ default37 as Error403,
155
+ default38 as Error404,
156
+ default39 as FeatureSection,
157
+ default40 as Fieldset,
158
+ default41 as Footer,
159
+ default42 as Form,
160
+ default43 as FormCheckbox,
161
+ default44 as FormCheckboxGroup,
162
+ default45 as FormInput,
163
+ default46 as FormSelect,
164
+ default47 as FormTextarea,
165
+ GoogleLogo,
166
+ default48 as Grid,
167
+ default49 as Heading,
168
+ default50 as Hero,
169
+ HyddenLogo,
170
+ Icon,
171
+ default51 as IconButton,
172
+ default52 as InlineButton,
173
+ default53 as Input,
174
+ default54 as InputGroup,
175
+ default55 as LeftNavItem,
176
+ default56 as LeftNavLayout,
177
+ default57 as LeftNavSection,
178
+ default58 as Link,
179
+ List,
180
+ ListItem,
181
+ default59 as LoadingContainer,
182
+ MicrosoftLogo,
183
+ default60 as Modal,
184
+ default61 as MultiSelect,
185
+ default62 as Nav,
186
+ default63 as NavDropdown,
187
+ default64 as NavDropdownItem,
188
+ default65 as Navbar,
189
+ default66 as NavbarBrand,
190
+ default67 as NavbarLink,
191
+ default68 as NavbarToggle,
192
+ default69 as NotificationDropdown,
193
+ default70 as OverlayProvider,
194
+ default71 as Page,
195
+ default72 as PageHeader,
196
+ PageTransition,
197
+ default73 as Pagination,
198
+ default74 as Popover,
199
+ default75 as ProgressBar,
200
+ default76 as Radio,
201
+ default77 as RadioGroup,
202
+ default78 as ScrollNav,
203
+ default79 as Section,
204
+ default80 as SectionHeader,
205
+ default81 as Select,
206
+ default82 as SelectItem,
207
+ SettingItem,
208
+ SettingsPage,
209
+ SettingsSection,
210
+ default83 as Sidebar,
211
+ default84 as Skeleton,
212
+ default85 as Slider,
213
+ default86 as SmoothTransition,
214
+ default87 as Spinner,
215
+ default88 as Stack,
216
+ default89 as StatusLabel,
217
+ default90 as Stepper,
218
+ default91 as Switch,
219
+ Table,
220
+ TableBody,
221
+ TableCell,
222
+ TableFooter,
223
+ TableHeadCell,
224
+ TableHeader,
225
+ TableRow,
226
+ default92 as Tabs,
227
+ default93 as Text,
228
+ default94 as Textarea,
229
+ ThemeProvider,
230
+ default95 as Timeline,
231
+ TimelineItem,
232
+ default96 as Toast,
233
+ default97 as Tooltip,
234
+ authFetch,
235
+ avatarSizes,
236
+ badgeSizes,
237
+ borderRadius,
238
+ cardMargin,
239
+ cardPadding,
240
+ cardSizes,
241
+ checkAuthStatus,
242
+ chipSizes,
243
+ codeSizes,
244
+ containerHeight,
245
+ containerMaxHeights,
246
+ containerMaxWidths,
247
+ containerMinHeights,
248
+ containerMinWidths,
249
+ containerWidth,
250
+ formSpacing,
251
+ gapSizes,
252
+ getCurrentUser,
253
+ getIconPixels,
254
+ getInputClasses,
255
+ getVisualClasses,
256
+ headingSizes,
257
+ inputBaseClasses,
258
+ inputWidthSizes,
259
+ interactiveSizes,
260
+ loginExternal,
261
+ logoSizes,
262
+ logoutExternal,
263
+ marginX,
264
+ marginY,
265
+ openLoginPopup,
266
+ overlaySizes,
267
+ redirectToLogin,
268
+ sectionPadding,
269
+ spinnerSizes,
270
+ stackHeights,
271
+ stackMaxHeights,
272
+ stackMaxWidths,
273
+ stackMinHeights,
274
+ stackMinWidths,
275
+ stackWidths,
276
+ statusLabelSizes,
277
+ textSizes,
278
+ useAuth,
279
+ default98 as useDebounce,
280
+ default99 as useScrollReset,
281
+ useStaggeredTransition,
282
+ default100 as useTable,
283
+ useTheme,
284
+ validationBorderClasses,
285
+ validationRingClasses,
286
+ validationTextClasses,
287
+ visualSizes
222
288
  };
223
- function RadioGroup({
224
- children,
225
- name,
226
- label,
227
- orientation = "vertical",
228
- className = "",
229
- value,
230
- onChange
231
- }) {
232
- const orientationClasses = orientation === "horizontal" ? "flex flex-row gap-4" : "flex flex-col gap-2";
233
- return /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: { name, value, onChange }, children: /* @__PURE__ */ jsxs("fieldset", { className, children: [
234
- label && /* @__PURE__ */ jsx("legend", { className: "text-sm font-medium text-foreground mb-2", children: label }),
235
- /* @__PURE__ */ jsx("div", { className: orientationClasses, role: "radiogroup", children })
236
- ] }) });
237
- }
238
- RadioGroup.displayName = "RadioGroup";
239
- var radio_group_default = RadioGroup;
240
- function Radio({
241
- checked,
242
- onChange,
243
- disabled = false,
244
- className = "",
245
- ariaLabel,
246
- id,
247
- name: nameProp,
248
- value,
249
- validationState = "default"
250
- }) {
251
- const radioGroup = useRadioGroup();
252
- const name = radioGroup?.name || nameProp;
253
- const isChecked = radioGroup?.value !== void 0 ? radioGroup.value === value : checked;
254
- const handleChange = (e) => {
255
- if (radioGroup?.onChange && value) {
256
- radioGroup.onChange(value);
257
- }
258
- onChange?.(e);
259
- };
260
- const validationClasses = {
261
- default: "border-input focus:ring-ring",
262
- error: "border-destructive focus:ring-destructive",
263
- success: "border-success focus:ring-success",
264
- warning: "border-warning focus:ring-warning"
265
- };
266
- const generatedId = useId();
267
- const inputId = id || `radio-${value || generatedId}`;
268
- return /* @__PURE__ */ jsxs(
269
- "div",
270
- {
271
- className: `inline-flex items-center justify-center relative ${disabled ? "opacity-60 cursor-not-allowed" : "cursor-pointer"}`,
272
- children: [
273
- /* @__PURE__ */ jsx(
274
- "input",
275
- {
276
- type: "radio",
277
- checked: isChecked,
278
- onChange: handleChange,
279
- disabled,
280
- "aria-label": ariaLabel,
281
- "aria-invalid": validationState === "error" ? "true" : void 0,
282
- id: inputId,
283
- name,
284
- value,
285
- className: "peer sr-only"
286
- }
287
- ),
288
- /* @__PURE__ */ jsx(
289
- "span",
290
- {
291
- "aria-hidden": "true",
292
- onClick: () => !disabled && document.getElementById(inputId)?.click(),
293
- className: `w-5 h-5 rounded-full border-2 flex items-center justify-center transition-all duration-200 ease-out bg-background shadow-sm
294
- before:content-[''] before:w-2.5 before:h-2.5 before:rounded-full before:scale-0 before:transition-transform before:duration-200 before:ease-out before:bg-primary
295
- peer-checked:before:scale-100 peer-checked:border-primary
296
- peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-ring
297
- peer-disabled:opacity-50 peer-disabled:cursor-not-allowed
298
- peer-hover:border-primary/60 peer-active:scale-95
299
- ${validationClasses[validationState]} ${className}`
300
- }
301
- )
302
- ]
303
- }
304
- );
305
- }
306
- Radio.displayName = "Radio";
307
- var radio_default = Radio;
308
- function Select({
309
- value,
310
- onChange,
311
- disabled = false,
312
- className = "",
313
- ariaLabel,
314
- id,
315
- name,
316
- children,
317
- required = false,
318
- size = "md",
319
- validationState = "default"
320
- }) {
321
- const sizeClasses = {
322
- sm: "h-8 px-3 py-1.5 text-sm",
323
- md: "h-10 px-3 py-2 text-sm pr-10",
324
- lg: "h-12 px-4 py-3 text-base pr-10"
325
- };
326
- const validationClasses = {
327
- default: "border-input focus:border-ring",
328
- error: "border-destructive focus:border-destructive",
329
- success: "border-success focus:border-success",
330
- warning: "border-warning focus:border-warning"
331
- };
332
- return /* @__PURE__ */ jsx(
333
- "select",
334
- {
335
- value,
336
- onChange,
337
- disabled,
338
- "aria-label": ariaLabel,
339
- id,
340
- name,
341
- required,
342
- "aria-invalid": validationState === "error",
343
- className: `flex w-full rounded-lg border bg-background shadow-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring/20 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted/50 appearance-none bg-[url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20stroke%3D%22%236b7280%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M6%208l4%204%204-4%22%2F%3E%3C%2Fsvg%3E')] bg-[length:1.5em] bg-[right_0.5rem_center] bg-no-repeat ${sizeClasses[size]} ${validationClasses[validationState]} ${className}`,
344
- children
345
- }
346
- );
347
- }
348
- Select.displayName = "Select";
349
- var select_default = Select;
350
- function SelectItem({ value, disabled = false, children }) {
351
- return /* @__PURE__ */ jsx("option", { value, disabled, children });
352
- }
353
- SelectItem.displayName = "SelectItem";
354
- var select_item_default = SelectItem;
355
- function MultiSelect({
356
- options,
357
- value = [],
358
- onChange,
359
- placeholder = "Select options...",
360
- disabled = false,
361
- maxSelections,
362
- size = "md",
363
- className = ""
364
- }) {
365
- const [isOpen, setIsOpen] = useState(false);
366
- const [searchQuery, setSearchQuery] = useState("");
367
- const [focusedIndex, setFocusedIndex] = useState(-1);
368
- const containerRef = useRef(null);
369
- const searchInputRef = useRef(null);
370
- const selectedValues = value || [];
371
- useEffect(() => {
372
- const handleClickOutside = (event) => {
373
- if (containerRef.current && !containerRef.current.contains(event.target)) {
374
- setIsOpen(false);
375
- setSearchQuery("");
376
- }
377
- };
378
- if (isOpen) {
379
- document.addEventListener("mousedown", handleClickOutside);
380
- return () => document.removeEventListener("mousedown", handleClickOutside);
381
- }
382
- return void 0;
383
- }, [isOpen]);
384
- useEffect(() => {
385
- if (isOpen && searchInputRef.current) {
386
- searchInputRef.current.focus();
387
- }
388
- }, [isOpen]);
389
- const filteredOptions = options.filter((option) => option.label.toLowerCase().includes(searchQuery.toLowerCase()));
390
- const handleToggleOption = (optionValue) => {
391
- const isSelected = selectedValues.includes(optionValue);
392
- let newValues;
393
- if (isSelected) {
394
- newValues = selectedValues.filter((v) => v !== optionValue);
395
- } else {
396
- if (maxSelections && selectedValues.length >= maxSelections) {
397
- return;
398
- }
399
- newValues = [...selectedValues, optionValue];
400
- }
401
- onChange?.(newValues);
402
- };
403
- const handleRemoveValue = (valueToRemove, e) => {
404
- e.stopPropagation();
405
- const newValues = selectedValues.filter((v) => v !== valueToRemove);
406
- onChange?.(newValues);
407
- };
408
- const handleClearAll = (e) => {
409
- e.stopPropagation();
410
- onChange?.([]);
411
- };
412
- const handleKeyDown = (e) => {
413
- if (disabled) return;
414
- switch (e.key) {
415
- case "Enter":
416
- e.preventDefault();
417
- if (!isOpen) {
418
- setIsOpen(true);
419
- } else if (focusedIndex >= 0 && focusedIndex < filteredOptions.length) {
420
- handleToggleOption(filteredOptions[focusedIndex].value);
421
- }
422
- break;
423
- case "Escape":
424
- e.preventDefault();
425
- setIsOpen(false);
426
- setSearchQuery("");
427
- break;
428
- case "ArrowDown":
429
- e.preventDefault();
430
- if (!isOpen) {
431
- setIsOpen(true);
432
- } else {
433
- setFocusedIndex((prev) => prev < filteredOptions.length - 1 ? prev + 1 : prev);
434
- }
435
- break;
436
- case "ArrowUp":
437
- e.preventDefault();
438
- setFocusedIndex((prev) => prev > 0 ? prev - 1 : 0);
439
- break;
440
- }
441
- };
442
- const sizeClasses = {
443
- sm: { container: "min-h-8 py-1 px-2", text: "text-sm", chip: "text-xs px-1.5 py-0.5", icon: 14 },
444
- md: { container: "min-h-10 py-2 px-3", text: "text-base", chip: "text-sm px-2 py-1", icon: 16 },
445
- lg: { container: "min-h-12 py-2 px-4", text: "text-lg", chip: "text-base px-2.5 py-1", icon: 18 }
446
- };
447
- const currentSize = sizeClasses[size];
448
- const getSelectedLabels = () => {
449
- return selectedValues.map((v) => options.find((opt) => opt.value === v)?.label).filter(Boolean);
450
- };
451
- return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: `relative w-full ${className}`, children: [
452
- /* @__PURE__ */ jsxs(
453
- "div",
454
- {
455
- className: `
456
- w-full flex flex-wrap items-center gap-1.5
457
- border border-input rounded-md
458
- bg-background text-foreground
459
- cursor-pointer
460
- transition-all duration-200
461
- ${currentSize.container}
462
- ${currentSize.text}
463
- ${isOpen ? "ring-2 ring-ring ring-offset-2" : "hover:border-ring"}
464
- ${disabled ? "opacity-50 cursor-not-allowed" : ""}
465
- `.trim(),
466
- onClick: () => !disabled && setIsOpen(!isOpen),
467
- onKeyDown: handleKeyDown,
468
- tabIndex: disabled ? -1 : 0,
469
- role: "button",
470
- "aria-haspopup": "listbox",
471
- "aria-expanded": isOpen,
472
- "aria-label": "Multi-select",
473
- children: [
474
- selectedValues.length > 0 ? /* @__PURE__ */ jsx(Fragment, { children: getSelectedLabels().map((label, index) => /* @__PURE__ */ jsxs(
475
- "span",
476
- {
477
- className: `
478
- inline-flex items-center gap-1
479
- bg-primary/10 text-primary rounded-md font-medium
480
- animate-scaleIn origin-left
481
- transition-all duration-200
482
- ${currentSize.chip}
483
- `.trim(),
484
- children: [
485
- label,
486
- /* @__PURE__ */ jsx(
487
- "button",
488
- {
489
- type: "button",
490
- onClick: (e) => handleRemoveValue(selectedValues[index], e),
491
- className: "hover:bg-primary/20 rounded-sm transition-colors duration-150",
492
- "aria-label": `Remove ${label}`,
493
- tabIndex: -1,
494
- children: /* @__PURE__ */ jsx(IconX, { size: currentSize.icon - 4 })
495
- }
496
- )
497
- ]
498
- },
499
- selectedValues[index]
500
- )) }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: placeholder }),
501
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 ml-auto flex-shrink-0", children: [
502
- selectedValues.length > 0 && !disabled && /* @__PURE__ */ jsx(
503
- "button",
504
- {
505
- type: "button",
506
- onClick: handleClearAll,
507
- className: "p-1 hover:bg-muted rounded transition-colors",
508
- "aria-label": "Clear all",
509
- tabIndex: -1,
510
- children: /* @__PURE__ */ jsx(IconX, { size: currentSize.icon })
511
- }
512
- ),
513
- /* @__PURE__ */ jsx(
514
- IconChevronDown,
515
- {
516
- size: currentSize.icon,
517
- className: `text-muted-foreground transition-transform ${isOpen ? "rotate-180" : ""}`
518
- }
519
- )
520
- ] })
521
- ]
522
- }
523
- ),
524
- isOpen && !disabled && /* @__PURE__ */ jsxs("div", { className: "absolute top-full left-0 right-0 mt-2 z-50 bg-card border border-border rounded-md shadow-lg max-h-64 overflow-hidden flex flex-col animate-scaleIn origin-top", children: [
525
- /* @__PURE__ */ jsx("div", { className: "p-2 border-b border-border", children: /* @__PURE__ */ jsx(
526
- "input",
527
- {
528
- ref: searchInputRef,
529
- type: "text",
530
- value: searchQuery,
531
- onChange: (e) => {
532
- setSearchQuery(e.target.value);
533
- setFocusedIndex(-1);
534
- },
535
- placeholder: "Search...",
536
- className: `w-full px-3 py-1.5 ${currentSize.text} border border-input rounded-md bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring`,
537
- onClick: (e) => e.stopPropagation()
538
- }
539
- ) }),
540
- /* @__PURE__ */ jsx("div", { className: "overflow-y-auto", role: "listbox", children: filteredOptions.length > 0 ? filteredOptions.map((option, index) => {
541
- const isSelected = selectedValues.includes(option.value);
542
- const isFocused = index === focusedIndex;
543
- const isDisabled = Boolean(maxSelections && !isSelected && selectedValues.length >= maxSelections);
544
- return /* @__PURE__ */ jsxs(
545
- "button",
546
- {
547
- type: "button",
548
- onClick: () => !isDisabled && handleToggleOption(option.value),
549
- className: `
550
- w-full px-3 py-2 flex items-center justify-between gap-2
551
- transition-all duration-200 text-left ${currentSize.text}
552
- ${isFocused ? "bg-muted" : ""}
553
- ${isSelected ? "bg-primary/10 text-primary font-medium" : "hover:bg-muted"}
554
- ${isDisabled ? "opacity-50 cursor-not-allowed" : ""}
555
- `.trim(),
556
- role: "option",
557
- "aria-selected": isSelected,
558
- disabled: isDisabled,
559
- children: [
560
- /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: option.label }),
561
- isSelected && /* @__PURE__ */ jsx(
562
- IconCheck,
563
- {
564
- size: currentSize.icon,
565
- className: "flex-shrink-0 animate-scaleIn"
566
- }
567
- )
568
- ]
569
- },
570
- option.value
571
- );
572
- }) : /* @__PURE__ */ jsx("div", { className: "px-3 py-6 text-center text-muted-foreground", children: "No options found" }) }),
573
- maxSelections && /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 border-t border-border bg-muted/30 text-xs text-muted-foreground", children: [
574
- selectedValues.length,
575
- " / ",
576
- maxSelections,
577
- " selected"
578
- ] })
579
- ] })
580
- ] });
581
- }
582
- MultiSelect.displayName = "MultiSelect";
583
- var multi_select_default = MultiSelect;
584
- function Textarea({
585
- value,
586
- onChange,
587
- placeholder,
588
- disabled = false,
589
- className = "",
590
- ariaLabel,
591
- id,
592
- name,
593
- rows = 3,
594
- required = false,
595
- validationState = "default"
596
- }) {
597
- const validationClasses = {
598
- default: "border-input focus:border-ring",
599
- error: "border-destructive focus:border-destructive",
600
- success: "border-success focus:border-success",
601
- warning: "border-warning focus:border-warning"
602
- };
603
- return /* @__PURE__ */ jsx(
604
- "textarea",
605
- {
606
- value,
607
- onChange,
608
- placeholder,
609
- disabled,
610
- "aria-label": ariaLabel,
611
- id,
612
- name,
613
- rows,
614
- required,
615
- "aria-invalid": validationState === "error",
616
- className: `flex min-h-[80px] w-full rounded-lg border bg-background px-3 py-2 text-sm shadow-sm transition-all duration-200 placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring/20 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted/50 resize-y ${validationClasses[validationState]} ${className}`
617
- }
618
- );
619
- }
620
- Textarea.displayName = "Textarea";
621
- var textarea_default = Textarea;
622
- function Switch({
623
- checked = false,
624
- onChange,
625
- disabled = false,
626
- className = "",
627
- ariaLabel,
628
- id,
629
- name,
630
- size = "md",
631
- variant
632
- }) {
633
- const handleChange = (e) => {
634
- onChange?.(e.target.checked);
635
- };
636
- const sizeStyles = {
637
- xs: {
638
- container: "h-4 w-8",
639
- handle: "h-3 w-3",
640
- padding: "p-0.5",
641
- translate: checked ? "translate-x-4" : "translate-x-0"
642
- },
643
- sm: {
644
- container: "h-5 w-10",
645
- handle: "h-4 w-4",
646
- padding: "p-0.5",
647
- translate: checked ? "translate-x-5" : "translate-x-0"
648
- },
649
- md: {
650
- container: "h-6 w-12",
651
- handle: "h-5 w-5",
652
- padding: "p-0.5",
653
- translate: checked ? "translate-x-6" : "translate-x-0"
654
- },
655
- lg: {
656
- container: "h-7 w-14",
657
- handle: "h-6 w-6",
658
- padding: "p-0.5",
659
- translate: checked ? "translate-x-7" : "translate-x-0"
660
- },
661
- xl: {
662
- container: "h-8 w-16",
663
- handle: "h-7 w-7",
664
- padding: "p-0.5",
665
- translate: checked ? "translate-x-8" : "translate-x-0"
666
- }
667
- };
668
- const getVariantColors = () => {
669
- if (!checked) {
670
- return "bg-input border-input";
671
- }
672
- switch (variant) {
673
- case "secondary":
674
- return "bg-secondary border-secondary";
675
- case "accent":
676
- return "bg-accent border-accent";
677
- case "success":
678
- return "bg-success border-success";
679
- case "warning":
680
- return "bg-warning border-warning";
681
- case "info":
682
- return "bg-info border-info";
683
- case "error":
684
- return "bg-destructive border-destructive";
685
- case "neutral":
686
- return "bg-neutral border-neutral";
687
- case "primary":
688
- default:
689
- return "bg-primary border-primary";
690
- }
691
- };
692
- const styles = sizeStyles[size];
693
- return /* @__PURE__ */ jsxs(
694
- "label",
695
- {
696
- className: `relative inline-flex ${styles.container} ${styles.padding} items-center rounded-full border transition-all duration-200 cursor-pointer ${disabled ? "opacity-30 cursor-not-allowed" : ""} ${getVariantColors()} ${className}`,
697
- children: [
698
- /* @__PURE__ */ jsx(
699
- "input",
700
- {
701
- type: "checkbox",
702
- role: "switch",
703
- checked,
704
- onChange: handleChange,
705
- disabled,
706
- "aria-label": ariaLabel,
707
- id,
708
- name,
709
- className: "sr-only"
710
- }
711
- ),
712
- /* @__PURE__ */ jsx(
713
- "span",
714
- {
715
- className: `inline-block ${styles.handle} rounded-full bg-background shadow-sm transition-transform duration-200 ${styles.translate}`
716
- }
717
- )
718
- ]
719
- }
720
- );
721
- }
722
- Switch.displayName = "Switch";
723
- var switch_default = Switch;
724
- function Slider({
725
- value = 50,
726
- onChange,
727
- min = 0,
728
- max = 100,
729
- step = 1,
730
- disabled = false,
731
- className = "",
732
- ariaLabel,
733
- id,
734
- name
735
- }) {
736
- const handleChange = (e) => {
737
- onChange?.(Number(e.target.value));
738
- };
739
- return /* @__PURE__ */ jsx(
740
- "input",
741
- {
742
- type: "range",
743
- value,
744
- onChange: handleChange,
745
- min,
746
- max,
747
- step,
748
- disabled,
749
- "aria-label": ariaLabel,
750
- id,
751
- name,
752
- className: `w-full h-2 bg-muted/30 rounded-lg appearance-none cursor-pointer transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-muted/40 ${className}`,
753
- style: {
754
- background: `linear-gradient(to right, hsl(var(--primary)) 0%, hsl(var(--primary)) ${(value - min) / (max - min) * 100}%, hsl(var(--muted) / 0.3) ${(value - min) / (max - min) * 100}%, hsl(var(--muted) / 0.3) 100%)`
755
- }
756
- }
757
- );
758
- }
759
- Slider.displayName = "Slider";
760
- var slider_default = Slider;
761
- function ButtonGroup({
762
- children,
763
- className = "",
764
- variant = "default",
765
- orientation = "horizontal"
766
- }) {
767
- const baseClasses = "inline-flex";
768
- const orientationClasses = orientation === "horizontal" ? "flex-row" : "flex-col";
769
- let variantClasses = "";
770
- if (variant === "separated") {
771
- variantClasses = "gap-2";
772
- } else if (orientation === "horizontal") {
773
- variantClasses = "[&>button]:rounded-none [&>button:first-child]:rounded-l-md [&>button:last-child]:rounded-r-md [&>button:not(:last-child)]:border-r-0";
774
- } else {
775
- variantClasses = "[&>button]:rounded-none [&>button:first-child]:rounded-t-md [&>button:last-child]:rounded-b-md [&>button:not(:last-child)]:border-b-0";
776
- }
777
- return /* @__PURE__ */ jsx("div", { className: `${baseClasses} ${orientationClasses} ${variantClasses} ${className}`, children });
778
- }
779
- ButtonGroup.displayName = "ButtonGroup";
780
- var button_group_default = ButtonGroup;
781
- function Text({
782
- children,
783
- variant = "body",
784
- size,
785
- weight = "semibold",
786
- // elevated default weight
787
- className = "",
788
- noMargin = false
789
- }) {
790
- const variantClasses = {
791
- body: "text-foreground",
792
- muted: "text-muted-foreground",
793
- small: "text-muted-foreground"
794
- };
795
- const sizeClasses = {
796
- xs: "text-xs",
797
- sm: "text-sm",
798
- base: "text-base",
799
- lg: "text-lg",
800
- xl: "text-xl"
801
- };
802
- const weightClasses = {
803
- normal: "font-normal",
804
- medium: "font-medium",
805
- semibold: "font-semibold",
806
- bold: "font-bold"
807
- };
808
- const defaultSizes = {
809
- body: "lg",
810
- // bigger default body text
811
- muted: "base",
812
- // muted still readable
813
- small: "sm"
814
- // small bumped up slightly
815
- };
816
- const finalSize = size || defaultSizes[variant];
817
- const margin = noMargin ? "" : "mb-4";
818
- return /* @__PURE__ */ jsx(
819
- "p",
820
- {
821
- className: `${variantClasses[variant]} ${sizeClasses[finalSize]} ${weightClasses[weight]} ${margin} ${className}`,
822
- children
823
- }
824
- );
825
- }
826
- Text.displayName = "Text";
827
- var text_default = Text;
828
- function Stack({
829
- children,
830
- className = "",
831
- direction = "vertical",
832
- spacing = "md",
833
- align = "stretch",
834
- justify
835
- }) {
836
- const spacingClasses = {
837
- none: "gap-0",
838
- sm: "gap-2",
839
- md: "gap-4",
840
- lg: "gap-6",
841
- xl: "gap-8"
842
- };
843
- const alignClasses = {
844
- start: "items-start",
845
- center: "items-center",
846
- end: "items-end",
847
- stretch: "items-stretch"
848
- };
849
- const justifyClasses = {
850
- start: "justify-start",
851
- center: "justify-center",
852
- end: "justify-end",
853
- between: "justify-between",
854
- around: "justify-around"
855
- };
856
- const directionClass = direction === "horizontal" ? "flex-row" : "flex-col";
857
- const justifyClass = justify ? justifyClasses[justify] : "";
858
- return /* @__PURE__ */ jsx(
859
- "div",
860
- {
861
- "data-component": "Stack",
862
- className: `flex ${directionClass} ${spacingClasses[spacing]} ${alignClasses[align]} ${justifyClass} ${className}`,
863
- children
864
- }
865
- );
866
- }
867
- Stack.displayName = "Stack";
868
- var stack_default = Stack;
869
- function FormField({
870
- children,
871
- label,
872
- htmlFor,
873
- error,
874
- helperText,
875
- required = false,
876
- className = "",
877
- validationState = "default"
878
- }) {
879
- const effectiveValidationState = error ? "error" : validationState;
880
- const childWithValidation = isValidElement(children) ? cloneElement(children, {
881
- validationState: effectiveValidationState
882
- }) : children;
883
- return /* @__PURE__ */ jsxs(stack_default, { direction: "vertical", spacing: "sm", className, children: [
884
- label && /* @__PURE__ */ jsx("label", { htmlFor, children: /* @__PURE__ */ jsxs(text_default, { variant: "body", size: "sm", noMargin: true, className: "font-medium", children: [
885
- label,
886
- required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
887
- ] }) }),
888
- childWithValidation,
889
- error && /* @__PURE__ */ jsx(text_default, { variant: "body", size: "sm", noMargin: true, className: "text-destructive", children: error }),
890
- !error && helperText && /* @__PURE__ */ jsx(text_default, { variant: "muted", size: "sm", noMargin: true, children: helperText })
891
- ] });
892
- }
893
- FormField.displayName = "FormField";
894
- var form_field_default = FormField;
895
- function InputGroup({ children, prefix, suffix, className = "" }) {
896
- const isTextSuffix = typeof suffix === "string" || typeof suffix === "number";
897
- return /* @__PURE__ */ jsxs(
898
- "div",
899
- {
900
- className: [
901
- "inline-flex items-stretch rounded-lg border border-input shadow-sm bg-background",
902
- "focus-within:ring-2 focus-within:ring-ring/20 focus-within:border-ring",
903
- "transition-colors duration-150 overflow-hidden",
904
- // Use CSS nesting to style child input without cloning
905
- "[&>input]:border-0 [&>input]:shadow-none [&>input]:rounded-none [&>input]:ring-0",
906
- "[&>input]:focus:ring-0 [&>input]:focus:border-0 [&>input]:bg-transparent",
907
- "[&>input]:flex-1 [&>input]:min-w-0",
908
- // Style child buttons (both direct and nested)
909
- "[&_button]:rounded-none [&_button]:border-0 [&_button]:shadow-none [&_button]:m-0",
910
- "[&_button]:h-full",
911
- className
912
- ].filter(Boolean).join(" "),
913
- children: [
914
- prefix && /* @__PURE__ */ jsx("div", { className: "flex items-center px-3 bg-muted/50 text-muted-foreground text-sm shrink-0", children: prefix }),
915
- children,
916
- suffix && /* @__PURE__ */ jsx(
917
- "div",
918
- {
919
- className: isTextSuffix ? "flex items-center px-3 bg-muted/50 text-muted-foreground text-sm shrink-0" : "flex items-stretch shrink-0",
920
- children: suffix
921
- }
922
- )
923
- ]
924
- }
925
- );
926
- }
927
- InputGroup.displayName = "InputGroup";
928
- var input_group_default = InputGroup;
929
- function Calendar({ value, onChange, minDate, maxDate, disabled = false, className = "" }) {
930
- const [currentMonth, setCurrentMonth] = useState(value || /* @__PURE__ */ new Date());
931
- const [selectedDate, setSelectedDate] = useState(value);
932
- const getDaysInMonth = (date) => {
933
- return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
934
- };
935
- const getFirstDayOfMonth = (date) => {
936
- return new Date(date.getFullYear(), date.getMonth(), 1).getDay();
937
- };
938
- const handleDateClick = (day) => {
939
- if (disabled) return;
940
- const newDate = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), day);
941
- if (minDate && newDate < minDate) return;
942
- if (maxDate && newDate > maxDate) return;
943
- setSelectedDate(newDate);
944
- onChange?.(newDate);
945
- };
946
- const handlePreviousMonth = () => {
947
- setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1));
948
- };
949
- const handleNextMonth = () => {
950
- setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1));
951
- };
952
- const daysInMonth = getDaysInMonth(currentMonth);
953
- const firstDayOfMonth = getFirstDayOfMonth(currentMonth);
954
- const monthName = currentMonth.toLocaleDateString("en-US", { month: "long", year: "numeric" });
955
- const weekDays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
956
- const isDateSelected = (day) => {
957
- if (!selectedDate) return false;
958
- return selectedDate.getDate() === day && selectedDate.getMonth() === currentMonth.getMonth() && selectedDate.getFullYear() === currentMonth.getFullYear();
959
- };
960
- const isDateDisabled = (day) => {
961
- const date = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), day);
962
- if (minDate && date < minDate) return true;
963
- if (maxDate && date > maxDate) return true;
964
- return false;
965
- };
966
- return /* @__PURE__ */ jsxs(
967
- "div",
968
- {
969
- className: `inline-block border border-border rounded-lg bg-card text-card-foreground shadow-sm p-4 ${disabled ? "opacity-50 pointer-events-none" : ""} ${className}`.trim(),
970
- children: [
971
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
972
- /* @__PURE__ */ jsx(
973
- "button",
974
- {
975
- type: "button",
976
- onClick: handlePreviousMonth,
977
- className: "p-2 hover:bg-muted rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-ring",
978
- "aria-label": "Previous month",
979
- children: /* @__PURE__ */ jsx(
980
- "svg",
981
- {
982
- xmlns: "http://www.w3.org/2000/svg",
983
- width: "20",
984
- height: "20",
985
- viewBox: "0 0 24 24",
986
- fill: "none",
987
- stroke: "currentColor",
988
- strokeWidth: "2",
989
- strokeLinecap: "round",
990
- strokeLinejoin: "round",
991
- children: /* @__PURE__ */ jsx("polyline", { points: "15 18 9 12 15 6" })
992
- }
993
- )
994
- }
995
- ),
996
- /* @__PURE__ */ jsx("span", { className: "font-semibold text-sm", children: monthName }),
997
- /* @__PURE__ */ jsx(
998
- "button",
999
- {
1000
- type: "button",
1001
- onClick: handleNextMonth,
1002
- className: "p-2 hover:bg-muted rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-ring",
1003
- "aria-label": "Next month",
1004
- children: /* @__PURE__ */ jsx(
1005
- "svg",
1006
- {
1007
- xmlns: "http://www.w3.org/2000/svg",
1008
- width: "20",
1009
- height: "20",
1010
- viewBox: "0 0 24 24",
1011
- fill: "none",
1012
- stroke: "currentColor",
1013
- strokeWidth: "2",
1014
- strokeLinecap: "round",
1015
- strokeLinejoin: "round",
1016
- children: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" })
1017
- }
1018
- )
1019
- }
1020
- )
1021
- ] }),
1022
- /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-1 mb-2", children: weekDays.map((day) => /* @__PURE__ */ jsx("div", { className: "w-9 h-9 flex items-center justify-center text-xs font-medium text-muted-foreground", children: day }, day)) }),
1023
- /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-7 gap-1", children: [
1024
- Array.from({ length: firstDayOfMonth }).map((_, index) => /* @__PURE__ */ jsx("div", { className: "w-9 h-9" }, `empty-${index}`)),
1025
- Array.from({ length: daysInMonth }).map((_, index) => {
1026
- const day = index + 1;
1027
- const selected = isDateSelected(day);
1028
- const dateDisabled = isDateDisabled(day);
1029
- return /* @__PURE__ */ jsx(
1030
- "button",
1031
- {
1032
- type: "button",
1033
- onClick: () => handleDateClick(day),
1034
- disabled: dateDisabled,
1035
- className: `
1036
- w-9 h-9 flex items-center justify-center text-sm rounded-md transition-colors
1037
- focus:outline-none focus:ring-2 focus:ring-ring
1038
- ${selected ? "bg-primary text-primary-foreground font-semibold" : "hover:bg-muted"}
1039
- ${dateDisabled ? "text-muted-foreground cursor-not-allowed opacity-50" : ""}
1040
- `.trim(),
1041
- "aria-label": `Select ${day} ${monthName}`,
1042
- "aria-pressed": selected,
1043
- children: day
1044
- },
1045
- day
1046
- );
1047
- })
1048
- ] })
1049
- ]
1050
- }
1051
- );
1052
- }
1053
- Calendar.displayName = "Calendar";
1054
- var calendar_default = Calendar;
1055
- function DatePicker({
1056
- value,
1057
- onChange,
1058
- minDate,
1059
- maxDate,
1060
- placeholder = "Select date",
1061
- disabled = false,
1062
- dateFormat = "MM/DD/YYYY",
1063
- clearable = true,
1064
- className = "",
1065
- size = "md"
1066
- }) {
1067
- const [isOpen, setIsOpen] = useState(false);
1068
- const [selectedDate, setSelectedDate] = useState(value);
1069
- const containerRef = useRef(null);
1070
- const inputRef = useRef(null);
1071
- useEffect(() => {
1072
- setSelectedDate(value);
1073
- }, [value]);
1074
- useEffect(() => {
1075
- const handleClickOutside = (event) => {
1076
- if (containerRef.current && !containerRef.current.contains(event.target)) {
1077
- setIsOpen(false);
1078
- }
1079
- };
1080
- if (isOpen) {
1081
- document.addEventListener("mousedown", handleClickOutside);
1082
- return () => document.removeEventListener("mousedown", handleClickOutside);
1083
- }
1084
- return void 0;
1085
- }, [isOpen]);
1086
- useEffect(() => {
1087
- const handleEscape = (event) => {
1088
- if (event.key === "Escape" && isOpen) {
1089
- setIsOpen(false);
1090
- inputRef.current?.focus();
1091
- }
1092
- };
1093
- if (isOpen) {
1094
- document.addEventListener("keydown", handleEscape);
1095
- return () => document.removeEventListener("keydown", handleEscape);
1096
- }
1097
- return void 0;
1098
- }, [isOpen]);
1099
- const formatDate = (date) => {
1100
- if (!date) return "";
1101
- const month = String(date.getMonth() + 1).padStart(2, "0");
1102
- const day = String(date.getDate()).padStart(2, "0");
1103
- const year = date.getFullYear();
1104
- return dateFormat.replace("MM", month).replace("DD", day).replace("YYYY", String(year)).replace("YY", String(year).slice(-2));
1105
- };
1106
- const handleDateSelect = (date) => {
1107
- setSelectedDate(date);
1108
- onChange?.(date);
1109
- setIsOpen(false);
1110
- inputRef.current?.focus();
1111
- };
1112
- const handleClear = (e) => {
1113
- e.stopPropagation();
1114
- setSelectedDate(void 0);
1115
- onChange?.(void 0);
1116
- inputRef.current?.focus();
1117
- };
1118
- const handleInputClick = () => {
1119
- if (!disabled) {
1120
- setIsOpen(!isOpen);
1121
- }
1122
- };
1123
- const handleKeyDown = (e) => {
1124
- if (e.key === "Enter" || e.key === " ") {
1125
- e.preventDefault();
1126
- setIsOpen(!isOpen);
1127
- }
1128
- };
1129
- const sizeClasses = {
1130
- sm: { container: "h-8 px-3", text: "text-sm", icon: 16 },
1131
- md: { container: "h-10 px-4", text: "text-base", icon: 18 },
1132
- lg: { container: "h-12 px-5", text: "text-lg", icon: 20 }
1133
- };
1134
- const currentSize = sizeClasses[size];
1135
- return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: `relative w-full ${className}`, children: [
1136
- /* @__PURE__ */ jsxs(
1137
- "div",
1138
- {
1139
- className: `
1140
- w-full flex items-center justify-between gap-2
1141
- border border-input rounded-md
1142
- bg-background text-foreground
1143
- cursor-pointer
1144
- transition-all duration-200
1145
- ${currentSize.container}
1146
- ${currentSize.text}
1147
- ${isOpen ? "ring-2 ring-ring ring-offset-2" : "hover:border-ring"}
1148
- ${disabled ? "opacity-50 cursor-not-allowed" : ""}
1149
- `.trim(),
1150
- onClick: handleInputClick,
1151
- role: "button",
1152
- tabIndex: disabled ? -1 : 0,
1153
- onKeyDown: handleKeyDown,
1154
- "aria-haspopup": "dialog",
1155
- "aria-expanded": isOpen,
1156
- "aria-label": "Date picker",
1157
- children: [
1158
- /* @__PURE__ */ jsx(
1159
- "input",
1160
- {
1161
- ref: inputRef,
1162
- type: "text",
1163
- value: formatDate(selectedDate),
1164
- placeholder,
1165
- readOnly: true,
1166
- disabled,
1167
- className: `flex-1 min-w-0 bg-transparent outline-none cursor-pointer placeholder:text-muted-foreground ${currentSize.text}`,
1168
- "aria-label": "Selected date"
1169
- }
1170
- ),
1171
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 flex-shrink-0", children: [
1172
- clearable && selectedDate && !disabled ? /* @__PURE__ */ jsx(
1173
- "button",
1174
- {
1175
- type: "button",
1176
- onClick: handleClear,
1177
- className: "p-1 hover:bg-muted rounded transition-colors flex-shrink-0",
1178
- "aria-label": "Clear date",
1179
- children: /* @__PURE__ */ jsxs(
1180
- "svg",
1181
- {
1182
- xmlns: "http://www.w3.org/2000/svg",
1183
- width: currentSize.icon - 2,
1184
- height: currentSize.icon - 2,
1185
- viewBox: "0 0 24 24",
1186
- fill: "none",
1187
- stroke: "currentColor",
1188
- strokeWidth: "2",
1189
- strokeLinecap: "round",
1190
- strokeLinejoin: "round",
1191
- children: [
1192
- /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
1193
- /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
1194
- ]
1195
- }
1196
- )
1197
- }
1198
- ) : clearable ? /* @__PURE__ */ jsx("div", { className: "w-6 h-6 flex-shrink-0" }) : null,
1199
- /* @__PURE__ */ jsx(IconCalendar, { size: currentSize.icon, className: "text-muted-foreground flex-shrink-0" })
1200
- ] })
1201
- ]
1202
- }
1203
- ),
1204
- isOpen && !disabled && /* @__PURE__ */ jsx(
1205
- "div",
1206
- {
1207
- className: "absolute left-0 top-full mt-2 z-50 animate-scaleIn origin-top",
1208
- role: "dialog",
1209
- "aria-label": "Calendar",
1210
- children: /* @__PURE__ */ jsx(calendar_default, { value: selectedDate, onChange: handleDateSelect, minDate, maxDate })
1211
- }
1212
- )
1213
- ] });
1214
- }
1215
- DatePicker.displayName = "DatePicker";
1216
- var date_picker_default = DatePicker;
1217
- function Nav({
1218
- children,
1219
- className = "",
1220
- ariaLabel = "Main navigation",
1221
- direction = "horizontal",
1222
- spacing = "md",
1223
- align = "center"
1224
- }) {
1225
- const spacingClasses = {
1226
- none: "gap-0",
1227
- sm: "gap-2",
1228
- md: "gap-4",
1229
- lg: "gap-6",
1230
- xl: "gap-8"
1231
- };
1232
- const alignClasses = {
1233
- start: "items-start",
1234
- center: "items-center",
1235
- end: "items-end",
1236
- stretch: "items-stretch"
1237
- };
1238
- const directionClass = direction === "horizontal" ? "flex-row" : "flex-col";
1239
- const spacingClass = spacingClasses[spacing];
1240
- const alignClass = alignClasses[align];
1241
- return /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel, className: `flex ${directionClass} ${spacingClass} ${alignClass} ${className}`, children });
1242
- }
1243
- Nav.displayName = "Nav";
1244
- var nav_default = Nav;
1245
- function Container({
1246
- children,
1247
- className = "",
1248
- size = "lg",
1249
- padding = "lg",
1250
- align = "center",
1251
- minWidth,
1252
- minHeight
1253
- }) {
1254
- const sizeClasses = {
1255
- sm: "max-w-screen-sm",
1256
- md: "max-w-screen-md",
1257
- lg: "max-w-screen-lg",
1258
- xl: "max-w-screen-xl",
1259
- full: "max-w-full"
1260
- };
1261
- const paddingClasses = {
1262
- none: "",
1263
- sm: "py-6",
1264
- md: "py-8",
1265
- lg: "py-12",
1266
- xl: "py-16"
1267
- };
1268
- const alignClasses = {
1269
- start: "mr-auto",
1270
- center: "mx-auto",
1271
- end: "ml-auto"
1272
- };
1273
- const minWidthClasses = {
1274
- xs: "min-w-[20rem]",
1275
- // 320px
1276
- sm: "min-w-[24rem]",
1277
- // 384px
1278
- md: "min-w-[28rem]",
1279
- // 448px
1280
- lg: "min-w-[32rem]",
1281
- // 512px
1282
- xl: "min-w-[36rem]",
1283
- // 576px
1284
- "2xl": "min-w-[42rem]",
1285
- // 672px
1286
- "3xl": "min-w-[48rem]",
1287
- // 768px
1288
- full: "min-w-full"
1289
- };
1290
- const minHeightClasses = {
1291
- xs: "min-h-[10rem]",
1292
- // 160px
1293
- sm: "min-h-[15rem]",
1294
- // 240px
1295
- md: "min-h-[20rem]",
1296
- // 320px
1297
- lg: "min-h-[25rem]",
1298
- // 400px
1299
- xl: "min-h-[30rem]",
1300
- // 480px
1301
- "2xl": "min-h-[35rem]",
1302
- // 560px
1303
- "3xl": "min-h-[40rem]",
1304
- // 640px
1305
- screen: "min-h-screen"
1306
- };
1307
- const minWidthClass = minWidth && minWidthClasses[minWidth] ? minWidthClasses[minWidth] : "";
1308
- const minHeightClass = minHeight && minHeightClasses[minHeight] ? minHeightClasses[minHeight] : "";
1309
- const inlineStyles = {
1310
- ...minWidth && !minWidthClasses[minWidth] && { minWidth },
1311
- ...minHeight && !minHeightClasses[minHeight] && { minHeight }
1312
- };
1313
- return /* @__PURE__ */ jsx(
1314
- "div",
1315
- {
1316
- className: `px-4 ${sizeClasses[size]} ${paddingClasses[padding]} ${alignClasses[align]} ${minWidthClass} ${minHeightClass} ${className}`,
1317
- style: Object.keys(inlineStyles).length > 0 ? inlineStyles : void 0,
1318
- children
1319
- }
1320
- );
1321
- }
1322
- Container.displayName = "Container";
1323
- var container_default = Container;
1324
- function Navbar({
1325
- brand,
1326
- children,
1327
- sticky = true,
1328
- className = "",
1329
- actions,
1330
- size = "xl",
1331
- appearance = "solid",
1332
- border = "none",
1333
- disableMobileMenu = false
1334
- }) {
1335
- const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
1336
- const appearanceClasses = {
1337
- solid: "bg-background shadow-sm",
1338
- blur: "bg-background/70 backdrop-blur-md supports-[backdrop-filter]:bg-background/60 border border-border/60",
1339
- transparent: "bg-transparent"
1340
- };
1341
- const borderClasses = {
1342
- none: "",
1343
- bottom: "border-b border-border",
1344
- top: "border-t border-border",
1345
- both: "border-y border-border"
1346
- };
1347
- return /* @__PURE__ */ jsx(
1348
- "nav",
1349
- {
1350
- "data-appearance": appearance,
1351
- className: `${sticky ? "sticky top-0 z-50" : ""} ${appearanceClasses[appearance]} ${borderClasses[border]} ${className}`,
1352
- children: /* @__PURE__ */ jsxs(container_default, { padding: "none", size, children: [
1353
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between h-16", children: [
1354
- brand && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: brand }),
1355
- /* @__PURE__ */ jsx("div", { className: "hidden md:flex md:items-center md:space-x-6 md:flex-1 md:ml-10", children }),
1356
- actions && /* @__PURE__ */ jsx("div", { className: `${disableMobileMenu ? "flex" : "hidden md:flex"} items-center space-x-4`, children: actions }),
1357
- !disableMobileMenu && /* @__PURE__ */ jsx("div", { className: "md:hidden", children: /* @__PURE__ */ jsx(
1358
- button_default,
1359
- {
1360
- variant: "neutral",
1361
- style: "ghost",
1362
- size: "sm",
1363
- icon: mobileMenuOpen ? /* @__PURE__ */ jsx(IconX, { size: 24 }) : /* @__PURE__ */ jsx(IconMenu2, { size: 24 }),
1364
- ariaLabel: "Toggle menu",
1365
- onClick: () => setMobileMenuOpen(!mobileMenuOpen)
1366
- }
1367
- ) })
1368
- ] }),
1369
- !disableMobileMenu && mobileMenuOpen && /* @__PURE__ */ jsxs("div", { className: "md:hidden py-4 space-y-3 border-t border-border", children: [
1370
- children,
1371
- actions && /* @__PURE__ */ jsx("div", { className: "pt-4 border-t border-border space-y-2", children: actions })
1372
- ] })
1373
- ] })
1374
- }
1375
- );
1376
- }
1377
- Navbar.displayName = "Navbar";
1378
- var navbar_default = Navbar;
1379
- function NavbarBrand({ children, href, external = false, onClick, className = "" }) {
1380
- const content = /* @__PURE__ */ jsx("span", { className: `text-lg md:text-xl font-bold ${className}`, children });
1381
- const linkClassName = "no-underline text-foreground hover:text-primary transition-colors";
1382
- if (href) {
1383
- if (external) {
1384
- return /* @__PURE__ */ jsx("a", { href, className: linkClassName, target: "_blank", rel: "noopener noreferrer", children: content });
1385
- }
1386
- return /* @__PURE__ */ jsx(Link, { to: href, className: linkClassName, children: content });
1387
- }
1388
- if (onClick) {
1389
- return /* @__PURE__ */ jsx("button", { onClick, className: linkClassName, children: content });
1390
- }
1391
- return content;
1392
- }
1393
- NavbarBrand.displayName = "NavbarBrand";
1394
- var navbar_brand_default = NavbarBrand;
1395
- function NavbarLink({ href, children, external = false, className = "", end = false }) {
1396
- const baseClassName = `block md:inline-block py-2 md:py-0 font-medium transition-colors no-underline ${className}`;
1397
- if (external) {
1398
- return /* @__PURE__ */ jsx(
1399
- "a",
1400
- {
1401
- href,
1402
- target: "_blank",
1403
- rel: "noopener noreferrer",
1404
- className: `${baseClassName} text-foreground hover:text-primary`,
1405
- children
1406
- }
1407
- );
1408
- }
1409
- if (href.startsWith("#")) {
1410
- return /* @__PURE__ */ jsx("a", { href, className: `${baseClassName} text-foreground hover:text-primary`, children });
1411
- }
1412
- return /* @__PURE__ */ jsx(
1413
- NavLink,
1414
- {
1415
- to: href,
1416
- end,
1417
- className: ({ isActive }) => `${baseClassName} ${isActive ? "text-primary font-semibold border-b-2 border-primary" : "text-foreground hover:text-primary"}`,
1418
- children
1419
- }
1420
- );
1421
- }
1422
- NavbarLink.displayName = "NavbarLink";
1423
- var navbar_link_default = NavbarLink;
1424
- var PageTransition = ({
1425
- children,
1426
- duration = 300,
1427
- type = "fade",
1428
- className = ""
1429
- }) => {
1430
- const [isVisible, setIsVisible] = React5.useState(false);
1431
- React5.useEffect(() => {
1432
- requestAnimationFrame(() => {
1433
- requestAnimationFrame(() => {
1434
- setIsVisible(true);
1435
- });
1436
- });
1437
- }, []);
1438
- const getAnimationStyles = () => {
1439
- if (type === "none") return "";
1440
- const baseClasses = "transition-all ease-out";
1441
- const durationClass = `duration-[${duration}ms]`;
1442
- if (!isVisible) {
1443
- switch (type) {
1444
- case "fade":
1445
- return `${baseClasses} ${durationClass} opacity-0 translate-y-1`;
1446
- case "slide":
1447
- return `${baseClasses} ${durationClass} opacity-0 translate-y-3`;
1448
- case "scale":
1449
- return `${baseClasses} ${durationClass} opacity-0 scale-[0.99]`;
1450
- default:
1451
- return `${baseClasses} ${durationClass} opacity-0 translate-y-1`;
1452
- }
1453
- } else {
1454
- return `${baseClasses} ${durationClass} opacity-100 translate-y-0 scale-100`;
1455
- }
1456
- };
1457
- return /* @__PURE__ */ jsx("div", { className: `${getAnimationStyles()} ${className}`.trim(), children });
1458
- };
1459
- PageTransition.displayName = "PageTransition";
1460
- var page_transition_default = PageTransition;
1461
- function Tabs({ tabs, defaultTab, className = "", ariaLabel = "Tabs" }) {
1462
- const [activeTab, setActiveTab] = useState(defaultTab || tabs[0]?.id);
1463
- return /* @__PURE__ */ jsxs("div", { className, children: [
1464
- /* @__PURE__ */ jsx("div", { role: "tablist", "aria-label": ariaLabel, className: "flex border-b-2 border-border/50", children: tabs.map((tab) => /* @__PURE__ */ jsx(
1465
- "button",
1466
- {
1467
- role: "tab",
1468
- "aria-selected": activeTab === tab.id,
1469
- "aria-controls": `panel-${tab.id}`,
1470
- id: `tab-${tab.id}`,
1471
- onClick: () => setActiveTab(tab.id),
1472
- className: `px-4 py-3 font-medium cursor-pointer transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 relative ${activeTab === tab.id ? "text-primary after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-primary after:rounded-t after:transition-all after:duration-200" : "text-muted-foreground hover:text-foreground hover:bg-muted/50"}`,
1473
- children: tab.label
1474
- },
1475
- tab.id
1476
- )) }),
1477
- tabs.map((tab) => /* @__PURE__ */ jsx(
1478
- "div",
1479
- {
1480
- role: "tabpanel",
1481
- id: `panel-${tab.id}`,
1482
- "aria-labelledby": `tab-${tab.id}`,
1483
- hidden: activeTab !== tab.id,
1484
- children: activeTab === tab.id && /* @__PURE__ */ jsx(page_transition_default, { type: "fade", duration: 150, children: /* @__PURE__ */ jsx("div", { className: "pt-6", children: tab.content }) })
1485
- },
1486
- tab.id
1487
- ))
1488
- ] });
1489
- }
1490
- Tabs.displayName = "Tabs";
1491
- var tabs_default = Tabs;
1492
- var DropdownContext = createContext(null);
1493
- function Dropdown({
1494
- trigger,
1495
- children,
1496
- className = "",
1497
- align = "start",
1498
- autoClose = true,
1499
- size = "md"
1500
- }) {
1501
- const [isOpen, setIsOpen] = useState(false);
1502
- const dropdownRef = useRef(null);
1503
- const menuRef = useRef(null);
1504
- const itemsRef = useRef([]);
1505
- const [activeIndex, setActiveIndex] = useState(-1);
1506
- const close = useCallback(() => setIsOpen(false), []);
1507
- const open = useCallback(() => setIsOpen(true), []);
1508
- useEffect(() => {
1509
- if (!isOpen) return;
1510
- const handleKey = (e) => {
1511
- if (!menuRef.current) return;
1512
- const itemEls = itemsRef.current.filter(Boolean);
1513
- if (["ArrowDown", "ArrowUp", "Home", "End"].includes(e.key)) {
1514
- e.preventDefault();
1515
- if (itemEls.length === 0) return;
1516
- let nextIndex = activeIndex;
1517
- if (e.key === "ArrowDown") nextIndex = (activeIndex + 1) % itemEls.length;
1518
- if (e.key === "ArrowUp") nextIndex = (activeIndex - 1 + itemEls.length) % itemEls.length;
1519
- if (e.key === "Home") nextIndex = 0;
1520
- if (e.key === "End") nextIndex = itemEls.length - 1;
1521
- setActiveIndex(nextIndex);
1522
- itemEls[nextIndex]?.focus();
1523
- return;
1524
- }
1525
- if (e.key === "Escape") {
1526
- e.preventDefault();
1527
- close();
1528
- dropdownRef.current?.querySelector('button[data-trigger="true"]')?.focus();
1529
- }
1530
- if (e.key === "Tab") {
1531
- e.preventDefault();
1532
- const itemEls2 = itemsRef.current.filter(Boolean);
1533
- if (itemEls2.length === 0) return;
1534
- const dir = e.shiftKey ? -1 : 1;
1535
- const nextIndex = (activeIndex + dir + itemEls2.length) % itemEls2.length;
1536
- setActiveIndex(nextIndex);
1537
- itemEls2[nextIndex]?.focus();
1538
- }
1539
- };
1540
- document.addEventListener("keydown", handleKey);
1541
- return () => document.removeEventListener("keydown", handleKey);
1542
- }, [isOpen, activeIndex, close]);
1543
- useEffect(() => {
1544
- if (!isOpen) return;
1545
- const handleClickOutside = (event) => {
1546
- if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
1547
- close();
1548
- }
1549
- };
1550
- document.addEventListener("mousedown", handleClickOutside);
1551
- return () => document.removeEventListener("mousedown", handleClickOutside);
1552
- }, [isOpen, close]);
1553
- useLayoutEffect(() => {
1554
- let raf;
1555
- if (isOpen) {
1556
- const itemEls = itemsRef.current.filter(Boolean);
1557
- if (itemEls.length) {
1558
- raf = requestAnimationFrame(() => {
1559
- setActiveIndex(0);
1560
- itemEls[0]?.focus();
1561
- });
1562
- }
1563
- } else {
1564
- raf = requestAnimationFrame(() => setActiveIndex(-1));
1565
- }
1566
- return () => {
1567
- if (raf) cancelAnimationFrame(raf);
1568
- };
1569
- }, [isOpen]);
1570
- const registerItem = useCallback((el, index) => {
1571
- if (typeof index === "number" && index >= 0) {
1572
- itemsRef.current[index] = el;
1573
- return;
1574
- }
1575
- if (el === null) {
1576
- itemsRef.current = itemsRef.current.filter((x) => x !== el && x != null);
1577
- return;
1578
- }
1579
- if (!itemsRef.current.includes(el)) itemsRef.current.push(el);
1580
- }, []);
1581
- return /* @__PURE__ */ jsxs("div", { ref: dropdownRef, className: `relative ${className}`, children: [
1582
- /* @__PURE__ */ jsx(
1583
- "button",
1584
- {
1585
- "data-trigger": "true",
1586
- onClick: () => isOpen ? close() : open(),
1587
- className: "bg-transparent border-0 p-0 cursor-pointer outline-none",
1588
- type: "button",
1589
- "aria-expanded": isOpen,
1590
- "aria-haspopup": "true",
1591
- "aria-controls": isOpen ? "dropdown-menu" : void 0,
1592
- children: trigger
1593
- }
1594
- ),
1595
- isOpen && /* @__PURE__ */ jsx(DropdownContext.Provider, { value: { requestClose: close, autoClose, registerItem }, children: /* @__PURE__ */ jsx(
1596
- "div",
1597
- {
1598
- id: "dropdown-menu",
1599
- ref: menuRef,
1600
- className: `absolute mt-2 bg-popover text-popover-foreground border border-border rounded-md shadow-lg z-50 ${size === "sm" ? "min-w-[140px] text-xs py-1" : "min-w-[180px]"} max-h-[320px] overflow-y-auto origin-top animate-scaleIn focus:outline-none ${align === "start" ? "left-0" : align === "end" ? "right-0" : "left-1/2 -translate-x-1/2"} ${className}`,
1601
- role: "menu",
1602
- "aria-orientation": "vertical",
1603
- tabIndex: -1,
1604
- children
1605
- }
1606
- ) })
1607
- ] });
1608
- }
1609
- Dropdown.displayName = "Dropdown";
1610
- var dropdown_default = Dropdown;
1611
- function Breadcrumbs({ items, separator = "/", className = "" }) {
1612
- return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className, children: /* @__PURE__ */ jsx("ol", { className: "flex items-center space-x-2 text-sm", children: items.map((item, index) => {
1613
- const isLast = index === items.length - 1;
1614
- const key = item.href || item.label;
1615
- return /* @__PURE__ */ jsxs("li", { className: "flex items-center", children: [
1616
- item.href && !isLast ? /* @__PURE__ */ jsx(
1617
- "a",
1618
- {
1619
- href: item.href,
1620
- className: "text-primary hover:text-primary/80 hover:underline cursor-pointer transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-ring rounded px-1 -mx-1",
1621
- children: item.label
1622
- }
1623
- ) : /* @__PURE__ */ jsx("span", { className: isLast ? "text-foreground font-medium" : "text-muted-foreground", children: item.label }),
1624
- !isLast && /* @__PURE__ */ jsx("span", { className: "mx-2 text-muted-foreground select-none", "aria-hidden": "true", children: separator })
1625
- ] }, key);
1626
- }) }) });
1627
- }
1628
- Breadcrumbs.displayName = "Breadcrumbs";
1629
- var breadcrumbs_default = Breadcrumbs;
1630
- function Pagination({
1631
- currentPage,
1632
- totalPages,
1633
- onPageChange,
1634
- siblingCount = 1,
1635
- className = ""
1636
- }) {
1637
- const getPageNumbers = () => {
1638
- const pages = [];
1639
- const leftSibling = Math.max(currentPage - siblingCount, 1);
1640
- const rightSibling = Math.min(currentPage + siblingCount, totalPages);
1641
- if (leftSibling > 2) {
1642
- pages.push(1, "...");
1643
- } else {
1644
- for (let i = 1; i < leftSibling; i++) {
1645
- pages.push(i);
1646
- }
1647
- }
1648
- for (let i = leftSibling; i <= rightSibling; i++) {
1649
- pages.push(i);
1650
- }
1651
- if (rightSibling < totalPages - 1) {
1652
- pages.push("...", totalPages);
1653
- } else {
1654
- for (let i = rightSibling + 1; i <= totalPages; i++) {
1655
- pages.push(i);
1656
- }
1657
- }
1658
- return pages;
1659
- };
1660
- return /* @__PURE__ */ jsx("nav", { "aria-label": "Pagination", className, children: /* @__PURE__ */ jsxs("ul", { className: "flex items-center space-x-1", children: [
1661
- /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
1662
- "button",
1663
- {
1664
- onClick: () => onPageChange(currentPage - 1),
1665
- disabled: currentPage === 1,
1666
- className: "px-3 py-2 rounded-lg border border-border hover:bg-accent hover:text-accent-foreground transition-colors duration-200 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-ring",
1667
- "aria-label": "Previous page",
1668
- children: "\u2190"
1669
- }
1670
- ) }),
1671
- getPageNumbers().map((page, index) => {
1672
- const key = typeof page === "number" ? `page-${page}` : `ellipsis-${index}`;
1673
- return /* @__PURE__ */ jsx("li", { children: typeof page === "number" ? /* @__PURE__ */ jsx(
1674
- "button",
1675
- {
1676
- onClick: () => onPageChange(page),
1677
- className: `px-3 py-2 rounded-lg border cursor-pointer transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring ${page === currentPage ? "bg-primary text-primary-foreground border-primary shadow-sm" : "border-border hover:bg-accent hover:text-accent-foreground hover:border-accent"}`,
1678
- "aria-label": `Page ${page}`,
1679
- "aria-current": page === currentPage ? "page" : void 0,
1680
- children: page
1681
- }
1682
- ) : /* @__PURE__ */ jsx("span", { className: "px-3 py-2 text-muted-foreground", children: "..." }) }, key);
1683
- }),
1684
- /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
1685
- "button",
1686
- {
1687
- onClick: () => onPageChange(currentPage + 1),
1688
- disabled: currentPage === totalPages,
1689
- className: "px-3 py-2 rounded-lg border border-border hover:bg-accent hover:text-accent-foreground transition-colors duration-200 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-ring",
1690
- "aria-label": "Next page",
1691
- children: "\u2192"
1692
- }
1693
- ) })
1694
- ] }) });
1695
- }
1696
- Pagination.displayName = "Pagination";
1697
- var pagination_default = Pagination;
1698
- function Sidebar({ children, className = "", width = "16rem" }) {
1699
- const widthClass = width === "16rem" ? "w-64" : width === "4rem" ? "w-16" : "";
1700
- const enhancedChildren = React5.Children.map(children, (child) => {
1701
- if (!React5.isValidElement(child)) return child;
1702
- const childProps = child.props || {};
1703
- if ("href" in childProps) {
1704
- const existing = typeof childProps.className === "string" ? childProps.className : "";
1705
- const sidebarItemClasses = "flex items-center w-full justify-start gap-2 px-2 py-1.5 rounded hover:bg-muted";
1706
- const childInner = child.props.children;
1707
- const wrappedChildren = /* @__PURE__ */ jsx("span", { className: "flex items-center gap-2", children: childInner });
1708
- const newProps = {
1709
- ...child.props,
1710
- className: `${existing} ${sidebarItemClasses}`.trim()
1711
- };
1712
- return React5.cloneElement(child, newProps, wrappedChildren);
1713
- }
1714
- return child;
1715
- });
1716
- return /* @__PURE__ */ jsx(
1717
- "nav",
1718
- {
1719
- className: `
1720
- ${widthClass || ""}
1721
- bg-card border-r border-border
1722
- flex flex-col
1723
- overflow-hidden
1724
- ${className}
1725
- `.replace(/\s+/g, " "),
1726
- style: !widthClass ? { width } : void 0,
1727
- "aria-label": "Sidebar navigation",
1728
- children: /* @__PURE__ */ jsx("div", { className: "flex-1 px-4 py-3 flex flex-col gap-2", children: enhancedChildren })
1729
- }
1730
- );
1731
- }
1732
- Sidebar.displayName = "Sidebar";
1733
- var sidebar_default = Sidebar;
1734
- function Stepper({
1735
- steps,
1736
- currentStep,
1737
- className = "",
1738
- orientation = "horizontal",
1739
- onStepClick,
1740
- clickable = false
1741
- }) {
1742
- const getStepStatus = (index) => {
1743
- const step = steps[index];
1744
- if (step.status) return step.status;
1745
- if (index < currentStep) return "completed";
1746
- if (index === currentStep) return "current";
1747
- return "pending";
1748
- };
1749
- const renderStep = (step, index) => {
1750
- const status = getStepStatus(index) || "pending";
1751
- const isClickable = clickable;
1752
- const statusStyles = {
1753
- pending: {
1754
- circle: "bg-muted text-muted-foreground border-2 border-muted",
1755
- title: "text-muted-foreground",
1756
- description: "text-muted-foreground"
1757
- },
1758
- current: {
1759
- circle: "bg-primary text-primary-foreground border-2 border-primary",
1760
- title: "text-foreground font-semibold",
1761
- description: "text-muted-foreground"
1762
- },
1763
- completed: {
1764
- circle: "bg-success text-success-foreground border-2 border-success",
1765
- title: "text-foreground",
1766
- description: "text-muted-foreground"
1767
- },
1768
- error: {
1769
- circle: "bg-destructive text-destructive-foreground border-2 border-destructive",
1770
- title: "text-destructive",
1771
- description: "text-destructive"
1772
- }
1773
- };
1774
- const styles = statusStyles[status];
1775
- const handleClick = () => {
1776
- if (isClickable && onStepClick) {
1777
- onStepClick(index);
1778
- }
1779
- };
1780
- const handleKeyDown = (e) => {
1781
- if (isClickable && onStepClick && (e.key === "Enter" || e.key === " ")) {
1782
- e.preventDefault();
1783
- onStepClick(index);
1784
- }
1785
- };
1786
- if (orientation === "horizontal") {
1787
- return /* @__PURE__ */ jsxs(
1788
- "div",
1789
- {
1790
- className: `flex-1 flex flex-col items-center ${isClickable ? "cursor-pointer" : ""}`,
1791
- onClick: handleClick,
1792
- onKeyDown: handleKeyDown,
1793
- role: isClickable ? "button" : void 0,
1794
- tabIndex: isClickable ? 0 : void 0,
1795
- "aria-label": `Step ${index + 1}: ${step.title}`,
1796
- "aria-current": status === "current" ? "step" : void 0,
1797
- children: [
1798
- /* @__PURE__ */ jsxs("div", { className: "relative flex items-center w-full", children: [
1799
- index > 0 && /* @__PURE__ */ jsx(
1800
- "div",
1801
- {
1802
- className: `h-0.5 flex-1 ${status === "completed" || status === "current" ? "bg-success" : "bg-muted"}`
1803
- }
1804
- ),
1805
- /* @__PURE__ */ jsx(
1806
- "div",
1807
- {
1808
- className: `
1809
- relative z-10 flex items-center justify-center
1810
- w-10 h-10 rounded-full
1811
- transition-colors transition-[background-color,border-color] duration-300 ease-in-out
1812
- ${styles.circle}
1813
- `,
1814
- children: status === "completed" ? /* @__PURE__ */ jsx(IconCheck, { className: "w-5 h-5" }) : step.icon ? step.icon : /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: index + 1 })
1815
- }
1816
- ),
1817
- index < steps.length - 1 && /* @__PURE__ */ jsx(
1818
- "div",
1819
- {
1820
- className: `h-0.5 flex-1 transition-colors duration-300 ease-in-out ${status === "completed" ? "bg-success" : "bg-muted"}`
1821
- }
1822
- )
1823
- ] }),
1824
- /* @__PURE__ */ jsxs("div", { className: `mt-3 text-center text-sm transition-colors duration-300 ease-in-out ${styles.title}`, children: [
1825
- step.title,
1826
- step.optional && /* @__PURE__ */ jsx("span", { className: "ml-1 text-xs text-muted-foreground", children: "(Optional)" }),
1827
- step.description && /* @__PURE__ */ jsx("p", { className: `text-xs mt-1 transition-colors duration-300 ease-in-out ${styles.description}`, children: step.description })
1828
- ] })
1829
- ]
1830
- },
1831
- index
1832
- );
1833
- }
1834
- return /* @__PURE__ */ jsxs(
1835
- "div",
1836
- {
1837
- className: `flex gap-4 ${index < steps.length - 1 ? "pb-8" : ""} ${isClickable ? "cursor-pointer" : ""}`,
1838
- onClick: handleClick,
1839
- onKeyDown: handleKeyDown,
1840
- role: isClickable ? "button" : void 0,
1841
- tabIndex: isClickable ? 0 : void 0,
1842
- "aria-label": `Step ${index + 1}: ${step.title}`,
1843
- "aria-current": status === "current" ? "step" : void 0,
1844
- children: [
1845
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
1846
- /* @__PURE__ */ jsx(
1847
- "div",
1848
- {
1849
- className: `
1850
- flex items-center justify-center
1851
- w-10 h-10 rounded-full flex-shrink-0
1852
- transition-colors transition-[background-color,border-color] duration-300 ease-in-out
1853
- ${styles.circle}
1854
- `,
1855
- children: status === "completed" ? /* @__PURE__ */ jsx(IconCheck, { className: "w-5 h-5" }) : step.icon ? step.icon : /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: index + 1 })
1856
- }
1857
- ),
1858
- index < steps.length - 1 && /* @__PURE__ */ jsx(
1859
- "div",
1860
- {
1861
- className: `w-0.5 flex-1 mt-2 transition-colors duration-300 ease-in-out ${status === "completed" ? "bg-success" : "bg-muted"}`
1862
- }
1863
- )
1864
- ] }),
1865
- /* @__PURE__ */ jsxs("div", { className: `flex-1 pt-2 text-base transition-colors duration-300 ease-in-out ${styles.title}`, children: [
1866
- step.title,
1867
- step.optional && /* @__PURE__ */ jsx("span", { className: "ml-2 text-xs text-muted-foreground", children: "(Optional)" }),
1868
- step.description && /* @__PURE__ */ jsx("p", { className: `text-sm mt-1 transition-colors duration-300 ease-in-out ${styles.description}`, children: step.description })
1869
- ] })
1870
- ]
1871
- },
1872
- index
1873
- );
1874
- };
1875
- return /* @__PURE__ */ jsx(
1876
- "div",
1877
- {
1878
- className: `
1879
- ${orientation === "horizontal" ? "flex items-start" : "flex flex-col"}
1880
- ${className}
1881
- `,
1882
- children: steps.map((step, index) => renderStep(step, index))
1883
- }
1884
- );
1885
- }
1886
- Stepper.displayName = "Stepper";
1887
- var stepper_default = Stepper;
1888
- function Toast({ message, children, type = "info", onClose, className = "", duration = 5e3 }) {
1889
- const [isClosing, setIsClosing] = useState(false);
1890
- const typeClasses = {
1891
- info: "bg-info text-info-foreground",
1892
- success: "bg-success text-success-foreground",
1893
- warning: "bg-warning text-warning-foreground",
1894
- error: "bg-destructive text-destructive-foreground"
1895
- };
1896
- const handleClose = useCallback(() => {
1897
- setIsClosing(true);
1898
- setTimeout(() => {
1899
- onClose?.();
1900
- }, 300);
1901
- }, [onClose]);
1902
- useEffect(() => {
1903
- if (duration > 0) {
1904
- const timer = setTimeout(() => {
1905
- handleClose();
1906
- }, duration);
1907
- return () => clearTimeout(timer);
1908
- }
1909
- return void 0;
1910
- }, [duration, handleClose]);
1911
- const toast = /* @__PURE__ */ jsxs(
1912
- "div",
1913
- {
1914
- role: "alert",
1915
- "aria-live": "polite",
1916
- className: `fixed bottom-4 right-4 px-4 py-3 rounded-md shadow-lg z-[9999] ${typeClasses[type]} transition-all duration-300 ease-out ${isClosing ? "opacity-0 translate-x-full" : "opacity-100 translate-x-0 animate-slideInRight"} ${className}`,
1917
- children: [
1918
- /* @__PURE__ */ jsx("span", { children: children || message }),
1919
- onClose && /* @__PURE__ */ jsx("button", { onClick: handleClose, className: "ml-4 font-bold hover:opacity-70 transition-opacity", "aria-label": "Close", children: "\xD7" })
1920
- ]
1921
- }
1922
- );
1923
- return typeof document !== "undefined" ? createPortal(toast, document.body) : toast;
1924
- }
1925
- Toast.displayName = "Toast";
1926
- var toast_default = Toast;
1927
- function Tooltip({
1928
- children,
1929
- content,
1930
- position = "top",
1931
- variant = "default",
1932
- open = false,
1933
- usePortal = false,
1934
- className = ""
1935
- }) {
1936
- const [showTooltip, setShowTooltip] = useState(false);
1937
- const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });
1938
- const triggerRef = useRef(null);
1939
- const isVisible = open || showTooltip;
1940
- useEffect(() => {
1941
- if (usePortal && isVisible && triggerRef.current) {
1942
- const rect = triggerRef.current.getBoundingClientRect();
1943
- const positions = {
1944
- top: {
1945
- top: rect.top - 8,
1946
- left: rect.left + rect.width / 2
1947
- },
1948
- bottom: {
1949
- top: rect.bottom + 8,
1950
- left: rect.left + rect.width / 2
1951
- },
1952
- left: {
1953
- top: rect.top + rect.height / 2,
1954
- left: rect.left - 8
1955
- },
1956
- right: {
1957
- top: rect.top + rect.height / 2,
1958
- left: rect.right + 8
1959
- }
1960
- };
1961
- setTooltipPosition(positions[position]);
1962
- }
1963
- }, [usePortal, isVisible, position]);
1964
- const variantClasses = {
1965
- default: "bg-popover text-popover-foreground",
1966
- primary: "bg-primary text-primary-foreground",
1967
- secondary: "bg-secondary text-secondary-foreground",
1968
- accent: "bg-accent text-accent-foreground",
1969
- info: "bg-blue-500 text-white",
1970
- success: "bg-green-500 text-white",
1971
- warning: "bg-yellow-500 text-foreground",
1972
- error: "bg-red-500 text-white",
1973
- neutral: "bg-muted text-muted-foreground"
1974
- };
1975
- const arrowColorClasses = {
1976
- default: "before:border-popover",
1977
- primary: "before:border-primary",
1978
- secondary: "before:border-secondary",
1979
- accent: "before:border-accent",
1980
- info: "before:border-blue-500",
1981
- success: "before:border-green-500",
1982
- warning: "before:border-yellow-500",
1983
- error: "before:border-red-500",
1984
- neutral: "before:border-muted"
1985
- };
1986
- const portalPositionClasses = {
1987
- top: "-translate-x-1/2 -translate-y-full before:left-1/2 before:-translate-x-1/2 before:top-full before:border-l-transparent before:border-r-transparent before:border-b-transparent",
1988
- bottom: "-translate-x-1/2 before:left-1/2 before:-translate-x-1/2 before:bottom-full before:border-l-transparent before:border-r-transparent before:border-t-transparent",
1989
- left: "-translate-x-full -translate-y-1/2 before:left-full before:top-1/2 before:-translate-y-1/2 before:border-t-transparent before:border-b-transparent before:border-r-transparent",
1990
- right: "-translate-y-1/2 before:left-full before:top-1/2 before:-translate-y-1/2 before:border-t-transparent before:border-b-transparent before:border-r-transparent"
1991
- };
1992
- const absolutePositionClasses = {
1993
- top: "bottom-full left-1/2 -translate-x-1/2 mb-2 before:left-1/2 before:-translate-x-1/2 before:top-full before:border-l-transparent before:border-r-transparent before:border-b-transparent",
1994
- bottom: "top-full left-1/2 -translate-x-1/2 mt-2 before:left-1/2 before:-translate-x-1/2 before:bottom-full before:border-l-transparent before:border-r-transparent before:border-t-transparent",
1995
- left: "right-full top-1/2 -translate-y-1/2 mr-2 before:top-1/2 before:-translate-y-1/2 before:left-full before:border-t-transparent before:border-b-transparent before:border-r-transparent",
1996
- right: "left-full top-1/2 -translate-y-1/2 ml-2 before:top-1/2 before:-translate-y-1/2 before:left-full before:border-t-transparent before:border-b-transparent before:border-r-transparent"
1997
- };
1998
- const positionClasses = usePortal ? portalPositionClasses : absolutePositionClasses;
1999
- const tooltipContent = /* @__PURE__ */ jsx(
2000
- "span",
2001
- {
2002
- className: `
2003
- ${usePortal ? "fixed" : "absolute"}
2004
- z-[9999]
2005
- px-3 py-2
2006
- text-sm font-medium
2007
- rounded-lg
2008
- shadow-lg
2009
- whitespace-nowrap
2010
- pointer-events-none
2011
- transition-opacity duration-200
2012
- ${variantClasses[variant]}
2013
- ${positionClasses[position]}
2014
- ${arrowColorClasses[variant]}
2015
- ${isVisible ? "opacity-100 visible" : "opacity-0 invisible"}
2016
- before:content-['']
2017
- before:absolute
2018
- before:border-4
2019
- before:border-solid
2020
- `,
2021
- style: usePortal ? {
2022
- top: `${tooltipPosition.top}px`,
2023
- left: `${tooltipPosition.left}px`
2024
- } : void 0,
2025
- role: "tooltip",
2026
- "aria-hidden": !isVisible,
2027
- children: content
2028
- }
2029
- );
2030
- return /* @__PURE__ */ jsxs(
2031
- "span",
2032
- {
2033
- ref: triggerRef,
2034
- className: `group relative inline-flex ${usePortal ? "" : "w-full"} ${className}`,
2035
- "data-position": position,
2036
- onMouseEnter: () => !open && setShowTooltip(true),
2037
- onMouseLeave: () => !open && setShowTooltip(false),
2038
- onFocus: () => !open && setShowTooltip(true),
2039
- onBlur: () => !open && setShowTooltip(false),
2040
- children: [
2041
- children,
2042
- usePortal && isVisible ? createPortal(tooltipContent, document.body) : !usePortal && tooltipContent
2043
- ]
2044
- }
2045
- );
2046
- }
2047
- Tooltip.displayName = "Tooltip";
2048
- var tooltip_default = Tooltip;
2049
-
2050
- // src/utils/portal.ts
2051
- function getPortalRoot(id = "hydn-ui-portal") {
2052
- if (typeof document === "undefined") return null;
2053
- let root = document.getElementById(id);
2054
- if (!root) {
2055
- root = document.createElement("div");
2056
- root.id = id;
2057
- document.body.appendChild(root);
2058
- }
2059
- return root;
2060
- }
2061
- var portal_default = getPortalRoot;
2062
- function useOverlay(options) {
2063
- const {
2064
- isOpen,
2065
- focusTrap = true,
2066
- lockScroll = true,
2067
- animationFrames = 2,
2068
- restoreFocus = true,
2069
- exitDuration = 300,
2070
- unmountOnExit = true
2071
- } = options;
2072
- const previouslyFocusedRef = useRef(null);
2073
- const containerRef = useRef(null);
2074
- const [shouldRender, setShouldRender] = useState(isOpen);
2075
- const [phase, setPhase] = useState("mount");
2076
- useLayoutEffect(() => {
2077
- if (isOpen && !shouldRender) {
2078
- setShouldRender(true);
2079
- setPhase("mount");
2080
- } else if (isOpen && shouldRender && phase === "mount") {
2081
- requestAnimationFrame(() => {
2082
- setPhase("animating-in");
2083
- let frame = 0;
2084
- const step = () => {
2085
- frame += 1;
2086
- if (frame >= animationFrames) {
2087
- setPhase("visible");
2088
- } else {
2089
- requestAnimationFrame(step);
2090
- }
2091
- };
2092
- if (animationFrames > 0) {
2093
- requestAnimationFrame(step);
2094
- } else {
2095
- setPhase("visible");
2096
- }
2097
- });
2098
- } else if (!isOpen && shouldRender && phase !== "animating-out") {
2099
- setPhase("animating-out");
2100
- }
2101
- }, [isOpen, shouldRender, phase, animationFrames]);
2102
- useEffect(() => {
2103
- if (phase === "animating-out" && unmountOnExit) {
2104
- const timeout = setTimeout(() => {
2105
- setShouldRender(false);
2106
- setPhase("mount");
2107
- }, exitDuration);
2108
- return () => clearTimeout(timeout);
2109
- }
2110
- return void 0;
2111
- }, [phase, exitDuration, unmountOnExit]);
2112
- useEffect(() => {
2113
- if (isOpen) {
2114
- if (typeof document !== "undefined") {
2115
- if (restoreFocus) previouslyFocusedRef.current = document.activeElement;
2116
- if (lockScroll) document.body.style.overflow = "hidden";
2117
- }
2118
- }
2119
- return () => {
2120
- if (typeof document !== "undefined") {
2121
- if (lockScroll) document.body.style.overflow = "";
2122
- if (!isOpen && restoreFocus && previouslyFocusedRef.current) {
2123
- previouslyFocusedRef.current.focus();
2124
- }
2125
- }
2126
- };
2127
- }, [isOpen, lockScroll, restoreFocus]);
2128
- useEffect(() => {
2129
- if (phase === "visible" && containerRef.current) {
2130
- const el = containerRef.current;
2131
- try {
2132
- el.focus?.({ preventScroll: true });
2133
- } catch {
2134
- el.focus?.();
2135
- }
2136
- }
2137
- }, [phase]);
2138
- const handleKeyDown = useCallback(
2139
- (e) => {
2140
- if (!focusTrap || phase !== "visible" || e.key !== "Tab" || !containerRef.current) return;
2141
- const node = containerRef.current;
2142
- const focusable = node.querySelectorAll(
2143
- 'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])'
2144
- );
2145
- if (!focusable.length) return;
2146
- const first = focusable[0];
2147
- const last = focusable[focusable.length - 1];
2148
- if (e.shiftKey) {
2149
- if (document.activeElement === first || document.activeElement === node) {
2150
- e.preventDefault();
2151
- last.focus();
2152
- }
2153
- } else if (document.activeElement === last) {
2154
- e.preventDefault();
2155
- first.focus();
2156
- }
2157
- },
2158
- [focusTrap, phase]
2159
- );
2160
- useEffect(() => {
2161
- if (focusTrap && phase === "visible") {
2162
- document.addEventListener("keydown", handleKeyDown);
2163
- return () => document.removeEventListener("keydown", handleKeyDown);
2164
- }
2165
- return void 0;
2166
- }, [phase, focusTrap, handleKeyDown]);
2167
- const getPhaseClass = useCallback(
2168
- (openClass, closedClass) => {
2169
- return phase === "animating-in" || phase === "visible" ? openClass : closedClass;
2170
- },
2171
- [phase]
2172
- );
2173
- return { phase, shouldRender, ref: containerRef, getPhaseClass };
2174
- }
2175
- var useOverlay_default = useOverlay;
2176
- function Modal({
2177
- isOpen,
2178
- onClose,
2179
- children,
2180
- title,
2181
- description,
2182
- content,
2183
- actions,
2184
- className = "",
2185
- ariaLabel,
2186
- align = "center",
2187
- portalRoot = portal_default()
2188
- }) {
2189
- const {
2190
- phase,
2191
- shouldRender,
2192
- ref: dialogRef,
2193
- getPhaseClass
2194
- } = useOverlay_default({
2195
- isOpen,
2196
- focusTrap: true,
2197
- lockScroll: true,
2198
- animationFrames: 2,
2199
- restoreFocus: true
2200
- });
2201
- React5.useEffect(() => {
2202
- if (!isOpen) return;
2203
- const handleEscape = (e) => {
2204
- if (e.key === "Escape") {
2205
- e.preventDefault();
2206
- onClose();
2207
- }
2208
- };
2209
- document.addEventListener("keydown", handleEscape);
2210
- return () => document.removeEventListener("keydown", handleEscape);
2211
- }, [isOpen, onClose]);
2212
- if (!shouldRender) return null;
2213
- const enteringClasses = "scale-100 translate-y-0 opacity-100";
2214
- const exitingClasses = "scale-[0.97] -translate-y-1 opacity-0";
2215
- const scaleClass = getPhaseClass(enteringClasses, exitingClasses);
2216
- const backdropOpacity = phase === "visible" || phase === "animating-in" ? "opacity-100" : "opacity-0 transition-opacity delay-50";
2217
- const hasStructured = title || description || content || actions;
2218
- const alignmentClasses = align === "center" ? "grid place-items-center" : "flex items-start justify-center pt-20";
2219
- const panel = /* @__PURE__ */ jsx(
2220
- "div",
2221
- {
2222
- "data-phase": phase,
2223
- className: `fixed inset-0 z-[999] ${alignmentClasses} bg-black/40 backdrop-blur-sm p-4 overflow-y-auto overscroll-contain transition-opacity duration-300 will-change-opacity ${backdropOpacity}`,
2224
- onMouseDown: (e) => {
2225
- if (e.target === e.currentTarget) onClose();
2226
- },
2227
- "aria-label": ariaLabel || "Close modal",
2228
- role: "presentation",
2229
- children: /* @__PURE__ */ jsx(
2230
- "div",
2231
- {
2232
- ref: dialogRef,
2233
- "data-phase": phase,
2234
- className: `relative w-11/12 max-w-2xl max-h-[calc(100vh-5em)] bg-card text-card-foreground rounded-2xl border border-border shadow-2xl p-6 focus:outline-none transform transition-[transform,opacity] duration-250 ease-[cubic-bezier(.33,.66,.33,1)] will-change-transform will-change-opacity select-none [backface-visibility:hidden] [transform-style:preserve-3d] ${scaleClass} ${className}`,
2235
- role: "dialog",
2236
- "aria-modal": "true",
2237
- tabIndex: -1,
2238
- onTransitionEnd: (e) => {
2239
- if (e.target !== dialogRef.current) return;
2240
- },
2241
- children: hasStructured ? /* @__PURE__ */ jsxs(Fragment, { children: [
2242
- title && /* @__PURE__ */ jsxs(Fragment, { children: [
2243
- typeof title === "string" ? /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold tracking-tight", children: title }) : title,
2244
- description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: description })
2245
- ] }),
2246
- content && /* @__PURE__ */ jsx("section", { className: "text-sm leading-relaxed space-y-3 mt-4", children: content }),
2247
- actions && /* @__PURE__ */ jsx("footer", { className: "flex justify-end gap-2 pt-2 mt-4 border-t border-border/60", children: actions })
2248
- ] }) : children
2249
- }
2250
- )
2251
- }
2252
- );
2253
- return portalRoot ? createPortal(panel, portalRoot) : panel;
2254
- }
2255
- Modal.displayName = "Modal";
2256
- var modal_default = Modal;
2257
- function Dialog({ isOpen, onClose, title, children, actions, className = "" }) {
2258
- return /* @__PURE__ */ jsx(modal_default, { isOpen, onClose, ariaLabel: title, className, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col p-6 gap-4", children: [
2259
- /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold text-foreground", children: title }),
2260
- /* @__PURE__ */ jsx("div", { className: "text-foreground", children }),
2261
- actions && /* @__PURE__ */ jsx("div", { className: "flex justify-end gap-3 pt-2", children: actions })
2262
- ] }) });
2263
- }
2264
- Dialog.displayName = "Dialog";
2265
- var dialog_default = Dialog;
2266
- function DeleteDialog({
2267
- isOpen,
2268
- onClose,
2269
- onConfirm,
2270
- title = "Confirm Deletion",
2271
- description,
2272
- itemName,
2273
- isLoading = false,
2274
- confirmText = "Delete",
2275
- cancelText = "Cancel",
2276
- className = ""
2277
- }) {
2278
- const defaultDescription = itemName ? `Are you sure you want to delete "${itemName}"? This action cannot be undone.` : "Are you sure you want to delete this item? This action cannot be undone.";
2279
- const finalDescription = description || defaultDescription;
2280
- return /* @__PURE__ */ jsx(
2281
- dialog_default,
2282
- {
2283
- isOpen,
2284
- onClose,
2285
- title,
2286
- className,
2287
- actions: /* @__PURE__ */ jsxs(Fragment, { children: [
2288
- /* @__PURE__ */ jsx(
2289
- button_default,
2290
- {
2291
- onClick: onClose,
2292
- disabled: isLoading,
2293
- className: "bg-muted hover:bg-muted/80 text-muted-foreground",
2294
- icon: /* @__PURE__ */ jsx(IconX, { size: 16 }),
2295
- children: cancelText
2296
- }
2297
- ),
2298
- /* @__PURE__ */ jsx(
2299
- button_default,
2300
- {
2301
- onClick: onConfirm,
2302
- disabled: isLoading,
2303
- className: "bg-destructive hover:bg-destructive/90 text-destructive-foreground",
2304
- icon: /* @__PURE__ */ jsx(IconTrash, { size: 16 }),
2305
- children: isLoading ? "Deleting..." : confirmText
2306
- }
2307
- )
2308
- ] }),
2309
- children: /* @__PURE__ */ jsx("p", { className: "text-foreground", children: finalDescription })
2310
- }
2311
- );
2312
- }
2313
- DeleteDialog.displayName = "DeleteDialog";
2314
- var delete_dialog_default = DeleteDialog;
2315
- function Popover({ trigger, children, content, position = "bottom", className = "" }) {
2316
- const [isOpen, setIsOpen] = useState(false);
2317
- const popoverRef = useRef(null);
2318
- const triggerContent = children || trigger;
2319
- useEffect(() => {
2320
- const handleClickOutside = (event) => {
2321
- if (popoverRef.current && !popoverRef.current.contains(event.target)) {
2322
- setIsOpen(false);
2323
- }
2324
- };
2325
- const handleEscape = (event) => {
2326
- if (event.key === "Escape") {
2327
- setIsOpen(false);
2328
- }
2329
- };
2330
- if (isOpen) {
2331
- document.addEventListener("mousedown", handleClickOutside);
2332
- document.addEventListener("keydown", handleEscape);
2333
- return () => {
2334
- document.removeEventListener("mousedown", handleClickOutside);
2335
- document.removeEventListener("keydown", handleEscape);
2336
- };
2337
- }
2338
- return void 0;
2339
- }, [isOpen]);
2340
- const positionClasses = {
2341
- top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
2342
- bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
2343
- left: "right-full top-1/2 -translate-y-1/2 mr-2",
2344
- right: "left-full top-1/2 -translate-y-1/2 ml-2"
2345
- };
2346
- return /* @__PURE__ */ jsxs("div", { className: `relative inline-block ${className}`, ref: popoverRef, children: [
2347
- /* @__PURE__ */ jsx(
2348
- "button",
2349
- {
2350
- onClick: () => setIsOpen(!isOpen),
2351
- className: "bg-transparent border-0 p-0 cursor-pointer",
2352
- type: "button",
2353
- "aria-expanded": isOpen,
2354
- "aria-haspopup": "true",
2355
- children: triggerContent
2356
- }
2357
- ),
2358
- isOpen && /* @__PURE__ */ jsx(
2359
- "div",
2360
- {
2361
- className: `absolute min-w-[200px] bg-popover text-popover-foreground border border-border rounded-lg shadow-xl p-4 z-50 animate-scaleIn ${positionClasses[position]}`,
2362
- role: "tooltip",
2363
- children: content
2364
- }
2365
- )
2366
- ] });
2367
- }
2368
- Popover.displayName = "Popover";
2369
- var popover_default = Popover;
2370
- function Alert({ children, type = "info", dismissible = false, onClose, className = "", position = "relative", duration = 0 }) {
2371
- const [isClosing, setIsClosing] = useState(false);
2372
- const typeClasses = {
2373
- info: "bg-info/20 text-foreground border-info/50 backdrop-blur-sm",
2374
- success: "bg-success/20 text-foreground border-success/50 backdrop-blur-sm",
2375
- warning: "bg-warning/20 text-foreground border-warning/50 backdrop-blur-sm",
2376
- error: "bg-destructive/20 text-foreground border-destructive/50 backdrop-blur-sm"
2377
- };
2378
- const iconClasses = {
2379
- info: "text-info",
2380
- success: "text-success",
2381
- warning: "text-warning",
2382
- error: "text-destructive"
2383
- };
2384
- const handleClose = useCallback(() => {
2385
- setIsClosing(true);
2386
- setTimeout(() => {
2387
- onClose?.();
2388
- }, 300);
2389
- }, [onClose]);
2390
- useEffect(() => {
2391
- if (duration > 0 && onClose) {
2392
- const timer = setTimeout(() => {
2393
- handleClose();
2394
- }, duration);
2395
- return () => clearTimeout(timer);
2396
- }
2397
- return void 0;
2398
- }, [duration, onClose, handleClose]);
2399
- const icons = {
2400
- info: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5 flex-shrink-0", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx(
2401
- "path",
2402
- {
2403
- fillRule: "evenodd",
2404
- d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z",
2405
- clipRule: "evenodd"
2406
- }
2407
- ) }),
2408
- success: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5 flex-shrink-0", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx(
2409
- "path",
2410
- {
2411
- fillRule: "evenodd",
2412
- d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
2413
- clipRule: "evenodd"
2414
- }
2415
- ) }),
2416
- warning: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5 flex-shrink-0", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx(
2417
- "path",
2418
- {
2419
- fillRule: "evenodd",
2420
- d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z",
2421
- clipRule: "evenodd"
2422
- }
2423
- ) }),
2424
- error: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5 flex-shrink-0", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx(
2425
- "path",
2426
- {
2427
- fillRule: "evenodd",
2428
- d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z",
2429
- clipRule: "evenodd"
2430
- }
2431
- ) })
2432
- };
2433
- const positionClasses = {
2434
- top: "fixed top-4 left-1/2 -translate-x-1/2 z-[9999] max-w-2xl w-full mx-4",
2435
- bottom: "fixed bottom-4 left-1/2 -translate-x-1/2 z-[9999] max-w-2xl w-full mx-4",
2436
- relative: ""
2437
- };
2438
- const getAnimationClasses = () => {
2439
- if (position === "top") {
2440
- return isClosing ? "opacity-0 -translate-y-full" : "opacity-100 translate-y-0 animate-slideInTop";
2441
- }
2442
- if (position === "bottom") {
2443
- return isClosing ? "opacity-0 translate-y-full" : "opacity-100 translate-y-0 animate-slideInBottom";
2444
- }
2445
- return isClosing ? "opacity-0" : "opacity-100";
2446
- };
2447
- const alertContent = /* @__PURE__ */ jsxs(
2448
- "div",
2449
- {
2450
- role: "alert",
2451
- className: `p-4 border rounded-lg flex items-start gap-3 transition-all duration-300 ease-out ${typeClasses[type]} ${positionClasses[position]} ${getAnimationClasses()} ${className}`,
2452
- children: [
2453
- /* @__PURE__ */ jsx("span", { className: iconClasses[type], children: icons[type] }),
2454
- /* @__PURE__ */ jsx("span", { className: "flex-1 text-sm", children }),
2455
- dismissible && onClose && /* @__PURE__ */ jsx(
2456
- "button",
2457
- {
2458
- onClick: handleClose,
2459
- className: "flex-shrink-0 text-current opacity-70 hover:opacity-100 transition-opacity focus:outline-none focus:ring-2 focus:ring-ring rounded p-0.5",
2460
- "aria-label": "Close alert",
2461
- children: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
2462
- }
2463
- )
2464
- ]
2465
- }
2466
- );
2467
- if (position !== "relative" && typeof document !== "undefined") {
2468
- return createPortal(alertContent, document.body);
2469
- }
2470
- return alertContent;
2471
- }
2472
- Alert.displayName = "Alert";
2473
- var alert_default = Alert;
2474
- function Spinner({ size = "md", variant = "primary", className = "", speed, ...props }) {
2475
- const sizeClasses = {
2476
- sm: "w-4 h-4 border-2",
2477
- md: "w-8 h-8 border-2",
2478
- lg: "w-12 h-12 border-4"
2479
- };
2480
- const variantTopBorder = {
2481
- primary: "border-t-primary",
2482
- accent: "border-t-accent",
2483
- secondary: "border-t-secondary",
2484
- neutral: "border-t-neutral"
2485
- }[variant];
2486
- const duration = speed ? `[animation-duration:${speed}]` : "";
2487
- return /* @__PURE__ */ jsx(
2488
- "div",
2489
- {
2490
- role: "status",
2491
- "aria-label": "Loading",
2492
- "data-variant": variant,
2493
- className: `inline-block border-muted ${variantTopBorder} rounded-full animate-spin ${duration} ${sizeClasses[size]} ${className}`,
2494
- ...props,
2495
- children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading..." })
2496
- }
2497
- );
2498
- }
2499
- Spinner.displayName = "Spinner";
2500
- var spinner_default = Spinner;
2501
- function ProgressBar({
2502
- value,
2503
- max = 100,
2504
- showLabel = false,
2505
- variant = "default",
2506
- className = ""
2507
- }) {
2508
- const percentage = Math.min(value / max * 100, 100);
2509
- const variantClasses = {
2510
- default: "bg-primary",
2511
- success: "bg-success",
2512
- warning: "bg-warning",
2513
- error: "bg-destructive"
2514
- };
2515
- return /* @__PURE__ */ jsxs("div", { className, children: [
2516
- /* @__PURE__ */ jsx("div", { className: "w-full bg-muted/30 rounded-full h-2.5 overflow-hidden shadow-inner", children: /* @__PURE__ */ jsx(
2517
- "div",
2518
- {
2519
- role: "progressbar",
2520
- "aria-valuenow": value,
2521
- "aria-valuemin": 0,
2522
- "aria-valuemax": max,
2523
- className: `h-full transition-all duration-500 ease-out rounded-full ${variantClasses[variant]}`,
2524
- style: { width: `${percentage}%` }
2525
- }
2526
- ) }),
2527
- showLabel && /* @__PURE__ */ jsxs("div", { className: "text-sm text-muted-foreground mt-2 text-right font-medium", children: [
2528
- Math.round(percentage),
2529
- "%"
2530
- ] })
2531
- ] });
2532
- }
2533
- ProgressBar.displayName = "ProgressBar";
2534
- var progress_bar_default = ProgressBar;
2535
- function Skeleton({ variant = "text", width, height, className = "", ...props }) {
2536
- const variantClasses = {
2537
- text: "rounded h-4",
2538
- circular: "rounded-full",
2539
- rectangular: "rounded-md"
2540
- };
2541
- const style = {
2542
- width: width || (variant === "circular" ? "40px" : "100%"),
2543
- height: height || (variant === "circular" ? "40px" : void 0)
2544
- };
2545
- return /* @__PURE__ */ jsx(
2546
- "div",
2547
- {
2548
- className: `bg-muted animate-pulse ${variantClasses[variant]} ${className}`,
2549
- style,
2550
- "aria-busy": "true",
2551
- "aria-live": "polite",
2552
- ...props,
2553
- children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading..." })
2554
- }
2555
- );
2556
- }
2557
- Skeleton.displayName = "Skeleton";
2558
- var skeleton_default = Skeleton;
2559
- function Badge({ children, variant = "default", size = "md", className = "", ...props }) {
2560
- const variantClasses = {
2561
- default: "bg-muted text-muted-foreground border border-border",
2562
- primary: "bg-primary/10 text-primary border border-primary/20",
2563
- success: "bg-success/10 text-success border border-success/20",
2564
- warning: "bg-warning/10 text-warning border border-warning/20",
2565
- error: "bg-destructive/10 text-destructive border border-destructive/20"
2566
- };
2567
- const sizeClasses = {
2568
- sm: "px-2 py-0.5 text-xs",
2569
- md: "px-2.5 py-0.5 text-xs font-semibold",
2570
- lg: "px-3 py-1 text-sm font-semibold"
2571
- };
2572
- return /* @__PURE__ */ jsx(
2573
- "span",
2574
- {
2575
- className: `inline-flex items-center font-medium rounded-full transition-colors ${variantClasses[variant]} ${sizeClasses[size]} ${className}`,
2576
- ...props,
2577
- children
2578
- }
2579
- );
2580
- }
2581
- Badge.displayName = "Badge";
2582
- var badge_default = Badge;
2583
- function StatusLabel({
2584
- children,
2585
- status = "info",
2586
- size = "md",
2587
- variant = "filled",
2588
- className = ""
2589
- }) {
2590
- const statusConfig = {
2591
- active: {
2592
- filled: "bg-success/10 text-success border-success/20",
2593
- outlined: "bg-transparent text-success border-success",
2594
- dot: "bg-success"
2595
- },
2596
- inactive: {
2597
- filled: "bg-muted text-muted-foreground border-border",
2598
- outlined: "bg-transparent text-muted-foreground border-muted-foreground",
2599
- dot: "bg-muted-foreground"
2600
- },
2601
- pending: {
2602
- filled: "bg-warning/10 text-warning border-warning/20",
2603
- outlined: "bg-transparent text-warning border-warning",
2604
- dot: "bg-warning"
2605
- },
2606
- success: {
2607
- filled: "bg-success/10 text-success border-success/20",
2608
- outlined: "bg-transparent text-success border-success",
2609
- dot: "bg-success"
2610
- },
2611
- error: {
2612
- filled: "bg-destructive/10 text-destructive border-destructive/20",
2613
- outlined: "bg-transparent text-destructive border-destructive",
2614
- dot: "bg-destructive"
2615
- },
2616
- warning: {
2617
- filled: "bg-warning/10 text-warning border-warning/20",
2618
- outlined: "bg-transparent text-warning border-warning",
2619
- dot: "bg-warning"
2620
- },
2621
- info: {
2622
- filled: "bg-primary/10 text-primary border-primary/20",
2623
- outlined: "bg-transparent text-primary border-primary",
2624
- dot: "bg-primary"
2625
- }
2626
- };
2627
- const sizeClasses = {
2628
- sm: {
2629
- container: "px-2 py-0.5 text-xs gap-1.5",
2630
- dot: "w-1.5 h-1.5"
2631
- },
2632
- md: {
2633
- container: "px-2.5 py-0.5 text-sm gap-2",
2634
- dot: "w-2 h-2"
2635
- },
2636
- lg: {
2637
- container: "px-3 py-1 text-base gap-2",
2638
- dot: "w-2.5 h-2.5"
2639
- }
2640
- };
2641
- return /* @__PURE__ */ jsxs(
2642
- "span",
2643
- {
2644
- className: `inline-flex items-center font-medium rounded-full border ${statusConfig[status][variant]} ${sizeClasses[size].container} ${className}`,
2645
- children: [
2646
- /* @__PURE__ */ jsx("span", { className: `rounded-full ${statusConfig[status].dot} ${sizeClasses[size].dot}` }),
2647
- children
2648
- ]
2649
- }
2650
- );
2651
- }
2652
- StatusLabel.displayName = "StatusLabel";
2653
- var status_label_default = StatusLabel;
2654
- function Avatar({ src, alt = "", fallback, size = "md", className = "" }) {
2655
- const sizeClasses = {
2656
- sm: "w-8 h-8 text-xs",
2657
- md: "w-10 h-10 text-sm",
2658
- lg: "w-12 h-12 text-base",
2659
- xl: "w-16 h-16 text-lg"
2660
- };
2661
- let content;
2662
- if (src) {
2663
- content = /* @__PURE__ */ jsx("img", { src, alt, className: "w-full h-full object-cover" });
2664
- } else if (fallback) {
2665
- content = fallback;
2666
- } else {
2667
- content = /* @__PURE__ */ jsx("span", { children: alt.charAt(0).toUpperCase() });
2668
- }
2669
- return /* @__PURE__ */ jsx(
2670
- "div",
2671
- {
2672
- className: `inline-flex items-center justify-center rounded-full bg-muted text-muted-foreground font-medium overflow-hidden ${sizeClasses[size]} ${className}`,
2673
- children: content
2674
- }
2675
- );
2676
- }
2677
- Avatar.displayName = "Avatar";
2678
- var avatar_default = Avatar;
2679
- function EmptyState({ title, description, icon, action, className = "" }) {
2680
- return /* @__PURE__ */ jsxs("div", { className: `flex flex-col items-center justify-center text-center py-12 ${className}`, children: [
2681
- icon && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground mb-4", children: icon }),
2682
- /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-foreground mb-2", children: title }),
2683
- description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-6 max-w-sm", children: description }),
2684
- action
2685
- ] });
2686
- }
2687
- EmptyState.displayName = "EmptyState";
2688
- var empty_state_default = EmptyState;
2689
- function List({ children, className = "", ordered = false }) {
2690
- const Component = ordered ? "ol" : "ul";
2691
- return /* @__PURE__ */ jsx(Component, { className: `divide-y divide-border ${className}`, children });
2692
- }
2693
- List.displayName = "List";
2694
- function ListItem({ children, className = "" }) {
2695
- return /* @__PURE__ */ jsx("li", { className: `py-3 ${className}`, children });
2696
- }
2697
- ListItem.displayName = "ListItem";
2698
- function Table({
2699
- children,
2700
- className = "",
2701
- striped = false,
2702
- bordered = false,
2703
- hoverable = false,
2704
- compact = false,
2705
- caption,
2706
- ...props
2707
- }) {
2708
- const baseClasses = "w-full text-sm text-left";
2709
- const stripedClasses = striped ? "striped" : "";
2710
- const borderedClasses = bordered ? "border border-border" : "";
2711
- const compactClasses = compact ? "table-compact" : "";
2712
- return /* @__PURE__ */ jsxs("div", { className: "overflow-x-auto rounded-lg", children: [
2713
- /* @__PURE__ */ jsxs(
2714
- "table",
2715
- {
2716
- className: `${baseClasses} ${stripedClasses} ${borderedClasses} ${compactClasses} ${className}`,
2717
- ...props,
2718
- children: [
2719
- caption && /* @__PURE__ */ jsx("caption", { className: "sr-only", children: caption }),
2720
- children
2721
- ]
2722
- }
2723
- ),
2724
- /* @__PURE__ */ jsx("style", { children: `
2725
- .striped tbody tr:nth-child(even) {
2726
- background-color: hsl(var(--muted) / 0.3);
2727
- }
2728
- ${hoverable ? `
2729
- table tbody tr:hover {
2730
- background-color: hsl(var(--muted) / 0.5);
2731
- }
2732
- ` : ""}
2733
- .table-compact td,
2734
- .table-compact th {
2735
- padding: 0.5rem;
2736
- }
2737
- ` })
2738
- ] });
2739
- }
2740
- function TableHeader({ children, className = "", ...props }) {
2741
- return /* @__PURE__ */ jsx("thead", { className: `text-xs text-muted-foreground uppercase bg-muted/50 ${className}`, ...props, children });
2742
- }
2743
- function TableBody({ children, className = "", ...props }) {
2744
- return /* @__PURE__ */ jsx("tbody", { className: `divide-y divide-border ${className}`, ...props, children });
2745
- }
2746
- function TableFooter({ children, className = "", ...props }) {
2747
- return /* @__PURE__ */ jsx("tfoot", { className: `text-xs font-semibold text-foreground bg-muted/30 ${className}`, ...props, children });
2748
- }
2749
- function TableRow({ children, className = "", selected = false, ...props }) {
2750
- const selectedClasses = selected ? "bg-primary/10" : "";
2751
- return /* @__PURE__ */ jsx("tr", { className: `${selectedClasses} ${className}`, ...props, children });
2752
- }
2753
- function TableHeadCell({
2754
- children,
2755
- className = "",
2756
- align = "left",
2757
- scope = "col",
2758
- ...props
2759
- }) {
2760
- const alignClasses = {
2761
- left: "text-left",
2762
- center: "text-center",
2763
- right: "text-right"
2764
- };
2765
- return /* @__PURE__ */ jsx("th", { scope, className: `px-6 py-3 font-medium ${alignClasses[align]} ${className}`, ...props, children });
2766
- }
2767
- function TableCell({ children, className = "", align = "left", ...props }) {
2768
- const alignClasses = {
2769
- left: "text-left",
2770
- center: "text-center",
2771
- right: "text-right"
2772
- };
2773
- return /* @__PURE__ */ jsx("td", { className: `px-6 py-4 whitespace-nowrap ${alignClasses[align]} ${className}`, ...props, children });
2774
- }
2775
- function useTable({ data, initialSort, pageSize = 10 }) {
2776
- const [sortConfig, setSortConfig] = useState(
2777
- initialSort ? { key: initialSort.key, direction: initialSort.direction } : null
2778
- );
2779
- const [currentPage, setCurrentPage] = useState(1);
2780
- const [selectedRows, setSelectedRows] = useState(/* @__PURE__ */ new Set());
2781
- const sortedData = useMemo(() => {
2782
- if (!sortConfig) return data;
2783
- const sorted = [...data].sort((a, b) => {
2784
- const aValue = a[sortConfig.key];
2785
- const bValue = b[sortConfig.key];
2786
- if (aValue === bValue) return 0;
2787
- if (aValue == null) return 1;
2788
- if (bValue == null) return -1;
2789
- if (aValue < bValue) {
2790
- return sortConfig.direction === "asc" ? -1 : 1;
2791
- }
2792
- return sortConfig.direction === "asc" ? 1 : -1;
2793
- });
2794
- return sorted;
2795
- }, [data, sortConfig]);
2796
- const totalPages = Math.ceil(sortedData.length / pageSize);
2797
- const startIndex = (currentPage - 1) * pageSize;
2798
- const endIndex = startIndex + pageSize;
2799
- const currentData = sortedData.slice(startIndex, endIndex);
2800
- const handleSort = (key) => {
2801
- let direction = "asc";
2802
- if (sortConfig?.key === key) {
2803
- if (sortConfig.direction === "asc") {
2804
- direction = "desc";
2805
- } else if (sortConfig.direction === "desc") {
2806
- direction = null;
2807
- }
2808
- }
2809
- setSortConfig(direction ? { key, direction } : null);
2810
- setCurrentPage(1);
2811
- };
2812
- const nextPage = () => {
2813
- setCurrentPage((prev) => Math.min(prev + 1, totalPages));
2814
- };
2815
- const prevPage = () => {
2816
- setCurrentPage((prev) => Math.max(prev - 1, 1));
2817
- };
2818
- const canNextPage = currentPage < totalPages;
2819
- const canPrevPage = currentPage > 1;
2820
- const toggleRow = (index) => {
2821
- setSelectedRows((prev) => {
2822
- const newSet = new Set(prev);
2823
- if (newSet.has(index)) {
2824
- newSet.delete(index);
2825
- } else {
2826
- newSet.add(index);
2827
- }
2828
- return newSet;
2829
- });
2830
- };
2831
- const toggleAll = () => {
2832
- if (selectedRows.size === currentData.length) {
2833
- setSelectedRows(/* @__PURE__ */ new Set());
2834
- } else {
2835
- const allIndices = currentData.map((_, idx) => startIndex + idx);
2836
- setSelectedRows(new Set(allIndices));
2837
- }
2838
- };
2839
- const isRowSelected = (index) => selectedRows.has(index);
2840
- const isAllSelected = currentData.length > 0 && currentData.every((_, idx) => selectedRows.has(startIndex + idx));
2841
- const clearSelection = () => setSelectedRows(/* @__PURE__ */ new Set());
2842
- return {
2843
- currentData,
2844
- sortedData,
2845
- sortConfig,
2846
- handleSort,
2847
- currentPage,
2848
- totalPages,
2849
- setCurrentPage,
2850
- nextPage,
2851
- prevPage,
2852
- canNextPage,
2853
- canPrevPage,
2854
- selectedRows,
2855
- toggleRow,
2856
- toggleAll,
2857
- isRowSelected,
2858
- isAllSelected,
2859
- clearSelection
2860
- };
2861
- }
2862
- function DataTable({
2863
- data,
2864
- columns,
2865
- className = "",
2866
- striped = true,
2867
- bordered = false,
2868
- hoverable = true,
2869
- compact = false,
2870
- stickyHeader = false,
2871
- sortable = true,
2872
- paginated = false,
2873
- pageSize = 10,
2874
- selectable = false,
2875
- actions,
2876
- actionsLabel = "Actions",
2877
- actionsWidth = "w-32",
2878
- onRowClick,
2879
- onSelectionChange,
2880
- emptyMessage = "No data available",
2881
- emptyIcon,
2882
- initialSort
2883
- }) {
2884
- const tableOptions = {
2885
- data,
2886
- initialSort,
2887
- pageSize
2888
- };
2889
- const {
2890
- currentData,
2891
- sortedData,
2892
- sortConfig,
2893
- handleSort,
2894
- currentPage,
2895
- totalPages,
2896
- nextPage,
2897
- prevPage,
2898
- canNextPage,
2899
- canPrevPage,
2900
- selectedRows,
2901
- toggleRow,
2902
- toggleAll,
2903
- isRowSelected,
2904
- isAllSelected
2905
- } = useTable(tableOptions);
2906
- const displayData = paginated ? currentData : sortedData;
2907
- const handleToggleRow = (index) => {
2908
- toggleRow(index);
2909
- if (onSelectionChange) {
2910
- const newSelection = new Set(selectedRows);
2911
- if (newSelection.has(index)) {
2912
- newSelection.delete(index);
2913
- } else {
2914
- newSelection.add(index);
2915
- }
2916
- onSelectionChange(Array.from(newSelection));
2917
- }
2918
- };
2919
- const handleToggleAll = () => {
2920
- toggleAll();
2921
- if (onSelectionChange) {
2922
- if (isAllSelected) {
2923
- onSelectionChange([]);
2924
- } else {
2925
- const startIndex = (currentPage - 1) * pageSize;
2926
- const allIndices = displayData.map((_, idx) => startIndex + idx);
2927
- onSelectionChange(allIndices);
2928
- }
2929
- }
2930
- };
2931
- const renderSortIcon = (columnKey) => {
2932
- if (!sortable) return null;
2933
- const isSorted = sortConfig?.key === columnKey;
2934
- if (!isSorted) {
2935
- return /* @__PURE__ */ jsx(IconSelector, { className: "w-4 h-4 ml-1 text-muted-foreground" });
2936
- }
2937
- if (sortConfig?.direction === "asc") {
2938
- return /* @__PURE__ */ jsx(IconChevronUp, { className: "w-4 h-4 ml-1 text-primary" });
2939
- }
2940
- return /* @__PURE__ */ jsx(IconChevronDown, { className: "w-4 h-4 ml-1 text-primary" });
2941
- };
2942
- if (data.length === 0) {
2943
- return /* @__PURE__ */ jsx("div", { className: "border border-border rounded-lg", children: /* @__PURE__ */ jsx(empty_state_default, { title: emptyMessage, icon: emptyIcon, className: "py-12" }) });
2944
- }
2945
- return /* @__PURE__ */ jsxs("div", { className, children: [
2946
- /* @__PURE__ */ jsx("div", { className: stickyHeader ? "overflow-auto max-h-[600px]" : "", children: /* @__PURE__ */ jsxs(Table, { striped, bordered, hoverable, compact, children: [
2947
- /* @__PURE__ */ jsx(TableHeader, { className: stickyHeader ? "sticky top-0 z-10 bg-background shadow-sm" : "", children: /* @__PURE__ */ jsxs(TableRow, { children: [
2948
- selectable && /* @__PURE__ */ jsx(TableHeadCell, { className: "w-12", children: /* @__PURE__ */ jsx(checkbox_default, { checked: isAllSelected, onChange: handleToggleAll, ariaLabel: "Select all rows" }) }),
2949
- columns.map((column) => /* @__PURE__ */ jsx(
2950
- TableHeadCell,
2951
- {
2952
- align: column.align,
2953
- className: column.width ? `w-[${column.width}]` : "",
2954
- children: column.sortable !== false && sortable ? /* @__PURE__ */ jsxs(
2955
- "button",
2956
- {
2957
- onClick: () => handleSort(column.key),
2958
- className: "flex items-center gap-1 hover:text-foreground transition-colors font-medium",
2959
- type: "button",
2960
- children: [
2961
- column.label,
2962
- renderSortIcon(column.key)
2963
- ]
2964
- }
2965
- ) : column.label
2966
- },
2967
- String(column.key)
2968
- )),
2969
- actions && /* @__PURE__ */ jsx(TableHeadCell, { align: "center", className: actionsWidth, children: actionsLabel })
2970
- ] }) }),
2971
- /* @__PURE__ */ jsx(TableBody, { children: displayData.map((row, rowIndex) => {
2972
- const actualIndex = paginated ? (currentPage - 1) * pageSize + rowIndex : rowIndex;
2973
- const isSelected = isRowSelected(actualIndex);
2974
- return /* @__PURE__ */ jsxs(
2975
- TableRow,
2976
- {
2977
- selected: isSelected,
2978
- onClick: onRowClick ? () => onRowClick(row, actualIndex) : void 0,
2979
- className: onRowClick ? "cursor-pointer" : "",
2980
- children: [
2981
- selectable && /* @__PURE__ */ jsx(TableCell, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
2982
- checkbox_default,
2983
- {
2984
- checked: isSelected,
2985
- onChange: () => handleToggleRow(actualIndex),
2986
- ariaLabel: `Select row ${actualIndex + 1}`
2987
- }
2988
- ) }),
2989
- columns.map((column) => {
2990
- const value = row[column.key];
2991
- const content = column.render ? column.render(value, row, actualIndex) : String(value ?? "");
2992
- return /* @__PURE__ */ jsx(TableCell, { align: column.align, children: content }, String(column.key));
2993
- }),
2994
- actions && /* @__PURE__ */ jsx(TableCell, { align: "center", onClick: (e) => e.stopPropagation(), children: Array.isArray(actions) ? /* @__PURE__ */ jsx(stack_default, { direction: "horizontal", spacing: "sm", justify: "center", children: actions.map((action, actionIndex) => {
2995
- if (action && typeof action === "object" && "onClick" in action) {
2996
- const actionConfig = action;
2997
- return /* @__PURE__ */ jsx(
2998
- button_default,
2999
- {
3000
- size: "sm",
3001
- variant: actionConfig.variant || "neutral",
3002
- style: "ghost",
3003
- icon: actionConfig.icon,
3004
- ariaLabel: actionConfig.label,
3005
- onClick: () => actionConfig.onClick(row, actualIndex)
3006
- },
3007
- actionIndex
3008
- );
3009
- } else {
3010
- return /* @__PURE__ */ jsx("div", { children: action }, actionIndex);
3011
- }
3012
- }) }) : actions(row, actualIndex) })
3013
- ]
3014
- },
3015
- actualIndex
3016
- );
3017
- }) })
3018
- ] }) }),
3019
- paginated && totalPages > 1 && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-t border-border", children: [
3020
- /* @__PURE__ */ jsxs("div", { className: "text-sm text-muted-foreground", children: [
3021
- "Page ",
3022
- currentPage,
3023
- " of ",
3024
- totalPages,
3025
- " (",
3026
- data.length,
3027
- " total rows)"
3028
- ] }),
3029
- /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
3030
- /* @__PURE__ */ jsx(button_default, { size: "sm", style: "outline", onClick: prevPage, disabled: !canPrevPage, children: "Previous" }),
3031
- /* @__PURE__ */ jsx(button_default, { size: "sm", style: "outline", onClick: nextPage, disabled: !canNextPage, children: "Next" })
3032
- ] })
3033
- ] })
3034
- ] });
3035
- }
3036
- DataTable.displayName = "DataTable";
3037
- var data_table_default = DataTable;
3038
- function Chip({
3039
- children,
3040
- className = "",
3041
- variant = "default",
3042
- size = "md",
3043
- onRemove,
3044
- icon,
3045
- disabled = false,
3046
- clickable = false,
3047
- onClick
3048
- }) {
3049
- const sizeClasses = {
3050
- sm: "text-xs px-2 py-1 gap-1",
3051
- md: "text-sm px-3 py-1.5 gap-1.5",
3052
- lg: "text-base px-4 py-2 gap-2"
3053
- };
3054
- const variantClasses = {
3055
- default: "bg-muted text-muted-foreground",
3056
- primary: "bg-primary/10 text-primary",
3057
- success: "bg-success/10 text-success",
3058
- warning: "bg-warning/10 text-warning",
3059
- error: "bg-destructive/10 text-destructive"
3060
- };
3061
- const interactiveClasses = clickable && !disabled ? "cursor-pointer hover:opacity-80 active:opacity-60 transition-opacity" : "";
3062
- const disabledClasses = disabled ? "opacity-50 cursor-not-allowed" : "";
3063
- const handleClick = (e) => {
3064
- if (!disabled && clickable && onClick) {
3065
- onClick(e);
3066
- }
3067
- };
3068
- const handleRemove = (e) => {
3069
- e.stopPropagation();
3070
- if (!disabled && onRemove) {
3071
- onRemove(e);
3072
- }
3073
- };
3074
- return /* @__PURE__ */ jsxs(
3075
- "div",
3076
- {
3077
- className: `
3078
- inline-flex items-center justify-center
3079
- rounded-full font-medium
3080
- ${sizeClasses[size]}
3081
- ${variantClasses[variant]}
3082
- ${interactiveClasses}
3083
- ${disabledClasses}
3084
- ${className}
3085
- `,
3086
- onClick: handleClick,
3087
- role: clickable ? "button" : void 0,
3088
- tabIndex: clickable && !disabled ? 0 : void 0,
3089
- onKeyDown: clickable && !disabled ? (e) => {
3090
- if (e.key === "Enter" || e.key === " ") {
3091
- e.preventDefault();
3092
- onClick?.(e);
3093
- }
3094
- } : void 0,
3095
- children: [
3096
- icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 flex items-center", children: icon }),
3097
- /* @__PURE__ */ jsx("span", { className: "truncate", children }),
3098
- onRemove && /* @__PURE__ */ jsx(
3099
- "button",
3100
- {
3101
- type: "button",
3102
- onClick: handleRemove,
3103
- disabled,
3104
- className: `
3105
- flex-shrink-0 flex items-center justify-center
3106
- rounded-full hover:bg-black/10 dark:hover:bg-white/10
3107
- transition-colors
3108
- ${size === "sm" ? "w-3 h-3" : size === "md" ? "w-4 h-4" : "w-5 h-5"}
3109
- ${disabled ? "cursor-not-allowed" : "cursor-pointer"}
3110
- `,
3111
- "aria-label": "Remove",
3112
- children: /* @__PURE__ */ jsx(IconX, { className: size === "sm" ? "w-2.5 h-2.5" : size === "md" ? "w-3 h-3" : "w-3.5 h-3.5" })
3113
- }
3114
- )
3115
- ]
3116
- }
3117
- );
3118
- }
3119
- Chip.displayName = "Chip";
3120
- var chip_default = Chip;
3121
- function TimelineItem({
3122
- children,
3123
- className = "",
3124
- icon,
3125
- iconColor = "default",
3126
- title,
3127
- subtitle,
3128
- timestamp,
3129
- isLast = false
3130
- }) {
3131
- const iconColorClasses = {
3132
- default: "bg-muted text-muted-foreground",
3133
- primary: "bg-primary text-primary-foreground",
3134
- success: "bg-success text-success-foreground",
3135
- warning: "bg-warning text-warning-foreground",
3136
- error: "bg-destructive text-destructive-foreground"
3137
- };
3138
- return /* @__PURE__ */ jsxs("div", { className: `flex gap-4 ${className}`, children: [
3139
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
3140
- /* @__PURE__ */ jsx(
3141
- "div",
3142
- {
3143
- className: `
3144
- flex items-center justify-center
3145
- w-8 h-8 rounded-full
3146
- flex-shrink-0
3147
- ${iconColorClasses[iconColor]}
3148
- `,
3149
- children: icon || /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-current" })
3150
- }
3151
- ),
3152
- !isLast && /* @__PURE__ */ jsx("div", { className: "w-0.5 flex-1 bg-border mt-2" })
3153
- ] }),
3154
- /* @__PURE__ */ jsxs("div", { className: `flex-1 ${!isLast ? "pb-8" : ""}`, children: [
3155
- (title || timestamp) && /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4 mb-1", children: [
3156
- title && /* @__PURE__ */ jsx("h4", { className: "font-semibold text-foreground", children: title }),
3157
- timestamp && /* @__PURE__ */ jsx("time", { className: "text-sm text-muted-foreground whitespace-nowrap", children: timestamp })
3158
- ] }),
3159
- subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-2", children: subtitle }),
3160
- children && /* @__PURE__ */ jsx("div", { className: "text-sm text-foreground", children })
3161
- ] })
3162
- ] });
3163
- }
3164
- function Timeline({ children, className = "", position = "left" }) {
3165
- const positionClasses = {
3166
- left: "",
3167
- center: "mx-auto max-w-2xl",
3168
- right: "ml-auto max-w-2xl"
3169
- };
3170
- return /* @__PURE__ */ jsx("div", { className: `${positionClasses[position]} ${className}`, children });
3171
- }
3172
- Timeline.displayName = "Timeline";
3173
- var timeline_default = Timeline;
3174
- function Grid({
3175
- children,
3176
- className = "",
3177
- itemSize = "md",
3178
- maxCols,
3179
- gap = "md",
3180
- responsive,
3181
- alignItems = "stretch",
3182
- justifyItems = "stretch"
3183
- }) {
3184
- const itemSizeValues = {
3185
- xs: "150px",
3186
- sm: "200px",
3187
- md: "250px",
3188
- lg: "300px",
3189
- xl: "350px",
3190
- "2xl": "400px"
3191
- };
3192
- const gapClasses = {
3193
- none: "gap-0",
3194
- xs: "gap-1",
3195
- sm: "gap-2",
3196
- md: "gap-4",
3197
- lg: "gap-6",
3198
- xl: "gap-8",
3199
- "2xl": "gap-12"
3200
- };
3201
- const alignItemsClasses = {
3202
- start: "items-start",
3203
- center: "items-center",
3204
- end: "items-end",
3205
- stretch: "items-stretch"
3206
- };
3207
- const justifyItemsClasses = {
3208
- start: "justify-items-start",
3209
- center: "justify-items-center",
3210
- end: "justify-items-end",
3211
- stretch: "justify-items-stretch"
3212
- };
3213
- const responsiveClasses = responsive ? Object.entries(responsive).map(([breakpoint, cols]) => {
3214
- const breakpointPrefix = breakpoint === "sm" ? "sm:" : breakpoint === "md" ? "md:" : breakpoint === "lg" ? "lg:" : "xl:";
3215
- return `${breakpointPrefix}grid-cols-${cols}`;
3216
- }).join(" ") : "";
3217
- const minWidth = itemSizeValues[itemSize];
3218
- const gridStyle = !responsive ? {
3219
- gridTemplateColumns: maxCols ? `repeat(auto-fit, minmax(min(${minWidth}, 100%), 1fr))` : `repeat(auto-fill, minmax(min(${minWidth}, 100%), 1fr))`
3220
- } : void 0;
3221
- return /* @__PURE__ */ jsx(
3222
- "div",
3223
- {
3224
- className: `
3225
- grid
3226
- ${!responsive ? "" : responsiveClasses}
3227
- ${gapClasses[gap]}
3228
- ${alignItemsClasses[alignItems]}
3229
- ${justifyItemsClasses[justifyItems]}
3230
- ${className}
3231
- `.trim(),
3232
- style: gridStyle,
3233
- children
3234
- }
3235
- );
3236
- }
3237
- Grid.displayName = "Grid";
3238
- var grid_default = Grid;
3239
- function Heading({ children, level = 1, className = "", noMargin = false }) {
3240
- const levelClasses = {
3241
- 1: "text-4xl font-bold",
3242
- 2: "text-3xl font-bold",
3243
- 3: "text-2xl font-semibold",
3244
- 4: "text-xl font-semibold",
3245
- 5: "text-lg font-medium",
3246
- 6: "text-base font-medium"
3247
- };
3248
- const marginClasses = {
3249
- 1: "mb-4",
3250
- 2: "mb-3",
3251
- 3: "mb-3",
3252
- 4: "mb-2",
3253
- 5: "mb-2",
3254
- 6: "mb-2"
3255
- };
3256
- const margin = noMargin ? "" : marginClasses[level];
3257
- return createElement(
3258
- `h${level}`,
3259
- {
3260
- className: `text-foreground ${levelClasses[level]} ${margin} ${className}`
3261
- },
3262
- children
3263
- );
3264
- }
3265
- Heading.displayName = "Heading";
3266
- var heading_default = Heading;
3267
- function PricingTable({ title, description, children, columns = 3, className = "" }) {
3268
- return /* @__PURE__ */ jsx("section", { className: `py-16 md:py-20 ${className}`, children: /* @__PURE__ */ jsxs(container_default, { size: "xl", children: [
3269
- (title || description) && /* @__PURE__ */ jsxs("div", { className: "text-center mb-12 md:mb-16 max-w-3xl mx-auto", children: [
3270
- title && /* @__PURE__ */ jsx(heading_default, { level: 2, className: "text-3xl md:text-4xl font-bold mb-4", children: title }),
3271
- description && /* @__PURE__ */ jsx(text_default, { className: "text-lg md:text-xl text-muted", children: description })
3272
- ] }),
3273
- /* @__PURE__ */ jsx(grid_default, { itemSize: "lg", maxCols: columns, gap: "lg", className: "items-stretch", children })
3274
- ] }) });
3275
- }
3276
- PricingTable.displayName = "PricingTable";
3277
- var pricing_table_default = PricingTable;
3278
- function Card({
3279
- children,
3280
- className = "",
3281
- variant = "default",
3282
- size = "md",
3283
- width = "auto",
3284
- hoverable = false,
3285
- imagePosition = "top",
3286
- centered = false,
3287
- compact = false,
3288
- ...props
3289
- }) {
3290
- const variantClasses = {
3291
- default: "bg-card text-card-foreground border border-border shadow-md",
3292
- bordered: "bg-card text-card-foreground border-2 border-border",
3293
- ghost: "bg-transparent",
3294
- filled: "bg-muted text-foreground"
3295
- };
3296
- const sizeClasses = {
3297
- xs: "w-36",
3298
- sm: "w-64",
3299
- md: "w-96",
3300
- lg: "w-[28rem]",
3301
- xl: "w-[32rem]"
3302
- };
3303
- const widthClasses = {
3304
- auto: size !== "md" ? sizeClasses[size] : "max-w-full",
3305
- full: "w-full",
3306
- fit: "w-fit"
3307
- };
3308
- const hoverClasses = hoverable ? "transition-all duration-300 hover:shadow-xl hover:-translate-y-1 cursor-pointer" : "transition-shadow duration-200";
3309
- const imagePositionClasses = {
3310
- top: "flex-col",
3311
- bottom: "flex-col-reverse",
3312
- side: "flex-row",
3313
- overlay: "relative"
3314
- };
3315
- const centerClasses = centered ? "text-center items-center" : "";
3316
- return /* @__PURE__ */ jsx(
3317
- "div",
3318
- {
3319
- className: `
3320
- rounded-2xl
3321
- overflow-hidden
3322
- ${variantClasses[variant]}
3323
- ${widthClasses[width]}
3324
- ${hoverClasses}
3325
- ${imagePositionClasses[imagePosition]}
3326
- ${centerClasses}
3327
- ${compact ? "p-4" : ""}
3328
- ${imagePosition === "side" ? "flex" : "flex"}
3329
- ${className}
3330
- `.trim().replace(/\s+/g, " "),
3331
- ...props,
3332
- children
3333
- }
3334
- );
3335
- }
3336
- Card.displayName = "Card";
3337
- var card_default = Card;
3338
- function CardHeader({ children, className = "", bordered = true, padding = "md" }) {
3339
- const paddingClasses = {
3340
- none: "p-0",
3341
- sm: "p-4",
3342
- md: "p-6",
3343
- lg: "p-8"
3344
- };
3345
- return /* @__PURE__ */ jsx(
3346
- "div",
3347
- {
3348
- className: `
3349
- card-header
3350
- flex items-center justify-between gap-3
3351
- ${paddingClasses[padding]}
3352
- ${bordered ? "border-b border-border" : ""}
3353
- ${className}
3354
- `.trim().replace(/\s+/g, " "),
3355
- children
3356
- }
3357
- );
3358
- }
3359
- CardHeader.displayName = "CardHeader";
3360
- var card_header_default = CardHeader;
3361
- function CardFooter({
3362
- children,
3363
- className = "",
3364
- bordered = true,
3365
- padding = "md",
3366
- align = "start"
3367
- }) {
3368
- const paddingClasses = {
3369
- none: "p-0",
3370
- sm: "p-4",
3371
- md: "p-6",
3372
- lg: "p-8"
3373
- };
3374
- const alignClasses = {
3375
- start: "justify-start",
3376
- center: "justify-center",
3377
- end: "justify-end"
3378
- };
3379
- return /* @__PURE__ */ jsx(
3380
- "div",
3381
- {
3382
- className: `
3383
- card-footer
3384
- flex items-center gap-1
3385
- ${paddingClasses[padding]}
3386
- ${bordered ? "border-t border-border" : ""}
3387
- ${alignClasses[align]}
3388
- ${className}
3389
- `.trim().replace(/\s+/g, " "),
3390
- children
3391
- }
3392
- );
3393
- }
3394
- CardFooter.displayName = "CardFooter";
3395
- var card_footer_default = CardFooter;
3396
- function PricingTier({
3397
- name,
3398
- price,
3399
- period = "/month",
3400
- description,
3401
- features,
3402
- ctaLabel,
3403
- ctaOnClick,
3404
- featured = false,
3405
- badge,
3406
- className = ""
3407
- }) {
3408
- return /* @__PURE__ */ jsxs(
3409
- card_default,
3410
- {
3411
- className: `relative flex flex-col h-full ${featured ? "border-2 border-primary shadow-xl" : "border border-border"} ${className}`,
3412
- children: [
3413
- /* @__PURE__ */ jsxs(card_header_default, { className: `relative text-center border-none bg-transparent px-6 pt-12 pb-0`, children: [
3414
- badge && /* @__PURE__ */ jsx("div", { className: "absolute top-2 left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsx(badge_default, { variant: "primary", className: "px-4 py-1 shadow-md", children: badge }) }),
3415
- /* @__PURE__ */ jsx(heading_default, { level: 3, className: "text-2xl font-bold mb-3 text-foreground", children: name }),
3416
- description && /* @__PURE__ */ jsx(text_default, { variant: "muted", className: "text-sm mb-1", children: description })
3417
- ] }),
3418
- /* @__PURE__ */ jsx("div", { className: "pt-3 pb-8 text-center px-6", children: /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-center gap-1", children: [
3419
- /* @__PURE__ */ jsx("span", { className: "text-5xl font-bold text-foreground", children: price }),
3420
- period && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-lg", children: period })
3421
- ] }) }),
3422
- /* @__PURE__ */ jsx("div", { className: "flex-1 space-y-4 py-6 px-6 border-t border-border/50", children: features.map((feature, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
3423
- /* @__PURE__ */ jsx(
3424
- IconCheck,
3425
- {
3426
- size: 20,
3427
- className: `flex-shrink-0 mt-0.5 ${feature.included ? "text-success" : "text-muted-foreground opacity-30"}`
3428
- }
3429
- ),
3430
- /* @__PURE__ */ jsx(text_default, { className: `text-sm ${feature.included ? "text-foreground" : "text-muted-foreground line-through"}`, children: feature.label })
3431
- ] }, index)) }),
3432
- /* @__PURE__ */ jsx(card_footer_default, { className: "border-none bg-transparent px-6 pb-6 pt-4", children: /* @__PURE__ */ jsx(
3433
- button_default,
3434
- {
3435
- variant: featured ? "primary" : "neutral",
3436
- style: featured ? "solid" : "outline",
3437
- className: "w-full",
3438
- size: "lg",
3439
- onClick: ctaOnClick,
3440
- children: ctaLabel
3441
- }
3442
- ) })
3443
- ]
3444
- }
3445
- );
3446
- }
3447
- PricingTier.displayName = "PricingTier";
3448
- var pricing_tier_default = PricingTier;
3449
- function CodeBlock({ code, className = "", showCopy = true }) {
3450
- const [copied, setCopied] = useState(false);
3451
- const handleCopy = async () => {
3452
- try {
3453
- await navigator.clipboard.writeText(code);
3454
- setCopied(true);
3455
- setTimeout(() => setCopied(false), 2e3);
3456
- } catch (err) {
3457
- console.error("Failed to copy code:", err);
3458
- }
3459
- };
3460
- return /* @__PURE__ */ jsxs("div", { className: `relative group ${className}`, children: [
3461
- showCopy && /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity", children: /* @__PURE__ */ jsx(
3462
- button_default,
3463
- {
3464
- variant: "neutral",
3465
- style: "ghost",
3466
- size: "sm",
3467
- onClick: handleCopy,
3468
- className: "text-xs bg-background/80 hover:bg-background",
3469
- children: copied ? "\u2713 Copied" : "Copy"
3470
- }
3471
- ) }),
3472
- /* @__PURE__ */ jsx("pre", { className: `bg-muted/50 border rounded-lg p-4 overflow-x-auto text-sm ${showCopy ? "pr-24" : ""}`, children: /* @__PURE__ */ jsx("code", { className: "font-mono text-foreground", children: code }) })
3473
- ] });
3474
- }
3475
- CodeBlock.displayName = "CodeBlock";
3476
- var code_block_default = CodeBlock;
3477
- function CardBody({ children, padding = "md", className = "" }) {
3478
- const paddingClasses = {
3479
- none: "p-0",
3480
- sm: "p-4",
3481
- md: "p-6",
3482
- lg: "p-8",
3483
- xl: "p-10"
3484
- };
3485
- return /* @__PURE__ */ jsx(
3486
- "div",
3487
- {
3488
- className: `
3489
- card-body
3490
- flex flex-col gap-2
3491
- ${paddingClasses[padding]}
3492
- ${className}
3493
- `.trim().replace(/\s+/g, " "),
3494
- children
3495
- }
3496
- );
3497
- }
3498
- CardBody.displayName = "CardBody";
3499
- var card_body_default = CardBody;
3500
- function CardTitle({ children, className = "", as: Component = "h2", size = "md" }) {
3501
- const sizeClasses = {
3502
- sm: "text-base font-semibold",
3503
- md: "text-lg font-bold",
3504
- lg: "text-xl font-bold",
3505
- xl: "text-2xl font-bold"
3506
- };
3507
- return /* @__PURE__ */ jsx(
3508
- Component,
3509
- {
3510
- className: `
3511
- card-title
3512
- ${sizeClasses[size]}
3513
- ${className}
3514
- `.trim().replace(/\s+/g, " "),
3515
- children
3516
- }
3517
- );
3518
- }
3519
- CardTitle.displayName = "CardTitle";
3520
- var card_title_default = CardTitle;
3521
- function CardActions({ children, className = "", align = "end", direction = "row" }) {
3522
- const alignClasses = {
3523
- start: "justify-start",
3524
- center: "justify-center",
3525
- end: "justify-end",
3526
- stretch: "justify-stretch"
3527
- };
3528
- const directionClasses = {
3529
- row: "flex-row",
3530
- column: "flex-col"
3531
- };
3532
- return /* @__PURE__ */ jsx(
3533
- "div",
3534
- {
3535
- className: `
3536
- flex gap-2 px-6 pb-6 pt-2
3537
- ${directionClasses[direction]}
3538
- ${alignClasses[align]}
3539
- ${className}
3540
- `.trim().replace(/\s+/g, " "),
3541
- children
3542
- }
3543
- );
3544
- }
3545
- CardActions.displayName = "CardActions";
3546
- var card_actions_default = CardActions;
3547
- function CardFigure({ children, className = "", aspectRatio = "auto" }) {
3548
- const aspectRatioClasses = {
3549
- square: "aspect-square",
3550
- video: "aspect-video",
3551
- wide: "aspect-[21/9]",
3552
- portrait: "aspect-[3/4]",
3553
- auto: ""
3554
- };
3555
- return /* @__PURE__ */ jsx(
3556
- "figure",
3557
- {
3558
- className: `
3559
- card-figure
3560
- relative overflow-hidden
3561
- ${aspectRatioClasses[aspectRatio]}
3562
- ${className}
3563
- `.trim().replace(/\s+/g, " "),
3564
- children
3565
- }
3566
- );
3567
- }
3568
- CardFigure.displayName = "CardFigure";
3569
- var card_figure_default = CardFigure;
3570
- function Divider({ orientation = "horizontal", className = "", ...props }) {
3571
- const orientationClasses = orientation === "horizontal" ? "w-full h-px" : "h-full w-px";
3572
- return /* @__PURE__ */ jsx("hr", { className: `border-0 bg-border ${orientationClasses} ${className}`, "aria-orientation": orientation, ...props });
3573
- }
3574
- Divider.displayName = "Divider";
3575
- var divider_default = Divider;
3576
- function Drawer({
3577
- isOpen,
3578
- onClose,
3579
- children,
3580
- position = "right",
3581
- className = "",
3582
- title,
3583
- size = "md",
3584
- closeOnEscape = true,
3585
- closeOnOutside = true,
3586
- unmountOnExit = true,
3587
- portalRoot = portal_default(),
3588
- noAnimation = false
3589
- }) {
3590
- const { phase, shouldRender, ref, getPhaseClass } = useOverlay_default({
3591
- isOpen,
3592
- lockScroll: true,
3593
- restoreFocus: true,
3594
- focusTrap: true,
3595
- unmountOnExit,
3596
- exitDuration: noAnimation ? 0 : 250,
3597
- animationFrames: noAnimation ? 0 : 0
3598
- });
3599
- if (!shouldRender) return null;
3600
- const sizeClasses = {
3601
- sm: "w-72",
3602
- md: "w-96",
3603
- lg: "w-[32rem]",
3604
- xl: "w-[40rem]",
3605
- full: "w-full max-w-2xl"
3606
- };
3607
- const edgeClasses = {
3608
- left: "left-0 top-0 bottom-0",
3609
- right: "right-0 top-0 bottom-0",
3610
- top: "top-0 left-0 right-0 h-96",
3611
- bottom: "bottom-0 left-0 right-0 h-96"
3612
- };
3613
- const closedTransform = {
3614
- left: "-translate-x-full",
3615
- right: "translate-x-full",
3616
- top: "-translate-y-full",
3617
- bottom: "translate-y-full"
3618
- };
3619
- const openTransform = "translate-x-0 translate-y-0";
3620
- const panelTransform = noAnimation ? "" : getPhaseClass(openTransform, closedTransform[position]);
3621
- const overlayOpacity = noAnimation ? "opacity-100" : getPhaseClass("opacity-100", "opacity-0");
3622
- const handleKeyDown = (e) => {
3623
- if (e.key === "Escape" && closeOnEscape) {
3624
- e.stopPropagation();
3625
- onClose();
3626
- }
3627
- };
3628
- const panel = /* @__PURE__ */ jsxs(Fragment, { children: [
3629
- /* @__PURE__ */ jsx(
3630
- "button",
3631
- {
3632
- type: "button",
3633
- className: `fixed inset-0 z-[999] bg-black/50 backdrop-blur-sm transition-opacity duration-[250ms] ease-in-out ${overlayOpacity} border-0 p-0 m-0`,
3634
- "aria-label": closeOnOutside ? "Close overlay" : void 0,
3635
- "aria-hidden": !closeOnOutside,
3636
- tabIndex: closeOnOutside ? 0 : -1,
3637
- onClick: () => closeOnOutside && onClose(),
3638
- onKeyDown: (e) => {
3639
- if (!closeOnOutside) return;
3640
- if (e.key === "Enter" || e.key === " ") {
3641
- e.preventDefault();
3642
- onClose();
3643
- }
3644
- },
3645
- "data-phase": phase
3646
- }
3647
- ),
3648
- /* @__PURE__ */ jsxs(
3649
- "div",
3650
- {
3651
- ref,
3652
- role: "dialog",
3653
- "aria-modal": "true",
3654
- "aria-label": title || "Drawer",
3655
- tabIndex: -1,
3656
- "data-phase": phase,
3657
- "data-position": position,
3658
- className: `fixed ${edgeClasses[position]} ${position === "left" || position === "right" ? sizeClasses[size] : ""} bg-card text-card-foreground shadow-2xl z-[1000] flex flex-col outline-none ${panelTransform} ${noAnimation ? "" : "transition-transform duration-[250ms] ease-out will-change-transform"} ${className}`,
3659
- onKeyDown: handleKeyDown,
3660
- children: [
3661
- title && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-5 py-4 border-b border-border/60 bg-card/95 backdrop-blur-sm", children: [
3662
- /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold tracking-tight", children: title }),
3663
- /* @__PURE__ */ jsx(
3664
- "button",
3665
- {
3666
- type: "button",
3667
- "aria-label": "Close drawer",
3668
- onClick: onClose,
3669
- className: "w-8 h-8 inline-flex items-center justify-center rounded-md hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring",
3670
- children: /* @__PURE__ */ jsxs(
3671
- "svg",
3672
- {
3673
- xmlns: "http://www.w3.org/2000/svg",
3674
- width: "18",
3675
- height: "18",
3676
- viewBox: "0 0 24 24",
3677
- fill: "none",
3678
- stroke: "currentColor",
3679
- strokeWidth: "2",
3680
- strokeLinecap: "round",
3681
- strokeLinejoin: "round",
3682
- children: [
3683
- /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
3684
- /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
3685
- ]
3686
- }
3687
- )
3688
- }
3689
- )
3690
- ] }),
3691
- /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-5 flex flex-col gap-4", children })
3692
- ]
3693
- }
3694
- )
3695
- ] });
3696
- return portalRoot ? createPortal(panel, portalRoot) : panel;
3697
- }
3698
- Drawer.displayName = "Drawer";
3699
- var drawer_default = Drawer;
3700
- function Page({ children, className = "" }) {
3701
- return /* @__PURE__ */ jsx("main", { className: `min-h-screen bg-background ${className}`, children });
3702
- }
3703
- Page.displayName = "Page";
3704
- var page_default = Page;
3705
- function AccordionItem({ title, children, defaultOpen = false }) {
3706
- const [isOpen, setIsOpen] = useState(defaultOpen);
3707
- return /* @__PURE__ */ jsxs("article", { className: "border-b border-border", children: [
3708
- /* @__PURE__ */ jsxs(
3709
- "button",
3710
- {
3711
- onClick: () => setIsOpen(!isOpen),
3712
- className: "w-full flex items-center justify-between py-4 px-2 text-left text-foreground hover:bg-muted/50 active:bg-muted transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-sm",
3713
- "aria-expanded": isOpen,
3714
- children: [
3715
- /* @__PURE__ */ jsx("span", { className: "font-medium", children: title }),
3716
- /* @__PURE__ */ jsx(
3717
- "svg",
3718
- {
3719
- className: `w-5 h-5 transition-transform ${isOpen ? "rotate-180" : ""}`,
3720
- fill: "none",
3721
- stroke: "currentColor",
3722
- viewBox: "0 0 24 24",
3723
- children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
3724
- }
3725
- )
3726
- ]
3727
- }
3728
- ),
3729
- isOpen && /* @__PURE__ */ jsx("section", { className: "px-2 pb-4 text-muted-foreground", children })
3730
- ] });
3731
- }
3732
- function Accordion({ children, className = "" }) {
3733
- return /* @__PURE__ */ jsx("div", { className: `divide-y divide-border ${className}`, children });
3734
- }
3735
- Accordion.displayName = "Accordion";
3736
- var accordion_default = Accordion;
3737
- function Hero({
3738
- title,
3739
- subtitle,
3740
- description,
3741
- primaryAction,
3742
- secondaryAction,
3743
- children,
3744
- className = "",
3745
- variant = "gradient",
3746
- centered = true,
3747
- size = "lg"
3748
- }) {
3749
- const sizeClasses = {
3750
- sm: "py-12 md:py-16",
3751
- md: "py-16 md:py-20",
3752
- lg: "py-20 md:py-28"
3753
- };
3754
- const titleSizes = {
3755
- sm: "text-3xl md:text-4xl",
3756
- md: "text-4xl md:text-5xl",
3757
- lg: "text-5xl md:text-6xl lg:text-7xl"
3758
- };
3759
- const variantClasses = {
3760
- gradient: "bg-gradient-to-b from-primary/10 via-primary/5 to-background",
3761
- solid: "bg-muted/30",
3762
- minimal: "bg-background"
3763
- };
3764
- return /* @__PURE__ */ jsxs("section", { className: `relative ${sizeClasses[size]} ${variantClasses[variant]} ${className}`, children: [
3765
- variant === "gradient" && /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-primary/20 to-transparent" }),
3766
- /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 bottom-0 h-32 bg-gradient-to-t from-background to-transparent pointer-events-none" }),
3767
- /* @__PURE__ */ jsx(container_default, { size: "lg", children: /* @__PURE__ */ jsxs("div", { className: centered ? "text-center mx-auto max-w-4xl" : "max-w-4xl", children: [
3768
- subtitle && /* @__PURE__ */ jsx(text_default, { className: "text-lg md:text-xl font-semibold text-primary mb-4", weight: "semibold", children: subtitle }),
3769
- /* @__PURE__ */ jsx(heading_default, { level: 1, className: `${titleSizes[size]} font-extrabold mb-6 tracking-tight`, children: title }),
3770
- description && /* @__PURE__ */ jsx(text_default, { className: "text-lg md:text-xl mb-8 text-muted-foreground max-w-2xl mx-auto", children: description }),
3771
- (primaryAction || secondaryAction) && /* @__PURE__ */ jsxs(stack_default, { direction: "horizontal", spacing: "md", className: `flex-wrap ${centered ? "justify-center" : ""}`, children: [
3772
- primaryAction && /* @__PURE__ */ jsx(
3773
- button_default,
3774
- {
3775
- size: "lg",
3776
- variant: primaryAction.variant || "primary",
3777
- style: primaryAction.style,
3778
- onClick: primaryAction.onClick,
3779
- loading: primaryAction.loading,
3780
- icon: primaryAction.icon,
3781
- className: "shadow-lg shadow-primary/20 hover:shadow-xl hover:shadow-primary/30 transition-all",
3782
- children: primaryAction.label
3783
- }
3784
- ),
3785
- secondaryAction && /* @__PURE__ */ jsx(
3786
- button_default,
3787
- {
3788
- size: "lg",
3789
- variant: secondaryAction.variant || "neutral",
3790
- style: secondaryAction.style || "outline",
3791
- onClick: secondaryAction.onClick,
3792
- loading: secondaryAction.loading,
3793
- icon: secondaryAction.icon,
3794
- className: "hover:shadow-md transition-all",
3795
- children: secondaryAction.label
3796
- }
3797
- )
3798
- ] }),
3799
- children && /* @__PURE__ */ jsx("div", { className: "mt-10", children })
3800
- ] }) })
3801
- ] });
3802
- }
3803
- Hero.displayName = "Hero";
3804
- var hero_default = Hero;
3805
- function FeatureSection({
3806
- title,
3807
- description,
3808
- features,
3809
- columns = 3,
3810
- centered = true,
3811
- className = ""
3812
- }) {
3813
- return /* @__PURE__ */ jsx("section", { className: `py-16 md:py-20 ${className}`, children: /* @__PURE__ */ jsxs(container_default, { size: "xl", children: [
3814
- (title || description) && /* @__PURE__ */ jsxs(
3815
- "div",
3816
- {
3817
- className: `mb-12 md:mb-16 ${centered ? "text-center" : ""} ${centered ? "max-w-3xl mx-auto" : "max-w-3xl"}`,
3818
- children: [
3819
- title && /* @__PURE__ */ jsx(heading_default, { level: 2, className: "text-3xl md:text-4xl font-bold mb-4", children: title }),
3820
- description && /* @__PURE__ */ jsx(text_default, { className: "text-lg md:text-xl", children: description })
3821
- ]
3822
- }
3823
- ),
3824
- /* @__PURE__ */ jsx(grid_default, { itemSize: "md", maxCols: columns, gap: "lg", children: features.map((feature, index) => /* @__PURE__ */ jsxs("article", { className: centered ? "text-center" : "", children: [
3825
- /* @__PURE__ */ jsx(
3826
- "span",
3827
- {
3828
- className: `inline-flex items-center justify-center w-12 h-12 md:w-16 md:h-16 rounded-lg md:rounded-xl bg-primary/10 text-primary mb-4 md:mb-6 ${centered ? "" : "mr-auto"}`,
3829
- children: feature.icon
3830
- }
3831
- ),
3832
- /* @__PURE__ */ jsx(heading_default, { level: 3, className: "text-xl font-semibold mb-2 md:mb-3", children: feature.title }),
3833
- /* @__PURE__ */ jsx(text_default, { variant: "muted", className: "text-sm md:text-base", children: feature.description })
3834
- ] }, index)) })
3835
- ] }) });
3836
- }
3837
- FeatureSection.displayName = "FeatureSection";
3838
- var feature_section_default = FeatureSection;
3839
- function Link2({
3840
- children,
3841
- href,
3842
- external = false,
3843
- variant = "default",
3844
- underline = "hover",
3845
- size = "md",
3846
- display = "inline",
3847
- className = ""
3848
- }) {
3849
- const variantClasses = {
3850
- default: "text-primary hover:text-primary/80",
3851
- muted: "text-muted-foreground hover:text-foreground",
3852
- secondary: "text-secondary hover:text-secondary/80",
3853
- inherit: "text-inherit hover:opacity-80"
3854
- };
3855
- const underlineClasses = {
3856
- hover: "hover:underline",
3857
- always: "underline",
3858
- none: "no-underline"
3859
- };
3860
- const sizeClasses = {
3861
- sm: "text-sm",
3862
- md: "text-base",
3863
- lg: "text-lg"
3864
- };
3865
- const displayClasses = {
3866
- inline: "inline",
3867
- block: "block"
3868
- };
3869
- const linkClassName = [
3870
- variantClasses[variant],
3871
- underlineClasses[underline],
3872
- sizeClasses[size],
3873
- displayClasses[display],
3874
- "cursor-pointer transition-colors",
3875
- className
3876
- ].filter(Boolean).join(" ");
3877
- if (external) {
3878
- return /* @__PURE__ */ jsxs("a", { href, className: linkClassName, target: "_blank", rel: "noopener noreferrer", children: [
3879
- children,
3880
- /* @__PURE__ */ jsx(
3881
- "svg",
3882
- {
3883
- className: "inline-block w-4 h-4 ml-1",
3884
- fill: "none",
3885
- stroke: "currentColor",
3886
- viewBox: "0 0 24 24",
3887
- "aria-hidden": "true",
3888
- children: /* @__PURE__ */ jsx(
3889
- "path",
3890
- {
3891
- strokeLinecap: "round",
3892
- strokeLinejoin: "round",
3893
- strokeWidth: 2,
3894
- d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
3895
- }
3896
- )
3897
- }
3898
- )
3899
- ] });
3900
- }
3901
- return /* @__PURE__ */ jsx(Link, { to: href, className: linkClassName, children });
3902
- }
3903
- Link2.displayName = "Link";
3904
- var link_default = Link2;
3905
- function Footer({ sections, copyright, social, className = "" }) {
3906
- return /* @__PURE__ */ jsx("footer", { className: `border-t border-border bg-muted/20 ${className}`, children: /* @__PURE__ */ jsxs(container_default, { children: [
3907
- sections && sections.length > 0 && /* @__PURE__ */ jsx("div", { className: "py-12 md:py-16", children: /* @__PURE__ */ jsx(grid_default, { itemSize: "xs", maxCols: 4, gap: "lg", children: sections.map((section, index) => /* @__PURE__ */ jsxs("div", { children: [
3908
- /* @__PURE__ */ jsx("h3", { className: "font-semibold text-foreground mb-4", children: section.title }),
3909
- /* @__PURE__ */ jsx("ul", { className: "space-y-3", children: section.links.map((link, linkIndex) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
3910
- link_default,
3911
- {
3912
- href: link.href,
3913
- external: link.external,
3914
- className: "text-sm text-muted hover:text-foreground transition-colors",
3915
- children: link.label
3916
- }
3917
- ) }, linkIndex)) })
3918
- ] }, index)) }) }),
3919
- /* @__PURE__ */ jsxs(
3920
- "div",
3921
- {
3922
- className: `${sections && sections.length > 0 ? "border-t border-border" : ""} py-6 flex flex-col md:flex-row items-center justify-between gap-4`,
3923
- children: [
3924
- copyright && /* @__PURE__ */ jsx(text_default, { variant: "muted", className: "text-sm text-center md:text-left", children: copyright }),
3925
- social && /* @__PURE__ */ jsx("div", { className: "flex items-center space-x-4", children: social })
3926
- ]
3927
- }
3928
- )
3929
- ] }) });
3930
- }
3931
- Footer.displayName = "Footer";
3932
- var footer_default = Footer;
3933
- function useScrollReset(deps, container) {
3934
- useEffect(() => {
3935
- let cancelled = false;
3936
- const maxRaf = 6;
3937
- let rafCount = 0;
3938
- const isRef = (obj) => {
3939
- return typeof obj === "object" && obj !== null && "current" in obj;
3940
- };
3941
- const setAllScrollTop = () => {
3942
- if (cancelled) return;
3943
- window.scrollTo(0, 0);
3944
- const resolved = isRef(container) ? container.current : container;
3945
- if (resolved) resolved.scrollTop = 0;
3946
- document.documentElement.scrollTop = 0;
3947
- document.body.scrollTop = 0;
3948
- };
3949
- setAllScrollTop();
3950
- Promise.resolve().then(() => setAllScrollTop());
3951
- const timeoutId = setTimeout(() => setAllScrollTop(), 0);
3952
- const loop = () => {
3953
- if (cancelled) return;
3954
- setAllScrollTop();
3955
- rafCount += 1;
3956
- if (rafCount < maxRaf) requestAnimationFrame(loop);
3957
- };
3958
- requestAnimationFrame(loop);
3959
- return () => {
3960
- cancelled = true;
3961
- clearTimeout(timeoutId);
3962
- };
3963
- }, deps);
3964
- }
3965
- var useScrollReset_default = useScrollReset;
3966
- function LeftNavLayout({
3967
- nav,
3968
- children,
3969
- collapsed: controlledCollapsed,
3970
- onCollapsedChange,
3971
- showToggle = true,
3972
- className = "",
3973
- navClassName = "",
3974
- contentClassName = "",
3975
- navWidth = "16rem",
3976
- navWidthCollapsed = "4.5rem",
3977
- mobileCollapsible = true,
3978
- mobileMenuOpen: controlledMobileMenuOpen,
3979
- onMobileMenuOpenChange,
3980
- embedded = false,
3981
- mainContentRef
3982
- }) {
3983
- const [internalCollapsed, setInternalCollapsed] = useState(false);
3984
- const [internalMobileMenuOpen, setInternalMobileMenuOpen] = useState(false);
3985
- const navRef = useRef(null);
3986
- const scrollPosRef = useRef(0);
3987
- const internalContentRef = useRef(null);
3988
- const contentRef = mainContentRef || internalContentRef;
3989
- const collapsed = controlledCollapsed ?? internalCollapsed;
3990
- const setCollapsed = (value) => {
3991
- if (onCollapsedChange) {
3992
- onCollapsedChange(value);
3993
- } else {
3994
- setInternalCollapsed(value);
3995
- }
3996
- };
3997
- const mobileMenuOpen = controlledMobileMenuOpen ?? internalMobileMenuOpen;
3998
- const setMobileMenuOpen = (value) => {
3999
- if (onMobileMenuOpenChange) {
4000
- onMobileMenuOpenChange(value);
4001
- } else {
4002
- setInternalMobileMenuOpen(value);
4003
- }
4004
- };
4005
- const toggleCollapsed = () => setCollapsed(!collapsed);
4006
- const toggleMobileMenu = () => setMobileMenuOpen(!mobileMenuOpen);
4007
- useEffect(() => {
4008
- if (navRef.current) {
4009
- navRef.current.scrollTop = scrollPosRef.current;
4010
- }
4011
- }, [children]);
4012
- useScrollReset_default([children], contentRef);
4013
- const containerClasses = embedded ? "flex bg-background border border-border rounded-lg overflow-hidden" : "flex h-[calc(100vh-4rem)] bg-background";
4014
- return /* @__PURE__ */ jsxs("div", { className: `${containerClasses} ${className}`, children: [
4015
- mobileCollapsible && mobileMenuOpen && /* @__PURE__ */ jsx(
4016
- "div",
4017
- {
4018
- className: "fixed inset-0 z-40 lg:hidden bg-background/80 backdrop-blur-sm",
4019
- onClick: toggleMobileMenu,
4020
- "aria-hidden": "true"
4021
- }
4022
- ),
4023
- /* @__PURE__ */ jsxs(
4024
- "aside",
4025
- {
4026
- className: `
4027
- ${embedded ? "relative flex flex-col h-full" : "fixed lg:relative top-0 left-0 z-40 lg:z-10 h-screen lg:h-full"}
4028
- flex flex-col flex-shrink-0
4029
- bg-background border-r border-border
4030
- transition-all duration-300 ease-in-out
4031
- ${!embedded && mobileCollapsible && !mobileMenuOpen ? "-translate-x-full lg:translate-x-0" : "translate-x-0"}
4032
- ${collapsed ? "w-[4.5rem]" : "w-64"}
4033
- ${navClassName}
4034
- `,
4035
- style: !collapsed && navWidth !== "16rem" || collapsed && navWidthCollapsed !== "4.5rem" ? {
4036
- width: collapsed ? navWidthCollapsed : navWidth
4037
- } : void 0,
4038
- "aria-label": "Main navigation",
4039
- children: [
4040
- showToggle && /* @__PURE__ */ jsxs(
4041
- "div",
4042
- {
4043
- className: `
4044
- relative flex items-center h-12 flex-shrink-0
4045
- px-4 border-b border-border
4046
- `,
4047
- children: [
4048
- /* @__PURE__ */ jsx(
4049
- "span",
4050
- {
4051
- className: `
4052
- text-sm font-semibold text-foreground
4053
- transition-all duration-300 ease-in-out
4054
- ${collapsed ? "opacity-0 w-0 overflow-hidden" : "opacity-100"}
4055
- `,
4056
- children: "Navigation"
4057
- }
4058
- ),
4059
- /* @__PURE__ */ jsx(
4060
- "button",
4061
- {
4062
- onClick: toggleCollapsed,
4063
- className: `
4064
- hidden lg:flex items-center justify-center
4065
- w-8 h-8 rounded-md
4066
- text-muted-foreground hover:text-foreground
4067
- hover:bg-muted
4068
- transition-all duration-300 ease-in-out
4069
- focus:outline-none focus:ring-2 focus:ring-ring
4070
- ${collapsed ? "absolute left-1/2 -translate-x-1/2" : "absolute right-4"}
4071
- `,
4072
- "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
4073
- type: "button",
4074
- children: collapsed ? /* @__PURE__ */ jsx(IconChevronRight, { size: 20 }) : /* @__PURE__ */ jsx(IconChevronLeft, { size: 20 })
4075
- }
4076
- )
4077
- ]
4078
- }
4079
- ),
4080
- /* @__PURE__ */ jsx(
4081
- "nav",
4082
- {
4083
- ref: navRef,
4084
- className: "flex-1 overflow-y-auto overflow-x-hidden scrollbar-thin",
4085
- "data-collapsed": collapsed,
4086
- onScroll: (e) => {
4087
- scrollPosRef.current = e.currentTarget.scrollTop;
4088
- },
4089
- children: nav
4090
- }
4091
- )
4092
- ]
4093
- }
4094
- ),
4095
- /* @__PURE__ */ jsx(
4096
- "main",
4097
- {
4098
- ref: contentRef,
4099
- className: `flex-1 overflow-auto ${embedded ? "h-60" : ""} ${contentClassName}`,
4100
- children
4101
- }
4102
- )
4103
- ] });
4104
- }
4105
- LeftNavLayout.displayName = "LeftNavLayout";
4106
- var left_nav_layout_default = LeftNavLayout;
4107
- function LeftNavItem({
4108
- icon,
4109
- children,
4110
- active = false,
4111
- className = "",
4112
- badge,
4113
- href = "#",
4114
- title,
4115
- preventNavigation = false
4116
- }) {
4117
- const navRef = useRef(null);
4118
- const [isCollapsed, setIsCollapsed] = useState(() => {
4119
- if (typeof window !== "undefined") {
4120
- const navElement = document.querySelector("nav[data-collapsed]");
4121
- return navElement?.getAttribute("data-collapsed") === "true";
4122
- }
4123
- return false;
4124
- });
4125
- useEffect(() => {
4126
- const checkCollapsed = () => {
4127
- const navElement2 = navRef.current?.closest("nav");
4128
- if (navElement2) {
4129
- setIsCollapsed(navElement2.getAttribute("data-collapsed") === "true");
4130
- }
4131
- };
4132
- checkCollapsed();
4133
- const navElement = navRef.current?.closest("nav");
4134
- if (navElement) {
4135
- const observer = new MutationObserver(checkCollapsed);
4136
- observer.observe(navElement, {
4137
- attributes: true,
4138
- attributeFilter: ["data-collapsed"]
4139
- });
4140
- return () => observer.disconnect();
4141
- }
4142
- return void 0;
4143
- }, []);
4144
- const itemTitle = title || (typeof children === "string" ? children : void 0);
4145
- const navLink = /* @__PURE__ */ jsxs(
4146
- NavLink,
4147
- {
4148
- ref: navRef,
4149
- to: href,
4150
- onClick: (e) => {
4151
- if (preventNavigation) {
4152
- e.preventDefault();
4153
- }
4154
- },
4155
- className: ({ isActive }) => `
4156
- group relative flex items-center gap-3
4157
- px-3 py-2.5 rounded-lg
4158
- mx-2
4159
- [nav[data-collapsed='true']_&]:mx-2
4160
- [nav[data-collapsed='true']_&]:px-0
4161
- [nav[data-collapsed='true']_&]:w-12
4162
- [nav[data-collapsed='true']_&]:justify-center
4163
- text-sm font-medium
4164
- transition-colors duration-200
4165
- focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-card
4166
- ${isActive || active ? "bg-primary text-primary-foreground shadow-sm" : "text-foreground hover:bg-muted hover:text-foreground"}
4167
- ${className}
4168
- `,
4169
- "aria-current": active ? "page" : void 0,
4170
- "aria-label": itemTitle,
4171
- end: true,
4172
- children: [
4173
- icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", "aria-hidden": "true", children: icon }),
4174
- /* @__PURE__ */ jsx(
4175
- "span",
4176
- {
4177
- className: "\n flex-1 truncate\n [nav[data-collapsed='true']_&]:hidden\n ",
4178
- children
4179
- }
4180
- ),
4181
- badge && /* @__PURE__ */ jsx(
4182
- "span",
4183
- {
4184
- className: "\n flex-shrink-0\n [nav[data-collapsed='true']_&]:hidden\n ",
4185
- children: badge
4186
- }
4187
- )
4188
- ]
4189
- }
4190
- );
4191
- if (!isCollapsed) {
4192
- return navLink;
4193
- }
4194
- const tooltipContent = typeof children === "string" ? children : itemTitle || "Menu Item";
4195
- return /* @__PURE__ */ jsx(tooltip_default, { content: tooltipContent, position: "right", variant: "default", usePortal: true, className: "w-full block", children: navLink });
4196
- }
4197
- LeftNavItem.displayName = "LeftNavItem";
4198
- var left_nav_item_default = LeftNavItem;
4199
- function LeftNavSection({ children, label, className = "" }) {
4200
- return /* @__PURE__ */ jsxs("div", { className: `py-2 ${className}`, children: [
4201
- label && /* @__PURE__ */ jsx(
4202
- "h3",
4203
- {
4204
- className: "\n px-5 mb-2 mt-2\n text-xs font-semibold uppercase tracking-wider\n text-muted-foreground\n [nav[data-collapsed='true']_&]:hidden\n ",
4205
- children: label
4206
- }
4207
- ),
4208
- /* @__PURE__ */ jsx("div", { className: "space-y-1", children }),
4209
- /* @__PURE__ */ jsx("div", { className: "h-px bg-border mx-3 mt-2", "aria-hidden": "true" })
4210
- ] });
4211
- }
4212
- LeftNavSection.displayName = "LeftNavSection";
4213
- var left_nav_section_default = LeftNavSection;
4214
- function Code({ children, block = false, variant = "default", className = "" }) {
4215
- const variantClasses = {
4216
- default: "bg-muted text-foreground",
4217
- primary: "text-primary",
4218
- muted: "text-muted-foreground"
4219
- };
4220
- const baseClasses = `font-mono ${variantClasses[variant]}`;
4221
- if (block) {
4222
- return /* @__PURE__ */ jsx("pre", { className: `${baseClasses} p-4 rounded-lg overflow-x-auto border border-border ${className}`, children: /* @__PURE__ */ jsx("code", { children }) });
4223
- }
4224
- return /* @__PURE__ */ jsx("code", { className: `${baseClasses} px-1.5 py-0.5 rounded text-sm ${className}`, children });
4225
- }
4226
- Code.displayName = "Code";
4227
- var code_default = Code;
4228
- var ThemeContext = createContext(void 0);
4229
- function ThemeProvider({
4230
- children,
4231
- defaultTheme = "light",
4232
- storageKey = "hydn-theme",
4233
- themes = ["light", "dark"]
4234
- }) {
4235
- const [theme, setThemeState] = useState(() => {
4236
- if (typeof window !== "undefined") {
4237
- const stored = localStorage.getItem(storageKey);
4238
- return stored && themes.includes(stored) ? stored : defaultTheme;
4239
- }
4240
- return defaultTheme;
4241
- });
4242
- useEffect(() => {
4243
- const root = window.document.documentElement;
4244
- root.classList.remove(...themes);
4245
- root.classList.add(theme);
4246
- }, [theme, themes]);
4247
- const setTheme = useCallback(
4248
- (newTheme) => {
4249
- if (themes.includes(newTheme)) {
4250
- localStorage.setItem(storageKey, newTheme);
4251
- setThemeState(newTheme);
4252
- } else {
4253
- console.warn(`Theme "${newTheme}" is not in availableThemes. Add it to the themes prop.`);
4254
- }
4255
- },
4256
- [themes, storageKey]
4257
- );
4258
- const value = useMemo(
4259
- () => ({
4260
- theme,
4261
- setTheme,
4262
- availableThemes: themes
4263
- }),
4264
- [theme, themes, setTheme]
4265
- );
4266
- return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
4267
- }
4268
- function useTheme() {
4269
- const context = useContext(ThemeContext);
4270
- if (!context) {
4271
- throw new Error("useTheme must be used within a ThemeProvider");
4272
- }
4273
- return context;
4274
- }
4275
- function ColorModeToggle({ className = "" }) {
4276
- const { theme, setTheme } = useTheme();
4277
- const toggleTheme = () => {
4278
- setTheme(theme === "light" ? "dark" : "light");
4279
- };
4280
- const isDark = theme === "dark";
4281
- const label = `Switch to ${theme === "light" ? "dark" : "light"} theme`;
4282
- return /* @__PURE__ */ jsxs(
4283
- "button",
4284
- {
4285
- onClick: toggleTheme,
4286
- className: `relative p-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors cursor-pointer ${className}`,
4287
- "aria-label": label,
4288
- title: label,
4289
- children: [
4290
- /* @__PURE__ */ jsx(
4291
- "svg",
4292
- {
4293
- className: `w-5 h-5 absolute inset-0 m-auto transition-all duration-300 ${isDark ? "rotate-90 scale-0 opacity-0" : "rotate-0 scale-100 opacity-100"}`,
4294
- fill: "none",
4295
- stroke: "currentColor",
4296
- viewBox: "0 0 24 24",
4297
- children: /* @__PURE__ */ jsx(
4298
- "path",
4299
- {
4300
- strokeLinecap: "round",
4301
- strokeLinejoin: "round",
4302
- strokeWidth: 2,
4303
- d: "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
4304
- }
4305
- )
4306
- }
4307
- ),
4308
- /* @__PURE__ */ jsx(
4309
- "svg",
4310
- {
4311
- className: `w-5 h-5 transition-all duration-300 ${isDark ? "rotate-0 scale-100 opacity-100" : "-rotate-90 scale-0 opacity-0"}`,
4312
- fill: "none",
4313
- stroke: "currentColor",
4314
- viewBox: "0 0 24 24",
4315
- children: /* @__PURE__ */ jsx(
4316
- "path",
4317
- {
4318
- strokeLinecap: "round",
4319
- strokeLinejoin: "round",
4320
- strokeWidth: 2,
4321
- d: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
4322
- }
4323
- )
4324
- }
4325
- )
4326
- ]
4327
- }
4328
- );
4329
- }
4330
- ColorModeToggle.displayName = "ColorModeToggle";
4331
- var color_mode_toggle_default = ColorModeToggle;
4332
-
4333
- export { accordion_default as Accordion, AccordionItem, alert_default as Alert, avatar_default as Avatar, badge_default as Badge, breadcrumbs_default as Breadcrumbs, button_default as Button, button_group_default as ButtonGroup, calendar_default as Calendar, card_default as Card, card_actions_default as CardActions, card_body_default as CardBody, card_figure_default as CardFigure, card_footer_default as CardFooter, card_header_default as CardHeader, card_title_default as CardTitle, checkbox_default as Checkbox, chip_default as Chip, code_default as Code, code_block_default as CodeBlock, color_mode_toggle_default as ColorModeToggle, container_default as Container, data_table_default as DataTable, date_picker_default as DatePicker, delete_dialog_default as DeleteDialog, dialog_default as Dialog, divider_default as Divider, drawer_default as Drawer, dropdown_default as Dropdown, empty_state_default as EmptyState, feature_section_default as FeatureSection, footer_default as Footer, form_field_default as FormField, grid_default as Grid, heading_default as Heading, hero_default as Hero, input_default as Input, input_group_default as InputGroup, left_nav_item_default as LeftNavItem, left_nav_layout_default as LeftNavLayout, left_nav_section_default as LeftNavSection, link_default as Link, List, ListItem, modal_default as Modal, multi_select_default as MultiSelect, nav_default as Nav, navbar_default as Navbar, navbar_brand_default as NavbarBrand, navbar_link_default as NavbarLink, page_default as Page, pagination_default as Pagination, popover_default as Popover, pricing_table_default as PricingTable, pricing_tier_default as PricingTier, progress_bar_default as ProgressBar, radio_default as Radio, radio_group_default as RadioGroup, select_default as Select, select_item_default as SelectItem, sidebar_default as Sidebar, skeleton_default as Skeleton, slider_default as Slider, spinner_default as Spinner, stack_default as Stack, status_label_default as StatusLabel, stepper_default as Stepper, switch_default as Switch, Table, TableBody, TableCell, TableFooter, TableHeadCell, TableHeader, TableRow, tabs_default as Tabs, text_default as Text, textarea_default as Textarea, ThemeProvider, timeline_default as Timeline, TimelineItem, toast_default as Toast, tooltip_default as Tooltip, useTable, useTheme };
4334
289
  //# sourceMappingURL=index.js.map
4335
- //# sourceMappingURL=index.js.map