@olwiba/ui 0.2.19 → 0.2.21

package/src/marketing/StepsSection.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import * as React from 'react';
-import { cn, useUIVariant } from '@olwiba/cn';
+import { cn } from '@olwiba/cn';
+import { useSectionSurface, type MarketingSurface } from './section-surface';
 import { SectionTitle } from './SectionTitle';
 import { FadeIn } from '../motion/FadeIn';
 
@@ -26,6 +27,8 @@ export interface StepsSectionProps {
   variant?: 'default' | 'timeline';
   /** Timeline only — step groups with optional interstitial content; overrides `steps`. Numbering continues across groups. */
   groups?: StepGroup[];
+  /** How the section sits on the page. @default 'card' */
+  surface?: MarketingSurface;
 }
 
 function TimelineGroup({
@@ -88,14 +91,9 @@ export function StepsSection({
   steps,
   variant = 'default',
   groups,
+  surface,
 }: StepsSectionProps) {
-  const mode = useUIVariant();
-  const sectionClasses = cn(
-    'overflow-hidden bg-card',
-    mode === 'smooth' && 'rounded-3xl border',
-    mode === 'playful' && 'rounded-2xl border-primary/25 border',
-    !mode && 'rounded-2xl border',
-  );
+  const sectionClasses = useSectionSurface(surface);
 
   if (variant === 'timeline') {
     const resolvedGroups: StepGroup[] = groups ?? (steps ? [{ steps }] : []);

package/src/marketing/TeamSection.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import { Github, Linkedin, Twitter } from 'lucide-react';
-import { Avatar, AvatarFallback, AvatarImage, cn, useUIVariant } from '@olwiba/cn';
+import { Avatar, AvatarFallback, AvatarImage } from '@olwiba/cn';
+import { useSectionSurface, type MarketingSurface } from './section-surface';
 import { Badge } from '../primitives/Badge';
 
 export interface TeamMember {
@@ -49,6 +50,8 @@ export interface TeamSectionProps {
   badge?: string;
   title?: string;
   description?: string;
+  /** How the section sits on the page. @default 'card' */
+  surface?: MarketingSurface;
 }
 
 export function TeamSection({
@@ -56,14 +59,9 @@ export function TeamSection({
   badge = 'Team',
   title = 'The people behind Olwiba',
   description = 'A small team with deep experience in design systems, open source, and developer tooling.',
+  surface,
 }: TeamSectionProps) {
-  const mode = useUIVariant();
-  const sectionClasses = cn(
-    'overflow-hidden bg-card',
-    mode === 'smooth' && 'rounded-3xl border',
-    mode === 'playful' && 'rounded-2xl border-primary/25 border',
-    !mode && 'rounded-2xl border',
-  );
+  const sectionClasses = useSectionSurface(surface);
   return (
     <section className={sectionClasses}>
       <div className="px-6 py-14 sm:px-10 sm:py-20">

package/src/marketing/TechStackSection.tsx

@@ -4,6 +4,7 @@ import type { LucideIcon } from 'lucide-react';
 import { cn, useUIVariant } from '@olwiba/cn';
 import { SectionTitle } from './SectionTitle';
 import { StaggerChildren } from '../motion/StaggerChildren';
+import { useSectionSurface, type MarketingSurface } from './section-surface';
 
 export interface TechStackItem {
   icon: LucideIcon;
@@ -17,6 +18,8 @@ export interface TechStackSectionProps {
   title?: string;
   description?: string;
   items: TechStackItem[];
+  /** How the section sits on the page. @default 'card' */
+  surface?: MarketingSurface;
 }
 
 export function TechStackSection({
@@ -24,14 +27,11 @@ export function TechStackSection({
   title = 'The stack',
   description,
   items,
+  surface,
 }: TechStackSectionProps) {
+  // Still read directly: `mode` also drives the per-item tile rounding below.
   const mode = useUIVariant();
-  const sectionClasses = cn(
-    'overflow-hidden bg-card',
-    mode === 'smooth' && 'rounded-3xl border',
-    mode === 'playful' && 'rounded-2xl border-primary/25 border',
-    !mode && 'rounded-2xl border',
-  );
+  const sectionClasses = useSectionSurface(surface);
 
   return (
     <section className={sectionClasses}>

package/src/marketing/TestimonialsSection.tsx

@@ -1,9 +1,9 @@
 'use client';
 
-import { cn, useUIVariant } from '@olwiba/cn';
 import { TestimonialCard } from '../components/TestimonialCard';
 import { SectionTitle } from './SectionTitle';
 import { StaggerChildren } from '../motion/StaggerChildren';
+import { useSectionSurface, type MarketingSurface } from './section-surface';
 
 export interface TestimonialsSectionProps {
   title?: string;
@@ -18,6 +18,8 @@ export interface TestimonialsSectionProps {
     initials?: string;
     rating?: number;
   }>;
+  /** How the section sits on the page. @default 'card' */
+  surface?: MarketingSurface;
 }
 
 export function TestimonialsSection({
@@ -25,14 +27,9 @@ export function TestimonialsSection({
   description = "Here's what engineers and product teams say after using Olwiba in production.",
   badge = 'Testimonials',
   testimonials,
+  surface,
 }: TestimonialsSectionProps) {
-  const mode = useUIVariant()
-  const sectionClasses = cn(
-    'overflow-hidden bg-card',
-    mode === 'smooth' && 'rounded-3xl border',
-    mode === 'playful' && 'rounded-2xl border-primary/25 border',
-    !mode && 'rounded-2xl border',
-  )
+  const sectionClasses = useSectionSurface(surface);
   return (
     <section className={sectionClasses}>
       <div className="px-6 py-14 sm:px-10 sm:py-20">

package/src/marketing/section-surface.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import * as React from 'react';
+import { cn, useUIVariant } from '@olwiba/cn';
+
+/**
+ * How a marketing section sits on the page.
+ *
+ * Every section used to hard-code the same island — an opaque `bg-card` panel
+ * with a border and a radius — which is right for a page that is only its
+ * sections, and wrong for one with an ambient background behind it: a run of
+ * opaque slabs blocks the thing that makes the page feel alive.
+ *
+ * - `'card'` — the opaque island. Contained, high contrast, reads as a panel.
+ * - `'soft'` — translucent and blurred. Still a shape, but the page behind it
+ *   shows through, which is the treatment that works over an aura or gradient.
+ * - `'plain'` — no panel at all. The content sits directly on the page.
+ *
+ * `'card'` stays the default so nothing changes for a page that never sets it.
+ */
+export type MarketingSurface = 'card' | 'soft' | 'plain';
+
+const MarketingSurfaceContext = React.createContext<MarketingSurface | undefined>(undefined);
+
+/**
+ * Sets the default surface for every marketing section beneath it.
+ *
+ * Page-level rather than per-section because "this page has an ambient
+ * background, so its sections should not be opaque" is one decision, and making
+ * it once beats repeating it on every section and having a new section silently
+ * default back to an island.
+ */
+export function MarketingSurfaceProvider({
+  surface,
+  children,
+}: {
+  surface: MarketingSurface | undefined;
+  children: React.ReactNode;
+}) {
+  return (
+    <MarketingSurfaceContext.Provider value={surface}>{children}</MarketingSurfaceContext.Provider>
+  );
+}
+
+export function useMarketingSurface(): MarketingSurface | undefined {
+  return React.useContext(MarketingSurfaceContext);
+}
+
+/**
+ * The section wrapper's classes for the resolved surface and UI mode.
+ *
+ * `overflow-hidden` is unconditional on every surface, including `'plain'` —
+ * the marquee and carousel sections clip their own content against it, so
+ * dropping it with the panel would let them bleed across the page.
+ *
+ * Resolution order is prop, then `MarketingSurfaceProvider`, then `'card'`.
+ * Both context reads happen every render rather than short-circuiting on the
+ * prop: `modeProp ?? useHook()` skips a hook call and changes hook order
+ * between renders, which is the exact bug @olwiba/cn 0.1.28 and 0.1.30 fixed in
+ * `Toaster` and `Input`.
+ *
+ * Only `smooth`, `playful` and unset are branched on. olwibaCN's source has a
+ * fourth `glass` variant, but the published `UIVariant` type does not carry it
+ * yet, so a branch for it does not typecheck here.
+ */
+export function useSectionSurface(override?: MarketingSurface): string {
+  const mode = useUIVariant();
+  const contextSurface = useMarketingSurface();
+  const surface = override ?? contextSurface ?? 'card';
+
+  if (surface === 'plain') return 'overflow-hidden';
+
+  if (surface === 'soft') {
+    return cn(
+      'overflow-hidden border backdrop-blur-md',
+      mode === 'smooth' && 'rounded-[2rem] border-border/40 bg-card/40',
+      mode === 'playful' && 'rounded-3xl border-primary/20 bg-card/50',
+      !mode && 'rounded-3xl border-border/50 bg-card/45',
+    );
+  }
+
+  return cn(
+    'overflow-hidden bg-card',
+    mode === 'smooth' && 'rounded-3xl border',
+    mode === 'playful' && 'rounded-2xl border-primary/25 border',
+    !mode && 'rounded-2xl border',
+  );
+}