@opensite/ui 0.2.6 → 0.2.8

package/dist/project-detail-architecture-carousel.cjs

@@ -1073,7 +1073,11 @@ var defaultProps = {
   carouselImages: defaultCarouselImages,
   sections: defaultSections,
   gridImages: defaultGridImages,
-  backAction: { label: "Back to Projects", href: "/projects", icon: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-left", size: 16 }) },
+  backAction: {
+    label: "Back to Projects",
+    href: "/projects",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-left", size: 16 })
+  },
   videoUrl: "https://cdn.ing/assets/files/record/286359/architecture-presentation.mp4",
   videoPoster: imagePlaceholders[49],
   pdfUrl: "https://cdn.ing/assets/files/record/286359/5fv7u23rr648t363fy2ibs61sflg",
@@ -1122,7 +1126,9 @@ function ProjectDetailArchitectureCarousel(props) {
     enableLightbox = defaultProps.enableLightbox
   } = props;
   const [currentSlide, setCurrentSlide] = React3.useState(0);
-  const [selectedTab, setSelectedTab] = React3.useState("slides");
+  const [selectedTab, setSelectedTab] = React3.useState(
+    "slides"
+  );
   const [lightboxOpen, setLightboxOpen] = React3.useState(false);
   const [lightboxIndex, setLightboxIndex] = React3.useState(0);
   const lightboxItems = React3.useMemo(() => {
@@ -1136,12 +1142,15 @@ function ProjectDetailArchitectureCarousel(props) {
       share: true
     }));
   }, [carouselImages]);
-  const handleImageClick = React3.useCallback((index) => {
-    if (enableLightbox) {
-      setLightboxIndex(index);
-      setLightboxOpen(true);
-    }
-  }, [enableLightbox]);
+  const handleImageClick = React3.useCallback(
+    (index) => {
+      if (enableLightbox) {
+        setLightboxIndex(index);
+        setLightboxOpen(true);
+      }
+    },
+    [enableLightbox]
+  );
   const handleLightboxClose = React3.useCallback(() => {
     setLightboxOpen(false);
   }, []);
@@ -1160,11 +1169,21 @@ function ProjectDetailArchitectureCarousel(props) {
   const renderBackAction = () => {
     if (backActionSlot) return backActionSlot;
     if (!backAction) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = backAction;
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = backAction;
     return /* @__PURE__ */ jsxRuntime.jsx(
       Pressable,
       {
-        className: cn("inline-flex items-center gap-2 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground", actionClassName),
+        className: cn(
+          "inline-flex items-center gap-2 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground",
+          actionClassName
+        ),
         ...pressableProps,
         children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           icon,
@@ -1192,18 +1211,36 @@ function ProjectDetailArchitectureCarousel(props) {
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: "|" }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: location })
             ] }),
