@qeetrix/react 0.0.1 → 0.0.4

package/dist/experimental/app-shell/app-shell.js

@@ -0,0 +1,224 @@
+"use client";
+import { cx } from "../../internal/cx.js";
+import { Tooltip } from "../../tooltip/tooltip.js";
+import { IconButton } from "../../button/button.js";
+import { useMediaQuery } from "../../internal/media.js";
+import { useMessages } from "../../provider/provider.js";
+import { SkipLink } from "../../skip-link/skip-link.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, use, useEffect, useId, useRef, useState } from "react";
+import { useDirection } from "@base-ui/react/direction-provider";
+import { XIcon } from "@qeetrix/icons/icons/x";
+import { Drawer } from "@base-ui/react/drawer";
+import { PanelLeftCloseIcon } from "@qeetrix/icons/icons/panel-left-close";
+import { PanelLeftOpenIcon } from "@qeetrix/icons/icons/panel-left-open";
+// src/experimental/app-shell/app-shell.tsx
+/** The `expanded` window class (tokens `breakpoint.expanded`): the sidebar is a column from here. */
+const WIDE = "(width >= 840px)";
+/** How long the pointer rests on the rail before it expands over the page. */
+const PEEK_DELAY = 200;
+const ShellContext = createContext(null);
+const outside = {
+	collapsed: false,
+	inDrawer: false,
+	narrow: false,
+	expand: () => {},
+	closeDrawer: () => {},
+	openNavigation: () => {},
+	drawers: [],
+	activeDrawer: null,
+	toggleDrawer: () => {},
+	strings: {
+		collapse: "",
+		expand: "",
+		open: "",
+		navigation: "",
+		tools: "",
+		closePanel: ""
+	}
+};
+/** The shell's state, for its own parts. Outside an AppShell, a sidebar is expanded. */
+function useShellState() {
+	return use(ShellContext) ?? outside;
+}
+/** The AppShell's state, for content inside its sidebar or bar. */
+function useAppShell() {
+	const { collapsed, inDrawer } = useShellState();
+	return { collapsed: collapsed && !inDrawer };
+}
+/**
+* The frame of a Qeet console (07-components.md, C1 · Ruled): the black scope bar across the full
+* width; the ruled navigation column, which collapses to a 48px icon rail that expands while
+* hovered or focused; the page; and a panel on the end edge that the bar's tools open. Seams are
+* 1px rules, never shadows. Compact by default.
+*/
+function AppShell({ topBar, sidebar, drawers = [], activeDrawer, defaultActiveDrawer = null, onActiveDrawerChange, notifications, density = "compact", children, sidebarCollapsed, defaultSidebarCollapsed = false, onSidebarCollapsedChange, mainId = "main", messages, className, ...props }) {
+	const strings = useMessages("appShell", messages);
+	const skip = useMessages("skipLink");
+	const wide = useMediaQuery(WIDE, true);
+	const rtl = useDirection() === "rtl";
+	const panelTitle = useId();
+	const [ownCollapsed, setOwnCollapsed] = useState(defaultSidebarCollapsed);
+	const collapsed = sidebarCollapsed ?? ownCollapsed;
+	const setCollapsed = (next) => {
+		if (sidebarCollapsed === void 0) setOwnCollapsed(next);
+		onSidebarCollapsedChange?.(next);
+	};
+	const [ownDrawer, setOwnDrawer] = useState(defaultActiveDrawer);
+	const active = activeDrawer === void 0 ? ownDrawer : activeDrawer;
+	const setActive = (next) => {
+		if (activeDrawer === void 0) setOwnDrawer(next);
+		onActiveDrawerChange?.(next);
+	};
+	const panel = drawers.find((drawer) => drawer.id === active);
+	const [navOpen, setNavOpen] = useState(false);
+	const [peek, setPeek] = useState(false);
+	const timer = useRef(void 0);
+	useEffect(() => () => window.clearTimeout(timer.current), []);
+	const startPeek = () => {
+		if (!collapsed) return;
+		window.clearTimeout(timer.current);
+		timer.current = window.setTimeout(() => setPeek(true), PEEK_DELAY);
+	};
+	const endPeek = () => {
+		window.clearTimeout(timer.current);
+		setPeek(false);
+	};
+	const shell = {
+		collapsed: collapsed && !peek,
+		inDrawer: false,
+		narrow: !wide,
+		expand: () => {
+			endPeek();
+			setCollapsed(false);
+		},
+		closeDrawer: () => setNavOpen(false),
+		openNavigation: () => setNavOpen(true),
+		drawers,
+		activeDrawer: active,
+		toggleDrawer: (id) => setActive(active === id ? null : id),
+		strings
+	};
+	const collapseControl = /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		className: "qx-app-shell-collapse",
+		"aria-expanded": !collapsed,
+		onClick: () => {
+			endPeek();
+			setCollapsed(!collapsed);
+		},
+		children: [/* @__PURE__ */ jsx(collapsed ? PanelLeftOpenIcon : PanelLeftCloseIcon, {
+			shape: "round",
+			size: 16,
+			"aria-hidden": true,
+			className: "qx-app-shell-collapse-icon"
+		}), /* @__PURE__ */ jsx("span", {
+			className: "qx-app-shell-collapse-label",
+			children: collapsed ? strings.expand : strings.collapse
+		})]
+	});
+	return /* @__PURE__ */ jsx(ShellContext, {
+		value: shell,
+		children: /* @__PURE__ */ jsxs("div", {
+			...props,
+			className: cx("qx-app-shell", className),
+			"data-slot": "app-shell",
+			"data-qx-density": density === "inherit" ? void 0 : density,
+			"data-collapsed": collapsed ? "" : void 0,
+			"data-drawer-open": panel ? "" : void 0,
+			children: [
+				/* @__PURE__ */ jsx(SkipLink, {
+					href: `#${mainId}`,
+					children: skip.label
+				}),
+				topBar != null && /* @__PURE__ */ jsx("div", {
+					className: "qx-app-shell-top",
+					children: topBar
+				}),
+				sidebar != null && /* @__PURE__ */ jsx("div", {
+					className: "qx-app-shell-nav",
+					"data-slot": "app-shell-nav",
+					"data-peek": peek ? "" : void 0,
+					onPointerEnter: startPeek,
+					onPointerLeave: endPeek,
+					onFocus: () => collapsed && setPeek(true),
+					onBlur: (event) => {
+						if (!event.currentTarget.contains(event.relatedTarget)) setPeek(false);
+					},
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "qx-app-shell-nav-panel",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "qx-app-shell-nav-body",
+							children: sidebar
+						}), /* @__PURE__ */ jsx("div", {
+							className: "qx-app-shell-nav-foot",
+							children: /* @__PURE__ */ jsx(Tooltip, {
+								content: strings.expand,
+								side: "inline-end",
+								disabled: !collapsed || peek,
+								children: collapseControl
+							})
+						})]
+					})
+				}),
+				/* @__PURE__ */ jsxs("main", {
+					id: mainId,
+					tabIndex: -1,
+					className: "qx-app-shell-main",
+					"data-slot": "app-shell-main",
+					children: [notifications != null && /* @__PURE__ */ jsx("div", {
+						className: "qx-app-shell-notifications",
+						"data-slot": "app-shell-notifications",
+						children: notifications
+					}), children]
+				}),
+				panel && /* @__PURE__ */ jsxs("aside", {
+					className: "qx-app-shell-panel",
+					"data-slot": "app-shell-panel",
+					"aria-labelledby": panelTitle,
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "qx-app-shell-panel-header",
+						children: [/* @__PURE__ */ jsx("h2", {
+							id: panelTitle,
+							className: "qx-app-shell-panel-title",
+							children: panel.label
+						}), /* @__PURE__ */ jsx(IconButton, {
+							icon: XIcon,
+							"aria-label": strings.closePanel,
+							size: "sm",
+							tone: "neutral",
+							tooltip: false,
+							onClick: () => setActive(null)
+						})]
+					}), /* @__PURE__ */ jsx("div", {
+						className: "qx-app-shell-panel-body",
+						children: panel.content
+					})]
+				}),
+				sidebar != null && /* @__PURE__ */ jsx(Drawer.Root, {
+					open: navOpen && !wide,
+					onOpenChange: setNavOpen,
+					swipeDirection: rtl ? "right" : "left",
+					children: /* @__PURE__ */ jsxs(Drawer.Portal, { children: [/* @__PURE__ */ jsx(Drawer.Backdrop, { className: "qx-app-shell-backdrop" }), /* @__PURE__ */ jsx(Drawer.Viewport, {
+						className: "qx-app-shell-viewport",
+						children: /* @__PURE__ */ jsx(Drawer.Popup, {
+							className: "qx-app-shell-drawer",
+							"data-slot": "app-shell-drawer",
+							"data-qx-density": density === "inherit" ? void 0 : density,
+							"aria-label": strings.navigation,
+							children: /* @__PURE__ */ jsx(ShellContext, {
+								value: {
+									...shell,
+									collapsed: false,
+									inDrawer: true
+								},
+								children: sidebar
+							})
+						})
+					})] })
+				})
+			]
+		})
+	});
+}
+export { AppShell, useAppShell, useShellState };

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

