@agentero/design-system 0.20.2 → 0.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.20.2",
+	"version": "0.21.0",
 	"description": "A React component library built with Tailwind CSS v4 and Radix UI primitives",
 	"type": "module",
 	"license": "Apache-2.0",
@@ -33,6 +33,10 @@
 			"types": "./src/avatar/index.d.ts",
 			"import": "./src/avatar/index.js"
 		},
+		"./avatar-group": {
+			"types": "./src/avatar-group/index.d.ts",
+			"import": "./src/avatar-group/index.js"
+		},
 		"./button": {
 			"types": "./src/button/index.d.ts",
 			"import": "./src/button/index.js"

package/src/avatar-group/avatar-group.d.ts

@@ -0,0 +1,117 @@
+import { ComponentProps, ComponentPropsWithRef, ReactNode } from 'react';
+import { Avatar } from '../avatar';
+type AvatarSize = ComponentProps<typeof Avatar>['size'];
+type AvatarVariant = ComponentProps<typeof Avatar>['variant'];
+export declare const avatarGroupRecipe: import('tailwind-variants').TVReturnType<{
+    size: {
+        xs: {
+            item: string;
+        };
+        sm: {
+            item: string;
+        };
+        md: {
+            item: string;
+        };
+        lg: {
+            item: string;
+        };
+        xl: {
+            item: string;
+        };
+        '2xl': {
+            item: string;
+        };
+        '3xl': {
+            item: string;
+        };
+        '4xl': {
+            item: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+}, undefined, {
+    size: {
+        xs: {
+            item: string;
+        };
+        sm: {
+            item: string;
+        };
+        md: {
+            item: string;
+        };
+        lg: {
+            item: string;
+        };
+        xl: {
+            item: string;
+        };
+        '2xl': {
+            item: string;
+        };
+        '3xl': {
+            item: string;
+        };
+        '4xl': {
+            item: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+}, import('tailwind-variants').TVReturnType<{
+    size: {
+        xs: {
+            item: string;
+        };
+        sm: {
+            item: string;
+        };
+        md: {
+            item: string;
+        };
+        lg: {
+            item: string;
+        };
+        xl: {
+            item: string;
+        };
+        '2xl': {
+            item: string;
+        };
+        '3xl': {
+            item: string;
+        };
+        '4xl': {
+            item: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+}, undefined, unknown, unknown, undefined>>;
+export type AvatarGroupProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & {
+    children?: ReactNode;
+    max?: number;
+    size?: AvatarSize;
+    /** Shape applied uniformly to every avatar and the `+N` bubble. Defaults to `circle`. */
+    variant?: AvatarVariant;
+};
+/**
+ * Stacks `<Avatar>` children into an overlapping row, collapsing everything past
+ * `max` (default 3) into a trailing `+N` bubble. Pass `<Avatar>` elements
+ * directly — the group clones each to force a uniform `size`/`variant` and the
+ * overlap, so wrapped children won't pick those up.
+ *
+ * @example
+ * <AvatarGroup size="sm" max={3}>
+ * 	<Avatar fallback="AL" colorize="Ada Lovelace" />
+ * 	<Avatar fallback="GH" colorize="Grace Hopper" />
+ * 	<Avatar fallback="MK" colorize="Mary Kom" />
+ * </AvatarGroup>
+ */
+export declare const AvatarGroup: ({ children, max, size, variant, className, ref, ...props }: AvatarGroupProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/avatar-group/avatar-group.js

@@ -0,0 +1,45 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { Avatar as t } from "../avatar/avatar.js";
+import { tv as n } from "tailwind-variants";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Children as a, cloneElement as o, isValidElement as s } from "react";
+//#region src/avatar-group/avatar-group.tsx
+var c = n({
+	slots: {
+		root: "inline-flex items-center",
+		item: "relative first:ms-0 [--avatar-border-color:var(--color-bg-default-base-primary)] [--avatar-border-width:0.125rem]"
+	},
+	variants: { size: {
+		xs: { item: "-ms-1.5" },
+		sm: { item: "-ms-2" },
+		md: { item: "-ms-2.5" },
+		lg: { item: "-ms-3" },
+		xl: { item: "-ms-3.5" },
+		"2xl": { item: "-ms-4" },
+		"3xl": { item: "-ms-4.5" },
+		"4xl": { item: "-ms-5" }
+	} },
+	defaultVariants: { size: "md" }
+}), l = ({ children: n, max: l = 3, size: u = "md", variant: d, className: f, ref: p, ...m }) => {
+	let h = c({ size: u }), g = h.item(), _ = a.toArray(n).filter(s), v = _.slice(0, Math.max(0, l)), y = _.length - v.length;
+	return /* @__PURE__ */ i("div", {
+		ref: p,
+		"data-slot": "avatar-group",
+		...m,
+		className: e(h.root(), f),
+		children: [v.map((t) => o(t, {
+			size: u,
+			variant: d,
+			className: e(g, t.props.className)
+		})), y > 0 && /* @__PURE__ */ r(t, {
+			"data-slot": "avatar-group-overflow",
+			size: u,
+			variant: d,
+			fallback: `+${y}`,
+			className: g
+		})]
+	});
+};
+//#endregion
+export { l as AvatarGroup, c as avatarGroupRecipe };

package/src/avatar-group/index.d.ts

@@ -0,0 +1,2 @@
+export { AvatarGroup, avatarGroupRecipe } from './avatar-group';
+export type { AvatarGroupProps } from './avatar-group';

package/src/avatar-group/index.js

@@ -0,0 +1,2 @@
+import { AvatarGroup as e, avatarGroupRecipe as t } from "./avatar-group.js";
+export { e as AvatarGroup, t as avatarGroupRecipe };