@ratio-ui/core 0.1.1 → 0.3.0

package/dist/components/card/Card.js

@@ -0,0 +1,53 @@
+import { jsx } from "react/jsx-runtime";
+// src/components/card/Card.tsx
+/**
+* A container for a panel of content: a 1px hairline border on white, no shadow and 24px of padding. The design system
+* has no cards, so this is only the hairline container.
+*/
+function Card(props) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card",
+		...props,
+		className: "rt:flex rt:flex-col rt:gap-6 rt:rounded-lg rt:border rt:border-border rt:bg-background rt:p-6"
+	});
+}
+/** The top of a card: its title and description, stacked. */
+function CardHeader(props) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-header",
+		...props,
+		className: "rt:flex rt:flex-col rt:gap-1"
+	});
+}
+/** The title of a card, set in the B4 text style. */
+function CardTitle({ as: Tag = "h3", ...rest }) {
+	return /* @__PURE__ */ jsx(Tag, {
+		"data-slot": "card-title",
+		...rest,
+		className: "rt:text-b4 rt:text-foreground"
+	});
+}
+/** A line under the title that says what the card holds. */
+function CardDescription(props) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "card-description",
+		...props,
+		className: "rt:text-b3 rt:text-foreground-subdued"
+	});
+}
+/** The body of a card. */
+function CardContent(props) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-content",
+		...props
+	});
+}
+/** The foot of a card, a row for its actions. */
+function CardFooter(props) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-footer",
+		...props,
+		className: "rt:flex rt:items-center rt:gap-2"
+	});
+}
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

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

@@ -0,0 +1,2 @@
+import { Card, CardContent, CardContentProps, CardDescription, CardDescriptionProps, CardFooter, CardFooterProps, CardHeader, CardHeaderProps, CardProps, CardTitle, CardTitleProps } from "./Card.js";
+export { Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps };

package/dist/components/card/index.js

@@ -0,0 +1 @@
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./Card.js";

package/dist/components/checkbox/Checkbox.d.ts

@@ -0,0 +1,10 @@
+import { JSX } from "react";
+import { Checkbox } from "@base-ui/react/checkbox";
+/** The props of Checkbox: Base UI's checkbox props, except className, style and render. Give it an aria-label or a label that points to it. */
+export type CheckboxProps = Omit<Checkbox.Root.Props, 'className' | 'style' | 'render'>;
+/**
+ * A 14px box with a 4px radius, drawn with a hairline ring and filled in the primary colour when checked. Set
+ * indeterminate for a select-all that stands for some rows. An invisible 24px area around the box takes the tap.
+ */
+declare function Checkbox$1({ ...props }: CheckboxProps): JSX.Element;
+export { Checkbox$1 as Checkbox };

package/dist/components/checkbox/Checkbox.js

@@ -0,0 +1,28 @@
+import { cn } from "../../lib/cn.js";
+import { Icon } from "../icon/Icon.js";
+import { jsx } from "react/jsx-runtime";
+import { Checkbox } from "@base-ui/react/checkbox";
+// src/components/checkbox/Checkbox.tsx
+/**
+* A 14px box with a 4px radius, drawn with a hairline ring and filled in the primary colour when checked. Set
+* indeterminate for a select-all that stands for some rows. An invisible 24px area around the box takes the tap.
+*/
+function Checkbox$1({ ...props }) {
+	return /* @__PURE__ */ jsx(Checkbox.Root, {
+		"data-slot": "checkbox",
+		className: cn("rt:peer rt:relative rt:flex rt:size-3.5 rt:shrink-0 rt:cursor-pointer rt:items-center rt:justify-center rt:rounded-sm rt:bg-background rt:shadow-ring-hairline rt:transition-colors rt:outline-none", "rt:after:absolute rt:after:-inset-1.25", "rt:hover:bg-primary-tint rt:data-checked:bg-primary rt:data-checked:shadow-none rt:data-checked:hover:bg-primary-hover", "rt:data-indeterminate:bg-primary rt:data-indeterminate:shadow-none rt:data-indeterminate:hover:bg-primary-hover", "rt:focus-visible:focus-ring rt:forced-outline", "rt:aria-invalid:shadow-ring-invalid rt:aria-invalid:data-checked:shadow-ring-invalid rt:aria-invalid:data-indeterminate:shadow-ring-invalid", "rt:data-disabled:cursor-not-allowed rt:data-disabled:opacity-50", "rt:disabled:cursor-not-allowed rt:disabled:opacity-50"),
+		...props,
+		children: /* @__PURE__ */ jsx(Checkbox.Indicator, {
+			"data-slot": "checkbox-indicator",
+			className: "rt:flex rt:items-center rt:justify-center rt:text-primary-foreground",
+			children: props.indeterminate ? /* @__PURE__ */ jsx("span", {
+				"data-slot": "checkbox-dash",
+				className: "rt:block rt:h-px rt:w-2 rt:rounded-sm rt:bg-primary-foreground"
+			}) : /* @__PURE__ */ jsx(Icon, {
+				name: "check",
+				size: 8
+			})
+		})
+	});
+}
+export { Checkbox$1 as Checkbox };

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