@@ -0,0 +1,2 @@
+import { AppShell, AppShellDensity, AppShellDrawer, AppShellProps, AppShellState, useAppShell } from "./app-shell.js";
+export { AppShell, type AppShellDensity, type AppShellDrawer, type AppShellProps, type AppShellState, useAppShell };

package/dist/experimental/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,27 @@
+import { RenderProp } from "../../internal/render.js";
+import { ComponentProps, ReactElement, ReactNode } from "react";
+export interface BreadcrumbProps extends ComponentProps<"nav"> {
+  /**
+   * Names the navigation landmark. Default "Breadcrumb". Breadcrumb is server-safe, so
+   * QeetrixProvider's strings don't reach it: pass a translation here.
+   */
+  label?: string;
+  /** BreadcrumbItems, the current page last. */
+  children?: ReactNode;
+}
+export interface BreadcrumbItemProps extends Omit<ComponentProps<"li">, "children"> {
+  /** Where it goes. The current item takes none. */
+  href?: string;
+  /** A router link instead of `<a>`, e.g. `render={<Link to="/users" />}`. */
+  render?: RenderProp;
+  /** The current page: plain text with `aria-current="page"`. */
+  current?: boolean;
+  children: ReactNode;
+}
+/**
+ * Where the page sits, in a console header (07-components.md, C1): an ordered list of links,
+ * separated by sharp chevrons that mirror in right-to-left text. Server-safe.
+ */
+export declare function Breadcrumb({ label, className, children, ...props }: BreadcrumbProps): ReactElement;
+/** One step. A long label truncates and keeps its full text as a title. */
+export declare function BreadcrumbItem({ href, render, current, className, children, ...props }: BreadcrumbItemProps): ReactElement;

