@yuno-payments/dashboard-design-system 2.8.6 → 2.8.9

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

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+/**
+ * Props for the DataTableCellWrapper component
+ */
+export interface DataTableCellWrapperProps {
+    /** The value to check for emptiness. Renders emptyState when null/undefined/'' or an empty array. */
+    value: unknown;
+    /** Content to render when value is non-empty */
+    children: ReactNode;
+    /** Content to render when value is empty @default "-" */
+    emptyState?: ReactNode;
+}
+/**
+ * Wraps a custom table cell to enforce the standard empty-state ("-")
+ * across the design system. Use this for cells that render custom JSX
+ * (Badges, icon+text combos, switches, etc.) that don't fit one of the
+ * specialized DataTable*Cell components.
+ *
+ * @example
+ * ```tsx
+ * <DataTableCellWrapper value={method}>
+ *   <MethodTag method={method} />
+ * </DataTableCellWrapper>
+ *
+ * // Custom empty state
+ * <DataTableCellWrapper value={amount} emptyState="N/A">
+ *   <CustomAmount value={amount} />
+ * </DataTableCellWrapper>
+ * ```
+ */
+declare const DataTableCellWrapper: import('react').ForwardRefExoticComponent<DataTableCellWrapperProps & import('react').RefAttributes<HTMLSpanElement>>;
+export { DataTableCellWrapper };

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

@@ -0,0 +1,7 @@
+import { j as t } from "../../../_virtual/jsx-runtime.js";
+import { forwardRef as i } from "react";
+const s = (r) => !!(r == null || typeof r == "string" && r.trim() === "" || Array.isArray(r) && r.length === 0), p = i(({ value: r, children: e, emptyState: n = "-" }, a) => s(r) ? /* @__PURE__ */ t.jsx("span", { ref: a, children: n }) : /* @__PURE__ */ t.jsx(t.Fragment, { children: e }));
+p.displayName = "DataTableCellWrapper";
+export {
+  p as DataTableCellWrapper
+};

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 { 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';