@agentero/design-system 0.8.5 → 0.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.8.5",
+	"version": "0.9.1",
 	"description": "A React component library built with Tailwind CSS v4 and Radix UI primitives",
 	"type": "module",
 	"license": "Apache-2.0",
@@ -33,6 +33,10 @@
 			"types": "./src/button/index.d.ts",
 			"import": "./src/button/index.js"
 		},
+		"./data-table": {
+			"types": "./src/data-table/index.d.ts",
+			"import": "./src/data-table/index.js"
+		},
 		"./divider": {
 			"types": "./src/divider/index.d.ts",
 			"import": "./src/divider/index.js"
@@ -67,7 +71,8 @@
 	"peerDependencies": {
 		"react": "^19.2.4",
 		"react-dom": "^19.2.4",
-		"tailwindcss": "^4.0.0"
+		"tailwindcss": "^4.0.0",
+		"@tanstack/react-table": "^8.21.3"
 	},
 	"dependencies": {
 		"@radix-ui/react-avatar": "^1.1.11",

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

@@ -0,0 +1,116 @@
+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';
+/**
+ * Shape a column's `meta` may carry; spread onto the `<th>`/`<td>`.
+ * `style.textAlign` also drives header content alignment.
+ */
+export type DataTableColumnMeta = HTMLAttributes<HTMLTableCellElement> & {
+    style?: CSSProperties;
+};
+type DataTableContextValue<TData extends RowData> = {
+    table: TableType<TData>;
+    isLoading: boolean;
+    scrollRef: RefObject<HTMLDivElement | null>;
+    onRowClick?: (row: TData) => void;
+    rowHref?: (row: TData) => string;
+    linkComponent: ElementType;
+};
+/**
+ * Accesses the DataTable context (the TanStack table instance and shared
+ * config). Must be called within a `DataTable.Root`.
+ *
+ * @summary Access the DataTable context and table instance
+ */
+export declare const useDataTable: () => DataTableContextValue<unknown>;
+type DataTableProps<TData extends RowData> = Omit<TableOptions<TData>, 'getCoreRowModel'>;
+type DataTableRootProps<TData extends RowData> = DataTableProps<TData> & {
+    /** Dims the table while data is loading and suppresses the empty state. */
+    isLoading?: boolean;
+    /** Called with the row's data when a non-interactive part of the row is clicked. */
+    onRowClick?: (row: TData) => void;
+    /** Returns an href for a row; the row becomes a link (see `linkComponent`). */
+    rowHref?: (row: TData) => string;
+    /** Renders the per-row link when `rowHref` is set. Defaults to `'a'`; pass a
+     * framework link (e.g. Next.js `Link`) for client-side navigation. */
+    linkComponent?: ElementType;
+};
+type DataTableTableProps = PropsWithChildren<{
+    /** Row density: `sm` (48px), `md` (64px), `lg` (88px). Defaults to `'md'`. */
+    size?: TableRootProps['size'];
+    /** Which edges stay sticky on scroll. Defaults to `'header'`. */
+    sticky?: TableRootProps['sticky'];
+    /** Embedded-in-page style: drops the row dividers and tightens the edge gutter to 1rem. Defaults to `true`. */
+    embed?: TableRootProps['embed'];
+}>;
+/**
+ * Offset/limit pagination state shape, for callers driving server-side paging.
+ *
+ * @property {number} offset - Zero-based index of the first item on the page.
+ * @property {number} limit - Number of items per page.
+ */
+export type PaginationState = {
+    offset: number;
+    limit: number;
+};
+/**
+ * Data-driven table compound built on TanStack Table and the `Table` primitive.
+ * Compose `Root` (owns the table instance) with `ToolBar`, `Table` (headers/rows,
+ * sorting, navigation, empty state), and `Footer` + `Pagination`. For hand-rendered
+ * rows without TanStack, drop to the `Table` primitive.
+ *
+ * @summary Data-driven table compound (sorting, toolbar, pagination) over TanStack
+ * @see {@link https://tanstack.com/table/latest|TanStack Table}
+ * @namespace DataTable
+ *
+ * @example
+ * ```tsx
+ * import { DataTable } from '@agentero/design-system/data-table';
+ * import { createColumnHelper } from '@tanstack/react-table';
+ *
+ * const columnHelper = createColumnHelper<User>();
+ * const columns = [
+ *   columnHelper.accessor('name', { header: 'Name', enableSorting: true }),
+ *   columnHelper.accessor('email', { header: 'Email' })
+ * ];
+ *
+ * <DataTable.Root data={users} columns={columns}>
+ *   <DataTable.ToolBar>
+ *     <SearchInput />
+ *   </DataTable.ToolBar>
+ *   <DataTable.Table />
+ *   <DataTable.Footer>
+ *     <DataTable.Pagination
+ *       currentPage={page}
+ *       pageSize={10}
+ *       totalCount={total}
+ *       onPageChange={setPage}
+ *     />
+ *   </DataTable.Footer>
+ * </DataTable.Root>
+ * ```
+ */
+export declare const DataTable: {
+    Root: {
+        <TData extends RowData>({ children, isLoading, onRowClick, rowHref, linkComponent, ...tableOptions }: PropsWithChildren<DataTableRootProps<TData>>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    ToolBar: {
+        ({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Table: {
+        ({ children, size, sticky, embed }: DataTableTableProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Footer: {
+        ({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Pagination: {
+        (props: PaginationProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export {};

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

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

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

@@ -0,0 +1,26 @@
+import { SVGProps } from 'react';
+/**
+ * Upward arrow glyph rendered inside a sortable column header when that column
+ * is actively sorted. Rotates 180° via a CSS class to indicate descending
+ * order. The fill follows `currentColor` so it inherits the header's text
+ * color token.
+ *
+ * @summary 24px arrow-upward icon used as the active sort indicator
+ */
+export declare const IconArrowUpward: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Vertical swap glyph rendered inside a sortable column header that is not
+ * currently sorted, signalling the column can be sorted. The fill follows
+ * `currentColor` so it inherits the header's text color token.
+ *
+ * @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

@@ -0,0 +1,38 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region src/data-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: "m11.25 7.373-5.17 5.17a.7.7 0 0 1-.521.22.74.74 0 0 1-.532-.236.78.78 0 0 1-.225-.527.7.7 0 0 1 .225-.527l6.34-6.34A.83.83 0 0 1 12 4.877q.18 0 .337.058a.8.8 0 0 1 .296.198l6.34 6.34q.209.208.213.515a.75.75 0 0 1-.213.539.74.74 0 0 1-.534.233.74.74 0 0 1-.535-.233L12.75 7.373V18.75a.73.73 0 0 1-.215.535.73.73 0 0 1-.535.215.73.73 0 0 1-.534-.215.73.73 0 0 1-.216-.535z"
+	})
+}), n = (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.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 };

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

@@ -0,0 +1,4 @@
+export { Table, tableRecipe } from './table';
+export type { TableRootProps } from './table';
+export { DataTable, useDataTable } from './data-table';
+export type { DataTableColumnMeta, PaginationState } from './data-table';

package/src/data-table/index.js

@@ -0,0 +1,3 @@
+import { Table as e, tableRecipe as t } from "./table.js";
+import { DataTable as n, useDataTable as r } from "./data-table.js";
+export { n as DataTable, e as Table, t as tableRecipe, r as useDataTable };

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

@@ -0,0 +1,124 @@
+import { ComponentProps, HTMLAttributes, PropsWithChildren, Ref, TdHTMLAttributes } from 'react';
+import { VariantProps } from 'tailwind-variants';
+import { ButtonProps } from '../button';
+/**
+ * Style recipe for the Table container. Inline spacing flows from two custom
+ * properties, so the `embed` variant retunes the edge gutter via one of them.
+ *
+ * @summary tailwind-variants recipe backing the Table container styles
+ */
+export declare const tableRecipe: import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+    };
+    embed: {
+        true: {
+            root: string;
+        };
+    };
+    sticky: {
+        header: {};
+        headerAndFooter: {};
+    };
+}, {
+    root: string[];
+    scroll: string;
+    table: string;
+}, undefined, {
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+    };
+    embed: {
+        true: {
+            root: string;
+        };
+    };
+    sticky: {
+        header: {};
+        headerAndFooter: {};
+    };
+}, {
+    root: string[];
+    scroll: string;
+    table: string;
+}, import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+    };
+    embed: {
+        true: {
+            root: string;
+        };
+    };
+    sticky: {
+        header: {};
+        headerAndFooter: {};
+    };
+}, {
+    root: string[];
+    scroll: string;
+    table: string;
+}, undefined, unknown, unknown, undefined>>;
+type TableVariants = VariantProps<typeof tableRecipe>;
+export type TableRootProps = TableVariants & {
+    ref?: Ref<HTMLDivElement>;
+};
+type TableExpandButtonProps = {
+    toggleExpanded: () => void;
+    isExpanded: boolean;
+} & ButtonProps;
+/**
+ * Low-level presentational table primitive — a thin themed wrapper over native
+ * `<table>` markup (scrolling, sticky rows, row sizing, dividers, hover,
+ * expandable rows). Compose from `Root` / `Head` / `Body` / `Row` / `Header` /
+ * `Cell`, plus `ExpandButton` / `ExpandedRow` and `RowActions`. For
+ * sorting/toolbar/pagination, prefer `DataTable`, built on top of this.
+ *
+ * @summary Low-level themed table primitive (scrolling, sticky, sizing, rows)
+ * @namespace Table
+ */
+export declare const Table: {
+    Root: {
+        ({ children, ref, ...variants }: PropsWithChildren<TableRootProps>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Head: {
+        ({ children, ...props }: PropsWithChildren<HTMLAttributes<HTMLTableSectionElement>>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Body: {
+        ({ children, ...props }: PropsWithChildren<HTMLAttributes<HTMLTableSectionElement>>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Row: {
+        ({ className, ...props }: ComponentProps<"tr">): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Header: {
+        ({ className, ...props }: PropsWithChildren<HTMLAttributes<HTMLTableCellElement>>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Cell: {
+        ({ className, ...props }: PropsWithChildren<TdHTMLAttributes<HTMLTableCellElement>>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    ExpandButton: {
+        ({ toggleExpanded, isExpanded, className, ...props }: TableExpandButtonProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    ExpandedRow: {
+        ({ className, ...props }: PropsWithChildren<HTMLAttributes<HTMLTableRowElement>>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    RowActions: {
+        ({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export {};

package/src/data-table/table.js

@@ -0,0 +1,182 @@
+"use client";
+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";
+//#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({
+	slots: {
+		root: ["flex min-h-0 flex-1 flex-col overflow-hidden", "[--table-cell-padding-inline:1rem] [--table-cell-padding-inline-ends:1.5rem]"],
+		scroll: "min-h-0 flex-1 overflow-auto focus-visible:outline-none",
+		table: "w-full has-[[data-slot=table-empty-state]]:h-full"
+	},
+	variants: {
+		size: {
+			sm: {},
+			md: {},
+			lg: {}
+		},
+		embed: { true: { root: "[--table-cell-padding-inline-ends:1rem]" } },
+		sticky: {
+			header: {},
+			headerAndFooter: {}
+		}
+	},
+	defaultVariants: { size: "md" }
+}), l = r(null), u = () => {
+	let e = i(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, {
+		value: {
+			header: y({ sticky: f(i) }),
+			cell: x({ size: r }),
+			headRow: _({ body: !1 }),
+			bodyRow: _({
+				body: !0,
+				divider: !a,
+				stickyFooter: p(i)
+			})
+		},
+		children: /* @__PURE__ */ o("div", {
+			"data-slot": "table-root",
+			className: s.root(),
+			children: /* @__PURE__ */ o("div", {
+				"data-slot": "table-scroll",
+				ref: t,
+				tabIndex: 0,
+				className: s.scroll(),
+				children: /* @__PURE__ */ o("table", {
+					"data-slot": "table",
+					className: s.table(),
+					children: e
+				})
+			})
+		})
+	});
+};
+m.displayName = "Table.Root";
+var h = ({ children: e, ...t }) => /* @__PURE__ */ o(d, {
+	value: "head",
+	children: /* @__PURE__ */ o("thead", {
+		"data-slot": "table-head",
+		...t,
+		children: e
+	})
+});
+h.displayName = "Table.Head";
+var g = ({ children: e, ...t }) => /* @__PURE__ */ o(d, {
+	value: "body",
+	children: /* @__PURE__ */ o("tbody", {
+		"data-slot": "table-body",
+		...t,
+		children: e
+	})
+});
+g.displayName = "Table.Body";
+var _ = a({
+	base: "transition-colors duration-150",
+	variants: {
+		body: {
+			true: [
+				"hover:bg-bg-default-base-secondary hover:has-[[data-slot=table-empty-state]]:bg-transparent",
+				"[&:hover_[data-slot=table-row-actions]>*]:opacity-100",
+				"[&:hover_[data-slot=table-row-actions]]:after:opacity-100"
+			],
+			false: ""
+		},
+		divider: {
+			true: "border-t border-border-default-base-primary",
+			false: ""
+		},
+		stickyFooter: {
+			true: "last:sticky last:bottom-0 last:z-[1] last:bg-bg-default-base-primary last:shadow-[0_-0.03125rem_0_0_var(--color-border-default-base-primary)]",
+			false: ""
+		}
+	}
+}), v = ({ className: t, ...n }) => {
+	let { headRow: r, bodyRow: a } = u(), s = i(d) === "body";
+	return /* @__PURE__ */ o("tr", {
+		"data-slot": "table-row",
+		className: e(s ? a : r, t),
+		...n
+	});
+};
+v.displayName = "Table.Row";
+var y = a({
+	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",
+		false: ""
+	} }
+}), b = ({ className: t, ...n }) => {
+	let { header: r } = u();
+	return /* @__PURE__ */ o("th", {
+		"data-slot": "table-header",
+		className: e(r, t),
+		...n
+	});
+};
+b.displayName = "Table.Header";
+var x = a({
+	base: `align-middle text-sm whitespace-nowrap ${s}`,
+	variants: { size: {
+		sm: "h-12",
+		md: "h-16",
+		lg: "h-22"
+	} },
+	defaultVariants: { size: "md" }
+}), S = ({ className: t, ...n }) => {
+	let { cell: r } = u();
+	return /* @__PURE__ */ o("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, {
+	variant: "ghost",
+	onClick: r,
+	className: e(C(), a),
+	"data-state": i ? "open" : "default",
+	"data-slot": "table-expand-button",
+	...s,
+	children: /* @__PURE__ */ o(n, {})
+});
+w.displayName = "Table.ExpandButton";
+var T = ({ className: t, ...n }) => /* @__PURE__ */ o("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: [
+	"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", {
+	"data-slot": "table-row-actions",
+	className: E(),
+	children: e
+});
+D.displayName = "Table.RowActions";
+var O = {
+	Root: m,
+	Head: h,
+	Body: g,
+	Row: v,
+	Header: b,
+	Cell: S,
+	ExpandButton: w,
+	ExpandedRow: T,
+	RowActions: D
+};
+//#endregion
+export { O as Table, c as tableRecipe };