@ztwoint/z-ui 0.1.89 → 0.1.91

package/dist/components/assets/icons/index.d.ts

@@ -36,3 +36,4 @@ export { default as Z2SlashIcon } from './z2-slash';
 export { default as Z2DataIcon } from './z2data';
 export { default as Vector3Icon } from './vector_3';
 export { default as TableCols2Icon } from './table-cols-2';
+export { default as TriangleWarningIcon } from './triangle-warning';

package/dist/components/assets/icons/triangle-warning.d.ts

@@ -0,0 +1,7 @@
+import { SVGProps } from 'react';
+type IconProps = SVGProps<SVGSVGElement> & {
+    strokewidth?: number;
+    title?: string;
+};
+declare function TriangleWarningFilled({ fill, strokewidth, width, height, title, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+export default TriangleWarningFilled;

package/dist/components/assets/icons/triangle-warning.js

@@ -0,0 +1,34 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+function l({
+  fill: r = "currentColor",
+  strokewidth: t = 1,
+  width: s = "1em",
+  height: c = "1em",
+  title: n = "badge 13",
+  ...i
+}) {
+  return /* @__PURE__ */ o(
+    "svg",
+    {
+      height: c,
+      width: s,
+      viewBox: "0 0 20 20",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...i,
+      children: [
+        /* @__PURE__ */ e("title", { children: n }),
+        /* @__PURE__ */ e("g", { fill: r, children: /* @__PURE__ */ e(
+          "path",
+          {
+            d: "m17.794,12.5L12.598,3.5c-.542-.939-1.514-1.5-2.598-1.5s-2.056.561-2.598,1.5L2.206,12.5c-.542.938-.543,2.061,0,3,.542.939,1.514,1.5,2.598,1.5h10.393c1.084,0,2.056-.561,2.598-1.5.542-.939.542-2.062,0-3Zm-8.794-5.5c0-.552.447-1,1-1s1,.448,1,1v3.5c0,.552-.447,1-1,1s-1-.448-1-1v-3.5Zm1,8c-.689,0-1.25-.561-1.25-1.25s.561-1.25,1.25-1.25,1.25.561,1.25,1.25-.561,1.25-1.25,1.25Z",
+            fill: r,
+            strokeWidth: t
+          }
+        ) })
+      ]
+    }
+  );
+}
+export {
+  l as default
+};

package/dist/components/file-upload-area/file-upload-area.d.ts

@@ -5,6 +5,12 @@ export type FileUploadAreaProps = {
     multiple?: boolean;
     className?: string;
     disabled?: boolean;
+    isError?: boolean;
+    Error: {
+        icon?: React.ReactNode;
+        Title: string;
+        Description: string;
+    };
 };
 /**
  * FileUploadArea component provides a drag-and-drop and click-to-upload area for file selection.

package/dist/components/file-upload-area/file-upload-area.js

@@ -1,70 +1,92 @@
-import { jsxs as m, jsx as a } from "react/jsx-runtime";
-import { useRef as d, useState as h } from "react";
-import { DEFAULT_ACCEPT as D } from "./file-upload-area.const.js";
-import { UploadIconComponent as v } from "./upload-icon-component.js";
-import x from "./text-preset.js";
-import { cn as y } from "../../lib/utils.js";
-const I = ({
-  onFilesSelected: o,
-  accept: n = D,
-  multiple: f = !0,
-  className: s = "",
-  disabled: e = !1
+import { jsxs as t, jsx as a } from "react/jsx-runtime";
+import { useRef as v, useState as D } from "react";
+import { DEFAULT_ACCEPT as y } from "./file-upload-area.const.js";
+import { UploadIconComponent as C } from "./upload-icon-component.js";
+import k from "./text-preset.js";
+import { cn as p } from "../../lib/utils.js";
+import T from "../assets/icons/triangle-warning.js";
+const L = ({
+  onFilesSelected: l,
+  accept: i = y,
+  multiple: c = !0,
+  className: d = "",
+  disabled: r = !1,
+  isError: m = !1,
+  Error: n
 }) => {
-  const i = d(null), [C, t] = h(!1), p = (r) => {
-    e || (r.preventDefault(), r.stopPropagation(), t(!0));
-  }, u = (r) => {
-    e || (r.preventDefault(), r.stopPropagation(), t(!1));
-  }, c = (r) => {
-    e || (r.preventDefault(), r.stopPropagation(), t(!1), r.dataTransfer.files && r.dataTransfer.files.length > 0 && o(Array.from(r.dataTransfer.files)));
-  }, l = () => {
-    var r;
-    e || (r = i.current) == null || r.click();
-  }, g = (r) => {
-    e || r.target.files && r.target.files.length > 0 && o(Array.from(r.target.files));
+  const s = v(null), [w, o] = D(!1), u = (e) => {
+    r || (e.preventDefault(), e.stopPropagation(), o(!0));
+  }, g = (e) => {
+    r || (e.preventDefault(), e.stopPropagation(), o(!1));
+  }, x = (e) => {
+    r || (e.preventDefault(), e.stopPropagation(), o(!1), e.dataTransfer.files && e.dataTransfer.files.length > 0 && l(Array.from(e.dataTransfer.files)));
+  }, f = () => {
+    var e;
+    r || (e = s.current) == null || e.click();
+  }, h = (e) => {
+    r || e.target.files && e.target.files.length > 0 && l(Array.from(e.target.files));
   };
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ t(
     "div",
     {
-      className: y(
-        "flex flex-col items-center justify-center gap-8 p-12 max-w-112 w-full rounded-3xl file-upload-12-dash-border bg-neutral-light",
-        e && "opacity-60 bg-gray-100 cursor-not-allowed disabled",
-        s
+      className: p(
+        "max-w-115 w-full bg-neutral-light rounded-3xl",
+        "flex flex-col items-center file-upload-12-dash-border",
+        r && "opacity-60 bg-gray-100 cursor-not-allowed disabled"
       ),
-      onDragOver: p,
-      onDragLeave: u,
-      onDrop: c,
-      onClick: l,
-      tabIndex: e ? -1 : 0,
-      role: "button",
-      "aria-label": "File upload area. Click or drag and drop files.",
-      "aria-disabled": e,
-      onKeyDown: e ? void 0 : (r) => {
-        (r.key === "Enter" || r.key === " ") && l();
-      },
-      "data-testid": "file-upload-area",
       children: [
-        /* @__PURE__ */ a(v, {}),
-        /* @__PURE__ */ a(x, { accept: n }),
-        /* @__PURE__ */ a(
-          "input",
+        /* @__PURE__ */ t(
+          "div",
           {
-            ref: i,
-            type: "file",
-            className: "hidden",
-            accept: n.join(","),
-            multiple: f,
-            tabIndex: -1,
-            "data-testid": "file-upload-input",
-            onChange: g,
-            onClick: (r) => r.stopPropagation(),
-            disabled: e
+            className: p(
+              "flex flex-col items-center justify-center gap-8 p-12",
+              "leading-none-medium-sm leading-3",
+              d
+            ),
+            onDragOver: u,
+            onDragLeave: g,
+            onDrop: x,
+            onClick: f,
+            tabIndex: r ? -1 : 0,
+            role: "button",
+            "aria-label": "File upload area. Click or drag and drop files.",
+            "aria-disabled": r,
+            onKeyDown: r ? void 0 : (e) => {
+              (e.key === "Enter" || e.key === " ") && f();
+            },
+            "data-testid": "file-upload-area",
+            children: [
+              /* @__PURE__ */ a(C, {}),
+              /* @__PURE__ */ a(k, { accept: i }),
+              /* @__PURE__ */ a(
+                "input",
+                {
+                  ref: s,
+                  type: "file",
+                  className: "hidden",
+                  accept: i.join(","),
+                  multiple: c,
+                  tabIndex: -1,
+                  "data-testid": "file-upload-input",
+                  onChange: h,
+                  onClick: (e) => e.stopPropagation(),
+                  disabled: r
+                }
+              )
+            ]
           }
-        )
+        ),
+        m && /* @__PURE__ */ t("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: [
+          n.icon || /* @__PURE__ */ a(T, {}),
+          /* @__PURE__ */ t("div", { className: "flex flex-row gap-1", children: [
+            /* @__PURE__ */ a("p", { className: "leading-none-medium-sm text-text-danger-primary", children: n.Title }),
+            /* @__PURE__ */ a("p", { className: "leading-none-regular-sm text-text-danger-primary opacity-[.7]", children: n.Description })
+          ] })
+        ] })
       ]
     }
   );
 };
 export {
-  I as FileUploadArea
+  L as FileUploadArea
 };

