@hkdigital/lib-sveltekit 0.1.62 → 0.1.65

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 (209) hide show
  1. package/README.md +135 -135
  2. package/dist/assets/autospuiten/car-paint-picker.js +41 -41
  3. package/dist/assets/autospuiten/labels.js +7 -7
  4. package/dist/classes/data/IterableTree.js +243 -243
  5. package/dist/classes/data/Selector.js +190 -190
  6. package/dist/classes/data/index.js +2 -2
  7. package/dist/classes/index.js +4 -4
  8. package/dist/classes/promise/HkPromise.js +377 -377
  9. package/dist/classes/promise/index.js +1 -1
  10. package/dist/classes/stores/SubscribersCount.js +107 -107
  11. package/dist/classes/stores/index.js +1 -1
  12. package/dist/classes/streams/LogTransformStream.js +19 -19
  13. package/dist/classes/streams/ServerEventsStore.js +110 -110
  14. package/dist/classes/streams/TimeStampSource.js +26 -26
  15. package/dist/classes/streams/index.js +3 -3
  16. package/dist/classes/svelte/audio/AudioLoader.svelte.js +58 -58
  17. package/dist/classes/svelte/audio/AudioScene.svelte.js +295 -295
  18. package/dist/classes/svelte/audio/mocks.js +35 -35
  19. package/dist/classes/svelte/finite-state-machine/FiniteStateMachine.svelte.js +133 -133
  20. package/dist/classes/svelte/finite-state-machine/index.js +1 -1
  21. package/dist/classes/svelte/image/ImageLoader.svelte.js +47 -47
  22. package/dist/classes/svelte/image/ImageScene.svelte.js +253 -253
  23. package/dist/classes/svelte/image/ImageVariantsLoader.svelte.js +152 -152
  24. package/dist/classes/svelte/image/index.js +4 -4
  25. package/dist/classes/svelte/image/mocks.js +35 -35
  26. package/dist/classes/svelte/image/typedef.js +8 -8
  27. package/dist/classes/svelte/index.js +14 -14
  28. package/dist/classes/svelte/loading-state-machine/LoadingStateMachine.svelte.js +109 -109
  29. package/dist/classes/svelte/loading-state-machine/constants.js +16 -16
  30. package/dist/classes/svelte/loading-state-machine/index.js +3 -3
  31. package/dist/classes/svelte/network-loader/NetworkLoader.svelte.js +331 -331
  32. package/dist/classes/svelte/network-loader/constants.js +3 -3
  33. package/dist/classes/svelte/network-loader/index.js +3 -3
  34. package/dist/classes/svelte/network-loader/mocks.js +30 -30
  35. package/dist/classes/svelte/network-loader/typedef.js +8 -8
  36. package/dist/components/area/HkArea.svelte +49 -49
  37. package/dist/components/area/HkGridArea.svelte +77 -77
  38. package/dist/components/area/index.js +2 -2
  39. package/dist/components/buttons/button/Button.svelte +82 -82
  40. package/dist/components/buttons/button-icon-steeze/SteezeIconButton.svelte +30 -30
  41. package/dist/components/buttons/button-text/TextButton.svelte +21 -21
  42. package/dist/components/buttons/index.js +3 -3
  43. package/dist/components/debug/debug-panel-design-scaling/DebugPanelDesignScaling.svelte +146 -146
  44. package/dist/components/debug/index.js +1 -1
  45. package/dist/components/hkdev/blocks/TextBlock.svelte +46 -46
  46. package/dist/components/hkdev/buttons/CheckButton.svelte +62 -62
  47. package/dist/components/icons/HkIcon.svelte +86 -86
  48. package/dist/components/icons/HkTabIcon.svelte +116 -116
  49. package/dist/components/icons/SteezeIcon.svelte +97 -97
  50. package/dist/components/icons/index.js +6 -6
  51. package/dist/components/icons/typedef.js +16 -16
  52. package/dist/components/index.js +2 -2
  53. package/dist/components/inputs/index.js +1 -1
  54. package/dist/components/inputs/text-input/TestTextInput.svelte__ +102 -102
  55. package/dist/components/inputs/text-input/TextInput.svelte +223 -223
  56. package/dist/components/inputs/text-input/TextInput.svelte___ +83 -83
  57. package/dist/components/inputs/text-input/assets/IconInvalid.svelte +14 -14
  58. package/dist/components/inputs/text-input/assets/IconValid.svelte +12 -12
  59. package/dist/components/layout/grid-layers/GridLayers.svelte +167 -167
  60. package/dist/components/layout/index.js +1 -1
  61. package/dist/components/panels/index.js +1 -1
  62. package/dist/components/panels/panel/Panel.svelte +43 -43
  63. package/dist/components/rows/index.js +3 -3
  64. package/dist/components/rows/panel-grid-row/PanelGridRow.svelte +104 -104
  65. package/dist/components/rows/panel-row-2/PanelRow2.svelte +40 -40
  66. package/dist/components/tab-bar/HkTabBar.state.svelte.js +149 -149
  67. package/dist/components/tab-bar/HkTabBar.svelte +74 -74
  68. package/dist/components/tab-bar/HkTabBarSelector.state.svelte.js +93 -93
  69. package/dist/components/tab-bar/HkTabBarSelector.svelte +49 -49
  70. package/dist/components/tab-bar/index.js +17 -17
  71. package/dist/components/tab-bar/typedef.js +8 -8
  72. package/dist/config/imagetools-config.js +189 -189
  73. package/dist/config/imagetools.d.ts +71 -71
  74. package/dist/config/typedef.js +8 -8
  75. package/dist/constants/bases.js +13 -13
  76. package/dist/constants/errors/api.js +9 -9
  77. package/dist/constants/errors/generic.js +5 -5
  78. package/dist/constants/errors/index.js +3 -3
  79. package/dist/constants/errors/jwt.js +5 -5
  80. package/dist/constants/http/headers.js +6 -6
  81. package/dist/constants/http/index.js +2 -2
  82. package/dist/constants/http/methods.js +2 -2
  83. package/dist/constants/index.js +3 -3
  84. package/dist/constants/mime/application.js +5 -5
  85. package/dist/constants/mime/audio.js +13 -13
  86. package/dist/constants/mime/image.js +3 -3
  87. package/dist/constants/mime/index.js +4 -4
  88. package/dist/constants/mime/text.js +2 -2
  89. package/dist/constants/regexp/index.js +31 -31
  90. package/dist/constants/regexp/inspiratie.js__ +95 -95
  91. package/dist/constants/regexp/text.js +49 -49
  92. package/dist/constants/regexp/user.js +32 -32
  93. package/dist/constants/regexp/web.js +3 -3
  94. package/dist/constants/state-labels/input-states.js +11 -11
  95. package/dist/constants/state-labels/submit-states.js +4 -4
  96. package/dist/constants/time.js +28 -28
  97. package/dist/css/utilities.css +43 -43
  98. package/dist/design/design-config.js +73 -73
  99. package/dist/design/tailwind-theme-extend.js +158 -158
  100. package/dist/schemas/index.js +1 -1
  101. package/dist/schemas/validate-url.js +180 -180
  102. package/dist/server/index.js +1 -1
  103. package/dist/server/logger.js +94 -94
  104. package/dist/states/index.js +1 -1
  105. package/dist/states/navigation.svelte.js +55 -55
  106. package/dist/stores/index.js +1 -1
  107. package/dist/stores/theme.js +80 -80
  108. package/dist/themes/hkdev/components/blocks/text-block.css +41 -41
  109. package/dist/themes/hkdev/components/boxes/game-box.css +12 -12
  110. package/dist/themes/hkdev/components/buttons/button-icon-steeze.css +22 -22
  111. package/dist/themes/hkdev/components/buttons/button-text.css +32 -32
  112. package/dist/themes/hkdev/components/buttons/button.css +142 -142
  113. package/dist/themes/hkdev/components/buttons/skip-button.css +6 -6
  114. package/dist/themes/hkdev/components/icons/icon-steeze.css +22 -22
  115. package/dist/themes/hkdev/components/inputs/text-input.css +104 -104
  116. package/dist/themes/hkdev/components/panels/panel.css +27 -27
  117. package/dist/themes/hkdev/components/rows/panel-grid-row.css +6 -6
  118. package/dist/themes/hkdev/components/rows/panel-row-2.css +7 -7
  119. package/dist/themes/hkdev/components.css +47 -47
  120. package/dist/themes/hkdev/debug.css +1 -1
  121. package/dist/themes/hkdev/global/layout.css +39 -39
  122. package/dist/themes/hkdev/global/on-colors.css +53 -53
  123. package/dist/themes/hkdev/globals.css +11 -11
  124. package/dist/themes/hkdev/responsive.css +12 -12
  125. package/dist/themes/hkdev/theme-ext.js +15 -15
  126. package/dist/themes/hkdev/theme.js +235 -235
  127. package/dist/themes/index.js +1 -1
  128. package/dist/util/array/index.js +455 -455
  129. package/dist/util/bases/base58.js +262 -262
  130. package/dist/util/bases/index.js +1 -1
  131. package/dist/util/compare/index.js +247 -247
  132. package/dist/util/css/css-vars.js +83 -83
  133. package/dist/util/css/index.js +1 -1
  134. package/dist/util/design-system/components/states.js +22 -22
  135. package/dist/util/design-system/css/clamp.js +66 -66
  136. package/dist/util/design-system/css/root-design-vars.js +100 -100
  137. package/dist/util/design-system/index.js +5 -5
  138. package/dist/util/design-system/layout/scaling.js +228 -228
  139. package/dist/util/design-system/skeleton.js +208 -208
  140. package/dist/util/design-system/tailwind.js +288 -288
  141. package/dist/util/expect/arrays.js +47 -47
  142. package/dist/util/expect/index.js +259 -259
  143. package/dist/util/expect/primitives.js +55 -55
  144. package/dist/util/expect/url.js +60 -60
  145. package/dist/util/function/index.js +218 -218
  146. package/dist/util/http/errors.js +97 -97
  147. package/dist/util/http/headers.js +45 -45
  148. package/dist/util/http/http-request.js +294 -294
  149. package/dist/util/http/index.js +22 -22
  150. package/dist/util/http/json-request.js +143 -143
  151. package/dist/util/http/mocks.js +65 -65
  152. package/dist/util/http/response.js +241 -241
  153. package/dist/util/http/test-data__/content-length-test-hkdigital-small.V4HfZyBQ.avif +0 -0
  154. package/dist/util/http/url.js +52 -52
  155. package/dist/util/image/index.js +86 -86
  156. package/dist/util/index.js +2 -2
  157. package/dist/util/is/index.js +140 -140
  158. package/dist/util/iterate/index.js +234 -234
  159. package/dist/util/object/index.js +1361 -1361
  160. package/dist/util/singleton/index.js +97 -97
  161. package/dist/util/string/array-path.js +75 -75
  162. package/dist/util/string/convert.js +54 -54
  163. package/dist/util/string/fs.js +226 -226
  164. package/dist/util/string/index.js +5 -5
  165. package/dist/util/string/interpolate.js +61 -61
  166. package/dist/util/string/pad.js +10 -10
  167. package/dist/util/svelte/index.js +4 -4
  168. package/dist/util/svelte/loading/loading-tracker.svelte.js +108 -108
  169. package/dist/util/svelte/observe/index.js +49 -49
  170. package/dist/util/svelte/state-context/index.js +83 -83
  171. package/dist/util/svelte/wait/index.js +38 -38
  172. package/dist/util/sveltekit/index.js +1 -1
  173. package/dist/util/sveltekit/route-folders/index.js +101 -101
  174. package/dist/util/time/index.js +323 -323
  175. package/dist/util/unique/index.js +249 -249
  176. package/dist/valibot/date.js__ +10 -10
  177. package/dist/valibot/index.js +9 -9
  178. package/dist/valibot/url.js +95 -95
  179. package/dist/valibot/user.js +23 -23
  180. package/dist/widgets/button-group/ButtonGroup.svelte +82 -94
  181. package/dist/widgets/button-group/ButtonGroup.svelte.d.ts +0 -2
  182. package/dist/widgets/button-group/typedef.js +10 -10
  183. package/dist/widgets/compare-left-right/CompareLeftRight.svelte +179 -179
  184. package/dist/widgets/compare-left-right/index.js +1 -1
  185. package/dist/widgets/game-box/GameBox.svelte +579 -186
  186. package/dist/widgets/game-box/GameBox.svelte.d.ts +64 -4
  187. package/dist/widgets/game-box/gamebox.util.js +83 -83
  188. package/dist/widgets/hk-app-layout/HkAppLayout.state.svelte.js +25 -25
  189. package/dist/widgets/hk-app-layout/HkAppLayout.svelte +251 -251
  190. package/dist/widgets/image-box/ImageBox.svelte +212 -212
  191. package/dist/widgets/image-box/index.js +5 -5
  192. package/dist/widgets/image-box/typedef.js +32 -32
  193. package/dist/widgets/index.js +23 -23
  194. package/dist/widgets/presenter/(broken) Presenter.state.svelte.js__ +613 -0
  195. package/dist/widgets/presenter/ImageSlide.svelte +64 -64
  196. package/dist/widgets/presenter/Presenter.state.svelte.js +636 -636
  197. package/dist/widgets/presenter/Presenter.svelte +140 -140
  198. package/dist/widgets/presenter/Presenter.svelte__ +125 -0
  199. package/dist/widgets/presenter/constants.js +7 -7
  200. package/dist/widgets/presenter/index.js +10 -10
  201. package/dist/widgets/presenter/typedef.js +106 -106
  202. package/dist/widgets/presenter/util.js +210 -210
  203. package/dist/widgets/virtual-viewport/VirtualViewport.svelte +196 -196
  204. package/dist/zod/all.js +33 -33
  205. package/dist/zod/generic.js +11 -11
  206. package/dist/zod/javascript.js +32 -32
  207. package/dist/zod/user.js +16 -16
  208. package/dist/zod/web.js +52 -52
  209. package/package.json +102 -102
