@ratio-ui/core 0.1.1 → 0.3.0

package/dist/components/side-nav/SideNav.js

@@ -0,0 +1,194 @@
+import { cn } from "../../lib/cn.js";
+import { Icon } from "../icon/Icon.js";
+import { ShellNavContext } from "../app-shell/context.js";
+import { Avatar } from "../avatar/Avatar.js";
+import { RatioLink } from "../link-provider/RatioLink.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { use, useState, useSyncExternalStore } from "react";
+import { Dialog } from "@base-ui/react/dialog";
+// src/components/side-nav/SideNav.tsx
+const PHONE_QUERY = "(max-width: 767px)";
+function subscribe(notify) {
+	const mq = window.matchMedia(PHONE_QUERY);
+	mq.addEventListener("change", notify);
+	return () => mq.removeEventListener("change", notify);
+}
+function useIsPhone() {
+	return useSyncExternalStore(subscribe, () => window.matchMedia(PHONE_QUERY).matches, () => false);
+}
+const ROW = "rt:flex rt:h-sidenav-row rt:w-full rt:items-center rt:gap-2 rt:rounded-md rt:text-left rt:text-b3 rt:text-foreground rt:transition-colors rt:hover:bg-muted rt:focus-visible:focus-ring";
+function containsActive(item, active) {
+	return item.children?.some((c) => c.id === active || containsActive(c, active)) ?? false;
+}
+function Row({ item, active, depth, onSelect }) {
+	const isActive = item.id === active;
+	const [toggled, setToggled] = useState(null);
+	const children = item.children ?? [];
+	const hasChildren = children.length > 0;
+	const open = toggled && toggled.forActive === active ? toggled.open : containsActive(item, active);
+	const cls = cn(ROW, depth > 0 && "rt:pl-8", isActive && "rt:bg-muted rt:text-primary rt:font-medium");
+	const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+		item.icon && /* @__PURE__ */ jsx(Icon, {
+			name: item.icon,
+			size: 16,
+			tone: isActive ? "primary" : "icon"
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: "rt:min-w-0 rt:flex-1 rt:truncate",
+			children: item.label
+		}),
+		item.count !== void 0 && /* @__PURE__ */ jsx("span", {
+			className: "rt:text-c1 rt:text-foreground-subdued",
+			children: item.count
+		}),
+		hasChildren && /* @__PURE__ */ jsx(Icon, {
+			name: "nav-chevron",
+			size: 8,
+			tone: "icon"
+		})
+	] });
+	return /* @__PURE__ */ jsxs("li", { children: [hasChildren ? /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: cls,
+		"aria-expanded": open,
+		onClick: () => setToggled({
+			open: !open,
+			forActive: active
+		}),
+		children: inner
+	}) : item.href ? /* @__PURE__ */ jsx(RatioLink, {
+		href: item.href,
+		className: cls,
+		"aria-current": isActive ? "page" : void 0,
+		onClick: () => onSelect?.(item.id),
+		children: inner
+	}) : /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: cls,
+		"aria-current": isActive ? "page" : void 0,
+		onClick: () => onSelect?.(item.id),
+		children: inner
+	}), hasChildren && open && /* @__PURE__ */ jsx("ul", {
+		className: "rt:flex rt:flex-col",
+		children: children.map((c) => /* @__PURE__ */ jsx(Row, {
+			item: c,
+			active,
+			depth: depth + 1,
+			onSelect
+		}, c.id))
+	})] });
+}
+function Section({ section, active, onSelect }) {
+	const [collapsed, setCollapsed] = useState(!!section.defaultCollapsed);
+	const collapsible = !!section.collapsible && !!section.label;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "rt:flex rt:flex-col",
+		children: [section.label && (collapsible ? /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-expanded": !collapsed,
+			onClick: () => setCollapsed((c) => !c),
+			className: "rt:flex rt:h-sidenav-label rt:items-center rt:justify-between rt:text-c1 rt:text-foreground-subdued rt:focus-visible:focus-ring",
+			children: [section.label, /* @__PURE__ */ jsx(Icon, {
+				name: "nav-chevron",
+				size: 8,
+				tone: "icon"
+			})]
+		}) : /* @__PURE__ */ jsx("span", {
+			className: "rt:flex rt:h-sidenav-label rt:items-center rt:text-c1 rt:text-foreground-subdued",
+			children: section.label
+		})), !(collapsible && collapsed) && /* @__PURE__ */ jsx("ul", {
+			className: "rt:flex rt:flex-col",
+			children: section.items.map((item) => /* @__PURE__ */ jsx(Row, {
+				item,
+				active,
+				depth: 0,
+				onSelect
+			}, item.id))
+		})]
+	});
+}
+function Panel({ label, sections, active, onSelect, account, footer }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "side-nav",
+		className: "rt:flex rt:h-full rt:w-60 rt:shrink-0 rt:flex-col rt:bg-sidebar rt:text-sidebar-foreground",
+		children: [
+			account && /* @__PURE__ */ jsx("div", {
+				className: "rt:flex rt:shrink-0 rt:items-start rt:px-3.5 rt:pt-2",
+				children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: account.onClick,
+					className: "rt:flex rt:h-11 rt:w-full rt:items-center rt:gap-2 rt:rounded-lg rt:px-1.5 rt:text-left rt:hover:bg-muted rt:focus-visible:focus-ring",
+					children: [
+						/* @__PURE__ */ jsx(Avatar, {
+							name: account.name,
+							shape: "square",
+							size: "sm"
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							className: "rt:flex rt:min-w-0 rt:flex-1 rt:flex-col rt:text-c1",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "rt:truncate rt:text-c2",
+								children: account.name
+							}), account.role && /* @__PURE__ */ jsx("span", {
+								className: "rt:truncate",
+								children: account.role
+							})]
+						}),
+						/* @__PURE__ */ jsx(Icon, {
+							name: "nav-caret-down",
+							size: 8,
+							tone: "icon"
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ jsx("nav", {
+				"aria-label": label,
+				className: "rt:flex rt:min-h-0 rt:flex-1 rt:flex-col rt:sidenav-gap rt:overflow-y-auto rt:sidenav-pad-x rt:sidenav-pad-top rt:sidenav-pad-bottom",
+				children: sections.map((s) => /* @__PURE__ */ jsx(Section, {
+					section: s,
+					active,
+					onSelect
+				}, s.id))
+			}),
+			footer && /* @__PURE__ */ jsx("div", {
+				"data-slot": "side-nav-footer",
+				className: "rt:flex rt:shrink-0 rt:items-center rt:gap-2 rt:border-t rt:border-divider rt:px-6 rt:py-3 rt:text-b3",
+				children: footer
+			})
+		]
+	});
+}
+/**
+* The 240px side navigation of the admin: an account switcher, blocks of rows with nested groups, counts and collapsible
+* labels, and a footer pinned at the bottom. On a phone it becomes a drawer: inside AppShell the menu button in TopBar opens it and choosing a row closes it; used alone, the caller opens it with `open` and closes it in `onOpenChange`.
+*/
+function SideNav(props) {
+	const phone = useIsPhone();
+	const shell = use(ShellNavContext);
+	if (!phone) return /* @__PURE__ */ jsx(Panel, { ...props });
+	const open = props.open ?? shell?.open ?? false;
+	const onOpenChange = (next) => {
+		props.onOpenChange?.(next);
+		shell?.setOpen(next);
+	};
+	const onSelect = (id) => {
+		props.onSelect?.(id);
+		shell?.setOpen(false);
+	};
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsx(Dialog.Portal, { children: /* @__PURE__ */ jsx(Dialog.Popup, {
+			id: shell?.id,
+			"aria-label": props.label,
+			"data-slot": "side-nav-drawer",
+			className: "rt:fixed rt:inset-y-0 rt:left-0 rt:z-50 rt:h-full rt:shadow-ring-strong rt:focus-visible:focus-ring",
+			children: /* @__PURE__ */ jsx(Panel, {
+				...props,
+				onSelect
+			})
+		}) })
+	});
+}
+export { SideNav };

