@ztwoint/z-ui 0.1.13 → 0.1.15

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.
Files changed (35) hide show
  1. package/dist/components/assets/icons/circle-check-filled.js +29 -0
  2. package/dist/components/assets/icons/media-record.js +34 -0
  3. package/dist/components/assets/icons/upload.d.ts +8 -0
  4. package/dist/components/assets/icons/upload.js +61 -0
  5. package/dist/components/assets/icons/z2-icon.js +4 -4
  6. package/dist/components/button/button.d.ts +1 -1
  7. package/dist/components/button/button.js +6 -6
  8. package/dist/components/dialog/dialog.js +110 -0
  9. package/dist/components/file-upload-area/file-upload-area.const.d.ts +1 -0
  10. package/dist/components/file-upload-area/file-upload-area.const.js +4 -0
  11. package/dist/components/file-upload-area/file-upload-area.d.ts +42 -0
  12. package/dist/components/file-upload-area/file-upload-area.js +71 -0
  13. package/dist/components/file-upload-area/text-preset.d.ts +4 -0
  14. package/dist/components/file-upload-area/text-preset.js +13 -0
  15. package/dist/components/file-upload-area/upload-icon-component.d.ts +3 -0
  16. package/dist/components/file-upload-area/upload-icon-component.js +7 -0
  17. package/dist/components/nav-header/nav-item/nav-item.js +15 -15
  18. package/dist/components/stepper/index.d.ts +2 -0
  19. package/dist/components/stepper/stepper-item/stepper-item.js +49 -0
  20. package/dist/components/stepper/stepper.js +50 -0
  21. package/dist/css/config/colors/backgrounds.css +19 -7
  22. package/dist/css/config/colors/defaults.css +4 -0
  23. package/dist/css/config/config.css +0 -1
  24. package/dist/css/styles/tailwind.css +1 -1
  25. package/dist/index.d.ts +3 -0
  26. package/dist/index.js +72 -56
  27. package/dist/types/components/assets/icons/upload.d.ts +8 -0
  28. package/dist/types/components/button/button.d.ts +1 -1
  29. package/dist/types/components/file-upload-area/file-upload-area.const.d.ts +1 -0
  30. package/dist/types/components/file-upload-area/file-upload-area.d.ts +42 -0
  31. package/dist/types/components/file-upload-area/text-preset.d.ts +4 -0
  32. package/dist/types/components/file-upload-area/upload-icon-component.d.ts +3 -0
  33. package/dist/types/components/stepper/index.d.ts +2 -0
  34. package/dist/types/index.d.ts +3 -0
  35. package/package.json +1 -1
