@qeetrix/react 0.0.1 → 0.0.4

package/dist/experimental/top-bar/top-bar.d.ts

@@ -0,0 +1,60 @@
+import { RenderProp } from "../../internal/render.js";
+import { ComponentProps, ReactElement, ReactNode } from "react";
+import { Button } from "@base-ui/react/button";
+export interface TopBarProps extends Omit<ComponentProps<"header">, "children"> {
+  /** The suite launcher: a Menu of Qeet products behind a neutral IconButton. */
+  launcher?: ReactNode;
+  /** The product's mark, e.g. `<QeetLogo variant="dark" height={20} />`. */
+  logo?: ReactNode;
+  /** The product's name, beside the mark: "Qeet ID". */
+  product: string;
+  /** The identity's link home. */
+  href?: string;
+  /** A router link for the identity instead of `<a>`. */
+  render?: RenderProp;
+  /**
+   * The scope, outermost first: organisation, then project or environment. Usually
+   * TopBarSwitchers; a slash is drawn before each.
+   */
+  context?: ReactNode;
+  /** The global search, centred: a TopBarSearch. Hidden below 840px. */
+  search?: ReactNode;
+  /** Utility IconButtons in the neutral tone, after the AppShell's panel triggers. */
+  actions?: ReactNode;
+  /** The account menu: an Avatar trigger, after a rule. */
+  account?: ReactNode;
+}
+/** An environment's colour: production, staging, development… The word says which. */
+export type TopBarStatus = "neutral" | "success" | "info" | "warning" | "danger";
+export interface TopBarSwitcherProps extends Omit<Button.Props, "children" | "className"> {
+  /** The current organisation, project or environment. */
+  label: ReactNode;
+  /** A small square before the label: the organisation's initials or logo. */
+  mark?: ReactNode;
+  /** A dot before the label, for an environment. Never colour alone: the label names it. */
+  status?: TopBarStatus;
+  className?: string;
+}
+export interface TopBarSearchProps extends Omit<Button.Props, "children" | "className"> {
+  /** The prompt, which is also the button's name: "Search or jump to…". */
+  placeholder: string;
+  /** Keys shown at the end, e.g. `["⌘", "K"]`. Wire the shortcut itself in the product. */
+  shortcut?: readonly string[];
+  className?: string;
+}
+/**
+ * The scope bar of a Qeet console (07-components.md, C1): launcher, product, the scope path,
+ * search, tools and account across the full width. It's black in light and dark alike (it renders
+ * the dark scheme on itself), topped by a 2px Ember line.
+ */
+export declare function TopBar({ launcher, logo, product, href, render, context, search, actions, account, className, ...props }: TopBarProps): ReactElement;
+/**
+ * A step of the TopBar's scope path: the current organisation or environment, which opens a Menu
+ * to switch it. Use it as the trigger: `<MenuTrigger render={<TopBarSwitcher label="Acme" />} />`.
+ */
+export declare function TopBarSwitcher({ label, mark, status, className, ...props }: TopBarSwitcherProps): ReactElement;
+/**
+ * The global search in the TopBar: a field-shaped button that opens the product's search or command
+ * palette, with its shortcut shown at the end.
+ */
+export declare function TopBarSearch({ placeholder, shortcut, className, ...props }: TopBarSearchProps): ReactElement;

package/dist/experimental/top-bar/top-bar.js

