infinity-ui-elements 1.7.0 → 1.7.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Avatar/Avatar.d.ts +7 -1
- package/dist/components/Avatar/Avatar.d.ts.map +1 -1
- package/dist/components/Avatar/Avatar.stories.d.ts +14 -0
- package/dist/components/Avatar/Avatar.stories.d.ts.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.esm.js +12 -2
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +12 -2
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -96,6 +96,13 @@ const Text = React__namespace.forwardRef(({ className, variant = "body", size =
|
|
|
96
96
|
});
|
|
97
97
|
Text.displayName = "Text";
|
|
98
98
|
|
|
99
|
+
const inverseColorClasses = {
|
|
100
|
+
a1: "bg-avatar-fill-a1-on-bg text-avatar-fill-a1-bg",
|
|
101
|
+
a2: "bg-avatar-fill-a2-on-bg text-avatar-fill-a2-bg",
|
|
102
|
+
a3: "bg-avatar-fill-a3-on-bg text-avatar-fill-a3-bg",
|
|
103
|
+
a4: "bg-avatar-fill-a4-on-bg text-avatar-fill-a4-bg",
|
|
104
|
+
a5: "bg-avatar-fill-a5-on-bg text-avatar-fill-a5-bg",
|
|
105
|
+
};
|
|
99
106
|
const avatarVariants = classVarianceAuthority.cva("inline-flex items-center justify-center font-medium text-center select-none", {
|
|
100
107
|
variants: {
|
|
101
108
|
color: {
|
|
@@ -134,7 +141,7 @@ const statusVariants = classVarianceAuthority.cva("absolute flex items-center ju
|
|
|
134
141
|
statusColor: "notice",
|
|
135
142
|
},
|
|
136
143
|
});
|
|
137
|
-
const Avatar = React__namespace.forwardRef(({ className, color, size, children, src, alt, showStatus = false, statusColor = "notice", statusIcon, label, trailingComponent, containerClassName, ...props }, ref) => {
|
|
144
|
+
const Avatar = React__namespace.forwardRef(({ className, appearance = "default", color, size, children, src, alt, showStatus = false, statusColor = "notice", statusIcon, label, trailingComponent, containerClassName, ...props }, ref) => {
|
|
138
145
|
const [imageError, setImageError] = React__namespace.useState(false);
|
|
139
146
|
const handleImageError = () => {
|
|
140
147
|
setImageError(true);
|
|
@@ -159,7 +166,10 @@ const Avatar = React__namespace.forwardRef(({ className, color, size, children,
|
|
|
159
166
|
return "medium";
|
|
160
167
|
}
|
|
161
168
|
};
|
|
162
|
-
const
|
|
169
|
+
const resolvedColor = color ?? "a1";
|
|
170
|
+
const avatarElement = (jsxRuntime.jsxs("div", { className: "relative inline-block", children: [jsxRuntime.jsx("div", { className: cn(avatarVariants({ color: resolvedColor, size }), appearance === "inverse"
|
|
171
|
+
? inverseColorClasses[resolvedColor]
|
|
172
|
+
: 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 })) }))] }));
|
|
163
173
|
// If no label or trailing component, return just the avatar
|
|
164
174
|
if (!label && !trailingComponent) {
|
|
165
175
|
return jsxRuntime.jsx("div", { ref: ref, children: avatarElement });
|