@yuno-payments/dashboard-design-system 2.2.1 → 2.2.2-beta.2

package/dist/components/organisms/data-table/components/cells/data-table-resize-handle.js

@@ -1,24 +1,30 @@
-import { j as t } from "../../../../../_virtual/jsx-runtime.js";
-import { RESIZE_HANDLE_CONFIG as e } from "../../utils/data-table-constants.js";
-function l({
-  onMouseDown: r,
-  onTouchStart: i
+import { j as e } from "../../../../../_virtual/jsx-runtime.js";
+import { RESIZE_HANDLE_CONFIG as t } from "../../utils/data-table-constants.js";
+function c({
+  onMouseDown: n,
+  onTouchStart: r
 }) {
-  return /* @__PURE__ */ t.jsx(
+  const s = (o) => {
+    o.stopPropagation(), n(o);
+  }, a = (o) => {
+    o.stopPropagation(), r(o);
+  };
+  return /* @__PURE__ */ e.jsx(
     "div",
     {
-      onMouseDown: r,
-      onTouchStart: i,
-      className: `absolute right-0 top-0 h-full ${e.width} cursor-col-resize select-none touch-none flex items-center justify-center hover:bg-neutral-100`,
-      children: /* @__PURE__ */ t.jsx(
+      onMouseDown: s,
+      onTouchStart: a,
+      onPointerDown: (o) => o.stopPropagation(),
+      className: `absolute right-0 top-0 h-full ${t.width} cursor-col-resize select-none touch-none flex items-center justify-center hover:bg-neutral-100`,
+      children: /* @__PURE__ */ e.jsx(
         "div",
         {
-          className: `${e.lineHeight} ${e.lineWidth} bg-neutral-300`
+          className: `${t.lineHeight} ${t.lineWidth} bg-neutral-300`
         }
       )
     }
   );
 }
 export {
-  l as DataTableResizeHandle
+  c as DataTableResizeHandle
 };

package/dist/components/organisms/data-table/utils/data-table-constants.d.ts

@@ -21,8 +21,8 @@ export declare const ACTIONS_COLUMN_CONFIG: {
     readonly maxSize: 50;
 };
 export declare const CELL_BACKGROUND_COLORS: {
-    readonly header: "hsl(var(--sidebar))";
-    readonly body: "hsl(var(--background))";
+    readonly header: "var(--sidebar)";
+    readonly body: "var(--background)";
 };
 export declare const ROW_HEIGHT_DEFAULT = 66;
 export declare const COLUMN_MIN_SIZE_DEFAULT = 50;

package/dist/components/organisms/data-table/utils/data-table-constants.js

@@ -17,16 +17,16 @@ const _ = {
   minSize: 50,
   maxSize: 50
 }, n = {
-  header: "hsl(var(--sidebar))",
-  body: "hsl(var(--background))"
-}, o = 66, s = 50, C = "shadow-[-4px_0_4px_-2px_rgba(0,0,0,0.1)]";
+  header: "var(--sidebar)",
+  body: "var(--background)"
+}, o = 66, C = 50, s = "shadow-[-4px_0_4px_-2px_rgba(0,0,0,0.1)]";
 export {
   i as ACTIONS_COLUMN_CONFIG,
   n as CELL_BACKGROUND_COLORS,
   t as CHECKBOX_COLUMN_CONFIG,
   _ as COLUMN_HEADER_CONFIG,
-  s as COLUMN_MIN_SIZE_DEFAULT,
-  C as PINNED_SHADOW_CLASS,
+  C as COLUMN_MIN_SIZE_DEFAULT,
+  s as PINNED_SHADOW_CLASS,
   e as RESIZE_HANDLE_CONFIG,
   o as ROW_HEIGHT_DEFAULT
 };

package/dist/components/organisms/dialog/dialog.d.ts

@@ -69,11 +69,6 @@ export interface DialogProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
      * Additional CSS classes for the footer
      */
     footerClassName?: string;
-    /**
-     * Optional z-index override. When provided, replaces the default z-dialog value.
-     * Useful for rendering inside high z-index containers like inspector panels.
-     */
-    zIndex?: number;
 }
 /**
  * Modal dialog component with header, content, and footer sections.

package/dist/components/organisms/dialog/dialog.js

@@ -1,15 +1,15 @@
 import { j as e } from "../../../_virtual/jsx-runtime.js";
-import * as i from "react";
-import { createPortal as F } from "react-dom";
-import { cva as p } from "../../../node_modules/class-variance-authority/dist/index.js";
-import { cn as d, normalizeDimension as w } from "../../../lib/utils.js";
-import { useBodyScrollLock as R } from "../../../hooks/use-body-scroll-lock.js";
-import { useEscapeKey as H } from "../../../hooks/use-escape-key.js";
-import { DialogHeader as I } from "../../molecules/dialog-header/dialog-header.js";
-import { DialogContent as K } from "../../molecules/dialog-content/dialog-content.js";
-import { DialogFooter as O } from "../../molecules/dialog-footer/dialog-footer.js";
-const P = p(
-  "fixed inset-0 flex items-center justify-center p-4",
+import * as a from "react";
+import { createPortal as M } from "react-dom";
+import { cva as x } from "../../../node_modules/class-variance-authority/dist/index.js";
+import { cn as m, normalizeDimension as g } from "../../../lib/utils.js";
+import { useBodyScrollLock as B } from "../../../hooks/use-body-scroll-lock.js";
+import { useEscapeKey as C } from "../../../hooks/use-escape-key.js";
+import { DialogHeader as F } from "../../molecules/dialog-header/dialog-header.js";
+import { DialogContent as I } from "../../molecules/dialog-content/dialog-content.js";
+import { DialogFooter as R } from "../../molecules/dialog-footer/dialog-footer.js";
+const H = x(
+  "fixed inset-0 z-dialog flex items-center justify-center p-4",
   {
     variants: {
       verticalAlign: {
@@ -22,7 +22,7 @@ const P = p(
       verticalAlign: "center"
     }
   }
-), W = p(
+), K = x(
   "relative bg-background rounded-lg shadow-lg border border-border max-h-[90vh] overflow-hidden flex flex-col",
   {
     variants: {
@@ -38,104 +38,94 @@ const P = p(
       size: "default"
     }
   }
-), q = i.forwardRef(
+), O = a.forwardRef(
   ({
-    className: y,
-    verticalAlign: b,
-    title: h,
-    open: a,
+    className: w,
+    verticalAlign: p,
+    title: v,
+    open: i,
     closeIcon: o,
-    buttons: j = [],
-    widthContainer: l,
-    heightContainer: c,
-    backButtonAction: z,
-    showActions: N = !0,
-    otherActions: k,
-    withHeader: D = !0,
-    children: E,
-    headerClassName: S,
-    contentClassName: T,
-    footerClassName: V,
-    zIndex: r,
-    ...A
-  }, C) => {
-    const [s, L] = i.useState(!1), [n, u] = i.useState(a), [f, g] = i.useState(!1);
-    if (i.useEffect(() => {
+    buttons: y = [],
+    widthContainer: r,
+    heightContainer: d,
+    backButtonAction: b,
+    showActions: h = !0,
+    otherActions: j,
+    withHeader: z = !0,
+    children: N,
+    headerClassName: k,
+    contentClassName: D,
+    footerClassName: E,
+    ...T
+  }, V) => {
+    const [s, S] = a.useState(!1), [l, c] = a.useState(i), [u, f] = a.useState(!1);
+    if (a.useEffect(() => {
       const t = () => {
-        L(window.innerWidth <= 599);
+        S(window.innerWidth <= 599);
       };
       return t(), window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
-    }, []), i.useEffect(() => {
-      let t, m;
-      return a ? (u(!0), t = setTimeout(() => g(!0), 10)) : n && (g(!1), m = setTimeout(() => {
-        u(!1);
+    }, []), a.useEffect(() => {
+      let t, n;
+      return i ? (c(!0), t = setTimeout(() => f(!0), 10)) : l && (f(!1), n = setTimeout(() => {
+        c(!1);
       }, 600)), () => {
-        t && clearTimeout(t), m && clearTimeout(m);
+        t && clearTimeout(t), n && clearTimeout(n);
       };
-    }, [a, n]), R(a), H(a, o), !n) return null;
-    const M = {
-      width: l && !s ? w(l) : void 0,
-      height: c && !s ? w(c) : void 0
-    }, x = r !== void 0 ? { zIndex: r } : void 0, v = r === void 0 ? "z-dialog" : void 0, B = /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    }, [i, l]), B(i), C(i, o), !l) return null;
+    const A = {
+      width: r && !s ? g(r) : void 0,
+      height: d && !s ? g(d) : void 0
+    }, L = /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
       /* @__PURE__ */ e.jsx(
         "div",
         {
-          className: d(
-            "fixed inset-0 bg-black/25 transition-opacity duration-600 ease-out",
-            v,
-            f ? "opacity-100" : "opacity-0"
+          className: m(
+            "fixed inset-0 z-dialog bg-black/25 transition-opacity duration-600 ease-out",
+            u ? "opacity-100" : "opacity-0"
           ),
-          style: x,
           onClick: o,
           "aria-hidden": "true"
         }
       ),
-      /* @__PURE__ */ e.jsx(
+      /* @__PURE__ */ e.jsx("div", { className: m(H({ verticalAlign: p })), children: /* @__PURE__ */ e.jsxs(
         "div",
         {
-          className: d(P({ verticalAlign: b }), v),
-          style: x,
-          children: /* @__PURE__ */ e.jsxs(
-            "div",
-            {
-              ref: C,
-              className: d(
-                "yuno-dialog",
-                W({
-                  size: s ? "fullscreen" : "default"
-                }),
-                "transition-all duration-600 ease-out",
-                f ? "opacity-100 scale-100 translate-y-0" : "opacity-0 scale-98 -translate-y-2",
-                l && !s && "max-w-none",
-                y
-              ),
-              style: M,
-              role: "dialog",
-              "aria-modal": "true",
-              ...A,
-              children: [
-                D && /* @__PURE__ */ e.jsx(
-                  I,
-                  {
-                    title: h,
-                    onClose: o,
-                    onBack: z,
-                    otherActions: k,
-                    className: S
-                  }
-                ),
-                /* @__PURE__ */ e.jsx(K, { className: T, children: E }),
-                N && /* @__PURE__ */ e.jsx(O, { buttons: j, className: V })
-              ]
-            }
-          )
+          ref: V,
+          className: m(
+            "yuno-dialog",
+            K({
+              size: s ? "fullscreen" : "default"
+            }),
+            "transition-all duration-600 ease-out",
+            u ? "opacity-100 scale-100 translate-y-0" : "opacity-0 scale-98 -translate-y-2",
+            r && !s && "max-w-none",
+            w
+          ),
+          style: A,
+          role: "dialog",
+          "aria-modal": "true",
+          ...T,
+          children: [
+            z && /* @__PURE__ */ e.jsx(
+              F,
+              {
+                title: v,
+                onClose: o,
+                onBack: b,
+                otherActions: j,
+                className: k
+              }
+            ),
+            /* @__PURE__ */ e.jsx(I, { className: D, children: N }),
+            h && /* @__PURE__ */ e.jsx(R, { buttons: y, className: E })
+          ]
         }
-      )
+      ) })
     ] });