@@ -0,0 +1,162 @@
+"use client";
+import { cx } from "../../internal/cx.js";
+import { renderElement } from "../../internal/render.js";
+import { IconButton } from "../../button/button.js";
+import { useShellState } from "../app-shell/app-shell.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Children, Fragment as Fragment$1, isValidElement } from "react";
+import { Button } from "@base-ui/react/button";
+import { SearchIcon } from "@qeetrix/icons/icons/search";
+import { ChevronsUpDownIcon } from "@qeetrix/icons/icons/chevrons-up-down";
+import { MenuIcon } from "@qeetrix/icons/icons/menu";
+// src/experimental/top-bar/top-bar.tsx
+/** Context items one by one, looking through fragments, so each gets its slash. */
+function items(nodes) {
+	return Children.toArray(nodes).flatMap((node) => isValidElement(node) && node.type === Fragment$1 ? items(node.props.children) : [node]);
+}
+/**
+* The scope bar of a Qeet console (07-components.md, C1): launcher, product, the scope path,
+* search, tools and account across the full width. It's black in light and dark alike (it renders
+* the dark scheme on itself), topped by a 2px Ember line.
+*/
+function TopBar({ launcher, logo, product, href, render, context, search, actions, account, className, ...props }) {
+	const shell = useShellState();
+	return /* @__PURE__ */ jsxs("header", {
+		...props,
+		className: cx("qx-top-bar", className),
+		"data-slot": "top-bar",
+		"data-qx-color-scheme": "dark",
+		"data-search": search != null ? "" : void 0,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "qx-top-bar-start",
+				children: [
+					shell.narrow && /* @__PURE__ */ jsx("div", {
+						className: "qx-top-bar-cell",
+						children: /* @__PURE__ */ jsx(IconButton, {
+							icon: MenuIcon,
+							"aria-label": shell.strings.open,
+							tone: "neutral",
+							tooltip: false,
+							onClick: shell.openNavigation
+						})
+					}),
+					launcher != null && /* @__PURE__ */ jsx("div", {
+						className: "qx-top-bar-cell",
+						"data-slot": "top-bar-launcher",
+						children: launcher
+					}),
+					renderElement("a", render, {
+						href,
+						className: "qx-top-bar-identity",
+						"data-slot": "top-bar-identity",
+						children: /* @__PURE__ */ jsxs(Fragment, { children: [logo, /* @__PURE__ */ jsx("span", {
+							className: "qx-top-bar-product",
+							children: product
+						})] })
+					}),
+					items(context).map((item, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+						className: "qx-top-bar-slash",
+						"aria-hidden": true
+					}), item] }, index))
+				]
+			}),
+			search != null && /* @__PURE__ */ jsx("div", {
+				className: "qx-top-bar-search",
+				"data-slot": "top-bar-search",
+				children: search
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "qx-top-bar-end",
+				children: [
+					shell.drawers.length > 0 && /* @__PURE__ */ jsx("div", {
+						role: "group",
+						"aria-label": shell.strings.tools,
+						className: "qx-top-bar-tools",
+						children: shell.drawers.map((drawer) => /* @__PURE__ */ jsx("span", {
+							className: "qx-top-bar-tool",
+							"data-badge": drawer.badge ? "" : void 0,
+							children: /* @__PURE__ */ jsx(IconButton, {
+								icon: drawer.icon,
+								"aria-label": drawer.label,
+								"aria-pressed": shell.activeDrawer === drawer.id,
+								tone: "neutral",
+								onClick: () => shell.toggleDrawer(drawer.id)
+							})
+						}, drawer.id))
+					}),
+					actions,
+					account != null && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						className: "qx-top-bar-rule",
+						"aria-hidden": true
+					}), account] })
+				]
+			})
+		]
+	});
+}
+/**
+* A step of the TopBar's scope path: the current organisation or environment, which opens a Menu
+* to switch it. Use it as the trigger: `<MenuTrigger render={<TopBarSwitcher label="Acme" />} />`.
+*/
+function TopBarSwitcher({ label, mark, status, className, ...props }) {
+	return /* @__PURE__ */ jsxs(Button, {
+		...props,
+		className: cx("qx-top-bar-switcher", className),
+		"data-slot": "top-bar-switcher",
+		children: [
+			mark != null && /* @__PURE__ */ jsx("span", {
+				className: "qx-top-bar-mark",
+				"aria-hidden": true,
+				children: mark
+			}),
+			status && /* @__PURE__ */ jsx("span", {
+				className: "qx-top-bar-status",
+				"data-status": status,
+				"aria-hidden": true
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "qx-top-bar-switcher-label",
+				children: label
+			}),
+			/* @__PURE__ */ jsx(ChevronsUpDownIcon, {
+				shape: "round",
+				size: 14,
+				"aria-hidden": true,
+				className: "qx-top-bar-caret"
+			})
+		]
+	});
+}
+/**
+* The global search in the TopBar: a field-shaped button that opens the product's search or command
+* palette, with its shortcut shown at the end.
+*/
+function TopBarSearch({ placeholder, shortcut, className, ...props }) {
+	return /* @__PURE__ */ jsxs(Button, {
+		...props,
+		className: cx("qx-top-bar-search-trigger", className),
+		"data-slot": "top-bar-search-trigger",
+		children: [
+			/* @__PURE__ */ jsx(SearchIcon, {
+				shape: "round",
+				size: 16,
+				"aria-hidden": true,
+				className: "qx-top-bar-search-icon"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "qx-top-bar-search-text",
+				children: placeholder
+			}),
+			shortcut && shortcut.length > 0 && /* @__PURE__ */ jsx("span", {
+				className: "qx-top-bar-keys",
+				"aria-hidden": true,
+				children: shortcut.map((key) => /* @__PURE__ */ jsx("kbd", {
+					className: "qx-top-bar-key",
+					children: key
+				}, key))
+			})
+		]
+	});
+}
+export { TopBar, TopBarSearch, TopBarSwitcher };

