@ztwoint/z-ui 0.1.91 → 0.1.93
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/badge/badge.js +24 -24
- package/dist/components/file-upload-area/file-upload-area.d.ts +3 -3
- package/dist/components/file-upload-area/file-upload-area.js +34 -34
- package/dist/css/config/colors/semantic/surface.css +4 -0
- package/dist/css/styles/tailwind.css +1 -1
- package/dist/types/components/file-upload-area/file-upload-area.d.ts +3 -3
- package/package.json +1 -1
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { Slot as
|
|
3
|
-
import { cva as
|
|
1
|
+
import { jsx as n } from "react/jsx-runtime";
|
|
2
|
+
import { Slot as c } from "@radix-ui/react-slot";
|
|
3
|
+
import { cva as i } from "class-variance-authority";
|
|
4
4
|
import "react";
|
|
5
5
|
import { cn as u } from "../../lib/utils.js";
|
|
6
|
-
const l =
|
|
6
|
+
const l = i(
|
|
7
7
|
"inline-flex rounded-lg items-center justify-center border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
|
|
8
8
|
{
|
|
9
9
|
variants: {
|
|
@@ -20,10 +20,10 @@ const l = c(
|
|
|
20
20
|
},
|
|
21
21
|
color: {
|
|
22
22
|
default: "",
|
|
23
|
-
primary: "surface-neutral-default text-default-brand [a&]:hover:surface-neutral-hover",
|
|
24
|
-
destructive: "surface-danger-default text-inverted-primary [a&]:hover:surface-danger-hover",
|
|
25
|
-
success: "surface-success-default text-inverted-primary [a&]:hover:surface-success-hover",
|
|
26
|
-
warning: "surface-warning-default text-inverted-primary [a&]:hover:surface-warning-hover"
|
|
23
|
+
primary: "bg-surface-neutral-default text-default-brand [a&]:hover:bg-surface-neutral-hover",
|
|
24
|
+
destructive: "bg-surface-danger-default text-inverted-primary [a&]:hover:bg-surface-danger-hover",
|
|
25
|
+
success: "bg-surface-success-default text-inverted-primary [a&]:hover:bg-surface-success-hover",
|
|
26
|
+
warning: "bg-surface-warning-default text-inverted-primary [a&]:hover:bg-surface-warning-hover"
|
|
27
27
|
}
|
|
28
28
|
},
|
|
29
29
|
compoundVariants: [
|
|
@@ -31,64 +31,64 @@ const l = c(
|
|
|
31
31
|
{
|
|
32
32
|
variant: "default",
|
|
33
33
|
color: "default",
|
|
34
|
-
class: "surface-neutral-hover [a&]:hover:surface-neutral-hover"
|
|
34
|
+
class: "bg-surface-neutral-hover [a&]:hover:bg-surface-neutral-hover"
|
|
35
35
|
},
|
|
36
36
|
{
|
|
37
37
|
variant: "default",
|
|
38
38
|
color: "primary",
|
|
39
|
-
class: "surface-
|
|
39
|
+
class: "bg-[var(--surface-accent-light)] text-default-brand [a&]:hover:bg-surface-neutral-hover"
|
|
40
40
|
},
|
|
41
41
|
{
|
|
42
42
|
variant: "default",
|
|
43
43
|
color: "destructive",
|
|
44
|
-
class: "surface-danger-light text-danger-secondary [a&]:hover:surface-danger-hover"
|
|
44
|
+
class: "bg-[var(--surface-danger-light)] text-danger-secondary [a&]:hover:bg-surface-danger-hover"
|
|
45
45
|
},
|
|
46
46
|
{
|
|
47
47
|
variant: "default",
|
|
48
48
|
color: "success",
|
|
49
|
-
class: "surface-success-light text-success-secondary [a&]:hover:surface-success-hover"
|
|
49
|
+
class: "bg-[var(--surface-success-light)] text-success-secondary [a&]:hover:bg-surface-success-hover"
|
|
50
50
|
},
|
|
51
51
|
{
|
|
52
52
|
variant: "default",
|
|
53
53
|
color: "warning",
|
|
54
|
-
class: "surface-warning-light text-warning-secondary [a&]:hover:surface-warning-hover"
|
|
54
|
+
class: "bg-[var(--surface-warning-light)] text-warning-secondary [a&]:hover:bg-surface-warning-hover"
|
|
55
55
|
},
|
|
56
56
|
// Destructive variant with different colors
|
|
57
57
|
{
|
|
58
58
|
variant: "destructive",
|
|
59
59
|
color: "default",
|
|
60
|
-
class: "
|
|
60
|
+
class: "bg-neutral-950 text-inverted-primary [a&]:hover:bg-neutral-800"
|
|
61
61
|
},
|
|
62
62
|
{
|
|
63
63
|
variant: "destructive",
|
|
64
64
|
color: "primary",
|
|
65
|
-
class: "surface-
|
|
65
|
+
class: "bg-[var(--surface-accent-default)] text-inverted-primary [a&]:hover:bg-surface-primary-hover"
|
|
66
66
|
},
|
|
67
67
|
// Outline variant with different colors
|
|
68
68
|
{
|
|
69
69
|
variant: "outline",
|
|
70
70
|
color: "default",
|
|
71
|
-
class: "surface-neutral-
|
|
71
|
+
class: "bg-[var(--surface-neutral-hover)] text-neutral-primary border border-neutral-300 [a&]:hover:bg-surface-neutral-hover"
|
|
72
72
|
},
|
|
73
73
|
{
|
|
74
74
|
variant: "outline",
|
|
75
75
|
color: "primary",
|
|
76
|
-
class: "surface-
|
|
76
|
+
class: "bg-[var(--surface-accent-light)] text-brand-secondary border border-blue-300 [a&]:hover:bg-surface-neutral-hover"
|
|
77
77
|
},
|
|
78
78
|
{
|
|
79
79
|
variant: "outline",
|
|
80
80
|
color: "destructive",
|
|
81
|
-
class: "surface-danger-light text-danger-secondary border border-red-
|
|
81
|
+
class: "bg-[var(--surface-danger-light)] text-danger-secondary border border-red-300 [a&]:hover:bg-surface-danger-light-hover"
|
|
82
82
|
},
|
|
83
83
|
{
|
|
84
84
|
variant: "outline",
|
|
85
85
|
color: "success",
|
|
86
|
-
class: "surface-success-light text-success-secondary border border-green-
|
|
86
|
+
class: "bg-[var(--surface-success-light)] text-success-secondary border border-green-300 [a&]:hover:bg-surface-success-light-hover"
|
|
87
87
|
},
|
|
88
88
|
{
|
|
89
89
|
variant: "outline",
|
|
90
90
|
color: "warning",
|
|
91
|
-
class: "surface-warning-light text-warning-secondary border border-amber-
|
|
91
|
+
class: "bg-[var(--surface-warning-light)] text-warning-secondary border border-amber-300 [a&]:hover:bg-surface-warning-light-hover"
|
|
92
92
|
}
|
|
93
93
|
],
|
|
94
94
|
defaultVariants: {
|
|
@@ -98,7 +98,7 @@ const l = c(
|
|
|
98
98
|
}
|
|
99
99
|
}
|
|
100
100
|
);
|
|
101
|
-
function
|
|
101
|
+
function p({
|
|
102
102
|
className: r,
|
|
103
103
|
variant: e,
|
|
104
104
|
size: a,
|
|
@@ -106,8 +106,8 @@ function x({
|
|
|
106
106
|
asChild: s = !1,
|
|
107
107
|
...o
|
|
108
108
|
}) {
|
|
109
|
-
return /* @__PURE__ */
|
|
110
|
-
s ?
|
|
109
|
+
return /* @__PURE__ */ n(
|
|
110
|
+
s ? c : "span",
|
|
111
111
|
{
|
|
112
112
|
"data-slot": "badge",
|
|
113
113
|
className: u(l({ variant: e, size: a, color: t }), r),
|
|
@@ -116,6 +116,6 @@ function x({
|
|
|
116
116
|
);
|
|
117
117
|
}
|
|
118
118
|
export {
|
|
119
|
-
|
|
119
|
+
p as Badge,
|
|
120
120
|
l as badgeVariants
|
|
121
121
|
};
|
|
@@ -6,10 +6,10 @@ export type FileUploadAreaProps = {
|
|
|
6
6
|
className?: string;
|
|
7
7
|
disabled?: boolean;
|
|
8
8
|
isError?: boolean;
|
|
9
|
-
Error
|
|
9
|
+
Error?: {
|
|
10
10
|
icon?: React.ReactNode;
|
|
11
|
-
|
|
12
|
-
|
|
11
|
+
title?: string;
|
|
12
|
+
description?: string;
|
|
13
13
|
};
|
|
14
14
|
};
|
|
15
15
|
/**
|
|
@@ -1,86 +1,86 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useRef as v, useState as
|
|
3
|
-
import { DEFAULT_ACCEPT as
|
|
1
|
+
import { jsxs as l, jsx as n } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as v, useState as y } from "react";
|
|
3
|
+
import { DEFAULT_ACCEPT as D } from "./file-upload-area.const.js";
|
|
4
4
|
import { UploadIconComponent as C } from "./upload-icon-component.js";
|
|
5
5
|
import k from "./text-preset.js";
|
|
6
6
|
import { cn as p } from "../../lib/utils.js";
|
|
7
|
-
import
|
|
7
|
+
import w from "../assets/icons/triangle-warning.js";
|
|
8
8
|
const L = ({
|
|
9
|
-
onFilesSelected:
|
|
10
|
-
accept:
|
|
11
|
-
multiple:
|
|
12
|
-
className:
|
|
13
|
-
disabled:
|
|
9
|
+
onFilesSelected: r,
|
|
10
|
+
accept: o = D,
|
|
11
|
+
multiple: d = !0,
|
|
12
|
+
className: c = "",
|
|
13
|
+
disabled: t = !1,
|
|
14
14
|
isError: m = !1,
|
|
15
|
-
Error:
|
|
15
|
+
Error: a
|
|
16
16
|
}) => {
|
|
17
|
-
const s = v(null), [
|
|
18
|
-
|
|
17
|
+
const s = v(null), [A, i] = y(!1), u = (e) => {
|
|
18
|
+
t || (e.preventDefault(), e.stopPropagation(), i(!0));
|
|
19
19
|
}, g = (e) => {
|
|
20
|
-
|
|
20
|
+
t || (e.preventDefault(), e.stopPropagation(), i(!1));
|
|
21
21
|
}, x = (e) => {
|
|
22
|
-
|
|
22
|
+
t || (e.preventDefault(), e.stopPropagation(), i(!1), e.dataTransfer.files && e.dataTransfer.files.length > 0 && r(Array.from(e.dataTransfer.files)));
|
|
23
23
|
}, f = () => {
|
|
24
24
|
var e;
|
|
25
|
-
|
|
25
|
+
t || (e = s.current) == null || e.click();
|
|
26
26
|
}, h = (e) => {
|
|
27
|
-
|
|
27
|
+
t || e.target.files && e.target.files.length > 0 && r(Array.from(e.target.files));
|
|
28
28
|
};
|
|
29
|
-
return /* @__PURE__ */
|
|
29
|
+
return /* @__PURE__ */ l(
|
|
30
30
|
"div",
|
|
31
31
|
{
|
|
32
32
|
className: p(
|
|
33
33
|
"max-w-115 w-full bg-neutral-light rounded-3xl",
|
|
34
34
|
"flex flex-col items-center file-upload-12-dash-border",
|
|
35
|
-
|
|
35
|
+
t && "opacity-60 bg-gray-100 cursor-not-allowed disabled"
|
|
36
36
|
),
|
|
37
37
|
children: [
|
|
38
|
-
/* @__PURE__ */
|
|
38
|
+
/* @__PURE__ */ l(
|
|
39
39
|
"div",
|
|
40
40
|
{
|
|
41
41
|
className: p(
|
|
42
42
|
"flex flex-col items-center justify-center gap-8 p-12",
|
|
43
43
|
"leading-none-medium-sm leading-3",
|
|
44
|
-
|
|
44
|
+
c
|
|
45
45
|
),
|
|
46
46
|
onDragOver: u,
|
|
47
47
|
onDragLeave: g,
|
|
48
48
|
onDrop: x,
|
|
49
49
|
onClick: f,
|
|
50
|
-
tabIndex:
|
|
50
|
+
tabIndex: t ? -1 : 0,
|
|
51
51
|
role: "button",
|
|
52
52
|
"aria-label": "File upload area. Click or drag and drop files.",
|
|
53
|
-
"aria-disabled":
|
|
54
|
-
onKeyDown:
|
|
53
|
+
"aria-disabled": t,
|
|
54
|
+
onKeyDown: t ? void 0 : (e) => {
|
|
55
55
|
(e.key === "Enter" || e.key === " ") && f();
|
|
56
56
|
},
|
|
57
57
|
"data-testid": "file-upload-area",
|
|
58
58
|
children: [
|
|
59
|
-
/* @__PURE__ */
|
|
60
|
-
/* @__PURE__ */
|
|
61
|
-
/* @__PURE__ */
|
|
59
|
+
/* @__PURE__ */ n(C, {}),
|
|
60
|
+
/* @__PURE__ */ n(k, { accept: o }),
|
|
61
|
+
/* @__PURE__ */ n(
|
|
62
62
|
"input",
|
|
63
63
|
{
|
|
64
64
|
ref: s,
|
|
65
65
|
type: "file",
|
|
66
66
|
className: "hidden",
|
|
67
|
-
accept:
|
|
68
|
-
multiple:
|
|
67
|
+
accept: o.join(","),
|
|
68
|
+
multiple: d,
|
|
69
69
|
tabIndex: -1,
|
|
70
70
|
"data-testid": "file-upload-input",
|
|
71
71
|
onChange: h,
|
|
72
72
|
onClick: (e) => e.stopPropagation(),
|
|
73
|
-
disabled:
|
|
73
|
+
disabled: t
|
|
74
74
|
}
|
|
75
75
|
)
|
|
76
76
|
]
|
|
77
77
|
}
|
|
78
78
|
),
|
|
79
|
-
m && /* @__PURE__ */
|
|
80
|
-
|
|
81
|
-
/* @__PURE__ */
|
|
82
|
-
/* @__PURE__ */
|
|
83
|
-
/* @__PURE__ */
|
|
79
|
+
m && /* @__PURE__ */ l("div", { className: "flex flex-row gap-2 p-3 items-center justify-center w-full rounded-b-3xl border-solid border-[1.5px] border-stroke-solid-medium", children: [
|
|
80
|
+
(a == null ? void 0 : a.icon) || /* @__PURE__ */ n(w, { fill: "red" }),
|
|
81
|
+
/* @__PURE__ */ l("div", { className: "flex flex-row gap-1", children: [
|
|
82
|
+
/* @__PURE__ */ n("p", { className: "leading-none-medium-sm text-text-danger-primary", children: a == null ? void 0 : a.title }),
|
|
83
|
+
/* @__PURE__ */ n("p", { className: "leading-none-regular-sm text-text-danger-primary opacity-[.7]", children: a == null ? void 0 : a.description })
|
|
84
84
|
] })
|
|
85
85
|
] })
|
|
86
86
|
]
|
|
@@ -12,24 +12,28 @@
|
|
|
12
12
|
--surface-accent-hover: var(--blue-800);
|
|
13
13
|
--surface-accent-pressed: var(--blue-400);
|
|
14
14
|
--surface-accent-disabled: var(--neutral-100);
|
|
15
|
+
--surface-accent-light: var(--blue-50);
|
|
15
16
|
|
|
16
17
|
/* Surface Colors - Danger */
|
|
17
18
|
--surface-danger-default: var(--red-600);
|
|
18
19
|
--surface-danger-hover: var(--red-800);
|
|
19
20
|
--surface-danger-pressed: var(--red-400);
|
|
20
21
|
--surface-danger-disabled: var(--neutral-100);
|
|
22
|
+
--surface-danger-light: var(--red-50);
|
|
21
23
|
|
|
22
24
|
/* Surface Colors - Success */
|
|
23
25
|
--surface-success-default: var(--green-600);
|
|
24
26
|
--surface-success-hover: var(--green-800);
|
|
25
27
|
--surface-success-pressed: var(--green-400);
|
|
26
28
|
--surface-success-disabled: var(--neutral-100);
|
|
29
|
+
--surface-success-light: var(--green-50);
|
|
27
30
|
|
|
28
31
|
/* Surface Colors - Warning */
|
|
29
32
|
--surface-warning-default: var(--amber-600);
|
|
30
33
|
--surface-warning-hover: var(--amber-800);
|
|
31
34
|
--surface-warning-pressed: var(--amber-400);
|
|
32
35
|
--surface-warning-disabled: var(--neutral-100);
|
|
36
|
+
--surface-warning-light: var(--amber-50);
|
|
33
37
|
|
|
34
38
|
/* Surface Colors - Purple */
|
|
35
39
|
--surface-purple-default: var(--violet-600);
|