@opensite/ui 0.5.8 → 0.6.0

package/dist/about-split-hero.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React from 'react';
-import React__default, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Img } from '@page-speed/img';
@@ -534,34 +534,6 @@ function processSvgForCurrentColor(svg) {
   );
   return processed;
 }
-var maxWidthStyles = {
-  sm: "max-w-screen-sm",
-  md: "max-w-screen-md",
-  lg: "max-w-screen-lg",
-  xl: "max-w-7xl",
-  "2xl": "max-w-screen-2xl",
-  "4xl": "max-w-[1536px]",
-  full: "max-w-full"
-};
-var Container = React__default.forwardRef(
-  ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
-    const Component = as;
-    return /* @__PURE__ */ jsx(
-      Component,
-      {
-        ref,
-        className: cn(
-          "mx-auto w-full px-2 sm:px-4 lg:px-8",
-          maxWidthStyles[maxWidth],
-          className
-        ),
-        ...props,
-        children
-      }
-    );
-  }
-);
-Container.displayName = "Container";
 
 // lib/patternSvgs.ts
 var patternSvgs = {
@@ -828,85 +800,6 @@ function PatternBackground({
     }
   );
 }
-var backgroundStyles = {
-  default: "bg-background text-foreground",
-  white: "bg-white text-dark",
-  gray: "bg-muted/30 text-foreground",
-  dark: "bg-foreground text-background",
-  transparent: "bg-transparent text-foreground",
-  gradient: "bg-linear-to-br from-primary via-primary/90 to-foreground text-primary-foreground",
-  primary: "bg-primary text-primary-foreground",
-  secondary: "bg-secondary text-secondary-foreground",
-  muted: "bg-muted text-muted-foreground"
-};
-var spacingStyles = {
-  none: "py-0 md:py-0",
-  sm: "py-12 md:py-16",
-  md: "py-16 md:py-24",
-  lg: "py-20 md:py-32",
-  xl: "py-24 md:py-40"
-};
-var Section = React__default.forwardRef(
-  ({
-    id,
-    title,
-    subtitle,
-    children,
-    className,
-    style,
-    background = "default",
-    spacing = "lg",
-    pattern,
-    patternOpacity,
-    patternClassName,
-    containerClassName,
-    containerMaxWidth = "xl",
-    ...props
-  }, ref) => {
-    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
-    return /* @__PURE__ */ jsxs(
-      "section",
-      {
-        ref,
-        id,
-        className: cn(
-          "relative",
-          pattern ? "overflow-hidden" : null,
-          backgroundStyles[background],
-          spacingStyles[spacing],
-          className
-        ),
-        style,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx(
-            PatternBackground,
-            {
-              pattern,
-              opacity: effectivePatternOpacity,
-              className: patternClassName
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            Container,
-            {
-              maxWidth: containerMaxWidth,
-              className: cn("relative z-10", containerClassName),
-              children: [
-                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
-                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
-                  title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
-                ] }),
-                children
-              ]
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-Section.displayName = "Section";
 function AboutSplitHero({
   brandText,
   brandTextClassName,
@@ -922,13 +815,13 @@ function AboutSplitHero({
   imageSrc,
   imageAlt,
   imageClassName,
+  contentClassName,
   className,
-  containerClassName,
   optixFlowConfig,
-  background,
-  spacing,
+  background = "dark",
   pattern,
-  patternOpacity
+  patternOpacity,
+  directionConfig = { desktop: "mediaRight", mobile: "mediaTop" }
 }) {
   const ctaContent = useMemo(() => {
     if (ctaSlot) return ctaSlot;
@@ -941,7 +834,10 @@ function AboutSplitHero({
         variant: ctaAction.variant || "default",
         size: ctaAction.size || "lg",
         asButton: true,
-        className: cn("mt-10 flex h-fit items-center gap-2.5 rounded-xl px-5 py-4 font-bold", ctaClassName),
+        className: cn(
+          "inline-flex items-center gap-2.5 font-semibold",
+          ctaClassName
+        ),
         children: [
           /* @__PURE__ */ jsx("span", { children: ctaAction.label }),
           /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 20 })
@@ -949,40 +845,92 @@ function AboutSplitHero({
       }
     );
   }, [ctaSlot, ctaAction, ctaClassName]);
-  return /* @__PURE__ */ jsxs(
-    Section,
+  const bgColorClass = useMemo(() => {
+    switch (background) {
+      case "dark":
+        return "bg-gray-900 text-white";
+      case "gray":
+        return "bg-gray-100 text-gray-900";
+      case "white":
+        return "bg-white text-gray-900";
+      default:
+        return "bg-background text-foreground";
+    }
+  }, [background]);
+  const desktopOrder = directionConfig.desktop === "mediaRight" ? "lg:flex-row" : "lg:flex-row-reverse";
+  const mobileOrder = directionConfig.mobile === "mediaTop" ? "flex-col" : "flex-col-reverse";
+  const contentArea = /* @__PURE__ */ jsxs(
+    "div",
     {
-      background,
-      spacing,
-      pattern,
-      patternOpacity,
-      className: cn(className),
-      containerClassName,
+      className: cn(
+        "relative flex w-full items-center lg:w-1/2",
+        bgColorClass,
+        contentClassName
+      ),
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "container my-10 flex w-[500px] flex-col gap-24", children: [
-          (brandText || brandHighlight) && /* @__PURE__ */ jsxs("h1", { className: cn("text-4xl text-foreground", brandTextClassName), children: [
-            brandText,
-            " ",
-            brandHighlight && /* @__PURE__ */ jsx("span", { className: cn("bg-gradient-to-tr from-foreground to-muted bg-clip-text text-transparent", brandHighlightClassName), children: brandHighlight })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-4xl text-foreground lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-2.5 text-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-2.5", descriptionClassName), children: description })),
-            ctaContent
-          ] })
-        ] }),
-        imageSrc && /* @__PURE__ */ jsx(
-          Img,
-          {
-            src: imageSrc,
-            alt: imageAlt || "",
-            className: cn("hidden h-screen w-1/2 object-cover lg:block", imageClassName),
-            optixFlowConfig
-          }
-        )
+        pattern && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 overflow-hidden", children: /* @__PURE__ */ jsx(PatternBackground, { pattern, opacity: patternOpacity }) }),
+        /* @__PURE__ */ jsx("div", { className: "relative z-10 w-full px-8 py-16 sm:px-12 sm:py-20 lg:px-16 lg:py-24 xl:px-24", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-xl space-y-8", children: [
+          (brandText || brandHighlight) && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "text-xl font-semibold uppercase tracking-wider sm:text-2xl",
+                brandTextClassName
+              ),
+              children: [
+                brandText,
+                brandText && brandHighlight && " ",
+                brandHighlight && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "bg-linear-to-r from-primary to-primary/60 bg-clip-text text-transparent",
+                      brandHighlightClassName
+                    ),
+                    children: brandHighlight
+                  }
+                )
+              ]
+            }
+          ),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+            "h1",
+            {
+              className: cn(
+                "text-3xl font-bold leading-tight tracking-tight sm:text-4xl lg:text-5xl xl:text-6xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "text-base leading-relaxed opacity-90 sm:text-lg",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+          ctaContent && /* @__PURE__ */ jsx("div", { className: "pt-4", children: ctaContent })
+        ] }) })
       ]
     }
   );