package/dist/field/choice.d.ts

@@ -0,0 +1,21 @@
+import "./field.js";
+import { CSSProperties, ReactElement, ReactNode } from "react";
+/**
+ * How a checkbox, radio or switch is named: by its visible `label`, or — with no visible label, as
+ * in a table row — by `aria-label` or `aria-labelledby`, which the type then requires.
+ */
+export type ChoiceLabelProps = {
+  label: ReactNode;
+  "aria-label"?: string;
+  "aria-labelledby"?: string;
+} | {
+  label?: undefined;
+  "aria-label": string;
+  "aria-labelledby"?: string;
+} | {
+  label?: undefined;
+  "aria-label"?: string;
+  "aria-labelledby": string;
+};
+/** Options stacked (`vertical`) or in a wrapping row (`horizontal`, for short options). */
+export type ChoiceOrientation = "vertical" | "horizontal";

package/dist/field/choice.js

@@ -0,0 +1,67 @@
+"use client";
+import { cx } from "../internal/cx.js";
+import { FieldMessages, InFieldContext } from "./field.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { use } from "react";
+import { Field } from "@base-ui/react/field";
+import { Fieldset } from "@base-ui/react/fieldset";
+// src/field/choice.tsx
+/**
+* One option: the control and its text inside a label (the whole row is the click target), then an
+* optional description, both linked to the control by Base UI. Inside a group or a Field the row is
+* a Field.Item; on its own it is a Field.Root. With no visible label, the control renders alone.
+*/
+function ChoiceRow({ kind, label, description, disabled, className, style, children }) {
+	const inField = use(InFieldContext);
+	if (label == null) return children;
+	const row = {
+		disabled,
+		className: cx("qx-choice", className),
+		style,
+		"data-slot": kind,
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Field.Label, {
+			className: "qx-choice-label",
+			"data-slot": `${kind}-label`,
+			children: [children, /* @__PURE__ */ jsx("span", {
+				className: "qx-choice-text",
+				children: label
+			})]
+		}), description != null && /* @__PURE__ */ jsx(Field.Description, {
+			className: "qx-choice-description",
+			"data-slot": `${kind}-description`,
+			children: description
+		})] })
+	};
+	return inField ? /* @__PURE__ */ jsx(Field.Item, { ...row }) : /* @__PURE__ */ jsx(Field.Root, { ...row });
+}
+/** A question with options: Field › Fieldset rendered as the group › legend, options, messages. */
+function ChoiceGroup({ kind, label, description, error, name, disabled, orientation, className, style, group, children }) {
+	return /* @__PURE__ */ jsxs(Field.Root, {
+		name,
+		disabled,
+		invalid: error != null ? true : void 0,
+		className: cx("qx-field qx-choice-group", className),
+		style,
+		"data-slot": `${kind}-group`,
+		"data-orientation": orientation,
+		children: [/* @__PURE__ */ jsxs(Fieldset.Root, {
+			render: group,
+			className: "qx-choice-group-set",
+			children: [/* @__PURE__ */ jsx(Fieldset.Legend, {
+				className: "qx-field-label",
+				"data-slot": `${kind}-group-legend`,
+				children: label
+			}), /* @__PURE__ */ jsx("div", {
+				className: "qx-choice-group-options",
+				children: /* @__PURE__ */ jsx(InFieldContext, {
+					value: true,
+					children
+				})
+			})]
+		}), /* @__PURE__ */ jsx(FieldMessages, {
+			description,
+			error
+		})]
+	});
+}
+export { ChoiceGroup, ChoiceRow };

