@a-type/ui 2.1.14 → 2.1.15

package/dist/cjs/components/avatar/Avatar.d.ts

@@ -1,9 +1,10 @@
-import { CSSProperties } from 'react';
+import { CSSProperties, HTMLProps } from 'react';
 export interface AvatarProps {
     className?: string;
     popIn?: boolean;
     style?: CSSProperties;
     imageSrc?: string | null;
     name?: string;
+    crossOrigin?: HTMLProps<HTMLImageElement>['crossOrigin'];
 }
-export declare function Avatar({ className, popIn, imageSrc, name, ...rest }: AvatarProps): import("react/jsx-runtime.js").JSX.Element;
+export declare function Avatar({ className, popIn, imageSrc, name, crossOrigin, ...rest }: AvatarProps): import("react/jsx-runtime.js").JSX.Element;

package/dist/cjs/components/avatar/Avatar.js

@@ -18,16 +18,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Avatar = Avatar;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = require("react");
 const index_js_1 = require("../icon/index.js");
 function Avatar(_a) {
-    var { className, popIn = false, imageSrc, name } = _a, rest = __rest(_a, ["className", "popIn", "imageSrc", "name"]);
+    var { className, popIn = false, imageSrc, name, crossOrigin } = _a, rest = __rest(_a, ["className", "popIn", "imageSrc", "name", "crossOrigin"]);
     const empty = !name && !imageSrc;
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ "data-pop": popIn, className: (0, clsx_1.default)('layer-components:flex layer-components:items-center layer-components:justify-center layer-components:rounded-lg layer-components:border-default layer-components:overflow-hidden layer-components:w-24px layer-components:aspect-1 layer-components:select-none layer-components:relative layer-components:bg-white layer-components:flex-shrink-0', popIn &&
-            'layer-variants:animate-pop-in-from-half layer-variants:animate-ease-springy layer-variants:animate-duration-200', empty && 'layer-components(border-dashed bg-gray-light)', className) }, rest, { children: [!empty && (0, jsx_runtime_1.jsx)(AvatarContent, { name: name, imageSrc: imageSrc }), empty && (0, jsx_runtime_1.jsx)(index_js_1.Icon, { name: "profile" })] })));
+            'layer-variants:animate-pop-in-from-half layer-variants:animate-ease-springy layer-variants:animate-duration-200', empty && 'layer-components(border-dashed bg-gray-light)', className) }, rest, { children: [!empty && ((0, jsx_runtime_1.jsx)(AvatarContent, { name: name, imageSrc: imageSrc, crossOrigin: crossOrigin })), empty && (0, jsx_runtime_1.jsx)(index_js_1.Icon, { name: "profile" })] })));
 }
