@opensite/ui 2.3.6 → 2.3.8

package/dist/registry.js

@@ -15,6 +15,7 @@ import { Form, useForm, Field } from '@page-speed/forms';
 import { useFileUpload, useContactForm, DynamicFormField, submitPageSpeedForm, PageSpeedFormSubmissionError, isValidEmail, FormEngine } from '@page-speed/forms/integration';
 import { AnimatePresence, motion, useMotionValue, useMotionTemplate, useSpring, useTransform, useInView, useScroll, useMotionValueEvent } from 'framer-motion';
 import { TextInput as TextInput$1 } from '@page-speed/forms/inputs';
+import { Lightbox } from '@page-speed/lightbox';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import useEmblaCarousel from 'embla-carousel-react';
@@ -22,7 +23,6 @@ import Autoplay from 'embla-carousel-autoplay';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import AutoScroll3 from 'embla-carousel-auto-scroll';
-import { Lightbox } from '@page-speed/lightbox';
 import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as LabelPrimitive from '@radix-ui/react-label';
@@ -1691,8 +1691,6 @@ function AboutVisionGallery({
   secondarySectionTitleClassName,
   secondarySectionContent,
   secondarySectionContentClassName,
-  secondarySectionLinkText,
-  secondarySectionLinkUrl,
   ctaTitle,
   ctaTitleClassName,
   ctaAction,
@@ -1744,7 +1742,7 @@ function AboutVisionGallery({
     );
   }, [ctaSlot, ctaAction]);
   const hasPrimarySection = primarySectionTitle || primarySectionContent;
-  const hasSecondarySection = secondarySectionTitle || secondarySectionContent || secondarySectionLinkText;
+  const hasSecondarySection = secondarySectionTitle || secondarySectionContent;
   const hasCtaSection = ctaTitle || ctaSlot || ctaAction;
   return /* @__PURE__ */ jsxs(
     Section,
@@ -1772,7 +1770,6 @@ function AboutVisionGallery({
             {
               className: cn(
                 "text-xl font-medium text-balance",
-                getTextColor(background, "muted"),
                 subtitleClassName
               ),
               children: subtitle
@@ -1780,7 +1777,7 @@ function AboutVisionGallery({
           ) : /* @__PURE__ */ jsx("div", { className: subtitleClassName, children: subtitle }))
         ] }),
         imagesContent,
-        (hasPrimarySection || hasSecondarySection) && /* @__PURE__ */ jsxs("div", { className: "mx-auto grid max-w-5xl gap:7 md:gap-28 py-6 md:py-16 md:grid-cols-2", children: [
+        (hasPrimarySection || hasSecondarySection) && /* @__PURE__ */ jsxs("div", { className: "grid gap:7 md:gap-28 py-6 md:py-16 md:grid-cols-2", children: [
           hasPrimarySection && /* @__PURE__ */ jsxs("div", { children: [
             primarySectionTitle && (typeof primarySectionTitle === "string" ? /* @__PURE__ */ jsx(
               "h2",
@@ -1791,18 +1788,17 @@ function AboutVisionGallery({
                 ),
                 children: primarySectionTitle
               }
-            ) : /* @__PURE__ */ jsx("div", { className: cn("mb-5", primarySectionTitleClassName), children: primarySectionTitle })),
+            ) : primarySectionTitle),
             primarySectionContent && (typeof primarySectionContent === "string" ? /* @__PURE__ */ jsx(
               "p",
               {
                 className: cn(
                   "text-normal md:text-xl leading-8 font-medium whitespace-pre-line",
-                  getTextColor(background, "muted"),
                   primarySectionContentClassName
                 ),
                 children: primarySectionContent
               }
-            ) : /* @__PURE__ */ jsx("div", { className: primarySectionContentClassName, children: primarySectionContent }))
+            ) : primarySectionContent)
           ] }),
           hasSecondarySection && /* @__PURE__ */ jsxs("div", { children: [
             secondarySectionTitle && (typeof secondarySectionTitle === "string" ? /* @__PURE__ */ jsx(
@@ -1814,36 +1810,26 @@ function AboutVisionGallery({
                 ),
                 children: secondarySectionTitle
               }
-            ) : /* @__PURE__ */ jsx("div", { className: cn("mb-5", secondarySectionTitleClassName), children: secondarySectionTitle })),
-            (secondarySectionContent || secondarySectionLinkText) && /* @__PURE__ */ jsxs(
-              "p",
+            ) : secondarySectionTitle),
+            secondarySectionContent && (typeof secondarySectionContent === "string" ? /* @__PURE__ */ jsx(
+              "h2",
               {
                 className: cn(
                   "text-normal md:text-xl leading-8 font-medium",
-                  getTextColor(background, "muted"),
                   secondarySectionContentClassName
                 ),
-                children: [
-                  secondarySectionLinkText && secondarySectionLinkUrl && /* @__PURE__ */ jsx(
-                    Pressable,
-                    {
-                      href: secondarySectionLinkUrl,
-                      className: "mr-1 underline",
-                      children: secondarySectionLinkText
-                    }
-                  ),
-                  secondarySectionContent
-                ]
+                children: secondarySectionContent
               }
-            )
+            ) : secondarySectionContent)
           ] })
         ] }),
         hasCtaSection && /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn(
-              "mx-auto flex max-w-5xl flex-col items-center justify-between gap-8 rounded-2xl p-14 text-center md:flex-row md:text-left",
-              getNestedCardBg(background, "subtle"),
+              "flex flex-col items-center justify-between",
+              "gap-8 rounded-2xl p-14 text-center",
+              "md:flex-row md:text-left bg-muted text-muted-foreground",
               ctaClassName
             ),
             children: [
@@ -1856,7 +1842,7 @@ function AboutVisionGallery({
                   ),
                   children: ctaTitle
                 }
-              ) : /* @__PURE__ */ jsx("div", { className: ctaTitleClassName, children: ctaTitle })),
+              ) : ctaTitle),
               ctaContent
             ]
           }
