@box-kite/react 0.0.1 → 1.0.0

package/components/chart.d.ts

@@ -0,0 +1,82 @@
+import { RefAttributes } from 'react';
+import { BoxProps } from '../box';
+import { ExtractElementFromTag } from '../react/reactTypes';
+import { BoxStyleProps, ComponentsAndVariants } from '@box-kite/core/types';
+import { SvgProps } from './svg';
+/**
+ * The chart micro-primitives: the small drawings a dashboard is made of, as Boxes. Deliberately not a chart
+ * *library* — no axes, no legends, no data transformations; what you get instead is that every prop,
+ * breakpoint and theme works. Two rules run through all four: **shape is an attribute, paint is a class**
+ * (so ten thousand rows share one rule), and a ring's fill is a **rounded fraction**, because a dash length
+ * lands in a class name and still has to transition. Naming is `Svg`'s: no `label` means `aria-hidden`.
+ */
+/**
+ * The props every primitive shares: an `Svg`'s, minus the `viewBox` and `variant` they own and with
+ * `children` narrowed to SVG content — a chart's children are a label in a ring, never a render prop.
+ */
+type ChartProps = Omit<SvgProps, 'viewBox' | 'variant' | 'children'> & {
+    children?: React.ReactNode;
+};
+/** A paint value: a colour token, or the `url(#…)`/`var(--…)` a gradient or a theme provides. */
+type Paint = NonNullable<BoxStyleProps['fill']>;
+export interface SparklineProps extends ChartProps {
+    /** The numbers to draw, oldest first. */
+    data: readonly number[];
+    /** `line` (default), `area` — the line with the space beneath it filled — or `bar`. */
+    variant?: 'line' | 'area' | 'bar';
+    /**
+     * Fix the ends of the value axis. Without them the line uses its own lowest and highest value, so
+     * every row of a table is scaled to itself; with them a column of sparklines is comparable.
+     */
+    min?: number;
+    max?: number;
+}
+/** A line, area or bar chart small enough to sit inside a line of text or a table cell. */
+export declare const Sparkline: import('react').ForwardRefExoticComponent<Omit<SparklineProps, "ref"> & RefAttributes<SVGSVGElement>>;
+/** What a ring and a dial have in common: one value, and how thick the arc drawing it is. */
+export interface ProgressRingProps extends ChartProps {
+    /** How full the arc is, from 0 to 1. Rounded to half a percent — see `ChartUtils.FRACTION_STEP`. */
+    value: number;
+    /** The width of the ring in view units, out of the 100 the box is wide. */
+    thickness?: number;
+    /** The unfilled part of the ring, as the same colour faded — so the track follows the theme too. */
+    trackOpacity?: NonNullable<BoxStyleProps['strokeOpacity']>;
+}
+/** A full circle filled to `value`, starting at twelve o'clock — the percentage-complete ring. */
+export declare const ProgressRing: import('react').ForwardRefExoticComponent<Omit<ProgressRingProps, "ref"> & RefAttributes<SVGSVGElement>>;
+export interface GaugeProps extends ProgressRingProps {
+    /** How far round the dial goes, in degrees. Three quarters of a turn by default. */
+    sweep?: number;
+    /** Where it starts, in degrees clockwise from twelve o'clock. Bottom left by default. */
+    start?: number;
+}
+/** A dial: an arc of `sweep` degrees filled to `value`. A gauge with `sweep={360}` is a ring. */
+export declare const Gauge: import('react').ForwardRefExoticComponent<Omit<GaugeProps, "ref"> & RefAttributes<SVGSVGElement>>;
+export interface MiniDonutProps extends ChartProps {
+    /** One value per segment. Each is drawn as its share of the whole, so they need no total. */
+    data: readonly number[];
+    /** One colour per segment, cycled if there are fewer than there are values. */
+    colors?: readonly Paint[];
+    /** The width of the ring in view units, out of the 100 the box is wide. */
+    thickness?: number;
+}
+/** A ring divided into one segment per value — a pie chart with its middle left for a number. */
+export declare const MiniDonut: import('react').ForwardRefExoticComponent<Omit<MiniDonutProps, "ref"> & RefAttributes<SVGSVGElement>>;
+/**
+ * The series a `<ChartContainer>` draws: `series={['revenue', 'cost']}` takes the palette in order,
+ * `series={{ revenue: 'emerald-600' }}` names its own paint. A name becomes part of a custom-property
+ * name, so it has to be a CSS identifier — a dot-path `dataKey` is skipped rather than taking the rest.
+ */
+export type ChartSeries = readonly string[] | Readonly<Record<string, Paint>>;
+export interface ChartContainerProps<TTag extends keyof React.JSX.IntrinsicElements = 'div', TKey extends keyof ComponentsAndVariants = never> extends BoxProps<TTag, TKey> {
+    /** The series drawn inside, and what colour each of them is. */
+    series?: ChartSeries;
+}
+/**
+ * The theming bridge: a Box that declares the variables a chart reads, so the chart itself names no
+ * colour. `vars` is an ordinary prop, so the palette is themed and responsive like everything else and
+ * lands in a *class* — two containers with the same series share one rule, and it renders on a server.
+ * The names are the ecosystem's, so a chart copied from shadcn works unchanged. It adds no ARIA.
+ */
+export declare const ChartContainer: <TTag extends keyof React.JSX.IntrinsicElements = "div", TKey extends keyof ComponentsAndVariants = never>(props: ChartContainerProps<TTag, TKey> & RefAttributes<ExtractElementFromTag<TTag>>) => React.ReactNode;
+export {};