@@ -0,0 +1,2 @@
+import { Checkbox, CheckboxProps } from "./Checkbox.js";
+export { Checkbox, type CheckboxProps };

package/dist/components/checkbox/index.js

@@ -0,0 +1 @@
+export { Checkbox } from "./Checkbox.js";

package/dist/components/checkbox-list/CheckboxList.d.ts

@@ -0,0 +1,36 @@
+import { HTMLAttributes, JSX } from "react";
+/** One option in a CheckboxList. */
+export type CheckboxListItem = {
+  /** The value reported in the list of chosen values. */
+  value: string;
+  /** The label beside the box. */
+  label: string;
+  /** An optional line under the label. */
+  description?: string;
+  /** Stops this item being toggled, and select-all leaves it as it is. */
+  disabled?: boolean;
+};
+/** The props of CheckboxList. */
+export type CheckboxListProps = Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'title' | 'onChange' | 'defaultValue'> & {
+  /** The heading. The count of chosen items sits beside it. */
+  title: string;
+  /** The options. */
+  items: CheckboxListItem[];
+  /** The chosen values, when controlled. */
+  value?: string[];
+  /** The chosen values to start with, when not controlled. */
+  defaultValue?: string[];
+  /** Called with the new list of chosen values. */
+  onValueChange?: (value: string[]) => void;
+  /** Adds a "Select all" box that is mixed while only some are chosen. */
+  selectAll?: boolean;
+  /** The label of the select-all box. Defaults to "Select all". */
+  selectAllLabel?: string;
+  /** Writes the count in the heading from the chosen and total counts, already formatted. Defaults to "4 of 6". */
+  countLabel?: (chosen: string, total: string) => string;
+};
+/**
+ * A titled list of checkboxes with the count of chosen items in the heading ("4 of 6"), an optional description under
+ * each label and an optional select-all.
+ */
+export declare function CheckboxList({ title, items, value, defaultValue, onValueChange, selectAll, selectAllLabel, countLabel, ...rest }: CheckboxListProps): JSX.Element;

package/dist/components/checkbox-list/CheckboxList.js

