@caratlogic/design-system 0.1.27 → 0.1.29

package/dist/index.esm.js

@@ -21286,9 +21286,12 @@ function alignClass(align) {
             : '';
 }
 const STICKY_ACTIONS_BASE = 'sticky !right-0 w-[92px] min-w-[92px] max-w-[92px] px-2 text-center before:pointer-events-none before:absolute before:left-0 before:top-0 before:h-full before:w-px before:bg-border before:content-[""] shadow-[-3px_0_6px_-3px_#00000014]';
-/** Sticky right-pinned header cell for an `actions` column. */
+/**
+ * Sticky right-pinned header cell for an `actions` column. Being sticky itself it no longer
+ * rides the sticky <thead>, so it needs its own `top-0` or it scrolls away with the rows.
+ */
 function stickyActionsHeaderClass() {
-    return cn(STICKY_ACTIONS_BASE, 'z-40 bg-table-header');
+    return cn(STICKY_ACTIONS_BASE, 'top-0 z-40 bg-table-header');
 }
 /** Sticky right-pinned body cell for an `actions` column (opaque per alternating row). */
 function stickyActionsCellClass(isEven) {
@@ -21316,7 +21319,7 @@ function CustomTable({ data, columns, expandable, rowKey = (row) => row.id, clas
             ? selectedIds.filter((id) => id !== key)
             : [...selectedIds, key]);
     };
-    return (jsxs("div", { className: `h-full w-full flex flex-col overflow-hidden rounded-lg border border-border bg-card ${className}`, "data-slot": "table-container", children: [jsx("div", { className: "overflow-auto flex-1 isolate", children: jsxs("table", { "data-slot": "table", className: "min-w-full w-full text-left text-sm", children: [jsx("thead", { className: "sticky top-0 z-10 border-b border-border !bg-table-header", children: jsxs("tr", { children: [expandable && (jsx("th", { className: "h-12 w-[52px] min-w-[52px] whitespace-nowrap px-3 text-left align-middle text-secondary-foreground" })), enableSelection && (jsx("th", { className: "h-12 w-[52px] min-w-[52px] whitespace-nowrap px-3 text-left align-middle", children: jsx(Checkbox, { checked: allSelected
+    return (jsxs("div", { className: `h-full w-full flex flex-col overflow-hidden rounded-lg border border-border bg-card ${className}`, "data-slot": "table-container", children: [jsx("div", { className: "overflow-auto flex-1 isolate", children: jsxs("table", { "data-slot": "table", className: "min-w-full w-full text-left text-sm", children: [jsx("thead", { className: "sticky top-0 z-40 border-b border-border !bg-table-header", children: jsxs("tr", { children: [expandable && (jsx("th", { className: "h-12 w-[52px] min-w-[52px] whitespace-nowrap px-3 text-left align-middle text-secondary-foreground" })), enableSelection && (jsx("th", { className: "h-12 w-[52px] min-w-[52px] whitespace-nowrap px-3 text-left align-middle", children: jsx(Checkbox, { checked: allSelected
                                                 ? true
                                                 : someSelected
                                                     ? 'indeterminate'
@@ -38274,23 +38277,30 @@ const NumberedStepCard = ({ step, title, description, className, }) => {
 function hasDetails(variant, hasDescription) {
     return variant === 'default' && hasDescription;
 }
+/** Dark mode: `--primary` is too dim on near-black, so the detailed active state uses the design's lighter green. */
+const DARK_ACTIVE_GREEN = 'dark:border-[#6FB98A]';
+const DARK_ACTIVE_GREEN_TEXT = 'dark:text-[#6FB98A]';
 function getListClassName(variant, detailed) {
-    return cn('inline-flex w-full items-center gap-1 bg-muted p-1', detailed ? 'rounded-xl' : variant === 'bordered' ? 'rounded-lg' : 'rounded-md');
+    if (detailed) {
+        // Light: a faint primary tint. Dark: `--muted` is a light overlay that would outshine the active segment.
+        return 'inline-flex w-full items-center gap-1 rounded-xl border border-transparent bg-primary/5 p-1 dark:border-border dark:bg-black/25';
+    }
+    return cn('inline-flex w-full items-center gap-1 bg-muted p-1', variant === 'bordered' ? 'rounded-lg' : 'rounded-md');
 }
 function getSegmentClassName(variant, isActive, isDisabled, detailed = false) {
-    return cn('inline-flex cursor-pointer items-center justify-center gap-2 border px-3 text-sm font-medium transition-colors disabled:cursor-not-allowed', 'outline-none focus-visible:ring-2 focus-visible:ring-primary/30', detailed ? 'min-h-11 rounded-lg py-2 font-semibold' : 'h-7 rounded-md', 
+    return cn('inline-flex cursor-pointer items-center justify-center gap-2 border px-3 text-sm font-medium transition-colors disabled:cursor-not-allowed', 'outline-none focus-visible:ring-2 focus-visible:ring-primary/30', detailed ? 'min-h-11 rounded-lg border-2 py-2 font-semibold' : 'h-7 rounded-md', 
     // Bordered tabs size to their content (Figma "Advance Tabs"); the others stretch to equal width.
     variant === 'bordered' ? 'shrink-0' : 'flex-1', 
     // Every segment carries a border so the active one's primary border doesn't shift the layout.
     isActive
-        ? cn('border-primary bg-card shadow-xs', detailed ? 'text-primary dark:text-foreground' : 'text-primary')
-        : cn('border-transparent', variant === 'bordered' ? 'text-foreground' : 'text-muted-foreground', 'hover:text-foreground'), isDisabled && 'cursor-not-allowed opacity-50');
+        ? cn('border-primary bg-card shadow-xs', detailed ? cn('text-primary dark:bg-muted dark:text-foreground dark:shadow-none', DARK_ACTIVE_GREEN) : 'text-primary')
+        : cn('border-transparent', variant === 'bordered' || detailed ? 'text-secondary-foreground' : 'text-muted-foreground', variant === 'bordered' && 'text-foreground', 'hover:text-foreground'), isDisabled && 'cursor-not-allowed opacity-50');
 }
 function getIconClassName(detailed, isActive) {
     if (!detailed) {
         return 'inline-flex shrink-0 items-center [&_svg]:h-4 [&_svg]:w-4';
     }
-    return cn('inline-flex size-7 shrink-0 items-center justify-center rounded-full text-sm font-semibold [&_svg]:size-4', isActive ? 'bg-primary/10 text-primary' : 'bg-foreground/5 text-muted-foreground');
+    return cn('inline-flex size-7 shrink-0 items-center justify-center rounded-full text-sm font-semibold [&_svg]:size-4', isActive ? cn('bg-primary/10 text-primary dark:bg-primary/25', DARK_ACTIVE_GREEN_TEXT) : 'bg-foreground/5 text-muted-foreground');
 }
 function getContentClassName(layout) {
     return layout === 'inline'
@@ -38298,7 +38308,7 @@ function getContentClassName(layout) {
         : 'flex min-w-0 flex-col items-center gap-0.5';
 }
 function getDescriptionClassName(isActive) {
-    return cn('truncate text-xs font-normal', isActive ? 'text-primary' : 'text-muted-foreground');
+    return cn('truncate text-xs font-normal', isActive ? cn('text-primary', DARK_ACTIVE_GREEN_TEXT) : 'text-muted-foreground');
 }
 
 /**