@agentero/design-system 0.24.4 → 0.25.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.24.4",
+	"version": "0.25.0",
 	"description": "A React component library built with Tailwind CSS v4 and Radix UI primitives",
 	"type": "module",
 	"license": "Apache-2.0",
@@ -97,6 +97,10 @@
 			"types": "./src/switch/index.d.ts",
 			"import": "./src/switch/index.js"
 		},
+		"./table": {
+			"types": "./src/table/index.d.ts",
+			"import": "./src/table/index.js"
+		},
 		"./tabs": {
 			"types": "./src/tabs/index.d.ts",
 			"import": "./src/tabs/index.js"

package/src/avatar-group/avatar-group.d.ts

@@ -106,6 +106,8 @@ export type AvatarGroupProps = Omit<ComponentPropsWithRef<'div'>, 'children'> &
  * directly — the group clones each to force a uniform `size`/`variant` and the
  * overlap, so wrapped children won't pick those up.
  *
+ * @summary Overlapping row of avatars, collapsing the rest into `+N`
+ *
  * @example
  * <AvatarGroup size="sm" max={3}>
  * 	<Avatar fallback="AL" colorize="Ada Lovelace" />

package/src/data-table/data-table.d.ts

@@ -1,7 +1,7 @@
 import { CSSProperties, ElementType, HTMLAttributes, PropsWithChildren, RefObject } from 'react';
 import { RowData, Table as TableType, TableOptions } from '@tanstack/react-table';
 import { PaginationProps } from '../pagination';
-import { TableRootProps } from './table';
+import { TableRootProps } from '../table';
 /**
  * Shape a column's `meta` may carry; spread onto the `<th>`/`<td>`.
  * Right alignment of the header content is derived from either `style.textAlign: 'right'`

package/src/data-table/data-table.js

@@ -1,51 +1,51 @@
 "use client";
 import { cn as e } from "../../lib/utils.js";
-import { Pagination as t } from "../pagination/pagination.js";
-import { IconArrowUpward as n, IconSwapVert as r } from "./icons.js";
-import { TableBody as i, TableCell as a, TableHead as o, TableHeader as s, TableRoot as c, TableRow as l } from "./table.js";
-import { tv as u } from "tailwind-variants";
-import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
-import { Fragment as m, createContext as h, use as g, useRef as _ } from "react";
-import { flexRender as v, getCoreRowModel as y, useReactTable as b } from "@tanstack/react-table";
+import { Table as t } from "../table/index.js";
+import { Pagination as n } from "../pagination/pagination.js";
+import { IconArrowUpward as r, IconSwapVert as i } from "./icons.js";
+import { tv as a } from "tailwind-variants";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Fragment as l, createContext as u, use as d, useRef as f } from "react";
+import { flexRender as p, getCoreRowModel as m, useReactTable as h } from "@tanstack/react-table";
 //#region src/data-table/data-table.tsx
-var x = h(null), S = () => {
-	let e = g(x);
+var g = u(null), _ = () => {
+	let e = d(g);
 	if (!e) throw Error("useDataTable must be used within a DataTable.Root");
 	return e;
-}, C = ({ children: e, isLoading: t = !1, onRowClick: n, rowHref: r, linkComponent: i = "a", ...a }) => /* @__PURE__ */ f(x, {
+}, v = ({ children: e, isLoading: t = !1, onRowClick: n, rowHref: r, linkComponent: i = "a", ...a }) => /* @__PURE__ */ s(g, {
 	value: {
-		table: b({
+		table: h({
 			...a,
-			getCoreRowModel: y()
+			getCoreRowModel: m()
 		}),
 		isLoading: t,
-		scrollRef: _(null),
+		scrollRef: f(null),
 		onRowClick: n,
 		rowHref: r,
 		linkComponent: i
 	},
-	children: /* @__PURE__ */ f("div", {
+	children: /* @__PURE__ */ s("div", {
 		"data-slot": "data-table-root",
 		className: "flex min-h-0 flex-1 flex-col",
 		children: e
 	})
 });
-C.displayName = "DataTable.Root";
-var w = ({ children: e }) => /* @__PURE__ */ f("div", {
+v.displayName = "DataTable.Root";
+var y = ({ children: e }) => /* @__PURE__ */ s("div", {
 	"data-slot": "data-table-toolbar",
 	role: "toolbar",
 	className: "flex gap-2 border-b border-border-default-base-primary px-4 py-3",
 	children: e
 });
-w.displayName = "DataTable.ToolBar";
-var T = u({
+y.displayName = "DataTable.ToolBar";
+var b = a({
 	base: "size-4 transition-transform duration-200",
 	variants: { direction: {
 		asc: "",
 		desc: "rotate-180",
 		false: ""
 	} }
-}), E = u({
+}), x = a({
 	base: "flex w-full appearance-none items-center bg-transparent p-0 text-left [font:inherit]",
 	variants: {
 		canSort: {
@@ -57,96 +57,96 @@ var T = u({
 			left: "justify-start"
 		}
 	}
-}), D = (e) => !!e.closest("a, button, [role=\"menu\"]"), O = ({ children: t = /* @__PURE__ */ f(k, {}), size: u = "md", sticky: h = "header", embed: g = !0, enclosed: _ = !1 }) => {
-	let { table: y, isLoading: b, scrollRef: x, onRowClick: C, rowHref: w, linkComponent: O } = S(), A = y.getAllColumns().length;
-	return /* @__PURE__ */ f("div", {
+}), S = (e) => !!e.closest("a, button, [role=\"menu\"]"), C = ({ children: n = /* @__PURE__ */ s(w, {}), size: a = "md", sticky: u = "header", embed: d = !0, enclosed: f = !1 }) => {
+	let { table: m, isLoading: h, scrollRef: g, onRowClick: v, rowHref: y, linkComponent: C } = _(), T = m.getAllColumns().length;
+	return /* @__PURE__ */ s("div", {
 		"data-slot": "data-table-loading-overlay",
-		className: e("flex min-h-0 flex-1 flex-col transition-opacity duration-150", b && "opacity-50"),
-		children: /* @__PURE__ */ p(c, {
-			size: u,
-			sticky: h,
-			embed: g,
-			enclosed: _,
-			ref: x,
-			children: [/* @__PURE__ */ f(o, { children: y.getHeaderGroups().map((e) => /* @__PURE__ */ f(l, { children: e.headers.map((e) => {
-				let t = e.column.columnDef.meta, i = e.column.getCanSort(), a = e.column.getIsSorted(), o = t?.style?.textAlign === "right" || t?.className?.includes("text-right") ? "right" : "left", c = e.isPlaceholder ? null : /* @__PURE__ */ p(d, { children: [v(e.column.columnDef.header, e.getContext()), i && /* @__PURE__ */ f("span", {
+		className: e("flex min-h-0 flex-1 flex-col transition-opacity duration-150", h && "opacity-50"),
+		children: /* @__PURE__ */ c(t.Root, {
+			size: a,
+			sticky: u,
+			embed: d,
+			enclosed: f,
+			ref: g,
+			children: [/* @__PURE__ */ s(t.Head, { children: m.getHeaderGroups().map((e) => /* @__PURE__ */ s(t.Row, { children: e.headers.map((e) => {
+				let n = e.column.columnDef.meta, a = e.column.getCanSort(), l = e.column.getIsSorted(), u = n?.style?.textAlign === "right" || n?.className?.includes("text-right") ? "right" : "left", d = e.isPlaceholder ? null : /* @__PURE__ */ c(o, { children: [p(e.column.columnDef.header, e.getContext()), a && /* @__PURE__ */ s("span", {
 					className: "size-4",
-					children: a ? /* @__PURE__ */ f(n, { className: T({ direction: a }) }) : /* @__PURE__ */ f(r, { className: "size-4" })
+					children: l ? /* @__PURE__ */ s(r, { className: b({ direction: l }) }) : /* @__PURE__ */ s(i, { className: "size-4" })
 				})] });
-				return /* @__PURE__ */ f(s, {
-					...t,
-					"aria-sort": i ? a === "asc" ? "ascending" : a === "desc" ? "descending" : "none" : void 0,
-					children: i ? /* @__PURE__ */ f("button", {
+				return /* @__PURE__ */ s(t.Header, {
+					...n,
+					"aria-sort": a ? l === "asc" ? "ascending" : l === "desc" ? "descending" : "none" : void 0,
+					children: a ? /* @__PURE__ */ s("button", {
 						type: "button",
-						className: E({
+						className: x({
 							canSort: !0,
-							align: o
+							align: u
 						}),
 						onClick: e.column.getToggleSortingHandler(),
 						title: e.column.getNextSortingOrder() === "asc" ? "Sort ascending" : e.column.getNextSortingOrder() === "desc" ? "Sort descending" : "Clear sort",
-						children: c
-					}) : /* @__PURE__ */ f("div", {
-						className: E({
+						children: d
+					}) : /* @__PURE__ */ s("div", {
+						className: x({
 							canSort: !1,
-							align: o
+							align: u
 						}),
-						children: c
+						children: d
 					})
 				}, e.id);
-			}) }, e.id)) }), /* @__PURE__ */ f(i, { children: y.getRowModel().rows.length ? y.getRowModel().rows.map((t) => {
-				let n = w?.(t.original), r = !!C || !!n;
-				return /* @__PURE__ */ f(m, { children: /* @__PURE__ */ f(l, {
-					className: e("has-aria-expanded:bg-bg-default-base-secondary", r && "cursor-pointer"),
-					onClick: r ? (e) => {
-						D(e.target) || !e.currentTarget.contains(e.target) || (C ? C(t.original) : n && e.currentTarget.querySelector("[data-row-link]")?.click());
+			}) }, e.id)) }), /* @__PURE__ */ s(t.Body, { children: m.getRowModel().rows.length ? m.getRowModel().rows.map((n) => {
+				let r = y?.(n.original), i = !!v || !!r;
+				return /* @__PURE__ */ s(l, { children: /* @__PURE__ */ s(t.Row, {
+					className: e("has-aria-expanded:bg-bg-default-base-secondary", i && "cursor-pointer"),
+					onClick: i ? (e) => {
+						S(e.target) || !e.currentTarget.contains(e.target) || (v ? v(n.original) : r && e.currentTarget.querySelector("[data-row-link]")?.click());
 					} : void 0,
-					children: t.getVisibleCells().map((e, t) => {
-						let r = e.column.columnDef.meta;
-						return /* @__PURE__ */ p(a, {
-							...r,
-							children: [t === 0 && n && /* @__PURE__ */ f(O, {
-								href: n,
+					children: n.getVisibleCells().map((e, n) => {
+						let i = e.column.columnDef.meta;
+						return /* @__PURE__ */ c(t.Cell, {
+							...i,
+							children: [n === 0 && r && /* @__PURE__ */ s(C, {
+								href: r,
 								"data-row-link": !0,
 								className: "hidden",
 								tabIndex: -1,
 								"aria-hidden": "true"
-							}), v(e.column.columnDef.cell, e.getContext())]
+							}), p(e.column.columnDef.cell, e.getContext())]
 						}, e.id);
 					})
-				}) }, t.id);
-			}) : b ? null : /* @__PURE__ */ f(l, { children: /* @__PURE__ */ f(a, {
-				colSpan: A,
-				children: /* @__PURE__ */ f("div", {
+				}) }, n.id);
+			}) : h ? null : /* @__PURE__ */ s(t.Row, { children: /* @__PURE__ */ s(t.Cell, {
+				colSpan: T,
+				children: /* @__PURE__ */ s("div", {
 					"data-slot": "table-empty-state",
 					className: "whitespace-normal",
-					children: t
+					children: n
 				})
 			}) }) })]
 		})
 	});
 };
-O.displayName = "DataTable.Table";
-var k = () => /* @__PURE__ */ f("div", {
+C.displayName = "DataTable.Table";
+var w = () => /* @__PURE__ */ s("div", {
 	className: "mb-6 flex flex-col items-center gap-4",
-	children: /* @__PURE__ */ f("div", {
+	children: /* @__PURE__ */ s("div", {
 		className: "text-lg",
-		children: /* @__PURE__ */ f("b", { children: "No results." })
+		children: /* @__PURE__ */ s("b", { children: "No results." })
 	})
-}), A = ({ children: e }) => /* @__PURE__ */ f("div", {
+}), T = ({ children: e }) => /* @__PURE__ */ s("div", {
 	"data-slot": "data-table-pagination",
 	className: "flex justify-end border-t border-border-default-base-primary px-6 py-3",
 	children: e
 });
-A.displayName = "DataTable.Footer";
-var j = (e) => {
-	let { scrollRef: n } = S();
-	return /* @__PURE__ */ f(t, {
+T.displayName = "DataTable.Footer";
+var E = (e) => {
+	let { scrollRef: t } = _();
+	return /* @__PURE__ */ s(n, {
 		...e,
-		onPageChange: (t) => {
-			n.current?.scrollTo({ top: 0 }), e.onPageChange(t);
+		onPageChange: (n) => {
+			t.current?.scrollTo({ top: 0 }), e.onPageChange(n);
 		}
 	});
 };
-j.displayName = "DataTable.Pagination";
+E.displayName = "DataTable.Pagination";
 //#endregion
-export { j as DataTablePagination, O as DataTableTable, A as Footer, C as Root, w as ToolBar, S as useDataTable };
+export { E as DataTablePagination, C as DataTableTable, T as Footer, v as Root, y as ToolBar, _ as useDataTable };

package/src/data-table/icons.d.ts

@@ -16,11 +16,3 @@ export declare const IconArrowUpward: (props: SVGProps<SVGSVGElement>) => import
  * @summary 24px swap-vert icon used as the sortable (unsorted) indicator
  */
 export declare const IconSwapVert: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
-/**
- * Downward chevron glyph used by the row expand/collapse button. Rotates 180°
- * when its row is expanded (driven by `data-state=open`). The fill follows
- * `currentColor` so it inherits the button's text color token.
- *
- * @summary 24px chevron-down icon used by the row expand button
- */
-export declare const IconKeyboardArrowDown: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/src/data-table/icons.js

@@ -22,17 +22,6 @@ var t = (t) => /* @__PURE__ */ e("svg", {
 		fill: "currentColor",
 		d: "M9.163 12.644a.73.73 0 0 1-.534-.216.73.73 0 0 1-.215-.534v-6.53L6.096 7.68a.68.68 0 0 1-.507.207.767.767 0 0 1-.77-.751q0-.303.233-.535l3.47-3.47a.8.8 0 0 1 .297-.197 1.001 1.001 0 0 1 .678 0 .8.8 0 0 1 .3.198l3.493 3.494a.7.7 0 0 1 .22.517.788.788 0 0 1-.763.752.7.7 0 0 1-.526-.225L9.914 5.364v6.54q0 .315-.216.527a.73.73 0 0 1-.535.213m5.682 8.47a1 1 0 0 1-.341-.059.8.8 0 0 1-.3-.197l-3.495-3.495a.7.7 0 0 1-.22-.517.788.788 0 0 1 .763-.752.7.7 0 0 1 .527.225l2.307 2.308v-6.54q0-.315.216-.528a.73.73 0 0 1 .535-.213q.318 0 .534.216a.73.73 0 0 1 .215.534v6.531l2.318-2.317a.68.68 0 0 1 .507-.208.767.767 0 0 1 .77.752q0 .302-.233.535l-3.47 3.469a.8.8 0 0 1-.296.198 1 1 0 0 1-.337.057"
 	})
-}), r = (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: "M12 14.677a.83.83 0 0 1-.633-.256L6.873 9.927a.73.73 0 0 1-.212-.522.7.7 0 0 1 .212-.532.72.72 0 0 1 .527-.217q.31 0 .527.217L12 12.946l4.073-4.073a.73.73 0 0 1 .522-.212.7.7 0 0 1 .532.212q.217.217.217.527a.72.72 0 0 1-.217.527l-4.494 4.494a.83.83 0 0 1-.633.256"
-	})
 });
 //#endregion
-export { t as IconArrowUpward, r as IconKeyboardArrowDown, n as IconSwapVert };
+export { t as IconArrowUpward, n as IconSwapVert };

package/src/data-table/index.d.ts

@@ -1,10 +1,12 @@
-export { tableRecipe } from './table';
-export type { TableRootProps } from './table';
 export { useDataTable } from './data-table';
 export type { DataTableColumnMeta, PaginationState } from './data-table';
+/**
+ * @deprecated Import from `@agentero/design-system/table` instead — that entry
+ * point carries no `@tanstack/react-table` dependency.
+ */
 export declare const Table: {
     Root: {
-        ({ children, ref, ...variants }: import('react').PropsWithChildren<import('./table').TableRootProps>): import("react/jsx-runtime").JSX.Element;
+        ({ children, ref, ...variants }: import('react').PropsWithChildren<import('.').TableRootProps>): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Head: {
@@ -57,6 +59,86 @@ export declare const Table: {
         displayName: string;
     };
 };
+/**
+ * @deprecated Import from `@agentero/design-system/table` instead.
+ */
+export declare const tableRecipe: import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+    };
+    embed: {
+        true: {
+            root: string;
+        };
+    };
+    enclosed: {
+        true: {
+            root: string;
+        };
+    };
+    sticky: {
+        header: {};
+        headerAndFooter: {};
+    };
+}, {
+    root: string[];
+    scroll: string;
+    table: string;
+}, undefined, {
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+    };
+    embed: {
+        true: {
+            root: string;
+        };
+    };
+    enclosed: {
+        true: {
+            root: string;
+        };
+    };
+    sticky: {
+        header: {};
+        headerAndFooter: {};
+    };
+}, {
+    root: string[];
+    scroll: string;
+    table: string;
+}, import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+    };
+    embed: {
+        true: {
+            root: string;
+        };
+    };
+    enclosed: {
+        true: {
+            root: string;
+        };
+    };
+    sticky: {
+        header: {};
+        headerAndFooter: {};
+    };
+}, {
+    root: string[];
+    scroll: string;
+    table: string;
+}, undefined, unknown, unknown, undefined>>;
+/**
+ * @deprecated Import from `@agentero/design-system/table` instead.
+ */
+export type { TableRootProps } from '../table';
 export declare const DataTable: {
     Root: {
         <TData extends import('@tanstack/table-core').RowData>({ children, isLoading, onRowClick, rowHref, linkComponent, ...tableOptions }: import('react').PropsWithChildren<{
@@ -157,10 +239,10 @@ export declare const DataTable: {
     };
     Table: {
         ({ children, size, sticky, embed, enclosed }: {
-            size?: import('./table').TableRootProps["size"];
-            sticky?: import('./table').TableRootProps["sticky"];
-            embed?: import('./table').TableRootProps["embed"];
-            enclosed?: import('./table').TableRootProps["enclosed"];
+            size?: import('.').TableRootProps["size"];
+            sticky?: import('.').TableRootProps["sticky"];
+            embed?: import('.').TableRootProps["embed"];
+            enclosed?: import('.').TableRootProps["enclosed"];
         } & {
             children?: import('react').ReactNode | undefined;
         }): import("react/jsx-runtime").JSX.Element;

package/src/data-table/index.js

@@ -1,22 +1,13 @@
-import { TableBody as e, TableCell as t, TableExpandButton as n, TableExpandedRow as r, TableHead as i, TableHeader as a, TableRoot as o, TableRow as s, TableRowActions as c, tableRecipe as l } from "./table.js";
-import { DataTablePagination as u, DataTableTable as d, Footer as f, Root as p, ToolBar as m, useDataTable as h } from "./data-table.js";
+import { tableRecipe as e } from "../table/table.js";
+import { Table as t } from "../table/index.js";
+import { DataTablePagination as n, DataTableTable as r, Footer as i, Root as a, ToolBar as o, useDataTable as s } from "./data-table.js";
 //#region src/data-table/index.ts
-var g = {
-	Root: o,
-	Head: i,
-	Body: e,
-	Row: s,
-	Header: a,
-	Cell: t,
-	ExpandButton: n,
-	ExpandedRow: r,
-	RowActions: c
-}, _ = {
-	Root: p,
-	ToolBar: m,
-	Table: d,
-	Footer: f,
-	Pagination: u
+var c = t, l = e, u = {
+	Root: a,
+	ToolBar: o,
+	Table: r,
+	Footer: i,
+	Pagination: n
 };
 //#endregion
-export { _ as DataTable, g as Table, l as tableRecipe, h as useDataTable };
+export { u as DataTable, c as Table, l as tableRecipe, s as useDataTable };

package/src/table/icons.d.ts

@@ -0,0 +1,9 @@
+import { SVGProps } from 'react';
+/**
+ * Downward chevron glyph used by the row expand/collapse button. Rotates 180°
+ * when its row is expanded (driven by `data-state=open`). The fill follows
+ * `currentColor` so it inherits the button's text color token.
+ *
+ * @summary 24px chevron-down icon used by the row expand button
+ */
+export declare const IconKeyboardArrowDown: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/src/table/icons.js

@@ -0,0 +1,16 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region src/table/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: "M12 14.677a.83.83 0 0 1-.633-.256L6.873 9.927a.73.73 0 0 1-.212-.522.7.7 0 0 1 .212-.532.72.72 0 0 1 .527-.217q.31 0 .527.217L12 12.946l4.073-4.073a.73.73 0 0 1 .522-.212.7.7 0 0 1 .532.212q.217.217.217.527a.72.72 0 0 1-.217.527l-4.494 4.494a.83.83 0 0 1-.633.256"
+	})
+});
+//#endregion
+export { t as IconKeyboardArrowDown };

package/src/table/index.d.ts

@@ -0,0 +1,57 @@
+export { tableRecipe } from './table';
+export type { TableRootProps } from './table';
+export declare const Table: {
+    Root: {
+        ({ children, ref, ...variants }: import('react').PropsWithChildren<import('./table').TableRootProps>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Head: {
+        ({ children, ...props }: import('react').PropsWithChildren<import('react').HTMLAttributes<HTMLTableSectionElement>>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Body: {
+        ({ children, ...props }: import('react').PropsWithChildren<import('react').HTMLAttributes<HTMLTableSectionElement>>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Row: {
+        ({ className, ...props }: import('react').ComponentProps<"tr">): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Header: {
+        ({ className, ...props }: import('react').PropsWithChildren<import('react').HTMLAttributes<HTMLTableCellElement>>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Cell: {
+        ({ className, ...props }: import('react').PropsWithChildren<import('react').TdHTMLAttributes<HTMLTableCellElement>>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    ExpandButton: {
+        ({ toggleExpanded, isExpanded, className, ...props }: {
+            toggleExpanded: () => void;
+            isExpanded: boolean;
+        } & {
+            children?: import('react').ReactNode;
+            variant?: import('../button').ButtonVariantType;
+            size?: import('../button').ButtonSizeType;
+            status?: "danger";
+            loading?: boolean;
+            disabled?: boolean;
+            iconOnly?: boolean;
+            rounded?: boolean;
+            align?: "center" | "start" | "end" | "justify";
+            fitContent?: boolean;
+            ref?: import('react').Ref<HTMLButtonElement | HTMLAnchorElement>;
+        } & import('react').ButtonHTMLAttributes<HTMLButtonElement> & {
+            asChild?: boolean;
+        }): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    ExpandedRow: {
+        ({ className, ...props }: import('react').PropsWithChildren<import('react').HTMLAttributes<HTMLTableRowElement>>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    RowActions: {
+        ({ children }: import('react').PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};

package/src/table/index.js

@@ -0,0 +1,15 @@
+import { Body as e, Cell as t, ExpandButton as n, ExpandedRow as r, Head as i, Header as a, Root as o, Row as s, RowActions as c, tableRecipe as l } from "./table.js";
+//#region src/table/index.ts
+var u = {
+	Root: o,
+	Head: i,
+	Body: e,
+	Row: s,
+	Header: a,
+	Cell: t,
+	ExpandButton: n,
+	ExpandedRow: r,
+	RowActions: c
+};
+//#endregion
+export { u as Table, l as tableRecipe };

package/src/{data-table → table}/table.d.ts

@@ -100,7 +100,7 @@ export type TableRootProps = TableVariants & {
  *
  * @example
  * ```tsx
- * import { Table } from '@agentero/design-system/data-table';
+ * import { Table } from '@agentero/design-system/table';
  *
  * <Table.Root size="md" sticky="head">
  *   <Table.Head>
@@ -116,7 +116,7 @@ export type TableRootProps = TableVariants & {
  * </Table.Root>
  * ```
  */
-export declare const TableRoot: {
+export declare const Root: {
     ({ children, ref, ...variants }: PropsWithChildren<TableRootProps>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
@@ -125,7 +125,7 @@ export declare const TableRoot: {
  *
  * @summary `<thead>` wrapper for header rows
  */
-export declare const TableHead: {
+export declare const Head: {
     ({ children, ...props }: PropsWithChildren<HTMLAttributes<HTMLTableSectionElement>>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
@@ -134,7 +134,7 @@ export declare const TableHead: {
  *
  * @summary `<tbody>` wrapper
  */
-export declare const TableBody: {
+export declare const Body: {
     ({ children, ...props }: PropsWithChildren<HTMLAttributes<HTMLTableSectionElement>>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
@@ -144,7 +144,7 @@ export declare const TableBody: {
  *
  * @summary Table row element
  */
-export declare const TableRow: {
+export declare const Row: {
     ({ className, ...props }: ComponentProps<"tr">): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
@@ -153,7 +153,7 @@ export declare const TableRow: {
  *
  * @summary Header cell element
  */
-export declare const TableHeader: {
+export declare const Header: {
     ({ className, ...props }: PropsWithChildren<HTMLAttributes<HTMLTableCellElement>>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
@@ -162,11 +162,11 @@ export declare const TableHeader: {
  *
  * @summary Data cell element
  */
-export declare const TableCell: {
+export declare const Cell: {
     ({ className, ...props }: PropsWithChildren<TdHTMLAttributes<HTMLTableCellElement>>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
-type TableExpandButtonProps = {
+type ExpandButtonProps = {
     toggleExpanded: () => void;
     isExpanded: boolean;
 } & ButtonProps;
@@ -175,8 +175,8 @@ type TableExpandButtonProps = {
  *
  * @summary Expand/collapse toggle button for an expandable row
  */
-export declare const TableExpandButton: {
-    ({ toggleExpanded, isExpanded, className, ...props }: TableExpandButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare const ExpandButton: {
+    ({ toggleExpanded, isExpanded, className, ...props }: ExpandButtonProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 /**
@@ -185,7 +185,7 @@ export declare const TableExpandButton: {
  *
  * @summary Detail row shown under an expanded parent row
  */
-export declare const TableExpandedRow: {
+export declare const ExpandedRow: {
     ({ className, ...props }: PropsWithChildren<HTMLAttributes<HTMLTableRowElement>>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
@@ -195,7 +195,7 @@ export declare const TableExpandedRow: {
  *
  * @summary Hover-revealed row action cluster
  */
-export declare const TableRowActions: {
+export declare const RowActions: {
     ({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };