@qeetrix/react 0.0.0-stage → 0.0.2

package/dist/switch/index.d.ts

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

package/dist/switch/index.js

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

package/dist/switch/switch.d.ts

@@ -0,0 +1,18 @@
+import { ChoiceLabelProps } from "../field/choice.js";
+import { CSSProperties, ReactElement, ReactNode } from "react";
+import { Switch } from "@base-ui/react/switch";
+interface SwitchOwnProps extends Omit<Switch.Root.Props, "className" | "style" | "children"> {
+  /** A line under the label. */
+  description?: ReactNode;
+  /** Placement of the row (or of the control alone, with no label) only. */
+  className?: string;
+  style?: CSSProperties;
+}
+/** Switch props: Base UI's, plus `label` — or, with no visible label, a required `aria-label`. */
+export type SwitchProps = SwitchOwnProps & ChoiceLabelProps;
+/**
+ * Turns a setting on or off immediately (06-component-specs.md §3). A setting that waits for a Save
+ * button is a Checkbox.
+ */
+declare function Switch$1({ label, description, className, style, ...props }: SwitchProps): ReactElement;
+export { Switch$1 as Switch };

package/dist/switch/switch.js

@@ -0,0 +1,31 @@
+"use client";
+import { cx } from "../internal/cx.js";
+import { ChoiceRow } from "../field/choice.js";
+import { jsx } from "react/jsx-runtime";
+import { Switch } from "@base-ui/react/switch";
+// src/switch/switch.tsx
+/**
+* Turns a setting on or off immediately (06-component-specs.md §3). A setting that waits for a Save
+* button is a Checkbox.
+*/
+function Switch$1({ label, description, className, style, ...props }) {
+	return /* @__PURE__ */ jsx(ChoiceRow, {
+		kind: "switch",
+		label,
+		description,
+		disabled: props.disabled,
+		className,
+		style,
+		children: /* @__PURE__ */ jsx(Switch.Root, {
+			...props,
+			className: cx("qx-switch", label == null ? className : void 0),
+			style: label == null ? style : void 0,
+			"data-slot": "switch-track",
+			children: /* @__PURE__ */ jsx(Switch.Thumb, {
+				className: "qx-switch-thumb",
+				"data-slot": "switch-thumb"
+			})
+		})
+	});
+}
+export { Switch$1 as Switch };

package/dist/table/index.d.ts

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

package/dist/table/index.js

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

package/dist/table/table.d.ts

@@ -0,0 +1,36 @@
+import { ComponentProps, ReactElement } from "react";
+export type TableAlign = "start" | "center" | "end";
+export interface TableProps extends ComponentProps<"table"> {}
+export interface TableCaptionProps extends ComponentProps<"caption"> {}
+export interface TableHeaderProps extends ComponentProps<"thead"> {}
+export interface TableBodyProps extends ComponentProps<"tbody"> {}
+export interface TableRowProps extends ComponentProps<"tr"> {
+  /** The Ember tint of a selected row. Its checked checkbox carries the meaning. */
+  selected?: boolean;
+}
+interface CellLook {
+  /** Horizontal alignment. Default `start`. */
+  align?: TableAlign;
+  /** Numbers, amounts and dates: tabular figures, end-aligned. */
+  numeric?: boolean;
+}
+export interface TableHeadProps extends Omit<ComponentProps<"th">, "align">, CellLook {}
+export interface TableCellProps extends Omit<ComponentProps<"td">, "align">, CellLook {}
+/**
+ * A semantic data table (design rules §15): a header band, rows at the density's row height and
+ * 1px lines between them. Wide tables go in a ScrollArea. Server-safe.
+ */
+export declare function Table({ className, ...props }: TableProps): ReactElement;
+/** The table's name, above it. Every table needs a caption or an `aria-label`. */
+export declare function TableCaption({ className, ...props }: TableCaptionProps): ReactElement;
+/** The header band. */
+export declare function TableHeader({ className, ...props }: TableHeaderProps): ReactElement;
+/** The rows. */
+export declare function TableBody({ className, ...props }: TableBodyProps): ReactElement;
+/** A row; `selected` tints it. */
+export declare function TableRow({ selected, className, ...props }: TableRowProps): ReactElement;
+/** A header cell; `scope` defaults to `col`. */
+export declare function TableHead({ align, numeric, scope, className, ...props }: TableHeadProps): ReactElement;
+/** A data cell. */
+export declare function TableCell({ align, numeric, className, ...props }: TableCellProps): ReactElement;
+export {};

