@ds-mo/ui 0.2.4 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (356) hide show
  1. package/dist/components/ds-accordion.d.ts +11 -0
  2. package/dist/components/ds-accordion.js +2 -0
  3. package/dist/components/ds-accordion.js.map +1 -0
  4. package/dist/components/ds-badge.d.ts +11 -0
  5. package/dist/components/ds-badge.js +2 -0
  6. package/dist/components/ds-badge.js.map +1 -0
  7. package/dist/components/ds-banner.d.ts +11 -0
  8. package/dist/components/ds-banner.js +2 -0
  9. package/dist/components/ds-banner.js.map +1 -0
  10. package/dist/components/ds-breadcrumb.d.ts +11 -0
  11. package/dist/components/ds-breadcrumb.js +2 -0
  12. package/dist/components/ds-breadcrumb.js.map +1 -0
  13. package/dist/components/ds-button.d.ts +11 -0
  14. package/dist/components/ds-button.js +2 -0
  15. package/dist/components/ds-button.js.map +1 -0
  16. package/dist/components/ds-card.d.ts +11 -0
  17. package/dist/components/ds-card.js +2 -0
  18. package/dist/components/ds-card.js.map +1 -0
  19. package/dist/components/ds-checkbox.d.ts +11 -0
  20. package/dist/components/ds-checkbox.js +2 -0
  21. package/dist/components/ds-checkbox.js.map +1 -0
  22. package/dist/components/ds-divider.d.ts +11 -0
  23. package/dist/components/ds-divider.js +2 -0
  24. package/dist/components/ds-divider.js.map +1 -0
  25. package/dist/components/ds-empty-state.d.ts +11 -0
  26. package/dist/components/ds-empty-state.js +2 -0
  27. package/dist/components/ds-empty-state.js.map +1 -0
  28. package/dist/components/ds-fade.d.ts +11 -0
  29. package/dist/components/ds-fade.js +2 -0
  30. package/dist/components/ds-fade.js.map +1 -0
  31. package/dist/components/ds-field.d.ts +11 -0
  32. package/dist/components/ds-field.js +2 -0
  33. package/dist/components/ds-field.js.map +1 -0
  34. package/dist/components/ds-header.d.ts +11 -0
  35. package/dist/components/ds-header.js +2 -0
  36. package/dist/components/ds-header.js.map +1 -0
  37. package/dist/components/ds-input.d.ts +11 -0
  38. package/dist/components/ds-input.js +2 -0
  39. package/dist/components/ds-input.js.map +1 -0
  40. package/dist/components/ds-loader.d.ts +11 -0
  41. package/dist/components/ds-loader.js +2 -0
  42. package/dist/components/ds-loader.js.map +1 -0
  43. package/dist/components/ds-menu.d.ts +11 -0
  44. package/dist/components/ds-menu.js +2 -0
  45. package/dist/components/ds-menu.js.map +1 -0
  46. package/dist/components/ds-modal.d.ts +11 -0
  47. package/dist/components/ds-modal.js +2 -0
  48. package/dist/components/ds-modal.js.map +1 -0
  49. package/dist/components/ds-pagination.d.ts +11 -0
  50. package/dist/components/ds-pagination.js +2 -0
  51. package/dist/components/ds-pagination.js.map +1 -0
  52. package/dist/components/ds-radio-group.d.ts +11 -0
  53. package/dist/components/ds-radio-group.js +2 -0
  54. package/dist/components/ds-radio-group.js.map +1 -0
  55. package/dist/components/ds-scrollbar.d.ts +11 -0
  56. package/dist/components/ds-scrollbar.js +2 -0
  57. package/dist/components/ds-scrollbar.js.map +1 -0
  58. package/dist/components/ds-sidebar.d.ts +11 -0
  59. package/dist/components/ds-sidebar.js +2 -0
  60. package/dist/components/ds-sidebar.js.map +1 -0
  61. package/dist/components/ds-skeleton.d.ts +11 -0
  62. package/dist/components/ds-skeleton.js +2 -0
  63. package/dist/components/ds-skeleton.js.map +1 -0
  64. package/dist/components/ds-slider.d.ts +11 -0
  65. package/dist/components/ds-slider.js +2 -0
  66. package/dist/components/ds-slider.js.map +1 -0
  67. package/dist/components/ds-surface.d.ts +11 -0
  68. package/dist/components/ds-surface.js +2 -0
  69. package/dist/components/ds-surface.js.map +1 -0
  70. package/dist/components/ds-tab-group.d.ts +11 -0
  71. package/dist/components/ds-tab-group.js +2 -0
  72. package/dist/components/ds-tab-group.js.map +1 -0
  73. package/dist/components/ds-table.d.ts +11 -0
  74. package/dist/components/ds-table.js +2 -0
  75. package/dist/components/ds-table.js.map +1 -0
  76. package/dist/components/ds-tag.d.ts +11 -0
  77. package/dist/components/ds-tag.js +2 -0
  78. package/dist/components/ds-tag.js.map +1 -0
  79. package/dist/components/ds-text.d.ts +11 -0
  80. package/dist/components/ds-text.js +2 -0
  81. package/dist/components/ds-text.js.map +1 -0
  82. package/dist/components/ds-toast-provider.d.ts +11 -0
  83. package/dist/components/ds-toast-provider.js +2 -0
  84. package/dist/components/ds-toast-provider.js.map +1 -0
  85. package/dist/components/ds-toggle.d.ts +11 -0
  86. package/dist/components/ds-toggle.js +2 -0
  87. package/dist/components/ds-toggle.js.map +1 -0
  88. package/dist/components/ds-tooltip.d.ts +11 -0
  89. package/dist/components/ds-tooltip.js +2 -0
  90. package/dist/components/ds-tooltip.js.map +1 -0
  91. package/dist/components/index.d.ts +33 -0
  92. package/dist/components/index.js +2 -0
  93. package/dist/components/index.js.map +1 -0
  94. package/dist/components/p-BcuUR5Ao.js +2 -0
  95. package/dist/components/p-BcuUR5Ao.js.map +1 -0
  96. package/dist/types/.stencil/Accordion/Accordion.d.ts +28 -0
  97. package/dist/types/.stencil/Badge/Badge.d.ts +8 -0
  98. package/dist/types/.stencil/Badge/index.d.ts +2 -0
  99. package/dist/types/.stencil/Banner/Banner.d.ts +29 -0
  100. package/dist/types/.stencil/Breadcrumb/Breadcrumb.d.ts +16 -0
  101. package/dist/types/.stencil/Button/Button.d.ts +38 -0
  102. package/dist/types/.stencil/Button/index.d.ts +2 -0
  103. package/dist/types/.stencil/Card/Card.d.ts +8 -0
  104. package/dist/types/.stencil/Checkbox/Checkbox.d.ts +13 -0
  105. package/dist/types/.stencil/Checkbox/index.d.ts +2 -0
  106. package/dist/types/.stencil/Divider/Divider.d.ts +7 -0
  107. package/dist/types/.stencil/Divider/index.d.ts +2 -0
  108. package/dist/types/.stencil/EmptyState/EmptyState.d.ts +7 -0
  109. package/dist/types/.stencil/Fade/Fade.d.ts +10 -0
  110. package/dist/types/.stencil/Fade/index.d.ts +2 -0
  111. package/dist/types/.stencil/Field/Field.d.ts +8 -0
  112. package/dist/types/.stencil/Header/Header.d.ts +7 -0
  113. package/dist/types/.stencil/Input/Input.d.ts +26 -0
  114. package/dist/types/.stencil/Input/index.d.ts +2 -0
  115. package/dist/types/.stencil/Loader/Loader.d.ts +12 -0
  116. package/dist/types/.stencil/Loader/index.d.ts +2 -0
  117. package/dist/types/.stencil/Menu/Menu.d.ts +60 -0
  118. package/dist/types/.stencil/Modal/Modal.d.ts +31 -0
  119. package/dist/types/.stencil/Pagination/Pagination.d.ts +11 -0
  120. package/dist/types/.stencil/RadioGroup/RadioGroup.d.ts +21 -0
  121. package/dist/types/.stencil/RadioGroup/index.d.ts +2 -0
  122. package/dist/types/.stencil/Scrollbar/Scrollbar.d.ts +27 -0
  123. package/dist/types/.stencil/Sidebar/Sidebar.d.ts +29 -0
  124. package/dist/types/.stencil/Skeleton/Skeleton.d.ts +16 -0
  125. package/dist/types/.stencil/Skeleton/index.d.ts +2 -0
  126. package/dist/types/.stencil/Slider/Slider.d.ts +18 -0
  127. package/dist/types/.stencil/Slider/index.d.ts +2 -0
  128. package/dist/types/.stencil/Surface/Surface.d.ts +22 -0
  129. package/dist/types/.stencil/TabGroup/TabGroup.d.ts +29 -0
  130. package/dist/types/.stencil/Table/Table.d.ts +50 -0
  131. package/dist/types/.stencil/Tag/Tag.d.ts +32 -0
  132. package/dist/types/.stencil/Tag/index.d.ts +2 -0
  133. package/dist/types/.stencil/Text/Text.d.ts +22 -0
  134. package/dist/types/.stencil/Text/index.d.ts +2 -0
  135. package/dist/types/.stencil/Toast/Toast.d.ts +15 -0
  136. package/dist/types/.stencil/Toast/toast-service.d.ts +24 -0
  137. package/dist/types/.stencil/Toggle/Toggle.d.ts +10 -0
  138. package/dist/types/.stencil/Toggle/index.d.ts +2 -0
  139. package/dist/types/.stencil/Tooltip/Tooltip.d.ts +36 -0
  140. package/dist/types/components.d.ts +2024 -0
  141. package/dist/types/stencil-public-runtime.d.ts +1860 -0
  142. package/package.json +33 -29
  143. package/src/angular/angular-component-lib/utils.ts +65 -0
  144. package/src/angular/index.ts +35 -0
  145. package/src/angular/proxies.ts +819 -0
  146. package/dist/index.css +0 -2
  147. package/dist/index.d.ts +0 -969
  148. package/dist/index.js +0 -2492
  149. package/dist/index.js.map +0 -1
  150. package/dist/r/accordion.json +0 -79
  151. package/dist/r/badge.json +0 -69
  152. package/dist/r/banner.json +0 -90
  153. package/dist/r/breadcrumb.json +0 -70
  154. package/dist/r/button-group.json +0 -65
  155. package/dist/r/button.json +0 -137
  156. package/dist/r/card.json +0 -82
  157. package/dist/r/checkbox.json +0 -91
  158. package/dist/r/divider.json +0 -57
  159. package/dist/r/empty-state.json +0 -69
  160. package/dist/r/error-boundary.json +0 -66
  161. package/dist/r/fade.json +0 -65
  162. package/dist/r/field.json +0 -71
  163. package/dist/r/header.json +0 -67
  164. package/dist/r/input.json +0 -77
  165. package/dist/r/loader.json +0 -54
  166. package/dist/r/menu.json +0 -130
  167. package/dist/r/modal.json +0 -93
  168. package/dist/r/pagination.json +0 -80
  169. package/dist/r/radio.json +0 -85
  170. package/dist/r/registry.json +0 -1600
  171. package/dist/r/scrollbar.json +0 -68
  172. package/dist/r/select.json +0 -93
  173. package/dist/r/sidebar.json +0 -105
  174. package/dist/r/skeleton.json +0 -72
  175. package/dist/r/slider.json +0 -87
  176. package/dist/r/surface.json +0 -97
  177. package/dist/r/tab-group.json +0 -72
  178. package/dist/r/tab.json +0 -71
  179. package/dist/r/table.json +0 -110
  180. package/dist/r/tag.json +0 -110
  181. package/dist/r/text.json +0 -94
  182. package/dist/r/toast.json +0 -77
  183. package/dist/r/toggle-button-group.json +0 -65
  184. package/dist/r/toggle-button.json +0 -94
  185. package/dist/r/toggle.json +0 -65
  186. package/dist/r/tooltip.json +0 -86
  187. package/src/components/Accordion/Accordion.module.css +0 -66
  188. package/src/components/Accordion/Accordion.stories.tsx +0 -95
  189. package/src/components/Accordion/Accordion.tsx +0 -122
  190. package/src/components/Accordion/index.ts +0 -2
  191. package/src/components/Badge/Badge.module.css +0 -6
  192. package/src/components/Badge/Badge.stories.tsx +0 -99
  193. package/src/components/Badge/Badge.tsx +0 -23
  194. package/src/components/Badge/index.ts +0 -2
  195. package/src/components/Banner/Banner.module.css +0 -67
  196. package/src/components/Banner/Banner.stories.tsx +0 -81
  197. package/src/components/Banner/Banner.tsx +0 -109
  198. package/src/components/Banner/index.ts +0 -2
  199. package/src/components/Breadcrumb/Breadcrumb.module.css +0 -46
  200. package/src/components/Breadcrumb/Breadcrumb.stories.tsx +0 -72
  201. package/src/components/Breadcrumb/Breadcrumb.tsx +0 -68
  202. package/src/components/Breadcrumb/index.ts +0 -2
  203. package/src/components/Button/Button.mdx +0 -143
  204. package/src/components/Button/Button.module.css +0 -343
  205. package/src/components/Button/Button.stories.tsx +0 -575
  206. package/src/components/Button/Button.tsx +0 -201
  207. package/src/components/Button/index.ts +0 -10
  208. package/src/components/ButtonGroup/ButtonGroup.module.css +0 -157
  209. package/src/components/ButtonGroup/ButtonGroup.stories.tsx +0 -384
  210. package/src/components/ButtonGroup/ButtonGroup.tsx +0 -122
  211. package/src/components/ButtonGroup/index.ts +0 -2
  212. package/src/components/Card/Card.module.css +0 -36
  213. package/src/components/Card/Card.stories.tsx +0 -78
  214. package/src/components/Card/Card.tsx +0 -53
  215. package/src/components/Card/index.ts +0 -2
  216. package/src/components/Checkbox/Checkbox.module.css +0 -47
  217. package/src/components/Checkbox/Checkbox.stories.tsx +0 -129
  218. package/src/components/Checkbox/Checkbox.tsx +0 -68
  219. package/src/components/Checkbox/index.ts +0 -2
  220. package/src/components/Divider/Divider.module.css +0 -19
  221. package/src/components/Divider/Divider.stories.tsx +0 -55
  222. package/src/components/Divider/Divider.tsx +0 -28
  223. package/src/components/Divider/index.ts +0 -2
  224. package/src/components/EmptyState/EmptyState.module.css +0 -8
  225. package/src/components/EmptyState/EmptyState.stories.tsx +0 -53
  226. package/src/components/EmptyState/EmptyState.tsx +0 -31
  227. package/src/components/EmptyState/index.ts +0 -2
  228. package/src/components/ErrorBoundary/ErrorBoundary.module.css +0 -18
  229. package/src/components/ErrorBoundary/ErrorBoundary.stories.tsx +0 -38
  230. package/src/components/ErrorBoundary/ErrorBoundary.tsx +0 -50
  231. package/src/components/ErrorBoundary/index.ts +0 -2
  232. package/src/components/Fade/Fade.module.css +0 -31
  233. package/src/components/Fade/Fade.stories.tsx +0 -35
  234. package/src/components/Fade/Fade.tsx +0 -33
  235. package/src/components/Fade/index.ts +0 -2
  236. package/src/components/Field/Field.module.css +0 -5
  237. package/src/components/Field/Field.stories.tsx +0 -111
  238. package/src/components/Field/Field.tsx +0 -22
  239. package/src/components/Field/index.ts +0 -2
  240. package/src/components/Header/Header.module.css +0 -33
  241. package/src/components/Header/Header.stories.tsx +0 -52
  242. package/src/components/Header/Header.tsx +0 -42
  243. package/src/components/Header/index.ts +0 -2
  244. package/src/components/Input/Input.module.css +0 -71
  245. package/src/components/Input/Input.stories.tsx +0 -135
  246. package/src/components/Input/Input.tsx +0 -76
  247. package/src/components/Input/index.ts +0 -2
  248. package/src/components/LabelWrap/LabelWrap.module.css +0 -34
  249. package/src/components/LabelWrap/LabelWrap.tsx +0 -32
  250. package/src/components/LabelWrap/index.ts +0 -1
  251. package/src/components/Loader/Loader.module.css +0 -9
  252. package/src/components/Loader/Loader.stories.tsx +0 -44
  253. package/src/components/Loader/Loader.tsx +0 -43
  254. package/src/components/Loader/index.ts +0 -2
  255. package/src/components/Menu/DestructiveMenuItem.module.css +0 -57
  256. package/src/components/Menu/DestructiveMenuItem.tsx +0 -64
  257. package/src/components/Menu/Menu.module.css +0 -49
  258. package/src/components/Menu/Menu.stories.tsx +0 -129
  259. package/src/components/Menu/Menu.tsx +0 -269
  260. package/src/components/Menu/MenuItem.module.css +0 -84
  261. package/src/components/Menu/MenuItem.tsx +0 -101
  262. package/src/components/Menu/index.ts +0 -6
  263. package/src/components/Modal/Modal.module.css +0 -67
  264. package/src/components/Modal/Modal.stories.tsx +0 -71
  265. package/src/components/Modal/Modal.tsx +0 -122
  266. package/src/components/Modal/index.ts +0 -2
  267. package/src/components/Pagination/Pagination.module.css +0 -64
  268. package/src/components/Pagination/Pagination.stories.tsx +0 -51
  269. package/src/components/Pagination/Pagination.tsx +0 -103
  270. package/src/components/Pagination/index.ts +0 -2
  271. package/src/components/Radio/Radio.module.css +0 -61
  272. package/src/components/Radio/Radio.stories.tsx +0 -101
  273. package/src/components/Radio/Radio.tsx +0 -108
  274. package/src/components/Radio/index.ts +0 -2
  275. package/src/components/Scrollbar/Scrollbar.module.css +0 -81
  276. package/src/components/Scrollbar/Scrollbar.stories.tsx +0 -46
  277. package/src/components/Scrollbar/Scrollbar.tsx +0 -187
  278. package/src/components/Scrollbar/index.ts +0 -2
  279. package/src/components/Select/Select.module.css +0 -31
  280. package/src/components/Select/Select.stories.tsx +0 -59
  281. package/src/components/Select/Select.tsx +0 -92
  282. package/src/components/Select/index.ts +0 -2
  283. package/src/components/Sidebar/Sidebar.module.css +0 -161
  284. package/src/components/Sidebar/Sidebar.stories.tsx +0 -125
  285. package/src/components/Sidebar/Sidebar.tsx +0 -129
  286. package/src/components/Sidebar/SidebarItem.tsx +0 -57
  287. package/src/components/Sidebar/SidebarSection.tsx +0 -42
  288. package/src/components/Sidebar/index.ts +0 -6
  289. package/src/components/Skeleton/Skeleton.module.css +0 -53
  290. package/src/components/Skeleton/Skeleton.stories.tsx +0 -89
  291. package/src/components/Skeleton/Skeleton.tsx +0 -66
  292. package/src/components/Skeleton/index.ts +0 -2
  293. package/src/components/Slider/Slider.module.css +0 -62
  294. package/src/components/Slider/Slider.stories.tsx +0 -120
  295. package/src/components/Slider/Slider.tsx +0 -74
  296. package/src/components/Slider/index.ts +0 -2
  297. package/src/components/Surface/Surface.module.css +0 -222
  298. package/src/components/Surface/Surface.stories.tsx +0 -213
  299. package/src/components/Surface/Surface.tsx +0 -219
  300. package/src/components/Surface/index.ts +0 -12
  301. package/src/components/Tab/Tab.module.css +0 -66
  302. package/src/components/Tab/Tab.stories.tsx +0 -103
  303. package/src/components/Tab/Tab.tsx +0 -41
  304. package/src/components/Tab/index.ts +0 -2
  305. package/src/components/TabGroup/TabGroup.module.css +0 -26
  306. package/src/components/TabGroup/TabGroup.stories.tsx +0 -60
  307. package/src/components/TabGroup/TabGroup.tsx +0 -83
  308. package/src/components/TabGroup/index.ts +0 -2
  309. package/src/components/Table/Table.module.css +0 -130
  310. package/src/components/Table/Table.stories.tsx +0 -111
  311. package/src/components/Table/Table.tsx +0 -226
  312. package/src/components/Table/index.ts +0 -11
  313. package/src/components/Tag/Tag.module.css +0 -270
  314. package/src/components/Tag/Tag.stories.tsx +0 -399
  315. package/src/components/Tag/Tag.tsx +0 -162
  316. package/src/components/Tag/index.ts +0 -2
  317. package/src/components/Text/Text.module.css +0 -166
  318. package/src/components/Text/Text.stories.tsx +0 -212
  319. package/src/components/Text/Text.tsx +0 -181
  320. package/src/components/Text/index.ts +0 -13
  321. package/src/components/Toast/Toast.module.css +0 -91
  322. package/src/components/Toast/Toast.stories.tsx +0 -66
  323. package/src/components/Toast/Toast.tsx +0 -182
  324. package/src/components/Toast/index.ts +0 -8
  325. package/src/components/Toggle/Toggle.module.css +0 -87
  326. package/src/components/Toggle/Toggle.stories.tsx +0 -85
  327. package/src/components/Toggle/Toggle.tsx +0 -52
  328. package/src/components/Toggle/index.ts +0 -2
  329. package/src/components/ToggleButton/ToggleButton.module.css +0 -172
  330. package/src/components/ToggleButton/ToggleButton.stories.tsx +0 -299
  331. package/src/components/ToggleButton/ToggleButton.tsx +0 -118
  332. package/src/components/ToggleButton/index.ts +0 -2
  333. package/src/components/ToggleButtonGroup/ToggleButtonGroup.module.css +0 -163
  334. package/src/components/ToggleButtonGroup/ToggleButtonGroup.stories.tsx +0 -341
  335. package/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx +0 -111
  336. package/src/components/ToggleButtonGroup/index.ts +0 -2
  337. package/src/components/Tooltip/Tooltip.module.css +0 -45
  338. package/src/components/Tooltip/Tooltip.stories.tsx +0 -46
  339. package/src/components/Tooltip/Tooltip.tsx +0 -224
  340. package/src/components/Tooltip/index.ts +0 -2
  341. package/src/css-modules.d.ts +0 -4
  342. package/src/docs/ColorUsage.mdx +0 -195
  343. package/src/docs/ElevationUsage.mdx +0 -95
  344. package/src/docs/Introduction.mdx +0 -97
  345. package/src/docs/OpticalSizing.mdx +0 -178
  346. package/src/docs/TypographyUsage.mdx +0 -121
  347. package/src/index.ts +0 -154
  348. package/src/stories/Colors.stories.tsx +0 -528
  349. package/src/stories/Dimensions.stories.tsx +0 -200
  350. package/src/stories/Effects.stories.tsx +0 -231
  351. package/src/stories/Icons.stories.tsx +0 -159
  352. package/src/stories/Typography.stories.tsx +0 -157
  353. package/src/types/icons.ts +0 -15
  354. package/src/types/index.ts +0 -1
  355. package/src/utils/cn.ts +0 -6
  356. package/src/utils/css-tokens.ts +0 -22