package/dist/experimental/breadcrumb/breadcrumb.js

@@ -0,0 +1,48 @@
+import { cx } from "../../internal/cx.js";
+import { renderElement } from "../../internal/render.js";
+import { messages } from "../../internal/messages.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRightIcon } from "@qeetrix/icons/icons/chevron-right";
+// src/experimental/breadcrumb/breadcrumb.tsx
+/**
+* Where the page sits, in a console header (07-components.md, C1): an ordered list of links,
+* separated by sharp chevrons that mirror in right-to-left text. Server-safe.
+*/
+function Breadcrumb({ label = messages.breadcrumb.label, className, children, ...props }) {
+	return /* @__PURE__ */ jsx("nav", {
+		...props,
+		"aria-label": label,
+		className: cx("qx-breadcrumb", className),
+		"data-slot": "breadcrumb",
+		children: /* @__PURE__ */ jsx("ol", {
+			className: "qx-breadcrumb-list",
+			children
+		})
+	});
+}
+/** One step. A long label truncates and keeps its full text as a title. */
+function BreadcrumbItem({ href, render, current, className, children, ...props }) {
+	const title = typeof children === "string" ? children : void 0;
+	return /* @__PURE__ */ jsxs("li", {
+		...props,
+		className: cx("qx-breadcrumb-item", className),
+		"data-slot": "breadcrumb-item",
+		children: [/* @__PURE__ */ jsx(ChevronRightIcon, {
+			shape: "sharp",
+			size: 12,
+			"aria-hidden": true,
+			className: "qx-breadcrumb-separator"
+		}), current ? /* @__PURE__ */ jsx("span", {
+			className: "qx-breadcrumb-current",
+			"aria-current": "page",
+			title,
+			children
+		}) : renderElement("a", render, {
+			href,
+			className: "qx-breadcrumb-link",
+			title,
+			children
+		})]
+	});
+}
+export { Breadcrumb, BreadcrumbItem };