-            typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title }),
+            typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "h1",
+              {
+                className: cn(
+                  "text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl",
+                  titleClassName
+                ),
+                children: title
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title }),
             subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-xl text-muted-foreground", children: subtitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: subtitle }))
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, { ...fadeInUp, className: "mb-16", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative aspect-video overflow-hidden rounded-2xl bg-muted", heroImageClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
-            img.Img,
+          /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, { ...fadeInUp, className: "mb-16", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
             {
-              src: heroImage?.src || imagePlaceholders[56],
-              alt: heroImage?.alt || "Project hero image",
-              className: "h-full w-full object-cover",
-              optixFlowConfig
+              className: cn(
+                "relative aspect-video overflow-hidden rounded-2xl bg-muted",
+                heroImageClassName
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                img.Img,
+                {
+                  src: heroImage?.src || imagePlaceholders[56],
+                  alt: heroImage?.alt || "Project hero image",
+                  className: "h-full w-full object-cover",
+                  optixFlowConfig
+                }
+              )
             }
-          ) }) }),
+          ) }),
           description && /* @__PURE__ */ jsxRuntime.jsx(
             framerMotion.motion.div,
             {
@@ -1230,7 +1267,14 @@ function ProjectDetailArchitectureCarousel(props) {
                       selectedTab === "slides" ? "border-b-2 border-primary text-foreground" : "text-muted-foreground hover:text-foreground"
                     ),
                     children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/images", size: 16, className: "mr-2 inline-block" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        DynamicIcon,
+                        {
+                          name: "lucide/images",
+                          size: 16,
+                          className: "mr-2 inline-block"
+                        }
+                      ),
                       "Slides (",
                       carouselImages?.length || 0,
                       ")"
@@ -1247,7 +1291,14 @@ function ProjectDetailArchitectureCarousel(props) {
                       selectedTab === "video" ? "border-b-2 border-primary text-foreground" : "text-muted-foreground hover:text-foreground"
                     ),
                     children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/play-circle", size: 16, className: "mr-2 inline-block" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        DynamicIcon,
+                        {
+                          name: "lucide/play-circle",
+                          size: 16,
+                          className: "mr-2 inline-block"
+                        }
+                      ),
                       "Video"
                     ]
                   }
@@ -1262,7 +1313,14 @@ function ProjectDetailArchitectureCarousel(props) {
                       selectedTab === "pdf" ? "border-b-2 border-primary text-foreground" : "text-muted-foreground hover:text-foreground"
                     ),
                     children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/file-text", size: 16, className: "mr-2 inline-block" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        DynamicIcon,
+                        {
+                          name: "lucide/file-text",
+                          size: 16,
+                          className: "mr-2 inline-block"
+                        }
+                      ),
                       "PDF Document"
                     ]
                   }
@@ -1414,7 +1472,10 @@ function ProjectDetailArchitectureCarousel(props) {
             {
               ...fadeInUp,
               transition: { duration: 0.6, delay: 0.3 },
-              className: cn("mb-16 grid gap-12 md:grid-cols-2", sectionsClassName),
+              className: cn(
+                "mb-16 grid gap-12 md:grid-cols-2",
+                sectionsClassName
+              ),
               children: sections.map((section, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
                 typeof section.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "mb-4 text-2xl font-semibold text-foreground", children: section.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: section.title }),
                 typeof section.content === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg leading-relaxed text-muted-foreground", children: section.content }) : section.content

package/dist/project-detail-architecture-carousel.js

@@ -1052,7 +1052,11 @@ var defaultProps = {
   carouselImages: defaultCarouselImages,
   sections: defaultSections,
   gridImages: defaultGridImages,
-  backAction: { label: "Back to Projects", href: "/projects", icon: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-left", size: 16 }) },
+  backAction: {
+    label: "Back to Projects",
+    href: "/projects",
+    icon: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-left", size: 16 })
+  },
   videoUrl: "https://cdn.ing/assets/files/record/286359/architecture-presentation.mp4",
   videoPoster: imagePlaceholders[49],
   pdfUrl: "https://cdn.ing/assets/files/record/286359/5fv7u23rr648t363fy2ibs61sflg",
@@ -1101,7 +1105,9 @@ function ProjectDetailArchitectureCarousel(props) {
     enableLightbox = defaultProps.enableLightbox
   } = props;
   const [currentSlide, setCurrentSlide] = useState(0);
-  const [selectedTab, setSelectedTab] = useState("slides");
+  const [selectedTab, setSelectedTab] = useState(
+    "slides"
+  );
   const [lightboxOpen, setLightboxOpen] = useState(false);
   const [lightboxIndex, setLightboxIndex] = useState(0);
   const lightboxItems = useMemo(() => {
@@ -1115,12 +1121,15 @@ function ProjectDetailArchitectureCarousel(props) {
       share: true
     }));
   }, [carouselImages]);
-  const handleImageClick = useCallback((index) => {
-    if (enableLightbox) {
-      setLightboxIndex(index);
-      setLightboxOpen(true);
-    }
-  }, [enableLightbox]);
+  const handleImageClick = useCallback(
+    (index) => {
+      if (enableLightbox) {
+        setLightboxIndex(index);
+        setLightboxOpen(true);
+      }
+    },
+    [enableLightbox]
+  );
   const handleLightboxClose = useCallback(() => {
     setLightboxOpen(false);
   }, []);
@@ -1139,11 +1148,21 @@ function ProjectDetailArchitectureCarousel(props) {
   const renderBackAction = () => {
     if (backActionSlot) return backActionSlot;
     if (!backAction) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = backAction;
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = backAction;
     return /* @__PURE__ */ jsx(
       Pressable,
       {
-        className: cn("inline-flex items-center gap-2 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground", actionClassName),
+        className: cn(
+          "inline-flex items-center gap-2 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground",
+          actionClassName
+        ),
         ...pressableProps,
         children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
           icon,
@@ -1171,18 +1190,36 @@ function ProjectDetailArchitectureCarousel(props) {
               /* @__PURE__ */ jsx("span", { children: "|" }),
               /* @__PURE__ */ jsx("span", { children: location })
             ] }),
-            typeof title === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title }),
+            typeof title === "string" ? /* @__PURE__ */ jsx(
+              "h1",
+              {
+                className: cn(
+                  "text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl",
+                  titleClassName
+                ),
+                children: title
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title }),
             subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-4 text-xl text-muted-foreground", children: subtitle }) : /* @__PURE__ */ jsx("div", { className: "mt-4", children: subtitle }))
           ] }),
