sve-ui 0.1.2 → 0.2.0

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 (161) hide show
  1. package/dist/ThemeProvider.svelte +46 -0
  2. package/dist/ThemeProvider.svelte.d.ts +12 -0
  3. package/dist/ThemeProvider.svelte.d.ts.map +1 -0
  4. package/dist/components/Alert/AlertDescription.svelte +31 -0
  5. package/dist/components/Alert/AlertDescription.svelte.d.ts +10 -0
  6. package/dist/components/Alert/AlertDescription.svelte.d.ts.map +1 -0
  7. package/dist/components/Alert/AlertRoot.svelte +103 -0
  8. package/dist/components/Alert/AlertRoot.svelte.d.ts +29 -0
  9. package/dist/components/Alert/AlertRoot.svelte.d.ts.map +1 -0
  10. package/dist/components/Alert/AlertTitle.svelte +34 -0
  11. package/dist/components/Alert/AlertTitle.svelte.d.ts +12 -0
  12. package/dist/components/Alert/AlertTitle.svelte.d.ts.map +1 -0
  13. package/dist/components/Alert/index.d.ts +11 -0
  14. package/dist/components/Alert/index.d.ts.map +1 -0
  15. package/dist/components/Alert/index.js +10 -0
  16. package/dist/components/Avatar/AvatarFallback.svelte +33 -0
  17. package/dist/components/Avatar/AvatarFallback.svelte.d.ts +12 -0
  18. package/dist/components/Avatar/AvatarFallback.svelte.d.ts.map +1 -0
  19. package/dist/components/Avatar/AvatarImage.svelte +27 -0
  20. package/dist/components/Avatar/AvatarImage.svelte.d.ts +12 -0
  21. package/dist/components/Avatar/AvatarImage.svelte.d.ts.map +1 -0
  22. package/dist/components/Avatar/AvatarRoot.svelte +67 -0
  23. package/dist/components/Avatar/AvatarRoot.svelte.d.ts +16 -0
  24. package/dist/components/Avatar/AvatarRoot.svelte.d.ts.map +1 -0
  25. package/dist/components/Avatar/index.d.ts +15 -0
  26. package/dist/components/Avatar/index.d.ts.map +1 -0
  27. package/dist/components/Avatar/index.js +14 -0
  28. package/dist/components/Badge/Badge.svelte +125 -0
  29. package/dist/components/Badge/Badge.svelte.d.ts +37 -0
  30. package/dist/components/Badge/Badge.svelte.d.ts.map +1 -0
  31. package/dist/components/Button/Button.svelte +296 -112
  32. package/dist/components/Button/Button.svelte.d.ts +34 -48
  33. package/dist/components/Button/Button.svelte.d.ts.map +1 -0
  34. package/dist/components/Card/CardContent.svelte +33 -0
  35. package/dist/components/Card/CardContent.svelte.d.ts +10 -0
  36. package/dist/components/Card/CardContent.svelte.d.ts.map +1 -0
  37. package/dist/components/Card/CardFooter.svelte +33 -0
  38. package/dist/components/Card/CardFooter.svelte.d.ts +10 -0
  39. package/dist/components/Card/CardFooter.svelte.d.ts.map +1 -0
  40. package/dist/components/Card/CardHeader.svelte +33 -0
  41. package/dist/components/Card/CardHeader.svelte.d.ts +10 -0
  42. package/dist/components/Card/CardHeader.svelte.d.ts.map +1 -0
  43. package/dist/components/Card/CardRoot.svelte +91 -0
  44. package/dist/components/Card/CardRoot.svelte.d.ts +28 -0
  45. package/dist/components/Card/CardRoot.svelte.d.ts.map +1 -0
  46. package/dist/components/Card/index.d.ts +13 -0
  47. package/dist/components/Card/index.d.ts.map +1 -0
  48. package/dist/components/Card/index.js +12 -0
  49. package/dist/components/Dialog/DialogContent.svelte +47 -0
  50. package/dist/components/Dialog/DialogContent.svelte.d.ts +10 -0
  51. package/dist/components/Dialog/DialogContent.svelte.d.ts.map +1 -0
  52. package/dist/components/Dialog/DialogDescription.svelte +29 -0
  53. package/dist/components/Dialog/DialogDescription.svelte.d.ts +10 -0
  54. package/dist/components/Dialog/DialogDescription.svelte.d.ts.map +1 -0
  55. package/dist/components/Dialog/DialogOverlay.svelte +32 -0
  56. package/dist/components/Dialog/DialogOverlay.svelte.d.ts +10 -0
  57. package/dist/components/Dialog/DialogOverlay.svelte.d.ts.map +1 -0
  58. package/dist/components/Dialog/DialogTitle.svelte +30 -0
  59. package/dist/components/Dialog/DialogTitle.svelte.d.ts +10 -0
  60. package/dist/components/Dialog/DialogTitle.svelte.d.ts.map +1 -0
  61. package/dist/components/Dialog/index.d.ts +21 -0
  62. package/dist/components/Dialog/index.d.ts.map +1 -0
  63. package/dist/components/Dialog/index.js +22 -0
  64. package/dist/components/DropdownMenu/DropdownMenuContent.svelte +40 -0
  65. package/dist/components/DropdownMenu/DropdownMenuContent.svelte.d.ts +10 -0
  66. package/dist/components/DropdownMenu/DropdownMenuContent.svelte.d.ts.map +1 -0
  67. package/dist/components/DropdownMenu/DropdownMenuGroup.svelte +18 -0
  68. package/dist/components/DropdownMenu/DropdownMenuGroup.svelte.d.ts +10 -0
  69. package/dist/components/DropdownMenu/DropdownMenuGroup.svelte.d.ts.map +1 -0
  70. package/dist/components/DropdownMenu/DropdownMenuItem.svelte +40 -0
  71. package/dist/components/DropdownMenu/DropdownMenuItem.svelte.d.ts +10 -0
  72. package/dist/components/DropdownMenu/DropdownMenuItem.svelte.d.ts.map +1 -0
  73. package/dist/components/DropdownMenu/DropdownMenuLabel.svelte +34 -0
  74. package/dist/components/DropdownMenu/DropdownMenuLabel.svelte.d.ts +10 -0
  75. package/dist/components/DropdownMenu/DropdownMenuLabel.svelte.d.ts.map +1 -0
  76. package/dist/components/DropdownMenu/DropdownMenuSeparator.svelte +25 -0
  77. package/dist/components/DropdownMenu/DropdownMenuSeparator.svelte.d.ts +10 -0
  78. package/dist/components/DropdownMenu/DropdownMenuSeparator.svelte.d.ts.map +1 -0
  79. package/dist/components/DropdownMenu/index.d.ts +31 -0
  80. package/dist/components/DropdownMenu/index.d.ts.map +1 -0
  81. package/dist/components/DropdownMenu/index.js +33 -0
  82. package/dist/components/Heading/Heading.svelte +72 -0
  83. package/dist/components/Heading/Heading.svelte.d.ts +18 -0
  84. package/dist/components/Heading/Heading.svelte.d.ts.map +1 -0
  85. package/dist/components/Input/Input.svelte +151 -0
  86. package/dist/components/Input/Input.svelte.d.ts +25 -0
  87. package/dist/components/Input/Input.svelte.d.ts.map +1 -0
  88. package/dist/components/Popover/PopoverContent.svelte +40 -0
  89. package/dist/components/Popover/PopoverContent.svelte.d.ts +10 -0
  90. package/dist/components/Popover/PopoverContent.svelte.d.ts.map +1 -0
  91. package/dist/components/Popover/index.d.ts +20 -0
  92. package/dist/components/Popover/index.d.ts.map +1 -0
  93. package/dist/components/Popover/index.js +21 -0
  94. package/dist/components/Spinner/Spinner.svelte +82 -0
  95. package/dist/components/Spinner/Spinner.svelte.d.ts +13 -0
  96. package/dist/components/Spinner/Spinner.svelte.d.ts.map +1 -0
  97. package/dist/components/Text/Text.svelte +84 -45
  98. package/dist/components/Text/Text.svelte.d.ts +20 -44
  99. package/dist/components/Text/Text.svelte.d.ts.map +1 -0
  100. package/dist/components/Tooltip/TooltipContent.svelte +41 -0
  101. package/dist/components/Tooltip/TooltipContent.svelte.d.ts +10 -0
  102. package/dist/components/Tooltip/TooltipContent.svelte.d.ts.map +1 -0
  103. package/dist/components/Tooltip/index.d.ts +19 -0
  104. package/dist/components/Tooltip/index.d.ts.map +1 -0
  105. package/dist/components/Tooltip/index.js +20 -0
  106. package/dist/context.d.ts +14 -0
  107. package/dist/context.d.ts.map +1 -0
  108. package/dist/context.js +16 -0
  109. package/dist/index.d.ts +28 -26
  110. package/dist/index.d.ts.map +1 -0
  111. package/dist/index.js +43 -13
  112. package/dist/internal/variants.d.ts +44 -0
  113. package/dist/internal/variants.d.ts.map +1 -0
  114. package/dist/internal/variants.js +54 -0
  115. package/dist/theme/breakpoints.d.ts +1 -0
  116. package/dist/theme/breakpoints.d.ts.map +1 -0
  117. package/dist/theme/index.d.ts +12 -182
  118. package/dist/theme/index.d.ts.map +1 -0
  119. package/dist/theme/index.js +13 -19
  120. package/dist/theme/palette.d.ts +153 -0
  121. package/dist/theme/palette.d.ts.map +1 -0
  122. package/dist/theme/palette.js +85 -0
  123. package/dist/theme/radius.d.ts +1 -0
  124. package/dist/theme/radius.d.ts.map +1 -0
  125. package/dist/theme/sizes.d.ts +1 -0
  126. package/dist/theme/sizes.d.ts.map +1 -0
  127. package/dist/theme/spacing.d.ts +1 -0
  128. package/dist/theme/spacing.d.ts.map +1 -0
  129. package/dist/theme/theme.css +268 -0
  130. package/dist/theme/tokens.d.ts +108 -0
  131. package/dist/theme/tokens.d.ts.map +1 -0
  132. package/dist/theme/tokens.js +236 -0
  133. package/dist/theme/typography.d.ts +1 -0
  134. package/dist/theme/typography.d.ts.map +1 -0
  135. package/package.json +74 -67
  136. package/README.md +0 -94
  137. package/dist/components/Box/Box.svelte +0 -48
  138. package/dist/components/Box/Box.svelte.d.ts +0 -160
  139. package/dist/components/Center/Center.svelte +0 -15
  140. package/dist/components/Center/Center.svelte.d.ts +0 -25
  141. package/dist/components/Circle/Circle.svelte +0 -9
  142. package/dist/components/Circle/Circle.svelte.d.ts +0 -34
  143. package/dist/components/CodeExample/CodeExample.svelte +0 -128
  144. package/dist/components/CodeExample/CodeExample.svelte.d.ts +0 -46
  145. package/dist/components/Flex/Flex.svelte +0 -26
  146. package/dist/components/Flex/Flex.svelte.d.ts +0 -34
  147. package/dist/components/Grid/Grid.svelte +0 -16
  148. package/dist/components/Grid/Grid.svelte.d.ts +0 -44
  149. package/dist/components/GridItem/GridItem.svelte +0 -22
  150. package/dist/components/GridItem/GridItem.svelte.d.ts +0 -29
  151. package/dist/components/Loaders/DotPulse.svelte +0 -62
  152. package/dist/components/Loaders/DotPulse.svelte.d.ts +0 -40
  153. package/dist/components/Loaders/DotSpinner.svelte +0 -121
  154. package/dist/components/Loaders/DotSpinner.svelte.d.ts +0 -40
  155. package/dist/components/Loaders/DotWave.svelte +0 -67
  156. package/dist/components/Loaders/DotWave.svelte.d.ts +0 -40
  157. package/dist/components/Spacer/Spacer.svelte +0 -5
  158. package/dist/components/Spacer/Spacer.svelte.d.ts +0 -21
  159. package/dist/components/Square/Square.svelte +0 -17
  160. package/dist/components/Square/Square.svelte.d.ts +0 -34
  161. /package/{LICENCE → LICENSE} +0 -0
