@opensite/ui 3.4.3 → 3.4.5

package/dist/components.cjs

@@ -766,25 +766,6 @@ var slideVariants = {
     }
   }
 };
-var fadeVariants = {
-  initial: {
-    opacity: 0
-  },
-  visible: {
-    opacity: 1,
-    transition: {
-      duration: 0.8,
-      ease: [0.4, 0, 0.2, 1]
-    }
-  },
-  fadeExit: {
-    opacity: 0,
-    transition: {
-      duration: 0.8,
-      ease: [0.4, 0, 0.2, 1]
-    }
-  }
-};
 var normalizeIndex = (index, length) => {
   if (!length) return 0;
   const safeIndex = index % length;
@@ -872,38 +853,55 @@ var ImageSlider = ({
         perspective: "1000px"
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          react.AnimatePresence,
+        transition === "fade" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0", children: images.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
           {
-            mode: transition === "fade" ? "sync" : "wait",
-            initial: false,
-            children: activeImage ? /* @__PURE__ */ jsxRuntime.jsx(
-              react.motion.div,
+            "aria-hidden": index !== currentIndex,
+            className: cn(
+              "absolute inset-0 opacity-0 transition-opacity duration-1000 ease-in-out motion-reduce:transition-none",
+              index === currentIndex && "opacity-100"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              img.Img,
               {
-                initial: "initial",
-                animate: "visible",
-                exit: transition === "fade" ? "fadeExit" : direction === "up" ? "upExit" : "downExit",
-                variants: transition === "fade" ? fadeVariants : slideVariants,
-                className: "absolute inset-0",
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  img.Img,
-                  {
-                    src: activeImage.src,
-                    alt: activeImage.alt,
-                    className: cn(
-                      "h-full w-full object-cover object-center",
-                      imageClassName,
-                      activeImage.className
-                    ),
-                    optixFlowConfig: activeImage.optixFlowConfig ?? optixFlowConfig,
-                    loading: "eager"
-                  }
-                )
-              },
-              `${currentIndex}-${activeImage.src ?? "image"}`
-            ) : null
-          }
-        ),
+                src: image.src,
+                alt: image.alt,
+                className: cn(
+                  "h-full w-full object-cover object-center",
+                  imageClassName,
+                  image.className
+                ),
+                optixFlowConfig: image.optixFlowConfig ?? optixFlowConfig,
+                loading: "eager"
+              }
+            )
+          },
+          `${image.src ?? "image"}-${index}`
+        )) }) : /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { mode: "wait", initial: false, children: activeImage ? /* @__PURE__ */ jsxRuntime.jsx(
+          react.motion.div,
+          {
+            initial: "initial",
+            animate: "visible",
+            exit: direction === "up" ? "upExit" : "downExit",
+            variants: slideVariants,
+            className: "absolute inset-0",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              img.Img,
+              {
+                src: activeImage.src,
+                alt: activeImage.alt,
+                className: cn(
+                  "h-full w-full object-cover object-center",
+                  imageClassName,
+                  activeImage.className
+                ),
+                optixFlowConfig: activeImage.optixFlowConfig ?? optixFlowConfig,
+                loading: "eager"
+              }
+            )
+          },
+          `${currentIndex}-${activeImage.src ?? "image"}`
+        ) : null }),
         overlayContent,
         children ? /* @__PURE__ */ jsxRuntime.jsx(
           "div",

package/dist/components.js

@@ -743,25 +743,6 @@ var slideVariants = {
     }
   }
 };