package/components/chart.mjs

@@ -0,0 +1,261 @@
+import { Circle as e, Path as t, Svg as n } from "./svg.mjs";
+import { forwardRef as r } from "react";
+import { mergeDeep as i } from "@box-kite/core";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import c from "@box-kite/react";
+//#region src/utils/chart/chartUtils.ts
+var l;
+(function(e) {
+	let t = e.VIEW = 100, n = e.CENTRE = t / 2, r = e.FRACTION_STEP = .005;
+	function i(e) {
+		return Math.round(e * 100) / 100;
+	}
+	function a(e) {
+		return Math.round(Math.min(Math.max(e, 0), 1) / r) * r;
+	}
+	e.fraction = a;
+	function o(e, r = {}) {
+		if (e.length === 0) return [];
+		let a = r.min ?? Math.min(...e), o = (r.max ?? Math.max(...e)) - a, s = (e) => i(o === 0 ? n : t - (e - a) / o * t);
+		if (e.length === 1) return [{
+			x: 0,
+			y: s(e[0])
+		}, {
+			x: t,
+			y: s(e[0])
+		}];
+		let c = t / (e.length - 1);
+		return e.map((e, t) => ({
+			x: i(t * c),
+			y: s(e)
+		}));
+	}
+	e.points = o;
+	function s(e) {
+		return e.length === 0 ? "" : e.map((e, t) => `${t === 0 ? "M" : "L"}${e.x} ${e.y}`).join("");
+	}
+	e.linePath = s;
+	function c(e) {
+		if (e.length === 0) return "";
+		let n = e[e.length - 1];
+		return `${s(e)}L${n.x} ${t}L${e[0].x} ${t}Z`;
+	}
+	e.areaPath = c;
+	function l(e, n = {}, r = .25) {
+		if (e.length === 0) return "";
+		let a = t / e.length, s = i(a * (1 - r)), c = i((a - s) / 2);
+		return o(e, n).map((e, n) => {
+			let r = Math.min(e.y, t - 1);
+			return `M${i(n * a + c)} ${r}h${s}v${i(t - r)}h${-s}Z`;
+		}).join("");
+	}
+	e.barsPath = l;
+	function u(e) {
+		return i(n - e / 2);
+	}
+	e.radius = u;
+	function d(e) {
+		return i(2 * Math.PI * e);
+	}
+	e.circumference = d;
+	function f(e, t) {
+		return {
+			strokeDasharray: i(e),
+			strokeDashoffset: i(e * (1 - a(t)))
+		};
+	}
+	e.dash = f;
+	function p(e, t) {
+		let r = (t - 90) * Math.PI / 180;
+		return {
+			x: i(n + e * Math.cos(r)),
+			y: i(n + e * Math.sin(r))
+		};
+	}
+	function m(e, t) {
+		return i(d(e) * (Math.min(Math.abs(t), 360) / 360));
+	}
+	e.arcLength = m;
+	function h(e, t, n) {
+		if (Math.abs(n) >= 360) {
+			let n = p(e, t), r = p(e, t + 180);
+			return `M${n.x} ${n.y}A${e} ${e} 0 0 1 ${r.x} ${r.y}A${e} ${e} 0 0 1 ${n.x} ${n.y}`;
+		}
+		let r = p(e, t), i = p(e, t + n), a = +(Math.abs(n) > 180), o = n < 0 ? 0 : 1;
+		return `M${r.x} ${r.y}A${e} ${e} 0 ${a} ${o} ${i.x} ${i.y}`;
+	}
+	e.arcPath = h;
+	function g(e, t) {
+		let n = e.reduce((e, t) => e + Math.max(t, 0), 0);
+		if (n <= 0) return [];
+		let r = 0;
+		return e.map((e, o) => {
+			let s = a(Math.max(e, 0) / n), c = i(t * s), l = i(r * 360);
+			return r += s, {
+				strokeDasharray: `${c} ${i(t - c)}`,
+				rotate: l,
+				value: e,
+				index: o
+			};
+		});
+	}
+	e.donutSegments = g;
+	let _ = e.PALETTE = [
+		"sky-500",
+		"emerald-500",
+		"amber-500",
+		"violet-500",
+		"rose-500",
+		"cyan-500"
+	];
+	e.DARK_PALETTE = [
+		"sky-400",
+		"emerald-400",
+		"amber-400",
+		"violet-400",
+		"rose-400",
+		"cyan-400"
+	];
+	function v(e) {
+		return e.reduce((e, t, n) => (e[`chart-${n + 1}`] = t, e), {});
+	}
+	e.paletteVariables = v;
+	function y(e, t = _.length) {
+		return (Array.isArray(e) ? e.map((e, n) => [e, `var(--chart-${n % t + 1})`]) : Object.entries(e)).reduce((e, [t, n]) => (e[`color-${t}`] = n, e), {});
+	}
+	e.seriesVariables = y;
+})(l ||= {});
+var u = l, d = `0 0 ${u.VIEW} ${u.VIEW}`, f = u.PALETTE;
+function p(e, r) {
+	let { data: i, variant: c = "line", min: l, max: f, children: p, ...m } = e, h = {
+		min: l,
+		max: f
+	}, g = u.points(i, h);
+	return /* @__PURE__ */ s(n, {
+		viewBox: d,
+		preserveAspectRatio: "none",
+		vectorEffect: "non-scaling-stroke",
+		width: "100%",
+		height: "1.5rem",
+		overflow: "visible",
+		stroke: "currentColor",
+		fill: "currentColor",
+		strokeWidth: 1.5,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		ref: r,
+		...m,
+		children: [c === "bar" ? /* @__PURE__ */ o(t, {
+			d: u.barsPath(i, h),
+			stroke: "none"
+		}) : /* @__PURE__ */ s(a, { children: [c === "area" && /* @__PURE__ */ o(t, {
+			d: u.areaPath(g),
+			stroke: "none",
+			fillOpacity: .2
+		}), /* @__PURE__ */ o(t, {
+			d: u.linePath(g),
+			fill: "none"
+		})] }), p]
+	});
+}
+var m = /* @__PURE__ */ r(p);
+m.displayName = "Sparkline";
+function h(t, r) {
+	let { value: i, thickness: a = 10, trackOpacity: c = .2, children: l, ...f } = t, p = u.radius(a), m = u.circumference(p);
+	return /* @__PURE__ */ s(n, {
+		viewBox: d,
+		width: "3rem",
+		height: "3rem",
+		stroke: "currentColor",
+		fill: "none",
+		strokeWidth: a,
+		strokeLinecap: "round",
+		ref: r,
+		...f,
+		children: [
+			/* @__PURE__ */ o(e, {
+				cx: u.CENTRE,
+				cy: u.CENTRE,
+				r: p,
+				strokeOpacity: c
+			}),
+			/* @__PURE__ */ o(e, {
+				cx: u.CENTRE,
+				cy: u.CENTRE,
+				r: p,
+				transform: `rotate(-90 ${u.CENTRE} ${u.CENTRE})`,
+				...u.dash(m, i)
+			}),
+			l
+		]
+	});
+}
+var g = /* @__PURE__ */ r(h);
+g.displayName = "ProgressRing";
+function _(e, r) {
+	let { value: i, thickness: a = 10, trackOpacity: c = .2, sweep: l = 270, start: f = 225, children: p, ...m } = e, h = u.radius(a), g = u.arcLength(h, l), _ = u.arcPath(h, f, l);
+	return /* @__PURE__ */ s(n, {
+		viewBox: d,
+		width: "4rem",
+		height: "4rem",
+		stroke: "currentColor",
+		fill: "none",
+		strokeWidth: a,
+		strokeLinecap: "round",
+		ref: r,
+		...m,
+		children: [
+			/* @__PURE__ */ o(t, {
+				d: _,
+				strokeOpacity: c
+			}),
+			/* @__PURE__ */ o(t, {
+				d: _,
+				...u.dash(g, i)
+			}),
+			p
+		]
+	});
+}
+var v = /* @__PURE__ */ r(_);
+v.displayName = "Gauge";
+function y(t, r) {
+	let { data: i, colors: a = f, thickness: c = 20, children: l, ...p } = t, m = u.radius(c), h = u.circumference(m);
+	return /* @__PURE__ */ s(n, {
+		viewBox: d,
+		width: "3rem",
+		height: "3rem",
+		fill: "none",
+		strokeWidth: c,
+		ref: r,
+		...p,
+		children: [u.donutSegments(i, h).map((t) => /* @__PURE__ */ o(e, {
+			cx: u.CENTRE,
+			cy: u.CENTRE,
+			r: m,
+			stroke: a[t.index % a.length],
+			strokeDasharray: t.strokeDasharray,
+			transform: `rotate(${t.rotate - 90} ${u.CENTRE} ${u.CENTRE})`
+		}, t.index)), l]
+	});
+}
+var b = /* @__PURE__ */ r(y);
+b.displayName = "MiniDonut";
+function x(e, t) {
+	let { series: n, vars: r, theme: a, ...s } = e, l = {
+		...u.paletteVariables(u.PALETTE),
+		...n ? u.seriesVariables(n) : {},
+		...r
+	}, d = i({ dark: { vars: u.paletteVariables(u.DARK_PALETTE) } }, a ?? {});
+	return /* @__PURE__ */ o(c, {
+		ref: t,
+		vars: l,
+		theme: d,
+		...s
+	});
+}
+var S = r(x);
+S.displayName = "ChartContainer";
+var C = S;
+//#endregion
+export { C as ChartContainer, v as Gauge, b as MiniDonut, g as ProgressRing, m as Sparkline };

