@yuno-payments/dashboard-design-system 0.0.167 → 0.0.170

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

@@ -1,38 +1,23 @@
 import { cn as o } from "../../../../lib/utils.js";
-import { getPinnedStyles as p } from "./data-table-utils.js";
-import { PINNED_SHADOW_CLASS as l } from "./data-table-constants.js";
-function f(t, r, d) {
-  const s = t.getIsPinned(), e = t.getSize(), i = t.id === "_spacer", a = t.columnDef.enableResizing === !1 && !i;
+import { getPinnedStyles as s } from "./data-table-utils.js";
+import { PINNED_SHADOW_CLASS as S } from "./data-table-constants.js";
+function p(t, n, r) {
+  const i = t.getIsPinned();
   return {
     style: {
-      // Spacer column should not have a fixed width, let it absorb remaining space
-      ...i ? {
-        width: "auto",
-        minWidth: 0
-      } : a ? {
-        width: `${e}px`,
-        minWidth: `${e}px`,
-        maxWidth: `${e}px`
-      } : {
-        width: `${e}px`
-      },
-      ...p(
-        s,
-        (n) => t.getStart(n),
-        (n) => t.getAfter(n),
-        d
+      width: `${t.getSize()}px`,
+      // Don't set minWidth/maxWidth in CSS as TanStack Table handles this internally
+      // Setting these can interfere with the resize functionality
+      ...s(
+        i,
+        (e) => t.getStart(e),
+        (e) => t.getAfter(e),
+        r
       )
     },
-    className: o(
-      r,
-      s && l,
-      // Add a class to identify fixed-size columns
-      a && "data-table-fixed-column",
-      // Hide spacer column visually
-      i && "data-table-spacer"
-    )
+    className: o(n, i && S)
   };
 }
 export {
-  f as getCellStyles
+  p as getCellStyles
 };

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

@@ -7,88 +7,22 @@ declare const dialogVariants: (props?: ({
 export type VerticalAlign = "start" | "center" | "end";
 export type VariantButtonType = "primary" | "secondary" | "tertiary" | "text" | "outlined" | "contained";
 export type SizeButtonType = "small" | "large" | "medium";
-/**
- * Props for the Dialog component
- */
 export interface DialogProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof dialogVariants> {
-    /**
-     * Dialog title (text or custom element)
-     */
     title?: React.ReactElement | string;
-    /**
-     * Whether the dialog is open
-     */
     open: boolean;
-    /**
-     * Callback fired when the dialog should close
-     */
     closeIcon: () => void;
-    /**
-     * Array of button configurations to display in the footer
-     */
     buttons?: ButtonProps[];
-    /**
-     * Custom width for the dialog container
-     */
     widthContainer?: number | string;
-    /**
-     * Custom height for the dialog container
-     */
     heightContainer?: number | string;
-    /**
-     * Callback fired when the back button is clicked
-     */
     backButtonAction?: () => void;
-    /**
-     * Whether to show the footer with action buttons
-     * @default true
-     */
     showActions?: boolean;
-    /**
-     * Additional action elements to display in the header
-     */
     otherActions?: React.ReactNode;
-    /**
-     * Whether to show the header
-     * @default true
-     */
     withHeader?: boolean;
-    /**
-     * Content to display in the dialog body
-     */
     children: React.ReactNode;
-    /**
-     * Additional CSS classes for the header
-     */
     headerClassName?: string;
-    /**
-     * Additional CSS classes for the content area
-     */
     contentClassName?: string;
-    /**
-     * Additional CSS classes for the footer
-     */
     footerClassName?: string;
 }
-/**
- * Modal dialog component with header, content, and footer sections.
- * Features backdrop click to close, ESC key support, and body scroll locking.
- * Responsive: fullscreen on mobile, centered modal on desktop.
- *
- * @example
- * ```tsx
- * <Dialog
- *   open={isOpen}
- *   closeIcon={() => setIsOpen(false)}
- *   title="Confirm Action"
- *   buttons={[
- *     { children: 'Cancel', variant: 'outline', onClick: handleCancel },
- *     { children: 'Confirm', onClick: handleConfirm }
- *   ]}
- * >
- *   <p>Are you sure you want to proceed?</p>
- * </Dialog>
- * ```
- */
 declare const Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLDivElement>>;
 export { Dialog };
+export type { DialogProps };

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

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

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

@@ -1,5 +1,3 @@
 export * from './data-table';
 export { Dialog } from './dialog';
 export { Sheet } from './sheet';
-export { Tutorial } from './tutorial';
-export type { TutorialProps, TutorialButtonProps } from './tutorial';

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

@@ -5,90 +5,21 @@ declare const sheetVariants: (props?: ({
     side?: "left" | "right" | "bottom" | "top" | null | undefined;
     isOpen?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-/**
- * Props for the Sheet component
- */
 export interface SheetProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof sheetVariants> {
-    /**
-     * Sheet title (text or custom element)
-     */
     title?: React.ReactElement | string;
-    /**
-     * Optional description displayed below the title
-     */
     description?: React.ReactElement | string;
-    /**
-     * Whether the sheet is open
-     */
     open: boolean;
-    /**
-     * Callback fired when the sheet should close
-     */
     onClose: () => void;
-    /**
-     * Array of button configurations to display in the footer
-     */
     buttons?: ButtonProps[];
-    /**
-     * Custom width for the sheet (applies to left/right sides)
-     */
     width?: number | string;
-    /**
-     * Custom height for the sheet (applies to top/bottom sides)
-     */
     height?: number | string;
-    /**
-     * Whether to show the header section
-     * @default true
-     */
     showHeader?: boolean;
-    /**
-     * Whether to show the footer section
-     * @default true
-     */
     showFooter?: boolean;
-    /**
-     * Content to display in the sheet body
-     */
     children: React.ReactNode;
-    /**
-     * Additional CSS classes for the header
-     */
     headerClassName?: string;
-    /**
-     * Additional CSS classes for the content area
-     */
     contentClassName?: string;
-    /**
-     * Additional CSS classes for the footer
-     */
     footerClassName?: string;
-    /**
-     * Whether to disable buttons during loading state
-     * @default false
-     */
     loading?: boolean;
 }
-/**
- * Slide-out panel component that appears from the sides (or top/bottom) of the screen.
- * Features smooth animations, backdrop overlay, ESC key support, and body scroll locking.
- *
- * @example
- * ```tsx
- * <Sheet
- *   open={isOpen}
- *   onClose={() => setIsOpen(false)}
- *   side="right"
- *   title="Edit Profile"
- *   description="Update your personal information"
- *   buttons={[
- *     { children: 'Cancel', variant: 'outline', onClick: handleCancel },
- *     { children: 'Save', onClick: handleSave }
- *   ]}
- * >
- *   <form>...</form>
- * </Sheet>
- * ```
- */
 declare const Sheet: React.ForwardRefExoticComponent<SheetProps & React.RefAttributes<HTMLDivElement>>;
 export { Sheet };

package/dist/components/organisms/sheet/sheet.js

@@ -1,15 +1,14 @@
 import { j as e } from "../../../_virtual/jsx-runtime.js";
 import * as i from "react";
-import { createPortal as H } from "react-dom";
 import { cva as g } from "../../../node_modules/class-variance-authority/dist/index.js";
 import { normalizeDimension as p, cn as r } from "../../../lib/utils.js";
-import { useBodyScrollLock as M } from "../../../hooks/use-body-scroll-lock.js";
-import { useEscapeKey as R } from "../../../hooks/use-escape-key.js";
-import { Icon as W } from "../../atoms/icon/icon.js";
-import { Button as x } from "../../atoms/button/button.js";
-import { Typography as b } from "../../atoms/typography/typography.js";
-const D = g(
-  "fixed z-sheet bg-background shadow-lg transition-transform duration-300 ease-in-out",
+import { useBodyScrollLock as H } from "../../../hooks/use-body-scroll-lock.js";
+import { useEscapeKey as M } from "../../../hooks/use-escape-key.js";
+import { Typography as x } from "../../atoms/typography/typography.js";
+import { Button as b } from "../../atoms/button/button.js";
+import { Icon as R } from "../../atoms/icon/icon.js";
+const W = g(
+  "fixed z-50 bg-background shadow-lg transition-transform duration-300 ease-in-out",
   {
     variants: {
       side: {
@@ -38,8 +37,8 @@ const D = g(
       isOpen: !1
     }
   }
-), F = g(
-  "fixed inset-0 z-sheet bg-black/50 transition-opacity duration-300",
+), C = g(
+  "fixed inset-0 z-50 bg-black/50 transition-opacity duration-300",
   {
     variants: {
       isOpen: {
@@ -51,10 +50,10 @@ const D = g(
       isOpen: !1
     }
   }
-), K = i.forwardRef(
+), D = i.forwardRef(
   ({
     className: y,
-    side: s = "right",
+    side: t = "right",
     title: l,
     description: o,
     open: a,
@@ -72,25 +71,26 @@ const D = g(
     ...V
   }, E) => {
     const [I, f] = i.useState(!1), [u, h] = i.useState(!1);
-    if (M(a), R(a, n), i.useEffect(() => {
+    if (H(a), M(a, n), i.useEffect(() => {
       if (a) {
         f(!0);
-        const t = setTimeout(() => h(!0), 10);
-        return () => clearTimeout(t);
+        const s = setTimeout(() => h(!0), 10);
+        return () => clearTimeout(s);
       } else {
         h(!1);
-        const t = setTimeout(() => f(!1), 300);
-        return () => clearTimeout(t);
+        const s = setTimeout(() => f(!1), 300);
+        return () => clearTimeout(s);
       }
     }, [a]), !I) return null;
     const d = p(j), m = p(v), A = {
-      ...d && (s === "left" || s === "right") ? { width: d, maxWidth: d } : {},
-      ...m && (s === "top" || s === "bottom") ? { height: m, maxHeight: m } : {}
-    }, B = /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+      ...d && (t === "left" || t === "right") ? { width: d, maxWidth: d } : {},
+      ...m && (t === "top" || t === "bottom") ? { height: m, maxHeight: m } : {}
+    };
+    return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
       /* @__PURE__ */ e.jsx(
         "div",
         {
-          className: F({ isOpen: u }),
+          className: C({ isOpen: u }),
           onClick: n,
           "aria-hidden": "true"
         }
@@ -99,7 +99,7 @@ const D = g(
         "div",
         {
           ref: E,
-          className: r(D({ side: s, isOpen: u }), y),
+          className: r(W({ side: t, isOpen: u }), y),
           style: A,
           role: "dialog",
           "aria-modal": "true",
@@ -117,7 +117,7 @@ const D = g(
                 children: [
                   /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-1", children: [
                     l && /* @__PURE__ */ e.jsx(
-                      b,
+                      x,
                       {
                         id: "sheet-title",
                         as: "h2",
@@ -127,7 +127,7 @@ const D = g(
                       }
                     ),
                     o && /* @__PURE__ */ e.jsx(
-                      b,
+                      x,
                       {
                         id: "sheet-description",
                         variant: "muted",
@@ -137,14 +137,14 @@ const D = g(
                     )
                   ] }),
                   /* @__PURE__ */ e.jsx(
-                    x,
+                    b,
                     {
                       variant: "ghost",
                       size: "icon",
                       onClick: n,
                       "aria-label": "Close",
                       className: "h-6 w-6",
-                      children: /* @__PURE__ */ e.jsx(W, { name: "X", size: "md" })
+                      children: /* @__PURE__ */ e.jsx(R, { name: "X", size: "md" })
                     }
                   )
                 ]
@@ -158,13 +158,13 @@ const D = g(
                   "flex items-center justify-end gap-3 border-t border-border p-6",
                   z
                 ),
-                children: c.map((t, C) => /* @__PURE__ */ e.jsx(
-                  x,
+                children: c.map((s, B) => /* @__PURE__ */ e.jsx(
+                  b,
                   {
-                    disabled: T || t.disabled,
-                    ...t
+                    disabled: T || s.disabled,
+                    ...s
                   },
-                  C
+                  B
                 ))
               }
             )
@@ -172,10 +172,9 @@ const D = g(
         }
       )
     ] });
-    return H(B, document.body);
   }
 );
-K.displayName = "Sheet";
+D.displayName = "Sheet";
 export {
-  K as Sheet
+  D as Sheet
 };