@caratlogic/design-system 0.1.50 → 0.1.52

package/dist/index.esm.js

@@ -26488,6 +26488,22 @@ function pinnedHeaderClass() {
 function pinnedCellClass(pinnedBg) {
     return cn('sticky right-0 z-10', PINNED_BEFORE, PINNED_SHADOW, pinnedBg);
 }
+// Dark badge backgrounds sit too close to the dark card, so dark mode tints with the status colour itself.
+const ROW_TONE = {
+    warning: 'bg-badge-amber-bg/40 hover:bg-badge-amber-bg/60 dark:bg-warning/15 dark:hover:bg-warning/25',
+    info: 'bg-badge-blue-bg/40 hover:bg-badge-blue-bg/60 dark:bg-info/15 dark:hover:bg-info/25',
+};
+// The pinned cell must stay opaque, so the tint is an overlay painted under its content.
+const PINNED_TONE = {
+    warning: 'after:bg-badge-amber-bg/40 dark:after:bg-warning/15',
+    info: 'after:bg-badge-blue-bg/40 dark:after:bg-info/15',
+};
+function rowToneClass(tone) {
+    return ROW_TONE[tone];
+}
+function pinnedToneClass(tone) {
+    return cn('after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:content-[""]', PINNED_TONE[tone]);
+}
 const PINNED_RIGHT_WIDTH = '72px';
 /** Width for a header/body/filter cell: the resized width var while resized or dragging, a fixed width for the pinned actions column. */
 function getColumnWidthStyle(key, isSized, isPinnedRight) {
@@ -27102,7 +27118,7 @@ function DocumentDetailSkeleton({ aside = 'payment', sections = 3, label = 'Load
     return (jsxs("div", { role: "status", "aria-busy": "true", "aria-label": label, className: "space-y-4", children: [jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [jsxs("div", { className: "flex items-center gap-3", children: [jsx(SquareSkeleton, { height: 14, width: 80, rounded: "full" }), jsx("span", { className: "h-5 w-px bg-border" }), jsx(SquareSkeleton, { height: 28, width: 200, rounded: "md" }), jsx(SquareSkeleton, { height: 22, width: 72, rounded: "full" })] }), jsxs("div", { className: "flex items-center gap-2", children: [jsx(SquareSkeleton, { height: 36, width: 112, rounded: "lg" }), jsx(SquareSkeleton, { height: 36, width: 80, rounded: "lg" }), jsx(SquareSkeleton, { height: 36, width: 128, rounded: "lg" }), jsx(SquareSkeleton, { height: 36, width: 36, rounded: "lg" })] })] }), jsxs("section", { "aria-hidden": "true", className: "grid grid-cols-1 overflow-hidden rounded-2xl border border-border bg-card md:grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)]", children: [jsxs("div", { className: "flex flex-col justify-center space-y-3 px-5 py-4 sm:px-7 sm:py-4", children: [jsx(SquareSkeleton, { height: 12, width: 96, rounded: "full" }), jsx(SquareSkeleton, { height: 40, width: 220, rounded: "md" }), aside !== 'none' && (jsxs("div", { className: "w-full max-w-xl space-y-2 pt-1", children: [jsx(SquareSkeleton, { height: 8, className: "w-full", rounded: "full" }), jsxs("div", { className: "flex justify-between", children: [jsx(SquareSkeleton, { height: 11, width: 88, rounded: "full" }), jsx(SquareSkeleton, { height: 11, width: 40, rounded: "full" })] })] }))] }), jsx("div", { className: "border-t border-border bg-muted/40 px-5 py-2 md:border-l md:border-t-0", children: [0, 1, 2, 3].map((i) => (jsxs("div", { className: "flex min-h-10 items-center gap-3 border-b border-border py-1.5 last:border-b-0", children: [jsx(SquareSkeleton, { height: 24, width: 24, rounded: "md" }), jsx(SquareSkeleton, { height: 12, width: 72, rounded: "full" }), jsx(SquareSkeleton, { height: 12, width: 88, rounded: "full", className: "ml-auto" })] }, i))) })] }), Array.from({ length: sections }).map((_, s) => (jsxs("section", { "aria-hidden": "true", className: "overflow-hidden rounded-2xl border border-border bg-card", children: [jsxs("div", { className: "flex items-center gap-2.5 border-b border-border px-4 py-3", children: [jsx(SquareSkeleton, { height: 28, width: 28, rounded: "lg" }), jsx(SquareSkeleton, { height: 15, width: 128, rounded: "full" })] }), jsx("div", { className: "space-y-3 p-4", children: Array.from({ length: s === 1 ? 4 : 2 }).map((__, row) => (jsx(SquareSkeleton, { height: s === 1 ? 36 : 14, className: row % 2 ? 'w-3/4' : 'w-full', rounded: "md" }, row))) })] }, s))), jsx("span", { className: "sr-only", children: label })] }));
 }
 
-function DataEditableTable({ data, columns, onRowClick, enableSelection = false, columnStyles = {}, onEditChange, onSaveRow, sortBy, setSortBy, sortOrder, setSortOrder, saving, selectedRows = [], onSelectionChange, isArchiveView = false, selectionInArchiveView = false, permissionKey = '', columnWidths, onColumnResize, pagination, fetchBusinessContacts, showGrid = true, striped = true, emptyState, loading = false, loadingRows = 10, filterRowLeading, onColumnReorder, }) {
+function DataEditableTable({ data, columns, onRowClick, enableSelection = false, columnStyles = {}, onEditChange, onSaveRow, sortBy, setSortBy, sortOrder, setSortOrder, saving, selectedRows = [], onSelectionChange, isArchiveView = false, selectionInArchiveView = false, permissionKey = '', columnWidths, onColumnResize, pagination, fetchBusinessContacts, showGrid = true, striped = true, emptyState, loading = false, loadingRows = 10, filterRowLeading, onColumnReorder, getRowTone, }) {
     const showSelectionColumn = enableSelection && (!isArchiveView || selectionInArchiveView);
     const vBorder = showGrid ? 'border-r' : '';
     const { localWidths, draggingKey, tableRef, handleResizeMouseDown } = useColumnResize({
@@ -27158,13 +27174,16 @@ function DataEditableTable({ data, columns, onRowClick, enableSelection = false,
                                     const isEditing = editingRow === row.id && editingRow !== null;
                                     const isSaving = savingRow === row.id;
                                     const isSelected = selectedSet.has(row.id);
+                                    const tone = isEditing || isSelected ? undefined : getRowTone?.(row);
                                     const bgClass = isEditing
                                         ? 'bg-warning/10 hover:bg-warning/10'
                                         : isSelected
                                             ? 'bg-primary/10 hover:bg-primary/10'
-                                            : !striped || rowIndex % 2 === 0
-                                                ? 'bg-card hover:bg-secondary'
-                                                : 'bg-background hover:bg-secondary';
+                                            : tone
+                                                ? rowToneClass(tone)
+                                                : !striped || rowIndex % 2 === 0
+                                                    ? 'bg-card hover:bg-secondary'
+                                                    : 'bg-background hover:bg-secondary';
                                     return (jsxs("tr", { className: cn('group/row h-[46px] transition-colors text-sm text-table-cell', bgClass, onRowClick && 'cursor-pointer'), onClick: () => onRowClick?.(row), children: [isArchiveView ? null : (jsx("td", { className: cn('px-3 py-1.5 text-center first:!pl-6 border-b border-solid !border-border', vBorder), children: jsx(Protected, { module: permissionKey, minLevel: PERMISSIONS.WRITE, children: jsx("button", { onClick: (e) => {
                                                             e.stopPropagation();
                                                             handleEditIconClick(row.id, row);
@@ -27182,7 +27201,7 @@ function DataEditableTable({ data, columns, onRowClick, enableSelection = false,
                                                         ? 'bg-[#FEFCE8] dark:bg-[#422006]'
                                                         : isSelected
                                                             ? 'bg-[#EFF6FF] dark:bg-[#172554]'
-                                                            : 'bg-card group-hover/row:bg-table-header'
+                                                            : cn('bg-card group-hover/row:bg-table-header', tone && pinnedToneClass(tone))
                                                     : '';
                                                 return (jsx("td", { className: cn('px-4 py-1.5 first:!pl-6 border-b border-border whitespace-nowrap text-table-cell border-solid !border-border', vBorder, isPinnedRight || col.align === 'center'
                                                         ? 'text-center'