@@ -0,0 +1,93 @@
+import { formatCount } from "../../lib/format.js";
+import { Checkbox } from "../checkbox/Checkbox.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+// src/components/checkbox-list/CheckboxList.tsx
+/**
+* A titled list of checkboxes with the count of chosen items in the heading ("4 of 6"), an optional description under
+* each label and an optional select-all.
+*/
+function CheckboxList({ title, items, value, defaultValue, onValueChange, selectAll, selectAllLabel = "Select all", countLabel = (c, t) => `${c} of ${t}`, ...rest }) {
+	const [inner, setInner] = useState(defaultValue ?? []);
+	const chosen = value ?? inner;
+	const baseId = useId();
+	const set = (next) => {
+		if (value === void 0) setInner(next);
+		onValueChange?.(next);
+	};
+	const chosenCount = items.filter((i) => chosen.includes(i.value)).length;
+	const toggleable = items.filter((i) => !i.disabled);
+	const allOn = toggleable.length > 0 && toggleable.every((i) => chosen.includes(i.value));
+	const someOn = chosenCount > 0;
+	const toggleAll = () => {
+		const locked = chosen.filter((v) => !toggleable.some((i) => i.value === v));
+		set(allOn ? locked : [...locked, ...toggleable.map((i) => i.value)]);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "checkbox-list",
+		role: "group",
+		"aria-labelledby": `${baseId}-title`,
+		...rest,
+		className: "rt:flex rt:flex-col rt:gap-3",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "rt:flex rt:items-baseline rt:justify-between rt:gap-3",
+				children: /* @__PURE__ */ jsxs("span", {
+					id: `${baseId}-title`,
+					className: "rt:text-b4 rt:text-foreground",
+					children: [title, /* @__PURE__ */ jsx("span", {
+						"data-slot": "checkbox-list-count",
+						className: "rt:ml-2 rt:text-b3 rt:text-foreground-subdued",
+						children: countLabel(formatCount(chosenCount), formatCount(items.length))
+					})]
+				})
+			}),
+			selectAll ? /* @__PURE__ */ jsxs("div", {
+				className: "rt:flex rt:items-center rt:gap-2",
+				children: [/* @__PURE__ */ jsx(Checkbox, {
+					id: `${baseId}-all`,
+					checked: allOn,
+					indeterminate: someOn && !allOn,
+					onCheckedChange: toggleAll,
+					disabled: toggleable.length === 0,
+					"aria-label": selectAllLabel
+				}), /* @__PURE__ */ jsx("label", {
+					htmlFor: `${baseId}-all`,
+					className: "rt:cursor-pointer rt:text-b3 rt:text-foreground",
+					children: selectAllLabel
+				})]
+			}) : null,
+			/* @__PURE__ */ jsx("ul", {
+				className: "rt:flex rt:flex-col rt:gap-3",
+				children: items.map((item, index) => {
+					const id = `${baseId}-${index}`;
+					return /* @__PURE__ */ jsxs("li", {
+						className: "rt:flex rt:items-start rt:gap-2",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "rt:mt-0.5 rt:flex",
+							children: /* @__PURE__ */ jsx(Checkbox, {
+								id,
+								"aria-labelledby": `${id}-label`,
+								disabled: item.disabled,
+								checked: chosen.includes(item.value),
+								onCheckedChange: (on) => set(on ? [...chosen, item.value] : chosen.filter((v) => v !== item.value))
+							})
+						}), /* @__PURE__ */ jsxs("span", {
+							className: "rt:flex rt:flex-col",
+							children: [/* @__PURE__ */ jsx("label", {
+								id: `${id}-label`,
+								htmlFor: id,
+								className: "rt:cursor-pointer rt:text-b3 rt:text-foreground",
+								children: item.label
+							}), item.description ? /* @__PURE__ */ jsx("span", {
+								className: "rt:text-b3 rt:text-foreground-subdued",
+								children: item.description
+							}) : null]
+						})]
+					}, item.value);
+				})
+			})
+		]
+	});
+}
+export { CheckboxList };

package/dist/components/checkbox-list/index.d.ts

@@ -0,0 +1,2 @@
+import { CheckboxList, CheckboxListItem, CheckboxListProps } from "./CheckboxList.js";
+export { CheckboxList, type CheckboxListItem, type CheckboxListProps };

package/dist/components/checkbox-list/index.js

@@ -0,0 +1 @@
+export { CheckboxList } from "./CheckboxList.js";

package/dist/components/collapsible/Collapsible.d.ts

