@g4rcez/components 4.0.2 → 4.1.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 (384) hide show
  1. package/ai/SKILL.md +120 -153
  2. package/ai/docs/Alert.md +47 -48
  3. package/ai/docs/AnimatedList.md +88 -87
  4. package/ai/docs/Autocomplete.md +102 -106
  5. package/ai/docs/Button.md +33 -33
  6. package/ai/docs/Calendar.md +67 -101
  7. package/ai/docs/Card.md +59 -55
  8. package/ai/docs/Checkbox.md +77 -82
  9. package/ai/docs/CommandPalette.md +154 -172
  10. package/ai/docs/DatePicker.md +45 -64
  11. package/ai/docs/Dropdown.md +98 -126
  12. package/ai/docs/Empty.md +41 -44
  13. package/ai/docs/Expand.md +40 -54
  14. package/ai/docs/FileUpload.md +102 -109
  15. package/ai/docs/Form.md +35 -29
  16. package/ai/docs/FormReset.md +37 -37
  17. package/ai/docs/Heading.md +4 -6
  18. package/ai/docs/Input.md +73 -98
  19. package/ai/docs/InputField.md +67 -67
  20. package/ai/docs/List.md +88 -85
  21. package/ai/docs/Menu.md +62 -60
  22. package/ai/docs/Modal.md +129 -136
  23. package/ai/docs/MultiSelect.md +65 -84
  24. package/ai/docs/Notifications.md +96 -96
  25. package/ai/docs/PageCalendar.md +88 -97
  26. package/ai/docs/Polymorph.md +25 -41
  27. package/ai/docs/Progress.md +55 -51
  28. package/ai/docs/Radiobox.md +49 -41
  29. package/ai/docs/RenderOnView.md +26 -32
  30. package/ai/docs/Resizable.md +60 -65
  31. package/ai/docs/Select.md +158 -158
  32. package/ai/docs/Shortcut.md +14 -14
  33. package/ai/docs/Skeleton.md +56 -60
  34. package/ai/docs/Slider.md +26 -49
  35. package/ai/docs/Slot.md +15 -17
  36. package/ai/docs/Spinner.md +17 -15
  37. package/ai/docs/Stats.md +44 -42
  38. package/ai/docs/Step.md +60 -60
  39. package/ai/docs/Switch.md +44 -54
  40. package/ai/docs/Table.md +124 -136
  41. package/ai/docs/Tabs.md +90 -90
  42. package/ai/docs/Tag.md +63 -65
  43. package/ai/docs/TaskList.md +40 -50
  44. package/ai/docs/Textarea.md +47 -70
  45. package/ai/docs/Timeline.md +98 -96
  46. package/ai/docs/Toolbar.md +46 -46
  47. package/ai/docs/Tooltip.md +103 -103
  48. package/ai/docs/Typography.md +55 -55
  49. package/ai/docs/Wizard.md +104 -109
  50. package/ai/docs/index.md +116 -116
  51. package/dist/autocomplete-DcTNOwyg.js +393 -0
  52. package/dist/autocomplete-DcTNOwyg.js.map +1 -0
  53. package/dist/{calendar-B5lSd0ID.js → calendar-BJMHRoy2.js} +104 -105
  54. package/dist/calendar-BJMHRoy2.js.map +1 -0
  55. package/dist/components/core/button.js +10 -10
  56. package/dist/components/core/button.js.map +1 -1
  57. package/dist/components/core/tag.js +4 -4
  58. package/dist/components/core/tag.js.map +1 -1
  59. package/dist/components/display/alert.js +48 -46
  60. package/dist/components/display/alert.js.map +1 -1
  61. package/dist/components/display/calendar.js +6 -6
  62. package/dist/components/display/card.js +2 -2
  63. package/dist/components/display/card.js.map +1 -1
  64. package/dist/components/display/list.js +1 -1
  65. package/dist/components/display/list.js.map +1 -1
  66. package/dist/components/display/notifications.js +3 -3
  67. package/dist/components/display/stats.js +1 -1
  68. package/dist/components/display/tabs.js +2 -2
  69. package/dist/components/display/timeline.js +1 -1
  70. package/dist/components/floating/dropdown.js +25 -17
  71. package/dist/components/floating/dropdown.js.map +1 -1
  72. package/dist/components/floating/expand.js +7 -7
  73. package/dist/components/floating/expand.js.map +1 -1
  74. package/dist/components/floating/menu.js +10 -10
  75. package/dist/components/floating/menu.js.map +1 -1
  76. package/dist/components/floating/modal.js +106 -102
  77. package/dist/components/floating/modal.js.map +1 -1
  78. package/dist/components/floating/tooltip.js +14 -14
  79. package/dist/components/floating/tooltip.js.map +1 -1
  80. package/dist/components/form/autocomplete.js +6 -6
  81. package/dist/components/form/checkbox.js +1 -1
  82. package/dist/components/form/date-picker.js +5 -5
  83. package/dist/components/form/file-upload.js +2 -2
  84. package/dist/components/form/form.js.map +1 -1
  85. package/dist/components/form/input.js +1 -1
  86. package/dist/components/form/radiobox.js +1 -1
  87. package/dist/components/form/select.js +3 -3
  88. package/dist/components/form/switch.js +2 -2
  89. package/dist/components/form/switch.js.map +1 -1
  90. package/dist/components/table/table.js +3 -3
  91. package/dist/{date-picker-DwNo22lx.js → date-picker-Bnl07nd8.js} +8 -6
  92. package/dist/date-picker-Bnl07nd8.js.map +1 -0
  93. package/dist/{dom-Dl8XH0CK.js → dom-CyQHY7ID.js} +66 -61
  94. package/dist/dom-CyQHY7ID.js.map +1 -0
  95. package/dist/{file-upload-Brf2NkLr.js → file-upload-93d5DR4q.js} +139 -129
  96. package/dist/file-upload-93d5DR4q.js.map +1 -0
  97. package/dist/{floating-ui.react-QNHG9W4N.js → floating-ui.react-M2PGXLDp.js} +8 -8
  98. package/dist/floating-ui.react-M2PGXLDp.js.map +1 -0
  99. package/dist/{fns-D2eyJKd5.js → fns-C7Dt27Qd.js} +2 -2
  100. package/dist/fns-C7Dt27Qd.js.map +1 -0
  101. package/dist/index-BJ1ayTam.js +126 -0
  102. package/dist/index-BJ1ayTam.js.map +1 -0
  103. package/dist/index-C-PuFUZi.js.map +1 -1
  104. package/dist/{index-BelDtX5M.js → index-DDeQW0JW.js} +399 -404
  105. package/dist/index-DDeQW0JW.js.map +1 -0
  106. package/dist/index-DE4shK8D.js +215 -0
  107. package/dist/index-DE4shK8D.js.map +1 -0
  108. package/dist/{index-DJSMaZR4.js → index-DlJ_2RBL.js} +2 -2
  109. package/dist/index-DlJ_2RBL.js.map +1 -0
  110. package/dist/index.css +1 -1
  111. package/dist/index.esm-BaIwleSE.js.map +1 -1
  112. package/dist/index.js +2810 -2756
  113. package/dist/index.js.map +1 -1
  114. package/dist/{input-CrGrSnUt.js → input-_MVxmIpu.js} +116 -114
  115. package/dist/input-_MVxmIpu.js.map +1 -0
  116. package/dist/{input-field-5vYcz5tT.js → input-field-CDCOODOl.js} +63 -47
  117. package/dist/input-field-CDCOODOl.js.map +1 -0
  118. package/dist/notifications-Dp0ydKJS.js +2576 -0
  119. package/dist/notifications-Dp0ydKJS.js.map +1 -0
  120. package/dist/polymorph-B5n9fs_K.js.map +1 -1
  121. package/dist/preset/plugin.tailwind.d.ts.map +1 -1
  122. package/dist/preset/plugin.tailwind.js +20 -18
  123. package/dist/preset/preset.tailwind.js +24 -25
  124. package/dist/preset/src/styles/common.js +6 -3
  125. package/dist/preset/src/styles/dark.d.ts.map +1 -1
  126. package/dist/preset/src/styles/dark.js +9 -5
  127. package/dist/preset/src/styles/design-tokens.js +68 -89
  128. package/dist/preset/src/styles/light.d.ts.map +1 -1
  129. package/dist/preset/src/styles/light.js +9 -5
  130. package/dist/preset/src/styles/theme.js +7 -4
  131. package/dist/preset/src/styles/theme.types.d.ts +2 -1
  132. package/dist/preset/src/styles/theme.types.d.ts.map +1 -1
  133. package/dist/preset/src/styles/theme.types.js +2 -1
  134. package/dist/skeleton-BjJobYYf.js +24 -0
  135. package/dist/skeleton-BjJobYYf.js.map +1 -0
  136. package/dist/slot-CRyweuj0.js.map +1 -1
  137. package/dist/styles/common.js +6 -3
  138. package/dist/styles/dark.d.ts.map +1 -1
  139. package/dist/styles/dark.js +9 -5
  140. package/dist/styles/design-tokens.js +68 -89
  141. package/dist/styles/light.d.ts.map +1 -1
  142. package/dist/styles/light.js +9 -5
  143. package/dist/styles/theme.js +7 -4
  144. package/dist/styles/theme.types.d.ts +2 -1
  145. package/dist/styles/theme.types.d.ts.map +1 -1
  146. package/dist/styles/theme.types.js +2 -1
  147. package/dist/tabs-B0g7YtQv.js +123 -0
  148. package/dist/tabs-B0g7YtQv.js.map +1 -0
  149. package/dist/tsconfig.lib.tsbuildinfo +1 -0
  150. package/dist/{context-BFXNJVn2.js → use-translations-DSltA7H_.js} +38 -30
  151. package/dist/use-translations-DSltA7H_.js.map +1 -0
  152. package/package.json +99 -86
  153. package/ai/docs/TransferList.md +0 -142
  154. package/dist/autocomplete-Cn9Z2hLq.js +0 -375
  155. package/dist/autocomplete-Cn9Z2hLq.js.map +0 -1
  156. package/dist/calendar-B5lSd0ID.js.map +0 -1
  157. package/dist/components/core/button.d.ts +0 -77
  158. package/dist/components/core/button.d.ts.map +0 -1
  159. package/dist/components/core/heading.d.ts +0 -3
  160. package/dist/components/core/heading.d.ts.map +0 -1
  161. package/dist/components/core/polymorph.d.ts +0 -10
  162. package/dist/components/core/polymorph.d.ts.map +0 -1
  163. package/dist/components/core/render-on-view.d.ts +0 -7
  164. package/dist/components/core/render-on-view.d.ts.map +0 -1
  165. package/dist/components/core/resizable.d.ts +0 -3
  166. package/dist/components/core/resizable.d.ts.map +0 -1
  167. package/dist/components/core/slot.d.ts +0 -16
  168. package/dist/components/core/slot.d.ts.map +0 -1
  169. package/dist/components/core/tag.d.ts +0 -35
  170. package/dist/components/core/tag.d.ts.map +0 -1
  171. package/dist/components/core/typography.d.ts +0 -25
  172. package/dist/components/core/typography.d.ts.map +0 -1
  173. package/dist/components/display/alert.d.ts +0 -28
  174. package/dist/components/display/alert.d.ts.map +0 -1
  175. package/dist/components/display/calendar.d.ts +0 -42
  176. package/dist/components/display/calendar.d.ts.map +0 -1
  177. package/dist/components/display/card.d.ts +0 -29
  178. package/dist/components/display/card.d.ts.map +0 -1
  179. package/dist/components/display/empty.d.ts +0 -8
  180. package/dist/components/display/empty.d.ts.map +0 -1
  181. package/dist/components/display/list.d.ts +0 -16
  182. package/dist/components/display/list.d.ts.map +0 -1
  183. package/dist/components/display/notifications.d.ts +0 -27
  184. package/dist/components/display/notifications.d.ts.map +0 -1
  185. package/dist/components/display/progress.d.ts +0 -13
  186. package/dist/components/display/progress.d.ts.map +0 -1
  187. package/dist/components/display/shortcut.d.ts +0 -4
  188. package/dist/components/display/shortcut.d.ts.map +0 -1
  189. package/dist/components/display/skeleton.d.ts +0 -12
  190. package/dist/components/display/skeleton.d.ts.map +0 -1
  191. package/dist/components/display/spinner.d.ts +0 -5
  192. package/dist/components/display/spinner.d.ts.map +0 -1
  193. package/dist/components/display/stats.d.ts +0 -12
  194. package/dist/components/display/stats.d.ts.map +0 -1
  195. package/dist/components/display/step.d.ts +0 -24
  196. package/dist/components/display/step.d.ts.map +0 -1
  197. package/dist/components/display/tabs.d.ts +0 -24
  198. package/dist/components/display/tabs.d.ts.map +0 -1
  199. package/dist/components/display/timeline.d.ts +0 -10
  200. package/dist/components/display/timeline.d.ts.map +0 -1
  201. package/dist/components/floating/command-palette.d.ts +0 -49
  202. package/dist/components/floating/command-palette.d.ts.map +0 -1
  203. package/dist/components/floating/dropdown.d.ts +0 -15
  204. package/dist/components/floating/dropdown.d.ts.map +0 -1
  205. package/dist/components/floating/expand.d.ts +0 -11
  206. package/dist/components/floating/expand.d.ts.map +0 -1
  207. package/dist/components/floating/menu.d.ts +0 -52
  208. package/dist/components/floating/menu.d.ts.map +0 -1
  209. package/dist/components/floating/modal.d.ts +0 -60
  210. package/dist/components/floating/modal.d.ts.map +0 -1
  211. package/dist/components/floating/toolbar.d.ts +0 -6
  212. package/dist/components/floating/toolbar.d.ts.map +0 -1
  213. package/dist/components/floating/tooltip.d.ts +0 -17
  214. package/dist/components/floating/tooltip.d.ts.map +0 -1
  215. package/dist/components/floating/wizard.d.ts +0 -26
  216. package/dist/components/floating/wizard.d.ts.map +0 -1
  217. package/dist/components/form/autocomplete.d.ts +0 -16
  218. package/dist/components/form/autocomplete.d.ts.map +0 -1
  219. package/dist/components/form/checkbox.d.ts +0 -12
  220. package/dist/components/form/checkbox.d.ts.map +0 -1
  221. package/dist/components/form/date-picker.d.ts +0 -10
  222. package/dist/components/form/date-picker.d.ts.map +0 -1
  223. package/dist/components/form/file-upload.d.ts +0 -15
  224. package/dist/components/form/file-upload.d.ts.map +0 -1
  225. package/dist/components/form/form.d.ts +0 -3
  226. package/dist/components/form/form.d.ts.map +0 -1
  227. package/dist/components/form/formReset.d.ts +0 -2
  228. package/dist/components/form/formReset.d.ts.map +0 -1
  229. package/dist/components/form/free-text.d.ts +0 -11
  230. package/dist/components/form/free-text.d.ts.map +0 -1
  231. package/dist/components/form/input-field.d.ts +0 -34
  232. package/dist/components/form/input-field.d.ts.map +0 -1
  233. package/dist/components/form/input.d.ts +0 -52
  234. package/dist/components/form/input.d.ts.map +0 -1
  235. package/dist/components/form/multi-select.d.ts +0 -19
  236. package/dist/components/form/multi-select.d.ts.map +0 -1
  237. package/dist/components/form/radiobox.d.ts +0 -7
  238. package/dist/components/form/radiobox.d.ts.map +0 -1
  239. package/dist/components/form/select.d.ts +0 -13
  240. package/dist/components/form/select.d.ts.map +0 -1
  241. package/dist/components/form/slider.d.ts +0 -7
  242. package/dist/components/form/slider.d.ts.map +0 -1
  243. package/dist/components/form/switch.d.ts +0 -9
  244. package/dist/components/form/switch.d.ts.map +0 -1
  245. package/dist/components/form/task-list.d.ts +0 -3
  246. package/dist/components/form/task-list.d.ts.map +0 -1
  247. package/dist/components/form/textarea.d.ts +0 -6
  248. package/dist/components/form/textarea.d.ts.map +0 -1
  249. package/dist/components/form/transfer-list.d.ts +0 -14
  250. package/dist/components/form/transfer-list.d.ts.map +0 -1
  251. package/dist/components/form/transfer-list.js +0 -55
  252. package/dist/components/form/transfer-list.js.map +0 -1
  253. package/dist/components/index.d.ts +0 -46
  254. package/dist/components/index.d.ts.map +0 -1
  255. package/dist/components/page-calendar/calendar-header.d.ts +0 -16
  256. package/dist/components/page-calendar/calendar-header.d.ts.map +0 -1
  257. package/dist/components/page-calendar/day-view.d.ts +0 -12
  258. package/dist/components/page-calendar/day-view.d.ts.map +0 -1
  259. package/dist/components/page-calendar/event-pill.d.ts +0 -9
  260. package/dist/components/page-calendar/event-pill.d.ts.map +0 -1
  261. package/dist/components/page-calendar/index.d.ts +0 -4
  262. package/dist/components/page-calendar/index.d.ts.map +0 -1
  263. package/dist/components/page-calendar/month-view.d.ts +0 -11
  264. package/dist/components/page-calendar/month-view.d.ts.map +0 -1
  265. package/dist/components/page-calendar/page-calendar.d.ts +0 -18
  266. package/dist/components/page-calendar/page-calendar.d.ts.map +0 -1
  267. package/dist/components/page-calendar/page-calendar.types.d.ts +0 -18
  268. package/dist/components/page-calendar/page-calendar.types.d.ts.map +0 -1
  269. package/dist/components/page-calendar/page-calendar.utils.d.ts +0 -24
  270. package/dist/components/page-calendar/page-calendar.utils.d.ts.map +0 -1
  271. package/dist/components/page-calendar/week-view.d.ts +0 -11
  272. package/dist/components/page-calendar/week-view.d.ts.map +0 -1
  273. package/dist/components/table/filter.d.ts +0 -42
  274. package/dist/components/table/filter.d.ts.map +0 -1
  275. package/dist/components/table/group.d.ts +0 -17
  276. package/dist/components/table/group.d.ts.map +0 -1
  277. package/dist/components/table/index.d.ts +0 -20
  278. package/dist/components/table/index.d.ts.map +0 -1
  279. package/dist/components/table/inner-table.d.ts +0 -29
  280. package/dist/components/table/inner-table.d.ts.map +0 -1
  281. package/dist/components/table/metadata.d.ts +0 -4
  282. package/dist/components/table/metadata.d.ts.map +0 -1
  283. package/dist/components/table/pagination.d.ts +0 -3
  284. package/dist/components/table/pagination.d.ts.map +0 -1
  285. package/dist/components/table/row.d.ts +0 -12
  286. package/dist/components/table/row.d.ts.map +0 -1
  287. package/dist/components/table/sort.d.ts +0 -28
  288. package/dist/components/table/sort.d.ts.map +0 -1
  289. package/dist/components/table/table-lib.d.ts +0 -135
  290. package/dist/components/table/table-lib.d.ts.map +0 -1
  291. package/dist/components/table/table.context.d.ts +0 -10
  292. package/dist/components/table/table.context.d.ts.map +0 -1
  293. package/dist/components/table/thead.d.ts +0 -9
  294. package/dist/components/table/thead.d.ts.map +0 -1
  295. package/dist/config/context.d.ts +0 -21
  296. package/dist/config/context.d.ts.map +0 -1
  297. package/dist/config/default-translations.d.ts +0 -90
  298. package/dist/config/default-translations.d.ts.map +0 -1
  299. package/dist/config/default-tweaks.d.ts +0 -13
  300. package/dist/config/default-tweaks.d.ts.map +0 -1
  301. package/dist/constants.d.ts +0 -3
  302. package/dist/constants.d.ts.map +0 -1
  303. package/dist/context-BFXNJVn2.js.map +0 -1
  304. package/dist/date-picker-DwNo22lx.js.map +0 -1
  305. package/dist/dom-Dl8XH0CK.js.map +0 -1
  306. package/dist/file-upload-Brf2NkLr.js.map +0 -1
  307. package/dist/floating-ui.react-QNHG9W4N.js.map +0 -1
  308. package/dist/fns-D2eyJKd5.js.map +0 -1
  309. package/dist/hooks/use-click-outside.d.ts +0 -3
  310. package/dist/hooks/use-click-outside.d.ts.map +0 -1
  311. package/dist/hooks/use-color-parser.d.ts +0 -2
  312. package/dist/hooks/use-color-parser.d.ts.map +0 -1
  313. package/dist/hooks/use-components-provider.d.ts +0 -15
  314. package/dist/hooks/use-components-provider.d.ts.map +0 -1
  315. package/dist/hooks/use-debounce.d.ts +0 -5
  316. package/dist/hooks/use-debounce.d.ts.map +0 -1
  317. package/dist/hooks/use-floating-ref.d.ts +0 -2
  318. package/dist/hooks/use-floating-ref.d.ts.map +0 -1
  319. package/dist/hooks/use-form.d.ts +0 -394
  320. package/dist/hooks/use-form.d.ts.map +0 -1
  321. package/dist/hooks/use-hover.d.ts +0 -3
  322. package/dist/hooks/use-hover.d.ts.map +0 -1
  323. package/dist/hooks/use-input-id.d.ts +0 -4
  324. package/dist/hooks/use-input-id.d.ts.map +0 -1
  325. package/dist/hooks/use-is-coarse-device.d.ts +0 -2
  326. package/dist/hooks/use-is-coarse-device.d.ts.map +0 -1
  327. package/dist/hooks/use-locale.d.ts +0 -3
  328. package/dist/hooks/use-locale.d.ts.map +0 -1
  329. package/dist/hooks/use-media-query.d.ts +0 -2
  330. package/dist/hooks/use-media-query.d.ts.map +0 -1
  331. package/dist/hooks/use-on-event.d.ts +0 -4
  332. package/dist/hooks/use-on-event.d.ts.map +0 -1
  333. package/dist/hooks/use-parent.d.ts +0 -3
  334. package/dist/hooks/use-parent.d.ts.map +0 -1
  335. package/dist/hooks/use-preferences.d.ts +0 -2
  336. package/dist/hooks/use-preferences.d.ts.map +0 -1
  337. package/dist/hooks/use-previous.d.ts +0 -2
  338. package/dist/hooks/use-previous.d.ts.map +0 -1
  339. package/dist/hooks/use-reactive.d.ts +0 -2
  340. package/dist/hooks/use-reactive.d.ts.map +0 -1
  341. package/dist/hooks/use-remove-scroll.d.ts +0 -4
  342. package/dist/hooks/use-remove-scroll.d.ts.map +0 -1
  343. package/dist/hooks/use-resize-observer.d.ts +0 -2
  344. package/dist/hooks/use-resize-observer.d.ts.map +0 -1
  345. package/dist/hooks/use-stable-ref.d.ts +0 -2
  346. package/dist/hooks/use-stable-ref.d.ts.map +0 -1
  347. package/dist/hooks/use-swipe.d.ts +0 -8
  348. package/dist/hooks/use-swipe.d.ts.map +0 -1
  349. package/dist/hooks/use-translations.d.ts +0 -88
  350. package/dist/hooks/use-translations.d.ts.map +0 -1
  351. package/dist/hooks/use-tweaks.d.ts +0 -3
  352. package/dist/hooks/use-tweaks.d.ts.map +0 -1
  353. package/dist/hooks/use-window-size.d.ts +0 -5
  354. package/dist/hooks/use-window-size.d.ts.map +0 -1
  355. package/dist/index-BelDtX5M.js.map +0 -1
  356. package/dist/index-DJSMaZR4.js.map +0 -1
  357. package/dist/index-Z-fZHxfJ.js +0 -335
  358. package/dist/index-Z-fZHxfJ.js.map +0 -1
  359. package/dist/index.d.ts +0 -22
  360. package/dist/index.d.ts.map +0 -1
  361. package/dist/input-CrGrSnUt.js.map +0 -1
  362. package/dist/input-field-5vYcz5tT.js.map +0 -1
  363. package/dist/lib/combi-keys.d.ts +0 -15
  364. package/dist/lib/combi-keys.d.ts.map +0 -1
  365. package/dist/lib/dict.d.ts +0 -12
  366. package/dist/lib/dict.d.ts.map +0 -1
  367. package/dist/lib/dom.d.ts +0 -19
  368. package/dist/lib/dom.d.ts.map +0 -1
  369. package/dist/lib/fns.d.ts +0 -11
  370. package/dist/lib/fns.d.ts.map +0 -1
  371. package/dist/lib/fzf.d.ts +0 -16
  372. package/dist/lib/fzf.d.ts.map +0 -1
  373. package/dist/lib/keyboard-area.d.ts +0 -16
  374. package/dist/lib/keyboard-area.d.ts.map +0 -1
  375. package/dist/notifications-cUdVPs-B.js +0 -2786
  376. package/dist/notifications-cUdVPs-B.js.map +0 -1
  377. package/dist/skeleton-D75GFBV6.js +0 -10
  378. package/dist/skeleton-D75GFBV6.js.map +0 -1
  379. package/dist/tabs-S00a8qq8.js +0 -106
  380. package/dist/tabs-S00a8qq8.js.map +0 -1
  381. package/dist/types.d.ts +0 -26
  382. package/dist/types.d.ts.map +0 -1
  383. package/dist/use-translations-BwLKTrZv.js +0 -10
  384. package/dist/use-translations-BwLKTrZv.js.map +0 -1