-          /* @__PURE__ */ jsx(motion.div, { ...fadeInUp, className: "mb-16", children: /* @__PURE__ */ jsx("div", { className: cn("relative aspect-video overflow-hidden rounded-2xl bg-muted", heroImageClassName), children: /* @__PURE__ */ jsx(
-            Img,
+          /* @__PURE__ */ jsx(motion.div, { ...fadeInUp, className: "mb-16", children: /* @__PURE__ */ jsx(
+            "div",
             {
-              src: heroImage?.src || imagePlaceholders[56],
-              alt: heroImage?.alt || "Project hero image",
-              className: "h-full w-full object-cover",
-              optixFlowConfig
+              className: cn(
+                "relative aspect-video overflow-hidden rounded-2xl bg-muted",
+                heroImageClassName
+              ),
+              children: /* @__PURE__ */ jsx(
+                Img,
+                {
+                  src: heroImage?.src || imagePlaceholders[56],
+                  alt: heroImage?.alt || "Project hero image",
+                  className: "h-full w-full object-cover",
+                  optixFlowConfig
+                }
+              )
             }
-          ) }) }),
+          ) }),
           description && /* @__PURE__ */ jsx(
             motion.div,
             {
@@ -1209,7 +1246,14 @@ function ProjectDetailArchitectureCarousel(props) {
                       selectedTab === "slides" ? "border-b-2 border-primary text-foreground" : "text-muted-foreground hover:text-foreground"
                     ),
                     children: [
-                      /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/images", size: 16, className: "mr-2 inline-block" }),
+                      /* @__PURE__ */ jsx(
+                        DynamicIcon,
+                        {
+                          name: "lucide/images",
+                          size: 16,
+                          className: "mr-2 inline-block"
+                        }
+                      ),
                       "Slides (",
                       carouselImages?.length || 0,
                       ")"
@@ -1226,7 +1270,14 @@ function ProjectDetailArchitectureCarousel(props) {
                       selectedTab === "video" ? "border-b-2 border-primary text-foreground" : "text-muted-foreground hover:text-foreground"
                     ),
                     children: [
-                      /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/play-circle", size: 16, className: "mr-2 inline-block" }),
+                      /* @__PURE__ */ jsx(
+                        DynamicIcon,
+                        {
+                          name: "lucide/play-circle",
+                          size: 16,
+                          className: "mr-2 inline-block"
+                        }
+                      ),
                       "Video"
                     ]
                   }
@@ -1241,7 +1292,14 @@ function ProjectDetailArchitectureCarousel(props) {
                       selectedTab === "pdf" ? "border-b-2 border-primary text-foreground" : "text-muted-foreground hover:text-foreground"
                     ),
                     children: [
-                      /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/file-text", size: 16, className: "mr-2 inline-block" }),
+                      /* @__PURE__ */ jsx(
+                        DynamicIcon,
+                        {
+                          name: "lucide/file-text",
+                          size: 16,
+                          className: "mr-2 inline-block"
+                        }
+                      ),
                       "PDF Document"
                     ]
                   }
@@ -1393,7 +1451,10 @@ function ProjectDetailArchitectureCarousel(props) {
             {
               ...fadeInUp,
               transition: { duration: 0.6, delay: 0.3 },
-              className: cn("mb-16 grid gap-12 md:grid-cols-2", sectionsClassName),
+              className: cn(
+                "mb-16 grid gap-12 md:grid-cols-2",
+                sectionsClassName
+              ),
               children: sections.map((section, index) => /* @__PURE__ */ jsxs("div", { children: [
                 typeof section.title === "string" ? /* @__PURE__ */ jsx("h2", { className: "mb-4 text-2xl font-semibold text-foreground", children: section.title }) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: section.title }),
                 typeof section.content === "string" ? /* @__PURE__ */ jsx("p", { className: "text-lg leading-relaxed text-muted-foreground", children: section.content }) : section.content

package/dist/registry.cjs

@@ -77786,7 +77786,11 @@ var defaultProps15 = {
   carouselImages: defaultCarouselImages3,
   sections: defaultSections17,
   gridImages: defaultGridImages3,
-  backAction: { label: "Back to Projects", href: "/projects", icon: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-left", size: 16 }) },
+  backAction: {
+    label: "Back to Projects",
+    href: "/projects",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-left", size: 16 })
+  },
   videoUrl: "https://cdn.ing/assets/files/record/286359/architecture-presentation.mp4",
   videoPoster: imagePlaceholders[49],
   pdfUrl: "https://cdn.ing/assets/files/record/286359/5fv7u23rr648t363fy2ibs61sflg",
@@ -77835,7 +77839,9 @@ function ProjectDetailArchitectureCarousel(props) {
     enableLightbox = defaultProps15.enableLightbox
   } = props;
   const [currentSlide, setCurrentSlide] = React11.useState(0);
-  const [selectedTab, setSelectedTab] = React11.useState("slides");
+  const [selectedTab, setSelectedTab] = React11.useState(
+    "slides"
+  );
   const [lightboxOpen, setLightboxOpen] = React11.useState(false);
   const [lightboxIndex, setLightboxIndex] = React11.useState(0);
   const lightboxItems = React11.useMemo(() => {
@@ -77849,12 +77855,15 @@ function ProjectDetailArchitectureCarousel(props) {
       share: true
     }));
   }, [carouselImages]);
-  const handleImageClick = React11.useCallback((index) => {
-    if (enableLightbox) {
-      setLightboxIndex(index);
-      setLightboxOpen(true);
-    }
-  }, [enableLightbox]);
+  const handleImageClick = React11.useCallback(
+    (index) => {
+      if (enableLightbox) {
+        setLightboxIndex(index);
+        setLightboxOpen(true);
+      }
+    },
+    [enableLightbox]
+  );
   const handleLightboxClose = React11.useCallback(() => {
     setLightboxOpen(false);
   }, []);
@@ -77873,11 +77882,21 @@ function ProjectDetailArchitectureCarousel(props) {
   const renderBackAction = () => {
     if (backActionSlot) return backActionSlot;
     if (!backAction) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = backAction;
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = backAction;
     return /* @__PURE__ */ jsxRuntime.jsx(
       Pressable,
       {
-        className: cn("inline-flex items-center gap-2 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground", actionClassName),
+        className: cn(
+          "inline-flex items-center gap-2 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground",
+          actionClassName
+        ),
         ...pressableProps,
         children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           icon,
@@ -77905,18 +77924,36 @@ function ProjectDetailArchitectureCarousel(props) {
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: "|" }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: location })
             ] }),
-            typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title }),
+            typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "h1",
+              {
+                className: cn(
+                  "text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl",
+                  titleClassName
+                ),
+                children: title
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title }),
             subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-xl text-muted-foreground", children: subtitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: subtitle }))
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, { ...fadeInUp12, className: "mb-16", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative aspect-video overflow-hidden rounded-2xl bg-muted", heroImageClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
-            img.Img,
+          /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, { ...fadeInUp12, className: "mb-16", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
             {
-              src: heroImage?.src || imagePlaceholders[56],
-              alt: heroImage?.alt || "Project hero image",
-              className: "h-full w-full object-cover",
-              optixFlowConfig
+              className: cn(
+                "relative aspect-video overflow-hidden rounded-2xl bg-muted",
+                heroImageClassName
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                img.Img,
+                {
+                  src: heroImage?.src || imagePlaceholders[56],
+                  alt: heroImage?.alt || "Project hero image",
+                  className: "h-full w-full object-cover",
+                  optixFlowConfig
+                }
+              )
             }
-          ) }) }),
+          ) }),
           description && /* @__PURE__ */ jsxRuntime.jsx(
             framerMotion.motion.div,
             {
@@ -77943,7 +77980,14 @@ function ProjectDetailArchitectureCarousel(props) {
                       selectedTab === "slides" ? "border-b-2 border-primary text-foreground" : "text-muted-foreground hover:text-foreground"
                     ),
                     children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/images", size: 16, className: "mr-2 inline-block" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        DynamicIcon,
+                        {
+                          name: "lucide/images",
+                          size: 16,
+                          className: "mr-2 inline-block"
+                        }
+                      ),
                       "Slides (",
                       carouselImages?.length || 0,
                       ")"
@@ -77960,7 +78004,14 @@ function ProjectDetailArchitectureCarousel(props) {
                       selectedTab === "video" ? "border-b-2 border-primary text-foreground" : "text-muted-foreground hover:text-foreground"
                     ),
                     children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/play-circle", size: 16, className: "mr-2 inline-block" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        DynamicIcon,
+                        {
+                          name: "lucide/play-circle",
+                          size: 16,
+                          className: "mr-2 inline-block"
+                        }
+                      ),
                       "Video"
                     ]
                   }
