@yuno-payments/dashboard-design-system 2.7.13 → 2.8.0

package/dist/components/atoms/icon/icon-list.d.ts

@@ -220,6 +220,8 @@ declare const IconList: {
     Lifebuoy: import('@phosphor-icons/react').Icon;
     TestTube: import('@phosphor-icons/react').Icon;
     Tag: import('@phosphor-icons/react').Icon;
+    FilePlus: import('@phosphor-icons/react').Icon;
+    CalendarPlus: import('@phosphor-icons/react').Icon;
 };
 export type IconName = Exclude<keyof typeof IconList, "Icon" | "IconProps" | "IconWeight" | "IconContext">;
 export { IconList };

package/dist/components/atoms/icon/icon-list.js

@@ -19,8 +19,8 @@ import { FileArchiveIcon as S } from "../../../node_modules/@phosphor-icons/reac
 import { FilePdfIcon as w } from "../../../node_modules/@phosphor-icons/react/dist/csr/FilePdf.es.js";
 import { BoundingBoxIcon as g } from "../../../node_modules/@phosphor-icons/react/dist/csr/BoundingBox.es.js";
 import { TreeStructureIcon as P } from "../../../node_modules/@phosphor-icons/react/dist/csr/TreeStructure.es.js";
-import { ShoppingCartIcon as k } from "../../../node_modules/@phosphor-icons/react/dist/csr/ShoppingCart.es.js";
-import { CodeIcon as d } from "../../../node_modules/@phosphor-icons/react/dist/csr/Code.es.js";
+import { ShoppingCartIcon as d } from "../../../node_modules/@phosphor-icons/react/dist/csr/ShoppingCart.es.js";
+import { CodeIcon as k } from "../../../node_modules/@phosphor-icons/react/dist/csr/Code.es.js";
 import { FileTxtIcon as A } from "../../../node_modules/@phosphor-icons/react/dist/csr/FileTxt.es.js";
 import { FileZipIcon as D } from "../../../node_modules/@phosphor-icons/react/dist/csr/FileZip.es.js";
 import { TerminalWindowIcon as L } from "../../../node_modules/@phosphor-icons/react/dist/csr/TerminalWindow.es.js";
@@ -127,8 +127,8 @@ import { ShieldWarningIcon as Sr } from "../../../node_modules/@phosphor-icons/r
 import { UserSwitchIcon as wr } from "../../../node_modules/@phosphor-icons/react/dist/csr/UserSwitch.es.js";
 import { LightningIcon as gr } from "../../../node_modules/@phosphor-icons/react/dist/csr/Lightning.es.js";
 import { MapPinIcon as Pr } from "../../../node_modules/@phosphor-icons/react/dist/csr/MapPin.es.js";
-import { EraserIcon as kr } from "../../../node_modules/@phosphor-icons/react/dist/csr/Eraser.es.js";
-import { VaultIcon as dr } from "../../../node_modules/@phosphor-icons/react/dist/csr/Vault.es.js";
+import { EraserIcon as dr } from "../../../node_modules/@phosphor-icons/react/dist/csr/Eraser.es.js";
+import { VaultIcon as kr } from "../../../node_modules/@phosphor-icons/react/dist/csr/Vault.es.js";
 import { ClockClockwiseIcon as Ar } from "../../../node_modules/@phosphor-icons/react/dist/csr/ClockClockwise.es.js";
 import { RepeatIcon as Dr } from "../../../node_modules/@phosphor-icons/react/dist/csr/Repeat.es.js";
 import { EyeIcon as Lr } from "../../../node_modules/@phosphor-icons/react/dist/csr/Eye.es.js";
@@ -181,8 +181,8 @@ import { SortAscendingIcon as Se } from "../../../node_modules/@phosphor-icons/r
 import { SortDescendingIcon as we } from "../../../node_modules/@phosphor-icons/react/dist/csr/SortDescending.es.js";
 import { ArrowClockwiseIcon as ge } from "../../../node_modules/@phosphor-icons/react/dist/csr/ArrowClockwise.es.js";
 import { SparkleIcon as Pe } from "../../../node_modules/@phosphor-icons/react/dist/csr/Sparkle.es.js";
