@zidsa/zidmui 2.1.8 → 2.3.0-beta.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 (320) hide show
  1. package/dist/illustrations/404.svg +39 -0
  2. package/dist/illustrations/abandoned-cart.svg +23 -0
  3. package/dist/illustrations/add-ons.svg +15 -0
  4. package/dist/illustrations/announcement.svg +31 -0
  5. package/dist/illustrations/barcode-with-code.svg +49 -0
  6. package/dist/illustrations/barcode-with-sku.svg +26 -0
  7. package/dist/illustrations/barcode.svg +43 -0
  8. package/dist/illustrations/cards-stack-notification.svg +43 -0
  9. package/dist/illustrations/chat-bubble-plus.svg +30 -0
  10. package/dist/illustrations/coins-stack-shopping-cart.svg +22 -0
  11. package/dist/illustrations/coins-stack.svg +20 -0
  12. package/dist/illustrations/congrats.svg +108 -0
  13. package/dist/illustrations/congratulations-rocket.svg +36 -0
  14. package/dist/illustrations/country-bahrain.svg +78 -0
  15. package/dist/illustrations/country-egypt.svg +78 -0
  16. package/dist/illustrations/country-iraq.svg +78 -0
  17. package/dist/illustrations/country-kuwait.svg +78 -0
  18. package/dist/illustrations/country-oman.svg +78 -0
  19. package/dist/illustrations/country-qatar.svg +78 -0
  20. package/dist/illustrations/country-saudi-arabia.svg +78 -0
  21. package/dist/illustrations/country-saudi-regions.svg +17 -0
  22. package/dist/illustrations/country-uae.svg +78 -0
  23. package/dist/illustrations/custom-themes.svg +95 -0
  24. package/dist/illustrations/customers-empty-state.svg +38 -0
  25. package/dist/illustrations/customers-groups-add.svg +13 -0
  26. package/dist/illustrations/customers-groups.svg +23 -0
  27. package/dist/illustrations/draft-empty.svg +48 -0
  28. package/dist/illustrations/empty-draft-orders.svg +55 -0
  29. package/dist/illustrations/empty-order.svg +58 -0
  30. package/dist/illustrations/empty-state-discount-coupon.svg +27 -0
  31. package/dist/illustrations/empty-state-page-tag.svg +15 -0
  32. package/dist/illustrations/empty-state-page-url.svg +10 -0
  33. package/dist/illustrations/empty-state-page.svg +20 -0
  34. package/dist/illustrations/empty-state-payout.svg +35 -0
  35. package/dist/illustrations/empty-state-review.svg +29 -0
  36. package/dist/illustrations/empty-state-trash-bin.svg +60 -0
  37. package/dist/illustrations/faq-no-results.svg +43 -0
  38. package/dist/illustrations/fire-badge.svg +14 -0
  39. package/dist/illustrations/inactive-shop.svg +98 -0
  40. package/dist/illustrations/inventory-empty-state.svg +38 -0
  41. package/dist/illustrations/item-list.svg +40 -0
  42. package/dist/illustrations/items-add.svg +38 -0
  43. package/dist/illustrations/opened-box-empty.svg +33 -0
  44. package/dist/illustrations/opened-box-zid-location.svg +64 -0
  45. package/dist/illustrations/page-error.svg +34 -0
  46. package/dist/illustrations/payment-card-add-2.svg +14 -0
  47. package/dist/illustrations/payment-card-add.svg +14 -0
  48. package/dist/illustrations/payment-card.svg +12 -0
  49. package/dist/illustrations/payments-links-empty-state.svg +43 -0
  50. package/dist/illustrations/plan-activation.svg +29 -0
  51. package/dist/illustrations/plan-changed.svg +32 -0
  52. package/dist/illustrations/plan-downgrade.svg +28 -0
  53. package/dist/illustrations/product-card-options.svg +55 -0
  54. package/dist/illustrations/product-stacked-cards.svg +46 -0
  55. package/dist/illustrations/raising-start.svg +14 -0
  56. package/dist/illustrations/raising-starter.svg +14 -0
  57. package/dist/illustrations/sad-icon.svg +100 -0
  58. package/dist/illustrations/stacked-messages-sms.svg +41 -0
  59. package/dist/illustrations/stacked-messages-whatsapp.svg +42 -0
  60. package/dist/illustrations/step-diamond-01.svg +39 -0
  61. package/dist/illustrations/step-heptagon-02.svg +44 -0
  62. package/dist/illustrations/step-heptagon-04.svg +49 -0
  63. package/dist/illustrations/step-heptagon-06.svg +44 -0
  64. package/dist/illustrations/step-heptagon-red-04.svg +44 -0
  65. package/dist/illustrations/step-hexagon-02.svg +44 -0
  66. package/dist/illustrations/step-pentagon-03.svg +39 -0
  67. package/dist/illustrations/step-pentagon-05.svg +39 -0
  68. package/dist/illustrations/step-shield-like-03.svg +44 -0
  69. package/dist/illustrations/vehicle.svg +80 -0
  70. package/dist/illustrations/whatsapp-tier1.svg +80 -0
  71. package/dist/illustrations/whatsapp-tier2.svg +80 -0
  72. package/dist/illustrations/whatsapp-tier3.svg +89 -0
  73. package/dist/illustrations/whatsapp-tier4.svg +80 -0
  74. package/dist/illustrations/whatsapp-tier5.svg +174 -0
  75. package/dist/illustrations/wishlist-empty.svg +48 -0
  76. package/dist/illustrations/zid-logo-glass-reversed.svg +26 -0
  77. package/dist/illustrations/zid-logo-glass.svg +26 -0
  78. package/dist/illustrations/zid-logo-star.svg +4 -0
  79. package/dist/logos/delivery/aramex.svg +14 -0
  80. package/dist/logos/delivery/barq.svg +14 -0
  81. package/dist/logos/delivery/careem.svg +14 -0
  82. package/dist/logos/delivery/dhl.svg +14 -0
  83. package/dist/logos/delivery/fedex.svg +20 -0
  84. package/dist/logos/delivery/imile.svg +14 -0
  85. package/dist/logos/delivery/parcelat.svg +14 -0
  86. package/dist/logos/delivery/redbox.svg +14 -0
  87. package/dist/logos/delivery/smsa.svg +14 -0
  88. package/dist/logos/delivery/spl.svg +19 -0
  89. package/dist/logos/delivery/zid.svg +14 -0
  90. package/dist/logos/payments/amex.svg +12 -0
  91. package/dist/logos/payments/apple-pay.svg +7 -0
  92. package/dist/logos/payments/google-pay.svg +7 -0
  93. package/dist/logos/payments/knet.svg +5 -0
  94. package/dist/logos/payments/mada.svg +5 -0
  95. package/dist/logos/payments/mastercard.svg +5 -0
  96. package/dist/logos/payments/mispay.svg +10 -0
  97. package/dist/logos/payments/samsung-pay-icon.svg +13 -0
  98. package/dist/logos/payments/samsung-pay-text.svg +19 -0
  99. package/dist/logos/payments/stc-pay.svg +6 -0
  100. package/dist/logos/payments/tabby.svg +12 -0
  101. package/dist/logos/payments/tamara-secondary.svg +10 -0
  102. package/dist/logos/payments/tamara.svg +63 -0
  103. package/dist/logos/payments/visa.svg +3 -0
  104. package/dist/react/cjs/components/app-dialog.js +3 -2
  105. package/dist/react/cjs/components/app-dialog.js.map +1 -1
  106. package/dist/react/cjs/components/app-list-item.js +3 -0
  107. package/dist/react/cjs/components/app-list-item.js.map +1 -1
  108. package/dist/react/cjs/theme/components/alert.js +16 -16
  109. package/dist/react/cjs/theme/components/alert.js.map +1 -1
  110. package/dist/react/cjs/theme/components/app-bar.js +3 -5
  111. package/dist/react/cjs/theme/components/app-bar.js.map +1 -1
  112. package/dist/react/cjs/theme/components/card.js +3 -3
  113. package/dist/react/cjs/theme/components/card.js.map +1 -1
  114. package/dist/react/cjs/theme/components/paper.js +3 -3
  115. package/dist/react/cjs/theme/components/paper.js.map +1 -1
  116. package/dist/react/cjs/theme/components/table.js +2 -2
  117. package/dist/react/cjs/theme/components/table.js.map +1 -1
  118. package/dist/react/cjs/theme/palette.dark.js +343 -0
  119. package/dist/react/cjs/theme/palette.dark.js.map +1 -0
  120. package/dist/react/cjs/theme/palette.js +11 -5
  121. package/dist/react/cjs/theme/palette.js.map +1 -1
  122. package/dist/react/cjs/theme/shadows.dark.js +32 -0
  123. package/dist/react/cjs/theme/shadows.dark.js.map +1 -0
  124. package/dist/react/cjs/theme/theme.dark.js +19 -0
  125. package/dist/react/cjs/theme/theme.dark.js.map +1 -0
  126. package/dist/react/es/components/app-dialog.js +3 -2
  127. package/dist/react/es/components/app-dialog.js.map +1 -1
  128. package/dist/react/es/components/app-list-item.js +3 -0
  129. package/dist/react/es/components/app-list-item.js.map +1 -1
  130. package/dist/react/es/theme/components/alert.js +16 -16
  131. package/dist/react/es/theme/components/alert.js.map +1 -1
  132. package/dist/react/es/theme/components/app-bar.js +3 -5
  133. package/dist/react/es/theme/components/app-bar.js.map +1 -1
  134. package/dist/react/es/theme/components/card.js +3 -3
  135. package/dist/react/es/theme/components/card.js.map +1 -1
  136. package/dist/react/es/theme/components/paper.js +3 -3
  137. package/dist/react/es/theme/components/paper.js.map +1 -1
  138. package/dist/react/es/theme/components/table.js +2 -2
  139. package/dist/react/es/theme/components/table.js.map +1 -1
  140. package/dist/react/es/theme/palette.dark.js +343 -0
  141. package/dist/react/es/theme/palette.dark.js.map +1 -0
  142. package/dist/react/es/theme/palette.js +11 -5
  143. package/dist/react/es/theme/palette.js.map +1 -1
  144. package/dist/react/es/theme/shadows.dark.js +32 -0
  145. package/dist/react/es/theme/shadows.dark.js.map +1 -0
  146. package/dist/react/es/theme/theme.dark.js +19 -0
  147. package/dist/react/es/theme/theme.dark.js.map +1 -0
  148. package/dist/react/types/stories/design/DeliveryLogos.stories.d.ts +12 -0
  149. package/dist/react/types/stories/design/Illustrations.stories.d.ts +12 -0
  150. package/dist/react/types/stories/design/PaymentLogos.stories.d.ts +12 -0
  151. package/dist/react/types/theme/palette.dark.d.ts +2 -0
  152. package/dist/react/types/theme/shadows.dark.d.ts +2 -0
  153. package/dist/react/types/theme/theme.dark.d.ts +1 -0
  154. package/dist/react/types/theme/types.d.ts +8 -2
  155. package/dist/styles/colors.css +33 -0
  156. package/dist/styles/root.css +10 -0
  157. package/dist/styles/states.css +47 -0
  158. package/dist/tsconfig.tsbuildinfo +1 -1
  159. package/package.json +5 -2
  160. package/dist/react/cjs/stories/css/Alert.stories.js +0 -69
  161. package/dist/react/cjs/stories/css/Alert.stories.js.map +0 -1
  162. package/dist/react/cjs/stories/css/Button.stories.js +0 -133
  163. package/dist/react/cjs/stories/css/Button.stories.js.map +0 -1
  164. package/dist/react/cjs/stories/css/Card.stories.js +0 -145
  165. package/dist/react/cjs/stories/css/Card.stories.js.map +0 -1
  166. package/dist/react/cjs/stories/css/Checkbox.stories.js +0 -138
  167. package/dist/react/cjs/stories/css/Checkbox.stories.js.map +0 -1
  168. package/dist/react/cjs/stories/css/ComponentReference.stories.js +0 -139
  169. package/dist/react/cjs/stories/css/ComponentReference.stories.js.map +0 -1
  170. package/dist/react/cjs/stories/css/Input.stories.js +0 -162
  171. package/dist/react/cjs/stories/css/Input.stories.js.map +0 -1
  172. package/dist/react/cjs/stories/css/ListItem.stories.js +0 -166
  173. package/dist/react/cjs/stories/css/ListItem.stories.js.map +0 -1
  174. package/dist/react/cjs/stories/css/Modal.stories.js +0 -121
  175. package/dist/react/cjs/stories/css/Modal.stories.js.map +0 -1
  176. package/dist/react/cjs/stories/css/Radio.stories.js +0 -118
  177. package/dist/react/cjs/stories/css/Radio.stories.js.map +0 -1
  178. package/dist/react/cjs/stories/css/Select.stories.js +0 -187
  179. package/dist/react/cjs/stories/css/Select.stories.js.map +0 -1
  180. package/dist/react/cjs/stories/css/Status.stories.js +0 -59
  181. package/dist/react/cjs/stories/css/Status.stories.js.map +0 -1
  182. package/dist/react/cjs/stories/css/Switch.stories.js +0 -136
  183. package/dist/react/cjs/stories/css/Switch.stories.js.map +0 -1
  184. package/dist/react/cjs/stories/css/Table.stories.js +0 -171
  185. package/dist/react/cjs/stories/css/Table.stories.js.map +0 -1
  186. package/dist/react/cjs/stories/css/Tooltip.stories.js +0 -99
  187. package/dist/react/cjs/stories/css/Tooltip.stories.js.map +0 -1
  188. package/dist/react/cjs/stories/css/Utilities.stories.js +0 -136
  189. package/dist/react/cjs/stories/css/Utilities.stories.js.map +0 -1
  190. package/dist/react/cjs/stories/design/Colors.stories.js +0 -142
  191. package/dist/react/cjs/stories/design/Colors.stories.js.map +0 -1
  192. package/dist/react/cjs/stories/design/Typography.stories.js +0 -116
  193. package/dist/react/cjs/stories/design/Typography.stories.js.map +0 -1
  194. package/dist/react/cjs/stories/design/spacing/CSS.stories.js +0 -61
  195. package/dist/react/cjs/stories/design/spacing/CSS.stories.js.map +0 -1
  196. package/dist/react/cjs/stories/design/spacing/React.stories.js +0 -102
  197. package/dist/react/cjs/stories/design/spacing/React.stories.js.map +0 -1
  198. package/dist/react/cjs/stories/react/AppAlert.stories.js +0 -149
  199. package/dist/react/cjs/stories/react/AppAlert.stories.js.map +0 -1
  200. package/dist/react/cjs/stories/react/AppButton.stories.js +0 -93
  201. package/dist/react/cjs/stories/react/AppButton.stories.js.map +0 -1
  202. package/dist/react/cjs/stories/react/AppCheckbox.stories.js +0 -67
  203. package/dist/react/cjs/stories/react/AppCheckbox.stories.js.map +0 -1
  204. package/dist/react/cjs/stories/react/AppDialog.stories.js +0 -129
  205. package/dist/react/cjs/stories/react/AppDialog.stories.js.map +0 -1
  206. package/dist/react/cjs/stories/react/AppDialogWithFeatures.stories.js +0 -127
  207. package/dist/react/cjs/stories/react/AppDialogWithFeatures.stories.js.map +0 -1
  208. package/dist/react/cjs/stories/react/AppEmptyState.stories.js +0 -157
  209. package/dist/react/cjs/stories/react/AppEmptyState.stories.js.map +0 -1
  210. package/dist/react/cjs/stories/react/AppIconButton.stories.js +0 -53
  211. package/dist/react/cjs/stories/react/AppIconButton.stories.js.map +0 -1
  212. package/dist/react/cjs/stories/react/AppIconWithTooltip.stories.js +0 -36
  213. package/dist/react/cjs/stories/react/AppIconWithTooltip.stories.js.map +0 -1
  214. package/dist/react/cjs/stories/react/AppInputBase.stories.js +0 -158
  215. package/dist/react/cjs/stories/react/AppInputBase.stories.js.map +0 -1
  216. package/dist/react/cjs/stories/react/AppInputBaseSearch.stories.js +0 -87
  217. package/dist/react/cjs/stories/react/AppInputBaseSearch.stories.js.map +0 -1
  218. package/dist/react/cjs/stories/react/AppInputRadio.stories.js +0 -262
  219. package/dist/react/cjs/stories/react/AppInputRadio.stories.js.map +0 -1
  220. package/dist/react/cjs/stories/react/AppInputRadioCard.stories.js +0 -126
  221. package/dist/react/cjs/stories/react/AppInputRadioCard.stories.js.map +0 -1
  222. package/dist/react/cjs/stories/react/AppListItem.stories.js +0 -123
  223. package/dist/react/cjs/stories/react/AppListItem.stories.js.map +0 -1
  224. package/dist/react/cjs/stories/react/AppOverflownTextWithTooltip.stories.js +0 -41
  225. package/dist/react/cjs/stories/react/AppOverflownTextWithTooltip.stories.js.map +0 -1
  226. package/dist/react/cjs/stories/react/AppPagination.stories.js +0 -71
  227. package/dist/react/cjs/stories/react/AppPagination.stories.js.map +0 -1
  228. package/dist/react/cjs/stories/react/AppRadioGroup.stories.js +0 -145
  229. package/dist/react/cjs/stories/react/AppRadioGroup.stories.js.map +0 -1
  230. package/dist/react/cjs/stories/react/AppStatus.stories.js +0 -68
  231. package/dist/react/cjs/stories/react/AppStatus.stories.js.map +0 -1
  232. package/dist/react/cjs/stories/react/AppSwitch.stories.js +0 -138
  233. package/dist/react/cjs/stories/react/AppSwitch.stories.js.map +0 -1
  234. package/dist/react/cjs/stories/react/AppTabs.stories.js +0 -100
  235. package/dist/react/cjs/stories/react/AppTabs.stories.js.map +0 -1
  236. package/dist/react/cjs/stories/react/AppTooltip.stories.js +0 -119
  237. package/dist/react/cjs/stories/react/AppTooltip.stories.js.map +0 -1
  238. package/dist/react/cjs/stories/react/AppTypography.stories.js +0 -172
  239. package/dist/react/cjs/stories/react/AppTypography.stories.js.map +0 -1
  240. package/dist/react/es/stories/css/Alert.stories.js +0 -69
  241. package/dist/react/es/stories/css/Alert.stories.js.map +0 -1
  242. package/dist/react/es/stories/css/Button.stories.js +0 -133
  243. package/dist/react/es/stories/css/Button.stories.js.map +0 -1
  244. package/dist/react/es/stories/css/Card.stories.js +0 -145
  245. package/dist/react/es/stories/css/Card.stories.js.map +0 -1
  246. package/dist/react/es/stories/css/Checkbox.stories.js +0 -138
  247. package/dist/react/es/stories/css/Checkbox.stories.js.map +0 -1
  248. package/dist/react/es/stories/css/ComponentReference.stories.js +0 -139
  249. package/dist/react/es/stories/css/ComponentReference.stories.js.map +0 -1
  250. package/dist/react/es/stories/css/Input.stories.js +0 -162
  251. package/dist/react/es/stories/css/Input.stories.js.map +0 -1
  252. package/dist/react/es/stories/css/ListItem.stories.js +0 -166
  253. package/dist/react/es/stories/css/ListItem.stories.js.map +0 -1
  254. package/dist/react/es/stories/css/Modal.stories.js +0 -121
  255. package/dist/react/es/stories/css/Modal.stories.js.map +0 -1
  256. package/dist/react/es/stories/css/Radio.stories.js +0 -118
  257. package/dist/react/es/stories/css/Radio.stories.js.map +0 -1
  258. package/dist/react/es/stories/css/Select.stories.js +0 -187
  259. package/dist/react/es/stories/css/Select.stories.js.map +0 -1
  260. package/dist/react/es/stories/css/Status.stories.js +0 -59
  261. package/dist/react/es/stories/css/Status.stories.js.map +0 -1
  262. package/dist/react/es/stories/css/Switch.stories.js +0 -136
  263. package/dist/react/es/stories/css/Switch.stories.js.map +0 -1
  264. package/dist/react/es/stories/css/Table.stories.js +0 -171
  265. package/dist/react/es/stories/css/Table.stories.js.map +0 -1
  266. package/dist/react/es/stories/css/Tooltip.stories.js +0 -99
  267. package/dist/react/es/stories/css/Tooltip.stories.js.map +0 -1
  268. package/dist/react/es/stories/css/Utilities.stories.js +0 -136
  269. package/dist/react/es/stories/css/Utilities.stories.js.map +0 -1
  270. package/dist/react/es/stories/design/Colors.stories.js +0 -142
  271. package/dist/react/es/stories/design/Colors.stories.js.map +0 -1
  272. package/dist/react/es/stories/design/Typography.stories.js +0 -116
  273. package/dist/react/es/stories/design/Typography.stories.js.map +0 -1
  274. package/dist/react/es/stories/design/spacing/CSS.stories.js +0 -61
  275. package/dist/react/es/stories/design/spacing/CSS.stories.js.map +0 -1
  276. package/dist/react/es/stories/design/spacing/React.stories.js +0 -102
  277. package/dist/react/es/stories/design/spacing/React.stories.js.map +0 -1
  278. package/dist/react/es/stories/react/AppAlert.stories.js +0 -149
  279. package/dist/react/es/stories/react/AppAlert.stories.js.map +0 -1
  280. package/dist/react/es/stories/react/AppButton.stories.js +0 -93
  281. package/dist/react/es/stories/react/AppButton.stories.js.map +0 -1
  282. package/dist/react/es/stories/react/AppCheckbox.stories.js +0 -67
  283. package/dist/react/es/stories/react/AppCheckbox.stories.js.map +0 -1
  284. package/dist/react/es/stories/react/AppDialog.stories.js +0 -129
  285. package/dist/react/es/stories/react/AppDialog.stories.js.map +0 -1
  286. package/dist/react/es/stories/react/AppDialogWithFeatures.stories.js +0 -127
  287. package/dist/react/es/stories/react/AppDialogWithFeatures.stories.js.map +0 -1
  288. package/dist/react/es/stories/react/AppEmptyState.stories.js +0 -157
  289. package/dist/react/es/stories/react/AppEmptyState.stories.js.map +0 -1
  290. package/dist/react/es/stories/react/AppIconButton.stories.js +0 -53
  291. package/dist/react/es/stories/react/AppIconButton.stories.js.map +0 -1
  292. package/dist/react/es/stories/react/AppIconWithTooltip.stories.js +0 -36
  293. package/dist/react/es/stories/react/AppIconWithTooltip.stories.js.map +0 -1
  294. package/dist/react/es/stories/react/AppInputBase.stories.js +0 -158
  295. package/dist/react/es/stories/react/AppInputBase.stories.js.map +0 -1
  296. package/dist/react/es/stories/react/AppInputBaseSearch.stories.js +0 -87
  297. package/dist/react/es/stories/react/AppInputBaseSearch.stories.js.map +0 -1
  298. package/dist/react/es/stories/react/AppInputRadio.stories.js +0 -262
  299. package/dist/react/es/stories/react/AppInputRadio.stories.js.map +0 -1
  300. package/dist/react/es/stories/react/AppInputRadioCard.stories.js +0 -126
  301. package/dist/react/es/stories/react/AppInputRadioCard.stories.js.map +0 -1
  302. package/dist/react/es/stories/react/AppListItem.stories.js +0 -123
  303. package/dist/react/es/stories/react/AppListItem.stories.js.map +0 -1
  304. package/dist/react/es/stories/react/AppOverflownTextWithTooltip.stories.js +0 -41
  305. package/dist/react/es/stories/react/AppOverflownTextWithTooltip.stories.js.map +0 -1
  306. package/dist/react/es/stories/react/AppPagination.stories.js +0 -71
  307. package/dist/react/es/stories/react/AppPagination.stories.js.map +0 -1
  308. package/dist/react/es/stories/react/AppRadioGroup.stories.js +0 -145
  309. package/dist/react/es/stories/react/AppRadioGroup.stories.js.map +0 -1
  310. package/dist/react/es/stories/react/AppStatus.stories.js +0 -68
  311. package/dist/react/es/stories/react/AppStatus.stories.js.map +0 -1
  312. package/dist/react/es/stories/react/AppSwitch.stories.js +0 -138
  313. package/dist/react/es/stories/react/AppSwitch.stories.js.map +0 -1
  314. package/dist/react/es/stories/react/AppTabs.stories.js +0 -100
  315. package/dist/react/es/stories/react/AppTabs.stories.js.map +0 -1
  316. package/dist/react/es/stories/react/AppTooltip.stories.js +0 -119
  317. package/dist/react/es/stories/react/AppTooltip.stories.js.map +0 -1
  318. package/dist/react/es/stories/react/AppTypography.stories.js +0 -172
  319. package/dist/react/es/stories/react/AppTypography.stories.js.map +0 -1
  320. package/dist/react/zidmui.css +0 -3062