package/dist/components/side-nav/index.d.ts

@@ -0,0 +1,2 @@
+import { SideNav, SideNavAccount, SideNavItem, SideNavProps, SideNavSection } from "./SideNav.js";
+export { SideNav, type SideNavAccount, type SideNavItem, type SideNavProps, type SideNavSection };

package/dist/components/side-nav/index.js

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

package/dist/components/skeleton/Skeleton.d.ts

@@ -0,0 +1,13 @@
+import { HTMLAttributes, JSX } from "react";
+/** The shape of a placeholder: a line of text, a block such as a tile or an image, or a round avatar. */
+export type SkeletonShape = 'line' | 'block' | 'circle';
+/** The props of Skeleton: the HTML attributes of its div, except className, style and children, with the shape. */
+export type SkeletonProps = Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'children'> & {
+  /** The shape of the placeholder. Defaults to line. A line and a block fill the width of their parent. */
+  shape?: SkeletonShape;
+};
+/**
+ * A static placeholder for content that is still loading on a first load. It is hidden from assistive technology: the
+ * container that holds it says it is busy. Its fill and animation come from the loading tokens, so it does not move.
+ */
+export declare function Skeleton({ shape, ...rest }: SkeletonProps): JSX.Element;

package/dist/components/skeleton/Skeleton.js

