@opensite/ui 0.8.4 → 0.8.6

package/dist/feature-icon-tabs-content.js

@@ -1020,7 +1020,7 @@ function FeatureIconTabsContent({
   tabContentClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -1030,12 +1030,28 @@ function FeatureIconTabsContent({
     if (tab.iconName) return /* @__PURE__ */ jsx(DynamicIcon, { name: tab.iconName, size: 16 });
     return null;
   }, []);
-  const renderTabContentActions = useCallback((content) => {
-    if (content.actionsSlot) return content.actionsSlot;
-    if (!content.actions || content.actions.length === 0) return null;
-    return content.actions.map((action, index) => {
-      if (action.children) {
-        return /* @__PURE__ */ jsx(
+  const renderTabContentActions = useCallback(
+    (content) => {
+      if (content.actionsSlot) return content.actionsSlot;
+      if (!content.actions || content.actions.length === 0) return null;
+      return content.actions.map((action, index) => {
+        if (action.children) {
+          return /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              href: action.href,
+              onClick: action.onClick,
+              variant: action.variant,
+              size: action.size,
+              className: cn("mt-2.5 w-fit gap-2", action.className),
+              "aria-label": action["aria-label"],
+              asButton: true,
+              children: action.children
+            },
+            index
+          );
+        }
+        return /* @__PURE__ */ jsxs(
           Pressable,
           {
             href: action.href,
@@ -1045,90 +1061,174 @@ function FeatureIconTabsContent({
             className: cn("mt-2.5 w-fit gap-2", action.className),
             "aria-label": action["aria-label"],
             asButton: true,
-            children: action.children
+            children: [
+              action.icon,
+              action.label,
+              action.iconAfter
+            ]
           },
           index
         );
+      });
+    },
+    []
+  );
+  const renderTabContentImage = useCallback(
+    (content) => {
+      if (content.imageSlot) return content.imageSlot;
+      if (content.imageSrc) {
+        return /* @__PURE__ */ jsx(
+          Img,
+          {
+            src: content.imageSrc,
+            alt: content.imageAlt || "Tab content image",
+            className: cn(
+              "h-full w-full rounded-xl object-cover",
+              content.imageClassName
+            ),
+            loading: "lazy",
+            optixFlowConfig
+          }
+        );
       }
-      return /* @__PURE__ */ jsxs(
-        Pressable,
-        {
-          href: action.href,
-          onClick: action.onClick,
-          variant: action.variant,
-          size: action.size,
-          className: cn("mt-2.5 w-fit gap-2", action.className),
-          "aria-label": action["aria-label"],
-          asButton: true,
-          children: [
-            action.icon,
-            action.label,
-            action.iconAfter
-          ]
-        },
-        index
-      );
-    });
-  }, []);
-  const renderTabContentImage = useCallback((content) => {
-    if (content.imageSlot) return content.imageSlot;
-    if (content.imageSrc) {
-      return /* @__PURE__ */ jsx(
-        Img,
-        {
-          src: content.imageSrc,
-          alt: content.imageAlt || "Tab content image",
-          className: cn("h-full w-full rounded-xl object-cover", content.imageClassName),
-          loading: "lazy",
-          optixFlowConfig
-        }
-      );
-    }
-    return null;
-  }, [optixFlowConfig]);
+      return null;
+    },
+    [optixFlowConfig]
+  );
   const tabsContent = useMemo(() => {
     if (tabsSlot) return tabsSlot;
     if (!tabs || tabs.length === 0) return null;
     const activeDefaultTab = defaultTab || tabs[0]?.value;
     return /* @__PURE__ */ jsxs(Tabs, { defaultValue: activeDefaultTab, className: "mt-8", children: [
-      /* @__PURE__ */ jsx(TabsList, { className: cn("container flex flex-col items-center justify-center gap-4 bg-transparent sm:flex-row md:gap-10", tabsListClassName), children: tabs.map((tab) => /* @__PURE__ */ jsxs(
-        TabsTrigger,
+      /* @__PURE__ */ jsx("div", { className: "container overflow-x-auto px-4 pb-2 md:px-6", children: /* @__PURE__ */ jsx(
+        TabsList,
         {
-          value: tab.value,
-          className: cn("flex items-center gap-2 rounded-xl px-4 py-3 text-sm font-semibold text-muted-foreground data-[state=active]:bg-muted data-[state=active]:text-primary", tabTriggerClassName, tab.className),
-          children: [
-            (tab.icon || tab.iconName) && renderTabIcon(tab),
-            tab.label
-          ]
-        },
-        tab.value
-      )) }),
-      /* @__PURE__ */ jsx("div", { className: cn("mx-auto mt-8 max-w-7xl rounded-2xl bg-muted/70 p-6 lg:p-16", contentWrapperClassName), children: /* @__PURE__ */ jsx("div", { className: "relative", children: tabs.map((tab) => {
-        if (tab.contentSlot) {
-          return /* @__PURE__ */ jsx(TabsContent, { value: tab.value, className: tabContentClassName, children: tab.contentSlot }, tab.value);
+          className: cn(
+            "inline-flex w-auto min-w-full items-center justify-start gap-2 bg-transparent md:justify-center md:gap-4",
+            tabsListClassName
+          ),
+          children: tabs.map((tab) => /* @__PURE__ */ jsxs(
+            TabsTrigger,
+            {
+              value: tab.value,
+              className: cn(
+                "flex shrink-0 items-center gap-2 rounded-lg border border-border bg-background px-4 py-2.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground data-[state=active]:border-primary data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
+                tabTriggerClassName,
+                tab.className
+              ),
+              children: [
+                (tab.icon || tab.iconName) && renderTabIcon(tab),
+                tab.label
+              ]
+            },
+            tab.value
+          ))
         }
-        const content = tab.content;
-        if (!content) return null;
-        return /* @__PURE__ */ jsxs(
-          TabsContent,
-          {
-            value: tab.value,
-            className: cn("grid place-items-start gap-20 lg:grid-cols-2 lg:gap-10", tabContentClassName, content.className),
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5", children: [
-                content.badge && /* @__PURE__ */ jsx(Badge, { variant: "outline", className: cn("w-fit bg-background", content.badgeClassName), children: content.badge }),
-                content.title && (typeof content.title === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("text-3xl font-semibold lg:text-5xl", content.titleClassName), children: content.title }) : /* @__PURE__ */ jsx("div", { className: cn("text-3xl font-semibold lg:text-5xl", content.titleClassName), children: content.title })),
-                content.description && (typeof content.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground lg:text-lg", content.descriptionClassName), children: content.description }) : /* @__PURE__ */ jsx("div", { className: cn("text-muted-foreground lg:text-lg", content.descriptionClassName), children: content.description })),
-                (content.actionsSlot || content.actions && content.actions.length > 0) && renderTabContentActions(content)
-              ] }),
-              (content.imageSlot || content.imageSrc) && /* @__PURE__ */ jsx("div", { className: "relative h-[300px] w-full lg:h-[400px]", children: renderTabContentImage(content) })
-            ]
-          },
-          tab.value
-        );
-      }) }) })
+      ) }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "mx-auto mt-8 max-w-7xl rounded-2xl bg-muted/70 p-6 lg:p-16",
+            contentWrapperClassName
+          ),
+          children: /* @__PURE__ */ jsx("div", { className: "relative", children: tabs.map((tab) => {
+            if (tab.contentSlot) {
+              return /* @__PURE__ */ jsx(
+                TabsContent,
+                {
+                  value: tab.value,
+                  className: tabContentClassName,
+                  children: tab.contentSlot
+                },
+                tab.value
+              );
+            }
+            const content = tab.content;
+            if (!content) return null;
+            return /* @__PURE__ */ jsxs(
+              TabsContent,
+              {
+                value: tab.value,
+                className: cn(
+                  "grid place-items-start gap-20 lg:grid-cols-2 lg:gap-10",
+                  tabContentClassName,
+                  content.className
+                ),
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5", children: [
+                    content.badge && /* @__PURE__ */ jsx(
+                      Badge,
+                      {
+                        variant: "outline",
+                        className: cn(
+                          "w-fit bg-background",
+                          content.badgeClassName
+                        ),
+                        children: content.badge
+                      }
+                    ),
+                    content.title && (typeof content.title === "string" ? /* @__PURE__ */ jsx(
+                      "h3",
+                      {
+                        className: cn(
+                          "text-3xl font-semibold lg:text-5xl",
+                          content.titleClassName
+                        ),
+                        children: content.title
+                      }
+                    ) : /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: cn(
+                          "text-3xl font-semibold lg:text-5xl",
+                          content.titleClassName
+                        ),
+                        children: content.title
+                      }
+                    )),
+                    content.description && (typeof content.description === "string" ? /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        className: cn(
+                          "text-muted-foreground lg:text-lg",
+                          content.descriptionClassName
+                        ),
+                        children: content.description
+                      }
+                    ) : /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: cn(
+                          "text-muted-foreground lg:text-lg",
+                          content.descriptionClassName
+                        ),
+                        children: content.description
+                      }
+                    )),
+                    (content.actionsSlot || content.actions && content.actions.length > 0) && renderTabContentActions(content)
+                  ] }),
+                  (content.imageSlot || content.imageSrc) && /* @__PURE__ */ jsx("div", { className: "relative h-[300px] w-full lg:h-[400px]", children: renderTabContentImage(content) })
+                ]
+              },
+              tab.value
+            );
+          }) })
+        }
+      )
     ] });
