@ztwoint/z-ui 0.1.12 → 0.1.13

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/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/button/button.d.ts

@@ -1,9 +1,9 @@
 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/css/config/colors/components/alert.css

@@ -1,83 +1,84 @@
-/* NEUTRAL */
-.c-alert-neutral-stroke {
-  border-color: var(--color-alpha-two-50);
+/* SUCCESS */
+@utility alert-success-stroke {
+  border-color: var(--color-green-300);
 }
-
-.c-alert-neutral-bg {
-  background-color: var(--color-surface-neutral-default);
+@utility alert-success-bg {
+  background-color: var(--color-green-50);
 }
-
-.c-alert-neutral-icon {
-  fill: var(--color-shape-neutral-default);
+@utility alert-success-title {
+  color: var(--color-green-900);
 }
-
-.c-alert-neutral-subtitle {
-  color: var(--color-subtitle-primary);
+@utility alert-success-body {
+  color: var(--color-green-900);
 }
-
-.c-alert-neutral-body {
-  color: var(--color-subtitle-secondary);
+@utility alert-success-icon {
+  color: var(--color-green-600);
 }
 
 /* WARNING */
-.c-alert-warning-stroke {
-  border-color: var(--color-warning-200);
+@utility alert-warning-stroke {
+  border-color: var(--color-amber-400);
 }
-
-.c-alert-warning-bg {
-  background-color: var(--color-warning-50);
+@utility alert-warning-bg {
+  background-color: var(--color-amber-50);
 }
-
-.c-alert-warning-icon {
-  fill: var(--color-warning-600);
+@utility alert-warning-title {
+  color: var(--color-amber-900);
 }
-
-.c-alert-warning-subtitle {
-  color: var(--color-warning-950);
+@utility alert-warning-body {
+  color: var(--color-amber-900);
 }
-
-.c-alert-warning-body {
-  color: rgba(69, 44, 3, 0.8);
+@utility alert-warning-icon {
+  color: var(--color-amber-600);
 }
 
 /* DANGER */
-.c-alert-danger-stroke {
-  border-color: var(--color-danger-200);
+@utility alert-danger-stroke {
+  border-color: var(--color-red-400);
 }
-
-.c-alert-danger-bg {
-  background-color: var(--color-danger-50);
+@utility alert-danger-bg {
+  background-color: var(--color-red-50);
 }
-
-.c-alert-danger-icon {
-  fill: var(--color-danger-600);
+@utility alert-danger-title {
+  color: var(--color-red-900);
 }
-
-.c-alert-danger-subtitle {
-  color: var(--color-danger-950);
+@utility alert-danger-body {
+  color: var(--color-red-600);
 }
-
-.c-alert-danger-body {
-  color: rgba(62, 20, 17, 0.8);
+@utility alert-danger-icon {
+  color: var(--color-red-600);
 }
 
-/* DESTRUCTIVE */
-.c-alert-destructive-stroke {
-  border-color: var(--color-danger-600);
+/* ACCENT */
+@utility alert-accent-stroke {
+  border-color: var(--color-accent-200);
 }
-
-.c-alert-destructive-bg {
-  background-color: var(--color-danger-100);
+@utility alert-accent-bg {
+  background-color: var(--color-accent-50);
 }
-
-.c-alert-destructive-icon {
-  fill: var(--color-danger-600);
+@utility alert-accent-title {
+  color: var(--color-accent-950);
 }
-
-.c-alert-destructive-subtitle {
-  color: var(--color-danger-600);
+@utility alert-accent-body {
+  color: var(--color-accent-950);
+}
+@utility alert-accent-icon {
+  color: var(--color-accent-600);
 }
 
-.c-alert-destructive-body {
-  color: rgba(62, 20, 17, 0.8);
+/* NEUTRAL */
+@utility alert-neutral-stroke {
+  border-color: var(--color-neutral-800);
+}
+@utility alert-neutral-bg {
+  background-color: var(--color-neutral-25);
+}
+@utility alert-neutral-title {
+  color: var(--color-neutral-950);
+}
+@utility alert-neutral-body {
+  color: var(--color-neutral-950);
+}
+@utility alert-neutral-icon {
+  color: var(--color-neutral-950);
 }

package/dist/css/config/colors/text.css

@@ -27,11 +27,11 @@
 
 /*brand*/
 @utility text-brand-primary {
-  color: var(--color-brand-950);
+  color: var(--color-accent-950);
 }
 
 @utility text-brand-secondary {
-  color: var(--color-brand-600);
+  color: var(--color-accent-600);
 }
 
 /*success*/

package/dist/css/config/config.css

@@ -13,6 +13,8 @@
 /* Components Colors */
 @import './colors/components/button.css';
 @import './colors/components/tab.css';
+@import './colors/components/alert.css';
+
 
 @theme {
   --font-family-sans: 'Inter Variable', sans-serif;