svelte-comp 1.3.5 → 1.3.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.
Files changed (46) hide show
  1. package/LICENSE.md +21 -21
  2. package/README.md +101 -101
  3. package/dist/App.svelte +1046 -1046
  4. package/dist/Container.svelte +59 -59
  5. package/dist/app.css +234 -234
  6. package/dist/app.d.ts +10 -10
  7. package/dist/lib/Accordion.svelte +155 -155
  8. package/dist/lib/Badge.svelte +44 -44
  9. package/dist/lib/Button.svelte +185 -185
  10. package/dist/lib/Calendar.svelte +384 -384
  11. package/dist/lib/Card.svelte +103 -103
  12. package/dist/lib/Carousel.svelte +293 -293
  13. package/dist/lib/CheckBox.svelte +210 -210
  14. package/dist/lib/CodeView.svelte +308 -308
  15. package/dist/lib/ColorPicker.svelte +159 -159
  16. package/dist/lib/ContextMenu.svelte +328 -328
  17. package/dist/lib/DatePicker.svelte +246 -246
  18. package/dist/lib/Dialog.svelte +233 -233
  19. package/dist/lib/Field.svelte +299 -299
  20. package/dist/lib/FilePicker.svelte +295 -295
  21. package/dist/lib/Form.svelte +438 -438
  22. package/dist/lib/Hamburger.svelte +217 -217
  23. package/dist/lib/InstallPWA.svelte +94 -94
  24. package/dist/lib/Menu.svelte +623 -623
  25. package/dist/lib/NoticeBase.svelte +140 -140
  26. package/dist/lib/PaginatedCard.svelte +73 -73
  27. package/dist/lib/Pagination.svelte +119 -119
  28. package/dist/lib/PrimaryColorSelect.svelte +111 -111
  29. package/dist/lib/ProgressBar.svelte +141 -141
  30. package/dist/lib/ProgressCircle.svelte +190 -190
  31. package/dist/lib/Radio.svelte +189 -189
  32. package/dist/lib/SearchInput.svelte +104 -104
  33. package/dist/lib/Select.svelte +524 -524
  34. package/dist/lib/Slider.svelte +253 -253
  35. package/dist/lib/Splitter.svelte +159 -159
  36. package/dist/lib/Switch.svelte +168 -168
  37. package/dist/lib/Table.svelte +299 -299
  38. package/dist/lib/Tabs.svelte +213 -213
  39. package/dist/lib/ThemeToggle.svelte +128 -128
  40. package/dist/lib/TimePicker.svelte +312 -312
  41. package/dist/lib/TimePickerNew.svelte +634 -634
  42. package/dist/lib/Toast.svelte +123 -123
  43. package/dist/lib/Tooltip.svelte +110 -110
  44. package/dist/lib/Topbar.svelte +112 -112
  45. package/dist/styles.css +234 -234
  46. package/package.json +52 -52
