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

package/registry/components-registry.json

@@ -1,6 +1,6 @@
 {
-  "version": "2.8.10",
-  "generatedAt": "2026-05-11T15:16:12.364Z",
+  "version": "2.9.0",
+  "generatedAt": "2026-05-14T15:35:34.648Z",
   "components": [
     {
       "name": "AccessDeniedAlert",
@@ -2032,6 +2032,63 @@
         }
       ]
     },
+    {
+      "name": "DataTableCells",
+      "category": "molecules",
+      "importPath": "@yuno-payments/dashboard-design-system",
+      "description": "A table cell that renders a horizontal list of icons only (no inline labels). Each icon shows its name in a tooltip; overflow items collapse into a `+N` badge with its own tooltip listing the remaining names.",
+      "whenToUse": [
+        "Card brand columns: Visa, Mastercard, Amex, Diners, …",
+        "Icon-driven scan columns where labels would crowd the row"
+      ],
+      "whenNotToUse": [],
+      "props": [
+        {
+          "name": "items",
+          "type": "DataTableIconCellItem[]",
+          "required": true,
+          "description": "Array of items (name + src URL or Phosphor iconName)"
+        },
+        {
+          "name": "maxVisible",
+          "type": "number",
+          "default": "4",
+          "required": false,
+          "description": "Max visible icons"
+        },
+        {
+          "name": "emptyState",
+          "type": "ReactNode",
+          "default": "\"-\"",
+          "required": false,
+          "description": "Content to render when items is empty"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": true,
+          "description": "Additional CSS classes"
+        }
+      ],
+      "examples": [
+        {
+          "name": "Default",
+          "code": "<DataTableCells items={[{\"name\":\"Visa\",\"src\":\"https://via.placeholder.com/20\"},{\"name\":\"Mastercard\",\"src\":\"https://via.placeholder.com/20\"},{\"name\":\"Amex\",\"src\":\"https://via.placeholder.com/20\"}]} />"
+        },
+        {
+          "name": "Empty",
+          "code": "<DataTableCells items={[]} />"
+        },
+        {
+          "name": "Overflow",
+          "code": "<DataTableCells items={[{\"name\":\"Visa\",\"src\":\"https://via.placeholder.com/20\"},{\"name\":\"Mastercard\",\"src\":\"https://via.placeholder.com/20\"},{\"name\":\"Amex\",\"src\":\"https://via.placeholder.com/20\"},{\"name\":\"Diners\",\"src\":\"https://via.placeholder.com/20\"},{\"name\":\"JCB\",\"src\":\"https://via.placeholder.com/20\"},{\"name\":\"Discover\",\"src\":\"https://via.placeholder.com/20\"}]} maxVisible={4} />"
+        },
+        {
+          "name": "WithPhosphorIcons",
+          "code": "<DataTableCells items={[{\"name\":\"Active\",\"iconName\":\"CheckCircle\"},{\"name\":\"Pending\",\"iconName\":\"Clock\"},{\"name\":\"Failed\",\"iconName\":\"XCircle\"}]} />"
+        }
+      ]
+    },
     {
       "name": "DataTableCells",
       "category": "molecules",