@@ -0,0 +1,24 @@
+import { SummaryChip } from "../summary-chips/SummaryChips.js";
+import "../summary-chips/index.js";
+import { JSX, ReactNode, Ref } from "react";
+/** The props of Collapsible. */
+export interface CollapsibleProps {
+  /** The section heading, shown on the trigger. */
+  title: string;
+  /** The values to show as chips while the section is closed. */
+  summary?: readonly SummaryChip[];
+  /** Whether the section is open, when controlled. */
+  open?: boolean;
+  /** Whether the section starts open, when uncontrolled. Defaults to closed. */
+  defaultOpen?: boolean;
+  /** Called when the section opens or closes. */
+  onOpenChange?: (open: boolean) => void;
+  /** Stops the section from opening or closing. */
+  disabled?: boolean;
+  /** The section's content, shown when open. */
+  children: ReactNode;
+  /** Receives the rendered root. */
+  ref?: Ref<HTMLDivElement>;
+}
+/** A section that opens and closes on its heading and, while closed, still shows its values as chips. The panel appears and disappears with no height animation. */
+export declare function Collapsible({ title, summary, open: openProp, defaultOpen, onOpenChange, disabled, children, ref }: CollapsibleProps): JSX.Element;

package/dist/components/collapsible/Collapsible.js

