svelte-comp 1.2.5 → 1.2.6

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.

Potentially problematic release.

This version of svelte-comp might be problematic. Click here for more details.

Files changed (84) hide show
  1. package/README.md +1 -1
  2. package/package.json +1 -1
  3. package/dist/App.svelte +0 -551
  4. package/dist/App.svelte.d.ts +0 -3
  5. package/dist/Container.svelte +0 -60
  6. package/dist/Container.svelte.d.ts +0 -12
  7. package/dist/app.css +0 -235
  8. package/dist/index.d.ts +0 -5
  9. package/dist/index.js +0 -6
  10. package/dist/lang.d.ts +0 -1081
  11. package/dist/lang.js +0 -1096
  12. package/dist/lib/Accordion.svelte +0 -155
  13. package/dist/lib/Accordion.svelte.d.ts +0 -40
  14. package/dist/lib/Button.svelte +0 -170
  15. package/dist/lib/Button.svelte.d.ts +0 -53
  16. package/dist/lib/Card.svelte +0 -103
  17. package/dist/lib/Card.svelte.d.ts +0 -42
  18. package/dist/lib/Carousel.svelte +0 -293
  19. package/dist/lib/Carousel.svelte.d.ts +0 -13
  20. package/dist/lib/CheckBox.svelte +0 -210
  21. package/dist/lib/CheckBox.svelte.d.ts +0 -53
  22. package/dist/lib/CodeView.svelte +0 -307
  23. package/dist/lib/CodeView.svelte.d.ts +0 -64
  24. package/dist/lib/ColorPicker.svelte +0 -161
  25. package/dist/lib/ColorPicker.svelte.d.ts +0 -40
  26. package/dist/lib/DatePicker.svelte +0 -170
  27. package/dist/lib/DatePicker.svelte.d.ts +0 -53
  28. package/dist/lib/Dialog.svelte +0 -235
  29. package/dist/lib/Dialog.svelte.d.ts +0 -58
  30. package/dist/lib/Field.svelte +0 -299
  31. package/dist/lib/Field.svelte.d.ts +0 -8
  32. package/dist/lib/FilePicker.svelte +0 -241
  33. package/dist/lib/FilePicker.svelte.d.ts +0 -52
  34. package/dist/lib/Form.svelte +0 -438
  35. package/dist/lib/Form.svelte.d.ts +0 -20
  36. package/dist/lib/Hamburger.svelte +0 -211
  37. package/dist/lib/Hamburger.svelte.d.ts +0 -52
  38. package/dist/lib/Menu.svelte +0 -623
  39. package/dist/lib/Menu.svelte.d.ts +0 -33
  40. package/dist/lib/PaginatedCard.svelte +0 -73
  41. package/dist/lib/PaginatedCard.svelte.d.ts +0 -11
  42. package/dist/lib/Pagination.svelte +0 -119
  43. package/dist/lib/Pagination.svelte.d.ts +0 -9
  44. package/dist/lib/PrimaryColorSelect.svelte +0 -113
  45. package/dist/lib/PrimaryColorSelect.svelte.d.ts +0 -9
  46. package/dist/lib/ProgressBar.svelte +0 -141
  47. package/dist/lib/ProgressBar.svelte.d.ts +0 -48
  48. package/dist/lib/ProgressCircle.svelte +0 -192
  49. package/dist/lib/ProgressCircle.svelte.d.ts +0 -39
  50. package/dist/lib/Radio.svelte +0 -189
  51. package/dist/lib/Radio.svelte.d.ts +0 -55
  52. package/dist/lib/SearchInput.svelte +0 -106
  53. package/dist/lib/SearchInput.svelte.d.ts +0 -13
  54. package/dist/lib/Select.svelte +0 -524
  55. package/dist/lib/Select.svelte.d.ts +0 -21
  56. package/dist/lib/Slider.svelte +0 -253
  57. package/dist/lib/Slider.svelte.d.ts +0 -56
  58. package/dist/lib/Splitter.svelte +0 -150
  59. package/dist/lib/Splitter.svelte.d.ts +0 -43
  60. package/dist/lib/Switch.svelte +0 -167
  61. package/dist/lib/Switch.svelte.d.ts +0 -42
  62. package/dist/lib/Table.svelte +0 -299
  63. package/dist/lib/Table.svelte.d.ts +0 -17
  64. package/dist/lib/Tabs.svelte +0 -213
  65. package/dist/lib/Tabs.svelte.d.ts +0 -48
  66. package/dist/lib/ThemeToggle.svelte +0 -127
  67. package/dist/lib/ThemeToggle.svelte.d.ts +0 -32
  68. package/dist/lib/TimePicker.svelte +0 -269
  69. package/dist/lib/TimePicker.svelte.d.ts +0 -48
  70. package/dist/lib/Toast.svelte +0 -226
  71. package/dist/lib/Toast.svelte.d.ts +0 -14
  72. package/dist/lib/Tooltip.svelte +0 -110
  73. package/dist/lib/Tooltip.svelte.d.ts +0 -40
  74. package/dist/lib/index.d.ts +0 -32
  75. package/dist/lib/index.js +0 -33
  76. package/dist/lib/lang.d.ts +0 -158
  77. package/dist/lib/lang.js +0 -150
  78. package/dist/lib/types/index.d.ts +0 -111
  79. package/dist/lib/types/index.js +0 -26
  80. package/dist/main.d.ts +0 -3
  81. package/dist/main.js +0 -7
  82. package/dist/styles.css +0 -232
  83. package/dist/utils/index.d.ts +0 -34
  84. package/dist/utils/index.js +0 -268