@@ -0,0 +1,21 @@
+import { cn } from "../../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/skeleton/Skeleton.tsx
+const SHAPE_CLASSES = {
+	line: "rt:h-4 rt:w-full rt:rounded-sm",
+	block: "rt:h-24 rt:w-full rt:rounded-sm",
+	circle: "rt:size-8 rt:rounded-3xl"
+};
+/**
+* A static placeholder for content that is still loading on a first load. It is hidden from assistive technology: the
+* container that holds it says it is busy. Its fill and animation come from the loading tokens, so it does not move.
+*/
+function Skeleton({ shape = "line", ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "skeleton",
+		"aria-hidden": "true",
+		...rest,
+		className: cn("rt:skeleton", SHAPE_CLASSES[shape])
+	});
+}
+export { Skeleton };

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

@@ -0,0 +1,2 @@
+import { Skeleton, SkeletonProps, SkeletonShape } from "./Skeleton.js";
+export { Skeleton, type SkeletonProps, type SkeletonShape };

package/dist/components/skeleton/index.js

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

package/dist/components/spinner/Spinner.d.ts

@@ -0,0 +1,11 @@
+import { HTMLAttributes, JSX } from "react";
+/** The props of Spinner: the HTML attributes of its span, except className, style and children, with the label. */
+export type SpinnerProps = Omit<HTMLAttributes<HTMLSpanElement>, 'className' | 'style' | 'children'> & {
+  /** The accessible name, announced to assistive technology. Defaults to Loading. */
+  label?: string;
+};
+/**
+ * A small ring for a wait with no known shape. It is static until the designer answers question 5: its motion is the
+ * --rt-spinner-animation token, none for now, so the ring is drawn from the progress colours and the status role says what it means.
+ */
+export declare function Spinner({ label, ...rest }: SpinnerProps): JSX.Element;

package/dist/components/spinner/Spinner.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+// src/components/spinner/Spinner.tsx
+/**
+* A small ring for a wait with no known shape. It is static until the designer answers question 5: its motion is the
+* --rt-spinner-animation token, none for now, so the ring is drawn from the progress colours and the status role says what it means.
+*/
+function Spinner({ label = "Loading", ...rest }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "spinner",
+		role: "status",
+		"aria-label": label,
+		...rest,
+		className: "rt:inline-block rt:size-4 rt:rounded-3xl rt:border-2 rt:border-progress-track rt:border-t-progress rt:spinner-motion"
+	});
+}
+export { Spinner };

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

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

