@qeetrix/react 0.0.0-stage → 0.0.2

package/dist/dialog/dialog.js

@@ -0,0 +1,120 @@
+"use client";
+import { cx } from "../internal/cx.js";
+import { messages } from "../internal/messages.js";
+import { IconButton } from "../button/button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, use } from "react";
+import { AlertDialog } from "@base-ui/react/alert-dialog";
+import { Dialog } from "@base-ui/react/dialog";
+import { XIcon } from "@qeetrix/icons/icons/x";
+// src/dialog/dialog.tsx
+/** The ways a user dismisses a dialog, as opposed to choosing one of its actions. */
+const DISMISSALS = /* @__PURE__ */ new Set([
+	"escape-key",
+	"outside-press",
+	"focus-out"
+]);
+const DialogContext = createContext({
+	intent: "standard",
+	dismissible: true
+});
+/** Holds a dialog's open state: `open` / `defaultOpen` / `onOpenChange(open, details)`. */
+function Dialog$1({ intent = "standard", dismissible = intent !== "danger", modal, onOpenChange, children, ...props }) {
+	const handleOpenChange = (open, details) => {
+		if (!open && !dismissible && DISMISSALS.has(details.reason)) {
+			details.cancel();
+			return;
+		}
+		onOpenChange?.(open, details);
+	};
+	return /* @__PURE__ */ jsx(DialogContext, {
+		value: {
+			intent,
+			dismissible
+		},
+		children: intent === "standard" ? /* @__PURE__ */ jsx(Dialog.Root, {
+			...props,
+			modal,
+			disablePointerDismissal: !dismissible,
+			onOpenChange: handleOpenChange,
+			children
+		}) : /* @__PURE__ */ jsx(AlertDialog.Root, {
+			...props,
+			onOpenChange: handleOpenChange,
+			children
+		})
+	});
+}
+/** Opens the dialog. Render your own control: `render={<Button tone="danger">Revoke</Button>}`. */
+function DialogTrigger(props) {
+	const { intent } = use(DialogContext);
+	return intent === "standard" ? /* @__PURE__ */ jsx(Dialog.Trigger, { ...props }) : /* @__PURE__ */ jsx(AlertDialog.Trigger, { ...props });
+}
+/** Closes the dialog, e.g. Cancel: `render={<Button variant="ghost">Cancel</Button>}`. */
+function DialogClose(props) {
+	return /* @__PURE__ */ jsx(Dialog.Close, { ...props });
+}
+/**
+* The dialog (06-component-specs.md §6): over a scrim, with the intent line, the header, then your
+* body and footer. The close button comes last in the DOM, so initial focus lands on the first field
+* or else the footer's first (least destructive) action.
+*/
+function DialogContent({ title, description, size = "md", className, children, ...props }) {
+	const { intent, dismissible } = use(DialogContext);
+	return /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {
+		className: "qx-dialog-backdrop",
+		"data-slot": "dialog-backdrop"
+	}), /* @__PURE__ */ jsx(Dialog.Viewport, {
+		className: "qx-dialog-viewport",
+		children: /* @__PURE__ */ jsxs(Dialog.Popup, {
+			...props,
+			className: cx("qx-dialog", className),
+			"data-slot": "dialog-popup",
+			"data-intent": intent,
+			"data-size": size,
+			"data-dismissible": dismissible ? "" : void 0,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "qx-dialog-header",
+					"data-slot": "dialog-header",
+					children: [/* @__PURE__ */ jsx(Dialog.Title, {
+						className: "qx-dialog-title",
+						"data-slot": "dialog-title",
+						children: title
+					}), description != null && /* @__PURE__ */ jsx(Dialog.Description, {
+						className: "qx-dialog-description",
+						"data-slot": "dialog-description",
+						children: description
+					})]
+				}),
+				children,
+				dismissible && /* @__PURE__ */ jsx("div", {
+					className: "qx-dialog-close",
+					"data-slot": "dialog-close",
+					children: /* @__PURE__ */ jsx(Dialog.Close, { render: /* @__PURE__ */ jsx(IconButton, {
+						icon: XIcon,
+						"aria-label": messages.overlay.close,
+						size: "sm"
+					}) })
+				})
+			]
+		})
+	})] });
+}
+/** The dialog's content; it scrolls when the dialog reaches its maximum height. */
+function DialogBody({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cx("qx-dialog-body", className),
+		"data-slot": "dialog-body"
+	});
+}
+/** The actions, end-aligned: tertiary first, then the primary or destructive action. */
+function DialogFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cx("qx-dialog-footer", className),
+		"data-slot": "dialog-footer"
+	});
+}
+export { Dialog$1 as Dialog, DialogBody, DialogClose, DialogContent, DialogFooter, DialogTrigger };

package/dist/dialog/index.d.ts