@@ -0,0 +1,29 @@
1
+ import { jsx as e } from "react/jsx-runtime";
2
+ function i({
3
+ fill: r = "currentColor",
4
+ width: t = "1em",
5
+ height: c = "1em",
6
+ ...l
7
+ }) {
8
+ return /* @__PURE__ */ e(
9
+ "svg",
10
+ {
11
+ height: c,
12
+ width: t,
13
+ ...l,
14
+ viewBox: "0 0 20 20",
15
+ xmlns: "http://www.w3.org/2000/svg",
16
+ children: /* @__PURE__ */ e("g", { fill: r, children: /* @__PURE__ */ e(
17
+ "path",
18
+ {
19
+ d: "m10,2C5.589,2,2,5.589,2,10s3.589,8,8,8,8-3.589,8-8S14.411,2,10,2Zm4.284,5.621l-4.75,6c-.183.231-.458.37-.753.379-.01,0-.021,0-.031,0-.283,0-.554-.12-.743-.331l-2.25-2.5c-.369-.411-.336-1.043.074-1.412.41-.37,1.042-.336,1.412.074l1.458,1.62,4.015-5.071c.343-.432.971-.506,1.405-.164.433.343.506.972.163,1.405Z",
20
+ fill: r,
21
+ strokeWidth: "0"
22
+ }
23
+ ) })
24
+ }
25
+ );
26
+ }
27
+ export {
28
+ i as default
29
+ };
@@ -0,0 +1,34 @@
1
+ import { jsx as r } from "react/jsx-runtime";
2
+ function c({
3
+ fill: e = "currentColor",
4
+ width: o = "1em",
5
+ height: n = "1em",
6
+ ...t
7
+ }) {
8
+ return /* @__PURE__ */ r(
9
+ "svg",
10
+ {
11
+ height: n,
12
+ width: o,
13
+ ...t,
14
+ viewBox: "0 0 20 20",
15
+ xmlns: "http://www.w3.org/2000/svg",
16
+ children: /* @__PURE__ */ r("g", { fill: e, children: /* @__PURE__ */ r(
17
+ "circle",
18
+ {
19
+ cx: "10",
20
+ cy: "10",
21
+ fill: "none",
22
+ r: "7",
23
+ stroke: e,
24
+ strokeLinecap: "round",
25
+ strokeLinejoin: "round",
26
+ strokeWidth: "2"
27
+ }
28
+ ) })
29
+ }
30
+ );
31
+ }
32
+ export {
33
+ c as default
34
+ };
@@ -0,0 +1,8 @@
1
+ import { SVGProps } from 'react';
2
+ type IconProps = SVGProps<SVGSVGElement> & {
3
+ secondaryfill?: string;
4
+ strokewidth?: number;
5
+ title?: string;
6
+ };
7
+ declare function Upload({ fill, secondaryfill, strokewidth, width, height, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
8
+ export default Upload;
@@ -0,0 +1,61 @@
1
+ import { jsx as n, jsxs as k } from "react/jsx-runtime";
2
+ function u({
3
+ fill: e = "currentColor",
4
+ secondaryfill: o,
5
+ strokewidth: r = 2,
6
+ width: t = "1em",
7
+ height: i = "1em",
8
+ ...s
9
+ }) {
10
+ return o = o || e, /* @__PURE__ */ n(
11
+ "svg",
12
+ {
13
+ height: i,
14
+ width: t,
15
+ ...s,
16
+ viewBox: "0 0 20 20",
17
+ xmlns: "http://www.w3.org/2000/svg",
18
+ children: /* @__PURE__ */ k("g", { fill: e, children: [
19
+ /* @__PURE__ */ n(
20
+ "polyline",
21
+ {
22
+ fill: "none",
23
+ points: "7.25 5.75 10 3 12.75 5.75",
24
+ stroke: o,
25
+ strokeLinecap: "round",
26
+ strokeLinejoin: "round",
27
+ strokeWidth: r
28
+ }
29
+ ),
30
+ /* @__PURE__ */ n(
31
+ "line",
32
+ {
33
+ fill: "none",
34
+ stroke: o,
35
+ strokeLinecap: "round",
36
+ strokeLinejoin: "round",
37
+ strokeWidth: r,
38
+ x1: "10",
39
+ x2: "10",
40
+ y1: "13",
41
+ y2: "3"
42
+ }
43
+ ),
44
+ /* @__PURE__ */ n(
45
+ "path",
46
+ {
47
+ d: "m6,9.07c-1.216.268-2.168,1.277-2.328,2.557l-.25,2c-.224,1.791,1.172,3.372,2.977,3.372h7.203c1.804,0,3.201-1.582,2.977-3.372l-.25-2c-.16-1.281-1.113-2.289-2.328-2.557",
48
+ fill: "none",
49
+ stroke: e,
50
+ strokeLinecap: "round",
51
+ strokeLinejoin: "round",
52
+ strokeWidth: r
53
+ }
54
+ )
55
+ ] })
56
+ }
57
+ );
58
+ }
59
+ export {
60
+ u as default
61
+ };
@@ -1,7 +1,7 @@
1
- import { jsxs as L, jsx as C } from "react/jsx-runtime";
2
- function e({ title: i = "badge 13", ...t }) {
3
- return /* @__PURE__ */ L("svg", { height: "22", width: "27", viewBox: "0 0 27 22", xmlns: "http://www.w3.org/2000/svg", ...t, children: [
4
- /* @__PURE__ */ C("title", { children: i }),
1
+ import { jsxs as t, jsx as C } from "react/jsx-runtime";
2
+ function e({ title: L = "Z2-Logo", ...i }) {
3
+ return /* @__PURE__ */ t("svg", { height: "22", width: "27", viewBox: "0 0 27 22", xmlns: "http://www.w3.org/2000/svg", ...i, children: [
4
+ /* @__PURE__ */ C("title", { children: L }),
5
5
  /* @__PURE__ */ C("g", { fill: "none", children: /* @__PURE__ */ C(
6
6
  "path",
7
7
  {
@@ -1,5 +1,5 @@
1
+ import { default as React } from 'react';
1
2
  import { VariantProps } from 'class-variance-authority';
2
- import * as React from 'react';
3
3
  declare const buttonVariants: (props?: ({
4
4
  variant?: "stroke" | "ghost" | "filled" | null | undefined;
5
5
  shade?: "danger" | "neutral" | "brand" | "neutralGhost" | null | undefined;
@@ -1,9 +1,9 @@
1
1
  import { jsx as e, jsxs as x, Fragment as g } from "react/jsx-runtime";
2
- import { Slot as O } from "@radix-ui/react-slot";
3
- import { cva as z } from "class-variance-authority";
4
- import * as w from "react";
2
+ import O from "react";
3
+ import { Slot as z } from "@radix-ui/react-slot";
4
+ import { cva as w } from "class-variance-authority";
5
5
  import { cn as d } from "../../lib/utils.js";
6
- const N = z(
6
+ const N = w(
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: {
@@ -70,7 +70,7 @@ const N = z(
70
70
  iconOnly: !1
71
71
  }
72
72
  }
73
- ), k = w.forwardRef(
73
+ ), k = O.forwardRef(
74
74
  ({
75
75
  className: i,
76
76
  shade: c,
@@ -83,7 +83,7 @@ const N = z(
83
83
  children: l,
84
84
  ...p
85
85
  }, y) => {
86
- const v = o ? O : "button", r = m || l, n = !r && !!(a || t), u = n ? a || t : null, h = d(
86
+ const v = o ? z : "button", r = m || l, n = !r && !!(a || t), u = n ? a || t : null, h = d(
87
87
  N({ shade: c, size: b, variant: f, iconOnly: n, className: i })
88
88
  ), s = "w-3.5 h-3.5";
89
89
  return /* @__PURE__ */ e(v, { className: h, ref: y, ...p, children: o ? l : n ? u ? /* @__PURE__ */ e("span", { className: s, children: u }) : null : /* @__PURE__ */ x(g, { children: [
@@ -0,0 +1,110 @@
1
+ import { jsx as e, jsxs as n } from "react/jsx-runtime";
2
+ import * as o from "@radix-ui/react-dialog";
3
+ import { cn as l } from "../../lib/utils.js";
4
+ function c({ ...t }) {
5
+ return /* @__PURE__ */ e(o.Root, { "data-slot": "dialog", ...t });
6
+ }
7
+ function f({ ...t }) {
8
+ return /* @__PURE__ */ e(o.Trigger, { "data-slot": "dialog-trigger", ...t });
9
+ }
10
+ function r({ ...t }) {
11
+ return /* @__PURE__ */ e(o.Portal, { "data-slot": "dialog-portal", ...t });
12
+ }
13
+ function u({ ...t }) {
14
+ return /* @__PURE__ */ e(o.Close, { "data-slot": "dialog-close", ...t });
15
+ }
16
+ function s({
17
+ className: t,
18
+ ...a
19
+ }) {
20
+ return /* @__PURE__ */ e(
21
+ o.Overlay,
22
+ {
23
+ "data-slot": "dialog-overlay",
24
+ className: l(
25
+ "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
26
+ t
27
+ ),
28
+ ...a
29
+ }
30
+ );
31
+ }
32
+ function m({
33
+ className: t,
34
+ children: a,
35
+ ...i
36
+ }) {
37
+ return /* @__PURE__ */ n(r, { "data-slot": "dialog-portal", children: [
38
+ /* @__PURE__ */ e(s, {}),
39
+ /* @__PURE__ */ e(
40
+ o.Content,
41
+ {
42
+ "data-slot": "dialog-content",
43
+ className: l(
44
+ "surface-neutral-default 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 shadow-lg duration-200 sm:max-w-lg",
45
+ t
46
+ ),
47
+ ...i,
48
+ children: a
49
+ }
50
+ )
51
+ ] });
52
+ }
53
+ function p({ className: t, ...a }) {
54
+ return /* @__PURE__ */ e(
55
+ "div",
56
+ {
57
+ "data-slot": "dialog-header",
58
+ className: l("flex flex-col gap-2 text-center sm:text-left", t),
59
+ ...a
60
+ }
61
+ );
62
+ }
63
+ function x({ className: t, ...a }) {
64
+ return /* @__PURE__ */ e(
65
+ "div",
66
+ {
67
+ "data-slot": "dialog-footer",
68
+ className: l("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", t),
69
+ ...a
70
+ }
71
+ );
72
+ }
73
+ function D({
74
+ className: t,
75
+ ...a
76
+ }) {
77
+ return /* @__PURE__ */ e(
78
+ o.Title,
79
+ {
80
+ "data-slot": "dialog-title",
81
+ className: l("text-lg leading-none font-semibold", t),
82
+ ...a
83
+ }
84
+ );
85
+ }
86
+ function Z({
87
+ className: t,
88
+ ...a
89
+ }) {
90
+ return /* @__PURE__ */ e(
91
+ o.Description,
92
+ {
93
+ "data-slot": "dialog-description",
94
+ className: l("text-muted-foreground text-sm", t),
95
+ ...a
96
+ }
97
+ );
98
+ }
99
+ export {
100
+ c as Z2Dialog,
101
+ u as Z2DialogClose,
102
+ m as Z2DialogContent,
103
+ Z as Z2DialogDescription,
104
+ x as Z2DialogFooter,
105
+ p as Z2DialogHeader,
106
+ s as Z2DialogOverlay,
107
+ r as Z2DialogPortal,
108
+ D as Z2DialogTitle,
109
+ f as Z2DialogTrigger
110
+ };
@@ -0,0 +1 @@
1
+ export declare const DEFAULT_ACCEPT: string[];
@@ -0,0 +1,4 @@
1
+ const s = [".csv", ".xls", ".xlsx"];
2
+ export {
3
+ s as DEFAULT_ACCEPT
4
+ };
@@ -0,0 +1,42 @@
1
+ import { default as React } from 'react';
2
+ export type FileUploadAreaProps = {
3
+ onFilesSelected: (files: File[]) => void;
4
+ accept?: string[];
5
+ multiple?: boolean;
6
+ className?: string;
7
+ disabled?: boolean;
8
+ };
9
+ /**
10
+ * FileUploadArea component provides a drag-and-drop and click-to-upload area for file selection.
11
+ *
12
+ * Features:
13
+ * - Drag and drop file upload
14
+ * - Click to open file dialog
15
+ * - Supports multiple file formats (default: CSV, XLS, XLSX)
16
+ * - Supports multiple file selection
17
+ * - Disabled state (blocks all interaction and changes style)
18
+ * - Custom className for styling
19
+ * - Accessible and keyboard-navigable
20
+ *
21
+ * @component
22
+ * @param {FileUploadAreaProps} props - The props for FileUploadArea
23
+ * @returns {JSX.Element}
24
+ *
25
+ * @example <caption>Default usage</caption>
26
+ * <FileUploadArea onFilesSelected={files => console.log(files)} />
27
+ *
28
+ * @example <caption>Custom formats and single file</caption>
29
+ * <FileUploadArea
30
+ * onFilesSelected={files => console.log(files)}
31
+ * accept={[".pdf", ".docx"]}
32
+ * multiple={false}
33
+ * />
34
+ *
35
+ * @example <caption>Disabled</caption>
36
+ * <FileUploadArea onFilesSelected={() => {}} disabled />
37
+ *
38
+ * @example <caption>Async handler</caption>
39
+ * <FileUploadArea onFilesSelected={async files => await uploadFiles(files)} />
40
+ */
41
+ export declare const FileUploadArea: React.FC<FileUploadAreaProps>;
42
+ export default FileUploadArea;
@@ -0,0 +1,71 @@
1
+ import { jsxs as d, jsx as a } from "react/jsx-runtime";
2
+ import { useRef as m, useState as h } from "react";
3
+ import { DEFAULT_ACCEPT as D } from "./file-upload-area.const.js";
4
+ import { UploadIconComponent as v } from "./upload-icon-component.js";
5
+ import x from "./text-preset.js";
6
+ import { cn as y } from "../../lib/utils.js";
7
+ const w = ({
8
+ onFilesSelected: o,
9
+ accept: n = D,
10
+ multiple: f = !0,
11
+ className: s = "",
12
+ disabled: e = !1
13
+ }) => {
14
+ const i = m(null), [C, t] = h(!1), p = (r) => {
15
+ e || (r.preventDefault(), r.stopPropagation(), t(!0));
16
+ }, u = (r) => {
17
+ e || (r.preventDefault(), r.stopPropagation(), t(!1));
18
+ }, c = (r) => {
19
+ e || (r.preventDefault(), r.stopPropagation(), t(!1), r.dataTransfer.files && r.dataTransfer.files.length > 0 && o(Array.from(r.dataTransfer.files)));
20
+ }, l = () => {
21
+ var r;
22
+ e || (r = i.current) == null || r.click();
23
+ }, g = (r) => {
24
+ e || r.target.files && r.target.files.length > 0 && o(Array.from(r.target.files));
25
+ };
26
+ return /* @__PURE__ */ d(
27
+ "div",
28
+ {
29
+ className: y(
30
+ "flex flex-col items-center justify-center gap-8 p-12 max-w-112 rounded-2xl border-[.5px] border-dashed stroke-solid-high bg-neutral-light",
31
+ e && "opacity-60 bg-gray-100 cursor-not-allowed",
32
+ s
33
+ ),
34
+ onDragOver: p,
35
+ onDragLeave: u,
36
+ onDrop: c,
37
+ onClick: l,
38
+ tabIndex: e ? -1 : 0,
39
+ role: "button",
40
+ "aria-label": "File upload area. Click or drag and drop files.",
41
+ "aria-disabled": e,
42
+ onKeyDown: e ? void 0 : (r) => {
43
+ (r.key === "Enter" || r.key === " ") && l();
44
+ },
45
+ "data-testid": "file-upload-area",
46
+ children: [
47
+ /* @__PURE__ */ a(v, {}),
48
+ /* @__PURE__ */ a(x, { accept: n }),
49
+ /* @__PURE__ */ a(
50
+ "input",
51
+ {
52
+ ref: i,
53
+ type: "file",
54
+ className: "hidden",
55
+ accept: n.join(","),
56
+ multiple: f,
57
+ tabIndex: -1,
58
+ "data-testid": "file-upload-input",
59
+ onChange: g,
60
+ onClick: (r) => r.stopPropagation(),
61
+ disabled: e
62
+ }
63
+ )
64
+ ]
65
+ }
66
+ );
67
+ };
68
+ export {
69
+ w as FileUploadArea,
70
+ w as default
71
+ };
@@ -0,0 +1,4 @@
1
+ declare function TextPreset({ accept }: {
2
+ accept: string[];
3
+ }): import("react/jsx-runtime").JSX.Element;
4
+ export default TextPreset;
@@ -0,0 +1,13 @@
1
+ import { jsxs as e, jsx as t } from "react/jsx-runtime";
2
+ function n({ accept: r }) {
3
+ return /* @__PURE__ */ e("div", { className: "flex flex-col items-center text-center gap-2.5", children: [
4
+ /* @__PURE__ */ t("p", { className: "leading-none-medium-sm text-neutral-primary", children: "Click or drag & drop files here" }),
5
+ /* @__PURE__ */ e("p", { className: "leading-none-regular-sm text-neutral-secondary", children: [
6
+ "Supported formats: ",
7
+ r.map((a) => a.replace(".", "").toUpperCase()).join(", ")
8
+ ] })
9
+ ] });
10
+ }
11
+ export {
12
+ n as default
13
+ };
@@ -0,0 +1,3 @@
1
+ import { default as React } from 'react';
2
+ export declare const UploadIconComponent: React.FC;
3
+ export default UploadIconComponent;
@@ -0,0 +1,7 @@
1
+ import { jsx as o } from "react/jsx-runtime";
2
+ import e from "../assets/icons/upload.js";
3
+ const r = () => /* @__PURE__ */ o("div", { className: "flex items-center justify-center p-3 gap-2.5 rounded-xl bg-neutral-on-top shadow-[var(--shadow-custom)]", children: /* @__PURE__ */ o(e, { className: "w-5 h-5" }) });
4
+ export {
5
+ r as UploadIconComponent,
6
+ r as default
7
+ };
@@ -1,26 +1,26 @@
1
- import { jsx as f } from "react/jsx-runtime";
2
- import c from "react";
3
- import { Button as i } from "../../button/button.js";
4
- import { cn as v } from "../../../lib/utils.js";
5
- const d = c.forwardRef(
6
- ({ leftIcon: t, label: r, rightIcon: a, onClick: o, className: l, isActive: m, asChild: e, children: n, ...s }, u) => /* @__PURE__ */ f(
7
- i,
1
+ import { jsx as u } from "react/jsx-runtime";
2
+ import v from "react";
3
+ import { Button as f } from "../../button/button.js";
4
+ import { cn as c } from "../../../lib/utils.js";
5
+ const d = v.forwardRef(
6
+ ({ leftIcon: r, label: t, rightIcon: a, onClick: o, className: m, isActive: l, asChild: e, children: n, ...i }, s) => /* @__PURE__ */ u(
7
+ f,
8
8
  {
9
9
  variant: "ghost",
10
10
  shade: "neutralGhost",
11
11
  size: "large",
12
- leftIcon: t,
12
+ leftIcon: r,
13
13
  rightIcon: a,
14
- label: r,
14
+ label: t,
15
15
  onClick: o,
16
- className: v(
17
- "text-inverted hover:surface-neutral-elevated active:surface-neutral-elevated ",
18
- m && "surface-neutral-elevated",
19
- l
16
+ className: c(
17
+ "text-inverted-primary hover:text-inverted-primary hover:surface-neutral-elevated active:surface-neutral-elevated ",
18
+ l && "surface-neutral-elevated",
19
+ m
20
20
  ),
21
21
  asChild: e,
22
- ...s,
23
- ref: u,
22
+ ...i,
23
+ ref: s,
24
24
  children: e ? n : null
25
25
  }
26
26
  )
@@ -0,0 +1,2 @@
1
+ export * from './stepper';
2
+ export * from './stepper-item/stepper-item';
@@ -0,0 +1,49 @@
1
+ import { jsxs as a, jsx as i } from "react/jsx-runtime";
2
+ import * as n from "react";
3
+ import { cva as c } from "class-variance-authority";
4
+ import { cn as l } from "../../../lib/utils.js";
5
+ import m from "../../assets/icons/circle-check-filled.js";
6
+ import s from "../../assets/icons/media-record.js";
7
+ const p = c("w-fit flex items-center select-none gap-2", {
8
+ variants: {
9
+ state: {
10
+ active: "",
11
+ completed: "opacity-100",
12
+ disabled: "cursor-not-allowed"
13
+ }
14
+ },
15
+ defaultVariants: {
16
+ state: "active"
17
+ }
18
+ }), f = "rounded-full transition-colors w-4 h-4 border-none", h = n.forwardRef(
19
+ ({ label: r, state: e = "active", className: t, ...d }, o) => /* @__PURE__ */ a(
20
+ "div",
21
+ {
22
+ ref: o,
23
+ className: l(p({ state: e }), t),
24
+ "aria-disabled": e === "disabled",
25
+ title: e || "disabled",
26
+ "aria-label": r,
27
+ ...d,
28
+ children: [
29
+ /* @__PURE__ */ a("span", { className: f, children: [
30
+ e === "completed" && /* @__PURE__ */ i(m, { fill: "blue", width: 16, height: 16 }),
31
+ (e === "active" || e === "disabled") && /* @__PURE__ */ i(s, { fill: e === "active" ? "blue" : "gray", width: 16, height: 16 })
32
+ ] }),
33
+ /* @__PURE__ */ i(
34
+ "span",
35
+ {
36
+ className: l(
37
+ e === "disabled" ? "text-neutral-secondary leading-none-medium-sm" : "text-neutral-primary leading-none-medium-sm"
38
+ ),
39
+ children: r
40
+ }
41
+ )
42
+ ]
43
+ }
44
+ )
45
+ );
46
+ h.displayName = "Z2StepperItem";
47
+ export {
48
+ h as Z2StepperItem
49
+ };
@@ -0,0 +1,50 @@
1
+ import { jsx as l, jsxs as c } from "react/jsx-runtime";
2
+ import { forwardRef as f, useState as p, useImperativeHandle as u } from "react";
3
+ import { Z2StepperItem as b } from "./stepper-item/stepper-item.js";
4
+ function x() {
5
+ return /* @__PURE__ */ l("div", { className: "w-3 h-[1.5px] border-solid border-1 stroke-solid-high" });
6
+ }
7
+ const h = f(
8
+ ({ items: i }, o) => {
9
+ const [d, s] = p(() => i.map((a, t) => ({
10
+ ...a,
11
+ state: a.state ?? (t === 0 ? "active" : "disabled")
12
+ })));
13
+ return u(o, () => ({
14
+ handleNext: (a) => {
15
+ s((t) => {
16
+ const r = t.findIndex((e) => e.state === "active");
17
+ return r === -1 ? t : r === t.length - 1 ? t.map(
18
+ (e, n) => n === r ? { ...e, state: "completed" } : e
19
+ ) : t.map((e, n) => n === r ? { ...e, state: "completed" } : n === r + 1 ? { ...e, state: "active", label: a ?? e.label } : e);
20
+ });
21
+ },
22
+ handlePrev: (a) => {
23
+ s((t) => {
24
+ const r = t.findIndex((e) => e.state === "active");
25
+ return r <= 0 ? t : t.map((e, n) => n === r ? { ...e, state: "disabled" } : n === r - 1 ? { ...e, state: "active", label: a ?? e.label } : e);
26
+ });
27
+ },
28
+ reset: () => {
29
+ s(
30
+ (a) => a.map((t, r) => ({
31
+ ...t,
32
+ state: r === 0 ? "active" : "disabled"
33
+ }))
34
+ );
35
+ },
36
+ setStepState: (a, t) => {
37
+ s(
38
+ (r) => r.map((e, n) => n === a ? { ...e, state: t } : e)
39
+ );
40
+ }
41
+ })), /* @__PURE__ */ l("div", { className: "w-fit flex flex-row items-center gap-6", children: d.map((a, t) => /* @__PURE__ */ c("div", { className: "flex flex-row items-center gap-6", children: [
42
+ /* @__PURE__ */ l(b, { label: a.label, state: a.state }),
43
+ t < d.length - 1 && /* @__PURE__ */ l(x, {})
44
+ ] }, a.id)) });
45
+ }
46
+ );
47
+ h.displayName = "Z2Stepper";
48
+ export {
49
+ h as default
50
+ };
@@ -3,18 +3,30 @@
3
3
  background-color: var(--color-neutral-00);
4
4
  }
5
5
 
6
- @utility bg-neutral-secondary {
6
+ @utility bg-neutral-on-top {
7
+ background-color: var(--color-neutral-00);
8
+ }
9
+
10
+ @utility bg-neutral-light {
11
+ background-color: var(--color-neutral-25);
12
+ }
13
+
14
+ @utility bg-neutral-high {
15
+ background-color: var(--color-neutral-100);
16
+ }
17
+
18
+ @utility bg-neutral-medium {
7
19
  background-color: var(--color-neutral-50);
8
20
  }
9
21
 
10
- @utility bg-neutral-elevated {
11
- background-color: var(--color-neutral-75);
22
+ @utility bg-neutral-inverted-elevated {
23
+ background-color: var(--color-alpha-two-100);
12
24
  }
13
25
 
14
- @utility bg-neutral-attention {
15
- background-color: var(--color-neutral-200);
26
+ @utility bg-neutral-inverted-attention {
27
+ background-color: var(--color-alpha-two-200);
16
28
  }
17
29
 
18
- @utility bg-neutral-transparent {
19
- background-color: var(--color-alpha-two-00);
30
+ @utility bg-neutral-inverted-brand {
31
+ background-color: #001534;
20
32
  }
@@ -1,5 +1,6 @@
1
1
  @theme {
2
2
  --color-neutral-00: #ffffff;
3
+ --color-neutral-25: #fafafa;
3
4
  --color-neutral-50: #f6f6f6;
4
5
  --color-neutral-100: #e7e7e7;
5
6
  --color-neutral-150: #e0e0e0;
@@ -134,4 +135,7 @@
134
135
  --color-purple-alt-800: #c5adfb;
135
136
  --color-purple-alt-900: #dccefc;
136
137
  --color-purple-alt-950: #f3efff;
138
+
139
+ --shadow-custom:
140
+ 0px 2px 4px 0px var(--color-alpha-one-50), 0px 0px 0px 0.5px var(--color-neutral-150);
137
141
  }
@@ -15,7 +15,6 @@
15
15
  @import './colors/components/tab.css';
16
16
  @import './colors/components/alert.css';
17
17
 
18
-
19
18
  @theme {
20
19
  --font-family-sans: 'Inter Variable', sans-serif;
21
20
  --font-family-display: 'Inter Variable', sans-serif;