@caratlogic/design-system 0.1.27 → 0.1.29

package/dist/components/molecules/CustomTable/CustomTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CustomTable.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/CustomTable/CustomTable.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5D,wBAAgB,WAAW,CAAC,CAAC,EAAE,EAC7B,IAAI,EACJ,OAAO,EACP,UAAU,EACV,MAA+C,EAC/C,SAAc,EACd,YAAiB,EACjB,eAAuB,EACvB,WAAmB,EACnB,iBAAyB,EACzB,UAAU,EACV,eAAuB,EACvB,cAAc,EACd,iBAAiB,GAClB,EAAE,gBAAgB,CAAC,CAAC,CAAC,2CAqKrB"}
+{"version":3,"file":"CustomTable.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/CustomTable/CustomTable.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5D,wBAAgB,WAAW,CAAC,CAAC,EAAE,EAC7B,IAAI,EACJ,OAAO,EACP,UAAU,EACV,MAA+C,EAC/C,SAAc,EACd,YAAiB,EACjB,eAAuB,EACvB,WAAmB,EACnB,iBAAyB,EACzB,UAAU,EACV,eAAuB,EACvB,cAAc,EACd,iBAAiB,GAClB,EAAE,gBAAgB,CAAC,CAAC,CAAC,2CAuKrB"}

package/dist/components/molecules/CustomTable/CustomTable.utils.d.ts

@@ -1,7 +1,10 @@
 import type { ReactNode } from 'react';
 import type { Column } from './CustomTable.types';
 export declare function alignClass(align?: 'left' | 'right' | 'center'): string;
-/** 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.
+ */
 export declare function stickyActionsHeaderClass(): string;
 /** Sticky right-pinned body cell for an `actions` column (opaque per alternating row). */
 export declare function stickyActionsCellClass(isEven: boolean): string;

package/dist/components/molecules/CustomTable/CustomTable.utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CustomTable.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/CustomTable/CustomTable.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAElD,wBAAgB,UAAU,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAMtE;AAKD,+DAA+D;AAC/D,wBAAgB,wBAAwB,IAAI,MAAM,CAEjD;AAED,0FAA0F;AAC1F,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,OAAO,GAAG,MAAM,CAM9D;AAED,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,SAAS,CAItE"}
+{"version":3,"file":"CustomTable.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/CustomTable/CustomTable.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAElD,wBAAgB,UAAU,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAMtE;AAKD;;;GAGG;AACH,wBAAgB,wBAAwB,IAAI,MAAM,CAEjD;AAED,0FAA0F;AAC1F,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,OAAO,GAAG,MAAM,CAM9D;AAED,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,SAAS,CAItE"}

package/dist/components/molecules/SegmentedControl/SegmentedControl.utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/SegmentedControl/SegmentedControl.utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,4BAA4B,EAC5B,uBAAuB,EACxB,MAAM,0BAA0B,CAAC;AAElC,kGAAkG;AAClG,wBAAgB,UAAU,CAAC,OAAO,EAAE,uBAAuB,EAAE,cAAc,EAAE,OAAO,GAAG,OAAO,CAE7F;AAED,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,uBAAuB,EAAE,QAAQ,EAAE,OAAO,GAAG,MAAM,CAK5F;AAED,wBAAgB,mBAAmB,CACjC,OAAO,EAAE,uBAAuB,EAChC,QAAQ,EAAE,OAAO,EACjB,UAAU,EAAE,OAAO,EACnB,QAAQ,UAAQ,GACf,MAAM,CAiBR;AAED,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,GAAG,MAAM,CAQ7E;AAED,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,4BAA4B,GAAG,MAAM,CAIhF;AAED,wBAAgB,uBAAuB,CAAC,QAAQ,EAAE,OAAO,GAAG,MAAM,CAEjE"}
+{"version":3,"file":"SegmentedControl.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/SegmentedControl/SegmentedControl.utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,4BAA4B,EAC5B,uBAAuB,EACxB,MAAM,0BAA0B,CAAC;AAElC,kGAAkG;AAClG,wBAAgB,UAAU,CAAC,OAAO,EAAE,uBAAuB,EAAE,cAAc,EAAE,OAAO,GAAG,OAAO,CAE7F;AAMD,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,uBAAuB,EAAE,QAAQ,EAAE,OAAO,GAAG,MAAM,CAS5F;AAED,wBAAgB,mBAAmB,CACjC,OAAO,EAAE,uBAAuB,EAChC,QAAQ,EAAE,OAAO,EACjB,UAAU,EAAE,OAAO,EACnB,QAAQ,UAAQ,GACf,MAAM,CAqBR;AAED,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,GAAG,MAAM,CAQ7E;AAED,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,4BAA4B,GAAG,MAAM,CAIhF;AAED,wBAAgB,uBAAuB,CAAC,QAAQ,EAAE,OAAO,GAAG,MAAM,CAEjE"}

package/dist/index.cjs.js

@@ -21316,9 +21316,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) {
@@ -21346,7 +21349,7 @@ function CustomTable({ data, columns, expandable, rowKey = (row) => row.id, clas
             ? selectedIds.filter((id) => id !== key)
             : [...selectedIds, key]);
     };
-    return (jsxRuntime.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: [jsxRuntime.jsx("div", { className: "overflow-auto flex-1 isolate", children: jsxRuntime.jsxs("table", { "data-slot": "table", className: "min-w-full w-full text-left text-sm", children: [jsxRuntime.jsx("thead", { className: "sticky top-0 z-10 border-b border-border !bg-table-header", children: jsxRuntime.jsxs("tr", { children: [expandable && (jsxRuntime.jsx("th", { className: "h-12 w-[52px] min-w-[52px] whitespace-nowrap px-3 text-left align-middle text-secondary-foreground" })), enableSelection && (jsxRuntime.jsx("th", { className: "h-12 w-[52px] min-w-[52px] whitespace-nowrap px-3 text-left align-middle", children: jsxRuntime.jsx(Checkbox, { checked: allSelected
+    return (jsxRuntime.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: [jsxRuntime.jsx("div", { className: "overflow-auto flex-1 isolate", children: jsxRuntime.jsxs("table", { "data-slot": "table", className: "min-w-full w-full text-left text-sm", children: [jsxRuntime.jsx("thead", { className: "sticky top-0 z-40 border-b border-border !bg-table-header", children: jsxRuntime.jsxs("tr", { children: [expandable && (jsxRuntime.jsx("th", { className: "h-12 w-[52px] min-w-[52px] whitespace-nowrap px-3 text-left align-middle text-secondary-foreground" })), enableSelection && (jsxRuntime.jsx("th", { className: "h-12 w-[52px] min-w-[52px] whitespace-nowrap px-3 text-left align-middle", children: jsxRuntime.jsx(Checkbox, { checked: allSelected
                                                 ? true
                                                 : someSelected
                                                     ? 'indeterminate'
@@ -38304,23 +38307,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'
@@ -38328,7 +38338,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');
 }
 
 /**