package/dist/field/field.d.ts

@@ -0,0 +1,31 @@
+import { QeetrixMessages } from "../internal/messages.js";
+import { CSSProperties, ReactElement, ReactNode } from "react";
+import { Field } from "@base-ui/react/field";
+/** The help text and error every labelled field shares. */
+export interface FieldMessageProps {
+  /** Help text under the control, e.g. a format ("15 characters"). Hidden while an error shows. */
+  description?: ReactNode;
+  /**
+   * An error to show now, e.g. from the server; it also marks the field invalid. Without it, the
+   * browser's or `validate`'s message shows whenever the field is invalid.
+   */
+  error?: ReactNode;
+}
+export interface FieldProps extends Omit<Field.Root.Props, "className" | "style" | "render" | "children">, FieldMessageProps {
+  /** The label. Required: a placeholder is never a label. */
+  label: ReactNode;
+  /** Appends "(optional)". Qeetrix marks optional fields, never required ones. */
+  optional?: boolean;
+  /** Hides the label visually and keeps it for assistive technology. Only for a toolbar search. */
+  hideLabel?: boolean;
+  /** This field's strings, over QeetrixProvider's and the English defaults. */
+  messages?: Partial<QeetrixMessages["field"]>;
+  /** Placement only (margin, width, grid placement). */
+  className?: string;
+  style?: CSSProperties;
+  /** The control: an Input, a Textarea, or any Base UI form control. */
+  children?: ReactNode;
+}
+/** The label, help text and error for one control (06-component-specs.md §2). */
+declare function Field$1({ label, description, error, optional, hideLabel, invalid, messages, className, children, ...props }: FieldProps): ReactElement;
+export { Field$1 as Field };

package/dist/field/field.js

@@ -0,0 +1,78 @@
+"use client";
+import { cx } from "../internal/cx.js";
+import { useMessages } from "../provider/provider.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext } from "react";
+import { Field } from "@base-ui/react/field";
+import { CircleAlertIcon } from "@qeetrix/icons/icons/circle-alert";
+// src/field/field.tsx
+/**
+* True inside a Field or a choice group. A checkbox, radio or switch there is an item of that field
+* (Base UI Field.Item); on its own it is a field of its own (Field.Root).
+*/
+const InFieldContext = createContext(false);
+function ErrorRow({ children, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		children: [/* @__PURE__ */ jsx(CircleAlertIcon, {
+			shape: "sharp",
+			size: 16,
+			"aria-hidden": true,
+			className: "qx-field-error-icon"
+		}), /* @__PURE__ */ jsx("span", { children })]
+	});
+}
+/** The description and error under a control; Base UI links both to it with aria-describedby. */
+function FieldMessages({ description, error }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [description != null && /* @__PURE__ */ jsx(Field.Description, {
+		className: "qx-field-description",
+		"data-slot": "field-description",
+		children: description
+	}), /* @__PURE__ */ jsx(Field.Error, {
+		className: "qx-field-error",
+		"data-slot": "field-error",
+		match: error != null ? true : void 0,
+		render: /* @__PURE__ */ jsx(ErrorRow, {}),
+		...error != null ? { children: error } : {}
+	})] });
+}
+/** The label text, with "(optional)" when the field may be left empty. */
+function labelText(label, optional, optionalText) {
+	if (!optional) return label;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		label,
+		" ",
+		/* @__PURE__ */ jsx("span", {
+			className: "qx-field-optional",
+			"data-slot": "field-optional",
+			children: optionalText
+		})
+	] });
+}
+/** The label, help text and error for one control (06-component-specs.md §2). */
+function Field$1({ label, description, error, optional, hideLabel, invalid, messages, className, children, ...props }) {
+	const strings = useMessages("field", messages);
+	return /* @__PURE__ */ jsxs(Field.Root, {
+		...props,
+		invalid: invalid ?? (error != null ? true : void 0),
+		className: cx("qx-field", className),
+		"data-slot": "field",
+		children: [
+			/* @__PURE__ */ jsx(Field.Label, {
+				className: "qx-field-label",
+				"data-slot": "field-label",
+				"data-hidden": hideLabel ? "" : void 0,
+				children: labelText(label, optional, strings.optional)
+			}),
+			/* @__PURE__ */ jsx(InFieldContext, {
+				value: true,
+				children
+			}),
+			/* @__PURE__ */ jsx(FieldMessages, {
+				description,
+				error
+			})
+		]
+	});
+}
+export { Field$1 as Field, FieldMessages, InFieldContext, labelText };