package/ai/SKILL.md CHANGED
@@ -1,266 +1,233 @@
1
1
  ---
2
2
  name: g4rcez-components
3
3
  description: >
4
- Use when: setting up @g4rcez/components in a new project, migrating native
5
- HTML elements or hand-rolled UI to this design system, building any React UI
6
- that should use @g4rcez/components, or when the user's project already has
7
- @g4rcez/components as a dependency. Covers installation, Tailwind preset,
8
- theming with createTokenStyles/TokenRemap, ComponentsProvider/tweaks,
9
- parsers, the full component catalog (components, hooks, React, UI,
10
- design-system, tokens, Tailwind, forms, modals, notifications, tables,
11
- calendar, theming), and native-element migration.
4
+ Use when: setting up @g4rcez/components in a new project, migrating native
5
+ HTML elements or hand-rolled UI to this design system, building any React UI
6
+ that should use @g4rcez/components, or when the user's project already has
7
+ @g4rcez/components as a dependency. Covers installation, Tailwind v3 preset,
8
+ Tailwind v4 CSS-first setup, theming with createTokenStyles/TokenRemap,
9
+ ComponentsProvider/tweaks, parsers, the full component catalog (components,
10
+ hooks, React, UI, design-system, tokens, Tailwind, forms, modals,
11
+ notifications, tables, calendar, theming), and native-element migration.
12
12
  ---