@@ -0,0 +1,2 @@
+import { Dialog, DialogBody, DialogBodyProps, DialogClose, DialogCloseProps, DialogContent, DialogContentProps, DialogFooter, DialogFooterProps, DialogIntent, DialogProps, DialogSize, DialogTrigger, DialogTriggerProps } from "./dialog.js";
+export { Dialog, DialogBody, type DialogBodyProps, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogFooter, type DialogFooterProps, type DialogIntent, type DialogProps, type DialogSize, DialogTrigger, type DialogTriggerProps };

package/dist/dialog/index.js

@@ -0,0 +1 @@
+export { Dialog, DialogBody, DialogClose, DialogContent, DialogFooter, DialogTrigger } from "./dialog.js";

package/dist/drawer/drawer.d.ts

@@ -0,0 +1,46 @@
+import { CSSProperties, ComponentProps, ReactElement, ReactNode } from "react";
+import { Drawer } from "@base-ui/react/drawer";
+/** The edge a drawer opens from, in the text direction: `end` is the right edge in English. */
+export type DrawerSide = "start" | "end";
+export type DrawerSize = "sm" | "md" | "lg";
+export interface DrawerProps extends Omit<Drawer.Root.Props, "swipeDirection"> {
+  /** Default `end`. Right-to-left layouts need Base UI's DirectionProvider, as its keyboard does. */
+  side?: DrawerSide;
+}
+export type DrawerTriggerProps = Drawer.Trigger.Props;
+export type DrawerCloseProps = Drawer.Close.Props;
+export interface DrawerContentProps extends Omit<Drawer.Popup.Props, "className" | "style" | "title" | "children"> {
+  /** The title; it labels the drawer. */
+  title: ReactNode;
+  /** A line under the title; it describes the drawer. */
+  description?: ReactNode;
+  /** Width: `sm` 400, `md` 560 (default) or `lg` 800px. */
+  size?: DrawerSize;
+  /** Placement only. */
+  className?: string;
+  style?: CSSProperties;
+  /** DrawerBody and DrawerFooter. */
+  children?: ReactNode;
+}
+export interface DrawerBodyProps extends Omit<Drawer.Content.Props, "className"> {
+  className?: string;
+}
+export interface DrawerFooterProps extends ComponentProps<"div"> {}
+/** Holds a drawer's open state: `open` / `defaultOpen` / `onOpenChange(open, details)`. */
+declare function Drawer$1({ side, ...props }: DrawerProps): ReactElement;
+/** Opens the drawer. Render your own control: `render={<Button>Edit</Button>}`. */
+export declare function DrawerTrigger(props: DrawerTriggerProps): ReactElement;
+/** Closes the drawer, e.g. Cancel: `render={<Button variant="ghost">Cancel</Button>}`. */
+export declare function DrawerClose(props: DrawerCloseProps): ReactElement;
+/**
+ * A full-height side panel (06-component-specs.md, increment 4) with a ruled header, a scrolling
+ * body and a ruled footer. Escape, an outside click and a swipe toward its edge close it. On open,
+ * focus goes to the first focusable element in the body, as in a dialog; on touch it goes to the
+ * drawer itself, so a phone's keyboard doesn't open over it.
+ */
+export declare function DrawerContent({ title, description, size, initialFocus, ref, className, children, ...props }: DrawerContentProps): ReactElement;
+/** The drawer's content; it scrolls, and text in it can be selected without starting a swipe. */
+export declare function DrawerBody({ className, ...props }: DrawerBodyProps): ReactElement;
+/** The actions, end-aligned under a rule: tertiary first, then the primary action. */
+export declare function DrawerFooter({ className, ...props }: DrawerFooterProps): ReactElement;
+export { Drawer$1 as Drawer };

package/dist/drawer/drawer.js

