@ainsleydev/sveltekit-helper 0.3.0 → 0.3.2

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 (11) hide show
  1. package/README.md +7 -7
  2. package/dist/components/Sidebar.svelte +5 -5
  3. package/dist/components/Sidebar.svelte.d.ts +2 -2
  4. package/dist/components/notifications/Alert.svelte +11 -4
  5. package/dist/components/notifications/Alert.svelte.d.ts +3 -0
  6. package/dist/components/notifications/Alert.svelte.d.ts.map +1 -1
  7. package/dist/components/notifications/Notice.svelte +10 -4
  8. package/dist/components/notifications/Notice.svelte.d.ts +2 -0
  9. package/dist/components/notifications/Notice.svelte.d.ts.map +1 -1
  10. package/dist/components/payload/PayloadForm.svelte +8 -8
  11. package/package.json +1 -1
package/README.md CHANGED
@@ -219,13 +219,13 @@ Override CSS variables globally from `:root`:
219
219
  :root {
220
220
  --sidebar-width: 400px;
221
221
  --sidebar-min-width: 300px;
222
- --sidebar-background: #1a1a1a;
222
+ --sidebar-bg: #1a1a1a;
223
223
  --sidebar-border-colour: rgba(255, 255, 255, 0.2);
224
224
  --sidebar-overlay-colour: #000;
225
225
  --sidebar-overlay-opacity: 0.5;
226
226
 
227
227
  /* Toggle button */
228
- --sidebar-toggle-background: #2a2a2a;
228
+ --sidebar-toggle-bg: #2a2a2a;
229
229
  --sidebar-toggle-colour: #fff;
230
230
  --sidebar-toggle-padding: 0.5rem 1.5rem;
231
231
  --sidebar-toggle-radius: 8px;
@@ -239,7 +239,7 @@ Override CSS variables globally from `:root`:
239
239
  Or use inline styles:
240
240
 
241
241
  ```svelte
242
- <Sidebar style="--sidebar-background: #2a2a2a; --sidebar-width: 400px">
242
+ <Sidebar style="--sidebar-bg: #2a2a2a; --sidebar-width: 400px">
243
243
  <nav>...</nav>
244
244
  </Sidebar>
245
245
  ```
@@ -359,13 +359,13 @@ Override CSS variables globally:
359
359
  --form-input-border: 1px solid #e5e7eb;
360
360
  --form-input-border-radius: 0.5rem;
361
361
  --form-input-bg: #ffffff;
362
- --form-input-text: #111827;
363
- --form-error-color: #ef4444;
362
+ --form-input-colour: #111827;
363
+ --form-error-colour: #ef4444;
364
364
  --form-error-bg: #fee2e2;
365
- --form-success-color: #10b981;
365
+ --form-success-colour: #10b981;
366
366
  --form-success-bg: #d1fae5;
367
367
  --form-button-bg: #3b82f6;
368
- --form-button-text: #ffffff;
368
+ --form-button-colour: #ffffff;
369
369
  --form-button-hover-bg: #2563eb;
370
370
  --form-button-disabled-bg: #9ca3af;
371
371
  }