+  const imageArea = imageSrc ? /* @__PURE__ */ jsx("div", { className: "relative h-64 w-full sm:h-96 lg:h-auto lg:w-1/2", children: /* @__PURE__ */ jsx(
+    Img,
+    {
+      src: imageSrc,
+      alt: imageAlt || "",
+      className: cn("h-full w-full object-cover", imageClassName),
+      optixFlowConfig
+    }
+  ) }) : null;
+  return /* @__PURE__ */ jsx("section", { className: cn("relative w-full overflow-hidden", className), children: /* @__PURE__ */ jsxs("div", { className: cn("flex min-h-screen", mobileOrder, desktopOrder), children: [
+    contentArea,
+    imageArea
+  ] }) });
 }
 
 export { AboutSplitHero };

package/dist/about-startup-team.cjs

@@ -975,10 +975,17 @@ function AboutStartupTeam({
       idx
     )) });
   }, [sidebarSlot, sidebarLinks, activeTab]);
+  const filteredTeamMembers = React.useMemo(() => {
+    if (!teamMembers || teamMembers.length === 0) return [];
+    if (!activeTab) return teamMembers;
+    return teamMembers.filter(
+      (member) => !member.tab || member.tab === activeTab
+    );
+  }, [teamMembers, activeTab]);
   const teamMembersContent = React.useMemo(() => {
     if (teamMembersSlot) return teamMembersSlot;
-    if (!teamMembers || teamMembers.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-8 grid gap-8 sm:grid-cols-2 lg:grid-cols-3", teamMembersClassName), children: teamMembers.map((member, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
+    if (filteredTeamMembers.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-8 grid gap-8 sm:grid-cols-2 lg:grid-cols-3", teamMembersClassName), children: filteredTeamMembers.map((member, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         className: "rounded-xl border bg-card p-6 text-center",
@@ -1015,7 +1022,7 @@ function AboutStartupTeam({
       },
       idx
     )) });
-  }, [teamMembersSlot, teamMembers, teamMembersClassName, optixFlowConfig]);
+  }, [teamMembersSlot, filteredTeamMembers, teamMembersClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {

package/dist/about-startup-team.d.cts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-CNw1QkRd.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-CoT4WfJd.cjs';
 import { O as OptixFlowConfig } from './blocks-B53JjGZ5.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
@@ -9,7 +9,14 @@ import 'class-variance-authority/types';
 
 interface SidebarLinkItem {
     label: React.ReactNode;
+    /**
+     * Value used for tab matching with TeamMemberItem.tab
+     */
     value: string;
+    /**
+     * Optional href for navigation (currently not used in default rendering)
+     */
+    href?: string;
 }
 interface TeamMemberItem {
     name?: React.ReactNode;
@@ -23,6 +30,11 @@ interface TeamMemberItem {
         url: string;
         label: string;
     }>;
+    /**
+     * Tab value this team member belongs to (matches SidebarLinkItem.value).
+     * If not provided, team member will show in all tabs.
+     */
+    tab?: string;
 }
 interface AboutStartupTeamProps {
     /**

package/dist/about-startup-team.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-ClLtyUd-.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-DTKUzkJp.js';
 import { O as OptixFlowConfig } from './blocks-CyUmnmEM.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
@@ -9,7 +9,14 @@ import 'class-variance-authority/types';
 
 interface SidebarLinkItem {
     label: React.ReactNode;
+    /**
+     * Value used for tab matching with TeamMemberItem.tab
+     */
     value: string;
+    /**
+     * Optional href for navigation (currently not used in default rendering)
+     */
+    href?: string;
 }
 interface TeamMemberItem {
     name?: React.ReactNode;
@@ -23,6 +30,11 @@ interface TeamMemberItem {
         url: string;
         label: string;
     }>;
+    /**
+     * Tab value this team member belongs to (matches SidebarLinkItem.value).
+     * If not provided, team member will show in all tabs.
+     */
+    tab?: string;
 }
 interface AboutStartupTeamProps {
     /**

package/dist/about-startup-team.js

@@ -954,10 +954,17 @@ function AboutStartupTeam({
       idx
     )) });
   }, [sidebarSlot, sidebarLinks, activeTab]);
+  const filteredTeamMembers = useMemo(() => {
+    if (!teamMembers || teamMembers.length === 0) return [];
+    if (!activeTab) return teamMembers;
+    return teamMembers.filter(
+      (member) => !member.tab || member.tab === activeTab
+    );
+  }, [teamMembers, activeTab]);
   const teamMembersContent = useMemo(() => {
     if (teamMembersSlot) return teamMembersSlot;
-    if (!teamMembers || teamMembers.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("mt-8 grid gap-8 sm:grid-cols-2 lg:grid-cols-3", teamMembersClassName), children: teamMembers.map((member, idx) => /* @__PURE__ */ jsxs(
+    if (filteredTeamMembers.length === 0) return null;
+    return /* @__PURE__ */ jsx("div", { className: cn("mt-8 grid gap-8 sm:grid-cols-2 lg:grid-cols-3", teamMembersClassName), children: filteredTeamMembers.map((member, idx) => /* @__PURE__ */ jsxs(
       "div",
       {
         className: "rounded-xl border bg-card p-6 text-center",
@@ -994,7 +1001,7 @@ function AboutStartupTeam({
       },
       idx
     )) });
-  }, [teamMembersSlot, teamMembers, teamMembersClassName, optixFlowConfig]);
+  }, [teamMembersSlot, filteredTeamMembers, teamMembersClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsx(
     Section,
     {

package/dist/about-stats-showcase.d.cts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-CNw1QkRd.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-CoT4WfJd.cjs';
 import { O as OptixFlowConfig } from './blocks-B53JjGZ5.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';

package/dist/about-stats-showcase.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-ClLtyUd-.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-DTKUzkJp.js';
 import { O as OptixFlowConfig } from './blocks-CyUmnmEM.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';

package/dist/about-stats-sidebar.d.cts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-CNw1QkRd.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-CoT4WfJd.cjs';
 import { S as StatItem, F as FeatureItem } from './blocks-B53JjGZ5.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';

package/dist/about-stats-sidebar.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-ClLtyUd-.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-DTKUzkJp.js';
 import { S as StatItem, F as FeatureItem } from './blocks-CyUmnmEM.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';

package/dist/about-story-expertise.d.cts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-CNw1QkRd.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-CoT4WfJd.cjs';
 import { A as ActionConfig, O as OptixFlowConfig } from './blocks-B53JjGZ5.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';

package/dist/about-story-expertise.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-ClLtyUd-.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-DTKUzkJp.js';
 import { A as ActionConfig, O as OptixFlowConfig } from './blocks-CyUmnmEM.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';

package/dist/about-story-gallery.cjs

@@ -407,19 +407,28 @@ function AboutStoryGallery({
   const imagesContent = React.useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-16 grid gap-4 md:grid-cols-3", imagesClassName), children: images.map((image, idx) => /* @__PURE__ */ jsxRuntime.jsx(
-      img.Img,
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
       {
-        src: image.src,
-        alt: image.alt,
         className: cn(
-          "h-64 w-full rounded-xl object-cover",
-          image.className
+          "mt-7 md:mt-16 grid gap-4 md:grid-cols-3",
+          imagesClassName
         ),
-        optixFlowConfig
-      },
-      idx
-    )) });
+        children: images.map((image, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+          img.Img,
+          {
+            src: image.src,
+            alt: image.alt,
+            className: cn(
+              "h-64 w-full rounded-xl object-cover",
+              image.className
+            ),
+            optixFlowConfig
+          },
+          idx
+        ))
+      }
+    );
   }, [imagesSlot, images, imagesClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,

package/dist/about-story-gallery.d.cts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-CNw1QkRd.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-CoT4WfJd.cjs';
 import { O as OptixFlowConfig } from './blocks-B53JjGZ5.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';

package/dist/about-story-gallery.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-ClLtyUd-.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-DTKUzkJp.js';
 import { O as OptixFlowConfig } from './blocks-CyUmnmEM.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';

package/dist/about-story-gallery.js

@@ -401,19 +401,28 @@ function AboutStoryGallery({
   const imagesContent = useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("mt-16 grid gap-4 md:grid-cols-3", imagesClassName), children: images.map((image, idx) => /* @__PURE__ */ jsx(
-      Img,
+    return /* @__PURE__ */ jsx(
+      "div",
       {
-        src: image.src,
-        alt: image.alt,
         className: cn(
-          "h-64 w-full rounded-xl object-cover",
-          image.className
+          "mt-7 md:mt-16 grid gap-4 md:grid-cols-3",
+          imagesClassName
         ),
-        optixFlowConfig
-      },
-      idx
-    )) });
+        children: images.map((image, idx) => /* @__PURE__ */ jsx(
+          Img,
+          {
+            src: image.src,
+            alt: image.alt,
+            className: cn(
+              "h-64 w-full rounded-xl object-cover",
+              image.className
+            ),
+            optixFlowConfig
+          },
+          idx
+        ))
+      }
+    );
   }, [imagesSlot, images, imagesClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsxs(
     Section,