package/dist/table/table.js

@@ -0,0 +1,69 @@
+import { cx } from "../internal/cx.js";
+import { jsx } from "react/jsx-runtime";
+// src/table/table.tsx
+/**
+* A semantic data table (design rules §15): a header band, rows at the density's row height and
+* 1px lines between them. Wide tables go in a ScrollArea. Server-safe.
+*/
+function Table({ className, ...props }) {
+	return /* @__PURE__ */ jsx("table", {
+		...props,
+		className: cx("qx-table", className),
+		"data-slot": "table"
+	});
+}
+/** The table's name, above it. Every table needs a caption or an `aria-label`. */
+function TableCaption({ className, ...props }) {
+	return /* @__PURE__ */ jsx("caption", {
+		...props,
+		className: cx("qx-table-caption", className),
+		"data-slot": "table-caption"
+	});
+}
+/** The header band. */
+function TableHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("thead", {
+		...props,
+		className: cx("qx-table-header", className),
+		"data-slot": "table-header"
+	});
+}
+/** The rows. */
+function TableBody({ className, ...props }) {
+	return /* @__PURE__ */ jsx("tbody", {
+		...props,
+		className: cx("qx-table-body", className),
+		"data-slot": "table-body"
+	});
+}
+/** A row; `selected` tints it. */
+function TableRow({ selected, className, ...props }) {
+	return /* @__PURE__ */ jsx("tr", {
+		...props,
+		className: cx("qx-table-row", className),
+		"data-slot": "table-row",
+		"data-selected": selected ? "" : void 0
+	});
+}
+/** A header cell; `scope` defaults to `col`. */
+function TableHead({ align, numeric, scope = "col", className, ...props }) {
+	return /* @__PURE__ */ jsx("th", {
+		...props,
+		scope,
+		className: cx("qx-table-head", className),
+		"data-slot": "table-head",
+		"data-align": numeric ? "end" : align,
+		"data-numeric": numeric ? "" : void 0
+	});
+}
+/** A data cell. */
+function TableCell({ align, numeric, className, ...props }) {
+	return /* @__PURE__ */ jsx("td", {
+		...props,
+		className: cx("qx-table-cell", className),
+		"data-slot": "table-cell",
+		"data-align": numeric ? "end" : align,
+		"data-numeric": numeric ? "" : void 0
+	});
+}
+export { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow };

package/dist/tabs/index.d.ts

@@ -0,0 +1,2 @@
+import { Tab, TabProps, Tabs, TabsList, TabsListProps, TabsPanel, TabsPanelProps, TabsProps } from "./tabs.js";
+export { Tab, type TabProps, Tabs, TabsList, type TabsListProps, TabsPanel, type TabsPanelProps, type TabsProps };

package/dist/tabs/index.js

@@ -0,0 +1 @@
+export { Tab, Tabs, TabsList, TabsPanel } from "./tabs.js";

package/dist/tabs/tabs.d.ts