package/dist/components/stepper/stepper.types.d.ts

@@ -1,4 +1,4 @@
-export type StepperState = 'active' | 'completed' | 'disabled';
+export type StepperState = 'active' | 'completed' | 'disabled' | 'completed-disabled';
 export type StepperItemType = {
     id: string;
     label: string;

package/dist/components/stepper-item/stepper-item.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const z2StepperItemVariants: (props?: ({
-    state?: "disabled" | "active" | "completed" | null | undefined;
+    state?: "disabled" | "active" | "completed" | "completed-disabled" | null | undefined;
 } & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;
 export interface Z2StepperItemProps extends React.HTMLAttributes<HTMLButtonElement>, VariantProps<typeof z2StepperItemVariants> {
     label: string;

package/dist/components/stepper-item/stepper-item.js

@@ -1,36 +1,37 @@
-import { jsxs as m, jsx as i } from "react/jsx-runtime";
-import * as c from "react";
-import { cva as p } from "class-variance-authority";
-import { cn as l } from "../../lib/utils.js";
-import f from "../assets/icons/circle-check-filled.js";
+import { jsxs as c, jsx as i } from "react/jsx-runtime";
+import * as p from "react";
+import { cva as u } from "class-variance-authority";
+import { cn as a } from "../../lib/utils.js";
+import d from "../assets/icons/circle-check-filled.js";
 import o from "../assets/icons/media-record.js";
-const u = p("w-fit flex items-center select-none gap-2", {
+const f = u("w-fit flex items-center select-none gap-2", {
   variants: {
     state: {
       active: "cursor-pointer",
       completed: "opacity-100 cursor-pointer",
-      disabled: "cursor-not-allowed"
+      disabled: "cursor-not-allowed",
+      "completed-disabled": "cursor-not-allowed"
     }
   },
   defaultVariants: {
     state: "active"
   }
-}), h = "rounded-full transition-colors w-4 h-4 border-none", b = c.forwardRef(
-  ({ label: a, state: e = "active", className: n, ...s }, d) => {
-    let r, t;
-    return e === "completed" ? (r = /* @__PURE__ */ i(f, { fill: "var(--blue-500)", width: 16, height: 16 }), t = "text-neutral-primary leading-none-medium-sm") : e === "active" ? (r = /* @__PURE__ */ i(o, { fill: "var(--blue-500)", width: 16, height: 16 }), t = "text-neutral-primary leading-none-medium-sm") : (r = /* @__PURE__ */ i(o, { fill: "var(--neutral-500)", width: 16, height: 16 }), t = "text-neutral-secondary leading-none-medium-sm"), /* @__PURE__ */ m(
+}), h = "rounded-full transition-colors w-4 h-4 border-none", b = p.forwardRef(
+  ({ label: t, state: e = "active", className: n, ...s }, m) => {
+    let l, r;
+    return e === "completed" ? (l = /* @__PURE__ */ i(d, { fill: "var(--blue-500)", width: 16, height: 16 }), r = "text-neutral-primary leading-none-medium-sm") : e === "completed-disabled" ? (l = /* @__PURE__ */ i(d, { fill: "var(--neutral-500)", width: 16, height: 16 }), r = "text-neutral-secondary leading-none-medium-sm") : e === "active" ? (l = /* @__PURE__ */ i(o, { fill: "var(--blue-500)", width: 16, height: 16 }), r = "text-neutral-primary leading-none-medium-sm") : (l = /* @__PURE__ */ i(o, { fill: "var(--neutral-500)", width: 16, height: 16 }), r = "text-neutral-secondary leading-none-medium-sm"), /* @__PURE__ */ c(
       "button",
       {
-        ref: d,
-        className: l(u({ state: e }), n),
-        "aria-disabled": e === "disabled",
+        ref: m,
+        className: a(f({ state: e }), n),
+        "aria-disabled": e === "disabled" || e === "completed-disabled",
         title: e || "disabled",
-        disabled: e === "disabled",
-        "aria-label": a,
+        disabled: e === "disabled" || e === "completed-disabled",
+        "aria-label": t,
         ...s,
         children: [
-          /* @__PURE__ */ i("span", { className: h, children: r }),
-          /* @__PURE__ */ i("span", { className: l(t), children: a })
+          /* @__PURE__ */ i("span", { className: h, children: l }),
+          /* @__PURE__ */ i("span", { className: a(r), children: t })
         ]
       }
     );

package/dist/components/table-card/table-card.js

@@ -22,6 +22,7 @@ import "@radix-ui/react-dialog";
 import "../dropdown/z2-dropdown.js";
 import "@radix-ui/react-dropdown-menu";
 import "lucide-react";
+import S from "../assets/icons/octagon-warning-Copy.js";
 import "../input/input.js";
 import "../nav-header/nav-header.js";
 import "../nav-header/nav-item/nav-item.js";
@@ -31,7 +32,6 @@ import "../stepper-item/stepper-item.js";
 import "@radix-ui/react-tabs";
 import "../tooltip/tooltip.js";
 import { Filter as p } from "../table-filter/index.js";
-import S from "../assets/icons/octagon-warning-Copy.js";
 import "../badge/badge.js";
 import "../avatar/avatar.js";
 import "../text-preset/text-preset.js";