package/dist/components/spinner/index.js

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

package/dist/components/status-pill/StatusPill.d.ts

@@ -0,0 +1,14 @@
+import { HTMLAttributes, JSX, Ref } from "react";
+/** The tone of a status pill: success is green, warning is amber, neutral is plain text until the designer answers question 3. */
+export type StatusPillTone = 'success' | 'warning' | 'neutral';
+/** The props of StatusPill: the HTML attributes of a span, except className and style, with the tone. */
+export type StatusPillProps = Omit<HTMLAttributes<HTMLSpanElement>, 'className' | 'style'> & {
+  /** The colour of the pill. Defaults to neutral. */
+  tone?: StatusPillTone;
+  /** The status, one word: Draft, Active, Hidden, Low, Pending. */
+  children: React.ReactNode;
+  /** Receives the rendered span. */
+  ref?: Ref<HTMLSpanElement>;
+};
+/** A 20px pill with a 4px radius and a 1px border that names the state of a row, such as a product's status in a listing. */
+export declare function StatusPill({ tone, children, ref, ...rest }: StatusPillProps): JSX.Element;

package/dist/components/status-pill/StatusPill.js

@@ -0,0 +1,19 @@
+import { cn } from "../../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/status-pill/StatusPill.tsx
+const TONE_CLASSES = {
+	success: "rt:bg-success-tint rt:text-success rt:border-success-border",
+	warning: "rt:bg-warning-tint rt:text-warning rt:border-warning-border",
+	neutral: "rt:bg-status-neutral-background rt:text-status-neutral-foreground rt:border-status-neutral-border"
+};
+/** A 20px pill with a 4px radius and a 1px border that names the state of a row, such as a product's status in a listing. */
+function StatusPill({ tone = "neutral", children, ref, ...rest }) {
+	return /* @__PURE__ */ jsx("span", {
+		...rest,
+		ref,
+		"data-tone": tone,
+		className: cn("rt:inline-flex rt:h-5 rt:w-fit rt:shrink-0 rt:items-center rt:justify-center rt:rounded-sm rt:border rt:px-2 rt:text-c2 rt:whitespace-nowrap", TONE_CLASSES[tone]),
+		children
+	});
+}
+export { StatusPill };

package/dist/components/status-pill/index.d.ts

@@ -0,0 +1,2 @@
+import { StatusPill, StatusPillProps, StatusPillTone } from "./StatusPill.js";
+export { StatusPill, type StatusPillProps, type StatusPillTone };

package/dist/components/status-pill/index.js

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

package/dist/components/summary-chips/SummaryChips.d.ts

@@ -0,0 +1,17 @@
+import { HTMLAttributes, JSX, Ref } from "react";
+/** One chip: a label, with an optional value after it ("Includes GST" and "Yes"). */
+export interface SummaryChip {
+  /** The label, such as Cost price or HSN code. */
+  label: string;
+  /** The value, shown after the label in the foreground ink. Leave out for a chip that is only a name. */
+  value?: string;
+}
+/** The props of SummaryChips: the HTML attributes of a list, except className and style, with the chips. */
+export type SummaryChipsProps = Omit<HTMLAttributes<HTMLUListElement>, 'className' | 'style' | 'children'> & {
+  /** The chips, in order. Nothing is rendered when empty. */
+  items: readonly SummaryChip[];
+  /** Receives the rendered list. */
+  ref?: Ref<HTMLUListElement>;
+};
+/** A row of 20px chips that summarise values, such as the ones a collapsed section still shows. */
+export declare function SummaryChips({ items, ref, ...rest }: SummaryChipsProps): JSX.Element | null;

package/dist/components/summary-chips/SummaryChips.js

