@ratio-ui/core 0.1.1 → 0.2.0

package/dist/components/app-shell/AppShell.d.ts

@@ -0,0 +1,22 @@
+import { JSX, ReactNode } from "react";
+/** The props of AppShell. */
+export type AppShellProps = {
+  /** The side navigation, for example SideNav. It sits at the left of the top bar and the content. */
+  sideNav?: ReactNode;
+  /** The top bar, for example TopBar. It spans the width beside the side nav. */
+  topBar?: ReactNode;
+  /** Whether the side navigation drawer is open on a phone. Set it with onNavOpenChange to control the drawer. */
+  navOpen?: boolean;
+  /** Whether the drawer starts open on a phone when navOpen is not set. Defaults to false. */
+  defaultNavOpen?: boolean;
+  /** Called when the drawer asks to open or close on a phone: the menu button in TopBar, Escape, or choosing a row. */
+  onNavOpenChange?: (open: boolean) => void;
+  /** The page content, centred in a column that is 1152px wide at most. */
+  children?: ReactNode;
+};
+/**
+ * The frame of every page: the side nav at the left, the top bar above and the content below it. It fills the height of its
+ * container, so the app gives it a height and the content scrolls beside the side nav and under the top bar. The parts are slots, so the shell does not depend on their components.
+ * On a phone the side nav is a drawer: the menu button in TopBar opens it, and Escape or choosing a row closes it.
+ */
+export declare function AppShell({ sideNav, topBar, navOpen, defaultNavOpen, onNavOpenChange, children }: AppShellProps): JSX.Element;

package/dist/components/app-shell/AppShell.js

@@ -0,0 +1,39 @@
+import { ShellNavContext } from "./context.js";
+import { useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/app-shell/AppShell.tsx
+/**
+* The frame of every page: the side nav at the left, the top bar above and the content below it. It fills the height of its
+* container, so the app gives it a height and the content scrolls beside the side nav and under the top bar. The parts are slots, so the shell does not depend on their components.
+* On a phone the side nav is a drawer: the menu button in TopBar opens it, and Escape or choosing a row closes it.
+*/
+function AppShell({ sideNav, topBar, navOpen, defaultNavOpen = false, onNavOpenChange, children }) {
+	const [inner, setInner] = useState(defaultNavOpen);
+	const id = useId();
+	const open = navOpen ?? inner;
+	const setOpen = (next) => {
+		if (navOpen === void 0) setInner(next);
+		onNavOpenChange?.(next);
+	};
+	return /* @__PURE__ */ jsx(ShellNavContext, {
+		value: sideNav ? {
+			open,
+			setOpen,
+			id
+		} : void 0,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "rt:flex rt:h-full rt:bg-page rt:font-sans rt:text-foreground",
+			children: [sideNav, /* @__PURE__ */ jsxs("div", {
+				className: "rt:flex rt:min-w-0 rt:flex-1 rt:flex-col",
+				children: [topBar, /* @__PURE__ */ jsx("main", {
+					className: "rt:min-h-0 rt:flex-1 rt:overflow-y-auto rt:px-3 rt:py-6 rt:md:px-6",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "rt:mx-auto rt:w-full rt:max-w-content",
+						children
+					})
+				})]
+			})]
+		})
+	});
+}
+export { AppShell };

package/dist/components/app-shell/context.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+// src/components/app-shell/context.ts
+/** The drawer state of the nearest AppShell that has a side nav, or undefined outside one. */
+const ShellNavContext = createContext(void 0);
+export { ShellNavContext };

package/dist/components/app-shell/index.d.ts

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

package/dist/components/app-shell/index.js

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

package/dist/components/avatar/Avatar.d.ts

