@underverse-ui/underverse 1.0.46 → 1.0.47

package/api-reference.json

@@ -1,6 +1,6 @@
 {
   "package": "@underverse-ui/underverse",
-  "version": "1.0.46",
+  "version": "1.0.47",
   "sourceEntry": "src/index.ts",
   "totalExports": 238,
   "exports": [

package/dist/index.cjs

@@ -5075,15 +5075,18 @@ var import_jsx_runtime23 = require("react/jsx-runtime");
 var sizeStyles6 = {
   sm: {
     tab: "py-1.5 px-3 text-xs",
-    content: "mt-3 p-3"
+    contentGap: "mt-3",
+    contentPadding: "p-3"
   },
   md: {
     tab: "py-2.5 px-4 text-sm",
-    content: "mt-4 p-4"
+    contentGap: "mt-4",
+    contentPadding: "p-4"
   },
   lg: {
     tab: "py-3 px-6 text-base",
-    content: "mt-6 p-6"
+    contentGap: "mt-6",
+    contentPadding: "p-6"
   }
 };
 var variantStyles5 = {
@@ -5122,11 +5125,15 @@ var Tabs = ({
   tabs,
   defaultValue,
   className,
+  contentClassName,
   variant = "default",
   size = "md",
   orientation = "horizontal",
   onTabChange,
-  stretch = false
+  stretch = false,
+  noContentCard = false,
+  noContentPadding = false,
+  animateContent = true
 }) => {
   const [active, setActive] = React18.useState(defaultValue || tabs[0]?.value);
   const [underlineStyle, setUnderlineStyle] = React18.useState({});
@@ -5141,8 +5148,8 @@ var Tabs = ({
   };
   React18.useEffect(() => {
     if (variant === "underline" && orientation === "horizontal") {
-      const activeIndex = tabs.findIndex((tab) => tab.value === active);
-      const activeTab2 = tabRefs.current[activeIndex];
+      const activeIndex2 = tabs.findIndex((tab) => tab.value === active);
+      const activeTab2 = tabRefs.current[activeIndex2];
       if (activeTab2) {
         const { offsetLeft, offsetWidth } = activeTab2;
         setUnderlineStyle({
@@ -5153,19 +5160,29 @@ var Tabs = ({
     }
   }, [active, variant, orientation, tabs]);
   const containerClasses = cn(
-    "w-full",
-    orientation === "horizontal" ? "flex space-x-1 overflow-x-auto" : "flex flex-col space-y-1",
+    "relative",
+    orientation === "horizontal" ? "w-full flex space-x-1 overflow-x-auto" : "flex flex-col space-y-1 shrink-0",
     variantStyles5[variant].container,
     className
   );
-  const activeTab = tabs.find((tab) => tab.value === active);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: cn("w-full", orientation === "vertical" && "flex gap-6"), children: [
+  const activeIndex = tabs.findIndex((tab) => tab.value === active);
+  const activeTab = activeIndex >= 0 ? tabs[activeIndex] : tabs[0];
+  const panelId = `${baseId}-panel-${activeIndex >= 0 ? activeIndex : 0}`;
+  const tabId = `${baseId}-tab-${activeIndex >= 0 ? activeIndex : 0}`;
+  const contentWrapperClasses = cn(
+    orientation === "horizontal" && sizeStyles6[size].contentGap,
+    orientation === "vertical" && "flex-1 min-w-0",
+    !noContentPadding && sizeStyles6[size].contentPadding,
+    !noContentCard ? "bg-card rounded-2xl md:rounded-3xl border border-border/60 shadow-sm text-card-foreground backdrop-blur-sm" : "text-foreground",
+    contentClassName
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: cn("w-full", orientation === "vertical" && "flex items-start gap-6"), children: [
     /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: containerClasses, role: "tablist", "aria-orientation": orientation, children: [
       tabs.map((tab, index) => {
         const isActive = active === tab.value;
         const Icon = tab.icon;
-        const tabId = `${baseId}-tab-${index}`;
-        const panelId = `${baseId}-panel-${index}`;
+        const tabId2 = `${baseId}-tab-${index}`;
+        const panelId2 = `${baseId}-panel-${index}`;
         return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
           "button",
           {
@@ -5193,9 +5210,9 @@ var Tabs = ({
               stretch && orientation === "horizontal" && "flex-1 justify-center"
             ),
             role: "tab",
-            id: tabId,
+            id: tabId2,
             "aria-selected": isActive,
-            "aria-controls": panelId,
+            "aria-controls": panelId2,
             tabIndex: isActive ? 0 : -1,
             onKeyDown: (e) => {
               const count = tabs.length;
@@ -5231,17 +5248,10 @@ var Tabs = ({
       "div",
       {
         role: "tabpanel",
-        id: `${baseId}-panel-${tabs.findIndex((t) => t.value === active)}`,
-        "aria-labelledby": `${baseId}-tab-${tabs.findIndex((t) => t.value === active)}`,
-        className: cn(
-          "bg-card rounded-2xl md:rounded-3xl border border-border/60 shadow-sm text-card-foreground transition-all duration-200",
-          "backdrop-blur-sm",
-          "max-md:bg-transparent max-md:border-0 max-md:shadow-none max-md:rounded-none max-md:backdrop-blur-none",
-          sizeStyles6[size].content,
-          orientation === "vertical" && "flex-1"
-        ),
-        tabIndex: 0,
-        children: activeTab?.content
+        id: panelId,
+        "aria-labelledby": tabId,
+        className: cn("transition-all duration-200", contentWrapperClasses),
+        children: animateContent ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "animate-fade-in", children: activeTab?.content }, activeTab?.value) : activeTab?.content
       }
     )
   ] });
@@ -5253,7 +5263,7 @@ var PillTabs = ({ contained = true, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Tabs, { ...props, variant: "pills", className: cn(contained && "max-w-fit", props.className) });
 };
 var VerticalTabs = ({ sidebarWidth = "w-48", className, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cn("flex gap-6", className), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cn(sidebarWidth, "shrink-0"), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Tabs, { ...props, orientation: "vertical", variant: "card", className: "w-full" }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cn("w-full", className), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Tabs, { ...props, orientation: "vertical", variant: "card", className: sidebarWidth }) });
 };
 
 // src/components/DropdownMenu.tsx