package/dist/field/index.d.ts

@@ -0,0 +1,3 @@
+import { Field, FieldMessageProps, FieldProps } from "./field.js";
+import { ChoiceLabelProps, ChoiceOrientation } from "./choice.js";
+export { type ChoiceLabelProps, type ChoiceOrientation, Field, type FieldMessageProps, type FieldProps };

package/dist/field/index.js

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

package/dist/fieldset/fieldset.d.ts

@@ -0,0 +1,19 @@
+import { CSSProperties, ReactElement, ReactNode } from "react";
+import { Fieldset } from "@base-ui/react/fieldset";
+export interface FieldsetProps extends Omit<Fieldset.Root.Props, "className" | "style" | "children"> {
+  /** The section's heading, e.g. "Billing address". */
+  legend: ReactNode;
+  /** A line under the legend. */
+  description?: ReactNode;
+  /** Placement only (margin, width, grid placement). */
+  className?: string;
+  style?: CSSProperties;
+  /** The fields, stacked with the density's form gap. */
+  children?: ReactNode;
+}
+/**
+ * A section of fields under a heading. `disabled` disables every field inside. A choice question is
+ * a CheckboxGroup or RadioGroup, not a Fieldset.
+ */
+declare function Fieldset$1({ legend, description, className, children, ...props }: FieldsetProps): ReactElement;
+export { Fieldset$1 as Fieldset };

package/dist/fieldset/fieldset.js

@@ -0,0 +1,29 @@
+"use client";
+import { cx } from "../internal/cx.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fieldset } from "@base-ui/react/fieldset";
+// src/fieldset/fieldset.tsx
+/**
+* A section of fields under a heading. `disabled` disables every field inside. A choice question is
+* a CheckboxGroup or RadioGroup, not a Fieldset.
+*/
+function Fieldset$1({ legend, description, className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Fieldset.Root, {
+		...props,
+		className: cx("qx-fieldset", className),
+		"data-slot": "fieldset",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "qx-fieldset-header",
+			children: [/* @__PURE__ */ jsx(Fieldset.Legend, {
+				className: "qx-fieldset-legend",
+				"data-slot": "fieldset-legend",
+				children: legend
+			}), description != null && /* @__PURE__ */ jsx("p", {
+				className: "qx-fieldset-description",
+				"data-slot": "fieldset-description",
+				children: description
+			})]
+		}), children]
+	});
+}
+export { Fieldset$1 as Fieldset };

package/dist/fieldset/index.d.ts

@@ -0,0 +1,2 @@
+import { Fieldset, FieldsetProps } from "./fieldset.js";
+export { Fieldset, type FieldsetProps };

package/dist/fieldset/index.js

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

