infinity-ui-elements 1.6.12 → 1.6.14

package/dist/index.esm.js

@@ -2286,7 +2286,7 @@ const Radio = React.forwardRef(({ label, errorText, size = "medium", validationS
 });
 Radio.displayName = "Radio";
 
-const textFieldVariants = cva("relative flex items-center gap-2 border rounded-medium transition-all font-display font-size-100 leading-100", {
+const textFieldVariants = cva("relative flex items-center gap-2 border rounded-large transition-all font-display font-size-100 leading-100", {
     variants: {
         size: {
             small: "h-[28px] px-3 text-xs gap-2",
@@ -2905,15 +2905,16 @@ 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-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", {
+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 -mb-[1.5px]`, {
     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",
-            large: "px-6 h-12 text-body-large-medium",
+            small: "px-2 py-3 h-9",
+            medium: "px-3 py-4 h-11",
+            large: "px-3 py-4 h-12",
         },
         isSelected: {
             true: "",
@@ -2929,9 +2930,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 +2946,41 @@ 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",
+            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",
         },
-        // Bordered variant - disabled
+        // Borderless variant - selected
         {
-            variant: "bordered",
-            isDisabled: true,
-            class: "text-text-body-disabled border-b-transparent",
+            variant: "borderless",
+            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 z-10",
         },
-        // Filled variant - not selected
+        // Typography by size and selection
         {
-            variant: "filled",
+            size: ["small", "medium"],
             isSelected: false,
-            isDisabled: false,
-            class: "text-text-body-secondary hover:text-text-body-primary hover:bg-surface-layer-3",
+            class: "text-body-medium-medium",
         },
-        // Filled variant - selected
         {
-            variant: "filled",
+            size: ["small", "medium"],
             isSelected: true,
-            isDisabled: false,
-            class: "text-text-body-primary bg-surface-layer-3",
+            class: "text-body-medium-semibold",
         },
-        // Filled variant - disabled
         {
-            variant: "filled",
+            size: "large",
+            isSelected: false,
+            class: "text-body-large-medium",
+        },
+        {
+            size: "large",
+            isSelected: true,
+            class: "text-body-large-semibold",
+        },
+        // Bordered and borderless variants - disabled
+        {
+            variant: ["bordered", "borderless"],
             isDisabled: true,
-            class: "text-text-body-disabled",
+            class: "text-text-body-disabled border-b-transparent",
         },
     ],
     defaultVariants: {
@@ -3011,12 +3020,11 @@ 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";
 
-const textAreaVariants = cva("relative flex flex-col border rounded-medium transition-all font-display font-size-100 leading-100", {
+const textAreaVariants = cva("relative flex flex-col border rounded-large transition-all font-display font-size-100 leading-100", {
     variants: {
         size: {
             small: "p-3 min-h-[56px] text-xs gap-2",