svelte-comp 1.3.3 → 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 (138) hide show
  1. package/LICENSE.md +21 -21
  2. package/README.md +101 -100
  3. package/dist/App.svelte +507 -507
  4. package/dist/Container.svelte +59 -59
  5. package/dist/app.css +234 -235
  6. package/dist/app.d.ts +10 -0
  7. package/dist/lib/Accordion.svelte +155 -155
  8. package/dist/lib/Badge.svelte +44 -44
  9. package/dist/lib/Button.svelte +185 -170
  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/Carousel.svelte.d.ts +1 -1
  14. package/dist/lib/CheckBox.svelte +210 -210
  15. package/dist/lib/CodeView.svelte +308 -307
  16. package/dist/lib/ColorPicker.svelte +159 -159
  17. package/dist/lib/ContextMenu.svelte +328 -322
  18. package/dist/lib/DatePicker.svelte +246 -246
  19. package/dist/lib/Dialog.svelte +233 -233
  20. package/dist/lib/Field.svelte +299 -299
  21. package/dist/lib/FilePicker.svelte +295 -240
  22. package/dist/lib/FilePicker.svelte.d.ts +6 -1
  23. package/dist/lib/Form.svelte +438 -438
  24. package/dist/lib/Hamburger.svelte +217 -217
  25. package/dist/lib/InstallPWA.svelte +94 -94
  26. package/dist/lib/Menu.svelte +623 -623
  27. package/dist/lib/NoticeBase.svelte +140 -140
  28. package/dist/lib/PaginatedCard.svelte +73 -73
  29. package/dist/lib/Pagination.svelte +119 -119
  30. package/dist/lib/PrimaryColorSelect.svelte +111 -111
  31. package/dist/lib/ProgressBar.svelte +141 -141
  32. package/dist/lib/ProgressCircle.svelte +190 -190
  33. package/dist/lib/Radio.svelte +189 -189
  34. package/dist/lib/SearchInput.svelte +104 -104
  35. package/dist/lib/Select.svelte +524 -524
  36. package/dist/lib/Slider.svelte +253 -253
  37. package/dist/lib/Splitter.svelte +159 -150
  38. package/dist/lib/Switch.svelte +168 -167
  39. package/dist/lib/Table.svelte +299 -299
  40. package/dist/lib/Tabs.svelte +213 -213
  41. package/dist/lib/ThemeToggle.svelte +128 -127
  42. package/dist/lib/TimePicker.svelte +312 -312
  43. package/dist/lib/TimePickerNew.svelte +634 -0
  44. package/dist/lib/TimePickerNew.svelte.d.ts +49 -0
  45. package/dist/lib/Toast.svelte +123 -123
  46. package/dist/lib/Tooltip.svelte +110 -110
  47. package/dist/lib/Topbar.svelte +107 -107
  48. package/dist/lib/__tests__/Accordion.test.d.ts +1 -0
  49. package/dist/lib/__tests__/Accordion.test.js +171 -0
  50. package/dist/lib/__tests__/Badge.test.d.ts +1 -0
  51. package/dist/lib/__tests__/Badge.test.js +41 -0
  52. package/dist/lib/__tests__/Button.test.d.ts +1 -0
  53. package/dist/lib/__tests__/Button.test.js +269 -0
  54. package/dist/lib/__tests__/Calendar.test.d.ts +1 -0
  55. package/dist/lib/__tests__/Calendar.test.js +171 -0
  56. package/dist/lib/__tests__/Card.test.d.ts +1 -0
  57. package/dist/lib/__tests__/Card.test.js +148 -0
  58. package/dist/lib/__tests__/Carousel.test.d.ts +1 -0
  59. package/dist/lib/__tests__/Carousel.test.js +439 -0
  60. package/dist/lib/__tests__/CheckBox.test.d.ts +1 -0
  61. package/dist/lib/__tests__/CheckBox.test.js +152 -0
  62. package/dist/lib/__tests__/CodeView.test.d.ts +1 -0
  63. package/dist/lib/__tests__/CodeView.test.js +157 -0
  64. package/dist/lib/__tests__/ColorPicker.test.d.ts +1 -0
  65. package/dist/lib/__tests__/ColorPicker.test.js +93 -0
  66. package/dist/lib/__tests__/ContextMenu.test.d.ts +1 -0
  67. package/dist/lib/__tests__/ContextMenu.test.js +67 -0
  68. package/dist/lib/__tests__/DatePicker.test.d.ts +1 -0
  69. package/dist/lib/__tests__/DatePicker.test.js +108 -0
  70. package/dist/lib/__tests__/Dialog.test.d.ts +1 -0
  71. package/dist/lib/__tests__/Dialog.test.js +183 -0
  72. package/dist/lib/__tests__/Field.test.d.ts +1 -0
  73. package/dist/lib/__tests__/Field.test.js +190 -0
  74. package/dist/lib/__tests__/FilePicker.test.d.ts +1 -0
  75. package/dist/lib/__tests__/FilePicker.test.js +179 -0
  76. package/dist/lib/__tests__/Form.integration.test.d.ts +1 -0
  77. package/dist/lib/__tests__/Form.integration.test.js +158 -0
  78. package/dist/lib/__tests__/Form.test.d.ts +1 -0
  79. package/dist/lib/__tests__/Form.test.js +463 -0
  80. package/dist/lib/__tests__/Hamburger.test.d.ts +1 -0
  81. package/dist/lib/__tests__/Hamburger.test.js +161 -0
  82. package/dist/lib/__tests__/InstallPWA.test.d.ts +1 -0
  83. package/dist/lib/__tests__/InstallPWA.test.js +15 -0
  84. package/dist/lib/__tests__/Menu.test.d.ts +1 -0
  85. package/dist/lib/__tests__/Menu.test.js +285 -0
  86. package/dist/lib/__tests__/NoticeBase.test.d.ts +1 -0
  87. package/dist/lib/__tests__/NoticeBase.test.js +60 -0
  88. package/dist/lib/__tests__/PaginatedCard.test.d.ts +1 -0
  89. package/dist/lib/__tests__/PaginatedCard.test.js +89 -0
  90. package/dist/lib/__tests__/Pagination.test.d.ts +1 -0
  91. package/dist/lib/__tests__/Pagination.test.js +168 -0
  92. package/dist/lib/__tests__/PrimaryColorSelect.test.d.ts +1 -0
  93. package/dist/lib/__tests__/PrimaryColorSelect.test.js +92 -0
  94. package/dist/lib/__tests__/ProgressBar.test.d.ts +1 -0
  95. package/dist/lib/__tests__/ProgressBar.test.js +69 -0
  96. package/dist/lib/__tests__/ProgressCircle.test.d.ts +1 -0
  97. package/dist/lib/__tests__/ProgressCircle.test.js +71 -0
  98. package/dist/lib/__tests__/Radio.test.d.ts +1 -0
  99. package/dist/lib/__tests__/Radio.test.js +127 -0
  100. package/dist/lib/__tests__/SearchInput.test.d.ts +1 -0
  101. package/dist/lib/__tests__/SearchInput.test.js +80 -0
  102. package/dist/lib/__tests__/Select.test.d.ts +1 -0
  103. package/dist/lib/__tests__/Select.test.js +408 -0
  104. package/dist/lib/__tests__/Slider.test.d.ts +1 -0
  105. package/dist/lib/__tests__/Slider.test.js +213 -0
  106. package/dist/lib/__tests__/Splitter.test.d.ts +1 -0
  107. package/dist/lib/__tests__/Splitter.test.js +87 -0
  108. package/dist/lib/__tests__/Switch.test.d.ts +1 -0
  109. package/dist/lib/__tests__/Switch.test.js +97 -0
  110. package/dist/lib/__tests__/Table.test.d.ts +1 -0
  111. package/dist/lib/__tests__/Table.test.js +349 -0
  112. package/dist/lib/__tests__/Tabs.test.d.ts +1 -0
  113. package/dist/lib/__tests__/Tabs.test.js +262 -0
  114. package/dist/lib/__tests__/ThemeToggle.test.d.ts +1 -0
  115. package/dist/lib/__tests__/ThemeToggle.test.js +84 -0
  116. package/dist/lib/__tests__/TimePicker.test.d.ts +1 -0
  117. package/dist/lib/__tests__/TimePicker.test.js +146 -0
  118. package/dist/lib/__tests__/TimePickerNew.test.d.ts +1 -0
  119. package/dist/lib/__tests__/TimePickerNew.test.js +322 -0
  120. package/dist/lib/__tests__/Toast.test.d.ts +1 -0
  121. package/dist/lib/__tests__/Toast.test.js +135 -0
  122. package/dist/lib/__tests__/Tooltip.test.d.ts +1 -0
  123. package/dist/lib/__tests__/Tooltip.test.js +171 -0
  124. package/dist/lib/__tests__/Topbar.test.d.ts +1 -0
  125. package/dist/lib/__tests__/Topbar.test.js +25 -0
  126. package/dist/lib/__tests__/setupLangContext.d.ts +1 -0
  127. package/dist/lib/__tests__/setupLangContext.js +65 -0
  128. package/dist/lib/__tests__/storage.test.d.ts +1 -0
  129. package/dist/lib/__tests__/storage.test.js +124 -0
  130. package/dist/lib/__tests__/utils.test.d.ts +1 -0
  131. package/dist/lib/__tests__/utils.test.js +11 -0
  132. package/dist/lib/index.d.ts +1 -0
  133. package/dist/lib/index.js +1 -0
  134. package/dist/lib/lang.d.ts +4 -0
  135. package/dist/lib/lang.js +4 -0
  136. package/dist/styles.css +234 -232
  137. package/dist/utils/index.js +15 -4
  138. package/package.json +52 -52
package/dist/lib/ThemeToggle.svelte CHANGED
@@ -1,127 +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
- 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>
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>