package/components/checkbox.cjs

@@ -0,0 +1 @@
+"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../react-shared.cjs"),t=require("../box.cjs"),n=require("../forms.cjs");let r=require("react"),i=require("react/jsx-runtime");var a=[`name`,`onInput`,`onChange`,`autoFocus`,`readOnly`,`value`,`defaultChecked`];function o(o,s){let{label:c,labelProps:l,...u}=o,d=Array.isArray(o.indeterminate)?o.indeterminate[0]:o.indeterminate,f=typeof d==`boolean`&&d,p=e.t.buildProps(u,a,{type:`checkbox`,...f?{"aria-checked":`mixed`}:{}}),m=(0,r.useRef)(null);return(0,r.useImperativeHandle)(s,()=>m.current),(0,r.useEffect)(()=>{m.current&&(m.current.indeterminate=f)},[m,f]),(0,i.jsx)(n.n,{label:c,labelProps:l,children:(0,i.jsx)(t.default,{tag:`input`,ref:m,component:`checkbox`,...p})})}var s=(0,r.forwardRef)(o);s.displayName=`Checkbox`,exports.default=s;

package/components/checkbox.d.ts

@@ -0,0 +1,28 @@
+import { RefAttributes } from 'react';
+import { BoxTagProps, BoxProps } from '../box';
+import { OmitTagProps } from '../react/boxProps';
+import { ComponentsAndVariants } from '@box-kite/core/types';
+declare const tagProps: readonly ["name", "onInput", "onChange", "autoFocus", "readOnly", "value", "defaultChecked"];
+type TagPropsType = (typeof tagProps)[number];
+type CheckboxProps<TKey extends keyof ComponentsAndVariants> = Omit<BoxProps<'input', TKey>, 'tag' | 'props'>;
+type CheckboxTagProps = OmitTagProps<BoxTagProps<'input'>, TagPropsType | 'type'>;
+interface Props<TKey extends keyof ComponentsAndVariants> extends CheckboxProps<TKey> {
+    name?: string;
+    props?: CheckboxTagProps;
+    onInput?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    value?: string | number;
+    autoFocus?: boolean;
+    readOnly?: boolean;
+    defaultChecked?: boolean;
+    /**
+     * The text beside the checkbox — rendered inside a `<label>` that wraps the input, so the
+     * association is the component's job. Without it a consumer has to wire `htmlFor`/`id` by hand,
+     * and a checkbox with no label is the single most common accessibility failure there is.
+     */
+    label?: React.ReactNode;
+    /** Styles for the wrapping `<label>`: the row's layout, not the box's own appearance. */
+    labelProps?: BoxProps<'label'>;
+}
+declare const _default: <TKey extends keyof ComponentsAndVariants = "checkbox">(props: Props<TKey> & RefAttributes<HTMLInputElement>) => React.ReactNode;
+export default _default;