13
13
 
14
+ Loaded automatically when this package is present. Read fully before writing or modifying UI.
15
+
14
16
  # @g4rcez/components — Agent Skill
15
17
 
16
18
  A React design system built on Tailwind CSS and design tokens. This skill covers
17
- installation, Tailwind preset setup, theming APIs, conventions, the full
19
+ installation, Tailwind setup (v3 and v4), theming APIs, conventions, the full
18
20
  component catalog, and migration from native HTML patterns.
19
21
 
20
22
  ---
21
23
 
22
- ## 1 — Package Structure & Installation
24
+ ## 1 — Installation
23
25
 
24
26
  ```bash
25
27
  pnpm add @g4rcez/components
26
28
  ```
27
29
 
28
- When installed in `node_modules`, the package follows this structure:
29
- - `node_modules/@g4rcez/components/dist/` — Compiled JS/TS and CSS.
30
- - `node_modules/@g4rcez/components/index.css` — Main stylesheet.
31
- - `node_modules/@g4rcez/components/ai/` — This skill and detailed markdown documentation.
32
- - `node_modules/@g4rcez/components/ai/docs/` — Component-specific documentation files.
30
+ The package ships:
31
+
32
+ - `dist/` — compiled JS/TS and CSS
33
+ - `dist/index.css` — main stylesheet
34
+ - `ai/SKILL.md` — this file
35
+ - `ai/docs/` — per-component documentation (51 pages)
36
+
37
+ Access any file via the package specifier: `@g4rcez/components/ai/SKILL.md`, `@g4rcez/components/ai/docs/Button.md`, etc.
38
+
39
+ ---
40
+
41
+ ## 2 — Tailwind Setup
33
42
 
