@underverse-ui/underverse 1.0.46 → 1.0.47

package/dist/index.d.cts

@@ -593,11 +593,15 @@ interface TabsProps {
     tabs: Tab[];
     defaultValue?: string;
     className?: string;
+    contentClassName?: string;
     variant?: "default" | "pills" | "underline" | "card" | "underline-card";
     size?: "sm" | "md" | "lg";
     orientation?: "horizontal" | "vertical";
     onTabChange?: (value: string) => void;
     stretch?: boolean;
+    noContentCard?: boolean;
+    noContentPadding?: boolean;
+    animateContent?: boolean;
 }
 declare const Tabs: React$1.FC<TabsProps>;
 interface SimpleTabsProps {

package/dist/index.d.ts

@@ -593,11 +593,15 @@ interface TabsProps {
     tabs: Tab[];
     defaultValue?: string;
     className?: string;
+    contentClassName?: string;
     variant?: "default" | "pills" | "underline" | "card" | "underline-card";
     size?: "sm" | "md" | "lg";
     orientation?: "horizontal" | "vertical";
     onTabChange?: (value: string) => void;
     stretch?: boolean;
+    noContentCard?: boolean;
+    noContentPadding?: boolean;
+    animateContent?: boolean;
 }
 declare const Tabs: React$1.FC<TabsProps>;
 interface SimpleTabsProps {

package/dist/index.js

@@ -4886,15 +4886,18 @@ import { jsx as jsx23, jsxs as jsxs19 } from "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 = {
@@ -4933,11 +4936,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({});
@@ -4952,8 +4959,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({
@@ -4964,19 +4971,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__ */ jsxs19("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__ */ jsxs19("div", { className: cn("w-full", orientation === "vertical" && "flex items-start gap-6"), children: [
     /* @__PURE__ */ jsxs19("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__ */ jsxs19(
           "button",
           {
@@ -5004,9 +5021,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;
@@ -5042,17 +5059,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__ */ jsx23("div", { className: "animate-fade-in", children: activeTab?.content }, activeTab?.value) : activeTab?.content
       }
     )
   ] });
@@ -5064,7 +5074,7 @@ var PillTabs = ({ contained = true, ...props }) => {
   return /* @__PURE__ */ jsx23(Tabs, { ...props, variant: "pills", className: cn(contained && "max-w-fit", props.className) });
 };
 var VerticalTabs = ({ sidebarWidth = "w-48", className, ...props }) => {
-  return /* @__PURE__ */ jsx23("div", { className: cn("flex gap-6", className), children: /* @__PURE__ */ jsx23("div", { className: cn(sidebarWidth, "shrink-0"), children: /* @__PURE__ */ jsx23(Tabs, { ...props, orientation: "vertical", variant: "card", className: "w-full" }) }) });
+  return /* @__PURE__ */ jsx23("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx23(Tabs, { ...props, orientation: "vertical", variant: "card", className: sidebarWidth }) });
 };
 
 // src/components/DropdownMenu.tsx