@@ -1,30 +1,30 @@
1
- import { CONTENT_TYPE, CONTENT_LENGTH } from '../../../constants/http/index.js';
2
-
3
- import { OCTET_STREAM } from '../../../constants/mime/application.js';
4
-
5
- const BASE64_DATA =
6
- 'UklGRnwAAABXQVZFZm10IBAAAAABAAEARKwAAIhYAQACABAAZGF0YVgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA';
7
-
8
- /**
9
- * Create a response value that can be used by a mocked
10
- * fetch function
11
- *
12
- * @returns {Response}
13
- */
14
- export function createDataResponse(/* data , options */) {
15
- const binaryString = atob(BASE64_DATA);
16
- const bytes = new Uint8Array(binaryString.length);
17
-
18
- for (let i = 0; i < binaryString.length; i++) {
19
- bytes[i] = binaryString.charCodeAt(i);
20
- }
21
-
22
- const response = new Response(bytes, {
23
- headers: new Headers({
24
- [CONTENT_TYPE]: OCTET_STREAM,
25
- [CONTENT_LENGTH]: String(bytes.length)
26
- })
27
- });
28
-
29
- return response;
30
- }
1
+ import { CONTENT_TYPE, CONTENT_LENGTH } from '../../../constants/http/index.js';
2
+
3
+ import { OCTET_STREAM } from '../../../constants/mime/application.js';
4
+
5
+ const BASE64_DATA =
6
+ 'UklGRnwAAABXQVZFZm10IBAAAAABAAEARKwAAIhYAQACABAAZGF0YVgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA';
7
+
8
+ /**
9
+ * Create a response value that can be used by a mocked
10
+ * fetch function
11
+ *
12
+ * @returns {Response}
13
+ */
14
+ export function createDataResponse(/* data , options */) {
15
+ const binaryString = atob(BASE64_DATA);
16
+ const bytes = new Uint8Array(binaryString.length);
17
+
18
+ for (let i = 0; i < binaryString.length; i++) {
19
+ bytes[i] = binaryString.charCodeAt(i);
20
+ }
21
+
22
+ const response = new Response(bytes, {
23
+ headers: new Headers({
24
+ [CONTENT_TYPE]: OCTET_STREAM,
25
+ [CONTENT_LENGTH]: String(bytes.length)
26
+ })
27
+ });
28
+
29
+ return response;
30
+ }
@@ -1,8 +1,8 @@
1
- /**
2
- * @typedef {Object} LoadingProgress
3
- * @property {number} bytesLoaded
4
- * @property {number} size
5
- * @property {boolean} loaded
6
- */
7
-
8
- export default {};
1
+ /**
2
+ * @typedef {Object} LoadingProgress
3
+ * @property {number} bytesLoaded
4
+ * @property {number} size
5
+ * @property {boolean} loaded
6
+ */
7
+
8
+ export default {};
@@ -1,49 +1,49 @@
1
- <script>
2
- /**
3
- * Area component
4
- * An area is actually a DIV that can be styled and can contain content
5
- *
6
- * Following component guidelines from Skeleton
7
- * @see https://next.skeleton.dev/docs/resources/contribute/components
8
- */
9
-
10
- /**
11
- * @type {{
12
- * base?: string,
13
- * bg?: string,
14
- * padding?: string,
15
- * margin?: string,
16
- * classes?: string,
17
- * style?: string,
18
- * children: import('svelte').Snippet
19
- * } & { [attr: string]: any }}
20
- */
21
- let {
22
- // Style
23
- base,
24
- bg,
25
- padding,
26
- margin,
27
- classes,
28
- style,
29
-
30
- // Snippets
31
- children,
32
-
33
- // DOM Element
34
- domElem = $bindable(),
35
-
36
- // Attributes
37
- ...attrs
38
- } = $props();
39
- </script>
40
-
41
- <div
42
- data-hk-area
43
- class="{base} {bg} {padding} {margin} {classes}"
44
- bind:this={domElem}
45
- {style}
46
- {...attrs}
47
- >
48
- {@render children()}
49
- </div>
1
+ <script>
2
+ /**
3
+ * Area component
4
+ * An area is actually a DIV that can be styled and can contain content
5
+ *
6
+ * Following component guidelines from Skeleton
7
+ * @see https://next.skeleton.dev/docs/resources/contribute/components
8
+ */
9
+
10
+ /**
11
+ * @type {{
12
+ * base?: string,
13
+ * bg?: string,
14
+ * padding?: string,
15
+ * margin?: string,
16
+ * classes?: string,
17
+ * style?: string,
18
+ * children: import('svelte').Snippet
19
+ * } & { [attr: string]: any }}
20
+ */
21
+ let {
22
+ // Style
23
+ base,
24
+ bg,
25
+ padding,
26
+ margin,
27
+ classes,
28
+ style,
29
+
30
+ // Snippets
31
+ children,
32
+
33
+ // DOM Element
34
+ domElem = $bindable(),
35
+
36
+ // Attributes
37
+ ...attrs
38
+ } = $props();
39
+ </script>
40
+
41
+ <div
42
+ data-hk-area
43
+ class="{base} {bg} {padding} {margin} {classes}"
44
+ bind:this={domElem}
45
+ {style}
46
+ {...attrs}
47
+ >
48
+ {@render children()}
49
+ </div>
@@ -1,77 +1,77 @@
1
- <script>
2
- /**
3
- * Grid area component
4
- * This component contains a DIV that has display: grid set. It is
5
- * wrapped in a box which makes it possible to add box attributes
6
- * such as margins.
7
- *
8
- * Following component guidelines from Skeleton
9
- * @see https://next.skeleton.dev/docs/resources/contribute/components
10
- */
11
-
12
- import HkArea from './HkArea.svelte';
13
-
14
- /**
15
- * @type {{
16
- * base?: string,
17
- * bg?: string,
18
- * padding?: string,
19
- * margin?: string,
20
- * classes?: string,
21
- * style?: string,
22
- * boxBase?: string,
23
- * boxBg?: string,
24
- * boxPadding?: string,
25
- * boxMargin?: string,
26
- * boxClasses?: string,
27
- * boxAttrs?: { [attr: string]: * },
28
- * children: import('svelte').Snippet
29
- * } & { [attr: string]: any }}
30
- */
31
- let {
32
- // Style
33
- base,
34
- bg,
35
- padding,
36
- margin,
37
- classes,
38
- style,
39
- boxBase,
40
- boxBg,
41
- boxPadding,
42
- boxMargin,
43
- boxClasses,
44
- boxAttrs,
45
-
46
- // Snippets
47
- children,
48
-
49
- // DOM Element's
50
- domElem = $bindable(),
51
- boxDomElem = $bindable(),
52
-
53
- // Attributes
54
- ...attrs
55
- } = $props();
56
- </script>
57
-
58
- <div
59
- data-hk-grid-area-box
60
- class="{boxBase} {boxBg} {boxPadding} {boxMargin} {boxClasses}"
61
- {...boxAttrs}
62
- bind:this={boxDomElem}
63
- >
64
- <HkArea
65
- data-hk-grid-area
66
- base="grid {base}"
67
- bind:domElem
68
- {bg}
69
- {padding}
70
- {margin}
71
- {classes}
72
- {style}
73
- {...attrs}
74
- >
75
- {@render children()}
76
- </HkArea>
77
- </div>
1
+ <script>
2
+ /**
3
+ * Grid area component
4
+ * This component contains a DIV that has display: grid set. It is
5
+ * wrapped in a box which makes it possible to add box attributes
6
+ * such as margins.
7
+ *
8
+ * Following component guidelines from Skeleton
9
+ * @see https://next.skeleton.dev/docs/resources/contribute/components
10
+ */
11
+
12
+ import HkArea from './HkArea.svelte';
13
+
14
+ /**
15
+ * @type {{
16
+ * base?: string,
17
+ * bg?: string,
18
+ * padding?: string,
19
+ * margin?: string,
20
+ * classes?: string,
21
+ * style?: string,
22
+ * boxBase?: string,
23
+ * boxBg?: string,
24
+ * boxPadding?: string,
25
+ * boxMargin?: string,
26
+ * boxClasses?: string,
27
+ * boxAttrs?: { [attr: string]: * },
28
+ * children: import('svelte').Snippet
29
+ * } & { [attr: string]: any }}
30
+ */
31
+ let {
32
+ // Style
33
+ base,
34
+ bg,
35
+ padding,
36
+ margin,
37
+ classes,
38
+ style,
39
+ boxBase,
40
+ boxBg,
41
+ boxPadding,
42
+ boxMargin,
43
+ boxClasses,
44
+ boxAttrs,
45
+
46
+ // Snippets
47
+ children,
48
+
49
+ // DOM Element's
50
+ domElem = $bindable(),
51
+ boxDomElem = $bindable(),
52
+
53
+ // Attributes
54
+ ...attrs
55
+ } = $props();
56
+ </script>
57
+
58
+ <div
59
+ data-hk-grid-area-box
60
+ class="{boxBase} {boxBg} {boxPadding} {boxMargin} {boxClasses}"
61
+ {...boxAttrs}
62
+ bind:this={boxDomElem}
63
+ >
64
+ <HkArea
65
+ data-hk-grid-area
66
+ base="grid {base}"
67
+ bind:domElem
68
+ {bg}
69
+ {padding}
70
+ {margin}
71
+ {classes}
72
+ {style}
73
+ {...attrs}
74
+ >
75
+ {@render children()}
76
+ </HkArea>
77
+ </div>
@@ -1,2 +1,2 @@
1
- export { default as HkArea } from './HkArea.svelte';
2
- export { default as HkGridArea } from './HkGridArea.svelte';
1
+ export { default as HkArea } from './HkArea.svelte';
2
+ export { default as HkGridArea } from './HkGridArea.svelte';
@@ -1,82 +1,82 @@
1
- <script>
2
- import { toStateClasses } from '../../../util/design-system/index.js';
3
-
4
- /**
5
- * @type {{
6
- * base?: string,
7
- * bg?: string,
8
- * classes?: string,
9
- * type?: string,
10
- * role?: 'primary' | 'secondary' | 'tertiary' | 'custom',
11
- * size?: 'sm' | 'md' | 'lg',
12
- * variant?: string,
13
- * mode?: 'light'|'dark'
14
- * buttonType?: 'button' | 'submit' | 'reset',
15
- * active?: boolean,
16
- * selected?: boolean,
17
- * loading?: boolean,
18
- * error?: boolean,
19
- * disabled?: boolean,
20
- * snippetLoading?: import('svelte').Snippet,
21
- * snippetError?: import('svelte').Snippet,
22
- * children: import('svelte').Snippet,
23
- * [key: string]: any
24
- * }}
25
- */
26
- const {
27
- // Style
28
- base,
29
- bg,
30
- classes,
31
-
32
- type = '',
33
- role = 'primary',
34
- size = 'md',
35
- variant = '',
36
- mode = 'light',
37
-
38
- buttonType = 'button',
39
-
40
- // States
41
- active = $bindable(false),
42
- selected = $bindable(false),
43
- loading = $bindable(false),
44
- error = $bindable(false),
45
- disabled = $bindable(false),
46
-
47
- // Snippets
48
- snippetLoading,
49
- snippetError,
50
- children,
51
-
52
- // Attributes
53
- ...attrs
54
- } = $props();
55
-
56
- let stateClasses = $derived.by(() => {
57
- return toStateClasses({ active, selected, loading, error, disabled });
58
- });
59
- </script>
60
-
61
- <button
62
- data-component="button"
63
- data-type={type}
64
- data-role={role}
65
- data-size={size}
66
- data-variant={variant}
67
- data-mode={mode}
68
- type={buttonType}
69
- class="{base} {bg} {classes} {stateClasses}"
70
- disabled={disabled || loading}
71
- aria-busy={loading}
72
- aria-pressed={selected}
73
- {...attrs}
74
- >
75
- {#if loading && snippetLoading}
76
- {@render snippetLoading()}
77
- {:else if error && snippetError}
78
- {@render snippetError()}
79
- {:else}
80
- {@render children()}
81
- {/if}
82
- </button>
1
+ <script>
2
+ import { toStateClasses } from '../../../util/design-system/index.js';
3
+
4
+ /**
5
+ * @type {{
6
+ * base?: string,
7
+ * bg?: string,
8
+ * classes?: string,
9
+ * type?: string,
10
+ * role?: 'primary' | 'secondary' | 'tertiary' | 'custom',
11
+ * size?: 'sm' | 'md' | 'lg',
12
+ * variant?: string,
13
+ * mode?: 'light'|'dark'
14
+ * buttonType?: 'button' | 'submit' | 'reset',
15
+ * active?: boolean,
16
+ * selected?: boolean,
17
+ * loading?: boolean,
18
+ * error?: boolean,
19
+ * disabled?: boolean,
20
+ * snippetLoading?: import('svelte').Snippet,
21
+ * snippetError?: import('svelte').Snippet,
22
+ * children: import('svelte').Snippet,
23
+ * [key: string]: any
24
+ * }}
25
+ */
26
+ const {
27
+ // Style
28
+ base,
29
+ bg,
30
+ classes,
31
+
32
+ type = '',
33
+ role = 'primary',
34
+ size = 'md',
35
+ variant = '',
36
+ mode = 'light',
37
+
38
+ buttonType = 'button',
39
+
40
+ // States
41
+ active = $bindable(false),
42
+ selected = $bindable(false),
43
+ loading = $bindable(false),
44
+ error = $bindable(false),
45
+ disabled = $bindable(false),
46
+
47
+ // Snippets
48
+ snippetLoading,
49
+ snippetError,
50
+ children,
51
+
52
+ // Attributes
53
+ ...attrs
54
+ } = $props();
55
+
56
+ let stateClasses = $derived.by(() => {
57
+ return toStateClasses({ active, selected, loading, error, disabled });
58
+ });
59
+ </script>
60
+
61
+ <button
62
+ data-component="button"
63
+ data-type={type}
64
+ data-role={role}
65
+ data-size={size}
66
+ data-variant={variant}
67
+ data-mode={mode}
68
+ type={buttonType}
69
+ class="{base} {bg} {classes} {stateClasses}"
70
+ disabled={disabled || loading}
71
+ aria-busy={loading}
72
+ aria-pressed={selected}
73
+ {...attrs}
74
+ >
75
+ {#if loading && snippetLoading}
76
+ {@render snippetLoading()}
77
+ {:else if error && snippetError}
78
+ {@render snippetError()}
79
+ {:else}
80
+ {@render children()}
81
+ {/if}
82
+ </button>
@@ -1,30 +1,30 @@
1
- <script>
2
- import Button from '../button/Button.svelte';
3
-
4
- import { SteezeIcon } from '../../icons/index.js';
5
-
6
- /**
7
- * @type {{
8
- * src: import('../../icons/typedef.js').IconSource,
9
- * iconSize?: string,
10
- * theme?: string,
11
- * [key: string]: any
12
- * }}
13
- */
14
- const {
15
- // Icon
16
- src,
17
- iconSize,
18
- theme,
19
-
20
- // Snippets
21
- children,
22
-
23
- // Attributes
24
- ...attrs
25
- } = $props();
26
- </script>
27
-
28
- <Button type="icon-steeze" {...attrs}>
29
- <SteezeIcon {src} size={iconSize} {theme} />
30
- </Button>
1
+ <script>
2
+ import Button from '../button/Button.svelte';
3
+
4
+ import { SteezeIcon } from '../../icons/index.js';
5
+
6
+ /**
7
+ * @type {{
8
+ * src: import('../../icons/typedef.js').IconSource,
9
+ * iconSize?: string,
10
+ * theme?: string,
11
+ * [key: string]: any
12
+ * }}
13
+ */
14
+ const {
15
+ // Icon
16
+ src,
17
+ iconSize,
18
+ theme,
19
+
20
+ // Snippets
21
+ children,
22
+
23
+ // Attributes
24
+ ...attrs
25
+ } = $props();
26
+ </script>
27
+
28
+ <Button type="icon-steeze" {...attrs}>
29
+ <SteezeIcon {src} size={iconSize} {theme} />
30
+ </Button>
@@ -1,21 +1,21 @@
1
- <script>
2
- import Button from '../button/Button.svelte';
3
-
4
- /**
5
- * @type {{
6
- * children: import('svelte').Snippet,
7
- * [key: string]: any
8
- * }}
9
- */
10
- const {
11
- // Snippets
12
- children,
13
-
14
- // Attributes
15
- ...attrs
16
- } = $props();
17
- </script>
18
-
19
- <Button type="text" {...attrs}>
20
- {@render children()}
21
- </Button>
1
+ <script>
2
+ import Button from '../button/Button.svelte';
3
+
4
+ /**
5
+ * @type {{
6
+ * children: import('svelte').Snippet,
7
+ * [key: string]: any
8
+ * }}
9
+ */
10
+ const {
11
+ // Snippets
12
+ children,
13
+
14
+ // Attributes
15
+ ...attrs
16
+ } = $props();
17
+ </script>
18
+
19
+ <Button type="text" {...attrs}>
20
+ {@render children()}
21
+ </Button>
@@ -1,3 +1,3 @@
1
- export { default as Button } from './button/Button.svelte';
2
- export { default as TextButton } from './button-text/TextButton.svelte';
3
- export { default as SteezeIconButton } from './button-icon-steeze/SteezeIconButton.svelte';
1
+ export { default as Button } from './button/Button.svelte';
2
+ export { default as TextButton } from './button-text/TextButton.svelte';
3
+ export { default as SteezeIconButton } from './button-icon-steeze/SteezeIconButton.svelte';