@yuno-payments/dashboard-design-system 2.8.8 → 2.8.10

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

@@ -0,0 +1,36 @@
+import { ComponentProps, ReactNode } from 'react';
+import { Badge } from '../../atoms/badge';
+import { IconName } from '../../atoms/icon';
+type BadgeVariant = NonNullable<ComponentProps<typeof Badge>["variant"]>;
+/**
+ * Props for the DataTableBadgeCell component
+ */
+export interface DataTableBadgeCellProps {
+    /** Label rendered inside the badge */
+    value: string | null | undefined;
+    /** Badge visual variant */
+    variant?: BadgeVariant;
+    /** Optional icon rendered at the start of the badge */
+    startIcon?: IconName;
+    /** Content to render when value is empty @default "-" */
+    emptyState?: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * A table cell that renders a single `Badge` with a pre-computed variant.
+ * Use it when the caller already knows the visual variant (no lookup map needed)
+ * — for example: ternary results, range-based status colors, or one-off
+ * labelled badges.
+ *
+ * For data-driven lookups (status key → variant via a map), prefer
+ * `DataTableStatusCell`.
+ *
+ * @example
+ * ```tsx
+ * <DataTableBadgeCell value={method} variant={getColorMethod(method)} />
+ * <DataTableBadgeCell value="Active" variant="success" startIcon="CheckCircle" />
+ * ```
+ */
+declare const DataTableBadgeCell: import('react').ForwardRefExoticComponent<DataTableBadgeCellProps & import('react').RefAttributes<HTMLSpanElement>>;
+export { DataTableBadgeCell };

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

@@ -0,0 +1,19 @@
+import { j as r } from "../../../_virtual/jsx-runtime.js";
+import { forwardRef as l } from "react";
+import { Badge as n } from "../../atoms/badge/badge.js";
+const d = l(
+  ({ value: e, variant: a = "info", startIcon: t, emptyState: o = "-", className: i }, m) => e ? /* @__PURE__ */ r.jsx(
+    n,
+    {
+      ref: m,
+      variant: a,
+      startIcon: t,
+      className: i,
+      children: e
+    }
+  ) : /* @__PURE__ */ r.jsx(r.Fragment, { children: o })
+);
+d.displayName = "DataTableBadgeCell";
+export {
+  d as DataTableBadgeCell
+};

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

@@ -1,9 +1,12 @@
 import { ReactNode } from 'react';
+import { IconName } from '../../atoms/icon';
 export interface DataTableIconTextCellItem {
     /** Item name/label */
     name: string;
     /** URL to the icon image */
-    icon?: string;
+    src?: string;
+    /** Phosphor icon name (used when no `src` URL is provided) */
+    iconName?: IconName;
 }
 export interface DataTableIconTextCellProps {
     /** Array of items to display (will be deduplicated by name) */

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

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

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

@@ -1,3 +1,4 @@
+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';