package/dist/experimental/breadcrumb/index.d.ts

@@ -0,0 +1,2 @@
+import { Breadcrumb, BreadcrumbItem, BreadcrumbItemProps, BreadcrumbProps } from "./breadcrumb.js";
+export { Breadcrumb, BreadcrumbItem, type BreadcrumbItemProps, type BreadcrumbProps };

package/dist/experimental/copy-button/copy-button.d.ts

@@ -0,0 +1,27 @@
+import { IconButtonProps } from "../../button/button.js";
+import { QeetrixMessages } from "../../internal/messages.js";
+import { ReactElement, ReactNode } from "react";
+/** Where a copy stands: ready, just copied, or failed (no clipboard access). */
+export type CopyButtonState = "idle" | "copied" | "failed";
+export interface CopyButtonProps extends Omit<IconButtonProps, "icon" | "aria-label" | "tooltip" | "loading" | "onClick" | "onCopy" | "value"> {
+  /** The text to copy, or a function that returns it (it may be async, e.g. a fresh token). */
+  value: string | (() => string | Promise<string>);
+  /** What it copies, as the button's name and tooltip: "Copy user ID". Default "Copy". */
+  label?: string;
+  /** A visible label makes it a Button (label first, icon last) instead of an IconButton. */
+  children?: ReactNode;
+  /** Called with the text once it's on the clipboard. */
+  onCopied?: (value: string) => void;
+  /** Called when copying fails, e.g. no clipboard access outside a secure context. */
+  onCopyError?: (error: unknown) => void;
+  /** How long "Copied" (or the failure) shows before it resets, in milliseconds. Default 2000. */
+  resetAfter?: number;
+  /** This button's strings, over QeetrixProvider's and the English defaults. */
+  messages?: Partial<QeetrixMessages["copyButton"]>;
+}
+/**
+ * Copies text to the clipboard (07-components.md, C2). Focus stays on the button; the icon turns
+ * into a check, and "Copied" is announced politely, then it resets. It fails visibly, never
+ * silently, where the page has no clipboard access.
+ */
+export declare function CopyButton({ value, label, children, onCopied, onCopyError, resetAfter, messages, variant, tone, className, ...props }: CopyButtonProps): ReactElement;

package/dist/experimental/copy-button/copy-button.js

