@g4rcez/components 4.0.1 → 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 (415) hide show
  1. package/ai/SKILL.md +233 -0
  2. package/ai/docs/Alert.md +166 -0
  3. package/ai/docs/AnimatedList.md +206 -0
  4. package/ai/docs/Autocomplete.md +221 -0
  5. package/ai/docs/Button.md +182 -0
  6. package/ai/docs/Calendar.md +185 -0
  7. package/ai/docs/Card.md +178 -0
  8. package/ai/docs/Checkbox.md +194 -0
  9. package/ai/docs/CommandPalette.md +275 -0
  10. package/ai/docs/DatePicker.md +152 -0
  11. package/ai/docs/Dropdown.md +195 -0
  12. package/{dist/ai → ai}/docs/Empty.md +41 -44
  13. package/{dist/ai → ai}/docs/Expand.md +40 -54
  14. package/ai/docs/FileUpload.md +218 -0
  15. package/{dist/ai → ai}/docs/Form.md +35 -29
  16. package/{dist/ai → ai}/docs/FormReset.md +37 -37
  17. package/{dist/ai → ai}/docs/Heading.md +4 -6
  18. package/ai/docs/Input.md +212 -0
  19. package/ai/docs/InputField.md +170 -0
  20. package/ai/docs/List.md +208 -0
  21. package/ai/docs/Menu.md +168 -0
  22. package/ai/docs/Modal.md +273 -0
  23. package/ai/docs/MultiSelect.md +177 -0
  24. package/ai/docs/Notifications.md +231 -0
  25. package/ai/docs/PageCalendar.md +262 -0
  26. package/{dist/ai → ai}/docs/Polymorph.md +25 -41
  27. package/{dist/ai → ai}/docs/Progress.md +55 -51
  28. package/{dist/ai → ai}/docs/Radiobox.md +49 -41
  29. package/{dist/ai → ai}/docs/RenderOnView.md +26 -32
  30. package/{dist/ai → ai}/docs/Resizable.md +60 -65
  31. package/ai/docs/Select.md +284 -0
  32. package/{dist/ai → ai}/docs/Shortcut.md +14 -14
  33. package/{dist/ai → ai}/docs/Skeleton.md +56 -60
  34. package/{dist/ai → ai}/docs/Slider.md +26 -49
  35. package/{dist/ai → ai}/docs/Slot.md +15 -17
  36. package/{dist/ai → ai}/docs/Spinner.md +17 -15
  37. package/{dist/ai → ai}/docs/Stats.md +44 -42
  38. package/ai/docs/Step.md +159 -0
  39. package/{dist/ai → ai}/docs/Switch.md +44 -54
  40. package/ai/docs/Table.md +286 -0
  41. package/ai/docs/Tabs.md +191 -0
  42. package/ai/docs/Tag.md +222 -0
  43. package/{dist/ai → ai}/docs/TaskList.md +40 -50
  44. package/ai/docs/Textarea.md +144 -0
  45. package/ai/docs/Timeline.md +212 -0
  46. package/{dist/ai → ai}/docs/Toolbar.md +46 -46
  47. package/ai/docs/Tooltip.md +231 -0
  48. package/ai/docs/Typography.md +187 -0
  49. package/ai/docs/Wizard.md +208 -0
  50. package/ai/docs/index.md +183 -0
  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 +2826 -2765
  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 +101 -88
  153. package/dist/ai/SKILL.md +0 -266
  154. package/dist/ai/docs/Alert.md +0 -167
  155. package/dist/ai/docs/AnimatedList.md +0 -205
  156. package/dist/ai/docs/Autocomplete.md +0 -225
  157. package/dist/ai/docs/Button.md +0 -182
  158. package/dist/ai/docs/Calendar.md +0 -219
  159. package/dist/ai/docs/Card.md +0 -174
  160. package/dist/ai/docs/Checkbox.md +0 -199
  161. package/dist/ai/docs/CommandPalette.md +0 -293
  162. package/dist/ai/docs/DatePicker.md +0 -171
  163. package/dist/ai/docs/Dropdown.md +0 -223
  164. package/dist/ai/docs/FileUpload.md +0 -225
  165. package/dist/ai/docs/Input.md +0 -237
  166. package/dist/ai/docs/InputField.md +0 -170
  167. package/dist/ai/docs/List.md +0 -205
  168. package/dist/ai/docs/Menu.md +0 -166
  169. package/dist/ai/docs/Modal.md +0 -280
  170. package/dist/ai/docs/MultiSelect.md +0 -196
  171. package/dist/ai/docs/Notifications.md +0 -231
  172. package/dist/ai/docs/PageCalendar.md +0 -271
  173. package/dist/ai/docs/Select.md +0 -284
  174. package/dist/ai/docs/Step.md +0 -159
  175. package/dist/ai/docs/Table.md +0 -298
  176. package/dist/ai/docs/Tabs.md +0 -191
  177. package/dist/ai/docs/Tag.md +0 -224
  178. package/dist/ai/docs/Textarea.md +0 -167
  179. package/dist/ai/docs/Timeline.md +0 -210
  180. package/dist/ai/docs/Tooltip.md +0 -231
  181. package/dist/ai/docs/TransferList.md +0 -142
  182. package/dist/ai/docs/Typography.md +0 -187
  183. package/dist/ai/docs/Wizard.md +0 -213
  184. package/dist/ai/docs/index.md +0 -183
  185. package/dist/autocomplete-Cn9Z2hLq.js +0 -375
  186. package/dist/autocomplete-Cn9Z2hLq.js.map +0 -1
  187. package/dist/calendar-B5lSd0ID.js.map +0 -1
  188. package/dist/components/core/button.d.ts +0 -77
  189. package/dist/components/core/button.d.ts.map +0 -1
  190. package/dist/components/core/heading.d.ts +0 -3
  191. package/dist/components/core/heading.d.ts.map +0 -1
  192. package/dist/components/core/polymorph.d.ts +0 -10
  193. package/dist/components/core/polymorph.d.ts.map +0 -1
  194. package/dist/components/core/render-on-view.d.ts +0 -7
  195. package/dist/components/core/render-on-view.d.ts.map +0 -1
  196. package/dist/components/core/resizable.d.ts +0 -3
  197. package/dist/components/core/resizable.d.ts.map +0 -1
  198. package/dist/components/core/slot.d.ts +0 -16
  199. package/dist/components/core/slot.d.ts.map +0 -1
  200. package/dist/components/core/tag.d.ts +0 -35
  201. package/dist/components/core/tag.d.ts.map +0 -1
  202. package/dist/components/core/typography.d.ts +0 -24
  203. package/dist/components/core/typography.d.ts.map +0 -1
  204. package/dist/components/display/alert.d.ts +0 -28
  205. package/dist/components/display/alert.d.ts.map +0 -1
  206. package/dist/components/display/calendar.d.ts +0 -42
  207. package/dist/components/display/calendar.d.ts.map +0 -1
  208. package/dist/components/display/card.d.ts +0 -29
  209. package/dist/components/display/card.d.ts.map +0 -1
  210. package/dist/components/display/empty.d.ts +0 -8
  211. package/dist/components/display/empty.d.ts.map +0 -1
  212. package/dist/components/display/list.d.ts +0 -16
  213. package/dist/components/display/list.d.ts.map +0 -1
  214. package/dist/components/display/notifications.d.ts +0 -27
  215. package/dist/components/display/notifications.d.ts.map +0 -1
  216. package/dist/components/display/progress.d.ts +0 -13
  217. package/dist/components/display/progress.d.ts.map +0 -1
  218. package/dist/components/display/shortcut.d.ts +0 -4
  219. package/dist/components/display/shortcut.d.ts.map +0 -1
  220. package/dist/components/display/skeleton.d.ts +0 -12
  221. package/dist/components/display/skeleton.d.ts.map +0 -1
  222. package/dist/components/display/spinner.d.ts +0 -5
  223. package/dist/components/display/spinner.d.ts.map +0 -1
  224. package/dist/components/display/stats.d.ts +0 -12
  225. package/dist/components/display/stats.d.ts.map +0 -1
  226. package/dist/components/display/step.d.ts +0 -24
  227. package/dist/components/display/step.d.ts.map +0 -1
  228. package/dist/components/display/tabs.d.ts +0 -24
  229. package/dist/components/display/tabs.d.ts.map +0 -1
  230. package/dist/components/display/timeline.d.ts +0 -10
  231. package/dist/components/display/timeline.d.ts.map +0 -1
  232. package/dist/components/floating/command-palette.d.ts +0 -49
  233. package/dist/components/floating/command-palette.d.ts.map +0 -1
  234. package/dist/components/floating/dropdown.d.ts +0 -15
  235. package/dist/components/floating/dropdown.d.ts.map +0 -1
  236. package/dist/components/floating/expand.d.ts +0 -11
  237. package/dist/components/floating/expand.d.ts.map +0 -1
  238. package/dist/components/floating/menu.d.ts +0 -52
  239. package/dist/components/floating/menu.d.ts.map +0 -1
  240. package/dist/components/floating/modal.d.ts +0 -60
  241. package/dist/components/floating/modal.d.ts.map +0 -1
  242. package/dist/components/floating/toolbar.d.ts +0 -6
  243. package/dist/components/floating/toolbar.d.ts.map +0 -1
  244. package/dist/components/floating/tooltip.d.ts +0 -17
  245. package/dist/components/floating/tooltip.d.ts.map +0 -1
  246. package/dist/components/floating/wizard.d.ts +0 -26
  247. package/dist/components/floating/wizard.d.ts.map +0 -1
  248. package/dist/components/form/autocomplete.d.ts +0 -16
  249. package/dist/components/form/autocomplete.d.ts.map +0 -1
  250. package/dist/components/form/checkbox.d.ts +0 -12
  251. package/dist/components/form/checkbox.d.ts.map +0 -1
  252. package/dist/components/form/date-picker.d.ts +0 -10
  253. package/dist/components/form/date-picker.d.ts.map +0 -1
  254. package/dist/components/form/file-upload.d.ts +0 -15
  255. package/dist/components/form/file-upload.d.ts.map +0 -1
  256. package/dist/components/form/form.d.ts +0 -3
  257. package/dist/components/form/form.d.ts.map +0 -1
  258. package/dist/components/form/formReset.d.ts +0 -2
  259. package/dist/components/form/formReset.d.ts.map +0 -1
  260. package/dist/components/form/free-text.d.ts +0 -11
  261. package/dist/components/form/free-text.d.ts.map +0 -1
  262. package/dist/components/form/input-field.d.ts +0 -34
  263. package/dist/components/form/input-field.d.ts.map +0 -1
  264. package/dist/components/form/input.d.ts +0 -52
  265. package/dist/components/form/input.d.ts.map +0 -1
  266. package/dist/components/form/multi-select.d.ts +0 -19
  267. package/dist/components/form/multi-select.d.ts.map +0 -1
  268. package/dist/components/form/radiobox.d.ts +0 -7
  269. package/dist/components/form/radiobox.d.ts.map +0 -1
  270. package/dist/components/form/select.d.ts +0 -13
  271. package/dist/components/form/select.d.ts.map +0 -1
  272. package/dist/components/form/slider.d.ts +0 -7
  273. package/dist/components/form/slider.d.ts.map +0 -1
  274. package/dist/components/form/switch.d.ts +0 -9
  275. package/dist/components/form/switch.d.ts.map +0 -1
  276. package/dist/components/form/task-list.d.ts +0 -3
  277. package/dist/components/form/task-list.d.ts.map +0 -1
  278. package/dist/components/form/textarea.d.ts +0 -6
  279. package/dist/components/form/textarea.d.ts.map +0 -1
  280. package/dist/components/form/transfer-list.d.ts +0 -14
  281. package/dist/components/form/transfer-list.d.ts.map +0 -1
  282. package/dist/components/form/transfer-list.js +0 -55
  283. package/dist/components/form/transfer-list.js.map +0 -1
  284. package/dist/components/index.d.ts +0 -46
  285. package/dist/components/index.d.ts.map +0 -1
  286. package/dist/components/page-calendar/calendar-header.d.ts +0 -16
  287. package/dist/components/page-calendar/calendar-header.d.ts.map +0 -1
  288. package/dist/components/page-calendar/day-view.d.ts +0 -12
  289. package/dist/components/page-calendar/day-view.d.ts.map +0 -1
  290. package/dist/components/page-calendar/event-pill.d.ts +0 -9
  291. package/dist/components/page-calendar/event-pill.d.ts.map +0 -1
  292. package/dist/components/page-calendar/index.d.ts +0 -4
  293. package/dist/components/page-calendar/index.d.ts.map +0 -1
  294. package/dist/components/page-calendar/month-view.d.ts +0 -11
  295. package/dist/components/page-calendar/month-view.d.ts.map +0 -1
  296. package/dist/components/page-calendar/page-calendar.d.ts +0 -18
  297. package/dist/components/page-calendar/page-calendar.d.ts.map +0 -1
  298. package/dist/components/page-calendar/page-calendar.types.d.ts +0 -18
  299. package/dist/components/page-calendar/page-calendar.types.d.ts.map +0 -1
  300. package/dist/components/page-calendar/page-calendar.utils.d.ts +0 -24
  301. package/dist/components/page-calendar/page-calendar.utils.d.ts.map +0 -1
  302. package/dist/components/page-calendar/week-view.d.ts +0 -11
  303. package/dist/components/page-calendar/week-view.d.ts.map +0 -1
  304. package/dist/components/table/filter.d.ts +0 -42
  305. package/dist/components/table/filter.d.ts.map +0 -1
  306. package/dist/components/table/group.d.ts +0 -17
  307. package/dist/components/table/group.d.ts.map +0 -1
  308. package/dist/components/table/index.d.ts +0 -20
  309. package/dist/components/table/index.d.ts.map +0 -1
  310. package/dist/components/table/inner-table.d.ts +0 -29
  311. package/dist/components/table/inner-table.d.ts.map +0 -1
  312. package/dist/components/table/metadata.d.ts +0 -4
  313. package/dist/components/table/metadata.d.ts.map +0 -1
  314. package/dist/components/table/pagination.d.ts +0 -3
  315. package/dist/components/table/pagination.d.ts.map +0 -1
  316. package/dist/components/table/row.d.ts +0 -12
  317. package/dist/components/table/row.d.ts.map +0 -1
  318. package/dist/components/table/sort.d.ts +0 -28
  319. package/dist/components/table/sort.d.ts.map +0 -1
  320. package/dist/components/table/table-lib.d.ts +0 -135
  321. package/dist/components/table/table-lib.d.ts.map +0 -1
  322. package/dist/components/table/table.context.d.ts +0 -10
  323. package/dist/components/table/table.context.d.ts.map +0 -1
  324. package/dist/components/table/thead.d.ts +0 -9
  325. package/dist/components/table/thead.d.ts.map +0 -1
  326. package/dist/config/context.d.ts +0 -21
  327. package/dist/config/context.d.ts.map +0 -1
  328. package/dist/config/default-translations.d.ts +0 -90
  329. package/dist/config/default-translations.d.ts.map +0 -1
  330. package/dist/config/default-tweaks.d.ts +0 -13
  331. package/dist/config/default-tweaks.d.ts.map +0 -1
  332. package/dist/constants.d.ts +0 -3
  333. package/dist/constants.d.ts.map +0 -1
  334. package/dist/context-BFXNJVn2.js.map +0 -1
  335. package/dist/date-picker-DwNo22lx.js.map +0 -1
  336. package/dist/dom-Dl8XH0CK.js.map +0 -1
  337. package/dist/file-upload-Brf2NkLr.js.map +0 -1
  338. package/dist/floating-ui.react-QNHG9W4N.js.map +0 -1
  339. package/dist/fns-D2eyJKd5.js.map +0 -1
  340. package/dist/hooks/use-click-outside.d.ts +0 -3
  341. package/dist/hooks/use-click-outside.d.ts.map +0 -1
  342. package/dist/hooks/use-color-parser.d.ts +0 -2
  343. package/dist/hooks/use-color-parser.d.ts.map +0 -1
  344. package/dist/hooks/use-components-provider.d.ts +0 -15
  345. package/dist/hooks/use-components-provider.d.ts.map +0 -1
  346. package/dist/hooks/use-debounce.d.ts +0 -5
  347. package/dist/hooks/use-debounce.d.ts.map +0 -1
  348. package/dist/hooks/use-floating-ref.d.ts +0 -2
  349. package/dist/hooks/use-floating-ref.d.ts.map +0 -1
  350. package/dist/hooks/use-form.d.ts +0 -394
  351. package/dist/hooks/use-form.d.ts.map +0 -1
  352. package/dist/hooks/use-hover.d.ts +0 -3
  353. package/dist/hooks/use-hover.d.ts.map +0 -1
  354. package/dist/hooks/use-input-id.d.ts +0 -4
  355. package/dist/hooks/use-input-id.d.ts.map +0 -1
  356. package/dist/hooks/use-is-coarse-device.d.ts +0 -2
  357. package/dist/hooks/use-is-coarse-device.d.ts.map +0 -1
  358. package/dist/hooks/use-locale.d.ts +0 -3
  359. package/dist/hooks/use-locale.d.ts.map +0 -1
  360. package/dist/hooks/use-media-query.d.ts +0 -2
  361. package/dist/hooks/use-media-query.d.ts.map +0 -1
  362. package/dist/hooks/use-on-event.d.ts +0 -4
  363. package/dist/hooks/use-on-event.d.ts.map +0 -1
  364. package/dist/hooks/use-parent.d.ts +0 -3
  365. package/dist/hooks/use-parent.d.ts.map +0 -1
  366. package/dist/hooks/use-preferences.d.ts +0 -2
  367. package/dist/hooks/use-preferences.d.ts.map +0 -1
  368. package/dist/hooks/use-previous.d.ts +0 -2
  369. package/dist/hooks/use-previous.d.ts.map +0 -1
  370. package/dist/hooks/use-reactive.d.ts +0 -2
  371. package/dist/hooks/use-reactive.d.ts.map +0 -1
  372. package/dist/hooks/use-remove-scroll.d.ts +0 -4
  373. package/dist/hooks/use-remove-scroll.d.ts.map +0 -1
  374. package/dist/hooks/use-resize-observer.d.ts +0 -2
  375. package/dist/hooks/use-resize-observer.d.ts.map +0 -1
  376. package/dist/hooks/use-stable-ref.d.ts +0 -2
  377. package/dist/hooks/use-stable-ref.d.ts.map +0 -1
  378. package/dist/hooks/use-swipe.d.ts +0 -8
  379. package/dist/hooks/use-swipe.d.ts.map +0 -1
  380. package/dist/hooks/use-translations.d.ts +0 -88
  381. package/dist/hooks/use-translations.d.ts.map +0 -1
  382. package/dist/hooks/use-tweaks.d.ts +0 -3
  383. package/dist/hooks/use-tweaks.d.ts.map +0 -1
  384. package/dist/hooks/use-window-size.d.ts +0 -5
  385. package/dist/hooks/use-window-size.d.ts.map +0 -1
  386. package/dist/index-BelDtX5M.js.map +0 -1
  387. package/dist/index-DJSMaZR4.js.map +0 -1
  388. package/dist/index-Z-fZHxfJ.js +0 -335
  389. package/dist/index-Z-fZHxfJ.js.map +0 -1
  390. package/dist/index.d.ts +0 -22
  391. package/dist/index.d.ts.map +0 -1
  392. package/dist/input-CrGrSnUt.js.map +0 -1
  393. package/dist/input-field-5vYcz5tT.js.map +0 -1
  394. package/dist/lib/combi-keys.d.ts +0 -15
  395. package/dist/lib/combi-keys.d.ts.map +0 -1
  396. package/dist/lib/dict.d.ts +0 -12
  397. package/dist/lib/dict.d.ts.map +0 -1
  398. package/dist/lib/dom.d.ts +0 -19
  399. package/dist/lib/dom.d.ts.map +0 -1
  400. package/dist/lib/fns.d.ts +0 -11
  401. package/dist/lib/fns.d.ts.map +0 -1
  402. package/dist/lib/fzf.d.ts +0 -16
  403. package/dist/lib/fzf.d.ts.map +0 -1
  404. package/dist/lib/keyboard-area.d.ts +0 -16
  405. package/dist/lib/keyboard-area.d.ts.map +0 -1
  406. package/dist/notifications-cUdVPs-B.js +0 -2786
  407. package/dist/notifications-cUdVPs-B.js.map +0 -1
  408. package/dist/skeleton-D75GFBV6.js +0 -10
  409. package/dist/skeleton-D75GFBV6.js.map +0 -1
  410. package/dist/tabs-S00a8qq8.js +0 -106
  411. package/dist/tabs-S00a8qq8.js.map +0 -1
  412. package/dist/types.d.ts +0 -26
  413. package/dist/types.d.ts.map +0 -1
  414. package/dist/use-translations-BwLKTrZv.js +0 -10
  415. package/dist/use-translations-BwLKTrZv.js.map +0 -1
