@svelte-atoms/core 1.0.0-alpha.41 → 1.0.0-alpha.44

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 (628) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +67 -197
  3. package/dist/attachments/clickout.svelte.d.ts +4 -1
  4. package/dist/attachments/clickout.svelte.js +2 -1
  5. package/dist/components/accordion/accordion-root.svelte +61 -66
  6. package/dist/components/accordion/accordion-root.svelte.d.ts +2 -2
  7. package/dist/components/accordion/bond.svelte.d.ts +11 -10
  8. package/dist/components/accordion/bond.svelte.js +26 -16
  9. package/dist/components/accordion/item/accordion-item-body.svelte +3 -1
  10. package/dist/components/accordion/item/accordion-item-header.svelte +1 -1
  11. package/dist/components/accordion/item/accordion-item-indicator.svelte +1 -1
  12. package/dist/components/accordion/item/accordion-item-root.svelte +3 -2
  13. package/dist/components/accordion/item/bond.svelte.d.ts +32 -18
  14. package/dist/components/accordion/item/bond.svelte.js +88 -64
  15. package/dist/components/accordion/item/types.d.ts +4 -24
  16. package/dist/components/accordion/types.d.ts +5 -9
  17. package/dist/components/alert/alert-root.svelte +68 -68
  18. package/dist/components/alert/types.d.ts +12 -46
  19. package/dist/components/atom/html-atom.svelte +84 -95
  20. package/dist/components/atom/html-atom.svelte.d.ts +1 -2
  21. package/dist/components/atom/index.d.ts +1 -0
  22. package/dist/components/atom/index.js +1 -0
  23. package/dist/components/atom/types.d.ts +52 -10
  24. package/dist/components/atom/types.js +1 -1
  25. package/dist/components/atom/utils.d.ts +10 -3
  26. package/dist/components/atom/utils.js +112 -45
  27. package/dist/components/avatar/types.d.ts +1 -6
  28. package/dist/components/badge/index.d.ts +1 -0
  29. package/dist/components/badge/types.d.ts +4 -7
  30. package/dist/components/button/button.svelte +31 -31
  31. package/dist/components/button/types.d.ts +9 -6
  32. package/dist/components/calendar/calendar-body.svelte +0 -1
  33. package/dist/components/calendar/calendar-day.svelte +99 -99
  34. package/dist/components/calendar/calendar-header.svelte +1 -1
  35. package/dist/components/calendar/calendar-root.svelte +206 -206
  36. package/dist/components/calendar/calendar-root.svelte.d.ts +1 -1
  37. package/dist/components/calendar/calendar-week-day.svelte +33 -33
  38. package/dist/components/calendar/types.d.ts +7 -10
  39. package/dist/components/card/card-root.svelte +92 -92
  40. package/dist/components/card/types.d.ts +12 -51
  41. package/dist/components/checkbox/checkbox.svelte +65 -55
  42. package/dist/components/checkbox/checkbox.svelte.d.ts +1 -3
  43. package/dist/components/checkbox/index.d.ts +2 -0
  44. package/dist/components/checkbox/index.js +1 -0
  45. package/dist/components/checkbox/motion.d.ts +17 -0
  46. package/dist/components/checkbox/motion.js +34 -0
  47. package/dist/components/checkbox/types.d.ts +14 -7
  48. package/dist/components/chip/chip-close-button.svelte +33 -0
  49. package/dist/components/chip/chip-close-button.svelte.d.ts +4 -0
  50. package/dist/components/chip/chip.svelte +34 -41
  51. package/dist/components/chip/chip.svelte.d.ts +1 -3
  52. package/dist/components/chip/index.d.ts +2 -0
  53. package/dist/components/chip/index.js +2 -0
  54. package/dist/components/chip/types.d.ts +15 -8
  55. package/dist/components/collapsible/bond.svelte.d.ts +34 -24
  56. package/dist/components/collapsible/bond.svelte.js +73 -60
  57. package/dist/components/collapsible/collapsible-body.svelte +1 -1
  58. package/dist/components/collapsible/collapsible-header.svelte +1 -1
  59. package/dist/components/collapsible/collapsible-indicator.svelte +1 -1
  60. package/dist/components/collapsible/collapsible-root.svelte +67 -67
  61. package/dist/components/collapsible/types.d.ts +10 -22
  62. package/dist/components/combobox/bond.svelte.d.ts +13 -8
  63. package/dist/components/combobox/bond.svelte.js +30 -20
  64. package/dist/components/combobox/combobox-control.svelte +66 -66
  65. package/dist/components/combobox/combobox-item.svelte +62 -62
  66. package/dist/components/combobox/combobox-root.svelte +65 -65
  67. package/dist/components/combobox/combobox-root.svelte.d.ts +2 -2
  68. package/dist/components/combobox/combobox-selections.svelte +17 -17
  69. package/dist/components/combobox/combobox-trigger.svelte +34 -34
  70. package/dist/components/combobox/types.d.ts +6 -10
  71. package/dist/components/container/index.d.ts +1 -0
  72. package/dist/components/container/types.d.ts +6 -12
  73. package/dist/components/context-menu/atoms.d.ts +4 -0
  74. package/dist/components/context-menu/atoms.js +4 -0
  75. package/dist/components/context-menu/context-menu-content.svelte +52 -0
  76. package/dist/components/context-menu/context-menu-content.svelte.d.ts +27 -0
  77. package/dist/components/context-menu/context-menu-root.svelte +8 -0
  78. package/dist/components/context-menu/context-menu-root.svelte.d.ts +4 -0
  79. package/dist/components/context-menu/context-menu-trigger.svelte +59 -0
  80. package/dist/components/context-menu/context-menu-trigger.svelte.d.ts +27 -0
  81. package/dist/components/context-menu/index.d.ts +2 -0
  82. package/dist/components/context-menu/index.js +2 -0
  83. package/dist/components/{contextmenu → context-menu}/types.d.ts +1 -6
  84. package/dist/components/datagrid/atoms.d.ts +11 -5
  85. package/dist/components/datagrid/atoms.js +11 -5
  86. package/dist/components/datagrid/bond.svelte.d.ts +29 -14
  87. package/dist/components/datagrid/bond.svelte.js +45 -33
  88. package/dist/components/datagrid/cell/bond.svelte.d.ts +29 -0
  89. package/dist/components/datagrid/cell/bond.svelte.js +42 -0
  90. package/dist/components/datagrid/cell/datagrid-cell.svelte +49 -0
  91. package/dist/components/datagrid/cell/datagrid-cell.svelte.d.ts +26 -0
  92. package/dist/components/datagrid/cell/index.d.ts +4 -0
  93. package/dist/components/datagrid/cell/index.js +4 -0
  94. package/dist/components/datagrid/col/index.d.ts +4 -0
  95. package/dist/components/datagrid/col/index.js +4 -0
  96. package/dist/components/datagrid/column/bond.svelte.d.ts +45 -0
  97. package/dist/components/datagrid/column/bond.svelte.js +76 -0
  98. package/dist/components/datagrid/{th/datagrid-th-sort-icon.svelte → column/datagrid-column-sort-icon.svelte} +3 -3
  99. package/dist/components/datagrid/{th/datagrid-th-sort-icon.svelte.d.ts → column/datagrid-column-sort-icon.svelte.d.ts} +3 -3
  100. package/dist/components/datagrid/{th/datagrid-th.svelte → column/datagrid-column.svelte} +27 -36
  101. package/dist/components/datagrid/column/datagrid-column.svelte.d.ts +26 -0
  102. package/dist/components/datagrid/column/index.d.ts +4 -0
  103. package/dist/components/datagrid/column/index.js +4 -0
  104. package/dist/components/datagrid/context.d.ts +2 -29
  105. package/dist/components/datagrid/context.js +4 -18
  106. package/dist/components/datagrid/datagrid-body.svelte +7 -20
  107. package/dist/components/datagrid/datagrid-body.svelte.d.ts +8 -15
  108. package/dist/components/datagrid/datagrid-checkbox.svelte +60 -63
  109. package/dist/components/datagrid/datagrid-checkbox.svelte.d.ts +1 -3
  110. package/dist/components/datagrid/datagrid-footer.svelte +27 -34
  111. package/dist/components/datagrid/datagrid-footer.svelte.d.ts +12 -12
  112. package/dist/components/datagrid/datagrid-header.svelte +10 -17
  113. package/dist/components/datagrid/datagrid-header.svelte.d.ts +12 -12
  114. package/dist/components/datagrid/datagrid-root.svelte +49 -59
  115. package/dist/components/datagrid/datagrid-root.svelte.d.ts +15 -14
  116. package/dist/components/datagrid/row/bond.svelte.d.ts +42 -0
  117. package/dist/components/datagrid/row/bond.svelte.js +72 -0
  118. package/dist/components/datagrid/{tr/datagrid-tr.css → row/datagrid-row.css} +1 -1
  119. package/dist/components/datagrid/row/datagrid-row.svelte +64 -0
  120. package/dist/components/datagrid/row/datagrid-row.svelte.d.ts +27 -0
  121. package/dist/components/datagrid/row/index.d.ts +4 -0
  122. package/dist/components/datagrid/row/index.js +4 -0
  123. package/dist/components/datagrid/types.d.ts +56 -116
  124. package/dist/components/date-picker/bond.svelte.d.ts +0 -12
  125. package/dist/components/date-picker/date-picker-calendar.svelte +58 -58
  126. package/dist/components/date-picker/date-picker-months.svelte +1 -1
  127. package/dist/components/date-picker/date-picker-root.svelte +96 -96
  128. package/dist/components/date-picker/date-picker-root.svelte.d.ts +1 -1
  129. package/dist/components/date-picker/date-picker-years.svelte +1 -1
  130. package/dist/components/date-picker/types.d.ts +6 -3
  131. package/dist/components/dialog/atoms.d.ts +1 -1
  132. package/dist/components/dialog/atoms.js +1 -1
  133. package/dist/components/dialog/bond.svelte.d.ts +66 -28
  134. package/dist/components/dialog/bond.svelte.js +136 -117
  135. package/dist/components/dialog/dialog-body.svelte +1 -1
  136. package/dist/components/dialog/dialog-close.svelte +58 -0
  137. package/dist/components/dialog/dialog-close.svelte.d.ts +26 -0
  138. package/dist/components/dialog/dialog-content.svelte +2 -2
  139. package/dist/components/dialog/dialog-description.svelte +1 -1
  140. package/dist/components/dialog/dialog-footer.svelte +1 -1
  141. package/dist/components/dialog/dialog-header.svelte +1 -1
  142. package/dist/components/dialog/dialog-root.svelte +102 -82
  143. package/dist/components/dialog/dialog-title.svelte +1 -1
  144. package/dist/components/dialog/motion.svelte.js +68 -26
  145. package/dist/components/dialog/types.d.ts +16 -51
  146. package/dist/components/divider/types.d.ts +1 -6
  147. package/dist/components/drawer/bond.svelte.d.ts +61 -36
  148. package/dist/components/drawer/bond.svelte.js +149 -121
  149. package/dist/components/drawer/drawer-backdrop.svelte +2 -1
  150. package/dist/components/drawer/drawer-body.svelte +1 -1
  151. package/dist/components/drawer/drawer-content.svelte +5 -5
  152. package/dist/components/drawer/drawer-content.svelte.d.ts +4 -1
  153. package/dist/components/drawer/drawer-description.svelte +1 -1
  154. package/dist/components/drawer/drawer-footer.svelte +1 -1
  155. package/dist/components/drawer/drawer-header.svelte +1 -1
  156. package/dist/components/drawer/drawer-root.svelte +96 -87
  157. package/dist/components/drawer/drawer-title.svelte +1 -1
  158. package/dist/components/drawer/motion.d.ts +59 -5
  159. package/dist/components/drawer/motion.js +133 -15
  160. package/dist/components/drawer/types.d.ts +15 -24
  161. package/dist/components/dropdown/atoms.d.ts +4 -8
  162. package/dist/components/dropdown/atoms.js +4 -9
  163. package/dist/components/dropdown/bond.svelte.d.ts +4 -53
  164. package/dist/components/dropdown/bond.svelte.js +4 -89
  165. package/dist/components/dropdown/dropdown-query.svelte +43 -43
  166. package/dist/components/dropdown/dropdown-root.svelte +79 -79
  167. package/dist/components/dropdown/dropdown-root.svelte.d.ts +4 -4
  168. package/dist/components/dropdown/dropdown-selection.svelte +55 -55
  169. package/dist/components/dropdown/dropdown-selections.svelte +70 -70
  170. package/dist/components/dropdown/dropdown-trigger.svelte +30 -30
  171. package/dist/components/dropdown/index.d.ts +43 -7
  172. package/dist/components/dropdown/index.js +34 -6
  173. package/dist/components/dropdown/item/bond.svelte.d.ts +36 -0
  174. package/dist/components/dropdown/item/bond.svelte.js +85 -0
  175. package/dist/components/dropdown/item/controller.svelte.d.ts +1 -1
  176. package/dist/components/dropdown/item/dropdown-item.svelte +81 -107
  177. package/dist/components/dropdown/item/index.d.ts +11 -3
  178. package/dist/components/dropdown/item/index.js +10 -3
  179. package/dist/components/dropdown/types.d.ts +2 -67
  180. package/dist/components/dropdown-menu/atoms.d.ts +9 -0
  181. package/dist/components/dropdown-menu/atoms.js +9 -0
  182. package/dist/components/dropdown-menu/attachments.svelte.d.ts +2 -0
  183. package/dist/components/dropdown-menu/attachments.svelte.js +5 -0
  184. package/dist/components/dropdown-menu/bond.svelte.d.ts +72 -0
  185. package/dist/components/dropdown-menu/bond.svelte.js +173 -0
  186. package/dist/components/dropdown-menu/dropdown-menu-content.svelte +40 -0
  187. package/dist/components/dropdown-menu/dropdown-menu-content.svelte.d.ts +37 -0
  188. package/dist/components/dropdown-menu/dropdown-menu-root.svelte +14 -0
  189. package/dist/components/dropdown-menu/dropdown-menu-root.svelte.d.ts +4 -0
  190. package/dist/components/dropdown-menu/index.d.ts +7 -0
  191. package/dist/components/dropdown-menu/index.js +6 -0
  192. package/dist/components/dropdown-menu/item/bond.svelte.d.ts +26 -0
  193. package/dist/components/dropdown-menu/item/bond.svelte.js +54 -0
  194. package/dist/components/dropdown-menu/item/controller.svelte.d.ts +39 -0
  195. package/dist/components/dropdown-menu/item/controller.svelte.js +73 -0
  196. package/dist/components/dropdown-menu/item/dropdown-menu-item.svelte +75 -0
  197. package/dist/components/dropdown-menu/item/dropdown-menu-item.svelte.d.ts +32 -0
  198. package/dist/components/dropdown-menu/item/index.d.ts +3 -0
  199. package/dist/components/dropdown-menu/item/index.js +3 -0
  200. package/dist/components/dropdown-menu/item/types.d.ts +57 -0
  201. package/dist/components/dropdown-menu/item/types.js +1 -0
  202. package/dist/components/dropdown-menu/types.d.ts +3 -0
  203. package/dist/components/dropdown-menu/types.js +1 -0
  204. package/dist/components/element/html-element.svelte +114 -85
  205. package/dist/components/element/html-element.svelte.d.ts +1 -1
  206. package/dist/components/element/svg-element.svelte +88 -88
  207. package/dist/components/element/types.d.ts +32 -20
  208. package/dist/components/form/field/atoms.d.ts +1 -1
  209. package/dist/components/form/field/atoms.js +1 -1
  210. package/dist/components/form/field/bond.svelte.js +0 -6
  211. package/dist/components/form/field/field-control.svelte +30 -9
  212. package/dist/components/form/field/field-control.svelte.d.ts +12 -22
  213. package/dist/components/form/field/field-helper-text.svelte +23 -0
  214. package/dist/components/form/field/field-helper-text.svelte.d.ts +26 -0
  215. package/dist/components/form/field/field-label.svelte +5 -7
  216. package/dist/components/form/field/field-label.svelte.d.ts +2 -2
  217. package/dist/components/form/field/field-root.svelte +17 -8
  218. package/dist/components/form/form-root.svelte +66 -66
  219. package/dist/components/form/types.d.ts +34 -58
  220. package/dist/components/icon/icon.svelte +40 -40
  221. package/dist/components/icon/types.d.ts +4 -7
  222. package/dist/components/image/index.d.ts +2 -0
  223. package/dist/components/image/index.js +2 -1
  224. package/dist/components/index.d.ts +11 -0
  225. package/dist/components/index.js +11 -0
  226. package/dist/components/input/atoms.d.ts +19 -1
  227. package/dist/components/input/atoms.js +19 -1
  228. package/dist/components/input/color/color-control.svelte +197 -0
  229. package/dist/components/input/color/color-control.svelte.d.ts +4 -0
  230. package/dist/components/input/color/index.d.ts +5 -0
  231. package/dist/components/input/color/index.js +5 -0
  232. package/dist/components/input/color/segment.svelte +240 -0
  233. package/dist/components/input/color/segment.svelte.d.ts +6 -0
  234. package/dist/components/input/color/shared.d.ts +23 -0
  235. package/dist/components/input/color/shared.js +349 -0
  236. package/dist/components/input/color/swatch.svelte +23 -0
  237. package/dist/components/input/color/swatch.svelte.d.ts +8 -0
  238. package/dist/components/input/color/types.d.ts +56 -0
  239. package/dist/components/input/color/types.js +2 -0
  240. package/dist/components/input/index.d.ts +1 -0
  241. package/dist/components/input/index.js +1 -0
  242. package/dist/components/input/input-control.svelte +3 -1
  243. package/dist/components/input/input-currency-control.svelte +189 -0
  244. package/dist/components/input/input-currency-control.svelte.d.ts +4 -0
  245. package/dist/components/input/input-email-control.svelte +128 -0
  246. package/dist/components/input/input-email-control.svelte.d.ts +4 -0
  247. package/dist/components/input/input-file-control.svelte +127 -0
  248. package/dist/components/input/input-file-control.svelte.d.ts +4 -0
  249. package/dist/components/input/input-icon.svelte.d.ts +1 -1
  250. package/dist/components/input/input-location.svelte +335 -0
  251. package/dist/components/input/input-location.svelte.d.ts +4 -0
  252. package/dist/components/input/input-number-control.svelte +114 -0
  253. package/dist/components/input/input-number-control.svelte.d.ts +6 -0
  254. package/dist/components/input/input-otp-control.svelte +206 -0
  255. package/dist/components/input/input-otp-control.svelte.d.ts +4 -0
  256. package/dist/components/input/input-password-control.svelte +91 -0
  257. package/dist/components/input/input-password-control.svelte.d.ts +3 -0
  258. package/dist/components/input/input-phone-control.svelte +394 -0
  259. package/dist/components/input/input-phone-control.svelte.d.ts +4 -0
  260. package/dist/components/input/input-placeholder.svelte.d.ts +1 -1
  261. package/dist/components/input/input-root.svelte +74 -74
  262. package/dist/components/input/input-text-control.svelte +59 -0
  263. package/dist/components/input/input-text-control.svelte.d.ts +4 -0
  264. package/dist/components/input/input-url-control.svelte +218 -0
  265. package/dist/components/input/input-url-control.svelte.d.ts +4 -0
  266. package/dist/components/input/time/datetime-control.svelte +281 -0
  267. package/dist/components/input/time/datetime-control.svelte.d.ts +5 -0
  268. package/dist/components/input/time/index.d.ts +6 -0
  269. package/dist/components/input/time/index.js +6 -0
  270. package/dist/components/input/time/segment.svelte +143 -0
  271. package/dist/components/input/time/segment.svelte.d.ts +6 -0
  272. package/dist/components/input/time/shared.d.ts +29 -0
  273. package/dist/components/input/time/shared.js +150 -0
  274. package/dist/components/input/time/time-control.svelte +237 -0
  275. package/dist/components/input/time/time-control.svelte.d.ts +3 -0
  276. package/dist/components/input/time/types.d.ts +34 -0
  277. package/dist/components/input/time/types.js +4 -0
  278. package/dist/components/input/types.d.ts +355 -17
  279. package/dist/components/label/types.d.ts +4 -7
  280. package/dist/components/layer/bond.svelte.d.ts +2 -2
  281. package/dist/components/layer/bond.svelte.js +1 -1
  282. package/dist/components/layer/index.d.ts +1 -0
  283. package/dist/components/layer/layer-inner.svelte.d.ts +1 -1
  284. package/dist/components/layer/layer-root.svelte +65 -65
  285. package/dist/components/layer/layer-root.svelte.d.ts +1 -1
  286. package/dist/components/layer/types.d.ts +6 -6
  287. package/dist/components/lazy/index.d.ts +1 -0
  288. package/dist/components/lazy/lazy.svelte +29 -29
  289. package/dist/components/lazy/types.d.ts +4 -4
  290. package/dist/components/link/index.d.ts +1 -0
  291. package/dist/components/link/types.d.ts +5 -6
  292. package/dist/components/list/index.d.ts +1 -0
  293. package/dist/components/list/types.d.ts +5 -6
  294. package/dist/components/menu/atoms.d.ts +2 -7
  295. package/dist/components/menu/atoms.js +2 -7
  296. package/dist/components/menu/bond.svelte.d.ts +9 -23
  297. package/dist/components/menu/bond.svelte.js +6 -0
  298. package/dist/components/menu/index.d.ts +40 -4
  299. package/dist/components/menu/index.js +26 -3
  300. package/dist/components/menu/item/bond.svelte.d.ts +27 -0
  301. package/dist/components/menu/item/bond.svelte.js +54 -0
  302. package/dist/components/menu/item/controller.svelte.d.ts +1 -1
  303. package/dist/components/menu/item/index.d.ts +5 -2
  304. package/dist/components/menu/item/index.js +4 -2
  305. package/dist/components/menu/item/menu-item.svelte +87 -103
  306. package/dist/components/menu/item/menu-item.svelte.d.ts +15 -14
  307. package/dist/components/menu/item/types.d.ts +5 -12
  308. package/dist/components/menu/menu-content.svelte +40 -40
  309. package/dist/components/menu/menu-root.svelte +15 -15
  310. package/dist/components/menu/menu-root.svelte.d.ts +1 -1
  311. package/dist/components/menu/types.d.ts +2 -6
  312. package/dist/components/popover/bond.svelte.d.ts +67 -39
  313. package/dist/components/popover/bond.svelte.js +159 -197
  314. package/dist/components/popover/index.d.ts +3 -1
  315. package/dist/components/popover/index.js +3 -1
  316. package/dist/components/popover/motion.d.ts +29 -1
  317. package/dist/components/popover/motion.js +128 -50
  318. package/dist/components/popover/popover-arrow.svelte +97 -110
  319. package/dist/components/popover/popover-arrow.svelte.d.ts +1 -2
  320. package/dist/components/popover/popover-content.svelte +159 -123
  321. package/dist/components/popover/popover-engine.svelte +118 -0
  322. package/dist/components/popover/popover-engine.svelte.d.ts +3 -0
  323. package/dist/components/popover/popover-indicator.svelte +2 -13
  324. package/dist/components/popover/popover-indicator.svelte.d.ts +0 -6
  325. package/dist/components/popover/popover-root.svelte +87 -49
  326. package/dist/components/popover/popover-root.svelte.d.ts +2 -1
  327. package/dist/components/popover/popover-trigger.svelte +35 -35
  328. package/dist/components/popover/strategies/floating.svelte +109 -0
  329. package/dist/components/popover/strategies/floating.svelte.d.ts +3 -0
  330. package/dist/components/popover/strategies/index.d.ts +1 -0
  331. package/dist/components/popover/strategies/index.js +1 -0
  332. package/dist/components/popover/strategy-types.d.ts +40 -0
  333. package/dist/components/popover/strategy-types.js +1 -0
  334. package/dist/components/popover/types.d.ts +10 -36
  335. package/dist/components/portal/active-portal.svelte +5 -4
  336. package/dist/components/portal/bond.svelte.d.ts +12 -8
  337. package/dist/components/portal/bond.svelte.js +25 -27
  338. package/dist/components/portal/index.d.ts +1 -0
  339. package/dist/components/portal/index.js +1 -0
  340. package/dist/components/portal/portal-inner.svelte +1 -1
  341. package/dist/components/portal/portal-inner.svelte.d.ts +1 -1
  342. package/dist/components/portal/portal-root.svelte +76 -76
  343. package/dist/components/portal/portal-root.svelte.d.ts +1 -1
  344. package/dist/components/portal/portals/bond.svelte.d.ts +2 -2
  345. package/dist/components/portal/portals/bond.svelte.js +2 -2
  346. package/dist/components/portal/teleport.svelte +47 -49
  347. package/dist/components/portal/teleport.svelte.d.ts +1 -2
  348. package/dist/components/portal/types.d.ts +7 -25
  349. package/dist/components/portal/utils.js +3 -3
  350. package/dist/components/portal/zlayer.svelte.d.ts +16 -0
  351. package/dist/components/portal/zlayer.svelte.js +25 -0
  352. package/dist/components/radio/index.d.ts +2 -0
  353. package/dist/components/radio/index.js +1 -0
  354. package/dist/components/radio/motion.d.ts +24 -0
  355. package/dist/components/radio/motion.js +59 -0
  356. package/dist/components/radio/radio.svelte +22 -12
  357. package/dist/components/radio/types.d.ts +5 -14
  358. package/dist/components/root/bond.svelte.d.ts +2 -2
  359. package/dist/components/root/bond.svelte.js +1 -1
  360. package/dist/components/root/root.svelte +82 -92
  361. package/dist/components/root/root.svelte.d.ts +2 -2
  362. package/dist/components/root/types.d.ts +4 -15
  363. package/dist/components/scrollable/atoms.d.ts +1 -0
  364. package/dist/components/scrollable/atoms.js +1 -0
  365. package/dist/components/scrollable/bond.svelte.d.ts +73 -189
  366. package/dist/components/scrollable/bond.svelte.js +195 -371
  367. package/dist/components/scrollable/scrollable-container.css +22 -22
  368. package/dist/components/scrollable/scrollable-container.svelte +66 -61
  369. package/dist/components/scrollable/scrollable-container.svelte.d.ts +12 -12
  370. package/dist/components/scrollable/scrollable-content.svelte +22 -17
  371. package/dist/components/scrollable/scrollable-content.svelte.d.ts +12 -12
  372. package/dist/components/scrollable/scrollable-root.svelte +106 -101
  373. package/dist/components/scrollable/scrollable-root.svelte.d.ts +12 -12
  374. package/dist/components/scrollable/scrollable-thumb.svelte +21 -45
  375. package/dist/components/scrollable/scrollable-thumb.svelte.d.ts +12 -12
  376. package/dist/components/scrollable/scrollable-track.svelte +21 -22
  377. package/dist/components/scrollable/scrollable-track.svelte.d.ts +12 -12
  378. package/dist/components/scrollable/types.d.ts +15 -38
  379. package/dist/components/select/atoms.d.ts +8 -0
  380. package/dist/components/select/atoms.js +8 -0
  381. package/dist/components/select/attachments.svelte.d.ts +2 -0
  382. package/dist/components/select/attachments.svelte.js +5 -0
  383. package/dist/components/select/bond.svelte.d.ts +56 -0
  384. package/dist/components/select/bond.svelte.js +112 -0
  385. package/dist/components/select/index.d.ts +11 -0
  386. package/dist/components/select/index.js +10 -0
  387. package/dist/components/select/item/attachments.svelte.d.ts +3 -0
  388. package/dist/components/select/item/attachments.svelte.js +6 -0
  389. package/dist/components/select/item/bond.svelte.d.ts +33 -0
  390. package/dist/components/select/item/bond.svelte.js +77 -0
  391. package/dist/components/select/item/controller.svelte.d.ts +39 -0
  392. package/dist/components/select/item/controller.svelte.js +105 -0
  393. package/dist/components/select/item/index.d.ts +5 -0
  394. package/dist/components/select/item/index.js +5 -0
  395. package/dist/components/select/item/select-item.svelte +81 -0
  396. package/dist/components/select/item/select-item.svelte.d.ts +25 -0
  397. package/dist/components/select/item/types.d.ts +29 -0
  398. package/dist/components/select/item/types.js +1 -0
  399. package/dist/components/select/runes.svelte.d.ts +10 -0
  400. package/dist/components/select/runes.svelte.js +15 -0
  401. package/dist/components/select/select-placeholder.svelte +40 -0
  402. package/dist/components/select/select-placeholder.svelte.d.ts +34 -0
  403. package/dist/components/select/select-root.svelte +80 -0
  404. package/dist/components/select/select-root.svelte.d.ts +30 -0
  405. package/dist/components/select/select-selection.svelte +55 -0
  406. package/dist/components/select/select-selection.svelte.d.ts +26 -0
  407. package/dist/components/select/select-selections.svelte +70 -0
  408. package/dist/components/select/select-selections.svelte.d.ts +5 -0
  409. package/dist/components/select/select-trigger.svelte +30 -0
  410. package/dist/components/select/select-trigger.svelte.d.ts +26 -0
  411. package/dist/components/select/types.d.ts +61 -0
  412. package/dist/components/select/types.js +1 -0
  413. package/dist/components/sidebar/bond.svelte.d.ts +10 -7
  414. package/dist/components/sidebar/bond.svelte.js +20 -15
  415. package/dist/components/sidebar/sidebar-content.svelte +1 -1
  416. package/dist/components/sidebar/sidebar-root.svelte +50 -41
  417. package/dist/components/sidebar/types.d.ts +10 -15
  418. package/dist/components/slider/index.d.ts +2 -0
  419. package/dist/components/slider/index.js +2 -0
  420. package/dist/components/slider/slider.svelte +164 -0
  421. package/dist/components/slider/slider.svelte.d.ts +6 -0
  422. package/dist/components/slider/types.d.ts +78 -0
  423. package/dist/components/slider/types.js +1 -0
  424. package/dist/components/stack/bond.svelte.d.ts +50 -0
  425. package/dist/components/stack/bond.svelte.js +174 -0
  426. package/dist/components/stack/index.d.ts +2 -0
  427. package/dist/components/stack/index.js +2 -0
  428. package/dist/components/stack/stack-item.svelte +40 -4
  429. package/dist/components/stack/stack-item.svelte.d.ts +6 -5
  430. package/dist/components/stack/stack-root.svelte +33 -4
  431. package/dist/components/stack/stack-root.svelte.d.ts +14 -5
  432. package/dist/components/stack/types.d.ts +11 -10
  433. package/dist/components/stepper/bond.svelte.d.ts +8 -7
  434. package/dist/components/stepper/bond.svelte.js +14 -11
  435. package/dist/components/stepper/step/README.md +97 -97
  436. package/dist/components/stepper/step/bond.svelte.d.ts +74 -63
  437. package/dist/components/stepper/step/bond.svelte.js +105 -69
  438. package/dist/components/stepper/step/step-body.svelte +39 -39
  439. package/dist/components/stepper/step/step-description.svelte +33 -33
  440. package/dist/components/stepper/step/step-header.svelte +34 -34
  441. package/dist/components/stepper/step/step-indicator.svelte +62 -62
  442. package/dist/components/stepper/step/step-root.svelte +42 -42
  443. package/dist/components/stepper/step/step-separator.svelte +48 -48
  444. package/dist/components/stepper/step/step-title.svelte +33 -33
  445. package/dist/components/stepper/step/types.d.ts +13 -57
  446. package/dist/components/stepper/stepper-body.svelte +31 -43
  447. package/dist/components/stepper/stepper-content.svelte +45 -45
  448. package/dist/components/stepper/stepper-footer.svelte +31 -31
  449. package/dist/components/stepper/stepper-header.svelte +27 -39
  450. package/dist/components/stepper/stepper-root.svelte +55 -61
  451. package/dist/components/stepper/types.d.ts +10 -36
  452. package/dist/components/swatch/index.d.ts +1 -0
  453. package/dist/components/swatch/index.js +1 -0
  454. package/dist/components/swatch/swatch.svelte +57 -0
  455. package/dist/components/swatch/swatch.svelte.d.ts +9 -0
  456. package/dist/components/switch/index.d.ts +2 -0
  457. package/dist/components/switch/index.js +2 -0
  458. package/dist/components/switch/switch.svelte +76 -0
  459. package/dist/components/switch/switch.svelte.d.ts +6 -0
  460. package/dist/components/switch/types.d.ts +43 -0
  461. package/dist/components/switch/types.js +1 -0
  462. package/dist/components/tabs/bond.svelte.d.ts +38 -19
  463. package/dist/components/tabs/bond.svelte.js +53 -46
  464. package/dist/components/tabs/tab/attachments.svelte.d.ts +5 -2
  465. package/dist/components/tabs/tab/attachments.svelte.js +4 -3
  466. package/dist/components/tabs/tab/bond.svelte.d.ts +35 -23
  467. package/dist/components/tabs/tab/bond.svelte.js +81 -56
  468. package/dist/components/tabs/tab/tab-body.svelte +61 -43
  469. package/dist/components/tabs/tab/tab-description.svelte +33 -33
  470. package/dist/components/tabs/tab/tab-header.svelte +61 -61
  471. package/dist/components/tabs/tab/tab-root.svelte +49 -50
  472. package/dist/components/tabs/tab/tab-root.svelte.d.ts +13 -35
  473. package/dist/components/tabs/tabs-body.svelte +39 -35
  474. package/dist/components/tabs/tabs-body.svelte.d.ts +1 -1
  475. package/dist/components/tabs/tabs-content.svelte +32 -51
  476. package/dist/components/tabs/tabs-header.svelte +32 -32
  477. package/dist/components/tabs/tabs-root.svelte +56 -56
  478. package/dist/components/tabs/types.d.ts +20 -37
  479. package/dist/components/textarea/types.d.ts +6 -12
  480. package/dist/components/toast/atoms.d.ts +1 -0
  481. package/dist/components/toast/atoms.js +1 -0
  482. package/dist/components/toast/index.d.ts +1 -0
  483. package/dist/components/toast/index.js +1 -0
  484. package/dist/components/toast/manager.svelte.d.ts +38 -0
  485. package/dist/components/toast/manager.svelte.js +82 -0
  486. package/dist/components/toast/toast-description.svelte.d.ts +1 -1
  487. package/dist/components/toast/toast-root-managed.svelte +64 -0
  488. package/dist/components/toast/toast-root-managed.svelte.d.ts +7 -0
  489. package/dist/components/toast/toast-root.svelte.d.ts +1 -1
  490. package/dist/components/toast/toast-title.svelte.d.ts +1 -1
  491. package/dist/components/toast/toast-toaster.svelte +42 -0
  492. package/dist/components/toast/toast-toaster.svelte.d.ts +4 -0
  493. package/dist/components/toast/types.d.ts +22 -31
  494. package/dist/components/tooltip/index.d.ts +1 -0
  495. package/dist/components/tooltip/tooltip-trigger.svelte +39 -39
  496. package/dist/components/tooltip/types.d.ts +5 -8
  497. package/dist/components/tree/bond.svelte.d.ts +28 -19
  498. package/dist/components/tree/bond.svelte.js +62 -53
  499. package/dist/components/tree/tree-body.svelte +1 -1
  500. package/dist/components/tree/tree-header.svelte +1 -1
  501. package/dist/components/tree/tree-header.svelte.d.ts +1 -1
  502. package/dist/components/tree/tree-indicator.svelte +1 -1
  503. package/dist/components/tree/tree-root.svelte +66 -66
  504. package/dist/components/tree/types.d.ts +4 -28
  505. package/dist/components/virtual/index.d.ts +2 -0
  506. package/dist/components/virtual/index.js +2 -0
  507. package/dist/components/virtual/types.d.ts +1 -6
  508. package/dist/constants/motion.d.ts +9 -0
  509. package/dist/constants/motion.js +9 -0
  510. package/dist/context/index.d.ts +1 -1
  511. package/dist/context/preset.svelte.d.ts +169 -2
  512. package/dist/runes/color-scheme.svelte.js +17 -5
  513. package/dist/shared/bond.svelte.d.ts +29 -3
  514. package/dist/shared/bond.svelte.js +126 -4
  515. package/dist/shared/index.d.ts +1 -1
  516. package/dist/shared/index.js +1 -1
  517. package/dist/shared/motion.d.ts +1 -0
  518. package/dist/shared/motion.js +2 -8
  519. package/dist/types/index.d.ts +4 -0
  520. package/dist/utils/index.d.ts +1 -1
  521. package/dist/utils/index.js +1 -1
  522. package/dist/utils/promise.svelte.d.ts +5 -0
  523. package/dist/utils/promise.svelte.js +17 -0
  524. package/dist/utils/variant.d.ts +10 -1
  525. package/dist/utils/variant.js +11 -1
  526. package/package.json +171 -48
  527. package/dist/components/accordion/accordion.stories.svelte +0 -70
  528. package/dist/components/accordion/accordion.stories.svelte.d.ts +0 -18
  529. package/dist/components/alert/alert.stories.svelte +0 -400
  530. package/dist/components/alert/alert.stories.svelte.d.ts +0 -3
  531. package/dist/components/avatar/avatar.stories.svelte +0 -22
  532. package/dist/components/avatar/avatar.stories.svelte.d.ts +0 -26
  533. package/dist/components/badge/badge.stories.svelte +0 -12
  534. package/dist/components/badge/badge.stories.svelte.d.ts +0 -26
  535. package/dist/components/breadcrumb/breadcrumb.stories.svelte +0 -16
  536. package/dist/components/breadcrumb/breadcrumb.stories.svelte.d.ts +0 -26
  537. package/dist/components/button/button.stories.svelte +0 -27
  538. package/dist/components/button/button.stories.svelte.d.ts +0 -18
  539. package/dist/components/calendar/calendar.stories.svelte +0 -26
  540. package/dist/components/calendar/calendar.stories.svelte.d.ts +0 -26
  541. package/dist/components/card/card.stories.svelte +0 -133
  542. package/dist/components/card/card.stories.svelte.d.ts +0 -19
  543. package/dist/components/checkbox/checkbox.stories.svelte +0 -22
  544. package/dist/components/checkbox/checkbox.stories.svelte.d.ts +0 -6
  545. package/dist/components/collapsible/collapsible.stories.svelte +0 -172
  546. package/dist/components/collapsible/collapsible.stories.svelte.d.ts +0 -18
  547. package/dist/components/combobox/combobox.stories.svelte +0 -63
  548. package/dist/components/combobox/combobox.stories.svelte.d.ts +0 -3
  549. package/dist/components/container/container.stories.svelte +0 -20
  550. package/dist/components/container/container.stories.svelte.d.ts +0 -26
  551. package/dist/components/contextmenu/atoms.d.ts +0 -0
  552. package/dist/components/contextmenu/atoms.js +0 -1
  553. package/dist/components/contextmenu/contextmenu-trigger.svelte +0 -0
  554. package/dist/components/contextmenu/contextmenu-trigger.svelte.d.ts +0 -26
  555. package/dist/components/contextmenu/indext.d.ts +0 -0
  556. package/dist/components/contextmenu/indext.js +0 -1
  557. package/dist/components/datagrid/datagrid.stories.svelte +0 -72
  558. package/dist/components/datagrid/datagrid.stories.svelte.d.ts +0 -6
  559. package/dist/components/datagrid/td/bond.svelte.d.ts +0 -28
  560. package/dist/components/datagrid/td/bond.svelte.js +0 -40
  561. package/dist/components/datagrid/td/datagrid-td.svelte +0 -66
  562. package/dist/components/datagrid/td/datagrid-td.svelte.d.ts +0 -30
  563. package/dist/components/datagrid/td/index.d.ts +0 -2
  564. package/dist/components/datagrid/td/index.js +0 -2
  565. package/dist/components/datagrid/th/bond.svelte.d.ts +0 -38
  566. package/dist/components/datagrid/th/bond.svelte.js +0 -66
  567. package/dist/components/datagrid/th/datagrid-th.svelte.d.ts +0 -26
  568. package/dist/components/datagrid/th/index.d.ts +0 -2
  569. package/dist/components/datagrid/th/index.js +0 -2
  570. package/dist/components/datagrid/tr/bond.svelte.d.ts +0 -37
  571. package/dist/components/datagrid/tr/bond.svelte.js +0 -72
  572. package/dist/components/datagrid/tr/datagrid-tr.svelte +0 -90
  573. package/dist/components/datagrid/tr/datagrid-tr.svelte.d.ts +0 -28
  574. package/dist/components/datagrid/tr/index.d.ts +0 -2
  575. package/dist/components/datagrid/tr/index.js +0 -2
  576. package/dist/components/date-picker/date-picker.stories.svelte +0 -35
  577. package/dist/components/date-picker/date-picker.stories.svelte.d.ts +0 -3
  578. package/dist/components/dialog/dialog.stories.svelte +0 -64
  579. package/dist/components/dialog/dialog.stories.svelte.d.ts +0 -3
  580. package/dist/components/drawer/drawer.stories.svelte +0 -141
  581. package/dist/components/drawer/drawer.stories.svelte.d.ts +0 -3
  582. package/dist/components/dropdown/dropdown.stories.svelte +0 -127
  583. package/dist/components/dropdown/dropdown.stories.svelte.d.ts +0 -3
  584. package/dist/components/element/element.stories.svelte +0 -37
  585. package/dist/components/element/element.stories.svelte.d.ts +0 -3
  586. package/dist/components/form/field/field-errors.svelte +0 -9
  587. package/dist/components/form/field/field-errors.svelte.d.ts +0 -11
  588. package/dist/components/form/form.stories.svelte +0 -96
  589. package/dist/components/form/form.stories.svelte.d.ts +0 -18
  590. package/dist/components/image/image.stories.svelte +0 -20
  591. package/dist/components/image/image.stories.svelte.d.ts +0 -26
  592. package/dist/components/input/input.stories.svelte +0 -35
  593. package/dist/components/input/input.stories.svelte.d.ts +0 -18
  594. package/dist/components/label/label.stories.svelte +0 -15
  595. package/dist/components/label/label.stories.svelte.d.ts +0 -26
  596. package/dist/components/lazy/lazy.stories.svelte +0 -28
  597. package/dist/components/lazy/lazy.stories.svelte.d.ts +0 -19
  598. package/dist/components/link/link.stories.svelte +0 -15
  599. package/dist/components/link/link.stories.svelte.d.ts +0 -26
  600. package/dist/components/menu/menu.stories.svelte +0 -33
  601. package/dist/components/menu/menu.stories.svelte.d.ts +0 -3
  602. package/dist/components/popover/popover.stories.svelte +0 -37
  603. package/dist/components/popover/popover.stories.svelte.d.ts +0 -3
  604. package/dist/components/qr-code/qr-code.stories.svelte +0 -18
  605. package/dist/components/qr-code/qr-code.stories.svelte.d.ts +0 -26
  606. package/dist/components/radio/radio-group.stories.svelte +0 -41
  607. package/dist/components/radio/radio-group.stories.svelte.d.ts +0 -6
  608. package/dist/components/radio/radio.stories.svelte +0 -17
  609. package/dist/components/radio/radio.stories.svelte.d.ts +0 -6
  610. package/dist/components/root/l0-portal.svelte +0 -8
  611. package/dist/components/root/l0-portal.svelte.d.ts +0 -26
  612. package/dist/components/root/l1-portal.svelte +0 -7
  613. package/dist/components/root/l1-portal.svelte.d.ts +0 -26
  614. package/dist/components/root/toasts-portal.svelte +0 -7
  615. package/dist/components/root/toasts-portal.svelte.d.ts +0 -26
  616. package/dist/components/scrollable/scrollable.stories.svelte +0 -116
  617. package/dist/components/scrollable/scrollable.stories.svelte.d.ts +0 -26
  618. package/dist/components/sidebar/sidebar.stories.svelte +0 -43
  619. package/dist/components/sidebar/sidebar.stories.svelte.d.ts +0 -3
  620. package/dist/components/stepper/stepper.stories.svelte +0 -264
  621. package/dist/components/stepper/stepper.stories.svelte.d.ts +0 -4
  622. package/dist/components/tabs/tabs.stories.svelte +0 -70
  623. package/dist/components/tabs/tabs.stories.svelte.d.ts +0 -3
  624. package/dist/components/tooltip/tooltip.stories.svelte +0 -32
  625. package/dist/components/tooltip/tooltip.stories.svelte.d.ts +0 -3
  626. package/dist/components/tree/tree.stories.svelte +0 -142
  627. package/dist/components/tree/tree.stories.svelte.d.ts +0 -3
  628. /package/dist/components/{contextmenu → context-menu}/types.js +0 -0