-import { ThumbsUpIcon as ke } from "../../../node_modules/@phosphor-icons/react/dist/csr/ThumbsUp.es.js";
-import { ThumbsDownIcon as de } from "../../../node_modules/@phosphor-icons/react/dist/csr/ThumbsDown.es.js";
+import { ThumbsUpIcon as de } from "../../../node_modules/@phosphor-icons/react/dist/csr/ThumbsUp.es.js";
+import { ThumbsDownIcon as ke } from "../../../node_modules/@phosphor-icons/react/dist/csr/ThumbsDown.es.js";
 import { DotsThreeCircleVerticalIcon as Ae } from "../../../node_modules/@phosphor-icons/react/dist/csr/DotsThreeCircleVertical.es.js";
 import { BugBeetleIcon as De } from "../../../node_modules/@phosphor-icons/react/dist/csr/BugBeetle.es.js";
 import { EnvelopeIcon as Le } from "../../../node_modules/@phosphor-icons/react/dist/csr/Envelope.es.js";
@@ -218,7 +218,9 @@ import { NotePencilIcon as ri } from "../../../node_modules/@phosphor-icons/reac
 import { LifebuoyIcon as ei } from "../../../node_modules/@phosphor-icons/react/dist/csr/Lifebuoy.es.js";
 import { TestTubeIcon as ii } from "../../../node_modules/@phosphor-icons/react/dist/csr/TestTube.es.js";
 import { TagIcon as mi } from "../../../node_modules/@phosphor-icons/react/dist/csr/Tag.es.js";