-  }, [tabsSlot, tabs, defaultTab, tabsListClassName, tabTriggerClassName, contentWrapperClassName, tabContentClassName, renderTabIcon, renderTabContentActions, renderTabContentImage]);
+  }, [
+    tabsSlot,
+    tabs,
+    defaultTab,
+    tabsListClassName,
+    tabTriggerClassName,
+    contentWrapperClassName,
+    tabContentClassName,
+    renderTabIcon,
+    renderTabContentActions,
+    renderTabContentImage
+  ]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -1140,11 +1240,44 @@ function FeatureIconTabsContent({
       className,
       containerClassName: cn("mx-auto", containerClassName),
       children: [
-        (badge || heading || description) && /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center gap-4 text-center", headerClassName), children: [
-          badge && /* @__PURE__ */ jsx(Badge, { variant: "outline", className: badgeClassName, children: badge }),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("max-w-2xl text-3xl font-semibold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: cn("max-w-2xl text-3xl font-semibold md:text-4xl", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("text-muted-foreground", descriptionClassName), children: description }))
-        ] }),
+        (badge || heading || description) && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-col items-center gap-4 text-center",
+              headerClassName
+            ),
+            children: [
+              badge && /* @__PURE__ */ jsx(Badge, { variant: "outline", className: badgeClassName, children: badge }),
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "max-w-2xl text-3xl font-semibold md:text-4xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "max-w-2xl text-3xl font-semibold md:text-4xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              )),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn("text-muted-foreground", descriptionClassName),
+                  children: description
+                }
+              ))
+            ]
+          }
+        ),
         tabsContent
       ]
     }