@@ -0,0 +1,58 @@
+import { Icon } from "../icon/Icon.js";
+import { SummaryChips } from "../summary-chips/SummaryChips.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Collapsible } from "@base-ui/react/collapsible";
+// src/components/collapsible/Collapsible.tsx
+/** A section that opens and closes on its heading and, while closed, still shows its values as chips. The panel appears and disappears with no height animation. */
+function Collapsible$1({ title, summary, open: openProp, defaultOpen = false, onOpenChange, disabled, children, ref }) {
+	const [inner, setInner] = useState(defaultOpen);
+	const open = openProp ?? inner;
+	return /* @__PURE__ */ jsxs(Collapsible.Root, {
+		ref,
+		open,
+		onOpenChange: (next) => {
+			setInner(next);
+			onOpenChange?.(next);
+		},
+		disabled,
+		className: "rt:flex rt:flex-col rt:gap-2",
+		children: [
+			/* @__PURE__ */ jsxs(Collapsible.Trigger, {
+				className: "rt:group rt:flex rt:h-7 rt:w-full rt:cursor-pointer rt:items-center rt:gap-2 rt:rounded-md rt:border-0 rt:bg-transparent rt:p-0 rt:text-left rt:text-b3 rt:text-foreground rt:transition-colors rt:focus-visible:focus-ring rt:disabled:cursor-not-allowed rt:disabled:opacity-50 rt:data-disabled:opacity-50",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "rt:group-data-panel-open:hidden",
+						children: /* @__PURE__ */ jsx(Icon, {
+							name: "chevron-right",
+							size: 8
+						})
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "rt:hidden rt:group-data-panel-open:inline",
+						children: /* @__PURE__ */ jsx(Icon, {
+							name: "nav-caret-down",
+							size: 8
+						})
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "rt:text-c2",
+						children: title
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(Collapsible.Panel, {
+				className: "rt:flex rt:flex-col rt:gap-2",
+				children
+			}),
+			!open && summary ? /* @__PURE__ */ jsx("div", {
+				"data-slot": "collapsible-summary",
+				children: /* @__PURE__ */ jsx(SummaryChips, {
+					items: summary,
+					"aria-label": `${title} summary`
+				})
+			}) : null
+		]
+	});
+}
+export { Collapsible$1 as Collapsible };

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

@@ -0,0 +1,2 @@
+import { Collapsible, CollapsibleProps } from "./Collapsible.js";
+export { Collapsible, type CollapsibleProps };

package/dist/components/collapsible/index.js

@@ -0,0 +1 @@
+export { Collapsible } from "./Collapsible.js";

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

@@ -0,0 +1,65 @@
+import { TableProps } from "../table/Table.js";
+import "../table/index.js";
+import { JSX, ReactNode } from "react";
+import { RowData } from "@tanstack/react-table";
+/** The sort the parent has applied: the id of a column and whether it runs from high to low. */
+export type DataTableSort = {
+  id: string;
+  desc: boolean;
+};
+/** One column of a DataTable. */
+export type DataTableColumn<T> = {
+  /** A stable key for the column, also the id passed to `onSortChange`. */
+  id: string;
+  /** The heading text. */
+  header: string;
+  /** Draws the cell for one row. */
+  cell: (row: T) => ReactNode;
+  /** Aligns the heading and cells to the right with tabular figures. Defaults to false. */
+  numeric?: boolean;
+  /** Cuts a long value off with an ellipsis so it stays on one line. Defaults to false. */
+  truncate?: boolean;
+  /** Lets the heading ask the parent to sort by this column. Defaults to false. */
+  sortable?: boolean;
+  /** Keeps the column on a phone; a column that is not essential is hidden there, and with none marked the first stays. Defaults to false. */
+  essential?: boolean;
+};
+/** The props of DataTable: the attributes of Table, plus the columns, the rows and the state the parent owns. */
+export type DataTableProps<T> = Omit<TableProps, 'children'> & {
+  /** The columns, in order. */
+  columns: DataTableColumn<T>[];
+  /** The rows of the page on show, already sorted by the parent. */
+  data: T[];
+  /** A stable id for a row. */
+  getRowId: (row: T) => string;
+  /** Ids of the selected rows. Pass it with `onSelectedIdsChange` to show a checkbox column. */
+  selectedIds?: string[];
+  /** Called with the ids that are selected after a change. */
+  onSelectedIdsChange?: (ids: string[]) => void;
+  /** The label of one row's checkbox: "RYZE - 2mg", which the table prefixes with "Select ". Defaults to "Select row N". */
+  getRowLabel?: (row: T) => string;
+  /** The sort the parent applied, or null for none. */
+  sort?: DataTableSort | null;
+  /** Called with the next sort, or null to clear it. The parent sorts and passes new data. */
+  onSortChange?: (sort: DataTableSort | null) => void;
+  /** The page on show, counting from 1. Pass with `pageSize`, `total` and `onPageChange` to show the footer. */
+  page?: number;
+  /** How many results one page holds. */
+  pageSize?: number;
+  /** How many results there are in all, across every page. */
+  total?: number;
+  /** Called with the page to show. */
+  onPageChange?: (page: number) => void;
+  /** Where a row leads. The first data cell of the row becomes a link to it. On a router, LinkProvider draws it with the app's own link. */
+  rowHref?: (row: T) => string;
+  /** Shown in place of the rows when there are none and the table is not loading. Usually an EmptyState. */
+  empty?: ReactNode;
+  /** Shown in place of the whole table while loading, usually a TableLoader. A falsy value shows the table. */
+  loading?: ReactNode;
+};
+/**
+ * A data table on Table with TanStack Table v9: a selection column, server-side sorting and paging, alignment,
+ * one-line truncation, row links, and empty and loading slots. The parent owns the state (sort, page, selection) and
+ * passes it in. On phones it keeps the columns marked essential and hides the rest.
+ */
+export declare function DataTable<T extends RowData>({ columns: allColumns, data, getRowId, selectedIds, onSelectedIdsChange, getRowLabel, sort, onSortChange, page, pageSize, total, onPageChange, rowHref, empty, loading, ...rest }: DataTableProps<T>): JSX.Element;

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

@@ -0,0 +1,141 @@
+import { Checkbox } from "../checkbox/Checkbox.js";
+import { RatioLink } from "../link-provider/RatioLink.js";
+import { Pagination } from "../pagination/Pagination.js";
+import { Table, TableBody, TableBox, TableCell, TableHead, TableHeader, TableRow } from "../table/Table.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useSyncExternalStore } from "react";
+import { FlexRender, rowSelectionFeature, rowSortingFeature, tableFeatures, useTable } from "@tanstack/react-table";
+// src/components/data-table/DataTable.tsx
+const features = tableFeatures({
+	rowSortingFeature,
+	rowSelectionFeature
+});
+const PHONE_QUERY = "(max-width: 39.99rem)";
+function subscribePhone(notify) {
+	const list = window.matchMedia(PHONE_QUERY);
+	list.addEventListener("change", notify);
+	return () => list.removeEventListener("change", notify);
+}
+function usePhone() {
+	return useSyncExternalStore(subscribePhone, () => window.matchMedia(PHONE_QUERY).matches, () => false);
+}
+/**
+* A data table on Table with TanStack Table v9: a selection column, server-side sorting and paging, alignment,
+* one-line truncation, row links, and empty and loading slots. The parent owns the state (sort, page, selection) and
+* passes it in. On phones it keeps the columns marked essential and hides the rest.
+*/
+function DataTable({ columns: allColumns, data, getRowId, selectedIds, onSelectedIdsChange, getRowLabel, sort = null, onSortChange, page, pageSize, total, onPageChange, rowHref, empty, loading, ...rest }) {
+	const phone = usePhone();
+	const columns = useMemo(() => {
+		if (!phone) return allColumns;
+		const essential = allColumns.filter((c) => c.essential);
+		return essential.length > 0 ? essential : allColumns.slice(0, 1);
+	}, [phone, allColumns]);
+	const selectable = selectedIds !== void 0;
+	const defs = useMemo(() => columns.map((c) => ({
+		id: c.id,
+		header: c.header,
+		accessorFn: () => null,
+		cell: ({ row }) => c.cell(row.original),
+		enableSorting: c.sortable === true,
+		sortDescFirst: false
+	})), [columns]);
+	const sorting = sort ? [sort] : [];
+	const rowSelection = useMemo(() => Object.fromEntries((selectedIds ?? []).map((id) => [id, true])), [selectedIds]);
+	const table = useTable({
+		features,
+		columns: defs,
+		data,
+		getRowId,
+		manualSorting: true,
+		enableRowSelection: selectable,
+		state: {
+			sorting,
+			rowSelection
+		},
+		onSortingChange: (updater) => {
+			const next = typeof updater === "function" ? updater(sorting) : updater;
+			onSortChange?.(next[0] ? {
+				id: next[0].id,
+				desc: next[0].desc
+			} : null);
+		},
+		onRowSelectionChange: (updater) => {
+			const next = typeof updater === "function" ? updater(rowSelection) : updater;
+			onSelectedIdsChange?.(Object.keys(next).filter((id) => next[id]));
+		}
+	});
+	const rows = table.getRowModel().rows;
+	const colSpan = columns.length + (selectable ? 1 : 0);
+	const hasFooter = page !== void 0 && pageSize !== void 0 && total !== void 0 && onPageChange !== void 0;
+	const byId = new Map(columns.map((c) => [c.id, c]));
+	if (loading) return /* @__PURE__ */ jsx(Fragment, { children: loading });
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "data-table",
+		className: "rt:flex rt:w-full rt:flex-col rt:gap-2",
+		children: [/* @__PURE__ */ jsx(TableBox, { children: /* @__PURE__ */ jsxs(Table, {
+			...rest,
+			children: [/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [selectable ? /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsx(Checkbox, {
+				"aria-label": "Select all rows",
+				checked: table.getIsAllRowsSelected() && rows.length > 0,
+				indeterminate: rows.some((r) => r.getIsSelected()) && !table.getIsAllRowsSelected(),
+				onCheckedChange: () => table.toggleAllRowsSelected()
+			}) }) : null, table.getHeaderGroups()[0]?.headers.map((h) => {
+				const c = byId.get(h.column.id);
+				if (!c) return null;
+				const sorted = h.column.getIsSorted();
+				return /* @__PURE__ */ jsx(TableHead, {
+					numeric: c.numeric,
+					"aria-sort": sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : void 0,
+					children: c.sortable ? /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						"aria-label": `Sort by ${c.header}`,
+						className: "rt:inline-flex rt:cursor-pointer rt:items-center rt:gap-1 rt:uppercase rt:focus-visible:focus-ring",
+						onClick: () => h.column.toggleSorting(),
+						children: [/* @__PURE__ */ jsx(FlexRender, { header: h }), /* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							children: sorted === "asc" ? "↑" : sorted === "desc" ? "↓" : null
+						})]
+					}) : /* @__PURE__ */ jsx(FlexRender, { header: h })
+				}, h.id);
+			})] }) }), /* @__PURE__ */ jsx(TableBody, { children: rows.length === 0 ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
+				colSpan,
+				children: empty
+			}) }) : rows.map((row, index) => /* @__PURE__ */ jsxs(TableRow, {
+				selected: row.getIsSelected(),
+				children: [selectable ? /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Checkbox, {
+					"aria-label": getRowLabel ? `Select ${getRowLabel(row.original)}` : `Select row ${index + 1}`,
+					checked: row.getIsSelected(),
+					onCheckedChange: () => row.toggleSelected()
+				}) }) : null, row.getAllCells().map((cell, i) => {
+					const c = byId.get(cell.column.id);
+					if (!c) return null;
+					const content = /* @__PURE__ */ jsx(FlexRender, { cell });
+					const linked = rowHref && i === 0 ? /* @__PURE__ */ jsx(RatioLink, {
+						href: rowHref(row.original),
+						className: "rt:focus-visible:focus-ring",
+						children: content
+					}) : content;
+					return /* @__PURE__ */ jsx(TableCell, {
+						numeric: c.numeric,
+						"data-numeric": c.numeric ? "true" : void 0,
+						children: c.truncate ? /* @__PURE__ */ jsx("span", {
+							className: "rt:block rt:max-w-64 rt:truncate",
+							children: linked
+						}) : linked
+					}, cell.id);
+				})]
+			}, row.id)) })]
+		}) }), hasFooter ? /* @__PURE__ */ jsx("div", {
+			"data-slot": "data-table-pagination",
+			className: "rt:rounded-lg rt:border rt:border-border rt:bg-background rt:px-2",
+			children: /* @__PURE__ */ jsx(Pagination, {
+				page,
+				pageSize,
+				total,
+				onPageChange
+			})
+		}) : null]
+	});
+}
+export { DataTable };

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

