@agentero/design-system 0.0.2 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.0.2",
+	"version": "0.0.4",
 	"description": "A React component library built with Tailwind CSS v4 and Radix UI primitives",
 	"type": "module",
 	"license": "Apache-2.0",
@@ -30,8 +30,12 @@
 			"import": "./lib/index.js"
 		},
 		"./theme": "./theme/base.css",
+		"./mcp": "./mcp/server.mjs",
 		"./package.json": "./package.json"
 	},
+	"bin": {
+		"design-system-mcp": "./mcp/server.mjs"
+	},
 	"peerDependencies": {
 		"react": "^19.2.4",
 		"react-dom": "^19.2.4",

package/src/avatar/avatar.d.ts

@@ -185,6 +185,12 @@ type AvatarProps = ComponentPropsWithRef<typeof AvatarPrimitive.Root> & {
     src?: string;
     /** Content rendered when `src` is missing or fails to load. Typically user initials (e.g., "JD") or an icon. */
     fallback?: ReactNode;
+    /**
+     * When provided, deterministically maps the string (typically a user name) to a
+     * color from the palette, applying a light background, matching text color, and
+     * border color. Useful for distinguishing users in lists without profile photos.
+     */
+    colorize?: string;
     /**
      * Controls the avatar dimensions. Defaults to `'md'` (40px).
      * - `xs` (24px) — inline indicators, dense lists
@@ -225,5 +231,5 @@ type AvatarProps = ComponentPropsWithRef<typeof AvatarPrimitive.Root> & {
  * @example
  * <Avatar fallback="JD" size="lg" variant="square" />
  */
-export declare const Avatar: ({ alt, src, fallback, size, variant, ref, ...props }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Avatar: ({ alt, src, fallback, colorize, size, variant, ref, ...props }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/avatar/avatar.js

@@ -64,9 +64,13 @@ var s = i({
 				"[mask-size:contain]"
 			] },
 			pentagon: { root: [
-				"!border-none border-transparent",
+				"!border-none",
 				"[mask-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzMiIGhlaWdodD0iMzMiIHZpZXdCb3g9IjAgMCAzMyAzMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE0LjU2NTcgMC4yNTA5NzdDMTUuODM0OCAtMC4wODM2NTk0IDE3LjE2NTggLTAuMDgzNjU4NCAxOC40MzQ4IDAuMjUwOTc3QzE5Ljg5NDIgMC42MzU4OCAyMS4yMTMzIDEuNjMwODkgMjMuNjM0IDMuNDM3NUwyNy4yNDQ0IDYuMTMxODRDMjkuNjY3IDcuOTM5OCAzMC45OTMyIDguOTE5NzcgMzEuNzk4MSAxMC4yMjI3QzMyLjQ5NzcgMTEuMzU1IDMyLjkwNzYgMTIuNjQ5OCAzMi45ODk1IDEzLjk4NjNDMzMuMDgzNSAxNS41MjI3IDMyLjU3MjQgMTcuMTExOSAzMS42NDY3IDIwLjAzODFMMzAuMjY3OCAyNC4zOTc1QzI5LjM0MjUgMjcuMzIyNyAyOC44NDU4IDI4LjkxODIgMjcuODg4OSAzMC4xMDY0QzI3LjA1NjEgMzEuMTQwNiAyNS45ODA4IDMxLjk0MzIgMjQuNzYzIDMyLjQzODVDMjMuMzYxNSAzMy4wMDg0IDIxLjcyMzggMzMgMTguNzMxNyAzM0gxNC4yNjg4QzExLjI3NjcgMzMgOS42MzkwNCAzMy4wMDg0IDguMjM3NiAzMi40Mzg1QzcuMDE5NzUgMzEuOTQzMiA1Ljk0NDQ4IDMxLjE0MDYgNS4xMTE2MiAzMC4xMDY0QzQuMTU0NzIgMjguOTE4MiAzLjY1ODAyIDI3LjMyMjcgMi43MzI3MiAyNC4zOTc1TDEuMzUzODEgMjAuMDM4MUMwLjQyODE4NyAxNy4xMTE5IC0wLjA4Mjk0NiAxNS41MjI3IDAuMDExMDM5IDEzLjk4NjNDMC4wOTI5MDMgMTIuNjQ5OCAwLjUwMjg4MSAxMS4zNTUgMS4yMDI0NCAxMC4yMjI3QzIuMDA3NCA4LjkxOTc3IDMuMzMzNTggNy45Mzk4IDUuNzU2MTYgNi4xMzE4NEw5LjM2NjUxIDMuNDM3NUMxMS43ODcyIDEuNjMwODkgMTMuMTA2MyAwLjYzNTg4IDE0LjU2NTcgMC4yNTA5NzdaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K)]",
-				"[mask-size:contain] [mask-repeat:no-repeat] [mask-position:center]"
+				"[mask-size:contain] [mask-repeat:no-repeat] [mask-position:center]",
+				"after:content-[\"\"] after:absolute after:inset-0 after:pointer-events-none after:z-[1]",
+				"after:bg-[var(--avatar-border-color,var(--color-border-default-base-primary))]",
+				"after:[mask-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSItMC41IC0wLjUgMzQgMzQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE0LjU2NTcgMC4yNTA5NzdDMTUuODM0OCAtMC4wODM2NTk0IDE3LjE2NTggLTAuMDgzNjU4NCAxOC40MzQ4IDAuMjUwOTc3QzE5Ljg5NDIgMC42MzU4OCAyMS4yMTMzIDEuNjMwODkgMjMuNjM0IDMuNDM3NUwyNy4yNDQ0IDYuMTMxODRDMjkuNjY3IDcuOTM5OCAzMC45OTMyIDguOTE5NzcgMzEuNzk4MSAxMC4yMjI3QzMyLjQ5NzcgMTEuMzU1IDMyLjkwNzYgMTIuNjQ5OCAzMi45ODk1IDEzLjk4NjNDMzMuMDgzNSAxNS41MjI3IDMyLjU3MjQgMTcuMTExOSAzMS42NDY3IDIwLjAzODFMMzAuMjY3OCAyNC4zOTc1QzI5LjM0MjUgMjcuMzIyNyAyOC44NDU4IDI4LjkxODIgMjcuODg4OSAzMC4xMDY0QzI3LjA1NjEgMzEuMTQwNiAyNS45ODA4IDMxLjk0MzIgMjQuNzYzIDMyLjQzODVDMjMuMzYxNSAzMy4wMDg0IDIxLjcyMzggMzMgMTguNzMxNyAzM0gxNC4yNjg4QzExLjI3NjcgMzMgOS42MzkwNCAzMy4wMDg0IDguMjM3NiAzMi40Mzg1QzcuMDE5NzUgMzEuOTQzMiA1Ljk0NDQ4IDMxLjE0MDYgNS4xMTE2MiAzMC4xMDY0QzQuMTU0NzIgMjguOTE4MiAzLjY1ODAyIDI3LjMyMjcgMi43MzI3MiAyNC4zOTc1TDEuMzUzODEgMjAuMDM4MUMwLjQyODE4NyAxNy4xMTE5IC0wLjA4Mjk0NiAxNS41MjI3IDAuMDExMDM5IDEzLjk4NjNDMC4wOTI5MDMgMTIuNjQ5OCAwLjUwMjg4MSAxMS4zNTUgMS4yMDI0NCAxMC4yMjI3QzIuMDA3NCA4LjkxOTc3IDMuMzMzNTggNy45Mzk4IDUuNzU2MTYgNi4xMzE4NEw5LjM2NjUxIDMuNDM3NUMxMS43ODcyIDEuNjMwODkgMTMuMTA2MyAwLjYzNTg4IDE0LjU2NTcgMC4yNTA5NzdaIiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIvPjwvc3ZnPg==)]",
+				"after:[mask-size:100%_100%] after:[mask-repeat:no-repeat] after:[mask-position:center]"
 			] }
 		}
 	},
@@ -106,15 +110,73 @@ var s = i({
 		...t,
 		className: e(n.fallback(), t.className)
 	});
-}, p = ({ alt: e, src: t, fallback: n, size: r, variant: i, ref: s, ...c }) => /* @__PURE__ */ o(u, {
-	...c,
-	ref: s,
-	size: r,
-	variant: i,
-	children: [/* @__PURE__ */ a(d, {
-		alt: e,
-		src: t
-	}), /* @__PURE__ */ a(f, { children: n })]
-});
+}, p = ({ alt: e, src: t, fallback: n, colorize: r, size: i, variant: s, ref: c, ...l }) => {
+	let p = r ? g(r) : void 0;
+	return /* @__PURE__ */ o(u, {
+		...l,
+		ref: c,
+		size: i,
+		variant: s,
+		style: {
+			...p,
+			...l.style
+		},
+		children: [/* @__PURE__ */ a(d, {
+			alt: e,
+			src: t
+		}), /* @__PURE__ */ a(f, { children: n })]
+	});
+}, m = [
+	{
+		dark: "#434343",
+		light: "#e3e3e3"
+	},
+	{
+		dark: "#1e7b5f",
+		light: "#d6f5ec"
+	},
+	{
+		dark: "#054594",
+		light: "#cee3fd"
+	},
+	{
+		dark: "#4f0792",
+		light: "#e6cefd"
+	},
+	{
+		dark: "#8d0c40",
+		light: "#fbd0e1"
+	},
+	{
+		dark: "#954004",
+		light: "#fee1cd"
+	},
+	{
+		dark: "#821717",
+		light: "#f7d4d4"
+	},
+	{
+		dark: "#947005",
+		light: "#fdf1ce"
+	},
+	{
+		dark: "#0f8a2a",
+		light: "#d1fada"
+	}
+], h = (e) => {
+	let t = e.split("").reduce((e, t, n) => {
+		let r = 1;
+		for (let e = 0; e < n; e++) r *= 26;
+		return e + (t.charCodeAt(0) - 97 + 1) * r;
+	}, 0);
+	return m[(t < 0 ? -t : t) % m.length];
+}, g = (e) => {
+	let { dark: t, light: n } = h(e);
+	return {
+		color: t,
+		backgroundColor: n,
+		borderColor: `var(--avatar-border-color, ${n})`
+	};
+};
 //#endregion
 export { p as Avatar };