@opensite/ui 0.8.3 → 0.8.5

package/dist/feature-split-image-reverse.js

@@ -790,7 +790,7 @@ var Section = React__default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
                   subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
@@ -822,7 +822,7 @@ function FeatureSplitImageReverse({
   actionsClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -839,11 +839,20 @@ function FeatureSplitImageReverse({
         className: actionClassName,
         ...pressableProps
       } = action;
-      return /* @__PURE__ */ jsx(Pressable, { className: actionClassName, asButton: true, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-        icon,
-        label,
-        iconAfter
-      ] }) }, index);
+      return /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          className: actionClassName,
+          asButton: true,
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+            icon,
+            label,
+            iconAfter
+          ] })
+        },
+        index
+      );
     });
   }, [actionsSlot, actions]);
   const imageContent = useMemo(() => {
@@ -854,7 +863,10 @@ function FeatureSplitImageReverse({
       {
         src: imageSrc,
         alt: imageAlt || "",
-        className: cn("max-h-96 w-full rounded-md object-cover", imageClassName),
+        className: cn(
+          "max-h-96 w-full rounded-md object-cover",
+          imageClassName
+        ),
         loading: "lazy",
         optixFlowConfig
       }
@@ -870,14 +882,77 @@ function FeatureSplitImageReverse({
       patternClassName,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxs("div", { className: cn("grid items-center gap-8 md:gap-16 lg:grid-cols-2", gridClassName), children: [
-        imageContent,
-        /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center text-center lg:items-start lg:text-left", contentClassName), children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("my-6 mt-0 text-4xl font-semibold text-balance lg:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("my-6 mt-0 text-4xl font-semibold text-balance lg:text-5xl", titleClassName), children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-8 max-w-xl text-muted-foreground lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mb-8 max-w-xl text-muted-foreground lg:text-lg", descriptionClassName), children: description })),
-          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start", actionsClassName), children: actionsContent })
-        ] })
-      ] })
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "grid items-center gap-8 md:gap-16 lg:grid-cols-2",
+            gridClassName
+          ),
+          children: [
+            imageContent,
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex flex-col items-center text-center lg:items-start lg:text-left",
+                  contentClassName
+                ),
+                children: [
+                  title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+                    "h2",
+                    {
+                      className: cn(
+                        "my-6 mt-0 text-4xl font-semibold text-balance lg:text-5xl",
+                        titleClassName
+                      ),
+                      children: title
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "my-6 mt-0 text-4xl font-semibold text-balance lg:text-5xl",
+                        titleClassName
+                      ),
+                      children: title
+                    }
+                  )),
+                  description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      className: cn(
+                        "mb-8 max-w-xl text-muted-foreground lg:text-lg",
+                        descriptionClassName
+                      ),
+                      children: description
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "mb-8 max-w-xl text-muted-foreground lg:text-lg",
+                        descriptionClassName
+                      ),
+                      children: description
+                    }
+                  )),
+                  (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start",
+                        actionsClassName
+                      ),
+                      children: actionsContent
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      )
     }
   );
 }

package/dist/feature-split-image.cjs

@@ -811,7 +811,7 @@ var Section = React__namespace.default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
                   subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
@@ -843,7 +843,7 @@ function FeatureSplitImage({
   imageClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -860,11 +860,20 @@ function FeatureSplitImage({
         className: actionClassName,
         ...pressableProps
       } = action;
-      return /* @__PURE__ */ jsxRuntime.jsx(Pressable, { className: actionClassName, asButton: true, ...pressableProps, children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        icon,
-        label,
-        iconAfter
-      ] }) }, index);
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Pressable,
+        {
+          className: actionClassName,
+          asButton: true,
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            icon,
+            label,
+            iconAfter
+          ] })
+        },
+        index
+      );
     });
   }, [actionsSlot, actions]);
   const imageContent = React.useMemo(() => {
@@ -875,7 +884,10 @@ function FeatureSplitImage({
       {
         src: imageSrc,
         alt: imageAlt || "",
-        className: cn("max-h-96 w-full rounded-md object-cover", imageClassName),
+        className: cn(
+          "max-h-96 w-full rounded-md object-cover",
+          imageClassName
+        ),
         loading: "lazy",
         optixFlowConfig
       }
@@ -891,14 +903,74 @@ function FeatureSplitImage({
       patternClassName,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid items-center gap-8 lg:grid-cols-2", gridClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center text-center lg:items-start lg:text-left", contentClassName), children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("my-6 mt-0 text-4xl font-semibold text-balance lg:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("my-6 mt-0 text-4xl font-semibold text-balance lg:text-5xl", titleClassName), children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-8 max-w-xl text-muted-foreground lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-8 max-w-xl text-muted-foreground lg:text-lg", descriptionClassName), children: description })),
-          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start", actionsClassName), children: actionsContent })
-        ] }),
-        imageContent
-      ] })
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn("grid items-center gap-8 lg:grid-cols-2", gridClassName),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex flex-col items-center text-center lg:items-start lg:text-left",
+                  contentClassName
+                ),
+                children: [
+                  title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "h2",
+                    {
+                      className: cn(
+                        "my-6 mt-0 text-4xl font-semibold text-balance lg:text-5xl",
+                        titleClassName
+                      ),
+                      children: title
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "my-6 mt-0 text-4xl font-semibold text-balance lg:text-5xl",
+                        titleClassName
+                      ),
+                      children: title
+                    }
+                  )),
+                  description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "p",
+                    {
+                      className: cn(
+                        "mb-8 max-w-xl text-muted-foreground lg:text-lg",
+                        descriptionClassName
+                      ),
+                      children: description
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "mb-8 max-w-xl text-muted-foreground lg:text-lg",
+                        descriptionClassName
+                      ),
+                      children: description
+                    }
+                  )),
+                  (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start",
+                        actionsClassName
+                      ),
+                      children: actionsContent
+                    }
+                  )
+                ]
+              }
+            ),
+            imageContent
+          ]
+        }
+      )
     }
   );
 }

