@agentero/design-system 0.15.1 → 0.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.15.1",
+	"version": "0.17.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"
@@ -69,6 +73,10 @@
 			"types": "./src/switch/index.d.ts",
 			"import": "./src/switch/index.js"
 		},
+		"./tabs": {
+			"types": "./src/tabs/index.d.ts",
+			"import": "./src/tabs/index.js"
+		},
 		"./tag": {
 			"types": "./src/tag/index.d.ts",
 			"import": "./src/tag/index.js"
@@ -106,6 +114,7 @@
 		"@radix-ui/react-separator": "^1.1.8",
 		"@radix-ui/react-slot": "^1.2.4",
 		"@radix-ui/react-switch": "^1.3.2",
+		"@radix-ui/react-tabs": "^1.1.13",
 		"@radix-ui/react-tooltip": "^1.2.11",
 		"clsx": "^2.1.1",
 		"sonner": "^2.0.7",

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/tabs/index.d.ts

@@ -0,0 +1,2 @@
+export { Tabs, tabsRecipe } from './tabs';
+export type { TabsRootProps, TabsListProps, TabsTriggerProps, TabsContentProps } from './tabs';

package/src/tabs/index.js

@@ -0,0 +1,2 @@
+import { Tabs as e, tabsRecipe as t } from "./tabs.js";
+export { e as Tabs, t as tabsRecipe };

package/src/tabs/tabs.d.ts

@@ -0,0 +1,135 @@
+import { ComponentProps } from 'react';
+import { VariantProps } from 'tailwind-variants';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+export declare const tabsRecipe: import('tailwind-variants').TVReturnType<{
+    variant: {
+        line: {
+            list: string;
+            trigger: string[];
+        };
+        enclosed: {
+            list: string;
+            trigger: string;
+        };
+        button: {
+            list: string;
+            trigger: string[];
+        };
+    };
+    position: {
+        center: {
+            list: string;
+        };
+        start: {
+            list: string;
+        };
+        end: {
+            list: string;
+        };
+        full: {
+            list: string;
+        };
+    };
+}, {
+    root: string;
+    list: string;
+    trigger: string[];
+    content: string;
+}, undefined, {
+    variant: {
+        line: {
+            list: string;
+            trigger: string[];
+        };
+        enclosed: {
+            list: string;
+            trigger: string;
+        };
+        button: {
+            list: string;
+            trigger: string[];
+        };
+    };
+    position: {
+        center: {
+            list: string;
+        };
+        start: {
+            list: string;
+        };
+        end: {
+            list: string;
+        };
+        full: {
+            list: string;
+        };
+    };
+}, {
+    root: string;
+    list: string;
+    trigger: string[];
+    content: string;
+}, import('tailwind-variants').TVReturnType<{
+    variant: {
+        line: {
+            list: string;
+            trigger: string[];
+        };
+        enclosed: {
+            list: string;
+            trigger: string;
+        };
+        button: {
+            list: string;
+            trigger: string[];
+        };
+    };
+    position: {
+        center: {
+            list: string;
+        };
+        start: {
+            list: string;
+        };
+        end: {
+            list: string;
+        };
+        full: {
+            list: string;
+        };
+    };
+}, {
+    root: string;
+    list: string;
+    trigger: string[];
+    content: string;
+}, undefined, unknown, unknown, undefined>>;
+type TabsVariants = VariantProps<typeof tabsRecipe>;
+export type TabsRootProps = ComponentProps<typeof TabsPrimitive.Root> & TabsVariants;
+export type TabsListProps = ComponentProps<typeof TabsPrimitive.List>;
+export type TabsTriggerProps = ComponentProps<typeof TabsPrimitive.Trigger>;
+export type TabsContentProps = ComponentProps<typeof TabsPrimitive.Content>;
+/**
+ * Tabs built on Radix UI's Tabs (keyboard nav, roving focus and ARIA come for
+ * free). Compose `Root` with a `List` of `Trigger`s and matching `Content`s,
+ * pairing each `Trigger`/`Content` by `value`.
+ */
+export declare const Tabs: {
+    Root: {
+        ({ className, variant, position, ...props }: TabsRootProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    List: {
+        ({ className, ...props }: TabsListProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Trigger: {
+        ({ className, ...props }: TabsTriggerProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        ({ className, ...props }: TabsContentProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export {};

package/src/tabs/tabs.js

@@ -0,0 +1,113 @@
+"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 { createContext as r, use as i } from "react";
+import * as a from "@radix-ui/react-tabs";
+//#region src/tabs/tabs.tsx
+var o = t({
+	slots: {
+		root: "flex flex-col",
+		list: "z-1 flex shrink-0 overflow-x-auto overflow-y-hidden",
+		trigger: [
+			"relative cursor-pointer text-sm font-semibold text-text-default-base-secondary transition-colors duration-150",
+			"hover:text-text-default-base-primary",
+			"focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring-button-primary",
+			"data-disabled:cursor-not-allowed data-disabled:opacity-50",
+			"data-[state=active]:text-text-default-base-primary"
+		],
+		content: ""
+	},
+	variants: {
+		variant: {
+			line: {
+				list: "w-full gap-6 border-b border-border-default-base-primary bg-bg-default-base-primary px-4",
+				trigger: [
+					"grid h-10 content-center",
+					"before:absolute before:inset-x-0 before:bottom-0 before:h-0.5 before:origin-bottom before:scale-y-0 before:bg-text-button-secondary-enable before:transition-transform before:duration-200 before:will-change-transform before:content-['']",
+					"data-[state=active]:before:scale-y-100"
+				]
+			},
+			enclosed: {
+				list: "inline-grid max-w-full auto-cols-fr grid-flow-col rounded-md bg-bg-default-base-tertiary p-1",
+				trigger: "flex items-center justify-center rounded-sm px-3 py-1 text-center data-[state=active]:bg-bg-default-base-primary"
+			},
+			button: {
+				list: "gap-2",
+				trigger: [
+					"flex h-8 items-center gap-2.5 rounded-md px-3 text-sm font-normal text-text-default-base-secondary",
+					"[&>svg]:-mx-1 [&>svg]:size-4 [&>svg]:fill-icon-default-base-secondary",
+					"hover:bg-bg-default-base-primary-hover data-[state=active]:bg-bg-default-base-primary-hover"
+				]
+			}
+		},
+		position: {
+			center: { list: "justify-center self-center" },
+			start: { list: "self-start" },
+			end: { list: "justify-end self-end" },
+			full: { list: "w-full self-stretch" }
+		}
+	},
+	compoundVariants: [{
+		variant: "button",
+		position: "start",
+		class: { list: "-ml-2.25" }
+	}],
+	defaultVariants: {
+		variant: "line",
+		position: "start"
+	}
+}), s = r(null), c = () => {
+	let e = i(s);
+	if (!e) throw Error("Tabs.List, Tabs.Trigger and Tabs.Content must be used within Tabs.Root");
+	return e;
+}, l = ({ className: t, variant: r, position: i, ...c }) => {
+	let l = o({
+		variant: r,
+		position: i
+	});
+	return /* @__PURE__ */ n(s, {
+		value: l,
+		children: /* @__PURE__ */ n(a.Root, {
+			"data-slot": "tabs-root",
+			className: e(l.root(), t),
+			...c
+		})
+	});
+};
+l.displayName = "Tabs.Root";
+var u = ({ className: t, ...r }) => {
+	let i = c();
+	return /* @__PURE__ */ n(a.List, {
+		"data-slot": "tabs-list",
+		className: e(i.list(), t),
+		...r
+	});
+};
+u.displayName = "Tabs.List";
+var d = ({ className: t, ...r }) => {
+	let i = c();
+	return /* @__PURE__ */ n(a.Trigger, {
+		"data-slot": "tabs-trigger",
+		className: e(i.trigger(), t),
+		...r
+	});
+};
+d.displayName = "Tabs.Trigger";
+var f = ({ className: t, ...r }) => {
+	let i = c();
+	return /* @__PURE__ */ n(a.Content, {
+		"data-slot": "tabs-content",
+		className: e(i.content(), t),
+		...r
+	});
+};
+f.displayName = "Tabs.Content";
+var p = {
+	Root: l,
+	List: u,
+	Trigger: d,
+	Content: f
+};
+//#endregion
+export { p as Tabs, o as tabsRecipe };