infinity-ui-elements 1.7.1 → 1.7.3

package/dist/index.js

@@ -96,6 +96,13 @@ const Text = React__namespace.forwardRef(({ className, variant = "body", size =
 });
 Text.displayName = "Text";
 
+const inverseColorClasses = {
+    a1: "bg-avatar-fill-a1-on-bg text-avatar-fill-a1-bg",
+    a2: "bg-avatar-fill-a2-on-bg text-avatar-fill-a2-bg",
+    a3: "bg-avatar-fill-a3-on-bg text-avatar-fill-a3-bg",
+    a4: "bg-avatar-fill-a4-on-bg text-avatar-fill-a4-bg",
+    a5: "bg-avatar-fill-a5-on-bg text-avatar-fill-a5-bg",
+};
 const avatarVariants = classVarianceAuthority.cva("inline-flex items-center justify-center font-medium text-center select-none", {
     variants: {
         color: {
@@ -108,6 +115,7 @@ const avatarVariants = classVarianceAuthority.cva("inline-flex items-center just
         size: {
             small: "h-[24px] w-[24px] text-body-medium-regular rounded-large",
             medium: "h-[32px] w-[32px] text-body-medium-regular rounded-xlarge",
+            xlarge: "h-[36px] w-[36px] text-body-medium-regular rounded-xlarge",
         },
     },
     defaultVariants: {
@@ -120,6 +128,7 @@ const statusVariants = classVarianceAuthority.cva("absolute flex items-center ju
         size: {
             small: "h-5 w-5 -bottom-0.5 -right-0.5",
             medium: "h-6 w-6 -bottom-1 -right-1",
+            xlarge: "h-6 w-6 -bottom-1 -right-1",
         },
         statusColor: {
             positive: "bg-action-fill-positive-default",
@@ -134,7 +143,7 @@ const statusVariants = classVarianceAuthority.cva("absolute flex items-center ju
         statusColor: "notice",
     },
 });
-const Avatar = React__namespace.forwardRef(({ className, color, size, children, src, alt, showStatus = false, statusColor = "notice", statusIcon, label, trailingComponent, containerClassName, ...props }, ref) => {
+const Avatar = React__namespace.forwardRef(({ className, appearance = "default", color, size, children, src, alt, showStatus = false, statusColor = "notice", statusIcon, label, trailingComponent, containerClassName, ...props }, ref) => {
     const [imageError, setImageError] = React__namespace.useState(false);
     const handleImageError = () => {
         setImageError(true);
@@ -159,7 +168,10 @@ const Avatar = React__namespace.forwardRef(({ className, color, size, children,
                 return "medium";
         }
     };
-    const avatarElement = (jsxRuntime.jsxs("div", { className: "relative inline-block", children: [jsxRuntime.jsx("div", { className: cn(avatarVariants({ color, size }), className), ...props, children: src && !imageError ? (jsxRuntime.jsx("img", { src: src, alt: alt || "Avatar", className: cn("h-full w-full object-cover", size === "small" ? "rounded-large" : "rounded-xlarge"), onError: handleImageError })) : (children) }), showStatus && (jsxRuntime.jsx("div", { className: cn(statusVariants({ size, statusColor })), children: statusIcon && (jsxRuntime.jsx("span", { className: cn("text-action-ink-on-primary-normal", getStatusIconSize()), children: statusIcon })) }))] }));
+    const resolvedColor = color ?? "a1";
+    const avatarElement = (jsxRuntime.jsxs("div", { className: "relative inline-block", children: [jsxRuntime.jsx("div", { className: cn(avatarVariants({ color: resolvedColor, size }), appearance === "inverse"
+                    ? inverseColorClasses[resolvedColor]
+                    : undefined, className), ...props, children: src && !imageError ? (jsxRuntime.jsx("img", { src: src, alt: alt || "Avatar", className: cn("h-full w-full object-cover", size === "small" ? "rounded-large" : "rounded-xlarge"), onError: handleImageError })) : (children) }), showStatus && (jsxRuntime.jsx("div", { className: cn(statusVariants({ size, statusColor })), children: statusIcon && (jsxRuntime.jsx("span", { className: cn("text-action-ink-on-primary-normal", getStatusIconSize()), children: statusIcon })) }))] }));
     // If no label or trailing component, return just the avatar
     if (!label && !trailingComponent) {
         return jsxRuntime.jsx("div", { ref: ref, children: avatarElement });
@@ -299,7 +311,7 @@ const buttonVariants = classVarianceAuthority.cva("items-center gap-3 justify-ce
     variants: {
         variant: {
             primary: "bg-action-fill-primary-default text-action-ink-on-primary-normal hover:bg-action-fill-primary-hover",
-            secondary: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+            secondary: "border",
             tertiary: "hover:bg-accent hover:text-accent-foreground",
         },
         color: {
@@ -313,8 +325,8 @@ const buttonVariants = classVarianceAuthority.cva("items-center gap-3 justify-ce
         size: {
             xsmall: "md:h-[28px] px-3 rounded-medium text-body-small-medium",
             small: "md:h-[32px] px-4 rounded-medium text-body-small-medium",
-            medium: "md:h-[36px] px-6 py-2 rounded-medium text-body-medium-medium",
-            large: "md:h-[44px] px-6 rounded-xlarge text-body-large-medium",
+            medium: "md:h-[36px] px-5 py-2 rounded-large text-body-medium-medium",
+            large: "md:h-[44px] px-6 rounded-large text-body-large-medium",
         },
         isIconOnly: {
             true: "aspect-square p-0",
@@ -400,7 +412,7 @@ const buttonVariants = classVarianceAuthority.cva("items-center gap-3 justify-ce
             variant: "secondary",
             color: "primary",
             class: `
-          border-action-outline-info-faded 
+          border-action-outline-primary-faded 
           text-action-ink-primary-normal 
           hover:border-action-outline-primary-faded-hover 
           hover:bg-action-fill-primary-faded-hover