@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,118 +0,0 @@
1
- import { jsxs, jsx } from "react/jsx-runtime";
2
- /* empty css */
3
- const meta = {
4
- title: "CSS Styles/Components/Radio",
5
- parameters: {
6
- layout: "centered"
7
- },
8
- tags: ["autodocs"]
9
- };
10
- const States = {
11
- render: () => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px" }, children: [
12
- /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Radio States" }),
13
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "24px", flexWrap: "wrap" }, children: [
14
- /* @__PURE__ */ jsxs("label", { className: "zid-radio", children: [
15
- /* @__PURE__ */ jsx("input", { type: "radio", className: "zid-radio__input", name: "state-demo" }),
16
- /* @__PURE__ */ jsx("span", { className: "zid-radio__circle" }),
17
- /* @__PURE__ */ jsx("span", { className: "zid-radio__label", children: "Unchecked" })
18
- ] }),
19
- /* @__PURE__ */ jsxs("label", { className: "zid-radio", children: [
20
- /* @__PURE__ */ jsx("input", { type: "radio", className: "zid-radio__input", name: "state-demo", defaultChecked: true }),
21
- /* @__PURE__ */ jsx("span", { className: "zid-radio__circle" }),
22
- /* @__PURE__ */ jsx("span", { className: "zid-radio__label", children: "Checked" })
23
- ] }),
24
- /* @__PURE__ */ jsxs("label", { className: "zid-radio zid-radio--disabled", children: [
25
- /* @__PURE__ */ jsx("input", { type: "radio", className: "zid-radio__input", name: "state-demo-2", disabled: true }),
26
- /* @__PURE__ */ jsx("span", { className: "zid-radio__circle" }),
27
- /* @__PURE__ */ jsx("span", { className: "zid-radio__label", children: "Disabled" })
28
- ] }),
29
- /* @__PURE__ */ jsxs("label", { className: "zid-radio zid-radio--disabled", children: [
30
- /* @__PURE__ */ jsx("input", { type: "radio", className: "zid-radio__input", name: "state-demo-3", defaultChecked: true, disabled: true }),
31
- /* @__PURE__ */ jsx("span", { className: "zid-radio__circle" }),
32
- /* @__PURE__ */ jsx("span", { className: "zid-radio__label", children: "Disabled Checked" })
33
- ] })
34
- ] })
35
- ] })
36
- };
37
- const RadioGroup = {
38
- render: () => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px", width: "300px" }, children: [
39
- /* @__PURE__ */ jsxs("div", { children: [
40
- /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Radio Group - Vertical" }),
41
- /* @__PURE__ */ jsxs("div", { className: "zid-radio-group", style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
42
- /* @__PURE__ */ jsxs("label", { className: "zid-radio", children: [
43
- /* @__PURE__ */ jsx("input", { type: "radio", className: "zid-radio__input", name: "group-demo", defaultChecked: true }),
44
- /* @__PURE__ */ jsx("span", { className: "zid-radio__circle" }),
45
- /* @__PURE__ */ jsx("span", { className: "zid-radio__label", children: "Option 1" })
46
- ] }),
47
- /* @__PURE__ */ jsxs("label", { className: "zid-radio", children: [
48
- /* @__PURE__ */ jsx("input", { type: "radio", className: "zid-radio__input", name: "group-demo" }),
49
- /* @__PURE__ */ jsx("span", { className: "zid-radio__circle" }),
50
- /* @__PURE__ */ jsx("span", { className: "zid-radio__label", children: "Option 2" })
51
- ] }),
52
- /* @__PURE__ */ jsxs("label", { className: "zid-radio", children: [
53
- /* @__PURE__ */ jsx("input", { type: "radio", className: "zid-radio__input", name: "group-demo" }),
54
- /* @__PURE__ */ jsx("span", { className: "zid-radio__circle" }),
55
- /* @__PURE__ */ jsx("span", { className: "zid-radio__label", children: "Option 3" })
56
- ] })
57
- ] })
58
- ] }),
59
- /* @__PURE__ */ jsxs("div", { children: [
60
- /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Radio Group - Horizontal" }),
61
- /* @__PURE__ */ jsxs("div", { className: "zid-radio-group", style: { display: "flex", gap: "24px", flexWrap: "wrap" }, children: [
62
- /* @__PURE__ */ jsxs("label", { className: "zid-radio", children: [
63
- /* @__PURE__ */ jsx("input", { type: "radio", className: "zid-radio__input", name: "group-demo-h", defaultChecked: true }),
64
- /* @__PURE__ */ jsx("span", { className: "zid-radio__circle" }),
65
- /* @__PURE__ */ jsx("span", { className: "zid-radio__label", children: "Small" })
66
- ] }),
67
- /* @__PURE__ */ jsxs("label", { className: "zid-radio", children: [
68
- /* @__PURE__ */ jsx("input", { type: "radio", className: "zid-radio__input", name: "group-demo-h" }),
69
- /* @__PURE__ */ jsx("span", { className: "zid-radio__circle" }),
70
- /* @__PURE__ */ jsx("span", { className: "zid-radio__label", children: "Medium" })
71
- ] }),
72
- /* @__PURE__ */ jsxs("label", { className: "zid-radio", children: [
73
- /* @__PURE__ */ jsx("input", { type: "radio", className: "zid-radio__input", name: "group-demo-h" }),
74
- /* @__PURE__ */ jsx("span", { className: "zid-radio__circle" }),
75
- /* @__PURE__ */ jsx("span", { className: "zid-radio__label", children: "Large" })
76
- ] })
77
- ] })
78
- ] })
79
- ] })
80
- };
81
- const WithHelperText = {
82
- render: () => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "24px", width: "400px" }, children: [
83
- /* @__PURE__ */ jsx("h3", { style: { marginBottom: "8px", fontFamily: "var(--zid-font-family)" }, children: "With Helper Text" }),
84
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
85
- /* @__PURE__ */ jsxs("div", { children: [
86
- /* @__PURE__ */ jsxs("label", { className: "zid-radio", children: [
87
- /* @__PURE__ */ jsx("input", { type: "radio", className: "zid-radio__input", name: "helper-demo", defaultChecked: true }),
88
- /* @__PURE__ */ jsx("span", { className: "zid-radio__circle" }),
89
- /* @__PURE__ */ jsx("span", { className: "zid-radio__label", children: "Standard Shipping" })
90
- ] }),
91
- /* @__PURE__ */ jsx("div", { className: "zid-input-helper", style: { marginLeft: "28px" }, children: "Free delivery in 5-7 business days" })
92
- ] }),
93
- /* @__PURE__ */ jsxs("div", { children: [
94
- /* @__PURE__ */ jsxs("label", { className: "zid-radio", children: [
95
- /* @__PURE__ */ jsx("input", { type: "radio", className: "zid-radio__input", name: "helper-demo" }),
96
- /* @__PURE__ */ jsx("span", { className: "zid-radio__circle" }),
97
- /* @__PURE__ */ jsx("span", { className: "zid-radio__label", children: "Express Shipping" })
98
- ] }),
99
- /* @__PURE__ */ jsx("div", { className: "zid-input-helper", style: { marginLeft: "28px" }, children: "$9.99 - Delivery in 2-3 business days" })
100
- ] }),
101
- /* @__PURE__ */ jsxs("div", { children: [
102
- /* @__PURE__ */ jsxs("label", { className: "zid-radio", children: [
103
- /* @__PURE__ */ jsx("input", { type: "radio", className: "zid-radio__input", name: "helper-demo" }),
104
- /* @__PURE__ */ jsx("span", { className: "zid-radio__circle" }),
105
- /* @__PURE__ */ jsx("span", { className: "zid-radio__label", children: "Priority Shipping" })
106
- ] }),
107
- /* @__PURE__ */ jsx("div", { className: "zid-input-helper", style: { marginLeft: "28px" }, children: "$19.99 - Next day delivery" })
108
- ] })
109
- ] })
110
- ] })
111
- };
112
- export {
113
- RadioGroup,
114
- States,
115
- WithHelperText,
116
- meta as default
117
- };
118
- //# sourceMappingURL=Radio.stories.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Radio.stories.js","sources":["../../../../../src/stories/css/Radio.stories.tsx"],"sourcesContent":["import type { StoryObj } from '@storybook/react-vite';\nimport '../../css/index.css';\n\nconst meta = {\n title: 'CSS Styles/Components/Radio',\n parameters: {\n layout: 'centered',\n },\n tags: ['autodocs'],\n};\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const States: Story = {\n render: () => (\n <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>\n <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Radio States</h3>\n <div style={{ display: 'flex', gap: '24px', flexWrap: 'wrap' }}>\n <label className=\"zid-radio\">\n <input type=\"radio\" className=\"zid-radio__input\" name=\"state-demo\" />\n <span className=\"zid-radio__circle\"></span>\n <span className=\"zid-radio__label\">Unchecked</span>\n </label>\n <label className=\"zid-radio\">\n <input type=\"radio\" className=\"zid-radio__input\" name=\"state-demo\" defaultChecked />\n <span className=\"zid-radio__circle\"></span>\n <span className=\"zid-radio__label\">Checked</span>\n </label>\n <label className=\"zid-radio zid-radio--disabled\">\n <input type=\"radio\" className=\"zid-radio__input\" name=\"state-demo-2\" disabled />\n <span className=\"zid-radio__circle\"></span>\n <span className=\"zid-radio__label\">Disabled</span>\n </label>\n <label className=\"zid-radio zid-radio--disabled\">\n <input type=\"radio\" className=\"zid-radio__input\" name=\"state-demo-3\" defaultChecked disabled />\n <span className=\"zid-radio__circle\"></span>\n <span className=\"zid-radio__label\">Disabled Checked</span>\n </label>\n </div>\n </div>\n ),\n};\n\nexport const RadioGroup: Story = {\n render: () => (\n <div style={{ display: 'flex', flexDirection: 'column', gap: '32px', width: '300px' }}>\n <div>\n <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Radio Group - Vertical</h3>\n <div className=\"zid-radio-group\" style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>\n <label className=\"zid-radio\">\n <input type=\"radio\" className=\"zid-radio__input\" name=\"group-demo\" defaultChecked />\n <span className=\"zid-radio__circle\"></span>\n <span className=\"zid-radio__label\">Option 1</span>\n </label>\n <label className=\"zid-radio\">\n <input type=\"radio\" className=\"zid-radio__input\" name=\"group-demo\" />\n <span className=\"zid-radio__circle\"></span>\n <span className=\"zid-radio__label\">Option 2</span>\n </label>\n <label className=\"zid-radio\">\n <input type=\"radio\" className=\"zid-radio__input\" name=\"group-demo\" />\n <span className=\"zid-radio__circle\"></span>\n <span className=\"zid-radio__label\">Option 3</span>\n </label>\n </div>\n </div>\n <div>\n <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Radio Group - Horizontal</h3>\n <div className=\"zid-radio-group\" style={{ display: 'flex', gap: '24px', flexWrap: 'wrap' }}>\n <label className=\"zid-radio\">\n <input type=\"radio\" className=\"zid-radio__input\" name=\"group-demo-h\" defaultChecked />\n <span className=\"zid-radio__circle\"></span>\n <span className=\"zid-radio__label\">Small</span>\n </label>\n <label className=\"zid-radio\">\n <input type=\"radio\" className=\"zid-radio__input\" name=\"group-demo-h\" />\n <span className=\"zid-radio__circle\"></span>\n <span className=\"zid-radio__label\">Medium</span>\n </label>\n <label className=\"zid-radio\">\n <input type=\"radio\" className=\"zid-radio__input\" name=\"group-demo-h\" />\n <span className=\"zid-radio__circle\"></span>\n <span className=\"zid-radio__label\">Large</span>\n </label>\n </div>\n </div>\n </div>\n ),\n};\n\nexport const WithHelperText: Story = {\n render: () => (\n <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', width: '400px' }}>\n <h3 style={{ marginBottom: '8px', fontFamily: 'var(--zid-font-family)' }}>With Helper Text</h3>\n <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n <div>\n <label className=\"zid-radio\">\n <input type=\"radio\" className=\"zid-radio__input\" name=\"helper-demo\" defaultChecked />\n <span className=\"zid-radio__circle\"></span>\n <span className=\"zid-radio__label\">Standard Shipping</span>\n </label>\n <div className=\"zid-input-helper\" style={{ marginLeft: '28px' }}>Free delivery in 5-7 business days</div>\n </div>\n <div>\n <label className=\"zid-radio\">\n <input type=\"radio\" className=\"zid-radio__input\" name=\"helper-demo\" />\n <span className=\"zid-radio__circle\"></span>\n <span className=\"zid-radio__label\">Express Shipping</span>\n </label>\n <div className=\"zid-input-helper\" style={{ marginLeft: '28px' }}>$9.99 - Delivery in 2-3 business days</div>\n </div>\n <div>\n <label className=\"zid-radio\">\n <input type=\"radio\" className=\"zid-radio__input\" name=\"helper-demo\" />\n <span className=\"zid-radio__circle\"></span>\n <span className=\"zid-radio__label\">Priority Shipping</span>\n </label>\n <div className=\"zid-input-helper\" style={{ marginLeft: '28px' }}>$19.99 - Next day delivery</div>\n </div>\n </div>\n </div>\n ),\n};\n"],"names":[],"mappings":"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"}
@@ -1,187 +0,0 @@
1
- import { jsxs, jsx } from "react/jsx-runtime";
2
- /* empty css */
3
- const meta = {
4
- title: "CSS Styles/Components/Select",
5
- parameters: {
6
- layout: "centered"
7
- },
8
- tags: ["autodocs"]
9
- };
10
- const Sizes = {
11
- render: () => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "24px", width: "300px" }, children: [
12
- /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Select Sizes" }),
13
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
14
- /* @__PURE__ */ jsxs("div", { children: [
15
- /* @__PURE__ */ jsx("label", { className: "zid-input-label", children: "Small" }),
16
- /* @__PURE__ */ jsxs("div", { className: "zid-select zid-select--sm", children: [
17
- /* @__PURE__ */ jsxs("select", { className: "zid-select__native", defaultValue: "", children: [
18
- /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Small select" }),
19
- /* @__PURE__ */ jsx("option", { value: "1", children: "Option 1" }),
20
- /* @__PURE__ */ jsx("option", { value: "2", children: "Option 2" })
21
- ] }),
22
- /* @__PURE__ */ jsx("span", { className: "zid-select__icon", children: "▼" })
23
- ] })
24
- ] }),
25
- /* @__PURE__ */ jsxs("div", { children: [
26
- /* @__PURE__ */ jsx("label", { className: "zid-input-label", children: "Medium" }),
27
- /* @__PURE__ */ jsxs("div", { className: "zid-select zid-select--md", children: [
28
- /* @__PURE__ */ jsxs("select", { className: "zid-select__native", defaultValue: "", children: [
29
- /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Medium select" }),
30
- /* @__PURE__ */ jsx("option", { value: "1", children: "Option 1" }),
31
- /* @__PURE__ */ jsx("option", { value: "2", children: "Option 2" })
32
- ] }),
33
- /* @__PURE__ */ jsx("span", { className: "zid-select__icon", children: "▼" })
34
- ] })
35
- ] }),
36
- /* @__PURE__ */ jsxs("div", { children: [
37
- /* @__PURE__ */ jsx("label", { className: "zid-input-label", children: "Large" }),
38
- /* @__PURE__ */ jsxs("div", { className: "zid-select zid-select--lg", children: [
39
- /* @__PURE__ */ jsxs("select", { className: "zid-select__native", defaultValue: "", children: [
40
- /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Large select" }),
41
- /* @__PURE__ */ jsx("option", { value: "1", children: "Option 1" }),
42
- /* @__PURE__ */ jsx("option", { value: "2", children: "Option 2" })
43
- ] }),
44
- /* @__PURE__ */ jsx("span", { className: "zid-select__icon", children: "▼" })
45
- ] })
46
- ] })
47
- ] })
48
- ] })
49
- };
50
- const States = {
51
- render: () => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "24px", width: "300px" }, children: [
52
- /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Select States" }),
53
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
54
- /* @__PURE__ */ jsxs("div", { children: [
55
- /* @__PURE__ */ jsx("label", { className: "zid-input-label", children: "Default" }),
56
- /* @__PURE__ */ jsxs("div", { className: "zid-select zid-select--md", children: [
57
- /* @__PURE__ */ jsxs("select", { className: "zid-select__native", defaultValue: "", children: [
58
- /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Select an option" }),
59
- /* @__PURE__ */ jsx("option", { value: "1", children: "Option 1" }),
60
- /* @__PURE__ */ jsx("option", { value: "2", children: "Option 2" })
61
- ] }),
62
- /* @__PURE__ */ jsx("span", { className: "zid-select__icon", children: "▼" })
63
- ] }),
64
- /* @__PURE__ */ jsx("div", { className: "zid-input-helper", children: "Choose from the list" })
65
- ] }),
66
- /* @__PURE__ */ jsxs("div", { children: [
67
- /* @__PURE__ */ jsx("label", { className: "zid-input-label", children: "With Selection" }),
68
- /* @__PURE__ */ jsxs("div", { className: "zid-select zid-select--md", children: [
69
- /* @__PURE__ */ jsxs("select", { className: "zid-select__native", defaultValue: "1", children: [
70
- /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Select an option" }),
71
- /* @__PURE__ */ jsx("option", { value: "1", children: "Option 1" }),
72
- /* @__PURE__ */ jsx("option", { value: "2", children: "Option 2" })
73
- ] }),
74
- /* @__PURE__ */ jsx("span", { className: "zid-select__icon", children: "▼" })
75
- ] })
76
- ] }),
77
- /* @__PURE__ */ jsxs("div", { children: [
78
- /* @__PURE__ */ jsx("label", { className: "zid-input-label zid-input-label--required", children: "Error" }),
79
- /* @__PURE__ */ jsxs("div", { className: "zid-select zid-select--md zid-select--error", children: [
80
- /* @__PURE__ */ jsxs("select", { className: "zid-select__native", defaultValue: "", children: [
81
- /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Select an option" }),
82
- /* @__PURE__ */ jsx("option", { value: "1", children: "Option 1" }),
83
- /* @__PURE__ */ jsx("option", { value: "2", children: "Option 2" })
84
- ] }),
85
- /* @__PURE__ */ jsx("span", { className: "zid-select__icon", children: "▼" })
86
- ] }),
87
- /* @__PURE__ */ jsx("div", { className: "zid-input-helper zid-input-helper--error", children: "Please select an option" })
88
- ] }),
89
- /* @__PURE__ */ jsxs("div", { children: [
90
- /* @__PURE__ */ jsx("label", { className: "zid-input-label", children: "Disabled" }),
91
- /* @__PURE__ */ jsxs("div", { className: "zid-select zid-select--md zid-select--disabled", children: [
92
- /* @__PURE__ */ jsxs("select", { className: "zid-select__native", disabled: true, defaultValue: "", children: [
93
- /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Disabled" }),
94
- /* @__PURE__ */ jsx("option", { value: "1", children: "Option 1" })
95
- ] }),
96
- /* @__PURE__ */ jsx("span", { className: "zid-select__icon", children: "▼" })
97
- ] }),
98
- /* @__PURE__ */ jsx("div", { className: "zid-input-helper", children: "This select is disabled" })
99
- ] })
100
- ] })
101
- ] })
102
- };
103
- const WithLabelAndHelper = {
104
- render: () => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "24px", width: "300px" }, children: [
105
- /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "With Label & Helper" }),
106
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "20px" }, children: [
107
- /* @__PURE__ */ jsxs("div", { children: [
108
- /* @__PURE__ */ jsx("label", { className: "zid-input-label", children: "Country" }),
109
- /* @__PURE__ */ jsxs("div", { className: "zid-select zid-select--md", children: [
110
- /* @__PURE__ */ jsxs("select", { className: "zid-select__native", defaultValue: "", children: [
111
- /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Select country" }),
112
- /* @__PURE__ */ jsx("option", { value: "us", children: "United States" }),
113
- /* @__PURE__ */ jsx("option", { value: "uk", children: "United Kingdom" }),
114
- /* @__PURE__ */ jsx("option", { value: "ca", children: "Canada" }),
115
- /* @__PURE__ */ jsx("option", { value: "au", children: "Australia" })
116
- ] }),
117
- /* @__PURE__ */ jsx("span", { className: "zid-select__icon", children: "▼" })
118
- ] }),
119
- /* @__PURE__ */ jsx("div", { className: "zid-input-helper", children: "Select your country of residence" })
120
- ] }),
121
- /* @__PURE__ */ jsxs("div", { children: [
122
- /* @__PURE__ */ jsx("label", { className: "zid-input-label zid-input-label--required", children: "Category" }),
123
- /* @__PURE__ */ jsxs("div", { className: "zid-select zid-select--md", children: [
124
- /* @__PURE__ */ jsxs("select", { className: "zid-select__native", defaultValue: "", children: [
125
- /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Select category" }),
126
- /* @__PURE__ */ jsx("option", { value: "electronics", children: "Electronics" }),
127
- /* @__PURE__ */ jsx("option", { value: "clothing", children: "Clothing" }),
128
- /* @__PURE__ */ jsx("option", { value: "food", children: "Food & Beverages" }),
129
- /* @__PURE__ */ jsx("option", { value: "home", children: "Home & Garden" })
130
- ] }),
131
- /* @__PURE__ */ jsx("span", { className: "zid-select__icon", children: "▼" })
132
- ] }),
133
- /* @__PURE__ */ jsx("div", { className: "zid-input-helper", children: "Required for product listing" })
134
- ] }),
135
- /* @__PURE__ */ jsxs("div", { children: [
136
- /* @__PURE__ */ jsx("label", { className: "zid-input-label zid-input-label--required", children: "Priority" }),
137
- /* @__PURE__ */ jsxs("div", { className: "zid-select zid-select--md zid-select--error", children: [
138
- /* @__PURE__ */ jsxs("select", { className: "zid-select__native", defaultValue: "", children: [
139
- /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Select priority" }),
140
- /* @__PURE__ */ jsx("option", { value: "low", children: "Low" }),
141
- /* @__PURE__ */ jsx("option", { value: "medium", children: "Medium" }),
142
- /* @__PURE__ */ jsx("option", { value: "high", children: "High" })
143
- ] }),
144
- /* @__PURE__ */ jsx("span", { className: "zid-select__icon", children: "▼" })
145
- ] }),
146
- /* @__PURE__ */ jsx("div", { className: "zid-input-helper zid-input-helper--error", children: "Priority is required" })
147
- ] })
148
- ] })
149
- ] })
150
- };
151
- const WithOptgroups = {
152
- render: () => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px", width: "300px" }, children: [
153
- /* @__PURE__ */ jsx("h3", { style: { marginBottom: "8px", fontFamily: "var(--zid-font-family)" }, children: "With Option Groups" }),
154
- /* @__PURE__ */ jsxs("div", { children: [
155
- /* @__PURE__ */ jsx("label", { className: "zid-input-label", children: "Product Category" }),
156
- /* @__PURE__ */ jsxs("div", { className: "zid-select zid-select--md", children: [
157
- /* @__PURE__ */ jsxs("select", { className: "zid-select__native", defaultValue: "", children: [
158
- /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Select category" }),
159
- /* @__PURE__ */ jsxs("optgroup", { label: "Electronics", children: [
160
- /* @__PURE__ */ jsx("option", { value: "phones", children: "Phones" }),
161
- /* @__PURE__ */ jsx("option", { value: "laptops", children: "Laptops" }),
162
- /* @__PURE__ */ jsx("option", { value: "tablets", children: "Tablets" })
163
- ] }),
164
- /* @__PURE__ */ jsxs("optgroup", { label: "Clothing", children: [
165
- /* @__PURE__ */ jsx("option", { value: "shirts", children: "Shirts" }),
166
- /* @__PURE__ */ jsx("option", { value: "pants", children: "Pants" }),
167
- /* @__PURE__ */ jsx("option", { value: "shoes", children: "Shoes" })
168
- ] }),
169
- /* @__PURE__ */ jsxs("optgroup", { label: "Home", children: [
170
- /* @__PURE__ */ jsx("option", { value: "furniture", children: "Furniture" }),
171
- /* @__PURE__ */ jsx("option", { value: "decor", children: "Decor" }),
172
- /* @__PURE__ */ jsx("option", { value: "kitchen", children: "Kitchen" })
173
- ] })
174
- ] }),
175
- /* @__PURE__ */ jsx("span", { className: "zid-select__icon", children: "▼" })
176
- ] })
177
- ] })
178
- ] })
179
- };
180
- export {
181
- Sizes,
182
- States,
183
- WithLabelAndHelper,
184
- WithOptgroups,
185
- meta as default
186
- };
187
- //# sourceMappingURL=Select.stories.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Select.stories.js","sources":["../../../../../src/stories/css/Select.stories.tsx"],"sourcesContent":["import type { StoryObj } from '@storybook/react-vite';\nimport '../../css/index.css';\n\nconst meta = {\n title: 'CSS Styles/Components/Select',\n parameters: {\n layout: 'centered',\n },\n tags: ['autodocs'],\n};\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Sizes: Story = {\n render: () => (\n <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', width: '300px' }}>\n <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Select Sizes</h3>\n <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n <div>\n <label className=\"zid-input-label\">Small</label>\n <div className=\"zid-select zid-select--sm\">\n <select className=\"zid-select__native\" defaultValue=\"\">\n <option value=\"\" disabled>Small select</option>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n </select>\n <span className=\"zid-select__icon\">▼</span>\n </div>\n </div>\n <div>\n <label className=\"zid-input-label\">Medium</label>\n <div className=\"zid-select zid-select--md\">\n <select className=\"zid-select__native\" defaultValue=\"\">\n <option value=\"\" disabled>Medium select</option>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n </select>\n <span className=\"zid-select__icon\">▼</span>\n </div>\n </div>\n <div>\n <label className=\"zid-input-label\">Large</label>\n <div className=\"zid-select zid-select--lg\">\n <select className=\"zid-select__native\" defaultValue=\"\">\n <option value=\"\" disabled>Large select</option>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n </select>\n <span className=\"zid-select__icon\">▼</span>\n </div>\n </div>\n </div>\n </div>\n ),\n};\n\nexport const States: Story = {\n render: () => (\n <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', width: '300px' }}>\n <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Select States</h3>\n <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n <div>\n <label className=\"zid-input-label\">Default</label>\n <div className=\"zid-select zid-select--md\">\n <select className=\"zid-select__native\" defaultValue=\"\">\n <option value=\"\" disabled>Select an option</option>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n </select>\n <span className=\"zid-select__icon\">▼</span>\n </div>\n <div className=\"zid-input-helper\">Choose from the list</div>\n </div>\n <div>\n <label className=\"zid-input-label\">With Selection</label>\n <div className=\"zid-select zid-select--md\">\n <select className=\"zid-select__native\" defaultValue=\"1\">\n <option value=\"\" disabled>Select an option</option>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n </select>\n <span className=\"zid-select__icon\">▼</span>\n </div>\n </div>\n <div>\n <label className=\"zid-input-label zid-input-label--required\">Error</label>\n <div className=\"zid-select zid-select--md zid-select--error\">\n <select className=\"zid-select__native\" defaultValue=\"\">\n <option value=\"\" disabled>Select an option</option>\n <option value=\"1\">Option 1</option>\n <option value=\"2\">Option 2</option>\n </select>\n <span className=\"zid-select__icon\">▼</span>\n </div>\n <div className=\"zid-input-helper zid-input-helper--error\">Please select an option</div>\n </div>\n <div>\n <label className=\"zid-input-label\">Disabled</label>\n <div className=\"zid-select zid-select--md zid-select--disabled\">\n <select className=\"zid-select__native\" disabled defaultValue=\"\">\n <option value=\"\" disabled>Disabled</option>\n <option value=\"1\">Option 1</option>\n </select>\n <span className=\"zid-select__icon\">▼</span>\n </div>\n <div className=\"zid-input-helper\">This select is disabled</div>\n </div>\n </div>\n </div>\n ),\n};\n\n\nexport const WithLabelAndHelper: Story = {\n render: () => (\n <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', width: '300px' }}>\n <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>With Label & Helper</h3>\n <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>\n <div>\n <label className=\"zid-input-label\">Country</label>\n <div className=\"zid-select zid-select--md\">\n <select className=\"zid-select__native\" defaultValue=\"\">\n <option value=\"\" disabled>Select country</option>\n <option value=\"us\">United States</option>\n <option value=\"uk\">United Kingdom</option>\n <option value=\"ca\">Canada</option>\n <option value=\"au\">Australia</option>\n </select>\n <span className=\"zid-select__icon\">▼</span>\n </div>\n <div className=\"zid-input-helper\">Select your country of residence</div>\n </div>\n <div>\n <label className=\"zid-input-label zid-input-label--required\">Category</label>\n <div className=\"zid-select zid-select--md\">\n <select className=\"zid-select__native\" defaultValue=\"\">\n <option value=\"\" disabled>Select category</option>\n <option value=\"electronics\">Electronics</option>\n <option value=\"clothing\">Clothing</option>\n <option value=\"food\">Food & Beverages</option>\n <option value=\"home\">Home & Garden</option>\n </select>\n <span className=\"zid-select__icon\">▼</span>\n </div>\n <div className=\"zid-input-helper\">Required for product listing</div>\n </div>\n <div>\n <label className=\"zid-input-label zid-input-label--required\">Priority</label>\n <div className=\"zid-select zid-select--md zid-select--error\">\n <select className=\"zid-select__native\" defaultValue=\"\">\n <option value=\"\" disabled>Select priority</option>\n <option value=\"low\">Low</option>\n <option value=\"medium\">Medium</option>\n <option value=\"high\">High</option>\n </select>\n <span className=\"zid-select__icon\">▼</span>\n </div>\n <div className=\"zid-input-helper zid-input-helper--error\">Priority is required</div>\n </div>\n </div>\n </div>\n ),\n};\n\nexport const WithOptgroups: Story = {\n render: () => (\n <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', width: '300px' }}>\n <h3 style={{ marginBottom: '8px', fontFamily: 'var(--zid-font-family)' }}>With Option Groups</h3>\n <div>\n <label className=\"zid-input-label\">Product Category</label>\n <div className=\"zid-select zid-select--md\">\n <select className=\"zid-select__native\" defaultValue=\"\">\n <option value=\"\" disabled>Select category</option>\n <optgroup label=\"Electronics\">\n <option value=\"phones\">Phones</option>\n <option value=\"laptops\">Laptops</option>\n <option value=\"tablets\">Tablets</option>\n </optgroup>\n <optgroup label=\"Clothing\">\n <option value=\"shirts\">Shirts</option>\n <option value=\"pants\">Pants</option>\n <option value=\"shoes\">Shoes</option>\n </optgroup>\n <optgroup label=\"Home\">\n <option value=\"furniture\">Furniture</option>\n <option value=\"decor\">Decor</option>\n <option value=\"kitchen\">Kitchen</option>\n </optgroup>\n </select>\n <span className=\"zid-select__icon\">▼</span>\n </div>\n </div>\n </div>\n ),\n};\n"],"names":[],"mappings":"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"}
@@ -1,59 +0,0 @@
1
- import { jsxs, jsx } from "react/jsx-runtime";
2
- /* empty css */
3
- const meta = {
4
- title: "CSS Styles/Components/Status",
5
- parameters: {
6
- layout: "centered"
7
- },
8
- tags: ["autodocs"]
9
- };
10
- const Variants = {
11
- render: () => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px" }, children: [
12
- /* @__PURE__ */ jsxs("div", { children: [
13
- /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Color Variants" }),
14
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "12px", flexWrap: "wrap" }, children: [
15
- /* @__PURE__ */ jsx("span", { className: "zid-status zid-status--success zid-status--md", children: "Success" }),
16
- /* @__PURE__ */ jsx("span", { className: "zid-status zid-status--error zid-status--md", children: "Error" }),
17
- /* @__PURE__ */ jsx("span", { className: "zid-status zid-status--warning zid-status--md", children: "Warning" }),
18
- /* @__PURE__ */ jsx("span", { className: "zid-status zid-status--info zid-status--md", children: "Info" }),
19
- /* @__PURE__ */ jsx("span", { className: "zid-status zid-status--neutral zid-status--md", children: "Neutral" }),
20
- /* @__PURE__ */ jsx("span", { className: "zid-status zid-status--disabled zid-status--md", children: "Disabled" }),
21
- /* @__PURE__ */ jsx("span", { className: "zid-status zid-status--orange zid-status--md", children: "Orange" }),
22
- /* @__PURE__ */ jsx("span", { className: "zid-status zid-status--blue zid-status--md", children: "Blue" })
23
- ] })
24
- ] }),
25
- /* @__PURE__ */ jsxs("div", { children: [
26
- /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Sizes" }),
27
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "12px", alignItems: "center" }, children: [
28
- /* @__PURE__ */ jsx("span", { className: "zid-status zid-status--success zid-status--sm", children: "Small" }),
29
- /* @__PURE__ */ jsx("span", { className: "zid-status zid-status--success zid-status--md", children: "Medium" })
30
- ] })
31
- ] }),
32
- /* @__PURE__ */ jsxs("div", { children: [
33
- /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "With Dot" }),
34
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "12px", flexWrap: "wrap" }, children: [
35
- /* @__PURE__ */ jsxs("span", { className: "zid-status zid-status--success zid-status--md", children: [
36
- /* @__PURE__ */ jsx("span", { className: "zid-status__dot" }),
37
- "Active"
38
- ] }),
39
- /* @__PURE__ */ jsxs("span", { className: "zid-status zid-status--error zid-status--md", children: [
40
- /* @__PURE__ */ jsx("span", { className: "zid-status__dot" }),
41
- "Inactive"
42
- ] }),
43
- /* @__PURE__ */ jsxs("span", { className: "zid-status zid-status--warning zid-status--md", children: [
44
- /* @__PURE__ */ jsx("span", { className: "zid-status__dot" }),
45
- "Pending"
46
- ] }),
47
- /* @__PURE__ */ jsxs("span", { className: "zid-status zid-status--neutral zid-status--md", children: [
48
- /* @__PURE__ */ jsx("span", { className: "zid-status__dot" }),
49
- "Draft"
50
- ] })
51
- ] })
52
- ] })
53
- ] })
54
- };
55
- export {
56
- Variants,
57
- meta as default
58
- };
59
- //# sourceMappingURL=Status.stories.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Status.stories.js","sources":["../../../../../src/stories/css/Status.stories.tsx"],"sourcesContent":["import type { StoryObj } from '@storybook/react-vite';\nimport '../../css/index.css';\n\nconst meta = {\n title: 'CSS Styles/Components/Status',\n parameters: {\n layout: 'centered',\n },\n tags: ['autodocs'],\n};\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Variants: Story = {\n render: () => (\n <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>\n <div>\n <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Color Variants</h3>\n <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>\n <span className=\"zid-status zid-status--success zid-status--md\">Success</span>\n <span className=\"zid-status zid-status--error zid-status--md\">Error</span>\n <span className=\"zid-status zid-status--warning zid-status--md\">Warning</span>\n <span className=\"zid-status zid-status--info zid-status--md\">Info</span>\n <span className=\"zid-status zid-status--neutral zid-status--md\">Neutral</span>\n <span className=\"zid-status zid-status--disabled zid-status--md\">Disabled</span>\n <span className=\"zid-status zid-status--orange zid-status--md\">Orange</span>\n <span className=\"zid-status zid-status--blue zid-status--md\">Blue</span>\n </div>\n </div>\n\n <div>\n <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Sizes</h3>\n <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>\n <span className=\"zid-status zid-status--success zid-status--sm\">Small</span>\n <span className=\"zid-status zid-status--success zid-status--md\">Medium</span>\n </div>\n </div>\n\n <div>\n <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>With Dot</h3>\n <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>\n <span className=\"zid-status zid-status--success zid-status--md\">\n <span className=\"zid-status__dot\"></span>Active\n </span>\n <span className=\"zid-status zid-status--error zid-status--md\">\n <span className=\"zid-status__dot\"></span>Inactive\n </span>\n <span className=\"zid-status zid-status--warning zid-status--md\">\n <span className=\"zid-status__dot\"></span>Pending\n </span>\n <span className=\"zid-status zid-status--neutral zid-status--md\">\n <span className=\"zid-status__dot\"></span>Draft\n </span>\n </div>\n </div>\n </div>\n ),\n};\n"],"names":[],"mappings":";;AAGA,MAAM,OAAO;AAAA,EACX,OAAO;AAAA,EACP,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM,CAAC,UAAU;AACnB;AAKO,MAAM,WAAkB;AAAA,EAC7B,QAAQ,MACN,qBAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,OAAA,GAC3D,UAAA;AAAA,IAAA,qBAAC,OAAA,EACC,UAAA;AAAA,MAAA,oBAAC,MAAA,EAAG,OAAO,EAAE,cAAc,QAAQ,YAAY,yBAAA,GAA4B,UAAA,iBAAA,CAAc;AAAA,MACzF,qBAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,KAAK,QAAQ,UAAU,OAAA,GACpD,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,iDAAgD,UAAA,WAAO;AAAA,QACvE,oBAAC,QAAA,EAAK,WAAU,+CAA8C,UAAA,SAAK;AAAA,QACnE,oBAAC,QAAA,EAAK,WAAU,iDAAgD,UAAA,WAAO;AAAA,QACvE,oBAAC,QAAA,EAAK,WAAU,8CAA6C,UAAA,QAAI;AAAA,QACjE,oBAAC,QAAA,EAAK,WAAU,iDAAgD,UAAA,WAAO;AAAA,QACvE,oBAAC,QAAA,EAAK,WAAU,kDAAiD,UAAA,YAAQ;AAAA,QACzE,oBAAC,QAAA,EAAK,WAAU,gDAA+C,UAAA,UAAM;AAAA,QACrE,oBAAC,QAAA,EAAK,WAAU,8CAA6C,UAAA,OAAA,CAAI;AAAA,MAAA,EAAA,CACnE;AAAA,IAAA,GACF;AAAA,yBAEC,OAAA,EACC,UAAA;AAAA,MAAA,oBAAC,MAAA,EAAG,OAAO,EAAE,cAAc,QAAQ,YAAY,yBAAA,GAA4B,UAAA,QAAA,CAAK;AAAA,MAChF,qBAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,KAAK,QAAQ,YAAY,SAAA,GACtD,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,iDAAgD,UAAA,SAAK;AAAA,QACrE,oBAAC,QAAA,EAAK,WAAU,iDAAgD,UAAA,SAAA,CAAM;AAAA,MAAA,EAAA,CACxE;AAAA,IAAA,GACF;AAAA,yBAEC,OAAA,EACC,UAAA;AAAA,MAAA,oBAAC,MAAA,EAAG,OAAO,EAAE,cAAc,QAAQ,YAAY,yBAAA,GAA4B,UAAA,WAAA,CAAQ;AAAA,MACnF,qBAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,KAAK,QAAQ,UAAU,OAAA,GACpD,UAAA;AAAA,QAAA,qBAAC,QAAA,EAAK,WAAU,iDACd,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAK,WAAU,kBAAA,CAAkB;AAAA,UAAO;AAAA,QAAA,GAC3C;AAAA,QACA,qBAAC,QAAA,EAAK,WAAU,+CACd,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAK,WAAU,kBAAA,CAAkB;AAAA,UAAO;AAAA,QAAA,GAC3C;AAAA,QACA,qBAAC,QAAA,EAAK,WAAU,iDACd,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAK,WAAU,kBAAA,CAAkB;AAAA,UAAO;AAAA,QAAA,GAC3C;AAAA,QACA,qBAAC,QAAA,EAAK,WAAU,iDACd,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAK,WAAU,kBAAA,CAAkB;AAAA,UAAO;AAAA,QAAA,EAAA,CAC3C;AAAA,MAAA,EAAA,CACF;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF;AAEJ;"}
@@ -1,136 +0,0 @@
1
- import { jsxs, jsx } from "react/jsx-runtime";
2
- /* empty css */
3
- const meta = {
4
- title: "CSS Styles/Components/Switch",
5
- parameters: {
6
- layout: "centered"
7
- },
8
- tags: ["autodocs"]
9
- };
10
- const Colors = {
11
- render: () => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px" }, children: [
12
- /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Color Variants (Checked)" }),
13
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "24px", flexWrap: "wrap", alignItems: "center" }, children: [
14
- /* @__PURE__ */ jsxs("label", { className: "zid-switch zid-switch--primary", children: [
15
- /* @__PURE__ */ jsx("input", { type: "checkbox", className: "zid-switch__input", defaultChecked: true }),
16
- /* @__PURE__ */ jsx("span", { className: "zid-switch__track", children: /* @__PURE__ */ jsx("span", { className: "zid-switch__thumb" }) }),
17
- /* @__PURE__ */ jsx("span", { className: "zid-switch__label", children: "Primary (Success)" })
18
- ] }),
19
- /* @__PURE__ */ jsxs("label", { className: "zid-switch zid-switch--secondary", children: [
20
- /* @__PURE__ */ jsx("input", { type: "checkbox", className: "zid-switch__input", defaultChecked: true }),
21
- /* @__PURE__ */ jsx("span", { className: "zid-switch__track", children: /* @__PURE__ */ jsx("span", { className: "zid-switch__thumb" }) }),
22
- /* @__PURE__ */ jsx("span", { className: "zid-switch__label", children: "Secondary (Purple)" })
23
- ] }),
24
- /* @__PURE__ */ jsxs("label", { className: "zid-switch zid-switch--error", children: [
25
- /* @__PURE__ */ jsx("input", { type: "checkbox", className: "zid-switch__input", defaultChecked: true }),
26
- /* @__PURE__ */ jsx("span", { className: "zid-switch__track", children: /* @__PURE__ */ jsx("span", { className: "zid-switch__thumb" }) }),
27
- /* @__PURE__ */ jsx("span", { className: "zid-switch__label", children: "Error" })
28
- ] })
29
- ] })
30
- ] })
31
- };
32
- const States = {
33
- render: () => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px" }, children: [
34
- /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Switch States" }),
35
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "24px", flexWrap: "wrap", alignItems: "center" }, children: [
36
- /* @__PURE__ */ jsxs("label", { className: "zid-switch zid-switch--primary", children: [
37
- /* @__PURE__ */ jsx("input", { type: "checkbox", className: "zid-switch__input" }),
38
- /* @__PURE__ */ jsx("span", { className: "zid-switch__track", children: /* @__PURE__ */ jsx("span", { className: "zid-switch__thumb" }) }),
39
- /* @__PURE__ */ jsx("span", { className: "zid-switch__label", children: "Off" })
40
- ] }),
41
- /* @__PURE__ */ jsxs("label", { className: "zid-switch zid-switch--primary", children: [
42
- /* @__PURE__ */ jsx("input", { type: "checkbox", className: "zid-switch__input", defaultChecked: true }),
43
- /* @__PURE__ */ jsx("span", { className: "zid-switch__track", children: /* @__PURE__ */ jsx("span", { className: "zid-switch__thumb" }) }),
44
- /* @__PURE__ */ jsx("span", { className: "zid-switch__label", children: "On" })
45
- ] }),
46
- /* @__PURE__ */ jsxs("label", { className: "zid-switch zid-switch--primary zid-switch--disabled", children: [
47
- /* @__PURE__ */ jsx("input", { type: "checkbox", className: "zid-switch__input", disabled: true }),
48
- /* @__PURE__ */ jsx("span", { className: "zid-switch__track", children: /* @__PURE__ */ jsx("span", { className: "zid-switch__thumb" }) }),
49
- /* @__PURE__ */ jsx("span", { className: "zid-switch__label", children: "Disabled Off" })
50
- ] }),
51
- /* @__PURE__ */ jsxs("label", { className: "zid-switch zid-switch--primary zid-switch--disabled", children: [
52
- /* @__PURE__ */ jsx("input", { type: "checkbox", className: "zid-switch__input", defaultChecked: true, disabled: true }),
53
- /* @__PURE__ */ jsx("span", { className: "zid-switch__track", children: /* @__PURE__ */ jsx("span", { className: "zid-switch__thumb" }) }),
54
- /* @__PURE__ */ jsx("span", { className: "zid-switch__label", children: "Disabled On" })
55
- ] })
56
- ] })
57
- ] })
58
- };
59
- const WithoutLabel = {
60
- render: () => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
61
- /* @__PURE__ */ jsx("h3", { style: { marginBottom: "8px", fontFamily: "var(--zid-font-family)" }, children: "Without Label" }),
62
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "24px", alignItems: "center" }, children: [
63
- /* @__PURE__ */ jsxs("label", { className: "zid-switch zid-switch--primary", children: [
64
- /* @__PURE__ */ jsx("input", { type: "checkbox", className: "zid-switch__input" }),
65
- /* @__PURE__ */ jsx("span", { className: "zid-switch__track", children: /* @__PURE__ */ jsx("span", { className: "zid-switch__thumb" }) })
66
- ] }),
67
- /* @__PURE__ */ jsxs("label", { className: "zid-switch zid-switch--primary", children: [
68
- /* @__PURE__ */ jsx("input", { type: "checkbox", className: "zid-switch__input", defaultChecked: true }),
69
- /* @__PURE__ */ jsx("span", { className: "zid-switch__track", children: /* @__PURE__ */ jsx("span", { className: "zid-switch__thumb" }) })
70
- ] }),
71
- /* @__PURE__ */ jsxs("label", { className: "zid-switch zid-switch--secondary", children: [
72
- /* @__PURE__ */ jsx("input", { type: "checkbox", className: "zid-switch__input", defaultChecked: true }),
73
- /* @__PURE__ */ jsx("span", { className: "zid-switch__track", children: /* @__PURE__ */ jsx("span", { className: "zid-switch__thumb" }) })
74
- ] }),
75
- /* @__PURE__ */ jsxs("label", { className: "zid-switch zid-switch--error", children: [
76
- /* @__PURE__ */ jsx("input", { type: "checkbox", className: "zid-switch__input", defaultChecked: true }),
77
- /* @__PURE__ */ jsx("span", { className: "zid-switch__track", children: /* @__PURE__ */ jsx("span", { className: "zid-switch__thumb" }) })
78
- ] })
79
- ] })
80
- ] })
81
- };
82
- const SettingsExample = {
83
- render: () => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "24px", width: "400px" }, children: [
84
- /* @__PURE__ */ jsx("h3", { style: { marginBottom: "8px", fontFamily: "var(--zid-font-family)" }, children: "Settings Example" }),
85
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
86
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", padding: "12px 0", borderBottom: "1px solid var(--zid-divider)" }, children: [
87
- /* @__PURE__ */ jsxs("div", { children: [
88
- /* @__PURE__ */ jsx("div", { style: { fontFamily: "var(--zid-font-family)", fontWeight: 500 }, children: "Email Notifications" }),
89
- /* @__PURE__ */ jsx("div", { style: { fontFamily: "var(--zid-font-family)", fontSize: "14px", color: "var(--zid-text-secondary)" }, children: "Receive email updates about your account" })
90
- ] }),
91
- /* @__PURE__ */ jsxs("label", { className: "zid-switch zid-switch--primary", children: [
92
- /* @__PURE__ */ jsx("input", { type: "checkbox", className: "zid-switch__input", defaultChecked: true }),
93
- /* @__PURE__ */ jsx("span", { className: "zid-switch__track", children: /* @__PURE__ */ jsx("span", { className: "zid-switch__thumb" }) })
94
- ] })
95
- ] }),
96
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", padding: "12px 0", borderBottom: "1px solid var(--zid-divider)" }, children: [
97
- /* @__PURE__ */ jsxs("div", { children: [
98
- /* @__PURE__ */ jsx("div", { style: { fontFamily: "var(--zid-font-family)", fontWeight: 500 }, children: "Push Notifications" }),
99
- /* @__PURE__ */ jsx("div", { style: { fontFamily: "var(--zid-font-family)", fontSize: "14px", color: "var(--zid-text-secondary)" }, children: "Receive push notifications on your device" })
100
- ] }),
101
- /* @__PURE__ */ jsxs("label", { className: "zid-switch zid-switch--primary", children: [
102
- /* @__PURE__ */ jsx("input", { type: "checkbox", className: "zid-switch__input" }),
103
- /* @__PURE__ */ jsx("span", { className: "zid-switch__track", children: /* @__PURE__ */ jsx("span", { className: "zid-switch__thumb" }) })
104
- ] })
105
- ] }),
106
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", padding: "12px 0", borderBottom: "1px solid var(--zid-divider)" }, children: [
107
- /* @__PURE__ */ jsxs("div", { children: [
108
- /* @__PURE__ */ jsx("div", { style: { fontFamily: "var(--zid-font-family)", fontWeight: 500 }, children: "Dark Mode" }),
109
- /* @__PURE__ */ jsx("div", { style: { fontFamily: "var(--zid-font-family)", fontSize: "14px", color: "var(--zid-text-secondary)" }, children: "Use dark theme for the interface" })
110
- ] }),
111
- /* @__PURE__ */ jsxs("label", { className: "zid-switch zid-switch--secondary", children: [
112
- /* @__PURE__ */ jsx("input", { type: "checkbox", className: "zid-switch__input", defaultChecked: true }),
113
- /* @__PURE__ */ jsx("span", { className: "zid-switch__track", children: /* @__PURE__ */ jsx("span", { className: "zid-switch__thumb" }) })
114
- ] })
115
- ] }),
116
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", padding: "12px 0", borderBottom: "1px solid var(--zid-divider)" }, children: [
117
- /* @__PURE__ */ jsxs("div", { children: [
118
- /* @__PURE__ */ jsx("div", { style: { fontFamily: "var(--zid-font-family)", fontWeight: 500, color: "var(--zid-text-disabled)" }, children: "Beta Features" }),
119
- /* @__PURE__ */ jsx("div", { style: { fontFamily: "var(--zid-font-family)", fontSize: "14px", color: "var(--zid-text-disabled)" }, children: "Not available for your account" })
120
- ] }),
121
- /* @__PURE__ */ jsxs("label", { className: "zid-switch zid-switch--primary zid-switch--disabled", children: [
122
- /* @__PURE__ */ jsx("input", { type: "checkbox", className: "zid-switch__input", disabled: true }),
123
- /* @__PURE__ */ jsx("span", { className: "zid-switch__track", children: /* @__PURE__ */ jsx("span", { className: "zid-switch__thumb" }) })
124
- ] })
125
- ] })
126
- ] })
127
- ] })
128
- };
129
- export {
130
- Colors,
131
- SettingsExample,
132
- States,
133
- WithoutLabel,
134
- meta as default
135
- };
136
- //# sourceMappingURL=Switch.stories.js.map