@@ -0,0 +1,2 @@
+import { DataTable, DataTableColumn, DataTableProps, DataTableSort } from "./DataTable.js";
+export { DataTable, type DataTableColumn, type DataTableProps, type DataTableSort };

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

@@ -0,0 +1 @@
+export { DataTable } from "./DataTable.js";

package/dist/components/date-picker/DatePicker.d.ts

@@ -0,0 +1,33 @@
+import { CalendarProps } from "../calendar/Calendar.js";
+import "../calendar/index.js";
+import { InputGroupSize } from "../input-group/InputGroup.js";
+import "../input-group/index.js";
+import { InputHTMLAttributes, JSX, Ref } from "react";
+/**
+ * The props of DatePicker: the HTML attributes of an input, except className, style, size and the ones the field sets itself,
+ * with the day as a Date in and out. Mark an invalid field with aria-invalid, which draws the error ring around the group.
+ */
+export type DatePickerProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style' | 'size' | 'type' | 'value' | 'defaultValue' | 'onChange' | 'min' | 'max'> & {
+  /** The day, or null for an empty field. Pass it to control the field. */
+  value?: Date | null;
+  /** The starting day when the field is not controlled. Defaults to empty. */
+  defaultValue?: Date | null;
+  /** Called with the day when a typed date is complete or a day is picked, and with null when the text is cleared. */
+  onValueChange?: (value: Date | null) => void;
+  /** The days that cannot be picked in the calendar, for example { before: new Date() }. */
+  disabledDays?: CalendarProps['disabled'];
+  /** The first month the calendar can show. */
+  startMonth?: Date;
+  /** The last month the calendar can show. */
+  endMonth?: Date;
+  /** The height in px: 36 for forms, 32 for fields inside a table. Defaults to 36. */
+  size?: InputGroupSize;
+  /** Receives the input element. */
+  ref?: Ref<HTMLInputElement>;
+};
+/**
+ * A field that shows a day as DD/MM/YYYY, reads a typed date through the format module and opens a calendar in a popover
+ * from the button at its end. Text that is not a date is marked invalid when the field loses focus, and reports nothing.
+ * Under a name, a form submits the day as YYYY-MM-DD (empty when there is none), never the text on screen.
+ */
+export declare function DatePicker({ value, defaultValue, onValueChange, disabledDays, startMonth, endMonth, size, placeholder, readOnly, disabled, onBlur, ref, name, 'aria-invalid': ariaInvalid, ...rest }: DatePickerProps): JSX.Element;