@xingxingmofashu/ui 0.1.3 → 0.1.5
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/README.md +8 -69
- package/dist/components/accordion.d.ts +1 -1
- package/dist/components/radio-group.d.ts +35 -0
- package/dist/components/radio-group.mjs +156 -0
- package/dist/components/tabs.d.ts +46 -0
- package/dist/components/tabs.mjs +136 -0
- package/dist/composables/use-toast.d.ts +5 -1
- package/dist/composables/use-toast.mjs +2 -1
- package/dist/index.css +1 -1
- package/dist/index.d.ts +3 -2
- package/dist/index.mjs +5 -1
- package/dist/internal/tv.d.ts +0 -4
- package/dist/theme/accordion.d.ts +1 -63
- package/dist/theme/alert-dialog.d.ts +2 -69
- package/dist/theme/button.d.ts +1 -73
- package/dist/theme/card.d.ts +2 -64
- package/dist/theme/checkbox.d.ts +1 -69
- package/dist/theme/dialog.d.ts +2 -69
- package/dist/theme/drawer.d.ts +1 -65
- package/dist/theme/input.d.ts +1 -87
- package/dist/theme/popover.d.ts +2 -69
- package/dist/theme/progress.d.ts +1 -53
- package/dist/theme/radio-group.d.ts +40 -0
- package/dist/theme/radio-group.mjs +106 -0
- package/dist/theme/scroll-area.d.ts +2 -59
- package/dist/theme/slider.d.ts +2 -44
- package/dist/theme/switch.d.ts +1 -63
- package/dist/theme/tabs.d.ts +32 -0
- package/dist/theme/tabs.mjs +80 -0
- package/dist/theme/toast.d.ts +1 -57
- package/dist/theme/toggle-group.d.ts +1 -53
- package/dist/theme/toggle.d.ts +1 -63
- package/package.json +7 -4
- package/dist/composables/create-toast-manager.d.ts +0 -6
- package/dist/composables/create-toast-manager.mjs +0 -3
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
declare const _default: import("tailwind-variants").TVReturnType<{
|
|
2
|
+
size: {
|
|
3
|
+
xs: {
|
|
4
|
+
root: string[];
|
|
5
|
+
wrapper: string;
|
|
6
|
+
};
|
|
7
|
+
sm: {
|
|
8
|
+
root: string[];
|
|
9
|
+
wrapper: string;
|
|
10
|
+
};
|
|
11
|
+
md: {
|
|
12
|
+
root: string[];
|
|
13
|
+
wrapper: string;
|
|
14
|
+
};
|
|
15
|
+
lg: {
|
|
16
|
+
root: string[];
|
|
17
|
+
wrapper: string;
|
|
18
|
+
};
|
|
19
|
+
xl: {
|
|
20
|
+
root: string[];
|
|
21
|
+
wrapper: string;
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
}, {
|
|
25
|
+
root: string[];
|
|
26
|
+
header: string;
|
|
27
|
+
label: string[];
|
|
28
|
+
description: string[];
|
|
29
|
+
items: string;
|
|
30
|
+
item: string[];
|
|
31
|
+
box: string[];
|
|
32
|
+
glass: string[];
|
|
33
|
+
overlay: string;
|
|
34
|
+
indicator: string[];
|
|
35
|
+
dot: string[];
|
|
36
|
+
wrapper: string;
|
|
37
|
+
itemLabel: string;
|
|
38
|
+
itemDescription: string;
|
|
39
|
+
}, undefined, undefined, undefined, undefined>;
|
|
40
|
+
export default _default;
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
import { tv } from "tailwind-variants";
|
|
2
|
+
export default tv({
|
|
3
|
+
slots: {
|
|
4
|
+
root: [
|
|
5
|
+
"group/radio-group flex w-full min-w-0 flex-col text-ui-ink",
|
|
6
|
+
"gap-[var(--ui-radio-group-gap)]"
|
|
7
|
+
],
|
|
8
|
+
header: "flex min-w-0 flex-col gap-1",
|
|
9
|
+
label: [
|
|
10
|
+
"font-medium text-ui-ink",
|
|
11
|
+
"text-[length:var(--ui-radio-group-label-size)]",
|
|
12
|
+
"[filter:var(--ui-drop-shadow-label)]"
|
|
13
|
+
],
|
|
14
|
+
description: [
|
|
15
|
+
"text-ui-ink opacity-60 leading-relaxed",
|
|
16
|
+
"text-[length:var(--ui-radio-group-description-size)]"
|
|
17
|
+
],
|
|
18
|
+
items: "flex min-w-0 flex-col gap-[var(--ui-radio-group-item-gap)]",
|
|
19
|
+
item: [
|
|
20
|
+
"group relative inline-flex min-w-0 cursor-pointer select-none items-start align-top text-ui-ink",
|
|
21
|
+
"touch-none [-webkit-tap-highlight-color:transparent]",
|
|
22
|
+
"focus:outline-none",
|
|
23
|
+
"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-60",
|
|
24
|
+
"data-[readonly]:cursor-default"
|
|
25
|
+
],
|
|
26
|
+
box: [
|
|
27
|
+
"relative inline-flex shrink-0 items-center justify-center overflow-hidden",
|
|
28
|
+
"h-[var(--ui-radio-size)] w-[var(--ui-radio-size)] rounded-full",
|
|
29
|
+
"group-focus-visible:outline-2 group-focus-visible:outline-offset-4 group-focus-visible:outline-ui-glass-focus",
|
|
30
|
+
"transition-[scale] duration-200 ease-out group-active:scale-95",
|
|
31
|
+
"motion-reduce:transition-none",
|
|
32
|
+
"[--ui-glass-tone:brightness(1)] [--ui-glass-contrast:1.1]",
|
|
33
|
+
"[--ui-glass-border:color-mix(in_srgb,var(--ui-ink)_26%,transparent)]",
|
|
34
|
+
"[--ui-glass-rim:rgb(255_255_255/0.16)]",
|
|
35
|
+
"[--ui-glass-surface:color-mix(in_srgb,var(--ui-ink)_5%,transparent)]",
|
|
36
|
+
"[--ui-shadow-glass:inset_0_0_0_1px_color-mix(in_srgb,var(--ui-ink)_6%,transparent),0_1px_2px_rgb(0_0_0/0.3)]",
|
|
37
|
+
"[--ui-glass-rim-inset:2px]"
|
|
38
|
+
],
|
|
39
|
+
glass: [
|
|
40
|
+
"ui-glass",
|
|
41
|
+
"pointer-events-none absolute inset-0 z-[1] overflow-hidden rounded-[inherit]"
|
|
42
|
+
],
|
|
43
|
+
overlay: "ui-glass-rim",
|
|
44
|
+
indicator: [
|
|
45
|
+
"relative z-10 flex items-center justify-center",
|
|
46
|
+
"scale-50 opacity-0 transition-[opacity,scale] duration-200 ease-out",
|
|
47
|
+
"group-data-[checked]:scale-100 group-data-[checked]:opacity-100",
|
|
48
|
+
"motion-reduce:transition-none"
|
|
49
|
+
],
|
|
50
|
+
dot: [
|
|
51
|
+
"block rounded-full bg-ui-ink",
|
|
52
|
+
"size-[var(--ui-radio-dot-size)]",
|
|
53
|
+
"shadow-[inset_0_1px_0_rgb(255_255_255/0.35)]"
|
|
54
|
+
],
|
|
55
|
+
wrapper: "ms-[var(--ui-radio-gap)] min-w-0",
|
|
56
|
+
itemLabel: "block font-medium text-ui-ink leading-[var(--ui-radio-size)]",
|
|
57
|
+
itemDescription: "block text-ui-ink opacity-60"
|
|
58
|
+
},
|
|
59
|
+
variants: {
|
|
60
|
+
size: {
|
|
61
|
+
xs: {
|
|
62
|
+
root: [
|
|
63
|
+
"[--ui-radio-size:16px] [--ui-radio-dot-size:8px] [--ui-radio-gap:6px]",
|
|
64
|
+
"[--ui-radio-group-gap:10px] [--ui-radio-group-item-gap:10px]",
|
|
65
|
+
"[--ui-radio-group-label-size:0.75rem] [--ui-radio-group-description-size:0.75rem]"
|
|
66
|
+
],
|
|
67
|
+
wrapper: "text-xs"
|
|
68
|
+
},
|
|
69
|
+
sm: {
|
|
70
|
+
root: [
|
|
71
|
+
"[--ui-radio-size:18px] [--ui-radio-dot-size:9px] [--ui-radio-gap:7px]",
|
|
72
|
+
"[--ui-radio-group-gap:10px] [--ui-radio-group-item-gap:10px]",
|
|
73
|
+
"[--ui-radio-group-label-size:0.75rem] [--ui-radio-group-description-size:0.75rem]"
|
|
74
|
+
],
|
|
75
|
+
wrapper: "text-xs"
|
|
76
|
+
},
|
|
77
|
+
md: {
|
|
78
|
+
root: [
|
|
79
|
+
"[--ui-radio-size:20px] [--ui-radio-dot-size:10px] [--ui-radio-gap:8px]",
|
|
80
|
+
"[--ui-radio-group-gap:12px] [--ui-radio-group-item-gap:12px]",
|
|
81
|
+
"[--ui-radio-group-label-size:0.875rem] [--ui-radio-group-description-size:0.875rem]"
|
|
82
|
+
],
|
|
83
|
+
wrapper: "text-sm"
|
|
84
|
+
},
|
|
85
|
+
lg: {
|
|
86
|
+
root: [
|
|
87
|
+
"[--ui-radio-size:24px] [--ui-radio-dot-size:12px] [--ui-radio-gap:9px]",
|
|
88
|
+
"[--ui-radio-group-gap:12px] [--ui-radio-group-item-gap:14px]",
|
|
89
|
+
"[--ui-radio-group-label-size:0.875rem] [--ui-radio-group-description-size:0.875rem]"
|
|
90
|
+
],
|
|
91
|
+
wrapper: "text-sm"
|
|
92
|
+
},
|
|
93
|
+
xl: {
|
|
94
|
+
root: [
|
|
95
|
+
"[--ui-radio-size:28px] [--ui-radio-dot-size:14px] [--ui-radio-gap:10px]",
|
|
96
|
+
"[--ui-radio-group-gap:14px] [--ui-radio-group-item-gap:16px]",
|
|
97
|
+
"[--ui-radio-group-label-size:1rem] [--ui-radio-group-description-size:1rem]"
|
|
98
|
+
],
|
|
99
|
+
wrapper: "text-base"
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
},
|
|
103
|
+
defaultVariants: {
|
|
104
|
+
size: "md"
|
|
105
|
+
}
|
|
106
|
+
});
|
|
@@ -1,30 +1,4 @@
|
|
|
1
|
-
declare const _default: import("tailwind-variants").TVReturnType<{
|
|
2
|
-
[key: string]: {
|
|
3
|
-
[key: string]: import("tailwind-variants").ClassValue | {
|
|
4
|
-
overlay?: import("tailwind-variants").ClassValue;
|
|
5
|
-
content?: import("tailwind-variants").ClassValue;
|
|
6
|
-
root?: import("tailwind-variants").ClassValue;
|
|
7
|
-
glass?: import("tailwind-variants").ClassValue;
|
|
8
|
-
scrollbar?: import("tailwind-variants").ClassValue;
|
|
9
|
-
viewport?: import("tailwind-variants").ClassValue;
|
|
10
|
-
corner?: import("tailwind-variants").ClassValue;
|
|
11
|
-
thumb?: import("tailwind-variants").ClassValue;
|
|
12
|
-
};
|
|
13
|
-
};
|
|
14
|
-
} | {
|
|
15
|
-
[x: string]: {
|
|
16
|
-
[x: string]: import("tailwind-variants").ClassValue | {
|
|
17
|
-
overlay?: import("tailwind-variants").ClassValue;
|
|
18
|
-
content?: import("tailwind-variants").ClassValue;
|
|
19
|
-
root?: import("tailwind-variants").ClassValue;
|
|
20
|
-
glass?: import("tailwind-variants").ClassValue;
|
|
21
|
-
scrollbar?: import("tailwind-variants").ClassValue;
|
|
22
|
-
viewport?: import("tailwind-variants").ClassValue;
|
|
23
|
-
corner?: import("tailwind-variants").ClassValue;
|
|
24
|
-
thumb?: import("tailwind-variants").ClassValue;
|
|
25
|
-
};
|
|
26
|
-
};
|
|
27
|
-
} | {}, {
|
|
1
|
+
declare const _default: import("tailwind-variants").TVReturnType<{}, {
|
|
28
2
|
root: string[];
|
|
29
3
|
glass: string[];
|
|
30
4
|
overlay: string;
|
|
@@ -33,36 +7,5 @@ declare const _default: import("tailwind-variants").TVReturnType<{
|
|
|
33
7
|
scrollbar: string[];
|
|
34
8
|
thumb: string[];
|
|
35
9
|
corner: string;
|
|
36
|
-
}, undefined,
|
|
37
|
-
[key: string]: {
|
|
38
|
-
[key: string]: import("tailwind-variants").ClassValue | {
|
|
39
|
-
overlay?: import("tailwind-variants").ClassValue;
|
|
40
|
-
content?: import("tailwind-variants").ClassValue;
|
|
41
|
-
root?: import("tailwind-variants").ClassValue;
|
|
42
|
-
glass?: import("tailwind-variants").ClassValue;
|
|
43
|
-
scrollbar?: import("tailwind-variants").ClassValue;
|
|
44
|
-
viewport?: import("tailwind-variants").ClassValue;
|
|
45
|
-
corner?: import("tailwind-variants").ClassValue;
|
|
46
|
-
thumb?: import("tailwind-variants").ClassValue;
|
|
47
|
-
};
|
|
48
|
-
};
|
|
49
|
-
} | {}, {
|
|
50
|
-
root: string[];
|
|
51
|
-
glass: string[];
|
|
52
|
-
overlay: string;
|
|
53
|
-
viewport: string[];
|
|
54
|
-
content: string;
|
|
55
|
-
scrollbar: string[];
|
|
56
|
-
thumb: string[];
|
|
57
|
-
corner: string;
|
|
58
|
-
}, import("tailwind-variants").TVReturnTypeLike<unknown, {
|
|
59
|
-
root: string[];
|
|
60
|
-
glass: string[];
|
|
61
|
-
overlay: string;
|
|
62
|
-
viewport: string[];
|
|
63
|
-
content: string;
|
|
64
|
-
scrollbar: string[];
|
|
65
|
-
thumb: string[];
|
|
66
|
-
corner: string;
|
|
67
|
-
}>>;
|
|
10
|
+
}, undefined, undefined, undefined, undefined>;
|
|
68
11
|
export default _default;
|
package/dist/theme/slider.d.ts
CHANGED
|
@@ -1,50 +1,8 @@
|
|
|
1
|
-
declare const _default: import("tailwind-variants").TVReturnType<{
|
|
2
|
-
[key: string]: {
|
|
3
|
-
[key: string]: import("tailwind-variants").ClassValue | {
|
|
4
|
-
root?: import("tailwind-variants").ClassValue;
|
|
5
|
-
indicator?: import("tailwind-variants").ClassValue;
|
|
6
|
-
track?: import("tailwind-variants").ClassValue;
|
|
7
|
-
control?: import("tailwind-variants").ClassValue;
|
|
8
|
-
thumb?: import("tailwind-variants").ClassValue;
|
|
9
|
-
};
|
|
10
|
-
};
|
|
11
|
-
} | {
|
|
12
|
-
[x: string]: {
|
|
13
|
-
[x: string]: import("tailwind-variants").ClassValue | {
|
|
14
|
-
root?: import("tailwind-variants").ClassValue;
|
|
15
|
-
indicator?: import("tailwind-variants").ClassValue;
|
|
16
|
-
track?: import("tailwind-variants").ClassValue;
|
|
17
|
-
control?: import("tailwind-variants").ClassValue;
|
|
18
|
-
thumb?: import("tailwind-variants").ClassValue;
|
|
19
|
-
};
|
|
20
|
-
};
|
|
21
|
-
} | {}, {
|
|
1
|
+
declare const _default: import("tailwind-variants").TVReturnType<{}, {
|
|
22
2
|
root: string[];
|
|
23
3
|
control: string[];
|
|
24
4
|
track: string[];
|
|
25
5
|
indicator: string[];
|
|
26
6
|
thumb: string[];
|
|
27
|
-
}, undefined,
|
|
28
|
-
[key: string]: {
|
|
29
|
-
[key: string]: import("tailwind-variants").ClassValue | {
|
|
30
|
-
root?: import("tailwind-variants").ClassValue;
|
|
31
|
-
indicator?: import("tailwind-variants").ClassValue;
|
|
32
|
-
track?: import("tailwind-variants").ClassValue;
|
|
33
|
-
control?: import("tailwind-variants").ClassValue;
|
|
34
|
-
thumb?: import("tailwind-variants").ClassValue;
|
|
35
|
-
};
|
|
36
|
-
};
|
|
37
|
-
} | {}, {
|
|
38
|
-
root: string[];
|
|
39
|
-
control: string[];
|
|
40
|
-
track: string[];
|
|
41
|
-
indicator: string[];
|
|
42
|
-
thumb: string[];
|
|
43
|
-
}, import("tailwind-variants").TVReturnTypeLike<unknown, {
|
|
44
|
-
root: string[];
|
|
45
|
-
control: string[];
|
|
46
|
-
track: string[];
|
|
47
|
-
indicator: string[];
|
|
48
|
-
thumb: string[];
|
|
49
|
-
}>>;
|
|
7
|
+
}, undefined, undefined, undefined, undefined>;
|
|
50
8
|
export default _default;
|
package/dist/theme/switch.d.ts
CHANGED
|
@@ -29,67 +29,5 @@ declare const theme: import("tailwind-variants").TVReturnType<{
|
|
|
29
29
|
wrapper: string;
|
|
30
30
|
label: string;
|
|
31
31
|
description: string;
|
|
32
|
-
}, undefined,
|
|
33
|
-
size: {
|
|
34
|
-
xs: {
|
|
35
|
-
base: string;
|
|
36
|
-
wrapper: string;
|
|
37
|
-
};
|
|
38
|
-
sm: {
|
|
39
|
-
base: string;
|
|
40
|
-
wrapper: string;
|
|
41
|
-
};
|
|
42
|
-
md: {
|
|
43
|
-
base: string;
|
|
44
|
-
wrapper: string;
|
|
45
|
-
};
|
|
46
|
-
lg: {
|
|
47
|
-
base: string;
|
|
48
|
-
wrapper: string;
|
|
49
|
-
};
|
|
50
|
-
xl: {
|
|
51
|
-
base: string;
|
|
52
|
-
wrapper: string;
|
|
53
|
-
};
|
|
54
|
-
};
|
|
55
|
-
}, {
|
|
56
|
-
root: string[];
|
|
57
|
-
container: string;
|
|
58
|
-
base: string[];
|
|
59
|
-
thumb: string[];
|
|
60
|
-
wrapper: string;
|
|
61
|
-
label: string;
|
|
62
|
-
description: string;
|
|
63
|
-
}, import("tailwind-variants").TVReturnTypeLike<{
|
|
64
|
-
size: {
|
|
65
|
-
xs: {
|
|
66
|
-
base: string;
|
|
67
|
-
wrapper: string;
|
|
68
|
-
};
|
|
69
|
-
sm: {
|
|
70
|
-
base: string;
|
|
71
|
-
wrapper: string;
|
|
72
|
-
};
|
|
73
|
-
md: {
|
|
74
|
-
base: string;
|
|
75
|
-
wrapper: string;
|
|
76
|
-
};
|
|
77
|
-
lg: {
|
|
78
|
-
base: string;
|
|
79
|
-
wrapper: string;
|
|
80
|
-
};
|
|
81
|
-
xl: {
|
|
82
|
-
base: string;
|
|
83
|
-
wrapper: string;
|
|
84
|
-
};
|
|
85
|
-
};
|
|
86
|
-
}, {
|
|
87
|
-
root: string[];
|
|
88
|
-
container: string;
|
|
89
|
-
base: string[];
|
|
90
|
-
thumb: string[];
|
|
91
|
-
wrapper: string;
|
|
92
|
-
label: string;
|
|
93
|
-
description: string;
|
|
94
|
-
}>>;
|
|
32
|
+
}, undefined, undefined, undefined, undefined>;
|
|
95
33
|
export default theme;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
declare const _default: import("tailwind-variants").TVReturnType<{
|
|
2
|
+
size: {
|
|
3
|
+
xs: {
|
|
4
|
+
root: string;
|
|
5
|
+
};
|
|
6
|
+
sm: {
|
|
7
|
+
root: string;
|
|
8
|
+
};
|
|
9
|
+
md: {
|
|
10
|
+
root: string;
|
|
11
|
+
};
|
|
12
|
+
lg: {
|
|
13
|
+
root: string;
|
|
14
|
+
};
|
|
15
|
+
xl: {
|
|
16
|
+
root: string;
|
|
17
|
+
};
|
|
18
|
+
};
|
|
19
|
+
}, {
|
|
20
|
+
root: string[];
|
|
21
|
+
list: string[];
|
|
22
|
+
glass: string[];
|
|
23
|
+
overlay: string;
|
|
24
|
+
indicator: string[];
|
|
25
|
+
tab: string[];
|
|
26
|
+
icon: string;
|
|
27
|
+
label: string;
|
|
28
|
+
panels: string;
|
|
29
|
+
panel: string[];
|
|
30
|
+
panelContent: string;
|
|
31
|
+
}, undefined, undefined, undefined, undefined>;
|
|
32
|
+
export default _default;
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import { tv } from "tailwind-variants";
|
|
2
|
+
export default tv({
|
|
3
|
+
slots: {
|
|
4
|
+
root: [
|
|
5
|
+
"group/tabs flex w-full min-w-0 flex-col text-ui-ink",
|
|
6
|
+
"gap-[var(--ui-tabs-gap)]",
|
|
7
|
+
"data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-start",
|
|
8
|
+
"[--ui-tabs-thumb:color-mix(in_srgb,var(--ui-ink)_10%,transparent)]",
|
|
9
|
+
"[--ui-tabs-thumb-rim:color-mix(in_srgb,var(--ui-ink)_14%,transparent)]",
|
|
10
|
+
"[--ui-tabs-thumb-shadow:inset_1px_1px_0_-1px_rgb(255_255_255/0.8),inset_-1px_-1px_0_-1px_rgb(255_255_255/0.5),inset_0_-4px_1px_-3px_rgb(0_0_0/0.12),0_2px_5px_rgb(0_0_0/0.1)]",
|
|
11
|
+
"motion-reduce:[&_*]:transition-none"
|
|
12
|
+
],
|
|
13
|
+
list: [
|
|
14
|
+
"relative isolate flex w-fit max-w-full min-w-0 items-center",
|
|
15
|
+
"rounded-full p-[var(--ui-tabs-list-padding)] gap-[var(--ui-tabs-list-gap)]",
|
|
16
|
+
"data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch",
|
|
17
|
+
"data-[orientation=vertical]:rounded-[var(--ui-tabs-vertical-radius)]",
|
|
18
|
+
"[&_*]:box-border"
|
|
19
|
+
],
|
|
20
|
+
glass: [
|
|
21
|
+
"ui-glass ui-glass-inner ui-glass-highlight",
|
|
22
|
+
"pointer-events-none absolute inset-0 z-0 overflow-hidden rounded-[inherit]"
|
|
23
|
+
],
|
|
24
|
+
overlay: "ui-glass-rim",
|
|
25
|
+
indicator: [
|
|
26
|
+
"pointer-events-none absolute z-[1] rounded-full",
|
|
27
|
+
"left-[var(--active-tab-left)] top-[var(--active-tab-top)]",
|
|
28
|
+
"h-[var(--active-tab-height)] w-[var(--active-tab-width)]",
|
|
29
|
+
"bg-[var(--ui-tabs-thumb)] ring-1 ring-[var(--ui-tabs-thumb-rim)] ring-inset",
|
|
30
|
+
"shadow-[var(--ui-tabs-thumb-shadow)]",
|
|
31
|
+
"transition-[left,top,width,height] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]"
|
|
32
|
+
],
|
|
33
|
+
tab: [
|
|
34
|
+
"relative z-[2] inline-flex shrink-0 cursor-pointer select-none items-center justify-center",
|
|
35
|
+
"h-[var(--ui-tabs-tab-height)] gap-[var(--ui-tabs-tab-gap)]",
|
|
36
|
+
"rounded-full bg-transparent px-[var(--ui-tabs-tab-px)]",
|
|
37
|
+
"text-[length:var(--ui-tabs-font-size)] font-medium text-ui-ink/65",
|
|
38
|
+
"outline-none transition-colors duration-200",
|
|
39
|
+
"hover:text-ui-ink",
|
|
40
|
+
"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ui-glass-focus",
|
|
41
|
+
"data-[active]:text-ui-ink",
|
|
42
|
+
"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-45",
|
|
43
|
+
"data-[orientation=vertical]:self-stretch"
|
|
44
|
+
],
|
|
45
|
+
icon: "inline-flex shrink-0 items-center justify-center [&_svg]:size-[var(--ui-tabs-icon-size)] [&_svg]:shrink-0",
|
|
46
|
+
label: "min-w-0 truncate leading-none",
|
|
47
|
+
panels: "relative z-10 min-w-0 flex-1",
|
|
48
|
+
panel: [
|
|
49
|
+
"min-w-0 text-ui-ink outline-none",
|
|
50
|
+
"text-[length:var(--ui-tabs-panel-font-size)]",
|
|
51
|
+
"transition-[opacity,translate] duration-200 ease-out",
|
|
52
|
+
"data-[starting-style]:translate-y-1 data-[starting-style]:opacity-0",
|
|
53
|
+
"data-[ending-style]:translate-y-1 data-[ending-style]:opacity-0",
|
|
54
|
+
"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ui-glass-focus"
|
|
55
|
+
],
|
|
56
|
+
panelContent: "leading-relaxed text-ui-ink/70"
|
|
57
|
+
},
|
|
58
|
+
variants: {
|
|
59
|
+
size: {
|
|
60
|
+
xs: {
|
|
61
|
+
root: "[--ui-tabs-gap:12px] [--ui-tabs-list-padding:3px] [--ui-tabs-list-gap:2px] [--ui-tabs-tab-height:26px] [--ui-tabs-tab-px:10px] [--ui-tabs-font-size:0.75rem] [--ui-tabs-icon-size:14px] [--ui-tabs-tab-gap:4px] [--ui-tabs-vertical-radius:16px] [--ui-tabs-panel-font-size:0.75rem]"
|
|
62
|
+
},
|
|
63
|
+
sm: {
|
|
64
|
+
root: "[--ui-tabs-gap:14px] [--ui-tabs-list-padding:3px] [--ui-tabs-list-gap:2px] [--ui-tabs-tab-height:30px] [--ui-tabs-tab-px:12px] [--ui-tabs-font-size:0.75rem] [--ui-tabs-icon-size:16px] [--ui-tabs-tab-gap:4px] [--ui-tabs-vertical-radius:18px] [--ui-tabs-panel-font-size:0.8125rem]"
|
|
65
|
+
},
|
|
66
|
+
md: {
|
|
67
|
+
root: "[--ui-tabs-gap:16px] [--ui-tabs-list-padding:4px] [--ui-tabs-list-gap:2px] [--ui-tabs-tab-height:34px] [--ui-tabs-tab-px:14px] [--ui-tabs-font-size:0.875rem] [--ui-tabs-icon-size:18px] [--ui-tabs-tab-gap:6px] [--ui-tabs-vertical-radius:20px] [--ui-tabs-panel-font-size:0.875rem]"
|
|
68
|
+
},
|
|
69
|
+
lg: {
|
|
70
|
+
root: "[--ui-tabs-gap:18px] [--ui-tabs-list-padding:4px] [--ui-tabs-list-gap:3px] [--ui-tabs-tab-height:38px] [--ui-tabs-tab-px:16px] [--ui-tabs-font-size:0.875rem] [--ui-tabs-icon-size:20px] [--ui-tabs-tab-gap:6px] [--ui-tabs-vertical-radius:22px] [--ui-tabs-panel-font-size:0.875rem]"
|
|
71
|
+
},
|
|
72
|
+
xl: {
|
|
73
|
+
root: "[--ui-tabs-gap:22px] [--ui-tabs-list-padding:5px] [--ui-tabs-list-gap:3px] [--ui-tabs-tab-height:44px] [--ui-tabs-tab-px:20px] [--ui-tabs-font-size:1rem] [--ui-tabs-icon-size:22px] [--ui-tabs-tab-gap:8px] [--ui-tabs-vertical-radius:26px] [--ui-tabs-panel-font-size:1rem]"
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
},
|
|
77
|
+
defaultVariants: {
|
|
78
|
+
size: "md"
|
|
79
|
+
}
|
|
80
|
+
});
|
package/dist/theme/toast.d.ts
CHANGED
|
@@ -26,61 +26,5 @@ declare const _default: import("tailwind-variants").TVReturnType<{
|
|
|
26
26
|
actions: string;
|
|
27
27
|
action: string[];
|
|
28
28
|
close: string[];
|
|
29
|
-
}, undefined,
|
|
30
|
-
position: {
|
|
31
|
-
"top-left": {
|
|
32
|
-
viewport: string;
|
|
33
|
-
};
|
|
34
|
-
"top-right": {
|
|
35
|
-
viewport: string;
|
|
36
|
-
};
|
|
37
|
-
"bottom-left": {
|
|
38
|
-
viewport: string;
|
|
39
|
-
};
|
|
40
|
-
"bottom-right": {
|
|
41
|
-
viewport: string;
|
|
42
|
-
};
|
|
43
|
-
};
|
|
44
|
-
}, {
|
|
45
|
-
viewport: string;
|
|
46
|
-
root: string[];
|
|
47
|
-
glass: string[];
|
|
48
|
-
overlay: string;
|
|
49
|
-
content: string[];
|
|
50
|
-
icon: string[];
|
|
51
|
-
text: string;
|
|
52
|
-
title: string[];
|
|
53
|
-
description: string;
|
|
54
|
-
actions: string;
|
|
55
|
-
action: string[];
|
|
56
|
-
close: string[];
|
|
57
|
-
}, import("tailwind-variants").TVReturnTypeLike<{
|
|
58
|
-
position: {
|
|
59
|
-
"top-left": {
|
|
60
|
-
viewport: string;
|
|
61
|
-
};
|
|
62
|
-
"top-right": {
|
|
63
|
-
viewport: string;
|
|
64
|
-
};
|
|
65
|
-
"bottom-left": {
|
|
66
|
-
viewport: string;
|
|
67
|
-
};
|
|
68
|
-
"bottom-right": {
|
|
69
|
-
viewport: string;
|
|
70
|
-
};
|
|
71
|
-
};
|
|
72
|
-
}, {
|
|
73
|
-
viewport: string;
|
|
74
|
-
root: string[];
|
|
75
|
-
glass: string[];
|
|
76
|
-
overlay: string;
|
|
77
|
-
content: string[];
|
|
78
|
-
icon: string[];
|
|
79
|
-
text: string;
|
|
80
|
-
title: string[];
|
|
81
|
-
description: string;
|
|
82
|
-
actions: string;
|
|
83
|
-
action: string[];
|
|
84
|
-
close: string[];
|
|
85
|
-
}>>;
|
|
29
|
+
}, undefined, undefined, undefined, undefined>;
|
|
86
30
|
export default _default;
|
|
@@ -24,57 +24,5 @@ declare const _default: import("tailwind-variants").TVReturnType<{
|
|
|
24
24
|
content: string;
|
|
25
25
|
icon: string;
|
|
26
26
|
label: string;
|
|
27
|
-
}, undefined,
|
|
28
|
-
size: {
|
|
29
|
-
xs: {
|
|
30
|
-
root: string;
|
|
31
|
-
};
|
|
32
|
-
sm: {
|
|
33
|
-
root: string;
|
|
34
|
-
};
|
|
35
|
-
md: {
|
|
36
|
-
root: string;
|
|
37
|
-
};
|
|
38
|
-
lg: {
|
|
39
|
-
root: string;
|
|
40
|
-
};
|
|
41
|
-
xl: {
|
|
42
|
-
root: string;
|
|
43
|
-
};
|
|
44
|
-
};
|
|
45
|
-
}, {
|
|
46
|
-
root: string[];
|
|
47
|
-
glass: string[];
|
|
48
|
-
rim: string;
|
|
49
|
-
item: string[];
|
|
50
|
-
content: string;
|
|
51
|
-
icon: string;
|
|
52
|
-
label: string;
|
|
53
|
-
}, import("tailwind-variants").TVReturnTypeLike<{
|
|
54
|
-
size: {
|
|
55
|
-
xs: {
|
|
56
|
-
root: string;
|
|
57
|
-
};
|
|
58
|
-
sm: {
|
|
59
|
-
root: string;
|
|
60
|
-
};
|
|
61
|
-
md: {
|
|
62
|
-
root: string;
|
|
63
|
-
};
|
|
64
|
-
lg: {
|
|
65
|
-
root: string;
|
|
66
|
-
};
|
|
67
|
-
xl: {
|
|
68
|
-
root: string;
|
|
69
|
-
};
|
|
70
|
-
};
|
|
71
|
-
}, {
|
|
72
|
-
root: string[];
|
|
73
|
-
glass: string[];
|
|
74
|
-
rim: string;
|
|
75
|
-
item: string[];
|
|
76
|
-
content: string;
|
|
77
|
-
icon: string;
|
|
78
|
-
label: string;
|
|
79
|
-
}>>;
|
|
27
|
+
}, undefined, undefined, undefined, undefined>;
|
|
80
28
|
export default _default;
|
package/dist/theme/toggle.d.ts
CHANGED
|
@@ -29,67 +29,5 @@ declare const _default: import("tailwind-variants").TVReturnType<{
|
|
|
29
29
|
content: string;
|
|
30
30
|
icon: string;
|
|
31
31
|
label: string;
|
|
32
|
-
}, undefined,
|
|
33
|
-
size: {
|
|
34
|
-
xs: {
|
|
35
|
-
root: string;
|
|
36
|
-
};
|
|
37
|
-
sm: {
|
|
38
|
-
root: string;
|
|
39
|
-
};
|
|
40
|
-
md: {
|
|
41
|
-
root: string;
|
|
42
|
-
};
|
|
43
|
-
lg: {
|
|
44
|
-
root: string;
|
|
45
|
-
};
|
|
46
|
-
xl: {
|
|
47
|
-
root: string;
|
|
48
|
-
};
|
|
49
|
-
};
|
|
50
|
-
iconOnly: {
|
|
51
|
-
true: {
|
|
52
|
-
root: string;
|
|
53
|
-
};
|
|
54
|
-
};
|
|
55
|
-
}, {
|
|
56
|
-
root: string[];
|
|
57
|
-
glass: string[];
|
|
58
|
-
thumb: string[];
|
|
59
|
-
rim: string;
|
|
60
|
-
content: string;
|
|
61
|
-
icon: string;
|
|
62
|
-
label: string;
|
|
63
|
-
}, import("tailwind-variants").TVReturnTypeLike<{
|
|
64
|
-
size: {
|
|
65
|
-
xs: {
|
|
66
|
-
root: string;
|
|
67
|
-
};
|
|
68
|
-
sm: {
|
|
69
|
-
root: string;
|
|
70
|
-
};
|
|
71
|
-
md: {
|
|
72
|
-
root: string;
|
|
73
|
-
};
|
|
74
|
-
lg: {
|
|
75
|
-
root: string;
|
|
76
|
-
};
|
|
77
|
-
xl: {
|
|
78
|
-
root: string;
|
|
79
|
-
};
|
|
80
|
-
};
|
|
81
|
-
iconOnly: {
|
|
82
|
-
true: {
|
|
83
|
-
root: string;
|
|
84
|
-
};
|
|
85
|
-
};
|
|
86
|
-
}, {
|
|
87
|
-
root: string[];
|
|
88
|
-
glass: string[];
|
|
89
|
-
thumb: string[];
|
|
90
|
-
rim: string;
|
|
91
|
-
content: string;
|
|
92
|
-
icon: string;
|
|
93
|
-
label: string;
|
|
94
|
-
}>>;
|
|
32
|
+
}, undefined, undefined, undefined, undefined>;
|
|
95
33
|
export default _default;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xingxingmofashu/ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.5",
|
|
4
4
|
"description": "Accessible React components with a Liquid Glass visual style for React 19 and Tailwind CSS 4.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "xingxingmofashu",
|
|
@@ -69,16 +69,17 @@
|
|
|
69
69
|
},
|
|
70
70
|
"dependencies": {
|
|
71
71
|
"@base-ui/react": "1.9.0",
|
|
72
|
-
"cn": "0.5.
|
|
73
|
-
"tailwind-variants": "
|
|
72
|
+
"cn": "0.5.1",
|
|
73
|
+
"tailwind-variants": "4.0.1"
|
|
74
74
|
},
|
|
75
75
|
"devDependencies": {
|
|
76
|
+
"@playwright/test": "1.64.1",
|
|
76
77
|
"@tailwindcss/node": "4.3.3",
|
|
77
78
|
"@testing-library/dom": "10.4.2",
|
|
78
79
|
"@testing-library/jest-dom": "7.0.1",
|
|
79
80
|
"@testing-library/react": "16.3.3",
|
|
80
81
|
"@testing-library/user-event": "14.6.8",
|
|
81
|
-
"@types/node": "20.
|
|
82
|
+
"@types/node": "22.20.5",
|
|
82
83
|
"@types/react": "19.3.0",
|
|
83
84
|
"@types/react-dom": "19.3.0",
|
|
84
85
|
"husky": "9.1.7",
|
|
@@ -100,6 +101,8 @@
|
|
|
100
101
|
"lint": "oxlint",
|
|
101
102
|
"lint:fix": "oxlint --fix",
|
|
102
103
|
"test": "vitest run",
|
|
104
|
+
"test:visual": "playwright test",
|
|
105
|
+
"test:visual:update": "playwright test --update-snapshots",
|
|
103
106
|
"typecheck": "tsc --noEmit",
|
|
104
107
|
"docs:dev": "pnpm --filter @xingxingmofashu/docs dev",
|
|
105
108
|
"docs:build": "pnpm --filter @xingxingmofashu/docs build",
|