package/dist/format/format.d.ts

@@ -0,0 +1,12 @@
+/** A number in the locale's digits and grouping: 1234567 → "12,34,567" in `en-IN`. */
+export declare function formatNumber(value: number, locale?: string, options?: Intl.NumberFormatOptions): string;
+/**
+ * An amount of money: `formatCurrency(124500, "INR")` → "₹1,24,500.00". Whole amounts can drop the
+ * decimals with `{ maximumFractionDigits: 0 }`.
+ */
+export declare function formatCurrency(value: number, currency: string, locale?: string, options?: Intl.NumberFormatOptions): string;
+/**
+ * How long ago or how soon, in the largest whole unit: "2 minutes ago", "in 3 days", "yesterday".
+ * `now` is a parameter so server and client render the same text.
+ */
+export declare function formatRelativeTime(date: Date | number, locale?: string, now?: Date | number): string;

package/dist/format/format.js

@@ -0,0 +1,50 @@
+import { DEFAULT_LOCALE } from "../internal/messages.js";
+// src/format/format.ts
+/**
+* Locale-aware formatting on Intl (decision D-13). Pure and server-safe: on the client, pass
+* `useLocale()`. Formatters are cached per locale and options, since constructing one is the slow
+* part.
+*/
+const cache = /* @__PURE__ */ new Map();
+function cached(key, create) {
+	let formatter = cache.get(key);
+	if (!formatter) {
+		formatter = create();
+		cache.set(key, formatter);
+	}
+	return formatter;
+}
+/** A number in the locale's digits and grouping: 1234567 → "12,34,567" in `en-IN`. */
+function formatNumber(value, locale = DEFAULT_LOCALE, options = {}) {
+	return cached(`n|${locale}|${JSON.stringify(options)}`, () => new Intl.NumberFormat(locale, options)).format(value);
+}
+/**
+* An amount of money: `formatCurrency(124500, "INR")` → "₹1,24,500.00". Whole amounts can drop the
+* decimals with `{ maximumFractionDigits: 0 }`.
+*/
+function formatCurrency(value, currency, locale = DEFAULT_LOCALE, options = {}) {
+	return formatNumber(value, locale, {
+		style: "currency",
+		currency,
+		...options
+	});
+}
+const UNITS = [
+	["year", 31536e6],
+	["month", 2592e6],
+	["week", 6048e5],
+	["day", 864e5],
+	["hour", 36e5],
+	["minute", 6e4],
+	["second", 1e3]
+];
+/**
+* How long ago or how soon, in the largest whole unit: "2 minutes ago", "in 3 days", "yesterday".
+* `now` is a parameter so server and client render the same text.
+*/
+function formatRelativeTime(date, locale = DEFAULT_LOCALE, now = Date.now()) {
+	const delta = Number(date) - Number(now);
+	const [unit, size] = UNITS.find(([, ms]) => Math.abs(delta) >= ms) ?? ["second", 1e3];
+	return cached(`r|${locale}`, () => new Intl.RelativeTimeFormat(locale, { numeric: "auto" })).format(Math.round(delta / size), unit);
+}
+export { formatCurrency, formatNumber, formatRelativeTime };

package/dist/format/index.d.ts

@@ -0,0 +1,2 @@
+import { formatCurrency, formatNumber, formatRelativeTime } from "./format.js";
+export { formatCurrency, formatNumber, formatRelativeTime };

package/dist/format/index.js

@@ -0,0 +1 @@
+export { formatCurrency, formatNumber, formatRelativeTime } from "./format.js";

package/dist/grid/grid.d.ts

