@yuno-payments/dashboard-design-system 2.9.4 → 3.0.0

package/dist/components/molecules/data-table-cells/data-table-percentage-cell.d.ts

@@ -1,31 +0,0 @@
-import { ReactNode } from 'react';
-export interface DataTablePercentageCellProps {
-    /** The decimal value (0-1 range, e.g. 0.85 for 85%) */
-    value: number | null | undefined;
-    /** Number of decimal places @default 2 */
-    decimals?: number;
-    /** Whether to show a progress bar @default false */
-    showProgressBar?: boolean;
-    /** Content to render when value is empty @default "-" */
-    emptyState?: ReactNode;
-    /** Additional CSS classes */
-    className?: string;
-}
-/**
- * A table cell for displaying percentage values with optional progress bar
- * visualization. Accepts values in 0-1 decimal range.
- *
- * @example
- * ```tsx
- * // Simple percentage
- * <DataTablePercentageCell value={0.8534} />
- *
- * // With progress bar
- * <DataTablePercentageCell value={0.75} showProgressBar />
- *
- * // No decimals
- * <DataTablePercentageCell value={0.856} decimals={0} />
- * ```
- */
-declare const DataTablePercentageCell: import('react').ForwardRefExoticComponent<DataTablePercentageCellProps & import('react').RefAttributes<HTMLDivElement>>;
-export { DataTablePercentageCell };

package/dist/components/molecules/data-table-cells/data-table-percentage-cell.js

@@ -1,35 +0,0 @@
-import { j as e } from "../../../_virtual/jsx-runtime.js";
-import { forwardRef as o } from "react";
-import { cn as c } from "../../../lib/utils.js";
-const d = o(
-  ({
-    value: t,
-    decimals: r = 2,
-    showProgressBar: n = !1,
-    emptyState: i = "-",
-    className: s
-  }, l) => {
-    if (t == null) return /* @__PURE__ */ e.jsx(e.Fragment, { children: i });
-    const a = t * 100, m = new Intl.NumberFormat("en-US", {
-      minimumFractionDigits: 0,
-      maximumFractionDigits: r
-    }).format(a);
-    return /* @__PURE__ */ e.jsxs("div", { ref: l, className: c("flex items-center gap-3", s), children: [
-      n && /* @__PURE__ */ e.jsx("div", { className: "h-1.5 flex-1 min-w-[50px] rounded-full bg-muted overflow-hidden", children: /* @__PURE__ */ e.jsx(
-        "div",
-        {
-          className: "h-full rounded-full bg-primary transition-all",
-          style: { width: `${Math.min(a, 100)}%` }
-        }
-      ) }),
-      /* @__PURE__ */ e.jsxs("span", { className: "text-sm whitespace-nowrap", children: [
-        m,
-        "%"
-      ] })
-    ] });
-  }
-);
-d.displayName = "DataTablePercentageCell";
-export {
-  d as DataTablePercentageCell
-};

package/dist/components/molecules/data-table-cells/data-table-status-cell.d.ts

@@ -1,47 +0,0 @@
-import { ReactNode } from 'react';
-import { IconName } from '../../atoms/icon';
-/**
- * Configuration entry for mapping a status key to a Badge visual.
- */
-export interface StatusMapEntry {
-    /** Display label */
-    label: string;
-    /** Badge variant */
-    variant: "success" | "error" | "warning" | "info" | "alert" | "outline" | "secondary";
-    /** Phosphor icon name @default "Info" */
-    icon?: IconName;
-}
-/**
- * Props for the DataTableStatusCell component
- */
-export interface DataTableStatusCellProps {
-    /** The raw status key (e.g., "APPROVED", "DECLINED") */
-    status: string;
-    /** Map of status keys to display configuration */
-    statusMap?: Record<string, StatusMapEntry>;
-    /**
-     * Fallback label formatter when status is not in the map.
-     * @default Capitalizes first letter, replaces underscores with spaces
-     */
-    formatLabel?: (status: string) => string;
-    /** Content to render when status is empty @default "-" */
-    emptyState?: ReactNode;
-    /** Additional CSS classes */
-    className?: string;
-}
-/**
- * A table cell that displays a status as a colored Badge with an icon.
- * Accepts a status map for consistent status-to-visual mapping across the application.
- *
- * @example
- * ```tsx
- * const STATUS_MAP = {
- *   APPROVED: { label: "Approved", variant: "success", icon: "CheckCircle" },
- *   DECLINED: { label: "Declined", variant: "error", icon: "XCircle" },
- * };
- *
- * <DataTableStatusCell status="APPROVED" statusMap={STATUS_MAP} />
- * ```
- */
-declare const DataTableStatusCell: import('react').ForwardRefExoticComponent<DataTableStatusCellProps & import('react').RefAttributes<HTMLDivElement>>;
-export { DataTableStatusCell };