-const pn = {
+import { FilePlusIcon as ai } from "../../../node_modules/@phosphor-icons/react/dist/csr/FilePlus.es.js";
+import { CalendarPlusIcon as ti } from "../../../node_modules/@phosphor-icons/react/dist/csr/CalendarPlus.es.js";
+const $n = {
   AidaLogo: r,
   Activity: We,
   FileSearch: He,
@@ -242,8 +244,8 @@ const pn = {
   FilePdf: w,
   BoundingBox: g,
   TreeStructure: P,
-  ShoppingCart: k,
-  Code: d,
+  ShoppingCart: d,
+  Code: k,
   FileTxt: A,
   FileZip: D,
   TerminalWindow: L,
@@ -346,8 +348,8 @@ const pn = {
   UserSwitch: wr,
   Lightning: gr,
   MapPin: Pr,
-  Eraser: kr,
-  Vault: dr,
+  Eraser: dr,
+  Vault: kr,
   ClockClockwise: Ar,
   Repeat: Dr,
   Eye: Lr,
@@ -402,8 +404,8 @@ const pn = {
   SortDescending: we,
   ArrowClockwise: ge,
   Sparkle: Pe,
-  ThumbsUp: ke,
-  ThumbsDown: de,
+  ThumbsUp: de,
+  ThumbsDown: ke,
   DotsThreeCircleVertical: Ae,
   BugBeetle: De,
   Envelope: Le,
@@ -439,8 +441,10 @@ const pn = {
   NotePencil: ri,
   Lifebuoy: ei,
   TestTube: ii,
-  Tag: mi
+  Tag: mi,
+  FilePlus: ai,
+  CalendarPlus: ti
 };
 export {
-  pn as IconList
+  $n as IconList
 };

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

@@ -0,0 +1,30 @@
+/**
+ * Props for the DataTableAmountCell component
+ */
+export interface DataTableAmountCellProps {
+    /** The numeric amount value */
+    value: number | null | undefined;
+    /** ISO 4217 currency code @default "USD" */
+    currency?: string;
+    /** Override locale for formatting */
+    locales?: string | string[];
+    /** CurrencyField size variant @default "xs" */
+    size?: "xs" | "sm" | "base";
+    /** Whether to show the currency code @default true */
+    showCurrencyCode?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * A table cell for displaying formatted currency amounts.
+ * Wraps the CurrencyField atom with sensible defaults for table usage.
+ *
+ * @example
+ * ```tsx
+ * <DataTableAmountCell value={1234.56} currency="USD" />
+ * <DataTableAmountCell value={500} currency="PEN" locales="es-PE" />
+ * <DataTableAmountCell value={0} currency="BRL" locales="pt-BR" />
+ * ```
+ */
+declare const DataTableAmountCell: import('react').ForwardRefExoticComponent<DataTableAmountCellProps & import('react').RefAttributes<HTMLDivElement>>;
+export { DataTableAmountCell };

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

@@ -0,0 +1,27 @@
+import { j as e } from "../../../_virtual/jsx-runtime.js";
+import { forwardRef as n } from "react";
+import { cn as s } from "../../../lib/utils.js";
+import { CurrencyField as f } from "../../atoms/currency-field/currency-field.js";
+const u = n(
+  ({
+    value: r,
+    currency: t = "USD",
+    locales: m,
+    size: o = "xs",
+    showCurrencyCode: l = !0,
+    className: a
+  }, i) => r == null || Number.isNaN(r) ? null : /* @__PURE__ */ e.jsx("div", { ref: i, className: s("flex", a), children: /* @__PURE__ */ e.jsx(
+    f,
+    {
+      value: r,
+      currency: t,
+      locales: m,
+      size: o,
+      showCurrencyCode: l
+    }
+  ) })
+);
+u.displayName = "DataTableAmountCell";
+export {
+  u as DataTableAmountCell
+};

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

@@ -0,0 +1,41 @@
+import { IconName } from '../../atoms/icon';
+/**
+ * Props for the DataTableCopyCell component
+ */
+export interface DataTableCopyCellProps {
+    /** The text value to display and copy */
+    value: string;
+    /** Optional navigation link — renders value as an anchor */
+    linkTo?: string;
+    /** Optional icon before the text (e.g. "Key" for test credentials) */
+    startIcon?: IconName;
+    /** Tooltip for the start icon */
+    startIconTooltip?: string;
+    /** Tooltip for the copy button @default "Copy" */
+    copyTooltip?: string;
+    /** Custom callback on successful copy */
+    onCopySuccess?: () => void;
+    /** Custom callback on copy error */
+    onCopyError?: () => void;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * A table cell that displays a text value with a copy-to-clipboard button.
+ * The copy button appears on hover. Supports optional navigation links
+ * and start icons (e.g., test credential indicators).
+ *
+ * @example
+ * ```tsx
+ * // Simple copy cell
+ * <DataTableCopyCell value="pay_abc123def456ghi789" />
+ *
+ * // With link
+ * <DataTableCopyCell value="pay_abc123" linkTo="/payments/details/pay_abc123" />
+ *
+ * // With start icon
+ * <DataTableCopyCell value="pay_test_123" startIcon="Key" startIconTooltip="Test credential" />
+ * ```
+ */
+declare const DataTableCopyCell: import('react').ForwardRefExoticComponent<DataTableCopyCellProps & import('react').RefAttributes<HTMLDivElement>>;
+export { DataTableCopyCell };

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

@@ -0,0 +1,83 @@
+import { j as r } from "../../../_virtual/jsx-runtime.js";
+import { forwardRef as f } from "react";
+import { cn as y } from "../../../lib/utils.js";
+import { Icon as c } from "../../atoms/icon/icon.js";
+import { TooltipProvider as i, Tooltip as o, TooltipTrigger as n, TooltipContent as l } from "../../../vendor/shadcn/tooltip.js";
+import { useCopyToClipboard as g } from "../../../hooks/use-copy-to-clipboard.js";
+const N = f(
+  ({
+    value: e,
+    linkTo: t,
+    startIcon: a,
+    startIconTooltip: p,
+    copyTooltip: d = "Copy",
+    onCopySuccess: m,
+    onCopyError: h,
+    className: x
+  }, j) => {
+    const { copyToClipboard: u } = g({
+      onSuccess: m,
+      onError: h
+    });
+    if (!e) return null;
+    const C = (s) => {
+      s.stopPropagation(), u(e);
+    };
+    return /* @__PURE__ */ r.jsxs(
+      "div",
+      {
+        ref: j,
+        className: y("group flex items-center gap-2 w-full", x),
+        children: [
+          a && /* @__PURE__ */ r.jsx(i, { children: /* @__PURE__ */ r.jsxs(o, { children: [
+            /* @__PURE__ */ r.jsx(n, { asChild: !0, children: /* @__PURE__ */ r.jsx("span", { className: "shrink-0 inline-flex", children: /* @__PURE__ */ r.jsx(
+              c,
+              {
+                name: a,
+                weight: "fill",
+                size: "sm",
+                className: "text-primary"
+              }
+            ) }) }),
+            p && /* @__PURE__ */ r.jsx(l, { children: /* @__PURE__ */ r.jsx("p", { children: p }) })
+          ] }) }),
+          /* @__PURE__ */ r.jsx(i, { children: /* @__PURE__ */ r.jsxs(o, { children: [
+            /* @__PURE__ */ r.jsx(n, { asChild: !0, children: /* @__PURE__ */ r.jsx("span", { className: "truncate text-sm", children: t ? /* @__PURE__ */ r.jsx(
+              "a",
+              {
+                href: t,
+                className: "text-primary hover:underline",
+                onClick: (s) => s.stopPropagation(),
+                children: e
+              }
+            ) : e }) }),
+            /* @__PURE__ */ r.jsx(l, { children: /* @__PURE__ */ r.jsx("p", { children: e }) })
+          ] }) }),
+          /* @__PURE__ */ r.jsx(i, { children: /* @__PURE__ */ r.jsxs(o, { children: [
+            /* @__PURE__ */ r.jsx(n, { asChild: !0, children: /* @__PURE__ */ r.jsx(
+              "button",
+              {
+                type: "button",
+                className: "shrink-0 opacity-0 group-hover:opacity-100 transition-opacity p-1 hover:bg-muted rounded",
+                onClick: C,
+                children: /* @__PURE__ */ r.jsx(
+                  c,
+                  {
+                    name: "CopySimple",
+                    size: "sm",
+                    className: "text-muted-foreground"
+                  }
+                )
+              }
+            ) }),
+            /* @__PURE__ */ r.jsx(l, { children: /* @__PURE__ */ r.jsx("p", { children: d }) })
+          ] }) })
+        ]
+      }
+    );
+  }
+);
+N.displayName = "DataTableCopyCell";
+export {
+  N as DataTableCopyCell
+};

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

@@ -0,0 +1,31 @@
+export interface DataTableCountryCellProps {
+    /** ISO 3166-1 alpha-2 country code (e.g., "US", "CO", "BR") */
+    code: string | null | undefined;
+    /** Whether to show the flag emoji @default true */
+    showFlag?: boolean;
+    /** Whether to show the country name instead of just the code @default false */
+    showName?: boolean;
+    /** Custom function to resolve country name from code */
+    getCountryName?: (code: string) => string;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * A table cell for displaying country codes with flag emojis.
+ * Supports showing just the code, or the full country name via
+ * a custom resolver function.
+ *
+ * @example
+ * ```tsx
+ * // Code with flag
+ * <DataTableCountryCell code="US" />
+ *
+ * // With country name
+ * <DataTableCountryCell code="CO" showName getCountryName={countryNameFromCode} />
+ *
+ * // Without flag
+ * <DataTableCountryCell code="BR" showFlag={false} />
+ * ```
+ */
+declare const DataTableCountryCell: import('react').ForwardRefExoticComponent<DataTableCountryCellProps & import('react').RefAttributes<HTMLDivElement>>;
+export { DataTableCountryCell };

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

@@ -0,0 +1,37 @@
+import { j as r } from "../../../_virtual/jsx-runtime.js";
+import { forwardRef as m } from "react";
+import { cn as f } from "../../../lib/utils.js";
+import { TooltipProvider as u, Tooltip as x, TooltipTrigger as d, TooltipContent as h } from "../../../vendor/shadcn/tooltip.js";
+const j = (t) => !t || typeof t != "string" ? t : typeof String.fromCodePoint < "u" ? t.toUpperCase().replace(
+  /./g,
+  (n) => String.fromCodePoint(n.charCodeAt(0) + 127397)
+) : t, T = m(
+  ({ code: t, showFlag: n = !0, showName: o = !1, getCountryName: s, className: a }, i) => {
+    if (!t) return null;
+    const e = n ? j(t) : null, l = s ? s(t) : null, p = o && l ? l : t.toUpperCase(), c = l ?? t.toUpperCase();
+    return /* @__PURE__ */ r.jsx(u, { children: /* @__PURE__ */ r.jsxs(x, { children: [
+      /* @__PURE__ */ r.jsx(d, { asChild: !0, children: /* @__PURE__ */ r.jsxs(
+        "div",
+        {
+          ref: i,
+          className: f(
+            "flex items-center gap-1 truncate text-sm",
+            a
+          ),
+          children: [
+            e && /* @__PURE__ */ r.jsx("span", { className: "shrink-0", children: e }),
+            /* @__PURE__ */ r.jsx("span", { className: "truncate", children: p })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ r.jsx(h, { children: /* @__PURE__ */ r.jsxs("p", { children: [
+        e && `${e} `,
+        c
+      ] }) })
+    ] }) });
+  }
+);
+T.displayName = "DataTableCountryCell";
+export {
+  T as DataTableCountryCell
+};

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

@@ -0,0 +1,29 @@
+export interface DataTableDateCellProps {
+    /** The date value — ISO string or Date object */
+    value: string | Date | null | undefined;
+    /** Custom date formatter. If not provided, uses Intl.DateTimeFormat with date and time */
+    formatFn?: (date: string | Date) => string;
+    /** Content to render when value is falsy @default null */
+    emptyState?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * A table cell for displaying formatted dates with truncation and tooltip.
+ * Accepts a custom formatting function or uses a sensible default
+ * (Intl.DateTimeFormat with date + time).
+ *
+ * @example
+ * ```tsx
+ * // Simple date
+ * <DataTableDateCell value="2024-03-15T14:30:00Z" />
+ *
+ * // With custom formatter
+ * <DataTableDateCell value="2024-03-15T14:30:00Z" formatFn={defaultDateFormat} />
+ *
+ * // With empty state
+ * <DataTableDateCell value={null} emptyState="-" />
+ * ```
+ */
+declare const DataTableDateCell: import('react').ForwardRefExoticComponent<DataTableDateCellProps & import('react').RefAttributes<HTMLDivElement>>;
+export { DataTableDateCell };

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

@@ -0,0 +1,32 @@
+import { j as t } from "../../../_virtual/jsx-runtime.js";
+import { forwardRef as m } from "react";
+import { cn as s } from "../../../lib/utils.js";
+import { TooltipProvider as l, Tooltip as c, TooltipTrigger as d, TooltipContent as f } from "../../../vendor/shadcn/tooltip.js";
+const p = (r) => {
+  try {
+    const e = typeof r == "string" ? new Date(r) : r;
+    return new Intl.DateTimeFormat("en-US", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit"
+    }).format(e);
+  } catch {
+    return String(r);
+  }
+}, h = m(
+  ({ value: r, formatFn: e, emptyState: i = null, className: n }, a) => {
+    if (!r) return /* @__PURE__ */ t.jsx(t.Fragment, { children: i });
+    const o = (e ?? p)(r);
+    return /* @__PURE__ */ t.jsx(l, { children: /* @__PURE__ */ t.jsxs(c, { children: [
+      /* @__PURE__ */ t.jsx(d, { asChild: !0, children: /* @__PURE__ */ t.jsx("div", { ref: a, className: s("truncate text-sm", n), children: o }) }),
+      /* @__PURE__ */ t.jsx(f, { children: /* @__PURE__ */ t.jsx("p", { children: o }) })
+    ] }) });
+  }
+);
+h.displayName = "DataTableDateCell";
+export {
+  h as DataTableDateCell
+};

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

@@ -0,0 +1,21 @@
+export interface DataTableIconTextCellItem {
+    /** Item name/label */
+    name: string;
+    /** URL to the icon image */
+    icon?: string;
+}
+export interface DataTableIconTextCellProps {
+    /** Array of items to display (will be deduplicated by name) */
+    items: DataTableIconTextCellItem[];
+    /** Maximum number of visible items @default 1 */
+    maxVisible?: number;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * A table cell for displaying items with icons and text, such as payment
+ * providers or payment methods. Shows the first item with its icon and name,
+ * plus a "+N" badge for additional items. Automatically deduplicates by name.
+ */
+declare const DataTableIconTextCell: import('react').ForwardRefExoticComponent<DataTableIconTextCellProps & import('react').RefAttributes<HTMLDivElement>>;
+export { DataTableIconTextCell };

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

@@ -0,0 +1,75 @@
+import { j as e } from "../../../_virtual/jsx-runtime.js";
+import { forwardRef as j } from "react";
+import { cn as u } from "../../../lib/utils.js";
+import { TooltipProvider as o, Tooltip as i, TooltipTrigger as d, TooltipContent as m } from "../../../vendor/shadcn/tooltip.js";
+import { Badge as f } from "../../atoms/badge/badge.js";
+const g = j(({ items: n, maxVisible: c = 1, className: x }, h) => {
+  if (!n || n.length === 0) return null;
+  const t = /* @__PURE__ */ new Set(), s = n.filter((r) => !r.name || t.has(r.name) ? !1 : (t.add(r.name), !0));
+  if (s.length === 0) return null;
+  const p = s.slice(0, c), a = s.slice(c);
+  return /* @__PURE__ */ e.jsxs(
+    "div",
+    {
+      ref: h,
+      className: u("flex items-center gap-2", x),
+      children: [
+        p.map((r) => /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1.5 min-w-0", children: [
+          r.icon && /* @__PURE__ */ e.jsx(
+            "img",
+            {
+              src: r.icon,
+              alt: r.name,
+              className: "h-4 w-4 shrink-0 object-contain",
+              onError: (l) => {
+                l.currentTarget.style.display = "none";
+              }
+            }
+          ),
+          /* @__PURE__ */ e.jsx(o, { children: /* @__PURE__ */ e.jsxs(i, { children: [
+            /* @__PURE__ */ e.jsx(d, { asChild: !0, children: /* @__PURE__ */ e.jsx("span", { className: "truncate text-sm", children: r.name }) }),
+            /* @__PURE__ */ e.jsx(m, { children: /* @__PURE__ */ e.jsx("p", { children: r.name }) })
+          ] }) })
+        ] }, r.name)),
+        a.length > 0 && /* @__PURE__ */ e.jsx(o, { delayDuration: 0, children: /* @__PURE__ */ e.jsxs(i, { children: [
+          /* @__PURE__ */ e.jsx(d, { className: "shrink-0", children: /* @__PURE__ */ e.jsxs(
+            f,
+            {
+              variant: "outline",
+              className: "text-xs cursor-pointer hover:border-primary hover:text-primary",
+              children: [
+                "+",
+                a.length
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ e.jsx(m, { className: "p-2", children: /* @__PURE__ */ e.jsx("div", { className: "space-y-2", children: a.map((r) => /* @__PURE__ */ e.jsxs(
+            "div",
+            {
+              className: "flex items-center gap-3",
+              children: [
+                r.icon && /* @__PURE__ */ e.jsx(
+                  "img",
+                  {
+                    src: r.icon,
+                    alt: r.name,
+                    className: "h-4 w-4 object-contain",
+                    onError: (l) => {
+                      l.currentTarget.style.display = "none";
+                    }
+                  }
+                ),
+                /* @__PURE__ */ e.jsx("span", { className: "text-sm", children: r.name })
+              ]
+            },
+            r.name
+          )) }) })
+        ] }) })
+      ]
+    }
+  );
+});
+g.displayName = "DataTableIconTextCell";
+export {
+  g as DataTableIconTextCell
+};

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

@@ -0,0 +1,28 @@
+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;
+    /** 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

@@ -0,0 +1,27 @@
+import { j as e } from "../../../_virtual/jsx-runtime.js";
+import { forwardRef as m } from "react";
+import { cn as o } from "../../../lib/utils.js";
+const c = m(({ value: t, decimals: r = 2, showProgressBar: l = !1, className: n }, i) => {
+  if (t == null) return null;
+  const a = t * 100, s = new Intl.NumberFormat("en-US", {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: r
+  }).format(a);
+  return /* @__PURE__ */ e.jsxs("div", { ref: i, className: o("flex items-center gap-3", n), children: [
+    l && /* @__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: [
+      s,
+      "%"
+    ] })
+  ] });
+});
+c.displayName = "DataTablePercentageCell";
+export {
+  c as DataTablePercentageCell
+};

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

@@ -0,0 +1,44 @@
+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;
+    /** 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

@@ -0,0 +1,24 @@
+import { j as n } from "../../../_virtual/jsx-runtime.js";
+import { forwardRef as m } 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 e = r.replace(/[_.]/g, " ").toLowerCase();
+  return e.charAt(0).toUpperCase() + e.slice(1);
+}, d = m(({ status: r, statusMap: e, formatLabel: c = p, className: o }, t) => {
+  if (!r) return null;
+  const a = e?.[r] ?? e?.[r.toUpperCase()];
+  return a ? /* @__PURE__ */ n.jsx("div", { ref: t, className: i(o), children: /* @__PURE__ */ n.jsx(
+    l,
+    {
+      startIcon: a.icon ?? "Info",
+      variant: a.variant,
+      children: a.label
+    }
+  ) }) : /* @__PURE__ */ n.jsx("div", { ref: t, className: i(o), children: /* @__PURE__ */ n.jsx(l, { startIcon: "Info", variant: "info", children: c(r) }) });
+});
+d.displayName = "DataTableStatusCell";
+export {
+  d as DataTableStatusCell
+};

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

@@ -0,0 +1,16 @@
+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";
+    /** 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 };