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

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

@@ -1,23 +1,38 @@
 import { cn as o } from "../../../../lib/utils.js";
-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();
+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;
   return {
     style: {
-      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
+      // 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
       )
     },
-    className: o(n, i && S)
+    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"
+    )
   };
 }
 export {
-  p as getCellStyles
+  f as getCellStyles
 };

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

@@ -7,22 +7,88 @@ 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,14 +1,15 @@
 import { j as e } from "../../../_virtual/jsx-runtime.js";
-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",
+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",
   {
     variants: {
       verticalAlign: {
@@ -21,7 +22,7 @@ const A = m(
       verticalAlign: "center"
     }
   }
-), B = m(
+), I = x(
   "relative bg-background rounded-lg shadow-lg border border-border max-h-[90vh] overflow-hidden flex flex-col",
   {
     variants: {
@@ -37,80 +38,96 @@ const A = m(
       size: "default"
     }
   }
-), C = l.forwardRef(
+), K = t.forwardRef(
   ({
-    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);
+    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);
       };
-      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: [
+      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: [
       /* @__PURE__ */ e.jsx(
         "div",
         {
-          className: "fixed inset-0 z-50 bg-black/25",
-          onClick: a,
+          className: n(
+            "fixed inset-0 z-dialog bg-black/25 transition-opacity duration-600 ease-out",
+            c ? "opacity-100" : "opacity-0"
+          ),
+          onClick: o,
           "aria-hidden": "true"
         }
       ),
-      /* @__PURE__ */ e.jsx("div", { className: n(A({ verticalAlign: c })), children: /* @__PURE__ */ e.jsxs(
+      /* @__PURE__ */ e.jsx("div", { className: n(H({ verticalAlign: w })), children: /* @__PURE__ */ e.jsxs(
         "div",
         {
-          ref: k,
+          ref: V,
           className: n(
-            B({
-              size: i ? "fullscreen" : "default"
+            I({
+              size: s ? "fullscreen" : "default"
             }),
-            f
+            "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
           ),
-          style: D,
+          style: A,
           role: "dialog",
           "aria-modal": "true",
-          ...N,
+          ...E,
           children: [
-            p && /* @__PURE__ */ e.jsx(
-              L,
+            j && /* @__PURE__ */ e.jsx(
+              C,
               {
-                title: u,
-                onClose: a,
-                onBack: g,
-                otherActions: v,
-                className: b
+                title: p,
+                onClose: o,
+                onBack: b,
+                otherActions: h,
+                className: N
               }
             ),
-            /* @__PURE__ */ e.jsx(M, { className: j, children: h }),
-            w && /* @__PURE__ */ e.jsx(S, { buttons: x, className: z })
+            /* @__PURE__ */ e.jsx(F, { className: k, children: z }),
+            y && /* @__PURE__ */ e.jsx(R, { buttons: v, className: D })
           ]
         }
       ) })
     ] });
+    return M(L, document.body);
   }
 );
-C.displayName = "Dialog";
+K.displayName = "Dialog";
 export {
-  C as Dialog
+  K as Dialog
 };

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

@@ -1,3 +1,5 @@
 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,21 +5,90 @@ 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,14 +1,15 @@
 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 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",
+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",
   {
     variants: {
       side: {
@@ -37,8 +38,8 @@ const W = g(
       isOpen: !1
     }
   }
-), C = g(
-  "fixed inset-0 z-50 bg-black/50 transition-opacity duration-300",
+), F = g(
+  "fixed inset-0 z-sheet bg-black/50 transition-opacity duration-300",
   {
     variants: {
       isOpen: {
@@ -50,10 +51,10 @@ const W = g(
       isOpen: !1
     }
   }
-), D = i.forwardRef(
+), K = i.forwardRef(
   ({
     className: y,
-    side: t = "right",
+    side: s = "right",
     title: l,
     description: o,
     open: a,
@@ -71,26 +72,25 @@ const W = g(
     ...V
   }, E) => {
     const [I, f] = i.useState(!1), [u, h] = i.useState(!1);
-    if (H(a), M(a, n), i.useEffect(() => {
+    if (M(a), R(a, n), i.useEffect(() => {
       if (a) {
         f(!0);
-        const s = setTimeout(() => h(!0), 10);
-        return () => clearTimeout(s);
+        const t = setTimeout(() => h(!0), 10);
+        return () => clearTimeout(t);
       } else {
         h(!1);
-        const s = setTimeout(() => f(!1), 300);
-        return () => clearTimeout(s);
+        const t = setTimeout(() => f(!1), 300);
+        return () => clearTimeout(t);
       }
     }, [a]), !I) return null;
     const d = p(j), m = p(v), A = {
-      ...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: [
+      ...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: [
       /* @__PURE__ */ e.jsx(
         "div",
         {
-          className: C({ isOpen: u }),
+          className: F({ isOpen: u }),
           onClick: n,
           "aria-hidden": "true"
         }
@@ -99,7 +99,7 @@ const W = g(
         "div",
         {
           ref: E,
-          className: r(W({ side: t, isOpen: u }), y),
+          className: r(D({ side: s, isOpen: u }), y),
           style: A,
           role: "dialog",
           "aria-modal": "true",
@@ -117,7 +117,7 @@ const W = g(
                 children: [
                   /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-1", children: [
                     l && /* @__PURE__ */ e.jsx(
-                      x,
+                      b,
                       {
                         id: "sheet-title",
                         as: "h2",
@@ -127,7 +127,7 @@ const W = g(
                       }
                     ),
                     o && /* @__PURE__ */ e.jsx(
-                      x,
+                      b,
                       {
                         id: "sheet-description",
                         variant: "muted",
@@ -137,14 +137,14 @@ const W = g(
                     )
                   ] }),
                   /* @__PURE__ */ e.jsx(
-                    b,
+                    x,
                     {
                       variant: "ghost",
                       size: "icon",
                       onClick: n,
                       "aria-label": "Close",
                       className: "h-6 w-6",
-                      children: /* @__PURE__ */ e.jsx(R, { name: "X", size: "md" })
+                      children: /* @__PURE__ */ e.jsx(W, { name: "X", size: "md" })
                     }
                   )
                 ]
@@ -158,13 +158,13 @@ const W = g(
                   "flex items-center justify-end gap-3 border-t border-border p-6",
                   z
                 ),
-                children: c.map((s, B) => /* @__PURE__ */ e.jsx(
-                  b,
+                children: c.map((t, C) => /* @__PURE__ */ e.jsx(
+                  x,
                   {
-                    disabled: T || s.disabled,
-                    ...s
+                    disabled: T || t.disabled,
+                    ...t
                   },
-                  B
+                  C
                 ))
               }
             )
@@ -172,9 +172,10 @@ const W = g(
         }
       )
     ] });
+    return H(B, document.body);
   }
 );
-D.displayName = "Sheet";
+K.displayName = "Sheet";
 export {
-  D as Sheet
+  K as Sheet
 };

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

@@ -0,0 +1,2 @@
+export { Tutorial } from './tutorial';
+export type { TutorialProps, TutorialButtonProps } from './tutorial.types';

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

@@ -0,0 +1,16 @@
+import { TutorialProps } from './tutorial.types';
+/**
+ * Tutorial component that renders a customizable tooltip for guided tours.
+ * Designed to be used with react-joyride as a custom tooltip component.
+ *
+ * @example
+ * ```tsx
+ * <ReactJoyride
+ *   tooltipComponent={(props) => (
+ *     <Tutorial {...props} buttonGroup={buttons} width={400} />
+ *   )}
+ * />
+ * ```
+ */
+declare const Tutorial: import('react').ForwardRefExoticComponent<TutorialProps & import('react').RefAttributes<HTMLDivElement>>;
+export { Tutorial };