34
- ### Tailwind Preset (recommended)
43
+ ### v3 (preset-based)
35
44
 
36
- Add the library preset in your `tailwind.config.ts` (or `.js`). The preset
37
- wires all design tokens as Tailwind utilities.
45
+ Add the library preset to `tailwind.config.ts`. The preset registers all design tokens as Tailwind utilities.
38
46
 
39
47
  ```ts
40
- // tailwind.config.ts
41
48
  import preset from "@g4rcez/components/preset.tailwind";
42
49
 
43
50
  export default {
44
- presets: [preset],
45
- content: [
46
- "./src/**/*.{ts,tsx}",
47
- // include node_modules so Tailwind scans the library's classes:
48
- "./node_modules/@g4rcez/components/dist/**/*.js",
49
- ],
51
+ presets: [preset],
52
+ content: ["./src/**/*.{ts,tsx}", "./node_modules/@g4rcez/components/dist/**/*.js"],
53
+ };
54
+ ```
55
+
56
+ ### v4 (CSS-first)
57
+
58
+ Import Tailwind and the library stylesheet, then reference the library config via `@config`:
59
+
60
+ ```css
61
+ @import "tailwindcss";
62
+ @import "@g4rcez/components/dist/index.css";
63
+ @config "./tailwind.config.ts";
64
+ ```
65
+
66
+ The library's `tailwind.config.ts` uses `plugin.tailwind` (the v4-compatible plugin):
67
+
68
+ ```ts
69
+ import plugin from "@g4rcez/components/plugin.tailwind";
70
+
71
+ export default {
72
+ plugins: [plugin],
73
+ content: ["./src/**/*.{ts,tsx}", "./node_modules/@g4rcez/components/dist/**/*.js"],
50
74
  };
51
75
  ```