@@ -0,0 +1,61 @@
+"use client";
+import { cx } from "../../internal/cx.js";
+import { Button, IconButton } from "../../button/button.js";
+import { useMessages } from "../../provider/provider.js";
+import { VisuallyHidden } from "../../visually-hidden/visually-hidden.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { CheckIcon } from "@qeetrix/icons/icons/check";
+import { CircleAlertIcon } from "@qeetrix/icons/icons/circle-alert";
+import { CopyIcon } from "@qeetrix/icons/icons/copy";
+// src/experimental/copy-button/copy-button.tsx
+/**
+* Copies text to the clipboard (07-components.md, C2). Focus stays on the button; the icon turns
+* into a check, and "Copied" is announced politely, then it resets. It fails visibly, never
+* silently, where the page has no clipboard access.
+*/
+function CopyButton({ value, label, children, onCopied, onCopyError, resetAfter = 2e3, messages, variant = "ghost", tone = "neutral", className, ...props }) {
+	const strings = useMessages("copyButton", messages);
+	const [state, setState] = useState("idle");
+	const timer = useRef(void 0);
+	useEffect(() => () => window.clearTimeout(timer.current), []);
+	const copy = async () => {
+		window.clearTimeout(timer.current);
+		setState("idle");
+		try {
+			const text = typeof value === "function" ? await value() : value;
+			if (!navigator.clipboard?.writeText) throw new Error("The clipboard isn't available here.");
+			await navigator.clipboard.writeText(text);
+			setState("copied");
+			onCopied?.(text);
+		} catch (error) {
+			setState("failed");
+			onCopyError?.(error);
+		}
+		timer.current = window.setTimeout(() => setState("idle"), resetAfter);
+	};
+	const Icon = state === "copied" ? CheckIcon : state === "failed" ? CircleAlertIcon : CopyIcon;
+	const announcement = state === "copied" ? strings.copied : state === "failed" ? strings.failed : "";
+	const name = label ?? strings.copy;
+	const shared = {
+		...props,
+		variant,
+		tone,
+		icon: Icon,
+		className: cx("qx-copy-button", className),
+		"data-state": state,
+		onClick: copy
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [children != null ? /* @__PURE__ */ jsx(Button, {
+		...shared,
+		children
+	}) : /* @__PURE__ */ jsx(IconButton, {
+		...shared,
+		"aria-label": name,
+		tooltip: announcement || name
+	}), /* @__PURE__ */ jsx(VisuallyHidden, {
+		role: "status",
+		children: announcement
+	})] });
+}
+export { CopyButton };

package/dist/experimental/copy-button/index.d.ts

@@ -0,0 +1,2 @@
+import { CopyButton, CopyButtonProps, CopyButtonState } from "./copy-button.js";
+export { CopyButton, type CopyButtonProps, type CopyButtonState };

package/dist/experimental/empty-state/data-state.d.ts

@@ -0,0 +1,23 @@
+import { QeetrixMessages } from "../../internal/messages.js";
+import { ReactElement, ReactNode } from "react";
+export interface DataStateProps {
+  /** The content is loading. It wins over every other state. */
+  loading?: boolean;
+  /** Anything truthy shows the error state. The raw error is never shown: log it in the product. */
+  error?: unknown;
+  /** The content loaded and there's nothing in it. */
+  empty?: boolean;
+  /** The EmptyState to show when empty. */
+  emptyState?: ReactNode;
+  /** Adds a "Try again" button to the error state. */
+  onRetry?: () => void;
+  /** The content, shown when it's loaded and not empty. */
+  children?: ReactNode;
+  /** The error state's strings, over QeetrixProvider's and the English defaults. */
+  messages?: Partial<QeetrixMessages["dataState"]>;
+}
+/**
+ * The four states of loaded content in one place (07-components.md, C1): loading, then error, then
+ * empty, then the content.
+ */
+export declare function DataState({ loading, error, empty, emptyState, onRetry, children, messages }: DataStateProps): ReactElement;

package/dist/experimental/empty-state/data-state.js

@@ -0,0 +1,40 @@
+"use client";
+import { Spinner } from "../../spinner/spinner.js";
+import { Button } from "../../button/button.js";
+import { useMessages } from "../../provider/provider.js";
+import { EmptyState } from "./empty-state.js";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { CircleAlertIcon } from "@qeetrix/icons/icons/circle-alert";
+// src/experimental/empty-state/data-state.tsx
+/**
+* The four states of loaded content in one place (07-components.md, C1): loading, then error, then
+* empty, then the content.
+*/
+function DataState({ loading, error, empty, emptyState, onRetry, children, messages }) {
+	const strings = useMessages("dataState", messages);
+	const spinner = useMessages("spinner");
+	if (loading) return /* @__PURE__ */ jsx("div", {
+		className: "qx-data-state",
+		"data-slot": "data-state",
+		"aria-busy": "true",
+		children: /* @__PURE__ */ jsx(Spinner, {
+			size: "lg",
+			label: spinner.label
+		})
+	});
+	if (error) return /* @__PURE__ */ jsx(EmptyState, {
+		size: "section",
+		tone: "danger",
+		icon: CircleAlertIcon,
+		title: strings.errorTitle,
+		description: strings.errorDescription,
+		actions: onRetry && /* @__PURE__ */ jsx(Button, {
+			variant: "soft",
+			onClick: onRetry,
+			children: strings.retry
+		})
+	});
+	if (empty) return /* @__PURE__ */ jsx(Fragment, { children: emptyState });
+	return /* @__PURE__ */ jsx(Fragment, { children });
+}
+export { DataState };