package/dist/feature-split-image.js

@@ -790,7 +790,7 @@ var Section = React__default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
                   subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
@@ -822,7 +822,7 @@ function FeatureSplitImage({
   imageClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -839,11 +839,20 @@ function FeatureSplitImage({
         className: actionClassName,
         ...pressableProps
       } = action;
-      return /* @__PURE__ */ jsx(Pressable, { className: actionClassName, asButton: true, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-        icon,
-        label,
-        iconAfter
-      ] }) }, index);
+      return /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          className: actionClassName,
+          asButton: true,
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+            icon,
+            label,
+            iconAfter
+          ] })
+        },
+        index
+      );
     });
   }, [actionsSlot, actions]);
   const imageContent = useMemo(() => {
@@ -854,7 +863,10 @@ function FeatureSplitImage({
       {
         src: imageSrc,
         alt: imageAlt || "",
-        className: cn("max-h-96 w-full rounded-md object-cover", imageClassName),
+        className: cn(
+          "max-h-96 w-full rounded-md object-cover",
+          imageClassName
+        ),
         loading: "lazy",
         optixFlowConfig
       }
@@ -870,14 +882,74 @@ function FeatureSplitImage({
       patternClassName,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxs("div", { className: cn("grid items-center gap-8 lg:grid-cols-2", gridClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center text-center lg:items-start lg:text-left", contentClassName), children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("my-6 mt-0 text-4xl font-semibold text-balance lg:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("my-6 mt-0 text-4xl font-semibold text-balance lg:text-5xl", titleClassName), children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-8 max-w-xl text-muted-foreground lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mb-8 max-w-xl text-muted-foreground lg:text-lg", descriptionClassName), children: description })),
-          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start", actionsClassName), children: actionsContent })
-        ] }),
-        imageContent
-      ] })
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn("grid items-center gap-8 lg:grid-cols-2", gridClassName),
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex flex-col items-center text-center lg:items-start lg:text-left",
+                  contentClassName
+                ),
+                children: [
+                  title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+                    "h2",
+                    {
+                      className: cn(
+                        "my-6 mt-0 text-4xl font-semibold text-balance lg:text-5xl",
+                        titleClassName
+                      ),
+                      children: title
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "my-6 mt-0 text-4xl font-semibold text-balance lg:text-5xl",
+                        titleClassName
+                      ),
+                      children: title
+                    }
+                  )),
+                  description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      className: cn(
+                        "mb-8 max-w-xl text-muted-foreground lg:text-lg",
+                        descriptionClassName
+                      ),
+                      children: description
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "mb-8 max-w-xl text-muted-foreground lg:text-lg",
+                        descriptionClassName
+                      ),
+                      children: description
+                    }
+                  )),
+                  (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start",
+                        actionsClassName
+                      ),
+                      children: actionsContent
+                    }
+                  )
+                ]
+              }
+            ),
+            imageContent
+          ]
+        }
+      )
     }
   );
 }

package/dist/feature-stats-highlight.cjs

@@ -843,7 +843,7 @@ var Section = React__namespace.default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
                   subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
@@ -915,9 +915,9 @@ function FeatureStatsHighlight({
     return stats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: cn("flex flex-col gap-2 rounded-xl border bg-muted/30 p-6", statCardClassName, stat.className),
+        className: cn("flex flex-col gap-2 rounded-xl border bg-card p-6", statCardClassName, stat.className),
         children: [
-          stat.value && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-4xl font-bold text-primary lg:text-5xl", stat.valueClassName), children: stat.value }),
+          stat.value && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-4xl font-bold lg:text-5xl", stat.valueClassName), children: stat.value }),
           stat.label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-muted-foreground", stat.labelClassName), children: stat.label })
         ]
       },

package/dist/feature-stats-highlight.js

@@ -822,7 +822,7 @@ var Section = React__default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
                   subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
@@ -894,9 +894,9 @@ function FeatureStatsHighlight({
     return stats.map((stat, index) => /* @__PURE__ */ jsxs(
       "div",
       {
-        className: cn("flex flex-col gap-2 rounded-xl border bg-muted/30 p-6", statCardClassName, stat.className),
+        className: cn("flex flex-col gap-2 rounded-xl border bg-card p-6", statCardClassName, stat.className),
         children: [
-          stat.value && /* @__PURE__ */ jsx("span", { className: cn("text-4xl font-bold text-primary lg:text-5xl", stat.valueClassName), children: stat.value }),
+          stat.value && /* @__PURE__ */ jsx("span", { className: cn("text-4xl font-bold lg:text-5xl", stat.valueClassName), children: stat.value }),
           stat.label && /* @__PURE__ */ jsx("span", { className: cn("text-muted-foreground", stat.labelClassName), children: stat.label })
         ]
       },