infinity-ui-elements 1.6.13 → 1.6.15

package/dist/index.js

@@ -2307,7 +2307,7 @@ const Radio = React__namespace.forwardRef(({ label, errorText, size = "medium",
 });
 Radio.displayName = "Radio";
 
-const textFieldVariants = classVarianceAuthority.cva("relative flex items-center gap-2 border rounded-medium transition-all font-display font-size-100 leading-100", {
+const textFieldVariants = classVarianceAuthority.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",
@@ -2926,15 +2926,16 @@ function AvatarCell({ name, initials, avatar, subtitle, color = "a1", className,
     return (jsxRuntime.jsxs("div", { className: cn("flex items-center gap-3", className), children: [avatar ? (jsxRuntime.jsx("img", { src: avatar, alt: name, className: "w-10 h-10 rounded-full object-cover" })) : (jsxRuntime.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() })), jsxRuntime.jsxs("div", { className: "flex flex-col", children: [jsxRuntime.jsx("div", { className: "text-body-medium-medium text-surface-ink-neutral-normal", children: name }), subtitle && (jsxRuntime.jsx("div", { className: "text-body-small-regular text-surface-ink-neutral-muted", children: subtitle }))] })] }));
 }
 
-const tabItemVariants = classVarianceAuthority.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 = classVarianceAuthority.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]`, {
     variants: {
         variant: {
             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: "",
@@ -2966,7 +2967,7 @@ const tabItemVariants = classVarianceAuthority.cva("inline-flex items-center jus
             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 -mb-[1.5px] z-10",
+            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",
         },
         // Borderless variant - selected
         {
@@ -2975,6 +2976,27 @@ const tabItemVariants = classVarianceAuthority.cva("inline-flex items-center jus
             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",
         },
+        // Typography by size and selection
+        {
+            size: ["small", "medium"],
+            isSelected: false,
+            class: "text-body-medium-medium",
+        },
+        {
+            size: ["small", "medium"],
+            isSelected: true,
+            class: "text-body-medium-semibold",
+        },
+        {
+            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"],
@@ -3016,14 +3038,14 @@ const Tabs = React__namespace.forwardRef(({ tabs, selectedTabId, defaultSelected
     };
     // Get the active tab content
     const activeTab = tabs.find((tab) => tab.id === activeTabId);
-    return (jsxRuntime.jsxs("div", { ref: ref, className: cn("w-full", className), ...props, children: [jsxRuntime.jsx("div", { role: "tablist", className: cn("inline-flex items-center", {
+    return (jsxRuntime.jsxs("div", { ref: ref, className: cn("w-full", className), ...props, children: [jsxRuntime.jsx("div", { role: "tablist", className: cn("inline-flex items-center gap-4", {
                     "w-full": isFullWidth,
                     "border-b border-b-[1.5px] border-surface-outline-neutral-muted": variant === "bordered",
                 }, tabListClassName), children: tabs.map((tab) => (jsxRuntime.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 && (jsxRuntime.jsx("div", { role: "tabpanel", className: cn("mt-4", contentClassName), "aria-labelledby": String(activeTabId), children: activeTab.content }))] }));
 });
 Tabs.displayName = "Tabs";
 
-const textAreaVariants = classVarianceAuthority.cva("relative flex flex-col border rounded-medium transition-all font-display font-size-100 leading-100", {
+const textAreaVariants = classVarianceAuthority.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",