@opensite/ui 0.7.1 → 0.7.3

package/dist/carousel-animated-sections.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BRz60ABw.js';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-DRE-f6cS.js';
+import { f as SectionBackground, g as SectionSpacing, e as ContainerMaxWidth } from './community-initiatives-BeWIIjA4.js';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 /**
@@ -121,9 +121,10 @@ interface CarouselAnimatedSectionsProps {
      */
     counterClassName?: string;
     /**
-     * Additional CSS classes for the overlay
+     * Granular control of brightness for slide media
+     * Values 10-40 use arbitrary Tailwind values for finer control on bright images
      */
-    overlayClassName?: string;
+    slideMediaBrightness?: "10" | "20" | "25" | "30" | "40" | "50" | "75" | "100";
     /**
      * OptixFlow image optimization configuration
      */
@@ -144,7 +145,11 @@ interface CarouselAnimatedSectionsProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /**
+     * Optional max width for the content container
+     */
+    containerMaxWidth?: ContainerMaxWidth;
 }
-declare function CarouselAnimatedSections({ sections, sectionsSlot, actionsSlot, actions, className, containerClassName, contentClassName, subtitleClassName, titleClassName, descriptionClassName, actionsClassName, navigationClassName, arrowsClassName, counterClassName, overlayClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, }: CarouselAnimatedSectionsProps): React.JSX.Element;
+declare function CarouselAnimatedSections({ sections, sectionsSlot, actionsSlot, actions, className, containerClassName, contentClassName, subtitleClassName, titleClassName, descriptionClassName, actionsClassName, navigationClassName, arrowsClassName, counterClassName, slideMediaBrightness, optixFlowConfig, background, spacing, containerMaxWidth, pattern, patternOpacity, }: CarouselAnimatedSectionsProps): React.JSX.Element;
 
 export { type AnimatedSection, CarouselAnimatedSections, type CarouselAnimatedSectionsProps };

package/dist/carousel-animated-sections.js