@@ -0,0 +1,22 @@
+import { JSX, Ref } from "react";
+/** The size of an avatar: sm is 24px, default 32px and lg 40px. */
+export type AvatarSize = 'sm' | 'default' | 'lg';
+/** The shape of an avatar: round for a person, square for a store. */
+export type AvatarShape = 'round' | 'square';
+/** The props of Avatar. */
+export type AvatarProps = {
+  /** The full name of the person or store. It is the accessible label, and its first letters are the initials. */
+  name: string;
+  /** The address of a picture. The initials show until it loads and when it fails. */
+  src?: string;
+  /** Round for a person, square for a store. Defaults to round. */
+  shape?: AvatarShape;
+  /** Defaults to default, which is 32px. */
+  size?: AvatarSize;
+  /** Receives the rendered element. */
+  ref?: Ref<HTMLSpanElement>;
+};
+/** The first letters of the first two words of a name, in capitals: "My Store" gives MS, and an empty name gives nothing. */
+export declare function getInitials(name: string): string;
+/** A picture or the initials of a person or a store: round for people, square for stores. */
+export declare function Avatar({ name, src, shape, size, ref }: AvatarProps): JSX.Element;

package/dist/components/avatar/Avatar.js

@@ -0,0 +1,38 @@
+import { cn } from "../../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Avatar } from "@base-ui/react/avatar";
+// src/components/avatar/Avatar.tsx
+/** The first letters of the first two words of a name, in capitals: "My Store" gives MS, and an empty name gives nothing. */
+function getInitials(name) {
+	return name.trim().split(/\s+/).filter(Boolean).slice(0, 2).map((word) => Array.from(word)[0]?.toUpperCase() ?? "").join("");
+}
+const SIZE_CLASSES = {
+	sm: "rt:size-6 rt:text-c2",
+	default: "rt:size-8 rt:text-c2",
+	lg: "rt:size-10 rt:text-b2"
+};
+const SHAPE_CLASSES = {
+	round: "rt:rounded-3xl",
+	square: "rt:rounded-md"
+};
+/** A picture or the initials of a person or a store: round for people, square for stores. */
+function Avatar$1({ name, src, shape = "round", size = "default", ref }) {
+	const radius = SHAPE_CLASSES[shape];
+	return /* @__PURE__ */ jsxs(Avatar.Root, {
+		ref,
+		role: "img",
+		"aria-label": name,
+		"data-shape": shape,
+		"data-size": size,
+		className: cn("rt:relative rt:inline-flex rt:shrink-0 rt:overflow-hidden rt:select-none", SIZE_CLASSES[size], radius),
+		children: [src !== void 0 && /* @__PURE__ */ jsx(Avatar.Image, {
+			src,
+			alt: "",
+			className: "rt:aspect-square rt:size-full rt:object-cover"
+		}), /* @__PURE__ */ jsx(Avatar.Fallback, {
+			className: cn("rt:flex rt:size-full rt:items-center rt:justify-center rt:bg-muted rt:text-foreground-subdued", radius),
+			children: getInitials(name)
+		})]
+	});
+}
+export { Avatar$1 as Avatar, getInitials };

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

@@ -0,0 +1,2 @@
+import { Avatar, AvatarProps, AvatarShape, AvatarSize, getInitials } from "./Avatar.js";
+export { Avatar, type AvatarProps, type AvatarShape, type AvatarSize, getInitials };

package/dist/components/avatar/index.js

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

package/dist/components/button/Button.d.ts