package/dist/components/molecules/data-table-cells/data-table-status-cell.js

@@ -1,32 +0,0 @@
-import { j as e } from "../../../_virtual/jsx-runtime.js";
-import { forwardRef as d } from "react";
-import { cn as i } from "../../../lib/utils.js";
-import { Badge as l } from "../../atoms/badge/badge.js";
-const p = (r) => {
-  if (!r) return r;
-  const a = r.replace(/[_.]/g, " ").toLowerCase();
-  return a.charAt(0).toUpperCase() + a.slice(1);
-}, f = d(
-  ({
-    status: r,
-    statusMap: a,
-    formatLabel: c = p,
-    emptyState: m = "-",
-    className: o
-  }, t) => {
-    if (!r) return /* @__PURE__ */ e.jsx(e.Fragment, { children: m });
-    const n = a?.[r] ?? a?.[r.toUpperCase()];
-    return n ? /* @__PURE__ */ e.jsx("div", { ref: t, className: i(o), children: /* @__PURE__ */ e.jsx(
-      l,
-      {
-        startIcon: n.icon ?? "Info",
-        variant: n.variant,
-        children: n.label
-      }
-    ) }) : /* @__PURE__ */ e.jsx("div", { ref: t, className: i(o), children: /* @__PURE__ */ e.jsx(l, { startIcon: "Info", variant: "info", children: c(r) }) });
-  }
-);
-f.displayName = "DataTableStatusCell";
-export {
-  f as DataTableStatusCell
-};

package/dist/components/molecules/data-table-cells/data-table-tags-cell.d.ts

@@ -1,19 +0,0 @@
-import { ReactNode } from 'react';
-export interface DataTableTagsCellProps {
-    /** Array of tag labels to display */
-    tags: string[];
-    /** Maximum number of visible tags before showing "+N" @default 2 */
-    maxVisible?: number;
-    /** Badge variant for all tags @default "outline" */
-    variant?: "outline" | "secondary" | "info" | "success" | "error" | "warning" | "alert";
-    /** Content to render when tags is empty @default "-" */
-    emptyState?: ReactNode;
-    /** Additional CSS classes */
-    className?: string;
-}
-/**
- * A table cell for displaying a list of tags as Badges with overflow handling.
- * Shows the first N tags and a "+X" badge with tooltip for the rest.
- */
-declare const DataTableTagsCell: import('react').ForwardRefExoticComponent<DataTableTagsCellProps & import('react').RefAttributes<HTMLDivElement>>;
-export { DataTableTagsCell };

package/dist/components/molecules/data-table-cells/data-table-tags-cell.js

