@nasa-jpl/stellar-svelte 2.0.0-alpha.36 → 2.0.0-alpha.38
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.
- package/dist/components/ui/button/index.d.ts +35 -0
- package/dist/components/ui/button/index.js +9 -4
- package/dist/components/ui/theme-switcher/index.d.ts +3 -3
- package/dist/components/ui/theme-switcher/index.js +3 -3
- package/dist/components/ui/theme-switcher/theme-switcher-button.svelte +10 -11
- package/dist/components/ui/theme-switcher/theme-switcher-button.svelte.d.ts +4 -1
- package/dist/components/ui/theme-switcher/theme-switcher-dropdown.svelte +7 -4
- package/dist/components/ui/theme-switcher/theme-switcher-dropdown.svelte.d.ts +4 -1
- package/dist/index.css +4 -5
- package/package.json +4 -3
- package/tailwind.config.ts +1 -1
- package/dist/components/ui/theme-switcher/button.svelte +0 -20
- package/dist/components/ui/theme-switcher/button.svelte.d.ts +0 -14
|
@@ -15,7 +15,12 @@ declare const buttonVariants: import("tailwind-variants").TVReturnType<{
|
|
|
15
15
|
xs: string;
|
|
16
16
|
sm: string;
|
|
17
17
|
lg: string;
|
|
18
|
+
xl: string;
|
|
18
19
|
icon: string;
|
|
20
|
+
'icon-xs': string;
|
|
21
|
+
'icon-sm': string;
|
|
22
|
+
'icon-lg': string;
|
|
23
|
+
'icon-xl': string;
|
|
19
24
|
};
|
|
20
25
|
}, undefined, "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", import("tailwind-variants/dist/config").TVConfig<{
|
|
21
26
|
variant: {
|
|
@@ -31,7 +36,12 @@ declare const buttonVariants: import("tailwind-variants").TVReturnType<{
|
|
|
31
36
|
xs: string;
|
|
32
37
|
sm: string;
|
|
33
38
|
lg: string;
|
|
39
|
+
xl: string;
|
|
34
40
|
icon: string;
|
|
41
|
+
'icon-xs': string;
|
|
42
|
+
'icon-sm': string;
|
|
43
|
+
'icon-lg': string;
|
|
44
|
+
'icon-xl': string;
|
|
35
45
|
};
|
|
36
46
|
}, {
|
|
37
47
|
variant: {
|
|
@@ -47,7 +57,12 @@ declare const buttonVariants: import("tailwind-variants").TVReturnType<{
|
|
|
47
57
|
xs: string;
|
|
48
58
|
sm: string;
|
|
49
59
|
lg: string;
|
|
60
|
+
xl: string;
|
|
50
61
|
icon: string;
|
|
62
|
+
'icon-xs': string;
|
|
63
|
+
'icon-sm': string;
|
|
64
|
+
'icon-lg': string;
|
|
65
|
+
'icon-xl': string;
|
|
51
66
|
};
|
|
52
67
|
}>, {
|
|
53
68
|
variant: {
|
|
@@ -63,7 +78,12 @@ declare const buttonVariants: import("tailwind-variants").TVReturnType<{
|
|
|
63
78
|
xs: string;
|
|
64
79
|
sm: string;
|
|
65
80
|
lg: string;
|
|
81
|
+
xl: string;
|
|
66
82
|
icon: string;
|
|
83
|
+
'icon-xs': string;
|
|
84
|
+
'icon-sm': string;
|
|
85
|
+
'icon-lg': string;
|
|
86
|
+
'icon-xl': string;
|
|
67
87
|
};
|
|
68
88
|
}, undefined, import("tailwind-variants").TVReturnType<{
|
|
69
89
|
variant: {
|
|
@@ -79,7 +99,12 @@ declare const buttonVariants: import("tailwind-variants").TVReturnType<{
|
|
|
79
99
|
xs: string;
|
|
80
100
|
sm: string;
|
|
81
101
|
lg: string;
|
|
102
|
+
xl: string;
|
|
82
103
|
icon: string;
|
|
104
|
+
'icon-xs': string;
|
|
105
|
+
'icon-sm': string;
|
|
106
|
+
'icon-lg': string;
|
|
107
|
+
'icon-xl': string;
|
|
83
108
|
};
|
|
84
109
|
}, undefined, "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", import("tailwind-variants/dist/config").TVConfig<{
|
|
85
110
|
variant: {
|
|
@@ -95,7 +120,12 @@ declare const buttonVariants: import("tailwind-variants").TVReturnType<{
|
|
|
95
120
|
xs: string;
|
|
96
121
|
sm: string;
|
|
97
122
|
lg: string;
|
|
123
|
+
xl: string;
|
|
98
124
|
icon: string;
|
|
125
|
+
'icon-xs': string;
|
|
126
|
+
'icon-sm': string;
|
|
127
|
+
'icon-lg': string;
|
|
128
|
+
'icon-xl': string;
|
|
99
129
|
};
|
|
100
130
|
}, {
|
|
101
131
|
variant: {
|
|
@@ -111,7 +141,12 @@ declare const buttonVariants: import("tailwind-variants").TVReturnType<{
|
|
|
111
141
|
xs: string;
|
|
112
142
|
sm: string;
|
|
113
143
|
lg: string;
|
|
144
|
+
xl: string;
|
|
114
145
|
icon: string;
|
|
146
|
+
'icon-xs': string;
|
|
147
|
+
'icon-sm': string;
|
|
148
|
+
'icon-lg': string;
|
|
149
|
+
'icon-xl': string;
|
|
115
150
|
};
|
|
116
151
|
}>, unknown, unknown, undefined>>;
|
|
117
152
|
type Variant = VariantProps<typeof buttonVariants>['variant'];
|
|
@@ -12,11 +12,16 @@ const buttonVariants = tv({
|
|
|
12
12
|
link: 'text-primary underline-offset-4 hover:underline',
|
|
13
13
|
},
|
|
14
14
|
size: {
|
|
15
|
-
default: 'h-6 px-2 py-2',
|
|
15
|
+
default: 'h-6 px-2 py-2 text-xs',
|
|
16
16
|
xs: 'h-4 px-1 py-0.5 rounded-sm text-xs',
|
|
17
|
-
sm: 'h-
|
|
18
|
-
lg: 'h-8 rounded-
|
|
19
|
-
|
|
17
|
+
sm: 'h-5 px-1.5 py-1 rounded-md text-xs',
|
|
18
|
+
lg: 'h-8 rounded-md px-4',
|
|
19
|
+
xl: 'h-10 rounded-md px-4',
|
|
20
|
+
icon: 'h-6 w-6',
|
|
21
|
+
'icon-xs': 'h-4 w-4',
|
|
22
|
+
'icon-sm': 'h-5 w-5',
|
|
23
|
+
'icon-lg': 'h-8 w-8',
|
|
24
|
+
'icon-xl': 'h-10 w-10',
|
|
20
25
|
},
|
|
21
26
|
},
|
|
22
27
|
defaultVariants: {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ModeWatcher } from
|
|
2
|
-
import ThemeSwitcherButton from
|
|
3
|
-
import ThemeSwitcherDropdown from
|
|
1
|
+
import { ModeWatcher } from 'mode-watcher';
|
|
2
|
+
import ThemeSwitcherButton from './theme-switcher-button.svelte';
|
|
3
|
+
import ThemeSwitcherDropdown from './theme-switcher-dropdown.svelte';
|
|
4
4
|
export { ModeWatcher, ThemeSwitcherButton, ThemeSwitcherDropdown };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ModeWatcher } from
|
|
2
|
-
import ThemeSwitcherButton from
|
|
3
|
-
import ThemeSwitcherDropdown from
|
|
1
|
+
import { ModeWatcher } from 'mode-watcher';
|
|
2
|
+
import ThemeSwitcherButton from './theme-switcher-button.svelte';
|
|
3
|
+
import ThemeSwitcherDropdown from './theme-switcher-dropdown.svelte';
|
|
4
4
|
export { ModeWatcher, ThemeSwitcherButton, ThemeSwitcherDropdown };
|
|
@@ -1,15 +1,14 @@
|
|
|
1
|
-
<script>import
|
|
2
|
-
import
|
|
3
|
-
import { toggleMode } from "mode-watcher";
|
|
1
|
+
<script>import Moon from "lucide-svelte/icons/moon";
|
|
2
|
+
import Sun from "lucide-svelte/icons/sun";
|
|
4
3
|
import { Button } from "../button/index.js";
|
|
4
|
+
import { toggleMode } from "mode-watcher";
|
|
5
|
+
let className = void 0;
|
|
6
|
+
export let size = "icon-lg";
|
|
7
|
+
export { className as class };
|
|
5
8
|
</script>
|
|
6
9
|
|
|
7
|
-
<Button on:click={toggleMode} variant="outline" size=
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
<Moon
|
|
12
|
-
class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
|
|
13
|
-
/>
|
|
14
|
-
<span class="sr-only">Toggle theme</span>
|
|
10
|
+
<Button on:click={toggleMode} variant="outline" {size} class={className}>
|
|
11
|
+
<Sun class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
|
|
12
|
+
<Moon class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
|
|
13
|
+
<span class="sr-only">Toggle theme</span>
|
|
15
14
|
</Button>
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import { SvelteComponent } from "svelte";
|
|
2
2
|
declare const __propDef: {
|
|
3
|
-
props:
|
|
3
|
+
props: {
|
|
4
|
+
size?: "icon-xs" | "icon-sm" | "icon" | "icon-lg" | "icon-xl" | undefined;
|
|
5
|
+
class?: string | undefined | null;
|
|
6
|
+
};
|
|
4
7
|
events: {
|
|
5
8
|
[evt: string]: CustomEvent<any>;
|
|
6
9
|
};
|
|
@@ -1,13 +1,16 @@
|
|
|
1
|
-
<script>import
|
|
1
|
+
<script>import { Button } from "../button/index.js";
|
|
2
|
+
import * as DropdownMenu from "../dropdown-menu/index.js";
|
|
2
3
|
import Moon from "lucide-svelte/icons/moon";
|
|
4
|
+
import Sun from "lucide-svelte/icons/sun";
|
|
3
5
|
import { resetMode, setMode } from "mode-watcher";
|
|
4
|
-
|
|
5
|
-
|
|
6
|
+
let className = void 0;
|
|
7
|
+
export let size = "icon-lg";
|
|
8
|
+
export { className as class };
|
|
6
9
|
</script>
|
|
7
10
|
|
|
8
11
|
<DropdownMenu.Root>
|
|
9
12
|
<DropdownMenu.Trigger asChild let:builder>
|
|
10
|
-
<Button builders={[builder]} variant="ghost" size=
|
|
13
|
+
<Button builders={[builder]} variant="ghost" {size} class={className}>
|
|
11
14
|
<Sun class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
|
|
12
15
|
<Moon class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
|
|
13
16
|
<span class="sr-only">Toggle theme</span>
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import { SvelteComponent } from "svelte";
|
|
2
2
|
declare const __propDef: {
|
|
3
|
-
props:
|
|
3
|
+
props: {
|
|
4
|
+
size?: "icon-xs" | "icon-sm" | "icon" | "icon-lg" | "icon-xl" | undefined;
|
|
5
|
+
class?: string | undefined | null;
|
|
6
|
+
};
|
|
4
7
|
events: {
|
|
5
8
|
[evt: string]: CustomEvent<any>;
|
|
6
9
|
};
|
package/dist/index.css
CHANGED
|
@@ -1202,6 +1202,10 @@ body {
|
|
|
1202
1202
|
min-width: 0px;
|
|
1203
1203
|
}
|
|
1204
1204
|
|
|
1205
|
+
.min-w-16 {
|
|
1206
|
+
min-width: 4rem;
|
|
1207
|
+
}
|
|
1208
|
+
|
|
1205
1209
|
.min-w-\[12rem\] {
|
|
1206
1210
|
min-width: 12rem;
|
|
1207
1211
|
}
|
|
@@ -1891,11 +1895,6 @@ body {
|
|
|
1891
1895
|
padding-bottom: 0.5rem;
|
|
1892
1896
|
}
|
|
1893
1897
|
|
|
1894
|
-
.py-2\.5 {
|
|
1895
|
-
padding-top: 0.625rem;
|
|
1896
|
-
padding-bottom: 0.625rem;
|
|
1897
|
-
}
|
|
1898
|
-
|
|
1899
1898
|
.py-3 {
|
|
1900
1899
|
padding-top: 0.75rem;
|
|
1901
1900
|
padding-bottom: 0.75rem;
|
package/package.json
CHANGED
|
@@ -45,7 +45,8 @@
|
|
|
45
45
|
"./styles": "./dist/index.css",
|
|
46
46
|
"./tailwindConfig": "./tailwind.config.ts",
|
|
47
47
|
"./theme": "./src/theme.css",
|
|
48
|
-
"./font": "./src/font.css"
|
|
48
|
+
"./font": "./src/font.css",
|
|
49
|
+
"./utils": "./dist/utils.js"
|
|
49
50
|
},
|
|
50
51
|
"files": [
|
|
51
52
|
"dist",
|
|
@@ -80,6 +81,6 @@
|
|
|
80
81
|
"svelte": "./dist/index.js",
|
|
81
82
|
"type": "module",
|
|
82
83
|
"types": "./dist/index.d.ts",
|
|
83
|
-
"version": "2.0.0-alpha.
|
|
84
|
-
"gitHead": "
|
|
84
|
+
"version": "2.0.0-alpha.38",
|
|
85
|
+
"gitHead": "ed43a63020188af04c125a504328857f57e278ba"
|
|
85
86
|
}
|
package/tailwind.config.ts
CHANGED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
<script>import { Button as ButtonPrimitive } from "bits-ui";
|
|
2
|
-
import { buttonVariants } from "./index.js";
|
|
3
|
-
import { cn } from "../../../utils.js";
|
|
4
|
-
let className = void 0;
|
|
5
|
-
export let variant = "default";
|
|
6
|
-
export let size = "default";
|
|
7
|
-
export let builders = [];
|
|
8
|
-
export { className as class };
|
|
9
|
-
</script>
|
|
10
|
-
|
|
11
|
-
<ButtonPrimitive.Root
|
|
12
|
-
{builders}
|
|
13
|
-
class={cn(buttonVariants({ variant, size, className }))}
|
|
14
|
-
type="button"
|
|
15
|
-
{...$$restProps}
|
|
16
|
-
on:click
|
|
17
|
-
on:keydown
|
|
18
|
-
>
|
|
19
|
-
<slot />
|
|
20
|
-
</ButtonPrimitive.Root>
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { SvelteComponent } from "svelte";
|
|
2
|
-
declare const __propDef: {
|
|
3
|
-
props: Props;
|
|
4
|
-
slots: {
|
|
5
|
-
default: {};
|
|
6
|
-
};
|
|
7
|
-
events: Events;
|
|
8
|
-
};
|
|
9
|
-
export type ButtonProps = typeof __propDef.props;
|
|
10
|
-
export type ButtonEvents = typeof __propDef.events;
|
|
11
|
-
export type ButtonSlots = typeof __propDef.slots;
|
|
12
|
-
export default class Button extends SvelteComponent<ButtonProps, ButtonEvents, ButtonSlots> {
|
|
13
|
-
}
|
|
14
|
-
export {};
|