@@ -2424,7 +2410,7 @@ function AboutSplitHero({
     }
   }, [background]);
   const desktopOrder = directionConfig.desktop === "mediaRight" ? "lg:flex-row" : "lg:flex-row-reverse";
-  const mobileOrder = directionConfig.mobile === "mediaTop" ? "flex-col" : "flex-col-reverse";
+  const mobileOrder = directionConfig.mobile === "mediaTop" ? "flex-col-reverse" : "flex-col";
   const contentArea = /* @__PURE__ */ jsxs(
     "div",
     {
@@ -2954,28 +2940,6 @@ function CommunityInitiatives({
     },
     []
   );
-  const actionsContent = useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn("flex flex-wrap justify-center gap-4", actionsClassName),
-        children: actions.map((action, idx) => /* @__PURE__ */ jsx(
-          Pressable,
-          {
-            href: action.href,
-            onClick: action.onClick,
-            variant: action.variant || "default",
-            size: action.size || "lg",
-            asButton: true,
-            children: action.label
-          },
-          idx
-        ))
-      }
-    );
-  }, [actionsSlot, actions, actionsClassName]);
   const categoriesContent = useMemo(() => {
     if (categoriesSlot) return categoriesSlot;
     if (!categories || categories.length === 0) return null;
@@ -3007,7 +2971,7 @@ function CommunityInitiatives({
               category.id
             )) })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-2xl text-left md:text-center", children: /* @__PURE__ */ jsx("p", { className: cn(getTextColor(background, "muted")), children: currentCategory?.description }) }),