@@ -0,0 +1,37 @@
+import { JSX, Ref } from "react";
+import { Button } from "@base-ui/react/button";
+/**
+ * How a button looks. main is the filled accent action, one per view. secondary is a ring on a transparent fill. ghost is
+ * text only with a fill on hover, link is accent text with an underline on hover. destructive is for actions that delete
+ * or remove, and needs a confirm step after it.
+ */
+export type ButtonVariant = 'main' | 'secondary' | 'ghost' | 'link' | 'destructive';
+interface ButtonBaseProps extends Omit<Button.Props, 'focusableWhenDisabled' | 'className' | 'style' | 'render' | 'children' | 'aria-label'> {
+  /** The look of the button. Defaults to main. */
+  variant?: ButtonVariant;
+  /** Gives the button back to the caller's ref. */
+  ref?: Ref<HTMLButtonElement>;
+}
+interface LabelledButtonProps extends ButtonBaseProps {
+  /** Draws a 28px square for one icon. Needs aria-label, because there is no text to name the button. */
+  iconOnly?: false;
+  /** The label, optionally with an Icon beside it. */
+  children?: React.ReactNode;
+}
+interface IconButtonProps extends ButtonBaseProps {
+  /** Draws a 28px square for one icon. Needs aria-label, because there is no text to name the button. */
+  iconOnly: true;
+  /** The accessible name of an icon-only button. */
+  'aria-label': string;
+  /** One Icon. */
+  children: React.ReactNode;
+}
+/** Props of Button: a labelled button, or an icon-only one that has to carry an aria-label. */
+export type ButtonProps = LabelledButtonProps | IconButtonProps;
+/**
+ * The design system's 28px button in five looks: main, secondary, ghost, link and destructive. Hover and pressed change
+ * the fill only, disabled is 50% opacity and the colours fade in 120ms. Put an Icon beside the label, or use iconOnly with
+ * an aria-label. It has no size prop: 28px is the only height.
+ */
+declare function Button$1({ variant, iconOnly, type, ...props }: ButtonProps): JSX.Element;
+export { Button$1 as Button };

package/dist/components/button/Button.js

@@ -0,0 +1,41 @@
+import { cn } from "../../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { Button } from "@base-ui/react/button";
+import { cva } from "class-variance-authority";
+// src/components/button/Button.tsx
+const buttonVariants = cva("rt:inline-flex rt:h-7 rt:shrink-0 rt:items-center rt:justify-center rt:rounded-md rt:border-0 rt:text-btn rt:whitespace-nowrap rt:select-none rt:cursor-pointer rt:transition-colors rt:focus-visible:focus-ring rt:disabled:pointer-events-none rt:disabled:opacity-50 rt:data-disabled:pointer-events-none rt:data-disabled:opacity-50", {
+	variants: {
+		variant: {
+			main: "rt:gap-1.5 rt:bg-primary rt:text-primary-foreground rt:hover:bg-primary-hover rt:active:bg-primary-hover",
+			secondary: "rt:gap-1 rt:bg-secondary rt:text-secondary-foreground rt:shadow-ring-strong rt:forced-outline rt:hover:bg-primary-tint rt:active:bg-primary-tint",
+			ghost: "rt:gap-1 rt:bg-transparent rt:text-secondary-foreground rt:hover:bg-muted rt:active:bg-muted",
+			link: "rt:gap-1 rt:bg-transparent rt:text-primary rt:hover:underline rt:active:underline",
+			destructive: "rt:gap-1 rt:bg-destructive-fill rt:text-destructive-foreground rt:shadow-ring-destructive rt:forced-outline rt:hover:bg-destructive-hover rt:active:bg-destructive-hover"
+		},
+		iconOnly: {
+			false: "rt:px-2 rt:py-1",
+			true: "rt:w-7 rt:p-0"
+		}
+	},
+	defaultVariants: {
+		variant: "main",
+		iconOnly: false
+	}
+});
+/**
+* The design system's 28px button in five looks: main, secondary, ghost, link and destructive. Hover and pressed change
+* the fill only, disabled is 50% opacity and the colours fade in 120ms. Put an Icon beside the label, or use iconOnly with
+* an aria-label. It has no size prop: 28px is the only height.
+*/
+function Button$1({ variant = "main", iconOnly = false, type = "button", ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "button",
+		type,
+		className: cn(buttonVariants({
+			variant,
+			iconOnly
+		})),
+		...props
+	});
+}
+export { Button$1 as Button };

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

@@ -0,0 +1,2 @@
+import { Button, ButtonProps, ButtonVariant } from "./Button.js";
+export { Button, type ButtonProps, type ButtonVariant };

package/dist/components/button/index.js

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

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

