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

package/registry/components-registry.json

@@ -1,6 +1,6 @@
 {
-  "version": "2.7.13",
-  "generatedAt": "2026-04-29T16:10:51.043Z",
+  "version": "2.8.0",
+  "generatedAt": "2026-05-04T14:52:32.726Z",
   "components": [
     {
       "name": "AccessDeniedAlert",
@@ -1697,6 +1697,597 @@
       ],
       "figmaComponent": "https://www.figma.com/design/fcHm3yuz9KiqdRHM7oWneG/shadcn-ui-kit-for-Figma---Pro-Blocks---August-2025--Yuno-?node-id=302-8455&m=dev"
     },
+    {
+      "name": "DataTableCells",
+      "category": "molecules",
+      "importPath": "@yuno-payments/dashboard-design-system",
+      "description": "The DataTableTextCell is the foundational cell component for displaying text in a DataTable. It renders text with automatic truncation and an optional tooltip showing the full value. Other DataTable cell components (DateCell, CopyCell, etc.) compose this internally.",
+      "whenToUse": [
+        "Any text column: Display text values that may overflow the column width",
+        "With transforms: Apply formatting functions like `cleanText` or `countryNameFromCode`",
+        "As a building block: Base for more specialized cell components"
+      ],
+      "whenNotToUse": [],
+      "props": [
+        {
+          "name": "value",
+          "type": "string | null | undefined",
+          "required": true,
+          "description": "The text value to display"
+        },
+        {
+          "name": "formatFn",
+          "type": "(value: string) => string",
+          "required": true,
+          "description": "Optional transform function applied to the value"
+        },
+        {
+          "name": "tooltip",
+          "type": "string | false",
+          "default": "formatted value",
+          "required": false,
+          "description": "Custom tooltip text, or false to disable. Defaults to the formatted value."
+        },
+        {
+          "name": "emptyState",
+          "type": "ReactNode",
+          "default": "null",
+          "required": false,
+          "description": "Content to render when value is falsy"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": true,
+          "description": "Additional CSS classes"
+        }
+      ],
+      "examples": [
+        {
+          "name": "Default",
+          "code": "<DataTableCells value=\"pay_abc123def456ghi789\" />"
+        },
+        {
+          "name": "EmptyDefault",
+          "code": "<DataTableCells />"
+        },
+        {
+          "name": "EmptyWithDash",
+          "code": "<DataTableCells emptyState=\"-\" />"
+        },
+        {
+          "name": "EmptyWithDoubleDash",
+          "code": "<DataTableCells emptyState=\"--\" />"
+        },
+        {
+          "name": "LongText",
+          "code": "<DataTableCells value=\"This is a very long text that should be truncated and show a tooltip on hover\" />"
+        }
+      ]
+    },
+    {
+      "name": "DataTableCells",
+      "category": "molecules",
+      "importPath": "@yuno-payments/dashboard-design-system",
+      "description": "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.",
+      "whenToUse": [
+        "Webhook triggers: Display event trigger names",
+        "Tag lists: Any column with multiple categorical values",
+        "Conditions: Display condition rules in routing tables"
+      ],
+      "whenNotToUse": [],
+      "props": [
+        {
+          "name": "tags",
+          "type": "string[]",
+          "required": true,
+          "description": "Array of tag labels"
+        },
+        {
+          "name": "maxVisible",
+          "type": "number",
+          "default": "2",
+          "required": false,
+          "description": "Max visible tags before overflow"
+        },
+        {
+          "name": "variant",
+          "type": "string",
+          "default": "\"outline\"",
+          "required": false,
+          "description": "Badge variant"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": true,
+          "description": "Additional CSS classes"
+        }
+      ],
+      "examples": [
+        {
+          "name": "Default",
+          "code": "<DataTableCells tags={[\"payment.created\",\"payment.approved\"]} />"
+        },
+        {
+          "name": "Empty",
+          "code": "<DataTableCells tags={[]} />"
+        },
+        {
+          "name": "InfoVariant",
+          "code": "<DataTableCells tags={[\"Active\",\"Published\"]} variant=\"info\" />"
+        },
+        {
+          "name": "ManyTags",
+          "code": "<DataTableCells tags={[\"event.type.1\",\"event.type.2\",\"event.type.3\",\"event.type.4\",\"event.type.5\",\"event.type.6\",\"event.type.7\",\"event.type.8\",\"event.type.9\",\"event.type.10\"]} maxVisible={3} />"
+        },
+        {
+          "name": "RTL",
+          "code": "<DataTableCells tags={[\"payment.created\",\"payment.approved\",\"payment.declined\",\"payment.refunded\",\"payment.cancelled\"]} />"
+        }
+      ]
+    },
+    {
+      "name": "DataTableCells",
+      "category": "molecules",
+      "importPath": "@yuno-payments/dashboard-design-system",
+      "description": "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.",
+      "whenToUse": [
+        "Payment statuses: APPROVED, DECLINED, PENDING, etc.",
+        "Transaction states: Any enum-like status field",
+        "Monitor/audit states: Active, inactive, error states"
+      ],
+      "whenNotToUse": [],
+      "props": [
+        {
+          "name": "status",
+          "type": "string",
+          "required": true,
+          "description": "The raw status key"
+        },
+        {
+          "name": "statusMap",
+          "type": "Record<string, StatusMapEntry>",
+          "required": true,
+          "description": "Map of status keys to display configuration"
+        },
+        {
+          "name": "formatLabel",
+          "type": "(status: string) => string",
+          "required": true,
+          "description": "Fallback label formatter"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": true,
+          "description": "Additional CSS classes"
+        }
+      ],
+      "examples": [
+        {
+          "name": "Approved",
+          "code": "<DataTableCells status=\"APPROVED\" statusMap={{\"APPROVED\":{\"label\":\"Approved\",\"variant\":\"success\",\"icon\":\"CheckCircle\"},\"DECLINED\":{\"label\":\"Declined\",\"variant\":\"error\",\"icon\":\"XCircle\"},\"PENDING\":{\"label\":\"Pending\",\"variant\":\"warning\",\"icon\":\"Clock\"},\"CANCELLED\":{\"label\":\"Cancelled\",\"variant\":\"alert\",\"icon\":\"Prohibit\"}}} />"
+        },
+        {
+          "name": "Cancelled",
+          "code": "<DataTableCells status=\"CANCELLED\" statusMap={{\"APPROVED\":{\"label\":\"Approved\",\"variant\":\"success\",\"icon\":\"CheckCircle\"},\"DECLINED\":{\"label\":\"Declined\",\"variant\":\"error\",\"icon\":\"XCircle\"},\"PENDING\":{\"label\":\"Pending\",\"variant\":\"warning\",\"icon\":\"Clock\"},\"CANCELLED\":{\"label\":\"Cancelled\",\"variant\":\"alert\",\"icon\":\"Prohibit\"}}} />"
+        },
+        {
+          "name": "Declined",
+          "code": "<DataTableCells status=\"DECLINED\" statusMap={{\"APPROVED\":{\"label\":\"Approved\",\"variant\":\"success\",\"icon\":\"CheckCircle\"},\"DECLINED\":{\"label\":\"Declined\",\"variant\":\"error\",\"icon\":\"XCircle\"},\"PENDING\":{\"label\":\"Pending\",\"variant\":\"warning\",\"icon\":\"Clock\"},\"CANCELLED\":{\"label\":\"Cancelled\",\"variant\":\"alert\",\"icon\":\"Prohibit\"}}} />"
+        },
+        {
+          "name": "Empty",
+          "code": "<DataTableCells status=\"\" />"
+        },
+        {
+          "name": "Pending",
+          "code": "<DataTableCells status=\"PENDING\" statusMap={{\"APPROVED\":{\"label\":\"Approved\",\"variant\":\"success\",\"icon\":\"CheckCircle\"},\"DECLINED\":{\"label\":\"Declined\",\"variant\":\"error\",\"icon\":\"XCircle\"},\"PENDING\":{\"label\":\"Pending\",\"variant\":\"warning\",\"icon\":\"Clock\"},\"CANCELLED\":{\"label\":\"Cancelled\",\"variant\":\"alert\",\"icon\":\"Prohibit\"}}} />"
+        }
+      ]
+    },
+    {
+      "name": "DataTableCells",
+      "category": "molecules",
+      "importPath": "@yuno-payments/dashboard-design-system",
+      "description": "A table cell for displaying percentage values with optional progress bar visualization. Accepts values in 0-1 decimal range.",
+      "whenToUse": [
+        "Approval rates: Display payment approval percentages",
+        "Conversion rates: Show conversion metrics",
+        "Any rate metric: Decline rates, retry rates, etc."
+      ],
+      "whenNotToUse": [],
+      "props": [
+        {
+          "name": "value",
+          "type": "number | null | undefined",
+          "required": true,
+          "description": "Decimal value (0-1 range)"
+        },
+        {
+          "name": "decimals",
+          "type": "number",
+          "default": "2",
+          "required": false,
+          "description": "Decimal places"
+        },
+        {
+          "name": "showProgressBar",
+          "type": "boolean",
+          "default": "false",
+          "required": false,
+          "description": "Show progress bar"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": true,
+          "description": "Additional CSS classes"
+        }
+      ],
+      "examples": [
+        {
+          "name": "Default",
+          "code": "<DataTableCells value={0.8534} />"
+        },
+        {
+          "name": "FullWidth",
+          "code": "<DataTableCells value={1} showProgressBar />"
+        },
+        {
+          "name": "HighRate",
+          "code": "<DataTableCells value={0.95} showProgressBar />"
+        },
+        {
+          "name": "LowRate",
+          "code": "<DataTableCells value={0.12} showProgressBar />"
+        },
+        {
+          "name": "NoDecimals",
+          "code": "<DataTableCells value={0.856} decimals={0} />"
+        }
+      ]
+    },
+    {
+      "name": "DataTableCells",
+      "category": "molecules",
+      "importPath": "@yuno-payments/dashboard-design-system",
+      "description": "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.",
+      "whenToUse": [
+        "Provider columns: Show payment providers with their logos",
+        "Payment methods: Display card brands, wallets, etc.",
+        "Any icon + label list: Items with remote icons that may overflow"
+      ],
+      "whenNotToUse": [],
+      "props": [
+        {
+          "name": "items",
+          "type": "DataTableIconTextCellItem[]",
+          "required": true,
+          "description": "Array of items with name and optional icon URL"
+        },
+        {
+          "name": "maxVisible",
+          "type": "number",
+          "default": "1",
+          "required": false,
+          "description": "Max visible items"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": true,
+          "description": "Additional CSS classes"
+        }
+      ],
+      "examples": [
+        {
+          "name": "Default",
+          "code": "<DataTableCells items={[{\"name\":\"Stripe\",\"icon\":\"https://via.placeholder.com/16\"}]} />"
+        },
+        {
+          "name": "DuplicateItems",
+          "code": "<DataTableCells items={[{\"name\":\"Stripe\",\"icon\":\"https://via.placeholder.com/16\"},{\"name\":\"Stripe\",\"icon\":\"https://via.placeholder.com/16\"},{\"name\":\"PayU\"}]} />"
+        },
+        {
+          "name": "Empty",
+          "code": "<DataTableCells items={[]} />"
+        },
+        {
+          "name": "ManyItems",
+          "code": "<DataTableCells items={[{\"name\":\"Visa\",\"icon\":\"https://via.placeholder.com/16\"},{\"name\":\"Mastercard\",\"icon\":\"https://via.placeholder.com/16\"},{\"name\":\"Amex\",\"icon\":\"https://via.placeholder.com/16\"},{\"name\":\"PayPal\",\"icon\":\"https://via.placeholder.com/16\"},{\"name\":\"Apple Pay\",\"icon\":\"https://via.placeholder.com/16\"}]} maxVisible={2} />"
+        },
+        {
+          "name": "MultipleItems",
+          "code": "<DataTableCells items={[{\"name\":\"Stripe\",\"icon\":\"https://via.placeholder.com/16\"},{\"name\":\"PayU\",\"icon\":\"https://via.placeholder.com/16\"},{\"name\":\"Adyen\",\"icon\":\"https://via.placeholder.com/16\"}]} />"
+        }
+      ]
+    },
+    {
+      "name": "DataTableCells",
+      "category": "molecules",
+      "importPath": "@yuno-payments/dashboard-design-system",
+      "description": "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).",
+      "whenToUse": [
+        "Created/updated dates: Any timestamp column in a DataTable",
+        "Date columns: Transaction dates, modification dates, etc."
+      ],
+      "whenNotToUse": [],
+      "props": [
+        {
+          "name": "value",
+          "type": "string | Date | null | undefined",
+          "required": true,
+          "description": "ISO date string or Date object"
+        },
+        {
+          "name": "formatFn",
+          "type": "(date: string | Date) => string",
+          "required": true,
+          "description": "Custom date formatter"
+        },
+        {
+          "name": "emptyState",
+          "type": "ReactNode",
+          "default": "null",
+          "required": false,
+          "description": "Content when value is falsy"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": true,
+          "description": "Additional CSS classes"
+        }
+      ],
+      "examples": [
+        {
+          "name": "Default",
+          "code": "<DataTableCells value=\"2024-03-15T14:30:00Z\" />"
+        },
+        {
+          "name": "NullDefault",
+          "code": "<DataTableCells />"
+        },
+        {
+          "name": "NullWithDash",
+          "code": "<DataTableCells emptyState=\"-\" />"
+        },
+        {
+          "name": "RTL",
+          "code": "<DataTableCells value=\"2024-03-15T14:30:00Z\" />"
+        },
+        {
+          "name": "WithCustomFormat",
+          "code": "<DataTableCells value=\"2024-03-15T14:30:00Z\" />"
+        }
+      ]
+    },
+    {
+      "name": "DataTableCells",
+      "category": "molecules",
+      "importPath": "@yuno-payments/dashboard-design-system",
+      "description": "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.",
+      "whenToUse": [
+        "Country columns: Any column displaying ISO 3166-1 alpha-2 country codes",
+        "Payment origin: Show the country of a transaction or payout"
+      ],
+      "whenNotToUse": [],
+      "props": [
+        {
+          "name": "code",
+          "type": "string | null | undefined",
+          "required": true,
+          "description": "ISO 3166-1 alpha-2 country code"
+        },
+        {
+          "name": "showFlag",
+          "type": "boolean",
+          "default": "true",
+          "required": false,
+          "description": "Show flag emoji"
+        },
+        {
+          "name": "showName",
+          "type": "boolean",
+          "default": "false",
+          "required": false,
+          "description": "Show country name instead of code"
+        },
+        {
+          "name": "getCountryName",
+          "type": "(code: string) => string",
+          "required": true,
+          "description": "Custom country name resolver"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": true,
+          "description": "Additional CSS classes"
+        }
+      ],
+      "examples": [
+        {
+          "name": "Default",
+          "code": "<DataTableCells code=\"US\" />"
+        },
+        {
+          "name": "Empty",
+          "code": "<DataTableCells />"
+        },
+        {
+          "name": "Mexico",
+          "code": "<DataTableCells code=\"MX\" />"
+        },
+        {
+          "name": "Peru",
+          "code": "<DataTableCells code=\"PE\" showName />"
+        },
+        {
+          "name": "RTL",
+          "code": "<DataTableCells code=\"US\" />"
+        }
+      ]
+    },
+    {
+      "name": "DataTableCells",
+      "category": "molecules",
+      "importPath": "@yuno-payments/dashboard-design-system",
+      "description": "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).",
+      "whenToUse": [
+        "ID columns: Payment IDs, order IDs, transaction IDs",
+        "Copyable values: Any value users frequently need to copy",
+        "Linked IDs: IDs that also navigate to a detail page"
+      ],
+      "whenNotToUse": [],
+      "props": [
+        {
+          "name": "value",
+          "type": "string",
+          "required": true,
+          "description": "The text value to display and copy"
+        },
+        {
+          "name": "linkTo",
+          "type": "string",
+          "required": true,
+          "description": "Optional navigation link"
+        },
+        {
+          "name": "startIcon",
+          "type": "IconName",
+          "required": true,
+          "description": "Optional icon before the text"
+        },
+        {
+          "name": "startIconTooltip",
+          "type": "string",
+          "required": true,
+          "description": "Tooltip for the start icon"
+        },
+        {
+          "name": "copyTooltip",
+          "type": "string",
+          "default": "\"Copy\"",
+          "required": false,
+          "description": "Tooltip for the copy button"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": true,
+          "description": "Additional CSS classes"
+        }
+      ],
+      "examples": [
+        {
+          "name": "Default",
+          "code": "<DataTableCells value=\"pay_abc123def456ghi789\" />"
+        },
+        {
+          "name": "Empty",
+          "code": "<DataTableCells value=\"\" />"
+        },
+        {
+          "name": "RTL",
+          "code": "<DataTableCells value=\"pay_abc123def456ghi789\" />"
+        },
+        {
+          "name": "ShortValue",
+          "code": "<DataTableCells value=\"ABC123\" />"
+        },
+        {
+          "name": "WithLink",
+          "code": "<DataTableCells value=\"pay_abc123def456ghi789\" linkTo=\"/payments/details/pay_abc123def456ghi789\" />"
+        }
+      ]
+    },
+    {
+      "name": "DataTableCells",
+      "category": "molecules",
+      "importPath": "@yuno-payments/dashboard-design-system",
+      "description": "This showcase demonstrates all 9 DataTable cell components working together in a realistic payments table. Each column uses a different cell type to render its data.",
+      "whenToUse": [],
+      "whenNotToUse": [],
+      "props": [],
+      "examples": []
+    },
+    {
+      "name": "DataTableCells",
+      "category": "molecules",
+      "importPath": "@yuno-payments/dashboard-design-system",
+      "description": "A table cell for displaying formatted currency amounts. Wraps the CurrencyField atom with sensible defaults for table usage.",
+      "whenToUse": [
+        "Payment amounts: Display transaction, payout, or refund amounts",
+        "Financial columns: Any column showing monetary values"
+      ],
+      "whenNotToUse": [],
+      "props": [
+        {
+          "name": "value",
+          "type": "number | null | undefined",
+          "required": true,
+          "description": "The numeric amount"
+        },
+        {
+          "name": "currency",
+          "type": "string",
+          "default": "\"USD\"",
+          "required": false,
+          "description": "ISO 4217 currency code"
+        },
+        {
+          "name": "locales",
+          "type": "string | string[]",
+          "required": true,
+          "description": "Override locale for formatting"
+        },
+        {
+          "name": "size",
+          "type": "\"xs\" | \"sm\" | \"base\"",
+          "default": "\"xs\"",
+          "required": false,
+          "description": "Size variant"
+        },
+        {
+          "name": "showCurrencyCode",
+          "type": "boolean",
+          "default": "true",
+          "required": false,
+          "description": "Show currency code"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": true,
+          "description": "Additional CSS classes"
+        }
+      ],
+      "examples": [
+        {
+          "name": "Default",
+          "code": "<DataTableCells value={1234.56} currency=\"USD\" />"
+        },
+        {
+          "name": "LargeAmount",
+          "code": "<DataTableCells value={1234567.89} currency=\"USD\" />"
+        },
+        {
+          "name": "NullValue",
+          "code": "<DataTableCells currency=\"USD\" />"
+        },
+        {
+          "name": "RTL",
+          "code": "<DataTableCells value={1234.56} currency=\"USD\" />"
+        },
+        {
+          "name": "WithBRL",
+          "code": "<DataTableCells value={9999.99} currency=\"BRL\" locales=\"pt-BR\" />"
+        }
+      ]
+    },
     {
       "name": "DataTableListCell",
       "category": "molecules",