@qeetrix/react 0.0.2 → 0.0.4

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 };

package/dist/experimental/page-header/index.d.ts

@@ -0,0 +1,2 @@
+import { PageContent, PageContentProps, PageContentWidth, PageHeader, PageHeaderProps } from "./page-header.js";
+export { PageContent, type PageContentProps, type PageContentWidth, PageHeader, type PageHeaderProps };

package/dist/experimental/page-header/page-header.d.ts

@@ -0,0 +1,32 @@
+import { ComponentProps, ReactElement, ReactNode } from "react";
+export interface PageHeaderProps extends Omit<ComponentProps<"div">, "title"> {
+  /** Where the page sits: a Breadcrumb. */
+  breadcrumb?: ReactNode;
+  /** The page title: the page's one `<h1>`. */
+  title: ReactNode;
+  /** A number beside the title, e.g. the table's total; numbers are formatted in `en-IN`. */
+  count?: ReactNode;
+  /** A Badge beside the title. */
+  status?: ReactNode;
+  /** One line under the title. */
+  description?: ReactNode;
+  /** Buttons at the end: the primary last; at most one solid and one soft, the rest in a menu. */
+  actions?: ReactNode;
+  /** Key numbers for the page: a StatGroup, ruled edge to edge under the title. */
+  summary?: ReactNode;
+  /** A TabsList, attached to the header's foot. */
+  tabs?: ReactNode;
+}
+export type PageContentWidth = "full" | "narrow";
+export interface PageContentProps extends ComponentProps<"div"> {
+  /** `full` (default) for tables and dashboards; `narrow` (800px) for forms and settings. */
+  width?: PageContentWidth;
+}
+/**
+ * The head of a console page (07-components.md, C1 · Ruled): breadcrumb, title with its count and
+ * status, actions, an optional strip of key numbers, and tabs, on a ruled band above the work
+ * surface. Server-safe.
+ */
+export declare function PageHeader({ breadcrumb, title, count, status, description, actions, summary, tabs, className, ...props }: PageHeaderProps): ReactElement;
+/** The work surface under a PageHeader. Server-safe. */
+export declare function PageContent({ width, className, ...props }: PageContentProps): ReactElement;

package/dist/experimental/page-header/page-header.js

@@ -0,0 +1,73 @@
+import { cx } from "../../internal/cx.js";
+import { Heading } from "../../heading/heading.js";
+import { formatNumber } from "../../format/format.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/experimental/page-header/page-header.tsx
+/**
+* The head of a console page (07-components.md, C1 · Ruled): breadcrumb, title with its count and
+* status, actions, an optional strip of key numbers, and tabs, on a ruled band above the work
+* surface. Server-safe.
+*/
+function PageHeader({ breadcrumb, title, count, status, description, actions, summary, tabs, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		className: cx("qx-page-header", className),
+		"data-slot": "page-header",
+		"data-foot": tabs != null ? "tabs" : summary != null ? "summary" : void 0,
+		children: [
+			breadcrumb != null && /* @__PURE__ */ jsx("div", {
+				className: "qx-page-header-breadcrumb",
+				children: breadcrumb
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "qx-page-header-row",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "qx-page-header-titles",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "qx-page-header-title",
+						children: [
+							/* @__PURE__ */ jsx(Heading, {
+								level: 1,
+								size: "title-lg",
+								children: title
+							}),
+							count != null && /* @__PURE__ */ jsx("span", {
+								className: "qx-page-header-count",
+								"data-slot": "page-header-count",
+								children: typeof count === "number" ? formatNumber(count) : count
+							}),
+							status
+						]
+					}), description != null && /* @__PURE__ */ jsx("p", {
+						className: "qx-page-header-description",
+						"data-slot": "page-header-description",
+						children: description
+					})]
+				}), actions != null && /* @__PURE__ */ jsx("div", {
+					className: "qx-page-header-actions",
+					"data-slot": "page-header-actions",
+					children: actions
+				})]
+			}),
+			summary != null && /* @__PURE__ */ jsx("div", {
+				className: "qx-page-header-summary",
+				"data-slot": "page-header-summary",
+				children: summary
+			}),
+			tabs != null && /* @__PURE__ */ jsx("div", {
+				className: "qx-page-header-tabs",
+				children: tabs
+			})
+		]
+	});
+}
+/** The work surface under a PageHeader. Server-safe. */
+function PageContent({ width = "full", className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cx("qx-page-content", className),
+		"data-slot": "page-content",
+		"data-width": width
+	});
+}
+export { PageContent, PageHeader };

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

@@ -0,0 +1,2 @@
+import { PasswordInput, PasswordInputProps } from "./password-input.js";
+export { PasswordInput, type PasswordInputProps };

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

@@ -0,0 +1,26 @@
+import { QeetrixMessages } from "../../internal/messages.js";
+import { InputProps } from "../../input/input.js";
+import { ReactElement } from "react";
+export interface PasswordInputProps extends Omit<InputProps, "type"> {
+  /**
+   * `current-password` (default) to sign in, `new-password` to create one, so password managers
+   * fill or suggest; `off` for a secret that isn't the user's password, such as an API key.
+   */
+  autoComplete?: "current-password" | "new-password" | "off";
+  /** Whether the value shows as text, controlled. */
+  visible?: boolean;
+  /** Whether it starts visible when uncontrolled. Default `false`: people may not be alone. */
+  defaultVisible?: boolean;
+  /** Called with the new visibility. */
+  onVisibleChange?: (visible: boolean) => void;
+  /** Show "Caps Lock is on" while typing with it on. Default `true`. */
+  capsLockWarning?: boolean;
+  /** This input's strings, over QeetrixProvider's and the English defaults. */
+  messages?: Partial<QeetrixMessages["passwordInput"]>;
+}
+/**
+ * A password or secret field (07-components.md, C2): an Input with a Show password toggle. It
+ * hides again when its form is submitted, so the browser never stores it as plain text; spelling
+ * and capitalisation tools stay off; paste always works, and there's no length cap.
+ */
+export declare function PasswordInput({ autoComplete, visible, defaultVisible, onVisibleChange, capsLockWarning, messages, endAdornment, disabled, ref, onKeyDown, onKeyUp, onBlur, className, ...props }: PasswordInputProps): ReactElement;