@@ -0,0 +1,43 @@
+import { QeetrixIcon } from "../internal/control.js";
+import { CSSProperties, ReactElement, ReactNode } from "react";
+import { Tabs } from "@base-ui/react/tabs";
+export interface TabsProps extends Omit<Tabs.Root.Props, "className" | "style"> {
+  /** Placement only. */
+  className?: string;
+  style?: CSSProperties;
+}
+export interface TabsListProps extends Omit<Tabs.List.Props, "className" | "style"> {
+  /** Select a tab as soon as it takes focus. Default `true`; turn it off when panels load slowly. */
+  activateOnFocus?: boolean;
+  className?: string;
+  style?: CSSProperties;
+}
+export interface TabProps extends Omit<Tabs.Tab.Props, "className" | "style" | "children"> {
+  /** A leading 16px icon from `@qeetrix/icons`, sharp. */
+  icon?: QeetrixIcon;
+  /** Show the icon's filled drawing while selected. Only for icons that have one. */
+  filledWhenSelected?: boolean;
+  /** The label. */
+  children?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+}
+export interface TabsPanelProps extends Omit<Tabs.Panel.Props, "className" | "style"> {
+  className?: string;
+  style?: CSSProperties;
+}
+/**
+ * Views of the same context (06-component-specs.md §8): `value` / `defaultValue` /
+ * `onValueChange(value, details)`, and `orientation`.
+ */
+declare function Tabs$1({ className, ...props }: TabsProps): ReactElement;
+/**
+ * The tabs, one tab stop: arrow keys move between them, Home and End jump. It draws the Ember bar
+ * under the selected tab, and the bar slides when the selection changes.
+ */
+export declare function TabsList({ activateOnFocus, className, children, ...props }: TabsListProps): ReactElement;
+/** One tab: a label, and optionally a leading icon that fills when selected. */
+export declare function Tab({ icon: Icon, filledWhenSelected, className, children, ...props }: TabProps): ReactElement;
+/** The content for one tab's `value`; it follows the tab list in the Tab order. */
+export declare function TabsPanel({ className, ...props }: TabsPanelProps): ReactElement;
+export { Tabs$1 as Tabs };

package/dist/tabs/tabs.js

@@ -0,0 +1,66 @@
+"use client";
+import { cx } from "../internal/cx.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tabs } from "@base-ui/react/tabs";
+// src/tabs/tabs.tsx
+/**
+* Views of the same context (06-component-specs.md §8): `value` / `defaultValue` /
+* `onValueChange(value, details)`, and `orientation`.
+*/
+function Tabs$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs.Root, {
+		...props,
+		className: cx("qx-tabs", className),
+		"data-slot": "tabs"
+	});
+}
+/**
+* The tabs, one tab stop: arrow keys move between them, Home and End jump. It draws the Ember bar
+* under the selected tab, and the bar slides when the selection changes.
+*/
+function TabsList({ activateOnFocus = true, className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Tabs.List, {
+		...props,
+		activateOnFocus,
+		className: cx("qx-tabs-list", className),
+		"data-slot": "tabs-list",
+		children: [children, /* @__PURE__ */ jsx(Tabs.Indicator, {
+			className: "qx-tabs-indicator",
+			"data-slot": "tabs-indicator"
+		})]
+	});
+}
+/** One tab: a label, and optionally a leading icon that fills when selected. */
+function Tab({ icon: Icon, filledWhenSelected, className, children, ...props }) {
+	const Filled = Icon;
+	return /* @__PURE__ */ jsxs(Tabs.Tab, {
+		...props,
+		className: cx("qx-tab", className),
+		"data-slot": "tab",
+		children: [
+			Icon && /* @__PURE__ */ jsx(Icon, {
+				shape: "sharp",
+				size: 16,
+				"aria-hidden": true,
+				className: "qx-tab-icon qx-tab-icon-outline"
+			}),
+			Filled && filledWhenSelected && /* @__PURE__ */ jsx(Filled, {
+				shape: "sharp",
+				variant: "filled",
+				size: 16,
+				"aria-hidden": true,
+				className: "qx-tab-icon qx-tab-icon-filled"
+			}),
+			children
+		]
+	});
+}
+/** The content for one tab's `value`; it follows the tab list in the Tab order. */
+function TabsPanel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs.Panel, {
+		...props,
+		className: cx("qx-tabs-panel", className),
+		"data-slot": "tabs-panel"
+	});
+}
+export { Tab, Tabs$1 as Tabs, TabsList, TabsPanel };

