@atom-learning/components 6.6.0-beta.5 → 6.7.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,
@@ -2858,26 +2903,36 @@ var StyledRoot$4 = styled("div", {
 		"disabled:opacity-30",
 		"disabled:pointer-events-none"
 	],
-	variants: { size: {
-		sm: [
-			"h-6",
-			"text-sm",
-			"leading-[1.53]",
-			"capsize-[0.4056]"
-		],
-		md: [
-			"h-8",
-			"text-sm",
-			"leading-[1.53]",
-			"capsize-[0.4056]"
-		],
-		lg: [
-			"h-10",
-			"text-md",
-			"leading-normal",
-			"capsize-[0.3864]"
-		]
-	} }
+	variants: {
+		size: {
+			sm: [
+				"h-6",
+				"text-sm",
+				"leading-[1.53]",
+				"capsize-[0.4056]"
+			],
+			md: [
+				"h-8",
+				"text-sm",
+				"leading-[1.53]",
+				"capsize-[0.4056]"
+			],
+			lg: [
+				"h-10",
+				"text-md",
+				"leading-normal",
+				"capsize-[0.3864]"
+			]
+		},
+		appearance: {
+			standard: [],
+			modern: [
+				"border-grey-900",
+				"text-grey-900",
+				"bg-grey-100"
+			]
+		}
+	}
 });
 var ChipRootContext = react.createContext({});
 var ChipRootProvider = ({ size, children }) => {
@@ -2966,29 +3021,45 @@ ChipDismissibleGroup.displayName = "ChipDismissibleGroup";
 //#endregion
 //#region src/components/chip-toggle-group/ChipToggleGroupItem.tsx
 var StyledChipToggleIcon = styled(Icon, { base: ["hidden"] });
-var StyledChipToggleGroupItem = styled(Chip, { base: [
-	"flex",
-	"not-disabled:cursor-pointer",
-	"not-disabled:data-[state=on]:hover:bg-white",
-	"not-disabled:data-[state=on]:hover:text-primary-1000",
-	"not-disabled:focus-visible:outline-none",
-	"not-disabled:focus-visible:relative",
-	"not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]",
-	"not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]",
-	"not-disabled:focus-visible:z-1",
-	"not-disabled:hover:bg-grey-200",
-	"not-disabled:hover:border-current",
-	"not-disabled:hover:text-grey-1000",
-	"data-[state=off]:bg-white",
-	"data-[state=off]:border-grey-600",
-	"data-[state=off]:text-grey-800",
-	"data-[state=on]:[&_svg]:block"
-] });
-var ChipToggleGroupItem = ({ size = "md", children, ...rest }) => {
+var StyledChipToggleGroupItem = styled(Chip, {
+	base: [
+		"flex",
+		"not-disabled:cursor-pointer",
+		"not-disabled:data-[state=on]:hover:bg-white",
+		"not-disabled:data-[state=on]:hover:text-primary-1000",
+		"not-disabled:focus-visible:outline-none",
+		"not-disabled:focus-visible:relative",
+		"not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]",
+		"not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]",
+		"not-disabled:focus-visible:z-1",
+		"not-disabled:hover:bg-grey-200",
+		"not-disabled:hover:border-current",
+		"not-disabled:hover:text-grey-1000",
+		"data-[state=off]:bg-white",
+		"data-[state=off]:border-grey-600",
+		"data-[state=off]:text-grey-800",
+		"data-[state=on]:[&_svg]:block"
+	],
+	variants: { appearance: {
+		standard: [],
+		modern: [
+			"data-[state=off]:bg-grey-100",
+			"data-[state=off]:border-transparent",
+			"data-[state=on]:border-grey-900",
+			"data-[state=on]:text-grey-900",
+			"data-[state=on]:bg-white",
+			"data-[state=on]:font-bold"
+		]
+	} }
+});
+var ChipToggleGroupItem = ({ size = "md", appearance, children, ...rest }) => {
 	return /* @__PURE__ */ react.createElement(_radix_ui_react_toggle_group.Item, {
 		...rest,
 		asChild: true
-	}, /* @__PURE__ */ react.createElement(StyledChipToggleGroupItem, { as: "button" }, /* @__PURE__ */ react.createElement(StyledChipToggleIcon, {
+	}, /* @__PURE__ */ react.createElement(StyledChipToggleGroupItem, {
+		as: "button",
+		appearance
+	}, /* @__PURE__ */ react.createElement(StyledChipToggleIcon, {
 		is: _atom_learning_icons.Ok,
 		size: size === "lg" ? "md" : "sm"
 	}), /* @__PURE__ */ react.createElement(Chip.Content, null, children)));