@@ -1,400 +0,0 @@
1
- <script module>
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import { Alert as AAlert } from './index';
4
- import { Button } from '../button';
5
- import { Icon } from '../icon';
6
- import { cn } from '../../utils';
7
-
8
- const { Story } = defineMeta({
9
- title: 'Atoms/Alert',
10
- parameters: {
11
- layout: 'fullscreen'
12
- }
13
- });
14
- </script>
15
-
16
- <script lang="ts">
17
- let dismissedState = $state(false);
18
- let autoHideState = $state(false);
19
-
20
- // Auto-hide demo
21
- $effect(() => {
22
- if (autoHideState) {
23
- const timer = setTimeout(() => {
24
- autoHideState = false;
25
- }, 5000);
26
- return () => clearTimeout(timer);
27
- }
28
- });
29
- </script>
30
-
31
- {#snippet alertLayout({ children, class: klass, ...args })}
32
- {@const gridTemplateAreas = `"icon title close-button" ". description description" "content content content" "actions actions actions"`}
33
- {@const gridTemplateColumns = `auto 1fr auto`}
34
-
35
- <div
36
- {...args}
37
- class={cn(klass, 'grid items-center')}
38
- style:grid-template-areas={gridTemplateAreas}
39
- style:grid-template-columns={gridTemplateColumns}
40
- >
41
- {@render children?.()}
42
- </div>
43
- {/snippet}
44
-
45
- <Story name="All Variants">
46
- <div class="space-y-6 p-8">
47
- <div class="space-y-4">
48
- <h2 class="text-2xl font-bold">Alert Variants</h2>
49
-
50
- <!-- Info Alert -->
51
- <AAlert.Root base={alertLayout} variant="info">
52
- <AAlert.Icon>
53
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
54
- <circle cx="12" cy="12" r="10"></circle>
55
- <path d="M12 16v-4M12 8h.01"></path>
56
- </svg>
57
- </AAlert.Icon>
58
- <AAlert.Title>New Feature Available</AAlert.Title>
59
- <AAlert.Description>
60
- We've added dark mode support to your dashboard. Try it out in the settings panel.
61
- </AAlert.Description>
62
- <AAlert.Content></AAlert.Content>
63
- </AAlert.Root>
64
-
65
- <!-- Success Alert -->
66
- <AAlert.Root base={alertLayout} variant="success">
67
- <AAlert.Icon>
68
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
69
- <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
70
- <polyline points="22 4 12 14.01 9 11.01"></polyline>
71
- </svg>
72
- </AAlert.Icon>
73
- <AAlert.Title>Changes Saved Successfully</AAlert.Title>
74
- <AAlert.Description>
75
- Your profile settings have been updated and synced across all devices.
76
- </AAlert.Description>
77
- <AAlert.Content></AAlert.Content>
78
- </AAlert.Root>
79
-
80
- <!-- Warning Alert -->
81
- <AAlert.Root base={alertLayout} variant="warning">
82
- <AAlert.Icon>
83
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
84
- <path
85
- d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
86
- ></path>
87
- <line x1="12" y1="9" x2="12" y2="13"></line>
88
- <line x1="12" y1="17" x2="12.01" y2="17"></line>
89
- </svg>
90
- </AAlert.Icon>
91
- <AAlert.Title>Storage Almost Full</AAlert.Title>
92
- <AAlert.Description>
93
- You're using 90% of your storage quota. Consider upgrading your plan or removing unused
94
- files.
95
- </AAlert.Description>
96
- <AAlert.Content></AAlert.Content>
97
- </AAlert.Root>
98
-
99
- <!-- Error Alert -->
100
- <AAlert.Root base={alertLayout} variant="error">
101
- <AAlert.Icon>
102
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
103
- <circle cx="12" cy="12" r="10"></circle>
104
- <line x1="15" y1="9" x2="9" y2="15"></line>
105
- <line x1="9" y1="9" x2="15" y2="15"></line>
106
- </svg>
107
- </AAlert.Icon>
108
- <AAlert.Title>Payment Failed</AAlert.Title>
109
- <AAlert.Description>
110
- We couldn't process your payment. Please check your payment method and try again.
111
- </AAlert.Description>
112
- <AAlert.Content></AAlert.Content>
113
- </AAlert.Root>
114
- </div>
115
- </div>
116
- </Story>
117
-
118
- <Story name="Dismissible">
119
- <div class="space-y-6 p-8">
120
- <div class="space-y-4">
121
- <h2 class="text-2xl font-bold">Dismissible Alerts</h2>
122
-
123
- <AAlert.Root base={alertLayout} variant="info" dismissible bind:dismissed={dismissedState}>
124
- <AAlert.Icon>
125
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
126
- <circle cx="12" cy="12" r="10"></circle>
127
- <path d="M12 16v-4M12 8h.01"></path>
128
- </svg>
129
- </AAlert.Icon>
130
- <AAlert.Title>Cookie Preferences</AAlert.Title>
131
- <AAlert.Description>
132
- We use cookies to enhance your experience. You can manage your preferences in settings.
133
- </AAlert.Description>
134
- <AAlert.Content></AAlert.Content>
135
- <AAlert.CloseButton>
136
- <Icon class="h-full">
137
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
138
- <line x1="18" y1="6" x2="6" y2="18"></line>
139
- <line x1="6" y1="6" x2="18" y2="18"></line>
140
- </svg>
141
- </Icon>
142
- </AAlert.CloseButton>
143
- </AAlert.Root>
144
-
145
- {#if dismissedState}
146
- <Button onclick={() => (dismissedState = false)}>Restore Alert</Button>
147
- {/if}
148
-
149
- <AAlert.Root base={alertLayout} variant="warning" dismissible>
150
- <AAlert.Icon>
151
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
152
- <path
153
- d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
154
- ></path>
155
- <line x1="12" y1="9" x2="12" y2="13"></line>
156
- <line x1="12" y1="17" x2="12.01" y2="17"></line>
157
- </svg>
158
- </AAlert.Icon>
159
- <AAlert.Title>Beta Feature Warning</AAlert.Title>
160
- <AAlert.Description>
161
- You're using a beta feature. Some functionality may be unstable or change without notice.
162
- </AAlert.Description>
163
- <AAlert.Content></AAlert.Content>
164
- <AAlert.CloseButton>
165
- <Icon class="h-full">
166
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
167
- <line x1="18" y1="6" x2="6" y2="18"></line>
168
- <line x1="6" y1="6" x2="18" y2="18"></line>
169
- </svg>
170
- </Icon>
171
- </AAlert.CloseButton>
172
- </AAlert.Root>
173
- </div>
174
- </div>
175
- </Story>
176
-
177
- <Story name="With Actions">
178
- <div class="space-y-6 p-8">
179
- <div class="space-y-4">
180
- <h2 class="text-2xl font-bold">Alerts with Action Buttons</h2>
181
-
182
- <AAlert.Root base={alertLayout} variant="info">
183
- <AAlert.Icon>
184
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
185
- <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
186
- <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
187
- </svg>
188
- </AAlert.Icon>
189
- <AAlert.Title>System Update Available</AAlert.Title>
190
- <AAlert.Description>
191
- A new version is ready to install. Update now to get the latest features and security
192
- improvements.
193
- </AAlert.Description>
194
- <AAlert.Actions>
195
- <Button variant="primary" size="sm">Update Now</Button>
196
- <Button variant="ghost" size="sm">Remind Me Later</Button>
197
- </AAlert.Actions>
198
- <AAlert.Content></AAlert.Content>
199
- </AAlert.Root>
200
-
201
- <AAlert.Root base={alertLayout} variant="error" dismissible>
202
- <AAlert.Icon>
203
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
204
- <circle cx="12" cy="12" r="10"></circle>
205
- <line x1="15" y1="9" x2="9" y2="15"></line>
206
- <line x1="9" y1="9" x2="15" y2="15"></line>
207
- </svg>
208
- </AAlert.Icon>
209
- <AAlert.Title>Verification Required</AAlert.Title>
210
- <AAlert.Description>
211
- Your account needs verification before you can access premium features.
212
- </AAlert.Description>
213
- <AAlert.Actions>
214
- <Button variant="destructive" size="sm">Verify Account</Button>
215
- <Button variant="outline" size="sm">Learn More</Button>
216
- </AAlert.Actions>
217
- <AAlert.Content></AAlert.Content>
218
- <AAlert.CloseButton>
219
- <Icon class="h-full">
220
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
221
- <line x1="18" y1="6" x2="6" y2="18"></line>
222
- <line x1="6" y1="6" x2="18" y2="18"></line>
223
- </svg>
224
- </Icon>
225
- </AAlert.CloseButton>
226
- </AAlert.Root>
227
-
228
- <AAlert.Root base={alertLayout} variant="success">
229
- <AAlert.Icon>
230
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
231
- <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
232
- <polyline points="22 4 12 14.01 9 11.01"></polyline>
233
- </svg>
234
- </AAlert.Icon>
235
- <AAlert.Title>Backup Completed</AAlert.Title>
236
- <AAlert.Description>
237
- All your data has been backed up successfully. Last backup: just now.
238
- </AAlert.Description>
239
- <AAlert.Actions>
240
- <Button variant="outline" size="sm">View Details</Button>
241
- </AAlert.Actions>
242
- <AAlert.Content></AAlert.Content>
243
- </AAlert.Root>
244
- </div>
245
- </div>
246
- </Story>
247
-
248
- <Story name="Minimal">
249
- <div class="space-y-6 p-8">
250
- <div class="space-y-4">
251
- <h2 class="text-2xl font-bold">Minimal Alerts</h2>
252
-
253
- <AAlert.Root variant="info">
254
- <AAlert.Content>Quick tip: Press Ctrl+K to open the command palette.</AAlert.Content>
255
- </AAlert.Root>
256
-
257
- <AAlert.Root variant="success">
258
- <AAlert.Content>Your changes have been saved automatically.</AAlert.Content>
259
- </AAlert.Root>
260
-
261
- <AAlert.Root variant="warning">
262
- <AAlert.Content>Your session will expire in 5 minutes.</AAlert.Content>
263
- <AAlert.Content></AAlert.Content>
264
- </AAlert.Root>
265
-
266
- <AAlert.Root variant="error">
267
- <AAlert.Content>Connection lost. Attempting to reconnect...</AAlert.Content>
268
- </AAlert.Root>
269
- </div>
270
- </div>
271
- </Story>
272
-
273
- <Story name="Real-World Examples">
274
- <div class="space-y-6 p-8">
275
- <div class="space-y-4">
276
- <h2 class="text-2xl font-bold">Real-World Use Cases</h2>
277
-
278
- <!-- Newsletter Subscription -->
279
- <AAlert.Root base={alertLayout} variant="success" dismissible>
280
- <AAlert.Icon>
281
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
282
- <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
283
- ></path>
284
- <polyline points="22,6 12,13 2,6"></polyline>
285
- </svg>
286
- </AAlert.Icon>
287
- <AAlert.Title>Successfully Subscribed!</AAlert.Title>
288
- <AAlert.Description>
289
- You're now subscribed to our newsletter. Check your inbox for a confirmation email.
290
- </AAlert.Description>
291
- <AAlert.Content></AAlert.Content>
292
- <AAlert.CloseButton>
293
- <Icon class="h-full">
294
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
295
- <line x1="18" y1="6" x2="6" y2="18"></line>
296
- <line x1="6" y1="6" x2="18" y2="18"></line>
297
- </svg>
298
- </Icon>
299
- </AAlert.CloseButton>
300
- </AAlert.Root>
301
-
302
- <!-- API Rate Limit -->
303
- <AAlert.Root base={alertLayout} variant="warning">
304
- <AAlert.Icon>
305
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
306
- <circle cx="12" cy="12" r="10"></circle>
307
- <polyline points="12 6 12 12 16 14"></polyline>
308
- </svg>
309
- </AAlert.Icon>
310
- <AAlert.Title>API Rate Limit Warning</AAlert.Title>
311
- <AAlert.Description>
312
- You've used 450 of 500 API calls this hour. Rate limit resets in 23 minutes.
313
- </AAlert.Description>
314
- <AAlert.Content></AAlert.Content>
315
- <AAlert.Actions>
316
- <Button variant="primary" size="sm">Upgrade Plan</Button>
317
- <Button variant="ghost" size="sm">View Usage</Button>
318
- </AAlert.Actions>
319
- </AAlert.Root>
320
-
321
- <!-- Maintenance Notice -->
322
- <AAlert.Root base={alertLayout} variant="info">
323
- <AAlert.Icon>
324
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
325
- <path
326
- d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
327
- ></path>
328
- </svg>
329
- </AAlert.Icon>
330
- <AAlert.Title>Scheduled Maintenance</AAlert.Title>
331
- <AAlert.Description>
332
- Our services will be undergoing maintenance on Dec 15, 2025 from 2:00 AM to 4:00 AM UTC.
333
- Some features may be temporarily unavailable.
334
- </AAlert.Description>
335
- <AAlert.Content></AAlert.Content>
336
- <AAlert.Actions>
337
- <Button variant="primary" size="sm">Add to Calendar</Button>
338
- </AAlert.Actions>
339
- </AAlert.Root>
340
-
341
- <!-- Security Alert -->
342
- <AAlert.Root base={alertLayout} variant="error" dismissible>
343
- <AAlert.Icon>
344
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
345
- <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
346
- <path d="M12 8v4M12 16h.01"></path>
347
- </svg>
348
- </AAlert.Icon>
349
- <AAlert.Title>Unusual Login Detected</AAlert.Title>
350
- <AAlert.Description>
351
- We detected a login from a new device in San Francisco, CA. If this wasn't you, secure
352
- your account immediately.
353
- </AAlert.Description>
354
- <AAlert.CloseButton>
355
- <Icon class="h-full">
356
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
357
- <line x1="18" y1="6" x2="6" y2="18"></line>
358
- <line x1="6" y1="6" x2="18" y2="18"></line>
359
- </svg>
360
- </Icon>
361
- </AAlert.CloseButton>
362
- <AAlert.Content></AAlert.Content>
363
- <AAlert.Actions>
364
- <Button variant="destructive" size="sm">Secure Account</Button>
365
- <Button variant="ghost" size="sm">This Was Me</Button>
366
- </AAlert.Actions>
367
- </AAlert.Root>
368
-
369
- <!-- Trial Ending -->
370
- <AAlert.Root base={alertLayout} variant="warning" dismissible>
371
- <AAlert.Icon>
372
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
373
- <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
374
- <line x1="16" y1="2" x2="16" y2="6"></line>
375
- <line x1="8" y1="2" x2="8" y2="6"></line>
376
- <line x1="3" y1="10" x2="21" y2="10"></line>
377
- </svg>
378
- </AAlert.Icon>
379
- <AAlert.Title>Trial Ending Soon</AAlert.Title>
380
- <AAlert.Description>
381
- Your free trial ends in 3 days. Upgrade now to keep access to premium features and avoid
382
- any interruption.
383
- </AAlert.Description>
384
- <AAlert.Content></AAlert.Content>
385
- <AAlert.CloseButton>
386
- <Icon class="h-full">
387
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
388
- <line x1="18" y1="6" x2="6" y2="18"></line>
389
- <line x1="6" y1="6" x2="18" y2="18"></line>
390
- </svg>
391
- </Icon>
392
- </AAlert.CloseButton>
393
- <AAlert.Actions>
394
- <Button variant="primary" size="sm">Upgrade Now</Button>
395
- <Button variant="ghost" size="sm">Compare Plans</Button>
396
- </AAlert.Actions>
397
- </AAlert.Root>
398
- </div>
399
- </div>
400
- </Story>
@@ -1,3 +0,0 @@
1
- declare const Alert: import("svelte").Component<Record<string, never>, {}, "">;
2
- type Alert = ReturnType<typeof Alert>;
3
- export default Alert;
@@ -1,22 +0,0 @@
1
- <script module>
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import AvatarCmp from './avatar.svelte';
4
- import CalendarRegularIcon from '../../icons/icon-arrow-down.svelte';
5
-
6
- const { Story } = defineMeta({
7
- title: 'ATOMS/Avatar'
8
- });
9
- </script>
10
-
11
- <Story name="Avatar">
12
- <div class="flex h-full w-full items-center justify-center gap-4">
13
- <AvatarCmp alt="Abdelhalim Riache" />
14
-
15
- <AvatarCmp src={CalendarRegularIcon} alt="Abdelhalim Riache" />
16
-
17
- <AvatarCmp
18
- src="https://sevennaturalwonders.org/wp-content/uploads/2023/12/1-Mount-Fuji.jpg"
19
- alt="Mount Fuji"
20
- />
21
- </div>
22
- </Story>
@@ -1,26 +0,0 @@
1
- export default Avatar;
2
- type Avatar = SvelteComponent<{
3
- [x: string]: never;
4
- }, {
5
- [evt: string]: CustomEvent<any>;
6
- }, {}> & {
7
- $$bindings?: string;
8
- };
9
- declare const Avatar: $$__sveltets_2_IsomorphicComponent<{
10
- [x: string]: never;
11
- }, {
12
- [evt: string]: CustomEvent<any>;
13
- }, {}, {}, string>;
14
- interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
15
- new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
16
- $$bindings?: Bindings;
17
- } & Exports;
18
- (internal: unknown, props: {
19
- $$events?: Events;
20
- $$slots?: Slots;
21
- }): Exports & {
22
- $set?: any;
23
- $on?: any;
24
- };
25
- z_$$bindings?: Bindings;
26
- }
@@ -1,12 +0,0 @@
1
- <script module>
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import { Badge as BadgeModule } from '.';
4
-
5
- const { Story } = defineMeta({
6
- title: 'ATOMS/Badge'
7
- });
8
- </script>
9
-
10
- <Story name="Badge">
11
- <BadgeModule>Badge</BadgeModule>
12
- </Story>
@@ -1,26 +0,0 @@
1
- export default Badge;
2
- type Badge = SvelteComponent<{
3
- [x: string]: never;
4
- }, {
5
- [evt: string]: CustomEvent<any>;
6
- }, {}> & {
7
- $$bindings?: string;
8
- };
9
- declare const Badge: $$__sveltets_2_IsomorphicComponent<{
10
- [x: string]: never;
11
- }, {
12
- [evt: string]: CustomEvent<any>;
13
- }, {}, {}, string>;
14
- interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
15
- new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
16
- $$bindings?: Bindings;
17
- } & Exports;
18
- (internal: unknown, props: {
19
- $$events?: Events;
20
- $$slots?: Slots;
21
- }): Exports & {
22
- $set?: any;
23
- $on?: any;
24
- };
25
- z_$$bindings?: Bindings;
26
- }
@@ -1,16 +0,0 @@
1
- <script module>
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import { Breadcrumb as BreadcrumbModule } from '.';
4
-
5
- const { Story } = defineMeta({
6
- title: 'ATOMS/Breadcrumb'
7
- });
8
- </script>
9
-
10
- <Story name="Breadcrumb">
11
- <BreadcrumbModule.Root>
12
- <BreadcrumbModule.Item href="/">Home</BreadcrumbModule.Item>
13
- <BreadcrumbModule.Separator>/</BreadcrumbModule.Separator>
14
- <BreadcrumbModule.Item href="/vehicles">Vehicles</BreadcrumbModule.Item>
15
- </BreadcrumbModule.Root>
16
- </Story>
@@ -1,26 +0,0 @@
1
- export default Breadcrumb;
2
- type Breadcrumb = SvelteComponent<{
3
- [x: string]: never;
4
- }, {
5
- [evt: string]: CustomEvent<any>;
6
- }, {}> & {
7
- $$bindings?: string;
8
- };
9
- declare const Breadcrumb: $$__sveltets_2_IsomorphicComponent<{
10
- [x: string]: never;
11
- }, {
12
- [evt: string]: CustomEvent<any>;
13
- }, {}, {}, string>;
14
- interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
15
- new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
16
- $$bindings?: Bindings;
17
- } & Exports;
18
- (internal: unknown, props: {
19
- $$events?: Events;
20
- $$slots?: Slots;
21
- }): Exports & {
22
- $set?: any;
23
- $on?: any;
24
- };
25
- z_$$bindings?: Bindings;
26
- }
@@ -1,27 +0,0 @@
1
- <script module>
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import ButtonCmp from './button.svelte';
4
-
5
- const { Story } = defineMeta({
6
- title: 'ATOMS/Button',
7
- argTypes: {
8
- variant: {
9
- control: 'select',
10
- options: ['primary', 'secondary', 'destructive', 'outline', 'ghost'],
11
- description: 'Button variant style',
12
- table: {
13
- defaultValue: { summary: 'primary' }
14
- }
15
- }
16
- }
17
- });
18
- </script>
19
-
20
- <script lang="ts">
21
- </script>
22
-
23
- <Story name="Button">
24
- {#snippet template(args)}
25
- <ButtonCmp {...args}>Click me</ButtonCmp>
26
- {/snippet}
27
- </Story>
@@ -1,18 +0,0 @@
1
- interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
2
- new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
3
- $$bindings?: Bindings;
4
- } & Exports;
5
- (internal: unknown, props: {
6
- $$events?: Events;
7
- $$slots?: Slots;
8
- }): Exports & {
9
- $set?: any;
10
- $on?: any;
11
- };
12
- z_$$bindings?: Bindings;
13
- }
14
- declare const Button: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
15
- [evt: string]: CustomEvent<any>;
16
- }, {}, {}, string>;
17
- type Button = InstanceType<typeof Button>;
18
- export default Button;
@@ -1,26 +0,0 @@
1
- <script module>
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import { Calendar as CalendarModule } from '.';
4
-
5
- const { Story } = defineMeta({
6
- title: 'Atoms/Calendar'
7
- });
8
- </script>
9
-
10
- <script>
11
- </script>
12
-
13
- <Story name="Calendar">
14
- {#snippet children({ args })}
15
- <div class="flex h-fit items-center justify-center">
16
- <CalendarModule.Root>
17
- <CalendarModule.Header></CalendarModule.Header>
18
- <CalendarModule.Body>
19
- {#snippet children({ day })}
20
- <CalendarModule.Day {day}></CalendarModule.Day>
21
- {/snippet}
22
- </CalendarModule.Body>
23
- </CalendarModule.Root>
24
- </div>
25
- {/snippet}
26
- </Story>
@@ -1,26 +0,0 @@
1
- export default Calendar;
2
- type Calendar = SvelteComponent<{
3
- [x: string]: never;
4
- }, {
5
- [evt: string]: CustomEvent<any>;
6
- }, {}> & {
7
- $$bindings?: string;
8
- };
9
- declare const Calendar: $$__sveltets_2_IsomorphicComponent<{
10
- [x: string]: never;
11
- }, {
12
- [evt: string]: CustomEvent<any>;
13
- }, {}, {}, string>;
14
- interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
15
- new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
16
- $$bindings?: Bindings;
17
- } & Exports;
18
- (internal: unknown, props: {
19
- $$events?: Events;
20
- $$slots?: Slots;
21
- }): Exports & {
22
- $set?: any;
23
- $on?: any;
24
- };
25
- z_$$bindings?: Bindings;
26
- }