-function AvatarContent({ name, imageSrc, }) {
-    if (imageSrc) {
-        return ((0, jsx_runtime_1.jsx)("img", { className: "w-full h-full object-cover", referrerPolicy: "no-referrer", crossOrigin: "anonymous", src: imageSrc, alt: `${name !== null && name !== void 0 ? name : 'user'}'s profile picture` }));
+function AvatarContent({ name, imageSrc, crossOrigin = 'anonymous', }) {
+    const [fallback, setFallback] = (0, react_1.useState)(false);
+    const triggerFallback = () => {
+        setFallback(true);
+    };
+    if (imageSrc && !fallback) {
+        return ((0, jsx_runtime_1.jsx)("img", { className: "w-full h-full object-cover", referrerPolicy: "no-referrer", src: imageSrc, alt: `${name !== null && name !== void 0 ? name : 'user'}'s profile picture`, crossOrigin: crossOrigin, onError: triggerFallback }));
     }
     return ((0, jsx_runtime_1.jsx)("div", { className: "color-black items-center justify-center flex text-sm font-bold", children: (name === null || name === void 0 ? void 0 : name.charAt(0)) || '?' }));
 }

package/dist/cjs/components/avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../../src/components/avatar/Avatar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAYA,wBAwBC;;AApCD,gDAA8B;AAE9B,+CAAwC;AAUxC,SAAgB,MAAM,CAAC,EAMT;QANS,EACtB,SAAS,EACT,KAAK,GAAG,KAAK,EACb,QAAQ,EACR,IAAI,OAES,EADV,IAAI,cALe,0CAMtB,CADO;IAEP,MAAM,KAAK,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC;IACjC,OAAO,CACN,2DACW,KAAK,EACf,SAAS,EAAE,IAAA,cAAU,EACpB,2JAA2J,EAC3J,KAAK;YACJ,qFAAqF,EACtF,KAAK,IAAI,+CAA+C,EACxD,SAAS,CACT,IACG,IAAI,eAEP,CAAC,KAAK,IAAI,uBAAC,aAAa,IAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,GAAI,EAC3D,KAAK,IAAI,uBAAC,eAAI,IAAC,IAAI,EAAC,SAAS,GAAG,KAC5B,CACN,CAAC;AACH,CAAC;AAED,SAAS,aAAa,CAAC,EACtB,IAAI,EACJ,QAAQ,GAIR;IACA,IAAI,QAAQ,EAAE,CAAC;QACd,OAAO,CACN,gCACC,SAAS,EAAC,4BAA4B,EACtC,cAAc,EAAC,aAAa,EAC5B,WAAW,EAAC,WAAW,EACvB,GAAG,EAAE,QAAQ,EACb,GAAG,EAAE,GAAG,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,MAAM,oBAAoB,GACzC,CACF,CAAC;IACH,CAAC;IACD,OAAO,CACN,gCAAK,SAAS,EAAC,gEAAgE,YAC7E,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,CAAC,CAAC,CAAC,KAAI,GAAG,GAClB,CACN,CAAC;AACH,CAAC"}
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../../src/components/avatar/Avatar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAaA,wBA+BC;;AA5CD,gDAA8B;AAC9B,iCAA2D;AAC3D,+CAAwC;AAWxC,SAAgB,MAAM,CAAC,EAOT;QAPS,EACtB,SAAS,EACT,KAAK,GAAG,KAAK,EACb,QAAQ,EACR,IAAI,EACJ,WAAW,OAEE,EADV,IAAI,cANe,yDAOtB,CADO;IAEP,MAAM,KAAK,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC;IACjC,OAAO,CACN,2DACW,KAAK,EACf,SAAS,EAAE,IAAA,cAAU,EACpB,2JAA2J,EAC3J,KAAK;YACJ,qFAAqF,EACtF,KAAK,IAAI,+CAA+C,EACxD,SAAS,CACT,IACG,IAAI,eAEP,CAAC,KAAK,IAAI,CACV,uBAAC,aAAa,IACb,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,GACvB,CACF,EACA,KAAK,IAAI,uBAAC,eAAI,IAAC,IAAI,EAAC,SAAS,GAAG,KAC5B,CACN,CAAC;AACH,CAAC;AAED,SAAS,aAAa,CAAC,EACtB,IAAI,EACJ,QAAQ,EACR,WAAW,GAAG,WAAW,GAKzB;IACA,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAChD,MAAM,eAAe,GAAG,GAAG,EAAE;QAC5B,WAAW,CAAC,IAAI,CAAC,CAAC;IACnB,CAAC,CAAC;IACF,IAAI,QAAQ,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC3B,OAAO,CACN,gCACC,SAAS,EAAC,4BAA4B,EACtC,cAAc,EAAC,aAAa,EAC5B,GAAG,EAAE,QAAQ,EACb,GAAG,EAAE,GAAG,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,MAAM,oBAAoB,EAC1C,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,eAAe,GACvB,CACF,CAAC;IACH,CAAC;IACD,OAAO,CACN,gCAAK,SAAS,EAAC,gEAAgE,YAC7E,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,CAAC,CAAC,CAAC,KAAI,GAAG,GAClB,CACN,CAAC;AACH,CAAC"}

package/dist/esm/components/avatar/Avatar.d.ts

@@ -1,9 +1,10 @@
-import { CSSProperties } from 'react';
+import { CSSProperties, HTMLProps } from 'react';
 export interface AvatarProps {
     className?: string;
     popIn?: boolean;
     style?: CSSProperties;
     imageSrc?: string | null;
     name?: string;
+    crossOrigin?: HTMLProps<HTMLImageElement>['crossOrigin'];
 }
-export declare function Avatar({ className, popIn, imageSrc, name, ...rest }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+export declare function Avatar({ className, popIn, imageSrc, name, crossOrigin, ...rest }: AvatarProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/avatar/Avatar.js

@@ -12,16 +12,21 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'clsx';
+import { useState } from 'react';
 import { Icon } from '../icon/index.js';
 export function Avatar(_a) {
-    var { className, popIn = false, imageSrc, name } = _a, rest = __rest(_a, ["className", "popIn", "imageSrc", "name"]);
+    var { className, popIn = false, imageSrc, name, crossOrigin } = _a, rest = __rest(_a, ["className", "popIn", "imageSrc", "name", "crossOrigin"]);
     const empty = !name && !imageSrc;
     return (_jsxs("div", Object.assign({ "data-pop": popIn, className: classNames('layer-components:flex layer-components:items-center layer-components:justify-center layer-components:rounded-lg layer-components:border-default layer-components:overflow-hidden layer-components:w-24px layer-components:aspect-1 layer-components:select-none layer-components:relative layer-components:bg-white layer-components:flex-shrink-0', popIn &&
-            'layer-variants:animate-pop-in-from-half layer-variants:animate-ease-springy layer-variants:animate-duration-200', empty && 'layer-components(border-dashed bg-gray-light)', className) }, rest, { children: [!empty && _jsx(AvatarContent, { name: name, imageSrc: imageSrc }), empty && _jsx(Icon, { name: "profile" })] })));
+            'layer-variants:animate-pop-in-from-half layer-variants:animate-ease-springy layer-variants:animate-duration-200', empty && 'layer-components(border-dashed bg-gray-light)', className) }, rest, { children: [!empty && (_jsx(AvatarContent, { name: name, imageSrc: imageSrc, crossOrigin: crossOrigin })), empty && _jsx(Icon, { name: "profile" })] })));
 }