52
76
 
53
- ### Theme class (required)
77
+ ### Theme class (required for both versions)
54
78
 
55
79
  Apply `light` or `dark` on your root element:
56
80
 
57
81
  ```tsx
58
- <html className="light">…</html>
82
+ <html className="light">...</html>
59
83
  // or
60
- <html className="dark">…</html>
84
+ <html className="dark">...</html>
61
85
  ```
62
86
 
63
- ### ComponentsProvider (optional, mandatory for dark-mode)
87
+ ### ComponentsProvider (optional, required for dark-mode toggle)
64
88
 
65
- Wrap your app root to enable i18n strings, locale-aware masks, and the
66
- programmatic `Modal.confirm` utility:
89
+ Wrap your app root to enable i18n strings, locale-aware masks, and `Modal.confirm`:
67
90
 
68
91
  ```tsx
69
92
  import { ComponentsProvider } from "@g4rcez/components";
70
93
 
71
94
  export default function App({ children }) {
72
- return (
73
- <ComponentsProvider locale="en-US">
74
- {children}
75
- </ComponentsProvider>
76
- );
95
+ return <ComponentsProvider locale="en-US">{children}</ComponentsProvider>;
77
96
  }
78
97
  ```
79
98
 
80
99
  ---
81
100
 
82
- ## 2 — Theme Setup with createTokenStyles
83
-
84
- Use `createTokenStyles` to generate scoped CSS strings for light and dark
85
- themes, then inject them into `<head>`.
101
+ ## 3 — Theme Setup with createTokenStyles
86
102
 