+          /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-2xl text-left md:text-center", children: /* @__PURE__ */ jsx("p", { className: "relative", children: currentCategory?.description }) }),
           categories.map((category) => /* @__PURE__ */ jsx(
             TabsContent,
             {
@@ -3029,47 +2993,13 @@ function CommunityInitiatives({
                           ),
                           children: [
                             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-                              /* @__PURE__ */ jsx(
-                                "div",
-                                {
-                                  className: cn(
-                                    "rounded-md p-2",
-                                    getNestedCardBg(background, "muted")
-                                  ),
-                                  children: /* @__PURE__ */ jsx(
-                                    DynamicIcon,
-                                    {
-                                      name: initiative.icon,
-                                      size: 24,
-                                      className: cn(getAccentColor(background))
-                                    }
-                                  )
-                                }
-                              ),
+                              /* @__PURE__ */ jsx("div", { className: cn("rounded-md p-2"), children: /* @__PURE__ */ jsx(DynamicIcon, { name: initiative.icon, size: 24 }) }),
                               /* @__PURE__ */ jsx("h3", { className: "text-2xl font-bold", children: initiative.title })
                             ] }),
-                            /* @__PURE__ */ jsx("p", { className: cn(getTextColor(background, "muted")), children: initiative.description }),
+                            /* @__PURE__ */ jsx("p", { className: "relative", children: initiative.description }),
                             initiative.metrics && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-4 pt-2", children: initiative.metrics.map((metric, i) => /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-                              /* @__PURE__ */ jsx(
-                                "div",
-                                {
-                                  className: cn(
-                                    "text-2xl font-bold",
-                                    getAccentColor(background)
-                                  ),
-                                  children: metric.value
-                                }
-                              ),
-                              /* @__PURE__ */ jsx(
-                                "div",
-                                {
-                                  className: cn(
-                                    "mt-1 text-xs",
-                                    getTextColor(background, "muted")
-                                  ),
-                                  children: metric.label
-                                }
-                              )
+                              /* @__PURE__ */ jsx("div", { className: cn("text-2xl font-bold"), children: metric.value }),
+                              /* @__PURE__ */ jsx("div", { className: cn("mt-1 text-xs"), children: metric.label })
                             ] }, i)) })
                           ]
                         }
@@ -3102,8 +3032,7 @@ function CommunityInitiatives({
                             Card,
                             {
                               className: cn(
-                                "flex h-full min-h-[280px] w-full items-center justify-center",
-                                getNestedCardBg(background, "subtle")
+                                "flex h-full min-h-[280px] w-full items-center justify-center"
                               ),
                               children: /* @__PURE__ */ jsxs(CardContent, { className: "p-6 text-center", children: [
                                 /* @__PURE__ */ jsx(
@@ -3111,11 +3040,7 @@ function CommunityInitiatives({
                                   {
                                     name: initiative.icon,
                                     size: 64,
-                                    className: cn(
-                                      "mx-auto mb-4",
-                                      getTextColor(background, "muted"),
-                                      "opacity-50"
-                                    )
+                                    className: cn("mx-auto mb-4", "opacity-50")
                                   }
                                 ),
                                 /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "mx-auto", children: [
@@ -3184,30 +3109,45 @@ function CommunityInitiatives({
           }
         ),
         categoriesContent,
-        /* @__PURE__ */ jsxs("div", { className: cn("mt-20 text-center", ctaClassName), children: [
-          ctaBadgeText && /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                "mb-8 inline-flex items-center justify-center rounded-full p-1"
-              ),
-              children: /* @__PURE__ */ jsx(Badge, { className: "rounded-full bg-primary px-4 py-1 text-primary-foreground", children: ctaBadgeText })
-            }
-          ),
-          ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("mb-4 text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
-          ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsx(
-            "p",
-            {
-              className: cn(
-                "mx-auto mb-8 max-w-2xl",
-                getTextColor(background, "muted"),
-                ctaDescriptionClassName
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "mt-10 md:mt-24 p-6 md:p-16",
+              "text-center flex flex-col items-center",
+              "bg-muted text-muted-foreground",
+              "rounded-2xl shadow-lg",
+              ctaClassName
+            ),
+            children: [
+              ctaBadgeText && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "mb-8 inline-flex items-center justify-center rounded-full p-1"
+                  ),
+                  children: /* @__PURE__ */ jsx(Badge, { className: "rounded-full bg-primary px-4 py-1 text-primary-foreground", children: ctaBadgeText })
+                }
               ),
-              children: ctaDescription
-            }
-          ) : ctaDescription),
-          actionsContent
-        ] })
+              ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("mb-4 text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
+              ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn("mx-auto mb-8 max-w-2xl", ctaDescriptionClassName),
+                  children: ctaDescription
+                }
+              ) : ctaDescription),
+              /* @__PURE__ */ jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName
+                }
+              )
+            ]
+          }
+        )
       ]
     }
   );
