@agentero/design-system 0.9.7 → 0.10.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/theme/base.css

@@ -944,6 +944,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);