@stubber/ui 1.0.11 → 1.0.12
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.
|
@@ -1,2 +1,94 @@
|
|
|
1
|
+
import { type VariantProps } from "tailwind-variants";
|
|
1
2
|
import Root from "./switch.svelte";
|
|
2
|
-
|
|
3
|
+
import { Switch as SwitchPrimitive } from "bits-ui";
|
|
4
|
+
declare const switchVariants: import("tailwind-variants").TVReturnType<{
|
|
5
|
+
variant: {
|
|
6
|
+
default: string;
|
|
7
|
+
developer: string;
|
|
8
|
+
secondary: string;
|
|
9
|
+
};
|
|
10
|
+
}, undefined, "focus-visible:ring-ring focus-visible:ring-offset-background data-[state=unchecked]:bg-gray-200 peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-lg border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", import("tailwind-variants/dist/config.d.ts").TVConfig<{
|
|
11
|
+
variant: {
|
|
12
|
+
default: string;
|
|
13
|
+
developer: string;
|
|
14
|
+
secondary: string;
|
|
15
|
+
};
|
|
16
|
+
}, {
|
|
17
|
+
variant: {
|
|
18
|
+
default: string;
|
|
19
|
+
developer: string;
|
|
20
|
+
secondary: string;
|
|
21
|
+
};
|
|
22
|
+
}>, {
|
|
23
|
+
variant: {
|
|
24
|
+
default: string;
|
|
25
|
+
developer: string;
|
|
26
|
+
secondary: string;
|
|
27
|
+
};
|
|
28
|
+
}, undefined, import("tailwind-variants").TVReturnType<{
|
|
29
|
+
variant: {
|
|
30
|
+
default: string;
|
|
31
|
+
developer: string;
|
|
32
|
+
secondary: string;
|
|
33
|
+
};
|
|
34
|
+
}, undefined, "focus-visible:ring-ring focus-visible:ring-offset-background data-[state=unchecked]:bg-gray-200 peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-lg border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", import("tailwind-variants/dist/config.d.ts").TVConfig<{
|
|
35
|
+
variant: {
|
|
36
|
+
default: string;
|
|
37
|
+
developer: string;
|
|
38
|
+
secondary: string;
|
|
39
|
+
};
|
|
40
|
+
}, {
|
|
41
|
+
variant: {
|
|
42
|
+
default: string;
|
|
43
|
+
developer: string;
|
|
44
|
+
secondary: string;
|
|
45
|
+
};
|
|
46
|
+
}>, unknown, unknown, undefined>>;
|
|
47
|
+
declare const thumbVariants: import("tailwind-variants").TVReturnType<{
|
|
48
|
+
variant: {
|
|
49
|
+
default: string;
|
|
50
|
+
developer: string;
|
|
51
|
+
secondary: string;
|
|
52
|
+
};
|
|
53
|
+
}, undefined, "bg-background pointer-events-none flex items-center justify-center h-5 w-5 rounded-lg shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0", import("tailwind-variants/dist/config.d.ts").TVConfig<{
|
|
54
|
+
variant: {
|
|
55
|
+
default: string;
|
|
56
|
+
developer: string;
|
|
57
|
+
secondary: string;
|
|
58
|
+
};
|
|
59
|
+
}, {
|
|
60
|
+
variant: {
|
|
61
|
+
default: string;
|
|
62
|
+
developer: string;
|
|
63
|
+
secondary: string;
|
|
64
|
+
};
|
|
65
|
+
}>, {
|
|
66
|
+
variant: {
|
|
67
|
+
default: string;
|
|
68
|
+
developer: string;
|
|
69
|
+
secondary: string;
|
|
70
|
+
};
|
|
71
|
+
}, undefined, import("tailwind-variants").TVReturnType<{
|
|
72
|
+
variant: {
|
|
73
|
+
default: string;
|
|
74
|
+
developer: string;
|
|
75
|
+
secondary: string;
|
|
76
|
+
};
|
|
77
|
+
}, undefined, "bg-background pointer-events-none flex items-center justify-center h-5 w-5 rounded-lg shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0", import("tailwind-variants/dist/config.d.ts").TVConfig<{
|
|
78
|
+
variant: {
|
|
79
|
+
default: string;
|
|
80
|
+
developer: string;
|
|
81
|
+
secondary: string;
|
|
82
|
+
};
|
|
83
|
+
}, {
|
|
84
|
+
variant: {
|
|
85
|
+
default: string;
|
|
86
|
+
developer: string;
|
|
87
|
+
secondary: string;
|
|
88
|
+
};
|
|
89
|
+
}>, unknown, unknown, undefined>>;
|
|
90
|
+
type Variant = VariantProps<typeof switchVariants>["variant"];
|
|
91
|
+
type Props = SwitchPrimitive.Props & {
|
|
92
|
+
variant?: Variant;
|
|
93
|
+
};
|
|
94
|
+
export { Root, type Props, Root as Switch, type Props as SwitchProps, switchVariants, thumbVariants, };
|
|
@@ -1,4 +1,32 @@
|
|
|
1
|
+
import { tv } from "tailwind-variants";
|
|
1
2
|
import Root from "./switch.svelte";
|
|
3
|
+
import { Switch as SwitchPrimitive } from "bits-ui";
|
|
4
|
+
const switchVariants = tv({
|
|
5
|
+
base: "focus-visible:ring-ring focus-visible:ring-offset-background data-[state=unchecked]:bg-gray-200 peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-lg border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
|
6
|
+
variants: {
|
|
7
|
+
variant: {
|
|
8
|
+
default: "data-[state=checked]:bg-primary-500",
|
|
9
|
+
developer: "data-[state=checked]:bg-info-600",
|
|
10
|
+
secondary: "data-[state=checked]:bg-gray-800",
|
|
11
|
+
},
|
|
12
|
+
},
|
|
13
|
+
defaultVariants: {
|
|
14
|
+
variant: "default",
|
|
15
|
+
},
|
|
16
|
+
});
|
|
17
|
+
const thumbVariants = tv({
|
|
18
|
+
base: "bg-background pointer-events-none flex items-center justify-center h-5 w-5 rounded-lg shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
|
|
19
|
+
variants: {
|
|
20
|
+
variant: {
|
|
21
|
+
default: "",
|
|
22
|
+
developer: "fa-regular fa-code text-[0.6rem]",
|
|
23
|
+
secondary: "",
|
|
24
|
+
},
|
|
25
|
+
},
|
|
26
|
+
defaultVariants: {
|
|
27
|
+
variant: "default",
|
|
28
|
+
},
|
|
29
|
+
});
|
|
2
30
|
export { Root,
|
|
3
31
|
//
|
|
4
|
-
Root as Switch, };
|
|
32
|
+
Root as Switch, switchVariants, thumbVariants, };
|
|
@@ -1,30 +1,18 @@
|
|
|
1
1
|
<script>import { Switch as SwitchPrimitive } from "bits-ui";
|
|
2
2
|
import { cn } from "../../utils/shadcn-utils.js";
|
|
3
|
+
import { switchVariants, thumbVariants } from "./index.js";
|
|
3
4
|
let className = void 0;
|
|
4
5
|
export let checked = void 0;
|
|
5
6
|
export let variant = "default";
|
|
6
7
|
export { className as class };
|
|
7
|
-
const variants = {
|
|
8
|
-
default: "data-[state=checked]:bg-primary-500 data-[state=unchecked]:bg-gray-200",
|
|
9
|
-
primary: "data-[state=checked]:bg-info-600 data-[state=unchecked]:bg-gray-200",
|
|
10
|
-
secondary: "data-[state=checked]:bg-gray-800 data-[state=unchecked]:bg-gray-200"
|
|
11
|
-
};
|
|
12
8
|
</script>
|
|
13
9
|
|
|
14
10
|
<SwitchPrimitive.Root
|
|
15
11
|
bind:checked
|
|
16
|
-
class={cn(
|
|
17
|
-
"focus-visible:ring-ring focus-visible:ring-offset-background peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-lg border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
|
18
|
-
variants[variant],
|
|
19
|
-
className
|
|
20
|
-
)}
|
|
12
|
+
class={cn(switchVariants({ variant, className }))}
|
|
21
13
|
{...$$restProps}
|
|
22
14
|
on:click
|
|
23
15
|
on:keydown
|
|
24
16
|
>
|
|
25
|
-
<SwitchPrimitive.Thumb
|
|
26
|
-
class={cn(
|
|
27
|
-
"bg-background pointer-events-none block h-5 w-5 rounded-lg shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
|
|
28
|
-
)}
|
|
29
|
-
/>
|
|
17
|
+
<SwitchPrimitive.Thumb class={cn(thumbVariants({ variant }))} />
|
|
30
18
|
</SwitchPrimitive.Root>
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { SvelteComponent } from "svelte";
|
|
2
2
|
import { Switch as SwitchPrimitive } from "bits-ui";
|
|
3
|
+
import { type Props } from "./index.js";
|
|
3
4
|
declare const __propDef: {
|
|
4
|
-
props:
|
|
5
|
+
props: Props;
|
|
5
6
|
slots: {};
|
|
6
7
|
events: SwitchPrimitive.Events;
|
|
7
8
|
};
|