package/dist/feature-image-overlay-badge.cjs

@@ -1024,7 +1024,7 @@ function FeatureImageOverlayBadge({
   overlayTitleClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -1077,7 +1077,10 @@ function FeatureImageOverlayBadge({
         {
           src: imageSrc,
           alt: imageAlt || "Feature illustration",
-          className: cn("rounded-xl object-cover md:aspect-video lg:aspect-auto", imageClassName),
+          className: cn(
+            "rounded-2xl object-cover md:aspect-video lg:aspect-auto w-full h-auto",
+            imageClassName
+          ),
           loading: "lazy",
           optixFlowConfig
         }
@@ -1095,41 +1098,111 @@ function FeatureImageOverlayBadge({
       patternClassName,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid place-items-center gap-10 lg:grid-cols-2", gridClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-5", contentClassName), children: [
-          badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: cn("w-fit bg-background", badgeClassName), children: badge }),
-          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-3xl font-semibold lg:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-3xl font-semibold lg:text-5xl", titleClassName), children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-muted-foreground lg:text-lg", descriptionClassName), children: description })),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: actionsContent })
-        ] }),
-        imageContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative rounded-xl", imageWrapperClassName), children: [
-          imageContent,
-          (avatarSrc || avatarBadgeText || overlayTitle || overlayLinkText) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute top-0 right-0 bottom-0 left-0 rounded-xl bg-linear-to-t from-primary via-transparent to-transparent", overlayClassName) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between p-7", children: [
-              (avatarSrc || avatarBadgeText) && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("ml-auto flex w-fit items-center gap-2 rounded-full bg-background/30 px-4 py-2.5 text-sm font-semibold backdrop-blur-sm", avatarBadgeClassName), children: [
-                avatarSrc && /* @__PURE__ */ jsxRuntime.jsx(Avatar, { className: "size-7 rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: avatarSrc, alt: "Avatar" }) }),
-                avatarBadgeText
-              ] }),
-              (overlayTitle || overlayLinkText) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5 text-background", children: [
-                overlayTitle && (typeof overlayTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h4", { className: cn("text-lg font-semibold lg:text-3xl", overlayTitleClassName), children: overlayTitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-lg font-semibold lg:text-3xl", overlayTitleClassName), children: overlayTitle })),
-                overlayLinkText && /* @__PURE__ */ jsxRuntime.jsxs(
-                  Pressable,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "grid place-items-center gap-10 lg:grid-cols-2",
+            gridClassName
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-5", contentClassName), children: [
+              badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: cn("", badgeClassName), children: badge }),
+              title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h3",
+                {
+                  className: cn(
+                    "text-3xl font-semibold lg:text-4xl leading-snug text-balance",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "text-3xl font-semibold lg:text-5xl",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              )),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("lg:text-lg", descriptionClassName), children: description })),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "flex items-center gap-4 flex-wrap",
+                    actionsClassName
+                  ),
+                  children: actionsContent
+                }
+              )
+            ] }),
+            imageContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative rounded-2xl", imageWrapperClassName), children: [
+              imageContent,
+              (avatarSrc || avatarBadgeText || overlayTitle || overlayLinkText) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
                   {
-                    href: overlayLinkUrl,
-                    onClick: overlayLinkOnClick,
-                    className: "flex items-center gap-1 font-medium",
-                    children: [
-                      overlayLinkText,
-                      /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 })
-                    ]
+                    className: cn(
+                      "absolute top-0 right-0 bottom-0 left-0 rounded-2xl bg-linear-to-t from-black via-black/20 to-transparent",
+                      overlayClassName
+                    )
                   }