-function AvatarContent({ name, imageSrc, }) {
-    if (imageSrc) {
-        return (_jsx("img", { className: "w-full h-full object-cover", referrerPolicy: "no-referrer", crossOrigin: "anonymous", src: imageSrc, alt: `${name !== null && name !== void 0 ? name : 'user'}'s profile picture` }));
+function AvatarContent({ name, imageSrc, crossOrigin = 'anonymous', }) {
+    const [fallback, setFallback] = useState(false);
+    const triggerFallback = () => {
+        setFallback(true);
+    };
+    if (imageSrc && !fallback) {
+        return (_jsx("img", { className: "w-full h-full object-cover", referrerPolicy: "no-referrer", src: imageSrc, alt: `${name !== null && name !== void 0 ? name : 'user'}'s profile picture`, crossOrigin: crossOrigin, onError: triggerFallback }));
     }
     return (_jsx("div", { className: "color-black items-center justify-center flex text-sm font-bold", children: (name === null || name === void 0 ? void 0 : name.charAt(0)) || '?' }));
 }

package/dist/esm/components/avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../../src/components/avatar/Avatar.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,UAAU,MAAM,MAAM,CAAC;AAE9B,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAUxC,MAAM,UAAU,MAAM,CAAC,EAMT;QANS,EACtB,SAAS,EACT,KAAK,GAAG,KAAK,EACb,QAAQ,EACR,IAAI,OAES,EADV,IAAI,cALe,0CAMtB,CADO;IAEP,MAAM,KAAK,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC;IACjC,OAAO,CACN,yCACW,KAAK,EACf,SAAS,EAAE,UAAU,CACpB,2JAA2J,EAC3J,KAAK;YACJ,qFAAqF,EACtF,KAAK,IAAI,+CAA+C,EACxD,SAAS,CACT,IACG,IAAI,eAEP,CAAC,KAAK,IAAI,KAAC,aAAa,IAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,GAAI,EAC3D,KAAK,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,SAAS,GAAG,KAC5B,CACN,CAAC;AACH,CAAC;AAED,SAAS,aAAa,CAAC,EACtB,IAAI,EACJ,QAAQ,GAIR;IACA,IAAI,QAAQ,EAAE,CAAC;QACd,OAAO,CACN,cACC,SAAS,EAAC,4BAA4B,EACtC,cAAc,EAAC,aAAa,EAC5B,WAAW,EAAC,WAAW,EACvB,GAAG,EAAE,QAAQ,EACb,GAAG,EAAE,GAAG,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,MAAM,oBAAoB,GACzC,CACF,CAAC;IACH,CAAC;IACD,OAAO,CACN,cAAK,SAAS,EAAC,gEAAgE,YAC7E,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,CAAC,CAAC,CAAC,KAAI,GAAG,GAClB,CACN,CAAC;AACH,CAAC"}
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../../src/components/avatar/Avatar.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,UAAU,MAAM,MAAM,CAAC;AAC9B,OAAO,EAA4B,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAWxC,MAAM,UAAU,MAAM,CAAC,EAOT;QAPS,EACtB,SAAS,EACT,KAAK,GAAG,KAAK,EACb,QAAQ,EACR,IAAI,EACJ,WAAW,OAEE,EADV,IAAI,cANe,yDAOtB,CADO;IAEP,MAAM,KAAK,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC;IACjC,OAAO,CACN,yCACW,KAAK,EACf,SAAS,EAAE,UAAU,CACpB,2JAA2J,EAC3J,KAAK;YACJ,qFAAqF,EACtF,KAAK,IAAI,+CAA+C,EACxD,SAAS,CACT,IACG,IAAI,eAEP,CAAC,KAAK,IAAI,CACV,KAAC,aAAa,IACb,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,GACvB,CACF,EACA,KAAK,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,SAAS,GAAG,KAC5B,CACN,CAAC;AACH,CAAC;AAED,SAAS,aAAa,CAAC,EACtB,IAAI,EACJ,QAAQ,EACR,WAAW,GAAG,WAAW,GAKzB;IACA,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,eAAe,GAAG,GAAG,EAAE;QAC5B,WAAW,CAAC,IAAI,CAAC,CAAC;IACnB,CAAC,CAAC;IACF,IAAI,QAAQ,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC3B,OAAO,CACN,cACC,SAAS,EAAC,4BAA4B,EACtC,cAAc,EAAC,aAAa,EAC5B,GAAG,EAAE,QAAQ,EACb,GAAG,EAAE,GAAG,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,MAAM,oBAAoB,EAC1C,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,eAAe,GACvB,CACF,CAAC;IACH,CAAC;IACD,OAAO,CACN,cAAK,SAAS,EAAC,gEAAgE,YAC7E,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,CAAC,CAAC,CAAC,KAAI,GAAG,GAClB,CACN,CAAC;AACH,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "2.1.14",
+  "version": "2.1.15",
   "type": "module",
   "files": [
     "/dist",

package/src/components/avatar/Avatar.tsx

@@ -1,5 +1,5 @@
 import classNames from 'clsx';
-import { CSSProperties } from 'react';
+import { CSSProperties, HTMLProps, useState } from 'react';
 import { Icon } from '../icon/index.js';
 
 export interface AvatarProps {
@@ -8,6 +8,7 @@ export interface AvatarProps {
 	style?: CSSProperties;
 	imageSrc?: string | null;
 	name?: string;
+	crossOrigin?: HTMLProps<HTMLImageElement>['crossOrigin'];
 }
 
 export function Avatar({
@@ -15,6 +16,7 @@ export function Avatar({
 	popIn = false,
 	imageSrc,
 	name,
+	crossOrigin,
 	...rest
 }: AvatarProps) {
 	const empty = !name && !imageSrc;
@@ -30,7 +32,13 @@ export function Avatar({
 			)}
 			{...rest}
 		>
-			{!empty && <AvatarContent name={name} imageSrc={imageSrc} />}
+			{!empty && (
+				<AvatarContent
+					name={name}
+					imageSrc={imageSrc}
+					crossOrigin={crossOrigin}
+				/>
+			)}
 			{empty && <Icon name="profile" />}
 		</div>
 	);
@@ -39,18 +47,25 @@ export function Avatar({
 function AvatarContent({
 	name,
 	imageSrc,
+	crossOrigin = 'anonymous',
 }: {
 	name?: string;
 	imageSrc?: string | null;
+	crossOrigin?: HTMLProps<HTMLImageElement>['crossOrigin'];
 }) {
-	if (imageSrc) {
+	const [fallback, setFallback] = useState(false);
+	const triggerFallback = () => {
+		setFallback(true);
+	};
+	if (imageSrc && !fallback) {
 		return (
 			<img
 				className="w-full h-full object-cover"
 				referrerPolicy="no-referrer"
-				crossOrigin="anonymous"
 				src={imageSrc}
 				alt={`${name ?? 'user'}'s profile picture`}
+				crossOrigin={crossOrigin}
+				onError={triggerFallback}
 			/>
 		);
 	}