@caratlogic/design-system 0.1.27 → 0.1.28

package/dist/index.esm.js

@@ -38274,23 +38274,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 +38305,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');
 }
 
 /**