-    return F(B, document.body);
+    return M(L, document.body);
   }
 );
-q.displayName = "Dialog";
+O.displayName = "Dialog";
 export {
-  q as Dialog
+  O as Dialog
 };

package/dist/components/organisms/tutorial/tutorial.js

@@ -3,28 +3,28 @@ import { forwardRef as C } from "react";
 import { cn as j } from "../../../lib/utils.js";
 import { Button as c } from "../../atoms/button/button.js";
 import { Icon as y } from "../../atoms/icon/icon.js";
-import { Typography as x } from "../../atoms/typography/typography.js";
+import { Typography as o } from "../../atoms/typography/typography.js";
 import { Link as b } from "../../atoms/link/link.js";
 import { Badge as w } from "../../atoms/badge/badge.js";
 const B = C(
   ({
-    continuous: o,
+    continuous: x,
     step: a,
     closeProps: l,
-    primaryProps: n,
-    tooltipProps: g,
-    withTag: v = !1,
+    primaryProps: r,
+    tooltipProps: v,
+    withTag: g = !1,
     tagLabel: f,
-    buttonGroup: r = [],
+    buttonGroup: n = [],
     width: i,
     skipProps: t,
     index: h,
     size: d
   }, N) => {
-    const u = (s) => {
+    const p = (s) => {
       l?.onClick?.(s);
-    }, k = (s, m) => {
-      m(), u(s);
+    }, u = (s, m) => {
+      m(), p(s);
     };
     return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
       /* @__PURE__ */ e.jsx("style", { children: `
@@ -35,17 +35,24 @@ const B = C(
       /* @__PURE__ */ e.jsxs(
         "div",
         {
-          ...g,
+          ...v,
           ref: N,
           className: j(
-            "bg-background rounded border shadow-lg p-4",
+            "bg-popover rounded-md border border-border shadow-md p-4",
             "max-w-[368px]",
             i && `max-w-[${i}px]`
           ),
           style: i ? { maxWidth: `${i}px` } : void 0,
           children: [
-            /* @__PURE__ */ e.jsxs("div", { className: "flex items-start justify-between gap-4 mb-3", children: [
-              /* @__PURE__ */ e.jsx("div", { className: "flex-1", children: a.title && /* @__PURE__ */ e.jsx(x, { variant: "h4", className: "text-base font-semibold", children: a.title }) }),
+            /* @__PURE__ */ e.jsxs("div", { className: "flex items-start justify-between gap-4 mb-2", children: [
+              /* @__PURE__ */ e.jsx("div", { className: "flex-1", children: a.title && /* @__PURE__ */ e.jsx(
+                o,
+                {
+                  variant: "h4",
+                  className: "text-base font-medium leading-none",
+                  children: a.title
+                }
+              ) }),
               !a.hideCloseButton && /* @__PURE__ */ e.jsx(
                 c,
                 {
@@ -57,7 +64,14 @@ const B = C(
                 }
               )
             ] }),
-            /* @__PURE__ */ e.jsx("div", { className: "mb-5", children: /* @__PURE__ */ e.jsx(x, { variant: "sm", className: "text-muted-foreground font-normal", children: a.content }) }),
+            /* @__PURE__ */ e.jsx("div", { className: "mb-6", children: /* @__PURE__ */ e.jsx(
+              o,
+              {
+                variant: "sm",
+                className: "text-muted-foreground font-normal",
+                children: a.content
+              }
+            ) }),
             /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-between gap-4", children: [
               t && h !== (d ?? 0) - 1 && /* @__PURE__ */ e.jsx("div", { className: "flex-1", children: /* @__PURE__ */ e.jsx(
                 b,
@@ -69,31 +83,38 @@ const B = C(
                   children: t.title
                 }
               ) }),
-              (d ?? 0) > 1 && /* @__PURE__ */ e.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ e.jsxs(x, { variant: "xs", className: "text-muted-foreground mr-6", children: [
+              (d ?? 0) > 1 && /* @__PURE__ */ e.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ e.jsxs(o, { variant: "xs", className: "text-muted-foreground mr-6", children: [
                 "Step ",
                 (h ?? 0) + 1,
                 " of ",
                 d
               ] }) }),
-              o && n && /* @__PURE__ */ e.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ e.jsx(c, { size: "default", ...n, children: n.title }) })
+              x && r && /* @__PURE__ */ e.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ e.jsx(c, { size: "default", ...r, children: r.title }) })
             ] }),
-            !o && r.length > 0 && /* @__PURE__ */ e.jsxs(
+            !x && n.length > 0 && /* @__PURE__ */ e.jsxs(
               "div",
               {
                 className: j(
                   "flex items-center mt-6 gap-3",
-                  r.length > 1 ? "justify-between" : "justify-end"
+                  n.length > 1 ? "justify-between" : "justify-end"
                 ),
                 children: [
-                  v && f && /* @__PURE__ */ e.jsx(w, { variant: "default", className: "bg-green-100 text-green-800", children: f }),
-                  r.map((s, m) => /* @__PURE__ */ e.jsx(
+                  g && f && /* @__PURE__ */ e.jsx(
+                    w,
+                    {
+                      variant: "default",
+                      className: "bg-green-100 text-green-800",
+                      children: f
+                    }
+                  ),
+                  n.map((s, m) => /* @__PURE__ */ e.jsx(
                     c,
                     {
                       variant: s.variant || "default",
                       size: s.size || "default",
                       loading: s.loading,
                       disabled: s.disabled,
-                      onClick: (p) => k(p, s.event),
+                      onClick: (k) => u(k, s.event),
                       children: s.label
                     },
                     m