@opensite/ui 0.8.7 → 0.8.8

package/dist/faq-split-help.cjs

@@ -33,6 +33,36 @@ var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrim
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+function getNestedCardBg(parentBg, variant = "muted", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "muted":
+        return "bg-background";
+      case "card":
+        return "bg-card";
+      case "accent":
+        return "bg-accent";
+      case "subtle":
+        return "bg-background/50";
+    }
+  } else {
+    switch (variant) {
+      case "muted":
+        return "bg-muted";
+      case "card":
+        return "bg-card";
+      case "accent":
+        return "bg-accent";
+      case "subtle":
+        return "bg-muted/50";
+    }
+  }
+}
+function getNestedCardTextColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-foreground" : "";
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -1068,7 +1098,9 @@ function FaqSplitHelp({
       "div",
       {
         className: cn(
-          "mt-8 md:mt-16 flex flex-col items-center gap-4 rounded-lg bg-muted p-6 text-center md:flex-row md:justify-between md:text-left lg:p-8",
+          "mt-8 md:mt-16 flex flex-col items-center gap-4 rounded-lg p-6 text-center md:flex-row md:justify-between md:text-left lg:p-8",
+          getNestedCardBg(background),
+          getNestedCardTextColor(background),
           helpSectionClassName
         ),
         children: [
@@ -1100,7 +1132,8 @@ function FaqSplitHelp({
     helpHeading,
     helpDescription,
     helpAction,
-    helpSectionClassName
+    helpSectionClassName,
+    background
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,

package/dist/faq-split-help.js

@@ -11,6 +11,36 @@ import { cva } from 'class-variance-authority';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+function getNestedCardBg(parentBg, variant = "muted", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "muted":
+        return "bg-background";
+      case "card":
+        return "bg-card";
+      case "accent":
+        return "bg-accent";
+      case "subtle":
+        return "bg-background/50";
+    }
+  } else {
+    switch (variant) {
+      case "muted":
+        return "bg-muted";
+      case "card":
+        return "bg-card";
+      case "accent":
+        return "bg-accent";
+      case "subtle":
+        return "bg-muted/50";
+    }
+  }
+}
+function getNestedCardTextColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-foreground" : "";
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -1046,7 +1076,9 @@ function FaqSplitHelp({
       "div",
       {
         className: cn(
-          "mt-8 md:mt-16 flex flex-col items-center gap-4 rounded-lg bg-muted p-6 text-center md:flex-row md:justify-between md:text-left lg:p-8",
+          "mt-8 md:mt-16 flex flex-col items-center gap-4 rounded-lg p-6 text-center md:flex-row md:justify-between md:text-left lg:p-8",
+          getNestedCardBg(background),
+          getNestedCardTextColor(background),
           helpSectionClassName
         ),
         children: [
@@ -1078,7 +1110,8 @@ function FaqSplitHelp({
     helpHeading,
     helpDescription,
     helpAction,
-    helpSectionClassName
+    helpSectionClassName,
+    background
   ]);
   return /* @__PURE__ */ jsx(
     Section,

package/dist/index.cjs

@@ -43,6 +43,41 @@ var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+function getNestedCardBg(parentBg, variant = "muted", options) {
+  if (options?.override) return options.override;
+  if (options?.disableInversion) {
+    return `bg-${variant}`;
+  }
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "muted":
+        return "bg-background";
+      case "card":
+        return "bg-card";
+      case "accent":
+        return "bg-accent";
+      case "subtle":
+        return "bg-background/50";
+    }
+  } else {
+    switch (variant) {
+      case "muted":
+        return "bg-muted";
+      case "card":
+        return "bg-card";
+      case "accent":
+        return "bg-accent";
+      case "subtle":
+        return "bg-muted/50";
+    }
+  }
+}
+function getNestedCardTextColor(parentBg, options) {
+  if (options?.override) return options.override;
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-foreground" : "";
+}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -4585,4 +4620,6 @@ exports.PopoverTrigger = PopoverTrigger;
 exports.Pressable = Pressable;
 exports.Section = Section;
 exports.cn = cn;
+exports.getNestedCardBg = getNestedCardBg;
+exports.getNestedCardTextColor = getNestedCardTextColor;
 exports.useNavigation = useNavigation;

package/dist/index.d.cts

@@ -27,7 +27,7 @@ export { FooterNewsletterMinimal } from './footer-newsletter-minimal.cjs';
 export { FooterCtaSocial } from './footer-cta-social.cjs';
 export { FooterNavSocial } from './footer-nav-social.cjs';
 export { LinkType, UseNavigationArgs, UseNavigationReturn, useNavigation } from './use-navigation.cjs';
-export { cn } from './utils.cjs';
+export { NestedCardBgOptions, NestedCardVariant, cn, getNestedCardBg, getNestedCardTextColor } from './utils.cjs';
 export { A as ActionConfig, h as AuthorInfo, c as BlockActionProps, B as BlockBaseProps, f as BlockBlogProps, b as BlockContentProps, d as BlockLogoProps, e as BlogPostItem, g as BreadcrumbItem, D as DetailItem, F as FeatureItem, I as ImageItem, L as LogoItem, N as NavLinkItem, O as OptixFlowConfig, j as OutcomeItem, i as SectionItem, a as SocialLinkItem, S as StatItem, T as TestimonialItem } from './blocks-Cohq4eio.cjs';
 import 'react';
 import 'react/jsx-runtime';

package/dist/index.d.ts

@@ -27,7 +27,7 @@ export { FooterNewsletterMinimal } from './footer-newsletter-minimal.js';
 export { FooterCtaSocial } from './footer-cta-social.js';
 export { FooterNavSocial } from './footer-nav-social.js';
 export { LinkType, UseNavigationArgs, UseNavigationReturn, useNavigation } from './use-navigation.js';
-export { cn } from './utils.js';
+export { NestedCardBgOptions, NestedCardVariant, cn, getNestedCardBg, getNestedCardTextColor } from './utils.js';
 export { A as ActionConfig, h as AuthorInfo, c as BlockActionProps, B as BlockBaseProps, f as BlockBlogProps, b as BlockContentProps, d as BlockLogoProps, e as BlogPostItem, g as BreadcrumbItem, D as DetailItem, F as FeatureItem, I as ImageItem, L as LogoItem, N as NavLinkItem, O as OptixFlowConfig, j as OutcomeItem, i as SectionItem, a as SocialLinkItem, S as StatItem, T as TestimonialItem } from './blocks-k17uluAz.js';
 import 'react';
 import 'react/jsx-runtime';

package/dist/index.js

@@ -20,6 +20,41 @@ import { serializeForRails, deserializeErrors } from '@page-speed/forms/integrat
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+function getNestedCardBg(parentBg, variant = "muted", options) {
+  if (options?.override) return options.override;
+  if (options?.disableInversion) {
+    return `bg-${variant}`;
+  }
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "muted":
+        return "bg-background";
+      case "card":
+        return "bg-card";
+      case "accent":
+        return "bg-accent";
+      case "subtle":
+        return "bg-background/50";
+    }
+  } else {
+    switch (variant) {
+      case "muted":
+        return "bg-muted";
+      case "card":
+        return "bg-card";
+      case "accent":
+        return "bg-accent";
+      case "subtle":
+        return "bg-muted/50";
+    }
+  }
+}
+function getNestedCardTextColor(parentBg, options) {
+  if (options?.override) return options.override;
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-foreground" : "";
+}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -4522,4 +4557,4 @@ function FooterNavSocial({
   );
 }
 
-export { AboutCultureTabs, AboutExpandableValues, AboutMissionPrinciples, AboutSplitHero, AlternatingBlocks, AnimatedDialog, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CarouselPagination, CommunityInitiatives, Container, DynamicIcon, FooterAnimatedSocial, FooterBackgroundCard, FooterBrandDescription, FooterContactCard, FooterCtaBanner, FooterCtaSocial, FooterLinksGrid, FooterNavSocial, FooterNewsletterGrid, FooterNewsletterMinimal, FooterSimpleCentered, FooterSocialApps, FooterSocialNewsletter, ImageSlider, MediaHoverCtas, PageHeroBanner, Popover, PopoverContent, PopoverTrigger, Pressable, Section, cn, useNavigation };
+export { AboutCultureTabs, AboutExpandableValues, AboutMissionPrinciples, AboutSplitHero, AlternatingBlocks, AnimatedDialog, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CarouselPagination, CommunityInitiatives, Container, DynamicIcon, FooterAnimatedSocial, FooterBackgroundCard, FooterBrandDescription, FooterContactCard, FooterCtaBanner, FooterCtaSocial, FooterLinksGrid, FooterNavSocial, FooterNewsletterGrid, FooterNewsletterMinimal, FooterSimpleCentered, FooterSocialApps, FooterSocialNewsletter, ImageSlider, MediaHoverCtas, PageHeroBanner, Popover, PopoverContent, PopoverTrigger, Pressable, Section, cn, getNestedCardBg, getNestedCardTextColor, useNavigation };

package/dist/registry.cjs

@@ -88,6 +88,36 @@ var BRIGHTNESS_CLASS_MAP = {
   "75": "brightness-75",
   "100": "brightness-100"
 };
+function getNestedCardBg(parentBg, variant = "muted", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "muted":
+        return "bg-background";
+      case "card":
+        return "bg-card";
+      case "accent":
+        return "bg-accent";
+      case "subtle":
+        return "bg-background/50";
+    }
+  } else {
+    switch (variant) {
+      case "muted":
+        return "bg-muted";
+      case "card":
+        return "bg-card";
+      case "accent":
+        return "bg-accent";
+      case "subtle":
+        return "bg-muted/50";
+    }
+  }
+}
+function getNestedCardTextColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-foreground" : "";
+}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -38437,7 +38467,9 @@ function FaqSplitHelp({
       "div",
       {
         className: cn(
-          "mt-8 md:mt-16 flex flex-col items-center gap-4 rounded-lg bg-muted p-6 text-center md:flex-row md:justify-between md:text-left lg:p-8",
+          "mt-8 md:mt-16 flex flex-col items-center gap-4 rounded-lg p-6 text-center md:flex-row md:justify-between md:text-left lg:p-8",
+          getNestedCardBg(background),
+          getNestedCardTextColor(background),
           helpSectionClassName
         ),
         children: [
@@ -38469,7 +38501,8 @@ function FaqSplitHelp({
     helpHeading,
     helpDescription,
     helpAction,
-    helpSectionClassName
+    helpSectionClassName,
+    background
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,

package/dist/registry.js

@@ -48,6 +48,36 @@ var BRIGHTNESS_CLASS_MAP = {
   "75": "brightness-75",
   "100": "brightness-100"
 };
+function getNestedCardBg(parentBg, variant = "muted", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "muted":
+        return "bg-background";
+      case "card":
+        return "bg-card";
+      case "accent":
+        return "bg-accent";
+      case "subtle":
+        return "bg-background/50";
+    }
+  } else {
+    switch (variant) {
+      case "muted":
+        return "bg-muted";
+      case "card":
+        return "bg-card";
+      case "accent":
+        return "bg-accent";
+      case "subtle":
+        return "bg-muted/50";
+    }
+  }
+}
+function getNestedCardTextColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-foreground" : "";
+}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -38397,7 +38427,9 @@ function FaqSplitHelp({
       "div",
       {
         className: cn(
-          "mt-8 md:mt-16 flex flex-col items-center gap-4 rounded-lg bg-muted p-6 text-center md:flex-row md:justify-between md:text-left lg:p-8",
+          "mt-8 md:mt-16 flex flex-col items-center gap-4 rounded-lg p-6 text-center md:flex-row md:justify-between md:text-left lg:p-8",
+          getNestedCardBg(background),
+          getNestedCardTextColor(background),
           helpSectionClassName
         ),
         children: [
@@ -38429,7 +38461,8 @@ function FaqSplitHelp({
     helpHeading,
     helpDescription,
     helpAction,
-    helpSectionClassName
+    helpSectionClassName,
+    background
   ]);
   return /* @__PURE__ */ jsx(
     Section,

package/dist/utils.cjs

@@ -17,6 +17,43 @@ var BRIGHTNESS_CLASS_MAP = {
   "75": "brightness-75",
   "100": "brightness-100"
 };
+function getNestedCardBg(parentBg, variant = "muted", options) {
+  if (options?.override) return options.override;
+  if (options?.disableInversion) {
+    return `bg-${variant}`;
+  }
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "muted":
+        return "bg-background";
+      case "card":
+        return "bg-card";
+      case "accent":
+        return "bg-accent";
+      case "subtle":
+        return "bg-background/50";
+    }
+  } else {
+    switch (variant) {
+      case "muted":
+        return "bg-muted";
+      case "card":
+        return "bg-card";
+      case "accent":
+        return "bg-accent";
+      case "subtle":
+        return "bg-muted/50";
+    }
+  }
+}
+function getNestedCardTextColor(parentBg, options) {
+  if (options?.override) return options.override;
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-foreground" : "";
+}
 
 exports.BRIGHTNESS_CLASS_MAP = BRIGHTNESS_CLASS_MAP;
 exports.cn = cn;
+exports.getNestedCardBg = getNestedCardBg;
+exports.getNestedCardTextColor = getNestedCardTextColor;

package/dist/utils.d.cts

@@ -1,4 +1,12 @@
 import { ClassValue } from 'clsx';
+import { f as SectionBackground } from './community-initiatives-Sm_ZSgyv.cjs';
+import 'react';
+import './pattern-background-a7gKHzHy.cjs';
+import 'react/jsx-runtime';
+import './blocks-Cohq4eio.cjs';
+import 'class-variance-authority';
+import './button-variants-lRElsmTc.cjs';
+import 'class-variance-authority/types';
 
 declare function cn(...inputs: ClassValue[]): string;
 /**
@@ -6,5 +14,103 @@ declare function cn(...inputs: ClassValue[]): string;
  * Values 10-40 use arbitrary values for finer control on bright images
  */
 declare const BRIGHTNESS_CLASS_MAP: Record<string, string>;
+/**
+ * Variant types for nested card backgrounds
+ */
+type NestedCardVariant = "muted" | "card" | "accent" | "subtle";
+/**
+ * Options for customizing nested card background behavior
+ */
+interface NestedCardBgOptions {
+    /**
+     * Manual override - bypasses all automatic logic and uses this class directly.
+     * Use this for client-specific customizations or edge cases.
+     *
+     * @example
+     * // Client wants white cards regardless of parent background
+     * getNestedCardBg(background, 'muted', { override: 'bg-white' })
+     */
+    override?: string;
+    /**
+     * Disable smart inversion logic - always use the variant as-is.
+     * Use this when you want consistent backgrounds regardless of parent.
+     *
+     * @example
+     * // Always use bg-muted, even on dark backgrounds
+     * getNestedCardBg(background, 'muted', { disableInversion: true })
+     */
+    disableInversion?: boolean;
+}
+/**
+ * Get the appropriate background class for nested cards/callouts based on parent Section background.
+ *
+ * This utility implements **context-aware background inversion** to ensure nested elements
+ * maintain proper contrast and visibility across all Section background variants.
+ *
+ * **How it works:**
+ * - On **dark backgrounds** (dark, secondary, primary): Uses lighter backgrounds for contrast
+ * - On **light backgrounds** (default, white, gray, muted): Uses darker backgrounds for elevation
+ *
+ * **Variants:**
+ * - `muted`: Standard card background with subtle contrast
+ * - `card`: Semantic card background (similar to muted)
+ * - `accent`: Accent-colored background for emphasis
+ * - `subtle`: Semi-transparent background for layering
+ *
+ * @param parentBg - The parent Section's background variant
+ * @param variant - The type of nested card background to use (default: 'muted')
+ * @param options - Optional configuration for overrides or disabling inversion
+ * @returns Tailwind background class string
+ *
+ * @example
+ * // Standard usage - auto-inverts based on parent
+ * <div className={cn(getNestedCardBg(background), "p-6 rounded-lg")}>
+ *
+ * @example
+ * // Accent variant
+ * <div className={cn(getNestedCardBg(background, 'accent'), "p-6 rounded-lg")}>
+ *
+ * @example
+ * // Client override - always white
+ * <div className={cn(getNestedCardBg(background, 'muted', { override: 'bg-white' }), "p-6")}>
+ *
+ * @example
+ * // Disable inversion - always use bg-muted
+ * <div className={cn(getNestedCardBg(background, 'muted', { disableInversion: true }), "p-6")}>
+ */
+declare function getNestedCardBg(parentBg?: SectionBackground, variant?: NestedCardVariant, options?: NestedCardBgOptions): string;
+/**
+ * Get the appropriate text color class for nested cards/callouts based on parent Section background.
+ *
+ * This companion function to `getNestedCardBg` ensures text remains visible when using
+ * inverted backgrounds on dark parent Sections.
+ *
+ * **How it works:**
+ * - On **dark backgrounds**: Returns 'text-foreground' to ensure text is visible on the lighter card
+ * - On **light backgrounds**: Returns empty string (text inherits from parent)
+ *
+ * @param parentBg - The parent Section's background variant
+ * @param options - Optional configuration for manual override
+ * @returns Tailwind text color class string (or empty string)
+ *
+ * @example
+ * // Standard usage with background helper
+ * <div className={cn(
+ *   getNestedCardBg(background),
+ *   getNestedCardTextColor(background),
+ *   "p-6 rounded-lg"
+ * )}>
+ *
+ * @example
+ * // Custom text color override
+ * <div className={cn(
+ *   getNestedCardBg(background),
+ *   getNestedCardTextColor(background, { override: 'text-blue-900' }),
+ *   "p-6"
+ * )}>
+ */
+declare function getNestedCardTextColor(parentBg?: SectionBackground, options?: {
+    override?: string;
+}): string;
 
-export { BRIGHTNESS_CLASS_MAP, cn };
+export { BRIGHTNESS_CLASS_MAP, type NestedCardBgOptions, type NestedCardVariant, cn, getNestedCardBg, getNestedCardTextColor };

package/dist/utils.d.ts

@@ -1,4 +1,12 @@
 import { ClassValue } from 'clsx';
+import { f as SectionBackground } from './community-initiatives-BeWIIjA4.js';
+import 'react';
+import './pattern-background-a7gKHzHy.js';
+import 'react/jsx-runtime';
+import './blocks-k17uluAz.js';
+import 'class-variance-authority';
+import './button-variants-lRElsmTc.js';
+import 'class-variance-authority/types';
 
 declare function cn(...inputs: ClassValue[]): string;
 /**
@@ -6,5 +14,103 @@ declare function cn(...inputs: ClassValue[]): string;
  * Values 10-40 use arbitrary values for finer control on bright images
  */
 declare const BRIGHTNESS_CLASS_MAP: Record<string, string>;
+/**
+ * Variant types for nested card backgrounds
+ */
+type NestedCardVariant = "muted" | "card" | "accent" | "subtle";
+/**
+ * Options for customizing nested card background behavior
+ */
+interface NestedCardBgOptions {
+    /**
+     * Manual override - bypasses all automatic logic and uses this class directly.
+     * Use this for client-specific customizations or edge cases.
+     *
+     * @example
+     * // Client wants white cards regardless of parent background
+     * getNestedCardBg(background, 'muted', { override: 'bg-white' })
+     */
+    override?: string;
+    /**
+     * Disable smart inversion logic - always use the variant as-is.
+     * Use this when you want consistent backgrounds regardless of parent.
+     *
+     * @example
+     * // Always use bg-muted, even on dark backgrounds
+     * getNestedCardBg(background, 'muted', { disableInversion: true })
+     */
+    disableInversion?: boolean;
+}
+/**
+ * Get the appropriate background class for nested cards/callouts based on parent Section background.
+ *
+ * This utility implements **context-aware background inversion** to ensure nested elements
+ * maintain proper contrast and visibility across all Section background variants.
+ *
+ * **How it works:**
+ * - On **dark backgrounds** (dark, secondary, primary): Uses lighter backgrounds for contrast
+ * - On **light backgrounds** (default, white, gray, muted): Uses darker backgrounds for elevation
+ *
+ * **Variants:**
+ * - `muted`: Standard card background with subtle contrast
+ * - `card`: Semantic card background (similar to muted)
+ * - `accent`: Accent-colored background for emphasis
+ * - `subtle`: Semi-transparent background for layering
+ *
+ * @param parentBg - The parent Section's background variant
+ * @param variant - The type of nested card background to use (default: 'muted')
+ * @param options - Optional configuration for overrides or disabling inversion
+ * @returns Tailwind background class string
+ *
+ * @example
+ * // Standard usage - auto-inverts based on parent
+ * <div className={cn(getNestedCardBg(background), "p-6 rounded-lg")}>
+ *
+ * @example
+ * // Accent variant
+ * <div className={cn(getNestedCardBg(background, 'accent'), "p-6 rounded-lg")}>
+ *
+ * @example
+ * // Client override - always white
+ * <div className={cn(getNestedCardBg(background, 'muted', { override: 'bg-white' }), "p-6")}>
+ *
+ * @example
+ * // Disable inversion - always use bg-muted
+ * <div className={cn(getNestedCardBg(background, 'muted', { disableInversion: true }), "p-6")}>
+ */
+declare function getNestedCardBg(parentBg?: SectionBackground, variant?: NestedCardVariant, options?: NestedCardBgOptions): string;
+/**
+ * Get the appropriate text color class for nested cards/callouts based on parent Section background.
+ *
+ * This companion function to `getNestedCardBg` ensures text remains visible when using
+ * inverted backgrounds on dark parent Sections.
+ *
+ * **How it works:**
+ * - On **dark backgrounds**: Returns 'text-foreground' to ensure text is visible on the lighter card
+ * - On **light backgrounds**: Returns empty string (text inherits from parent)
+ *
+ * @param parentBg - The parent Section's background variant
+ * @param options - Optional configuration for manual override
+ * @returns Tailwind text color class string (or empty string)
+ *
+ * @example
+ * // Standard usage with background helper
+ * <div className={cn(
+ *   getNestedCardBg(background),
+ *   getNestedCardTextColor(background),
+ *   "p-6 rounded-lg"
+ * )}>
+ *
+ * @example
+ * // Custom text color override
+ * <div className={cn(
+ *   getNestedCardBg(background),
+ *   getNestedCardTextColor(background, { override: 'text-blue-900' }),
+ *   "p-6"
+ * )}>
+ */
+declare function getNestedCardTextColor(parentBg?: SectionBackground, options?: {
+    override?: string;
+}): string;
 
-export { BRIGHTNESS_CLASS_MAP, cn };
+export { BRIGHTNESS_CLASS_MAP, type NestedCardBgOptions, type NestedCardVariant, cn, getNestedCardBg, getNestedCardTextColor };

package/dist/utils.js

@@ -15,5 +15,40 @@ var BRIGHTNESS_CLASS_MAP = {
   "75": "brightness-75",
   "100": "brightness-100"
 };
+function getNestedCardBg(parentBg, variant = "muted", options) {
+  if (options?.override) return options.override;
+  if (options?.disableInversion) {
+    return `bg-${variant}`;
+  }
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "muted":
+        return "bg-background";
+      case "card":
+        return "bg-card";
+      case "accent":
+        return "bg-accent";
+      case "subtle":
+        return "bg-background/50";
+    }
+  } else {
+    switch (variant) {
+      case "muted":
+        return "bg-muted";
+      case "card":
+        return "bg-card";
+      case "accent":
+        return "bg-accent";
+      case "subtle":
+        return "bg-muted/50";
+    }
+  }
+}
+function getNestedCardTextColor(parentBg, options) {
+  if (options?.override) return options.override;
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-foreground" : "";
+}
 
-export { BRIGHTNESS_CLASS_MAP, cn };
+export { BRIGHTNESS_CLASS_MAP, cn, getNestedCardBg, getNestedCardTextColor };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensite/ui",
-  "version": "0.8.7",
+  "version": "0.8.8",
   "description": "Foundational UI component library for OpenSite Semantic Site Builder with tree-shakable exports and abstract styling",
   "keywords": [
     "react",