package/dist/lib/ThemeToggle.svelte DELETED
@@ -1,127 +0,0 @@
1
- <!-- src/lib/ThemeToggle.svelte -->
2
- <script lang="ts">
3
- /**
4
- * @component ThemeToggle
5
- * @description Lightweight theme switcher to toggle between light and dark mode. Applies or removes the `.dark` class on the document root.
6
- *
7
- * @prop disabled {boolean} - Disable the ThemeToggle
8
- *
9
- * @prop class {string} - Optional external class name (overrides default position)
10
- * @default ""
11
- *
12
- * @prop sz {SizeKey} - Adjusts button size and icon scale
13
- * @options xs|sm|md|lg|xl
14
- * @default md
15
- *
16
- * @prop type {string} - Button type attribute
17
- * @default "button"
18
- *
19
- * @note Uses `$effect` to sync the `dark` class on `<html>`.
20
- * @note Default position is `fixed top-4 right-4`, unless overridden by a custom `class`.
21
- * @note Styled entirely through CSS variables; fully theme-aware.
22
- * @note Smooth transition between sun and moon icons.
23
- */
24
- import type { HTMLButtonAttributes } from "svelte/elements";
25
- import { type SizeKey, TEXT } from "./types";
26
- import { cx, storage } from "../utils";
27
-
28
- type Props = HTMLButtonAttributes & {
29
- disabled?: boolean;
30
- class?: string;
31
- sz?: SizeKey;
32
- type?: string;
33
- };
34
-
35
- let {
36
- disabled,
37
- class: externalClass = "",
38
- sz = "md",
39
- type = "button",
40
- ...rest
41
- }: Props = $props();
42
-
43
- const STORAGE_KEY = "theme-toggle:dark";
44
- const initialDark = storage.get<boolean>(STORAGE_KEY, false);
45
- let darkMode = $state(initialDark);
46
-
47
- const base = `inline-flex items-center justify-center rounded-[var(--radius-md)]
48
- border border-[var(--border-color-default)] bg-[var(--color-bg-secondary)]
49
- hover:bg-[var(--color-bg-hover)] focus-visible:outline-none focus-visible:ring-2
50
- focus-visible:ring-[var(--border-color-focus)] transition-colors
51
- disabled:opacity-[var(--opacity-disabled)]
52
- disabled:cursor-not-allowed
53
- disabled:brightness-100
54
- disabled:active:scale-100
55
- disabled:hover:brightness-100
56
- `;
57
-
58
- const sizes: Record<SizeKey, string> = {
59
- xs: "px-2 py-0.5 h-6",
60
- sm: "px-3 py-1 h-7",
61
- md: "px-4 py-2 h-8",
62
- lg: "px-5 py-2.5 h-9",
63
- xl: "px-6 py-3 h-10",
64
- };
65
-
66
- const position = "fixed top-4 right-4 z-50";
67
-
68
- const mergedClass = $derived(
69
- cx(
70
- externalClass ? null : position,
71
- base,
72
- sizes[sz],
73
- TEXT[sz],
74
- externalClass
75
- )
76
- );
77
-
78
- $effect(() => {
79
- document.documentElement.classList.toggle("dark", darkMode);
80
- storage.set(STORAGE_KEY, darkMode);
81
- });
82
- </script>
83
-
84
- <button
85
- {type}
86
- {disabled}
87
- class={mergedClass}
88
- onclick={() => (darkMode = !darkMode)}
89
- aria-label={darkMode ? "Switch to light mode" : "Switch to dark mode"}
90
- {...rest}
91
- >
92
- {#if darkMode}
93
- <svg
94
- class="w-[1em] h-[1em]"
95
- viewBox="0 0 24 24"
96
- fill="none"
97
- stroke="currentColor"
98
- stroke-width="2"
99
- >
100
- <circle cx="12" cy="12" r="4" fill="currentColor" />
101
- <line x1="12" y1="1" x2="12" y2="4" />
102
- <line x1="12" y1="20" x2="12" y2="23" />
103
- <line x1="4.22" y1="4.22" x2="6.34" y2="6.34" />
104
- <line x1="17.66" y1="17.66" x2="19.78" y2="19.78" />
105
- <line x1="1" y1="12" x2="4" y2="12" />
106
- <line x1="20" y1="12" x2="23" y2="12" />
107
- <line x1="4.22" y1="19.78" x2="6.34" y2="17.66" />
108
- <line x1="17.66" y1="6.34" x2="19.78" y2="4.22" />
109
- </svg>
110
- {:else}
111
- <svg
112
- class="w-[1em] h-[1em]"
113
- viewBox="0 0 24 24"
114
- fill="none"
115
- stroke="currentColor"
116
- stroke-width="2"
117
- >
118
- <path
119
- d="M12 2
120
- A9 9 0 1 0 21 12
121
- A7.5 7.5 0 1 1 12 2
122
- Z"
123
- fill="currentColor"
124
- />
125
- </svg>
126
- {/if}
127
- </button>
package/dist/lib/ThemeToggle.svelte.d.ts DELETED
@@ -1,32 +0,0 @@
1
- /**
2
- * @component ThemeToggle
3
- * @description Lightweight theme switcher to toggle between light and dark mode. Applies or removes the `.dark` class on the document root.
4
- *
5
- * @prop disabled {boolean} - Disable the ThemeToggle
6
- *
7
- * @prop class {string} - Optional external class name (overrides default position)
8
- * @default ""
9
- *
10
- * @prop sz {SizeKey} - Adjusts button size and icon scale
11
- * @options xs|sm|md|lg|xl
12
- * @default md
13
- *
14
- * @prop type {string} - Button type attribute
15
- * @default "button"
16
- *
17
- * @note Uses `$effect` to sync the `dark` class on `<html>`.
18
- * @note Default position is `fixed top-4 right-4`, unless overridden by a custom `class`.
19
- * @note Styled entirely through CSS variables; fully theme-aware.
20
- * @note Smooth transition between sun and moon icons.
21
- */
22
- import type { HTMLButtonAttributes } from "svelte/elements";
23
- import { type SizeKey } from "./types";
24
- type Props = HTMLButtonAttributes & {
25
- disabled?: boolean;
26
- class?: string;
27
- sz?: SizeKey;
28
- type?: string;
29
- };
30
- declare const ThemeToggle: import("svelte").Component<Props, {}, "">;
31
- type ThemeToggle = ReturnType<typeof ThemeToggle>;
32
- export default ThemeToggle;
package/dist/lib/TimePicker.svelte DELETED
@@ -1,269 +0,0 @@
1
- <!-- src/lib/TimePicker.svelte -->
2
- <script lang="ts">
3
- /**
4
- * @component TimePicker
5
- * @description Simple time selector that stores values in ISO `HH:MM` format. Supports a fixed step and two display systems.
6
- *
7
- * @prop value {string | null} - Stored time in ISO `HH:MM` (bindable)
8
- * @default null
9
- *
10
- * @prop step {number} - Step in seconds
11
- * @default 60
12
- *
13
- * @prop label {string} - Label text
14
- *
15
- * @prop placeholder {string} - Placeholder when value is null
16
- *
17
- * @prop disabled {boolean} - Disable all interactions
18
- * @default false
19
- *
20
- * @prop clearable {boolean} - Show the clear button
21
- * @default true
22
- *
23
- * @prop initialSystem {"iso" | "english"} - Picker mode (24h vs 12h)
24
- * @default "iso"
25
- *
26
- * @prop onChange {(value: string | null) => void} - Fired when value changes
27
- *
28
- * @prop class {string} - Wrapper classes
29
- * @default ""
30
- *
31
- * @note ISO mode uses 24-hour time; English mode uses 12-hour time with AM/PM
32
- * @note The stored value is always ISO (`HH:MM`)
33
- * @note `step` defines the minute grid (derived from seconds)
34
- * @note No locale or date-formatting APIs are used internally
35
- */
36
- import type { HTMLAttributes } from "svelte/elements";
37
- import { getContext } from "svelte";
38
- import Button from "./Button.svelte";
39
- import Select from "./Select.svelte";
40
- import { cx } from "../utils";
41
- import { TEXTS } from "./lang";
42
-
43
- type Props = HTMLAttributes<HTMLDivElement> & {
44
- value?: string | null;
45
- step?: number;
46
- label?: string;
47
- placeholder?: string;
48
- disabled?: boolean;
49
- clearable?: boolean;
50
- initialSystem?: "iso" | "english";
51
- onChange?: (value: string | null) => void;
52
- class?: string;
53
- };
54
-
55
- let {
56
- value = $bindable<string | null>(null),
57
- step = 60,
58
- label,
59
- placeholder,
60
- disabled = false,
61
- clearable = true,
62
- initialSystem = "iso",
63
- onChange,
64
- class: externalClass = "",
65
- ...rest
66
- }: Props = $props();
67
-
68
- const langCtx =
69
- getContext<{ value: keyof typeof TEXTS } | undefined>("lang") ?? null;
70
- const langKey = $derived(langCtx?.value ?? "en");
71
- const L = $derived(TEXTS[langKey].components.timePicker);
72
-
73
- const labelFinal = $derived(label ?? L.text);
74
- const placeholderFinal = $derived(placeholder ?? L.placeholder);
75
-
76
- const pickerClass = $derived(cx("inline-block w-full", externalClass));
77
-
78
- let timeSystem = $derived(initialSystem);
79
-
80
- let hour = $state("00");
81
- let minute = $state("00");
82
- let period = $state<"AM" | "PM">("AM");
83
-
84
- const hasValue = $derived(value != null);
85
-
86
- const isoHours = Array.from({ length: 24 }, (_, i) => {
87
- const h = i.toString().padStart(2, "0");
88
- return { value: h, label: h };
89
- });
90
-
91
- const englishHours = Array.from({ length: 12 }, (_, i) => {
92
- const h = (i + 1).toString().padStart(2, "0");
93
- return { value: h, label: h };
94
- });
95
-
96
- const periodOptions = [
97
- { value: "AM", label: "AM" },
98
- { value: "PM", label: "PM" },
99
- ];
100
-
101
- const minuteIncrement = $derived(
102
- !step || step <= 0 ? 1 : Math.min(60, Math.max(1, Math.round(step / 60)))
103
- );
104
-
105
- const minuteOptions = $derived.by(() => {
106
- const arr = [];
107
- for (let i = 0; i < 60; i += minuteIncrement) {
108
- const m = i.toString().padStart(2, "0");
109
- arr.push({ value: m, label: m });
110
- }
111
- return arr;
112
- });
113
-
114
- function normalize(x: string) {
115
- return x.padStart(2, "0").slice(-2);
116
- }
117
-
118
- function emit() {
119
- const v =
120
- timeSystem === "english"
121
- ? `${hour}:${minute} ${period}`
122
- : `${hour}:${minute}`;
123
-
124
- value = v;
125
- onChange?.(v);
126
- }
127
-
128
- function handleIsoHour(v: string) {
129
- hour = normalize(v);
130
- emit();
131
- }
132
-
133
- function handleMinute(v: string) {
134
- minute = normalize(v);
135
- emit();
136
- }
137
-
138
- function handleEnglishHour(v: string) {
139
- hour = normalize(v);
140
- emit();
141
- }
142
-
143
- function handlePeriod(v: string) {
144
- period = v === "AM" || v === "PM" ? v : "AM";
145
- emit();
146
- }
147
-
148
- function toggleSystem() {
149
- if (disabled) return;
150
-
151
- if (timeSystem === "iso") {
152
- timeSystem = "english";
153
-
154
- const h = parseInt(hour, 10);
155
-
156
- if (h >= 0) {
157
- hour = "12";
158
- }
159
-
160
- handlePeriod("AM");
161
- } else {
162
- timeSystem = "iso";
163
- }
164
-
165
- emit();
166
- }
167
-
168
- function clearSelection() {
169
- if (!clearable) return;
170
- hour = "00";
171
- minute = "00";
172
- period = "AM";
173
- value = null;
174
- onChange?.(null);
175
- }
176
-
177
- $effect(() => {
178
- if (value == null) return;
179
-
180
- let raw = value;
181
-
182
- if (raw.includes("AM") || raw.includes("PM")) {
183
- raw = raw.replace(" AM", "").replace(" PM", "");
184
- }
185
-
186
- const [h, m] = raw.split(":");
187
- hour = normalize(h);
188
- minute = normalize(m);
189
- });
190
- </script>
191
-
192
- <div class={pickerClass} {...rest}>
193
- <div class="text-sm font-medium mb-2 [color:var(--color-text-default)]">
194
- {labelFinal}
195
- </div>
196
-
197
- <div class="flex flex-wrap items-start gap-4">
198
- <div class="flex flex-wrap gap-3 min-w-[0] flex-1">
199
- {#if timeSystem === "iso"}
200
- <Select
201
- label={L.hour}
202
- options={isoHours}
203
- value={hour}
204
- onChange={handleIsoHour}
205
- {disabled}
206
- sz="sm"
207
- />
208
- {:else}
209
- <Select
210
- label={L.hour}
211
- options={englishHours}
212
- value={hour}
213
- onChange={handleEnglishHour}
214
- {disabled}
215
- sz="sm"
216
- />
217
-
218
- <Select
219
- label={L.period}
220
- options={periodOptions}
221
- value={period}
222
- onChange={handlePeriod}
223
- {disabled}
224
- sz="sm"
225
- />
226
- {/if}
227
-
228
- <Select
229
- label={L.minute}
230
- options={minuteOptions}
231
- value={minute}
232
- onChange={handleMinute}
233
- {disabled}
234
- sz="sm"
235
- />
236
- </div>
237
-
238
- <div class="flex items-center gap-3 basis-full pt-2">
239
- <Button onClick={toggleSystem} {disabled} sz="xs">
240
- {timeSystem === "iso" ? L.switchTo12h : L.switchTo24h}
241
- </Button>
242
-
243
- {#if clearable}
244
- <Button
245
- onClick={clearSelection}
246
- variant="danger"
247
- disabled={!hasValue || disabled}
248
- sz="xs"
249
- >
250
- {L.clear}
251
- </Button>
252
- {/if}
253
- </div>
254
- </div>
255
-
256
- <div class="mt-4 p-4 bg-[var(--color-bg-surface)] text-center">
257
- <p class="text-xs uppercase tracking-wide [color:var(--color-text-muted)]">
258
- {L.selectedTime}
259
- </p>
260
-
261
- <p class="text-sm font-semibold mt-1 [color:var(--color-text-default)]">
262
- {#if hasValue}
263
- {value}
264
- {:else}
265
- {placeholderFinal}
266
- {/if}
267
- </p>
268
- </div>
269
- </div>
package/dist/lib/TimePicker.svelte.d.ts DELETED
@@ -1,48 +0,0 @@
1
- /**
2
- * @component TimePicker
3
- * @description Simple time selector that stores values in ISO `HH:MM` format. Supports a fixed step and two display systems.
4
- *
5
- * @prop value {string | null} - Stored time in ISO `HH:MM` (bindable)
6
- * @default null
7
- *
8
- * @prop step {number} - Step in seconds
9
- * @default 60
10
- *
11
- * @prop label {string} - Label text
12
- *
13
- * @prop placeholder {string} - Placeholder when value is null
14
- *
15
- * @prop disabled {boolean} - Disable all interactions
16
- * @default false
17
- *
18
- * @prop clearable {boolean} - Show the clear button
19
- * @default true
20
- *
21
- * @prop initialSystem {"iso" | "english"} - Picker mode (24h vs 12h)
22
- * @default "iso"
23
- *
24
- * @prop onChange {(value: string | null) => void} - Fired when value changes
25
- *
26
- * @prop class {string} - Wrapper classes
27
- * @default ""
28
- *
29
- * @note ISO mode uses 24-hour time; English mode uses 12-hour time with AM/PM
30
- * @note The stored value is always ISO (`HH:MM`)
31
- * @note `step` defines the minute grid (derived from seconds)
32
- * @note No locale or date-formatting APIs are used internally
33
- */
34
- import type { HTMLAttributes } from "svelte/elements";
35
- type Props = HTMLAttributes<HTMLDivElement> & {
36
- value?: string | null;
37
- step?: number;
38
- label?: string;
39
- placeholder?: string;
40
- disabled?: boolean;
41
- clearable?: boolean;
42
- initialSystem?: "iso" | "english";
43
- onChange?: (value: string | null) => void;
44
- class?: string;
45
- };
46
- declare const TimePicker: import("svelte").Component<Props, {}, "value">;
47
- type TimePicker = ReturnType<typeof TimePicker>;
48
- export default TimePicker;
package/dist/lib/Toast.svelte DELETED
@@ -1,226 +0,0 @@
1
- <!-- src/lib/Toast.svelte -->
2
- <script lang="ts">
3
- /**
4
- * @component Toast
5
- * @description Lightweight notification component for transient messages.
6
- *
7
- * @prop title {string} - Optional title displayed above the message
8
- *
9
- * @prop message {string} - Toast message content
10
- *
11
- * @prop variant {ToastVariant} - Visual style
12
- * @options success|danger|warning|info
13
- * @default info
14
- *
15
- * @prop showIcon {boolean} - Shows an icon matching the variant
16
- * @default true
17
- *
18
- * @prop closable {boolean} - Shows a close button
19
- * @default true
20
- *
21
- * @prop timeout {number} - Auto-hide timeout in milliseconds
22
- * @default 3000
23
- *
24
- * @prop onClose {() => void} - Fired when the toast closes
25
- * @default () => {}
26
- *
27
- * @prop class {string} - Additional wrapper classes
28
- * @default ""
29
- *
30
- * @note Automatically hides after `timeout`.
31
- * @note Can be closed manually if `closable = true`.
32
- * @note Variant controls color and icon style.
33
- */
34
- import { fade } from "svelte/transition";
35
- import type { ToastVariant } from "./types";
36
- import { cx } from "../utils";
37
-
38
- type Props = {
39
- title?: string;
40
- message: string;
41
- variant?: ToastVariant;
42
- showIcon?: boolean;
43
- closable?: boolean;
44
- timeout?: number;
45
- onClose?: () => void;
46
- class?: string;
47
- };
48
-
49
- let {
50
- title,
51
- message,
52
- variant = "info",
53
- showIcon = true,
54
- closable = true,
55
- timeout = 3000,
56
- onClose = () => {},
57
- class: externalClass = "",
58
- }: Props = $props();
59
-
60
- let visible = $state(true);
61
-
62
- function variantClasses(v: ToastVariant) {
63
- switch (v) {
64
- case "success":
65
- return "bg-[var(--color-bg-success)] text-[var(--color-text-success)]";
66
- case "danger":
67
- return "bg-[var(--color-bg-danger)] text-[var(--color-text-danger)]";
68
- case "warning":
69
- return "bg-[var(--color-bg-warning)] text-[var(--color-text-warning)]";
70
- default:
71
- return "bg-[var(--color-bg-page)] text-[var(--color-text-default)]";
72
- }
73
- }
74
-
75
- function close() {
76
- visible = false;
77
- onClose();
78
- }
79
-
80
- $effect(() => {
81
- if (timeout > 0) {
82
- const id = setTimeout(() => close(), timeout);
83
- return () => clearTimeout(id);
84
- }
85
- });
86
-
87
- const rootClass = $derived(
88
- cx(
89
- "fixed bottom-4 right-4 flex items-center gap-3 px-4 py-3 rounded-[var(--radius-lg)] shadow-lg min-w-[220px] max-w-[calc(100vw-2rem)] border border-[var(--border-color-default)] backdrop-blur-sm",
90
- variantClasses(variant),
91
- externalClass
92
- )
93
- );
94
- </script>
95
-
96
- {#if visible}
97
- <div
98
- class={rootClass}
99
- role="status"
100
- aria-live="polite"
101
- in:fade={{ duration: 200 }}
102
- out:fade={{ duration: 200 }}
103
- >
104
- {#if showIcon}
105
- <span class="w-5 h-5 flex-shrink-0" aria-hidden="true">
106
- {#if variant === "success"}
107
- <svg fill="none" viewBox="0 0 26 26">
108
- <path
109
- d="M8.5 14L11.1 16.6"
110
- stroke="currentColor"
111
- stroke-linecap="round"
112
- stroke-miterlimit="10"
113
- stroke-width="2"
114
- />
115
- <path
116
- d="M18.2 10L11.6 16.6"
117
- stroke="currentColor"
118
- stroke-linecap="round"
119
- stroke-miterlimit="10"
120
- stroke-width="2"
121
- />
122
- <path
123
- d="M13 25C19.6274 25 25 19.6274 25 13C25 6.37258 19.6274 1 13 1C6.37258 1 1 6.37258 1 13C1 19.6274 6.37258 25 13 25Z"
124
- stroke="currentColor"
125
- stroke-linecap="round"
126
- stroke-miterlimit="10"
127
- stroke-width="2"
128
- />
129
- </svg>
130
- {:else if variant === "danger"}
131
- <svg fill="none" viewBox="0 0 26 26">
132
- <path
133
- d="M13 25C19.6274 25 25 19.6274 25 13C25 6.37258 19.6274 1 13 1C6.37258 1 1 6.37258 1 13C1 19.6274 6.37258 25 13 25Z"
134
- stroke="currentColor"
135
- stroke-linecap="round"
136
- stroke-miterlimit="10"
137
- stroke-width="2"
138
- />
139
- <path
140
- d="M9 9.5L16.7 17.3"
141
- stroke="currentColor"
142
- stroke-linecap="round"
143
- stroke-miterlimit="10"
144
- stroke-width="2"
145
- />
146
- <path
147
- d="M16.7 9.5L9 17.3"
148
- stroke="currentColor"
149
- stroke-linecap="round"
150
- stroke-miterlimit="10"
151
- stroke-width="2"
152
- />
153
- </svg>
154
- {:else if variant === "warning"}
155
- <svg fill="none" viewBox="0 0 27 27">
156
- <path
157
- d="M4.6 25.925H22.5C25.2 25.925 26.8 23.022 25.6 20.6195L16.6 3.80194C15.3 1.29934 11.8 1.29934 10.5 3.80194L1.5 20.6195C0.299997 23.022 1.9 25.925 4.6 25.925Z"
158
- stroke="currentColor"
159
- stroke-linecap="round"
160
- stroke-miterlimit="10"
161
- stroke-width="2"
162
- />
163
- <path
164
- d="M13.9 18.0168H13.2C12.5 18.0168 12.6 17.4162 12.6 16.7154L11.9 9.30769C11.9 8.60696 12.5 8.00635 13.2 8.00635H13.9C14.6 8.00635 15.2 8.60696 15.2 9.30769L14.5 16.7154C14.5 17.4162 14.6 18.0168 13.9 18.0168Z"
165
- fill="currentColor"
166
- />
167
- <path
168
- d="M13.5 21.9208C14.4389 21.9208 15.2 21.3382 15.2 20.6195C15.2 19.9008 14.4389 19.3181 13.5 19.3181C12.5611 19.3181 11.8 19.9008 11.8 20.6195C11.8 21.3382 12.5611 21.9208 13.5 21.9208Z"
169
- fill="currentColor"
170
- />
171
- </svg>
172
- {:else}
173
- <svg fill="none" viewBox="0 0 26 26">
174
- <path
175
- d="M13 25C19.6274 25 25 19.6274 25 13C25 6.37258 19.6274 1 13 1C6.37258 1 1 6.37258 1 13C1 19.6274 6.37258 25 13 25Z"
176
- stroke="currentColor"
177
- stroke-miterlimit="10"
178
- stroke-width="2"
179
- />
180
- <path
181
- d="M13 9.00003C13.718 9.00003 14.3 8.41801 14.3 7.70004C14.3 6.98207 13.718 6.40002 13 6.40002C12.282 6.40002 11.7 6.98207 11.7 7.70004C11.7 8.41801 12.282 9.00003 13 9.00003Z"
182
- fill="currentColor"
183
- />
184
- <path
185
- d="M13 19.7C12.2 19.7 11.6 19.1 11.6 18.4V11.6C11.6 10.9 12.2 10.3 12.9 10.3H13C13.7 10.3 14.3 10.9 14.3 11.6V18.4C14.3 19.1 13.8 19.7 13 19.7Z"
186
- fill="currentColor"
187
- />
188
- </svg>
189
- {/if}
190
- </span>
191
- {/if}
192
-
193
- <div class="flex-1 min-w-0">
194
- {#if title}
195
- <div
196
- class="font-[var(--font-weight-medium)] truncate [font-size:var(--text-md)] max-sm:[font-size:var(--text-sm)]"
197
- >
198
- {title}
199
- </div>
200
- {/if}
201
- <div
202
- class="line-clamp-3 [font-size:var(--text-sm)] max-sm:[font-size:var(--text-xs)]"
203
- title={message}
204
- >
205
- {message}
206
- </div>
207
- </div>
208
-
209
- {#if closable}
210
- <button
211
- class="opacity-70 hover:opacity-100 transition-opacity duration-[var(--transition-fast)] ml-3"
212
- aria-label="Close"
213
- onclick={close}
214
- >
215
- <svg width="24" height="24" viewBox="0 0 20 20" fill="none">
216
- <path
217
- d="M7 7l6 6M13 7l-6 6"
218
- stroke="currentColor"
219
- stroke-width="2"
220
- stroke-linecap="round"
221
- />
222
- </svg>
223
- </button>
224
- {/if}
225
- </div>
226
- {/if}