@@ -910,13 +910,23 @@ var Section = React6__default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var BRIGHTNESS_CLASS_MAP = {
+  "10": "brightness-[.1]",
+  "20": "brightness-[.2]",
+  "25": "brightness-[.25]",
+  "30": "brightness-[.3]",
+  "40": "brightness-[.4]",
+  "50": "brightness-50",
+  "75": "brightness-75",
+  "100": "brightness-100"
+};
 function CarouselAnimatedSections({
   sections,
   sectionsSlot,
   actionsSlot,
   actions,
   className,
-  containerClassName,
+  containerClassName = "h-full flex flex-col justify-center",
   contentClassName,
   subtitleClassName,
   titleClassName,
@@ -925,12 +935,13 @@ function CarouselAnimatedSections({
   navigationClassName,
   arrowsClassName,
   counterClassName,
-  overlayClassName,
+  slideMediaBrightness = "50",
   optixFlowConfig,
-  background,
-  spacing,
-  pattern,
-  patternOpacity
+  background = "dark",
+  spacing = "py-0",
+  containerMaxWidth = "full",
+  pattern = "diagonalCrossBasic",
+  patternOpacity = 0.033
 }) {
   const [currentIndex, setCurrentIndex] = React6.useState(0);
   const [direction, setDirection] = React6.useState(0);
@@ -964,25 +975,6 @@ function CarouselAnimatedSections({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [goToNext, goToPrev]);
-  React6.useEffect(() => {
-    let timeout;
-    const handleWheel = (e) => {
-      e.preventDefault();
-      clearTimeout(timeout);
-      timeout = setTimeout(() => {
-        if (e.deltaY > 0) {
-          goToNext();
-        } else if (e.deltaY < 0) {
-          goToPrev();
-        }
-      }, 50);
-    };
-    window.addEventListener("wheel", handleWheel, { passive: false });
-    return () => {
-      window.removeEventListener("wheel", handleWheel);
-      clearTimeout(timeout);
-    };
-  }, [goToNext, goToPrev]);
   const slideVariants = {
     enter: (direction2) => ({
       y: direction2 > 0 ? "100%" : "-100%",
@@ -998,7 +990,7 @@ function CarouselAnimatedSections({
     })
   };
   const currentSection = sections?.[currentIndex];
-  const renderActions = () => {
+  const actionElements = React6.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (actions && actions.length > 0) {
       return actions.map((action, index) => /* @__PURE__ */ jsxs(
@@ -1008,11 +1000,8 @@ function CarouselAnimatedSections({
           onClick: action.onClick,
           asButton: true,
           variant: action.variant,
-          size: action.size || "lg",
-          className: cn(
-            "bg-white text-black hover:bg-white/90",
-            action.className
-          ),
+          size: action.size,
+          className: cn(action.className),
           children: [
             action.label,
             action.icon && /* @__PURE__ */ jsx("span", { className: "ml-2", children: action.icon }),
@@ -1023,7 +1012,7 @@ function CarouselAnimatedSections({
       ));
     }
     return null;
-  };
+  }, [actionsSlot, actions]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -1032,8 +1021,10 @@ function CarouselAnimatedSections({
       className: cn("relative h-screen w-full overflow-hidden", className),
       pattern,
       patternOpacity,
+      containerMaxWidth,
+      containerClassName,
       children: [
-        sectionsSlot ? sectionsSlot : currentSection ? /* @__PURE__ */ jsx(AnimatePresence, { initial: false, custom: direction, mode: "wait", children: /* @__PURE__ */ jsxs(
+        sectionsSlot ? sectionsSlot : currentSection ? /* @__PURE__ */ jsx(AnimatePresence, { initial: false, custom: direction, mode: "wait", children: /* @__PURE__ */ jsx(
           motion.div,
           {
             custom: direction,
@@ -1044,26 +1035,19 @@ function CarouselAnimatedSections({
             transition: { duration: 0.6, ease: [0.4, 0, 0.2, 1] },
             onAnimationComplete: () => setIsAnimating(false),
             className: cn("absolute inset-0", currentSection?.className),
-            children: [
-              /* @__PURE__ */ jsx(
-                Img,
-                {
-                  src: currentSection?.image,
-                  alt: typeof currentSection?.title === "string" ? currentSection?.title : `Section ${currentSection?.id}`,
-                  className: cn(
-                    "h-full w-full object-cover",
-                    currentSection?.imageClassName
-                  ),
-                  optixFlowConfig
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: cn("absolute inset-0 bg-black/50", overlayClassName)
-                }
-              )
-            ]
+            children: /* @__PURE__ */ jsx(
+              Img,
+              {
+                src: currentSection?.image,
+                alt: typeof currentSection?.title === "string" ? currentSection?.title : `Section ${currentSection?.id}`,
+                className: cn(
+                  "h-full w-full object-cover",
+                  BRIGHTNESS_CLASS_MAP[slideMediaBrightness],
+                  currentSection?.imageClassName
+                ),
+                optixFlowConfig
+              }
+            )
           },
           currentIndex
         ) }) : null,
@@ -1081,7 +1065,7 @@ function CarouselAnimatedSections({
                 animate: { opacity: 1, y: 0 },
                 exit: { opacity: 0, y: -40 },
                 transition: { duration: 0.4, delay: 0.2 },
-                className: "max-w-2xl text-white",
+                className: "max-w-2xl text-white text-shadow",
                 children: [
                   currentSection?.subtitle && (typeof currentSection?.subtitle === "string" ? /* @__PURE__ */ jsx(
                     "p",
@@ -1107,13 +1091,13 @@ function CarouselAnimatedSections({
                     "p",
                     {
                       className: cn(
-                        "mb-8 text-lg text-white/80",
+                        "mb-8 text-lg text-white/80 text-balance",
                         descriptionClassName
                       ),
                       children: currentSection?.description
                     }
                   ) : /* @__PURE__ */ jsx("div", { className: cn("mb-8", descriptionClassName), children: currentSection?.description })),
-                  /* @__PURE__ */ jsx("div", { className: actionsClassName, children: renderActions() || currentSection?.ctaText && /* @__PURE__ */ jsxs(
+                  /* @__PURE__ */ jsx("div", { className: actionsClassName, children: actionElements || currentSection?.ctaText && /* @__PURE__ */ jsxs(
                     Pressable,
                     {
                       href: currentSection?.ctaHref,

package/dist/carousel-auto-progress-slides.cjs

@@ -953,11 +953,11 @@ var variants = {
 function CarouselAutoProgressSlides({
   heading,
   subheading,
-  slideLabel,
   items,
   slidesSlot,
-  autoAdvanceInterval = 50,
+  autoAdvanceInterval = 4200,
   className,
+  containerClassName = "flex flex-col items-center justify-center gap-6 md:gap-12",
   headerClassName,
   headingClassName,
   subheadingClassName,
@@ -966,8 +966,8 @@ function CarouselAutoProgressSlides({
   slideContainerClassName,
   imageClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
   patternOpacity
 }) {
@@ -1023,54 +1023,73 @@ function CarouselAutoProgressSlides({
       ),
       pattern,
       patternOpacity,
+      containerClassName,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("text-center", headerClassName), children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-6xl tracking-tighter", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-2xl text-foreground/50", subheadingClassName), children: subheading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", subheadingClassName), children: subheading }))
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center justify-center gap-5", navigationClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Pressable,
+          subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
             {
-              onClick: handlePrev,
-              asButton: true,
-              variant: "ghost",
-              size: "icon",
-              className: "flex size-6 cursor-pointer items-center justify-center rounded-full bg-foreground/10 p-0.5 text-foreground/50 hover:bg-foreground/20 active:scale-95",
-              children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-left", size: 16 })
+              className: cn(
+                "mt-4 text-2xl text-foreground/50",
+                subheadingClassName
+              ),
+              children: subheading
             }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center gap-1", children: items?.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
-            framerMotion.motion.button,
-            {
-              initial: false,
-              onClick: () => handleDotClick(index),
-              animate: {
-                width: index === currentIndex ? "30px" : "8px"
-              },
-              className: "relative flex h-2 cursor-pointer items-center justify-center overflow-hidden rounded-full bg-foreground/15 p-0.5 text-foreground/50",
-              children: currentIndex === index && /* @__PURE__ */ jsxRuntime.jsx(
-                framerMotion.motion.div,
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", subheadingClassName), children: subheading }))
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "flex items-center justify-center gap-5",
+              navigationClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Pressable,
+                {
+                  onClick: handlePrev,
+                  asButton: true,
+                  variant: "ghost",
+                  size: "icon",
+                  className: "flex size-6 cursor-pointer items-center justify-center rounded-full bg-foreground/10 p-0.5 text-foreground/50 hover:bg-foreground/20 active:scale-95",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-left", size: 16 })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center gap-1", children: items?.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                framerMotion.motion.button,
+                {
+                  initial: false,
+                  onClick: () => handleDotClick(index),
+                  animate: {
+                    width: index === currentIndex ? "30px" : "8px"
+                  },
+                  className: "relative flex h-2 cursor-pointer items-center justify-center overflow-hidden rounded-full bg-foreground/15 p-0.5 text-foreground/50",
+                  children: currentIndex === index && /* @__PURE__ */ jsxRuntime.jsx(
+                    framerMotion.motion.div,
+                    {
+                      style: { clipPath },
+                      className: "absolute left-0 top-0 h-full w-full origin-left rounded-full bg-foreground"
+                    }
+                  )
+                },
+                index
+              )) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Pressable,
                 {
-                  style: { clipPath },
-                  className: "absolute left-0 top-0 h-full w-full origin-left rounded-full bg-foreground"
+                  onClick: handleNext,
+                  asButton: true,
+                  variant: "ghost",
+                  size: "icon",
+                  className: "flex size-6 cursor-pointer items-center justify-center rounded-full bg-foreground/10 p-0.5 text-neutral-400 hover:bg-foreground/20 active:scale-95",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 })
                 }
               )
-            },
-            index
-          )) }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Pressable,
-            {
-              onClick: handleNext,
-              asButton: true,
-              variant: "ghost",
-              size: "icon",
-              className: "flex size-6 cursor-pointer items-center justify-center rounded-full bg-foreground/10 p-0.5 text-neutral-400 hover:bg-foreground/20 active:scale-95",
-              children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 })
-            }
-          )
-        ] }),
+            ]
+          }
+        ),
         slidesSlot ? slidesSlot : /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, mode: "popLayout", custom: direction, children: currentIndex !== null && /* @__PURE__ */ jsxRuntime.jsxs(
           framerMotion.motion.div,
           {
@@ -1080,26 +1099,51 @@ function CarouselAutoProgressSlides({
             exit: "exit",
             custom: direction,
             transition: { type: "spring", stiffness: 100, damping: 30 },
-            className: cn("flex w-full max-w-3xl flex-col items-center justify-center", items?.[currentIndex]?.className),
+            className: cn(
+              "flex w-full max-w-3xl flex-col items-center justify-center",
+              items?.[currentIndex]?.className
+            ),
             children: [
-              slideLabel && (typeof slideLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-6 text-2xl text-foreground/50", slideLabelClassName), children: slideLabel }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-6", slideLabelClassName), children: slideLabel })),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("h-[550px] w-full overflow-hidden rounded-3xl bg-foreground/10 p-1", slideContainerClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
-                framerMotion.motion.div,
+              typeof items?.[currentIndex]?.label === "string" && /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
                 {
-                  initial: { scale: 0.9 },
-                  animate: { scale: 1 },
-                  className: "h-full w-full",
+                  className: cn(
+                    "mb-6 font-medium text-center text-lg text-foreground/50",
+                    slideLabelClassName
+                  ),
+                  children: items?.[currentIndex]?.label
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "h-[550px] w-full overflow-hidden rounded-3xl bg-foreground/10 p-1",
+                    slideContainerClassName
+                  ),
                   children: /* @__PURE__ */ jsxRuntime.jsx(
-                    img.Img,
+                    framerMotion.motion.div,
                     {
-                      src: items?.[currentIndex]?.src ?? "",
-                      alt: typeof items?.[currentIndex]?.label === "string" ? items[currentIndex].label : `Slide ${currentIndex + 1}`,
-                      className: cn("h-full w-full rounded-3xl object-cover", imageClassName, items?.[currentIndex]?.imageClassName),
-                      optixFlowConfig
+                      initial: { scale: 0.9 },
+                      animate: { scale: 1 },
+                      className: "h-full w-full",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        img.Img,
+                        {
+                          src: items?.[currentIndex]?.src ?? "",
+                          alt: typeof items?.[currentIndex]?.label === "string" ? items[currentIndex].label : `Slide ${currentIndex + 1}`,
+                          className: cn(
+                            "h-full w-full rounded-3xl object-cover",
+                            imageClassName,
+                            items?.[currentIndex]?.imageClassName
+                          ),
+                          optixFlowConfig
+                        }
+                      )
                     }
                   )
                 }
-              ) })
+              )
             ]
           },
           currentIndex

package/dist/carousel-auto-progress-slides.d.cts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-CES_LEJI.cjs';
-import { O as OptixFlowConfig } from './blocks-tmd_MRJv.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-Sm_ZSgyv.cjs';
+import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 /**
@@ -48,10 +48,6 @@ interface CarouselAutoProgressSlidesProps {
      * Subheading/description text
      */
     subheading?: React.ReactNode;
-    /**
-     * Label shown above each slide
-     */
-    slideLabel?: React.ReactNode;
     /**
      * Array of slide items
      */
@@ -68,6 +64,10 @@ interface CarouselAutoProgressSlidesProps {
      * Additional CSS classes for the section
      */
     className?: string;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
     /**
      * Additional CSS classes for the header area
      */
@@ -117,6 +117,6 @@ interface CarouselAutoProgressSlidesProps {
      */
     patternOpacity?: number;
 }
-declare function CarouselAutoProgressSlides({ heading, subheading, slideLabel, items, slidesSlot, autoAdvanceInterval, className, headerClassName, headingClassName, subheadingClassName, navigationClassName, slideLabelClassName, slideContainerClassName, imageClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, }: CarouselAutoProgressSlidesProps): React.JSX.Element;
+declare function CarouselAutoProgressSlides({ heading, subheading, items, slidesSlot, autoAdvanceInterval, className, containerClassName, headerClassName, headingClassName, subheadingClassName, navigationClassName, slideLabelClassName, slideContainerClassName, imageClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, }: CarouselAutoProgressSlidesProps): React.JSX.Element;
 
 export { CarouselAutoProgressSlides, type CarouselAutoProgressSlidesProps };

package/dist/carousel-auto-progress-slides.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BRz60ABw.js';
-import { O as OptixFlowConfig } from './blocks-DRE-f6cS.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BeWIIjA4.js';
+import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 /**
@@ -48,10 +48,6 @@ interface CarouselAutoProgressSlidesProps {
      * Subheading/description text
      */
     subheading?: React.ReactNode;
-    /**
-     * Label shown above each slide
-     */
-    slideLabel?: React.ReactNode;
     /**
      * Array of slide items
      */
@@ -68,6 +64,10 @@ interface CarouselAutoProgressSlidesProps {
      * Additional CSS classes for the section
      */
     className?: string;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
     /**
      * Additional CSS classes for the header area
      */
@@ -117,6 +117,6 @@ interface CarouselAutoProgressSlidesProps {
      */
     patternOpacity?: number;
 }
-declare function CarouselAutoProgressSlides({ heading, subheading, slideLabel, items, slidesSlot, autoAdvanceInterval, className, headerClassName, headingClassName, subheadingClassName, navigationClassName, slideLabelClassName, slideContainerClassName, imageClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, }: CarouselAutoProgressSlidesProps): React.JSX.Element;
+declare function CarouselAutoProgressSlides({ heading, subheading, items, slidesSlot, autoAdvanceInterval, className, containerClassName, headerClassName, headingClassName, subheadingClassName, navigationClassName, slideLabelClassName, slideContainerClassName, imageClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, }: CarouselAutoProgressSlidesProps): React.JSX.Element;
 
 export { CarouselAutoProgressSlides, type CarouselAutoProgressSlidesProps };