@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,83 +1,83 @@
1
- <script>
2
- /**
3
- * @type {{
4
- * classes?: string,
5
- * fieldClasses?: string,
6
- * legendClasses?: string,
7
- * legendTitle?: string,
8
- * error?: boolean,
9
- * type?: string,
10
- * placeholder: string,
11
- * required: boolean,
12
- * snippetWarning?: import('svelte').Snippet,
13
- * } & { [attr: string]: any }}
14
- */
15
- let {
16
- // Style
17
- classes,
18
- fieldClasses,
19
- legendClasses,
20
-
21
- // Functionality
22
- name,
23
- disabled,
24
- required,
25
-
26
- // initialValue
27
- // value
28
- // readonly
29
- // pattern
30
- // minlength
31
- // maxlength
32
-
33
- // Text placeholders
34
- legendTitle,
35
- placeholder,
36
-
37
- type,
38
- snippetWarning,
39
-
40
- // Attributes
41
- ...attrs
42
- } = $props();
43
- </script>
44
-
45
- {#snippet defaultWarning()}
46
- <svg
47
- width="17"
48
- height="16"
49
- viewBox="0 0 17 16"
50
- fill="none"
51
- xmlns="http://www.w3.org/2000/svg"
52
- >
53
- <path
54
- fill-rule="evenodd"
55
- clip-rule="evenodd"
56
- d="M6.36747 1.28014C7.3152 -0.426712 9.68492 -0.426712 10.6318 1.28014L16.6669 12.1596C17.6138 13.8664 16.429 16 14.5343 16H2.46497C0.570331 16 -0.613713 13.8664 0.333194 12.1596L6.36665 1.28014H6.36747ZM8.50006 5.75805C8.66328 5.75805 8.81981 5.82549 8.93522 5.94553C9.05063 6.06556 9.11547 6.22837 9.11547 6.39812V9.59846C9.11547 9.76822 9.05063 9.93102 8.93522 10.0511C8.81981 10.1711 8.66328 10.2385 8.50006 10.2385C8.33684 10.2385 8.18031 10.1711 8.0649 10.0511C7.94949 9.93102 7.88465 9.76822 7.88465 9.59846V6.39812C7.88465 6.22837 7.94949 6.06556 8.0649 5.94553C8.18031 5.82549 8.33684 5.75805 8.50006 5.75805ZM8.50006 12.7988C8.66328 12.7988 8.81981 12.7314 8.93522 12.6113C9.05063 12.4913 9.11547 12.3285 9.11547 12.1587C9.11547 11.989 9.05063 11.8262 8.93522 11.7061C8.81981 11.5861 8.66328 11.5187 8.50006 11.5187C8.33684 11.5187 8.18031 11.5861 8.0649 11.7061C7.94949 11.8262 7.88465 11.989 7.88465 12.1587C7.88465 12.3285 7.94949 12.4913 8.0649 12.6113C8.18031 12.7314 8.33684 12.7988 8.50006 12.7988Z"
57
- fill="#F8705E"
58
- />
59
- </svg>
60
- {/snippet}
61
-
62
- <fieldset
63
- data-input="text-input"
64
- class="flex w-full items-center rounded {fieldClasses}"
65
- >
66
- <legend class="px-2 {legendClasses}" class:error>{legendTitle}</legend>
67
- <input
68
- class="w-full border-none bg-transparent {classes}"
69
- {type}
70
- {placeholder}
71
- {name}
72
- {required}
73
- {...attrs}
74
- />
75
- {#if error}
76
- {#if snippetWarning}
77
- {@render snippetWarning()}
78
- {:else}
79
- {@render defaultWarning()}
80
- {/if}
81
- <!-- <img src={warningSymbol} class="mb-2 mr-8" alt="Warning" /> -->
82
- {/if}
83
- </fieldset>
1
+ <script>
2
+ /**
3
+ * @type {{
4
+ * classes?: string,
5
+ * fieldClasses?: string,
6
+ * legendClasses?: string,
7
+ * legendTitle?: string,
8
+ * error?: boolean,
9
+ * type?: string,
10
+ * placeholder: string,
11
+ * required: boolean,
12
+ * snippetWarning?: import('svelte').Snippet,
13
+ * } & { [attr: string]: any }}
14
+ */
15
+ let {
16
+ // Style
17
+ classes,
18
+ fieldClasses,
19
+ legendClasses,
20
+
21
+ // Functionality
22
+ name,
23
+ disabled,
24
+ required,
25
+
26
+ // initialValue
27
+ // value
28
+ // readonly
29
+ // pattern
30
+ // minlength
31
+ // maxlength
32
+
33
+ // Text placeholders
34
+ legendTitle,
35
+ placeholder,
36
+
37
+ type,
38
+ snippetWarning,
39
+
40
+ // Attributes
41
+ ...attrs
42
+ } = $props();
43
+ </script>
44
+
45
+ {#snippet defaultWarning()}
46
+ <svg
47
+ width="17"
48
+ height="16"
49
+ viewBox="0 0 17 16"
50
+ fill="none"
51
+ xmlns="http://www.w3.org/2000/svg"
52
+ >
53
+ <path
54
+ fill-rule="evenodd"
55
+ clip-rule="evenodd"
56
+ d="M6.36747 1.28014C7.3152 -0.426712 9.68492 -0.426712 10.6318 1.28014L16.6669 12.1596C17.6138 13.8664 16.429 16 14.5343 16H2.46497C0.570331 16 -0.613713 13.8664 0.333194 12.1596L6.36665 1.28014H6.36747ZM8.50006 5.75805C8.66328 5.75805 8.81981 5.82549 8.93522 5.94553C9.05063 6.06556 9.11547 6.22837 9.11547 6.39812V9.59846C9.11547 9.76822 9.05063 9.93102 8.93522 10.0511C8.81981 10.1711 8.66328 10.2385 8.50006 10.2385C8.33684 10.2385 8.18031 10.1711 8.0649 10.0511C7.94949 9.93102 7.88465 9.76822 7.88465 9.59846V6.39812C7.88465 6.22837 7.94949 6.06556 8.0649 5.94553C8.18031 5.82549 8.33684 5.75805 8.50006 5.75805ZM8.50006 12.7988C8.66328 12.7988 8.81981 12.7314 8.93522 12.6113C9.05063 12.4913 9.11547 12.3285 9.11547 12.1587C9.11547 11.989 9.05063 11.8262 8.93522 11.7061C8.81981 11.5861 8.66328 11.5187 8.50006 11.5187C8.33684 11.5187 8.18031 11.5861 8.0649 11.7061C7.94949 11.8262 7.88465 11.989 7.88465 12.1587C7.88465 12.3285 7.94949 12.4913 8.0649 12.6113C8.18031 12.7314 8.33684 12.7988 8.50006 12.7988Z"
57
+ fill="#F8705E"
58
+ />
59
+ </svg>
60
+ {/snippet}
61
+
62
+ <fieldset
63
+ data-input="text-input"
64
+ class="flex w-full items-center rounded {fieldClasses}"
65
+ >
66
+ <legend class="px-2 {legendClasses}" class:error>{legendTitle}</legend>
67
+ <input
68
+ class="w-full border-none bg-transparent {classes}"
69
+ {type}
70
+ {placeholder}
71
+ {name}
72
+ {required}
73
+ {...attrs}
74
+ />
75
+ {#if error}
76
+ {#if snippetWarning}
77
+ {@render snippetWarning()}
78
+ {:else}
79
+ {@render defaultWarning()}
80
+ {/if}
81
+ <!-- <img src={warningSymbol} class="mb-2 mr-8" alt="Warning" /> -->
82
+ {/if}
83
+ </fieldset>
@@ -1,14 +1,14 @@
1
- <svg
2
- width="17"
3
- height="16"
4
- viewBox="0 0 17 16"
5
- fill="none"
6
- xmlns="http://www.w3.org/2000/svg"
7
- >
8
- <path
9
- fill-rule="evenodd"
10
- clip-rule="evenodd"
11
- d="M6.36747 1.28014C7.3152 -0.426712 9.68492 -0.426712 10.6318 1.28014L16.6669 12.1596C17.6138 13.8664 16.429 16 14.5343 16H2.46497C0.570331 16 -0.613713 13.8664 0.333194 12.1596L6.36665 1.28014H6.36747ZM8.50006 5.75805C8.66328 5.75805 8.81981 5.82549 8.93522 5.94553C9.05063 6.06556 9.11547 6.22837 9.11547 6.39812V9.59846C9.11547 9.76822 9.05063 9.93102 8.93522 10.0511C8.81981 10.1711 8.66328 10.2385 8.50006 10.2385C8.33684 10.2385 8.18031 10.1711 8.0649 10.0511C7.94949 9.93102 7.88465 9.76822 7.88465 9.59846V6.39812C7.88465 6.22837 7.94949 6.06556 8.0649 5.94553C8.18031 5.82549 8.33684 5.75805 8.50006 5.75805ZM8.50006 12.7988C8.66328 12.7988 8.81981 12.7314 8.93522 12.6113C9.05063 12.4913 9.11547 12.3285 9.11547 12.1587C9.11547 11.989 9.05063 11.8262 8.93522 11.7061C8.81981 11.5861 8.66328 11.5187 8.50006 11.5187C8.33684 11.5187 8.18031 11.5861 8.0649 11.7061C7.94949 11.8262 7.88465 11.989 7.88465 12.1587C7.88465 12.3285 7.94949 12.4913 8.0649 12.6113C8.18031 12.7314 8.33684 12.7988 8.50006 12.7988Z"
12
- fill="currentColor"
13
- />
14
- </svg>
1
+ <svg
2
+ width="17"
3
+ height="16"
4
+ viewBox="0 0 17 16"
5
+ fill="none"
6
+ xmlns="http://www.w3.org/2000/svg"
7
+ >
8
+ <path
9
+ fill-rule="evenodd"
10
+ clip-rule="evenodd"
11
+ d="M6.36747 1.28014C7.3152 -0.426712 9.68492 -0.426712 10.6318 1.28014L16.6669 12.1596C17.6138 13.8664 16.429 16 14.5343 16H2.46497C0.570331 16 -0.613713 13.8664 0.333194 12.1596L6.36665 1.28014H6.36747ZM8.50006 5.75805C8.66328 5.75805 8.81981 5.82549 8.93522 5.94553C9.05063 6.06556 9.11547 6.22837 9.11547 6.39812V9.59846C9.11547 9.76822 9.05063 9.93102 8.93522 10.0511C8.81981 10.1711 8.66328 10.2385 8.50006 10.2385C8.33684 10.2385 8.18031 10.1711 8.0649 10.0511C7.94949 9.93102 7.88465 9.76822 7.88465 9.59846V6.39812C7.88465 6.22837 7.94949 6.06556 8.0649 5.94553C8.18031 5.82549 8.33684 5.75805 8.50006 5.75805ZM8.50006 12.7988C8.66328 12.7988 8.81981 12.7314 8.93522 12.6113C9.05063 12.4913 9.11547 12.3285 9.11547 12.1587C9.11547 11.989 9.05063 11.8262 8.93522 11.7061C8.81981 11.5861 8.66328 11.5187 8.50006 11.5187C8.33684 11.5187 8.18031 11.5861 8.0649 11.7061C7.94949 11.8262 7.88465 11.989 7.88465 12.1587C7.88465 12.3285 7.94949 12.4913 8.0649 12.6113C8.18031 12.7314 8.33684 12.7988 8.50006 12.7988Z"
12
+ fill="currentColor"
13
+ />
14
+ </svg>
@@ -1,12 +1,12 @@
1
- <svg
2
- xmlns="http://www.w3.org/2000/svg"
3
- viewBox="0 0 24 24"
4
- fill="currentColor"
5
- class="size-6"
6
- >
7
- <path
8
- fill-rule="evenodd"
9
- d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
10
- clip-rule="evenodd"
11
- />
12
- </svg>
1
+ <svg
2
+ xmlns="http://www.w3.org/2000/svg"
3
+ viewBox="0 0 24 24"
4
+ fill="currentColor"
5
+ class="size-6"
6
+ >
7
+ <path
8
+ fill-rule="evenodd"
9
+ d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
10
+ clip-rule="evenodd"
11
+ />
12
+ </svg>
@@ -1,167 +1,167 @@
1
- <script>
2
- /**
3
- * Grid Layers Component
4
- *
5
- * A component that creates a single-cell grid where all children exist
6
- * in the same grid cell, allowing them to be positioned independently
7
- * and stacked on top of each other. Perfect for complex layouts like
8
- * overlaying text on images, card stacks, positioning UI elements, etc.
9
- *
10
- * Each child can use grid positioning properties (justify-self-*, self-*)
11
- * for precise placement. Children can control stacking order with z-index.
12
- *
13
- * @example Basic usage with 9-position grid
14
- * ```html
15
- * <GridLayers classes="border w-[500px] h-[500px]">
16
- * <!-- Top Row -->
17
- * <div class="justify-self-start self-start">
18
- * <div class="bg-blue-500 w-[100px] h-[100px]">
19
- * Top Left
20
- * </div>
21
- * </div>
22
- * <div class="justify-self-center self-start">
23
- * <div class="bg-blue-300 w-[100px] h-[100px]">
24
- * Top Center
25
- * </div>
26
- * </div>
27
- * <div class="justify-self-end self-start">
28
- * <div class="bg-blue-500 w-[100px] h-[100px]">
29
- * Top Right
30
- * </div>
31
- * </div>
32
- *
33
- * <!-- Middle Row -->
34
- * <div class="justify-self-start self-center">
35
- * <div class="bg-green-500 w-[100px] h-[100px]">
36
- * Middle Left
37
- * </div>
38
- * </div>
39
- * <div class="justify-self-center self-center">
40
- * <div class="bg-green-300 w-[100px] h-[100px]">
41
- * Middle Center
42
- * </div>
43
- * </div>
44
- * <div class="justify-self-end self-center">
45
- * <div class="bg-green-500 w-[100px] h-[100px]">
46
- * Middle Right
47
- * </div>
48
- * </div>
49
- *
50
- * <!-- Bottom Row -->
51
- * <div class="justify-self-start self-end">
52
- * <div class="bg-red-500 w-[100px] h-[100px]">
53
- * Bottom Left
54
- * </div>
55
- * </div>
56
- * <div class="justify-self-center self-end">
57
- * <div class="bg-red-300 w-[100px] h-[100px]">
58
- * Bottom Center
59
- * </div>
60
- * </div>
61
- * <div class="justify-self-end self-end">
62
- * <div class="bg-red-500 w-[100px] h-[100px]">
63
- * Bottom Right
64
- * </div>
65
- * </div>
66
- * </GridLayers>
67
- * ```
68
- *
69
- * @example Text over image
70
- * ```html
71
- * <GridLayers classes="w-full h-[300px]">
72
- * <!-- Background image layer -->
73
- * <div class="justify-self-stretch self-stretch z-0">
74
- * <img
75
- * src="/images/landscape.jpg"
76
- * alt="Landscape"
77
- * class="w-full h-full object-cover"
78
- * />
79
- * </div>
80
- *
81
- * <!-- Text overlay layer -->
82
- * <div class="justify-self-center self-center z-10">
83
- * <div class="bg-black/50 p-16up text-white
84
- * font-ui rounded-md">
85
- * <h2 class="text-2xl">Explore Nature</h2>
86
- * <p>Discover the beauty of the outdoors</p>
87
- * </div>
88
- * </div>
89
- * </GridLayers>
90
- * ```
91
- */
92
-
93
- /**
94
- * @type {{
95
- * base?: string,
96
- * bg?: string,
97
- * padding?: string,
98
- * margin?: string,
99
- * height?: string,
100
- * classes?: string,
101
- * style?: string,
102
- * cellBase?: string,
103
- * cellBg?: string,
104
- * cellPadding?: string,
105
- * cellMargin?: string,
106
- * cellClasses?: string,
107
- * cellStyle?: string,
108
- * children: import('svelte').Snippet,
109
- * cellAttrs?: { [attr: string]: * },
110
- * [attr: string]: any
111
- * }}
112
- */
113
- const {
114
- // Style
115
- base,
116
- bg,
117
- padding,
118
- margin,
119
- height,
120
- classes,
121
- style,
122
- cellBase,
123
- cellBg,
124
- cellPadding,
125
- cellMargin,
126
- cellClasses,
127
- cellStyle,
128
-
129
- cellAttrs,
130
-
131
- // Snippets
132
- children,
133
-
134
- // Attributes
135
- ...attrs
136
- } = $props();
137
- </script>
138
-
139
- <div
140
- data-component="grid-layers"
141
- class="relative {base} {bg} {height} {classes} {margin} {padding}"
142
- {style}
143
- {...attrs}
144
- >
145
- <div
146
- data-section="grid"
147
- class="absolute inset-0 grid {cellBase} {cellBg} {cellPadding} {cellMargin} {cellClasses}"
148
- style={cellStyle}
149
- >
150
- {@render children()}
151
- </div>
152
- </div>
153
-
154
- <style>
155
- /* All children of the layer share the same grid area
156
- but aren't absolutely positioned */
157
- [data-section='grid'] {
158
- grid-template-columns: 1fr;
159
- grid-template-rows: 1fr;
160
- }
161
-
162
- [data-section='grid'] > :global(*) {
163
- grid-column: 1;
164
- grid-row: 1;
165
- z-index: 0; /* Base z-index to allow explicit stacking order */
166
- }
167
- </style>
1
+ <script>
2
+ /**
3
+ * Grid Layers Component
4
+ *
5
+ * A component that creates a single-cell grid where all children exist
6
+ * in the same grid cell, allowing them to be positioned independently
7
+ * and stacked on top of each other. Perfect for complex layouts like
8
+ * overlaying text on images, card stacks, positioning UI elements, etc.
9
+ *
10
+ * Each child can use grid positioning properties (justify-self-*, self-*)
11
+ * for precise placement. Children can control stacking order with z-index.
12
+ *
13
+ * @example Basic usage with 9-position grid
14
+ * ```html
15
+ * <GridLayers classes="border w-[500px] h-[500px]">
16
+ * <!-- Top Row -->
17
+ * <div class="justify-self-start self-start">
18
+ * <div class="bg-blue-500 w-[100px] h-[100px]">
19
+ * Top Left
20
+ * </div>
21
+ * </div>
22
+ * <div class="justify-self-center self-start">
23
+ * <div class="bg-blue-300 w-[100px] h-[100px]">
24
+ * Top Center
25
+ * </div>
26
+ * </div>
27
+ * <div class="justify-self-end self-start">
28
+ * <div class="bg-blue-500 w-[100px] h-[100px]">
29
+ * Top Right
30
+ * </div>
31
+ * </div>
32
+ *
33
+ * <!-- Middle Row -->
34
+ * <div class="justify-self-start self-center">
35
+ * <div class="bg-green-500 w-[100px] h-[100px]">
36
+ * Middle Left
37
+ * </div>
38
+ * </div>
39
+ * <div class="justify-self-center self-center">
40
+ * <div class="bg-green-300 w-[100px] h-[100px]">
41
+ * Middle Center
42
+ * </div>
43
+ * </div>
44
+ * <div class="justify-self-end self-center">
45
+ * <div class="bg-green-500 w-[100px] h-[100px]">
46
+ * Middle Right
47
+ * </div>
48
+ * </div>
49
+ *
50
+ * <!-- Bottom Row -->
51
+ * <div class="justify-self-start self-end">
52
+ * <div class="bg-red-500 w-[100px] h-[100px]">
53
+ * Bottom Left
54
+ * </div>
55
+ * </div>
56
+ * <div class="justify-self-center self-end">
57
+ * <div class="bg-red-300 w-[100px] h-[100px]">
58
+ * Bottom Center
59
+ * </div>
60
+ * </div>
61
+ * <div class="justify-self-end self-end">
62
+ * <div class="bg-red-500 w-[100px] h-[100px]">
63
+ * Bottom Right
64
+ * </div>
65
+ * </div>
66
+ * </GridLayers>
67
+ * ```
68
+ *
69
+ * @example Text over image
70
+ * ```html
71
+ * <GridLayers classes="w-full h-[300px]">
72
+ * <!-- Background image layer -->
73
+ * <div class="justify-self-stretch self-stretch z-0">
74
+ * <img
75
+ * src="/images/landscape.jpg"
76
+ * alt="Landscape"
77
+ * class="w-full h-full object-cover"
78
+ * />
79
+ * </div>
80
+ *
81
+ * <!-- Text overlay layer -->
82
+ * <div class="justify-self-center self-center z-10">
83
+ * <div class="bg-black/50 p-16up text-white
84
+ * font-ui rounded-md">
85
+ * <h2 class="text-2xl">Explore Nature</h2>
86
+ * <p>Discover the beauty of the outdoors</p>
87
+ * </div>
88
+ * </div>
89
+ * </GridLayers>
90
+ * ```
91
+ */
92
+
93
+ /**
94
+ * @type {{
95
+ * base?: string,
96
+ * bg?: string,
97
+ * padding?: string,
98
+ * margin?: string,
99
+ * height?: string,
100
+ * classes?: string,
101
+ * style?: string,
102
+ * cellBase?: string,
103
+ * cellBg?: string,
104
+ * cellPadding?: string,
105
+ * cellMargin?: string,
106
+ * cellClasses?: string,
107
+ * cellStyle?: string,
108
+ * children: import('svelte').Snippet,
109
+ * cellAttrs?: { [attr: string]: * },
110
+ * [attr: string]: any
111
+ * }}
112
+ */
113
+ const {
114
+ // Style
115
+ base,
116
+ bg,
117
+ padding,
118
+ margin,
119
+ height,
120
+ classes,
121
+ style,
122
+ cellBase,
123
+ cellBg,
124
+ cellPadding,
125
+ cellMargin,
126
+ cellClasses,
127
+ cellStyle,
128
+
129
+ cellAttrs,
130
+
131
+ // Snippets
132
+ children,
133
+
134
+ // Attributes
135
+ ...attrs
136
+ } = $props();
137
+ </script>
138
+
139
+ <div
140
+ data-component="grid-layers"
141
+ class="relative {base} {bg} {height} {classes} {margin} {padding}"
142
+ {style}
143
+ {...attrs}
144
+ >
145
+ <div
146
+ data-section="grid"
147
+ class="absolute inset-0 grid {cellBase} {cellBg} {cellPadding} {cellMargin} {cellClasses}"
148
+ style={cellStyle}
149
+ >
150
+ {@render children()}
151
+ </div>
152
+ </div>
153
+
154
+ <style>
155
+ /* All children of the layer share the same grid area
156
+ but aren't absolutely positioned */
157
+ [data-section='grid'] {
158
+ grid-template-columns: 1fr;
159
+ grid-template-rows: 1fr;
160
+ }
161
+
162
+ [data-section='grid'] > :global(*) {
163
+ grid-column: 1;
164
+ grid-row: 1;
165
+ z-index: 0; /* Base z-index to allow explicit stacking order */
166
+ }
167
+ </style>
@@ -1 +1 @@
1
- export { default as GridLayers } from './grid-layers/GridLayers.svelte';
1
+ export { default as GridLayers } from './grid-layers/GridLayers.svelte';
@@ -1 +1 @@
1
- export { default as Panel } from './panel/Panel.svelte';
1
+ export { default as Panel } from './panel/Panel.svelte';
@@ -1,43 +1,43 @@
1
- <script>
2
- /**
3
- * @example
4
- *
5
- *
6
- */
7
-
8
- /**
9
- * @type {{
10
- * base?: string,
11
- * bg?: string,
12
- * classes?: string,
13
- * width?: 'sm' | 'md' | 'lg',
14
- * variant?: string,
15
- * children?: import('svelte').Snippet,
16
- * } & { [attr: string]: any }}
17
- */
18
- const {
19
- // Style
20
- base,
21
- bg,
22
- classes,
23
-
24
- width = 'md',
25
- variant = 'light',
26
-
27
- // Snippets
28
- children,
29
-
30
- // Attributes
31
- ...attrs
32
- } = $props();
33
- </script>
34
-
35
- <div
36
- data-component="panel"
37
- data-width={width}
38
- data-variant={variant}
39
- class="{base} {bg} {classes}"
40
- {...attrs}
41
- >
42
- {@render children()}
43
- </div>
1
+ <script>
2
+ /**
3
+ * @example
4
+ *
5
+ *
6
+ */
7
+
8
+ /**
9
+ * @type {{
10
+ * base?: string,
11
+ * bg?: string,
12
+ * classes?: string,
13
+ * width?: 'sm' | 'md' | 'lg',
14
+ * variant?: string,
15
+ * children?: import('svelte').Snippet,
16
+ * } & { [attr: string]: any }}
17
+ */
18
+ const {
19
+ // Style
20
+ base,
21
+ bg,
22
+ classes,
23
+
24
+ width = 'md',
25
+ variant = 'light',
26
+
27
+ // Snippets
28
+ children,
29
+
30
+ // Attributes
31
+ ...attrs
32
+ } = $props();
33
+ </script>
34
+
35
+ <div
36
+ data-component="panel"
37
+ data-width={width}
38
+ data-variant={variant}
39
+ class="{base} {bg} {classes}"
40
+ {...attrs}
41
+ >
42
+ {@render children()}
43
+ </div>
@@ -1,3 +1,3 @@
1
- export { default as PanelGridRow } from './panel-grid-row/PanelGridRow.svelte';
2
-
3
- export { default as PanelRow2 } from './panel-row-2/PanelRow2.svelte';
1
+ export { default as PanelGridRow } from './panel-grid-row/PanelGridRow.svelte';
2
+
3
+ export { default as PanelRow2 } from './panel-row-2/PanelRow2.svelte';