@opensite/ui 0.8.9 → 0.9.1

package/dist/team-media-showcase.cjs

@@ -31,6 +31,58 @@ var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
 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 getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -407,13 +459,14 @@ var Section = React3__namespace.default.forwardRef(
 );
 Section.displayName = "Section";
 var TeamMemberBackgroundImageCard = React3__namespace.forwardRef(
-  ({ className, imageUrl, imageAlt, children, optixFlowConfig, ...props }, ref) => {
+  ({ className, imageUrl, imageAlt, children, optixFlowConfig, background, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         ref,
         className: cn(
-          "group h-[400px] relative w-full max-w-sm overflow-hidden rounded-xl border border-border bg-card shadow-lg",
+          getNestedCardBg(background, "card"),
+          "group h-[400px] relative w-full max-w-sm overflow-hidden rounded-xl border border-border shadow-lg",
           "transition-all duration-300 ease-in-out",
           className
         ),
@@ -464,6 +517,7 @@ function TeamMediaShowcase({
           imageAlt,
           className: member.cardClassName,
           optixFlowConfig,
+          background,
           children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-full flex-col justify-end p-6 text-card-foreground", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4 transition-transform duration-500 ease-in-out md:group-hover:-translate-y-12", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
               member.name && typeof member.name === "string" && member.name.trim() !== "" && /* @__PURE__ */ jsxRuntime.jsx(
@@ -502,7 +556,7 @@ function TeamMediaShowcase({
         idx
       );
     });
-  }, [itemsSlot, items, optixFlowConfig, memberNameClassName, memberRoleClassName, actionClassName]);
+  }, [itemsSlot, items, optixFlowConfig, memberNameClassName, memberRoleClassName, actionClassName, background]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -518,7 +572,8 @@ function TeamMediaShowcase({
             "div",
             {
               className: cn(
-                "text-md pt-8 uppercase text-muted-foreground tracking-[0.2em] font-semibold",
+                getTextColor(background, "muted"),
+                "text-md pt-8 uppercase tracking-[0.2em] font-semibold",
                 eyebrowClassName
               ),
               children: listEyebrow

package/dist/team-media-showcase.d.cts

@@ -125,6 +125,10 @@ interface TeamMemberBackgroundImageCardProps extends React.HTMLAttributes<HTMLDi
      * Optional Optix Flow configuration for @page-speed/img
      */
     optixFlowConfig?: OptixFlowConfig;
+    /**
+     * Background style variant for dynamic color utilities
+     */
+    background?: SectionBackground;
 }
 /**
  * TeamMemberBackgroundImageCard - Individual card with background image and hover effects

package/dist/team-media-showcase.d.ts

@@ -125,6 +125,10 @@ interface TeamMemberBackgroundImageCardProps extends React.HTMLAttributes<HTMLDi
      * Optional Optix Flow configuration for @page-speed/img
      */
     optixFlowConfig?: OptixFlowConfig;
+    /**
+     * Background style variant for dynamic color utilities
+     */
+    background?: SectionBackground;
 }
 /**
  * TeamMemberBackgroundImageCard - Individual card with background image and hover effects

package/dist/team-media-showcase.js

@@ -10,6 +10,58 @@ import { Img } from '@page-speed/img';
 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 getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -386,13 +438,14 @@ var Section = React3__default.forwardRef(
 );
 Section.displayName = "Section";
 var TeamMemberBackgroundImageCard = React3.forwardRef(
-  ({ className, imageUrl, imageAlt, children, optixFlowConfig, ...props }, ref) => {
+  ({ className, imageUrl, imageAlt, children, optixFlowConfig, background, ...props }, ref) => {
     return /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
         className: cn(
-          "group h-[400px] relative w-full max-w-sm overflow-hidden rounded-xl border border-border bg-card shadow-lg",
+          getNestedCardBg(background, "card"),
+          "group h-[400px] relative w-full max-w-sm overflow-hidden rounded-xl border border-border shadow-lg",
           "transition-all duration-300 ease-in-out",
           className
         ),
@@ -443,6 +496,7 @@ function TeamMediaShowcase({
           imageAlt,
           className: member.cardClassName,
           optixFlowConfig,
+          background,
           children: /* @__PURE__ */ jsxs("div", { className: "relative flex h-full flex-col justify-end p-6 text-card-foreground", children: [
             /* @__PURE__ */ jsx("div", { className: "space-y-4 transition-transform duration-500 ease-in-out md:group-hover:-translate-y-12", children: /* @__PURE__ */ jsxs("div", { children: [
               member.name && typeof member.name === "string" && member.name.trim() !== "" && /* @__PURE__ */ jsx(
@@ -481,7 +535,7 @@ function TeamMediaShowcase({
         idx
       );
     });
-  }, [itemsSlot, items, optixFlowConfig, memberNameClassName, memberRoleClassName, actionClassName]);
+  }, [itemsSlot, items, optixFlowConfig, memberNameClassName, memberRoleClassName, actionClassName, background]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -497,7 +551,8 @@ function TeamMediaShowcase({
             "div",
             {
               className: cn(
-                "text-md pt-8 uppercase text-muted-foreground tracking-[0.2em] font-semibold",
+                getTextColor(background, "muted"),
+                "text-md pt-8 uppercase tracking-[0.2em] font-semibold",
                 eyebrowClassName
               ),
               children: listEyebrow

package/dist/testimonials-carousel-image.d.cts

@@ -1,5 +1,7 @@
 import * as React from 'react';
+import { f as SectionBackground } from './community-initiatives-Bz_A5vLU.cjs';
 import { T as TestimonialItem, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import 'react/jsx-runtime';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
@@ -74,6 +76,10 @@ interface TestimonialsCarouselImageProps {
      * OptixFlow image optimization configuration
      */
     optixFlowConfig?: OptixFlowConfig;
+    /**
+     * Background style for the section
+     */
+    background?: SectionBackground;
 }
 /**
  * TestimonialsCarouselImage - A full-width image carousel testimonial section with

package/dist/testimonials-carousel-image.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
+import { f as SectionBackground } from './community-initiatives-Bi_ClKrO.js';
 import { T as TestimonialItem, O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import 'react/jsx-runtime';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
@@ -74,6 +76,10 @@ interface TestimonialsCarouselImageProps {
      * OptixFlow image optimization configuration
      */
     optixFlowConfig?: OptixFlowConfig;
+    /**
+     * Background style for the section
+     */
+    background?: SectionBackground;
 }
 /**
  * TestimonialsCarouselImage - A full-width image carousel testimonial section with

package/dist/utils.cjs

@@ -52,8 +52,66 @@ function getNestedCardTextColor(parentBg, options) {
   const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
   return isDark ? "text-foreground" : "";
 }
+function getTextColor(parentBg, variant = "default", options) {
+  if (options?.override) return options.override;
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
+function getAccentColor(parentBg, options) {
+  if (options?.override) return options.override;
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-accent-foreground" : "text-primary";
+}
+function getBorderColor(parentBg, variant = "default", options) {
+  if (options?.override) return options.override;
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "border-foreground/20";
+      case "muted":
+        return "border-foreground/10";
+      case "accent":
+        return "border-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "border-border";
+      case "muted":
+        return "border-muted";
+      case "accent":
+        return "border-primary";
+    }
+  }
+}
 
 exports.BRIGHTNESS_CLASS_MAP = BRIGHTNESS_CLASS_MAP;
 exports.cn = cn;
+exports.getAccentColor = getAccentColor;
+exports.getBorderColor = getBorderColor;
 exports.getNestedCardBg = getNestedCardBg;
 exports.getNestedCardTextColor = getNestedCardTextColor;
+exports.getTextColor = getTextColor;

package/dist/utils.d.cts

@@ -111,5 +111,117 @@ declare function getNestedCardBg(parentBg?: SectionBackground, variant?: NestedC
 declare function getNestedCardTextColor(parentBg?: SectionBackground, options?: {
     override?: string;
 }): string;
+/**
+ * Text color variant types for dynamic theming
+ */
+type TextColorVariant = "default" | "muted" | "subtle" | "accent";
+/**
+ * Get the appropriate text color class based on parent Section background.
+ *
+ * This utility provides **context-aware text coloring** that adapts to the parent
+ * Section's background to ensure optimal readability and visual hierarchy.
+ *
+ * **How it works:**
+ * - On **dark backgrounds** (dark, secondary, primary): Uses lighter text colors
+ * - On **light backgrounds** (default, white, gray, muted): Uses darker text colors
+ *
+ * **Variants:**
+ * - `default`: Primary text color (highest contrast)
+ * - `muted`: Secondary text color (medium contrast) - for descriptions, labels
+ * - `subtle`: Tertiary text color (lower contrast) - for captions, metadata
+ * - `accent`: Accent color - for emphasis, links, highlights
+ *
+ * @param parentBg - The parent Section's background variant
+ * @param variant - The type of text color to use (default: 'default')
+ * @param options - Optional configuration for manual override
+ * @returns Tailwind text color class string
+ *
+ * @example
+ * // Muted text for descriptions
+ * <p className={getTextColor(background, 'muted')}>
+ *   This is a description with reduced emphasis
+ * </p>
+ *
+ * @example
+ * // Accent text for links
+ * <a className={getTextColor(background, 'accent')}>
+ *   Learn more
+ * </a>
+ *
+ * @example
+ * // Manual override
+ * <span className={getTextColor(background, 'default', { override: 'text-blue-600' })}>
+ *   Custom color
+ * </span>
+ */
+declare function getTextColor(parentBg?: SectionBackground, variant?: TextColorVariant, options?: {
+    override?: string;
+}): string;
+/**
+ * Get the appropriate accent color class based on parent Section background.
+ *
+ * This utility provides **context-aware accent coloring** for icons, decorations,
+ * and emphasis elements that need to stand out from the background.
+ *
+ * **How it works:**
+ * - On **dark backgrounds**: Uses lighter accent colors for visibility
+ * - On **light backgrounds**: Uses primary brand color for emphasis
+ *
+ * @param parentBg - The parent Section's background variant
+ * @param options - Optional configuration for manual override
+ * @returns Tailwind text color class string (for icons/SVGs)
+ *
+ * @example
+ * // Icon with dynamic accent color
+ * <DynamicIcon className={getAccentColor(background)} />
+ *
+ * @example
+ * // Decorative element
+ * <div className={cn(getAccentColor(background), "absolute top-0 right-0")}>
+ *   <CornerIllustration />
+ * </div>
+ */
+declare function getAccentColor(parentBg?: SectionBackground, options?: {
+    override?: string;
+}): string;
+/**
+ * Border color variant types for dynamic theming
+ */
+type BorderColorVariant = "default" | "muted" | "accent";
+/**
+ * Get the appropriate border color class based on parent Section background.
+ *
+ * This utility provides **context-aware border coloring** that adapts to the parent
+ * Section's background to ensure borders remain visible and aesthetically pleasing.
+ *
+ * **How it works:**
+ * - On **dark backgrounds**: Uses lighter border colors for visibility
+ * - On **light backgrounds**: Uses subtle border colors for elegance
+ *
+ * **Variants:**
+ * - `default`: Standard border color (subtle, elegant)
+ * - `muted`: Very subtle border (minimal contrast)
+ * - `accent`: Accent-colored border (for emphasis)
+ *
+ * @param parentBg - The parent Section's background variant
+ * @param variant - The type of border color to use (default: 'default')
+ * @param options - Optional configuration for manual override
+ * @returns Tailwind border color class string
+ *
+ * @example
+ * // Card with dynamic border
+ * <div className={cn(getBorderColor(background), "border rounded-lg p-6")}>
+ *   Content
+ * </div>
+ *
+ * @example
+ * // Accent border for emphasis
+ * <div className={cn(getBorderColor(background, 'accent'), "border-2 rounded-lg")}>
+ *   Featured content
+ * </div>
+ */
+declare function getBorderColor(parentBg?: SectionBackground, variant?: BorderColorVariant, options?: {
+    override?: string;
+}): string;
 
-export { BRIGHTNESS_CLASS_MAP, type NestedCardBgOptions, type NestedCardVariant, cn, getNestedCardBg, getNestedCardTextColor };
+export { BRIGHTNESS_CLASS_MAP, type BorderColorVariant, type NestedCardBgOptions, type NestedCardVariant, type TextColorVariant, cn, getAccentColor, getBorderColor, getNestedCardBg, getNestedCardTextColor, getTextColor };

package/dist/utils.d.ts

@@ -111,5 +111,117 @@ declare function getNestedCardBg(parentBg?: SectionBackground, variant?: NestedC
 declare function getNestedCardTextColor(parentBg?: SectionBackground, options?: {
     override?: string;
 }): string;
+/**
+ * Text color variant types for dynamic theming
+ */
+type TextColorVariant = "default" | "muted" | "subtle" | "accent";
+/**
+ * Get the appropriate text color class based on parent Section background.
+ *
+ * This utility provides **context-aware text coloring** that adapts to the parent
+ * Section's background to ensure optimal readability and visual hierarchy.
+ *
+ * **How it works:**
+ * - On **dark backgrounds** (dark, secondary, primary): Uses lighter text colors
+ * - On **light backgrounds** (default, white, gray, muted): Uses darker text colors
+ *
+ * **Variants:**
+ * - `default`: Primary text color (highest contrast)
+ * - `muted`: Secondary text color (medium contrast) - for descriptions, labels
+ * - `subtle`: Tertiary text color (lower contrast) - for captions, metadata
+ * - `accent`: Accent color - for emphasis, links, highlights
+ *
+ * @param parentBg - The parent Section's background variant
+ * @param variant - The type of text color to use (default: 'default')
+ * @param options - Optional configuration for manual override
+ * @returns Tailwind text color class string
+ *
+ * @example
+ * // Muted text for descriptions
+ * <p className={getTextColor(background, 'muted')}>
+ *   This is a description with reduced emphasis
+ * </p>
+ *
+ * @example
+ * // Accent text for links
+ * <a className={getTextColor(background, 'accent')}>
+ *   Learn more
+ * </a>
+ *
+ * @example
+ * // Manual override
+ * <span className={getTextColor(background, 'default', { override: 'text-blue-600' })}>
+ *   Custom color
+ * </span>
+ */
+declare function getTextColor(parentBg?: SectionBackground, variant?: TextColorVariant, options?: {
+    override?: string;
+}): string;
+/**
+ * Get the appropriate accent color class based on parent Section background.
+ *
+ * This utility provides **context-aware accent coloring** for icons, decorations,
+ * and emphasis elements that need to stand out from the background.
+ *
+ * **How it works:**
+ * - On **dark backgrounds**: Uses lighter accent colors for visibility
+ * - On **light backgrounds**: Uses primary brand color for emphasis
+ *
+ * @param parentBg - The parent Section's background variant
+ * @param options - Optional configuration for manual override
+ * @returns Tailwind text color class string (for icons/SVGs)
+ *
+ * @example
+ * // Icon with dynamic accent color
+ * <DynamicIcon className={getAccentColor(background)} />
+ *
+ * @example
+ * // Decorative element
+ * <div className={cn(getAccentColor(background), "absolute top-0 right-0")}>
+ *   <CornerIllustration />
+ * </div>
+ */
+declare function getAccentColor(parentBg?: SectionBackground, options?: {
+    override?: string;
+}): string;
+/**
+ * Border color variant types for dynamic theming
+ */
+type BorderColorVariant = "default" | "muted" | "accent";
+/**
+ * Get the appropriate border color class based on parent Section background.
+ *
+ * This utility provides **context-aware border coloring** that adapts to the parent
+ * Section's background to ensure borders remain visible and aesthetically pleasing.
+ *
+ * **How it works:**
+ * - On **dark backgrounds**: Uses lighter border colors for visibility
+ * - On **light backgrounds**: Uses subtle border colors for elegance
+ *
+ * **Variants:**
+ * - `default`: Standard border color (subtle, elegant)
+ * - `muted`: Very subtle border (minimal contrast)
+ * - `accent`: Accent-colored border (for emphasis)
+ *
+ * @param parentBg - The parent Section's background variant
+ * @param variant - The type of border color to use (default: 'default')
+ * @param options - Optional configuration for manual override
+ * @returns Tailwind border color class string
+ *
+ * @example
+ * // Card with dynamic border
+ * <div className={cn(getBorderColor(background), "border rounded-lg p-6")}>
+ *   Content
+ * </div>
+ *
+ * @example
+ * // Accent border for emphasis
+ * <div className={cn(getBorderColor(background, 'accent'), "border-2 rounded-lg")}>
+ *   Featured content
+ * </div>
+ */
+declare function getBorderColor(parentBg?: SectionBackground, variant?: BorderColorVariant, options?: {
+    override?: string;
+}): string;
 
-export { BRIGHTNESS_CLASS_MAP, type NestedCardBgOptions, type NestedCardVariant, cn, getNestedCardBg, getNestedCardTextColor };
+export { BRIGHTNESS_CLASS_MAP, type BorderColorVariant, type NestedCardBgOptions, type NestedCardVariant, type TextColorVariant, cn, getAccentColor, getBorderColor, getNestedCardBg, getNestedCardTextColor, getTextColor };

package/dist/utils.js

@@ -50,5 +50,60 @@ function getNestedCardTextColor(parentBg, options) {
   const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
   return isDark ? "text-foreground" : "";
 }
+function getTextColor(parentBg, variant = "default", options) {
+  if (options?.override) return options.override;
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
+function getAccentColor(parentBg, options) {
+  if (options?.override) return options.override;
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-accent-foreground" : "text-primary";
+}
+function getBorderColor(parentBg, variant = "default", options) {
+  if (options?.override) return options.override;
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "border-foreground/20";
+      case "muted":
+        return "border-foreground/10";
+      case "accent":
+        return "border-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "border-border";
+      case "muted":
+        return "border-muted";
+      case "accent":
+        return "border-primary";
+    }
+  }
+}
 
-export { BRIGHTNESS_CLASS_MAP, cn, getNestedCardBg, getNestedCardTextColor };
+export { BRIGHTNESS_CLASS_MAP, cn, getAccentColor, getBorderColor, getNestedCardBg, getNestedCardTextColor, getTextColor };

package/package.json

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