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

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 };

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

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

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

@@ -0,0 +1,53 @@
+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.
+     * Defaults to null (renders nothing).
+     * @example "-" or "--"
+     */
+    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 };