@agentero/design-system 0.15.0 → 0.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.15.0",
+	"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 };

package/src/switch/switch.d.ts

@@ -12,9 +12,16 @@ export declare const switchRecipe: import('tailwind-variants').TVReturnType<{
             thumb: string;
         };
     };
+    reverse: {
+        true: {
+            wrapper: string;
+        };
+    };
 }, {
+    wrapper: string;
     root: string[];
     thumb: string;
+    label: string[];
 }, undefined, {
     size: {
         sm: {
@@ -26,9 +33,16 @@ export declare const switchRecipe: import('tailwind-variants').TVReturnType<{
             thumb: string;
         };
     };
+    reverse: {
+        true: {
+            wrapper: string;
+        };
+    };
 }, {
+    wrapper: string;
     root: string[];
     thumb: string;
+    label: string[];
 }, import('tailwind-variants').TVReturnType<{
     size: {
         sm: {
@@ -40,20 +54,39 @@ export declare const switchRecipe: import('tailwind-variants').TVReturnType<{
             thumb: string;
         };
     };
+    reverse: {
+        true: {
+            wrapper: string;
+        };
+    };
 }, {
+    wrapper: string;
     root: string[];
     thumb: string;
+    label: string[];
 }, undefined, unknown, unknown, undefined>>;
 export type SwitchSize = NonNullable<VariantProps<typeof switchRecipe>['size']>;
-export type SwitchProps = ComponentPropsWithRef<typeof SwitchPrimitive.Root> & VariantProps<typeof switchRecipe>;
+export type SwitchProps = ComponentPropsWithRef<typeof SwitchPrimitive.Root> & VariantProps<typeof switchRecipe> & {
+    /**
+     * Optional text rendered beside the toggle and associated with it via
+     * `htmlFor`. Provide an `id` so the association resolves. Omit it to keep
+     * the toggle headless and supply your own `<label htmlFor>`.
+     */
+    label?: string;
+};
 /**
  * Instant-effect on/off toggle built on Radix Switch. Reach for it over a
- * Checkbox when flipping a single boolean that applies immediately. Renders
- * only the toggle — pair it with a `<label htmlFor>` for an accessible name.
+ * Checkbox when flipping a single boolean that applies immediately.
+ *
+ * Renders only the toggle by default — pair it with a `<label htmlFor>` for an
+ * accessible name. Pass `label` (with an `id`) to render an associated text
+ * label beside the toggle; `reverse` places the label before it.
  *
  * @summary Instant-effect on/off toggle built on Radix Switch
  *
  * @example
  * <Switch checked={enabled} onCheckedChange={setEnabled} />
+ * @example
+ * <Switch id="email-notifications" label="Email" checked={on} onCheckedChange={setOn} />
  */
-export declare const Switch: ({ className, size, ref, ...props }: SwitchProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Switch: ({ className, size, reverse, label, id, ref, ...props }: SwitchProps) => import("react/jsx-runtime").JSX.Element;

package/src/switch/switch.js

@@ -1,42 +1,61 @@
 "use client";
 import { cn as e } from "../../lib/utils.js";
 import { tv as t } from "tailwind-variants";
-import { jsx as n } from "react/jsx-runtime";
-import * as r from "@radix-ui/react-switch";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useId as i } from "react";
+import * as a from "@radix-ui/react-switch";
 //#region src/switch/switch.tsx
-var i = t({
+var o = t({
 	slots: {
+		wrapper: "inline-flex items-center gap-2.5",
 		root: [
-			"inline-flex shrink-0 cursor-pointer items-center rounded-full transition-colors",
+			"peer inline-flex shrink-0 cursor-pointer items-center rounded-full transition-colors",
 			"bg-bg-default-base-tertiary data-[state=checked]:bg-bg-default-base-inverse-primary",
 			"focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring-button-primary",
 			"disabled:cursor-not-allowed disabled:opacity-50"
 		],
-		thumb: "block translate-x-0 rounded-full bg-bg-default-base-primary shadow-sm transition-transform"
+		thumb: "block translate-x-0 rounded-full bg-bg-default-base-primary shadow-sm transition-transform",
+		label: ["cursor-pointer text-sm text-text-default-base-primary select-none", "peer-disabled:cursor-not-allowed peer-disabled:opacity-50"]
 	},
-	variants: { size: {
-		sm: {
-			root: "h-4 w-7.5 p-0.5",
-			thumb: "size-3 data-[state=checked]:translate-x-3.5"
+	variants: {
+		size: {
+			sm: {
+				root: "h-4 w-7.5 p-0.5",
+				thumb: "size-3 data-[state=checked]:translate-x-3.5"
+			},
+			md: {
+				root: "h-6 w-12 p-0.75",
+				thumb: "size-4.5 data-[state=checked]:translate-x-6"
+			}
 		},
-		md: {
-			root: "h-6 w-12 p-0.75",
-			thumb: "size-4.5 data-[state=checked]:translate-x-6"
-		}
-	} },
+		reverse: { true: { wrapper: "flex-row-reverse" } }
+	},
 	defaultVariants: { size: "md" }
-}), a = ({ className: t, size: a, ref: o, ...s }) => {
-	let c = i({ size: a });
-	return /* @__PURE__ */ n(r.Root, {
-		ref: o,
+}), s = ({ className: t, size: s, reverse: c, label: l, id: u, ref: d, ...f }) => {
+	let p = i(), m = u ?? (l ? p : void 0), h = o({
+		size: s,
+		reverse: c
+	}), g = /* @__PURE__ */ n(a.Root, {
+		ref: d,
+		id: m,
 		"data-slot": "switch",
-		className: e(c.root(), t),
-		...s,
-		children: /* @__PURE__ */ n(r.Thumb, {
+		className: e(h.root(), t),
+		...f,
+		children: /* @__PURE__ */ n(a.Thumb, {
 			"data-slot": "switch-thumb",
-			className: c.thumb()
+			className: h.thumb()
 		})
 	});
+	return l ? /* @__PURE__ */ r("span", {
+		"data-slot": "switch-wrapper",
+		className: h.wrapper(),
+		children: [g, /* @__PURE__ */ n("label", {
+			htmlFor: m,
+			"data-slot": "switch-label",
+			className: h.label(),
+			children: l
+		})]
+	}) : g;
 };
 //#endregion
-export { a as Switch, i as switchRecipe };
+export { s as Switch, o as switchRecipe };