package/ai/SKILL.md ADDED
@@ -0,0 +1,233 @@
1
+ ---
2
+ name: g4rcez-components
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 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
+ ---
13
+
14
+ Loaded automatically when this package is present. Read fully before writing or modifying UI.
15
+
16
+ # @g4rcez/components — Agent Skill
17
+
18
+ A React design system built on Tailwind CSS and design tokens. This skill covers
19
+ installation, Tailwind setup (v3 and v4), theming APIs, conventions, the full
20
+ component catalog, and migration from native HTML patterns.
21
+
22
+ ---
23
+
24
+ ## 1 — Installation
25
+
26
+ ```bash
27
+ pnpm add @g4rcez/components
28
+ ```
29
+
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
42
+
43
+ ### v3 (preset-based)
44
+
45
+ Add the library preset to `tailwind.config.ts`. The preset registers all design tokens as Tailwind utilities.
46
+
47
+ ```ts
48
+ import preset from "@g4rcez/components/preset.tailwind";
49
+
50
+ export default {
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"],
74
+ };
75
+ ```
76
+
77
+ ### Theme class (required for both versions)
78
+
79
+ Apply `light` or `dark` on your root element:
80
+
81
+ ```tsx
82
+ <html className="light">...</html>
83
+ // or
84
+ <html className="dark">...</html>
85
+ ```
86
+
87
+ ### ComponentsProvider (optional, required for dark-mode toggle)
88
+
89
+ Wrap your app root to enable i18n strings, locale-aware masks, and `Modal.confirm`:
90
+
91
+ ```tsx
92
+ import { ComponentsProvider } from "@g4rcez/components";
93
+
94
+ export default function App({ children }) {
95
+ return <ComponentsProvider locale="en-US">{children}</ComponentsProvider>;
96
+ }
97
+ ```
98
+
99
+ ---
100
+
101
+ ## 3 — Theme Setup with createTokenStyles
102
+
103
+ Use `createTokenStyles` to generate scoped CSS strings for light and dark themes, then inject them into `<head>` via a `<style>` element.
104
+
105
+ ```ts
106
+ import { createTokenStyles, createCssProperties, type TokenRemap } from "@g4rcez/components";
107
+ ```
108
+
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
113
+
114
+ ### Two-theme pattern (light + dark)
115
+
116
+ ```tsx
117
+ import { createTokenStyles, type TokenRemap, defaultLightTheme, defaultDarkTheme } from "@g4rcez/components";
118
+
119
+ const tokenRemap: TokenRemap = {
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
+ },
125
+ };
126
+
127
+ const stylesLight = createTokenStyles(defaultLightTheme, tokenRemap);
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.
132
+ ```
133
+
134
+ ---
135
+
136
+ ## 4 — TokenRemap
137
+
138
+ `TokenRemap` transforms each design token value before it is emitted as a CSS custom property.
139
+
140
+ ```ts
141
+ export type TokenRemap = Partial<Record<"colors" | "spacing" | "rounded" | "customTokens" | "zIndex", (t: Token) => Token> & { name: string }>;
142
+ ```
143
+
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%)`.
145
+
146
+ ---
147
+
148
+ ## 5 — ComponentsProvider & Tweaks
149
+
150
+ ```tsx
151
+ import { ComponentsProvider, type Tweaks, parsers } from "@g4rcez/components";
152
+
153
+ const tweaks: Tweaks = {
154
+ table: {
155
+ sorters: true,
156
+ filters: true,
157
+ operations: true,
158
+ sticky: 55,
159
+ },
160
+ };
161
+
162
+ <ComponentsProvider locale="en-US" tweaks={tweaks} parser={parsers.hsla}>
163
+ {children}
164
+ </ComponentsProvider>;
165
+ ```
166
+
167
+ ---
168
+
169
+ ## 6 — Key Conventions
170
+
171
+ ### Never use raw Tailwind color classes
172
+
173
+ ```tsx
174
+ // Wrong
175
+ <div className="bg-blue-500 text-white">...</div>
176
+
177
+ // Right — use design-token classes
178
+ <div className="bg-primary text-primary-foreground">...</div>
179
+ ```
180
+
181
+ ### Always use component `theme` / `variant` props
182
+
183
+ ```tsx
184
+ // Wrong
185
+ <button className="bg-red-600 text-white">Delete</button>
186
+
187
+ // Right
188
+ <Button theme="danger">Delete</Button>
189
+ ```
190
+
191
+ ---
192
+
193
+ ## 7 — Component Catalog
194
+
195
+ The library supports both barrel imports and sub-path imports for tree-shaking:
196
+
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`
202
+
203
+ See `@g4rcez/components/ai/docs/index.md` for the complete export list.
204
+
205
+ ---
206
+
207
+ ## 8 — Migration from Native HTML
208
+
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`
218
+
219
+ ---
220
+
221
+ ## 9 — Per-Component Documentation
222
+
223
+ Each component has a dedicated doc page with full props, design tokens, and usage examples:
224
+
225
+ `@g4rcez/components/ai/docs/<ComponentName>.md`
226
+
227
+ Examples:
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 ADDED
@@ -0,0 +1,166 @@
1
+ ---
2
+ title: Alert
3
+ description: Collapsible, themed alert banner for displaying important messages and status updates.
4
+ package: "@g4rcez/components"
5
+ export: "{ Alert }"
6
+ import: "import { Alert } from '@g4rcez/components/alert'"
7
+ category: display
8
+ ---
9
+
10
+ # Alert
11
+
12
+ Collapsible, themed alert banner for displaying important messages and status updates.
13
+
14
+ ## Import
15
+
16
+ ```tsx
17
+ import { Alert } from "@g4rcez/components/alert";
18
+ ```
19
+
20
+ ## Props
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 |
33
+
34
+ ## Design Tokens
35
+
36
+ Tokens this component reads. Customize by overriding these CSS variables in your theme.
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 |
46
+
47
+ Themes: `primary`, `secondary`, `info`, `warn`, `danger`, `success`, `neutral`.
48
+
49
+ ## Themes
50
+
51
+ Each theme maps to a set of `bg-alert-{theme}-*` tokens and provides default icons for some variants:
52
+
53
+ | Theme | Default Icon |
54
+ | ----------------------------------- | ------------------- |
55
+ | `success` | `CheckCircleIcon` |
56
+ | `info` | `InfoIcon` |
57
+ | `danger` | `TriangleAlertIcon` |
58
+ | `warn` | — |
59
+ | `primary` / `secondary` / `neutral` | — |
60
+
61
+ ## Examples
62
+
63
+ ### Basic Variants
64
+
65
+ ```tsx
66
+ <Alert theme="info" title="Information">
67
+ This is an informational message.
68
+ </Alert>
69
+
70
+ <Alert theme="success" title="Success">
71
+ Your changes have been saved successfully.
72
+ </Alert>
73
+
74
+ <Alert theme="warn" title="Warning">
75
+ Please review your input before proceeding.
76
+ </Alert>
77
+
78
+ <Alert theme="danger" title="Error">
79
+ Something went wrong. Please try again.
80
+ </Alert>
81
+ ```
82
+
83
+ ### With Custom Icon
84
+
85
+ ```tsx
86
+ import { BellIcon } from "@phosphor-icons/react";
87
+
88
+ <Alert theme="info" title="Notification" Icon={<BellIcon size={20} />}>
89
+ You have new messages.
90
+ </Alert>;
91
+ ```
92
+
93
+ ### Dismissible Alert
94
+
95
+ ```tsx
96
+ const [showAlert, setShowAlert] = useState(true);
97
+
98
+ <Alert theme="success" title="Welcome!" open={showAlert} onClose={() => setShowAlert(false)}>
99
+ Thanks for joining our platform.
100
+ </Alert>;
101
+ ```
102
+
103
+ ### Rich Content
104
+
105
+ ```tsx
106
+ import { Button } from "@g4rcez/components/button";
107
+
108
+ <Alert theme="info" title="Update Available">
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>;
119
+ ```
120
+
121
+ ### Form Validation
122
+
123
+ ```tsx
124
+ const [errors, setErrors] = useState<string[]>([]);
125
+
126
+ <Alert theme="danger" title="Validation Errors" open={errors.length > 0}>
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>;
133
+ ```
134
+
135
+ ## Do
136
+
137
+ - Use `theme` to match message severity (`danger` for errors, `success` for completions, `warn` for cautions).
138
+ - Provide a concise, descriptive `title` so users immediately understand the alert.
139
+ - Supply `onClose` when the alert should be user-dismissible.
140
+ - Use design-token classes for any wrapper elements (`bg-background`, `border-border`).
141
+
142
+ ## Don't
143
+
144
+ - Don't pass raw Tailwind color classes (`bg-blue-500`, `text-white`, `border-gray-300`) — use `theme` or design tokens instead.
145
+ - Don't use arbitrary Tailwind values (`bg-[#abc]`, `bg-[--my-var]`) — override CSS variables in your `@theme` block instead.
146
+ - Don't use `danger` for non-critical information; use `warn` or `info` instead.
147
+ - Don't omit `onClose` if the alert must be dismissible — the close button only renders when the prop is provided.
148
+
149
+ ## Accessibility
150
+
151
+ - Renders with `role="alert"` for immediate screen reader announcement.
152
+ - Title uses a semantic `h4` element for proper heading hierarchy.
153
+ - Close button is keyboard accessible and uses a visible icon.
154
+ - The `aria-hidden` attribute on the collapse wrapper prevents interaction with hidden content.
155
+
156
+ ## Data Attributes
157
+
158
+ - `data-component="alert"` — outer wrapper element.
159
+ - `data-theme` — current theme variant (e.g. `"danger"`).
160
+ - `data-open` — current visibility state (`"true"` / `"false"`).
161
+
162
+ ## Notes
163
+
164
+ - Animation uses Framer Motion (`motion/react`): 0.7 s collapse/expand with spring easing.
165
+ - When `open` becomes `false`, the alert collapses and is removed from the DOM via `AnimatePresence`.
166
+ - The component is polymorphic — pass `as="section"` or any other element type via the `as` prop.
package/ai/docs/AnimatedList.md ADDED
@@ -0,0 +1,206 @@
1
+ ---
2
+ title: AnimatedList
3
+ description: Animated list that expands each item into a floating detail overlay on click.
4
+ package: "@g4rcez/components"
5
+ export: "{ AnimatedList, AnimatedListItem }"
6
+ import: "import { AnimatedList, AnimatedListItem } from '@g4rcez/components'"
7
+ category: display
8
+ ---
9
+
10
+ # AnimatedList
11
+
12
+ Animated list that expands each item into a floating detail overlay on click.
13
+
14
+ ## Import
15
+
16
+ ```tsx
17
+ import { AnimatedList, AnimatedListItem } from "@g4rcez/components";
18
+ ```
19
+
20
+ ## Props
21
+
22
+ ### AnimatedList
23
+
24
+ | Prop | Type | Default | Description |
25
+ | ---------- | ----------------- | ------- | ---------------------------------------- |
26
+ | `children` | `React.ReactNode` | — | One or more `AnimatedListItem` elements. |
27
+
28
+ ### AnimatedListItem
29
+
30
+ | Prop | Type | Default | Description |
31
+ | ------------- | -------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
32
+ | `title` | `Label` | — | Primary heading shown in the list row and the overlay header. |
33
+ | `description` | `Label` | — | Secondary text shown below the title in both the row and overlay header. |
34
+ | `children` | `Label` | — | Content rendered inside the expanded overlay below the header. |
35
+ | `avatar` | `Label` | — | Optional node (icon, image, or element) shown at the leading edge of the row. |
36
+ | `leading` | `React.FC<{ open: () => void }>` | — | Optional render-prop component placed at the trailing edge of the row. Receives an `open` function to trigger the overlay programmatically. |
37
+
38
+ `Label` is `string | number | ReactNode`.
39
+
40
+ ## Design Tokens
41
+
42
+ Tokens this component reads. Customize by overriding these CSS variables in your theme.
43
+
44
+ | Token | CSS Variable | Purpose |
45
+ | --------------------- | -------------------- | ------------------------------------------- |
46
+ | `border-card-border` | `--card-border` | Row separator border and overlay border |
47
+ | `bg-card-background` | `--card-background` | Overlay card background |
48
+ | `rounded-card` | `--radius-card` | Overlay card border radius |
49
+ | `shadow-shadow-card` | `--shadow-card` | Overlay card drop shadow |
50
+ | `text-foreground` | `--foreground` | Default row and overlay text color |
51
+ | `text-secondary` | `--secondary` | Description text color in rows and overlay |
52
+ | `text-primary` | `--primary` | Row title hover color |
53
+ | `text-danger` | `--danger` | Close button hover color |
54
+ | `bg-floating-overlay` | `--floating-overlay` | Overlay backdrop tint (used at 70% opacity) |
55
+ | `z-floating` | `--z-floating` | `z-index` for the overlay (value: 22) |
56
+ | `z-overlay` | `--z-overlay` | `z-index` for the backdrop scrim |
57
+
58
+ ## Examples
59
+
60
+ ### Basic list
61
+
62
+ ```tsx
63
+ import { AnimatedList, AnimatedListItem } from "@g4rcez/components";
64
+
65
+ const items = [
66
+ { id: "1", name: "Alice Johnson", role: "Engineering" },
67
+ { id: "2", name: "Bob Smith", role: "Design" },
68
+ ];
69
+
70
+ export function TeamList() {
71
+ return (
72
+ <AnimatedList>
73
+ {items.map((member) => (
74
+ <AnimatedListItem key={member.id} title={member.name} description={member.role}>
75
+ <p className="text-foreground">Full profile details for {member.name}.</p>
76
+ </AnimatedListItem>
77
+ ))}
78
+ </AnimatedList>
79
+ );
80
+ }
81
+ ```
82
+
83
+ ### With avatar
84
+
85
+ ```tsx
86
+ import { AnimatedList, AnimatedListItem } from "@g4rcez/components";
87
+ import { UserCircleIcon } from "@phosphor-icons/react";
88
+
89
+ export function UserDirectory() {
90
+ return (
91
+ <AnimatedList>
92
+ <AnimatedListItem
93
+ title="Carol White"
94
+ description="Product Manager"
95
+ avatar={<UserCircleIcon size={40} className="text-muted-foreground" />}
96
+ >
97
+ <div className="flex flex-col gap-2 text-foreground">
98
+ <p>Department: Product</p>
99
+ <p>Location: San Francisco</p>
100
+ </div>
101
+ </AnimatedListItem>
102
+ </AnimatedList>
103
+ );
104
+ }
105
+ ```
106
+
107
+ ### With trailing action using `leading`
108
+
109
+ ```tsx
110
+ import { AnimatedList, AnimatedListItem } from "@g4rcez/components";
111
+ import { Button } from "@g4rcez/components/button";
112
+
113
+ export function OrderList({ orders }: { orders: Order[] }) {
114
+ return (
115
+ <AnimatedList>
116
+ {orders.map((order) => (
117
+ <AnimatedListItem
118
+ key={order.id}
119
+ title={`Order #${order.id}`}
120
+ description={`Total: ${order.total}`}
121
+ leading={({ open }) => (
122
+ <Button size="small" theme="ghost-muted" onClick={open}>
123
+ View details
124
+ </Button>
125
+ )}
126
+ >
127
+ <OrderDetailContent order={order} />
128
+ </AnimatedListItem>
129
+ ))}
130
+ </AnimatedList>
131
+ );
132
+ }
133
+ ```
134
+
135
+ ### Activity feed
136
+
137
+ ```tsx
138
+ import { AnimatedList, AnimatedListItem } from "@g4rcez/components";
139
+ import { BellIcon, CheckCircleIcon, WarningIcon } from "@phosphor-icons/react";
140
+
141
+ const activities = [
142
+ {
143
+ id: "a1",
144
+ icon: <CheckCircleIcon size={20} className="text-success" />,
145
+ title: "Deployment succeeded",
146
+ description: "2 minutes ago",
147
+ detail: "All 3 services started.",
148
+ },
149
+ {
150
+ id: "a2",
151
+ icon: <WarningIcon size={20} className="text-warn" />,
152
+ title: "High memory usage",
153
+ description: "15 minutes ago",
154
+ detail: "Instance i-0ab2c was at 91%.",
155
+ },
156
+ ];
157
+
158
+ export function ActivityFeed() {
159
+ return (
160
+ <AnimatedList>
161
+ {activities.map((a) => (
162
+ <AnimatedListItem key={a.id} title={a.title} description={a.description} avatar={a.icon}>
163
+ <p className="text-sm text-muted-foreground">{a.detail}</p>
164
+ </AnimatedListItem>
165
+ ))}
166
+ </AnimatedList>
167
+ );
168
+ }
169
+ ```
170
+
171
+ ## Do
172
+
173
+ - Keep `title` and `description` concise — they share one row and truncation is not automatic.
174
+ - Provide meaningful `children` content in the overlay; it should justify opening the detail view.
175
+ - Use `leading` to surface a primary call-to-action without forcing the user to click the title.
176
+ - Use design-token classes for any content inside the overlay (`bg-card-background`, `text-foreground`, `border-card-border`).
177
+
178
+ ## Don't
179
+
180
+ - Don't pass raw Tailwind color classes (`bg-blue-500`, `text-white`, `border-gray-300`) — use design tokens instead.
181
+ - Don't use arbitrary Tailwind values (`bg-[#abc]`, `bg-[--my-var]`) — override CSS variables in your `@theme` block instead.
182
+ - Don't use `AnimatedList` for purely informational lists with no actionable detail — use a plain `<ul>` or the `List` component instead.
183
+ - Don't embed full sub-applications inside the overlay `children`; keep the detail view focused and lightweight.
184
+ - Don't rely on `AnimatedListItem` rendering its `children` directly — it renders nothing on its own; all rendering is managed by the parent `AnimatedList`.
185
+
186
+ ## Accessibility
187
+
188
+ - The list renders as a semantic `<ul role="list">`.
189
+ - Each item's title/description area is a `<button>` that triggers the overlay, making it keyboard accessible.
190
+ - The overlay uses `FloatingFocusManager` to trap focus and `FloatingOverlay` with `lockScroll` to prevent background interaction.
191
+ - Pressing `Escape` or clicking outside the overlay dismisses it.
192
+ - The close button inside the overlay is a focusable `<button>` element.
193
+ - `MotionConfig reducedMotion="user"` respects the user's system-level reduced-motion preference.
194
+
195
+ ## Data Attributes
196
+
197
+ - `data-component="collapse"` — internal animation wrapper (referenced in motion layout animations).
198
+ - `layoutId="item-{id}"` — shared between the list row and the overlay card to drive the expand/collapse shared-element animation.
199
+ - `layoutId="toast-{id}"` — inner content wrapper used for coordinated layout transitions.
200
+
201
+ ## Notes
202
+
203
+ - Animations use `motion/react` shared layout (`layoutId`) so the item smoothly expands from its row position into the centered overlay.
204
+ - The overlay is rendered in a `FloatingPortal`, outside the normal DOM tree, to avoid stacking-context issues.
205
+ - Only one item can be open at a time; opening a new item first closes the current one.
206
+ - `AnimatedListItem` is a thin shell component — it returns `Fragment` and holds no state. All logic lives in `AnimatedList`, which reads child `props` via `React.Children.toArray`.