@byyuurin/ui 0.0.8 → 0.0.9
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/module.json +1 -1
- package/dist/module.mjs +4 -3
- package/dist/module.mjs.map +1 -1
- package/dist/runtime/app/injections.d.ts +2 -7
- package/dist/runtime/app/injections.js +0 -5
- package/dist/runtime/components/Accordion.vue +10 -8
- package/dist/runtime/components/Alert.vue +5 -8
- package/dist/runtime/components/App.vue +14 -19
- package/dist/runtime/components/Avatar.vue +5 -8
- package/dist/runtime/components/AvatarGroup.vue +2 -5
- package/dist/runtime/components/Badge.vue +2 -5
- package/dist/runtime/components/Breadcrumb.vue +11 -8
- package/dist/runtime/components/Button.vue +2 -3
- package/dist/runtime/components/ButtonGroup.vue +2 -5
- package/dist/runtime/components/Calendar.vue +176 -0
- package/dist/runtime/components/Card.vue +2 -5
- package/dist/runtime/components/Carousel.vue +6 -13
- package/dist/runtime/components/Checkbox.vue +2 -5
- package/dist/runtime/components/Chip.vue +6 -9
- package/dist/runtime/components/Collapsible.vue +2 -5
- package/dist/runtime/components/Drawer.vue +80 -37
- package/dist/runtime/components/Input.vue +10 -13
- package/dist/runtime/components/InputNumber.vue +2 -5
- package/dist/runtime/components/Kbd.vue +2 -6
- package/dist/runtime/components/Link.vue +8 -5
- package/dist/runtime/components/Modal.vue +20 -11
- package/dist/runtime/components/OverlayProvider.vue +29 -0
- package/dist/runtime/components/Pagination.vue +34 -27
- package/dist/runtime/components/PinInput.vue +2 -5
- package/dist/runtime/components/Popover.vue +2 -5
- package/dist/runtime/components/Progress.vue +2 -5
- package/dist/runtime/components/RadioGroup.vue +6 -7
- package/dist/runtime/components/ScrollArea.vue +2 -6
- package/dist/runtime/components/Select.vue +10 -13
- package/dist/runtime/components/Separator.vue +2 -6
- package/dist/runtime/components/Skeleton.vue +2 -5
- package/dist/runtime/components/Slider.vue +2 -5
- package/dist/runtime/components/Switch.vue +6 -5
- package/dist/runtime/components/Table.vue +2 -5
- package/dist/runtime/components/Tabs.vue +2 -5
- package/dist/runtime/components/Textarea.vue +2 -5
- package/dist/runtime/components/Toast.vue +7 -11
- package/dist/runtime/components/{Toaster.vue → ToastProvider.vue} +18 -16
- package/dist/runtime/components/Tooltip.vue +2 -5
- package/dist/runtime/composables/useKbd.d.ts +1 -1
- package/dist/runtime/composables/useOverlay.d.ts +29 -0
- package/dist/runtime/composables/useOverlay.js +69 -0
- package/dist/runtime/composables/useTheme.d.ts +6 -2
- package/dist/runtime/composables/useTheme.js +9 -3
- package/dist/runtime/composables/useToast.d.ts +4 -20
- package/dist/runtime/composables/useToast.js +6 -5
- package/dist/runtime/index.d.ts +3 -2
- package/dist/runtime/index.js +3 -2
- package/dist/runtime/locale/en.js +6 -0
- package/dist/runtime/locale/zh-tw.js +6 -0
- package/dist/runtime/theme/accordion.js +3 -3
- package/dist/runtime/theme/alert.js +3 -3
- package/dist/runtime/theme/avatar.js +2 -2
- package/dist/runtime/theme/breadcrumb.js +5 -5
- package/dist/runtime/theme/button.js +13 -13
- package/dist/runtime/theme/calendar.d.ts +56 -0
- package/dist/runtime/theme/calendar.js +69 -0
- package/dist/runtime/theme/card.js +6 -6
- package/dist/runtime/theme/carousel.js +1 -1
- package/dist/runtime/theme/checkbox.js +5 -5
- package/dist/runtime/theme/chip.js +3 -3
- package/dist/runtime/theme/drawer.d.ts +24 -21
- package/dist/runtime/theme/drawer.js +46 -19
- package/dist/runtime/theme/index.d.ts +2 -1
- package/dist/runtime/theme/index.js +2 -1
- package/dist/runtime/theme/input-number.js +1 -1
- package/dist/runtime/theme/input.js +14 -14
- package/dist/runtime/theme/kbd.d.ts +2 -2
- package/dist/runtime/theme/kbd.js +1 -1
- package/dist/runtime/theme/link.d.ts +1 -1
- package/dist/runtime/theme/link.js +3 -3
- package/dist/runtime/theme/modal.js +4 -4
- package/dist/runtime/theme/pagination.d.ts +27 -3
- package/dist/runtime/theme/pagination.js +6 -2
- package/dist/runtime/theme/pinInput.js +13 -13
- package/dist/runtime/theme/progress.js +4 -4
- package/dist/runtime/theme/radio-group.d.ts +2 -2
- package/dist/runtime/theme/radio-group.js +7 -7
- package/dist/runtime/theme/select.js +20 -20
- package/dist/runtime/theme/separator.js +1 -1
- package/dist/runtime/theme/skeleton.d.ts +1 -1
- package/dist/runtime/theme/skeleton.js +1 -1
- package/dist/runtime/theme/slider.js +1 -1
- package/dist/runtime/theme/switch.js +5 -5
- package/dist/runtime/theme/table.js +7 -7
- package/dist/runtime/theme/tabs.js +10 -10
- package/dist/runtime/theme/textarea.js +13 -13
- package/dist/runtime/theme/toast.js +5 -5
- package/dist/runtime/theme/tooltip.js +1 -1
- package/dist/runtime/types/components.d.ts +3 -1
- package/dist/runtime/types/locale.d.ts +6 -0
- package/dist/runtime/types/utils.d.ts +4 -2
- package/dist/shared/ui.1a1f119c.mjs +5 -0
- package/dist/shared/ui.1a1f119c.mjs.map +1 -0
- package/dist/unocss.mjs +19 -14
- package/dist/unocss.mjs.map +1 -1
- package/dist/unplugin.mjs +1 -1
- package/dist/vite.mjs +1 -1
- package/package.json +9 -9
- package/dist/runtime/components/ModalProvider.vue +0 -11
- package/dist/runtime/composables/useModal.d.ts +0 -10
- package/dist/runtime/composables/useModal.js +0 -47
- package/dist/shared/ui.ba24b380.mjs +0 -4
- package/dist/shared/ui.ba24b380.mjs.map +0 -1
- /package/dist/runtime/theme/{toaster.d.ts → toast-provider.d.ts} +0 -0
- /package/dist/runtime/theme/{toaster.js → toast-provider.js} +0 -0
|
@@ -6,7 +6,7 @@ export default ct(
|
|
|
6
6
|
variants: {
|
|
7
7
|
variant: {
|
|
8
8
|
"solid": "color-ui-cx bg-soft-ui-fill/90",
|
|
9
|
-
"outline": "color-ui-fill ring bg-ui-
|
|
9
|
+
"outline": "color-ui-fill ring bg-ui-base/90 ring-inset ring-ui-fill/30",
|
|
10
10
|
"soft": "color-ui-fill/80 bg-soft-ui-fill/20",
|
|
11
11
|
"soft-outline": "color-ui-fill/80 bg-soft-ui-fill/20 ring ring-inset ring-ui-fill/30"
|
|
12
12
|
},
|
|
@@ -26,7 +26,7 @@ declare const _default: {
|
|
|
26
26
|
disabled: {
|
|
27
27
|
true: "cursor-not-allowed opacity-50";
|
|
28
28
|
};
|
|
29
|
-
}, undefined, "border-y border-t-transparent outline-none focus-visible:outline-ui-
|
|
29
|
+
}, undefined, "border-y border-t-transparent outline-none focus-visible:outline-ui-base/80">;
|
|
30
30
|
defaultVariants: import("@byyuurin/ui-kit").CVDefaultVariants<{
|
|
31
31
|
underline: {
|
|
32
32
|
true: "border-current";
|
|
@@ -2,7 +2,7 @@ import { ct } from "@byyuurin/ui-kit";
|
|
|
2
2
|
export default ct(
|
|
3
3
|
/* @unocss-include */
|
|
4
4
|
{
|
|
5
|
-
base: "border-y border-t-transparent outline-none focus-visible:outline-ui-
|
|
5
|
+
base: "border-y border-t-transparent outline-none focus-visible:outline-ui-base/80",
|
|
6
6
|
variants: {
|
|
7
7
|
underline: {
|
|
8
8
|
true: "border-current",
|
|
@@ -14,8 +14,8 @@ export default ct(
|
|
|
14
14
|
"disabled:color-ui-fill aria-disabled:color-ui-fill"
|
|
15
15
|
],
|
|
16
16
|
false: [
|
|
17
|
-
"color-ui-
|
|
18
|
-
"disabled:hover:color-ui-
|
|
17
|
+
"color-ui-base/80 hover:color-ui-base/60 transition-colors",
|
|
18
|
+
"disabled:hover:color-ui-base aria-disabled:hover:color-ui-base"
|
|
19
19
|
]
|
|
20
20
|
},
|
|
21
21
|
disabled: {
|
|
@@ -4,12 +4,12 @@ export default ct(
|
|
|
4
4
|
{
|
|
5
5
|
slots: {
|
|
6
6
|
overlay: "fixed z-1 inset-0 bg-black/40",
|
|
7
|
-
content: "fixed z-1 bg-ui-
|
|
7
|
+
content: "fixed z-1 bg-ui-base divide-y divide-ui-base/10 flex flex-col focus:outline-none",
|
|
8
8
|
header: "flex flex-wrap items-center gap-1 px-4 py-5 sm:px-6",
|
|
9
9
|
body: "flex-1 overflow-y-auto p-4 sm:p-6 empty:hidden",
|
|
10
10
|
footer: "flex items-center gap-1.5 p-4 sm:px-6",
|
|
11
|
-
title: "flex-grow color-ui-
|
|
12
|
-
description: "w-full color-ui-
|
|
11
|
+
title: "flex-grow color-ui-base text-xl font-semibold",
|
|
12
|
+
description: "w-full color-ui-base/80",
|
|
13
13
|
close: "ms-auto"
|
|
14
14
|
},
|
|
15
15
|
variants: {
|
|
@@ -42,7 +42,7 @@ export default ct(
|
|
|
42
42
|
size: ["sm", "md", "lg", "xl"],
|
|
43
43
|
class: {
|
|
44
44
|
content: [
|
|
45
|
-
"bottom-4 left-[50%] translate-x-[-50%] h-auto max-w-[calc(100%-2rem)] max-h-[calc(100%-2rem)] rounded-ui-box shadow-sm shadow-ui-
|
|
45
|
+
"bottom-4 left-[50%] translate-x-[-50%] h-auto max-w-[calc(100%-2rem)] max-h-[calc(100%-2rem)] rounded-ui-box shadow-sm shadow-ui-base/10 ring ring-ui-base/10",
|
|
46
46
|
"sm:bottom-auto sm:top-[50%] sm:translate-y-[-50%]"
|
|
47
47
|
]
|
|
48
48
|
}
|
|
@@ -3,9 +3,13 @@ declare const _default: {
|
|
|
3
3
|
slots: {
|
|
4
4
|
root: string;
|
|
5
5
|
list: string;
|
|
6
|
-
item: string;
|
|
7
6
|
ellipsis: string;
|
|
8
7
|
label: string;
|
|
8
|
+
item: string;
|
|
9
|
+
first: string;
|
|
10
|
+
prev: string;
|
|
11
|
+
next: string;
|
|
12
|
+
last: string;
|
|
9
13
|
};
|
|
10
14
|
variants: {
|
|
11
15
|
[key: string]: {
|
|
@@ -14,7 +18,11 @@ declare const _default: {
|
|
|
14
18
|
item?: import("@byyuurin/ui-kit").ClassValue;
|
|
15
19
|
label?: import("@byyuurin/ui-kit").ClassValue;
|
|
16
20
|
list?: import("@byyuurin/ui-kit").ClassValue;
|
|
21
|
+
prev?: import("@byyuurin/ui-kit").ClassValue;
|
|
22
|
+
next?: import("@byyuurin/ui-kit").ClassValue;
|
|
17
23
|
ellipsis?: import("@byyuurin/ui-kit").ClassValue;
|
|
24
|
+
first?: import("@byyuurin/ui-kit").ClassValue;
|
|
25
|
+
last?: import("@byyuurin/ui-kit").ClassValue;
|
|
18
26
|
} | null;
|
|
19
27
|
};
|
|
20
28
|
};
|
|
@@ -25,15 +33,23 @@ declare const _default: {
|
|
|
25
33
|
item?: import("@byyuurin/ui-kit").ClassValue;
|
|
26
34
|
label?: import("@byyuurin/ui-kit").ClassValue;
|
|
27
35
|
list?: import("@byyuurin/ui-kit").ClassValue;
|
|
36
|
+
prev?: import("@byyuurin/ui-kit").ClassValue;
|
|
37
|
+
next?: import("@byyuurin/ui-kit").ClassValue;
|
|
28
38
|
ellipsis?: import("@byyuurin/ui-kit").ClassValue;
|
|
39
|
+
first?: import("@byyuurin/ui-kit").ClassValue;
|
|
40
|
+
last?: import("@byyuurin/ui-kit").ClassValue;
|
|
29
41
|
} | null;
|
|
30
42
|
};
|
|
31
43
|
}, {
|
|
32
44
|
root: string;
|
|
33
45
|
list: string;
|
|
34
|
-
item: string;
|
|
35
46
|
ellipsis: string;
|
|
36
47
|
label: string;
|
|
48
|
+
item: string;
|
|
49
|
+
first: string;
|
|
50
|
+
prev: string;
|
|
51
|
+
next: string;
|
|
52
|
+
last: string;
|
|
37
53
|
}, undefined>;
|
|
38
54
|
defaultVariants: import("@byyuurin/ui-kit").CVDefaultVariants<{
|
|
39
55
|
[key: string]: {
|
|
@@ -42,15 +58,23 @@ declare const _default: {
|
|
|
42
58
|
item?: import("@byyuurin/ui-kit").ClassValue;
|
|
43
59
|
label?: import("@byyuurin/ui-kit").ClassValue;
|
|
44
60
|
list?: import("@byyuurin/ui-kit").ClassValue;
|
|
61
|
+
prev?: import("@byyuurin/ui-kit").ClassValue;
|
|
62
|
+
next?: import("@byyuurin/ui-kit").ClassValue;
|
|
45
63
|
ellipsis?: import("@byyuurin/ui-kit").ClassValue;
|
|
64
|
+
first?: import("@byyuurin/ui-kit").ClassValue;
|
|
65
|
+
last?: import("@byyuurin/ui-kit").ClassValue;
|
|
46
66
|
} | null;
|
|
47
67
|
};
|
|
48
68
|
}, {
|
|
49
69
|
root: string;
|
|
50
70
|
list: string;
|
|
51
|
-
item: string;
|
|
52
71
|
ellipsis: string;
|
|
53
72
|
label: string;
|
|
73
|
+
item: string;
|
|
74
|
+
first: string;
|
|
75
|
+
prev: string;
|
|
76
|
+
next: string;
|
|
77
|
+
last: string;
|
|
54
78
|
}>;
|
|
55
79
|
};
|
|
56
80
|
export default _default;
|
|
@@ -5,9 +5,13 @@ export default ct(
|
|
|
5
5
|
slots: {
|
|
6
6
|
root: "",
|
|
7
7
|
list: "flex items-center gap-1",
|
|
8
|
-
item: "",
|
|
9
8
|
ellipsis: "pointer-events-none",
|
|
10
|
-
label: "px-0 min-w-1.5em"
|
|
9
|
+
label: "px-0 min-w-1.5em text-center",
|
|
10
|
+
item: "",
|
|
11
|
+
first: "",
|
|
12
|
+
prev: "",
|
|
13
|
+
next: "",
|
|
14
|
+
last: ""
|
|
11
15
|
}
|
|
12
16
|
}
|
|
13
17
|
);
|
|
@@ -5,7 +5,7 @@ export default ct(
|
|
|
5
5
|
slots: {
|
|
6
6
|
root: "inline-flex items-center gap-x-2",
|
|
7
7
|
container: "rounded-ui-base border-0 transition-colors aria-disabled:opacity-50",
|
|
8
|
-
base: "w-full color-inherit bg-transparent text-center placeholder:color-ui-
|
|
8
|
+
base: "w-full color-inherit bg-transparent text-center placeholder:color-ui-base/50 focus:outline-none disabled:cursor-not-allowed"
|
|
9
9
|
},
|
|
10
10
|
variants: {
|
|
11
11
|
size: {
|
|
@@ -28,34 +28,34 @@ export default ct(
|
|
|
28
28
|
variant: {
|
|
29
29
|
"outline": {
|
|
30
30
|
container: [
|
|
31
|
-
"color-ui-
|
|
32
|
-
"focus-within:ring-2 focus-within:ring-ui-
|
|
33
|
-
"aria-disabled:ring-ui-
|
|
31
|
+
"color-ui-base/80 bg-ui-base ring ring-inset ring-ui-base/30",
|
|
32
|
+
"focus-within:ring-2 focus-within:ring-ui-base/50",
|
|
33
|
+
"aria-disabled:ring-ui-base/80 hover:aria-disabled:ring-ui-base/80"
|
|
34
34
|
]
|
|
35
35
|
},
|
|
36
36
|
"soft": {
|
|
37
37
|
container: [
|
|
38
|
-
"color-ui-
|
|
39
|
-
"hover:bg-soft-ui-cb/6 hover:color-ui-
|
|
40
|
-
"aria-disabled:color-ui-
|
|
38
|
+
"color-ui-base/80 bg-soft-ui-cb/4",
|
|
39
|
+
"hover:bg-soft-ui-cb/6 hover:color-ui-base/80 focus-within:bg-soft-ui-cb/8 focus-within:color-ui-base/85",
|
|
40
|
+
"aria-disabled:color-ui-fill/80 aria-disabled:bg-soft-ui-fill/5 hover:aria-disabled:color-ui-fill/80 hover:aria-disabled:bg-soft-ui-fill/5"
|
|
41
41
|
]
|
|
42
42
|
},
|
|
43
43
|
"soft-outline": {
|
|
44
44
|
container: [
|
|
45
|
-
"color-ui-
|
|
46
|
-
"hover:bg-soft-ui-cb/6 hover:color-ui-
|
|
47
|
-
"aria-disabled:color-ui-
|
|
45
|
+
"color-ui-base/80 bg-soft-ui-cb/4 ring ring-inset ring-ui-base/30",
|
|
46
|
+
"hover:bg-soft-ui-cb/6 hover:color-ui-base/80 focus-within:bg-soft-ui-cb/8 focus-within:color-ui-base/85",
|
|
47
|
+
"aria-disabled:color-ui-fill/80 aria-disabled:bg-soft-ui-fill/5 hover:aria-disabled:color-ui-fill/80 hover:aria-disabled:bg-soft-ui-fill/5"
|
|
48
48
|
]
|
|
49
49
|
},
|
|
50
50
|
"ghost": {
|
|
51
51
|
container: [
|
|
52
|
-
"color-ui-
|
|
53
|
-
"hover:bg-soft-ui-cb/6 hover:color-ui-
|
|
52
|
+
"color-ui-base/80 bg-transparent",
|
|
53
|
+
"hover:bg-soft-ui-cb/6 hover:color-ui-base/80 focus-within:bg-soft-ui-cb/8 focus-within:color-ui-base/85",
|
|
54
54
|
"aria-disabled:color-ui-fill/80 aria-disabled:bg-transparent hover:aria-disabled:color-ui-fill/80 hover:aria-disabled:bg-transparent"
|
|
55
55
|
]
|
|
56
56
|
},
|
|
57
57
|
"none": {
|
|
58
|
-
container: "color-ui-
|
|
58
|
+
container: "color-ui-base bg-transparent"
|
|
59
59
|
}
|
|
60
60
|
},
|
|
61
61
|
underline: {
|
|
@@ -5,9 +5,9 @@ export default ct(
|
|
|
5
5
|
slots: {
|
|
6
6
|
wrapper: "gap-2",
|
|
7
7
|
root: "relative overflow-hidden rounded-full bg-soft-ui-cb/30",
|
|
8
|
-
indicator: "bg-ui-
|
|
9
|
-
status: "flex justify-end color-ui-
|
|
10
|
-
steps: "grid items-end color-ui-
|
|
8
|
+
indicator: "bg-ui-fill rounded-full size-full transition-transform duration-200 ease-out",
|
|
9
|
+
status: "flex justify-end color-ui-base/50 transition-[width] duration-200",
|
|
10
|
+
steps: "grid items-end color-ui-base/80",
|
|
11
11
|
step: "truncate text-end row-start-1 col-start-1 transition-opacity"
|
|
12
12
|
},
|
|
13
13
|
variants: {
|
|
@@ -33,7 +33,7 @@ export default ct(
|
|
|
33
33
|
step: "opacity-100"
|
|
34
34
|
},
|
|
35
35
|
first: {
|
|
36
|
-
step: "opacity-100 color-ui-
|
|
36
|
+
step: "opacity-100 color-ui-base/60"
|
|
37
37
|
},
|
|
38
38
|
other: {
|
|
39
39
|
step: "opacity-0"
|
|
@@ -40,7 +40,7 @@ declare const _default: {
|
|
|
40
40
|
};
|
|
41
41
|
disabled: {
|
|
42
42
|
true: {
|
|
43
|
-
|
|
43
|
+
item: string;
|
|
44
44
|
};
|
|
45
45
|
false: {
|
|
46
46
|
label: string;
|
|
@@ -80,7 +80,7 @@ declare const _default: {
|
|
|
80
80
|
};
|
|
81
81
|
disabled: {
|
|
82
82
|
true: {
|
|
83
|
-
|
|
83
|
+
item: string;
|
|
84
84
|
};
|
|
85
85
|
false: {
|
|
86
86
|
label: string;
|
|
@@ -3,16 +3,16 @@ export default ct(
|
|
|
3
3
|
/* @unocss-include */
|
|
4
4
|
{
|
|
5
5
|
slots: {
|
|
6
|
-
root: "
|
|
6
|
+
root: "",
|
|
7
7
|
fieldset: "flex flex-wrap gap-2 gap-x-4",
|
|
8
|
-
legend: "mb-2 color-ui-
|
|
9
|
-
item: "flex items-start",
|
|
10
|
-
base: "relative size-1.25em rounded-ui-radio ring ring-inset ring-ui-
|
|
8
|
+
legend: "mb-2 color-ui-base",
|
|
9
|
+
item: "relative flex items-start",
|
|
10
|
+
base: "relative size-1.25em rounded-ui-radio ring ring-inset ring-ui-base outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ui-base/80 transition data-[state=checked]:ring-ui-base",
|
|
11
11
|
indicator: "absolute inset-0 scale-0 rounded-ui-radio bg-ui-fill transition data-[state=checked]:scale-66",
|
|
12
12
|
container: "h-1.5em flex items-center",
|
|
13
13
|
wrapper: "",
|
|
14
|
-
label: "block ps-2 color-ui-
|
|
15
|
-
description: "ps-2 color-ui-
|
|
14
|
+
label: "block ps-2 color-ui-base",
|
|
15
|
+
description: "ps-2 color-ui-base/60"
|
|
16
16
|
},
|
|
17
17
|
variants: {
|
|
18
18
|
orientation: {
|
|
@@ -42,7 +42,7 @@ export default ct(
|
|
|
42
42
|
},
|
|
43
43
|
disabled: {
|
|
44
44
|
true: {
|
|
45
|
-
|
|
45
|
+
item: "opacity-50 after:content-empty after:absolute after:inset-0 after:cursor-not-allowed"
|
|
46
46
|
},
|
|
47
47
|
false: {
|
|
48
48
|
label: "cursor-pointer"
|
|
@@ -9,25 +9,25 @@ export default ct(
|
|
|
9
9
|
"disabled:cursor-not-allowed disabled:opacity-50"
|
|
10
10
|
],
|
|
11
11
|
value: "me-auto truncate pointer-events-none",
|
|
12
|
-
placeholder: "me-auto truncate color-ui-
|
|
12
|
+
placeholder: "me-auto truncate color-ui-base/50",
|
|
13
13
|
arrow: "fill-ui-cx stroke-ui-cb/20",
|
|
14
14
|
content: [
|
|
15
|
-
"z-1 max-h-60 w-[var(--reka-popper-anchor-width)] bg-ui-
|
|
15
|
+
"z-1 max-h-60 w-[var(--reka-popper-anchor-width)] bg-ui-base shadow-lg rounded-[calc(var(--ui-radius-tabs)*0.66)] ring ring-ui-base/20 overflow-hidden pointer-events-auto",
|
|
16
16
|
"data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]"
|
|
17
17
|
],
|
|
18
|
-
viewport: "divide-y divide-ui-
|
|
18
|
+
viewport: "divide-y divide-ui-base/10 scroll-py-1",
|
|
19
19
|
group: "p-1 isolate",
|
|
20
|
-
empty: "py-2 text-center text-sm color-ui-
|
|
21
|
-
label: "font-semibold color-ui-
|
|
20
|
+
empty: "py-2 text-center text-sm color-ui-base/50",
|
|
21
|
+
label: "font-semibold color-ui-base cursor-pointer",
|
|
22
22
|
separator: "-mx-1 my-1 h-px bg-soft-ui-cb/10",
|
|
23
23
|
item: [
|
|
24
|
-
"group relative w-full flex gap-2 items-center select-none outline-none color-ui-
|
|
24
|
+
"group relative w-full flex gap-2 items-center select-none outline-none color-ui-base/50 transition-colors cursor-pointer",
|
|
25
25
|
"aria-disabled:cursor-not-allowed aria-disabled:opacity-50",
|
|
26
26
|
"before:content-empty before:absolute before:z-[-1] before:inset-px before:rounded-ui-base before:transition-colors",
|
|
27
|
-
"data-[highlighted]:color-ui-
|
|
27
|
+
"data-[highlighted]:color-ui-base data-[highlighted]:before:bg-soft-ui-cb/3",
|
|
28
28
|
"data-[state=checked]:color-ui-base"
|
|
29
29
|
],
|
|
30
|
-
itemLeadingIcon: "shrink-0 color-ui-
|
|
30
|
+
itemLeadingIcon: "shrink-0 color-ui-base/80 group-data-[highlighted]:color-ui-base/80 transition-colors",
|
|
31
31
|
itemTrailing: "ms-auto inline-flex gap-1.5 items-center",
|
|
32
32
|
itemTrailingIcon: "shrink-0",
|
|
33
33
|
itemLabel: "truncate",
|
|
@@ -41,34 +41,34 @@ export default ct(
|
|
|
41
41
|
variant: {
|
|
42
42
|
"outline": {
|
|
43
43
|
base: [
|
|
44
|
-
"color-ui-
|
|
45
|
-
"focus-within:ring-2 focus-within:ring-ui-
|
|
46
|
-
"disabled:ring-ui-
|
|
44
|
+
"color-ui-base/80 bg-ui-base ring ring-inset ring-ui-base/30 data-[state=open]:ring-2 data-[state=open]:ring-ui-base/50",
|
|
45
|
+
"focus-within:ring-2 focus-within:ring-ui-base/50",
|
|
46
|
+
"disabled:ring-ui-base/80 hover:disabled:ring-ui-base/80"
|
|
47
47
|
]
|
|
48
48
|
},
|
|
49
49
|
"soft": {
|
|
50
50
|
base: [
|
|
51
|
-
"color-ui-
|
|
52
|
-
"hover:bg-soft-ui-cb/6 hover:color-ui-
|
|
53
|
-
"disabled:color-ui-
|
|
51
|
+
"color-ui-base/80 bg-soft-ui-cb/5 data-[state=open]:bg-soft-ui-cb/5",
|
|
52
|
+
"hover:bg-soft-ui-cb/6 hover:color-ui-base/80 focus-within:bg-soft-ui-cb/8 focus-within:color-ui-base/85",
|
|
53
|
+
"disabled:color-ui-fill/80 disabled:bg-soft-ui-fill/5 hover:disabled:color-ui-fill/80 hover:disabled:bg-soft-ui-fill/5"
|
|
54
54
|
]
|
|
55
55
|
},
|
|
56
56
|
"soft-outline": {
|
|
57
57
|
base: [
|
|
58
|
-
"color-ui-
|
|
59
|
-
"hover:bg-soft-ui-cb/6 hover:color-ui-
|
|
60
|
-
"disabled:color-ui-
|
|
58
|
+
"color-ui-base/80 bg-soft-ui-cb/5 ring ring-inset ring-ui-base/10 data-[state=open]:bg-soft-ui-cb/5 data-[state=open]:ring-ui-base/25",
|
|
59
|
+
"hover:bg-soft-ui-cb/6 hover:color-ui-base/80 focus-within:bg-soft-ui-cb/8 focus-within:color-ui-base/85",
|
|
60
|
+
"disabled:color-ui-fill/80 disabled:bg-soft-ui-fill/5 hover:disabled:color-ui-fill/80 hover:disabled:bg-soft-ui-fill/5"
|
|
61
61
|
]
|
|
62
62
|
},
|
|
63
63
|
"ghost": {
|
|
64
64
|
base: [
|
|
65
|
-
"color-ui-
|
|
66
|
-
"hover:bg-soft-ui-cb/6 hover:color-ui-
|
|
65
|
+
"color-ui-base/80 bg-transparent data-[state=open]:bg-soft-ui-cb/8",
|
|
66
|
+
"hover:bg-soft-ui-cb/6 hover:color-ui-base/80 focus-within:bg-soft-ui-cb/8 focus-within:color-ui-base/85",
|
|
67
67
|
"disabled:color-ui-fill/80 disabled:bg-transparent hover:disabled:color-ui-fill/80 hover:disabled:bg-transparent"
|
|
68
68
|
]
|
|
69
69
|
},
|
|
70
70
|
"none": {
|
|
71
|
-
base: "color-ui-
|
|
71
|
+
base: "color-ui-base bg-transparent"
|
|
72
72
|
}
|
|
73
73
|
},
|
|
74
74
|
size: {
|
|
@@ -2,7 +2,7 @@ declare const _default: {
|
|
|
2
2
|
base: string;
|
|
3
3
|
slots: undefined;
|
|
4
4
|
variants: {};
|
|
5
|
-
compoundVariants: import("@byyuurin/ui-kit").CVCompoundVariants<{}, undefined, "animate-pulse rounded-ui-base bg-soft-ui-
|
|
5
|
+
compoundVariants: import("@byyuurin/ui-kit").CVCompoundVariants<{}, undefined, "animate-pulse rounded-ui-base bg-soft-ui-cb/10">;
|
|
6
6
|
defaultVariants: import("@byyuurin/ui-kit").CVDefaultVariants<{}, undefined>;
|
|
7
7
|
};
|
|
8
8
|
export default _default;
|
|
@@ -11,7 +11,7 @@ export default ct(
|
|
|
11
11
|
],
|
|
12
12
|
range: "absolute rounded-full bg-soft-ui-fill",
|
|
13
13
|
thumb: [
|
|
14
|
-
"size-1em rounded-full bg-ui-
|
|
14
|
+
"size-1em rounded-full bg-ui-base ring-0.2em cursor-pointer focus-visible:outline-0.2em focus-visible:outline-offset-0.2em",
|
|
15
15
|
"data-[disabled]:cursor-not-allowed",
|
|
16
16
|
"ring-ui-fill outline-none focus-visible:outline-ui-fill/50"
|
|
17
17
|
]
|
|
@@ -6,22 +6,22 @@ export default ct(
|
|
|
6
6
|
root: "relative inline-flex items-start",
|
|
7
7
|
base: [
|
|
8
8
|
"inline-flex items-center shrink-0 rounded-ui-switch border-2 border-transparent transition-colors duration-200",
|
|
9
|
-
"outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ui-
|
|
9
|
+
"outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ui-base/80",
|
|
10
10
|
"data-[state=unchecked]:bg-soft-ui-cb/10 data-[state=checked]:bg-soft-ui-fill/80",
|
|
11
11
|
"w-2.7em"
|
|
12
12
|
],
|
|
13
13
|
container: "flex items-center h-1.5em",
|
|
14
14
|
thumb: [
|
|
15
|
-
"group pointer-events-none rounded-ui-switch size-1.25em bg-ui-
|
|
15
|
+
"group pointer-events-none rounded-ui-switch size-1.25em bg-ui-base shadow-lg ring-0 transition-transform duration-200 flex items-center justify-center",
|
|
16
16
|
"data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:translate-x-0 data-[state=checked]:translate-x-1.25em data-[state=checked]:rtl:-translate-x-1.25em"
|
|
17
17
|
],
|
|
18
18
|
icon: [
|
|
19
19
|
"absolute shrink-0 opacity-0 size-10/12 transition-[color,opacity] duration-200",
|
|
20
|
-
"group-data-[state=unchecked]:color-ui-
|
|
20
|
+
"group-data-[state=unchecked]:color-ui-base/50 group-data-[state=checked]:color-ui-base"
|
|
21
21
|
],
|
|
22
22
|
wrapper: "ms-2",
|
|
23
|
-
label: "flex color-ui-
|
|
24
|
-
description: "color-ui-
|
|
23
|
+
label: "flex color-ui-base/80",
|
|
24
|
+
description: "color-ui-base/60"
|
|
25
25
|
},
|
|
26
26
|
variants: {
|
|
27
27
|
size: {
|
|
@@ -7,22 +7,22 @@ export default ct(
|
|
|
7
7
|
base: "min-w-full overflow-clip",
|
|
8
8
|
caption: "sr-only",
|
|
9
9
|
thead: "relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-ui-cb/20",
|
|
10
|
-
tbody: "divide-y divide-ui-
|
|
10
|
+
tbody: "divide-y divide-ui-base/10",
|
|
11
11
|
tr: "data-[selected=true]:bg-soft-ui-cb/50",
|
|
12
|
-
th: "px-4 py-3.5 text-sm color-ui-
|
|
13
|
-
td: "p-4 text-sm color-ui-
|
|
14
|
-
empty: "py-6 text-center text-sm color-ui-
|
|
12
|
+
th: "px-4 py-3.5 text-sm color-ui-base text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0",
|
|
13
|
+
td: "p-4 text-sm color-ui-base/80 whitespace-nowrap [&:has([role=checkbox])]:pe-0",
|
|
14
|
+
empty: "py-6 text-center text-sm color-ui-base/80"
|
|
15
15
|
},
|
|
16
16
|
variants: {
|
|
17
17
|
sticky: {
|
|
18
18
|
true: {
|
|
19
|
-
thead: "sticky z-1 top-0 inset-x-0 bg-ui-
|
|
19
|
+
thead: "sticky z-1 top-0 inset-x-0 bg-ui-base/90 backdrop-blur"
|
|
20
20
|
}
|
|
21
21
|
},
|
|
22
22
|
pinned: {
|
|
23
23
|
true: {
|
|
24
|
-
th: "sticky bg-ui-
|
|
25
|
-
td: "sticky bg-ui-
|
|
24
|
+
th: "sticky bg-ui-base/90 data-[pinned=left]:left-0 data-[pinned=right]:right-0",
|
|
25
|
+
td: "sticky bg-ui-base/90 data-[pinned=left]:left-0 data-[pinned=right]:right-0"
|
|
26
26
|
}
|
|
27
27
|
},
|
|
28
28
|
expanded: {
|
|
@@ -20,24 +20,24 @@ export default ct(
|
|
|
20
20
|
"solid": {
|
|
21
21
|
list: "bg-soft-ui-cb/5 rounded-ui-tabs",
|
|
22
22
|
trigger: [
|
|
23
|
-
"data-[state=active]:color-ui-cx focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ui-
|
|
24
|
-
"data-[state=inactive]:color-ui-
|
|
23
|
+
"data-[state=active]:color-ui-cx focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ui-base/80",
|
|
24
|
+
"data-[state=inactive]:color-ui-base/80 hover:data-[state=inactive]:not-disabled:color-ui-base"
|
|
25
25
|
],
|
|
26
26
|
indicator: "bg-soft-ui-fill/90 rounded-ui-tabs shadow-sm"
|
|
27
27
|
},
|
|
28
28
|
"outline": {
|
|
29
29
|
list: "bg-soft-ui-cb/5 rounded-ui-tabs",
|
|
30
30
|
trigger: [
|
|
31
|
-
"data-[state=active]:color-ui-
|
|
32
|
-
"data-[state=inactive]:color-ui-
|
|
31
|
+
"data-[state=active]:color-ui-fill focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ui-fill/80",
|
|
32
|
+
"data-[state=inactive]:color-ui-base/80 hover:data-[state=inactive]:not-disabled:color-ui-base"
|
|
33
33
|
],
|
|
34
|
-
indicator: "rounded-ui-tabs ring ring-inset ring-ui-
|
|
34
|
+
indicator: "rounded-ui-tabs ring ring-inset ring-ui-fill"
|
|
35
35
|
},
|
|
36
36
|
"soft": {
|
|
37
37
|
list: "bg-soft-ui-cb/5 rounded-ui-tabs",
|
|
38
38
|
trigger: [
|
|
39
39
|
"data-[state=active]:color-ui-fill focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ui-fill",
|
|
40
|
-
"data-[state=inactive]:color-ui-
|
|
40
|
+
"data-[state=inactive]:color-ui-base/80 hover:data-[state=inactive]:not-disabled:color-ui-base"
|
|
41
41
|
],
|
|
42
42
|
indicator: "bg-soft-ui-fill/10 rounded-ui-tabs shadow-sm"
|
|
43
43
|
},
|
|
@@ -45,16 +45,16 @@ export default ct(
|
|
|
45
45
|
list: "bg-soft-ui-cb/5 rounded-ui-tabs",
|
|
46
46
|
trigger: [
|
|
47
47
|
"data-[state=active]:color-ui-fill focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ui-fill",
|
|
48
|
-
"data-[state=inactive]:color-ui-
|
|
48
|
+
"data-[state=inactive]:color-ui-base/80 hover:data-[state=inactive]:not-disabled:color-ui-base"
|
|
49
49
|
],
|
|
50
|
-
indicator: "bg-soft-ui-fill/10 rounded-ui-tabs shadow-sm ring ring-inset ring-ui-
|
|
50
|
+
indicator: "bg-soft-ui-fill/10 rounded-ui-tabs shadow-sm ring ring-inset ring-ui-fill/30"
|
|
51
51
|
},
|
|
52
52
|
"link": {
|
|
53
|
-
list: "bg-soft-ui-cb/5 border-ui-
|
|
53
|
+
list: "bg-soft-ui-cb/5 border-ui-base/10",
|
|
54
54
|
indicator: "bg-soft-ui-fill rounded-full",
|
|
55
55
|
trigger: [
|
|
56
56
|
"data-[state=active]:color-ui-base focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ui-base",
|
|
57
|
-
"data-[state=inactive]:color-ui-
|
|
57
|
+
"data-[state=inactive]:color-ui-base/80 hover:data-[state=inactive]:not-disabled:color-ui-base"
|
|
58
58
|
]
|
|
59
59
|
}
|
|
60
60
|
},
|
|
@@ -5,7 +5,7 @@ export default ct(
|
|
|
5
5
|
slots: {
|
|
6
6
|
root: "rounded-ui-base transition-colors aria-disabled:opacity-50",
|
|
7
7
|
base: [
|
|
8
|
-
"w-full color-inherit bg-transparent border-0 resize-none placeholder:color-ui-
|
|
8
|
+
"w-full color-inherit bg-transparent border-0 resize-none placeholder:color-ui-base/50",
|
|
9
9
|
"focus:outline-none",
|
|
10
10
|
"disabled:cursor-not-allowed"
|
|
11
11
|
]
|
|
@@ -31,34 +31,34 @@ export default ct(
|
|
|
31
31
|
variant: {
|
|
32
32
|
"outline": {
|
|
33
33
|
root: [
|
|
34
|
-
"color-ui-
|
|
35
|
-
"focus-within:ring-2 focus-within:ring-ui-
|
|
36
|
-
"aria-disabled:ring-ui-
|
|
34
|
+
"color-ui-base/80 bg-ui-base ring ring-inset ring-ui-base/30",
|
|
35
|
+
"focus-within:ring-2 focus-within:ring-ui-base/50",
|
|
36
|
+
"aria-disabled:ring-ui-base/80 hover:aria-disabled:ring-ui-base/80"
|
|
37
37
|
]
|
|
38
38
|
},
|
|
39
39
|
"soft": {
|
|
40
40
|
root: [
|
|
41
|
-
"color-ui-
|
|
42
|
-
"hover:bg-soft-ui-cb/6 hover:color-ui-
|
|
43
|
-
"aria-disabled:color-ui-
|
|
41
|
+
"color-ui-base/80 bg-soft-ui-cb/4",
|
|
42
|
+
"hover:bg-soft-ui-cb/6 hover:color-ui-base/80 focus-within:bg-soft-ui-cb/8 focus-within:hover:bg-soft-ui-cb/8 focus-within:color-ui-base/85",
|
|
43
|
+
"aria-disabled:color-ui-fill/80 aria-disabled:bg-soft-ui-fill/5 hover:aria-disabled:color-ui-fill/80 hover:aria-disabled:bg-soft-ui-fill/5"
|
|
44
44
|
]
|
|
45
45
|
},
|
|
46
46
|
"soft-outline": {
|
|
47
47
|
root: [
|
|
48
|
-
"color-ui-
|
|
49
|
-
"hover:bg-soft-ui-cb/6 hover:color-ui-
|
|
50
|
-
"aria-disabled:color-ui-
|
|
48
|
+
"color-ui-base/80 bg-soft-ui-cb/4 ring ring-inset ring-ui-base/30",
|
|
49
|
+
"hover:bg-soft-ui-cb/6 hover:color-ui-base/80 focus-within:bg-soft-ui-cb/8 focus-within:hover:bg-soft-ui-cb/8 focus-within:color-ui-base/85",
|
|
50
|
+
"aria-disabled:color-ui-fill/80 aria-disabled:bg-soft-ui-fill/5 hover:aria-disabled:color-ui-fill/80 hover:aria-disabled:bg-soft-ui-fill/5"
|
|
51
51
|
]
|
|
52
52
|
},
|
|
53
53
|
"ghost": {
|
|
54
54
|
root: [
|
|
55
|
-
"color-ui-
|
|
56
|
-
"hover:bg-soft-ui-cb/6 hover:color-ui-
|
|
55
|
+
"color-ui-base/80 bg-transparent",
|
|
56
|
+
"hover:bg-soft-ui-cb/6 hover:color-ui-base/80 focus-within:bg-soft-ui-cb/8 focus-within:hover:bg-soft-ui-cb/8 focus-within:color-ui-base/85",
|
|
57
57
|
"aria-disabled:color-ui-fill/80 aria-disabled:bg-transparent hover:aria-disabled:color-ui-fill/80 hover:aria-disabled:bg-transparent"
|
|
58
58
|
]
|
|
59
59
|
},
|
|
60
60
|
"none": {
|
|
61
|
-
root: "color-ui-
|
|
61
|
+
root: "color-ui-base bg-transparent"
|
|
62
62
|
}
|
|
63
63
|
},
|
|
64
64
|
underline: {
|
|
@@ -3,15 +3,15 @@ export default ct(
|
|
|
3
3
|
/* @unocss-include */
|
|
4
4
|
{
|
|
5
5
|
slots: {
|
|
6
|
-
root: "group relative overflow-hidden bg-ui-
|
|
6
|
+
root: "group relative overflow-hidden bg-ui-base shadow-lg rounded-ui-box ring ring-ui-base/5 p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ui-base/5",
|
|
7
7
|
wrapper: "w-0 flex-1 flex flex-col gap-1",
|
|
8
|
-
title: "text-base font-medium color-ui-
|
|
9
|
-
description: "text-sm color-ui-
|
|
10
|
-
icon: "shrink-0 size-1.25em color-ui-
|
|
8
|
+
title: "text-base font-medium color-ui-base",
|
|
9
|
+
description: "text-sm color-ui-base/80",
|
|
10
|
+
icon: "shrink-0 size-1.25em color-ui-base",
|
|
11
11
|
avatar: "shrink-0",
|
|
12
12
|
avatarSize: "2xl",
|
|
13
13
|
actions: "flex flex-wrap gap-1.5 shrink-0",
|
|
14
|
-
progress: "absolute inset-x-[var(--ui-radius-box)] bottom-0 h-1 z-[-1] color-ui-
|
|
14
|
+
progress: "absolute inset-x-[var(--ui-radius-box)] bottom-0 h-1 z-[-1] color-ui-fill/80 bg-current rounded-ui-base",
|
|
15
15
|
close: "p-0.5"
|
|
16
16
|
},
|
|
17
17
|
variants: {
|
|
@@ -3,7 +3,7 @@ export default ct(
|
|
|
3
3
|
/* @unocss-include */
|
|
4
4
|
{
|
|
5
5
|
slots: {
|
|
6
|
-
content: "z-1 flex items-center gap-1 bg-ui-
|
|
6
|
+
content: "z-1 flex items-center gap-1 bg-ui-base color-ui-base shadow-sm rounded-ui-base ring ring-ui-base/10 h-6 px-2 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
|
|
7
7
|
arrow: "fill-ui-cx stroke-ui-cb/10",
|
|
8
8
|
text: "truncate"
|
|
9
9
|
}
|