package/dist/text/index.d.ts

@@ -0,0 +1,3 @@
+import { TextTone, Truncate } from "../internal/text.js";
+import { Text, TextProps, TextSize, TextWeight } from "./text.js";
+export { Text, type TextProps, type TextSize, type TextTone, type TextWeight, type Truncate };

package/dist/text/index.js

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

package/dist/text/text.d.ts

@@ -0,0 +1,24 @@
+import { RenderProp } from "../internal/render.js";
+import { TextAlign } from "../internal/space.js";
+import { TextTone, Truncate } from "../internal/text.js";
+import { ComponentProps, ReactElement } from "react";
+export type TextSize = "sm" | "md" | "lg";
+export type TextWeight = "regular" | "medium" | "semibold";
+export interface TextProps extends ComponentProps<"span"> {
+  /** The body role: `sm` 12/16, `md` 14/20 (default), `lg` 16/24. */
+  size?: TextSize;
+  /** `regular` 400 (default), `medium` 500, `semibold` 600. */
+  weight?: TextWeight;
+  /** A text colour from the tokens; unset inherits. */
+  tone?: TextTone;
+  /** Fira Code at the same size, for code, IDs and keys. */
+  mono?: boolean;
+  /** `true` for one line with an ellipsis, or a number of lines. */
+  truncate?: Truncate;
+  /** Logical alignment. */
+  align?: TextAlign;
+  /** Render a different element, e.g. `<p />`. Default `<span>`. */
+  render?: RenderProp;
+}
+/** Running text, labels and inline code, on the token type roles. */
+export declare function Text({ size, weight, tone, mono, truncate, align, render, className, style, ...props }: TextProps): ReactElement;

package/dist/text/text.js

@@ -0,0 +1,24 @@
+import { cx } from "../internal/cx.js";
+import { renderElement } from "../internal/render.js";
+import { truncation } from "../internal/text.js";
+// src/text/text.tsx
+/** Running text, labels and inline code, on the token type roles. */
+function Text({ size, weight, tone, mono, truncate, align, render, className, style, ...props }) {
+	const clamp = truncation(truncate);
+	return renderElement("span", render, {
+		...props,
+		className: cx("qx-text", className),
+		style: clamp.style || style ? {
+			...clamp.style,
+			...style
+		} : void 0,
+		"data-slot": "text",
+		"data-size": size,
+		"data-weight": weight,
+		"data-tone": tone,
+		"data-mono": mono ? "" : void 0,
+		"data-truncate": clamp.attribute,
+		"data-align": align
+	});
+}
+export { Text };

package/dist/text-field/index.d.ts

@@ -0,0 +1,2 @@
+import { TextField, TextFieldProps } from "./text-field.js";
+export { TextField, type TextFieldProps };

package/dist/text-field/index.js

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

package/dist/text-field/text-field.d.ts

@@ -0,0 +1,15 @@
+import { FieldProps } from "../field/field.js";
+import { InputProps } from "../input/input.js";
+import { CSSProperties, ReactElement } from "react";
+type FieldOnly = Pick<FieldProps, "label" | "description" | "error" | "optional" | "hideLabel" | "invalid" | "validate" | "validationMode" | "validationDebounceTime" | "dirty" | "touched" | "actionsRef">;
+export interface TextFieldProps extends Omit<InputProps, "className" | "style">, FieldOnly {
+  /** Placement of the whole row only (margin, width, grid placement). */
+  className?: string;
+  style?: CSSProperties;
+}
+/**
+ * Field + Input in one: the default way to build a text row (D-12). `name`, `disabled` and
+ * validation go to the Field; `ref`, `required`, `readOnly` and every other prop go to the input.
+ */
+export declare function TextField({ label, description, error, optional, hideLabel, invalid, validate, validationMode, validationDebounceTime, dirty, touched, actionsRef, name, disabled, className, style, ...inputProps }: TextFieldProps): ReactElement;
+export {};

package/dist/text-field/text-field.js