package/dist/components/Sidebar.svelte CHANGED
@@ -141,11 +141,11 @@ export type SidebarProps = {
141
141
  - `--sidebar-min-width`: Minimum sidebar width (default: 270px)
142
142
  - `--sidebar-top`: Desktop sticky position from top (default: 160px)
143
143
  - `--sidebar-overlay-opacity`: Overlay opacity when open (default: 0.3)
144
- - `--sidebar-background`: Sidebar background color (default: var(--colour-base-black))
144
+ - `--sidebar-bg`: Sidebar background color (default: var(--colour-base-black))
145
145
  - `--sidebar-border-colour`: Border color (default: rgba(255, 255, 255, 0.1))
146
146
  - `--sidebar-overlay-colour`: Overlay background color (default: var(--colour-grey-900))
147
147
  - `--sidebar-inner-padding`: Content padding (default: 2rem 1.8rem 0 1.8rem)
148
- - `--sidebar-toggle-background`: Toggle button background (default: var(--colour-base-black))
148
+ - `--sidebar-toggle-bg`: Toggle button background (default: var(--colour-base-black))
149
149
  - `--sidebar-toggle-colour`: Toggle button text color (default: var(--colour-base-light))
150
150
  - `--sidebar-toggle-padding`: Toggle button padding (default: 0.25rem 1.5rem)
151
151
  - `--sidebar-toggle-radius`: Toggle button border radius (default: 0.375rem)
@@ -186,7 +186,7 @@ export type SidebarProps = {
186
186
  display: none;
187
187
  bottom: 0;
188
188
  right: 1px;
189
- background-color: var(--sidebar-toggle-background, var(--colour-base-black));
189
+ background-color: var(--sidebar-toggle-bg, var(--colour-base-black));
190
190
  color: var(--sidebar-toggle-colour, var(--colour-base-light));
191
191
  padding: var(--sidebar-toggle-padding, 0.25rem 1.5rem);
192
192
  border-top-right-radius: var(--sidebar-toggle-radius, 0.375rem);
@@ -206,7 +206,7 @@ export type SidebarProps = {
206
206
  left: 1px;
207
207
  width: calc(100% - 2px);
208
208
  height: 10%;
209
- background: var(--sidebar-toggle-background, var(--colour-base-black));
209
+ background: var(--sidebar-toggle-bg, var(--colour-base-black));
210
210
  }
211
211
  .sidebar__overlay {
212
212
  position: fixed;
@@ -244,7 +244,7 @@ export type SidebarProps = {
244
244
  height: 100%;
245
245
  width: var(--sidebar-width, 50vw);
246
246
  min-width: var(--sidebar-min-width, 270px);
247
- background-color: var(--sidebar-background, var(--colour-base-black));
247
+ background-color: var(--sidebar-bg, var(--colour-base-black));
248
248
  border-color: var(--sidebar-border-colour, rgba(255, 255, 255, 0.1));
249
249
  z-index: 1000;
250
250
  transition: translate 600ms cubic-bezier(0.1, 0.7, 0.1, 1);
package/dist/components/Sidebar.svelte.d.ts CHANGED
@@ -40,11 +40,11 @@ export type SidebarProps = {
40
40
  * - `--sidebar-min-width`: Minimum sidebar width (default: 270px)
41
41
  * - `--sidebar-top`: Desktop sticky position from top (default: 160px)
42
42
  * - `--sidebar-overlay-opacity`: Overlay opacity when open (default: 0.3)
43
- * - `--sidebar-background`: Sidebar background color (default: var(--colour-base-black))
43
+ * - `--sidebar-bg`: Sidebar background color (default: var(--colour-base-black))
44
44
  * - `--sidebar-border-colour`: Border color (default: rgba(255, 255, 255, 0.1))
45
45
  * - `--sidebar-overlay-colour`: Overlay background color (default: var(--colour-grey-900))
46
46
  * - `--sidebar-inner-padding`: Content padding (default: 2rem 1.8rem 0 1.8rem)
47
- * - `--sidebar-toggle-background`: Toggle button background (default: var(--colour-base-black))
47
+ * - `--sidebar-toggle-bg`: Toggle button background (default: var(--colour-base-black))
48
48
  * - `--sidebar-toggle-colour`: Toggle button text color (default: var(--colour-base-light))
49
49
  * - `--sidebar-toggle-padding`: Toggle button padding (default: 0.25rem 1.5rem)
50
50
  * - `--sidebar-toggle-radius`: Toggle button border radius (default: 0.375rem)
package/dist/components/notifications/Alert.svelte CHANGED
@@ -11,6 +11,7 @@ export type AlertProps = {
11
11
  visible?: boolean;
12
12
  dismiss?: boolean;
13
13
  icon?: typeof IconType;
14
+ hideIcon?: boolean;
14
15
  };
15
16
  </script>
16
17
 
@@ -27,6 +28,7 @@ export type AlertProps = {
27
28
  visible = $bindable(true),
28
29
  dismiss = false,
29
30
  icon: customIcon,
31
+ hideIcon = false,
30
32
  ...restProps
31
33
  }: AlertProps = $props()
32
34
 
@@ -53,6 +55,8 @@ export type AlertProps = {
53
55
  <Alert type="error" title="Payment failed" dismiss>
54
56
  Your card was declined. Please update your payment method.
55
57
  </Alert>
58
+
59
+ <Alert type="info" title="No icon" hideIcon />
56
60
  ```
57
61
 
58
62
  CSS Custom Properties:
@@ -78,9 +82,11 @@ export type AlertProps = {
78
82
  {...restProps}
79
83
  >
80
84
  <!-- Icon -->
81
- <figure class="alert__icon">
82
- <Icon size={24} color={iconDetail.colour} strokeWidth={1.2}></Icon>
83
- </figure>
85
+ {#if !hideIcon}
86
+ <figure class="alert__icon">
87
+ <Icon size={24} strokeWidth={1.2}></Icon>
88
+ </figure>
89
+ {/if}
84
90
  <!-- Content -->
85
91
  <div class="alert__content">
86
92
  {#if title}
@@ -97,7 +103,7 @@ export type AlertProps = {
97
103
  <!-- Dismiss -->
98
104
  {#if dismiss}
99
105
  <button class="alert__dismiss" onclick={hide} aria-label="Close Alert">
100
- <X size={24} color={iconDetail.colour} />
106
+ <X size={24} />
101
107
  </button>
102
108
  {/if}
103
109
  </div>
@@ -118,6 +124,7 @@ export type AlertProps = {
118
124
  justify-content: center;
119
125
  margin: 0;
120
126
  flex-shrink: 0;
127
+ color: var(--_alert-icon-colour);
121
128
  }
122
129
  .alert__content {
123
130
  display: grid;
package/dist/components/notifications/Alert.svelte.d.ts CHANGED
@@ -8,6 +8,7 @@ export type AlertProps = {
8
8
  visible?: boolean;
9
9
  dismiss?: boolean;
10
10
  icon?: typeof IconType;
11
+ hideIcon?: boolean;
11
12
  };
12
13
  /**
13
14
  * Full-width alert component for displaying important messages with optional body text.
@@ -24,6 +25,8 @@ export type AlertProps = {
24
25
  * <Alert type="error" title="Payment failed" dismiss>
25
26
  * Your card was declined. Please update your payment method.
26
27
  * </Alert>
28
+ *
29
+ * <Alert type="info" title="No icon" hideIcon />
27
30
  * ```
28
31
  *
29
32
  * CSS Custom Properties:
package/dist/components/notifications/Alert.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Alert.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/notifications/Alert.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEjE,MAAM,MAAM,UAAU,GAAG;IACxB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,QAAQ,CAAC;CACvB,CAAC;AAiEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,QAAA,MAAM,KAAK,uDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
1
+ {"version":3,"file":"Alert.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/notifications/Alert.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEjE,MAAM,MAAM,UAAU,GAAG;IACxB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,QAAQ,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAoEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,QAAA,MAAM,KAAK,uDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
package/dist/components/notifications/Notice.svelte CHANGED
@@ -9,6 +9,7 @@ export type NoticeProps = {
9
9
  visible?: boolean;
10
10
  dismiss?: boolean;
11
11
  icon?: typeof IconType;
12
+ hideIcon?: boolean;
12
13
  };
13
14
  </script>
14
15
 
@@ -24,6 +25,7 @@ export type NoticeProps = {
24
25
  visible = $bindable(true),
25
26
  dismiss = false,
26
27
  icon: customIcon,
28
+ hideIcon = false,
27
29
  ...restProps
28
30
  }: NoticeProps = $props()
29
31
 
@@ -44,6 +46,7 @@ export type NoticeProps = {
44
46
  <Notice type="success" title="Upload complete" />
45
47
  <Notice type="warning" title="Session expiring" dismiss />
46
48
  <Notice type="error" title="Connection failed" icon={CustomIcon} />
49
+ <Notice type="info" title="No icon" hideIcon />
47
50
  ```
48
51
 
49
52
  CSS Custom Properties:
@@ -66,9 +69,11 @@ export type NoticeProps = {
66
69
  {...restProps}
67
70
  >
68
71
  <!-- Icon -->
69
- <figure class="notice__icon">
70
- <Icon size={20} color={iconDetail.colour} strokeWidth={1.2}></Icon>
71
- </figure>
72
+ {#if !hideIcon}
73
+ <figure class="notice__icon">
74
+ <Icon size={20} strokeWidth={1.2}></Icon>
75
+ </figure>
76
+ {/if}
72
77
  <!-- Title -->
73
78
  <p class="notice__title">
74
79
  {title}
@@ -76,7 +81,7 @@ export type NoticeProps = {
76
81
  <!-- Dismiss -->
77
82
  {#if dismiss}
78
83
  <button class="notice__dismiss" onclick={hide} aria-label="Close Notice">
79
- <X size={20} color={iconDetail.colour} />
84
+ <X size={20} />
80
85
  </button>
81
86
  {/if}
82
87
  </div>
@@ -98,6 +103,7 @@ export type NoticeProps = {
98
103
  justify-content: center;
99
104
  margin: 0;
100
105
  flex-shrink: 0;
106
+ color: var(--_notice-icon-colour);
101
107
  }
102
108
  .notice__title {
103
109
  margin: 0;
package/dist/components/notifications/Notice.svelte.d.ts CHANGED
@@ -6,6 +6,7 @@ export type NoticeProps = {
6
6
  visible?: boolean;
7
7
  dismiss?: boolean;
8
8
  icon?: typeof IconType;
9
+ hideIcon?: boolean;
9
10
  };
10
11
  /**
11
12
  * Inline notification component for displaying brief messages with icons.
@@ -16,6 +17,7 @@ export type NoticeProps = {
16
17
  * <Notice type="success" title="Upload complete" />
17
18
  * <Notice type="warning" title="Session expiring" dismiss />
18
19
  * <Notice type="error" title="Connection failed" icon={CustomIcon} />
20
+ * <Notice type="info" title="No icon" hideIcon />
19
21
  * ```
20
22
  *
21
23
  * CSS Custom Properties:
package/dist/components/notifications/Notice.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Notice.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/notifications/Notice.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAEvD,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAElE,MAAM,MAAM,WAAW,GAAG;IACzB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,QAAQ,CAAC;CACvB,CAAC;AAuDF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,MAAM,wDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"Notice.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/notifications/Notice.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAEvD,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAElE,MAAM,MAAM,WAAW,GAAG;IACzB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,QAAQ,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AA0DF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,MAAM,wDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
package/dist/components/payload/PayloadForm.svelte CHANGED
@@ -198,14 +198,14 @@ async function handleSubmit(event: SubmitEvent) {
198
198
  .payload-form__label {
199
199
  font-size: 0.875rem;
200
200
  font-weight: 500;
201
- color: var(--form-input-text, #111827);
201
+ color: var(--form-input-colour, #111827);
202
202
  }
203
203
  .payload-form__label--checkbox {
204
204
  font-weight: 400;
205
205
  cursor: pointer;
206
206
  }
207
207
  .payload-form__required {
208
- color: var(--form-error-color, #ef4444);
208
+ color: var(--form-error-colour, #ef4444);
209
209
  margin-left: 0.25rem;
210
210
  }
211
211
  .payload-form__input, .payload-form__textarea {
@@ -213,7 +213,7 @@ async function handleSubmit(event: SubmitEvent) {
213
213
  border: var(--form-input-border, 1px solid #d1d5db);
214
214
  border-radius: var(--form-input-border-radius, 0.375rem);
215
215
  background: var(--form-input-bg, #ffffff);
216
- color: var(--form-input-text, #111827);
216
+ color: var(--form-input-colour, #111827);
217
217
  font-size: 1rem;
218
218
  font-family: inherit;
219
219
  }
@@ -222,7 +222,7 @@ async function handleSubmit(event: SubmitEvent) {
222
222
  outline-offset: 2px;
223
223
  }
224
224
  .payload-form__input--error, .payload-form__textarea--error {
225
- border-color: var(--form-error-color, #ef4444);
225
+ border-color: var(--form-error-colour, #ef4444);
226
226
  }
227
227
  .payload-form__textarea {
228
228
  resize: vertical;
@@ -241,26 +241,26 @@ async function handleSubmit(event: SubmitEvent) {
241
241
  }
242
242
  .payload-form__error {
243
243
  font-size: 0.875rem;
244
- color: var(--form-error-color, #ef4444);
244
+ color: var(--form-error-colour, #ef4444);
245
245
  }
246
246
  .payload-form__success {
247
247
  padding: 1rem;
248
248
  background-color: var(--form-success-bg, #d1fae5);
249
- color: var(--form-success-color, #10b981);
249
+ color: var(--form-success-colour, #10b981);
250
250
  border-radius: var(--form-input-border-radius, 0.375rem);
251
251
  font-weight: 500;
252
252
  }
253
253
  .payload-form__alert {
254
254
  padding: 1rem;
255
255
  background-color: var(--form-error-bg, #fee2e2);
256
- color: var(--form-error-color, #ef4444);
256
+ color: var(--form-error-colour, #ef4444);
257
257
  border-radius: var(--form-input-border-radius, 0.375rem);
258
258
  font-weight: 500;
259
259
  }
260
260
  .payload-form__submit {
261
261
  padding: var(--form-input-padding, 0.75rem) 1.5rem;
262
262
  background-color: var(--form-button-bg, #3b82f6);
263
- color: var(--form-button-text, #ffffff);
263
+ color: var(--form-button-colour, #ffffff);
264
264
  border: none;
265
265
  border-radius: var(--form-input-border-radius, 0.375rem);
266
266
  font-size: 1rem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ainsleydev/sveltekit-helper",
3
- "version": "0.3.0",
3
+ "version": "0.3.2",
4
4
  "description": "SvelteKit utilities, components and helpers for ainsley.dev builds",
5
5
  "license": "MIT",
6
6
  "type": "module",