-                )
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between pt-4 pr-4 pl-4 pb-8 md:pt-7 md:bpr-7 md:pl-7 md:pb-7 rounded-2xl", children: [
+                  (avatarSrc || avatarBadgeText) && /* @__PURE__ */ jsxRuntime.jsxs(
+                    "span",
+                    {
+                      className: cn(
+                        "ml-auto flex w-fit items-center gap-2 rounded-full bg-background/30 px-4 py-2.5 text-sm font-semibold backdrop-blur-sm shadow-xl",
+                        avatarBadgeClassName
+                      ),
+                      children: [
+                        avatarSrc && /* @__PURE__ */ jsxRuntime.jsx(Avatar, { className: "size-7 rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: avatarSrc, alt: "Avatar" }) }),
+                        avatarBadgeText
+                      ]
+                    }
+                  ),
+                  (overlayTitle || overlayLinkText) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5", children: [
+                    overlayTitle && (typeof overlayTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "h4",
+                      {
+                        className: cn(
+                          "text-lg font-semibold lg:text-3xl",
+                          overlayTitleClassName
+                        ),
+                        children: overlayTitle
+                      }
+                    ) : /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        className: cn(
+                          "text-lg font-semibold lg:text-3xl",
+                          overlayTitleClassName
+                        ),
+                        children: overlayTitle
+                      }
+                    )),
+                    overlayLinkText && /* @__PURE__ */ jsxRuntime.jsxs(
+                      Pressable,
+                      {
+                        href: overlayLinkUrl,
+                        onClick: overlayLinkOnClick,
+                        children: [
+                          overlayLinkText,
+                          /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 18 })
+                        ]
+                      }
+                    )
+                  ] })
+                ] })
               ] })
             ] })
-          ] })
-        ] })
-      ] })
+          ]
+        }
+      )
     }
   );
 }