@ainsleydev/sveltekit-helper 0.3.1 → 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 (7) hide show
  1. package/dist/components/notifications/Alert.svelte +11 -4
  2. package/dist/components/notifications/Alert.svelte.d.ts +3 -0
  3. package/dist/components/notifications/Alert.svelte.d.ts.map +1 -1
  4. package/dist/components/notifications/Notice.svelte +10 -4
  5. package/dist/components/notifications/Notice.svelte.d.ts +2 -0
  6. package/dist/components/notifications/Notice.svelte.d.ts.map +1 -1
  7. package/package.json +1 -1
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ainsleydev/sveltekit-helper",
3
- "version": "0.3.1",
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",