@agentero/design-system 0.21.0 → 0.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.21.0",
+	"version": "0.22.0",
 	"description": "A React component library built with Tailwind CSS v4 and Radix UI primitives",
 	"type": "module",
 	"license": "Apache-2.0",
@@ -105,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/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 };