@@ -0,0 +1,33 @@
+import { HTMLAttributes, JSX } from "react";
+type DivProps = Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>;
+/** The props of Card: the HTML attributes of its div, except className and style. */
+export type CardProps = DivProps;
+/** The props of CardHeader: the HTML attributes of its div, except className and style. */
+export type CardHeaderProps = DivProps;
+/** The props of CardTitle: the HTML attributes of its heading, except className and style, with the heading level. */
+export type CardTitleProps = Omit<HTMLAttributes<HTMLHeadingElement>, 'className' | 'style'> & {
+  /** The heading element. Defaults to h3. */
+  as?: 'h2' | 'h3' | 'h4' | 'div';
+};
+/** The props of CardDescription: the HTML attributes of its paragraph, except className and style. */
+export type CardDescriptionProps = Omit<HTMLAttributes<HTMLParagraphElement>, 'className' | 'style'>;
+/** The props of CardContent: the HTML attributes of its div, except className and style. */
+export type CardContentProps = DivProps;
+/** The props of CardFooter: the HTML attributes of its div, except className and style. */
+export type CardFooterProps = DivProps;
+/**
+ * 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.
+ */
+export declare function Card(props: CardProps): JSX.Element;
+/** The top of a card: its title and description, stacked. */
+export declare function CardHeader(props: CardHeaderProps): JSX.Element;
+/** The title of a card, set in the B4 text style. */
+export declare function CardTitle({ as: Tag, ...rest }: CardTitleProps): JSX.Element;
+/** A line under the title that says what the card holds. */
+export declare function CardDescription(props: CardDescriptionProps): JSX.Element;
+/** The body of a card. */
+export declare function CardContent(props: CardContentProps): JSX.Element;
+/** The foot of a card, a row for its actions. */
+export declare function CardFooter(props: CardFooterProps): JSX.Element;
+export {};

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/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 { useMemo, useSyncExternalStore } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+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/definition/Definition.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+/** The props of Definition. */
+export type DefinitionProps = {
+  /** The term, shown in the text with a dotted underline. */
+  children: ReactNode;
+  /** The explanation shown when the term is opened. Keep it to a sentence. */
+  definition: ReactNode;
+};
+/**
+ * A term that explains itself. It is a span with the button role and a dotted underline, so it takes the font of the text around it, so keyboard users reach it with Tab and open it with
+ * Enter or Space, touch users open it with a tap, and mouse users with hover or click. It does not use the browser's own
+ * title tooltip, which keyboard and touch users cannot open. Escape closes it.
+ */
+export declare function Definition({ children, definition }: DefinitionProps): import("react").JSX.Element;

package/dist/components/definition/Definition.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Popover } from "@base-ui/react/popover";
+// src/components/definition/Definition.tsx
+/**
+* A term that explains itself. It is a span with the button role and a dotted underline, so it takes the font of the text around it, so keyboard users reach it with Tab and open it with
+* Enter or Space, touch users open it with a tap, and mouse users with hover or click. It does not use the browser's own
+* title tooltip, which keyboard and touch users cannot open. Escape closes it.
+*/
+function Definition({ children, definition }) {
+	return /* @__PURE__ */ jsxs(Popover.Root, { children: [/* @__PURE__ */ jsx(Popover.Trigger, {
+		openOnHover: true,
+		nativeButton: false,
+		render: /* @__PURE__ */ jsx("span", {}),
+		tabIndex: 0,
+		delay: 100,
+		className: "rt:cursor-help rt:rounded-sm rt:bg-transparent rt:p-0 rt:text-inherit rt:underline rt:decoration-dotted rt:decoration-1 rt:underline-offset-4 rt:focus-visible:focus-ring",
+		children
+	}), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
+		side: "top",
+		sideOffset: 4,
+		className: "rt:isolate rt:z-50",
+		children: /* @__PURE__ */ jsx(Popover.Popup, {
+			"aria-label": "Definition",
+			className: "rt:max-w-72 rt:rounded-md rt:border rt:border-border rt:bg-popover rt:px-3 rt:py-1.5 rt:text-b1 rt:text-popover-foreground rt:outline-hidden",
+			children: definition
+		})
+	}) })] });
+}
+export { Definition };

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

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