@@ -1,45 +0,0 @@
-import { j as e } from "../../../_virtual/jsx-runtime.js";
-import { forwardRef as p } from "react";
-import { cn as x } from "../../../lib/utils.js";
-import { TooltipProvider as d, Tooltip as h, TooltipTrigger as j, TooltipContent as f } from "../../../vendor/shadcn/tooltip.js";
-import { Badge as o } from "../../atoms/badge/badge.js";
-const T = p(
-  ({
-    tags: s,
-    maxVisible: i = 2,
-    variant: t = "outline",
-    emptyState: a = "-",
-    className: n
-  }, c) => {
-    if (!s || s.length === 0) return /* @__PURE__ */ e.jsx(e.Fragment, { children: a });
-    const m = s.slice(0, i), l = s.slice(i);
-    return /* @__PURE__ */ e.jsxs(
-      "div",
-      {
-        ref: c,
-        className: x("flex items-center gap-1 flex-wrap", n),
-        children: [
-          m.map((r) => /* @__PURE__ */ e.jsx(o, { variant: t, className: "text-xs", children: r }, r)),
-          l.length > 0 && /* @__PURE__ */ e.jsx(d, { delayDuration: 0, children: /* @__PURE__ */ e.jsxs(h, { children: [
-            /* @__PURE__ */ e.jsx(j, { children: /* @__PURE__ */ e.jsxs(
-              o,
-              {
-                variant: "outline",
-                className: "text-xs cursor-pointer hover:border-primary hover:text-primary",
-                children: [
-                  "+",
-                  l.length
-                ]
-              }
-            ) }),
-            /* @__PURE__ */ e.jsx(f, { className: "p-2", children: /* @__PURE__ */ e.jsx("div", { className: "space-y-1", children: l.map((r) => /* @__PURE__ */ e.jsx("p", { className: "text-sm", children: r }, r)) }) })
-          ] }) })
-        ]
-      }
-    );
-  }
-);
-T.displayName = "DataTableTagsCell";
-export {
-  T as DataTableTagsCell
-};

package/dist/components/molecules/data-table-cells/data-table-text-cell.d.ts

@@ -1,52 +0,0 @@
-import { ReactNode } from 'react';
-/**
- * Props for the DataTableTextCell component
- */
-export interface DataTableTextCellProps {
-    /**
-     * The text value to display
-     */
-    value: string | null | undefined;
-    /**
-     * Optional transform function applied to the value before display
-     * @example (value) => value.toUpperCase()
-     */
-    formatFn?: (value: string) => string;
-    /**
-     * Custom tooltip text, or false to disable the tooltip.
-     * Defaults to the formatted value.
-     */
-    tooltip?: string | false;
-    /**
-     * Content to render when value is falsy.
-     * @default "-"
-     */
-    emptyState?: ReactNode;
-    /**
-     * Additional CSS classes
-     */
-    className?: string;
-}
-/**
- * Base table cell component for displaying truncated text with a tooltip.
- *
- * This is the foundational cell component — other DataTable cells
- * (DateCell, CopyCell, etc.) compose this internally.
- *
- * @example
- * ```tsx
- * // Simple text
- * <DataTableTextCell value="Some long text that will be truncated" />
- *
- * // With transform function
- * <DataTableTextCell value="SCREAMING_SNAKE" formatFn={cleanText} />
- *
- * // With custom empty state
- * <DataTableTextCell value={null} emptyState="-" />
- *
- * // Without tooltip
- * <DataTableTextCell value="Short" tooltip={false} />
- * ```
- */
-declare const DataTableTextCell: import('react').ForwardRefExoticComponent<DataTableTextCellProps & import('react').RefAttributes<HTMLDivElement>>;
-export { DataTableTextCell };

package/dist/components/molecules/data-table-cells/data-table-text-cell.js

@@ -1,18 +0,0 @@
-import { j as t } from "../../../_virtual/jsx-runtime.js";
-import { forwardRef as c } from "react";
-import { cn as x } from "../../../lib/utils.js";
-import { TooltipProvider as d, Tooltip as m, TooltipTrigger as p, TooltipContent as j } from "../../../vendor/shadcn/tooltip.js";
-const T = c(
-  ({ value: r, formatFn: i, tooltip: o, emptyState: a = "-", className: l }, s) => {
-    if (!r) return /* @__PURE__ */ t.jsx(t.Fragment, { children: a });
-    const e = i ? i(r) : r, n = o === !1 ? null : o ?? e;
-    return n ? /* @__PURE__ */ t.jsx(d, { children: /* @__PURE__ */ t.jsxs(m, { children: [
-      /* @__PURE__ */ t.jsx(p, { asChild: !0, children: /* @__PURE__ */ t.jsx("div", { ref: s, className: x("truncate text-sm", l), children: e }) }),
-      /* @__PURE__ */ t.jsx(j, { children: /* @__PURE__ */ t.jsx("p", { children: n }) })
-    ] }) }) : /* @__PURE__ */ t.jsx("div", { ref: s, className: x("truncate text-sm", l), children: e });
-  }
-);
-T.displayName = "DataTableTextCell";
-export {
-  T as DataTableTextCell
-};