@@ -0,0 +1,19 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/summary-chips/SummaryChips.tsx
+/** A row of 20px chips that summarise values, such as the ones a collapsed section still shows. */
+function SummaryChips({ items, ref, ...rest }) {
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ jsx("ul", {
+		...rest,
+		ref,
+		className: "rt:m-0 rt:flex rt:list-none rt:flex-wrap rt:gap-1 rt:p-0",
+		children: items.map((item) => /* @__PURE__ */ jsxs("li", {
+			className: "rt:inline-flex rt:h-5 rt:items-center rt:gap-1 rt:rounded-sm rt:border rt:border-status-neutral-border rt:bg-status-neutral-background rt:px-2 rt:text-c1 rt:whitespace-nowrap rt:text-status-neutral-foreground",
+			children: [/* @__PURE__ */ jsx("span", { children: item.label }), item.value !== void 0 ? /* @__PURE__ */ jsx("span", {
+				className: "rt:text-c2 rt:text-foreground",
+				children: item.value
+			}) : null]
+		}, item.label))
+	});
+}
+export { SummaryChips };

package/dist/components/summary-chips/index.d.ts

@@ -0,0 +1,2 @@
+import { SummaryChip, SummaryChips, SummaryChipsProps } from "./SummaryChips.js";
+export { type SummaryChip, SummaryChips, type SummaryChipsProps };

package/dist/components/summary-chips/index.js

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

package/dist/components/switch/Switch.d.ts

@@ -0,0 +1,10 @@
+import { JSX } from "react";
+import { Switch } from "@base-ui/react/switch";
+/** The props of Switch: Base UI's switch props, except className, style and render. Give it an aria-label or a label that points to it. */
+export type SwitchProps = Omit<Switch.Root.Props, 'className' | 'style' | 'render'>;
+/**
+ * An on/off switch, 32px by 18px. Off it is drawn with the control hairline; on it is filled in the primary colour.
+ * In forced-colours mode the thumb keeps a system-colour outline, and its side shows the state. The thumb jumps to the other end with no slide, and colours fade over 120ms.
+ */
+declare function Switch$1({ ...props }: SwitchProps): JSX.Element;
+export { Switch$1 as Switch };

package/dist/components/switch/Switch.js

@@ -0,0 +1,20 @@
+import { cn } from "../../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { Switch } from "@base-ui/react/switch";
+// src/components/switch/Switch.tsx
+/**
+* An on/off switch, 32px by 18px. Off it is drawn with the control hairline; on it is filled in the primary colour.
+* In forced-colours mode the thumb keeps a system-colour outline, and its side shows the state. The thumb jumps to the other end with no slide, and colours fade over 120ms.
+*/
+function Switch$1({ ...props }) {
+	return /* @__PURE__ */ jsx(Switch.Root, {
+		"data-slot": "switch",
+		className: cn("rt:peer rt:relative rt:inline-flex rt:h-4.5 rt:w-8 rt:shrink-0 rt:cursor-pointer rt:items-center rt:justify-start rt:rounded-3xl rt:bg-background rt:shadow-ring-hairline rt:transition-colors rt:outline-none", "rt:after:absolute rt:after:-inset-x-1.5 rt:after:-inset-y-1.5", "rt:data-checked:justify-end rt:data-checked:bg-primary rt:data-checked:shadow-none", "rt:focus-visible:focus-ring rt:forced-outline", "rt:aria-invalid:shadow-ring-invalid rt:aria-invalid:focus-visible:shadow-ring-invalid", "rt:data-disabled:cursor-not-allowed rt:data-disabled:opacity-50"),
+		...props,
+		children: /* @__PURE__ */ jsx(Switch.Thumb, {
+			"data-slot": "switch-thumb",
+			className: "rt:pointer-events-none rt:mx-0.5 rt:block rt:size-3.5 rt:rounded-3xl rt:forced-outline rt:bg-control rt:transition-colors rt:data-checked:bg-primary-foreground"
+		})
+	});
+}
+export { Switch$1 as Switch };

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

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

package/dist/components/switch/index.js

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

package/dist/components/table/Table.d.ts