87
- ### API
103
+ Use `createTokenStyles` to generate scoped CSS strings for light and dark themes, then inject them into `<head>` via a `<style>` element.
88
104
 
89
105
  ```ts
90
- import {
91
- createTokenStyles,
92
- createCssProperties,
93
- type TokenRemap,
94
- } from "@g4rcez/components";
106
+ import { createTokenStyles, createCssProperties, type TokenRemap } from "@g4rcez/components";
95
107
  ```
96
108
 
97
- | Function | Signature | Returns |
98
- |----------|-----------|---------|
99
- | `createTokenStyles` | `(theme: DesignTokens, map?: TokenRemap) => string` | Scoped CSS string, e.g. `html { --primary: … }` |
100
- | `createCssProperties` | `(theme: DesignTokens, map?: TokenRemap) => CSSProperties` | Inline style object with CSS custom properties |
101
-
102
- - When `map.name` is set (e.g. `"dark"`), the output is scoped to
103
- `html.dark { … }` instead of `html { … }`.
104
- - Use `createTokenStyles` for `<style>` injection; use `createCssProperties`
105
- for inline `style` props.
109
+ - `createTokenStyles(theme, map?)` — returns a scoped CSS string, e.g. `html { --primary: … }`
110
+ - `createCssProperties(theme, map?)` — returns an inline style object with CSS custom properties
111
+ - When `map.name` is set (e.g. `"dark"`), the output scopes to `html.dark { … }`
112
+ - Use `createTokenStyles` for `<style>` injection; use `createCssProperties` for inline `style` props
106
113
 
107
114
  ### Two-theme pattern (light + dark)
108
115
 
109
116
  ```tsx
110
- import {
111
- createTokenStyles,
112
- type TokenRemap,
113
- defaultLightTheme,
114
- defaultDarkTheme,
115
- } from "@g4rcez/components";
117
+ import { createTokenStyles, type TokenRemap, defaultLightTheme, defaultDarkTheme } from "@g4rcez/components";
116
118
 
117
119
  const tokenRemap: TokenRemap = {
118
- colors: (t) => {
119
- // Strip hsla( prefix and ) suffix for Tailwind opacity utility support
120
- t.value = t.value.replace("hsla(", "").replace(/\)$/, "");
121
- return t;
122
- },
120
+ colors: (t) => {
121
+ // Strip hsla( wrapper so Tailwind opacity utilities (bg-primary/50) work
122
+ t.value = t.value.replace("hsla(", "").replace(/\)$/, "");
123
+ return t;
124
+ },
123
125
  };
124
126
 
125
127
  const stylesLight = createTokenStyles(defaultLightTheme, tokenRemap);
126
- const stylesDark = createTokenStyles(defaultDarkTheme, {
127
- ...tokenRemap,
128
- name: "dark", // scopes output to html.dark { … }
129
- });
130
-
131
- // In your layout:
132
- export default function RootLayout({ children }) {
133
- return (
134
- <html lang="en">
135
- <head>
136
- <style dangerouslySetInnerHTML={{ __html: stylesLight }} />
137
- <style dangerouslySetInnerHTML={{ __html: stylesDark }} />
138
- </head>
139
- <body>{children}</body>
140
- </html>
141
- );
142
- }
128
+ const stylesDark = createTokenStyles(defaultDarkTheme, { ...tokenRemap, name: "dark" });
129
+
130
+ // Inject stylesLight and stylesDark as <style> elements in your layout <head>.
131
+ // Both are internally-generated CSS strings (design tokens only), not user input.
143
132
  ```
144
133
 
145
134
  ---
146
135
 
147
- ## 3 — TokenRemap
136
+ ## 4 — TokenRemap
148
137
 
149
- `TokenRemap` lets you transform each design token value before it is emitted
150
- as a CSS custom property.
138
+ `TokenRemap` transforms each design token value before it is emitted as a CSS custom property.
151
139
 
152
140
  ```ts
153
- export type TokenRemap = Partial<
154
- Record<
155
- "colors" | "spacing" | "rounded" | "customTokens" | "zIndex",
156
- (t: Token) => Token
157
- > & { name: string }
158
- >;
141
+ export type TokenRemap = Partial<Record<"colors" | "spacing" | "rounded" | "customTokens" | "zIndex", (t: Token) => Token> & { name: string }>;
159
142
  ```
160
143
 
161
- ### Why strip `hsla(…)` in the colors transformer
162
-
163
- Tailwind v4 opacity utilities (e.g. `bg-primary/50`) expect raw channel values
164
- like `210 40% 60%` — not a wrapped `hsla(210 40% 60%)`.
144
+ Stripping `hsla(…)` in the colors transformer is required for Tailwind opacity utilities (`bg-primary/50`) — they expect raw channel values (`210 40% 60%`), not a wrapped `hsla(210 40% 60%)`.
165
145
 
166
146
  ---
167
147
 
168
- ## 4 — ComponentsProvider & Tweaks
148
+ ## 5 — ComponentsProvider & Tweaks
169
149
 
170
150
  ```tsx
171
151
  import { ComponentsProvider, type Tweaks, parsers } from "@g4rcez/components";
172
152
 
173
153
  const tweaks: Tweaks = {
174
- table: {
175
- sorters: true, // show/hide column sort controls
176
- filters: true, // show/hide column filter controls
177
- operations: true, // show/hide table operation buttons
178
- sticky: 55, // px offset for sticky header
179
- },
154
+ table: {
155
+ sorters: true,
156
+ filters: true,
157
+ operations: true,
158
+ sticky: 55,
159
+ },
180
160
  };
181
161
 
182
- <ComponentsProvider
183
- locale="en-US"
184
- tweaks={tweaks}
185
- parser={parsers.hsla}
186
- >
187
- {children}
188
- </ComponentsProvider>
162
+ <ComponentsProvider locale="en-US" tweaks={tweaks} parser={parsers.hsla}>
163
+ {children}
164
+ </ComponentsProvider>;
189
165
  ```