@@ -7717,11 +7657,31 @@ function AboutStoryGallery({
   imagesClassName,
   optixFlowConfig,
   background,
-  spacing = "py-8 md:py-32",
+  spacing = "lg",
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   pattern,
   patternOpacity
 }) {
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const [lightboxIndex, setLightboxIndex] = useState(0);
+  const lightboxItems = useMemo(
+    () => (images ?? []).map((img, index) => ({
+      id: `gallery-image-${index}`,
+      type: "image",
+      src: img.src,
+      alt: img.alt,
+      download: true,
+      share: true
+    })),
+    [images]
+  );
+  const handleImageClick = useCallback((index) => {
+    setLightboxIndex(index);
+    setLightboxOpen(true);
+  }, []);
+  const handleLightboxClose = useCallback(() => {
+    setLightboxOpen(false);
+  }, []);
   const imagesContent = useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
@@ -7733,21 +7693,38 @@ function AboutStoryGallery({
           imagesClassName
         ),
         children: images.map((image, idx) => /* @__PURE__ */ jsx(
-          Img,
+          "div",
           {
-            src: image.src,
-            alt: image.alt,
             className: cn(
-              "h-64 w-full rounded-xl object-cover",
-              image.className
+              "cursor-pointer overflow-hidden",
+              "rounded-xl transition-transform duration-500",
+              "hover:scale-[1.02] hover:shadow-lg"
             ),
-            optixFlowConfig
+            onClick: () => handleImageClick(idx),
+            role: "button",
+            tabIndex: 0,
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                handleImageClick(idx);
+              }
+            },
+            "aria-label": `View ${image.alt} in lightbox`,
+            children: /* @__PURE__ */ jsx(
+              Img,
+              {
+                src: image.src,
+                alt: image.alt,
+                className: cn("h-64 w-full object-cover", image.className),
+                optixFlowConfig
+              }
+            )
           },
           idx
         ))
       }
     );
-  }, [imagesSlot, images, imagesClassName, optixFlowConfig]);
+  }, [imagesSlot, images, imagesClassName, optixFlowConfig, handleImageClick]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -7780,7 +7757,28 @@ function AboutStoryGallery({
             }
           ) : /* @__PURE__ */ jsx("div", { className: cn("mt-6", descriptionClassName), children: description }))
         ] }),
-        imagesContent
+        imagesContent,
+        lightboxOpen && /* @__PURE__ */ jsx(
+          Lightbox,
+          {
+            items: lightboxItems,
+            initialIndex: lightboxIndex,
+            layout: "horizontal",
+            controls: {
+              navigation: true,
+              thumbnails: true,
+              download: true,
+              share: true,
+              fullscreen: true,
+              captions: true,
+              counter: true
+            },
+            onClose: handleLightboxClose,
+            enableKeyboardShortcuts: true,
+            closeOnEscape: true,
+            closeOnBackdropClick: true
+          }
+        )
       ]
     }
   );
@@ -7821,7 +7819,9 @@ function AboutStreamlineTeam({
         "div",
         {
           className: cn(
-            "flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-primary/10",
+            "flex  shrink-0 items-center justify-center",
+            "size-12 rounded-lg",
+            "bg-primary text-primary-foreground",
             feature.iconBgClass
           ),
           children: feature.icon
@@ -7829,35 +7829,10 @@ function AboutStreamlineTeam({
       ),
       /* @__PURE__ */ jsxs("div", { children: [
         feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "font-semibold", children: feature.title }) : feature.title),
-        feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsx(
-          "p",
-          {
-            className: cn("text-sm", getTextColor(background, "muted")),
-            children: feature.description
-          }
-        ) : feature.description)
+        feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm", children: feature.description }) : feature.description)
       ] })
     ] }, idx)) });
   }, [featuresSlot, features, featuresClassName, background]);
