@opensite/ui 0.8.2 → 0.8.3

package/dist/carousel-image-hero.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var React = require('react');
+var React5 = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var classVarianceAuthority = require('class-variance-authority');
@@ -26,7 +26,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React5__namespace = /*#__PURE__*/_interopNamespace(React5);
 
 // components/blocks/carousel/carousel-image-hero.tsx
 function cn(...inputs) {
@@ -107,7 +107,7 @@ function useNavigation({
   href,
   onClick
 } = {}) {
-  const linkType = React__namespace.useMemo(() => {
+  const linkType = React5__namespace.useMemo(() => {
     if (!href || href.trim() === "") {
       return onClick ? "none" : "none";
     }
@@ -128,7 +128,7 @@ function useNavigation({
       return "internal";
     }
   }, [href, onClick]);
-  const normalizedHref = React__namespace.useMemo(() => {
+  const normalizedHref = React5__namespace.useMemo(() => {
     if (!href || href.trim() === "") {
       return void 0;
     }
@@ -146,7 +146,7 @@ function useNavigation({
         return trimmed;
     }
   }, [href, linkType]);
-  const target = React__namespace.useMemo(() => {
+  const target = React5__namespace.useMemo(() => {
     switch (linkType) {
       case "external":
         return "_blank";
@@ -159,7 +159,7 @@ function useNavigation({
         return void 0;
     }
   }, [linkType]);
-  const rel = React__namespace.useMemo(() => {
+  const rel = React5__namespace.useMemo(() => {
     if (linkType === "external") {
       return "noopener noreferrer";
     }
@@ -168,7 +168,7 @@ function useNavigation({
   const isExternal = linkType === "external";
   const isInternal = linkType === "internal";
   const shouldUseRouter = isInternal && typeof normalizedHref === "string" && normalizedHref.startsWith("/");
-  const handleClick = React__namespace.useCallback(
+  const handleClick = React5__namespace.useCallback(
     (event) => {
       if (onClick) {
         try {
@@ -352,7 +352,7 @@ var buttonVariants = classVarianceAuthority.cva(baseStyles, {
     size: "default"
   }
 });
-var Pressable = React__namespace.forwardRef(
+var Pressable = React5__namespace.forwardRef(
   ({
     children,
     className,
@@ -459,7 +459,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React__namespace.default.forwardRef(
+var Container = React5__namespace.default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -764,7 +764,7 @@ var spacingStyles = {
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
-var Section = React__namespace.default.forwardRef(
+var Section = React5__namespace.default.forwardRef(
   ({
     id,
     title,
@@ -834,7 +834,7 @@ function CarouselImageHero({
   images,
   autoPlayInterval = 7500,
   className,
-  containerClassName = "mx-auto w-full max-w-7xl relative z-10 rounded-2xl overflow-hidden shadow-xl",
+  containerClassName = "mx-none md:mx-auto w-screen md:w-full max-w-screen md:max-w-7xl relative z-10 rounded-none md:rounded-2xl overflow-hidden shadow-none md:shadow-xl",
   contentClassName,
   badgeClassName,
   headingClassName,
@@ -844,19 +844,33 @@ function CarouselImageHero({
   indicatorsClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-0 md:py-32",
   pattern,
   patternOpacity
 }) {
-  const [currentImageIndex, setCurrentImageIndex] = React__namespace.useState(0);
-  React__namespace.useEffect(() => {
-    const interval = setInterval(() => {
-      setCurrentImageIndex(
-        (prevIndex) => (prevIndex + 1) % (images?.length ?? 1)
-      );
-    }, autoPlayInterval);
-    return () => clearInterval(interval);
-  }, [images?.length, autoPlayInterval]);
+  const [currentImageIndex, setCurrentImageIndex] = React5__namespace.useState(0);
+  const intervalRef = React5__namespace.useRef(null);
+  const goToNext = React5__namespace.useCallback(() => {
+    setCurrentImageIndex((prevIndex) => (prevIndex + 1) % (images?.length ?? 1));
+  }, [images?.length]);
+  const resetInterval = React5__namespace.useCallback(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+    }
+    intervalRef.current = setInterval(goToNext, autoPlayInterval);
+  }, [goToNext, autoPlayInterval]);
+  const goToSlide = React5__namespace.useCallback((index) => {
+    setCurrentImageIndex(index);
+    resetInterval();
+  }, [resetInterval]);
+  React5__namespace.useEffect(() => {
+    resetInterval();
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, [resetInterval]);
   const renderActions = () => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
@@ -890,12 +904,15 @@ function CarouselImageHero({
     {
       background,
       spacing,
-      className: cn("relative min-h-[600px] overflow-hidden", className),
+      className: cn(
+        "relative min-h-screen md:min-h-[600px] overflow-hidden",
+        className
+      ),
       pattern,
       patternOpacity,
       containerClassName,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("absolute inset-0", imageClassName), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("absolute inset-0 bg-black", imageClassName), children: [
           images?.map((image, index) => /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
@@ -928,7 +945,7 @@ function CarouselImageHero({
               children: images?.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
-                  onClick: () => setCurrentImageIndex(index),
+                  onClick: () => goToSlide(index),
                   className: cn(
                     "flex h-4 w-4 items-center justify-center rounded-full transition-colors",
                     index === currentImageIndex ? "bg-white" : "bg-white/50 hover:bg-white/80"

package/dist/carousel-image-hero.js

@@ -1,6 +1,6 @@
 "use client";
-import * as React from 'react';
-import React__default from 'react';
+import * as React5 from 'react';
+import React5__default from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
@@ -86,7 +86,7 @@ function useNavigation({
   href,
   onClick
 } = {}) {
-  const linkType = React.useMemo(() => {
+  const linkType = React5.useMemo(() => {
     if (!href || href.trim() === "") {
       return onClick ? "none" : "none";
     }
@@ -107,7 +107,7 @@ function useNavigation({
       return "internal";
     }
   }, [href, onClick]);
-  const normalizedHref = React.useMemo(() => {
+  const normalizedHref = React5.useMemo(() => {
     if (!href || href.trim() === "") {
       return void 0;
     }
@@ -125,7 +125,7 @@ function useNavigation({
         return trimmed;
     }
   }, [href, linkType]);
-  const target = React.useMemo(() => {
+  const target = React5.useMemo(() => {
     switch (linkType) {
       case "external":
         return "_blank";
@@ -138,7 +138,7 @@ function useNavigation({
         return void 0;
     }
   }, [linkType]);
-  const rel = React.useMemo(() => {
+  const rel = React5.useMemo(() => {
     if (linkType === "external") {
       return "noopener noreferrer";
     }
@@ -147,7 +147,7 @@ function useNavigation({
   const isExternal = linkType === "external";
   const isInternal = linkType === "internal";
   const shouldUseRouter = isInternal && typeof normalizedHref === "string" && normalizedHref.startsWith("/");
-  const handleClick = React.useCallback(
+  const handleClick = React5.useCallback(
     (event) => {
       if (onClick) {
         try {
@@ -331,7 +331,7 @@ var buttonVariants = cva(baseStyles, {
     size: "default"
   }
 });
-var Pressable = React.forwardRef(
+var Pressable = React5.forwardRef(
   ({
     children,
     className,
@@ -438,7 +438,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React__default.forwardRef(
+var Container = React5__default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsx(
@@ -743,7 +743,7 @@ var spacingStyles = {
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
-var Section = React__default.forwardRef(
+var Section = React5__default.forwardRef(
   ({
     id,
     title,
@@ -813,7 +813,7 @@ function CarouselImageHero({
   images,
   autoPlayInterval = 7500,
   className,
-  containerClassName = "mx-auto w-full max-w-7xl relative z-10 rounded-2xl overflow-hidden shadow-xl",
+  containerClassName = "mx-none md:mx-auto w-screen md:w-full max-w-screen md:max-w-7xl relative z-10 rounded-none md:rounded-2xl overflow-hidden shadow-none md:shadow-xl",
   contentClassName,
   badgeClassName,
   headingClassName,
@@ -823,19 +823,33 @@ function CarouselImageHero({
   indicatorsClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-0 md:py-32",
   pattern,
   patternOpacity
 }) {
-  const [currentImageIndex, setCurrentImageIndex] = React.useState(0);
-  React.useEffect(() => {
-    const interval = setInterval(() => {
-      setCurrentImageIndex(
-        (prevIndex) => (prevIndex + 1) % (images?.length ?? 1)
-      );
-    }, autoPlayInterval);
-    return () => clearInterval(interval);
-  }, [images?.length, autoPlayInterval]);
+  const [currentImageIndex, setCurrentImageIndex] = React5.useState(0);
+  const intervalRef = React5.useRef(null);
+  const goToNext = React5.useCallback(() => {
+    setCurrentImageIndex((prevIndex) => (prevIndex + 1) % (images?.length ?? 1));
+  }, [images?.length]);
+  const resetInterval = React5.useCallback(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+    }
+    intervalRef.current = setInterval(goToNext, autoPlayInterval);
+  }, [goToNext, autoPlayInterval]);
+  const goToSlide = React5.useCallback((index) => {
+    setCurrentImageIndex(index);
+    resetInterval();
+  }, [resetInterval]);
+  React5.useEffect(() => {
+    resetInterval();
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, [resetInterval]);
   const renderActions = () => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
@@ -869,12 +883,15 @@ function CarouselImageHero({
     {
       background,
       spacing,
-      className: cn("relative min-h-[600px] overflow-hidden", className),
+      className: cn(
+        "relative min-h-screen md:min-h-[600px] overflow-hidden",
+        className
+      ),
       pattern,
       patternOpacity,
       containerClassName,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("absolute inset-0", imageClassName), children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("absolute inset-0 bg-black", imageClassName), children: [
           images?.map((image, index) => /* @__PURE__ */ jsxs(
             "div",
             {
@@ -907,7 +924,7 @@ function CarouselImageHero({
               children: images?.map((_, index) => /* @__PURE__ */ jsx(
                 "button",
                 {
-                  onClick: () => setCurrentImageIndex(index),
+                  onClick: () => goToSlide(index),
                   className: cn(
                     "flex h-4 w-4 items-center justify-center rounded-full transition-colors",
                     index === currentImageIndex ? "bg-white" : "bg-white/50 hover:bg-white/80"

package/dist/registry.cjs

@@ -18788,7 +18788,7 @@ function CarouselImageHero({
   images,
   autoPlayInterval = 7500,
   className,
-  containerClassName = "mx-auto w-full max-w-7xl relative z-10 rounded-2xl overflow-hidden shadow-xl",
+  containerClassName = "mx-none md:mx-auto w-screen md:w-full max-w-screen md:max-w-7xl relative z-10 rounded-none md:rounded-2xl overflow-hidden shadow-none md:shadow-xl",
   contentClassName,
   badgeClassName,
   headingClassName,
@@ -18798,19 +18798,33 @@ function CarouselImageHero({
   indicatorsClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-0 md:py-32",
   pattern,
   patternOpacity
 }) {
   const [currentImageIndex, setCurrentImageIndex] = React52__namespace.useState(0);
+  const intervalRef = React52__namespace.useRef(null);
+  const goToNext = React52__namespace.useCallback(() => {
+    setCurrentImageIndex((prevIndex) => (prevIndex + 1) % (images?.length ?? 1));
+  }, [images?.length]);
+  const resetInterval = React52__namespace.useCallback(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+    }
+    intervalRef.current = setInterval(goToNext, autoPlayInterval);
+  }, [goToNext, autoPlayInterval]);
+  const goToSlide = React52__namespace.useCallback((index) => {
+    setCurrentImageIndex(index);
+    resetInterval();
+  }, [resetInterval]);
   React52__namespace.useEffect(() => {
-    const interval = setInterval(() => {
-      setCurrentImageIndex(
-        (prevIndex) => (prevIndex + 1) % (images?.length ?? 1)
-      );
-    }, autoPlayInterval);
-    return () => clearInterval(interval);
-  }, [images?.length, autoPlayInterval]);
+    resetInterval();
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, [resetInterval]);
   const renderActions = () => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
@@ -18844,12 +18858,15 @@ function CarouselImageHero({
     {
       background,
       spacing,
-      className: cn("relative min-h-[600px] overflow-hidden", className),
+      className: cn(
+        "relative min-h-screen md:min-h-[600px] overflow-hidden",
+        className
+      ),
       pattern,
       patternOpacity,
       containerClassName,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("absolute inset-0", imageClassName), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("absolute inset-0 bg-black", imageClassName), children: [
           images?.map((image, index) => /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
@@ -18882,7 +18899,7 @@ function CarouselImageHero({
               children: images?.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
-                  onClick: () => setCurrentImageIndex(index),
+                  onClick: () => goToSlide(index),
                   className: cn(
                     "flex h-4 w-4 items-center justify-center rounded-full transition-colors",
                     index === currentImageIndex ? "bg-white" : "bg-white/50 hover:bg-white/80"

package/dist/registry.js

@@ -18748,7 +18748,7 @@ function CarouselImageHero({
   images,
   autoPlayInterval = 7500,
   className,
-  containerClassName = "mx-auto w-full max-w-7xl relative z-10 rounded-2xl overflow-hidden shadow-xl",
+  containerClassName = "mx-none md:mx-auto w-screen md:w-full max-w-screen md:max-w-7xl relative z-10 rounded-none md:rounded-2xl overflow-hidden shadow-none md:shadow-xl",
   contentClassName,
   badgeClassName,
   headingClassName,
@@ -18758,19 +18758,33 @@ function CarouselImageHero({
   indicatorsClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-0 md:py-32",
   pattern,
   patternOpacity
 }) {
   const [currentImageIndex, setCurrentImageIndex] = React52.useState(0);
+  const intervalRef = React52.useRef(null);
+  const goToNext = React52.useCallback(() => {
+    setCurrentImageIndex((prevIndex) => (prevIndex + 1) % (images?.length ?? 1));
+  }, [images?.length]);
+  const resetInterval = React52.useCallback(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+    }
+    intervalRef.current = setInterval(goToNext, autoPlayInterval);
+  }, [goToNext, autoPlayInterval]);
+  const goToSlide = React52.useCallback((index) => {
+    setCurrentImageIndex(index);
+    resetInterval();
+  }, [resetInterval]);
   React52.useEffect(() => {
-    const interval = setInterval(() => {
-      setCurrentImageIndex(
-        (prevIndex) => (prevIndex + 1) % (images?.length ?? 1)
-      );
-    }, autoPlayInterval);
-    return () => clearInterval(interval);
-  }, [images?.length, autoPlayInterval]);
+    resetInterval();
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, [resetInterval]);
   const renderActions = () => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
@@ -18804,12 +18818,15 @@ function CarouselImageHero({
     {
       background,
       spacing,
-      className: cn("relative min-h-[600px] overflow-hidden", className),
+      className: cn(
+        "relative min-h-screen md:min-h-[600px] overflow-hidden",
+        className
+      ),
       pattern,
       patternOpacity,
       containerClassName,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("absolute inset-0", imageClassName), children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("absolute inset-0 bg-black", imageClassName), children: [
           images?.map((image, index) => /* @__PURE__ */ jsxs(
             "div",
             {
@@ -18842,7 +18859,7 @@ function CarouselImageHero({
               children: images?.map((_, index) => /* @__PURE__ */ jsx(
                 "button",
                 {
-                  onClick: () => setCurrentImageIndex(index),
+                  onClick: () => goToSlide(index),
                   className: cn(
                     "flex h-4 w-4 items-center justify-center rounded-full transition-colors",
                     index === currentImageIndex ? "bg-white" : "bg-white/50 hover:bg-white/80"

package/package.json

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