@opensite/ui 1.2.8 → 1.3.0

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

@@ -1079,7 +1079,7 @@ function FeatureIconTabsContent({
   tabsSlot,
   defaultTab,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   badgeClassName,
   headingClassName,
@@ -1170,11 +1170,11 @@ function FeatureIconTabsContent({
     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("div", { className: "container overflow-x-auto px-4 pb-2 md:px-6", children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container overflow-x-auto px-4 pb-2 md:px-6 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-border/50 hover:scrollbar-thumb-border md:overflow-x-visible [&::-webkit-scrollbar]:h-1 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border/30", children: /* @__PURE__ */ jsxRuntime.jsx(
         TabsList,
         {
           className: cn(
-            "inline-flex w-auto min-w-full items-center justify-start gap-2 bg-transparent md:justify-center md:gap-4",
+            "inline-flex w-auto items-center justify-start gap-2 bg-transparent md:w-full md:justify-center md:gap-4 h-auto! p-0!",
             tabsListClassName
           ),
           children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1182,7 +1182,7 @@ function FeatureIconTabsContent({
             {
               value: tab.value,
               className: cn(
-                "flex shrink-0 items-center gap-2 rounded-lg border border-border px-4 py-2.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
+                "flex h-auto! w-auto! flex-none items-center gap-2 rounded-lg border border-border px-4 py-2.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
                 `data-[state=active]:${getBorderColor(background, "accent")}`,
                 tabTriggerClassName,
                 tab.className
@@ -1196,99 +1196,87 @@ function FeatureIconTabsContent({
           ))
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: cn(
-            "mx-auto mt-8 max-w-7xl rounded-2xl 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
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("py-6 lg:py-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", content.badgeClassName),
+                    children: content.badge
+                  }
                 ),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5", children: [
-                    content.badge && /* @__PURE__ */ jsxRuntime.jsx(
-                      Badge,
-                      {
-                        variant: "outline",
-                        className: cn(
-                          "w-fit",
-                          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
                     ),
-                    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(
-                          "lg:text-lg",
-                          getTextColor(background, "muted"),
-                          content.descriptionClassName
-                        ),
-                        children: content.description
-                      }
-                    ) : /* @__PURE__ */ jsxRuntime.jsx(
-                      "div",
-                      {
-                        className: cn(
-                          "lg:text-lg",
-                          getTextColor(background, "muted"),
-                          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
-            );
-          }) })
-        }
-      )
+                    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(
+                      "lg:text-lg",
+                      getTextColor(background, "muted"),
+                      content.descriptionClassName
+                    ),
+                    children: content.description
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "lg:text-lg",
+                      getTextColor(background, "muted"),
+                      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,
@@ -1302,7 +1290,7 @@ function FeatureIconTabsContent({
     renderTabContentActions,
     renderTabContentImage
   ]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
       background,
@@ -1311,8 +1299,8 @@ function FeatureIconTabsContent({
       patternOpacity,
       patternClassName,
       className,
-      containerClassName: cn("mx-auto", containerClassName),
-      children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
         (badge || heading || description) && /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
@@ -1326,7 +1314,7 @@ function FeatureIconTabsContent({
                 "h1",
                 {
                   className: cn(
-                    "max-w-2xl text-3xl font-semibold md:text-4xl",
+                    "max-w-2xl text-3xl font-semibold md:text-4xl text-balance",
                     headingClassName
                   ),
                   children: heading
@@ -1335,24 +1323,18 @@ function FeatureIconTabsContent({
                 "div",
                 {
                   className: cn(
-                    "max-w-2xl text-3xl font-semibold md:text-4xl",
+                    "max-w-2xl text-3xl font-semibold md:text-4xl text-balance",
                     headingClassName
                   ),
                   children: heading
                 }
               )),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: cn(getTextColor(background, "muted"), descriptionClassName),
-                  children: description
-                }
-              ))
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-balance", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-balance", descriptionClassName), children: description }))
             ]
           }
         ),
         tabsContent
-      ]
+      ] })
     }
   );
 }

