@opensite/ui 0.6.2 → 0.6.3

package/dist/registry.js

@@ -2388,6 +2388,7 @@ function AboutDeveloperProfile({
     }
   );
 }
+var ALL_TAB_VALUE = "__all__";
 function AboutStartupTeam({
   className,
   containerClassName,
@@ -2409,19 +2410,48 @@ function AboutStartupTeam({
   pattern,
   patternOpacity,
   defaultActiveTab,
-  onTabChange
+  onTabChange,
+  allTabLabel = "All"
 }) {
+  const effectiveTabs = useMemo$1(() => {
+    if (!sidebarLinks || sidebarLinks.length === 0 || !teamMembers || teamMembers.length === 0) {
+      return sidebarLinks || [];
+    }
+    const allTab = {
+      label: allTabLabel,
+      value: ALL_TAB_VALUE
+    };
+    return [allTab, ...sidebarLinks];
+  }, [sidebarLinks, teamMembers, allTabLabel]);
   const [activeTab, setActiveTab] = useState(
-    defaultActiveTab || (sidebarLinks && sidebarLinks.length > 0 ? sidebarLinks[0].value : "")
+    defaultActiveTab || (effectiveTabs.length > 0 ? effectiveTabs[0].value : "")
   );
   const handleTabChange = (value) => {
     setActiveTab(value);
     onTabChange?.(value);
   };
-  const sidebarContent = useMemo$1(() => {
+  const activeTabLabel = useMemo$1(() => {
+    if (!effectiveTabs || effectiveTabs.length === 0) return null;
+    const currentTab = effectiveTabs.find((tab) => tab.value === activeTab);
+    return currentTab?.label || null;
+  }, [effectiveTabs, activeTab]);
+  const dynamicTeamTitle = useMemo$1(() => {
+    if (teamTitle) return teamTitle;
+    if (activeTabLabel) {
+      if (typeof activeTabLabel === "string") {
+        return `${activeTabLabel} Team`;
+      }
+      return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        activeTabLabel,
+        " Team"
+      ] });
+    }
+    return null;
+  }, [teamTitle, activeTabLabel]);
+  const renderTabsNav = useMemo$1(() => {
     if (sidebarSlot) return sidebarSlot;
-    if (!sidebarLinks || sidebarLinks.length === 0) return null;
-    return /* @__PURE__ */ jsx("nav", { className: "space-y-1", children: sidebarLinks.map((link, idx) => /* @__PURE__ */ jsx(
+    if (!effectiveTabs || effectiveTabs.length === 0) return null;
+    return /* @__PURE__ */ jsx("nav", { className: "space-y-1", children: effectiveTabs.map((link, idx) => /* @__PURE__ */ jsx(
       Pressable,
       {
         componentType: "button",
@@ -2434,10 +2464,10 @@ function AboutStartupTeam({
       },
       idx
     )) });
-  }, [sidebarSlot, sidebarLinks, activeTab]);
+  }, [sidebarSlot, effectiveTabs, activeTab]);
   const filteredTeamMembers = useMemo$1(() => {
     if (!teamMembers || teamMembers.length === 0) return [];
-    if (!activeTab) return teamMembers;
+    if (!activeTab || activeTab === ALL_TAB_VALUE) return teamMembers;
     return teamMembers.filter(
       (member) => !member.tab || member.tab === activeTab
     );
@@ -2445,11 +2475,14 @@ function AboutStartupTeam({
   const teamMembersContent = useMemo$1(() => {
     if (teamMembersSlot) return teamMembersSlot;
     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(
+    return /* @__PURE__ */ jsx(
       "div",
       {
-        className: "rounded-xl border bg-card p-6 text-center",
-        children: [
+        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", children: [
           member.avatar ? /* @__PURE__ */ jsx(
             Img,
             {
@@ -2478,11 +2511,33 @@ function AboutStartupTeam({
             },
             linkIdx
           )) })
-        ]
+        ] }, idx))
+      }
+    );
+  }, [
+    teamMembersSlot,
+    filteredTeamMembers,
+    teamMembersClassName,
+    optixFlowConfig
+  ]);
+  const mobileTabsNav = useMemo$1(() => {
+    if (sidebarSlot) return null;
+    if (!effectiveTabs || effectiveTabs.length === 0) return null;
+    if (!teamMembers || teamMembers.length === 0) return null;
+    return /* @__PURE__ */ jsx("nav", { className: "flex gap-2 overflow-x-auto pb-2 lg:hidden", children: effectiveTabs.map((link, idx) => /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        componentType: "button",
+        onClick: () => handleTabChange(link.value),
+        className: cn(
+          "shrink-0 rounded-lg px-4 py-2 text-sm font-medium transition-colors",
+          activeTab === link.value ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:bg-muted/80 hover:text-foreground"
+        ),
+        children: link.label
       },
       idx
     )) });
-  }, [teamMembersSlot, filteredTeamMembers, teamMembersClassName, optixFlowConfig]);
+  }, [sidebarSlot, effectiveTabs, activeTab]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -2492,12 +2547,59 @@ function AboutStartupTeam({
       patternOpacity,
       className: cn(className),
       children: /* @__PURE__ */ jsx("div", { className: cn(containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid gap-12 lg:grid-cols-4", children: [
-        /* @__PURE__ */ jsx("aside", { className: cn("lg:sticky lg:top-24 lg:self-start", sidebarClassName), children: sidebarContent }),
+        /* @__PURE__ */ jsx(
+          "aside",
+          {
+            className: cn(
+              "hidden lg:block lg:sticky lg:top-24 lg:self-start",
+              sidebarClassName
+            ),
+            children: renderTabsNav
+          }
+        ),
         /* @__PURE__ */ jsxs("div", { className: "lg:col-span-3", children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-6 text-lg text-muted-foreground whitespace-pre-line", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-6", descriptionClassName), children: description })),
-          /* @__PURE__ */ jsxs("div", { className: "mt-16", children: [
-            teamTitle && (typeof teamTitle === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-2xl font-bold", teamTitleClassName), children: teamTitle }) : /* @__PURE__ */ jsx("div", { className: teamTitleClassName, children: teamTitle })),
+          title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+            "h1",
+            {
+              className: cn(
+                "text-4xl font-bold tracking-tight md:text-5xl",
+                titleClassName
+              ),
+              children: title
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "mt-6 text-lg text-muted-foreground whitespace-pre-line",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: cn("mt-6", descriptionClassName), children: description })),
+          /* @__PURE__ */ jsxs("div", { className: "mt-8 md:mt-16", children: [
+            mobileTabsNav,
+            dynamicTeamTitle && (typeof dynamicTeamTitle === "string" ? /* @__PURE__ */ jsx(
+              "h2",
+              {
+                className: cn(
+                  "text-2xl font-bold",
+                  mobileTabsNav ? "mt-6" : "",
+                  teamTitleClassName
+                ),
+                children: dynamicTeamTitle
+              }
+            ) : /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  mobileTabsNav ? "mt-6" : "",
+                  teamTitleClassName
+                ),
+                children: dynamicTeamTitle
+              }
+            )),
             teamMembersContent
           ] })
         ] })
@@ -2941,7 +3043,14 @@ function AboutMissionDualImage({
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsx(
         Pressable,
         {
@@ -2967,39 +3076,87 @@ function AboutMissionDualImage({
       patternOpacity,
       className: cn(className),
       containerClassName,
-      children: /* @__PURE__ */ jsxs("div", { className: cn("grid gap-16 lg:grid-cols-2", contentClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center", children: [
-          /* @__PURE__ */ jsxs("div", { className: "mb-12", children: [
-            missionTitle && (typeof missionTitle === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-bold tracking-tight md:text-4xl", missionTitleClassName), children: missionTitle }) : /* @__PURE__ */ jsx("div", { className: missionTitleClassName, children: missionTitle })),
-            missionContent && (typeof missionContent === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-lg text-muted-foreground", missionContentClassName), children: missionContent }) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", missionContentClassName), children: missionContent }))
-          ] }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            visionTitle && (typeof visionTitle === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-bold tracking-tight md:text-4xl", visionTitleClassName), children: visionTitle }) : /* @__PURE__ */ jsx("div", { className: visionTitleClassName, children: visionTitle })),
-            visionContent && (typeof visionContent === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-lg text-muted-foreground", visionContentClassName), children: visionContent }) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", visionContentClassName), children: visionContent }))
-          ] }),
-          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-8 flex flex-wrap gap-4", actionsClassName), children: actionsContent })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col gap-4 sm:grid sm:grid-cols-2", children: [
-          primaryImage && /* @__PURE__ */ jsx(
-            Img,
-            {
-              src: primaryImage.src,
-              alt: primaryImage.alt,
-              className: cn("w-full h-auto rounded-2xl object-cover sm:h-full", primaryImageClassName),
-              optixFlowConfig
-            }
-          ),
-          secondaryImage && /* @__PURE__ */ jsx(
-            Img,
-            {
-              src: secondaryImage.src,
-              alt: secondaryImage.alt,
-              className: cn("w-full h-auto rounded-2xl object-cover sm:h-full sm:mt-12", secondaryImageClassName),
-              optixFlowConfig
-            }
-          )
-        ] })
-      ] })
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn("grid gap-8 md:gap-16 lg:grid-cols-2", contentClassName),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center", children: [
+              /* @__PURE__ */ jsxs("div", { className: "mb-8 md:mb-12", children: [
+                missionTitle && (typeof missionTitle === "string" ? /* @__PURE__ */ jsx(
+                  "h2",
+                  {
+                    className: cn(
+                      "text-3xl font-bold tracking-tight md:text-4xl",
+                      missionTitleClassName
+                    ),
+                    children: missionTitle
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: missionTitleClassName, children: missionTitle })),
+                missionContent && (typeof missionContent === "string" ? /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "mt-4 text-lg text-muted-foreground",
+                      missionContentClassName
+                    ),
+                    children: missionContent
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", missionContentClassName), children: missionContent }))
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                visionTitle && (typeof visionTitle === "string" ? /* @__PURE__ */ jsx(
+                  "h2",
+                  {
+                    className: cn(
+                      "text-3xl font-bold tracking-tight md:text-4xl",
+                      visionTitleClassName
+                    ),
+                    children: visionTitle
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: visionTitleClassName, children: visionTitle })),
+                visionContent && (typeof visionContent === "string" ? /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "mt-4 text-lg text-muted-foreground",
+                      visionContentClassName
+                    ),
+                    children: visionContent
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", visionContentClassName), children: visionContent }))
+              ] }),
+              (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-8 flex flex-wrap gap-4", actionsClassName), children: actionsContent })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col gap-4 sm:grid sm:grid-cols-2", children: [
+              primaryImage && /* @__PURE__ */ jsx(
+                Img,
+                {
+                  src: primaryImage.src,
+                  alt: primaryImage.alt,
+                  className: cn(
+                    "w-full h-auto rounded-2xl object-cover sm:h-full",
+                    primaryImageClassName
+                  ),
+                  optixFlowConfig
+                }
+              ),
+              secondaryImage && /* @__PURE__ */ jsx(
+                Img,
+                {
+                  src: secondaryImage.src,
+                  alt: secondaryImage.alt,
+                  className: cn(
+                    "w-full h-auto rounded-2xl object-cover sm:h-full sm:mt-12",
+                    secondaryImageClassName
+                  ),
+                  optixFlowConfig
+                }
+              )
+            ] })
+          ]
+        }
+      )
     }
   );
 }
