@opensite/ui 0.8.4 → 0.8.5

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

@@ -1042,7 +1042,7 @@ function FeatureIconTabsContent({
   tabContentClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -1052,12 +1052,28 @@ function FeatureIconTabsContent({
     if (tab.iconName) return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: tab.iconName, size: 16 });
     return null;
   }, []);
-  const renderTabContentActions = React.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__ */ jsxRuntime.jsx(
+  const renderTabContentActions = React.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
           Pressable,
           {
             href: action.href,
@@ -1067,90 +1083,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 = React.useCallback(
+    (content) => {
+      if (content.imageSlot) return content.imageSlot;
+      if (content.imageSrc) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          img.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__ */ jsxRuntime.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 = React.useCallback((content) => {
-    if (content.imageSlot) return content.imageSlot;
-    if (content.imageSrc) {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        img.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 = React.useMemo(() => {
     if (tabsSlot) return tabsSlot;
     if (!tabs || tabs.length === 0) return null;
     const activeDefaultTab = defaultTab || tabs[0]?.value;
     return /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { defaultValue: activeDefaultTab, className: "mt-8", children: [
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
-        TabsTrigger,
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container overflow-x-auto px-4 pb-2 md:px-6", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: cn("mx-auto mt-8 max-w-7xl rounded-2xl bg-muted/70 p-6 lg:p-16", contentWrapperClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: tabs.map((tab) => {
-        if (tab.contentSlot) {
-          return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5", children: [
-                content.badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: cn("w-fit bg-background", content.badgeClassName), children: content.badge }),
-                content.title && (typeof content.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-3xl font-semibold lg:text-5xl", content.titleClassName), children: content.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-3xl font-semibold lg:text-5xl", content.titleClassName), children: content.title })),
-                content.description && (typeof content.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground lg:text-lg", content.descriptionClassName), children: content.description }) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "relative h-[300px] w-full lg:h-[400px]", children: renderTabContentImage(content) })
-            ]
-          },
-          tab.value
-        );
-      }) }) })
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "mx-auto mt-8 max-w-7xl rounded-2xl bg-muted/70 p-6 lg:p-16",
+            contentWrapperClassName
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: tabs.map((tab) => {
+            if (tab.contentSlot) {
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                TabsContent,
+                {
+                  value: tab.value,
+                  className: tabContentClassName,
+                  children: tab.contentSlot
+                },
+                tab.value
+              );
+            }
+            const content = tab.content;
+            if (!content) return null;
+            return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5", children: [
+                    content.badge && /* @__PURE__ */ jsxRuntime.jsx(
+                      Badge,
+                      {
+                        variant: "outline",
+                        className: cn(
+                          "w-fit bg-background",
+                          content.badgeClassName
+                        ),
+                        children: content.badge
+                      }
+                    ),
+                    content.title && (typeof content.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "h3",
+                      {
+                        className: cn(
+                          "text-3xl font-semibold lg:text-5xl",
+                          content.titleClassName
+                        ),
+                        children: content.title
+                      }
+                    ) : /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        className: cn(
+                          "text-3xl font-semibold lg:text-5xl",
+                          content.titleClassName
+                        ),
+                        children: content.title
+                      }
+                    )),
+                    content.description && (typeof content.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "p",
+                      {
+                        className: cn(
+                          "text-muted-foreground lg:text-lg",
+                          content.descriptionClassName
+                        ),
+                        children: content.description
+                      }
+                    ) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -1162,11 +1262,44 @@ function FeatureIconTabsContent({
       className,
       containerClassName: cn("mx-auto", containerClassName),
       children: [
-        (badge || heading || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center gap-4 text-center", headerClassName), children: [
-          badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: badgeClassName, children: badge }),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("max-w-2xl text-3xl font-semibold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("max-w-2xl text-3xl font-semibold md:text-4xl", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-muted-foreground", descriptionClassName), children: description }))
-        ] }),
+        (badge || heading || description) && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-col items-center gap-4 text-center",
+              headerClassName
+            ),
+            children: [
+              badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: badgeClassName, children: badge }),
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h1",
+                {
+                  className: cn(
+                    "max-w-2xl text-3xl font-semibold md:text-4xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "max-w-2xl text-3xl font-semibold md:text-4xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              )),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn("text-muted-foreground", descriptionClassName),
+                  children: description
+                }
+              ))
+            ]
+          }
+        ),
         tabsContent
       ]
     }