@opensite/ui 1.3.8 → 1.4.0

package/dist/feature-image-overlay-badge.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-r_NhxVet.cjs';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-DP3Vofl4.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
 
 interface FeatureImageOverlayBadgeProps {

package/dist/feature-image-overlay-badge.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 
 interface FeatureImageOverlayBadgeProps {

package/dist/feature-integration-cards.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
-import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-r_NhxVet.cjs';
+import { O as OptixFlowConfig } from './blocks-DP3Vofl4.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
 
 interface FeatureIntegrationCardsItem {

package/dist/feature-integration-cards.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
-import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
+import { O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 
 interface FeatureIntegrationCardsItem {

package/dist/feature-numbered-cards.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-r_NhxVet.cjs';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-DP3Vofl4.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
 
 interface FeatureNumberedCardsChecklistItem {

package/dist/feature-numbered-cards.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 
 interface FeatureNumberedCardsChecklistItem {

package/dist/feature-pattern-grid-links.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-r_NhxVet.cjs';
 import 'react/jsx-runtime';
-import './blocks-Cohq4eio.cjs';
+import './blocks-DP3Vofl4.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
 
 interface FeaturePatternGridLinksItem {

package/dist/feature-pattern-grid-links.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
 import 'react/jsx-runtime';
-import './blocks-k17uluAz.js';
+import './blocks-XLPGq8A5.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 
 interface FeaturePatternGridLinksItem {

package/dist/feature-showcase.cjs

@@ -1,15 +1,13 @@
 "use client";
 'use strict';
 
-var React6 = require('react');
+var React3 = require('react');
+var framerMotion = require('framer-motion');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
-var useEmblaCarousel = require('embla-carousel-react');
 var classVarianceAuthority = require('class-variance-authority');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
   var n = Object.create(null);
@@ -28,8 +26,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React6__namespace = /*#__PURE__*/_interopNamespace(React6);
-var useEmblaCarousel__default = /*#__PURE__*/_interopDefault(useEmblaCarousel);
+var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
 
 // components/blocks/features/feature-showcase.tsx
 function cn(...inputs) {
@@ -44,7 +41,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React6__namespace.default.forwardRef(
+var Container = React3__namespace.default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -349,7 +346,7 @@ var spacingStyles = {
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
-var Section = React6__namespace.default.forwardRef(
+var Section = React3__namespace.default.forwardRef(
   ({
     id,
     title,
@@ -485,7 +482,7 @@ function useNavigation({
   href,
   onClick
 } = {}) {
-  const linkType = React6__namespace.useMemo(() => {
+  const linkType = React3__namespace.useMemo(() => {
     if (!href || href.trim() === "") {
       return onClick ? "none" : "none";
     }
@@ -506,7 +503,7 @@ function useNavigation({
       return "internal";
     }
   }, [href, onClick]);
-  const normalizedHref = React6__namespace.useMemo(() => {
+  const normalizedHref = React3__namespace.useMemo(() => {
     if (!href || href.trim() === "") {
       return void 0;
     }
@@ -524,7 +521,7 @@ function useNavigation({
         return trimmed;
     }
   }, [href, linkType]);
-  const target = React6__namespace.useMemo(() => {
+  const target = React3__namespace.useMemo(() => {
     switch (linkType) {
       case "external":
         return "_blank";
@@ -537,7 +534,7 @@ function useNavigation({
         return void 0;
     }
   }, [linkType]);
-  const rel = React6__namespace.useMemo(() => {
+  const rel = React3__namespace.useMemo(() => {
     if (linkType === "external") {
       return "noopener noreferrer";
     }
@@ -546,7 +543,7 @@ function useNavigation({
   const isExternal = linkType === "external";
   const isInternal = linkType === "internal";
   const shouldUseRouter = isInternal && typeof normalizedHref === "string" && normalizedHref.startsWith("/");
-  const handleClick = React6__namespace.useCallback(
+  const handleClick = React3__namespace.useCallback(
     (event) => {
       if (onClick) {
         try {
@@ -730,7 +727,7 @@ var buttonVariants = classVarianceAuthority.cva(baseStyles, {
     size: "default"
   }
 });
-var Pressable = React6__namespace.forwardRef(
+var Pressable = React3__namespace.forwardRef(
   ({
     children,
     className,
@@ -836,10 +833,10 @@ function DynamicIcon({
   className,
   alt
 }) {
-  const [svgContent, setSvgContent] = React6__namespace.useState(null);
-  const [isLoading, setIsLoading] = React6__namespace.useState(true);
-  const [error, setError] = React6__namespace.useState(null);
-  const { url, iconName } = React6__namespace.useMemo(() => {
+  const [svgContent, setSvgContent] = React3__namespace.useState(null);
+  const [isLoading, setIsLoading] = React3__namespace.useState(true);
+  const [error, setError] = React3__namespace.useState(null);
+  const { url, iconName } = React3__namespace.useMemo(() => {
     const separator = name.includes("/") ? "/" : ":";
     const [prefix, iconName2] = name.split(separator);
     const baseUrl = `https://icons.opensite.ai/api/icon/${prefix}/${iconName2}?format=svg&width=${size}&height=${size}`;
@@ -848,7 +845,7 @@ function DynamicIcon({
       iconName: iconName2
     };
   }, [name, size]);
-  React6__namespace.useEffect(() => {
+  React3__namespace.useEffect(() => {
     let isMounted = true;
     const fetchSvg = async () => {
       const cached = svgCache.get(url);
@@ -933,135 +930,6 @@ function processSvgForCurrentColor(svg) {
   );
   return processed;
 }
-var CarouselContext = React6__namespace.createContext(null);
-function useCarousel() {
-  const context = React6__namespace.useContext(CarouselContext);
-  if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />");
-  }
-  return context;
-}
-function Carousel({
-  orientation = "horizontal",
-  opts,
-  setApi,
-  plugins,
-  className,
-  children,
-  ...props
-}) {
-  const [carouselRef, api] = useEmblaCarousel__default.default(
-    {
-      ...opts,
-      axis: orientation === "horizontal" ? "x" : "y"
-    },
-    plugins
-  );
-  const [canScrollPrev, setCanScrollPrev] = React6__namespace.useState(false);
-  const [canScrollNext, setCanScrollNext] = React6__namespace.useState(false);
-  const onSelect = React6__namespace.useCallback((api2) => {
-    if (!api2) return;
-    setCanScrollPrev(api2.canScrollPrev());
-    setCanScrollNext(api2.canScrollNext());
-  }, []);
-  const scrollPrev = React6__namespace.useCallback(() => {
-    api?.scrollPrev();
-  }, [api]);
-  const scrollNext = React6__namespace.useCallback(() => {
-    api?.scrollNext();
-  }, [api]);
-  const handleKeyDown = React6__namespace.useCallback(
-    (event) => {
-      if (event.key === "ArrowLeft") {
-        event.preventDefault();
-        scrollPrev();
-      } else if (event.key === "ArrowRight") {
-        event.preventDefault();
-        scrollNext();
-      }
-    },
-    [scrollPrev, scrollNext]
-  );
-  React6__namespace.useEffect(() => {
-    if (!api || !setApi) return;
-    setApi(api);
-  }, [api, setApi]);
-  React6__namespace.useEffect(() => {
-    if (!api) return;
-    onSelect(api);
-    api.on("reInit", onSelect);
-    api.on("select", onSelect);
-    return () => {
-      api?.off("select", onSelect);
-    };
-  }, [api, onSelect]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    CarouselContext.Provider,
-    {
-      value: {
-        carouselRef,
-        api,
-        opts,
-        orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
-        scrollPrev,
-        scrollNext,
-        canScrollPrev,
-        canScrollNext
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          onKeyDownCapture: handleKeyDown,
-          className: cn("relative", className),
-          role: "region",
-          "aria-roledescription": "carousel",
-          "data-slot": "carousel",
-          ...props,
-          children
-        }
-      )
-    }
-  );
-}
-function CarouselContent({ className, ...props }) {
-  const { carouselRef, orientation } = useCarousel();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ref: carouselRef,
-      className: "overflow-hidden",
-      "data-slot": "carousel-content",
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: cn(
-            "flex",
-            orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-            className
-          ),
-          ...props
-        }
-      )
-    }
-  );
-}
-function CarouselItem({ className, ...props }) {
-  const { orientation } = useCarousel();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      role: "group",
-      "aria-roledescription": "slide",
-      "data-slot": "carousel-item",
-      className: cn(
-        "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
-        className
-      ),
-      ...props
-    }
-  );
-}
 var BUTTON_SIZES = {
   sm: { buttonSize: "size-8", iconSize: 16 },
   md: { buttonSize: "size-10", iconSize: 20 },
@@ -1137,30 +1005,25 @@ function FeatureShowcase({
   patternOpacity,
   patternClassName
 }) {
-  const [api, setApi] = React6__namespace.useState();
-  const [canScrollPrevious, setCanScrollPrevious] = React6__namespace.useState(false);
-  const [canScrollNext, setCanScrollNext] = React6__namespace.useState(false);
-  React6__namespace.useEffect(() => {
-    if (!api) return;
-    const updateScrollState = () => {
-      setCanScrollPrevious(api.canScrollPrev());
-      setCanScrollNext(api.canScrollNext());
-    };
-    updateScrollState();
-    api.on("select", updateScrollState);
-    return () => {
-      api.off("select", updateScrollState);
-    };
-  }, [api]);
-  const [mobileSlideHeight, setMobileSlideHeight] = React6.useState(
+  const [activeIndex, setActiveIndex] = React3.useState(0);
+  const itemCount = items?.length ?? 0;
+  const canScrollPrevious = activeIndex > 0;
+  const canScrollNext = activeIndex < itemCount - 1;
+  const scrollPrev = React3.useCallback(() => {
+    setActiveIndex((prev) => Math.max(0, prev - 1));
+  }, []);
+  const scrollNext = React3.useCallback(() => {
+    setActiveIndex((prev) => Math.min(itemCount - 1, prev + 1));
+  }, [itemCount]);
+  const [mobileSlideHeight, setMobileSlideHeight] = React3.useState(
     null
   );
-  const slideRefs = React6.useRef([]);
-  const mediaWrapperClassName = React6.useMemo(
+  const slideRefs = React3.useRef([]);
+  const mediaWrapperClassName = React3.useMemo(
     () => equalizeOnMobile && stretchMediaOnMobile ? "flex-1 min-h-0 md:flex-none" : "",
     [equalizeOnMobile, stretchMediaOnMobile]
   );
-  React6.useEffect(() => {
+  React3.useEffect(() => {
     if (!equalizeOnMobile || !items || items.length === 0) {
       setMobileSlideHeight(null);
       return;
@@ -1192,49 +1055,74 @@ function FeatureShowcase({
       resizeObserver?.disconnect();
     };
   }, [equalizeOnMobile, items]);
-  const carouselContent = React6.useMemo(() => {
+  const activeItem = items?.[activeIndex];
+  const carouselContent = React3.useMemo(() => {
     if (!items || items.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs(Carousel, { className: carouselClassName, setApi, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pb-18 md:pb-24", children: /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { className: "ease-in", children: items.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsx(CarouselItem, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative", carouselClassName), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pb-18 md:pb-24", children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsx(
+        framerMotion.motion.div,
         {
-          ref: (node) => {
-            slideRefs.current[itemIndex] = node;
-          },
-          style: equalizeOnMobile && mobileSlideHeight ? { minHeight: mobileSlideHeight } : void 0,
-          className: cn(
-            "flex flex-col-reverse gap-8 md:gap-14 md:flex-row md:items-center md:justify-between",
-            slideClassName
-          ),
-          children: [
-            item.content && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full", contentClassName), children: item.content }),
-            item.mediaComponent && /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: cn(
-                  "relative w-full min-h-[25dvh] h-[25dvh] max-h-[35dvh] md:min-h-0 md:h-auto md:max-h-none [&>*]:h-full [&>*]:object-cover",
-                  mediaWrapperClassName,
-                  mediaClassName
-                ),
-                children: item.mediaComponent
-              }
-            )
-          ]
-        }
-      ) }, `slide-${itemIndex}`)) }) }),
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: { opacity: 0 },
+          transition: { duration: 0.3, ease: "easeInOut" },
+          children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              ref: (node) => {
+                slideRefs.current[activeIndex] = node;
+              },
+              style: equalizeOnMobile && mobileSlideHeight ? { minHeight: mobileSlideHeight } : void 0,
+              className: cn(
+                "flex flex-col-reverse gap-8 md:gap-14 md:flex-row md:items-center md:justify-between",
+                slideClassName
+              ),
+              children: [
+                activeItem?.content && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full", contentClassName), children: activeItem.content }),
+                activeItem?.mediaComponent && /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "relative w-full min-h-[25dvh] h-[25dvh] max-h-[35dvh] md:min-h-[300px] md:h-[400px] md:max-h-[500px] *:h-full *:object-cover",
+                      mediaWrapperClassName,
+                      mediaClassName
+                    ),
+                    children: [
+                      activeItem.mediaComponent,
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        CarouselPagination,
+                        {
+                          onPrevious: scrollPrev,
+                          onNext: scrollNext,
+                          canScrollPrevious,
+                          canScrollNext,
+                          className: "flex items-end justify-end gap-2 absolute bottom-2 right-2 md:hidden"
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        },
+        activeIndex
+      ) }) }),
       /* @__PURE__ */ jsxRuntime.jsx(
         CarouselPagination,
         {
-          onPrevious: () => api?.scrollPrev(),
-          onNext: () => api?.scrollNext(),
+          onPrevious: scrollPrev,
+          onNext: scrollNext,
           canScrollPrevious,
           canScrollNext,
-          className: "absolute bottom-[calc(25dvh+2rem)] right-4 md:bottom-6 md:right-0"
+          className: "absolute bottom-6 right-0 hidden md:flex"
         }
       )
     ] });
   }, [
     items,
+    activeIndex,
+    activeItem,
     carouselClassName,
     equalizeOnMobile,
     mobileSlideHeight,
@@ -1242,7 +1130,8 @@ function FeatureShowcase({
     contentClassName,
     mediaWrapperClassName,
     mediaClassName,
-    api,
+    scrollPrev,
+    scrollNext,
     canScrollPrevious,
     canScrollNext
   ]);

package/dist/feature-showcase.d.cts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
-export { F as FeatureShowcaseItem, s as FeatureShowcaseProps } from './community-initiatives-Bz_A5vLU.cjs';
-import './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-r_NhxVet.cjs';
+export { F as FeatureShowcaseItem, s as FeatureShowcaseProps } from './community-initiatives-r_NhxVet.cjs';
+import './blocks-DP3Vofl4.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
 
 interface FeatureShowcaseItem {

package/dist/feature-showcase.d.ts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
-export { F as FeatureShowcaseItem, s as FeatureShowcaseProps } from './community-initiatives-Bi_ClKrO.js';
-import './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
+export { F as FeatureShowcaseItem, s as FeatureShowcaseProps } from './community-initiatives-DmVsuoHE.js';
+import './blocks-XLPGq8A5.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 
 interface FeatureShowcaseItem {