package/dist/components/molecules/data-table-cells/index.d.ts

@@ -1,12 +0,0 @@
-export { DataTableBadgeCell, type DataTableBadgeCellProps, } from './data-table-badge-cell';
-export { DataTableCellWrapper, type DataTableCellWrapperProps, } from './data-table-cell-wrapper';
-export { DataTableTextCell, type DataTableTextCellProps, } from './data-table-text-cell';
-export { DataTableCopyCell, type DataTableCopyCellProps, } from './data-table-copy-cell';
-export { DataTableStatusCell, type DataTableStatusCellProps, type StatusMapEntry, } from './data-table-status-cell';
-export { DataTableAmountCell, type DataTableAmountCellProps, } from './data-table-amount-cell';
-export { DataTableDateCell, type DataTableDateCellProps, } from './data-table-date-cell';
-export { DataTableCountryCell, type DataTableCountryCellProps, } from './data-table-country-cell';
-export { DataTablePercentageCell, type DataTablePercentageCellProps, } from './data-table-percentage-cell';
-export { DataTableTagsCell, type DataTableTagsCellProps, } from './data-table-tags-cell';
-export { DataTableIconTextCell, type DataTableIconTextCellProps, type DataTableIconTextCellItem, } from './data-table-icon-text-cell';
-export { DataTableIconCell, type DataTableIconCellProps, type DataTableIconCellItem, } from './data-table-icon-cell';

package/dist/components/molecules/dialog-content/dialog-content.d.ts

@@ -1,21 +0,0 @@
-import * as React from "react";
-/**
- * Props for the DialogContent component
- */
-export interface DialogContentProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Content to display in the dialog body
-     */
-    children: React.ReactNode;
-}
-/**
- * Scrollable content area for dialog body.
- *
- * @example
- * ```tsx
- * <DialogContent>
- *   <p>Your dialog content goes here...</p>
- * </DialogContent>
- * ```
- */
-export declare const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/molecules/dialog-content/dialog-content.js

@@ -1,20 +0,0 @@
-import { j as a } from "../../../_virtual/jsx-runtime.js";
-import * as n from "react";
-import { cn as m } from "../../../lib/utils.js";
-const i = n.forwardRef(({ className: o, children: t, ...r }, e) => /* @__PURE__ */ a.jsx(
-  "div",
-  {
-    ref: e,
-    className: m(
-      "yuno-dialog-content",
-      "flex-1 overflow-auto p-6 text-muted-foreground",
-      o
-    ),
-    ...r,
-    children: t
-  }
-));
-i.displayName = "DialogContent";
-export {
-  i as DialogContent
-};

package/dist/components/molecules/dialog-content/index.d.ts

@@ -1 +0,0 @@
-export * from './dialog-content';

package/dist/components/molecules/dialog-footer/dialog-footer.d.ts

@@ -1,26 +0,0 @@
-import { ButtonProps } from '../../atoms/button';
-import * as React from "react";
-/**
- * Props for the DialogFooter component
- */
-export interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Array of button configurations to display in the footer
-     */
-    buttons?: ButtonProps[];
-}
-/**
- * Dialog footer component for action buttons.
- * Renders nothing if no buttons are provided.
- *
- * @example
- * ```tsx
- * <DialogFooter
- *   buttons={[
- *     { children: 'Cancel', variant: 'outline', onClick: handleCancel },
- *     { children: 'Save', variant: 'default', onClick: handleSave }
- *   ]}
- * />
- * ```
- */
-export declare const DialogFooter: React.ForwardRefExoticComponent<DialogFooterProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/molecules/dialog-footer/dialog-footer.js

