@atom-learning/components 6.6.0-beta.4 → 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,
@@ -2422,9 +2467,9 @@ var TreeIcon = ({ className, ...props }) => /* @__PURE__ */ react.createElement(
 //#region src/components/tree/TreeText.tsx
 var TreeText = (props) => /* @__PURE__ */ react.default.createElement(Text, {
 	as: "span",
+	...props,
 	className: (0, clsx.default)("py-0.5", "whitespace-nowrap", "overflow-x-hidden", "text-ellipsis", props.className),
-	size: "md",
-	...props
+	size: "md"
 });
 //#endregion
 //#region src/components/tree/TreeItemContent.tsx
@@ -5216,7 +5261,7 @@ var PaginationItems = () => {
 };
 //#endregion
 //#region src/components/pagination/Pagination.tsx
-var PaginationComponent = ({ colorScheme, onSelectedPageChange, selectedPage, visibleElementsCount = VisibleElementsAmount.LESS, pagesCount, indicatedPages = [], disabledPages = [], onItemHover = () => null, labels = {}, children, ...rest }) => {
+var PaginationComponent = ({ colorScheme, onSelectedPageChange, selectedPage, visibleElementsCount = VisibleElementsAmount.LESS, pagesCount, indicatedPages = [], disabledPages = [], onItemHover = () => null, labels = {}, children, className, ...rest }) => {
 	if (!pagesCount) return null;
 	const paginationProviderProps = {
 		onSelectedPageChange,
@@ -5234,8 +5279,8 @@ var PaginationComponent = ({ colorScheme, onSelectedPageChange, selectedPage, vi
 		...colorScheme,
 		asChild: true
 	}, /* @__PURE__ */ react.createElement("div", {
-		className: (0, clsx.default)("flex", "gap-1", rest.className),
-		...rest
+		...rest,
+		className: (0, clsx.default)("flex", "gap-1", className)
 	}, children || /* @__PURE__ */ react.createElement(PaginationItems, null))));
 };
 var Pagination = Object.assign(PaginationComponent, { Popover: PaginationPopover });