package/dist/experimental/empty-state/empty-state.d.ts

@@ -0,0 +1,26 @@
+import { HeadingLevel } from "../../heading/heading.js";
+import { QeetrixIcon } from "../../internal/control.js";
+import { ComponentProps, ReactElement, ReactNode } from "react";
+export type EmptyStateSize = "page" | "section";
+export type EmptyStateTone = "neutral" | "danger";
+export interface EmptyStateProps extends Omit<ComponentProps<"div">, "title"> {
+  /** A 24px sharp icon from `@qeetrix/icons`. */
+  icon?: QeetrixIcon;
+  /** What's missing or what went wrong, in a few words: "No users yet". */
+  title: ReactNode;
+  /** One or two sentences: why, and what to do. */
+  description?: ReactNode;
+  /** Buttons, one primary at most. */
+  actions?: ReactNode;
+  /** `page` (default) for a whole view; `section` inside a card or table. */
+  size?: EmptyStateSize;
+  /** `danger` colours the icon for an error. Default `neutral`. */
+  tone?: EmptyStateTone;
+  /** Make the title a heading, when this is the page's main message. Otherwise it's styled text. */
+  level?: HeadingLevel;
+}
+/**
+ * The message where content would be: nothing yet, no results, or an error (07-components.md, C1).
+ * Centred, at most 480px wide. Server-safe.
+ */
+export declare function EmptyState({ icon: Icon, title, description, actions, size, tone, level, className, ...props }: EmptyStateProps): ReactElement;

package/dist/experimental/empty-state/empty-state.js

@@ -0,0 +1,46 @@
+import { cx } from "../../internal/cx.js";
+import { Heading } from "../../heading/heading.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/experimental/empty-state/empty-state.tsx
+/**
+* The message where content would be: nothing yet, no results, or an error (07-components.md, C1).
+* Centred, at most 480px wide. Server-safe.
+*/
+function EmptyState({ icon: Icon, title, description, actions, size = "page", tone = "neutral", level, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		className: cx("qx-empty-state", className),
+		"data-slot": "empty-state",
+		"data-size": size,
+		"data-tone": tone,
+		children: [
+			Icon && /* @__PURE__ */ jsx(Icon, {
+				shape: "sharp",
+				size: 24,
+				"aria-hidden": true,
+				className: "qx-empty-state-icon"
+			}),
+			level !== void 0 ? /* @__PURE__ */ jsx(Heading, {
+				level,
+				size: size === "page" ? "title-md" : "title-sm",
+				align: "center",
+				children: title
+			}) : /* @__PURE__ */ jsx("p", {
+				className: "qx-empty-state-title",
+				"data-slot": "empty-state-title",
+				children: title
+			}),
+			description != null && /* @__PURE__ */ jsx("p", {
+				className: "qx-empty-state-description",
+				"data-slot": "empty-state-description",
+				children: description
+			}),
+			actions != null && /* @__PURE__ */ jsx("div", {
+				className: "qx-empty-state-actions",
+				"data-slot": "empty-state-actions",
+				children: actions
+			})
+		]
+	});
+}
+export { EmptyState };

package/dist/experimental/empty-state/index.d.ts

@@ -0,0 +1,3 @@
+import { DataState, DataStateProps } from "./data-state.js";
+import { EmptyState, EmptyStateProps, EmptyStateSize, EmptyStateTone } from "./empty-state.js";
+export { DataState, type DataStateProps, EmptyState, type EmptyStateProps, type EmptyStateSize, type EmptyStateTone };