@@ -0,0 +1,41 @@
+"use client";
+import { cx } from "../internal/cx.js";
+import { FieldMessages, labelText } from "../field/field.js";
+import { Input } from "../input/input.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Field } from "@base-ui/react/field";
+// src/text-field/text-field.tsx
+/**
+* Field + Input in one: the default way to build a text row (D-12). `name`, `disabled` and
+* validation go to the Field; `ref`, `required`, `readOnly` and every other prop go to the input.
+*/
+function TextField({ label, description, error, optional, hideLabel, invalid, validate, validationMode, validationDebounceTime, dirty, touched, actionsRef, name, disabled, className, style, ...inputProps }) {
+	return /* @__PURE__ */ jsxs(Field.Root, {
+		name,
+		disabled,
+		invalid: invalid ?? (error != null ? true : void 0),
+		validate,
+		validationMode,
+		validationDebounceTime,
+		dirty,
+		touched,
+		actionsRef,
+		className: cx("qx-field", className),
+		style,
+		"data-slot": "text-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(Input, { ...inputProps }),
+			/* @__PURE__ */ jsx(FieldMessages, {
+				description,
+				error
+			})
+		]
+	});
+}
+export { TextField };

package/dist/toast/index.d.ts

@@ -0,0 +1,2 @@
+import { ToastApi, ToastOptions, ToastPromiseOptions, ToastProvider, ToastProviderProps, ToastTone, useToast } from "./toast.js";
+export { type ToastApi, type ToastOptions, type ToastPromiseOptions, ToastProvider, type ToastProviderProps, type ToastTone, useToast };

package/dist/toast/index.js

@@ -0,0 +1 @@
+export { ToastProvider, useToast } from "./toast.js";

package/dist/toast/toast.d.ts

@@ -0,0 +1,54 @@
+import { ReactElement, ReactNode } from "react";
+export type ToastTone = "info" | "success" | "warning" | "danger";
+export interface ToastOptions {
+  /** What happened, in a few words ("Invoice sent"). */
+  title: ReactNode;
+  /** One more line, if it helps. */
+  description?: ReactNode;
+  /** Default `info`. A `danger` toast stays until dismissed and is announced at once. */
+  tone?: ToastTone;
+  /** At most one action, such as Undo. */
+  action?: {
+    label: string;
+    onClick: () => void;
+  };
+  /** Milliseconds before it closes. Default 5000; `danger` toasts ignore it. */
+  timeout?: number;
+  /** Your own id, to update or close it later. */
+  id?: string;
+  /** Called when it closes, however it closes. */
+  onClose?: () => void;
+}
+export interface ToastPromiseOptions<Value> {
+  loading: ToastOptions;
+  success: ToastOptions | ((value: Value) => ToastOptions);
+  error: ToastOptions | ((error: unknown) => ToastOptions);
+}
+export interface ToastApi {
+  /** Shows a toast and returns its id. */
+  add: (options: ToastOptions) => string;
+  /** Closes one toast, or every toast with no id. */
+  close: (id?: string) => void;
+  /** Changes a toast that is showing. */
+  update: (id: string, options: Partial<ToastOptions>) => void;
+  /** Shows `loading`, then `success` or `error` when the promise settles; returns the promise. */
+  promise: <Value>(promise: Promise<Value>, options: ToastPromiseOptions<Value>) => Promise<Value>;
+}
+export interface ToastProviderProps {
+  /** Your app. */
+  children?: ReactNode;
+  /** The most toasts shown at once; older ones wait. Default 3. */
+  limit?: number;
+  /** Default milliseconds before a toast closes. Default 5000. */
+  timeout?: number;
+}
+/**
+ * Shows toasts from anywhere inside ToastProvider:
+ * `const toast = useToast(); toast.add({ title: "Invoice sent", tone: "success" })`.
+ */
+export declare function useToast(): ToastApi;
+/**
+ * Wrap the app once. It renders the toast region: a landmark named "Notifications" at the bottom
+ * end, reachable with F6. Toasts pause while hovered or focused and swipe away on touch.
+ */
+export declare function ToastProvider({ children, limit, timeout }: ToastProviderProps): ReactElement;