-var fadeVariants = {
-  initial: {
-    opacity: 0
-  },
-  visible: {
-    opacity: 1,
-    transition: {
-      duration: 0.8,
-      ease: [0.4, 0, 0.2, 1]
-    }
-  },
-  fadeExit: {
-    opacity: 0,
-    transition: {
-      duration: 0.8,
-      ease: [0.4, 0, 0.2, 1]
-    }
-  }
-};
 var normalizeIndex = (index, length) => {
   if (!length) return 0;
   const safeIndex = index % length;
@@ -849,38 +830,55 @@ var ImageSlider = ({
         perspective: "1000px"
       },
       children: [
-        /* @__PURE__ */ jsx(
-          AnimatePresence$1,
+        transition === "fade" ? /* @__PURE__ */ jsx("div", { className: "absolute inset-0", children: images.map((image, index) => /* @__PURE__ */ jsx(
+          "div",
           {
-            mode: transition === "fade" ? "sync" : "wait",
-            initial: false,
-            children: activeImage ? /* @__PURE__ */ jsx(
-              motion$1.div,
+            "aria-hidden": index !== currentIndex,
+            className: cn(
+              "absolute inset-0 opacity-0 transition-opacity duration-1000 ease-in-out motion-reduce:transition-none",
+              index === currentIndex && "opacity-100"
+            ),
+            children: /* @__PURE__ */ jsx(
+              Img,
               {
-                initial: "initial",
-                animate: "visible",
-                exit: transition === "fade" ? "fadeExit" : direction === "up" ? "upExit" : "downExit",
-                variants: transition === "fade" ? fadeVariants : slideVariants,
-                className: "absolute inset-0",
-                children: /* @__PURE__ */ jsx(
-                  Img,
-                  {
-                    src: activeImage.src,
-                    alt: activeImage.alt,
-                    className: cn(
-                      "h-full w-full object-cover object-center",
-                      imageClassName,
-                      activeImage.className
-                    ),
-                    optixFlowConfig: activeImage.optixFlowConfig ?? optixFlowConfig,
-                    loading: "eager"
-                  }
-                )
-              },
-              `${currentIndex}-${activeImage.src ?? "image"}`
-            ) : null
-          }
-        ),
+                src: image.src,
+                alt: image.alt,
+                className: cn(
+                  "h-full w-full object-cover object-center",
+                  imageClassName,
+                  image.className
+                ),
+                optixFlowConfig: image.optixFlowConfig ?? optixFlowConfig,
+                loading: "eager"
+              }
+            )
+          },
+          `${image.src ?? "image"}-${index}`
+        )) }) : /* @__PURE__ */ jsx(AnimatePresence$1, { mode: "wait", initial: false, children: activeImage ? /* @__PURE__ */ jsx(
+          motion$1.div,
+          {
+            initial: "initial",
+            animate: "visible",
+            exit: direction === "up" ? "upExit" : "downExit",
+            variants: slideVariants,
+            className: "absolute inset-0",
+            children: /* @__PURE__ */ jsx(
+              Img,
+              {
+                src: activeImage.src,
+                alt: activeImage.alt,
+                className: cn(
+                  "h-full w-full object-cover object-center",
+                  imageClassName,
+                  activeImage.className
+                ),
+                optixFlowConfig: activeImage.optixFlowConfig ?? optixFlowConfig,
+                loading: "eager"
+              }
+            )
+          },
+          `${currentIndex}-${activeImage.src ?? "image"}`
+        ) : null }),
         overlayContent,
         children ? /* @__PURE__ */ jsx(
           "div",

package/dist/feature-checklist-image.cjs

@@ -422,6 +422,12 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+function isRenderableNode(value) {
+  return value !== null && value !== void 0 && typeof value !== "boolean" && !(typeof value === "string" && value.trim().length === 0);
+}
+function firstRenderableNode(...values) {
+  return values.find(isRenderableNode);
+}
 function FeatureChecklistImage({
   sectionId = "feature-checklist-image",
   title,
@@ -434,9 +440,10 @@ function FeatureChecklistImage({
   actions,
   actionsSlot,
   checklistItems,
+  benefits,
   checklistSlot,
   className,
-  containerClassName = "px-6 sm:px-6 md:px-6 lg:px-8",
+  containerClassName = "max-w-screen-2xl px-6 sm:px-6 md:px-6 lg:px-8",
   contentWrapperClassName,
   imageClassName,
   contentClassName,
@@ -493,33 +500,69 @@ function FeatureChecklistImage({
     if (imageSlot) return imageSlot;
     if (!imageSrc) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
-      img.Img,
+      "div",
       {
-        src: imageSrc,
-        alt: imageAlt || "Feature illustration",
         className: cn(
-          "max-h-96 w-full rounded-lg object-cover md:max-h-[500px] md:w-1/2 shadow-xl",
+          "relative aspect-[3/2] w-full overflow-hidden rounded-lg shadow-xl",
           imageClassName
         ),
-        loading: "lazy",
-        optixFlowConfig
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          img.Img,
+          {
+            src: imageSrc,
+            alt: imageAlt || "Feature illustration",
+            className: cn(
+              "block h-full w-full object-cover object-center",
+              imageClassName
+            ),
+            loading: "lazy",
+            optixFlowConfig
+          }
+        )
       }
     );
   }, [imageSlot, imageSrc, imageAlt, imageClassName, optixFlowConfig]);
   const checklistContent = React.useMemo(() => {
     if (checklistSlot) return checklistSlot;
-    if (!checklistItems || checklistItems.length === 0) return null;
-    return checklistItems.map((item, index) => {
+    const items = checklistItems ?? benefits;
+    if (!items || items.length === 0) return null;
+    const renderedItems = [];
+    items.forEach((item, index) => {
       const isString = typeof item === "string";
-      const content = isString ? item : item.content;
-      const iconElement = isString ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/circle-check-big", size: 16 }) : item.icon ?? (item.iconName ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.iconName, size: 16 }) : /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/circle-check-big", size: 16 }));
+      const content = isString ? item : firstRenderableNode(item.content, item.text, item.label);
+      const title2 = isString ? void 0 : item.title;
+      const description2 = isString ? void 0 : item.description;
+      if (!isRenderableNode(content) && !isRenderableNode(title2) && !isRenderableNode(description2)) {
+        return;
+      }
+      const iconElement = isString ? /* @__PURE__ */ jsxRuntime.jsx(
+        DynamicIcon,
+        {
+          name: "lucide/circle-check-big",
+          size: 20,
+          className: "h-5 w-5"
+        }
+      ) : item.icon ?? (item.iconName ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.iconName, size: 20, className: "h-5 w-5" }) : /* @__PURE__ */ jsxRuntime.jsx(
+        DynamicIcon,
+        {
+          name: "lucide/circle-check-big",
+          size: 20,
+          className: "h-5 w-5"
+        }
+      ));
       const itemClassName = isString ? void 0 : item.className;
-      return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cn("flex items-start gap-3", itemClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1", children: iconElement }),
-        content
-      ] }, index);
+      renderedItems.push(
+        /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cn("flex items-start gap-3", itemClassName), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 flex h-5 w-5 shrink-0 items-center justify-center", children: iconElement }),
+          isRenderableNode(content) ? typeof content === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-medium leading-relaxed md:text-lg", children: content }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 text-base font-medium leading-relaxed md:text-lg", children: content }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+            isRenderableNode(title2) && (typeof title2 === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-semibold leading-snug md:text-lg", children: title2 }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base font-semibold leading-snug md:text-lg", children: title2 })),
+            isRenderableNode(description2) && (typeof description2 === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm leading-relaxed text-current/75 md:text-base", children: description2 }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 text-sm leading-relaxed text-current/75 md:text-base", children: description2 }))
+          ] })
+        ] }, index)
+      );
     });