package/dist/r/registry.json DELETED
@@ -1,1600 +0,0 @@
1
- {
2
- "$schema": "https://ui.shadcn.com/schema/registry.json",
3
- "name": "compomo",
4
- "homepage": "https://zainadeel.github.io/CompoMo/",
5
- "description": "CompoMo (@compomo/ui) — React component library from the ds-mo design system. Distributed as an npm package, not copy-paste. Components require @ds-mo/tokens for CSS custom properties and optionally @ds-mo/icons for icon props.",
6
- "meta": {
7
- "distribution": "npm",
8
- "install": "npm install @compomo/ui @ds-mo/tokens",
9
- "cssSetup": "import '@ds-mo/tokens/css'; // Provides design token CSS custom properties\nimport '@compomo/ui/css'; // Provides component styles",
10
- "themeSetup": "Set data-theme=\"dark\" on <html> for dark mode. Light is default.",
11
- "peerDependencies": {
12
- "required": [
13
- "react >=17",
14
- "react-dom >=17",
15
- "@ds-mo/tokens >=0.1.0"
16
- ],
17
- "optional": [
18
- "@ds-mo/icons >=0.1.0"
19
- ]
20
- }
21
- },
22
- "items": [
23
- {
24
- "name": "text",
25
- "title": "Text",
26
- "description": "Typography primitive supporting all design-system text variants, colors, truncation, and wrapping.",
27
- "type": "registry:ui",
28
- "meta": {
29
- "library": "@compomo/ui",
30
- "distribution": "npm",
31
- "storybook": "https://zainadeel.github.io/CompoMo/?path=/story/text",
32
- "exports": [
33
- "Text"
34
- ],
35
- "props": {
36
- "variant": {
37
- "type": "TextVariant",
38
- "required": false
39
- },
40
- "children": {
41
- "type": "React.ReactNode",
42
- "required": true
43
- },
44
- "color": {
45
- "type": "TextColor",
46
- "required": false
47
- },
48
- "as": {
49
- "type": "'p' | 'span' | 'div' | 'label' | 'h1'-'h6'",
50
- "required": false
51
- },
52
- "lineTruncation": {
53
- "type": "1 | 2 | 3 | 4 | 5 | \"none\"",
54
- "required": false
55
- },
56
- "decoration": {
57
- "type": "'none' | 'underline' | 'dotted-underline'",
58
- "required": false
59
- },
60
- "italic": {
61
- "type": "boolean",
62
- "required": false
63
- },
64
- "align": {
65
- "type": "'left' | 'center' | 'right'",
66
- "required": false
67
- },
68
- "wrap": {
69
- "type": "'wrap' | 'nowrap' | 'balance' | 'pretty'",
70
- "required": false
71
- }
72
- }
73
- },
74
- "dependencies": [
75
- "@compomo/ui",
76
- "@ds-mo/tokens"
77
- ],
78
- "registryDependencies": []
79
- },
80
- {
81
- "name": "surface",
82
- "title": "Surface",
83
- "description": "Foundational container with intent-based or background-based coloring, elevation, edges, radius, and interactive states.",
84
- "type": "registry:ui",
85
- "meta": {
86
- "library": "@compomo/ui",
87
- "distribution": "npm",
88
- "storybook": "https://zainadeel.github.io/CompoMo/?path=/story/surface",
89
- "exports": [
90
- "Surface"
91
- ],
92
- "props": {
93
- "intent": {
94
- "type": "'brand' | 'positive' | 'negative' | 'warning' | 'caution' | 'ai' | 'neutral' | 'walkthrough' | 'guide'",
95
- "required": false
96
- },
97
- "contrast": {
98
- "type": "'faint' | 'medium' | 'bold' | 'strong'",
99
- "required": false
100
- },
101
- "background": {
102
- "type": "'primary' | 'secondary' | 'transparent' | 'translucent'",
103
- "required": false
104
- },
105
- "elevation": {
106
- "type": "'none' | 'depressed' | 'depressed-md' | 'flat' | 'elevated' | 'floating' | 'overlayTop' | 'overlayRight' | 'overlayBottom' | 'overlayLeft'",
107
- "required": false
108
- },
109
- "edge": {
110
- "type": "SurfaceEdge | SurfaceEdge[]",
111
- "required": false
112
- },
113
- "radius": {
114
- "type": "'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | string",
115
- "required": false
116
- },
117
- "interactive": {
118
- "type": "boolean",
119
- "required": false
120
- },
121
- "selected": {
122
- "type": "boolean",
123
- "required": false
124
- },
125
- "inactive": {
126
- "type": "boolean",
127
- "required": false
128
- },
129
- "as": {
130
- "type": "'div' | 'section' | 'aside' | 'article' | 'header' | 'footer' | 'main' | 'nav' | 'span' | 'button' | 'td' | 'th'",
131
- "required": false
132
- }
133
- }
134
- },
135
- "dependencies": [
136
- "@compomo/ui",
137
- "@ds-mo/tokens"
138
- ],
139
- "registryDependencies": []
140
- },
141
- {
142
- "name": "card",
143
- "title": "Card",
144
- "description": "Content container with header, body, and footer sections. Supports elevation and radius presets.",
145
- "type": "registry:ui",
146
- "meta": {
147
- "library": "@compomo/ui",
148
- "distribution": "npm",
149
- "storybook": "https://zainadeel.github.io/CompoMo/?path=/story/card",
150
- "exports": [
151
- "Card"
152
- ],
153
- "props": {
154
- "children": {
155
- "type": "React.ReactNode",
156
- "required": true
157
- },
158
- "header": {
159
- "type": "React.ReactNode",
160
- "required": false
161
- },
162
- "footer": {
163
- "type": "React.ReactNode",
164
- "required": false
165
- },
166
- "elevation": {
167
- "type": "'flat' | 'elevated' | 'floating'",
168
- "required": false
169
- },
170
- "radius": {
171
- "type": "'sm' | 'md' | 'lg' | 'xl'",
172
- "required": false
173
- }
174
- }
175
- },
176
- "dependencies": [
177
- "@compomo/ui",
178
- "@ds-mo/tokens"
179
- ],
180
- "registryDependencies": [
181
- "surface"
182
- ]
183
- },
184
- {
185
- "name": "button",
186
- "title": "Button",
187
- "description": "Primary action component with variants (primary/secondary), 8 semantic intents, 4 sizes, icon support, loading state, dropdown indicator, badge count, and elevation levels.",
188
- "type": "registry:ui",
189
- "meta": {
190
- "library": "@compomo/ui",
191
- "distribution": "npm",
192
- "storybook": "https://zainadeel.github.io/CompoMo/?path=/story/button",
193
- "exports": [
194
- "Button"
195
- ],
196
- "props": {
197
- "label": {
198
- "type": "string",
199
- "required": false
200
- },
201
- "icon": {
202
- "type": "IconComponent",
203
- "required": false
204
- },
205
- "variant": {
206
- "type": "'primary' | 'secondary'",
207
- "required": false
208
- },
209
- "intent": {
210
- "type": "'none' | 'neutral' | 'brand' | 'ai' | 'negative' | 'warning' | 'caution' | 'positive'",
211
- "required": false
212
- },
213
- "size": {
214
- "type": "'xs' | 'sm' | 'md' | 'lg'",
215
- "required": false
216
- },
217
- "contrast": {
218
- "type": "'strong' | 'bold' | 'medium' | 'faint'",
219
- "required": false
220
- },
221
- "elevation": {
222
- "type": "'none' | 'flat' | 'elevated' | 'floating'",
223
- "required": false
224
- },
225
- "loading": {
226
- "type": "boolean",
227
- "required": false
228
- },
229
- "dropdown": {
230
- "type": "boolean",
231
- "required": false
232
- },
233
- "badgeCount": {
234
- "type": "number",
235
- "required": false
236
- },
237
- "rounded": {
238
- "type": "boolean",
239
- "required": false
240
- },
241
- "fullWidth": {
242
- "type": "boolean",
243
- "required": false
244
- },
245
- "inactive": {
246
- "type": "boolean",
247
- "required": false
248
- },
249
- "as": {
250
- "type": "React.ElementType",
251
- "required": false
252
- },
253
- "onClick": {
254
- "type": "(e: React.MouseEvent<HTMLElement>) => void",
255
- "required": false
256
- }
257
- }
258
- },
259
- "dependencies": [
260
- "@compomo/ui",
261
- "@ds-mo/tokens",
262
- "@ds-mo/icons"
263
- ],
264
- "registryDependencies": [
265
- "text",
266
- "loader",
267
- "label-wrap"
268
- ]
269
- },
270
- {
271
- "name": "toggle-button",
272
- "title": "ToggleButton",
273
- "description": "Controlled toggle button with pressed state, icon and label support.",
274
- "type": "registry:ui",
275
- "meta": {
276
- "library": "@compomo/ui",
277
- "distribution": "npm",
278
- "storybook": "https://zainadeel.github.io/CompoMo/?path=/story/toggle-button",
279
- "exports": [
280
- "ToggleButton"
281
- ],
282
- "props": {
283
- "pressed": {
284
- "type": "boolean",
285
- "required": true
286
- },
287
- "onPressedChange": {
288
- "type": "(pressed: boolean) => void",
289
- "required": true
290
- },
291
- "label": {
292
- "type": "string",
293
- "required": false
294
- },
295
- "icon": {
296
- "type": "IconComponent",
297
- "required": false
298
- },
299
- "size": {
300
- "type": "'md' | 'sm' | 'xs'",
301
- "required": false
302
- },
303
- "elevation": {
304
- "type": "'none' | 'flat' | 'elevated' | 'floating'",
305
- "required": false
306
- },
307
- "rounded": {
308
- "type": "boolean",
309
- "required": false
310
- },
311
- "inactive": {
312
- "type": "boolean",
313
- "required": false
314
- }
315
- }
316
- },
317
- "dependencies": [
318
- "@compomo/ui",
319
- "@ds-mo/tokens",
320
- "@ds-mo/icons"
321
- ],
322
- "registryDependencies": [
323
- "text"
324
- ]
325
- },
326
- {
327
- "name": "button-group",
328
- "title": "ButtonGroup",
329
- "description": "Groups Button children with automatic dividers and shared elevation/rounding. Reads props from first child to drive group styling.",
330
- "type": "registry:ui",
331
- "meta": {
332
- "library": "@compomo/ui",
333
- "distribution": "npm",
334
- "storybook": "https://zainadeel.github.io/CompoMo/?path=/story/button-group",
335
- "exports": [
336
- "ButtonGroup"
337
- ],
338
- "props": {
339
- "children": {
340
- "type": "React.ReactNode",
341
- "required": true
342
- }
343
- }
344
- },
345
- "dependencies": [
346
- "@compomo/ui",
347
- "@ds-mo/tokens"
348
- ],
349
- "registryDependencies": [
350
- "button"
351
- ]
352
- },
353
- {
354
- "name": "toggle-button-group",
355
- "title": "ToggleButtonGroup",
356
- "description": "Groups ToggleButton children with dividers and shared chrome.",
357
- "type": "registry:ui",
358
- "meta": {
359
- "library": "@compomo/ui",
360
- "distribution": "npm",
361
- "storybook": "https://zainadeel.github.io/CompoMo/?path=/story/toggle-button-group",
362
- "exports": [
363
- "ToggleButtonGroup"
364
- ],
365
- "props": {
366
- "children": {
367
- "type": "React.ReactNode",
368
- "required": true
369
- }
370
- }
371
- },
372
- "dependencies": [
373
- "@compomo/ui",
374
- "@ds-mo/tokens"
375
- ],
376
- "registryDependencies": [
377
- "toggle-button"
378
- ]
379
- },
380
- {
381
- "name": "tag",
382
- "title": "Tag",
383
- "description": "Semantic label with intent coloring, removable chip, pressable filter-chip mode, and icon support.",
384
- "type": "registry:ui",
385
- "meta": {
386
- "library": "@compomo/ui",
387
- "distribution": "npm",
388
- "storybook": "https://zainadeel.github.io/CompoMo/?path=/story/tag",
389
- "exports": [
390
- "Tag"
391
- ],
392
- "props": {
393
- "label": {
394
- "type": "string",
395
- "required": true
396
- },
397
- "intent": {
398
- "type": "'neutral' | 'brand' | 'ai' | 'negative' | 'warning' | 'caution' | 'positive'",
399
- "required": false
400
- },
401
- "contrast": {
402
- "type": "'strong' | 'bold' | 'medium' | 'faint'",
403
- "required": false
404
- },
405
- "size": {
406
- "type": "'md' | 'sm' | 'xs'",
407
- "required": false
408
- },
409
- "rounded": {
410
- "type": "boolean",
411
- "required": false
412
- },
413
- "icon": {
414
- "type": "IconComponent",
415
- "required": false
416
- },
417
- "removable": {
418
- "type": "boolean",
419
- "required": false
420
- },
421
- "onRemove": {
422
- "type": "() => void",
423
- "required": false
424
- },
425
- "pressed": {
426
- "type": "boolean",
427
- "required": false
428
- },
429
- "onPressedChange": {
430
- "type": "(pressed: boolean) => void",
431
- "required": false
432
- },
433
- "onClick": {
434
- "type": "() => void",
435
- "required": false
436
- },
437
- "inactive": {
438
- "type": "boolean",
439
- "required": false
440
- }
441
- }
442
- },
443
- "dependencies": [
444
- "@compomo/ui",
445
- "@ds-mo/tokens",
446
- "@ds-mo/icons"
447
- ],
448
- "registryDependencies": [
449
- "text"
450
- ]
451
- },
452
- {
453
- "name": "badge",
454
- "title": "Badge",
455
- "description": "Compact count indicator with selection state.",
456
- "type": "registry:ui",
457
- "meta": {
458
- "library": "@compomo/ui",
459
- "distribution": "npm",
460
- "storybook": "https://zainadeel.github.io/CompoMo/?path=/story/badge",
461
- "exports": [
462
- "Badge"
463
- ],
464
- "props": {
465
- "count": {
466
- "type": "number",
467
- "required": true
468
- },
469
- "isSelected": {
470
- "type": "boolean",
471
- "required": false
472
- }
473
- }
474
- },
475
- "dependencies": [
476
- "@compomo/ui",
477
- "@ds-mo/tokens"
478
- ],
479
- "registryDependencies": [
480
- "text"
481
- ]
482
- },
483
- {
484
- "name": "loader",
485
- "title": "Loader",
486
- "description": "SVG spinner that scales proportionally. Uses currentColor for theming.",
487
- "type": "registry:ui",
488
- "meta": {
489
- "library": "@compomo/ui",
490
- "distribution": "npm",
491
- "storybook": "https://zainadeel.github.io/CompoMo/?path=/story/loader",
492
- "exports": [
493
- "Loader"
494
- ],
495
- "props": {
496
- "size": {
497
- "type": "number",
498
- "required": false
499
- }
500
- }
501
- },
502
- "dependencies": [
503
- "@compomo/ui"
504
- ],
505
- "registryDependencies": []
506
- },
507
- {
508
- "name": "toggle",
509
- "title": "Toggle",
510
- "description": "Switch control with on/off state and accessible role=\"switch\".",
511
- "type": "registry:ui",
512
- "meta": {
513
- "library": "@compomo/ui",
514
- "distribution": "npm",
515
- "storybook": "https://zainadeel.github.io/CompoMo/?path=/story/toggle",
516
- "exports": [
517
- "Toggle"
518
- ],
519
- "props": {
520
- "checked": {
521
- "type": "boolean",
522
- "required": false
523
- },
524
- "onChange": {
525
- "type": "(checked: boolean) => void",
526
- "required": false
527
- },
528
- "inactive": {
529
- "type": "boolean",
530
- "required": false
531
- },
532
- "aria-label": {
533
- "type": "string",
534
- "required": false
535
- }
536
- }
537
- },
538
- "dependencies": [
539
- "@compomo/ui",
540
- "@ds-mo/tokens"
541
- ],
542
- "registryDependencies": []
543
- },
544
- {
545
- "name": "checkbox",
546
- "title": "Checkbox",
547
- "description": "Three-state checkbox (checked, unchecked, indeterminate) with keyboard support and custom icon slots.",
548
- "type": "registry:ui",
549
- "meta": {
550
- "library": "@compomo/ui",
551
- "distribution": "npm",
552
- "storybook": "https://zainadeel.github.io/CompoMo/?path=/story/checkbox",
553
- "exports": [
554
- "Checkbox"
555
- ],
556
- "props": {
557
- "label": {
558
- "type": "string",
559
- "required": true
560
- },
561
- "checked": {
562
- "type": "boolean",
563
- "required": false
564
- },
565
- "indeterminate": {
566
- "type": "boolean",
567
- "required": false
568
- },
569
- "onChange": {
570
- "type": "(checked: boolean) => void",
571
- "required": false
572
- },
573
- "inactive": {
574
- "type": "boolean",
575
- "required": false
576
- },
577
- "checkedIcon": {
578
- "type": "IconComponent",
579
- "required": false
580
- },
581
- "uncheckedIcon": {
582
- "type": "IconComponent",
583
- "required": false
584
- },
585
- "indeterminateIcon": {
586
- "type": "IconComponent",
587
- "required": false
588
- }
589
- }
590
- },
591
- "dependencies": [
592
- "@compomo/ui",
593
- "@ds-mo/tokens",
594
- "@ds-mo/icons"
595
- ],
596
- "registryDependencies": [
597
- "text"
598
- ]
599
- },
600
- {
601
- "name": "input",
602
- "title": "Input",
603
- "description": "Text input supporting text, email, tel, url, search, and password types. Search type includes auto clear button.",
604
- "type": "registry:ui",
605
- "meta": {
606
- "library": "@compomo/ui",
607
- "distribution": "npm",
608
- "storybook": "https://zainadeel.github.io/CompoMo/?path=/story/input",
609
- "exports": [
610
- "Input"
611
- ],
612
- "props": {
613
- "value": {
614
- "type": "string",
615
- "required": true
616
- },
617
- "onChange": {
618
- "type": "(e: React.ChangeEvent<HTMLInputElement>) => void",
619
- "required": true
620
- },
621
- "type": {
622
- "type": "'text' | 'email' | 'tel' | 'url' | 'search' | 'password'",
623
- "required": false
624
- },
625
- "placeholder": {
626
- "type": "string",
627
- "required": false
628
- },
629
- "suffix": {
630
- "type": "React.ReactNode",
631
- "required": false
632
- },
633
- "inactive": {
634
- "type": "boolean",
635
- "required": false
636
- },
637
- "clearIcon": {
638
- "type": "IconComponent",
639
- "required": false
640
- }
641
- }
642
- },
643
- "dependencies": [
644
- "@compomo/ui",
645
- "@ds-mo/tokens"
646
- ],
647
- "registryDependencies": []
648
- },
649
- {
650
- "name": "slider",
651
- "title": "Slider",
652
- "description": "Range input with visual fill track, label, and current value display.",
653
- "type": "registry:ui",
654
- "meta": {
655
- "library": "@compomo/ui",
656
- "distribution": "npm",
657
- "storybook": "https://zainadeel.github.io/CompoMo/?path=/story/slider",
658
- "exports": [
659
- "Slider"
660
- ],
661
- "props": {
662
- "value": {
663
- "type": "number",
664
- "required": true
665
- },
666
- "onChange": {
667
- "type": "(value: number) => void",
668
- "required": true
669
- },
670
- "min": {
671
- "type": "number",
672
- "required": false
673
- },
674
- "max": {
675
- "type": "number",
676
- "required": false
677
- },
678
- "step": {
679
- "type": "number",
680
- "required": false
681
- },
682
- "label": {
683
- "type": "string",
684
- "required": true
685
- },
686
- "inactive": {
687
- "type": "boolean",
688
- "required": false
689
- }
690
- }
691
- },
692
- "dependencies": [
693
- "@compomo/ui",
694
- "@ds-mo/tokens"
695
- ],
696
- "registryDependencies": [
697
- "text"
698
- ]
699
- },
700
- {
701
- "name": "field",
702
- "title": "Field",
703
- "description": "Simple label wrapper that links to child input via htmlFor.",
704
- "type": "registry:ui",
705
- "meta": {
706
- "library": "@compomo/ui",
707
- "distribution": "npm",
708
- "storybook": "https://zainadeel.github.io/CompoMo/?path=/story/field",
709
- "exports": [
710
- "Field"
711
- ],
712
- "props": {
713
- "label": {
714
- "type": "string",
715
- "required": true
716
- },
717
- "children": {
718
- "type": "React.ReactNode",
719
- "required": true
720
- },
721
- "id": {
722
- "type": "string",
723
- "required": false
724
- }
725
- }
726
- },
727
- "dependencies": [
728
- "@compomo/ui",
729
- "@ds-mo/tokens"
730
- ],
731
- "registryDependencies": [
732
- "text"
733
- ]
734
- },
735
- {
736
- "name": "select",
737
- "title": "Select",
738
- "description": "Dropdown select using Menu internally. Supports placeholder, inactive state, and custom chevron icon.",
739
- "type": "registry:ui",
740
- "meta": {
741
- "library": "@compomo/ui",
742
- "distribution": "npm",
743
- "storybook": "https://zainadeel.github.io/CompoMo/?path=/story/select",
744
- "exports": [
745
- "Select"
746
- ],
747
- "props": {
748
- "value": {
749
- "type": "string | number",
750
- "required": true
751
- },
752
- "onChange": {
753
- "type": "(value: string | number) => void",
754
- "required": true
755
- },
756
- "options": {
757
- "type": "SelectOption[]",
758
- "required": true
759
- },
760
- "placeholder": {
761
- "type": "string",
762
- "required": false
763
- },
764
- "inactive": {
765
- "type": "boolean",
766
- "required": false
767
- },
768
- "chevronIcon": {
769
- "type": "IconComponent",
770
- "required": false
771
- }
772
- }
773
- },
774
- "dependencies": [
775
- "@compomo/ui",
776
- "@ds-mo/tokens"
777
- ],
778
- "registryDependencies": [
779
- "menu",
780
- "surface",
781
- "text"
782
- ]
783
- },
784
- {
785
- "name": "modal",
786
- "title": "Modal",
787
- "description": "Dialog overlay with portal rendering, escape-to-close, backdrop click, focus management, and entry/exit animations.",
788
- "type": "registry:ui",
789
- "meta": {
790
- "library": "@compomo/ui",
791
- "distribution": "npm",
792
- "storybook": "https://zainadeel.github.io/CompoMo/?path=/story/modal",
793
- "exports": [
794
- "Modal"
795
- ],
796
- "props": {
797
- "isOpen": {
798
- "type": "boolean",
799
- "required": true
800
- },
801
- "onClose": {
802
- "type": "() => void",
803
- "required": true
804
- },
805
- "title": {
806
- "type": "string",
807
- "required": true
808
- },
809
- "children": {
810
- "type": "React.ReactNode",
811
- "required": true
812
- },
813
- "subtitle": {
814
- "type": "React.ReactNode",
815
- "required": false
816
- },
817
- "footer": {
818
- "type": "React.ReactNode",
819
- "required": false
820
- },
821
- "width": {
822
- "type": "'sm' | 'md' | 'lg' | string",
823
- "required": false
824
- }
825
- }
826
- },
827
- "dependencies": [
828
- "@compomo/ui",
829
- "@ds-mo/tokens"
830
- ],
831
- "registryDependencies": [
832
- "surface",
833
- "text"
834
- ]
835
- },
836
- {
837
- "name": "menu",
838
- "title": "Menu",
839
- "description": "Positioned dropdown menu with sections, item selection styles, toggle items, and destructive hold-to-confirm items.",
840
- "type": "registry:ui",
841
- "meta": {
842
- "library": "@compomo/ui",
843
- "distribution": "npm",
844
- "storybook": "https://zainadeel.github.io/CompoMo/?path=/story/menu",
845
- "exports": [
846
- "Menu",
847
- "MenuItem",
848
- "DestructiveMenuItem"
849
- ],
850
- "props": {
851
- "isOpen": {
852
- "type": "boolean",
853
- "required": true
854
- },
855
- "onClose": {
856
- "type": "() => void",
857
- "required": true
858
- },
859
- "anchorRef": {
860
- "type": "React.RefObject<HTMLElement | null>",
861
- "required": true
862
- },
863
- "items": {
864
- "type": "MenuItemData[]",
865
- "required": false
866
- },
867
- "sections": {
868
- "type": "MenuSection[]",
869
- "required": false
870
- },
871
- "side": {
872
- "type": "'top' | 'right' | 'bottom' | 'left'",
873
- "required": false
874
- },
875
- "align": {
876
- "type": "'start' | 'center' | 'end'",
877
- "required": false
878
- },
879
- "matchAnchorWidth": {
880
- "type": "boolean",
881
- "required": false
882
- }
883
- }
884
- },
885
- "dependencies": [
886
- "@compomo/ui",
887
- "@ds-mo/tokens"
888
- ],
889
- "registryDependencies": [
890
- "surface",
891
- "text",
892
- "toggle"
893
- ]
894
- },
895
- {
896
- "name": "tooltip",
897
- "title": "Tooltip",
898
- "description": "Positioned tooltip with portal rendering, delay, keyboard shortcut display, and viewport clamping.",
899
- "type": "registry:ui",
900
- "meta": {
901
- "library": "@compomo/ui",
902
- "distribution": "npm",
903
- "storybook": "https://zainadeel.github.io/CompoMo/?path=/story/tooltip",
904
- "exports": [
905
- "Tooltip"
906
- ],
907
- "props": {
908
- "label": {
909
- "type": "string",
910
- "required": true
911
- },
912
- "children": {
913
- "type": "React.ReactElement",
914
- "required": true
915
- },
916
- "side": {
917
- "type": "'top' | 'right' | 'bottom' | 'left'",
918
- "required": false
919
- },
920
- "align": {
921
- "type": "'start' | 'center' | 'end'",
922
- "required": false
923
- },
924
- "delay": {
925
- "type": "number",
926
- "required": false
927
- },
928
- "shortcutKey": {
929
- "type": "string",
930
- "required": false
931
- }
932
- }
933
- },
934
- "dependencies": [
935
- "@compomo/ui",
936
- "@ds-mo/tokens"
937
- ],
938
- "registryDependencies": [
939
- "text"
940
- ]
941
- },
942
- {
943
- "name": "banner",
944
- "title": "Banner",
945
- "description": "Intent-colored message bar. Supports floating toast mode with auto-dismiss and fade-out animation.",
946
- "type": "registry:ui",
947
- "meta": {
948
- "library": "@compomo/ui",
949
- "distribution": "npm",
950
- "storybook": "https://zainadeel.github.io/CompoMo/?path=/story/banner",
951
- "exports": [
952
- "Banner"
953
- ],
954
- "props": {
955
- "intent": {
956
- "type": "'brand' | 'positive' | 'negative' | 'warning' | 'caution' | 'ai' | 'neutral' | 'walkthrough' | 'guide'",
957
- "required": true
958
- },
959
- "contrast": {
960
- "type": "'faint' | 'medium' | 'bold' | 'strong'",
961
- "required": true
962
- },
963
- "message": {
964
- "type": "string",
965
- "required": true
966
- },
967
- "floating": {
968
- "type": "boolean",
969
- "required": false
970
- },
971
- "onDismiss": {
972
- "type": "() => void",
973
- "required": false
974
- },
975
- "header": {
976
- "type": "boolean",
977
- "required": false
978
- }
979
- }
980
- },
981
- "dependencies": [
982
- "@compomo/ui",
983
- "@ds-mo/tokens"
984
- ],
985
- "registryDependencies": [
986
- "surface",
987
- "text"
988
- ]
989
- },
990
- {
991
- "name": "table",
992
- "title": "Table",
993
- "description": "Data table with CSS grid layout, sorting, pagination, loading skeleton, row selection, and custom cell rendering.",
994
- "type": "registry:ui",
995
- "meta": {
996
- "library": "@compomo/ui",
997
- "distribution": "npm",
998
- "storybook": "https://zainadeel.github.io/CompoMo/?path=/story/table",
999
- "exports": [
1000
- "Table"
1001
- ],
1002
- "props": {
1003
- "columns": {
1004
- "type": "TableColumn<T>[]",
1005
- "required": true
1006
- },
1007
- "data": {
1008
- "type": "T[]",
1009
- "required": true
1010
- },
1011
- "sortState": {
1012
- "type": "SortState",
1013
- "required": false
1014
- },
1015
- "onSort": {
1016
- "type": "(columnId: string) => void",
1017
- "required": false
1018
- },
1019
- "onRowClick": {
1020
- "type": "(row: T, rowIndex: number) => void",
1021
- "required": false
1022
- },
1023
- "selectedRows": {
1024
- "type": "Set<number>",
1025
- "required": false
1026
- },
1027
- "loading": {
1028
- "type": "boolean",
1029
- "required": false
1030
- },
1031
- "pagination": {
1032
- "type": "PaginationState",
1033
- "required": false
1034
- },
1035
- "onPaginationChange": {
1036
- "type": "(pageIndex: number, pageSize: number) => void",
1037
- "required": false
1038
- },
1039
- "emptyMessage": {
1040
- "type": "string",
1041
- "required": false
1042
- }
1043
- }
1044
- },
1045
- "dependencies": [
1046
- "@compomo/ui",
1047
- "@ds-mo/tokens"
1048
- ],
1049
- "registryDependencies": [
1050
- "text",
1051
- "surface",
1052
- "skeleton"
1053
- ]
1054
- },
1055
- {
1056
- "name": "tab",
1057
- "title": "Tab",
1058
- "description": "Individual tab button with selected state and hover overlay.",
1059
- "type": "registry:ui",
1060
- "meta": {
1061
- "library": "@compomo/ui",
1062
- "distribution": "npm",
1063
- "storybook": "https://zainadeel.github.io/CompoMo/?path=/story/tab",
1064
- "exports": [
1065
- "Tab"
1066
- ],
1067
- "props": {
1068
- "label": {
1069
- "type": "string",
1070
- "required": true
1071
- },
1072
- "isSelected": {
1073
- "type": "boolean",
1074
- "required": false
1075
- },
1076
- "onClick": {
1077
- "type": "() => void",
1078
- "required": false
1079
- }
1080
- }
1081
- },
1082
- "dependencies": [
1083
- "@compomo/ui",
1084
- "@ds-mo/tokens"
1085
- ],
1086
- "registryDependencies": [
1087
- "text"
1088
- ]
1089
- },
1090
- {
1091
- "name": "empty-state",
1092
- "title": "EmptyState",
1093
- "description": "Centered placeholder for empty content, no results, or no access states.",
1094
- "type": "registry:ui",
1095
- "meta": {
1096
- "library": "@compomo/ui",
1097
- "distribution": "npm",
1098
- "storybook": "https://zainadeel.github.io/CompoMo/?path=/story/empty-state",
1099
- "exports": [
1100
- "EmptyState"
1101
- ],
1102
- "props": {
1103
- "type": {
1104
- "type": "'no-content' | 'no-results' | 'no-results-filter' | 'no-access'",
1105
- "required": false
1106
- },
1107
- "message": {
1108
- "type": "string",
1109
- "required": false
1110
- }
1111
- }
1112
- },
1113
- "dependencies": [
1114
- "@compomo/ui",
1115
- "@ds-mo/tokens"
1116
- ],
1117
- "registryDependencies": [
1118
- "text"
1119
- ]
1120
- },
1121
- {
1122
- "name": "fade",
1123
- "title": "Fade",
1124
- "description": "Decorative gradient overlay for scroll edges.",
1125
- "type": "registry:ui",
1126
- "meta": {
1127
- "library": "@compomo/ui",
1128
- "distribution": "npm",
1129
- "storybook": "https://zainadeel.github.io/CompoMo/?path=/story/fade",
1130
- "exports": [
1131
- "Fade"
1132
- ],
1133
- "props": {
1134
- "side": {
1135
- "type": "'top' | 'bottom' | 'left' | 'right'",
1136
- "required": true
1137
- },
1138
- "height": {
1139
- "type": "string",
1140
- "required": true
1141
- },
1142
- "background": {
1143
- "type": "string",
1144
- "required": false
1145
- }
1146
- }
1147
- },
1148
- "dependencies": [
1149
- "@compomo/ui",
1150
- "@ds-mo/tokens"
1151
- ],
1152
- "registryDependencies": []
1153
- },
1154
- {
1155
- "name": "scrollbar",
1156
- "title": "Scrollbar",
1157
- "description": "Custom scrollbar with draggable thumb, proportional sizing, and hover reveal.",
1158
- "type": "registry:ui",
1159
- "meta": {
1160
- "library": "@compomo/ui",
1161
- "distribution": "npm",
1162
- "storybook": "https://zainadeel.github.io/CompoMo/?path=/story/scrollbar",
1163
- "exports": [
1164
- "Scrollbar"
1165
- ],
1166
- "props": {
1167
- "children": {
1168
- "type": "React.ReactNode",
1169
- "required": true
1170
- },
1171
- "variant": {
1172
- "type": "'default' | 'thick'",
1173
- "required": false
1174
- },
1175
- "showTrackOnHover": {
1176
- "type": "boolean",
1177
- "required": false
1178
- },
1179
- "onScroll": {
1180
- "type": "(e: React.UIEvent<HTMLDivElement>) => void",
1181
- "required": false
1182
- }
1183
- }
1184
- },
1185
- "dependencies": [
1186
- "@compomo/ui",
1187
- "@ds-mo/tokens"
1188
- ],
1189
- "registryDependencies": []
1190
- },
1191
- {
1192
- "name": "error-boundary",
1193
- "title": "ErrorBoundary",
1194
- "description": "React error boundary with fallback UI and console logging.",
1195
- "type": "registry:ui",
1196
- "meta": {
1197
- "library": "@compomo/ui",
1198
- "distribution": "npm",
1199
- "storybook": "https://zainadeel.github.io/CompoMo/?path=/story/error-boundary",
1200
- "exports": [
1201
- "ErrorBoundary"
1202
- ],
1203
- "props": {
1204
- "children": {
1205
- "type": "React.ReactNode",
1206
- "required": true
1207
- },
1208
- "fallback": {
1209
- "type": "React.ReactNode",
1210
- "required": false
1211
- }
1212
- }
1213
- },
1214
- "dependencies": [
1215
- "@compomo/ui"
1216
- ],
1217
- "registryDependencies": [
1218
- "empty-state"
1219
- ]
1220
- },
1221
- {
1222
- "name": "sidebar",
1223
- "title": "Sidebar",
1224
- "description": "Resizable navigation sidebar with drag handle, snap-to-collapse, mobile mode, and nested sections/items.",
1225
- "type": "registry:ui",
1226
- "meta": {
1227
- "library": "@compomo/ui",
1228
- "distribution": "npm",
1229
- "storybook": "https://zainadeel.github.io/CompoMo/?path=/story/sidebar",
1230
- "exports": [
1231
- "Sidebar",
1232
- "SidebarSection",
1233
- "SidebarItem"
1234
- ],
1235
- "props": {
1236
- "children": {
1237
- "type": "React.ReactNode",
1238
- "required": true
1239
- },
1240
- "isCollapsed": {
1241
- "type": "boolean",
1242
- "required": false
1243
- },
1244
- "onToggle": {
1245
- "type": "() => void",
1246
- "required": false
1247
- },
1248
- "width": {
1249
- "type": "'mini' | 'default' | number",
1250
- "required": false
1251
- },
1252
- "resizable": {
1253
- "type": "boolean",
1254
- "required": false
1255
- },
1256
- "footer": {
1257
- "type": "React.ReactNode",
1258
- "required": false
1259
- },
1260
- "isMobile": {
1261
- "type": "boolean",
1262
- "required": false
1263
- }
1264
- }
1265
- },
1266
- "dependencies": [
1267
- "@compomo/ui",
1268
- "@ds-mo/tokens"
1269
- ],
1270
- "registryDependencies": [
1271
- "text",
1272
- "surface"
1273
- ]
1274
- },
1275
- {
1276
- "name": "header",
1277
- "title": "Header",
1278
- "description": "App header bar with background variants.",
1279
- "type": "registry:ui",
1280
- "meta": {
1281
- "library": "@compomo/ui",
1282
- "distribution": "npm",
1283
- "storybook": "https://zainadeel.github.io/CompoMo/?path=/story/header",
1284
- "exports": [
1285
- "Header"
1286
- ],
1287
- "props": {
1288
- "children": {
1289
- "type": "React.ReactNode",
1290
- "required": false
1291
- },
1292
- "background": {
1293
- "type": "HeaderBackground",
1294
- "required": false
1295
- }
1296
- }
1297
- },
1298
- "dependencies": [
1299
- "@compomo/ui",
1300
- "@ds-mo/tokens"
1301
- ],
1302
- "registryDependencies": [
1303
- "surface"
1304
- ]
1305
- },
1306
- {
1307
- "name": "radio",
1308
- "title": "RadioGroup",
1309
- "description": "Radio selection group with vertical/horizontal layout, per-option inactive, and keyboard navigation.",
1310
- "type": "registry:ui",
1311
- "meta": {
1312
- "library": "@compomo/ui",
1313
- "distribution": "npm",
1314
- "storybook": "https://zainadeel.github.io/CompoMo/?path=/story/radio",
1315
- "exports": [
1316
- "RadioGroup",
1317
- "RadioItem"
1318
- ],
1319
- "props": {
1320
- "value": {
1321
- "type": "string",
1322
- "required": true
1323
- },
1324
- "onChange": {
1325
- "type": "(value: string) => void",
1326
- "required": true
1327
- },
1328
- "options": {
1329
- "type": "RadioOption[]",
1330
- "required": true
1331
- },
1332
- "direction": {
1333
- "type": "'vertical' | 'horizontal'",
1334
- "required": false
1335
- },
1336
- "inactive": {
1337
- "type": "boolean",
1338
- "required": false
1339
- },
1340
- "aria-label": {
1341
- "type": "string",
1342
- "required": false
1343
- }
1344
- }
1345
- },
1346
- "dependencies": [
1347
- "@compomo/ui",
1348
- "@ds-mo/tokens"
1349
- ],
1350
- "registryDependencies": [
1351
- "text"
1352
- ]
1353
- },
1354
- {
1355
- "name": "tab-group",
1356
- "title": "TabGroup",
1357
- "description": "Tab orchestrator that wraps Tab components with an animated sliding indicator and active state management.",
1358
- "type": "registry:ui",
1359
- "meta": {
1360
- "library": "@compomo/ui",
1361
- "distribution": "npm",
1362
- "storybook": "https://zainadeel.github.io/CompoMo/?path=/story/tab-group",
1363
- "exports": [
1364
- "TabGroup"
1365
- ],
1366
- "props": {
1367
- "tabs": {
1368
- "type": "TabGroupTab[]",
1369
- "required": true
1370
- },
1371
- "activeIndex": {
1372
- "type": "number",
1373
- "required": false
1374
- },
1375
- "onTabChange": {
1376
- "type": "(index: number) => void",
1377
- "required": false
1378
- }
1379
- }
1380
- },
1381
- "dependencies": [
1382
- "@compomo/ui",
1383
- "@ds-mo/tokens"
1384
- ],
1385
- "registryDependencies": [
1386
- "tab"
1387
- ]
1388
- },
1389
- {
1390
- "name": "accordion",
1391
- "title": "Accordion",
1392
- "description": "Collapsible section list with single or multiple expand mode, animated height transitions, and controlled/uncontrolled state.",
1393
- "type": "registry:ui",
1394
- "meta": {
1395
- "library": "@compomo/ui",
1396
- "distribution": "npm",
1397
- "storybook": "https://zainadeel.github.io/CompoMo/?path=/story/accordion",
1398
- "exports": [
1399
- "Accordion",
1400
- "AccordionItem"
1401
- ],
1402
- "props": {
1403
- "items": {
1404
- "type": "AccordionItemData[]",
1405
- "required": true
1406
- },
1407
- "multiple": {
1408
- "type": "boolean",
1409
- "required": false
1410
- },
1411
- "expandedIds": {
1412
- "type": "string[]",
1413
- "required": false
1414
- },
1415
- "onExpandedChange": {
1416
- "type": "(ids: string[]) => void",
1417
- "required": false
1418
- }
1419
- }
1420
- },
1421
- "dependencies": [
1422
- "@compomo/ui",
1423
- "@ds-mo/tokens"
1424
- ],
1425
- "registryDependencies": [
1426
- "text"
1427
- ]
1428
- },
1429
- {
1430
- "name": "breadcrumb",
1431
- "title": "Breadcrumb",
1432
- "description": "Hierarchical navigation with link or button items, custom separator, and aria-current on the last item.",
1433
- "type": "registry:ui",
1434
- "meta": {
1435
- "library": "@compomo/ui",
1436
- "distribution": "npm",
1437
- "storybook": "https://zainadeel.github.io/CompoMo/?path=/story/breadcrumb",
1438
- "exports": [
1439
- "Breadcrumb"
1440
- ],
1441
- "props": {
1442
- "items": {
1443
- "type": "BreadcrumbItem[]",
1444
- "required": true
1445
- },
1446
- "separator": {
1447
- "type": "React.ReactNode",
1448
- "required": false
1449
- }
1450
- }
1451
- },
1452
- "dependencies": [
1453
- "@compomo/ui",
1454
- "@ds-mo/tokens"
1455
- ],
1456
- "registryDependencies": [
1457
- "text"
1458
- ]
1459
- },
1460
- {
1461
- "name": "pagination",
1462
- "title": "Pagination",
1463
- "description": "Standalone page navigation with ellipsis for large ranges, sibling count control, and keyboard-accessible buttons.",
1464
- "type": "registry:ui",
1465
- "meta": {
1466
- "library": "@compomo/ui",
1467
- "distribution": "npm",
1468
- "storybook": "https://zainadeel.github.io/CompoMo/?path=/story/pagination",
1469
- "exports": [
1470
- "Pagination"
1471
- ],
1472
- "props": {
1473
- "page": {
1474
- "type": "number",
1475
- "required": true
1476
- },
1477
- "totalPages": {
1478
- "type": "number",
1479
- "required": true
1480
- },
1481
- "onPageChange": {
1482
- "type": "(page: number) => void",
1483
- "required": true
1484
- },
1485
- "siblingCount": {
1486
- "type": "number",
1487
- "required": false
1488
- },
1489
- "inactive": {
1490
- "type": "boolean",
1491
- "required": false
1492
- }
1493
- }
1494
- },
1495
- "dependencies": [
1496
- "@compomo/ui",
1497
- "@ds-mo/tokens"
1498
- ],
1499
- "registryDependencies": [
1500
- "text"
1501
- ]
1502
- },
1503
- {
1504
- "name": "divider",
1505
- "title": "Divider",
1506
- "description": "Horizontal or vertical separator line using design tokens.",
1507
- "type": "registry:ui",
1508
- "meta": {
1509
- "library": "@compomo/ui",
1510
- "distribution": "npm",
1511
- "storybook": "https://zainadeel.github.io/CompoMo/?path=/story/divider",
1512
- "exports": [
1513
- "Divider"
1514
- ],
1515
- "props": {
1516
- "orientation": {
1517
- "type": "'horizontal' | 'vertical'",
1518
- "required": false
1519
- }
1520
- }
1521
- },
1522
- "dependencies": [
1523
- "@compomo/ui",
1524
- "@ds-mo/tokens"
1525
- ],
1526
- "registryDependencies": []
1527
- },
1528
- {
1529
- "name": "skeleton",
1530
- "title": "Skeleton",
1531
- "description": "Loading placeholder with text, circular, and rectangular variants. Supports multi-line text and shimmer animation.",
1532
- "type": "registry:ui",
1533
- "meta": {
1534
- "library": "@compomo/ui",
1535
- "distribution": "npm",
1536
- "storybook": "https://zainadeel.github.io/CompoMo/?path=/story/skeleton",
1537
- "exports": [
1538
- "Skeleton"
1539
- ],
1540
- "props": {
1541
- "variant": {
1542
- "type": "'text' | 'circular' | 'rectangular'",
1543
- "required": false
1544
- },
1545
- "width": {
1546
- "type": "string | number",
1547
- "required": false
1548
- },
1549
- "height": {
1550
- "type": "string | number",
1551
- "required": false
1552
- },
1553
- "lines": {
1554
- "type": "number",
1555
- "required": false
1556
- },
1557
- "animate": {
1558
- "type": "boolean",
1559
- "required": false
1560
- }
1561
- }
1562
- },
1563
- "dependencies": [
1564
- "@compomo/ui",
1565
- "@ds-mo/tokens"
1566
- ],
1567
- "registryDependencies": []
1568
- },
1569
- {
1570
- "name": "toast",
1571
- "title": "Toast",
1572
- "description": "Imperative toast notification system. Use toast.success()/error()/warning()/info() to show toasts. Place <ToastContainer /> once at the app root.",
1573
- "type": "registry:ui",
1574
- "meta": {
1575
- "library": "@compomo/ui",
1576
- "distribution": "npm",
1577
- "storybook": "https://zainadeel.github.io/CompoMo/?path=/story/toast",
1578
- "exports": [
1579
- "ToastContainer",
1580
- "toast",
1581
- "useToasts"
1582
- ],
1583
- "props": {
1584
- "position": {
1585
- "type": "'top-center' | 'top-right' | 'bottom-center' | 'bottom-right'",
1586
- "required": false
1587
- }
1588
- }
1589
- },
1590
- "dependencies": [
1591
- "@compomo/ui",
1592
- "@ds-mo/tokens"
1593
- ],
1594
- "registryDependencies": [
1595
- "surface",
1596
- "text"
1597
- ]
1598
- }
1599
- ]
1600
- }