@ztwoint/z-ui 0.1.12 → 0.1.14

package/dist/components/alert/alert.const.d.ts

@@ -0,0 +1,9 @@
+export declare const alertVariants: (props?: ({
+    variant?: "success" | "warning" | "danger" | "accent" | "neutral" | null | undefined;
+} & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;
+export declare const iconVariants: (props?: ({
+    variant?: "success" | "warning" | "danger" | "accent" | "neutral" | null | undefined;
+} & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;
+export declare const buttonVariants: (props?: ({
+    appearance?: "stroke" | "ghost" | null | undefined;
+} & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;

package/dist/components/alert/alert.const.js

@@ -0,0 +1,48 @@
+import { cva as e } from "class-variance-authority";
+const a = e(
+  "relative w-full rounded-lg border pl-2.5 pr-0.5 py-2.5 text-sm flex flex-col gap-2 items-start",
+  // Flex, column, gap for flexible content & action placement
+  {
+    variants: {
+      variant: {
+        success: "alert-success-stroke alert-success-bg alert-success-title alert-success-body",
+        warning: "alert-warning-stroke alert-warning-bg alert-warning-title alert-warning-body",
+        danger: "alert-danger-stroke alert-danger-bg alert-danger-title alert-danger-body",
+        accent: "alert-accent-stroke alert-accent-bg alert-accent-title alert-accent-body",
+        neutral: "alert-neutral-stroke alert-neutral-bg alert-neutral-title alert-neutral-body"
+      }
+    },
+    defaultVariants: {
+      variant: "accent"
+    }
+  }
+), r = e("h-5 w-5 flex-shrink-0", {
+  variants: {
+    variant: {
+      success: "alert-success-icon",
+      warning: "alert-warning-icon",
+      danger: "alert-danger-icon",
+      accent: "alert-accent-icon",
+      neutral: "alert-neutral-icon"
+    }
+  }
+}), n = e(
+  "inline-flex items-center justify-center gap-1 rounded-md px-2 py-2 text-sm transition focus:outline-none focus:ring-2",
+  // Responsive and basic
+  {
+    variants: {
+      appearance: {
+        ghost: "bg-transparent hover:cursor-pointer",
+        stroke: "bg-(--color-neutral-00) hover:cursor-pointer"
+      }
+    },
+    defaultVariants: {
+      appearance: "ghost"
+    }
+  }
+);
+export {
+  a as alertVariants,
+  n as buttonVariants,
+  r as iconVariants
+};

package/dist/components/alert/alert.d.ts

@@ -0,0 +1,15 @@
+import { VariantProps } from 'class-variance-authority';
+import { alertVariants } from './alert.const';
+import * as React from 'react';
+export interface AlertProps extends React.ComponentProps<'div'>, VariantProps<typeof alertVariants> {
+    title?: string;
+    description?: string;
+    leadingIcon?: React.ReactNode;
+    showActions?: boolean;
+    onClose?: () => void;
+    onAction?: () => void;
+    actionLabel?: string;
+}
+export declare function Alert({ className, variant, title, description, leadingIcon, showActions, onClose, onAction, actionLabel, ...props }: AlertProps): import("react/jsx-runtime").JSX.Element;
+export declare function AlertTitle({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function AlertDescription({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;

package/dist/components/alert/alert.js

@@ -0,0 +1,68 @@
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import * as x from "react";
+import u from "../assets/icons/x.js";
+import N from "../assets/icons/left-arrow.js";
+import { cn as l } from "../../lib/utils.js";
+import { iconVariants as c, buttonVariants as h, alertVariants as w } from "./alert.const.js";
+function C({
+  className: a,
+  variant: r,
+  title: f,
+  description: o,
+  leadingIcon: t,
+  showActions: p = !1,
+  onClose: i,
+  onAction: m,
+  actionLabel: n,
+  ...d
+}) {
+  return /* @__PURE__ */ e("div", { role: "alert", className: l(w({ variant: r }), a), ...d, children: /* @__PURE__ */ s("div", { className: "flex flex-row flex-wrap w-full items-start gap-1", children: [
+    t && /* @__PURE__ */ e("span", { className: l(c({ variant: r }), "flex-shrink-0"), children: (x.isValidElement(t), t) }),
+    /* @__PURE__ */ s("div", { className: "flex flex-col gap-1", children: [
+      f && /* @__PURE__ */ e(k, { className: "flex-shrink-0", children: f }),
+      /* @__PURE__ */ s("div", { className: "flex flex-row flex-wrap w-full items-center", children: [
+        o && /* @__PURE__ */ e(b, { className: "flex-shrink-1", children: o }),
+        p && (i || m) && /* @__PURE__ */ s("div", { className: "flex items-center self-end flex-shrink-0", children: [
+          i && /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              onClick: i,
+              className: l(h({ appearance: "ghost" })),
+              "aria-label": "Close alert",
+              children: /* @__PURE__ */ e(u, { className: l(c({ variant: r }), "h-2.2 w-2.2") })
+            }
+          ),
+          m && /* @__PURE__ */ s(
+            "button",
+            {
+              type: "button",
+              onClick: m,
+              className: l(
+                h({ appearance: "stroke" }),
+                "shadow-[0_1px_2px_0_rgba(0,0,0,0.05)]"
+              ),
+              "aria-label": n,
+              children: [
+                /* @__PURE__ */ e(N, { className: l(c({ variant: r }), "h-2.2 w-2.2") }),
+                n && n
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    d.children
+  ] }) });
+}
+function k({ className: a, ...r }) {
+  return /* @__PURE__ */ e("div", { className: l("tracking-tight leading-none-medium-sm", a), ...r });
+}
+function b({ className: a, ...r }) {
+  return /* @__PURE__ */ e("div", { className: l("leading-none-regular-sm", a), ...r });
+}
+export {
+  C as Alert,
+  b as AlertDescription,
+  k as AlertTitle
+};

package/dist/components/alert/icons/circles-icon.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+interface CirclesIconProps extends React.SVGProps<SVGSVGElement> {
+    className?: string;
+}
+export declare function AlertCirclesIcon({ className, ...props }: CirclesIconProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/alert/icons/circles-icon.js

@@ -0,0 +1,57 @@
+import { jsxs as o, jsx as C } from "react/jsx-runtime";
+function t({ className: l = "w-[14px] h-[14px]", ...r }) {
+  return /* @__PURE__ */ o(
+    "svg",
+    {
+      className: l,
+      width: "14",
+      height: "14",
+      viewBox: "0 0 14 14",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...r,
+      children: [
+        /* @__PURE__ */ C(
+          "path",
+          {
+            d: "M2.27466 10.8503C2.75791 10.8503 3.14966 11.2421 3.14966 11.7253C3.14943 12.2084 2.75776 12.6003 2.27466 12.6003C1.7917 12.6002 1.39989 12.2083 1.39966 11.7253C1.39966 11.2422 1.79156 10.8505 2.27466 10.8503Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ C(
+          "path",
+          {
+            d: "M11.7253 10.8503C12.2084 10.8505 12.6003 11.2422 12.6003 11.7253C12.6001 12.2083 12.2083 12.6002 11.7253 12.6003C11.2422 12.6003 10.8506 12.2084 10.8503 11.7253C10.8503 11.2421 11.2421 10.8503 11.7253 10.8503Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ C(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M7 2.625C9.41625 2.625 11.375 4.58375 11.375 7C11.375 9.41625 9.41625 11.375 7 11.375C4.58375 11.375 2.625 9.41625 2.625 7C2.625 4.58375 4.58375 2.625 7 2.625ZM7 4.375C5.55025 4.375 4.375 5.55025 4.375 7C4.375 8.44975 5.55025 9.625 7 9.625C8.44975 9.625 9.625 8.44975 9.625 7C9.625 5.55025 8.44975 4.375 7 4.375Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ C(
+          "path",
+          {
+            d: "M2.27466 1.40051C2.75791 1.40051 3.14966 1.79226 3.14966 2.27551C3.14943 2.75857 2.75776 3.15051 2.27466 3.15051C1.7917 3.15034 1.39989 2.75846 1.39966 2.27551C1.39966 1.79237 1.79156 1.40069 2.27466 1.40051Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ C(
+          "path",
+          {
+            d: "M11.7253 1.40051C12.2084 1.40069 12.6003 1.79237 12.6003 2.27551C12.6001 2.75846 12.2083 3.15034 11.7253 3.15051C11.2422 3.15051 10.8506 2.75857 10.8503 2.27551C10.8503 1.79226 11.2421 1.40051 11.7253 1.40051Z",
+            fill: "currentColor"
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  t as AlertCirclesIcon
+};

package/dist/components/alert/index.d.ts

@@ -0,0 +1,2 @@
+export { Alert, AlertTitle, AlertDescription, type AlertProps } from './alert';
+export { AlertCirclesIcon } from './icons/circles-icon';

package/dist/components/assets/icons/left-arrow.d.ts

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

package/dist/components/assets/icons/left-arrow.js

@@ -0,0 +1,38 @@
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+function d({
+  fill: o = "currentColor",
+  strokewidth: e = 1,
+  title: n = "",
+  ...i
+}) {
+  return /* @__PURE__ */ t("svg", { height: "14", width: "14", viewBox: "0 0 14 14", xmlns: "http://www.w3.org/2000/svg", ...i, children: [
+    /* @__PURE__ */ r("title", { children: n }),
+    /* @__PURE__ */ t("g", { fill: o, children: [
+      /* @__PURE__ */ r(
+        "path",
+        {
+          d: "M2.1 7h9.8",
+          fill: "none",
+          stroke: o,
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: e
+        }
+      ),
+      /* @__PURE__ */ r(
+        "path",
+        {
+          d: "M8.4 3.5l3.5 3.5-3.5 3.5",
+          fill: "none",
+          stroke: o,
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: e
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  d as default
+};

package/dist/components/assets/icons/octagon-warning-Copy.d.ts

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

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

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

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

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

package/dist/components/assets/icons/x.js

@@ -0,0 +1,33 @@
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+function d({ fill: o = "currentColor", strokewidth: e = 1, title: t = "", ...i }) {
+  return /* @__PURE__ */ n("svg", { height: "14", width: "14", viewBox: "0 0 14 14", xmlns: "http://www.w3.org/2000/svg", ...i, children: [
+    /* @__PURE__ */ r("title", { children: t }),
+    /* @__PURE__ */ n("g", { fill: o, children: [
+      /* @__PURE__ */ r(
+        "path",
+        {
+          d: "M3.5 3.5l7 7",
+          fill: "none",
+          stroke: o,
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: e
+        }
+      ),
+      /* @__PURE__ */ r(
+        "path",
+        {
+          d: "M3.5 10.5l7-7",
+          fill: "none",
+          stroke: o,
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: e
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  d as default
+};

package/dist/components/assets/icons/z2-icon.js

@@ -1,7 +1,7 @@
-import { jsxs as L, jsx as C } from "react/jsx-runtime";
-function e({ title: i = "badge 13", ...t }) {
-  return /* @__PURE__ */ L("svg", { height: "22", width: "27", viewBox: "0 0 27 22", xmlns: "http://www.w3.org/2000/svg", ...t, children: [
-    /* @__PURE__ */ C("title", { children: i }),
+import { jsxs as t, jsx as C } from "react/jsx-runtime";
+function e({ title: L = "Z2-Logo", ...i }) {
+  return /* @__PURE__ */ t("svg", { height: "22", width: "27", viewBox: "0 0 27 22", xmlns: "http://www.w3.org/2000/svg", ...i, children: [
+    /* @__PURE__ */ C("title", { children: L }),
     /* @__PURE__ */ C("g", { fill: "none", children: /* @__PURE__ */ C(
       "path",
       {

package/dist/components/button/button.d.ts

@@ -1,9 +1,9 @@
+import { default as React } from 'react';
 import { VariantProps } from 'class-variance-authority';
-import * as React from 'react';
 declare const buttonVariants: (props?: ({
-    variant?: "filled" | "stroke" | "ghost" | null | undefined;
-    shade?: "neutral" | "brand" | "danger" | "neutralGhost" | null | undefined;
-    size?: "large" | "small" | null | undefined;
+    variant?: "stroke" | "ghost" | "filled" | null | undefined;
+    shade?: "danger" | "neutral" | "brand" | "neutralGhost" | null | undefined;
+    size?: "small" | "large" | null | undefined;
     iconOnly?: boolean | null | undefined;
 } & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;
 export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'style' | 'type'>, Omit<VariantProps<typeof buttonVariants>, 'iconOnly'> {

package/dist/components/button/button.js

@@ -1,9 +1,9 @@
 import { jsx as e, jsxs as x, Fragment as g } from "react/jsx-runtime";
-import { Slot as O } from "@radix-ui/react-slot";
-import { cva as z } from "class-variance-authority";
-import * as w from "react";
+import O from "react";
+import { Slot as z } from "@radix-ui/react-slot";
+import { cva as w } from "class-variance-authority";
 import { cn as d } from "../../lib/utils.js";
-const N = z(
+const N = w(
   "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",
   {
     variants: {
@@ -70,7 +70,7 @@ const N = z(
       iconOnly: !1
     }
   }
-), k = w.forwardRef(
+), k = O.forwardRef(
   ({
     className: i,
     shade: c,
@@ -83,7 +83,7 @@ const N = z(
     children: l,
     ...p
   }, y) => {
-    const v = o ? O : "button", r = m || l, n = !r && !!(a || t), u = n ? a || t : null, h = d(
+    const v = o ? z : "button", r = m || l, n = !r && !!(a || t), u = n ? a || t : null, h = d(
       N({ shade: c, size: b, variant: f, iconOnly: n, className: i })
     ), s = "w-3.5 h-3.5";
     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: [

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

@@ -0,0 +1 @@
+export declare const DEFAULT_ACCEPT: string[];

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

@@ -0,0 +1,42 @@
+import { default as React } from 'react';
+export type FileUploadAreaProps = {
+    onFilesSelected: (files: File[]) => void;
+    accept?: string[];
+    multiple?: boolean;
+    className?: string;
+    disabled?: boolean;
+};
+/**
+ * FileUploadArea component provides a drag-and-drop and click-to-upload area for file selection.
+ *
+ * Features:
+ * - Drag and drop file upload
+ * - Click to open file dialog
+ * - Supports multiple file formats (default: CSV, XLS, XLSX)
+ * - Supports multiple file selection
+ * - Disabled state (blocks all interaction and changes style)
+ * - Custom className for styling
+ * - Accessible and keyboard-navigable
+ *
+ * @component
+ * @param {FileUploadAreaProps} props - The props for FileUploadArea
+ * @returns {JSX.Element}
+ *
+ * @example <caption>Default usage</caption>
+ * <FileUploadArea onFilesSelected={files => console.log(files)} />
+ *
+ * @example <caption>Custom formats and single file</caption>
+ * <FileUploadArea
+ *   onFilesSelected={files => console.log(files)}
+ *   accept={[".pdf", ".docx"]}
+ *   multiple={false}
+ * />
+ *
+ * @example <caption>Disabled</caption>
+ * <FileUploadArea onFilesSelected={() => {}} disabled />
+ *
+ * @example <caption>Async handler</caption>
+ * <FileUploadArea onFilesSelected={async files => await uploadFiles(files)} />
+ */
+export declare const FileUploadArea: React.FC<FileUploadAreaProps>;
+export default FileUploadArea;

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

@@ -0,0 +1,4 @@
+declare function TextPreset({ accept }: {
+    accept: string[];
+}): import("react/jsx-runtime").JSX.Element;
+export default TextPreset;

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

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+export declare const UploadIconComponent: React.FC;
+export default UploadIconComponent;

package/dist/components/nav-header/nav-item/nav-item.js

@@ -1,26 +1,26 @@
-import { jsx as f } from "react/jsx-runtime";
-import c from "react";
-import { Button as i } from "../../button/button.js";
-import { cn as v } from "../../../lib/utils.js";
-const d = c.forwardRef(
-  ({ leftIcon: t, label: r, rightIcon: a, onClick: o, className: l, isActive: m, asChild: e, children: n, ...s }, u) => /* @__PURE__ */ f(
-    i,
+import { jsx as u } from "react/jsx-runtime";
+import v from "react";
+import { Button as f } from "../../button/button.js";
+import { cn as c } from "../../../lib/utils.js";
+const d = v.forwardRef(
+  ({ leftIcon: r, label: t, rightIcon: a, onClick: o, className: m, isActive: l, asChild: e, children: n, ...i }, s) => /* @__PURE__ */ u(
+    f,
     {
       variant: "ghost",
       shade: "neutralGhost",
       size: "large",
-      leftIcon: t,
+      leftIcon: r,
       rightIcon: a,
-      label: r,
+      label: t,
       onClick: o,
-      className: v(
-        "text-inverted hover:surface-neutral-elevated active:surface-neutral-elevated ",
-        m && "surface-neutral-elevated",
-        l
+      className: c(
+        "text-inverted-primary hover:text-inverted-primary hover:surface-neutral-elevated active:surface-neutral-elevated ",
+        l && "surface-neutral-elevated",
+        m
       ),
       asChild: e,
-      ...s,
-      ref: u,
+      ...i,
+      ref: s,
       children: e ? n : null
     }
   )

package/dist/css/config/colors/backgrounds.css

@@ -3,18 +3,30 @@
   background-color: var(--color-neutral-00);
 }
 
-@utility bg-neutral-secondary {
+@utility bg-neutral-on-top {
+  background-color: var(--color-neutral-00);
+}
+
+@utility bg-neutral-light {
+  background-color: var(--color-neutral-25);
+}
+
+@utility bg-neutral-high {
+  background-color: var(--color-neutral-100);
+}
+
+@utility bg-neutral-medium {
   background-color: var(--color-neutral-50);
 }
 
-@utility bg-neutral-elevated {
-  background-color: var(--color-neutral-75);
+@utility bg-neutral-inverted-elevated {
+  background-color: var(--color-alpha-two-100);
 }
 
-@utility bg-neutral-attention {
-  background-color: var(--color-neutral-200);
+@utility bg-neutral-inverted-attention {
+  background-color: var(--color-alpha-two-200);
 }
 
-@utility bg-neutral-transparent {
-  background-color: var(--color-alpha-two-00);
+@utility bg-neutral-inverted-brand {
+  background-color: #001534;
 }