@@ -0,0 +1,46 @@
+import { ComponentProps, JSX, ReactNode } from "react";
+/** The props of Table: the attributes of a table element, except className and style. */
+export type TableProps = Omit<ComponentProps<'table'>, 'className' | 'style'>;
+/**
+ * A data table in the design system's Listing look: a 36px heading row over 48px rows split by 1px hairlines, 12px uppercase headings and a fill
+ * on the row under the pointer. It scrolls sideways inside its own box when the columns do not fit. Compose it from
+ * TableHeader, TableBody, TableRow, TableHead and TableCell.
+ */
+export declare function Table(props: TableProps): JSX.Element;
+/** The props of TableHeader: the attributes of a thead element, except className and style. */
+export type TableHeaderProps = Omit<ComponentProps<'thead'>, 'className' | 'style'>;
+/** The heading rows of a table. Its rows take no hover fill. */
+export declare function TableHeader(props: TableHeaderProps): JSX.Element;
+/** The props of TableBody: the attributes of a tbody element, except className and style. */
+export type TableBodyProps = Omit<ComponentProps<'tbody'>, 'className' | 'style'>;
+/** The data rows of a table. Its rows take the hover fill. */
+export declare function TableBody(props: TableBodyProps): JSX.Element;
+/** The props of TableFooter: the attributes of a tfoot element, except className and style. */
+export type TableFooterProps = Omit<ComponentProps<'tfoot'>, 'className' | 'style'>;
+/** The summary rows at the foot of a table, such as totals. Its rows take no hover fill. */
+export declare function TableFooter(props: TableFooterProps): JSX.Element;
+/** The props of TableRow: the attributes of a tr element, except className and style, and whether the row is selected. */
+export type TableRowProps = Omit<ComponentProps<'tr'>, 'className' | 'style'> & {
+  /** Keeps the hover fill on the row to show it is chosen, for example when its checkbox is ticked. Defaults to false. */
+  selected?: boolean;
+};
+/** One row, 48px high (36px in the heading), with a hairline under it. A body row is filled when the pointer is over it or it is selected. */
+export declare function TableRow({ selected, ...rest }: TableRowProps): JSX.Element;
+/** The props of TableHead: the attributes of a th element, except className and style, and the alignment of its column. */
+export type TableHeadProps = Omit<ComponentProps<'th'>, 'className' | 'style'> & {
+  /** Aligns the heading to the right, over a column of numbers. Defaults to false, which aligns it to the left. */
+  numeric?: boolean;
+};
+/** A column heading: 12px uppercase text in the subdued colour. It is a column header unless `scope` says otherwise. */
+export declare function TableHead({ numeric, scope, ...rest }: TableHeadProps): JSX.Element;
+/** The props of TableCell: the attributes of a td element, except className and style, and the alignment of its column. */
+export type TableCellProps = Omit<ComponentProps<'td'>, 'className' | 'style'> & {
+  /** Aligns the cell to the right with tabular figures, for a number. Defaults to false, which aligns it to the left. */
+  numeric?: boolean;
+};
+/** One cell. Text stays on one line; a numeric cell is right aligned with tabular figures so digits line up. */
+export declare function TableCell({ numeric, ...rest }: TableCellProps): JSX.Element;
+/** The props of TableCaption: the attributes of a caption element, except className and style. */
+export type TableCaptionProps = Omit<ComponentProps<'caption'>, 'className' | 'style'>;
+/** The table's title for assistive technology, shown under the table in the subdued colour. */
+export declare function TableCaption(props: TableCaptionProps): JSX.Element;

package/dist/components/table/Table.js