-  const actionsContent = useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("mt-8", actionsClassName), children: actions.map((action, idx) => /* @__PURE__ */ jsxs(
-      Pressable,
-      {
-        href: action.href,
-        onClick: action.onClick,
-        size: action.size || "lg",
-        variant: action.variant || "default",
-        asButton: true,
-        children: [
-          action.label,
-          /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16, className: "ml-2" })
-        ]
-      },
-      idx
-    )) });
-  }, [actionsSlot, actions, actionsClassName]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -7865,7 +7840,7 @@ function AboutStreamlineTeam({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
+      className,
       containerClassName,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "grid gap-12 lg:grid-cols-2 lg:items-center", children: [
@@ -7888,14 +7863,17 @@ function AboutStreamlineTeam({
                 src: secondaryImage.src,
                 alt: secondaryImage.alt,
                 className: cn(
-                  "absolute -bottom-8 -right-8 h-48 w-48 rounded-xl border-4 border-background object-cover shadow-lg",
+                  "size-24 md:size-48",
+                  "rounded-xl object-cover shadow-lg",
+                  "border-4 border-background",
+                  "absolute -bottom-8 -right-2 md:-right-8",
                   secondaryImageClassName
                 ),
                 optixFlowConfig
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { className: "pl-0 md:pl-8", children: [
             title && (typeof title === "string" ? /* @__PURE__ */ jsx(
               "h1",
               {
@@ -7905,18 +7883,8 @@ function AboutStreamlineTeam({
                 ),
                 children: title
               }
-            ) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-              "p",
-              {
-                className: cn(
-                  "mt-6 text-lg",
-                  getTextColor(background, "muted"),
-                  descriptionClassName
-                ),
-                children: description
-              }
-            ) : /* @__PURE__ */ jsx("div", { className: cn("mt-6", descriptionClassName), children: description })),
+            ) : title),
+            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-6 text-lg", descriptionClassName), children: description }) : description),
             featuresContent
           ] })
         ] }),
@@ -7924,35 +7892,44 @@ function AboutStreamlineTeam({
           "div",
           {
             className: cn(
-              "mt-6 md:mt-32 rounded-2xl p-8 md:p-16",
-              getNestedCardBg(background),
-              getNestedCardTextColor(background),
+              "mt-10 md:mt-24 p-6 md:p-16",
+              "bg-muted text-muted-foreground",
+              "rounded-2xl shadow-lg",
               teamSectionClassName
             ),
-            children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-2xl text-center", children: [
-              teamTitle && (typeof teamTitle === "string" ? /* @__PURE__ */ jsx(
-                "h2",
-                {
-                  className: cn(
-                    "text-3xl font-bold md:text-4xl",
-                    teamTitleClassName
-                  ),
-                  children: teamTitle
-                }
-              ) : /* @__PURE__ */ jsx("div", { className: teamTitleClassName, children: teamTitle })),
-              teamDescription && (typeof teamDescription === "string" ? /* @__PURE__ */ jsx(
-                "p",
-                {
-                  className: cn(
-                    "mt-4 text-lg",
-                    getTextColor(background, "muted"),
-                    teamDescriptionClassName
-                  ),
-                  children: teamDescription
-                }
-              ) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", teamDescriptionClassName), children: teamDescription })),
-              actionsContent
-            ] })
+            children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex flex-col md:flex-row",
+                  "justify-center md:justify-between items-center md:items-start",
+                  "gap-8 md:gap-24"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 md:gap-8 text-center md:text-left", children: [
+                    teamTitle && (typeof teamTitle === "string" ? /* @__PURE__ */ jsx(
+                      "h2",
+                      {
+                        className: cn(
+                          "text-3xl font-bold md:text-4xl",
+                          teamTitleClassName
+                        ),
+                        children: teamTitle
+                      }
+                    ) : teamTitle),
+                    teamDescription && (typeof teamDescription === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg", teamDescriptionClassName), children: teamDescription }) : teamDescription)
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    BlockActions,
+                    {
+                      actions,
+                      actionsSlot,
+                      actionsClassName
+                    }
+                  )
+                ]
+              }
+            )
           }
         )
       ]

package/package.json

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