package/components/checkbox.mjs

@@ -0,0 +1,38 @@
+"use client";
+import { t as e } from "../react-shared.mjs";
+import t from "../box.mjs";
+import { n } from "../forms.mjs";
+import { forwardRef as r, useEffect as i, useImperativeHandle as a, useRef as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+//#region src/components/checkbox.tsx
+var c = [
+	"name",
+	"onInput",
+	"onChange",
+	"autoFocus",
+	"readOnly",
+	"value",
+	"defaultChecked"
+];
+function l(r, l) {
+	let { label: u, labelProps: d, ...f } = r, p = Array.isArray(r.indeterminate) ? r.indeterminate[0] : r.indeterminate, m = typeof p == "boolean" && p, h = e.buildProps(f, c, {
+		type: "checkbox",
+		...m ? { "aria-checked": "mixed" } : {}
+	}), g = o(null);
+	return a(l, () => g.current), i(() => {
+		g.current && (g.current.indeterminate = m);
+	}, [g, m]), /* @__PURE__ */ s(n, {
+		label: u,
+		labelProps: d,
+		children: /* @__PURE__ */ s(t, {
+			tag: "input",
+			ref: g,
+			component: "checkbox",
+			...h
+		})
+	});
+}
+var u = r(l);
+u.displayName = "Checkbox";
+//#endregion
+export { u as default };

package/components/dataGrid/components/dataGridBody.d.ts

@@ -0,0 +1,7 @@
+import { default as GridModel } from '../models/gridModel';
+interface Props<TRow> {
+    grid: GridModel<TRow>;
+    scrollTop: number;
+}
+export default function DataGridBody<TRow>(props: Props<TRow>): import("react").JSX.Element;
+export {};

package/components/dataGrid/components/dataGridBottomBar.d.ts

@@ -0,0 +1,6 @@
+import { default as GridModel } from '../models/gridModel';
+interface Props<TRow> {
+    grid: GridModel<TRow>;
+}
+export default function DataGridBottomBar<TRow>(props: Props<TRow>): import("react").JSX.Element;
+export {};

package/components/dataGrid/components/dataGridCell.d.ts

@@ -0,0 +1,15 @@
+import { BoxProps } from '../../../box';
+import { default as CellModel } from '../models/cellModel';
+import { default as GroupRowCellModel } from '../models/groupRowCellModel';
+interface Props<TRow> extends BoxProps {
+    children: React.ReactNode;
+    cell: CellModel<TRow> | GroupRowCellModel<TRow>;
+    /** Navigation coordinates. `columnIndex` counts rendered cells, which a group row has fewer of. */
+    row: number;
+    columnIndex: number;
+    /** 1-based `aria-colindex`, when the cell does not sit at `columnIndex`. */
+    ariaColIndex?: number;
+    ariaColSpan?: number;
+}
+export default function DataGridCell<TRow>(props: Props<TRow>): import("react").JSX.Element;
+export {};

package/components/dataGrid/components/dataGridCellRowDetail.d.ts

@@ -0,0 +1,6 @@
+import { default as CellModel } from '../models/cellModel';
+interface Props<TRow> {
+    cell: CellModel<TRow>;
+}
+export default function DataGridCellRowDetail<TRow>(props: Props<TRow>): import("react").JSX.Element;
+export {};

package/components/dataGrid/components/dataGridCellRowSelection.d.ts

@@ -0,0 +1,6 @@
+import { default as CellModel } from '../models/cellModel';
+interface Props<TRow> {
+    cell: CellModel<TRow>;
+}
+export default function DataGridCellRowSelection<TRow>(props: Props<TRow>): import("react").JSX.Element;
+export {};

package/components/dataGrid/components/dataGridCellText.d.ts

@@ -0,0 +1,6 @@
+import { default as CellModel } from '../models/cellModel';
+interface Props<TRow> {
+    cell: CellModel<TRow>;
+}
+export default function DataGridCellText<TRow>(props: Props<TRow>): import("react").JSX.Element;
+export {};

package/components/dataGrid/components/dataGridColumnFilter.d.ts

@@ -0,0 +1,9 @@
+import { default as ColumnModel } from '../models/columnModel';
+interface Props<TRow> {
+    column: ColumnModel<TRow>;
+}
+/**
+ * Renders the appropriate filter input for the column's resolved filter type.
+ */
+export default function DataGridColumnFilter<TRow>(props: Props<TRow>): import("react").JSX.Element | null;
+export {};

package/components/dataGrid/components/dataGridColumnGroups.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+import { default as GridModel } from '../models/gridModel';
+interface Props<TRow> {
+    grid: GridModel<TRow>;
+}
+export default function DataGridColumnGroups<TRow>(props: Props<TRow>): React.JSX.Element | null;
+export {};

package/components/dataGrid/components/dataGridContent.d.ts

@@ -0,0 +1,6 @@
+import { default as GridModel } from '../models/gridModel';
+interface Props<TRow> {
+    grid: GridModel<TRow>;
+}
+export default function DataGridContent<TRow>(props: Props<TRow>): import("react").JSX.Element;
+export {};

package/components/dataGrid/components/dataGridDetailRow.d.ts

@@ -0,0 +1,8 @@
+import { default as DetailRowModel } from '../models/detailRowModel';
+interface Props<TRow> {
+    row: DetailRowModel<TRow>;
+    /** Position in the whole row list, not in the rendered window. */
+    index: number;
+}
+export default function DataGridDetailRow<TRow>(props: Props<TRow>): import("react").JSX.Element;
+export {};

package/components/dataGrid/components/dataGridEmptyColumns.d.ts

@@ -0,0 +1,6 @@
+import { default as GridModel } from '../models/gridModel';
+interface Props<TRow> {
+    grid: GridModel<TRow>;
+}
+export default function DataGridEmptyColumns<TRow>(props: Props<TRow>): import("react").JSX.Element;
+export {};

package/components/dataGrid/components/dataGridFilterCell.d.ts

@@ -0,0 +1,11 @@
+import { default as ColumnModel } from '../models/columnModel';
+import { default as GridModel } from '../models/gridModel';
+interface Props<TRow> {
+    column: ColumnModel<TRow>;
+    grid: GridModel<TRow>;
+    /** Navigation coordinates: the filter row, and this cell's column along it. */
+    row: number;
+    columnIndex: number;
+}
+export default function DataGridFilterCell<TRow>(props: Props<TRow>): import("react").JSX.Element;
+export {};

package/components/dataGrid/components/dataGridFilterRow.d.ts

@@ -0,0 +1,6 @@
+import { default as GridModel } from '../models/gridModel';
+interface Props<TRow> {
+    grid: GridModel<TRow>;
+}
+export default function DataGridFilterRow<TRow>(props: Props<TRow>): import("react").JSX.Element | null;
+export {};

package/components/dataGrid/components/dataGridGlobalFilter.d.ts

@@ -0,0 +1,6 @@
+import { default as GridModel } from '../models/gridModel';
+interface Props<TRow> {
+    grid: GridModel<TRow>;
+}
+export default function DataGridGlobalFilter<TRow>(props: Props<TRow>): import("react").JSX.Element;
+export {};

package/components/dataGrid/components/dataGridGroupRow.d.ts

@@ -0,0 +1,8 @@
+import { default as GroupRowModel } from '../models/groupRowModel';
+interface Props<TRow> {
+    row: GroupRowModel<TRow>;
+    /** Position in the whole row list, not in the rendered window. */
+    index: number;
+}
+export default function DataGridGroupRow<TRow>(props: Props<TRow>): import("react").JSX.Element;
+export {};

package/components/dataGrid/components/dataGridHeader.d.ts

@@ -0,0 +1,6 @@
+import { default as GridModel } from '../models/gridModel';
+interface Props<TRow> {
+    grid: GridModel<TRow>;
+}
+export default function DataGridHeader<TRow>(props: Props<TRow>): import("react").JSX.Element;
+export {};

package/components/dataGrid/components/dataGridHeaderCell.d.ts

@@ -0,0 +1,9 @@
+import { default as ColumnModel } from '../models/columnModel';
+interface Props<TRow> {
+    column: ColumnModel<TRow>;
+    /** Navigation coordinates: which header row this is, and where the cell sits along it. */
+    row: number;
+    columnIndex: number;
+}
+export default function DataGridHeaderCell<TRow>(props: Props<TRow>): import("react").JSX.Element;
+export {};

package/components/dataGrid/components/dataGridHeaderCellContextMenu.d.ts

@@ -0,0 +1,11 @@
+import { default as ColumnModel } from '../models/columnModel';
+interface Props<TRow> {
+    column: ColumnModel<TRow>;
+}
+/**
+ * The column's menu — APG's menu button, on top of `Overlay`. The items are data rather than JSX because
+ * the pattern needs them as a list: `useRovingFocus` numbers them for the arrows and the typeahead, and
+ * which exist changes with the column's state. Sections are a rendering detail on top of that list.
+ */
+export default function DataGridHeaderCellContextMenu<TRow>(props: Props<TRow>): import("react").JSX.Element;
+export {};

package/components/dataGrid/components/dataGridHeaderCellResizer.d.ts

@@ -0,0 +1,14 @@
+import { default as ColumnModel } from '../models/columnModel';
+interface Props<TRow> {
+    column: ColumnModel<TRow>;
+    /** The header cell this separator sits in — `aria-controls`, the pane it resizes. */
+    controls: string;
+}
+/**
+ * The column resizer, which is APG's window splitter: a `separator` with a value in pixels, its own tab
+ * stop, and the arrows that move it. The drag and the keyboard run the same model at the same cost — each
+ * step paints the widths straight onto the grid element and React is told once, when the gesture ends
+ * (a press is a gesture too; it ends on `keyup`).
+ */
+export default function DataGridHeaderCellResizer<TRow>(props: Props<TRow>): import("react").JSX.Element;
+export {};

package/components/dataGrid/components/dataGridLoader.d.ts

@@ -0,0 +1,11 @@
+import { default as GridModel } from '../models/gridModel';
+interface Props<TRow> {
+    grid: GridModel<TRow>;
+}
+/**
+ * The indeterminate loading bar: a 40%-wide bar sliding off one edge to the other, over and over. The
+ * sweep is `rb-datagrid-loader`, registered with the engine's own keyframes, and the animation props
+ * live in the bar's component styles — this component draws three Boxes and nothing else.
+ */
+export default function DataGridLoader<TRow>(props: Props<TRow>): import("react").JSX.Element;
+export {};

package/components/dataGrid/components/dataGridPagination.d.ts

@@ -0,0 +1,6 @@
+import { default as GridModel } from '../models/gridModel';
+interface Props<TRow> {
+    grid: GridModel<TRow>;
+}
+export default function DataGridPagination<TRow>(props: Props<TRow>): import("react").JSX.Element | null;
+export {};

package/components/dataGrid/components/dataGridRow.d.ts

@@ -0,0 +1,8 @@
+import { default as RowModel } from '../models/rowModel';
+interface Props<TRow> {
+    row: RowModel<TRow>;
+    /** Position in the whole row list, not in the rendered window. */
+    index: number;
+}
+export default function DataGridRow<TRow>(props: Props<TRow>): import("react").JSX.Element;
+export {};

package/components/dataGrid/components/dataGridTopBar.d.ts

@@ -0,0 +1,6 @@
+import { default as GridModel } from '../models/gridModel';
+interface Props<TRow> {
+    grid: GridModel<TRow>;
+}
+export default function DataGridTopBar<TRow>(props: Props<TRow>): import("react").JSX.Element;
+export {};

package/components/dataGrid/components/dataGridTopBarContextMenu.d.ts

@@ -0,0 +1,6 @@
+import { default as GridModel } from '../models/gridModel';
+interface Props<TRow> {
+    grid: GridModel<TRow>;
+}
+export default function DataGridTopBarContextMenu<TRow>(props: Props<TRow>): import("react").JSX.Element;
+export {};