@@ -1,23 +0,0 @@
-import { j as e } from "../../../_virtual/jsx-runtime.js";
-import * as s from "react";
-import { cn as f } from "../../../lib/utils.js";
-import { Button as l } from "../../atoms/button/button.js";
-const n = s.forwardRef(
-  ({ className: t, buttons: r = [], ...i }, a) => r.length === 0 ? null : /* @__PURE__ */ e.jsx(
-    "div",
-    {
-      ref: a,
-      className: f(
-        "yuno-dialog-footer",
-        "flex items-center justify-end gap-3 p-6 border-t border-border",
-        t
-      ),
-      ...i,
-      children: r.map((o, m) => /* @__PURE__ */ e.jsx(l, { ...o }, o.key || m))
-    }
-  )
-);
-n.displayName = "DialogFooter";
-export {
-  n as DialogFooter
-};

package/dist/components/molecules/dialog-footer/index.d.ts

@@ -1 +0,0 @@
-export * from './dialog-footer';

package/dist/components/molecules/dialog-header/dialog-header.d.ts

@@ -1,40 +0,0 @@
-import * as React from "react";
-/**
- * Props for the DialogHeader component
- */
-export interface DialogHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
-    /**
-     * Dialog title (text or custom element)
-     */
-    title?: React.ReactElement | string;
-    /**
-     * Callback fired when the close button is clicked
-     */
-    onClose?: () => void;
-    /**
-     * Callback fired when the back button is clicked
-     */
-    onBack?: () => void;
-    /**
-     * Additional action elements to display before the close button
-     */
-    otherActions?: React.ReactNode;
-    /**
-     * Whether to show the close button
-     * @default true
-     */
-    showCloseButton?: boolean;
-}
-/**
- * Dialog header component with title, back button, and close button.
- *
- * @example
- * ```tsx
- * <DialogHeader
- *   title="Edit Profile"
- *   onClose={() => setOpen(false)}
- *   onBack={() => goToPreviousStep()}
- * />
- * ```
- */
-export declare const DialogHeader: React.ForwardRefExoticComponent<DialogHeaderProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/molecules/dialog-header/dialog-header.js

@@ -1,63 +0,0 @@
-import { j as e } from "../../../_virtual/jsx-runtime.js";
-import * as d from "react";
-import { cn as i } from "../../../lib/utils.js";
-import m from "../../../node_modules/lucide-react/dist/esm/icons/arrow-left.js";
-import f from "../../../node_modules/lucide-react/dist/esm/icons/x.js";
-const x = d.forwardRef(
-  ({
-    className: r,
-    title: t,
-    onClose: a,
-    onBack: s,
-    otherActions: o,
-    showCloseButton: l = !0,
-    ...n
-  }, c) => /* @__PURE__ */ e.jsxs(
-    "div",
-    {
-      ref: c,
-      className: i(
-        "yuno-dialog-header",
-        "flex items-center justify-between p-6 border-b border-border",
-        r
-      ),
-      ...n,
-      children: [
-        /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-4 flex-1", children: [
-          s && /* @__PURE__ */ e.jsx(
-            "button",
-            {
-              onClick: s,
-              className: i(
-                "inline-flex items-center justify-center size-6 rounded-sm opacity-70 hover:opacity-100 transition-opacity"
-              ),
-              "aria-label": "Go back",
-              "data-testid": "dialog-back-button",
-              children: /* @__PURE__ */ e.jsx(m, { className: "size-4" })
-            }
-          ),
-          t && /* @__PURE__ */ e.jsx("div", { className: i("text-lg font-semibold leading-none tracking-tight"), children: t })
-        ] }),
-        /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-4", children: [
-          o,
-          l && a && /* @__PURE__ */ e.jsx(
-            "button",
-            {
-              onClick: a,
-              className: i(
-                "inline-flex items-center justify-center size-6 rounded-sm opacity-70 hover:opacity-100 transition-opacity"
-              ),
-              "aria-label": "Close dialog",
-              "data-testid": "dialog-close-button",
-              children: /* @__PURE__ */ e.jsx(f, { className: "size-4" })
-            }
-          )
-        ] })
-      ]
-    }
-  )
-);
-x.displayName = "DialogHeader";
-export {
-  x as DialogHeader
-};

package/dist/components/molecules/dialog-header/index.d.ts

@@ -1 +0,0 @@
-export * from './dialog-header';

package/dist/components/molecules/dots-menu/dots-menu.d.ts