package/dist/experimental/index.d.ts

@@ -0,0 +1,24 @@
+import { Alert, AlertProps, AlertTone } from "./alert/alert.js";
+import "./alert/index.js";
+import { AppShell, AppShellDensity, AppShellDrawer, AppShellProps, AppShellState, useAppShell } from "./app-shell/app-shell.js";
+import "./app-shell/index.js";
+import { Breadcrumb, BreadcrumbItem, BreadcrumbItemProps, BreadcrumbProps } from "./breadcrumb/breadcrumb.js";
+import "./breadcrumb/index.js";
+import { CopyButton, CopyButtonProps, CopyButtonState } from "./copy-button/copy-button.js";
+import "./copy-button/index.js";
+import { DataState, DataStateProps } from "./empty-state/data-state.js";
+import { EmptyState, EmptyStateProps, EmptyStateSize, EmptyStateTone } from "./empty-state/empty-state.js";
+import "./empty-state/index.js";
+import { OTPInput, OTPInputProps, OTPInputSize } from "./otp-input/otp-input.js";
+import "./otp-input/index.js";
+import { PageContent, PageContentProps, PageContentWidth, PageHeader, PageHeaderProps } from "./page-header/page-header.js";
+import "./page-header/index.js";
+import { PasswordInput, PasswordInputProps } from "./password-input/password-input.js";
+import "./password-input/index.js";
+import { Sidebar, SidebarGroup, SidebarGroupProps, SidebarItem, SidebarItemProps, SidebarProps } from "./sidebar/sidebar.js";
+import "./sidebar/index.js";
+import { Stat, StatGroup, StatGroupProps, StatProps, StatTone } from "./stat/stat.js";
+import "./stat/index.js";
+import { TopBar, TopBarProps, TopBarSearch, TopBarSearchProps, TopBarStatus, TopBarSwitcher, TopBarSwitcherProps } from "./top-bar/top-bar.js";
+import "./top-bar/index.js";
+export { Alert, type AlertProps, type AlertTone, AppShell, type AppShellDensity, type AppShellDrawer, type AppShellProps, type AppShellState, Breadcrumb, BreadcrumbItem, type BreadcrumbItemProps, type BreadcrumbProps, CopyButton, type CopyButtonProps, type CopyButtonState, DataState, type DataStateProps, EmptyState, type EmptyStateProps, type EmptyStateSize, type EmptyStateTone, OTPInput, type OTPInputProps, type OTPInputSize, PageContent, type PageContentProps, type PageContentWidth, PageHeader, type PageHeaderProps, PasswordInput, type PasswordInputProps, Sidebar, SidebarGroup, type SidebarGroupProps, SidebarItem, type SidebarItemProps, type SidebarProps, Stat, StatGroup, type StatGroupProps, type StatProps, type StatTone, TopBar, type TopBarProps, TopBarSearch, type TopBarSearchProps, type TopBarStatus, TopBarSwitcher, type TopBarSwitcherProps, useAppShell };

package/dist/experimental/index.js

@@ -0,0 +1,13 @@
+import { Alert } from "./alert/alert.js";
+import { AppShell, useAppShell } from "./app-shell/app-shell.js";
+import { Breadcrumb, BreadcrumbItem } from "./breadcrumb/breadcrumb.js";
+import { CopyButton } from "./copy-button/copy-button.js";
+import { EmptyState } from "./empty-state/empty-state.js";
+import { DataState } from "./empty-state/data-state.js";
+import { OTPInput } from "./otp-input/otp-input.js";
+import { PageContent, PageHeader } from "./page-header/page-header.js";
+import { PasswordInput } from "./password-input/password-input.js";
+import { Sidebar, SidebarGroup, SidebarItem } from "./sidebar/sidebar.js";
+import { Stat, StatGroup } from "./stat/stat.js";
+import { TopBar, TopBarSearch, TopBarSwitcher } from "./top-bar/top-bar.js";
+export { Alert, AppShell, Breadcrumb, BreadcrumbItem, CopyButton, DataState, EmptyState, OTPInput, PageContent, PageHeader, PasswordInput, Sidebar, SidebarGroup, SidebarItem, Stat, StatGroup, TopBar, TopBarSearch, TopBarSwitcher, useAppShell };