@@ -0,0 +1,87 @@
+import { cn } from "../../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { createContext, use } from "react";
+// src/components/table/Table.tsx
+const SectionContext = createContext("body");
+const BoxContext = createContext(false);
+/** Draws the hairline box (1px border, 8px corners) round the Table inside it. For DataTable and TableLoader; not exported from the package. */
+function TableBox({ children }) {
+	return /* @__PURE__ */ jsx(BoxContext, {
+		value: true,
+		children
+	});
+}
+/**
+* A data table in the design system's Listing look: a 36px heading row over 48px rows split by 1px hairlines, 12px uppercase headings and a fill
+* on the row under the pointer. It scrolls sideways inside its own box when the columns do not fit. Compose it from
+* TableHeader, TableBody, TableRow, TableHead and TableCell.
+*/
+function Table(props) {
+	const boxed = use(BoxContext);
+	return /* @__PURE__ */ jsx("div", {
+		role: "region",
+		tabIndex: 0,
+		"aria-label": props["aria-label"],
+		"aria-labelledby": props["aria-labelledby"],
+		"data-boxed": boxed ? "true" : void 0,
+		className: cn("rt:relative rt:w-full rt:overflow-x-auto rt:focus-visible:focus-ring", boxed && "rt:rounded-lg rt:border rt:border-border"),
+		children: /* @__PURE__ */ jsx("table", {
+			className: "rt:w-full rt:border-collapse rt:caption-bottom rt:bg-background rt:text-b3 rt:text-foreground",
+			...props
+		})
+	});
+}
+/** The heading rows of a table. Its rows take no hover fill. */
+function TableHeader(props) {
+	return /* @__PURE__ */ jsx(SectionContext, {
+		value: "head",
+		children: /* @__PURE__ */ jsx("thead", { ...props })
+	});
+}
+/** The data rows of a table. Its rows take the hover fill. */
+function TableBody(props) {
+	return /* @__PURE__ */ jsx(SectionContext, {
+		value: "body",
+		children: /* @__PURE__ */ jsx("tbody", { ...props })
+	});
+}
+/** The summary rows at the foot of a table, such as totals. Its rows take no hover fill. */
+function TableFooter(props) {
+	return /* @__PURE__ */ jsx(SectionContext, {
+		value: "foot",
+		children: /* @__PURE__ */ jsx("tfoot", { ...props })
+	});
+}
+/** One row, 48px high (36px in the heading), with a hairline under it. A body row is filled when the pointer is over it or it is selected. */
+function TableRow({ selected = false, ...rest }) {
+	const section = use(SectionContext);
+	const boxed = use(BoxContext);
+	return /* @__PURE__ */ jsx("tr", {
+		"data-selected": selected ? "true" : void 0,
+		className: cn("rt:border-b rt:border-border rt:transition-colors", section === "head" ? "rt:h-9" : "rt:h-12", boxed && section === "body" && "rt:last:border-b-0", section === "body" && "rt:hover:bg-muted rt:data-selected:bg-muted"),
+		...rest
+	});
+}
+/** A column heading: 12px uppercase text in the subdued colour. It is a column header unless `scope` says otherwise. */
+function TableHead({ numeric = false, scope = "col", ...rest }) {
+	return /* @__PURE__ */ jsx("th", {
+		scope,
+		className: cn("rt:px-2 rt:align-middle rt:text-label rt:uppercase rt:whitespace-nowrap rt:text-foreground-subdued", numeric ? "rt:text-right" : "rt:text-left"),
+		...rest
+	});
+}
+/** One cell. Text stays on one line; a numeric cell is right aligned with tabular figures so digits line up. */
+function TableCell({ numeric = false, ...rest }) {
+	return /* @__PURE__ */ jsx("td", {
+		className: cn("rt:px-2 rt:align-middle rt:whitespace-nowrap", numeric ? "rt:text-right rt:tabular-nums" : "rt:text-left"),
+		...rest
+	});
+}
+/** The table's title for assistive technology, shown under the table in the subdued colour. */
+function TableCaption(props) {
+	return /* @__PURE__ */ jsx("caption", {
+		className: "rt:py-2 rt:text-left rt:text-c1 rt:text-foreground-subdued",
+		...props
+	});
+}
+export { Table, TableBody, TableBox, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

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

@@ -0,0 +1,2 @@
+import { Table, TableBody, TableBodyProps, TableCaption, TableCaptionProps, TableCell, TableCellProps, TableFooter, TableFooterProps, TableHead, TableHeadProps, TableHeader, TableHeaderProps, TableProps, TableRow, TableRowProps } from "./Table.js";
+export { Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps };

package/dist/components/table/index.js

@@ -0,0 +1 @@
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./Table.js";

package/dist/components/table-loader/TableLoader.d.ts

@@ -0,0 +1,31 @@
+import { TableProps } from "../table/Table.js";
+import "../table/index.js";
+import { JSX } from "react";
+/** One column of the loading table: its real heading, and whether it holds numbers. */
+export type TableLoaderColumn = {
+  /** A stable key for the column. */
+  id: string;
+  /** The heading, shown for real so the layout does not jump when the data arrives. */
+  header: string;
+  /** Aligns the heading and the placeholder to the right. Defaults to false. */
+  numeric?: boolean;
+};
+/** The props of TableLoader: the attributes of Table, plus the columns, how many rows to fake and the count line. */
+export type TableLoaderProps = Omit<TableProps, 'children' | 'aria-busy'> & {
+  /** The columns, in order. */
+  columns: TableLoaderColumn[];
+  /** How many placeholder rows to draw. Defaults to 5. */
+  rows?: number;
+  /** How many results the first page will hold, for the count line. */
+  shown: number;
+  /** How many results there are in all. */
+  total: number;
+  /** What the results are called, in the plural: "products". */
+  noun: string;
+};
+/**
+ * What a table shows on its first load: the real headings over static skeleton rows, and a count line such as
+ * "72 of 1000 products". The table is marked busy and the fake rows are hidden from screen readers. Use it for the first
+ * load only; later loads keep the old rows.
+ */
+export declare function TableLoader({ columns, rows, shown, total, noun, ...rest }: TableLoaderProps): JSX.Element;

package/dist/components/table-loader/TableLoader.js

@@ -0,0 +1,35 @@
+import { formatCount } from "../../lib/format.js";
+import { Table, TableBody, TableBox, TableCell, TableHead, TableHeader, TableRow } from "../table/Table.js";
+import { Skeleton } from "../skeleton/Skeleton.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/table-loader/TableLoader.tsx
+/**
+* What a table shows on its first load: the real headings over static skeleton rows, and a count line such as
+* "72 of 1000 products". The table is marked busy and the fake rows are hidden from screen readers. Use it for the first
+* load only; later loads keep the old rows.
+*/
+function TableLoader({ columns, rows = 5, shown, total, noun, ...rest }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "table-loader",
+		className: "rt:flex rt:w-full rt:flex-col",
+		children: [/* @__PURE__ */ jsx(TableBox, { children: /* @__PURE__ */ jsxs(Table, {
+			"aria-busy": "true",
+			...rest,
+			children: [/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsx(TableRow, { children: columns.map((c) => /* @__PURE__ */ jsx(TableHead, {
+				numeric: c.numeric,
+				children: c.header
+			}, c.id)) }) }), /* @__PURE__ */ jsx(TableBody, { children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsx(TableRow, {
+				"aria-hidden": "true",
+				children: columns.map((c) => /* @__PURE__ */ jsx(TableCell, {
+					numeric: c.numeric,
+					children: /* @__PURE__ */ jsx(Skeleton, {})
+				}, c.id))
+			}, i)) })]
+		}) }), /* @__PURE__ */ jsx("p", {
+			role: "status",
+			className: "rt:py-3 rt:text-c1 rt:text-foreground-subdued",
+			children: `${formatCount(shown)} of ${formatCount(total)} ${noun}`
+		})]
+	});
+}
+export { TableLoader };

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

@@ -0,0 +1,2 @@
+import { TableLoader, TableLoaderColumn, TableLoaderProps } from "./TableLoader.js";
+export { TableLoader, type TableLoaderColumn, type TableLoaderProps };

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

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