@@ -1,21 +0,0 @@
-import { DotsMenuProps } from './dots-menu.types';
-/**
- * Dropdown menu triggered by a three-dot icon button.
- * Supports action items with icons, permissions, and disabled states.
- *
- * @example
- * ```tsx
- * <DotsMenu
- *   options={{
- *     actions: [
- *       { key: 'edit', name: 'Edit', icon: 'PencilSimple', handleClick: handleEdit },
- *       { key: 'delete', name: 'Delete', icon: 'Trash', allowed: canDelete, handleClick: handleDelete }
- *     ]
- *   }}
- * />
- * ```
- */
-export declare const DotsMenu: {
-    ({ options, icon, className, disabled, marginBottom, }: DotsMenuProps): import("react/jsx-runtime").JSX.Element | null;
-    displayName: string;
-};

package/dist/components/molecules/dots-menu/dots-menu.js

@@ -1,84 +0,0 @@
-import { j as e } from "../../../_virtual/jsx-runtime.js";
-import * as h from "react";
-import { Button as x } from "../../atoms/button/button.js";
-import { Icon as c } from "../../atoms/icon/icon.js";
-import { cn as l } from "../../../lib/utils.js";
-import { DropdownMenu as f, DropdownMenuTrigger as j, DropdownMenuContent as w, DropdownMenuItem as g } from "../../atoms/dropdown-menu/dropdown-menu.js";
-import { Tooltip as C } from "../../atoms/tooltip/tooltip.js";
-const k = ({
-  allowed: r,
-  children: n,
-  message: a = "You don't have permission to perform this action"
-}) => r ? /* @__PURE__ */ e.jsx(e.Fragment, { children: n }) : /* @__PURE__ */ e.jsx(C, { content: a, show: !r, children: /* @__PURE__ */ e.jsx("span", { className: "block w-full", children: n }) }), N = ({
-  options: r,
-  icon: n = null,
-  className: a,
-  disabled: t = !1,
-  marginBottom: i
-}) => {
-  const [o, m] = h.useState(!1), d = (s) => {
-    m(s);
-  }, u = (s) => {
-    s.allowed && s.handleClick && s.handleClick(r), m(!1);
-  };
-  if (!r.actions || r.actions.length === 0)
-    return null;
-  const p = {};
-  return i !== void 0 && (p.marginBottom = `${i}px`), /* @__PURE__ */ e.jsx("div", { className: l("inline-flex relative", a), style: p, children: /* @__PURE__ */ e.jsxs(f, { open: o, onOpenChange: d, children: [
-    /* @__PURE__ */ e.jsx(j, { asChild: !0, disabled: t, children: /* @__PURE__ */ e.jsx(
-      x,
-      {
-        disabled: t,
-        variant: "ghost",
-        size: "icon",
-        className: "h-8 w-8 p-1",
-        "aria-label": "more",
-        "aria-controls": o ? "dots-menu" : void 0,
-        "aria-expanded": o,
-        "aria-haspopup": "true",
-        children: /* @__PURE__ */ e.jsx(
-          c,
-          {
-            name: n || "DotsThreeCircleVertical",
-            size: "sm",
-            className: l(
-              "transition-colors",
-              o ? "text-primary" : "text-muted-foreground"
-            )
-          }
-        )
-      }
-    ) }),
-    /* @__PURE__ */ e.jsx(
-      w,
-      {
-        id: "dots-menu",
-        align: "end",
-        className: l("max-h-[216px] overflow-y-auto"),
-        children: r.actions.map((s) => /* @__PURE__ */ e.jsx(
-          k,
-          {
-            allowed: s.allowed ?? !0,
-            children: /* @__PURE__ */ e.jsxs(
-              g,
-              {
-                onClick: () => u(s),
-                disabled: !s.allowed,
-                className: "flex items-center gap-3.5 cursor-pointer",
-                children: [
-                  /* @__PURE__ */ e.jsx(c, { name: s.icon, size: "sm", className: "shrink-0" }),
-                  /* @__PURE__ */ e.jsx("span", { children: s.name || String(s.key) })
-                ]
-              }
-            )
-          },
-          s.key
-        ))
-      }
-    )
-  ] }) });
-};
-N.displayName = "DotsMenu";
-export {
-  N as DotsMenu
-};