@@ -0,0 +1,101 @@
+"use client";
+import { cx } from "../internal/cx.js";
+import { messages } from "../internal/messages.js";
+import { IconButton } from "../button/button.js";
+import { mergeRefs } from "../internal/refs.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, use, useRef } from "react";
+import { XIcon } from "@qeetrix/icons/icons/x";
+import { useDirection } from "@base-ui/react/direction-provider";
+import { Drawer } from "@base-ui/react/drawer";
+// src/drawer/drawer.tsx
+const SideContext = createContext("end");
+const FOCUSABLE = "input:not([type=\"hidden\"], :disabled), textarea:not(:disabled), select:not(:disabled), button:not(:disabled), [href], [tabindex]:not([tabindex=\"-1\"])";
+/** Holds a drawer's open state: `open` / `defaultOpen` / `onOpenChange(open, details)`. */
+function Drawer$1({ side = "end", ...props }) {
+	const rtl = useDirection() === "rtl";
+	const swipeDirection = side === "end" === rtl ? "left" : "right";
+	return /* @__PURE__ */ jsx(SideContext, {
+		value: side,
+		children: /* @__PURE__ */ jsx(Drawer.Root, {
+			...props,
+			swipeDirection
+		})
+	});
+}
+/** Opens the drawer. Render your own control: `render={<Button>Edit</Button>}`. */
+function DrawerTrigger(props) {
+	return /* @__PURE__ */ jsx(Drawer.Trigger, { ...props });
+}
+/** Closes the drawer, e.g. Cancel: `render={<Button variant="ghost">Cancel</Button>}`. */
+function DrawerClose(props) {
+	return /* @__PURE__ */ jsx(Drawer.Close, { ...props });
+}
+/**
+* A full-height side panel (06-component-specs.md, increment 4) with a ruled header, a scrolling
+* body and a ruled footer. Escape, an outside click and a swipe toward its edge close it. On open,
+* focus goes to the first focusable element in the body, as in a dialog; on touch it goes to the
+* drawer itself, so a phone's keyboard doesn't open over it.
+*/
+function DrawerContent({ title, description, size = "md", initialFocus, ref, className, children, ...props }) {
+	const side = use(SideContext);
+	const popup = useRef(null);
+	const firstInBody = (type) => type === "touch" || (popup.current?.querySelector(`[data-slot="drawer-body"] :is(${FOCUSABLE})`) ?? true);
+	return /* @__PURE__ */ jsxs(Drawer.Portal, { children: [/* @__PURE__ */ jsx(Drawer.Backdrop, {
+		className: "qx-drawer-backdrop",
+		"data-slot": "drawer-backdrop"
+	}), /* @__PURE__ */ jsx(Drawer.Viewport, {
+		className: "qx-drawer-viewport",
+		"data-side": side,
+		children: /* @__PURE__ */ jsxs(Drawer.Popup, {
+			...props,
+			ref: mergeRefs(ref, popup),
+			initialFocus: initialFocus ?? firstInBody,
+			className: cx("qx-drawer", className),
+			"data-slot": "drawer-popup",
+			"data-size": size,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "qx-drawer-header",
+					"data-slot": "drawer-header",
+					children: [/* @__PURE__ */ jsx(Drawer.Title, {
+						className: "qx-drawer-title",
+						"data-slot": "drawer-title",
+						children: title
+					}), description != null && /* @__PURE__ */ jsx(Drawer.Description, {
+						className: "qx-drawer-description",
+						"data-slot": "drawer-description",
+						children: description
+					})]
+				}),
+				children,
+				/* @__PURE__ */ jsx("div", {
+					className: "qx-drawer-close",
+					"data-slot": "drawer-close",
+					children: /* @__PURE__ */ jsx(Drawer.Close, { render: /* @__PURE__ */ jsx(IconButton, {
+						icon: XIcon,
+						"aria-label": messages.overlay.close,
+						size: "sm"
+					}) })
+				})
+			]
+		})
+	})] });
+}
+/** The drawer's content; it scrolls, and text in it can be selected without starting a swipe. */
+function DrawerBody({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer.Content, {
+		...props,
+		className: cx("qx-drawer-body", className),
+		"data-slot": "drawer-body"
+	});
+}
+/** The actions, end-aligned under a rule: tertiary first, then the primary action. */
+function DrawerFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cx("qx-drawer-footer", className),
+		"data-slot": "drawer-footer"
+	});
+}
+export { Drawer$1 as Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerFooter, DrawerTrigger };

package/dist/drawer/index.d.ts

@@ -0,0 +1,2 @@
+import { Drawer, DrawerBody, DrawerBodyProps, DrawerClose, DrawerCloseProps, DrawerContent, DrawerContentProps, DrawerFooter, DrawerFooterProps, DrawerProps, DrawerSide, DrawerSize, DrawerTrigger, DrawerTriggerProps } from "./drawer.js";
+export { Drawer, DrawerBody, type DrawerBodyProps, DrawerClose, type DrawerCloseProps, DrawerContent, type DrawerContentProps, DrawerFooter, type DrawerFooterProps, type DrawerProps, type DrawerSide, type DrawerSize, DrawerTrigger, type DrawerTriggerProps };

package/dist/drawer/index.js

@@ -0,0 +1 @@
+export { Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerFooter, DrawerTrigger } from "./drawer.js";

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,28 @@
+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;
+  /** 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, className, children, ...props }: FieldProps): ReactElement;
+export { Field$1 as Field };

package/dist/field/field.js

@@ -0,0 +1,77 @@
+"use client";
+import { cx } from "../internal/cx.js";
+import { messages } from "../internal/messages.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) {
+	if (!optional) return label;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		label,
+		" ",
+		/* @__PURE__ */ jsx("span", {
+			className: "qx-field-optional",
+			"data-slot": "field-optional",
+			children: messages.field.optional
+		})
+	] });
+}
+/** The label, help text and error for one control (06-component-specs.md §2). */
+function Field$1({ label, description, error, optional, hideLabel, invalid, className, children, ...props }) {
+	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)
+			}),
+			/* @__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/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;