package/dist/toast/toast.js

@@ -0,0 +1,123 @@
+"use client";
+import { messages } from "../internal/messages.js";
+import { Button, IconButton } from "../button/button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CircleAlertIcon } from "@qeetrix/icons/icons/circle-alert";
+import { XIcon } from "@qeetrix/icons/icons/x";
+import { Toast } from "@base-ui/react/toast";
+import { CircleCheckIcon } from "@qeetrix/icons/icons/circle-check";
+import { InfoIcon } from "@qeetrix/icons/icons/info";
+import { TriangleAlertIcon } from "@qeetrix/icons/icons/triangle-alert";
+// src/toast/toast.tsx
+const ICONS = {
+	info: InfoIcon,
+	success: CircleCheckIcon,
+	warning: TriangleAlertIcon,
+	danger: CircleAlertIcon
+};
+/** Qeetrix options in Base UI's terms: the tone is the type, and danger never times out. */
+function toBase(options) {
+	const { tone, action, timeout, ...rest } = options;
+	const base = { ...rest };
+	if (tone !== void 0) base.type = tone;
+	if (timeout !== void 0) base.timeout = timeout;
+	if (tone === "danger") {
+		base.timeout = 0;
+		base.priority = "high";
+	}
+	if (action !== void 0) base.actionProps = {
+		children: action.label,
+		onClick: action.onClick
+	};
+	return base;
+}
+/**
+* Shows toasts from anywhere inside ToastProvider:
+* `const toast = useToast(); toast.add({ title: "Invoice sent", tone: "success" })`.
+*/
+function useToast() {
+	const manager = Toast.useToastManager();
+	return {
+		add: (options) => manager.add(toBase({
+			tone: "info",
+			...options
+		})),
+		close: (id) => manager.close(id),
+		update: (id, options) => manager.update(id, toBase(options)),
+		promise: (promise, { loading, success, error }) => manager.promise(promise, {
+			loading: toBase({
+				tone: "info",
+				...loading
+			}),
+			success: (value) => toBase({
+				tone: "success",
+				...typeof success === "function" ? success(value) : success
+			}),
+			error: (reason) => toBase({
+				tone: "danger",
+				...typeof error === "function" ? error(reason) : error
+			})
+		})
+	};
+}
+function ToastList() {
+	const { toasts } = Toast.useToastManager();
+	return toasts.map((toast) => {
+		const tone = toast.type ?? "info";
+		const Icon = ICONS[tone] ?? InfoIcon;
+		return /* @__PURE__ */ jsxs(Toast.Root, {
+			toast,
+			className: "qx-toast",
+			"data-slot": "toast",
+			"data-tone": tone,
+			children: [
+				/* @__PURE__ */ jsx(Icon, {
+					shape: "sharp",
+					size: 18,
+					"aria-hidden": true,
+					className: "qx-toast-icon"
+				}),
+				/* @__PURE__ */ jsxs(Toast.Content, {
+					className: "qx-toast-content",
+					children: [/* @__PURE__ */ jsx(Toast.Title, {
+						className: "qx-toast-title",
+						"data-slot": "toast-title"
+					}), /* @__PURE__ */ jsx(Toast.Description, {
+						className: "qx-toast-description",
+						"data-slot": "toast-description"
+					})]
+				}),
+				toast.actionProps && /* @__PURE__ */ jsx(Toast.Action, {
+					className: "qx-toast-action",
+					render: /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "sm"
+					})
+				}),
+				/* @__PURE__ */ jsx(Toast.Close, { render: /* @__PURE__ */ jsx(IconButton, {
+					icon: XIcon,
+					"aria-label": messages.toast.close,
+					size: "sm",
+					tooltip: false
+				}) })
+			]
+		}, toast.id);
+	});
+}
+/**
+* Wrap the app once. It renders the toast region: a landmark named "Notifications" at the bottom
+* end, reachable with F6. Toasts pause while hovered or focused and swipe away on touch.
+*/
+function ToastProvider({ children, limit = 3, timeout = 5e3 }) {
+	return /* @__PURE__ */ jsxs(Toast.Provider, {
+		limit,
+		timeout,
+		children: [children, /* @__PURE__ */ jsx(Toast.Portal, { children: /* @__PURE__ */ jsx(Toast.Viewport, {
+			className: "qx-toast-viewport",
+			"data-slot": "toast-viewport",
+			"aria-label": messages.toast.region,
+			children: /* @__PURE__ */ jsx(ToastList, {})
+		}) })]
+	});
+}
+export { ToastProvider, useToast };