@@ -37214,20 +37371,29 @@ function AboutMissionPrinciples({
   const principlesContent = useMemo$1(() => {
     if (principlesSlot) return principlesSlot;
     if (!principles || principles.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-1 gap-6 sm:grid-cols-2", principlesClassName), children: principles.map((principle, idx) => /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(
       "div",
       {
-        className: "relative rounded-lg border p-6 transition-colors hover:bg-muted",
-        children: [
-          principle.number && /* @__PURE__ */ jsx("div", { className: "absolute right-4 top-4 text-3xl font-bold text-primary/20", children: principle.number }),
-          /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-            principle.title && (typeof principle.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-xl font-bold", children: principle.title }) : principle.title),
-            principle.description && (typeof principle.description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: principle.description }) : principle.description)
-          ] })
-        ]
-      },
-      idx
-    )) });
+        className: cn(
+          "grid grid-cols-1 gap-6 sm:grid-cols-2",
+          principlesClassName
+        ),
+        children: principles.map((principle, idx) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "relative rounded-lg border p-6 transition-colors hover:bg-muted",
+            children: [
+              principle.number && /* @__PURE__ */ jsx("div", { className: "absolute right-4 top-4 text-3xl font-bold text-primary/20", children: principle.number }),
+              /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+                principle.title && (typeof principle.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-xl font-bold", children: principle.title }) : principle.title),
+                principle.description && (typeof principle.description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: principle.description }) : principle.description)
+              ] })
+            ]
+          },
+          idx
+        ))
+      }
+    );
   }, [principlesSlot, principles, principlesClassName]);
   const visionActionContent = useMemo$1(() => {
     if (visionActionSlot) return visionActionSlot;
@@ -37266,21 +37432,75 @@ function AboutMissionPrinciples({
       containerClassName,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center gap-12 lg:grid-cols-2 lg:gap-24", children: [
-          /* @__PURE__ */ jsxs("div", { className: "space-y-8", children: [
-            badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsx("div", { className: cn("inline-block rounded-lg bg-primary/10 px-3 py-1 text-sm text-primary", badgeClassName), children: badgeText }) : /* @__PURE__ */ jsx("div", { className: badgeClassName, children: badgeText })),
-            missionHeading && (typeof missionHeading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-4xl font-bold leading-tight tracking-tight lg:text-5xl", missionHeadingClassName), children: missionHeading }) : /* @__PURE__ */ jsx("div", { className: missionHeadingClassName, children: missionHeading })),
-            missionDescription && (typeof missionDescription === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-xl text-muted-foreground", missionDescriptionClassName), children: missionDescription }) : /* @__PURE__ */ jsx("div", { className: missionDescriptionClassName, children: missionDescription })),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-4 md:space-y-8", children: [
+            badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "inline-block rounded-lg bg-primary/10 px-3 py-1 text-sm text-primary",
+                  badgeClassName
+                ),
+                children: badgeText
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: badgeClassName, children: badgeText })),
+            missionHeading && (typeof missionHeading === "string" ? /* @__PURE__ */ jsx(
+              "h2",
+              {
+                className: cn(
+                  "text-4xl font-bold leading-tight tracking-tight lg:text-5xl",
+                  missionHeadingClassName
+                ),
+                children: missionHeading
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: missionHeadingClassName, children: missionHeading })),
+            missionDescription && (typeof missionDescription === "string" ? /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: cn(
+                  "text-xl text-muted-foreground",
+                  missionDescriptionClassName
+                ),
+                children: missionDescription
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: missionDescriptionClassName, children: missionDescription })),
             missionActionContent
           ] }),
           principlesContent
         ] }),