190
166
 
191
167
  ---
192
168
 
193
- ## 5 — Key Conventions
169
+ ## 6 — Key Conventions
194
170
 
195
171
  ### Never use raw Tailwind color classes
196
172
 
197
173
  ```tsx
198
- // ❌ Wrong
199
- <div className="bg-blue-500 text-white">…</div>
174
+ // Wrong
175
+ <div className="bg-blue-500 text-white">...</div>
200
176
 
201
- // ✅ Right — use design-token classes
202
- <div className="bg-primary text-primary-foreground">…</div>
177
+ // Right — use design-token classes
178
+ <div className="bg-primary text-primary-foreground">...</div>
203
179
  ```
204
180
 
205
181
  ### Always use component `theme` / `variant` props
206
182
 
207
183
  ```tsx
208
- // ❌ Wrong
184
+ // Wrong
209
185
  <button className="bg-red-600 text-white">Delete</button>
210
186
 
211
- // ✅ Right
187
+ // Right
212
188
  <Button theme="danger">Delete</Button>
213
189
  ```
214
190
 
215
191
  ---
216
192
 
217
- ## 6 — Component Catalog
218
-
219
- ### Import paths
193
+ ## 7 — Component Catalog
220
194
 
221
- The library supports both barrel imports and sub-path imports for better tree-shaking.
195
+ The library supports both barrel imports and sub-path imports for tree-shaking:
222
196
 
223
- | Component | Main Export | Sub-path Export |
224
- |-----------|-------------|-----------------|
225
- | `Button` | `@g4rcez/components` | `@g4rcez/components/button` |
226
- | `Input` | `@g4rcez/components` | `@g4rcez/components/input` |
227
- | `Modal` | `@g4rcez/components` | `@g4rcez/components/modal` |
228
- | `Table` | `@g4rcez/components` | `@g4rcez/components/table` |
229
- | `Select` | `@g4rcez/components` | `@g4rcez/components/select` |
197
+ - `Button` — `@g4rcez/components` or `@g4rcez/components/button`
198
+ - `Input` — `@g4rcez/components` or `@g4rcez/components/input`
199
+ - `Modal` — `@g4rcez/components` or `@g4rcez/components/modal`
200
+ - `Table` — `@g4rcez/components` or `@g4rcez/components/table`
201
+ - `Select` — `@g4rcez/components` or `@g4rcez/components/select`
230
202
 
231
- See `node_modules/@g4rcez/components/ai/docs/index.md` for the full list of exports.
203
+ See `@g4rcez/components/ai/docs/index.md` for the complete export list.
232
204
 
233
205
  ---
234
206
 
235
- ## 7 — Migration Guide
236
-
237
- Use this table when migrating native HTML elements to library equivalents.
207
+ ## 8 — Migration from Native HTML
238
208
 
239
- | Native / custom pattern | Library replacement |
240
- |-------------------------|---------------------|
241
- | `<button>` | `Button` |
242
- | `<input type="text">` | `Input` |
243
- | `<input type="date">` | `DatePicker` |
244
- | `<input type="checkbox">` | `Checkbox` |
245
- | `<select>` | `Select` |
246
- | Custom modal / dialog | `Modal` (type `"dialog"`) |
247
- | Side panel / drawer | `Modal` (type `"drawer"`) |
248
- | Toast / notifications | `Notifications` |
249
- | Data table | `Table` |
209
+ - `<button>` → `Button`
210
+ - `<input type="text">` → `Input`
211
+ - `<input type="date">` → `DatePicker`
212
+ - `<input type="checkbox">` → `Checkbox`
213
+ - `<select>` → `Select`
214
+ - Custom modal / dialog → `Modal` (type `"dialog"`)
215
+ - Side panel / drawer → `Modal` (type `"drawer"`)
216
+ - Toast / notifications → `Notifications`
217
+ - Data table → `Table`
250
218
 
251
219
  ---
252
220
 
253
- ## 8 — Where to Find Detailed Docs
221
+ ## 9 — Per-Component Documentation
254
222
 
255
- For any specific component, read its doc file for full props, design tokens,
256
- and usage examples. These files are located within the package in `node_modules`:
223
+ Each component has a dedicated doc page with full props, design tokens, and usage examples:
257
224
 
258
- `node_modules/@g4rcez/components/ai/docs/<ComponentName>.md`
225
+ `@g4rcez/components/ai/docs/<ComponentName>.md`
259
226
 
260
- **Examples:**
261
- - `node_modules/@g4rcez/components/ai/docs/Button.md`
262
- - `node_modules/@g4rcez/components/ai/docs/Input.md`
263
- - `node_modules/@g4rcez/components/ai/docs/Modal.md`
264
- - `node_modules/@g4rcez/components/ai/docs/Table.md`
265
- - `node_modules/@g4rcez/components/ai/docs/Form.md`
227
+ Examples:
266
228
 
229
+ - `@g4rcez/components/ai/docs/Button.md`
230
+ - `@g4rcez/components/ai/docs/Input.md`
231
+ - `@g4rcez/components/ai/docs/Modal.md`
232
+ - `@g4rcez/components/ai/docs/Table.md`
233
+ - `@g4rcez/components/ai/docs/Form.md`
package/ai/docs/Alert.md CHANGED
@@ -19,30 +19,30 @@ import { Alert } from "@g4rcez/components/alert";
19
19
 
20
20
  ## Props
21
21
 