@@ -77975,7 +78026,14 @@ function ProjectDetailArchitectureCarousel(props) {
                       selectedTab === "pdf" ? "border-b-2 border-primary text-foreground" : "text-muted-foreground hover:text-foreground"
                     ),
                     children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/file-text", size: 16, className: "mr-2 inline-block" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        DynamicIcon,
+                        {
+                          name: "lucide/file-text",
+                          size: 16,
+                          className: "mr-2 inline-block"
+                        }
+                      ),
                       "PDF Document"
                     ]
                   }
@@ -78127,7 +78185,10 @@ function ProjectDetailArchitectureCarousel(props) {
             {
               ...fadeInUp12,
               transition: { duration: 0.6, delay: 0.3 },
-              className: cn("mb-16 grid gap-12 md:grid-cols-2", sectionsClassName),
+              className: cn(
+                "mb-16 grid gap-12 md:grid-cols-2",
+                sectionsClassName
+              ),
               children: sections.map((section, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
                 typeof section.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "mb-4 text-2xl font-semibold text-foreground", children: section.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: section.title }),
                 typeof section.content === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg leading-relaxed text-muted-foreground", children: section.content }) : section.content

package/dist/registry.js

@@ -77746,7 +77746,11 @@ var defaultProps15 = {
   carouselImages: defaultCarouselImages3,
   sections: defaultSections17,
   gridImages: defaultGridImages3,
-  backAction: { label: "Back to Projects", href: "/projects", icon: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-left", size: 16 }) },
+  backAction: {
+    label: "Back to Projects",
+    href: "/projects",
+    icon: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-left", size: 16 })
+  },
   videoUrl: "https://cdn.ing/assets/files/record/286359/architecture-presentation.mp4",
   videoPoster: imagePlaceholders[49],
   pdfUrl: "https://cdn.ing/assets/files/record/286359/5fv7u23rr648t363fy2ibs61sflg",
@@ -77795,7 +77799,9 @@ function ProjectDetailArchitectureCarousel(props) {
     enableLightbox = defaultProps15.enableLightbox
   } = props;
   const [currentSlide, setCurrentSlide] = useState(0);
-  const [selectedTab, setSelectedTab] = useState("slides");
+  const [selectedTab, setSelectedTab] = useState(
+    "slides"
+  );
   const [lightboxOpen, setLightboxOpen] = useState(false);
   const [lightboxIndex, setLightboxIndex] = useState(0);
   const lightboxItems = useMemo(() => {
@@ -77809,12 +77815,15 @@ function ProjectDetailArchitectureCarousel(props) {
       share: true
     }));
   }, [carouselImages]);
-  const handleImageClick = useCallback((index) => {
-    if (enableLightbox) {
-      setLightboxIndex(index);
-      setLightboxOpen(true);
-    }
-  }, [enableLightbox]);
+  const handleImageClick = useCallback(
+    (index) => {
+      if (enableLightbox) {
+        setLightboxIndex(index);
+        setLightboxOpen(true);
+      }
+    },
+    [enableLightbox]
+  );
   const handleLightboxClose = useCallback(() => {
     setLightboxOpen(false);
   }, []);
@@ -77833,11 +77842,21 @@ function ProjectDetailArchitectureCarousel(props) {
   const renderBackAction = () => {
     if (backActionSlot) return backActionSlot;
     if (!backAction) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = backAction;
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = backAction;
     return /* @__PURE__ */ jsx(
       Pressable,
       {
-        className: cn("inline-flex items-center gap-2 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground", actionClassName),
+        className: cn(
+          "inline-flex items-center gap-2 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground",
+          actionClassName
+        ),
         ...pressableProps,
         children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
           icon,
@@ -77865,18 +77884,36 @@ function ProjectDetailArchitectureCarousel(props) {
               /* @__PURE__ */ jsx("span", { children: "|" }),
               /* @__PURE__ */ jsx("span", { children: location })
             ] }),
-            typeof title === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title }),
+            typeof title === "string" ? /* @__PURE__ */ jsx(
+              "h1",
+              {
+                className: cn(
+                  "text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl",
+                  titleClassName
+                ),
+                children: title
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title }),
             subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-4 text-xl text-muted-foreground", children: subtitle }) : /* @__PURE__ */ jsx("div", { className: "mt-4", children: subtitle }))
           ] }),