-        /* @__PURE__ */ jsx("div", { className: cn("mt-24 rounded-lg bg-muted p-8 lg:p-12", visionClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center gap-8 lg:grid-cols-3", children: [
-          /* @__PURE__ */ jsxs("div", { className: "lg:col-span-2", children: [
-            visionHeading && (typeof visionHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("mb-4 text-2xl font-bold", visionHeadingClassName), children: visionHeading }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", visionHeadingClassName), children: visionHeading })),
-            visionDescription && (typeof visionDescription === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-4 text-foreground/80", visionDescriptionClassName), children: visionDescription }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", visionDescriptionClassName), children: visionDescription }))
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "flex justify-center lg:col-span-1 lg:justify-end", children: visionActionContent })
-        ] }) })
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "mt-6 md:mt-24 rounded-lg bg-muted p-8 lg:p-12",
+              visionClassName
+            ),
+            children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center gap-8 lg:grid-cols-3", children: [
+              /* @__PURE__ */ jsxs("div", { className: "lg:col-span-2", children: [
+                visionHeading && (typeof visionHeading === "string" ? /* @__PURE__ */ jsx(
+                  "h3",
+                  {
+                    className: cn(
+                      "mb-4 text-2xl font-bold",
+                      visionHeadingClassName
+                    ),
+                    children: visionHeading
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", visionHeadingClassName), children: visionHeading })),
+                visionDescription && (typeof visionDescription === "string" ? /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "mb-4 text-foreground/80",
+                      visionDescriptionClassName
+                    ),
+                    children: visionDescription
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", visionDescriptionClassName), children: visionDescription }))
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "flex justify-center lg:col-span-1 lg:justify-end", children: visionActionContent })
+            ] })
+          }
+        )
       ]
     }
   );

package/package.json

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