@nofinite/nui 1.0.0 → 1.0.2

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 (348) hide show
  1. package/dist/components/accordion/Accordion.cjs +2 -0
  2. package/dist/components/accordion/Accordion.cjs.map +1 -0
  3. package/dist/components/accordion/Accordion.js +51 -0
  4. package/dist/components/accordion/Accordion.js.map +1 -0
  5. package/dist/components/alert/Alert.cjs +2 -0
  6. package/dist/components/alert/Alert.cjs.map +1 -0
  7. package/dist/components/alert/Alert.js +32 -0
  8. package/dist/components/alert/Alert.js.map +1 -0
  9. package/dist/components/avatar/Avatar.cjs +2 -0
  10. package/dist/components/avatar/Avatar.cjs.map +1 -0
  11. package/dist/components/avatar/Avatar.js +51 -0
  12. package/dist/components/avatar/Avatar.js.map +1 -0
  13. package/dist/components/avatar/AvatarGroup.cjs +2 -0
  14. package/dist/components/avatar/AvatarGroup.cjs.map +1 -0
  15. package/dist/components/avatar/AvatarGroup.js +32 -0
  16. package/dist/components/avatar/AvatarGroup.js.map +1 -0
  17. package/dist/components/badge/Badge.cjs +2 -0
  18. package/dist/components/badge/Badge.cjs.map +1 -0
  19. package/dist/components/badge/Badge.js +81 -0
  20. package/dist/components/badge/Badge.js.map +1 -0
  21. package/dist/components/badge/BadgeGroup.cjs +2 -0
  22. package/dist/components/badge/BadgeGroup.cjs.map +1 -0
  23. package/dist/components/badge/BadgeGroup.js +17 -0
  24. package/dist/components/badge/BadgeGroup.js.map +1 -0
  25. package/dist/components/breadcrumbs/Breadcrumbs.cjs +2 -0
  26. package/dist/components/breadcrumbs/Breadcrumbs.cjs.map +1 -0
  27. package/dist/components/breadcrumbs/Breadcrumbs.js +46 -0
  28. package/dist/components/breadcrumbs/Breadcrumbs.js.map +1 -0
  29. package/dist/components/button/Button.cjs +2 -0
  30. package/dist/components/button/Button.cjs.map +1 -0
  31. package/dist/components/button/Button.js +21 -0
  32. package/dist/components/button/Button.js.map +1 -0
  33. package/dist/components/card/Card.cjs +2 -0
  34. package/dist/components/card/Card.cjs.map +1 -0
  35. package/dist/components/card/Card.js +50 -0
  36. package/dist/components/card/Card.js.map +1 -0
  37. package/dist/components/checkbox/Checkbox.cjs +2 -0
  38. package/dist/components/checkbox/Checkbox.cjs.map +1 -0
  39. package/dist/components/checkbox/Checkbox.js +46 -0
  40. package/dist/components/checkbox/Checkbox.js.map +1 -0
  41. package/dist/components/chip/Chip.cjs +2 -0
  42. package/dist/components/chip/Chip.cjs.map +1 -0
  43. package/dist/components/chip/Chip.js +51 -0
  44. package/dist/components/chip/Chip.js.map +1 -0
  45. package/dist/components/combobox/Combobox.cjs +2 -0
  46. package/dist/components/combobox/Combobox.cjs.map +1 -0
  47. package/dist/components/combobox/Combobox.js +114 -0
  48. package/dist/components/combobox/Combobox.js.map +1 -0
  49. package/dist/components/commandpalette/CommandPalette.cjs +2 -0
  50. package/dist/components/commandpalette/CommandPalette.cjs.map +1 -0
  51. package/dist/components/commandpalette/CommandPalette.js +111 -0
  52. package/dist/components/commandpalette/CommandPalette.js.map +1 -0
  53. package/dist/components/contextmenu/ContextMenu.cjs +2 -0
  54. package/dist/components/contextmenu/ContextMenu.cjs.map +1 -0
  55. package/dist/components/contextmenu/ContextMenu.js +104 -0
  56. package/dist/components/contextmenu/ContextMenu.js.map +1 -0
  57. package/dist/components/datagrid/DataGrid.cjs +2 -0
  58. package/dist/components/datagrid/DataGrid.cjs.map +1 -0
  59. package/dist/components/datagrid/DataGrid.js +227 -0
  60. package/dist/components/datagrid/DataGrid.js.map +1 -0
  61. package/dist/components/datepicker/DatePicker.cjs +2 -0
  62. package/dist/components/datepicker/DatePicker.cjs.map +1 -0
  63. package/dist/components/datepicker/DatePicker.js +265 -0
  64. package/dist/components/datepicker/DatePicker.js.map +1 -0
  65. package/dist/components/daterangepicker/DateRangePicker.cjs +2 -0
  66. package/dist/components/daterangepicker/DateRangePicker.cjs.map +1 -0
  67. package/dist/components/daterangepicker/DateRangePicker.js +322 -0
  68. package/dist/components/daterangepicker/DateRangePicker.js.map +1 -0
  69. package/dist/components/drawer/Drawer.cjs +2 -0
  70. package/dist/components/drawer/Drawer.cjs.map +1 -0
  71. package/dist/components/drawer/Drawer.js +57 -0
  72. package/dist/components/drawer/Drawer.js.map +1 -0
  73. package/dist/components/dropdown/Dropdown.cjs +2 -0
  74. package/dist/components/dropdown/Dropdown.cjs.map +1 -0
  75. package/dist/components/dropdown/Dropdown.js +115 -0
  76. package/dist/components/dropdown/Dropdown.js.map +1 -0
  77. package/dist/components/fileuploader/FileUploader.cjs +2 -0
  78. package/dist/components/fileuploader/FileUploader.cjs.map +1 -0
  79. package/dist/components/fileuploader/FileUploader.js +83 -0
  80. package/dist/components/fileuploader/FileUploader.js.map +1 -0
  81. package/dist/components/hovercard/HoverCard.cjs +2 -0
  82. package/dist/components/hovercard/HoverCard.cjs.map +1 -0
  83. package/dist/components/hovercard/HoverCard.js +78 -0
  84. package/dist/components/hovercard/HoverCard.js.map +1 -0
  85. package/dist/components/input/Input.cjs +2 -0
  86. package/dist/components/input/Input.cjs.map +1 -0
  87. package/dist/components/input/Input.js +41 -0
  88. package/dist/components/input/Input.js.map +1 -0
  89. package/dist/components/layout/Container.cjs +2 -0
  90. package/dist/components/layout/Container.cjs.map +1 -0
  91. package/dist/components/layout/Container.js +33 -0
  92. package/dist/components/layout/Container.js.map +1 -0
  93. package/dist/components/layout/Flex.cjs +2 -0
  94. package/dist/components/layout/Flex.cjs.map +1 -0
  95. package/dist/components/layout/Flex.js +26 -0
  96. package/dist/components/layout/Flex.js.map +1 -0
  97. package/dist/components/layout/Grid.cjs +2 -0
  98. package/dist/components/layout/Grid.cjs.map +1 -0
  99. package/dist/components/layout/Grid.js +21 -0
  100. package/dist/components/layout/Grid.js.map +1 -0
  101. package/dist/components/layout/HStack.cjs +2 -0
  102. package/dist/components/layout/HStack.cjs.map +1 -0
  103. package/dist/components/layout/HStack.js +9 -0
  104. package/dist/components/layout/HStack.js.map +1 -0
  105. package/dist/components/layout/Stack.cjs +2 -0
  106. package/dist/components/layout/Stack.cjs.map +1 -0
  107. package/dist/components/layout/Stack.js +9 -0
  108. package/dist/components/layout/Stack.js.map +1 -0
  109. package/dist/components/megamenu/MegaMenu.cjs +2 -0
  110. package/dist/components/megamenu/MegaMenu.cjs.map +1 -0
  111. package/dist/components/megamenu/MegaMenu.js +43 -0
  112. package/dist/components/megamenu/MegaMenu.js.map +1 -0
  113. package/dist/components/modal/Modal.cjs +2 -0
  114. package/dist/components/modal/Modal.cjs.map +1 -0
  115. package/dist/components/modal/Modal.js +91 -0
  116. package/dist/components/modal/Modal.js.map +1 -0
  117. package/dist/components/pagination/Pagination.cjs +2 -0
  118. package/dist/components/pagination/Pagination.cjs.map +1 -0
  119. package/dist/components/pagination/Pagination.js +62 -0
  120. package/dist/components/pagination/Pagination.js.map +1 -0
  121. package/dist/components/popover/Popover.cjs +2 -0
  122. package/dist/components/popover/Popover.cjs.map +1 -0
  123. package/dist/components/popover/Popover.js +123 -0
  124. package/dist/components/popover/Popover.js.map +1 -0
  125. package/dist/components/progress/Progress.cjs +2 -0
  126. package/dist/components/progress/Progress.cjs.map +1 -0
  127. package/dist/components/progress/Progress.js +33 -0
  128. package/dist/components/progress/Progress.js.map +1 -0
  129. package/dist/components/radiogroup/RadioGroup.cjs +2 -0
  130. package/dist/components/radiogroup/RadioGroup.cjs.map +1 -0
  131. package/dist/components/radiogroup/RadioGroup.js +79 -0
  132. package/dist/components/radiogroup/RadioGroup.js.map +1 -0
  133. package/dist/components/rating/Rating.cjs +2 -0
  134. package/dist/components/rating/Rating.cjs.map +1 -0
  135. package/dist/components/rating/Rating.js +49 -0
  136. package/dist/components/rating/Rating.js.map +1 -0
  137. package/dist/components/skeleton/Skeleton.cjs +2 -0
  138. package/dist/components/skeleton/Skeleton.cjs.map +1 -0
  139. package/dist/components/skeleton/Skeleton.js +86 -0
  140. package/dist/components/skeleton/Skeleton.js.map +1 -0
  141. package/dist/components/slider/Slider.cjs +2 -0
  142. package/dist/components/slider/Slider.cjs.map +1 -0
  143. package/dist/components/slider/Slider.js +116 -0
  144. package/dist/components/slider/Slider.js.map +1 -0
  145. package/dist/components/spinner/Spinner.cjs +2 -0
  146. package/dist/components/spinner/Spinner.cjs.map +1 -0
  147. package/dist/components/spinner/Spinner.js +21 -0
  148. package/dist/components/spinner/Spinner.js.map +1 -0
  149. package/dist/components/stepper/Stepper.cjs +6 -0
  150. package/dist/components/stepper/Stepper.cjs.map +1 -0
  151. package/dist/components/stepper/Stepper.js +43 -0
  152. package/dist/components/stepper/Stepper.js.map +1 -0
  153. package/dist/components/switch/Switch.cjs +2 -0
  154. package/dist/components/switch/Switch.cjs.map +1 -0
  155. package/dist/components/switch/Switch.js +67 -0
  156. package/dist/components/switch/Switch.js.map +1 -0
  157. package/dist/components/table/Table.cjs +2 -0
  158. package/dist/components/table/Table.cjs.map +1 -0
  159. package/dist/components/table/Table.js +46 -0
  160. package/dist/components/table/Table.js.map +1 -0
  161. package/dist/components/tabs/Tabs.cjs +2 -0
  162. package/dist/components/tabs/Tabs.cjs.map +1 -0
  163. package/dist/components/tabs/Tabs.js +56 -0
  164. package/dist/components/tabs/Tabs.js.map +1 -0
  165. package/dist/components/textarea/Textarea.cjs +2 -0
  166. package/dist/components/textarea/Textarea.cjs.map +1 -0
  167. package/dist/components/textarea/Textarea.js +75 -0
  168. package/dist/components/textarea/Textarea.js.map +1 -0
  169. package/dist/components/toast/Toast.cjs +2 -0
  170. package/dist/components/toast/Toast.cjs.map +1 -0
  171. package/dist/components/toast/Toast.js +52 -0
  172. package/dist/components/toast/Toast.js.map +1 -0
  173. package/dist/components/tooltip/Tooltip.cjs +2 -0
  174. package/dist/components/tooltip/Tooltip.cjs.map +1 -0
  175. package/dist/components/tooltip/Tooltip.js +73 -0
  176. package/dist/components/tooltip/Tooltip.js.map +1 -0
  177. package/dist/components/treeview/TreeView.cjs +2 -0
  178. package/dist/components/treeview/TreeView.cjs.map +1 -0
  179. package/dist/components/treeview/TreeView.js +98 -0
  180. package/dist/components/treeview/TreeView.js.map +1 -0
  181. package/dist/components/virtuallist/VirtualList.cjs +2 -0
  182. package/dist/components/virtuallist/VirtualList.cjs.map +1 -0
  183. package/dist/components/virtuallist/VirtualList.js +58 -0
  184. package/dist/components/virtuallist/VirtualList.js.map +1 -0
  185. package/dist/index.cjs +2 -0
  186. package/dist/index.cjs.map +1 -0
  187. package/dist/index.js +109 -0
  188. package/dist/index.js.map +1 -0
  189. package/dist/styles/index.css +1 -0
  190. package/dist/theme/NUIProvider.cjs +2 -0
  191. package/dist/theme/NUIProvider.cjs.map +1 -0
  192. package/dist/theme/NUIProvider.js +34 -0
  193. package/dist/theme/NUIProvider.js.map +1 -0
  194. package/dist/theme/useTheme.cjs +2 -0
  195. package/dist/theme/useTheme.cjs.map +1 -0
  196. package/dist/theme/useTheme.js +9 -0
  197. package/dist/theme/useTheme.js.map +1 -0
  198. package/dist/types/components/accordion/Accordion.d.ts +18 -0
  199. package/dist/types/components/accordion/Accordion.d.ts.map +1 -0
  200. package/dist/types/components/alert/Alert.d.ts +13 -0
  201. package/dist/types/components/alert/Alert.d.ts.map +1 -0
  202. package/dist/types/components/avatar/Avatar.d.ts +18 -0
  203. package/dist/types/components/avatar/Avatar.d.ts.map +1 -0
  204. package/dist/types/components/avatar/AvatarGroup.d.ts +10 -0
  205. package/dist/types/components/avatar/AvatarGroup.d.ts.map +1 -0
  206. package/dist/types/components/badge/Badge.d.ts +22 -0
  207. package/dist/types/components/badge/Badge.d.ts.map +1 -0
  208. package/dist/types/components/badge/BadgeGroup.d.ts +9 -0
  209. package/dist/types/components/badge/BadgeGroup.d.ts.map +1 -0
  210. package/dist/types/components/breadcrumbs/Breadcrumbs.d.ts +15 -0
  211. package/dist/types/components/breadcrumbs/Breadcrumbs.d.ts.map +1 -0
  212. package/dist/types/components/button/Button.d.ts +15 -0
  213. package/dist/types/components/button/Button.d.ts.map +1 -0
  214. package/dist/types/components/card/Card.d.ts +27 -0
  215. package/dist/types/components/card/Card.d.ts.map +1 -0
  216. package/dist/types/components/checkbox/Checkbox.d.ts +15 -0
  217. package/dist/types/components/checkbox/Checkbox.d.ts.map +1 -0
  218. package/dist/types/components/chip/Chip.d.ts +21 -0
  219. package/dist/types/components/chip/Chip.d.ts.map +1 -0
  220. package/dist/types/components/combobox/Combobox.d.ts +24 -0
  221. package/dist/types/components/combobox/Combobox.d.ts.map +1 -0
  222. package/dist/types/components/commandpalette/CommandPalette.d.ts +21 -0
  223. package/dist/types/components/commandpalette/CommandPalette.d.ts.map +1 -0
  224. package/dist/types/components/contextmenu/ContextMenu.d.ts +17 -0
  225. package/dist/types/components/contextmenu/ContextMenu.d.ts.map +1 -0
  226. package/dist/types/components/datagrid/DataGrid.d.ts +28 -0
  227. package/dist/types/components/datagrid/DataGrid.d.ts.map +1 -0
  228. package/dist/types/components/datepicker/DatePicker.d.ts +14 -0
  229. package/dist/types/components/datepicker/DatePicker.d.ts.map +1 -0
  230. package/dist/types/components/daterangepicker/DateRangePicker.d.ts +19 -0
  231. package/dist/types/components/daterangepicker/DateRangePicker.d.ts.map +1 -0
  232. package/dist/types/components/drawer/Drawer.d.ts +12 -0
  233. package/dist/types/components/drawer/Drawer.d.ts.map +1 -0
  234. package/dist/types/components/dropdown/Dropdown.d.ts +18 -0
  235. package/dist/types/components/dropdown/Dropdown.d.ts.map +1 -0
  236. package/dist/types/components/fileuploader/FileUploader.d.ts +9 -0
  237. package/dist/types/components/fileuploader/FileUploader.d.ts.map +1 -0
  238. package/dist/types/components/hovercard/HoverCard.d.ts +10 -0
  239. package/dist/types/components/hovercard/HoverCard.d.ts.map +1 -0
  240. package/dist/types/components/input/Input.d.ts +15 -0
  241. package/dist/types/components/input/Input.d.ts.map +1 -0
  242. package/dist/types/components/layout/Container.d.ts +8 -0
  243. package/dist/types/components/layout/Container.d.ts.map +1 -0
  244. package/dist/types/components/layout/Flex.d.ts +14 -0
  245. package/dist/types/components/layout/Flex.d.ts.map +1 -0
  246. package/dist/types/components/layout/Grid.d.ts +10 -0
  247. package/dist/types/components/layout/Grid.d.ts.map +1 -0
  248. package/dist/types/components/layout/HStack.d.ts +8 -0
  249. package/dist/types/components/layout/HStack.d.ts.map +1 -0
  250. package/dist/types/components/layout/Stack.d.ts +8 -0
  251. package/dist/types/components/layout/Stack.d.ts.map +1 -0
  252. package/dist/types/components/megamenu/MegaMenu.d.ts +12 -0
  253. package/dist/types/components/megamenu/MegaMenu.d.ts.map +1 -0
  254. package/dist/types/components/modal/Modal.d.ts +16 -0
  255. package/dist/types/components/modal/Modal.d.ts.map +1 -0
  256. package/dist/types/components/pagination/Pagination.d.ts +9 -0
  257. package/dist/types/components/pagination/Pagination.d.ts.map +1 -0
  258. package/dist/types/components/popover/Popover.d.ts +21 -0
  259. package/dist/types/components/popover/Popover.d.ts.map +1 -0
  260. package/dist/types/components/progress/Progress.d.ts +13 -0
  261. package/dist/types/components/progress/Progress.d.ts.map +1 -0
  262. package/dist/types/components/radiogroup/RadioGroup.d.ts +18 -0
  263. package/dist/types/components/radiogroup/RadioGroup.d.ts.map +1 -0
  264. package/dist/types/components/rating/Rating.d.ts +19 -0
  265. package/dist/types/components/rating/Rating.d.ts.map +1 -0
  266. package/dist/types/components/select/Select.d.ts +20 -0
  267. package/dist/types/components/select/Select.d.ts.map +1 -0
  268. package/dist/types/components/skeleton/Skeleton.d.ts +44 -0
  269. package/dist/types/components/skeleton/Skeleton.d.ts.map +1 -0
  270. package/dist/types/components/slider/Slider.d.ts +13 -0
  271. package/dist/types/components/slider/Slider.d.ts.map +1 -0
  272. package/dist/types/components/spinner/Spinner.d.ts +7 -0
  273. package/dist/types/components/spinner/Spinner.d.ts.map +1 -0
  274. package/dist/types/components/stepper/Stepper.d.ts +12 -0
  275. package/dist/types/components/stepper/Stepper.d.ts.map +1 -0
  276. package/dist/types/components/switch/Switch.d.ts +15 -0
  277. package/dist/types/components/switch/Switch.d.ts.map +1 -0
  278. package/dist/types/components/table/Table.d.ts +14 -0
  279. package/dist/types/components/table/Table.d.ts.map +1 -0
  280. package/dist/types/components/tabs/Tabs.d.ts +14 -0
  281. package/dist/types/components/tabs/Tabs.d.ts.map +1 -0
  282. package/dist/types/components/textarea/Textarea.d.ts +14 -0
  283. package/dist/types/components/textarea/Textarea.d.ts.map +1 -0
  284. package/dist/types/components/toast/Toast.d.ts +16 -0
  285. package/dist/types/components/toast/Toast.d.ts.map +1 -0
  286. package/dist/types/components/tooltip/Tooltip.d.ts +10 -0
  287. package/dist/types/components/tooltip/Tooltip.d.ts.map +1 -0
  288. package/dist/types/components/treeview/TreeView.d.ts +16 -0
  289. package/dist/types/components/treeview/TreeView.d.ts.map +1 -0
  290. package/dist/types/components/virtuallist/VirtualList.d.ts +23 -0
  291. package/dist/types/components/virtuallist/VirtualList.d.ts.map +1 -0
  292. package/dist/types/index.d.ts +50 -0
  293. package/dist/types/index.d.ts.map +1 -0
  294. package/dist/types/theme/NUIProvider.d.ts +14 -0
  295. package/dist/types/theme/NUIProvider.d.ts.map +1 -0
  296. package/dist/types/theme/useTheme.d.ts +11 -0
  297. package/dist/types/theme/useTheme.d.ts.map +1 -0
  298. package/dist/types/utils/generateid/generateId.d.ts +2 -0
  299. package/dist/types/utils/generateid/generateId.d.ts.map +1 -0
  300. package/dist/types/utils/index.d.ts +9 -0
  301. package/dist/types/utils/index.d.ts.map +1 -0
  302. package/dist/types/utils/inertmanager/inertManager.d.ts +13 -0
  303. package/dist/types/utils/inertmanager/inertManager.d.ts.map +1 -0
  304. package/dist/types/utils/keyboardnav/keyboardNav.d.ts +11 -0
  305. package/dist/types/utils/keyboardnav/keyboardNav.d.ts.map +1 -0
  306. package/dist/types/utils/onclickoutside/onClickOutside.d.ts +3 -0
  307. package/dist/types/utils/onclickoutside/onClickOutside.d.ts.map +1 -0
  308. package/dist/types/utils/portal/portal.d.ts +4 -0
  309. package/dist/types/utils/portal/portal.d.ts.map +1 -0
  310. package/dist/types/utils/restorefocus/restoreFocus.d.ts +8 -0
  311. package/dist/types/utils/restorefocus/restoreFocus.d.ts.map +1 -0
  312. package/dist/types/utils/scrolllock/scrollLock.d.ts +11 -0
  313. package/dist/types/utils/scrolllock/scrollLock.d.ts.map +1 -0
  314. package/dist/types/utils/trapfocus/trapFocus.d.ts +8 -0
  315. package/dist/types/utils/trapfocus/trapFocus.d.ts.map +1 -0
  316. package/dist/utils/generateid/generateId.cjs +2 -0
  317. package/dist/utils/generateid/generateId.cjs.map +1 -0
  318. package/dist/utils/generateid/generateId.js +7 -0
  319. package/dist/utils/generateid/generateId.js.map +1 -0
  320. package/dist/utils/inertmanager/inertManager.cjs +2 -0
  321. package/dist/utils/inertmanager/inertManager.cjs.map +1 -0
  322. package/dist/utils/inertmanager/inertManager.js +18 -0
  323. package/dist/utils/inertmanager/inertManager.js.map +1 -0
  324. package/dist/utils/keyboardnav/keyboardNav.cjs +2 -0
  325. package/dist/utils/keyboardnav/keyboardNav.cjs.map +1 -0
  326. package/dist/utils/keyboardnav/keyboardNav.js +10 -0
  327. package/dist/utils/keyboardnav/keyboardNav.js.map +1 -0
  328. package/dist/utils/onclickoutside/onClickOutside.cjs +2 -0
  329. package/dist/utils/onclickoutside/onClickOutside.cjs.map +1 -0
  330. package/dist/utils/onclickoutside/onClickOutside.js +11 -0
  331. package/dist/utils/onclickoutside/onClickOutside.js.map +1 -0
  332. package/dist/utils/portal/portal.cjs +2 -0
  333. package/dist/utils/portal/portal.cjs.map +1 -0
  334. package/dist/utils/portal/portal.js +8 -0
  335. package/dist/utils/portal/portal.js.map +1 -0
  336. package/dist/utils/restorefocus/restoreFocus.cjs +2 -0
  337. package/dist/utils/restorefocus/restoreFocus.cjs.map +1 -0
  338. package/dist/utils/restorefocus/restoreFocus.js +7 -0
  339. package/dist/utils/restorefocus/restoreFocus.js.map +1 -0
  340. package/dist/utils/scrolllock/scrollLock.cjs +2 -0
  341. package/dist/utils/scrolllock/scrollLock.cjs.map +1 -0
  342. package/dist/utils/scrolllock/scrollLock.js +12 -0
  343. package/dist/utils/scrolllock/scrollLock.js.map +1 -0
  344. package/dist/utils/trapfocus/trapFocus.cjs +3 -0
  345. package/dist/utils/trapfocus/trapFocus.cjs.map +1 -0
  346. package/dist/utils/trapfocus/trapFocus.js +14 -0
  347. package/dist/utils/trapfocus/trapFocus.js.map +1 -0
  348. package/package.json +3 -2
