@agentero/design-system 0.9.8 → 0.11.0

package/src/data-table/table.js

@@ -2,11 +2,11 @@
 import { cn as e } from "../../lib/utils.js";
 import { Button as t } from "../button/button.js";
 import { IconKeyboardArrowDown as n } from "./icons.js";
-import { createContext as r, use as i } from "react";
-import { tv as a } from "tailwind-variants";
-import { jsx as o } from "react/jsx-runtime";
+import { tv as r } from "tailwind-variants";
+import { jsx as i } from "react/jsx-runtime";
+import { createContext as a, use as o } from "react";
 //#region src/data-table/table.tsx
-var s = "ps-[var(--table-cell-padding-inline)] pe-[var(--table-cell-padding-inline)] first:ps-[var(--table-cell-padding-inline-ends)] last:pe-[var(--table-cell-padding-inline-ends)] has-[[type=checkbox]]:w-0 has-[[type=checkbox]]:pe-0", c = a({
+var s = "ps-[var(--table-cell-padding-inline)] pe-[var(--table-cell-padding-inline)] first:ps-[var(--table-cell-padding-inline-ends)] last:pe-[var(--table-cell-padding-inline-ends)] has-[[type=checkbox]]:w-0 has-[[type=checkbox]]:pe-0", c = r({
 	slots: {
 		root: ["flex min-h-0 flex-1 flex-col overflow-hidden", "[--table-cell-padding-inline:1.25rem] [--table-cell-padding-inline-ends:1.25rem]"],
 		scroll: "min-h-0 flex-1 overflow-auto focus-visible:outline-none",
@@ -26,32 +26,32 @@ var s = "ps-[var(--table-cell-padding-inline)] pe-[var(--table-cell-padding-inli
 		}
 	},
 	defaultVariants: { size: "md" }
-}), l = r(null), u = () => {
-	let e = i(l);
+}), l = a(null), u = () => {
+	let e = o(l);
 	if (!e) throw Error("Table parts must be used within Table.Root");
 	return e;
-}, d = r("body"), f = (e) => e === "header" || e === "headerAndFooter", p = (e) => e === "headerAndFooter", m = ({ children: e, ref: t, ...n }) => {
-	let { size: r, sticky: i, embed: a } = n, s = c(n);
-	return /* @__PURE__ */ o(l, {
+}, d = a("body"), f = (e) => e === "header" || e === "headerAndFooter", p = (e) => e === "headerAndFooter", m = ({ children: e, ref: t, ...n }) => {
+	let { size: r, sticky: a, embed: o } = n, s = c(n);
+	return /* @__PURE__ */ i(l, {
 		value: {
-			header: y({ sticky: f(i) }),
+			header: y({ sticky: f(a) }),
 			cell: x({ size: r }),
 			headRow: _({ body: !1 }),
 			bodyRow: _({
 				body: !0,
-				divider: !a,
-				stickyFooter: p(i)
+				divider: !o,
+				stickyFooter: p(a)
 			})
 		},
-		children: /* @__PURE__ */ o("div", {
+		children: /* @__PURE__ */ i("div", {
 			"data-slot": "table-root",
 			className: s.root(),
-			children: /* @__PURE__ */ o("div", {
+			children: /* @__PURE__ */ i("div", {
 				"data-slot": "table-scroll",
 				ref: t,
 				tabIndex: 0,
 				className: s.scroll(),
-				children: /* @__PURE__ */ o("table", {
+				children: /* @__PURE__ */ i("table", {
 					"data-slot": "table",
 					className: s.table(),
 					children: e
@@ -61,25 +61,25 @@ var s = "ps-[var(--table-cell-padding-inline)] pe-[var(--table-cell-padding-inli
 	});
 };
 m.displayName = "Table.Root";
-var h = ({ children: e, ...t }) => /* @__PURE__ */ o(d, {
+var h = ({ children: e, ...t }) => /* @__PURE__ */ i(d, {
 	value: "head",
-	children: /* @__PURE__ */ o("thead", {
+	children: /* @__PURE__ */ i("thead", {
 		"data-slot": "table-head",
 		...t,
 		children: e
 	})
 });
 h.displayName = "Table.Head";
-var g = ({ children: e, ...t }) => /* @__PURE__ */ o(d, {
+var g = ({ children: e, ...t }) => /* @__PURE__ */ i(d, {
 	value: "body",
-	children: /* @__PURE__ */ o("tbody", {
+	children: /* @__PURE__ */ i("tbody", {
 		"data-slot": "table-body",
 		...t,
 		children: e
 	})
 });
 g.displayName = "Table.Body";
-var _ = a({
+var _ = r({
 	base: "transition-colors duration-150",
 	variants: {
 		body: {
@@ -101,14 +101,14 @@ var _ = a({
 	}
 }), v = ({ className: t, ...n }) => {
 	let { headRow: r, bodyRow: a } = u();
-	return /* @__PURE__ */ o("tr", {
+	return /* @__PURE__ */ i("tr", {
 		"data-slot": "table-row",
-		className: e(i(d) === "body" ? a : r, t),
+		className: e(o(d) === "body" ? a : r, t),
 		...n
 	});
 };
 v.displayName = "Table.Row";
-var y = a({
+var y = r({
 	base: `h-12 border-b border-border-default-base-primary text-left align-middle text-sm font-light whitespace-nowrap text-text-default-base-tertiary ${s}`,
 	variants: { sticky: {
 		true: "sticky top-0 z-[1] bg-bg-default-base-primary",
@@ -116,14 +116,14 @@ var y = a({
 	} }
 }), b = ({ className: t, ...n }) => {
 	let { header: r } = u();
-	return /* @__PURE__ */ o("th", {
+	return /* @__PURE__ */ i("th", {
 		"data-slot": "table-header",
 		className: e(r, t),
 		...n
 	});
 };
 b.displayName = "Table.Header";
-var x = a({
+var x = r({
 	base: `align-middle text-sm whitespace-nowrap ${s}`,
 	variants: { size: {
 		sm: "h-12",
@@ -133,36 +133,36 @@ var x = a({
 	defaultVariants: { size: "md" }
 }), S = ({ className: t, ...n }) => {
 	let { cell: r } = u();
-	return /* @__PURE__ */ o("td", {
+	return /* @__PURE__ */ i("td", {
 		"data-slot": "table-cell",
 		className: e(r, t),
 		...n
 	});
 };
 S.displayName = "Table.Cell";
-var C = a({ base: "relative z-[1] [&>svg]:shrink-0 [&>svg]:transition-transform [&>svg]:duration-200 data-[state=open]:[&>svg]:rotate-180" }), w = ({ toggleExpanded: r, isExpanded: i, className: a, ...s }) => /* @__PURE__ */ o(t, {
+var C = r({ base: "relative z-[1] [&>svg]:shrink-0 [&>svg]:transition-transform [&>svg]:duration-200 data-[state=open]:[&>svg]:rotate-180" }), w = ({ toggleExpanded: r, isExpanded: a, className: o, ...s }) => /* @__PURE__ */ i(t, {
 	variant: "ghost",
 	onClick: r,
-	className: e(C(), a),
-	"data-state": i ? "open" : "default",
+	className: e(C(), o),
+	"data-state": a ? "open" : "default",
 	"data-slot": "table-expand-button",
 	...s,
-	children: /* @__PURE__ */ o(n, {})
+	children: /* @__PURE__ */ i(n, {})
 });
 w.displayName = "Table.ExpandButton";
-var T = ({ className: t, ...n }) => /* @__PURE__ */ o("tr", {
+var T = ({ className: t, ...n }) => /* @__PURE__ */ i("tr", {
 	"data-slot": "table-expanded-row",
 	className: e("border-t border-border-default-base-primary", t),
 	...n
 });
 T.displayName = "Table.ExpandedRow";
-var E = a({ base: [
+var E = r({ base: [
 	"relative flex w-fit gap-1",
 	"after:absolute after:inset-y-0 after:right-0 after:left-[calc(var(--table-cell-padding-inline)*-1)] after:opacity-0 after:transition-opacity after:duration-150 after:content-[\"\"]",
 	"after:[background:linear-gradient(to_right,transparent_0,var(--color-bg-default-base-secondary)_var(--table-cell-padding-inline))]",
 	"[&>*]:relative [&>*]:z-[1] [&>*]:opacity-0 [&>*]:transition-opacity [&>*]:duration-150",
 	"[@media(hover:none)_and_(pointer:coarse)]:[&>*]:opacity-100"
-] }), D = ({ children: e }) => /* @__PURE__ */ o("div", {
+] }), D = ({ children: e }) => /* @__PURE__ */ i("div", {
 	"data-slot": "table-row-actions",
 	className: E(),
 	children: e

package/src/tag/index.d.ts

@@ -0,0 +1,2 @@
+export { Tag, tagRecipe } from './tag';
+export type { TagProps, TagColor, TagVariant, TagSize } from './tag';

package/src/tag/index.js

@@ -0,0 +1,2 @@
+import { Tag as e, tagRecipe as t } from "./tag.js";
+export { e as Tag, t as tagRecipe };

package/src/tag/tag.d.ts

@@ -0,0 +1,160 @@
+import { ComponentPropsWithRef, ReactNode, Ref } from 'react';
+import { VariantProps } from 'tailwind-variants';
+/**
+ * Style recipe for Tag. Each color maps to its dedicated `*-tag-*` semantic
+ * tokens (bg enable/hover, border, text/icon) defined in the theme — one ramp
+ * per color, so the recipe carries no raw palette values.
+ *
+ * @summary tailwind-variants recipe backing the Tag component styles
+ */
+export declare const tagRecipe: import('tailwind-variants').TVReturnType<{
+    color: {
+        neutral: string;
+        positive: string;
+        danger: string;
+        warning: string;
+        informative: string;
+        creative: string;
+        dynamic: string;
+        playful: string;
+    };
+    variant: {
+        secondary: string;
+        tertiary: string;
+        ghost: string;
+        invisible: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+    };
+    pill: {
+        true: string;
+    };
+    truncate: {
+        true: string;
+    };
+    interactive: {
+        true: string;
+    };
+    hasOnlyIcon: {
+        true: string;
+    };
+}, undefined, string[], {
+    color: {
+        neutral: string;
+        positive: string;
+        danger: string;
+        warning: string;
+        informative: string;
+        creative: string;
+        dynamic: string;
+        playful: string;
+    };
+    variant: {
+        secondary: string;
+        tertiary: string;
+        ghost: string;
+        invisible: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+    };
+    pill: {
+        true: string;
+    };
+    truncate: {
+        true: string;
+    };
+    interactive: {
+        true: string;
+    };
+    hasOnlyIcon: {
+        true: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    color: {
+        neutral: string;
+        positive: string;
+        danger: string;
+        warning: string;
+        informative: string;
+        creative: string;
+        dynamic: string;
+        playful: string;
+    };
+    variant: {
+        secondary: string;
+        tertiary: string;
+        ghost: string;
+        invisible: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+    };
+    pill: {
+        true: string;
+    };
+    truncate: {
+        true: string;
+    };
+    interactive: {
+        true: string;
+    };
+    hasOnlyIcon: {
+        true: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+/**
+ * @summary Tag color union (`neutral`, `positive`, `danger`, `warning`, `informative`, `creative`, `dynamic`, `playful`)
+ */
+export type TagColor = NonNullable<VariantProps<typeof tagRecipe>['color']>;
+/**
+ * Fill treatments: `secondary` (tinted fill + border), `tertiary` (tinted fill,
+ * no border — default), `ghost` (text only), and `invisible` (transparent until
+ * hovered).
+ *
+ * @summary Tag variant union (`secondary`, `tertiary`, `ghost`, `invisible`)
+ */
+export type TagVariant = NonNullable<VariantProps<typeof tagRecipe>['variant']>;
+/**
+ * @summary Tag size union (`xs`, `sm`, `md`)
+ */
+export type TagSize = NonNullable<VariantProps<typeof tagRecipe>['size']>;
+/**
+ * Tag props. Accepts all standard `<span>` attributes plus the style variants.
+ *
+ * @summary Props accepted by Tag; use `asChild` to render a different element
+ */
+export type TagProps = Omit<ComponentPropsWithRef<'span'>, 'color'> & Omit<VariantProps<typeof tagRecipe>, 'interactive' | 'hasOnlyIcon'> & {
+    /**
+     * Render the single child element instead of a `<span>` (via Radix `Slot`),
+     * keeping Tag framework-agnostic. Marks the Tag interactive: adds the pointer
+     * cursor and the hover fill (a plain `<span>` Tag is a static badge).
+     */
+    asChild?: boolean;
+    children?: ReactNode;
+    ref?: Ref<HTMLElement>;
+};
+/**
+ * Tag is a compact label for statuses, categories, counts, and attributes. As a
+ * plain `<span>` it reads as a static badge with no hover. Pass `asChild` to
+ * render an interactive link or button instead — that adds the pointer cursor
+ * and the hover fill. Pick `color` for meaning and `variant` for fill emphasis.
+ *
+ * @summary Compact semantic label; renders a static badge `<span>` or, with `asChild`, an interactive element
+ *
+ * @example
+ * <Tag color="positive">Active</Tag>
+ *
+ * @example
+ * <Tag asChild color="informative">
+ *   <a href="/carriers">View carriers</a>
+ * </Tag>
+ */
+export declare const Tag: ({ children, asChild, color, variant, size, pill, truncate, className, ref, ...props }: TagProps) => import("react/jsx-runtime").JSX.Element;

package/src/tag/tag.js

@@ -0,0 +1,129 @@
+"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 { Children as r, isValidElement as i } from "react";
+import { Slot as a, Slottable as o } from "@radix-ui/react-slot";
+//#region src/tag/tag.tsx
+var s = t({
+	base: [
+		"inline-flex w-fit min-w-fit items-center gap-1",
+		"rounded-md border border-solid border-transparent px-2",
+		"font-normal leading-normal no-underline",
+		"transition-[background-color,opacity] duration-200",
+		"[&_svg]:size-3.5"
+	],
+	variants: {
+		color: {
+			neutral: "bg-bg-tag-neutral-enable text-text-tag-neutral border-border-tag-neutral [&_svg_path]:fill-icon-tag-neutral",
+			positive: "bg-bg-tag-positive-enable text-text-tag-positive border-border-tag-positive [&_svg_path]:fill-icon-tag-positive",
+			danger: "bg-bg-tag-danger-enable text-text-tag-danger border-border-tag-danger [&_svg_path]:fill-icon-tag-danger",
+			warning: "bg-bg-tag-warning-enable text-text-tag-warning border-border-tag-warning [&_svg_path]:fill-icon-tag-warning",
+			informative: "bg-bg-tag-informative-enable text-text-tag-informative border-border-tag-informative [&_svg_path]:fill-icon-tag-informative",
+			creative: "bg-bg-tag-creative-enable text-text-tag-creative border-border-tag-creative [&_svg_path]:fill-icon-tag-creative",
+			dynamic: "bg-bg-tag-dynamic-enable text-text-tag-dynamic border-border-tag-dynamic [&_svg_path]:fill-icon-tag-dynamic",
+			playful: "bg-bg-tag-playful-enable text-text-tag-playful border-border-tag-playful [&_svg_path]:fill-icon-tag-playful"
+		},
+		variant: {
+			secondary: "",
+			tertiary: "border-transparent",
+			ghost: "border-transparent bg-transparent",
+			invisible: "border-transparent bg-transparent opacity-0"
+		},
+		size: {
+			xs: "h-5 px-1.5 text-xs [&_svg]:size-3",
+			sm: "h-6 text-xs",
+			md: "h-8 text-sm"
+		},
+		pill: { true: "rounded-full" },
+		truncate: { true: "max-w-full min-w-0 overflow-hidden text-ellipsis whitespace-nowrap" },
+		interactive: { true: "cursor-pointer" },
+		hasOnlyIcon: { true: "justify-center px-0" }
+	},
+	compoundVariants: [
+		{
+			hasOnlyIcon: !0,
+			size: "xs",
+			class: "size-5"
+		},
+		{
+			hasOnlyIcon: !0,
+			size: "sm",
+			class: "size-6"
+		},
+		{
+			hasOnlyIcon: !0,
+			size: "md",
+			class: "size-8 [&_svg]:size-4"
+		},
+		{
+			color: "neutral",
+			interactive: !0,
+			class: "hover:bg-bg-tag-neutral-hover"
+		},
+		{
+			color: "positive",
+			interactive: !0,
+			class: "hover:bg-bg-tag-positive-hover"
+		},
+		{
+			color: "danger",
+			interactive: !0,
+			class: "hover:bg-bg-tag-danger-hover"
+		},
+		{
+			color: "warning",
+			interactive: !0,
+			class: "hover:bg-bg-tag-warning-hover"
+		},
+		{
+			color: "informative",
+			interactive: !0,
+			class: "hover:bg-bg-tag-informative-hover"
+		},
+		{
+			color: "creative",
+			interactive: !0,
+			class: "hover:bg-bg-tag-creative-hover"
+		},
+		{
+			color: "dynamic",
+			interactive: !0,
+			class: "hover:bg-bg-tag-dynamic-hover"
+		},
+		{
+			color: "playful",
+			interactive: !0,
+			class: "hover:bg-bg-tag-playful-hover"
+		},
+		{
+			variant: "invisible",
+			interactive: !0,
+			class: "hover:opacity-100"
+		}
+	],
+	defaultVariants: {
+		color: "neutral",
+		variant: "tertiary",
+		size: "sm"
+	}
+}), c = ({ children: t, asChild: c, color: l, variant: u, size: d, pill: f, truncate: p, className: m, ref: h, ...g }) => {
+	let _ = c ? a : "span", v = c && i(t) ? t.props.children : t, y = r.toArray(v), b = e(s({
+		color: l,
+		variant: u,
+		size: d,
+		pill: f,
+		truncate: p,
+		interactive: c,
+		hasOnlyIcon: y.length > 0 && y.every(i)
+	}), m);
+	return /* @__PURE__ */ n(_, {
+		"data-slot": "tag",
+		...g,
+		className: b,
+		ref: h,
+		children: c ? /* @__PURE__ */ n(o, { children: t }) : t
+	});
+};
+//#endregion
+export { c as Tag, s as tagRecipe };

package/theme/base.css

@@ -682,6 +682,58 @@
 	--color-focus-ring-button-positive: var(--color-positive-500);
 	--color-focus-ring-button-destructive: var(--color-danger-500);
 
+	/* ========================================
+    * TAG
+    * ======================================== */
+
+	--color-bg-tag-neutral-enable: var(--color-slate-050);
+	--color-bg-tag-neutral-hover: var(--color-slate-100);
+	--color-border-tag-neutral: var(--color-slate-200);
+	--color-text-tag-neutral: var(--color-slate-700);
+	--color-icon-tag-neutral: var(--color-slate-700);
+
+	--color-bg-tag-positive-enable: var(--color-positive-050);
+	--color-bg-tag-positive-hover: var(--color-positive-100);
+	--color-border-tag-positive: var(--color-positive-200);
+	--color-text-tag-positive: var(--color-positive-700);
+	--color-icon-tag-positive: var(--color-positive-700);
+
+	--color-bg-tag-danger-enable: var(--color-danger-050);
+	--color-bg-tag-danger-hover: var(--color-danger-100);
+	--color-border-tag-danger: var(--color-danger-200);
+	--color-text-tag-danger: var(--color-danger-500);
+	--color-icon-tag-danger: var(--color-danger-500);
+
+	--color-bg-tag-warning-enable: var(--color-warning-050);
+	--color-bg-tag-warning-hover: var(--color-warning-050);
+	--color-border-tag-warning: var(--color-warning-300);
+	--color-text-tag-warning: var(--color-warning-700);
+	--color-icon-tag-warning: var(--color-warning-700);
+
+	--color-bg-tag-informative-enable: var(--color-blue-050);
+	--color-bg-tag-informative-hover: var(--color-blue-100);
+	--color-border-tag-informative: var(--color-blue-200);
+	--color-text-tag-informative: var(--color-blue-600);
+	--color-icon-tag-informative: var(--color-blue-600);
+
+	--color-bg-tag-creative-enable: var(--color-purple-050);
+	--color-bg-tag-creative-hover: var(--color-purple-100);
+	--color-border-tag-creative: var(--color-purple-200);
+	--color-text-tag-creative: var(--color-purple-600);
+	--color-icon-tag-creative: var(--color-purple-600);
+
+	--color-bg-tag-dynamic-enable: var(--color-orange-050);
+	--color-bg-tag-dynamic-hover: var(--color-orange-100);
+	--color-border-tag-dynamic: var(--color-orange-200);
+	--color-text-tag-dynamic: var(--color-orange-500);
+	--color-icon-tag-dynamic: var(--color-orange-500);
+
+	--color-bg-tag-playful-enable: var(--color-pink-050);
+	--color-bg-tag-playful-hover: var(--color-pink-100);
+	--color-border-tag-playful: var(--color-pink-200);
+	--color-text-tag-playful: var(--color-pink-400);
+	--color-icon-tag-playful: var(--color-pink-400);
+
 	/* ========================================
     * SPACING
     * ======================================== */
@@ -944,6 +996,24 @@
 		}
 	}
 
+	@keyframes accordionDown {
+		from {
+			height: 0;
+		}
+		to {
+			height: var(--radix-accordion-content-height);
+		}
+	}
+
+	@keyframes accordionUp {
+		from {
+			height: var(--radix-accordion-content-height);
+		}
+		to {
+			height: 0;
+		}
+	}
+
 	html {
 		/* body.md textStyle from Panda → text-base */
 		font-size: var(--text-base);