@agentero/design-system 0.20.2 → 0.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.20.2",
+	"version": "0.22.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"
@@ -101,6 +105,10 @@
 			"types": "./src/tooltip/index.d.ts",
 			"import": "./src/tooltip/index.js"
 		},
+		"./validation-list": {
+			"types": "./src/validation-list/index.d.ts",
+			"import": "./src/validation-list/index.js"
+		},
 		"./lib": {
 			"types": "./lib/index.d.ts",
 			"import": "./lib/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 };

package/src/validation-list/index.d.ts

@@ -0,0 +1,2 @@
+export { ValidationList, validationListRecipe } from './validation-list';
+export type { ValidationListProps, ValidationListVariants, ValidationRule } from './validation-list';

package/src/validation-list/index.js

@@ -0,0 +1,2 @@
+import { ValidationList as e, validationListRecipe as t } from "./validation-list.js";
+export { e as ValidationList, t as validationListRecipe };

package/src/validation-list/validation-list.d.ts

@@ -0,0 +1,60 @@
+import { ComponentPropsWithRef } from 'react';
+import { VariantProps } from 'tailwind-variants';
+export type ValidationRule = {
+    text: string;
+    pattern: RegExp | ((value: string) => boolean);
+};
+export declare const validationListRecipe: import('tailwind-variants').TVReturnType<{
+    active: {
+        true: {
+            item: string;
+        };
+        false: {
+            item: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+}, undefined, {
+    active: {
+        true: {
+            item: string;
+        };
+        false: {
+            item: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+}, import('tailwind-variants').TVReturnType<{
+    active: {
+        true: {
+            item: string;
+        };
+        false: {
+            item: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ValidationListVariants = VariantProps<typeof validationListRecipe>;
+export type ValidationListProps = Omit<ComponentPropsWithRef<'ul'>, 'children'> & {
+    value: string;
+    rules: ValidationRule[];
+};
+/**
+ * A checklist of rules that turn active as `value` satisfies them — one `<li>`
+ * per rule, each matched via a `RegExp` or a `(value) => boolean` predicate.
+ * Presentational only; pair it with your form validation.
+ *
+ * @example
+ * <ValidationList
+ * 	value={password}
+ * 	rules={[{ text: 'At least 10 characters', pattern: value => value.length >= 10 }]}
+ * />
+ */
+export declare const ValidationList: ({ value, rules, className, ...props }: ValidationListProps) => import("react/jsx-runtime").JSX.Element;

package/src/validation-list/validation-list.js

@@ -0,0 +1,30 @@
+"use client";
+import { tv as e } from "tailwind-variants";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/validation-list/validation-list.tsx
+var n = e({
+	slots: {
+		root: "ml-4 flex list-inside list-disc flex-col gap-1 text-left",
+		item: "text-sm"
+	},
+	variants: { active: {
+		true: { item: "text-text-default-base-primary" },
+		false: { item: "text-text-default-base-tertiary" }
+	} },
+	defaultVariants: { active: !1 }
+}), r = n(), i = (e, t) => e instanceof RegExp ? new RegExp(e).test(t) : e(t), a = ({ value: e, rules: n, className: a, ...o }) => /* @__PURE__ */ t("ul", {
+	"data-slot": "validation-list",
+	className: r.root({ className: a }),
+	...o,
+	children: n.map(({ text: n, pattern: a }) => {
+		let o = i(a, e);
+		return /* @__PURE__ */ t("li", {
+			"data-slot": "validation-list-item",
+			"data-active": o,
+			className: r.item({ active: o }),
+			children: n
+		}, n);
+	})
+});
+//#endregion
+export { a as ValidationList, n as validationListRecipe };