infinity-ui-elements 1.6.11 → 1.6.13

package/dist/index.esm.js

@@ -2908,8 +2908,8 @@ function AvatarCell({ name, initials, avatar, subtitle, color = "a1", className,
 const tabItemVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 relative cursor-pointer", {
     variants: {
         variant: {
-            bordered: "border-b-2",
-            filled: "rounded-medium",
+            bordered: "border-b-[1.5px]",
+            borderless: "border-b-[1.5px]",
         },
         size: {
             small: "px-4 h-10 text-body-small-medium",
@@ -2929,9 +2929,9 @@ const tabItemVariants = cva("inline-flex items-center justify-center gap-2 white
         },
     },
     compoundVariants: [
-        // Bordered variant - not selected
+        // Bordered and borderless variants - not selected
         {
-            variant: "bordered",
+            variant: ["bordered", "borderless"],
             isSelected: false,
             isDisabled: false,
             class: `text-text-body-secondary 
@@ -2945,33 +2945,20 @@ const tabItemVariants = cva("inline-flex items-center justify-center gap-2 white
             variant: "bordered",
             isSelected: true,
             isDisabled: false,
-            class: "text-text-body-primary border-b-action-fill-primary-default text-action-ink-primary-normal hover:border-b-action-fill-primary-hover",
-        },
-        // Bordered variant - disabled
-        {
-            variant: "bordered",
-            isDisabled: true,
-            class: "text-text-body-disabled border-b-transparent",
-        },
-        // Filled variant - not selected
-        {
-            variant: "filled",
-            isSelected: false,
-            isDisabled: false,
-            class: "text-text-body-secondary hover:text-text-body-primary hover:bg-surface-layer-3",
+            class: "text-text-body-primary border-b-action-fill-primary-default text-action-ink-primary-normal hover:border-b-action-fill-primary-hover -mb-[1.5px] z-10",
         },
-        // Filled variant - selected
+        // Borderless variant - selected
         {
-            variant: "filled",
+            variant: "borderless",
             isSelected: true,
             isDisabled: false,
-            class: "text-text-body-primary bg-surface-layer-3",
+            class: "text-text-body-primary border-b-action-fill-primary-default text-action-ink-primary-normal hover:border-b-action-fill-primary-hover z-10",
         },
-        // Filled variant - disabled
+        // Bordered and borderless variants - disabled
         {
-            variant: "filled",
+            variant: ["bordered", "borderless"],
             isDisabled: true,
-            class: "text-text-body-disabled",
+            class: "text-text-body-disabled border-b-transparent",
         },
     ],
     defaultVariants: {
@@ -3011,7 +2998,6 @@ const Tabs = React.forwardRef(({ tabs, selectedTabId, defaultSelectedTabId, onTa
     return (jsxs("div", { ref: ref, className: cn("w-full", className), ...props, children: [jsx("div", { role: "tablist", className: cn("inline-flex items-center", {
                     "w-full": isFullWidth,
                     "border-b border-b-[1.5px] border-surface-outline-neutral-muted": variant === "bordered",
-                    "bg-surface-layer-2 rounded-medium p-1 gap-1": variant === "filled",
                 }, tabListClassName), children: tabs.map((tab) => (jsx(TabItem, { id: String(tab.id), leadingComponent: tab.leadingComponent, title: tab.title, trailingComponent: tab.trailingComponent, isSelected: tab.id === activeTabId, isDisabled: tab.isDisabled, variant: variant, size: size, isFullWidth: isFullWidth, onClick: () => !tab.isDisabled && handleTabClick(tab.id) }, tab.id))) }), renderContent && activeTab?.content && (jsx("div", { role: "tabpanel", className: cn("mt-4", contentClassName), "aria-labelledby": String(activeTabId), children: activeTab.content }))] }));
 });
 Tabs.displayName = "Tabs";