package/dist/toggle/index.d.ts

@@ -0,0 +1,2 @@
+import { Toggle, ToggleGroup, ToggleGroupProps, ToggleGroupVariant, ToggleProps } from "./toggle.js";
+export { Toggle, ToggleGroup, type ToggleGroupProps, type ToggleGroupVariant, type ToggleProps };

package/dist/toggle/index.js

@@ -0,0 +1 @@
+export { Toggle, ToggleGroup } from "./toggle.js";

package/dist/toggle/toggle.d.ts

@@ -0,0 +1,48 @@
+import { ControlSize, QeetrixIcon } from "../internal/control.js";
+import { ComponentProps, ReactElement, ReactNode } from "react";
+import { Toggle } from "@base-ui/react/toggle";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+export interface ToggleProps extends Omit<ComponentProps<"button">, "value" | "defaultValue" | "onChange" | "children"> {
+  /** Controlled pressed state. */
+  pressed?: boolean;
+  /** Initial pressed state when uncontrolled. */
+  defaultPressed?: boolean;
+  /** Called with the new pressed state and Base UI's event details. */
+  onPressedChange?: Toggle.Props["onPressedChange"];
+  /** The toggle's value inside a ToggleGroup. */
+  value?: string;
+  /** Height from the density tokens. Default `md`; a ToggleGroup's size wins inside the group. */
+  size?: ControlSize;
+  /** An icon from `@qeetrix/icons`, in the sharp shape. Icon-only toggles need `aria-label`. */
+  icon?: QeetrixIcon;
+  /** Show the icon's filled drawing while pressed. Only for icons that have one. */
+  filledWhenPressed?: boolean;
+  /** The label. */
+  children?: ReactNode;
+  /** Render a different element through Base UI. */
+  render?: Toggle.Props["render"];
+}
+/** A pressed / not-pressed control: a tool, or one view among a few (inside a ToggleGroup). */
+declare function Toggle$1({ size, icon, filledWhenPressed, className, children, type, ...props }: ToggleProps): ReactElement;
+export type ToggleGroupVariant = "segmented" | "separate";
+export interface ToggleGroupProps extends Omit<ComponentProps<"div">, "defaultValue" | "onChange" | "dir"> {
+  /** Controlled pressed values. */
+  value?: readonly string[];
+  /** Initial pressed values when uncontrolled. */
+  defaultValue?: readonly string[];
+  /** Called with the pressed values and Base UI's event details. */
+  onValueChange?: ToggleGroup.Props["onValueChange"];
+  /** Allow several toggles pressed at once. Default: one at a time. */
+  multiple?: boolean;
+  /** Disable every toggle. */
+  disabled?: boolean;
+  /** Default `horizontal`. */
+  orientation?: "horizontal" | "vertical";
+  /** `segmented` (default): one joined control. `separate`: individual toggles with a gap. */
+  variant?: ToggleGroupVariant;
+  /** Height for every toggle in the group. Default `md`. */
+  size?: ControlSize;
+}
+/** A row of toggles: a segmented control for one view among a few, or a set of tools. */
+declare function ToggleGroup$1({ variant, size, orientation, className, ...props }: ToggleGroupProps): ReactElement;
+export { Toggle$1 as Toggle, ToggleGroup$1 as ToggleGroup };