@caratlogic/design-system 0.1.27 → 0.1.28

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

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