package/dist/lib/ThemeToggle.svelte CHANGED
@@ -1,128 +1,128 @@
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
- [@media(pointer:coarse)]:min-h-11 [@media(pointer:coarse)]:min-w-11
52
- disabled:opacity-[var(--opacity-disabled)]
53
- disabled:cursor-not-allowed
54
- disabled:brightness-100
55
- disabled:active:scale-100
56
- disabled:hover:brightness-100
57
- `;
58
-
59
- const sizes: Record<SizeKey, string> = {
60
- xs: "px-2 py-0.5 h-6",
61
- sm: "px-3 py-1 h-7",
62
- md: "px-4 py-2 h-8",
63
- lg: "px-5 py-2.5 h-9",
64
- xl: "px-6 py-3 h-10",
65
- };
66
-
67
- const position = "fixed top-4 right-4 z-50";
68
-
69
- const mergedClass = $derived(
70
- cx(
71
- externalClass ? null : position,
72
- base,
73
- sizes[sz],
74
- TEXT[sz],
75
- externalClass
76
- )
77
- );
78
-
79
- $effect(() => {
80
- document.documentElement.classList.toggle("dark", darkMode);
81
- storage.set(STORAGE_KEY, darkMode);
82
- });
83
- </script>
84
-
85
- <button
86
- {type}
87
- {disabled}
88
- class={mergedClass}
89
- onclick={() => (darkMode = !darkMode)}
90
- aria-label={darkMode ? "Switch to light mode" : "Switch to dark mode"}
91
- {...rest}
92
- >
93
- {#if darkMode}
94
- <svg
95
- class="w-[1em] h-[1em]"
96
- viewBox="0 0 24 24"
97
- fill="none"
98
- stroke="currentColor"
99
- stroke-width="2"
100
- >
101
- <circle cx="12" cy="12" r="4" fill="currentColor" />
102
- <line x1="12" y1="1" x2="12" y2="4" />
103
- <line x1="12" y1="20" x2="12" y2="23" />
104
- <line x1="4.22" y1="4.22" x2="6.34" y2="6.34" />
105
- <line x1="17.66" y1="17.66" x2="19.78" y2="19.78" />
106
- <line x1="1" y1="12" x2="4" y2="12" />
107
- <line x1="20" y1="12" x2="23" y2="12" />
108
- <line x1="4.22" y1="19.78" x2="6.34" y2="17.66" />
109
- <line x1="17.66" y1="6.34" x2="19.78" y2="4.22" />
110
- </svg>
111
- {:else}
112
- <svg
113
- class="w-[1em] h-[1em]"
114
- viewBox="0 0 24 24"
115
- fill="none"
116
- stroke="currentColor"
117
- stroke-width="2"
118
- >
119
- <path
120
- d="M12 2
121
- A9 9 0 1 0 21 12
122
- A7.5 7.5 0 1 1 12 2
123
- Z"
124
- fill="currentColor"
125
- />
126
- </svg>
127
- {/if}
128
- </button>
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
+ [@media(pointer:coarse)]:min-h-11 [@media(pointer:coarse)]:min-w-11
52
+ disabled:opacity-[var(--opacity-disabled)]
53
+ disabled:cursor-not-allowed
54
+ disabled:brightness-100
55
+ disabled:active:scale-100
56
+ disabled:hover:brightness-100
57
+ `;
58
+
59
+ const sizes: Record<SizeKey, string> = {
60
+ xs: "px-2 py-0.5 h-6",
61
+ sm: "px-3 py-1 h-7",
62
+ md: "px-4 py-2 h-8",
63
+ lg: "px-5 py-2.5 h-9",
64
+ xl: "px-6 py-3 h-10",
65
+ };
66
+
67
+ const position = "fixed top-4 right-4 z-50";
68
+
69
+ const mergedClass = $derived(
70
+ cx(
71
+ externalClass ? null : position,
72
+ base,
73
+ sizes[sz],
74
+ TEXT[sz],
75
+ externalClass
76
+ )
77
+ );
78
+
79
+ $effect(() => {
80
+ document.documentElement.classList.toggle("dark", darkMode);
81
+ storage.set(STORAGE_KEY, darkMode);
82
+ });
83
+ </script>
84
+
85
+ <button
86
+ {type}
87
+ {disabled}
88
+ class={mergedClass}
89
+ onclick={() => (darkMode = !darkMode)}
90
+ aria-label={darkMode ? "Switch to light mode" : "Switch to dark mode"}
91
+ {...rest}
92
+ >
93
+ {#if darkMode}
94
+ <svg
95
+ class="w-[1em] h-[1em]"
96
+ viewBox="0 0 24 24"
97
+ fill="none"
98
+ stroke="currentColor"
99
+ stroke-width="2"
100
+ >
101
+ <circle cx="12" cy="12" r="4" fill="currentColor" />
102
+ <line x1="12" y1="1" x2="12" y2="4" />
103
+ <line x1="12" y1="20" x2="12" y2="23" />
104
+ <line x1="4.22" y1="4.22" x2="6.34" y2="6.34" />
105
+ <line x1="17.66" y1="17.66" x2="19.78" y2="19.78" />
106
+ <line x1="1" y1="12" x2="4" y2="12" />
107
+ <line x1="20" y1="12" x2="23" y2="12" />
108
+ <line x1="4.22" y1="19.78" x2="6.34" y2="17.66" />
109
+ <line x1="17.66" y1="6.34" x2="19.78" y2="4.22" />
110
+ </svg>
111
+ {:else}
112
+ <svg
113
+ class="w-[1em] h-[1em]"
114
+ viewBox="0 0 24 24"
115
+ fill="none"
116
+ stroke="currentColor"
117
+ stroke-width="2"
118
+ >
119
+ <path
120
+ d="M12 2
121
+ A9 9 0 1 0 21 12
122
+ A7.5 7.5 0 1 1 12 2
123
+ Z"
124
+ fill="currentColor"
125
+ />
126
+ </svg>
127
+ {/if}
128
+ </button>