@@ -1,71 +0,0 @@
1
- "use strict";
2
- Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
- const jsxRuntime = require("react/jsx-runtime");
4
- const React = require("react");
5
- const appPagination = require("../../components/app-pagination.js");
6
- const appTypography = require("../../components/app-typography.js");
7
- const stackColumn = require("../../components/stack-column.js");
8
- const meta = {
9
- title: "React/App Pagination",
10
- component: appPagination.AppPagination,
11
- parameters: {
12
- layout: "centered"
13
- },
14
- tags: ["autodocs"],
15
- argTypes: {
16
- count: {
17
- control: "number"
18
- },
19
- page: {
20
- control: "number"
21
- },
22
- size: {
23
- control: "select",
24
- options: ["medium", "large"]
25
- },
26
- disabled: {
27
- control: "boolean"
28
- }
29
- },
30
- args: {
31
- count: 10,
32
- page: 1,
33
- size: "medium"
34
- }
35
- };
36
- const Default = {
37
- args: {
38
- count: 10
39
- }
40
- };
41
- const SizeMedium = {
42
- render: () => /* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { gap: 2, children: [
43
- /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "h6", children: "Size Medium" }),
44
- /* @__PURE__ */ jsxRuntime.jsx(appPagination.AppPagination, {}),
45
- /* @__PURE__ */ jsxRuntime.jsx(appPagination.AppPagination, { count: 4 }),
46
- /* @__PURE__ */ jsxRuntime.jsx(appPagination.AppPagination, { count: 10 }),
47
- /* @__PURE__ */ jsxRuntime.jsx(appPagination.AppPagination, { count: 100 })
48
- ] })
49
- };
50
- const SizeLarge = {
51
- render: () => /* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { gap: 2, children: [
52
- /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "h6", children: "Size Large" }),
53
- /* @__PURE__ */ jsxRuntime.jsx(appPagination.AppPagination, { size: "large" }),
54
- /* @__PURE__ */ jsxRuntime.jsx(appPagination.AppPagination, { count: 4, size: "large" }),
55
- /* @__PURE__ */ jsxRuntime.jsx(appPagination.AppPagination, { count: 10, size: "large" }),
56
- /* @__PURE__ */ jsxRuntime.jsx(appPagination.AppPagination, { count: 100, size: "large" })
57
- ] })
58
- };
59
- const InteractiveComponent = () => {
60
- const [page, setPage] = React.useState(1);
61
- return /* @__PURE__ */ jsxRuntime.jsx(appPagination.AppPagination, { count: 10, page, onChange: (_, newPage) => setPage(newPage) });
62
- };
63
- const Interactive = {
64
- render: () => /* @__PURE__ */ jsxRuntime.jsx(InteractiveComponent, {})
65
- };
66
- exports.Default = Default;
67
- exports.Interactive = Interactive;
68
- exports.SizeLarge = SizeLarge;
69
- exports.SizeMedium = SizeMedium;
70
- exports.default = meta;
71
- //# sourceMappingURL=AppPagination.stories.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AppPagination.stories.js","sources":["../../../../../src/stories/react/AppPagination.stories.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { AppPagination } from '~/components/app-pagination';\nimport { AppTypography } from '~/components/app-typography';\nimport { StackColumn } from '~/components/stack-column';\n\n//\n//\n\n// Meta\nconst meta = {\n title: 'React/App Pagination',\n component: AppPagination,\n parameters: {\n layout: 'centered',\n },\n tags: ['autodocs'],\n argTypes: {\n count: {\n control: 'number',\n },\n page: {\n control: 'number',\n },\n size: {\n control: 'select',\n options: ['medium', 'large'],\n },\n disabled: {\n control: 'boolean',\n },\n },\n args: {\n count: 10,\n page: 1,\n size: 'medium',\n },\n} satisfies Meta<typeof AppPagination>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\nexport const Default: Story = {\n args: {\n count: 10,\n },\n};\n\n//\n\nexport const SizeMedium: Story = {\n render: () => (\n <StackColumn gap={2}>\n <AppTypography variant=\"h6\">Size Medium</AppTypography>\n <AppPagination />\n <AppPagination count={4} />\n <AppPagination count={10} />\n <AppPagination count={100} />\n </StackColumn>\n ),\n};\n\n//\n\nexport const SizeLarge: Story = {\n render: () => (\n <StackColumn gap={2}>\n <AppTypography variant=\"h6\">Size Large</AppTypography>\n <AppPagination size=\"large\" />\n <AppPagination count={4} size=\"large\" />\n <AppPagination count={10} size=\"large\" />\n <AppPagination count={100} size=\"large\" />\n </StackColumn>\n ),\n};\n\n//\n\nconst InteractiveComponent = () => {\n const [page, setPage] = useState(1);\n\n return <AppPagination count={10} page={page} onChange={(_, newPage) => setPage(newPage)} />;\n};\n\nexport const Interactive: Story = {\n render: () => <InteractiveComponent />,\n};\n"],"names":["AppPagination","jsxs","StackColumn","jsx","AppTypography","useState"],"mappings":";;;;;;;AAYA,MAAM,OAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAWA,cAAAA;AAAAA,EACX,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM,CAAC,UAAU;AAAA,EACjB,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,IAEX,MAAM;AAAA,MACJ,SAAS;AAAA,IAAA;AAAA,IAEX,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS,CAAC,UAAU,OAAO;AAAA,IAAA;AAAA,IAE7B,UAAU;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,EAAA;AAEV;AAOO,MAAM,UAAiB;AAAA,EAC5B,MAAM;AAAA,IACJ,OAAO;AAAA,EAAA;AAEX;AAIO,MAAM,aAAoB;AAAA,EAC/B,QAAQ,MACNC,2BAAAA,KAACC,YAAAA,aAAA,EAAY,KAAK,GAChB,UAAA;AAAA,IAAAC,2BAAAA,IAACC,cAAAA,eAAA,EAAc,SAAQ,MAAK,UAAA,eAAW;AAAA,mCACtCJ,cAAAA,eAAA,EAAc;AAAA,IACfG,2BAAAA,IAACH,cAAAA,eAAA,EAAc,OAAO,EAAA,CAAG;AAAA,IACzBG,2BAAAA,IAACH,cAAAA,eAAA,EAAc,OAAO,GAAA,CAAI;AAAA,IAC1BG,2BAAAA,IAACH,cAAAA,eAAA,EAAc,OAAO,IAAA,CAAK;AAAA,EAAA,EAAA,CAC7B;AAEJ;AAIO,MAAM,YAAmB;AAAA,EAC9B,QAAQ,MACNC,2BAAAA,KAACC,YAAAA,aAAA,EAAY,KAAK,GAChB,UAAA;AAAA,IAAAC,2BAAAA,IAACC,cAAAA,eAAA,EAAc,SAAQ,MAAK,UAAA,cAAU;AAAA,IACtCD,2BAAAA,IAACH,cAAAA,eAAA,EAAc,MAAK,QAAA,CAAQ;AAAA,IAC5BG,2BAAAA,IAACH,cAAAA,eAAA,EAAc,OAAO,GAAG,MAAK,SAAQ;AAAA,IACtCG,2BAAAA,IAACH,cAAAA,eAAA,EAAc,OAAO,IAAI,MAAK,SAAQ;AAAA,IACvCG,2BAAAA,IAACH,cAAAA,eAAA,EAAc,OAAO,KAAK,MAAK,QAAA,CAAQ;AAAA,EAAA,EAAA,CAC1C;AAEJ;AAIA,MAAM,uBAAuB,MAAM;AACjC,QAAM,CAAC,MAAM,OAAO,IAAIK,MAAAA,SAAS,CAAC;AAElC,SAAOF,2BAAAA,IAACH,cAAAA,eAAA,EAAc,OAAO,IAAI,MAAY,UAAU,CAAC,GAAG,YAAY,QAAQ,OAAO,EAAA,CAAG;AAC3F;AAEO,MAAM,cAAqB;AAAA,EAChC,QAAQ,MAAMG,+BAAC,sBAAA,CAAA,CAAqB;AACtC;;;;;;"}
@@ -1,145 +0,0 @@
1
- "use strict";
2
- Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
- const jsxRuntime = require("react/jsx-runtime");
4
- const React = require("react");
5
- const appRadioGroup = require("../../components/app-radio-group.js");
6
- const stackColumn = require("../../components/stack-column.js");
7
- const meta = {
8
- title: "React/App Radio Group",
9
- component: appRadioGroup.AppRadioGroup,
10
- parameters: {
11
- layout: "centered"
12
- },
13
- tags: ["autodocs"],
14
- argTypes: {
15
- label: {
16
- control: "text"
17
- },
18
- radioSize: {
19
- control: "select",
20
- options: ["small", "medium", "large"]
21
- },
22
- row: {
23
- control: "boolean"
24
- },
25
- disabled: {
26
- control: "boolean"
27
- }
28
- },
29
- args: {
30
- name: "radioGroup",
31
- label: "Radio Group",
32
- radioSize: "medium",
33
- row: true,
34
- disabled: false,
35
- options: [
36
- { value: "opt1", label: "Option 1" },
37
- { value: "opt2", label: "Option 2" },
38
- { value: "opt3", label: "Option 3" }
39
- ]
40
- }
41
- };
42
- const Default = {
43
- args: {
44
- name: "defaultRadioGroup",
45
- label: "Select an option"
46
- }
47
- };
48
- const Row = {
49
- args: {
50
- name: "rowRadioGroup",
51
- label: "Row Layout",
52
- row: true
53
- }
54
- };
55
- const Column = {
56
- args: {
57
- name: "columnRadioGroup",
58
- label: "Column Layout",
59
- row: false
60
- }
61
- };
62
- const Sizes = {
63
- render: () => /* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { gap: 4, children: [
64
- /* @__PURE__ */ jsxRuntime.jsx(
65
- appRadioGroup.AppRadioGroup,
66
- {
67
- name: "smallRadio",
68
- label: "Small",
69
- radioSize: "small",
70
- options: [
71
- { value: "opt1", label: "Option 1" },
72
- { value: "opt2", label: "Option 2" },
73
- { value: "opt3", label: "Option 3" }
74
- ]
75
- }
76
- ),
77
- /* @__PURE__ */ jsxRuntime.jsx(
78
- appRadioGroup.AppRadioGroup,
79
- {
80
- name: "mediumRadio",
81
- label: "Medium",
82
- radioSize: "medium",
83
- options: [
84
- { value: "opt1", label: "Option 1" },
85
- { value: "opt2", label: "Option 2" },
86
- { value: "opt3", label: "Option 3" }
87
- ]
88
- }
89
- ),
90
- /* @__PURE__ */ jsxRuntime.jsx(
91
- appRadioGroup.AppRadioGroup,
92
- {
93
- name: "largeRadio",
94
- label: "Large",
95
- radioSize: "large",
96
- options: [
97
- { value: "opt1", label: "Option 1" },
98
- { value: "opt2", label: "Option 2" },
99
- { value: "opt3", label: "Option 3" }
100
- ]
101
- }
102
- )
103
- ] })
104
- };
105
- const Disabled = {
106
- args: {
107
- name: "disabledRadioGroup",
108
- label: "Disabled Radio Group",
109
- disabled: true
110
- }
111
- };
112
- const NoLabel = {
113
- args: {
114
- name: "noLabelRadioGroup"
115
- }
116
- };
117
- const InteractiveComponent = () => {
118
- const [value, setValue] = React.useState("opt1");
119
- return /* @__PURE__ */ jsxRuntime.jsx(
120
- appRadioGroup.AppRadioGroup,
121
- {
122
- name: "interactiveRadioGroup",
123
- label: `Selected: ${value}`,
124
- value,
125
- onChange: (e) => setValue(e.target.value),
126
- options: [
127
- { value: "opt1", label: "Option 1" },
128
- { value: "opt2", label: "Option 2" },
129
- { value: "opt3", label: "Option 3" }
130
- ]
131
- }
132
- );
133
- };
134
- const Interactive = {
135
- render: () => /* @__PURE__ */ jsxRuntime.jsx(InteractiveComponent, {})
136
- };
137
- exports.Column = Column;
138
- exports.Default = Default;
139
- exports.Disabled = Disabled;
140
- exports.Interactive = Interactive;
141
- exports.NoLabel = NoLabel;
142
- exports.Row = Row;
143
- exports.Sizes = Sizes;
144
- exports.default = meta;
145
- //# sourceMappingURL=AppRadioGroup.stories.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AppRadioGroup.stories.js","sources":["../../../../../src/stories/react/AppRadioGroup.stories.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { AppRadioGroup } from '~/components/app-radio-group';\nimport { StackColumn } from '~/components/stack-column';\n\n//\n//\n\n// Meta\nconst meta = {\n title: 'React/App Radio Group',\n component: AppRadioGroup,\n parameters: {\n layout: 'centered',\n },\n tags: ['autodocs'],\n argTypes: {\n label: {\n control: 'text',\n },\n radioSize: {\n control: 'select',\n options: ['small', 'medium', 'large'],\n },\n row: {\n control: 'boolean',\n },\n disabled: {\n control: 'boolean',\n },\n },\n args: {\n name: 'radioGroup',\n label: 'Radio Group',\n radioSize: 'medium',\n row: true,\n disabled: false,\n options: [\n { value: 'opt1', label: 'Option 1' },\n { value: 'opt2', label: 'Option 2' },\n { value: 'opt3', label: 'Option 3' },\n ],\n },\n} satisfies Meta<typeof AppRadioGroup>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\nexport const Default: Story = {\n args: {\n name: 'defaultRadioGroup',\n label: 'Select an option',\n },\n};\n\n//\n\nexport const Row: Story = {\n args: {\n name: 'rowRadioGroup',\n label: 'Row Layout',\n row: true,\n },\n};\n\n//\n\nexport const Column: Story = {\n args: {\n name: 'columnRadioGroup',\n label: 'Column Layout',\n row: false,\n },\n};\n\n//\n\nexport const Sizes: Story = {\n render: () => (\n <StackColumn gap={4}>\n <AppRadioGroup\n name=\"smallRadio\"\n label=\"Small\"\n radioSize=\"small\"\n options={[\n { value: 'opt1', label: 'Option 1' },\n { value: 'opt2', label: 'Option 2' },\n { value: 'opt3', label: 'Option 3' },\n ]}\n />\n <AppRadioGroup\n name=\"mediumRadio\"\n label=\"Medium\"\n radioSize=\"medium\"\n options={[\n { value: 'opt1', label: 'Option 1' },\n { value: 'opt2', label: 'Option 2' },\n { value: 'opt3', label: 'Option 3' },\n ]}\n />\n <AppRadioGroup\n name=\"largeRadio\"\n label=\"Large\"\n radioSize=\"large\"\n options={[\n { value: 'opt1', label: 'Option 1' },\n { value: 'opt2', label: 'Option 2' },\n { value: 'opt3', label: 'Option 3' },\n ]}\n />\n </StackColumn>\n ),\n};\n\n//\n\nexport const Disabled: Story = {\n args: {\n name: 'disabledRadioGroup',\n label: 'Disabled Radio Group',\n disabled: true,\n },\n};\n\n//\n\nexport const NoLabel: Story = {\n args: {\n name: 'noLabelRadioGroup',\n },\n};\n\n//\n\nconst InteractiveComponent = () => {\n const [value, setValue] = useState('opt1');\n\n return (\n <AppRadioGroup\n name=\"interactiveRadioGroup\"\n label={`Selected: ${value}`}\n value={value}\n onChange={e => setValue(e.target.value)}\n options={[\n { value: 'opt1', label: 'Option 1' },\n { value: 'opt2', label: 'Option 2' },\n { value: 'opt3', label: 'Option 3' },\n ]}\n />\n );\n};\n\nexport const Interactive: Story = {\n render: () => <InteractiveComponent />,\n};\n"],"names":["AppRadioGroup","jsxs","StackColumn","jsx","useState"],"mappings":"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"}
@@ -1,68 +0,0 @@
1
- "use strict";
2
- Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
- const jsxRuntime = require("react/jsx-runtime");
4
- const material = require("@mui/material");
5
- const appStatus = require("../../components/app-status.js");
6
- const meta = {
7
- title: "React/App Status",
8
- component: appStatus.AppStatus,
9
- parameters: {
10
- layout: "centered"
11
- },
12
- tags: ["autodocs"],
13
- argTypes: {
14
- color: {
15
- control: "select"
16
- }
17
- }
18
- };
19
- const Playground = {
20
- args: {
21
- color: "success",
22
- label: "Text",
23
- size: "small",
24
- tooltip: "Tooltip sample",
25
- tooltipProps: {
26
- placement: "top"
27
- }
28
- }
29
- };
30
- const Variants = {
31
- render: () => /* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { spacing: 0, gap: 4, children: [
32
- /* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { direction: "row", spacing: 0, gap: 2, flexWrap: "wrap", justifyContent: "center", children: [
33
- /* @__PURE__ */ jsxRuntime.jsx(appStatus.AppStatus, { label: "Success", color: "success" }),
34
- /* @__PURE__ */ jsxRuntime.jsx(appStatus.AppStatus, { label: "Warning", color: "warning" }),
35
- /* @__PURE__ */ jsxRuntime.jsx(appStatus.AppStatus, { label: "Error", color: "error" }),
36
- /* @__PURE__ */ jsxRuntime.jsx(appStatus.AppStatus, { label: "Neutral", color: "neutral" }),
37
- /* @__PURE__ */ jsxRuntime.jsx(appStatus.AppStatus, { label: "Disabled", color: "disabled" }),
38
- /* @__PURE__ */ jsxRuntime.jsx(appStatus.AppStatus, { label: "Info", color: "info" }),
39
- /* @__PURE__ */ jsxRuntime.jsx(appStatus.AppStatus, { label: "Orange", color: "orange" }),
40
- /* @__PURE__ */ jsxRuntime.jsx(appStatus.AppStatus, { label: "Blue", color: "blue" }),
41
- /* @__PURE__ */ jsxRuntime.jsx(appStatus.AppStatus, { label: "With Tooltip", color: "neutral", tooltip: "Tooltip sample" })
42
- ] }),
43
- /* @__PURE__ */ jsxRuntime.jsx(material.Divider, {}),
44
- /* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { direction: "row", spacing: 0, gap: 2, flexWrap: "wrap", justifyContent: "center", children: [
45
- /* @__PURE__ */ jsxRuntime.jsx(appStatus.AppStatus, { label: "Success", color: "success", size: "medium" }),
46
- /* @__PURE__ */ jsxRuntime.jsx(appStatus.AppStatus, { label: "Warning", color: "warning", size: "medium" }),
47
- /* @__PURE__ */ jsxRuntime.jsx(appStatus.AppStatus, { label: "Error", color: "error", size: "medium" }),
48
- /* @__PURE__ */ jsxRuntime.jsx(appStatus.AppStatus, { label: "Neutral", color: "neutral", size: "medium" }),
49
- /* @__PURE__ */ jsxRuntime.jsx(appStatus.AppStatus, { label: "Disabled", color: "disabled", size: "medium" }),
50
- /* @__PURE__ */ jsxRuntime.jsx(appStatus.AppStatus, { label: "Info", color: "info", size: "medium" }),
51
- /* @__PURE__ */ jsxRuntime.jsx(appStatus.AppStatus, { label: "Orange", color: "orange", size: "medium" }),
52
- /* @__PURE__ */ jsxRuntime.jsx(appStatus.AppStatus, { label: "Blue", color: "blue", size: "medium" }),
53
- /* @__PURE__ */ jsxRuntime.jsx(
54
- appStatus.AppStatus,
55
- {
56
- label: "With Tooltip size medium",
57
- color: "neutral",
58
- size: "medium",
59
- tooltip: "Tooltip sample"
60
- }
61
- )
62
- ] })
63
- ] })
64
- };
65
- exports.Playground = Playground;
66
- exports.Variants = Variants;
67
- exports.default = meta;
68
- //# sourceMappingURL=AppStatus.stories.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AppStatus.stories.js","sources":["../../../../../src/stories/react/AppStatus.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { Divider, Stack } from '@mui/material';\n\nimport { AppStatus } from '~/components/app-status';\n\n//\n//\n\n// Meta\nconst meta = {\n title: 'React/App Status',\n component: AppStatus,\n parameters: {\n layout: 'centered',\n },\n tags: ['autodocs'],\n argTypes: {\n color: {\n control: 'select',\n },\n },\n} satisfies Meta<typeof AppStatus>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\nexport const Playground: Story = {\n args: {\n color: 'success',\n label: 'Text',\n size: 'small',\n tooltip: 'Tooltip sample',\n tooltipProps: {\n placement: 'top',\n },\n },\n};\n\nexport const Variants: Story = {\n render: () => (\n <Stack spacing={0} gap={4}>\n <Stack direction=\"row\" spacing={0} gap={2} flexWrap=\"wrap\" justifyContent=\"center\">\n <AppStatus label=\"Success\" color=\"success\" />\n <AppStatus label=\"Warning\" color=\"warning\" />\n <AppStatus label=\"Error\" color=\"error\" />\n <AppStatus label=\"Neutral\" color=\"neutral\" />\n <AppStatus label=\"Disabled\" color=\"disabled\" />\n <AppStatus label=\"Info\" color=\"info\" />\n <AppStatus label=\"Orange\" color=\"orange\" />\n <AppStatus label=\"Blue\" color=\"blue\" />\n <AppStatus label=\"With Tooltip\" color=\"neutral\" tooltip=\"Tooltip sample\" />\n </Stack>\n\n <Divider />\n\n <Stack direction=\"row\" spacing={0} gap={2} flexWrap=\"wrap\" justifyContent=\"center\">\n <AppStatus label=\"Success\" color=\"success\" size=\"medium\" />\n <AppStatus label=\"Warning\" color=\"warning\" size=\"medium\" />\n <AppStatus label=\"Error\" color=\"error\" size=\"medium\" />\n <AppStatus label=\"Neutral\" color=\"neutral\" size=\"medium\" />\n <AppStatus label=\"Disabled\" color=\"disabled\" size=\"medium\" />\n <AppStatus label=\"Info\" color=\"info\" size=\"medium\" />\n <AppStatus label=\"Orange\" color=\"orange\" size=\"medium\" />\n <AppStatus label=\"Blue\" color=\"blue\" size=\"medium\" />\n <AppStatus\n label=\"With Tooltip size medium\"\n color=\"neutral\"\n size=\"medium\"\n tooltip=\"Tooltip sample\"\n />\n </Stack>\n </Stack>\n ),\n};\n"],"names":["AppStatus","jsxs","Stack","jsx","Divider"],"mappings":";;;;;AAUA,MAAM,OAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAWA,UAAAA;AAAAA,EACX,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM,CAAC,UAAU;AAAA,EACjB,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;AAOO,MAAM,aAAoB;AAAA,EAC/B,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA,IACT,cAAc;AAAA,MACZ,WAAW;AAAA,IAAA;AAAA,EACb;AAEJ;AAEO,MAAM,WAAkB;AAAA,EAC7B,QAAQ,MACNC,2BAAAA,KAACC,kBAAM,SAAS,GAAG,KAAK,GACtB,UAAA;AAAA,IAAAD,2BAAAA,KAACC,SAAAA,OAAA,EAAM,WAAU,OAAM,SAAS,GAAG,KAAK,GAAG,UAAS,QAAO,gBAAe,UACxE,UAAA;AAAA,MAAAC,2BAAAA,IAACH,UAAAA,WAAA,EAAU,OAAM,WAAU,OAAM,WAAU;AAAA,MAC3CG,2BAAAA,IAACH,UAAAA,WAAA,EAAU,OAAM,WAAU,OAAM,WAAU;AAAA,MAC3CG,2BAAAA,IAACH,UAAAA,WAAA,EAAU,OAAM,SAAQ,OAAM,SAAQ;AAAA,MACvCG,2BAAAA,IAACH,UAAAA,WAAA,EAAU,OAAM,WAAU,OAAM,WAAU;AAAA,MAC3CG,2BAAAA,IAACH,UAAAA,WAAA,EAAU,OAAM,YAAW,OAAM,YAAW;AAAA,MAC7CG,2BAAAA,IAACH,UAAAA,WAAA,EAAU,OAAM,QAAO,OAAM,QAAO;AAAA,MACrCG,2BAAAA,IAACH,UAAAA,WAAA,EAAU,OAAM,UAAS,OAAM,UAAS;AAAA,MACzCG,2BAAAA,IAACH,UAAAA,WAAA,EAAU,OAAM,QAAO,OAAM,QAAO;AAAA,qCACpCA,UAAAA,WAAA,EAAU,OAAM,gBAAe,OAAM,WAAU,SAAQ,iBAAA,CAAiB;AAAA,IAAA,GAC3E;AAAA,mCAECI,SAAAA,SAAA,EAAQ;AAAA,IAETH,2BAAAA,KAACC,SAAAA,OAAA,EAAM,WAAU,OAAM,SAAS,GAAG,KAAK,GAAG,UAAS,QAAO,gBAAe,UACxE,UAAA;AAAA,MAAAC,+BAACH,UAAAA,aAAU,OAAM,WAAU,OAAM,WAAU,MAAK,UAAS;AAAA,qCACxDA,UAAAA,WAAA,EAAU,OAAM,WAAU,OAAM,WAAU,MAAK,UAAS;AAAA,qCACxDA,UAAAA,WAAA,EAAU,OAAM,SAAQ,OAAM,SAAQ,MAAK,UAAS;AAAA,qCACpDA,UAAAA,WAAA,EAAU,OAAM,WAAU,OAAM,WAAU,MAAK,UAAS;AAAA,qCACxDA,UAAAA,WAAA,EAAU,OAAM,YAAW,OAAM,YAAW,MAAK,UAAS;AAAA,qCAC1DA,UAAAA,WAAA,EAAU,OAAM,QAAO,OAAM,QAAO,MAAK,UAAS;AAAA,qCAClDA,UAAAA,WAAA,EAAU,OAAM,UAAS,OAAM,UAAS,MAAK,UAAS;AAAA,qCACtDA,UAAAA,WAAA,EAAU,OAAM,QAAO,OAAM,QAAO,MAAK,UAAS;AAAA,MACnDG,2BAAAA;AAAAA,QAACH,UAAAA;AAAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,OAAM;AAAA,UACN,MAAK;AAAA,UACL,SAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IACV,EAAA,CACF;AAAA,EAAA,EAAA,CACF;AAEJ;;;;"}
@@ -1,138 +0,0 @@
1
- "use strict";
2
- Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
- const jsxRuntime = require("react/jsx-runtime");
4
- const appSwitch = require("../../components/app-switch.js");
5
- const appSwitchGroup = require("../../components/app-switch-group.js");
6
- const stackColumn = require("../../components/stack-column.js");
7
- const meta = {
8
- title: "React/App Switch",
9
- component: appSwitch.AppSwitch,
10
- parameters: {
11
- layout: "centered"
12
- },
13
- tags: ["autodocs"],
14
- argTypes: {
15
- label: {
16
- control: "text"
17
- },
18
- color: {
19
- control: "select",
20
- options: ["primary", "error"]
21
- },
22
- disabled: {
23
- control: "boolean"
24
- },
25
- defaultChecked: {
26
- control: "boolean"
27
- }
28
- },
29
- args: {
30
- name: "switch",
31
- label: "Switch label",
32
- color: "primary",
33
- disabled: false
34
- }
35
- };
36
- const Default = {
37
- args: {
38
- name: "defaultSwitch",
39
- label: "Primary Switch"
40
- }
41
- };
42
- const ErrorColor = {
43
- args: {
44
- name: "errorSwitch",
45
- label: "Error Switch",
46
- color: "error"
47
- }
48
- };
49
- const NoLabel = {
50
- render: () => /* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { direction: "row", gap: 2, children: [
51
- /* @__PURE__ */ jsxRuntime.jsx(appSwitch.AppSwitch, { name: "noLabel1" }),
52
- /* @__PURE__ */ jsxRuntime.jsx(appSwitch.AppSwitch, { name: "noLabel2", color: "error" })
53
- ] })
54
- };
55
- const Disabled = {
56
- render: () => /* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { gap: 2, children: [
57
- /* @__PURE__ */ jsxRuntime.jsx(appSwitch.AppSwitch, { name: "disabled1", label: "Disabled - Error - Unchecked", color: "error", disabled: true }),
58
- /* @__PURE__ */ jsxRuntime.jsx(
59
- appSwitch.AppSwitch,
60
- {
61
- name: "disabled2",
62
- label: "Disabled - Error - Checked",
63
- color: "error",
64
- defaultChecked: true,
65
- disabled: true
66
- }
67
- ),
68
- /* @__PURE__ */ jsxRuntime.jsx(appSwitch.AppSwitch, { name: "disabled3", label: "Disabled - Primary - Unchecked", disabled: true }),
69
- /* @__PURE__ */ jsxRuntime.jsx(appSwitch.AppSwitch, { name: "disabled4", label: "Disabled - Primary - Checked", defaultChecked: true, disabled: true })
70
- ] })
71
- };
72
- const SwitchGroup = {
73
- render: () => /* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { gap: 4, children: [
74
- /* @__PURE__ */ jsxRuntime.jsx(
75
- appSwitchGroup.AppSwitchGroup,
76
- {
77
- label: "Assign responsibility",
78
- helperText: "Be careful",
79
- options: [
80
- { name: "group1", label: "Gilad Gray" },
81
- { name: "group2", label: "Jason Killian" },
82
- { name: "group3", label: "Antoine Llorca" }
83
- ]
84
- }
85
- ),
86
- /* @__PURE__ */ jsxRuntime.jsx(
87
- appSwitchGroup.AppSwitchGroup,
88
- {
89
- label: "Error Assign responsibility",
90
- helperText: "Be careful",
91
- error: true,
92
- formControlProps: { required: true },
93
- options: [
94
- { name: "errorGroup1", label: "Gilad Gray" },
95
- { name: "errorGroup2", label: "Jason Killian" },
96
- { name: "errorGroup3", label: "Antoine Llorca" }
97
- ]
98
- }
99
- )
100
- ] })
101
- };
102
- const DisabledSwitchGroup = {
103
- render: () => /* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { gap: 4, children: [
104
- /* @__PURE__ */ jsxRuntime.jsx(
105
- appSwitchGroup.AppSwitchGroup,
106
- {
107
- label: "Disabled Assign responsibility",
108
- helperText: "Be careful",
109
- disabled: true,
110
- options: [
111
- { name: "disabledGroup1", label: "Gilad Gray" },
112
- { name: "disabledGroup2", label: "Jason Killian" },
113
- { name: "disabledGroup3", label: "Antoine Llorca" }
114
- ]
115
- }
116
- ),
117
- /* @__PURE__ */ jsxRuntime.jsx(
118
- appSwitchGroup.AppSwitchGroup,
119
- {
120
- label: "Some Disabled Assign responsibility",
121
- helperText: "Be careful",
122
- options: [
123
- { name: "someDisabled1", label: "Gilad Gray", disabled: true },
124
- { name: "someDisabled2", label: "Jason Killian" },
125
- { name: "someDisabled3", label: "Antoine Llorca", disabled: true }
126
- ]
127
- }
128
- )
129
- ] })
130
- };
131
- exports.Default = Default;
132
- exports.Disabled = Disabled;
133
- exports.DisabledSwitchGroup = DisabledSwitchGroup;
134
- exports.ErrorColor = ErrorColor;
135
- exports.NoLabel = NoLabel;
136
- exports.SwitchGroup = SwitchGroup;
137
- exports.default = meta;
138
- //# sourceMappingURL=AppSwitch.stories.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AppSwitch.stories.js","sources":["../../../../../src/stories/react/AppSwitch.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { AppSwitch } from '~/components/app-switch';\nimport { AppSwitchGroup } from '~/components/app-switch-group';\nimport { StackColumn } from '~/components/stack-column';\n\n//\n//\n\n// Meta\nconst meta = {\n title: 'React/App Switch',\n component: AppSwitch,\n parameters: {\n layout: 'centered',\n },\n tags: ['autodocs'],\n argTypes: {\n label: {\n control: 'text',\n },\n color: {\n control: 'select',\n options: ['primary', 'error'],\n },\n disabled: {\n control: 'boolean',\n },\n defaultChecked: {\n control: 'boolean',\n },\n },\n args: {\n name: 'switch',\n label: 'Switch label',\n color: 'primary',\n disabled: false,\n },\n} satisfies Meta<typeof AppSwitch>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\nexport const Default: Story = {\n args: {\n name: 'defaultSwitch',\n label: 'Primary Switch',\n },\n};\n\n//\n\nexport const ErrorColor: Story = {\n args: {\n name: 'errorSwitch',\n label: 'Error Switch',\n color: 'error',\n },\n};\n\n//\n\nexport const NoLabel: Story = {\n render: () => (\n <StackColumn direction=\"row\" gap={2}>\n <AppSwitch name=\"noLabel1\" />\n <AppSwitch name=\"noLabel2\" color=\"error\" />\n </StackColumn>\n ),\n};\n\n//\n\nexport const Disabled: Story = {\n render: () => (\n <StackColumn gap={2}>\n <AppSwitch name=\"disabled1\" label=\"Disabled - Error - Unchecked\" color=\"error\" disabled />\n <AppSwitch\n name=\"disabled2\"\n label=\"Disabled - Error - Checked\"\n color=\"error\"\n defaultChecked\n disabled\n />\n <AppSwitch name=\"disabled3\" label=\"Disabled - Primary - Unchecked\" disabled />\n <AppSwitch name=\"disabled4\" label=\"Disabled - Primary - Checked\" defaultChecked disabled />\n </StackColumn>\n ),\n};\n\n//\n\nexport const SwitchGroup: Story = {\n render: () => (\n <StackColumn gap={4}>\n <AppSwitchGroup\n label=\"Assign responsibility\"\n helperText=\"Be careful\"\n options={[\n { name: 'group1', label: 'Gilad Gray' },\n { name: 'group2', label: 'Jason Killian' },\n { name: 'group3', label: 'Antoine Llorca' },\n ]}\n />\n <AppSwitchGroup\n label=\"Error Assign responsibility\"\n helperText=\"Be careful\"\n error\n formControlProps={{ required: true }}\n options={[\n { name: 'errorGroup1', label: 'Gilad Gray' },\n { name: 'errorGroup2', label: 'Jason Killian' },\n { name: 'errorGroup3', label: 'Antoine Llorca' },\n ]}\n />\n </StackColumn>\n ),\n};\n\n//\n\nexport const DisabledSwitchGroup: Story = {\n render: () => (\n <StackColumn gap={4}>\n <AppSwitchGroup\n label=\"Disabled Assign responsibility\"\n helperText=\"Be careful\"\n disabled\n options={[\n { name: 'disabledGroup1', label: 'Gilad Gray' },\n { name: 'disabledGroup2', label: 'Jason Killian' },\n { name: 'disabledGroup3', label: 'Antoine Llorca' },\n ]}\n />\n <AppSwitchGroup\n label=\"Some Disabled Assign responsibility\"\n helperText=\"Be careful\"\n options={[\n { name: 'someDisabled1', label: 'Gilad Gray', disabled: true },\n { name: 'someDisabled2', label: 'Jason Killian' },\n { name: 'someDisabled3', label: 'Antoine Llorca', disabled: true },\n ]}\n />\n </StackColumn>\n ),\n};\n"],"names":["AppSwitch","jsxs","StackColumn","jsx","AppSwitchGroup"],"mappings":";;;;;;AAUA,MAAM,OAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAWA,UAAAA;AAAAA,EACX,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM,CAAC,UAAU;AAAA,EACjB,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,IAEX,OAAO;AAAA,MACL,SAAS;AAAA,MACT,SAAS,CAAC,WAAW,OAAO;AAAA,IAAA;AAAA,IAE9B,UAAU;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,IAEX,gBAAgB;AAAA,MACd,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,IACP,UAAU;AAAA,EAAA;AAEd;AAOO,MAAM,UAAiB;AAAA,EAC5B,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,OAAO;AAAA,EAAA;AAEX;AAIO,MAAM,aAAoB;AAAA,EAC/B,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,EAAA;AAEX;AAIO,MAAM,UAAiB;AAAA,EAC5B,QAAQ,MACNC,2BAAAA,KAACC,2BAAY,WAAU,OAAM,KAAK,GAChC,UAAA;AAAA,IAAAC,2BAAAA,IAACH,UAAAA,WAAA,EAAU,MAAK,WAAA,CAAW;AAAA,IAC3BG,2BAAAA,IAACH,UAAAA,WAAA,EAAU,MAAK,YAAW,OAAM,QAAA,CAAQ;AAAA,EAAA,EAAA,CAC3C;AAEJ;AAIO,MAAM,WAAkB;AAAA,EAC7B,QAAQ,MACNC,2BAAAA,KAACC,YAAAA,aAAA,EAAY,KAAK,GAChB,UAAA;AAAA,IAAAC,2BAAAA,IAACH,UAAAA,WAAA,EAAU,MAAK,aAAY,OAAM,gCAA+B,OAAM,SAAQ,UAAQ,KAAA,CAAC;AAAA,IACxFG,2BAAAA;AAAAA,MAACH,UAAAA;AAAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAM;AAAA,QACN,OAAM;AAAA,QACN,gBAAc;AAAA,QACd,UAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,mCAETA,UAAAA,WAAA,EAAU,MAAK,aAAY,OAAM,kCAAiC,UAAQ,MAAC;AAAA,IAC5EG,2BAAAA,IAACH,UAAAA,aAAU,MAAK,aAAY,OAAM,gCAA+B,gBAAc,MAAC,UAAQ,KAAA,CAAC;AAAA,EAAA,EAAA,CAC3F;AAEJ;AAIO,MAAM,cAAqB;AAAA,EAChC,QAAQ,MACNC,2BAAAA,KAACC,YAAAA,aAAA,EAAY,KAAK,GAChB,UAAA;AAAA,IAAAC,2BAAAA;AAAAA,MAACC,eAAAA;AAAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,YAAW;AAAA,QACX,SAAS;AAAA,UACP,EAAE,MAAM,UAAU,OAAO,aAAA;AAAA,UACzB,EAAE,MAAM,UAAU,OAAO,gBAAA;AAAA,UACzB,EAAE,MAAM,UAAU,OAAO,iBAAA;AAAA,QAAiB;AAAA,MAC5C;AAAA,IAAA;AAAA,IAEFD,2BAAAA;AAAAA,MAACC,eAAAA;AAAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,YAAW;AAAA,QACX,OAAK;AAAA,QACL,kBAAkB,EAAE,UAAU,KAAA;AAAA,QAC9B,SAAS;AAAA,UACP,EAAE,MAAM,eAAe,OAAO,aAAA;AAAA,UAC9B,EAAE,MAAM,eAAe,OAAO,gBAAA;AAAA,UAC9B,EAAE,MAAM,eAAe,OAAO,iBAAA;AAAA,QAAiB;AAAA,MACjD;AAAA,IAAA;AAAA,EACF,EAAA,CACF;AAEJ;AAIO,MAAM,sBAA6B;AAAA,EACxC,QAAQ,MACNH,2BAAAA,KAACC,YAAAA,aAAA,EAAY,KAAK,GAChB,UAAA;AAAA,IAAAC,2BAAAA;AAAAA,MAACC,eAAAA;AAAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,YAAW;AAAA,QACX,UAAQ;AAAA,QACR,SAAS;AAAA,UACP,EAAE,MAAM,kBAAkB,OAAO,aAAA;AAAA,UACjC,EAAE,MAAM,kBAAkB,OAAO,gBAAA;AAAA,UACjC,EAAE,MAAM,kBAAkB,OAAO,iBAAA;AAAA,QAAiB;AAAA,MACpD;AAAA,IAAA;AAAA,IAEFD,2BAAAA;AAAAA,MAACC,eAAAA;AAAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,YAAW;AAAA,QACX,SAAS;AAAA,UACP,EAAE,MAAM,iBAAiB,OAAO,cAAc,UAAU,KAAA;AAAA,UACxD,EAAE,MAAM,iBAAiB,OAAO,gBAAA;AAAA,UAChC,EAAE,MAAM,iBAAiB,OAAO,kBAAkB,UAAU,KAAA;AAAA,QAAK;AAAA,MACnE;AAAA,IAAA;AAAA,EACF,EAAA,CACF;AAEJ;;;;;;;;"}
@@ -1,100 +0,0 @@
1
- "use strict";
2
- Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
- const jsxRuntime = require("react/jsx-runtime");
4
- const React = require("react");
5
- const appTabs = require("../../components/app-tabs.js");
6
- const settingsLine = require("../../icons/system/settings-line.js");
7
- const meta = {
8
- title: "React/App Tabs",
9
- component: appTabs.AppTabs,
10
- parameters: {
11
- layout: "centered"
12
- },
13
- tags: ["autodocs"],
14
- argTypes: {
15
- value: {
16
- control: "number"
17
- }
18
- }
19
- };
20
- const InteractiveComponent = () => {
21
- const [value, setValue] = React.useState(0);
22
- return /* @__PURE__ */ jsxRuntime.jsx(
23
- appTabs.AppTabs,
24
- {
25
- value,
26
- onChange: (_, newValue) => setValue(newValue),
27
- tabs: [
28
- { key: "tab1", label: "All", chip: { label: "120" } },
29
- { key: "tab2", label: "Active", chip: { label: "85", color: "success" } },
30
- { key: "tab3", label: "Pending", chip: { label: "25", color: "warning" } }
31
- ]
32
- }
33
- );
34
- };
35
- const Interactive = {
36
- render: () => /* @__PURE__ */ jsxRuntime.jsx(InteractiveComponent, {})
37
- };
38
- const Default = {
39
- args: {
40
- value: 0,
41
- tabs: [
42
- { key: "tab1", label: "Tab One" },
43
- { key: "tab2", label: "Tab Two" },
44
- { key: "tab3", label: "Tab Three" }
45
- ]
46
- }
47
- };
48
- const WithChip = {
49
- args: {
50
- value: 0,
51
- tabs: [
52
- { key: "tab1", label: "All", chip: { label: "120", color: "neutral" } },
53
- { key: "tab2", label: "Active", chip: { label: "85", color: "success" } },
54
- { key: "tab3", label: "Pending", chip: { label: "25", color: "warning" } },
55
- { key: "tab4", label: "Errors", chip: { label: "10", color: "error" } }
56
- ]
57
- }
58
- };
59
- const WithIcon = {
60
- args: {
61
- value: 0,
62
- tabs: [
63
- { key: "tab1", label: "Settings", icon: /* @__PURE__ */ jsxRuntime.jsx(settingsLine.IconSettingsLine, {}) },
64
- { key: "tab2", label: "Tab Two" },
65
- { key: "tab3", label: "Tab Three" }
66
- ]
67
- }
68
- };
69
- const WithIconAndChip = {
70
- args: {
71
- value: 0,
72
- tabs: [
73
- {
74
- key: "tab1",
75
- label: "Settings",
76
- icon: /* @__PURE__ */ jsxRuntime.jsx(settingsLine.IconSettingsLine, {}),
77
- chip: { label: "5", color: "info" }
78
- },
79
- { key: "tab2", label: "Tab Two", chip: { label: "12", color: "success" } }
80
- ]
81
- }
82
- };
83
- const UsingChildren = {
84
- args: {
85
- value: 0
86
- },
87
- render: (args) => /* @__PURE__ */ jsxRuntime.jsxs(appTabs.AppTabs, { ...args, children: [
88
- /* @__PURE__ */ jsxRuntime.jsx(appTabs.AppTab, { label: "First" }),
89
- /* @__PURE__ */ jsxRuntime.jsx(appTabs.AppTab, { label: "Second", chip: { label: "5", color: "info" } }),
90
- /* @__PURE__ */ jsxRuntime.jsx(appTabs.AppTab, { label: "Third" })
91
- ] })
92
- };
93
- exports.Default = Default;
94
- exports.Interactive = Interactive;
95
- exports.UsingChildren = UsingChildren;
96
- exports.WithChip = WithChip;
97
- exports.WithIcon = WithIcon;
98
- exports.WithIconAndChip = WithIconAndChip;
99
- exports.default = meta;
100
- //# sourceMappingURL=AppTabs.stories.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AppTabs.stories.js","sources":["../../../../../src/stories/react/AppTabs.stories.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { AppTabs, AppTab } from '~/components/app-tabs';\nimport { IconSettingsLine } from '~/icons/system/settings-line';\n\n//\n//\n\n// Meta\nconst meta = {\n title: 'React/App Tabs',\n component: AppTabs,\n parameters: {\n layout: 'centered',\n },\n tags: ['autodocs'],\n argTypes: {\n value: {\n control: 'number',\n },\n },\n} satisfies Meta<typeof AppTabs>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\n//\n\nconst InteractiveComponent = () => {\n const [value, setValue] = useState<number>(0);\n\n return (\n <AppTabs\n value={value}\n onChange={(_, newValue) => setValue(newValue)}\n tabs={[\n { key: 'tab1', label: 'All', chip: { label: '120' } },\n { key: 'tab2', label: 'Active', chip: { label: '85', color: 'success' } },\n { key: 'tab3', label: 'Pending', chip: { label: '25', color: 'warning' } },\n ]}\n />\n );\n};\n\nexport const Interactive: Story = {\n render: () => <InteractiveComponent />,\n};\n\n//\n\nexport const Default: Story = {\n args: {\n value: 0,\n tabs: [\n { key: 'tab1', label: 'Tab One' },\n { key: 'tab2', label: 'Tab Two' },\n { key: 'tab3', label: 'Tab Three' },\n ],\n },\n};\n\n//\n\nexport const WithChip: Story = {\n args: {\n value: 0,\n tabs: [\n { key: 'tab1', label: 'All', chip: { label: '120', color: 'neutral' } },\n { key: 'tab2', label: 'Active', chip: { label: '85', color: 'success' } },\n { key: 'tab3', label: 'Pending', chip: { label: '25', color: 'warning' } },\n { key: 'tab4', label: 'Errors', chip: { label: '10', color: 'error' } },\n ],\n },\n};\n\n//\n\nexport const WithIcon: Story = {\n args: {\n value: 0,\n tabs: [\n { key: 'tab1', label: 'Settings', icon: <IconSettingsLine /> },\n { key: 'tab2', label: 'Tab Two' },\n { key: 'tab3', label: 'Tab Three' },\n ],\n },\n};\n\n//\n\nexport const WithIconAndChip: Story = {\n args: {\n value: 0,\n tabs: [\n {\n key: 'tab1',\n label: 'Settings',\n icon: <IconSettingsLine />,\n chip: { label: '5', color: 'info' },\n },\n { key: 'tab2', label: 'Tab Two', chip: { label: '12', color: 'success' } },\n ],\n },\n};\n\n//\n\nexport const UsingChildren: Story = {\n args: {\n value: 0,\n },\n render: args => (\n <AppTabs {...args}>\n <AppTab label=\"First\" />\n <AppTab label=\"Second\" chip={{ label: '5', color: 'info' }} />\n <AppTab label=\"Third\" />\n </AppTabs>\n ),\n};\n"],"names":["AppTabs","useState","jsx","IconSettingsLine","jsxs","AppTab"],"mappings":"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"}