22
- | Prop | Type | Default | Description |
23
- |------|------|---------|-------------|
24
- | `theme` | `"primary" \| "secondary" \| "info" \| "warn" \| "danger" \| "success" \| "neutral"` | `"neutral"` | Visual theme variant |
25
- | `title` | `string` | — | Alert heading text |
26
- | `Icon` | `React.ReactElement` | — | Custom icon element (overrides default theme icon) |
27
- | `open` | `boolean` | `true` | Controls visibility with collapse animation |
28
- | `onClose` | `(nextState: boolean) => void` | — | Callback when close button is clicked; omit to hide the button |
29
- | `container` | `string` | — | Additional classes for the outer wrapper |
30
- | `as` | `React.ElementType` | `"div"` | Polymorphic root element |
31
- | `className` | `string` | — | Additional classes for the alert element |
32
- | `children` | `React.ReactNode` | — | Alert body content |
22
+ | Prop | Type | Default | Description |
23
+ | ----------- | ------------------------------------------------------------------------------------ | ----------- | -------------------------------------------------------------- |
24
+ | `theme` | `"primary" \| "secondary" \| "info" \| "warn" \| "danger" \| "success" \| "neutral"` | `"neutral"` | Visual theme variant |
25
+ | `title` | `string` | — | Alert heading text |
26
+ | `Icon` | `React.ReactElement` | — | Custom icon element (overrides default theme icon) |
27
+ | `open` | `boolean` | `true` | Controls visibility with collapse animation |
28
+ | `onClose` | `(nextState: boolean) => void` | — | Callback when close button is clicked; omit to hide the button |
29
+ | `container` | `string` | — | Additional classes for the outer wrapper |
30
+ | `as` | `React.ElementType` | `"div"` | Polymorphic root element |
31
+ | `className` | `string` | — | Additional classes for the alert element |
32
+ | `children` | `React.ReactNode` | — | Alert body content |
33
33
 
34
34
  ## Design Tokens
35
35
 
36
36
  Tokens this component reads. Customize by overriding these CSS variables in your theme.
37
37
 
38
- | Token | CSS Variable | Purpose |
39
- |-------|-------------|---------|
40
- | `bg-alert-{theme}-bg` | `--alert-{theme}-bg` | Background per theme |
41
- | `text-alert-{theme}-text` | `--alert-{theme}-text` | Text color per theme |
42
- | `border-alert-{theme}-border` | `--alert-{theme}-border` | Border color per theme |
43
- | `border-card-border` | `--card-border` | Border for `neutral` theme |
44
- | `text-foreground` | `--foreground` | Close button color |
45
- | `text-danger` | `--danger` | Close button hover color |
38
+ | Token | CSS Variable | Purpose |
39
+ | ----------------------------- | ------------------------ | -------------------------- |
40
+ | `bg-alert-{theme}-bg` | `--alert-{theme}-bg` | Background per theme |
41
+ | `text-alert-{theme}-text` | `--alert-{theme}-text` | Text color per theme |
42
+ | `border-alert-{theme}-border` | `--alert-{theme}-border` | Border color per theme |
43
+ | `border-card-border` | `--card-border` | Border for `neutral` theme |
44
+ | `text-foreground` | `--foreground` | Close button color |
45
+ | `text-danger` | `--danger` | Close button hover color |
46
46
 
47
47
  Themes: `primary`, `secondary`, `info`, `warn`, `danger`, `success`, `neutral`.
48
48
 
@@ -50,13 +50,13 @@ Themes: `primary`, `secondary`, `info`, `warn`, `danger`, `success`, `neutral`.
50
50
 
51
51
  Each theme maps to a set of `bg-alert-{theme}-*` tokens and provides default icons for some variants:
52
52
 
53
- | Theme | Default Icon |
54
- |-------|-------------|
55
- | `success` | `CheckCircleIcon` |
56
- | `info` | `InfoIcon` |
57
- | `danger` | `TriangleAlertIcon` |
58
- | `warn` | — |
59
- | `primary` / `secondary` / `neutral` | — |
53
+ | Theme | Default Icon |
54
+ | ----------------------------------- | ------------------- |
55
+ | `success` | `CheckCircleIcon` |
56
+ | `info` | `InfoIcon` |
57
+ | `danger` | `TriangleAlertIcon` |
58
+ | `warn` | — |
59
+ | `primary` / `secondary` / `neutral` | — |
60
60
 
61
61
  ## Examples
62
62
 
@@ -86,8 +86,8 @@ Each theme maps to a set of `bg-alert-{theme}-*` tokens and provides default ico
86
86
  import { BellIcon } from "@phosphor-icons/react";
87
87
 
88
88
  <Alert theme="info" title="Notification" Icon={<BellIcon size={20} />}>
89
- You have new messages.
90
- </Alert>
89
+ You have new messages.
90
+ </Alert>;
91
91
  ```
92
92
 
93
93
  ### Dismissible Alert
@@ -95,14 +95,9 @@ import { BellIcon } from "@phosphor-icons/react";
95
95
  ```tsx
96
96
  const [showAlert, setShowAlert] = useState(true);
97
97
 
98
- <Alert
99
- theme="success"
100
- title="Welcome!"
101
- open={showAlert}
102
- onClose={() => setShowAlert(false)}
103
- >
104
- Thanks for joining our platform.
105
- </Alert>
98
+ <Alert theme="success" title="Welcome!" open={showAlert} onClose={() => setShowAlert(false)}>
99
+ Thanks for joining our platform.
100
+ </Alert>;
106
101
  ```
107
102
 
108
103
  ### Rich Content
@@ -111,12 +106,16 @@ const [showAlert, setShowAlert] = useState(true);
111
106
  import { Button } from "@g4rcez/components/button";
112
107
 
113
108
  <Alert theme="info" title="Update Available">
114
- <p>A new version of the application is available.</p>
115
- <div className="mt-3 flex gap-2">
116
- <Button theme="primary" size="small">Update Now</Button>
117
- <Button theme="neutral" size="small">Later</Button>
118
- </div>
119
- </Alert>
109
+ <p>A new version of the application is available.</p>
110
+ <div className="mt-3 flex gap-2">
111
+ <Button theme="primary" size="small">
112
+ Update Now
113
+ </Button>
114
+ <Button theme="neutral" size="small">
115
+ Later
116
+ </Button>
117
+ </div>
118
+ </Alert>;
120
119
  ```
121
120
 
122
121
  ### Form Validation
@@ -125,12 +124,12 @@ import { Button } from "@g4rcez/components/button";
125
124
  const [errors, setErrors] = useState<string[]>([]);
126
125
 
127
126
  <Alert theme="danger" title="Validation Errors" open={errors.length > 0}>
128
- <ul className="list-disc list-inside space-y-1">
129
- {errors.map((error, index) => (
130
- <li key={index}>{error}</li>
131
- ))}
132
- </ul>
133
- </Alert>
127
+ <ul className="list-disc list-inside space-y-1">
128
+ {errors.map((error, index) => (
129
+ <li key={index}>{error}</li>
130
+ ))}
131
+ </ul>
132
+ </Alert>;
134
133
  ```
135
134
 
136
135
  ## Do