infinity-ui-elements 1.9.11 → 1.9.12

package/dist/index.esm.js

@@ -5224,11 +5224,12 @@ function AvatarCell({ name, initials, avatar, subtitle, color = "a1", className,
     return (jsxs("div", { className: cn("flex items-center gap-3", className), children: [avatar ? (jsx("img", { src: avatar, alt: name, className: "w-10 h-10 rounded-full object-cover" })) : (jsx("div", { className: cn("w-10 h-10 rounded-full flex items-center justify-center text-body-medium-medium", `bg-${color}`), children: initials || name.charAt(0).toUpperCase() })), jsxs("div", { className: "flex flex-col", children: [jsx("div", { className: "text-body-medium-medium text-surface-ink-neutral-normal", children: name }), subtitle && (jsx("div", { className: "text-body-small-regular text-surface-ink-neutral-muted", children: subtitle }))] })] }));
 }
 
-const tabItemVariants = cva(`inline-flex items-center justify-center gap-3 whitespace-nowrap transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 relative cursor-pointer -mb-[1.5px]`, {
+const tabItemVariants = cva(`inline-flex items-center justify-center gap-3 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-[1.5px]",
-            borderless: "border-b-[1.5px]",
+            bordered: "border-b-[1.5px] -mb-[1.5px]",
+            borderless: "border-b-[1.5px] -mb-[1.5px]",
+            segmented: "rounded-lg",
         },
         size: {
             small: "px-2 py-3 h-9",
@@ -5301,6 +5302,44 @@ const tabItemVariants = cva(`inline-flex items-center justify-center gap-3 white
             isDisabled: true,
             class: "text-text-body-disabled border-b-transparent",
         },
+        // Segmented variant - not selected
+        {
+            variant: "segmented",
+            isSelected: false,
+            isDisabled: false,
+            class: `text-action-ink-neutral-muted
+          hover:text-action-ink-neutral-subtle
+          hover:bg-action-fill-neutral-faded-hover`,
+        },
+        // Segmented variant - selected
+        {
+            variant: "segmented",
+            isSelected: true,
+            isDisabled: false,
+            class: "bg-action-fill-primary-faded text-action-ink-primary-subtle hover:text-action-ink-primary-normal",
+        },
+        // Segmented variant - disabled
+        {
+            variant: "segmented",
+            isDisabled: true,
+            class: "text-text-body-disabled bg-transparent",
+        },
+        // Segmented variant - size overrides (more compact)
+        {
+            variant: "segmented",
+            size: "small",
+            class: "px-3 py-1.5 h-8",
+        },
+        {
+            variant: "segmented",
+            size: "medium",
+            class: "px-4 py-2 h-9",
+        },
+        {
+            variant: "segmented",
+            size: "large",
+            class: "px-4 py-2.5 h-10",
+        },
     ],
     defaultVariants: {
         variant: "bordered",
@@ -5336,9 +5375,11 @@ const Tabs = React.forwardRef(({ tabs, selectedTabId, defaultSelectedTabId, onTa
     };
     // Get the active tab content
     const activeTab = tabs.find((tab) => tab.id === activeTabId);
-    return (jsxs("div", { ref: ref, className: cn("w-full", className), ...props, children: [jsx("div", { role: "tablist", className: cn("inline-flex items-center gap-4", {
+    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",
+                    "gap-4": variant === "bordered" || variant === "borderless",
+                    "border-b-[1.5px] border-surface-outline-neutral-muted": variant === "bordered",
+                    "gap-1 p-1 rounded-xl bg-surface-background-neutral-faded-default": variant === "segmented",
                 }, 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";