-          /* @__PURE__ */ jsx(motion.div, { ...fadeInUp12, className: "mb-16", children: /* @__PURE__ */ jsx("div", { className: cn("relative aspect-video overflow-hidden rounded-2xl bg-muted", heroImageClassName), children: /* @__PURE__ */ jsx(
-            Img,
+          /* @__PURE__ */ jsx(motion.div, { ...fadeInUp12, className: "mb-16", children: /* @__PURE__ */ jsx(
+            "div",
             {
-              src: heroImage?.src || imagePlaceholders[56],
-              alt: heroImage?.alt || "Project hero image",
-              className: "h-full w-full object-cover",
-              optixFlowConfig
+              className: cn(
+                "relative aspect-video overflow-hidden rounded-2xl bg-muted",
+                heroImageClassName
+              ),
+              children: /* @__PURE__ */ jsx(
+                Img,
+                {
+                  src: heroImage?.src || imagePlaceholders[56],
+                  alt: heroImage?.alt || "Project hero image",
+                  className: "h-full w-full object-cover",
+                  optixFlowConfig
+                }
+              )
             }
-          ) }) }),
+          ) }),
           description && /* @__PURE__ */ jsx(
             motion.div,
             {
@@ -77903,7 +77940,14 @@ function ProjectDetailArchitectureCarousel(props) {
                       selectedTab === "slides" ? "border-b-2 border-primary text-foreground" : "text-muted-foreground hover:text-foreground"
                     ),
                     children: [
-                      /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/images", size: 16, className: "mr-2 inline-block" }),
+                      /* @__PURE__ */ jsx(
+                        DynamicIcon,
+                        {
+                          name: "lucide/images",
+                          size: 16,
+                          className: "mr-2 inline-block"
+                        }
+                      ),
                       "Slides (",
                       carouselImages?.length || 0,
                       ")"
@@ -77920,7 +77964,14 @@ function ProjectDetailArchitectureCarousel(props) {
                       selectedTab === "video" ? "border-b-2 border-primary text-foreground" : "text-muted-foreground hover:text-foreground"
                     ),
                     children: [
-                      /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/play-circle", size: 16, className: "mr-2 inline-block" }),
+                      /* @__PURE__ */ jsx(
+                        DynamicIcon,
+                        {
+                          name: "lucide/play-circle",
+                          size: 16,
+                          className: "mr-2 inline-block"
+                        }
+                      ),
                       "Video"
                     ]
                   }
@@ -77935,7 +77986,14 @@ function ProjectDetailArchitectureCarousel(props) {
                       selectedTab === "pdf" ? "border-b-2 border-primary text-foreground" : "text-muted-foreground hover:text-foreground"
                     ),
                     children: [
-                      /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/file-text", size: 16, className: "mr-2 inline-block" }),
+                      /* @__PURE__ */ jsx(
+                        DynamicIcon,
+                        {
+                          name: "lucide/file-text",
+                          size: 16,
+                          className: "mr-2 inline-block"
+                        }
+                      ),
                       "PDF Document"
                     ]
                   }
@@ -78087,7 +78145,10 @@ function ProjectDetailArchitectureCarousel(props) {
             {
               ...fadeInUp12,
               transition: { duration: 0.6, delay: 0.3 },
-              className: cn("mb-16 grid gap-12 md:grid-cols-2", sectionsClassName),
+              className: cn(
+                "mb-16 grid gap-12 md:grid-cols-2",
+                sectionsClassName
+              ),
               children: sections.map((section, index) => /* @__PURE__ */ jsxs("div", { children: [
                 typeof section.title === "string" ? /* @__PURE__ */ jsx("h2", { className: "mb-4 text-2xl font-semibold text-foreground", children: section.title }) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: section.title }),
                 typeof section.content === "string" ? /* @__PURE__ */ jsx("p", { className: "text-lg leading-relaxed text-muted-foreground", children: section.content }) : section.content

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensite/ui",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "description": "Foundational UI component library for OpenSite Semantic Site Builder with tree-shakable exports and abstract styling",
   "keywords": [
     "react",
@@ -3304,8 +3304,8 @@
     "@opensite/hooks": "^0.1.1",
     "@page-speed/forms": "0.3.4",
     "@page-speed/img": "0.4.3",
-    "@page-speed/lightbox": "0.1.5",
-    "@page-speed/pdf-viewer": "0.1.3",
+    "@page-speed/lightbox": "0.1.7",
+    "@page-speed/pdf-viewer": "0.1.5",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-aspect-ratio": "^1.1.8",
     "@radix-ui/react-avatar": "^1.1.11",