package/dist/ThemeProvider.svelte ADDED
@@ -0,0 +1,46 @@
1
+ <script lang="ts">
2
+ import type { Snippet } from 'svelte';
3
+ import { setThemeContext } from './context';
4
+ import { themeToVars, type PartialSveTheme } from './theme/tokens';
5
+
6
+ interface Props {
7
+ colorScheme?: 'light' | 'dark' | 'system';
8
+ theme?: PartialSveTheme;
9
+ class?: string;
10
+ children?: Snippet;
11
+ }
12
+
13
+ let {
14
+ colorScheme = 'system',
15
+ theme,
16
+ class: cls,
17
+ children,
18
+ }: Props = $props();
19
+
20
+ // TODO(phase-2): headSnippet for persisted scheme — inject a <script> into <head>
21
+ // that reads localStorage/cookie before first paint to avoid FOUC when the user's
22
+ // preferred scheme differs from the server-rendered default.
23
+
24
+ /**
25
+ * Inline CSS vars — only rendered when a theme override prop is provided.
26
+ * SSR-safe: Svelte emits the style attribute on the server too.
27
+ */
28
+ const styleVars = $derived(theme ? themeToVars(theme) : undefined);
29
+
30
+ // Expose color scheme to descendant components via Svelte context.
31
+ setThemeContext({
32
+ get colorScheme() {
33
+ return colorScheme;
34
+ },
35
+ });
36
+ </script>
37
+
38
+ <div
39
+ class={`sve-theme${cls ? ` ${cls}` : ''}`}
40
+ data-scheme={colorScheme}
41
+ class:dark={colorScheme === 'dark'}
42
+ class:light={colorScheme === 'light'}
43
+ style={styleVars}
44
+ >
45
+ {@render children?.()}
46
+ </div>
package/dist/ThemeProvider.svelte.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ import type { Snippet } from 'svelte';
2
+ import { type PartialSveTheme } from './theme/tokens';
3
+ interface Props {
4
+ colorScheme?: 'light' | 'dark' | 'system';
5
+ theme?: PartialSveTheme;
6
+ class?: string;
7
+ children?: Snippet;
8
+ }
9
+ declare const ThemeProvider: import("svelte").Component<Props, {}, "">;
10
+ type ThemeProvider = ReturnType<typeof ThemeProvider>;
11
+ export default ThemeProvider;
12
+ //# sourceMappingURL=ThemeProvider.svelte.d.ts.map
package/dist/ThemeProvider.svelte.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ThemeProvider.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ThemeProvider.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,EAAe,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGjE,UAAU,KAAK;IACb,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;IAC1C,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAsCH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
package/dist/components/Alert/AlertDescription.svelte ADDED
@@ -0,0 +1,31 @@
1
+ <script lang="ts">
2
+ import type { HTMLAttributes } from 'svelte/elements';
3
+ import type { Snippet } from 'svelte';
4
+
5
+ interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'class'> {
6
+ class?: string;
7
+ children?: Snippet;
8
+ }
9
+
10
+ let {
11
+ class: cls,
12
+ children,
13
+ ...rest
14
+ }: Props = $props();
15
+
16
+ const className = $derived(
17
+ ['sve-alert__description', cls].filter(Boolean).join(' ')
18
+ );
19
+ </script>
20
+
21
+ <div class={className} {...rest}>
22
+ {@render children?.()}
23
+ </div>
24
+
25
+ <style>
26
+ .sve-alert__description {
27
+ font-size: var(--sve-font-size-sm);
28
+ line-height: var(--sve-line-height-normal);
29
+ opacity: 0.85;
30
+ }
31
+ </style>
package/dist/components/Alert/AlertDescription.svelte.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ import type { HTMLAttributes } from 'svelte/elements';
2
+ import type { Snippet } from 'svelte';
3
+ interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'class'> {
4
+ class?: string;
5
+ children?: Snippet;
6
+ }
7
+ declare const AlertDescription: import("svelte").Component<Props, {}, "">;
8
+ type AlertDescription = ReturnType<typeof AlertDescription>;
9
+ export default AlertDescription;
10
+ //# sourceMappingURL=AlertDescription.svelte.d.ts.map
package/dist/components/Alert/AlertDescription.svelte.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AlertDescription.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Alert/AlertDescription.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAM,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAyBH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
package/dist/components/Alert/AlertRoot.svelte ADDED
@@ -0,0 +1,103 @@
1
+ <script module lang="ts">
2
+ import { defineVariants } from '../../internal/variants';
3
+
4
+ type Color = 'default' | 'primary' | 'success' | 'warning' | 'danger';
5
+ type Variant = 'subtle' | 'solid' | 'outline';
6
+
7
+ export const alertVariants = defineVariants({
8
+ base: 'sve-alert',
9
+ variants: {
10
+ variant: {
11
+ subtle: 'sve-alert--subtle',
12
+ solid: 'sve-alert--solid',
13
+ outline: 'sve-alert--outline',
14
+ },
15
+ color: {
16
+ default: 'sve-c-default',
17
+ primary: 'sve-c-primary',
18
+ success: 'sve-c-success',
19
+ warning: 'sve-c-warning',
20
+ danger: 'sve-c-danger',
21
+ },
22
+ },
23
+ defaultVariants: {
24
+ variant: 'subtle',
25
+ color: 'default',
26
+ },
27
+ });
28
+
29
+ export type { Color, Variant };
30
+ </script>
31
+
32
+ <script lang="ts">
33
+ import type { HTMLAttributes } from 'svelte/elements';
34
+ import type { Snippet } from 'svelte';
35
+
36
+ interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'role'> {
37
+ color?: Color;
38
+ variant?: Variant;
39
+ class?: string;
40
+ children?: Snippet;
41
+ }
42
+
43
+ let {
44
+ color,
45
+ variant,
46
+ class: cls,
47
+ children,
48
+ ...rest
49
+ }: Props = $props();
50
+
51
+ const className = $derived(
52
+ alertVariants({ color, variant, class: cls })
53
+ );
54
+
55
+ const role = $derived(
56
+ color === 'danger' || color === 'warning' ? 'alert' : 'status'
57
+ );
58
+ </script>
59
+
60
+ <!--
61
+ Live-region behavior: role="alert" and role="status" only trigger
62
+ screen-reader announcement when the element is *dynamically inserted*
63
+ into the DOM after initial page load. Alerts present on SSR / initial
64
+ render are NOT announced automatically — this is a browser limitation.
65
+ If you need an alert to be announced on first render, use aria-live
66
+ and insert the element after a short delay in the client.
67
+ -->
68
+ <div class={className} {role} {...rest}>
69
+ {@render children?.()}
70
+ </div>
71
+
72
+ <style>
73
+ .sve-alert {
74
+ display: flex;
75
+ flex-direction: column;
76
+ gap: var(--sve-space-1);
77
+ padding: var(--sve-space-4);
78
+ border-radius: var(--sve-radius-md);
79
+ border: 1px solid transparent;
80
+ font-family: var(--sve-font-family-sans);
81
+ }
82
+
83
+ /* --- Subtle variant --- */
84
+ .sve-alert--subtle.sve-c-default { background-color: var(--sve-color-default-surface); color: var(--sve-color-default-foreground); border-color: transparent; }
85
+ .sve-alert--subtle.sve-c-primary { background-color: var(--sve-color-primary-surface); color: var(--sve-color-primary); border-color: transparent; }
86
+ .sve-alert--subtle.sve-c-success { background-color: var(--sve-color-success-surface); color: var(--sve-color-success); border-color: transparent; }
87
+ .sve-alert--subtle.sve-c-warning { background-color: var(--sve-color-warning-surface); color: var(--sve-color-warning-foreground); border-color: transparent; }
88
+ .sve-alert--subtle.sve-c-danger { background-color: var(--sve-color-danger-surface); color: var(--sve-color-danger); border-color: transparent; }
89
+
90
+ /* --- Solid variant --- */
91
+ .sve-alert--solid.sve-c-default { background-color: var(--sve-color-default); color: var(--sve-color-default-foreground); border-color: var(--sve-color-default); }
92
+ .sve-alert--solid.sve-c-primary { background-color: var(--sve-color-primary); color: var(--sve-color-primary-foreground); border-color: var(--sve-color-primary); }
93
+ .sve-alert--solid.sve-c-success { background-color: var(--sve-color-success); color: var(--sve-color-success-foreground); border-color: var(--sve-color-success); }
94
+ .sve-alert--solid.sve-c-warning { background-color: var(--sve-color-warning); color: var(--sve-color-warning-foreground); border-color: var(--sve-color-warning); }
95
+ .sve-alert--solid.sve-c-danger { background-color: var(--sve-color-danger); color: var(--sve-color-danger-foreground); border-color: var(--sve-color-danger); }
96
+
97
+ /* --- Outline variant --- */
98
+ .sve-alert--outline.sve-c-default { background-color: transparent; color: var(--sve-color-default-foreground); border-color: var(--sve-color-default-border); }
99
+ .sve-alert--outline.sve-c-primary { background-color: transparent; color: var(--sve-color-primary); border-color: var(--sve-color-primary-border); }
100
+ .sve-alert--outline.sve-c-success { background-color: transparent; color: var(--sve-color-success); border-color: var(--sve-color-success-border); }
101
+ .sve-alert--outline.sve-c-warning { background-color: transparent; color: var(--sve-color-warning-foreground); border-color: var(--sve-color-warning-border); }
102
+ .sve-alert--outline.sve-c-danger { background-color: transparent; color: var(--sve-color-danger); border-color: var(--sve-color-danger-border); }
103
+ </style>
package/dist/components/Alert/AlertRoot.svelte.d.ts ADDED
@@ -0,0 +1,29 @@
1
+ type Color = 'default' | 'primary' | 'success' | 'warning' | 'danger';
2
+ type Variant = 'subtle' | 'solid' | 'outline';
3
+ export declare const alertVariants: (props?: import("../../internal/variants").VariantProps<{
4
+ variant: {
5
+ subtle: string;
6
+ solid: string;
7
+ outline: string;
8
+ };
9
+ color: {
10
+ default: string;
11
+ primary: string;
12
+ success: string;
13
+ warning: string;
14
+ danger: string;
15
+ };
16
+ }> | undefined) => string;
17
+ export type { Color, Variant };
18
+ import type { HTMLAttributes } from 'svelte/elements';
19
+ import type { Snippet } from 'svelte';
20
+ interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'role'> {
21
+ color?: Color;
22
+ variant?: Variant;
23
+ class?: string;
24
+ children?: Snippet;
25
+ }
26
+ declare const AlertRoot: import("svelte").Component<Props, {}, "">;
27
+ type AlertRoot = ReturnType<typeof AlertRoot>;
28
+ export default AlertRoot;
29
+ //# sourceMappingURL=AlertRoot.svelte.d.ts.map
package/dist/components/Alert/AlertRoot.svelte.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AlertRoot.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Alert/AlertRoot.svelte.ts"],"names":[],"mappings":"AAKE,KAAK,KAAK,GAAK,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AACxE,KAAK,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;AAE9C,eAAO,MAAM,aAAa;;;;;;;;;;;;;yBAoBxB,CAAC;AAEH,YAAY,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC;AAGjC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAM,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC5E,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAkCH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
package/dist/components/Alert/AlertTitle.svelte ADDED
@@ -0,0 +1,34 @@
1
+ <script lang="ts">
2
+ import type { HTMLAttributes } from 'svelte/elements';
3
+ import type { Snippet } from 'svelte';
4
+
5
+ interface Props extends Omit<HTMLAttributes<HTMLElement>, 'class'> {
6
+ /** Element to render. Defaults to a semantic `<p>` (not a bare `<div>`). */
7
+ as?: string;
8
+ class?: string;
9
+ children?: Snippet;
10
+ }
11
+
12
+ let {
13
+ as = 'p',
14
+ class: cls,
15
+ children,
16
+ ...rest
17
+ }: Props = $props();
18
+
19
+ const className = $derived(
20
+ ['sve-alert__title', cls].filter(Boolean).join(' ')
21
+ );
22
+ </script>
23
+
24
+ <svelte:element this={as} class={className} {...rest}>
25
+ {@render children?.()}
26
+ </svelte:element>
27
+
28
+ <style>
29
+ .sve-alert__title {
30
+ font-weight: var(--sve-font-weight-medium);
31
+ font-size: var(--sve-font-size-md);
32
+ line-height: var(--sve-line-height-tight);
33
+ }
34
+ </style>
package/dist/components/Alert/AlertTitle.svelte.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ import type { HTMLAttributes } from 'svelte/elements';
2
+ import type { Snippet } from 'svelte';
3
+ interface Props extends Omit<HTMLAttributes<HTMLElement>, 'class'> {
4
+ /** Element to render. Defaults to a semantic `<p>` (not a bare `<div>`). */
5
+ as?: string;
6
+ class?: string;
7
+ children?: Snippet;
8
+ }
9
+ declare const AlertTitle: import("svelte").Component<Props, {}, "">;
10
+ type AlertTitle = ReturnType<typeof AlertTitle>;
11
+ export default AlertTitle;
12
+ //# sourceMappingURL=AlertTitle.svelte.d.ts.map
package/dist/components/Alert/AlertTitle.svelte.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AlertTitle.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Alert/AlertTitle.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAM,SAAQ,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAChE,4EAA4E;IAC5E,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA0BH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
package/dist/components/Alert/index.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ /**
2
+ * Alert namespace — feedback component with color and variant support.
3
+ *
4
+ * Root: alert surface with role, color, and variant props.
5
+ * Title: styled title for the alert.
6
+ * Description: styled description/body for the alert.
7
+ */
8
+ export { default as Root } from './AlertRoot.svelte';
9
+ export { default as Title } from './AlertTitle.svelte';
10
+ export { default as Description } from './AlertDescription.svelte';
11
+ //# sourceMappingURL=index.d.ts.map
package/dist/components/Alert/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Alert/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC"}
package/dist/components/Alert/index.js ADDED
@@ -0,0 +1,10 @@
1
+ /**
2
+ * Alert namespace — feedback component with color and variant support.
3
+ *
4
+ * Root: alert surface with role, color, and variant props.
5
+ * Title: styled title for the alert.
6
+ * Description: styled description/body for the alert.
7
+ */
8
+ export { default as Root } from './AlertRoot.svelte';
9
+ export { default as Title } from './AlertTitle.svelte';
10
+ export { default as Description } from './AlertDescription.svelte';
package/dist/components/Avatar/AvatarFallback.svelte ADDED
@@ -0,0 +1,33 @@
1
+ <script lang="ts">
2
+ import { Avatar } from 'bits-ui';
3
+ import type { ComponentProps } from 'svelte';
4
+ import type { Snippet } from 'svelte';
5
+
6
+ type BitsFallbackProps = ComponentProps<typeof Avatar.Fallback>;
7
+
8
+ interface Props extends Omit<BitsFallbackProps, 'class'> {
9
+ class?: string;
10
+ children?: Snippet;
11
+ }
12
+
13
+ let { class: cls, children, ...rest }: Props = $props();
14
+ </script>
15
+
16
+ <Avatar.Fallback
17
+ class={['sve-avatar__fallback', cls].filter(Boolean).join(' ')}
18
+ {children}
19
+ {...rest}
20
+ />
21
+
22
+ <style>
23
+ :global(.sve-avatar__fallback) {
24
+ display: flex;
25
+ align-items: center;
26
+ justify-content: center;
27
+ width: 100%;
28
+ height: 100%;
29
+ font-family: var(--sve-font-family-sans);
30
+ font-weight: var(--sve-font-weight-medium);
31
+ user-select: none;
32
+ }
33
+ </style>
package/dist/components/Avatar/AvatarFallback.svelte.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ import { Avatar } from 'bits-ui';
2
+ import type { ComponentProps } from 'svelte';
3
+ import type { Snippet } from 'svelte';
4
+ type BitsFallbackProps = ComponentProps<typeof Avatar.Fallback>;
5
+ interface Props extends Omit<BitsFallbackProps, 'class'> {
6
+ class?: string;
7
+ children?: Snippet;
8
+ }
9
+ declare const AvatarFallback: import("svelte").Component<Props, {}, "">;
10
+ type AvatarFallback = ReturnType<typeof AvatarFallback>;
11
+ export default AvatarFallback;
12
+ //# sourceMappingURL=AvatarFallback.svelte.d.ts.map
package/dist/components/Avatar/AvatarFallback.svelte.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AvatarFallback.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Avatar/AvatarFallback.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACjC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,KAAK,iBAAiB,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,QAAQ,CAAC,CAAC;AAEhE,UAAU,KAAM,SAAQ,IAAI,CAAC,iBAAiB,EAAE,OAAO,CAAC;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAiBH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
package/dist/components/Avatar/AvatarImage.svelte ADDED
@@ -0,0 +1,27 @@
1
+ <script lang="ts">
2
+ import { Avatar } from 'bits-ui';
3
+ import type { ComponentProps } from 'svelte';
4
+
5
+ type BitsImageProps = ComponentProps<typeof Avatar.Image>;
6
+
7
+ interface Props extends Omit<BitsImageProps, 'class' | 'alt'> {
8
+ /** Required: describes the image for screen readers. Always provide meaningful alt text. */
9
+ alt: string;
10
+ class?: string;
11
+ }
12
+
13
+ let { class: cls, ...rest }: Props = $props();
14
+ </script>
15
+
16
+ <Avatar.Image
17
+ class={['sve-avatar__image', cls].filter(Boolean).join(' ')}
18
+ {...rest}
19
+ />
20
+
21
+ <style>
22
+ :global(.sve-avatar__image) {
23
+ width: 100%;
24
+ height: 100%;
25
+ object-fit: cover;
26
+ }
27
+ </style>
package/dist/components/Avatar/AvatarImage.svelte.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ import { Avatar } from 'bits-ui';
2
+ import type { ComponentProps } from 'svelte';
3
+ type BitsImageProps = ComponentProps<typeof Avatar.Image>;
4
+ interface Props extends Omit<BitsImageProps, 'class' | 'alt'> {
5
+ /** Required: describes the image for screen readers. Always provide meaningful alt text. */
6
+ alt: string;
7
+ class?: string;
8
+ }
9
+ declare const AvatarImage: import("svelte").Component<Props, {}, "">;
10
+ type AvatarImage = ReturnType<typeof AvatarImage>;
11
+ export default AvatarImage;
12
+ //# sourceMappingURL=AvatarImage.svelte.d.ts.map
package/dist/components/Avatar/AvatarImage.svelte.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AvatarImage.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Avatar/AvatarImage.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACjC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAG3C,KAAK,cAAc,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC;AAE1D,UAAU,KAAM,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,KAAK,CAAC;IAC3D,4FAA4F;IAC5F,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAgBH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
package/dist/components/Avatar/AvatarRoot.svelte ADDED
@@ -0,0 +1,67 @@
1
+ <script lang="ts">
2
+ import { Avatar } from 'bits-ui';
3
+ import type { ComponentProps } from 'svelte';
4
+ import type { Snippet } from 'svelte';
5
+
6
+ type BitsRootProps = ComponentProps<typeof Avatar.Root>;
7
+
8
+ type Size = 'sm' | 'md' | 'lg';
9
+ type Shape = 'circle' | 'square';
10
+
11
+ interface Props extends Omit<BitsRootProps, 'class'> {
12
+ size?: Size;
13
+ shape?: Shape;
14
+ class?: string;
15
+ children?: Snippet;
16
+ }
17
+
18
+ let {
19
+ size = 'md',
20
+ shape = 'circle',
21
+ class: cls,
22
+ children,
23
+ ...rest
24
+ }: Props = $props();
25
+
26
+ const className = $derived(
27
+ [
28
+ 'sve-avatar',
29
+ `sve-avatar--${size}`,
30
+ `sve-avatar--${shape}`,
31
+ cls ?? '',
32
+ ]
33
+ .filter(Boolean)
34
+ .join(' ')
35
+ );
36
+ </script>
37
+
38
+ <Avatar.Root
39
+ class={className}
40
+ data-slot="avatar-root"
41
+ {children}
42
+ {...rest}
43
+ />
44
+
45
+ <style>
46
+ :global(.sve-avatar) {
47
+ display: inline-flex;
48
+ align-items: center;
49
+ justify-content: center;
50
+ position: relative;
51
+ overflow: hidden;
52
+ flex-shrink: 0;
53
+ font-family: var(--sve-font-family-sans);
54
+ font-weight: var(--sve-font-weight-medium);
55
+ background-color: var(--sve-color-default-surface);
56
+ color: var(--sve-color-default-foreground);
57
+ }
58
+
59
+ /* --- Sizes --- */
60
+ :global(.sve-avatar--sm) { width: 2rem; height: 2rem; font-size: var(--sve-font-size-sm); }
61
+ :global(.sve-avatar--md) { width: 2.5rem; height: 2.5rem; font-size: var(--sve-font-size-md); }
62
+ :global(.sve-avatar--lg) { width: 3.5rem; height: 3.5rem; font-size: var(--sve-font-size-lg); }
63
+
64
+ /* --- Shapes --- */
65
+ :global(.sve-avatar--circle) { border-radius: var(--sve-radius-full); }
66
+ :global(.sve-avatar--square) { border-radius: var(--sve-radius-md); }
67
+ </style>
package/dist/components/Avatar/AvatarRoot.svelte.d.ts ADDED
@@ -0,0 +1,16 @@
1
+ import { Avatar } from 'bits-ui';
2
+ import type { ComponentProps } from 'svelte';
3
+ import type { Snippet } from 'svelte';
4
+ type BitsRootProps = ComponentProps<typeof Avatar.Root>;
5
+ type Size = 'sm' | 'md' | 'lg';
6
+ type Shape = 'circle' | 'square';
7
+ interface Props extends Omit<BitsRootProps, 'class'> {
8
+ size?: Size;
9
+ shape?: Shape;
10
+ class?: string;
11
+ children?: Snippet;
12
+ }
13
+ declare const AvatarRoot: import("svelte").Component<Props, {}, "">;
14
+ type AvatarRoot = ReturnType<typeof AvatarRoot>;
15
+ export default AvatarRoot;
16
+ //# sourceMappingURL=AvatarRoot.svelte.d.ts.map
package/dist/components/Avatar/AvatarRoot.svelte.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AvatarRoot.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Avatar/AvatarRoot.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACjC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,KAAK,aAAa,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC;AAExD,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC/B,KAAK,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEjC,UAAU,KAAM,SAAQ,IAAI,CAAC,aAAa,EAAE,OAAO,CAAC;IAClD,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAoCH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
package/dist/components/Avatar/index.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ /**
2
+ * Avatar namespace — sve-ui styled wrappers over bits-ui Avatar primitives.
3
+ *
4
+ * Root: styled wrapper adding size + shape via --sve-* tokens.
5
+ * Image: styled wrapper, forwards img attributes.
6
+ * Fallback: styled wrapper, shown on load error or while loading.
7
+ *
8
+ * Confirmed Bits UI 2.18.1 API:
9
+ * import { Avatar } from 'bits-ui'
10
+ * Avatar.Root / Avatar.Image / Avatar.Fallback
11
+ */
12
+ export { default as Root } from './AvatarRoot.svelte';
13
+ export { default as Image } from './AvatarImage.svelte';
14
+ export { default as Fallback } from './AvatarFallback.svelte';
15
+ //# sourceMappingURL=index.d.ts.map
package/dist/components/Avatar/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Avatar/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,yBAAyB,CAAC"}
package/dist/components/Avatar/index.js ADDED
@@ -0,0 +1,14 @@
1
+ /**
2
+ * Avatar namespace — sve-ui styled wrappers over bits-ui Avatar primitives.
3
+ *
4
+ * Root: styled wrapper adding size + shape via --sve-* tokens.
5
+ * Image: styled wrapper, forwards img attributes.
6
+ * Fallback: styled wrapper, shown on load error or while loading.
7
+ *
8
+ * Confirmed Bits UI 2.18.1 API:
9
+ * import { Avatar } from 'bits-ui'
10
+ * Avatar.Root / Avatar.Image / Avatar.Fallback
11
+ */
12
+ export { default as Root } from './AvatarRoot.svelte';
13
+ export { default as Image } from './AvatarImage.svelte';
14
+ export { default as Fallback } from './AvatarFallback.svelte';