@ztwoint/z-ui 0.1.21 → 0.1.23
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,15 +1,17 @@
|
|
|
1
1
|
import { jsx as e, jsxs as x, Fragment as g } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
3
|
-
import { Slot as
|
|
4
|
-
import { cva as
|
|
5
|
-
import { cn as
|
|
6
|
-
const N =
|
|
2
|
+
import w from "react";
|
|
3
|
+
import { Slot as O } from "@radix-ui/react-slot";
|
|
4
|
+
import { cva as z } from "class-variance-authority";
|
|
5
|
+
import { cn as n } from "../../lib/utils.js";
|
|
6
|
+
const N = z(
|
|
7
7
|
"box-border h-7.5 leading-none-medium-sm flex items-center justify-center whitespace-nowrap rounded-lg select-none hover:cursor-pointer active:outline-none border-solid",
|
|
8
8
|
{
|
|
9
9
|
variants: {
|
|
10
10
|
variant: {
|
|
11
|
-
filled: [
|
|
12
|
-
|
|
11
|
+
filled: [
|
|
12
|
+
"border-[.5px] disabled:border-none disabled:shadow-[var(--shadow-button-disabled)]"
|
|
13
|
+
],
|
|
14
|
+
stroke: ["disabled:border-none disabled:shadow-[var(--shadow-button-disabled)]"],
|
|
13
15
|
ghost: [""]
|
|
14
16
|
},
|
|
15
17
|
shade: {
|
|
@@ -70,26 +72,26 @@ const N = w(
|
|
|
70
72
|
iconOnly: !1
|
|
71
73
|
}
|
|
72
74
|
}
|
|
73
|
-
), k =
|
|
75
|
+
), k = w.forwardRef(
|
|
74
76
|
({
|
|
75
|
-
className:
|
|
77
|
+
className: u,
|
|
76
78
|
shade: c,
|
|
77
79
|
size: b,
|
|
78
80
|
variant: f,
|
|
79
81
|
asChild: o = !1,
|
|
80
82
|
leftIcon: a,
|
|
81
|
-
rightIcon:
|
|
83
|
+
rightIcon: r,
|
|
82
84
|
label: m,
|
|
83
85
|
children: l,
|
|
84
86
|
...p
|
|
85
87
|
}, y) => {
|
|
86
|
-
const v = o ?
|
|
87
|
-
N({ shade: c, size: b, variant: f, iconOnly:
|
|
88
|
+
const v = o ? O : "button", t = m || l, d = !t && !!(a || r), i = d ? a || r : null, h = n(
|
|
89
|
+
N({ shade: c, size: b, variant: f, iconOnly: d, className: u })
|
|
88
90
|
), s = "w-3.5 h-3.5";
|
|
89
|
-
return /* @__PURE__ */ e(v, { className: h, ref: y, ...p, children: o ? l :
|
|
90
|
-
a && /* @__PURE__ */ e("span", { className:
|
|
91
|
-
|
|
92
|
-
|
|
91
|
+
return /* @__PURE__ */ e(v, { className: h, ref: y, ...p, children: o ? l : d ? i ? /* @__PURE__ */ e("span", { className: s, children: i }) : null : /* @__PURE__ */ x(g, { children: [
|
|
92
|
+
a && /* @__PURE__ */ e("span", { className: n(s), children: a }),
|
|
93
|
+
t && /* @__PURE__ */ e("span", { children: t }),
|
|
94
|
+
r && /* @__PURE__ */ e("span", { className: n(s), children: r })
|
|
93
95
|
] }) });
|
|
94
96
|
}
|
|
95
97
|
);
|
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
import { jsx as o, jsxs as
|
|
2
|
-
import * as
|
|
1
|
+
import { jsx as o, jsxs as t } from "react/jsx-runtime";
|
|
2
|
+
import * as r from "@radix-ui/react-tooltip";
|
|
3
3
|
import { cn as s } from "../../lib/utils.js";
|
|
4
4
|
const c = ({
|
|
5
|
-
message:
|
|
6
|
-
children:
|
|
7
|
-
delayDuration:
|
|
8
|
-
side:
|
|
5
|
+
message: e,
|
|
6
|
+
children: i,
|
|
7
|
+
delayDuration: n = 300,
|
|
8
|
+
side: a = "top",
|
|
9
9
|
className: l,
|
|
10
10
|
...d
|
|
11
|
-
}) => /* @__PURE__ */ o(
|
|
12
|
-
/* @__PURE__ */ o(
|
|
13
|
-
/* @__PURE__ */ o(
|
|
14
|
-
|
|
11
|
+
}) => /* @__PURE__ */ o(r.Provider, { delayDuration: n, children: /* @__PURE__ */ t(r.Root, { children: [
|
|
12
|
+
/* @__PURE__ */ o(r.Trigger, { asChild: !0, children: i }),
|
|
13
|
+
/* @__PURE__ */ o(r.Portal, { children: /* @__PURE__ */ t(
|
|
14
|
+
r.Content,
|
|
15
15
|
{
|
|
16
|
-
side:
|
|
16
|
+
side: a,
|
|
17
17
|
className: s(
|
|
18
|
-
"bg-[var(--color-neutral-950)] border-none text-white leading-none-regular-sm
|
|
18
|
+
"bg-[var(--color-neutral-950)] border-none text-white leading-none-regular-sm z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
|
|
19
19
|
l
|
|
20
20
|
),
|
|
21
21
|
...d,
|
|
22
22
|
children: [
|
|
23
|
-
|
|
24
|
-
/* @__PURE__ */ o(
|
|
23
|
+
e,
|
|
24
|
+
/* @__PURE__ */ o(r.Arrow, { className: "bg-[var(--color-neutral-950)] z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
|
|
25
25
|
]
|
|
26
26
|
}
|
|
27
27
|
) })
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
@layer utilities {
|
|
2
|
-
|
|
3
2
|
.z2-select-trigger {
|
|
4
3
|
@apply flex items-center justify-center w-full text-sm gap-[6px] p-2 rounded-md self-stretch transition-all cursor-pointer;
|
|
5
4
|
@apply data-[size=sm]:gap-[4px] data-[size=sm]:p-[6px];
|
|
@@ -7,27 +6,41 @@
|
|
|
7
6
|
font-size: 14px;
|
|
8
7
|
line-height: 1;
|
|
9
8
|
background: var(--input-surface-default, color(display-p3 1 1 1));
|
|
10
|
-
box-shadow:
|
|
9
|
+
box-shadow:
|
|
10
|
+
0px 1px 2px 0px var(--drop-shadow-5, color(display-p3 0 0 0 / 0.05)),
|
|
11
|
+
0px 0px 0px var(--stroke-default, 0.5px)
|
|
12
|
+
var(--input-stroke-default, color(display-p3 0.8784 0.8784 0.8784));
|
|
11
13
|
}
|
|
12
14
|
|
|
13
15
|
.z2-select-trigger:hover {
|
|
14
16
|
background: var(--input-surface-hover, color(display-p3 0.9647 0.9647 0.9647));
|
|
15
|
-
box-shadow:
|
|
17
|
+
box-shadow:
|
|
18
|
+
0px 1px 2px 0px var(--drop-shadow-5, color(display-p3 0 0 0 / 0.05)),
|
|
19
|
+
0px 0px 0px var(--stroke-default, 0.5px)
|
|
20
|
+
var(--input-stroke-hover, color(display-p3 0.8196 0.8196 0.8196));
|
|
16
21
|
}
|
|
17
22
|
|
|
18
23
|
.z2-select-trigger:focus {
|
|
19
24
|
background: var(--input-surface-pressed, color(display-p3 0.9059 0.9059 0.9059));
|
|
20
|
-
box-shadow:
|
|
25
|
+
box-shadow:
|
|
26
|
+
0px 1px 2px 0px transparent,
|
|
27
|
+
0px 0px 0px var(--stroke-default, 0.5px) transparent;
|
|
21
28
|
}
|
|
22
29
|
|
|
23
|
-
.z2-select-trigger[data-state=
|
|
30
|
+
.z2-select-trigger[data-state='open'] {
|
|
24
31
|
background: var(--input-surface-open, color(display-p3 0.941 0.941 0.941));
|
|
25
|
-
box-shadow:
|
|
32
|
+
box-shadow:
|
|
33
|
+
0px 2px 4px 0px var(--drop-shadow-10, color(display-p3 0 0 0 / 0.1)),
|
|
34
|
+
0px 0px 0px var(--stroke-default, 0.5px)
|
|
35
|
+
var(--input-stroke-open, color(display-p3 0.6 0.6 0.6));
|
|
26
36
|
}
|
|
27
37
|
|
|
28
|
-
.z2-select-trigger[data-filled=
|
|
38
|
+
.z2-select-trigger[data-filled='true'] {
|
|
29
39
|
background: var(--input-surface-filled, color(display-p3 0.9804 0.9804 0.9804));
|
|
30
|
-
box-shadow:
|
|
40
|
+
box-shadow:
|
|
41
|
+
0px 1px 2px 0px var(--drop-shadow-5, color(display-p3 0 0 0 / 0.05)),
|
|
42
|
+
0px 0px 0px var(--stroke-default, 0.5px)
|
|
43
|
+
var(--input-stroke-filled, color(display-p3 0.7 0.7 0.7));
|
|
31
44
|
}
|
|
32
45
|
|
|
33
46
|
.z2-select-trigger[data-disabled] {
|
|
@@ -44,7 +57,7 @@
|
|
|
44
57
|
letter-spacing: -0.2px;
|
|
45
58
|
}
|
|
46
59
|
|
|
47
|
-
[data-slot=
|
|
60
|
+
[data-slot='select-value'] {
|
|
48
61
|
@apply w-full self-center items-start text-left flex gap-1;
|
|
49
62
|
}
|
|
50
63
|
|
|
@@ -56,7 +69,7 @@
|
|
|
56
69
|
padding: var(--spacing-2, 8px);
|
|
57
70
|
}
|
|
58
71
|
|
|
59
|
-
.z2-select-item[data-state=
|
|
72
|
+
.z2-select-item[data-state='active'],
|
|
60
73
|
.z2-select-item:hover {
|
|
61
74
|
background-color: var(--surface-neutral-focused, color(display-p3 0.9412 0.9412 0.9412));
|
|
62
75
|
}
|
|
@@ -65,8 +78,17 @@
|
|
|
65
78
|
@apply min-w-[var(--radix-select-trigger-width)] flex flex-col items-start relative z-50 p-1;
|
|
66
79
|
/* @apply data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2; */
|
|
67
80
|
border-radius: var(--border-radius-rounded-xl, 12px);
|
|
68
|
-
background:
|
|
69
|
-
|
|
81
|
+
background:
|
|
82
|
+
linear-gradient(
|
|
83
|
+
0deg,
|
|
84
|
+
var(--background-neutral-on-top, color(display-p3 1 1 1)) 0%,
|
|
85
|
+
var(--background-neutral-on-top, color(display-p3 1 1 1)) 100%
|
|
86
|
+
),
|
|
87
|
+
var(--background-neutral-default, color(display-p3 1 1 1));
|
|
88
|
+
box-shadow:
|
|
89
|
+
0px 16px 32px 0px var(--drop-shadow-10, color(display-p3 0 0 0 / 0.1)),
|
|
90
|
+
0px 0px 0px var(--stroke-default, 0.5px)
|
|
91
|
+
var(--stroke-solid-light, color(display-p3 0.9059 0.9059 0.9059));
|
|
70
92
|
}
|
|
71
93
|
|
|
72
94
|
.z2-select-group {
|
|
@@ -88,4 +110,4 @@
|
|
|
88
110
|
.z2-select-item-indicator {
|
|
89
111
|
@apply flex w-[14px] h-[14px] items-center justify-center;
|
|
90
112
|
}
|
|
91
|
-
}
|
|
113
|
+
}
|