@agentero/design-system 0.15.1 → 0.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.15.1",
+	"version": "0.16.0",
 	"description": "A React component library built with Tailwind CSS v4 and Radix UI primitives",
 	"type": "module",
 	"license": "Apache-2.0",
@@ -37,6 +37,10 @@
 			"types": "./src/button/index.d.ts",
 			"import": "./src/button/index.js"
 		},
+		"./check-list": {
+			"types": "./src/check-list/index.d.ts",
+			"import": "./src/check-list/index.js"
+		},
 		"./data-table": {
 			"types": "./src/data-table/index.d.ts",
 			"import": "./src/data-table/index.js"

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

@@ -0,0 +1,65 @@
+import { ComponentProps } from 'react';
+export declare const checkListRecipe: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            icon?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
+            item?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            icon?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
+            item?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string;
+    item: string;
+    icon: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            icon?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
+            item?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string;
+    item: string;
+    icon: string;
+}, import('tailwind-variants').TVReturnType<unknown, {
+    root: string;
+    item: string;
+    icon: string;
+}, undefined, unknown, unknown, undefined>>;
+type RootProps = ComponentProps<'ul'>;
+type ItemProps = ComponentProps<'li'>;
+/**
+ * CheckList renders a vertical list where every row is marked with a check
+ * icon — feature lists, benefits, availability summaries. Purely
+ * presentational: for interactive selection use a checkbox group instead.
+ *
+ * @summary Vertical list of check-marked rows
+ *
+ * @example
+ * ```tsx
+ * <CheckList.Root>
+ *   <CheckList.Item>Instant appointment</CheckList.Item>
+ * </CheckList.Root>
+ * ```
+ */
+export declare const CheckList: {
+    Root: {
+        ({ className, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Item: {
+        ({ className, children, ...props }: ItemProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export {};

package/src/check-list/check-list.js

@@ -0,0 +1,31 @@
+"use client";
+import { IconCheck as e } from "./icons.js";
+import { tv as t } from "tailwind-variants";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/check-list/check-list.tsx
+var i = t({ slots: {
+	root: "flex flex-col gap-1.5 text-sm text-text-default-base-primary",
+	item: "flex items-start gap-2",
+	icon: "relative top-[0.125em] size-[1.25em] shrink-0"
+} }), a = i(), o = ({ className: e, ...t }) => /* @__PURE__ */ n("ul", {
+	"data-slot": "check-list",
+	className: a.root({ className: e }),
+	...t
+});
+o.displayName = "CheckList.Root";
+var s = ({ className: t, children: i, ...o }) => /* @__PURE__ */ r("li", {
+	"data-slot": "check-list-item",
+	className: a.item({ className: t }),
+	...o,
+	children: [/* @__PURE__ */ n(e, {
+		className: a.icon(),
+		"aria-hidden": !0
+	}), i]
+});
+s.displayName = "CheckList.Item";
+var c = {
+	Root: o,
+	Item: s
+};
+//#endregion
+export { c as CheckList, i as checkListRecipe };

package/src/check-list/icons.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export declare const IconCheck: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/src/check-list/icons.js

@@ -0,0 +1,16 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region src/check-list/icons.tsx
+var t = (t) => /* @__PURE__ */ e("svg", {
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	...t,
+	children: /* @__PURE__ */ e("path", {
+		fill: "currentColor",
+		d: "M9.54988 15.5154L18.1884 6.87695C18.3371 6.72824 18.5137 6.65227 18.7182 6.64905C18.9226 6.64585 19.1024 6.72182 19.2576 6.87695C19.4127 7.03207 19.4903 7.21027 19.4903 7.41155C19.4903 7.61282 19.4127 7.79102 19.2576 7.94615L10.1826 17.0211C10.0018 17.2019 9.7909 17.2923 9.54988 17.2923C9.30887 17.2923 9.09798 17.2019 8.91721 17.0211L4.74221 12.8462C4.59349 12.6974 4.52009 12.5208 4.52201 12.3164C4.52394 12.1119 4.60247 11.9321 4.75758 11.777C4.91272 11.6218 5.09092 11.5443 5.29218 11.5443C5.49347 11.5443 5.67167 11.6218 5.82678 11.777L9.54988 15.5154Z"
+	})
+});
+//#endregion
+export { t as IconCheck };

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

@@ -0,0 +1 @@
+export { CheckList, checkListRecipe } from './check-list';

package/src/check-list/index.js

@@ -0,0 +1,2 @@
+import { CheckList as e, checkListRecipe as t } from "./check-list.js";
+export { e as CheckList, t as checkListRecipe };