@atom-learning/components 6.6.0-beta.5 → 6.6.0

package/dist/index.cjs.js

@@ -1171,19 +1171,26 @@ var avatarRootStyles = [
 	"rounded-full",
 	"border-2",
 	"border-grey-200",
-	"bg-white",
+	"bg-(--bg-color)",
 	"overflow-hidden"
 ];
 var StyledDiv = styled("div", {
 	base: avatarRootStyles,
-	variants: { size: {
-		xs: ["size-6"],
-		sm: ["size-8"],
-		md: ["size-10"],
-		lg: ["size-12"],
-		xl: ["size-16"],
-		xxl: ["size-24"]
-	} }
+	variants: {
+		size: {
+			xs: ["size-6"],
+			sm: ["size-8"],
+			md: ["size-10"],
+			lg: ["size-12"],
+			xl: ["size-16"],
+			xxl: ["size-24"]
+		},
+		emphasis: {
+			bold: ["border-0", "[&>p]:text-white"],
+			subtle: ["border-0"],
+			white: []
+		}
+	}
 });
 var StyledButton$4 = styled("button", {
 	base: [
@@ -1200,14 +1207,21 @@ var StyledButton$4 = styled("button", {
 		"disabled:cursor-not-allowed",
 		"disabled:opacity-30"
 	],
-	variants: { size: {
-		xs: ["size-6"],
-		sm: ["size-8"],
-		md: ["size-10"],
-		lg: ["size-12"],
-		xl: ["size-16"],
-		xxl: ["size-24"]
-	} }
+	variants: {
+		size: {
+			xs: ["size-6"],
+			sm: ["size-8"],
+			md: ["size-10"],
+			lg: ["size-12"],
+			xl: ["size-16"],
+			xxl: ["size-24"]
+		},
+		emphasis: {
+			bold: ["border-0", "[&>p]:text-white"],
+			subtle: ["border-0"],
+			white: []
+		}
+	}
 });
 var AvatarRootProvider = ({ children, name, size }) => {
 	const value = react.useMemo(() => ({
@@ -1216,15 +1230,46 @@ var AvatarRootProvider = ({ children, name, size }) => {
 	}), [name, size]);
 	return /* @__PURE__ */ react.createElement(AvatarRootContext.Provider, { value }, children);
 };
-var AvatarRoot = ({ children, size = "lg", name, disabled = false, onClick }) => /* @__PURE__ */ react.createElement(AvatarRootProvider, {
-	name,
-	size
-}, onClick ? /* @__PURE__ */ react.createElement(StyledButton$4, {
-	size,
-	disabled,
-	onClick: disabled ? void 0 : onClick,
-	className: disabled ? "cursor-auto" : "cursor-pointer"
-}, children) : /* @__PURE__ */ react.createElement(StyledDiv, { size }, children));
+var DS_COLORS = [
+	"maroon",
+	"red",
+	"magenta",
+	"pink",
+	"purple",
+	"lapis",
+	"blue",
+	"cyan",
+	"teal",
+	"green",
+	"lime",
+	"yellow",
+	"orange"
+];
+var getBackgroundColor = ({ emphasis, name }) => {
+	if (emphasis === "white" || !name) return "white";
+	return `var(--color-${DS_COLORS[name.toLocaleUpperCase().charCodeAt(0) % DS_COLORS.length]}-${emphasis === "bold" ? 700 : 300})`;
+};
+var AvatarRoot = ({ children, size = "lg", name, emphasis = "white", disabled = false, onClick }) => {
+	const backgroundColor = getBackgroundColor({
+		emphasis,
+		name
+	});
+	return /* @__PURE__ */ react.createElement(AvatarRootProvider, {
+		name,
+		size
+	}, onClick ? /* @__PURE__ */ react.createElement(StyledButton$4, {
+		size,
+		style: { "--bg-color": backgroundColor },
+		disabled,
+		onClick: disabled ? void 0 : onClick,
+		className: (0, clsx.default)(disabled ? "cursor-auto" : "cursor-pointer"),
+		emphasis
+	}, children) : /* @__PURE__ */ react.createElement(StyledDiv, {
+		size,
+		style: { "--bg-color": backgroundColor },
+		emphasis
+	}, children));
+};
 var Avatar = Object.assign(AvatarRoot, {
 	Image: AvatarImage,
 	Initial: AvatarInitial,