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/Card.svelte CHANGED
@@ -1,103 +1,103 @@
1
- <!-- src/lib/Card.svelte -->
2
- <script lang="ts">
3
- /**
4
- * @component Card
5
- * @description Flexible layout component with optional `header` and `footer` sections. Supports predefined size variants (xs to xl) through the `sz` prop.
6
- *
7
- * @prop header {Snippet} - Content rendered in the card header
8
- *
9
- * @prop footer {Snippet} - Content rendered in the card footer
10
- *
11
- * @prop children {Snippet} - Main body content of the card
12
- *
13
- * @prop class {string} - Additional CSS classes for the card
14
- * @default ""
15
- *
16
- * @prop sz {SizeKey} - Padding and typography preset
17
- * @options xs|sm|md|lg|xl
18
- * @default md
19
- *
20
- * @prop flushHeader {boolean} - Removes padding and border from the header
21
- * @default false
22
- *
23
- * @prop flushFooter {boolean} - Removes padding and border from the footer
24
- * @default false
25
- *
26
- * @note Theme-aware: uses CSS variables (`--color-bg-surface`, `--border-color-default`).
27
- * @note Rounded corners, subtle shadow, and border for a clean visual hierarchy.
28
- * @note Padding and typography scale automatically with `sz`.
29
- * @note Uses `{@render}` snippets instead of legacy `slots`.
30
- */
31
- import type { Snippet } from "svelte";
32
- import { type SizeKey, TEXT } from "./types";
33
- import { cx } from "../utils";
34
-
35
- type Props = {
36
- header?: Snippet;
37
- footer?: Snippet;
38
- children?: Snippet;
39
- class?: string;
40
- sz?: SizeKey;
41
- flushHeader?: boolean;
42
- flushFooter?: boolean;
43
- };
44
-
45
- let {
46
- header,
47
- footer,
48
- children,
49
- class: externalClass = "",
50
- sz = "md",
51
- flushHeader = false,
52
- flushFooter = false,
53
- }: Props = $props();
54
-
55
- const paddingSizes: Record<SizeKey, string> = {
56
- xs: "px-[calc(var(--spacing-sm)+var(--spacing-xs))] py-[var(--spacing-sm)]",
57
- sm: "px-[var(--spacing-md)] py-[var(--spacing-sm)]",
58
- md: "px-[calc(var(--spacing-md)+var(--spacing-xs))] py-[calc(var(--spacing-sm)+var(--spacing-xs))]",
59
- lg: "px-[calc(var(--spacing-md)+var(--spacing-sm))] py-[var(--spacing-md)]",
60
- xl: "px-[calc(var(--spacing-md)+var(--spacing-sm)+var(--spacing-xs))] py-[calc(var(--spacing-md)+var(--spacing-xs))]",
61
- };
62
-
63
- const cardClass = $derived(
64
- cx(
65
- "bg-[var(--color-bg-surface)] border border-[var(--border-color-default)] rounded-[var(--radius-xl)] shadow-[0_1px_2px_var(--shadow-color)] overflow-hidden",
66
- TEXT[sz],
67
- "flex flex-col",
68
- externalClass
69
- )
70
- );
71
-
72
- const headerClass = $derived(
73
- flushHeader
74
- ? ""
75
- : cx("border-b border-[var(--border-color-default)]", paddingSizes[sz])
76
- );
77
-
78
- const contentClass = $derived(cx(paddingSizes[sz], "flex-1 min-h-0"));
79
-
80
- const footerClass = $derived(
81
- flushFooter
82
- ? ""
83
- : cx("border-t border-[var(--border-color-default)]", paddingSizes[sz])
84
- );
85
- </script>
86
-
87
- <div class={cardClass}>
88
- {#if header}
89
- <div class={headerClass}>
90
- {@render header?.()}
91
- </div>
92
- {/if}
93
-
94
- <div class={contentClass}>
95
- {@render children?.()}
96
- </div>
97
-
98
- {#if footer}
99
- <div class={footerClass}>
100
- {@render footer?.()}
101
- </div>
102
- {/if}
103
- </div>
1
+ <!-- src/lib/Card.svelte -->
2
+ <script lang="ts">
3
+ /**
4
+ * @component Card
5
+ * @description Flexible layout component with optional `header` and `footer` sections. Supports predefined size variants (xs to xl) through the `sz` prop.
6
+ *
7
+ * @prop header {Snippet} - Content rendered in the card header
8
+ *
9
+ * @prop footer {Snippet} - Content rendered in the card footer
10
+ *
11
+ * @prop children {Snippet} - Main body content of the card
12
+ *
13
+ * @prop class {string} - Additional CSS classes for the card
14
+ * @default ""
15
+ *
16
+ * @prop sz {SizeKey} - Padding and typography preset
17
+ * @options xs|sm|md|lg|xl
18
+ * @default md
19
+ *
20
+ * @prop flushHeader {boolean} - Removes padding and border from the header
21
+ * @default false
22
+ *
23
+ * @prop flushFooter {boolean} - Removes padding and border from the footer
24
+ * @default false
25
+ *
26
+ * @note Theme-aware: uses CSS variables (`--color-bg-surface`, `--border-color-default`).
27
+ * @note Rounded corners, subtle shadow, and border for a clean visual hierarchy.
28
+ * @note Padding and typography scale automatically with `sz`.
29
+ * @note Uses `{@render}` snippets instead of legacy `slots`.
30
+ */
31
+ import type { Snippet } from "svelte";
32
+ import { type SizeKey, TEXT } from "./types";
33
+ import { cx } from "../utils";
34
+
35
+ type Props = {
36
+ header?: Snippet;
37
+ footer?: Snippet;
38
+ children?: Snippet;
39
+ class?: string;
40
+ sz?: SizeKey;
41
+ flushHeader?: boolean;
42
+ flushFooter?: boolean;
43
+ };
44
+
45
+ let {
46
+ header,
47
+ footer,
48
+ children,
49
+ class: externalClass = "",
50
+ sz = "md",
51
+ flushHeader = false,
52
+ flushFooter = false,
53
+ }: Props = $props();
54
+
55
+ const paddingSizes: Record<SizeKey, string> = {
56
+ xs: "px-[calc(var(--spacing-sm)+var(--spacing-xs))] py-[var(--spacing-sm)]",
57
+ sm: "px-[var(--spacing-md)] py-[var(--spacing-sm)]",
58
+ md: "px-[calc(var(--spacing-md)+var(--spacing-xs))] py-[calc(var(--spacing-sm)+var(--spacing-xs))]",
59
+ lg: "px-[calc(var(--spacing-md)+var(--spacing-sm))] py-[var(--spacing-md)]",
60
+ xl: "px-[calc(var(--spacing-md)+var(--spacing-sm)+var(--spacing-xs))] py-[calc(var(--spacing-md)+var(--spacing-xs))]",
61
+ };
62
+
63
+ const cardClass = $derived(
64
+ cx(
65
+ "bg-[var(--color-bg-surface)] border border-[var(--border-color-default)] rounded-[var(--radius-xl)] shadow-[0_1px_2px_var(--shadow-color)] overflow-hidden",
66
+ TEXT[sz],
67
+ "flex flex-col",
68
+ externalClass
69
+ )
70
+ );
71
+
72
+ const headerClass = $derived(
73
+ flushHeader
74
+ ? ""
75
+ : cx("border-b border-[var(--border-color-default)]", paddingSizes[sz])
76
+ );
77
+
78
+ const contentClass = $derived(cx(paddingSizes[sz], "flex-1 min-h-0"));
79
+
80
+ const footerClass = $derived(
81
+ flushFooter
82
+ ? ""
83
+ : cx("border-t border-[var(--border-color-default)]", paddingSizes[sz])
84
+ );
85
+ </script>
86
+
87
+ <div class={cardClass}>
88
+ {#if header}
89
+ <div class={headerClass}>
90
+ {@render header?.()}
91
+ </div>
92
+ {/if}
93
+
94
+ <div class={contentClass}>
95
+ {@render children?.()}
96
+ </div>
97
+
98
+ {#if footer}
99
+ <div class={footerClass}>
100
+ {@render footer?.()}
101
+ </div>
102
+ {/if}
103
+ </div>