asheeui 1.1.1 → 2.0.0

package/dist/components/centered/Centered.d.ts

@@ -0,0 +1,49 @@
+import { ElementType, HTMLAttributes } from 'react';
+import { CenteredConfig } from './centered-config';
+type BaseCenteredProps = CenteredConfig & Omit<HTMLAttributes<HTMLDivElement>, "color">;
+/**
+ * Props for the Centered component.
+ */
+export interface CenteredProps extends BaseCenteredProps {
+    /**
+     * Element to render.
+     * Defaults to a `div`.
+     *
+     * @default "div"
+     */
+    as?: ElementType;
+    /**
+     * Content to place in the middle.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * A block placed in the middle of the space it is given.
+ *
+ * Centered resolves its options through the standard configuration cascade, so
+ * `components.centered` can set the axis and the reserved height once for a
+ * whole application. With `contained`, the content keeps a maximum width, which
+ * is what a whole-page centred region needs; without it, the block is as wide as
+ * its parent and only its children are centred.
+ *
+ * @param props - Centered configuration options and element attributes.
+ * @param props.axis - Axis to centre on. Defaults to "both".
+ * @param props.minHeight - Vertical room to reserve first. Defaults to "none".
+ * @param props.contained - Hold the content in a Container. Defaults to false.
+ * @param props.containerSize - Maximum width when contained. Defaults to "lg".
+ * @param props.as - Element to render. Defaults to "div".
+ * @returns The rendered block.
+ *
+ * @example
+ * ```tsx
+ * <Centered minHeight="lg" contained>
+ *   <Card title="Session expired" description="Sign in again to continue." />
+ * </Centered>
+ * ```
+ *
+ * @see Container - The maximum-width column Centered can hold its content in.
+ * @see Split - The two-pane layout, for content that is not a single block.
+ */
+export declare const Centered: import('react').ForwardRefExoticComponent<CenteredProps & import('react').RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=Centered.d.ts.map

package/dist/components/centered/Centered.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Centered.d.ts","sourceRoot":"","sources":["../../../src/components/centered/Centered.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,OAAO,EAAE,KAAK,WAAW,EAAc,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAM1E,OAAO,EACL,KAAK,cAAc,EAEpB,MAAM,mBAAmB,CAAC;AAG3B,KAAK,iBAAiB,GAAG,cAAc,GACrC,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,CAAC;AAEhD;;GAEG;AACH,MAAM,WAAW,aAAc,SAAQ,iBAAiB;IACtD;;;;;OAKG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,QAAQ,0GAgDpB,CAAC"}

package/dist/components/centered/Centered.js

@@ -0,0 +1,32 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import { SPACE_MIN_HEIGHT_CLASS as t } from "../../shared/spacing.js";
+import { useAsheeConfig as n } from "../../libs/context.js";
+import { resolveConfigCascade as r } from "../../utils/resolve-token.js";
+import { Container as i } from "../container/Container.js";
+import { FALLBACK_CENTERED_CONFIG as a } from "./centered-config.js";
+import { CENTERED_AXIS_CLASS as o, CENTERED_BASE_CLASS as s } from "./centered-styles.js";
+import { forwardRef as c } from "react";
+import { jsx as l } from "react/jsx-runtime";
+//#region src/components/centered/Centered.tsx
+var u = c(({ as: c, axis: u, minHeight: d, contained: f, containerSize: p, className: m, children: h, ...g }, _) => {
+	let v = n(), y = r({
+		axis: u,
+		minHeight: d,
+		contained: f,
+		containerSize: p
+	}, v.components?.centered, a), b = /* @__PURE__ */ l(c ?? "div", {
+		ref: _,
+		className: e(s, o[y.axis], t[y.minHeight], "flex-col", m),
+		...g,
+		children: h
+	});
+	return y.contained ? /* @__PURE__ */ l(i, {
+		size: y.containerSize,
+		children: b
+	}) : b;
+});
+u.displayName = "Centered";
+//#endregion
+export { u as Centered };

package/dist/components/centered/centered-config.d.ts

@@ -0,0 +1,63 @@
+import { Space } from '../../shared';
+import { ContainerSize } from '../container/container-config';
+/**
+ * The axes a Centered block can centre on.
+ *
+ * - `both`: centres horizontally and vertically, the arrangement a sign-in card
+ *   or an empty page wants.
+ * - `horizontal`: centres sideways only, for a heading or a single control.
+ * - `vertical`: centres vertically only, when the block's own width is intended.
+ */
+export type CenteredAxis = "both" | "horizontal" | "vertical";
+/**
+ * Theme configuration options for the Centered component.
+ *
+ * Set under `components.centered` in the AsheeUI config. Values feed the
+ * component-level tier of the theme cascade.
+ */
+export interface CenteredConfig {
+    /**
+     * The axis the content is centred on.
+     *
+     * @default "both"
+     */
+    axis?: CenteredAxis;
+    /**
+     * Vertical room the block reserves before centring.
+     * A block that is as tall as its content cannot be centred vertically, so a
+     * consumer chooses how much height the block claims.
+     *
+     * @default "none"
+     */
+    minHeight?: Space;
+    /**
+     * Whether the content is held in a {@link Container}.
+     * Use it when the centred content is a whole page region rather than a single
+     * control, so the content keeps a readable maximum width.
+     *
+     * @default false
+     */
+    contained?: boolean;
+    /**
+     * Maximum content width when `contained` is on.
+     *
+     * @default "lg"
+     */
+    containerSize?: ContainerSize;
+}
+/**
+ * Default config values registered for the Centered component.
+ * The axis and the container width are pinned; the height is not, because a
+ * block that reserves height by default would add space to every layout.
+ */
+export declare const defaultCenteredConfig: CenteredConfig;
+declare module "../../libs/registry" {
+    interface ComponentTypeConfigRegistry {
+        centered: CenteredConfig;
+    }
+}
+/**
+ * Hard fallback values used when no config tier provides a value.
+ */
+export declare const FALLBACK_CENTERED_CONFIG: Required<CenteredConfig>;
+//# sourceMappingURL=centered-config.d.ts.map

package/dist/components/centered/centered-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"centered-config.d.ts","sourceRoot":"","sources":["../../../src/components/centered/centered-config.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAEnE;;;;;;;GAOG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,CAAC;AAE9D;;;;;GAKG;AACH,MAAM,WAAW,cAAc;IAC7B;;;;OAIG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC;IAEpB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAElB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B;AAED;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,EAAE,cAInC,CAAC;AAEF,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,2BAA2B;QACnC,QAAQ,EAAE,cAAc,CAAC;KAC1B;CACF;AAID;;GAEG;AACH,eAAO,MAAM,wBAAwB,EAAE,QAAQ,CAAC,cAAc,CAK7D,CAAC"}

package/dist/components/centered/centered-config.js

@@ -0,0 +1,17 @@
+"use client";
+import { registerComponentDefaults as e } from "../../libs/registry.js";
+//#region src/components/centered/centered-config.ts
+var t = {
+	axis: "both",
+	contained: !1,
+	containerSize: "lg"
+};
+e("centered", t);
+var n = {
+	axis: "both",
+	minHeight: "none",
+	contained: !1,
+	containerSize: "lg"
+};
+//#endregion
+export { n as FALLBACK_CENTERED_CONFIG, t as defaultCenteredConfig };

package/dist/components/centered/centered-styles.d.ts

@@ -0,0 +1,11 @@
+import { CenteredAxis } from './centered-config';
+/**
+ * Centring classes for each axis.
+ * `both` also centres the text, because a block that is centred on both axes is
+ * almost always a short statement; a consumer with a different intent appends
+ * its own class, which wins.
+ */
+export declare const CENTERED_AXIS_CLASS: Record<CenteredAxis, string>;
+/** Shared classes for every centred block. */
+export declare const CENTERED_BASE_CLASS = "flex w-full min-w-0";
+//# sourceMappingURL=centered-styles.d.ts.map

package/dist/components/centered/centered-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"centered-styles.d.ts","sourceRoot":"","sources":["../../../src/components/centered/centered-styles.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEtD;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAI5D,CAAC;AAEF,8CAA8C;AAC9C,eAAO,MAAM,mBAAmB,wBAAwB,CAAC"}

package/dist/components/centered/centered-styles.js

@@ -0,0 +1,9 @@
+"use client";
+//#region src/components/centered/centered-styles.ts
+var e = {
+	both: "items-center justify-center text-center",
+	horizontal: "items-center",
+	vertical: "justify-center"
+}, t = "flex w-full min-w-0";
+//#endregion
+export { e as CENTERED_AXIS_CLASS, t as CENTERED_BASE_CLASS };

package/dist/components/centered/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Centered';
+export * from './centered-config';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/centered/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/centered/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC"}

package/dist/components/centered/index.js

@@ -0,0 +1,3 @@
+export * from "./Centered.js";
+export * from "./centered-config.js";
+export * from "./centered-styles.js";

package/dist/components/chip/Chip.d.ts

@@ -42,6 +42,14 @@ export interface ChipProps extends BaseChipProps {
      * Overrides the default CloseIcon.
      */
     closeIcon?: ReactNode;
+    /**
+     * Accessible name of the remove control.
+     * A list of chips needs each remove control to say what it removes, so pass
+     * the chip's own subject, for example `"Remove invoice.pdf"`.
+     *
+     * @default "Remove chip"
+     */
+    closeLabel?: string;
     /**
      * Chip content.
      * The label text to display inside the chip.

package/dist/components/chip/Chip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/chip/Chip.tsx"],"names":[],"mappings":"AAUA,OAAO,EAEL,KAAK,cAAc,EAEnB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAWf,OAAO,EACL,KAAK,UAAU,EAGhB,MAAM,eAAe,CAAC;AASvB;;GAEG;AACH,KAAK,aAAa,GAAG,UAAU,GAC7B,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,CAAC;AAEzD,MAAM,WAAW,SAAU,SAAQ,aAAa;IAC9C;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,GAAG,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAEvB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAErD;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AACH,eAAO,MAAM,IAAI,sGAqOhB,CAAC"}
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/chip/Chip.tsx"],"names":[],"mappings":"AAUA,OAAO,EAEL,KAAK,cAAc,EAEnB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAWf,OAAO,EACL,KAAK,UAAU,EAGhB,MAAM,eAAe,CAAC;AASvB;;GAEG;AACH,KAAK,aAAa,GAAG,UAAU,GAC7B,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,CAAC;AAEzD,MAAM,WAAW,SAAU,SAAQ,aAAa;IAC9C;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,GAAG,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAEvB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAErD;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AACH,eAAO,MAAM,IAAI,sGAsOhB,CAAC"}

package/dist/components/chip/Chip.js

@@ -11,16 +11,16 @@ import { CHIP_FONT_CLASS as l, CHIP_GAP_CLASS as u, CHIP_HEIGHT_CLASS as d, CHIP
 import { forwardRef as m } from "react";
 import { jsx as h, jsxs as g } from "react/jsx-runtime";
 //#region src/components/chip/Chip.tsx
-var _ = m(({ variant: m, color: _, size: v, radius: y, isDisabled: b = !1, startIcon: x, endIcon: S, avatar: C, dot: w, onClose: T, closeIcon: E, children: D, className: O, style: k, onClick: A, ...j }, M) => {
-	let N = r(), P = N.components?.chip, F = i(m, P?.variant, N.defaultVariant, c.variant), I = F === "underlined" ? "bordered" : F, L = i(_, P?.color, N.defaultColor, c.color), R = i(v, P?.size, void 0, c.size), z = o(y, P?.radius, N.defaultRadius, c.radius), B = a(R, d, c.size), V = a(R, p, c.size), H = a(R, l, c.size), U = a(R, u, c.size), W = a(R, f, c.size), G = a(z, t, c.radius), K = (e) => {
+var _ = m(({ variant: m, color: _, size: v, radius: y, isDisabled: b = !1, startIcon: x, endIcon: S, avatar: C, dot: w, onClose: T, closeIcon: E, closeLabel: D = "Remove chip", children: O, className: k, style: A, onClick: j, ...M }, N) => {
+	let P = r(), F = P.components?.chip, I = i(m, F?.variant, P.defaultVariant, c.variant), L = I === "underlined" ? "bordered" : I, R = i(_, F?.color, P.defaultColor, c.color), z = i(v, F?.size, void 0, c.size), B = o(y, F?.radius, P.defaultRadius, c.radius), V = a(z, d, c.size), H = a(z, p, c.size), U = a(z, l, c.size), W = a(z, u, c.size), G = a(z, f, c.size), K = a(B, t, c.radius), q = (e) => {
 		e.stopPropagation(), !b && T?.(e);
 	};
 	return /* @__PURE__ */ g("div", {
-		ref: M,
+		ref: N,
 		tabIndex: b ? -1 : 0,
 		"aria-disabled": b,
 		onClick: (e) => {
-			b || A?.(e);
+			b || j?.(e);
 		},
 		onKeyDown: (e) => {
 			if (!b && (e.key === "Enter" || e.key === " ")) {
@@ -41,12 +41,12 @@ var _ = m(({ variant: m, color: _, size: v, radius: y, isDisabled: b = !1, start
 					shiftKey: e.shiftKey,
 					type: "click"
 				};
-				A?.(t);
+				j?.(t);
 			}
 		},
-		className: e("inline-flex items-center font-medium transition-all duration-200 select-none shrink-0", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2", n(I, L), B, V, H, U, G, b && "opacity-50 pointer-events-none cursor-not-allowed", A && !b && "cursor-pointer hover:opacity-90 active:scale-[0.98]", O),
-		style: k,
-		...j,
+		className: e("inline-flex items-center font-medium transition-all duration-200 select-none shrink-0", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2", n(L, R), V, H, U, W, K, b && "opacity-50 pointer-events-none cursor-not-allowed", j && !b && "cursor-pointer hover:opacity-90 active:scale-[0.98]", k),
+		style: A,
+		...M,
 		children: [
 			w && /* @__PURE__ */ h("span", {
 				className: "shrink-0 rounded-full",
@@ -57,24 +57,24 @@ var _ = m(({ variant: m, color: _, size: v, radius: y, isDisabled: b = !1, start
 				}
 			}),
 			C && /* @__PURE__ */ h("span", {
-				className: e("inline-flex items-center justify-center shrink-0 scrollbar-hide overflow-hidden rounded-full", W),
+				className: e("inline-flex items-center justify-center shrink-0 scrollbar-hide overflow-hidden rounded-full", G),
 				children: C
 			}),
 			x && !C && /* @__PURE__ */ h("span", {
-				className: e("inline-flex items-center justify-center shrink-0", W),
+				className: e("inline-flex items-center justify-center shrink-0", G),
 				children: x
 			}),
-			D,
+			O,
 			S && !T && /* @__PURE__ */ h("span", {
-				className: e("inline-flex items-center justify-center shrink-0", W),
+				className: e("inline-flex items-center justify-center shrink-0", G),
 				children: S
 			}),
 			T && /* @__PURE__ */ h("button", {
 				type: "button",
-				"aria-label": "Remove chip",
+				"aria-label": D,
 				disabled: b,
-				onClick: K,
-				className: e("inline-flex items-center justify-center shrink-0 rounded-full transition-opacity", "hover:opacity-70 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-current", "opacity-80 -mr-1", W),
+				onClick: q,
+				className: e("inline-flex items-center justify-center shrink-0 rounded-full transition-opacity", "hover:opacity-70 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-current", "opacity-80 -mr-1", G),
 				children: E ?? /* @__PURE__ */ h(s, { className: "w-full h-full" })
 			})
 		]

package/dist/components/data-table/DataTable.d.ts

@@ -0,0 +1,137 @@
+import { ElementType, HTMLAttributes, ReactNode } from 'react';
+import { ColumnDef, TableConfig } from '../table/table-config';
+import { DataTableConfig } from './data-table-config';
+/**
+ * Props for the DataTable component.
+ */
+export interface DataTableProps<TData> extends DataTableConfig, Pick<TableConfig, "variant" | "size" | "color" | "radius">, Omit<HTMLAttributes<HTMLDivElement>, "color" | "onClick" | "title"> {
+    /**
+     * The rows the table shows, in the order the consumer gives them.
+     * The table does not sort, because an order is a decision about the data and
+     * the consumer already has one.
+     */
+    data: TData[];
+    /**
+     * The columns, in order.
+     */
+    columns: ColumnDef<TData>[];
+    /**
+     * Heading above the toolbar.
+     */
+    title?: ReactNode;
+    /**
+     * Sentence under the heading.
+     */
+    description?: ReactNode;
+    /**
+     * Reads the text a row is searched by.
+     * Without it, and without `onSearchChange`, the search control is not
+     * rendered, because a field that cannot search would be a control that does
+     * nothing.
+     */
+    searchAccessor?: (row: TData) => string;
+    /**
+     * Called with the query whenever it changes.
+     * Supplying it is what a consumer that searches on the server does: the table
+     * then reports the query and leaves the filtering to the consumer.
+     */
+    onSearchChange?: (query: string) => void;
+    /**
+     * The page, for a consumer that owns it.
+     */
+    page?: number;
+    /**
+     * The page to open first, for a consumer that does not.
+     *
+     * @default 1
+     */
+    defaultPage?: number;
+    /**
+     * Called with the page the reader asked for.
+     */
+    onPageChange?: (page: number) => void;
+    /**
+     * Identifies a row, so the table can keep its rows stable as they change.
+     */
+    rowKeyAccessor?: (row: TData) => string | number;
+    /**
+     * Called when a row is activated, which also makes the rows interactive.
+     */
+    onRowClick?: (row: TData) => void;
+    /**
+     * Whether the rows are still loading.
+     * While they are, the table is replaced by a loading region rather than shown
+     * empty, because an empty table would say the wrong thing.
+     *
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Controls the consumer places beside the search control.
+     */
+    toolbar?: ReactNode;
+    /**
+     * Element to render the wrapper as.
+     * Defaults to a `div`.
+     *
+     * @default "div"
+     */
+    as?: ElementType;
+}
+/**
+ * A table a list page is built from.
+ *
+ * DataTable composes the framework's parts around `Table`: a search control, a
+ * row count that is announced when it changes, pagination, a loading region and
+ * an empty presentation. Nothing about the table itself is reimplemented, so a
+ * consumer that restyles `Table`, `Pagination`, `EmptyState`, `LoadingState` or
+ * `SearchInput` restyles the table too.
+ *
+ * Searching is client-side when `searchAccessor` is given and the consumer's own
+ * when `onSearchChange` is given; the two may be combined, with the consumer
+ * replacing the rows. A new query starts at the first page, because a query is a
+ * new result set.
+ *
+ * @param props - DataTable configuration options and element attributes.
+ * @param props.data - The rows, in the order they are shown.
+ * @param props.columns - The columns, in order.
+ * @param props.title - Heading above the toolbar.
+ * @param props.description - Sentence under the heading.
+ * @param props.searchAccessor - Reads the text a row is searched by.
+ * @param props.onSearchChange - Called with the query as it changes.
+ * @param props.page - The page, for a controlled consumer.
+ * @param props.defaultPage - The page to open first. Defaults to 1.
+ * @param props.onPageChange - Called with the page the reader asked for.
+ * @param props.pageSize - How many rows a page holds. Defaults to 10.
+ * @param props.paginated - Divide the rows into pages. Defaults to true.
+ * @param props.showRowCount - Report how many rows are shown. Defaults to true.
+ * @param props.isLoading - Replace the rows with a loading region. Defaults to
+ * false.
+ * @param props.toolbar - Controls placed beside the search control.
+ * @param props.emptyTitle - What the table says when it has nothing to show.
+ * @param props.emptyDescription - The sentence under that title.
+ * @param props.as - Element to render. Defaults to "div".
+ * @returns The rendered table.
+ *
+ * @example
+ * ```tsx
+ * <DataTable
+ *   title="Invoices"
+ *   description="Everything issued this quarter."
+ *   data={invoices}
+ *   columns={columns}
+ *   searchAccessor={(invoice) => `${invoice.number} ${invoice.customer}`}
+ *   rowKeyAccessor={(invoice) => invoice.id}
+ *   onRowClick={(invoice) => open(invoice.id)}
+ *   pageSize={20}
+ * />
+ * ```
+ *
+ * @see Table - The table itself, without the search, the count or the paging.
+ * @see EmptyState - The presentation the table uses when it has no rows.
+ */
+export declare function DataTable<TData>({ data, columns, title, description, searchAccessor, onSearchChange, page, defaultPage, onPageChange, rowKeyAccessor, onRowClick, pageSize, paginated, searchable, searchLabel, showRowCount, emptyTitle, emptyDescription, isLoading, toolbar, variant, size, color, radius, as, className, ...rest }: DataTableProps<TData>): import("react").JSX.Element;
+export declare namespace DataTable {
+    var displayName: string;
+}
+//# sourceMappingURL=DataTable.d.ts.map

package/dist/components/data-table/DataTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/components/data-table/DataTable.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAIH,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,cAAc,EACnB,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAUf,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpE,OAAO,EACL,KAAK,eAAe,EAErB,MAAM,qBAAqB,CAAC;AAW7B;;GAEG;AACH,MAAM,WAAW,cAAc,CAAC,KAAK,CACnC,SAAQ,eAAe,EACrB,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC,EAC1D,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;IACrE;;;;OAIG;IACH,IAAI,EAAE,KAAK,EAAE,CAAC;IAEd;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC;IAE5B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,MAAM,CAAC;IAExC;;;;OAIG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEzC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAEtC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,MAAM,GAAG,MAAM,CAAC;IAEjD;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC;IAElC;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;;;OAKG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,EAC/B,IAAI,EACJ,OAAO,EACP,KAAK,EACL,WAAW,EACX,cAAc,EACd,cAAc,EACd,IAAI,EACJ,WAAe,EACf,YAAY,EACZ,cAAc,EACd,UAAU,EACV,QAAQ,EACR,SAAS,EACT,UAAU,EACV,WAAW,EACX,YAAY,EACZ,UAAU,EACV,gBAAgB,EAChB,SAAiB,EACjB,OAAO,EACP,OAAO,EACP,IAAI,EACJ,KAAK,EACL,MAAM,EACN,EAAE,EACF,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,KAAK,CAAC,+BAqJvB;yBAjLe,SAAS"}

package/dist/components/data-table/DataTable.js

@@ -0,0 +1,101 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import { useAsheeConfig as t } from "../../libs/context.js";
+import { resolveConfigCascade as n } from "../../utils/resolve-token.js";
+import { Typography as r } from "../typography/Typography.js";
+import { SectionHeading as i } from "../section-kit/SectionHeading.js";
+import { EmptyState as a } from "../empty-state/EmptyState.js";
+import { LoadingState as ee } from "../loading-state/LoadingState.js";
+import { Pagination as o } from "../pagination/Pagination.js";
+import { SearchInput as s } from "../search-input/SearchInput.js";
+import { Table as c } from "../table/Table.js";
+import { FALLBACK_DATA_TABLE_CONFIG as l } from "./data-table-config.js";
+import { DATA_TABLE_CLASS as u, DATA_TABLE_REGION_CLASS as d } from "./data-table-styles.js";
+import { useMemo as f, useState as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/components/data-table/DataTable.tsx
+function g({ data: g, columns: _, title: v, description: y, searchAccessor: b, onSearchChange: x, page: S, defaultPage: te = 1, onPageChange: C, rowKeyAccessor: w, onRowClick: T, pageSize: E, paginated: D, searchable: O, searchLabel: k, showRowCount: A, emptyTitle: j, emptyDescription: M, isLoading: N = !1, toolbar: P, variant: F, size: I, color: L, radius: R, as: ne, className: z, ...B }) {
+	let V = t(), H = n({
+		searchable: O,
+		searchLabel: k,
+		paginated: D,
+		pageSize: E,
+		showRowCount: A,
+		emptyTitle: j,
+		emptyDescription: M
+	}, V.components?.datatable, l), [U, W] = p(""), [G, K] = p(te), q = S ?? G, J = H.searchable && !!(b || x), Y = f(() => {
+		let e = U.trim().toLowerCase();
+		return !J || !b || !e ? g : g.filter((t) => b(t).toLowerCase().includes(e));
+	}, [
+		g,
+		U,
+		b,
+		J
+	]), X = Math.max(1, H.pageSize), Z = Math.max(1, Math.ceil(Y.length / X)), Q = Math.min(Math.max(1, q), Z), $ = H.paginated ? Y.slice((Q - 1) * X, Q * X) : Y, re = `Showing ${Y.length === 0 ? 0 : (Q - 1) * X + 1} to ${H.paginated ? Math.min(Q * X, Y.length) : Y.length} of ${Y.length}`, ie = (e) => {
+		W(e), Q !== 1 && (S === void 0 && K(1), C?.(1)), x?.(e);
+	}, ae = (e) => {
+		S === void 0 && K(e), C?.(e);
+	}, oe = ne ?? "div", se = !!(v || y);
+	return /* @__PURE__ */ h(oe, {
+		className: e(u, z),
+		...B,
+		children: [
+			se && /* @__PURE__ */ m("div", {
+				className: "flex flex-col gap-1",
+				children: /* @__PURE__ */ m(i, {
+					title: v,
+					description: y
+				})
+			}),
+			(J || P) && /* @__PURE__ */ m("div", {
+				className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between",
+				children: /* @__PURE__ */ h("div", {
+					className: "flex w-full flex-col gap-2 sm:flex-row sm:items-center",
+					children: [J && /* @__PURE__ */ m(s, {
+						className: "w-full sm:max-w-sm",
+						label: H.searchLabel,
+						placeholder: H.searchLabel,
+						onValueChange: ie
+					}), P]
+				})
+			}),
+			/* @__PURE__ */ m("div", {
+				className: d,
+				children: N ? /* @__PURE__ */ m(ee, {}) : $.length === 0 ? /* @__PURE__ */ m(a, {
+					panel: !0,
+					title: H.emptyTitle,
+					description: H.emptyDescription
+				}) : /* @__PURE__ */ m(c, {
+					data: $,
+					columns: _,
+					variant: F,
+					size: I,
+					color: L,
+					radius: R,
+					rowKeyAccessor: w,
+					handleClick: T,
+					isClickable: !!T
+				})
+			}),
+			!N && (H.showRowCount || H.paginated) && /* @__PURE__ */ h("div", {
+				className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between",
+				children: [H.showRowCount && /* @__PURE__ */ m("div", {
+					role: "status",
+					children: /* @__PURE__ */ m(r, {
+						role: "caption",
+						tone: "muted",
+						children: re
+					})
+				}), H.paginated && Z > 1 && /* @__PURE__ */ m(o, {
+					page: Q,
+					pageCount: Z,
+					onPageChange: ae
+				})]
+			})
+		]
+	});
+}
+g.displayName = "DataTable";
+//#endregion
+export { g as DataTable };

package/dist/components/data-table/data-table-config.d.ts

@@ -0,0 +1,75 @@
+/**
+ * DataTable component configuration for AsheeUI.
+ * This file defines the configuration type and defaults for the table
+ * composition: whether it searches and pages, how many rows a page holds,
+ * whether it reports the count, and what it says when there is nothing to show.
+ * It registers the default configuration with the component registry and
+ * provides fallback values for the cascade resolution system.
+ */
+/**
+ * Theme configuration options for the DataTable component.
+ *
+ * Set under `components.datatable` in the AsheeUI config. Values feed the
+ * component-level tier of the theme cascade.
+ */
+export interface DataTableConfig {
+    /**
+     * Whether the table offers a search control.
+     * The control appears only when the table also knows what to search, through
+     * `searchAccessor` or `onSearchChange`, because a field that cannot search
+     * would be a control that does nothing.
+     *
+     * @default true
+     */
+    searchable?: boolean;
+    /**
+     * Placeholder of the search control.
+     *
+     * @default "Search"
+     */
+    searchLabel?: string;
+    /**
+     * Whether the rows are divided into pages.
+     *
+     * @default true
+     */
+    paginated?: boolean;
+    /**
+     * How many rows a page holds.
+     *
+     * @default 10
+     */
+    pageSize?: number;
+    /**
+     * Whether the table reports how many rows it is showing.
+     *
+     * @default true
+     */
+    showRowCount?: boolean;
+    /**
+     * What the table says when there is nothing to show.
+     *
+     * @default "No results"
+     */
+    emptyTitle?: string;
+    /**
+     * The sentence under that title.
+     *
+     * @default "Try a different search, or clear it to see everything."
+     */
+    emptyDescription?: string;
+}
+/**
+ * Default config values registered for the DataTable component.
+ */
+export declare const defaultDataTableConfig: DataTableConfig;
+declare module "../../libs/registry" {
+    interface ComponentTypeConfigRegistry {
+        datatable: DataTableConfig;
+    }
+}
+/**
+ * Hard fallback values used when no config tier provides a value.
+ */
+export declare const FALLBACK_DATA_TABLE_CONFIG: Required<DataTableConfig>;
+//# sourceMappingURL=data-table-config.d.ts.map

package/dist/components/data-table/data-table-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-config.d.ts","sourceRoot":"","sources":["../../../src/components/data-table/data-table-config.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH;;;;;GAKG;AACH,MAAM,WAAW,eAAe;IAC9B;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED;;GAEG;AACH,eAAO,MAAM,sBAAsB,EAAE,eAQpC,CAAC;AAEF,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,2BAA2B;QACnC,SAAS,EAAE,eAAe,CAAC;KAC5B;CACF;AAID;;GAEG;AACH,eAAO,MAAM,0BAA0B,EAAE,QAAQ,CAAC,eAAe,CAQhE,CAAC"}

package/dist/components/data-table/data-table-config.js

@@ -0,0 +1,24 @@
+"use client";
+import { registerComponentDefaults as e } from "../../libs/registry.js";
+//#region src/components/data-table/data-table-config.ts
+var t = {
+	searchable: !0,
+	searchLabel: "Search",
+	paginated: !0,
+	pageSize: 10,
+	showRowCount: !0,
+	emptyTitle: "No results",
+	emptyDescription: "Try a different search, or clear it to see everything."
+};
+e("datatable", t);
+var n = {
+	searchable: !0,
+	searchLabel: "Search",
+	paginated: !0,
+	pageSize: 10,
+	showRowCount: !0,
+	emptyTitle: "No results",
+	emptyDescription: "Try a different search, or clear it to see everything."
+};
+//#endregion
+export { n as FALLBACK_DATA_TABLE_CONFIG, t as defaultDataTableConfig };