-  }, [checklistSlot, checklistItems]);
+    return renderedItems.length > 0 ? renderedItems : null;
+  }, [checklistSlot, checklistItems, benefits]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -535,7 +578,8 @@ function FeatureChecklistImage({
         "div",
         {
           className: cn(
-            "flex flex-col gap-6 md:gap-12 md:flex-row",
+            "grid gap-8 md:gap-12 lg:items-center",
+            imageContent ? "lg:grid-cols-2" : "lg:grid-cols-1",
             contentWrapperClassName
           ),
           children: [
@@ -544,7 +588,8 @@ function FeatureChecklistImage({
               "div",
               {
                 className: cn(
-                  "px-0 md:px-6 lg:px-10 py-4 md:py-0 flex flex-col gap-6 md:gap-10",
+                  "flex min-w-0 flex-col gap-6 py-2 md:gap-8 md:py-0 lg:gap-10",
+                  imageContent && "lg:pl-8",
                   contentClassName
                 ),
                 children: [
@@ -552,7 +597,7 @@ function FeatureChecklistImage({
                     "h2",
                     {
                       className: cn(
-                        "text-xl font-semibold text-balance md:text-2xl lg:text-3xl",
+                        "text-2xl font-semibold text-balance sm:text-3xl lg:text-4xl",
                         titleClassName
                       ),
                       children: title
@@ -561,18 +606,36 @@ function FeatureChecklistImage({
                     "div",
                     {
                       className: cn(
-                        "text-xl font-semibold text-balance md:text-2xl lg:text-3xl",
+                        "text-2xl font-semibold text-balance sm:text-3xl lg:text-4xl",
                         titleClassName
                       ),
                       children: title
                     }
                   )),
-                  description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("relative", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative", descriptionClassName), children: description })),
+                  description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "p",
+                    {
+                      className: cn(
+                        "relative text-base leading-relaxed md:text-lg",
+                        descriptionClassName
+                      ),
+                      children: description
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "relative text-base leading-relaxed md:text-lg",
+                        descriptionClassName
+                      ),
+                      children: description
+                    }
+                  )),
                   actionsContent && /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
                     {
                       className: cn(
-                        "flex flex-wrap items-center gap-4",
+                        "flex flex-col items-start gap-4 sm:flex-row sm:flex-wrap sm:items-center",
                         actionsClassName
                       ),
                       children: actionsContent
@@ -582,7 +645,7 @@ function FeatureChecklistImage({
                     "ul",
                     {
                       className: cn(
-                        "flex-wrap items-center space-y-2 md:flex",
+                        "flex flex-col space-y-3 md:space-y-4",
                         checklistClassName
                       ),
                       children: checklistContent

package/dist/feature-checklist-image.d.cts

@@ -11,6 +11,22 @@ interface FeatureChecklistItem {
      * Checklist item content
      */
     content?: React.ReactNode;
+    /**
+     * Text content alias used by some generated payloads
+     */
+    text?: React.ReactNode;
+    /**
+     * Label content alias used by some generated payloads
+     */
+    label?: React.ReactNode;
+    /**
+     * Checklist item title
+     */
+    title?: React.ReactNode;
+    /**
+     * Checklist item description
+     */
+    description?: React.ReactNode;
     /**
      * Icon element (overrides default check icon)
      */
@@ -57,6 +73,10 @@ interface FeatureChecklistImageProps {
      * Array of checklist items (can be strings or FeatureChecklistItem objects)
      */
     checklistItems?: (string | FeatureChecklistItem)[];
+    /**
+     * Alias for checklistItems used by registry examples and builder payloads
+     */
+    benefits?: (string | FeatureChecklistItem)[];
     /**
      * Custom slot for rendering checklist (overrides checklistItems array)
      */
@@ -143,6 +163,6 @@ interface FeatureChecklistImageProps {
  * />
  * ```
  */
-declare function FeatureChecklistImage({ sectionId, title, description, titleClassName, descriptionClassName, imageSrc, imageAlt, imageSlot, actions, actionsSlot, checklistItems, checklistSlot, className, containerClassName, contentWrapperClassName, imageClassName, contentClassName, actionsClassName, checklistClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, patternClassName, }: FeatureChecklistImageProps): React.JSX.Element;
+declare function FeatureChecklistImage({ sectionId, title, description, titleClassName, descriptionClassName, imageSrc, imageAlt, imageSlot, actions, actionsSlot, checklistItems, benefits, checklistSlot, className, containerClassName, contentWrapperClassName, imageClassName, contentClassName, actionsClassName, checklistClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, patternClassName, }: FeatureChecklistImageProps): React.JSX.Element;
 
 export { FeatureChecklistImage, type FeatureChecklistImageProps };

package/dist/feature-checklist-image.d.ts

@@ -11,6 +11,22 @@ interface FeatureChecklistItem {
      * Checklist item content
      */
     content?: React.ReactNode;
+    /**
+     * Text content alias used by some generated payloads
+     */
+    text?: React.ReactNode;
+    /**
+     * Label content alias used by some generated payloads
+     */
+    label?: React.ReactNode;
+    /**
+     * Checklist item title
+     */
+    title?: React.ReactNode;
+    /**
+     * Checklist item description
+     */
+    description?: React.ReactNode;
     /**
      * Icon element (overrides default check icon)
      */
@@ -57,6 +73,10 @@ interface FeatureChecklistImageProps {
      * Array of checklist items (can be strings or FeatureChecklistItem objects)
      */
     checklistItems?: (string | FeatureChecklistItem)[];
+    /**
+     * Alias for checklistItems used by registry examples and builder payloads
+     */
+    benefits?: (string | FeatureChecklistItem)[];
     /**
      * Custom slot for rendering checklist (overrides checklistItems array)
      */
@@ -143,6 +163,6 @@ interface FeatureChecklistImageProps {
  * />
  * ```
  */
-declare function FeatureChecklistImage({ sectionId, title, description, titleClassName, descriptionClassName, imageSrc, imageAlt, imageSlot, actions, actionsSlot, checklistItems, checklistSlot, className, containerClassName, contentWrapperClassName, imageClassName, contentClassName, actionsClassName, checklistClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, patternClassName, }: FeatureChecklistImageProps): React.JSX.Element;
+declare function FeatureChecklistImage({ sectionId, title, description, titleClassName, descriptionClassName, imageSrc, imageAlt, imageSlot, actions, actionsSlot, checklistItems, benefits, checklistSlot, className, containerClassName, contentWrapperClassName, imageClassName, contentClassName, actionsClassName, checklistClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, patternClassName, }: FeatureChecklistImageProps): React.JSX.Element;
 
 export { FeatureChecklistImage, type FeatureChecklistImageProps };