package/dist/experimental/otp-input/index.d.ts

@@ -0,0 +1,2 @@
+import { OTPInput, OTPInputProps, OTPInputSize } from "./otp-input.js";
+export { OTPInput, type OTPInputProps, type OTPInputSize };

package/dist/experimental/otp-input/otp-input.d.ts

@@ -0,0 +1,27 @@
+import { QeetrixMessages } from "../../internal/messages.js";
+import { CSSProperties, ReactElement } from "react";
+import { OTPField } from "@base-ui/react/otp-field";
+export type OTPInputSize = "md" | "lg";
+export interface OTPInputProps extends Omit<OTPField.Root.Props, "className" | "style" | "children" | "render" | "length"> {
+  /** How many characters. Default 6. */
+  length?: number;
+  /** Split the slots into groups, e.g. `[3, 3]` shows 123 – 456. The sizes must add up to `length`. */
+  groups?: readonly number[];
+  /** `md` (default) in consoles; `lg` on sign-in pages. */
+  size?: OTPInputSize;
+  /** Names the first slot when there's no Field label. */
+  "aria-label"?: string;
+  "aria-labelledby"?: string;
+  /** Placement only. */
+  className?: string;
+  style?: CSSProperties;
+  /** This input's strings, over QeetrixProvider's and the English defaults. */
+  messages?: Partial<QeetrixMessages["otpInput"]>;
+}
+/**
+ * A one-time code in separate slots (07-components.md, C2), on Base UI's OTP Field: typing moves on,
+ * Backspace moves back, pasting fills every slot, and the phone's SMS autofill
+ * (`autocomplete="one-time-code"`) lands in one go. Numeric by default. The first slot takes the
+ * field's label; the others are announced as "Character 2 of 6".
+ */
+export declare function OTPInput({ length, groups, size, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className, style, messages, ...props }: OTPInputProps): ReactElement;

package/dist/experimental/otp-input/otp-input.js

@@ -0,0 +1,39 @@
+"use client";
+import { cx } from "../../internal/cx.js";
+import { useMessages } from "../../provider/provider.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1 } from "react";
+import { OTPField } from "@base-ui/react/otp-field";
+// src/experimental/otp-input/otp-input.tsx
+/**
+* A one-time code in separate slots (07-components.md, C2), on Base UI's OTP Field: typing moves on,
+* Backspace moves back, pasting fills every slot, and the phone's SMS autofill
+* (`autocomplete="one-time-code"`) lands in one go. Numeric by default. The first slot takes the
+* field's label; the others are announced as "Character 2 of 6".
+*/
+function OTPInput({ length = 6, groups, size = "md", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className, style, messages, ...props }) {
+	const strings = useMessages("otpInput", messages);
+	const breaks = /* @__PURE__ */ new Set();
+	let at = 0;
+	for (const group of groups ?? []) {
+		at += group;
+		if (at < length) breaks.add(at);
+	}
+	return /* @__PURE__ */ jsx(OTPField.Root, {
+		...props,
+		length,
+		className: cx("qx-otp-input", className),
+		style,
+		"data-slot": "otp-input",
+		"data-size": size,
+		children: Array.from({ length }, (_, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [breaks.has(index) && /* @__PURE__ */ jsx(OTPField.Separator, { className: "qx-otp-input-separator" }), /* @__PURE__ */ jsx(OTPField.Input, {
+			className: "qx-otp-input-slot",
+			"data-slot": "otp-input-slot",
+			...index === 0 ? {
+				"aria-label": ariaLabel,
+				"aria-labelledby": ariaLabelledBy
+			} : { "aria-label": strings.character.replace("{index}", String(index + 1)).replace("{length}", String(length)) }
+		})] }, index))
+	});
+}
+export { OTPInput };