@@ -0,0 +1,30 @@
+import { RenderProp } from "../internal/render.js";
+import { Space } from "../internal/space.js";
+import { ComponentProps, ReactElement } from "react";
+export type GridColumnCount = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+/** Columns per window size class. Each class inherits the nearest smaller one that is set. */
+export interface GridColumns {
+  /** Below 600px, and the starting point for the others. */
+  base?: GridColumnCount;
+  /** From 600px. */
+  medium?: GridColumnCount;
+  /** From 840px. */
+  expanded?: GridColumnCount;
+  /** From 1200px. */
+  large?: GridColumnCount;
+  /** From 1600px. */
+  xlarge?: GridColumnCount;
+}
+export type GridAlign = "start" | "center" | "end" | "stretch";
+export interface GridProps extends ComponentProps<"div"> {
+  /** Equal columns: one count, or one per window size class. Default 1. */
+  columns?: GridColumnCount | GridColumns;
+  /** Space between cells, from the space scale. Default `md` (12px). */
+  gap?: Space;
+  /** Vertical alignment of cells in a row. Default `stretch`. */
+  align?: GridAlign;
+  /** Render a different element, e.g. `<ul />`. */
+  render?: RenderProp;
+}
+/** Responsive equal columns on the window size classes, with token gaps. */
+export declare function Grid({ columns, gap, align, render, className, style, ...props }: GridProps): ReactElement;

package/dist/grid/grid.js

@@ -0,0 +1,36 @@
+import { cx } from "../internal/cx.js";
+import { renderElement } from "../internal/render.js";
+// src/grid/grid.tsx
+const SIZE_CLASSES = [
+	"base",
+	"medium",
+	"expanded",
+	"large",
+	"xlarge"
+];
+/** A whole number from 1 to 12; the value becomes a CSS variable, so it is never trusted as-is. */
+const count = (value) => Math.min(12, Math.max(1, Math.trunc(value) || 1));
+function columnVariables(columns) {
+	const perClass = typeof columns === "number" ? { base: columns } : columns;
+	const variables = {};
+	for (const sizeClass of SIZE_CLASSES) {
+		const value = perClass[sizeClass];
+		if (value !== void 0) variables[`--qx-grid-${sizeClass}`] = count(value);
+	}
+	return variables;
+}
+/** Responsive equal columns on the window size classes, with token gaps. */
+function Grid({ columns = 1, gap = "md", align, render, className, style, ...props }) {
+	return renderElement("div", render, {
+		...props,
+		className: cx("qx-grid", className),
+		style: {
+			...columnVariables(columns),
+			...style
+		},
+		"data-slot": "grid",
+		"data-gap": gap,
+		"data-align": align
+	});
+}
+export { Grid };

package/dist/grid/index.d.ts

@@ -0,0 +1,2 @@
+import { Grid, GridAlign, GridColumnCount, GridColumns, GridProps } from "./grid.js";
+export { Grid, type GridAlign, type GridColumnCount, type GridColumns, type GridProps };

package/dist/grid/index.js

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

package/dist/heading/heading.d.ts

@@ -0,0 +1,23 @@
+import { RenderProp } from "../internal/render.js";
+import { TextAlign } from "../internal/space.js";
+import { Truncate } from "../internal/text.js";
+import { ComponentProps, ReactElement } from "react";
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export type HeadingSize = "display-lg" | "display-md" | "display-sm" | "heading-lg" | "heading-md" | "heading-sm" | "title-lg" | "title-md" | "title-sm";
+export type HeadingTone = "default" | "subtle" | "inverse";
+export interface HeadingProps extends ComponentProps<"h2"> {
+  /** The document level: renders `<h1>`…`<h6>`. Required, so the outline is always intended. */
+  level: HeadingLevel;
+  /** The look. Default by level: 1 heading-lg, 2 heading-md, 3 heading-sm, 4 title-lg, 5 title-md, 6 title-sm. */
+  size?: HeadingSize;
+  /** `default`, `subtle` or `inverse`. */
+  tone?: HeadingTone;
+  /** `true` for one line with an ellipsis, or a number of lines. */
+  truncate?: Truncate;
+  /** Logical alignment. */
+  align?: TextAlign;
+  /** Render a different element. Prefer `level`; use this for a link that looks like a heading. */
+  render?: RenderProp;
+}
+/** A section heading: the level sets the element, the size sets the look. */
+export declare function Heading({ level, size, tone, truncate, align, render, className, style, ...props }: HeadingProps): ReactElement;