@@ -0,0 +1,50 @@
1
+ import { jsx as i } from "react/jsx-runtime";
2
+ /* empty css */
3
+ function a({
4
+ children: r,
5
+ className: n = "",
6
+ clickable: e = !1,
7
+ hover: t = !1,
8
+ onClick: d
9
+ }) {
10
+ return /* @__PURE__ */ i(
11
+ "div",
12
+ {
13
+ className: [
14
+ "ui-card",
15
+ e ? "ui-card--clickable" : "",
16
+ t ? "ui-card--hover" : "",
17
+ n
18
+ ].join(" "),
19
+ role: e ? "button" : void 0,
20
+ tabIndex: e ? 0 : void 0,
21
+ onClick: e ? d : void 0,
22
+ onKeyDown: (o) => {
23
+ e && (o.key === "Enter" || o.key === " ") && (o.preventDefault(), d?.());
24
+ },
25
+ children: r
26
+ }
27
+ );
28
+ }
29
+ function u({ children: r }) {
30
+ return /* @__PURE__ */ i("div", { className: "ui-card-header", children: r });
31
+ }
32
+ function s({ children: r }) {
33
+ return /* @__PURE__ */ i("div", { className: "ui-card-body", children: r });
34
+ }
35
+ function c({ children: r }) {
36
+ return /* @__PURE__ */ i("div", { className: "ui-card-footer", children: r });
37
+ }
38
+ function f() {
39
+ return /* @__PURE__ */ i("div", { className: "ui-card-divider" });
40
+ }
41
+ const y = Object.assign(a, {
42
+ Header: u,
43
+ Body: s,
44
+ Footer: c,
45
+ Divider: f
46
+ });
47
+ export {
48
+ y as Card
49
+ };
50
+ //# sourceMappingURL=Card.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Card.js","sources":["../../../../src/components/card/Card.tsx"],"sourcesContent":["/**\r\n * Card.tsx\r\n * ----------\r\n * Theme-aware, flexible Card component.\r\n * Supports header/body/footer & clickable states.\r\n */\r\n\r\nimport React from 'react';\r\nimport './Card.css';\r\n\r\ninterface CardProps {\r\n children: React.ReactNode;\r\n className?: string;\r\n clickable?: boolean;\r\n hover?: boolean;\r\n onClick?: () => void;\r\n}\r\n\r\nfunction CardRoot({\r\n children,\r\n className = '',\r\n clickable = false,\r\n hover = false,\r\n onClick,\r\n}: CardProps) {\r\n return (\r\n <div\r\n className={[\r\n 'ui-card',\r\n clickable ? 'ui-card--clickable' : '',\r\n hover ? 'ui-card--hover' : '',\r\n className,\r\n ].join(' ')}\r\n role={clickable ? 'button' : undefined}\r\n tabIndex={clickable ? 0 : undefined}\r\n onClick={clickable ? onClick : undefined}\r\n onKeyDown={(e) => {\r\n if (!clickable) return;\r\n if (e.key === 'Enter' || e.key === ' ') {\r\n e.preventDefault();\r\n onClick?.();\r\n }\r\n }}\r\n >\r\n {children}\r\n </div>\r\n );\r\n}\r\n\r\nfunction Header({ children }: { children: React.ReactNode }) {\r\n return <div className=\"ui-card-header\">{children}</div>;\r\n}\r\n\r\nfunction Body({ children }: { children: React.ReactNode }) {\r\n return <div className=\"ui-card-body\">{children}</div>;\r\n}\r\n\r\nfunction Footer({ children }: { children: React.ReactNode }) {\r\n return <div className=\"ui-card-footer\">{children}</div>;\r\n}\r\n\r\nfunction Divider() {\r\n return <div className=\"ui-card-divider\" />;\r\n}\r\n\r\nexport const Card = Object.assign(CardRoot, {\r\n Header,\r\n Body,\r\n Footer,\r\n Divider,\r\n});\r\n"],"names":["CardRoot","children","className","clickable","hover","onClick","jsx","e","Header","Body","Footer","Divider","Card"],"mappings":";;AAkBA,SAASA,EAAS;AAAA,EAChB,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ;AAAA,EACR,SAAAC;AACF,GAAc;AACZ,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACAH,IAAY,uBAAuB;AAAA,QACnCC,IAAQ,mBAAmB;AAAA,QAC3BF;AAAA,MAAA,EACA,KAAK,GAAG;AAAA,MACV,MAAMC,IAAY,WAAW;AAAA,MAC7B,UAAUA,IAAY,IAAI;AAAA,MAC1B,SAASA,IAAYE,IAAU;AAAA,MAC/B,WAAW,CAACE,MAAM;AAChB,QAAKJ,MACDI,EAAE,QAAQ,WAAWA,EAAE,QAAQ,SACjCA,EAAE,eAAA,GACFF,IAAA;AAAA,MAEJ;AAAA,MAEC,UAAAJ;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,SAASO,EAAO,EAAE,UAAAP,KAA2C;AAC3D,SAAO,gBAAAK,EAAC,OAAA,EAAI,WAAU,kBAAkB,UAAAL,EAAA,CAAS;AACnD;AAEA,SAASQ,EAAK,EAAE,UAAAR,KAA2C;AACzD,SAAO,gBAAAK,EAAC,OAAA,EAAI,WAAU,gBAAgB,UAAAL,EAAA,CAAS;AACjD;AAEA,SAASS,EAAO,EAAE,UAAAT,KAA2C;AAC3D,SAAO,gBAAAK,EAAC,OAAA,EAAI,WAAU,kBAAkB,UAAAL,EAAA,CAAS;AACnD;AAEA,SAASU,IAAU;AACjB,SAAO,gBAAAL,EAAC,OAAA,EAAI,WAAU,kBAAA,CAAkB;AAC1C;AAEO,MAAMM,IAAO,OAAO,OAAOZ,GAAU;AAAA,EAC1C,QAAAQ;AAAA,EACA,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AACF,CAAC;"}
@@ -0,0 +1,2 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("react");;/* empty css */function j({checked:r,defaultChecked:l,indeterminate:e=!1,onChange:h,label:o,disabled:u=!1,name:f,value:x,className:k=""}){const n=s.useRef(null),a=r!==void 0,[d,b]=s.useState(l??!1),c=a?r:d;s.useEffect(()=>{n.current&&(n.current.indeterminate=e)},[e]);const p=()=>{if(u)return;const i=!c;a||b(i),h?.(i)};return t.jsxs("label",{className:`ui-checkbox-root ${k}`,children:[t.jsx("input",{ref:n,type:"checkbox",className:"ui-checkbox-input",name:f,value:x,disabled:u,checked:c,onChange:p,"data-state":e?"indeterminate":c?"checked":"unchecked"}),t.jsx("span",{className:"ui-checkbox-check","aria-hidden":"true",children:e?"–":c?"✓":""}),o&&t.jsx("span",{className:"ui-checkbox-label",children:o})]})}exports.Checkbox=j;
2
+ //# sourceMappingURL=Checkbox.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Checkbox.cjs","sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["/**\r\n * Checkbox.tsx\r\n * --------------\r\n * Fully accessible checkbox with 3 states:\r\n * - checked\r\n * - unchecked\r\n * - indeterminate (optional)\r\n */\r\n\r\nimport React, { useEffect, useRef } from 'react';\r\nimport './Checkbox.css';\r\n\r\ninterface CheckboxProps {\r\n checked?: boolean; // controlled\r\n defaultChecked?: boolean; // uncontrolled\r\n indeterminate?: boolean; // optional\r\n onChange?: (checked: boolean) => void;\r\n\r\n label?: React.ReactNode;\r\n disabled?: boolean;\r\n name?: string;\r\n value?: string;\r\n className?: string;\r\n}\r\n\r\nexport function Checkbox({\r\n checked,\r\n defaultChecked,\r\n indeterminate = false,\r\n onChange,\r\n label,\r\n disabled = false,\r\n name,\r\n value,\r\n className = '',\r\n}: CheckboxProps) {\r\n const inputRef = useRef<HTMLInputElement | null>(null);\r\n\r\n const isControlled = checked !== undefined;\r\n const [internal, setInternal] = React.useState(defaultChecked ?? false);\r\n\r\n const currentChecked = isControlled ? checked : internal;\r\n\r\n // Apply indeterminate visual state\r\n useEffect(() => {\r\n if (inputRef.current) {\r\n inputRef.current.indeterminate = indeterminate;\r\n }\r\n }, [indeterminate]);\r\n\r\n const toggle = () => {\r\n if (disabled) return;\r\n const newVal = !currentChecked;\r\n if (!isControlled) setInternal(newVal);\r\n onChange?.(newVal);\r\n };\r\n\r\n return (\r\n <label className={`ui-checkbox-root ${className}`}>\r\n <input\r\n ref={inputRef}\r\n type=\"checkbox\"\r\n className=\"ui-checkbox-input\"\r\n name={name}\r\n value={value}\r\n disabled={disabled}\r\n checked={currentChecked}\r\n onChange={toggle}\r\n data-state={\r\n indeterminate\r\n ? 'indeterminate'\r\n : currentChecked\r\n ? 'checked'\r\n : 'unchecked'\r\n }\r\n />\r\n\r\n {/* Visual checkmark */}\r\n <span className=\"ui-checkbox-check\" aria-hidden=\"true\">\r\n {indeterminate ? '–' : currentChecked ? '✓' : ''}\r\n </span>\r\n\r\n {label && <span className=\"ui-checkbox-label\">{label}</span>}\r\n </label>\r\n );\r\n}\r\n"],"names":["Checkbox","checked","defaultChecked","indeterminate","onChange","label","disabled","name","value","className","inputRef","useRef","isControlled","internal","setInternal","React","currentChecked","useEffect","toggle","newVal","jsxs","jsx"],"mappings":"sKAyBO,SAASA,EAAS,CACvB,QAAAC,EACA,eAAAC,EACA,cAAAC,EAAgB,GAChB,SAAAC,EACA,MAAAC,EACA,SAAAC,EAAW,GACX,KAAAC,EACA,MAAAC,EACA,UAAAC,EAAY,EACd,EAAkB,CAChB,MAAMC,EAAWC,EAAAA,OAAgC,IAAI,EAE/CC,EAAeX,IAAY,OAC3B,CAACY,EAAUC,CAAW,EAAIC,EAAM,SAASb,GAAkB,EAAK,EAEhEc,EAAiBJ,EAAeX,EAAUY,EAGhDI,EAAAA,UAAU,IAAM,CACVP,EAAS,UACXA,EAAS,QAAQ,cAAgBP,EAErC,EAAG,CAACA,CAAa,CAAC,EAElB,MAAMe,EAAS,IAAM,CACnB,GAAIZ,EAAU,OACd,MAAMa,EAAS,CAACH,EACXJ,GAAcE,EAAYK,CAAM,EACrCf,IAAWe,CAAM,CACnB,EAEA,OACEC,EAAAA,KAAC,QAAA,CAAM,UAAW,oBAAoBX,CAAS,GAC7C,SAAA,CAAAY,EAAAA,IAAC,QAAA,CACC,IAAKX,EACL,KAAK,WACL,UAAU,oBACV,KAAAH,EACA,MAAAC,EACA,SAAAF,EACA,QAASU,EACT,SAAUE,EACV,aACEf,EACI,gBACAa,EACA,UACA,WAAA,CAAA,EAKRK,EAAAA,IAAC,OAAA,CAAK,UAAU,oBAAoB,cAAY,OAC7C,SAAAlB,EAAgB,IAAMa,EAAiB,IAAM,EAAA,CAChD,EAECX,GAASgB,EAAAA,IAAC,OAAA,CAAK,UAAU,oBAAqB,SAAAhB,CAAA,CAAM,CAAA,EACvD,CAEJ"}
@@ -0,0 +1,46 @@
1
+ import { jsxs as m, jsx as n } from "react/jsx-runtime";
2
+ import b, { useRef as C, useEffect as N } from "react";
3
+ /* empty css */
4
+ function v({
5
+ checked: s,
6
+ defaultChecked: l,
7
+ indeterminate: e = !1,
8
+ onChange: u,
9
+ label: o,
10
+ disabled: r = !1,
11
+ name: h,
12
+ value: f,
13
+ className: k = ""
14
+ }) {
15
+ const t = C(null), a = s !== void 0, [p, x] = b.useState(l ?? !1), c = a ? s : p;
16
+ N(() => {
17
+ t.current && (t.current.indeterminate = e);
18
+ }, [e]);
19
+ const d = () => {
20
+ if (r) return;
21
+ const i = !c;
22
+ a || x(i), u?.(i);
23
+ };
24
+ return /* @__PURE__ */ m("label", { className: `ui-checkbox-root ${k}`, children: [
25
+ /* @__PURE__ */ n(
26
+ "input",
27
+ {
28
+ ref: t,
29
+ type: "checkbox",
30
+ className: "ui-checkbox-input",
31
+ name: h,
32
+ value: f,
33
+ disabled: r,
34
+ checked: c,
35
+ onChange: d,
36
+ "data-state": e ? "indeterminate" : c ? "checked" : "unchecked"
37
+ }
38
+ ),
39
+ /* @__PURE__ */ n("span", { className: "ui-checkbox-check", "aria-hidden": "true", children: e ? "–" : c ? "✓" : "" }),
40
+ o && /* @__PURE__ */ n("span", { className: "ui-checkbox-label", children: o })
41
+ ] });
42
+ }
43
+ export {
44
+ v as Checkbox
45
+ };
46
+ //# sourceMappingURL=Checkbox.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Checkbox.js","sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["/**\r\n * Checkbox.tsx\r\n * --------------\r\n * Fully accessible checkbox with 3 states:\r\n * - checked\r\n * - unchecked\r\n * - indeterminate (optional)\r\n */\r\n\r\nimport React, { useEffect, useRef } from 'react';\r\nimport './Checkbox.css';\r\n\r\ninterface CheckboxProps {\r\n checked?: boolean; // controlled\r\n defaultChecked?: boolean; // uncontrolled\r\n indeterminate?: boolean; // optional\r\n onChange?: (checked: boolean) => void;\r\n\r\n label?: React.ReactNode;\r\n disabled?: boolean;\r\n name?: string;\r\n value?: string;\r\n className?: string;\r\n}\r\n\r\nexport function Checkbox({\r\n checked,\r\n defaultChecked,\r\n indeterminate = false,\r\n onChange,\r\n label,\r\n disabled = false,\r\n name,\r\n value,\r\n className = '',\r\n}: CheckboxProps) {\r\n const inputRef = useRef<HTMLInputElement | null>(null);\r\n\r\n const isControlled = checked !== undefined;\r\n const [internal, setInternal] = React.useState(defaultChecked ?? false);\r\n\r\n const currentChecked = isControlled ? checked : internal;\r\n\r\n // Apply indeterminate visual state\r\n useEffect(() => {\r\n if (inputRef.current) {\r\n inputRef.current.indeterminate = indeterminate;\r\n }\r\n }, [indeterminate]);\r\n\r\n const toggle = () => {\r\n if (disabled) return;\r\n const newVal = !currentChecked;\r\n if (!isControlled) setInternal(newVal);\r\n onChange?.(newVal);\r\n };\r\n\r\n return (\r\n <label className={`ui-checkbox-root ${className}`}>\r\n <input\r\n ref={inputRef}\r\n type=\"checkbox\"\r\n className=\"ui-checkbox-input\"\r\n name={name}\r\n value={value}\r\n disabled={disabled}\r\n checked={currentChecked}\r\n onChange={toggle}\r\n data-state={\r\n indeterminate\r\n ? 'indeterminate'\r\n : currentChecked\r\n ? 'checked'\r\n : 'unchecked'\r\n }\r\n />\r\n\r\n {/* Visual checkmark */}\r\n <span className=\"ui-checkbox-check\" aria-hidden=\"true\">\r\n {indeterminate ? '–' : currentChecked ? '✓' : ''}\r\n </span>\r\n\r\n {label && <span className=\"ui-checkbox-label\">{label}</span>}\r\n </label>\r\n );\r\n}\r\n"],"names":["Checkbox","checked","defaultChecked","indeterminate","onChange","label","disabled","name","value","className","inputRef","useRef","isControlled","internal","setInternal","React","currentChecked","useEffect","toggle","newVal","jsxs","jsx"],"mappings":";;;AAyBO,SAASA,EAAS;AAAA,EACvB,SAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAkB;AAChB,QAAMC,IAAWC,EAAgC,IAAI,GAE/CC,IAAeX,MAAY,QAC3B,CAACY,GAAUC,CAAW,IAAIC,EAAM,SAASb,KAAkB,EAAK,GAEhEc,IAAiBJ,IAAeX,IAAUY;AAGhD,EAAAI,EAAU,MAAM;AACd,IAAIP,EAAS,YACXA,EAAS,QAAQ,gBAAgBP;AAAA,EAErC,GAAG,CAACA,CAAa,CAAC;AAElB,QAAMe,IAAS,MAAM;AACnB,QAAIZ,EAAU;AACd,UAAMa,IAAS,CAACH;AAChB,IAAKJ,KAAcE,EAAYK,CAAM,GACrCf,IAAWe,CAAM;AAAA,EACnB;AAEA,SACE,gBAAAC,EAAC,SAAA,EAAM,WAAW,oBAAoBX,CAAS,IAC7C,UAAA;AAAA,IAAA,gBAAAY;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKX;AAAA,QACL,MAAK;AAAA,QACL,WAAU;AAAA,QACV,MAAAH;AAAA,QACA,OAAAC;AAAA,QACA,UAAAF;AAAA,QACA,SAASU;AAAA,QACT,UAAUE;AAAA,QACV,cACEf,IACI,kBACAa,IACA,YACA;AAAA,MAAA;AAAA,IAAA;AAAA,IAKR,gBAAAK,EAAC,QAAA,EAAK,WAAU,qBAAoB,eAAY,QAC7C,UAAAlB,IAAgB,MAAMa,IAAiB,MAAM,GAAA,CAChD;AAAA,IAECX,KAAS,gBAAAgB,EAAC,QAAA,EAAK,WAAU,qBAAqB,UAAAhB,EAAA,CAAM;AAAA,EAAA,GACvD;AAEJ;"}
@@ -0,0 +1,2 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");;/* empty css */function p({children:n,removable:c=!1,selected:r=!1,iconLeft:s,iconRight:a,size:o="md",onRemove:t,onSelect:l,className:u=""}){return e.jsxs("div",{className:["ui-chip",`ui-chip--${o}`,r?"selected":"",u].filter(Boolean).join(" "),role:"button",tabIndex:0,onClick:l,onKeyDown:i=>{(i.key==="Enter"||i.key===" ")&&l?.()},children:[s&&e.jsx("span",{className:"ui-chip-icon-left",children:s}),e.jsx("span",{className:"ui-chip-label",children:n}),a&&e.jsx("span",{className:"ui-chip-icon-right",children:a}),c&&e.jsx("button",{className:"ui-chip-remove","aria-label":"Remove",onClick:i=>{i.stopPropagation(),t?.()},children:"×"})]})}exports.Chip=p;
2
+ //# sourceMappingURL=Chip.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Chip.cjs","sources":["../../../../src/components/chip/Chip.tsx"],"sourcesContent":["/**\r\n * Chip.tsx — FINAL VERSION\r\n * -------------------------\r\n * Features:\r\n * - Removable (optional)\r\n * - Selectable (optional)\r\n * - Sizes: sm, md\r\n * - Icons (left/right)\r\n * - Theme-aware\r\n */\r\n\r\nimport React from 'react';\r\nimport './Chip.css';\r\n\r\nexport interface ChipProps {\r\n children: React.ReactNode;\r\n\r\n /** Removable chip — shows close button */\r\n removable?: boolean;\r\n\r\n /** Selected chip state */\r\n selected?: boolean;\r\n\r\n /** Left icon element */\r\n iconLeft?: React.ReactNode;\r\n\r\n /** Right icon element */\r\n iconRight?: React.ReactNode;\r\n\r\n /** Chip size */\r\n size?: 'sm' | 'md';\r\n\r\n /** Remove handler */\r\n onRemove?: () => void;\r\n\r\n /** Select handler */\r\n onSelect?: () => void;\r\n\r\n className?: string;\r\n}\r\n\r\nexport function Chip({\r\n children,\r\n removable = false,\r\n selected = false,\r\n iconLeft,\r\n iconRight,\r\n size = 'md',\r\n onRemove,\r\n onSelect,\r\n className = '',\r\n}: ChipProps) {\r\n return (\r\n <div\r\n className={[\r\n 'ui-chip',\r\n `ui-chip--${size}`,\r\n selected ? 'selected' : '',\r\n className,\r\n ]\r\n .filter(Boolean)\r\n .join(' ')}\r\n role=\"button\"\r\n tabIndex={0}\r\n onClick={onSelect}\r\n onKeyDown={(e) => {\r\n if (e.key === 'Enter' || e.key === ' ') onSelect?.();\r\n }}\r\n >\r\n {iconLeft && <span className=\"ui-chip-icon-left\">{iconLeft}</span>}\r\n\r\n <span className=\"ui-chip-label\">{children}</span>\r\n\r\n {iconRight && <span className=\"ui-chip-icon-right\">{iconRight}</span>}\r\n\r\n {removable && (\r\n <button\r\n className=\"ui-chip-remove\"\r\n aria-label=\"Remove\"\r\n onClick={(e) => {\r\n e.stopPropagation(); // prevent select\r\n onRemove?.();\r\n }}\r\n >\r\n ×\r\n </button>\r\n )}\r\n </div>\r\n );\r\n}\r\n"],"names":["Chip","children","removable","selected","iconLeft","iconRight","size","onRemove","onSelect","className","jsxs","e","jsx"],"mappings":"+IAyCO,SAASA,EAAK,CACnB,SAAAC,EACA,UAAAC,EAAY,GACZ,SAAAC,EAAW,GACX,SAAAC,EACA,UAAAC,EACA,KAAAC,EAAO,KACP,SAAAC,EACA,SAAAC,EACA,UAAAC,EAAY,EACd,EAAc,CACZ,OACEC,EAAAA,KAAC,MAAA,CACC,UAAW,CACT,UACA,YAAYJ,CAAI,GAChBH,EAAW,WAAa,GACxBM,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EACX,KAAK,SACL,SAAU,EACV,QAASD,EACT,UAAYG,GAAM,EACZA,EAAE,MAAQ,SAAWA,EAAE,MAAQ,MAAKH,IAAA,CAC1C,EAEC,SAAA,CAAAJ,GAAYQ,EAAAA,IAAC,OAAA,CAAK,UAAU,oBAAqB,SAAAR,EAAS,EAE3DQ,EAAAA,IAAC,OAAA,CAAK,UAAU,gBAAiB,SAAAX,CAAA,CAAS,EAEzCI,GAAaO,EAAAA,IAAC,OAAA,CAAK,UAAU,qBAAsB,SAAAP,EAAU,EAE7DH,GACCU,EAAAA,IAAC,SAAA,CACC,UAAU,iBACV,aAAW,SACX,QAAUD,GAAM,CACdA,EAAE,gBAAA,EACFJ,IAAA,CACF,EACD,SAAA,GAAA,CAAA,CAED,CAAA,CAAA,CAIR"}
@@ -0,0 +1,51 @@
1
+ import { jsxs as h, jsx as e } from "react/jsx-runtime";
2
+ /* empty css */
3
+ function d({
4
+ children: s,
5
+ removable: o = !1,
6
+ selected: c = !1,
7
+ iconLeft: a,
8
+ iconRight: l,
9
+ size: r = "md",
10
+ onRemove: p,
11
+ onSelect: n,
12
+ className: t = ""
13
+ }) {
14
+ return /* @__PURE__ */ h(
15
+ "div",
16
+ {
17
+ className: [
18
+ "ui-chip",
19
+ `ui-chip--${r}`,
20
+ c ? "selected" : "",
21
+ t
22
+ ].filter(Boolean).join(" "),
23
+ role: "button",
24
+ tabIndex: 0,
25
+ onClick: n,
26
+ onKeyDown: (i) => {
27
+ (i.key === "Enter" || i.key === " ") && n?.();
28
+ },
29
+ children: [
30
+ a && /* @__PURE__ */ e("span", { className: "ui-chip-icon-left", children: a }),
31
+ /* @__PURE__ */ e("span", { className: "ui-chip-label", children: s }),
32
+ l && /* @__PURE__ */ e("span", { className: "ui-chip-icon-right", children: l }),
33
+ o && /* @__PURE__ */ e(
34
+ "button",
35
+ {
36
+ className: "ui-chip-remove",
37
+ "aria-label": "Remove",
38
+ onClick: (i) => {
39
+ i.stopPropagation(), p?.();
40
+ },
41
+ children: "×"
42
+ }
43
+ )
44
+ ]
45
+ }
46
+ );
47
+ }
48
+ export {
49
+ d as Chip
50
+ };
51
+ //# sourceMappingURL=Chip.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Chip.js","sources":["../../../../src/components/chip/Chip.tsx"],"sourcesContent":["/**\r\n * Chip.tsx — FINAL VERSION\r\n * -------------------------\r\n * Features:\r\n * - Removable (optional)\r\n * - Selectable (optional)\r\n * - Sizes: sm, md\r\n * - Icons (left/right)\r\n * - Theme-aware\r\n */\r\n\r\nimport React from 'react';\r\nimport './Chip.css';\r\n\r\nexport interface ChipProps {\r\n children: React.ReactNode;\r\n\r\n /** Removable chip — shows close button */\r\n removable?: boolean;\r\n\r\n /** Selected chip state */\r\n selected?: boolean;\r\n\r\n /** Left icon element */\r\n iconLeft?: React.ReactNode;\r\n\r\n /** Right icon element */\r\n iconRight?: React.ReactNode;\r\n\r\n /** Chip size */\r\n size?: 'sm' | 'md';\r\n\r\n /** Remove handler */\r\n onRemove?: () => void;\r\n\r\n /** Select handler */\r\n onSelect?: () => void;\r\n\r\n className?: string;\r\n}\r\n\r\nexport function Chip({\r\n children,\r\n removable = false,\r\n selected = false,\r\n iconLeft,\r\n iconRight,\r\n size = 'md',\r\n onRemove,\r\n onSelect,\r\n className = '',\r\n}: ChipProps) {\r\n return (\r\n <div\r\n className={[\r\n 'ui-chip',\r\n `ui-chip--${size}`,\r\n selected ? 'selected' : '',\r\n className,\r\n ]\r\n .filter(Boolean)\r\n .join(' ')}\r\n role=\"button\"\r\n tabIndex={0}\r\n onClick={onSelect}\r\n onKeyDown={(e) => {\r\n if (e.key === 'Enter' || e.key === ' ') onSelect?.();\r\n }}\r\n >\r\n {iconLeft && <span className=\"ui-chip-icon-left\">{iconLeft}</span>}\r\n\r\n <span className=\"ui-chip-label\">{children}</span>\r\n\r\n {iconRight && <span className=\"ui-chip-icon-right\">{iconRight}</span>}\r\n\r\n {removable && (\r\n <button\r\n className=\"ui-chip-remove\"\r\n aria-label=\"Remove\"\r\n onClick={(e) => {\r\n e.stopPropagation(); // prevent select\r\n onRemove?.();\r\n }}\r\n >\r\n ×\r\n </button>\r\n )}\r\n </div>\r\n );\r\n}\r\n"],"names":["Chip","children","removable","selected","iconLeft","iconRight","size","onRemove","onSelect","className","jsxs","e","jsx"],"mappings":";;AAyCO,SAASA,EAAK;AAAA,EACnB,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAc;AACZ,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,YAAYJ,CAAI;AAAA,QAChBH,IAAW,aAAa;AAAA,QACxBM;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACX,MAAK;AAAA,MACL,UAAU;AAAA,MACV,SAASD;AAAA,MACT,WAAW,CAACG,MAAM;AAChB,SAAIA,EAAE,QAAQ,WAAWA,EAAE,QAAQ,QAAKH,IAAA;AAAA,MAC1C;AAAA,MAEC,UAAA;AAAA,QAAAJ,KAAY,gBAAAQ,EAAC,QAAA,EAAK,WAAU,qBAAqB,UAAAR,GAAS;AAAA,QAE3D,gBAAAQ,EAAC,QAAA,EAAK,WAAU,iBAAiB,UAAAX,EAAA,CAAS;AAAA,QAEzCI,KAAa,gBAAAO,EAAC,QAAA,EAAK,WAAU,sBAAsB,UAAAP,GAAU;AAAA,QAE7DH,KACC,gBAAAU;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,cAAW;AAAA,YACX,SAAS,CAACD,MAAM;AACd,cAAAA,EAAE,gBAAA,GACFJ,IAAA;AAAA,YACF;AAAA,YACD,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAED;AAAA,IAAA;AAAA,EAAA;AAIR;"}
@@ -0,0 +1,2 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),s=require("react");;/* empty css */const O=require("../../utils/generateid/generateId.cjs"),$=require("../../utils/onclickoutside/onClickOutside.cjs");function B({options:n,value:c,defaultValue:k,onChange:C,placeholder:S="Select...",disabled:r=!1,className:q="",emptyMessage:R="No results found",filter:j,leftIcon:f,rightIcon:m,renderOption:w,renderOptionIcon:N}){const x=c!==void 0,[d,u]=s.useState(()=>x&&c?n.find(o=>o.value===c)?.label??"":k?n.find(o=>o.value===k)?.label??"":""),[t,D]=s.useState(!1),[h,v]=s.useState(-1),g=s.useRef(null),y=s.useRef(O.generateId("combobox-list")).current,b=n.filter(e=>j?j(d,e):e.label.toLowerCase().includes(d.toLowerCase())),L=s.useCallback(e=>{C?.(e)},[C]),i=s.useCallback(()=>{r||D(!0)},[r]),l=s.useCallback(()=>{D(!1),v(-1)},[]);s.useEffect(()=>{if(t)return $.onClickOutside(g,l)},[t,l]),s.useEffect(()=>{if(x&&c!==void 0){const e=n.find(o=>o.value===c);u(e?.label||"")}},[x,c,n]);const E=e=>{if(!r)switch(e.key){case"ArrowDown":e.preventDefault(),t||i(),v(o=>Math.min(b.length-1,o+1));break;case"ArrowUp":e.preventDefault(),t||i(),v(o=>Math.max(0,o-1));break;case"Enter":if(t&&h>=0){const o=b[h];u(o.label),L(o.value),l()}break;case"Escape":t&&(e.preventDefault(),l());break}},M=e=>{u(e.label),L(e.value),l()};return a.jsxs("div",{ref:g,className:`ui-combobox ${q}`,children:[a.jsxs("div",{className:"ui-combobox-input-wrapper",children:[f&&a.jsx("span",{className:"ui-combobox-left-icon",children:f}),a.jsx("input",{className:["ui-combobox-input",f&&"has-left-icon",m&&"has-right-icon"].filter(Boolean).join(" "),role:"combobox","aria-expanded":t,"aria-controls":y,placeholder:S,disabled:r,value:d,onFocus:i,onClick:i,onChange:e=>{u(e.target.value),t||i()},onKeyDown:E}),m&&a.jsx("span",{className:"ui-combobox-right-icon",children:m})]}),t&&a.jsx("div",{id:y,role:"listbox",className:"ui-combobox-listbox",children:b.length===0?a.jsx("div",{className:"ui-combobox-empty",children:R}):b.map((e,o)=>{const p=o===h;return a.jsxs("div",{role:"option","aria-selected":p,className:`ui-combobox-option ${p?"active":""}`,onMouseDown:A=>A.preventDefault(),onClick:()=>M(e),children:[N&&a.jsx("span",{className:"ui-combobox-option-icon",children:N(e)}),w?w(e,p):e.label]},e.value)})})]})}exports.Combobox=B;
2
+ //# sourceMappingURL=Combobox.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Combobox.cjs","sources":["../../../../src/components/combobox/Combobox.tsx"],"sourcesContent":["/**\r\n * Combobox.tsx\r\n * Fully WCAG-compliant Combobox integrated with your existing utilities.\r\n */\r\n\r\n/**\r\n * Combobox.tsx\r\n * Now includes:\r\n * - leftIcon (input)\r\n * - rightIcon (input)\r\n * - renderOptionIcon (listbox)\r\n */\r\n/**\r\n * Combobox.tsx\r\n * Fully WCAG-Compliant Combobox with:\r\n * - Icons (input + option)\r\n * - Value→Label mapping fixed\r\n * - Keyboard navigation\r\n * - Click outside to close\r\n * - Controlled/uncontrolled\r\n */\r\n\r\nimport React, {\r\n useState,\r\n useEffect,\r\n useRef,\r\n useCallback,\r\n KeyboardEvent,\r\n} from 'react';\r\n\r\nimport './Combobox.css';\r\n\r\n// USING YOUR EXISTING UTILS\r\nimport { onClickOutside, generateId } from '../../utils/index';\r\n\r\nexport interface ComboboxOption {\r\n label: string;\r\n value: string;\r\n icon?: React.ReactNode;\r\n}\r\n\r\ninterface ComboboxProps {\r\n options: ComboboxOption[];\r\n\r\n value?: string;\r\n defaultValue?: string;\r\n onChange?: (value: string) => void;\r\n\r\n placeholder?: string;\r\n disabled?: boolean;\r\n className?: string;\r\n emptyMessage?: string;\r\n\r\n filter?: (input: string, option: ComboboxOption) => boolean;\r\n\r\n leftIcon?: React.ReactNode;\r\n rightIcon?: React.ReactNode;\r\n\r\n renderOption?: (option: ComboboxOption, active: boolean) => React.ReactNode;\r\n renderOptionIcon?: (option: ComboboxOption) => React.ReactNode;\r\n}\r\n\r\nexport function Combobox({\r\n options,\r\n value,\r\n defaultValue,\r\n onChange,\r\n placeholder = 'Select...',\r\n disabled = false,\r\n className = '',\r\n emptyMessage = 'No results found',\r\n filter,\r\n leftIcon,\r\n rightIcon,\r\n renderOption,\r\n renderOptionIcon,\r\n}: ComboboxProps) {\r\n const isControlled = value !== undefined;\r\n\r\n /**\r\n * displayLabel = what the user SEEES in input\r\n * value = actual selected value (sent to parent)\r\n */\r\n const [displayLabel, setDisplayLabel] = useState<string>(() => {\r\n if (isControlled && value) {\r\n const match = options.find((o) => o.value === value);\r\n return match?.label ?? '';\r\n }\r\n if (defaultValue) {\r\n const match = options.find((o) => o.value === defaultValue);\r\n return match?.label ?? '';\r\n }\r\n return '';\r\n });\r\n\r\n const [open, setOpen] = useState(false);\r\n const [activeIndex, setActiveIndex] = useState<number>(-1);\r\n\r\n const wrapperRef = useRef<HTMLDivElement | null>(null);\r\n const listboxId = useRef(generateId('combobox-list')).current;\r\n\r\n /** Filtered options */\r\n const filtered = options.filter((opt) =>\r\n filter\r\n ? filter(displayLabel, opt)\r\n : opt.label.toLowerCase().includes(displayLabel.toLowerCase())\r\n );\r\n\r\n /** Set parent value */\r\n const setValue = useCallback(\r\n (val: string) => {\r\n onChange?.(val);\r\n },\r\n [onChange]\r\n );\r\n\r\n const openList = useCallback(() => {\r\n if (!disabled) setOpen(true);\r\n }, [disabled]);\r\n\r\n const closeList = useCallback(() => {\r\n setOpen(false);\r\n setActiveIndex(-1);\r\n }, []);\r\n\r\n /** Click outside to close */\r\n useEffect(() => {\r\n if (!open) return;\r\n return onClickOutside(wrapperRef, closeList);\r\n }, [open, closeList]);\r\n\r\n /** Sync controlled (value → label) */\r\n useEffect(() => {\r\n if (isControlled && value !== undefined) {\r\n const found = options.find((o) => o.value === value);\r\n setDisplayLabel(found?.label || '');\r\n }\r\n }, [isControlled, value, options]);\r\n\r\n /** Keyboard behavior */\r\n const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\r\n if (disabled) return;\r\n\r\n switch (e.key) {\r\n case 'ArrowDown':\r\n e.preventDefault();\r\n if (!open) openList();\r\n setActiveIndex((i) => Math.min(filtered.length - 1, i + 1));\r\n break;\r\n\r\n case 'ArrowUp':\r\n e.preventDefault();\r\n if (!open) openList();\r\n setActiveIndex((i) => Math.max(0, i - 1));\r\n break;\r\n\r\n case 'Enter':\r\n if (open && activeIndex >= 0) {\r\n const opt = filtered[activeIndex];\r\n setDisplayLabel(opt.label);\r\n setValue(opt.value);\r\n closeList();\r\n }\r\n break;\r\n\r\n case 'Escape':\r\n if (open) {\r\n e.preventDefault();\r\n closeList();\r\n }\r\n break;\r\n\r\n default:\r\n break;\r\n }\r\n };\r\n\r\n /** Option click */\r\n const onOptionClick = (opt: ComboboxOption) => {\r\n setDisplayLabel(opt.label);\r\n setValue(opt.value);\r\n closeList();\r\n };\r\n\r\n return (\r\n <div ref={wrapperRef} className={`ui-combobox ${className}`}>\r\n {/* Input + Icons */}\r\n <div className=\"ui-combobox-input-wrapper\">\r\n {leftIcon && <span className=\"ui-combobox-left-icon\">{leftIcon}</span>}\r\n\r\n <input\r\n className={[\r\n 'ui-combobox-input',\r\n leftIcon && 'has-left-icon',\r\n rightIcon && 'has-right-icon',\r\n ]\r\n .filter(Boolean)\r\n .join(' ')}\r\n role=\"combobox\"\r\n aria-expanded={open}\r\n aria-controls={listboxId}\r\n placeholder={placeholder}\r\n disabled={disabled}\r\n value={displayLabel}\r\n onFocus={openList}\r\n onClick={openList}\r\n onChange={(e) => {\r\n setDisplayLabel(e.target.value);\r\n if (!open) openList();\r\n }}\r\n onKeyDown={onKeyDown}\r\n />\r\n\r\n {rightIcon && (\r\n <span className=\"ui-combobox-right-icon\">{rightIcon}</span>\r\n )}\r\n </div>\r\n\r\n {open && (\r\n <div id={listboxId} role=\"listbox\" className=\"ui-combobox-listbox\">\r\n {filtered.length === 0 ? (\r\n <div className=\"ui-combobox-empty\">{emptyMessage}</div>\r\n ) : (\r\n filtered.map((opt, index) => {\r\n const active = index === activeIndex;\r\n\r\n return (\r\n <div\r\n key={opt.value}\r\n role=\"option\"\r\n aria-selected={active}\r\n className={`ui-combobox-option ${active ? 'active' : ''}`}\r\n onMouseDown={(e) => e.preventDefault()}\r\n onClick={() => onOptionClick(opt)}\r\n >\r\n {/* Option icon (if provided through renderOptionIcon) */}\r\n {renderOptionIcon && (\r\n <span className=\"ui-combobox-option-icon\">\r\n {renderOptionIcon(opt)}\r\n </span>\r\n )}\r\n\r\n {renderOption ? renderOption(opt, active) : opt.label}\r\n </div>\r\n );\r\n })\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n}\r\n"],"names":["Combobox","options","value","defaultValue","onChange","placeholder","disabled","className","emptyMessage","filter","leftIcon","rightIcon","renderOption","renderOptionIcon","isControlled","displayLabel","setDisplayLabel","useState","open","setOpen","activeIndex","setActiveIndex","wrapperRef","useRef","listboxId","generateId","filtered","opt","setValue","useCallback","val","openList","closeList","useEffect","onClickOutside","found","onKeyDown","i","onOptionClick","jsxs","jsx","index","active","e"],"mappings":"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"}
@@ -0,0 +1,114 @@
1
+ import { jsxs as v, jsx as i } from "react/jsx-runtime";
2
+ import { useState as k, useRef as M, useCallback as w, useEffect as R } from "react";
3
+ /* empty css */
4
+ import { generateId as U } from "../../utils/generateid/generateId.js";
5
+ import { onClickOutside as q } from "../../utils/onclickoutside/onClickOutside.js";
6
+ function Q({
7
+ options: n,
8
+ value: a,
9
+ defaultValue: N,
10
+ onChange: C,
11
+ placeholder: S = "Select...",
12
+ disabled: l = !1,
13
+ className: $ = "",
14
+ emptyMessage: B = "No results found",
15
+ filter: D,
16
+ leftIcon: b,
17
+ rightIcon: m,
18
+ renderOption: L,
19
+ renderOptionIcon: y
20
+ }) {
21
+ const f = a !== void 0, [d, r] = k(() => f && a ? n.find((o) => o.value === a)?.label ?? "" : N ? n.find((o) => o.value === N)?.label ?? "" : ""), [t, g] = k(!1), [p, x] = k(-1), j = M(null), A = M(U("combobox-list")).current, u = n.filter(
22
+ (e) => D ? D(d, e) : e.label.toLowerCase().includes(d.toLowerCase())
23
+ ), E = w(
24
+ (e) => {
25
+ C?.(e);
26
+ },
27
+ [C]
28
+ ), c = w(() => {
29
+ l || g(!0);
30
+ }, [l]), s = w(() => {
31
+ g(!1), x(-1);
32
+ }, []);
33
+ R(() => {
34
+ if (t)
35
+ return q(j, s);
36
+ }, [t, s]), R(() => {
37
+ if (f && a !== void 0) {
38
+ const e = n.find((o) => o.value === a);
39
+ r(e?.label || "");
40
+ }
41
+ }, [f, a, n]);
42
+ const F = (e) => {
43
+ if (!l)
44
+ switch (e.key) {
45
+ case "ArrowDown":
46
+ e.preventDefault(), t || c(), x((o) => Math.min(u.length - 1, o + 1));
47
+ break;
48
+ case "ArrowUp":
49
+ e.preventDefault(), t || c(), x((o) => Math.max(0, o - 1));
50
+ break;
51
+ case "Enter":
52
+ if (t && p >= 0) {
53
+ const o = u[p];
54
+ r(o.label), E(o.value), s();
55
+ }
56
+ break;
57
+ case "Escape":
58
+ t && (e.preventDefault(), s());
59
+ break;
60
+ }
61
+ }, K = (e) => {
62
+ r(e.label), E(e.value), s();
63
+ };
64
+ return /* @__PURE__ */ v("div", { ref: j, className: `ui-combobox ${$}`, children: [
65
+ /* @__PURE__ */ v("div", { className: "ui-combobox-input-wrapper", children: [
66
+ b && /* @__PURE__ */ i("span", { className: "ui-combobox-left-icon", children: b }),
67
+ /* @__PURE__ */ i(
68
+ "input",
69
+ {
70
+ className: [
71
+ "ui-combobox-input",
72
+ b && "has-left-icon",
73
+ m && "has-right-icon"
74
+ ].filter(Boolean).join(" "),
75
+ role: "combobox",
76
+ "aria-expanded": t,
77
+ "aria-controls": A,
78
+ placeholder: S,
79
+ disabled: l,
80
+ value: d,
81
+ onFocus: c,
82
+ onClick: c,
83
+ onChange: (e) => {
84
+ r(e.target.value), t || c();
85
+ },
86
+ onKeyDown: F
87
+ }
88
+ ),
89
+ m && /* @__PURE__ */ i("span", { className: "ui-combobox-right-icon", children: m })
90
+ ] }),
91
+ t && /* @__PURE__ */ i("div", { id: A, role: "listbox", className: "ui-combobox-listbox", children: u.length === 0 ? /* @__PURE__ */ i("div", { className: "ui-combobox-empty", children: B }) : u.map((e, o) => {
92
+ const h = o === p;
93
+ return /* @__PURE__ */ v(
94
+ "div",
95
+ {
96
+ role: "option",
97
+ "aria-selected": h,
98
+ className: `ui-combobox-option ${h ? "active" : ""}`,
99
+ onMouseDown: (O) => O.preventDefault(),
100
+ onClick: () => K(e),
101
+ children: [
102
+ y && /* @__PURE__ */ i("span", { className: "ui-combobox-option-icon", children: y(e) }),
103
+ L ? L(e, h) : e.label
104
+ ]
105
+ },
106
+ e.value
107
+ );
108
+ }) })
109
+ ] });
110
+ }
111
+ export {
112
+ Q as Combobox
113
+ };
114
+ //# sourceMappingURL=Combobox.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Combobox.js","sources":["../../../../src/components/combobox/Combobox.tsx"],"sourcesContent":["/**\r\n * Combobox.tsx\r\n * Fully WCAG-compliant Combobox integrated with your existing utilities.\r\n */\r\n\r\n/**\r\n * Combobox.tsx\r\n * Now includes:\r\n * - leftIcon (input)\r\n * - rightIcon (input)\r\n * - renderOptionIcon (listbox)\r\n */\r\n/**\r\n * Combobox.tsx\r\n * Fully WCAG-Compliant Combobox with:\r\n * - Icons (input + option)\r\n * - Value→Label mapping fixed\r\n * - Keyboard navigation\r\n * - Click outside to close\r\n * - Controlled/uncontrolled\r\n */\r\n\r\nimport React, {\r\n useState,\r\n useEffect,\r\n useRef,\r\n useCallback,\r\n KeyboardEvent,\r\n} from 'react';\r\n\r\nimport './Combobox.css';\r\n\r\n// USING YOUR EXISTING UTILS\r\nimport { onClickOutside, generateId } from '../../utils/index';\r\n\r\nexport interface ComboboxOption {\r\n label: string;\r\n value: string;\r\n icon?: React.ReactNode;\r\n}\r\n\r\ninterface ComboboxProps {\r\n options: ComboboxOption[];\r\n\r\n value?: string;\r\n defaultValue?: string;\r\n onChange?: (value: string) => void;\r\n\r\n placeholder?: string;\r\n disabled?: boolean;\r\n className?: string;\r\n emptyMessage?: string;\r\n\r\n filter?: (input: string, option: ComboboxOption) => boolean;\r\n\r\n leftIcon?: React.ReactNode;\r\n rightIcon?: React.ReactNode;\r\n\r\n renderOption?: (option: ComboboxOption, active: boolean) => React.ReactNode;\r\n renderOptionIcon?: (option: ComboboxOption) => React.ReactNode;\r\n}\r\n\r\nexport function Combobox({\r\n options,\r\n value,\r\n defaultValue,\r\n onChange,\r\n placeholder = 'Select...',\r\n disabled = false,\r\n className = '',\r\n emptyMessage = 'No results found',\r\n filter,\r\n leftIcon,\r\n rightIcon,\r\n renderOption,\r\n renderOptionIcon,\r\n}: ComboboxProps) {\r\n const isControlled = value !== undefined;\r\n\r\n /**\r\n * displayLabel = what the user SEEES in input\r\n * value = actual selected value (sent to parent)\r\n */\r\n const [displayLabel, setDisplayLabel] = useState<string>(() => {\r\n if (isControlled && value) {\r\n const match = options.find((o) => o.value === value);\r\n return match?.label ?? '';\r\n }\r\n if (defaultValue) {\r\n const match = options.find((o) => o.value === defaultValue);\r\n return match?.label ?? '';\r\n }\r\n return '';\r\n });\r\n\r\n const [open, setOpen] = useState(false);\r\n const [activeIndex, setActiveIndex] = useState<number>(-1);\r\n\r\n const wrapperRef = useRef<HTMLDivElement | null>(null);\r\n const listboxId = useRef(generateId('combobox-list')).current;\r\n\r\n /** Filtered options */\r\n const filtered = options.filter((opt) =>\r\n filter\r\n ? filter(displayLabel, opt)\r\n : opt.label.toLowerCase().includes(displayLabel.toLowerCase())\r\n );\r\n\r\n /** Set parent value */\r\n const setValue = useCallback(\r\n (val: string) => {\r\n onChange?.(val);\r\n },\r\n [onChange]\r\n );\r\n\r\n const openList = useCallback(() => {\r\n if (!disabled) setOpen(true);\r\n }, [disabled]);\r\n\r\n const closeList = useCallback(() => {\r\n setOpen(false);\r\n setActiveIndex(-1);\r\n }, []);\r\n\r\n /** Click outside to close */\r\n useEffect(() => {\r\n if (!open) return;\r\n return onClickOutside(wrapperRef, closeList);\r\n }, [open, closeList]);\r\n\r\n /** Sync controlled (value → label) */\r\n useEffect(() => {\r\n if (isControlled && value !== undefined) {\r\n const found = options.find((o) => o.value === value);\r\n setDisplayLabel(found?.label || '');\r\n }\r\n }, [isControlled, value, options]);\r\n\r\n /** Keyboard behavior */\r\n const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\r\n if (disabled) return;\r\n\r\n switch (e.key) {\r\n case 'ArrowDown':\r\n e.preventDefault();\r\n if (!open) openList();\r\n setActiveIndex((i) => Math.min(filtered.length - 1, i + 1));\r\n break;\r\n\r\n case 'ArrowUp':\r\n e.preventDefault();\r\n if (!open) openList();\r\n setActiveIndex((i) => Math.max(0, i - 1));\r\n break;\r\n\r\n case 'Enter':\r\n if (open && activeIndex >= 0) {\r\n const opt = filtered[activeIndex];\r\n setDisplayLabel(opt.label);\r\n setValue(opt.value);\r\n closeList();\r\n }\r\n break;\r\n\r\n case 'Escape':\r\n if (open) {\r\n e.preventDefault();\r\n closeList();\r\n }\r\n break;\r\n\r\n default:\r\n break;\r\n }\r\n };\r\n\r\n /** Option click */\r\n const onOptionClick = (opt: ComboboxOption) => {\r\n setDisplayLabel(opt.label);\r\n setValue(opt.value);\r\n closeList();\r\n };\r\n\r\n return (\r\n <div ref={wrapperRef} className={`ui-combobox ${className}`}>\r\n {/* Input + Icons */}\r\n <div className=\"ui-combobox-input-wrapper\">\r\n {leftIcon && <span className=\"ui-combobox-left-icon\">{leftIcon}</span>}\r\n\r\n <input\r\n className={[\r\n 'ui-combobox-input',\r\n leftIcon && 'has-left-icon',\r\n rightIcon && 'has-right-icon',\r\n ]\r\n .filter(Boolean)\r\n .join(' ')}\r\n role=\"combobox\"\r\n aria-expanded={open}\r\n aria-controls={listboxId}\r\n placeholder={placeholder}\r\n disabled={disabled}\r\n value={displayLabel}\r\n onFocus={openList}\r\n onClick={openList}\r\n onChange={(e) => {\r\n setDisplayLabel(e.target.value);\r\n if (!open) openList();\r\n }}\r\n onKeyDown={onKeyDown}\r\n />\r\n\r\n {rightIcon && (\r\n <span className=\"ui-combobox-right-icon\">{rightIcon}</span>\r\n )}\r\n </div>\r\n\r\n {open && (\r\n <div id={listboxId} role=\"listbox\" className=\"ui-combobox-listbox\">\r\n {filtered.length === 0 ? (\r\n <div className=\"ui-combobox-empty\">{emptyMessage}</div>\r\n ) : (\r\n filtered.map((opt, index) => {\r\n const active = index === activeIndex;\r\n\r\n return (\r\n <div\r\n key={opt.value}\r\n role=\"option\"\r\n aria-selected={active}\r\n className={`ui-combobox-option ${active ? 'active' : ''}`}\r\n onMouseDown={(e) => e.preventDefault()}\r\n onClick={() => onOptionClick(opt)}\r\n >\r\n {/* Option icon (if provided through renderOptionIcon) */}\r\n {renderOptionIcon && (\r\n <span className=\"ui-combobox-option-icon\">\r\n {renderOptionIcon(opt)}\r\n </span>\r\n )}\r\n\r\n {renderOption ? renderOption(opt, active) : opt.label}\r\n </div>\r\n );\r\n })\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n}\r\n"],"names":["Combobox","options","value","defaultValue","onChange","placeholder","disabled","className","emptyMessage","filter","leftIcon","rightIcon","renderOption","renderOptionIcon","isControlled","displayLabel","setDisplayLabel","useState","open","setOpen","activeIndex","setActiveIndex","wrapperRef","useRef","listboxId","generateId","filtered","opt","setValue","useCallback","val","openList","closeList","useEffect","onClickOutside","found","onKeyDown","i","onOptionClick","jsxs","jsx","index","active","e"],"mappings":"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"}
@@ -0,0 +1,2 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),c=require("react");;/* empty css */const w=require("../../utils/onclickoutside/onClickOutside.cjs"),E=require("../../utils/portal/portal.cjs");function g({sections:y,placeholder:j="Search commands…",className:N=""}){const[r,a]=c.useState(!1),[m,f]=c.useState(""),[o,v]=c.useState({section:0,index:0}),p=c.useRef(null),h=c.useRef(null);c.useEffect(()=>{const e=t=>{(navigator.platform.toLowerCase().includes("mac")?t.metaKey:t.ctrlKey)&&t.key.toLowerCase()==="k"&&(t.preventDefault(),a(u=>!u))};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[]),c.useEffect(()=>{if(!r)return;const e=t=>{t.key==="Escape"&&a(!1)};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[r]),c.useEffect(()=>{if(r)return w.onClickOutside(p,()=>a(!1))},[r]),c.useEffect(()=>{r&&(setTimeout(()=>h.current?.focus(),0),f(""))},[r]);const d=y.map(e=>({...e,items:e.items.filter(t=>t.label.toLowerCase().includes(m.toLowerCase()))})),l=d.flatMap((e,t)=>e.items.map((n,i)=>({section:t,index:i}))),x=e=>{if(l.length===0)return;let n=l.findIndex(i=>i.section===o.section&&i.index===o.index)+e;n<0&&(n=l.length-1),n>=l.length&&(n=0),v(l[n])},k=e=>{const t=e.key;if(t==="ArrowDown")e.preventDefault(),x(1);else if(t==="ArrowUp")e.preventDefault(),x(-1);else if(t==="Enter"){e.preventDefault();const i=d[o.section]?.items[o.index];i&&i.onSelect&&(i.onSelect(),a(!1))}};return r?s.jsxs(E.Portal,{children:[s.jsx("div",{className:"ui-cmd-overlay"}),s.jsxs("div",{ref:p,className:`ui-cmd ${N}`,role:"dialog","aria-modal":"true",onKeyDown:k,children:[s.jsx("input",{ref:h,className:"ui-cmd-input",placeholder:j,value:m,onChange:e=>f(e.target.value)}),s.jsx("div",{className:"ui-cmd-list",children:d.map((e,t)=>s.jsxs("div",{className:"ui-cmd-section",children:[e.title&&s.jsx("div",{className:"ui-cmd-section-title",children:e.title}),e.items.length===0?s.jsx("div",{className:"ui-cmd-empty",children:"No results"}):e.items.map((n,i)=>{const u=o.section===t&&o.index===i;return s.jsxs("div",{className:`ui-cmd-item ${u?"active":""}`,onMouseEnter:()=>v({section:t,index:i}),onClick:()=>{n.onSelect?.(),a(!1)},children:[n.icon&&s.jsx("span",{className:"ui-cmd-icon",children:n.icon}),s.jsxs("div",{className:"ui-cmd-meta",children:[s.jsx("div",{className:"ui-cmd-label",children:n.label}),n.description&&s.jsx("div",{className:"ui-cmd-description",children:n.description})]}),n.shortcut&&s.jsx("span",{className:"ui-cmd-shortcut",children:n.shortcut})]},n.id)})]},t))})]})]}):null}exports.CommandPalette=g;
2
+ //# sourceMappingURL=CommandPalette.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CommandPalette.cjs","sources":["../../../../src/components/commandpalette/CommandPalette.tsx"],"sourcesContent":["/**\r\n * CommandPalette.tsx — FINAL VERSION\r\n * -----------------------------------\r\n * Full-featured Cmd+K command menu.\r\n * - Cmd+K / Ctrl+K global shortcut\r\n * - Search filter\r\n * - Keyboard navigation\r\n * - Portal + overlay\r\n * - Sections\r\n * - ARIA-compliant\r\n */\r\n\r\nimport {\r\n useEffect,\r\n useRef,\r\n useState,\r\n ReactNode,\r\n KeyboardEvent as ReactKeyboardEvent,\r\n} from 'react';\r\nimport './CommandPalette.css';\r\nimport { Portal, onClickOutside} from '../../utils/index';\r\n\r\nexport interface CommandItem {\r\n id: string;\r\n label: string;\r\n icon?: ReactNode;\r\n shortcut?: string;\r\n description?: string;\r\n onSelect?: () => void;\r\n}\r\n\r\nexport interface CommandSection {\r\n title?: string;\r\n items: CommandItem[];\r\n}\r\n\r\ninterface CommandPaletteProps {\r\n sections: CommandSection[];\r\n placeholder?: string;\r\n className?: string;\r\n}\r\n\r\nexport function CommandPalette({\r\n sections,\r\n placeholder = 'Search commands…',\r\n className = '',\r\n}: CommandPaletteProps) {\r\n const [open, setOpen] = useState(false);\r\n const [query, setQuery] = useState('');\r\n const [active, setActive] = useState<{ section: number; index: number }>({\r\n section: 0,\r\n index: 0,\r\n });\r\n\r\n const paletteRef = useRef<HTMLDivElement | null>(null);\r\n const inputRef = useRef<HTMLInputElement | null>(null);\r\n\r\n /** Global Cmd+K shortcut */\r\n useEffect(() => {\r\n const handler = (e: globalThis.KeyboardEvent) => {\r\n const isMac = navigator.platform.toLowerCase().includes('mac');\r\n const cmd = isMac ? e.metaKey : e.ctrlKey;\r\n\r\n if (cmd && e.key.toLowerCase() === 'k') {\r\n e.preventDefault();\r\n setOpen((o) => !o);\r\n }\r\n };\r\n\r\n document.addEventListener('keydown', handler as EventListener);\r\n return () =>\r\n document.removeEventListener('keydown', handler as EventListener);\r\n }, []);\r\n\r\n /** Close on ESC */\r\n useEffect(() => {\r\n if (!open) return;\r\n\r\n const handler = (e: globalThis.KeyboardEvent) => {\r\n if (e.key === 'Escape') setOpen(false);\r\n };\r\n\r\n document.addEventListener('keydown', handler as EventListener);\r\n return () =>\r\n document.removeEventListener('keydown', handler as EventListener);\r\n }, [open]);\r\n\r\n /** Click outside to close */\r\n useEffect(() => {\r\n if (!open) return;\r\n return onClickOutside(paletteRef, () => setOpen(false));\r\n }, [open]);\r\n\r\n /** Autofocus search when opened */\r\n useEffect(() => {\r\n if (open) {\r\n setTimeout(() => inputRef.current?.focus(), 0);\r\n setQuery('');\r\n }\r\n }, [open]);\r\n\r\n /** Filtered list */\r\n const filteredSections = sections.map((sec) => ({\r\n ...sec,\r\n items: sec.items.filter((i) =>\r\n i.label.toLowerCase().includes(query.toLowerCase())\r\n ),\r\n }));\r\n\r\n /** Flatten for easier navigation */\r\n const flatList = filteredSections.flatMap((sec, sIdx) =>\r\n sec.items.map((_, iIdx) => ({ section: sIdx, index: iIdx }))\r\n );\r\n\r\n /** Handle keyboard navigation */\r\n const move = (dir: 1 | -1) => {\r\n if (flatList.length === 0) return;\r\n\r\n const currentIndex = flatList.findIndex(\r\n (x) => x.section === active.section && x.index === active.index\r\n );\r\n\r\n let next = currentIndex + dir;\r\n if (next < 0) next = flatList.length - 1;\r\n if (next >= flatList.length) next = 0;\r\n\r\n setActive(flatList[next]);\r\n };\r\n\r\n const handleKey = (e: ReactKeyboardEvent<HTMLDivElement>) => {\r\n const key = e.key;\r\n\r\n if (key === 'ArrowDown') {\r\n e.preventDefault();\r\n move(1);\r\n } else if (key === 'ArrowUp') {\r\n e.preventDefault();\r\n move(-1);\r\n } else if (key === 'Enter') {\r\n e.preventDefault();\r\n\r\n const sec = filteredSections[active.section];\r\n const item = sec?.items[active.index];\r\n\r\n if (item && item.onSelect) {\r\n item.onSelect();\r\n setOpen(false);\r\n }\r\n }\r\n };\r\n\r\n if (!open) return null;\r\n\r\n return (\r\n <Portal>\r\n <div className=\"ui-cmd-overlay\" />\r\n\r\n <div\r\n ref={paletteRef}\r\n className={`ui-cmd ${className}`}\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n onKeyDown={handleKey}\r\n >\r\n {/* Search bar */}\r\n <input\r\n ref={inputRef}\r\n className=\"ui-cmd-input\"\r\n placeholder={placeholder}\r\n value={query}\r\n onChange={(e) => setQuery(e.target.value)}\r\n />\r\n\r\n <div className=\"ui-cmd-list\">\r\n {filteredSections.map((sec, sIdx) => (\r\n <div key={sIdx} className=\"ui-cmd-section\">\r\n {sec.title && (\r\n <div className=\"ui-cmd-section-title\">{sec.title}</div>\r\n )}\r\n\r\n {sec.items.length === 0 ? (\r\n <div className=\"ui-cmd-empty\">No results</div>\r\n ) : (\r\n sec.items.map((item, iIdx) => {\r\n const isActive =\r\n active.section === sIdx && active.index === iIdx;\r\n\r\n return (\r\n <div\r\n key={item.id}\r\n className={`ui-cmd-item ${isActive ? 'active' : ''}`}\r\n onMouseEnter={() =>\r\n setActive({ section: sIdx, index: iIdx })\r\n }\r\n onClick={() => {\r\n item.onSelect?.();\r\n setOpen(false);\r\n }}\r\n >\r\n {item.icon && (\r\n <span className=\"ui-cmd-icon\">{item.icon}</span>\r\n )}\r\n\r\n <div className=\"ui-cmd-meta\">\r\n <div className=\"ui-cmd-label\">{item.label}</div>\r\n {item.description && (\r\n <div className=\"ui-cmd-description\">\r\n {item.description}\r\n </div>\r\n )}\r\n </div>\r\n\r\n {item.shortcut && (\r\n <span className=\"ui-cmd-shortcut\">{item.shortcut}</span>\r\n )}\r\n </div>\r\n );\r\n })\r\n )}\r\n </div>\r\n ))}\r\n </div>\r\n </div>\r\n </Portal>\r\n );\r\n}\r\n"],"names":["CommandPalette","sections","placeholder","className","open","setOpen","useState","query","setQuery","active","setActive","paletteRef","useRef","inputRef","useEffect","handler","e","o","onClickOutside","filteredSections","sec","i","flatList","sIdx","_","iIdx","move","dir","next","x","handleKey","key","item","Portal","jsx","jsxs","isActive"],"mappings":"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"}
@@ -0,0 +1,111 @@
1
+ import { jsxs as l, jsx as c } from "react/jsx-runtime";
2
+ import { useState as f, useRef as k, useEffect as d } from "react";
3
+ /* empty css */
4
+ import { onClickOutside as E } from "../../utils/onclickoutside/onClickOutside.js";
5
+ import { Portal as D } from "../../utils/portal/portal.js";
6
+ function R({
7
+ sections: x,
8
+ placeholder: L = "Search commands…",
9
+ className: g = ""
10
+ }) {
11
+ const [s, r] = f(!1), [p, v] = f(""), [o, h] = f({
12
+ section: 0,
13
+ index: 0
14
+ }), y = k(null), N = k(null);
15
+ d(() => {
16
+ const e = (t) => {
17
+ (navigator.platform.toLowerCase().includes("mac") ? t.metaKey : t.ctrlKey) && t.key.toLowerCase() === "k" && (t.preventDefault(), r((u) => !u));
18
+ };
19
+ return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
20
+ }, []), d(() => {
21
+ if (!s) return;
22
+ const e = (t) => {
23
+ t.key === "Escape" && r(!1);
24
+ };
25
+ return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
26
+ }, [s]), d(() => {
27
+ if (s)
28
+ return E(y, () => r(!1));
29
+ }, [s]), d(() => {
30
+ s && (setTimeout(() => N.current?.focus(), 0), v(""));
31
+ }, [s]);
32
+ const m = x.map((e) => ({
33
+ ...e,
34
+ items: e.items.filter(
35
+ (t) => t.label.toLowerCase().includes(p.toLowerCase())
36
+ )
37
+ })), a = m.flatMap(
38
+ (e, t) => e.items.map((n, i) => ({ section: t, index: i }))
39
+ ), w = (e) => {
40
+ if (a.length === 0) return;
41
+ let n = a.findIndex(
42
+ (i) => i.section === o.section && i.index === o.index
43
+ ) + e;
44
+ n < 0 && (n = a.length - 1), n >= a.length && (n = 0), h(a[n]);
45
+ }, C = (e) => {
46
+ const t = e.key;
47
+ if (t === "ArrowDown")
48
+ e.preventDefault(), w(1);
49
+ else if (t === "ArrowUp")
50
+ e.preventDefault(), w(-1);
51
+ else if (t === "Enter") {
52
+ e.preventDefault();
53
+ const i = m[o.section]?.items[o.index];
54
+ i && i.onSelect && (i.onSelect(), r(!1));
55
+ }
56
+ };
57
+ return s ? /* @__PURE__ */ l(D, { children: [
58
+ /* @__PURE__ */ c("div", { className: "ui-cmd-overlay" }),
59
+ /* @__PURE__ */ l(
60
+ "div",
61
+ {
62
+ ref: y,
63
+ className: `ui-cmd ${g}`,
64
+ role: "dialog",
65
+ "aria-modal": "true",
66
+ onKeyDown: C,
67
+ children: [
68
+ /* @__PURE__ */ c(
69
+ "input",
70
+ {
71
+ ref: N,
72
+ className: "ui-cmd-input",
73
+ placeholder: L,
74
+ value: p,
75
+ onChange: (e) => v(e.target.value)
76
+ }
77
+ ),
78
+ /* @__PURE__ */ c("div", { className: "ui-cmd-list", children: m.map((e, t) => /* @__PURE__ */ l("div", { className: "ui-cmd-section", children: [
79
+ e.title && /* @__PURE__ */ c("div", { className: "ui-cmd-section-title", children: e.title }),
80
+ e.items.length === 0 ? /* @__PURE__ */ c("div", { className: "ui-cmd-empty", children: "No results" }) : e.items.map((n, i) => {
81
+ const u = o.section === t && o.index === i;
82
+ return /* @__PURE__ */ l(
83
+ "div",
84
+ {
85
+ className: `ui-cmd-item ${u ? "active" : ""}`,
86
+ onMouseEnter: () => h({ section: t, index: i }),
87
+ onClick: () => {
88
+ n.onSelect?.(), r(!1);
89
+ },
90
+ children: [
91
+ n.icon && /* @__PURE__ */ c("span", { className: "ui-cmd-icon", children: n.icon }),
92
+ /* @__PURE__ */ l("div", { className: "ui-cmd-meta", children: [
93
+ /* @__PURE__ */ c("div", { className: "ui-cmd-label", children: n.label }),
94
+ n.description && /* @__PURE__ */ c("div", { className: "ui-cmd-description", children: n.description })
95
+ ] }),
96
+ n.shortcut && /* @__PURE__ */ c("span", { className: "ui-cmd-shortcut", children: n.shortcut })
97
+ ]
98
+ },
99
+ n.id
100
+ );
101
+ })
102
+ ] }, t)) })
103
+ ]
104
+ }
105
+ )
106
+ ] }) : null;
107
+ }
108
+ export {
109
+ R as CommandPalette
110
+ };
111
+ //# sourceMappingURL=CommandPalette.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CommandPalette.js","sources":["../../../../src/components/commandpalette/CommandPalette.tsx"],"sourcesContent":["/**\r\n * CommandPalette.tsx — FINAL VERSION\r\n * -----------------------------------\r\n * Full-featured Cmd+K command menu.\r\n * - Cmd+K / Ctrl+K global shortcut\r\n * - Search filter\r\n * - Keyboard navigation\r\n * - Portal + overlay\r\n * - Sections\r\n * - ARIA-compliant\r\n */\r\n\r\nimport {\r\n useEffect,\r\n useRef,\r\n useState,\r\n ReactNode,\r\n KeyboardEvent as ReactKeyboardEvent,\r\n} from 'react';\r\nimport './CommandPalette.css';\r\nimport { Portal, onClickOutside} from '../../utils/index';\r\n\r\nexport interface CommandItem {\r\n id: string;\r\n label: string;\r\n icon?: ReactNode;\r\n shortcut?: string;\r\n description?: string;\r\n onSelect?: () => void;\r\n}\r\n\r\nexport interface CommandSection {\r\n title?: string;\r\n items: CommandItem[];\r\n}\r\n\r\ninterface CommandPaletteProps {\r\n sections: CommandSection[];\r\n placeholder?: string;\r\n className?: string;\r\n}\r\n\r\nexport function CommandPalette({\r\n sections,\r\n placeholder = 'Search commands…',\r\n className = '',\r\n}: CommandPaletteProps) {\r\n const [open, setOpen] = useState(false);\r\n const [query, setQuery] = useState('');\r\n const [active, setActive] = useState<{ section: number; index: number }>({\r\n section: 0,\r\n index: 0,\r\n });\r\n\r\n const paletteRef = useRef<HTMLDivElement | null>(null);\r\n const inputRef = useRef<HTMLInputElement | null>(null);\r\n\r\n /** Global Cmd+K shortcut */\r\n useEffect(() => {\r\n const handler = (e: globalThis.KeyboardEvent) => {\r\n const isMac = navigator.platform.toLowerCase().includes('mac');\r\n const cmd = isMac ? e.metaKey : e.ctrlKey;\r\n\r\n if (cmd && e.key.toLowerCase() === 'k') {\r\n e.preventDefault();\r\n setOpen((o) => !o);\r\n }\r\n };\r\n\r\n document.addEventListener('keydown', handler as EventListener);\r\n return () =>\r\n document.removeEventListener('keydown', handler as EventListener);\r\n }, []);\r\n\r\n /** Close on ESC */\r\n useEffect(() => {\r\n if (!open) return;\r\n\r\n const handler = (e: globalThis.KeyboardEvent) => {\r\n if (e.key === 'Escape') setOpen(false);\r\n };\r\n\r\n document.addEventListener('keydown', handler as EventListener);\r\n return () =>\r\n document.removeEventListener('keydown', handler as EventListener);\r\n }, [open]);\r\n\r\n /** Click outside to close */\r\n useEffect(() => {\r\n if (!open) return;\r\n return onClickOutside(paletteRef, () => setOpen(false));\r\n }, [open]);\r\n\r\n /** Autofocus search when opened */\r\n useEffect(() => {\r\n if (open) {\r\n setTimeout(() => inputRef.current?.focus(), 0);\r\n setQuery('');\r\n }\r\n }, [open]);\r\n\r\n /** Filtered list */\r\n const filteredSections = sections.map((sec) => ({\r\n ...sec,\r\n items: sec.items.filter((i) =>\r\n i.label.toLowerCase().includes(query.toLowerCase())\r\n ),\r\n }));\r\n\r\n /** Flatten for easier navigation */\r\n const flatList = filteredSections.flatMap((sec, sIdx) =>\r\n sec.items.map((_, iIdx) => ({ section: sIdx, index: iIdx }))\r\n );\r\n\r\n /** Handle keyboard navigation */\r\n const move = (dir: 1 | -1) => {\r\n if (flatList.length === 0) return;\r\n\r\n const currentIndex = flatList.findIndex(\r\n (x) => x.section === active.section && x.index === active.index\r\n );\r\n\r\n let next = currentIndex + dir;\r\n if (next < 0) next = flatList.length - 1;\r\n if (next >= flatList.length) next = 0;\r\n\r\n setActive(flatList[next]);\r\n };\r\n\r\n const handleKey = (e: ReactKeyboardEvent<HTMLDivElement>) => {\r\n const key = e.key;\r\n\r\n if (key === 'ArrowDown') {\r\n e.preventDefault();\r\n move(1);\r\n } else if (key === 'ArrowUp') {\r\n e.preventDefault();\r\n move(-1);\r\n } else if (key === 'Enter') {\r\n e.preventDefault();\r\n\r\n const sec = filteredSections[active.section];\r\n const item = sec?.items[active.index];\r\n\r\n if (item && item.onSelect) {\r\n item.onSelect();\r\n setOpen(false);\r\n }\r\n }\r\n };\r\n\r\n if (!open) return null;\r\n\r\n return (\r\n <Portal>\r\n <div className=\"ui-cmd-overlay\" />\r\n\r\n <div\r\n ref={paletteRef}\r\n className={`ui-cmd ${className}`}\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n onKeyDown={handleKey}\r\n >\r\n {/* Search bar */}\r\n <input\r\n ref={inputRef}\r\n className=\"ui-cmd-input\"\r\n placeholder={placeholder}\r\n value={query}\r\n onChange={(e) => setQuery(e.target.value)}\r\n />\r\n\r\n <div className=\"ui-cmd-list\">\r\n {filteredSections.map((sec, sIdx) => (\r\n <div key={sIdx} className=\"ui-cmd-section\">\r\n {sec.title && (\r\n <div className=\"ui-cmd-section-title\">{sec.title}</div>\r\n )}\r\n\r\n {sec.items.length === 0 ? (\r\n <div className=\"ui-cmd-empty\">No results</div>\r\n ) : (\r\n sec.items.map((item, iIdx) => {\r\n const isActive =\r\n active.section === sIdx && active.index === iIdx;\r\n\r\n return (\r\n <div\r\n key={item.id}\r\n className={`ui-cmd-item ${isActive ? 'active' : ''}`}\r\n onMouseEnter={() =>\r\n setActive({ section: sIdx, index: iIdx })\r\n }\r\n onClick={() => {\r\n item.onSelect?.();\r\n setOpen(false);\r\n }}\r\n >\r\n {item.icon && (\r\n <span className=\"ui-cmd-icon\">{item.icon}</span>\r\n )}\r\n\r\n <div className=\"ui-cmd-meta\">\r\n <div className=\"ui-cmd-label\">{item.label}</div>\r\n {item.description && (\r\n <div className=\"ui-cmd-description\">\r\n {item.description}\r\n </div>\r\n )}\r\n </div>\r\n\r\n {item.shortcut && (\r\n <span className=\"ui-cmd-shortcut\">{item.shortcut}</span>\r\n )}\r\n </div>\r\n );\r\n })\r\n )}\r\n </div>\r\n ))}\r\n </div>\r\n </div>\r\n </Portal>\r\n );\r\n}\r\n"],"names":["CommandPalette","sections","placeholder","className","open","setOpen","useState","query","setQuery","active","setActive","paletteRef","useRef","inputRef","useEffect","handler","e","o","onClickOutside","filteredSections","sec","i","flatList","sIdx","_","iIdx","move","dir","next","x","handleKey","key","item","Portal","jsx","jsxs","isActive"],"mappings":"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"}
@@ -0,0 +1,2 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),o=require("react");;/* empty css */const E=require("../../utils/onclickoutside/onClickOutside.cjs"),g=require("../../utils/portal/portal.cjs");function w({trigger:x,items:r,className:v=""}){const[l,a]=o.useState(!1),[c,b]=o.useState(null),d=o.useRef(null),[u,i]=o.useState(0),h=e=>{e.preventDefault(),b({top:e.clientY,left:e.clientX}),a(!0),i(f())},f=()=>r.findIndex(e=>e.type!=="separator"&&!e.disabled),y=()=>{for(let e=r.length-1;e>=0;e--){const n=r[e];if(n.type!=="separator"&&!n.disabled)return e}return 0},p=e=>{let n=u;for(;;){n=n+e,n<0&&(n=r.length-1),n>=r.length&&(n=0);const t=r[n];if(t.type!=="separator"&&!t.disabled){i(n);break}}},j=e=>{const{key:n}=e;if(n==="ArrowDown")e.preventDefault(),p(1);else if(n==="ArrowUp")e.preventDefault(),p(-1);else if(n==="Home")e.preventDefault(),i(f());else if(n==="End")e.preventDefault(),i(y());else if(n==="Enter"||n===" "){e.preventDefault();const t=r[u];t&&!t.disabled&&t.onSelect&&(t.onSelect(),a(!1))}};return o.useEffect(()=>{if(!l)return;const e=n=>{n.key==="Escape"&&a(!1)};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[l]),o.useEffect(()=>{if(l)return E.onClickOutside(d,()=>a(!1))},[l]),s.jsxs("div",{className:"ui-contextmenu-wrapper",children:[s.jsx("div",{onContextMenu:h,children:x}),l&&c&&s.jsx(g.Portal,{children:s.jsx("div",{ref:d,className:`ui-contextmenu ${v}`,role:"menu",tabIndex:-1,style:{top:c.top,left:c.left,position:"fixed"},onKeyDown:j,children:r.map((e,n)=>{if(e.type==="separator")return s.jsx("div",{className:"ui-contextmenu-separator"},n);const t=n===u;return s.jsxs("div",{className:["ui-contextmenu-item",e.disabled?"disabled":"",e.danger?"danger":"",t?"active":""].filter(Boolean).join(" "),role:"menuitem",tabIndex:-1,"aria-disabled":e.disabled||void 0,onMouseEnter:()=>i(n),onClick:()=>{e.disabled||(e.onSelect?.(),a(!1))},children:[e.icon&&s.jsx("span",{className:"ui-contextmenu-icon",children:e.icon}),s.jsx("span",{children:e.label})]},n)})})})]})}exports.ContextMenu=w;
2
+ //# sourceMappingURL=ContextMenu.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ContextMenu.cjs","sources":["../../../../src/components/contextmenu/ContextMenu.tsx"],"sourcesContent":["/**\r\n * ContextMenu.tsx — FINAL VERSION\r\n * --------------------------------\r\n * Features:\r\n * - Right-click (contextmenu)\r\n * - Arrow key navigation\r\n * - Roving tabIndex\r\n * - ESC + click outside to close\r\n * - Portal rendering\r\n * - Separators + icons + danger items\r\n */\r\n/**\r\n * ContextMenu.tsx — FINAL CLEAN VERSION\r\n * --------------------------------------\r\n * Features:\r\n * - Right-click context menu\r\n * - Keyboard navigation (ArrowUp/Down, Home, End, Enter)\r\n * - ESC + click outside to close\r\n * - Roving active index\r\n * - Portal rendering\r\n * - Separators + icons + danger/disabled\r\n * - 100% TypeScript safe\r\n */\r\n\r\nimport React, {\r\n useEffect,\r\n useRef,\r\n useState,\r\n ReactNode,\r\n KeyboardEvent as ReactKeyboardEvent,\r\n} from 'react';\r\nimport './ContextMenu.css';\r\nimport { Portal, onClickOutside } from '../../utils/index';\r\n\r\nexport interface MenuItem {\r\n label?: string;\r\n icon?: ReactNode;\r\n onSelect?: () => void;\r\n danger?: boolean;\r\n disabled?: boolean;\r\n type?: 'item' | 'separator';\r\n}\r\n\r\ninterface ContextMenuProps {\r\n trigger: ReactNode;\r\n items: MenuItem[];\r\n className?: string;\r\n}\r\n\r\nexport function ContextMenu({\r\n trigger,\r\n items,\r\n className = '',\r\n}: ContextMenuProps) {\r\n const [open, setOpen] = useState(false);\r\n const [pos, setPos] = useState<{ top: number; left: number } | null>(null);\r\n\r\n const menuRef = useRef<HTMLDivElement | null>(null);\r\n\r\n // active index for keyboard navigation\r\n const [activeIndex, setActiveIndex] = useState<number>(0);\r\n\r\n const handleContext = (e: React.MouseEvent) => {\r\n e.preventDefault();\r\n setPos({ top: e.clientY, left: e.clientX });\r\n setOpen(true);\r\n setActiveIndex(getFirstEnabledIndex());\r\n };\r\n\r\n /** Returns index of first enabled, non-separator item */\r\n const getFirstEnabledIndex = () => {\r\n return items.findIndex((i) => i.type !== 'separator' && !i.disabled);\r\n };\r\n\r\n /** Returns index of last enabled, non-separator item */\r\n const getLastEnabledIndex = () => {\r\n for (let i = items.length - 1; i >= 0; i--) {\r\n const it = items[i];\r\n if (it.type !== 'separator' && !it.disabled) return i;\r\n }\r\n return 0;\r\n };\r\n\r\n /** Move selection up/down */\r\n const move = (direction: 1 | -1) => {\r\n let idx = activeIndex;\r\n\r\n while (true) {\r\n idx = idx + direction;\r\n\r\n if (idx < 0) idx = items.length - 1;\r\n if (idx >= items.length) idx = 0;\r\n\r\n const it = items[idx];\r\n if (it.type !== 'separator' && !it.disabled) {\r\n setActiveIndex(idx);\r\n break;\r\n }\r\n }\r\n };\r\n\r\n /** Keyboard events inside menu */\r\n const handleKeyDown = (e: ReactKeyboardEvent<HTMLDivElement>) => {\r\n const { key } = e;\r\n\r\n if (key === 'ArrowDown') {\r\n e.preventDefault();\r\n move(1);\r\n } else if (key === 'ArrowUp') {\r\n e.preventDefault();\r\n move(-1);\r\n } else if (key === 'Home') {\r\n e.preventDefault();\r\n setActiveIndex(getFirstEnabledIndex());\r\n } else if (key === 'End') {\r\n e.preventDefault();\r\n setActiveIndex(getLastEnabledIndex());\r\n } else if (key === 'Enter' || key === ' ') {\r\n e.preventDefault();\r\n const it = items[activeIndex];\r\n if (it && !it.disabled && it.onSelect) {\r\n it.onSelect();\r\n setOpen(false);\r\n }\r\n }\r\n };\r\n\r\n /** ESC close – FIXED TYPE (no TS errors) */\r\n useEffect(() => {\r\n if (!open) return;\r\n\r\n const handler = (e: globalThis.KeyboardEvent) => {\r\n if (e.key === 'Escape') setOpen(false);\r\n };\r\n\r\n document.addEventListener('keydown', handler as EventListener);\r\n return () =>\r\n document.removeEventListener('keydown', handler as EventListener);\r\n }, [open]);\r\n\r\n /** Click outside to close */\r\n useEffect(() => {\r\n if (!open) return;\r\n return onClickOutside(menuRef, () => setOpen(false));\r\n }, [open]);\r\n\r\n return (\r\n <div className=\"ui-contextmenu-wrapper\">\r\n <div onContextMenu={handleContext}>{trigger}</div>\r\n\r\n {open && pos && (\r\n <Portal>\r\n <div\r\n ref={menuRef}\r\n className={`ui-contextmenu ${className}`}\r\n role=\"menu\"\r\n tabIndex={-1}\r\n style={{\r\n top: pos.top,\r\n left: pos.left,\r\n position: 'fixed',\r\n }}\r\n onKeyDown={handleKeyDown}\r\n >\r\n {items.map((item, idx) => {\r\n if (item.type === 'separator') {\r\n return <div key={idx} className=\"ui-contextmenu-separator\" />;\r\n }\r\n\r\n const isActive = idx === activeIndex;\r\n\r\n return (\r\n <div\r\n key={idx}\r\n className={[\r\n 'ui-contextmenu-item',\r\n item.disabled ? 'disabled' : '',\r\n item.danger ? 'danger' : '',\r\n isActive ? 'active' : '',\r\n ]\r\n .filter(Boolean)\r\n .join(' ')}\r\n role=\"menuitem\"\r\n tabIndex={-1}\r\n aria-disabled={item.disabled || undefined}\r\n onMouseEnter={() => setActiveIndex(idx)}\r\n onClick={() => {\r\n if (!item.disabled) {\r\n item.onSelect?.();\r\n setOpen(false);\r\n }\r\n }}\r\n >\r\n {item.icon && (\r\n <span className=\"ui-contextmenu-icon\">{item.icon}</span>\r\n )}\r\n <span>{item.label}</span>\r\n </div>\r\n );\r\n })}\r\n </div>\r\n </Portal>\r\n )}\r\n </div>\r\n );\r\n}\r\n"],"names":["ContextMenu","trigger","items","className","open","setOpen","useState","pos","setPos","menuRef","useRef","activeIndex","setActiveIndex","handleContext","getFirstEnabledIndex","i","getLastEnabledIndex","it","move","direction","idx","handleKeyDown","key","useEffect","handler","e","onClickOutside","jsxs","jsx","Portal","item","isActive"],"mappings":"qRAiDO,SAASA,EAAY,CAC1B,QAAAC,EACA,MAAAC,EACA,UAAAC,EAAY,EACd,EAAqB,CACnB,KAAM,CAACC,EAAMC,CAAO,EAAIC,EAAAA,SAAS,EAAK,EAChC,CAACC,EAAKC,CAAM,EAAIF,EAAAA,SAA+C,IAAI,EAEnEG,EAAUC,EAAAA,OAA8B,IAAI,EAG5C,CAACC,EAAaC,CAAc,EAAIN,EAAAA,SAAiB,CAAC,EAElDO,EAAiB,GAAwB,CAC7C,EAAE,eAAA,EACFL,EAAO,CAAE,IAAK,EAAE,QAAS,KAAM,EAAE,QAAS,EAC1CH,EAAQ,EAAI,EACZO,EAAeE,GAAsB,CACvC,EAGMA,EAAuB,IACpBZ,EAAM,UAAWa,GAAMA,EAAE,OAAS,aAAe,CAACA,EAAE,QAAQ,EAI/DC,EAAsB,IAAM,CAChC,QAASD,EAAIb,EAAM,OAAS,EAAGa,GAAK,EAAGA,IAAK,CAC1C,MAAME,EAAKf,EAAMa,CAAC,EAClB,GAAIE,EAAG,OAAS,aAAe,CAACA,EAAG,SAAU,OAAOF,CACtD,CACA,MAAO,EACT,EAGMG,EAAQC,GAAsB,CAClC,IAAIC,EAAMT,EAEV,OAAa,CACXS,EAAMA,EAAMD,EAERC,EAAM,IAAGA,EAAMlB,EAAM,OAAS,GAC9BkB,GAAOlB,EAAM,SAAQkB,EAAM,GAE/B,MAAMH,EAAKf,EAAMkB,CAAG,EACpB,GAAIH,EAAG,OAAS,aAAe,CAACA,EAAG,SAAU,CAC3CL,EAAeQ,CAAG,EAClB,KACF,CACF,CACF,EAGMC,EAAiB,GAA0C,CAC/D,KAAM,CAAE,IAAAC,GAAQ,EAEhB,GAAIA,IAAQ,YACV,EAAE,eAAA,EACFJ,EAAK,CAAC,UACGI,IAAQ,UACjB,EAAE,eAAA,EACFJ,EAAK,EAAE,UACEI,IAAQ,OACjB,EAAE,eAAA,EACFV,EAAeE,GAAsB,UAC5BQ,IAAQ,MACjB,EAAE,eAAA,EACFV,EAAeI,GAAqB,UAC3BM,IAAQ,SAAWA,IAAQ,IAAK,CACzC,EAAE,eAAA,EACF,MAAML,EAAKf,EAAMS,CAAW,EACxBM,GAAM,CAACA,EAAG,UAAYA,EAAG,WAC3BA,EAAG,SAAA,EACHZ,EAAQ,EAAK,EAEjB,CACF,EAGAkB,OAAAA,EAAAA,UAAU,IAAM,CACd,GAAI,CAACnB,EAAM,OAEX,MAAMoB,EAAWC,GAAgC,CAC3CA,EAAE,MAAQ,UAAUpB,EAAQ,EAAK,CACvC,EAEA,gBAAS,iBAAiB,UAAWmB,CAAwB,EACtD,IACL,SAAS,oBAAoB,UAAWA,CAAwB,CACpE,EAAG,CAACpB,CAAI,CAAC,EAGTmB,EAAAA,UAAU,IAAM,CACd,GAAKnB,EACL,OAAOsB,EAAAA,eAAejB,EAAS,IAAMJ,EAAQ,EAAK,CAAC,CACrD,EAAG,CAACD,CAAI,CAAC,EAGPuB,EAAAA,KAAC,MAAA,CAAI,UAAU,yBACb,SAAA,CAAAC,EAAAA,IAAC,MAAA,CAAI,cAAef,EAAgB,SAAAZ,EAAQ,EAE3CG,GAAQG,GACPqB,EAAAA,IAACC,EAAAA,OAAA,CACC,SAAAD,EAAAA,IAAC,MAAA,CACC,IAAKnB,EACL,UAAW,kBAAkBN,CAAS,GACtC,KAAK,OACL,SAAU,GACV,MAAO,CACL,IAAKI,EAAI,IACT,KAAMA,EAAI,KACV,SAAU,OAAA,EAEZ,UAAWc,EAEV,SAAAnB,EAAM,IAAI,CAAC4B,EAAMV,IAAQ,CACxB,GAAIU,EAAK,OAAS,YAChB,OAAOF,EAAAA,IAAC,MAAA,CAAc,UAAU,0BAAA,EAAfR,CAA0C,EAG7D,MAAMW,EAAWX,IAAQT,EAEzB,OACEgB,EAAAA,KAAC,MAAA,CAEC,UAAW,CACT,sBACAG,EAAK,SAAW,WAAa,GAC7BA,EAAK,OAAS,SAAW,GACzBC,EAAW,SAAW,EAAA,EAErB,OAAO,OAAO,EACd,KAAK,GAAG,EACX,KAAK,WACL,SAAU,GACV,gBAAeD,EAAK,UAAY,OAChC,aAAc,IAAMlB,EAAeQ,CAAG,EACtC,QAAS,IAAM,CACRU,EAAK,WACRA,EAAK,WAAA,EACLzB,EAAQ,EAAK,EAEjB,EAEC,SAAA,CAAAyB,EAAK,MACJF,EAAAA,IAAC,OAAA,CAAK,UAAU,sBAAuB,WAAK,KAAK,EAEnDA,EAAAA,IAAC,OAAA,CAAM,SAAAE,EAAK,KAAA,CAAM,CAAA,CAAA,EAvBbV,CAAA,CA0BX,CAAC,CAAA,CAAA,CACH,CACF,CAAA,EAEJ,CAEJ"}