package/dist/feature-icon-tabs-content.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-tmd_MRJv.cjs';
+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 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface FeatureIconTabsContentTabContent {

package/dist/feature-icon-tabs-content.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-hxnFe3w6.js';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-DRE-f6cS.js';
+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 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface FeatureIconTabsContentTabContent {

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

@@ -1057,7 +1057,7 @@ function FeatureIconTabsContent({
   tabsSlot,
   defaultTab,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   badgeClassName,
   headingClassName,
@@ -1148,11 +1148,11 @@ function FeatureIconTabsContent({
     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("div", { className: "container overflow-x-auto px-4 pb-2 md:px-6", children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: "container overflow-x-auto px-4 pb-2 md:px-6 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-border/50 hover:scrollbar-thumb-border md:overflow-x-visible [&::-webkit-scrollbar]:h-1 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border/30", children: /* @__PURE__ */ jsx(
         TabsList,
         {
           className: cn(
-            "inline-flex w-auto min-w-full items-center justify-start gap-2 bg-transparent md:justify-center md:gap-4",
+            "inline-flex w-auto items-center justify-start gap-2 bg-transparent md:w-full md:justify-center md:gap-4 h-auto! p-0!",
             tabsListClassName
           ),
           children: tabs.map((tab) => /* @__PURE__ */ jsxs(
@@ -1160,7 +1160,7 @@ function FeatureIconTabsContent({
             {
               value: tab.value,
               className: cn(
-                "flex shrink-0 items-center gap-2 rounded-lg border border-border px-4 py-2.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
+                "flex h-auto! w-auto! flex-none items-center gap-2 rounded-lg border border-border px-4 py-2.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
                 `data-[state=active]:${getBorderColor(background, "accent")}`,
                 tabTriggerClassName,
                 tab.className
@@ -1174,99 +1174,87 @@ function FeatureIconTabsContent({
           ))
         }
       ) }),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn(
-            "mx-auto mt-8 max-w-7xl rounded-2xl 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
+      /* @__PURE__ */ jsx("div", { className: cn("py-6 lg:py-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", content.badgeClassName),
+                    children: content.badge
+                  }
                 ),
-                children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5", children: [
-                    content.badge && /* @__PURE__ */ jsx(
-                      Badge,
-                      {
-                        variant: "outline",
-                        className: cn(
-                          "w-fit",
-                          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
                     ),
-                    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(
-                          "lg:text-lg",
-                          getTextColor(background, "muted"),
-                          content.descriptionClassName
-                        ),
-                        children: content.description
-                      }
-                    ) : /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        className: cn(
-                          "lg:text-lg",
-                          getTextColor(background, "muted"),
-                          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
-            );
-          }) })
-        }
-      )
+                    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(
+                      "lg:text-lg",
+                      getTextColor(background, "muted"),
+                      content.descriptionClassName
+                    ),
+                    children: content.description
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "lg:text-lg",
+                      getTextColor(background, "muted"),
+                      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,
@@ -1280,7 +1268,7 @@ function FeatureIconTabsContent({
     renderTabContentActions,
     renderTabContentImage
   ]);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     Section,
     {
       background,
@@ -1289,8 +1277,8 @@ function FeatureIconTabsContent({
       patternOpacity,
       patternClassName,
       className,
-      containerClassName: cn("mx-auto", containerClassName),
-      children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
         (badge || heading || description) && /* @__PURE__ */ jsxs(
           "div",
           {
@@ -1304,7 +1292,7 @@ function FeatureIconTabsContent({
                 "h1",
                 {
                   className: cn(
-                    "max-w-2xl text-3xl font-semibold md:text-4xl",
+                    "max-w-2xl text-3xl font-semibold md:text-4xl text-balance",
                     headingClassName
                   ),
                   children: heading
@@ -1313,24 +1301,18 @@ function FeatureIconTabsContent({
                 "div",
                 {
                   className: cn(
-                    "max-w-2xl text-3xl font-semibold md:text-4xl",
+                    "max-w-2xl text-3xl font-semibold md:text-4xl text-balance",
                     headingClassName
                   ),
                   children: heading
                 }
               )),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn(getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: cn(getTextColor(background, "muted"), descriptionClassName),
-                  children: description
-                }
-              ))
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-balance", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("text-balance", descriptionClassName), children: description }))
             ]
           }
         ),
         tabsContent
-      ]
+      ] })
     }
   );
 }