@mistriwork/ui 0.0.0-stage → 1.0.0-rc.10

package/dist/Field.js

@@ -0,0 +1,58 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * One field: its label over the control, a hint under it, and the problem
+ * it holds under that — in the control's own column, so saying a problem
+ * never narrows or moves the control (docs/design.md, Access).
+ *
+ * The wiring is the point. The control is handed its id, what describes it
+ * (the hint, the problem), `aria-invalid` while it holds a problem and
+ * `aria-required` beside the star, so no form has to remember to join them.
+ * A control that is one element takes them as props (`children` an element);
+ * one that is several — a listbox's button, a date and its calendar, a
+ * picker — takes them through `children` as a function and puts them where
+ * its focusable is.
+ */
+import { cloneElement, isValidElement, useId } from 'react';
+export function Field({ label, hint, problem, required = false, id, group = false, check = false, size = 'default', optional, labelAside, labelHidden = false, reserve = false, className = '', children, }) {
+    const made = useId();
+    const controlId = id ?? `field-${made}`;
+    const hintId = hint ? `${controlId}-hint` : undefined;
+    const problemId = `${controlId}-problem`;
+    const holdsProblem = problem !== undefined && problem !== null && problem !== false && problem !== '';
+    const labelId = `${controlId}-label`;
+    const labelClass = labelHidden ? 'form-field-label form-field-label-hidden' : 'form-field-label';
+    const caption = group ? (_jsx("span", { id: labelId, className: labelClass, children: label })) : (_jsx("label", { id: labelId, htmlFor: controlId, className: labelClass, children: label }));
+    const word = optional && !required ? _jsx("span", { className: "form-field-optional-word", children: optional }) : null;
+    const control = {
+        id: controlId,
+        ...(hintId || holdsProblem ? { 'aria-describedby': [hintId, holdsProblem ? problemId : undefined].filter(Boolean).join(' ') } : {}),
+        ...(holdsProblem ? { 'aria-invalid': true } : {}),
+        ...(required ? { 'aria-required': true } : {}),
+        ...(group ? { 'aria-labelledby': labelId } : {}),
+    };
+    const drawn = typeof children === 'function'
+        ? children(control)
+        : isValidElement(children)
+            ? cloneElement(children, { ...control, ...joined(children.props, control) })
+            : children;
+    /* The star is the stylesheet's (`.is-required`), not text: a label's words
+       stay its name, to a query by label as to a screen reader, which hears
+       "required" from `aria-required` instead. */
+    return (_jsxs("div", { className: [
+            'form-field',
+            size === 'compact' ? 'form-field-compact' : '',
+            check ? 'form-field-check' : '',
+            reserve ? 'form-field-reserve' : '',
+            required ? 'is-required' : '',
+            holdsProblem ? 'is-invalid' : '',
+            className,
+        ]
+            .filter(Boolean)
+            .join(' '), children: [check ? (_jsxs("div", { className: "form-field-check-row", children: [drawn, _jsx("label", { id: labelId, htmlFor: controlId, className: "form-field-label", children: label }), word] })) : (_jsxs(_Fragment, { children: [labelAside || word ? (_jsxs("div", { className: "form-field-label-row", children: [caption, word, labelAside] })) : (caption), drawn] })), hint ? (_jsx("p", { id: hintId, className: "form-field-hint", children: hint })) : null, _jsx("p", { id: problemId, className: "form-field-problem", "aria-live": "polite", hidden: !holdsProblem && !reserve, children: holdsProblem ? problem : null })] }));
+}
+/** A control's own description joins the field's rather than being replaced by it. */
+function joined(props, control) {
+    const own = typeof props['aria-describedby'] === 'string' ? props['aria-describedby'] : '';
+    const described = [own, control['aria-describedby']].filter(Boolean).join(' ');
+    return described ? { 'aria-describedby': described } : {};
+}

package/dist/FormParts.d.ts

@@ -0,0 +1,68 @@
+/**
+ * The small parts a form is drawn from: the help tip, the progress bar, a step's heading, the fixed action bar, the
+ * review group and a row of columns. Props only: every word and every picture arrives as a prop, and none of them
+ * knows a field, a step or an address. Preview: @mistriwork/ui is Preview at 1.0.
+ */
+import { type ReactNode } from 'react';
+export interface HelpTipProps {
+    /** The tip's text. */
+    text: ReactNode;
+    /** What the button is called ("More information"); the caller's word. */
+    label: string;
+    /** The mark on the button; without one, an "i". */
+    icon?: ReactNode;
+}
+/** The "i" beside a label: a button that opens its text under it. Escape and a press elsewhere close it. */
+export declare function HelpTip({ text, label, icon }: HelpTipProps): ReactNode;
+export interface ProgressBarProps {
+    value: number;
+    max: number;
+    /** The bottom of the range, announced as `aria-valuemin`: 0 by default, 1 for "step 1 of 5". */
+    min?: number;
+    /** What the bar is called to assistive technology ("Step 3 of 12"). Leave it out, with `decorative`, to hide the bar. */
+    label?: string;
+    decorative?: boolean;
+}
+/** How far along: a filled track. It is information that moves often, so the fill is not animated. */
+export declare function ProgressBar({ value, max, min, label, decorative }: ProgressBarProps): ReactNode;
+export interface StepHeaderProps {
+    title: ReactNode;
+    /** The heading's level: 1 (the room's own) by default, 2 where the form sits in a dialog that has its title. */
+    level?: 1 | 2;
+    /** The heading's id, for a region that is named by it. */
+    id?: string;
+    lead?: ReactNode;
+    /** A decorative glyph before the title. */
+    mark?: ReactNode;
+}
+/** A step's title and the quiet lead under it. */
+export declare function StepHeader({ title, lead, mark, level, id }: StepHeaderProps): ReactNode;
+export interface ActionBarProps {
+    /** Another class on the bar, for the form that draws it. */
+    className?: string;
+    back?: {
+        label: ReactNode;
+        onClick: () => void;
+        icon?: ReactNode;
+    };
+    primary: {
+        label: ReactNode;
+        onClick: () => void;
+        disabled?: boolean;
+        busy?: boolean;
+        busyLabel?: ReactNode;
+        icon?: ReactNode;
+    };
+}
+/** The bar fixed to the foot of its container: Back as a quiet word, and a filled primary that takes the rest of the width. */
+export declare function ActionBar({ back, primary, className }: ActionBarProps): ReactNode;
+/** Fields side by side; `cols` is a grid template such as "1fr 1.8fr". A row stacks where its fields no longer fit. */
+export declare function Columns({ cols, children }: {
+    cols?: string;
+    children: ReactNode;
+}): ReactNode;
+/** The editable review: earlier steps' fields drawn again in one labelled group. */
+export declare function ReviewList({ label, children }: {
+    label: string;
+    children: ReactNode;
+}): ReactNode;

package/dist/FormParts.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The small parts a form is drawn from: the help tip, the progress bar, a step's heading, the fixed action bar, the
+ * review group and a row of columns. Props only: every word and every picture arrives as a prop, and none of them
+ * knows a field, a step or an address. Preview: @mistriwork/ui is Preview at 1.0.
+ */
+import { useEffect, useId, useRef, useState } from 'react';
+import { Button } from './Button.js';
+/** The "i" beside a label: a button that opens its text under it. Escape and a press elsewhere close it. */
+export function HelpTip({ text, label, icon }) {
+    const [open, setOpen] = useState(false);
+    const tipId = useId();
+    const root = useRef(null);
+    useEffect(() => {
+        if (!open)
+            return undefined;
+        const outside = (e) => {
+            if (root.current && !root.current.contains(e.target))
+                setOpen(false);
+        };
+        document.addEventListener('pointerdown', outside);
+        return () => document.removeEventListener('pointerdown', outside);
+    }, [open]);
+    return (_jsxs("span", { className: "help-tip", ref: root, children: [_jsx("button", { type: "button", className: "help-tip-button", "aria-label": label, "aria-expanded": open, "aria-describedby": open ? tipId : undefined, onClick: () => setOpen(!open), onKeyDown: (e) => {
+                    if (e.key === 'Escape' && open) {
+                        e.stopPropagation();
+                        setOpen(false);
+                    }
+                }, children: icon ?? _jsx("span", { "aria-hidden": "true", children: "i" }) }), open ? (_jsx("span", { role: "tooltip", id: tipId, className: "help-tip-text", children: text })) : null] }));
+}
+/** How far along: a filled track. It is information that moves often, so the fill is not animated. */
+export function ProgressBar({ value, max, min = 0, label, decorative }) {
+    return (_jsx("div", { className: "progress-bar", ...(decorative
+            ? { 'aria-hidden': true }
+            : { role: 'progressbar', 'aria-label': label, 'aria-valuemin': min, 'aria-valuemax': max, 'aria-valuenow': value }), children: _jsx("span", { className: "progress-bar-fill", style: { width: `${max > 0 ? Math.min(100, (value / max) * 100) : 0}%` } }) }));
+}
+/** A step's title and the quiet lead under it. */
+export function StepHeader({ title, lead, mark, level = 1, id }) {
+    const Heading = level === 1 ? 'h1' : 'h2';
+    return (_jsxs("header", { className: "step-header", children: [_jsxs(Heading, { className: "step-title", id: id, tabIndex: -1, children: [mark ? (_jsx("span", { className: "step-mark", "aria-hidden": "true", children: mark })) : null, title] }), lead ? _jsx("p", { className: "step-lead", children: lead }) : null] }));
+}
+/** The bar fixed to the foot of its container: Back as a quiet word, and a filled primary that takes the rest of the width. */
+export function ActionBar({ back, primary, className }) {
+    return (_jsxs("footer", { className: className ? `action-bar ${className}` : 'action-bar', children: [back ? (_jsxs(Button, { intent: "quiet", size: "large", className: "action-bar-back", onClick: back.onClick, children: [back.icon, back.label] })) : null, _jsxs(Button, { intent: "primary", size: "large", className: "action-bar-primary", disabled: primary.disabled, busy: primary.busy, busyLabel: primary.busyLabel, onClick: primary.onClick, children: [primary.label, primary.icon] })] }));
+}
+/** Fields side by side; `cols` is a grid template such as "1fr 1.8fr". A row stacks where its fields no longer fit. */
+export function Columns({ cols, children }) {
+    return (_jsx("div", { className: "form-columns", style: cols ? { '--form-columns': cols } : undefined, children: children }));
+}
+/** The editable review: earlier steps' fields drawn again in one labelled group. */
+export function ReviewList({ label, children }) {
+    return (_jsx("div", { className: "review-list", role: "group", "aria-label": label, children: children }));
+}

package/dist/HeroBlocks.d.ts

@@ -0,0 +1,37 @@
+/**
+ * The landing hero's blocks (Preview): a badge over the heading, two to four photo tiles where one photo would stand,
+ * and up to four rows of an icon and a line. Props only: the words, the icons (as nodes) and the image addresses are
+ * handed in, so the kit draws them with its own icons and the files an App holds. Their rules are hero.css.
+ */
+import type { ReactNode } from 'react';
+export interface BadgeProps {
+    /** The few words. */
+    children: ReactNode;
+    /** A picture before the words, already sized by the caller. */
+    icon?: ReactNode;
+}
+/** A pill of a few words with an optional icon, over a heading. Quiet: a note on the page, never a button. */
+export declare function Badge({ children, icon }: BadgeProps): import("react").JSX.Element;
+export interface PhotoTile {
+    src: string;
+    alt: string;
+    srcSet?: string;
+    sizes?: string;
+}
+export interface PhotoTilesProps {
+    tiles: readonly PhotoTile[];
+}
+/**
+ * Two to four photos in the one photo's 4:3 box, cut into a mosaic, so the box has its size before any photo arrives
+ * and nothing moves. The first is the one the page waits for; the rest load as they come near. Fewer than two is no
+ * mosaic, and more than four are cut off.
+ */
+export declare function PhotoTiles({ tiles }: PhotoTilesProps): import("react").JSX.Element | null;
+export interface IconRowsProps {
+    rows: readonly {
+        icon: ReactNode;
+        text: string;
+    }[];
+}
+/** Up to four rows, each an icon in the accent and a line in the muted ink. Nothing for no rows. */
+export declare function IconRows({ rows }: IconRowsProps): import("react").JSX.Element | null;

package/dist/HeroBlocks.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** A pill of a few words with an optional icon, over a heading. Quiet: a note on the page, never a button. */
+export function Badge({ children, icon }) {
+    return (_jsxs("p", { className: "front-badge", children: [icon, _jsx("span", { children: children })] }));
+}
+/** The most tiles a mosaic cuts the box into. */
+const MOST_TILES = 4;
+/**
+ * Two to four photos in the one photo's 4:3 box, cut into a mosaic, so the box has its size before any photo arrives
+ * and nothing moves. The first is the one the page waits for; the rest load as they come near. Fewer than two is no
+ * mosaic, and more than four are cut off.
+ */
+export function PhotoTiles({ tiles }) {
+    if (tiles.length < 2)
+        return null;
+    const shown = tiles.slice(0, MOST_TILES);
+    return (_jsx("div", { className: `front-hero-media front-hero-tiles front-hero-tiles-${shown.length}`, children: shown.map((tile, index) => (_jsx("img", { src: tile.src, srcSet: tile.srcSet, sizes: tile.sizes, alt: tile.alt, decoding: "async", ...(index === 0 ? { fetchPriority: 'high' } : { loading: 'lazy' }) }, `${index}:${tile.src}`))) }));
+}
+/** The most rows the block draws. */
+const MOST_ROWS = 4;
+/** Up to four rows, each an icon in the accent and a line in the muted ink. Nothing for no rows. */
+export function IconRows({ rows }) {
+    if (!rows.length)
+        return null;
+    return (_jsx("ul", { className: "front-points", children: rows.slice(0, MOST_ROWS).map((row, index) => (_jsxs("li", { children: [row.icon, _jsx("span", { children: row.text })] }, `${index}:${row.text}`))) }));
+}

package/dist/Icon.d.ts

@@ -0,0 +1,29 @@
+/** A glyph's drawings: its paths in the regular weight, and in bold (for a logo). */
+export type IconGlyph = readonly [regular: readonly string[], bold: readonly string[]];
+/** The two weights every glyph keeps. */
+export type IconWeight = 'regular' | 'bold';
+/** A page-wide icon weight: the one an icon that says none draws in, and that weight's drawing of a name when it is
+    not one every glyph carries (undefined draws the glyph's own). */
+export interface IconWeighting {
+    weight: () => string;
+    drawing: (name: string) => readonly string[] | undefined;
+    subscribe: (listener: () => void) => () => void;
+    version: () => number;
+}
+/** Glyphs to draw, by name. A name already known keeps its glyph. */
+export declare function registerIcons(sent: Readonly<Record<string, IconGlyph>> | undefined): void;
+/** Where the glyphs not yet registered come from: called once, when an icon first names one. */
+export declare function loadIconsWith(load: () => Promise<Readonly<Record<string, IconGlyph>> | undefined>): void;
+/** The page's icon weight, from now on. */
+export declare function weighIconsWith(weights: IconWeighting): void;
+export interface IconProps<Name extends string = string> {
+    name: Name;
+    /** Omit for decoration. Icon-only controls still need their own name. */
+    label?: string;
+    /** Relative sizes follow the surrounding typography and density. */
+    size?: number | string;
+    /** Omitted, the page's weight (`weighIconsWith`), regular unless it says another. */
+    weight?: IconWeight;
+    className?: string;
+}
+export declare function Icon<Name extends string = string>({ name, label, size, weight, className }: IconProps<Name>): import("react").JSX.Element;

package/dist/Icon.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * An icon: a glyph drawn from path data on a 256 box, in the text's colour.
+ *
+ * The glyphs are data rather than one component per icon (the kit's
+ * scripts/generate-icons.mjs says why), and this module knows none of them:
+ * whoever draws with it registers the set it uses. The kit registers the
+ * chrome's own few at once, an App's as its payload brings them, and a loader
+ * for the rest (`loadIconsWith`), which an icon whose name is not yet known
+ * calls once; every icon waiting on it draws when it lands, and keeps its box
+ * meanwhile, so nothing moves. A page's icon weight, when it wears one beyond
+ * the two every glyph carries, is lent the same way (`weighIconsWith`).
+ */
+import { useEffect, useSyncExternalStore } from 'react';
+const glyphs = new Map();
+const listeners = new Set();
+let known = 0;
+let loader;
+let loading;
+const unweighted = { weight: () => 'regular', drawing: () => undefined, subscribe: () => () => { }, version: () => 0 };
+let weighting = unweighted;
+/** Glyphs to draw, by name. A name already known keeps its glyph. */
+export function registerIcons(sent) {
+    if (!sent)
+        return;
+    let added = false;
+    for (const [name, glyph] of Object.entries(sent)) {
+        if (glyphs.has(name) || !Array.isArray(glyph))
+            continue;
+        glyphs.set(name, glyph);
+        added = true;
+    }
+    if (!added)
+        return;
+    known += 1;
+    for (const listener of listeners)
+        listener();
+}
+/** Where the glyphs not yet registered come from: called once, when an icon first names one. */
+export function loadIconsWith(load) {
+    loader = load;
+    loading = undefined;
+}
+/** The page's icon weight, from now on. */
+export function weighIconsWith(weights) {
+    weighting = weights;
+}
+function loadEveryGlyph() {
+    if (!loader)
+        return;
+    loading ??= loader()
+        .then(registerIcons)
+        // A failed load is tried again by the next icon that asks.
+        .catch(() => {
+        loading = undefined;
+    });
+}
+const subscribe = (listener) => {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+};
+const version = () => known;
+export function Icon({ name, label, size = '1em', weight, className }) {
+    useSyncExternalStore(subscribe, version, version);
+    const weights = weighting;
+    useSyncExternalStore(weights.subscribe, weights.version, weights.version);
+    const glyph = glyphs.get(name);
+    const drawn = weight ?? weights.weight();
+    const drawing = (weight ? undefined : weights.drawing(name)) ?? glyph?.[drawn === 'bold' ? 1 : 0];
+    useEffect(() => {
+        if (!glyph)
+            loadEveryGlyph();
+    }, [glyph]);
+    const accessibleLabel = label?.trim() || undefined;
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, fill: "currentColor", viewBox: "0 0 256 256", className: `tw-icon${className ? ` ${className}` : ''}`, role: accessibleLabel ? 'img' : undefined, "aria-label": accessibleLabel, "aria-hidden": accessibleLabel ? undefined : true, focusable: "false", children: drawing?.map((d, index) => (_jsx("path", { d: d }, index))) }));
+}

package/dist/Modal.d.ts

@@ -0,0 +1,48 @@
+/**
+ * A modal, over Base UI's Dialog: what every dialog here used to get from
+ * the native `<dialog>` — the scrim, focus held inside, Escape and a click
+ * on the scrim to dismiss, focus handed back on close — in one place, and
+ * the one thing the native element could not give: popups drawn inside it
+ * (a listbox, a menu) that Base UI knows are its own.
+ *
+ * Open from the moment it mounts, gone when the caller unmounts it; the
+ * caller hears `onClose` once, whichever way it closed, and can close it
+ * itself through the handle. Wears the caller's classes — `confirm`,
+ * `prefs`, `cols` — so the stylesheet and the browser suite see the box
+ * they always saw, plus `modal` for the placement the element used to
+ * supply, and a backdrop named after the first class for its scrim.
+ */
+import { type ReactNode, type Ref, type RefObject } from 'react';
+export interface ModalHandle {
+    close: () => void;
+}
+interface ModalProps {
+    /** The classes the stylesheet knows the box by (`confirm`, `prefs`); the first also names the scrim (`confirm-backdrop`). Optional: a bare modal is centered and sized by `modal` alone. */
+    className?: string;
+    /** Told once, however the dialog closed. */
+    onClose: () => void;
+    /** A non-cancellable operation is awaiting acknowledgement. */
+    closeDisabled?: boolean;
+    /** Return false to keep the dialog open, for example while confirming discard. */
+    beforeClose?: () => boolean;
+    children: ReactNode;
+    /** The control to focus on open; Base UI's default (the first focusable) otherwise. */
+    initialFocus?: RefObject<HTMLElement | null> | false;
+    /** Where focus goes on close, once the page is no longer inert; the element focused at open otherwise. */
+    finalFocus?: RefObject<HTMLElement | null>;
+    /** The dialog's name; absent, its first heading names it. */
+    ariaLabel?: string;
+    /** The box places itself — a panel that is its own scrim, a box the stylesheet already centres — so the `modal` placement is left off. */
+    plain?: boolean;
+    /** No scrim element: the box covers the screen itself. */
+    backdrop?: boolean;
+    /** `'mobile'` — the default — takes the whole screen under 640px, because a
+        dialog that leaves a sliver of the page around it on a phone reads as a
+        mistake rather than as a layer. `true` takes the whole screen at every
+        width; `false` opts out, for a dialog small enough to be a confirmation
+        and nothing more. */
+    fullscreen?: boolean | 'mobile';
+    ref?: Ref<ModalHandle>;
+}
+export declare function Modal({ className, onClose, closeDisabled, beforeClose, children, initialFocus, finalFocus, ariaLabel, plain, backdrop, fullscreen, ref, }: ModalProps): import("react").JSX.Element;
+export {};

package/dist/Modal.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A modal, over Base UI's Dialog: what every dialog here used to get from
+ * the native `<dialog>` — the scrim, focus held inside, Escape and a click
+ * on the scrim to dismiss, focus handed back on close — in one place, and
+ * the one thing the native element could not give: popups drawn inside it
+ * (a listbox, a menu) that Base UI knows are its own.
+ *
+ * Open from the moment it mounts, gone when the caller unmounts it; the
+ * caller hears `onClose` once, whichever way it closed, and can close it
+ * itself through the handle. Wears the caller's classes — `confirm`,
+ * `prefs`, `cols` — so the stylesheet and the browser suite see the box
+ * they always saw, plus `modal` for the placement the element used to
+ * supply, and a backdrop named after the first class for its scrim.
+ */
+import { useCallback, useContext, useId, useImperativeHandle, useRef, useState } from 'react';
+import { ComponentStyleScope } from './internal/ComponentStyleScope.js';
+import { Dialog } from '@base-ui/react/dialog';
+import { popupContainer } from './internal/popups.js';
+export function Modal({ className = '', onClose, closeDisabled = false, beforeClose, children, initialFocus, finalFocus, ariaLabel, plain = false, backdrop = true, fullscreen = 'mobile', ref, }) {
+    const componentScope = useContext(ComponentStyleScope);
+    const [open, setOpen] = useState(true);
+    const closed = useRef(false);
+    const close = () => {
+        if (closed.current || closeDisabled || beforeClose?.() === false)
+            return false;
+        closed.current = true;
+        setOpen(false);
+        onClose();
+        return true;
+    };
+    useImperativeHandle(ref, () => ({ close }));
+    /* A dialog with no `aria-label` is named by its first heading, which every one of these opens with: a screen reader
+       announces "Delete invoice 7, dialog" rather than an unnamed dialog. Done when the box attaches, because the heading
+       is the caller's children and the box mounts in a portal after this component's first effect. */
+    const headingId = useId();
+    const [labelledBy, setLabelledBy] = useState();
+    const popup = useCallback((node) => {
+        if (ariaLabel || !node)
+            return;
+        const heading = node.querySelector('h1, h2, h3');
+        if (!heading)
+            return;
+        if (!heading.id)
+            heading.id = headingId;
+        setLabelledBy(heading.id);
+    }, [ariaLabel, headingId]);
+    const first = className.split(/\s+/)[0];
+    const scrim = first ? `modal-backdrop ${first}-backdrop` : 'modal-backdrop';
+    const size = fullscreen ? ` modal-fullscreen${fullscreen === 'mobile' ? '-mobile' : ''}` : '';
+    return (_jsx(Dialog.Root, { modal: true, open: open, onOpenChange: (next, details) => {
+            if (next)
+                return;
+            if (!close())
+                details.cancel();
+        }, children: _jsxs(Dialog.Portal, { container: popupContainer(), children: [backdrop ? _jsx(Dialog.Backdrop, { className: plain ? scrim.replace('modal-backdrop ', '') : scrim }) : null, _jsx(Dialog.Popup, { "data-component": componentScope, className: `${plain ? className : `modal ${className}`.trim()}${size}`, initialFocus: initialFocus, ...(finalFocus ? { finalFocus } : {}), ref: popup, "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : labelledBy, "aria-modal": "true", children: children })] }) }));
+}

package/dist/Pagination.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Pagination: the pages of a list, as a row of buttons. Plain React —
+ * Base UI has no pagination, and a row of buttons is all one is — with
+ * the rules a list's pages need: the current page is `aria-current`,
+ * never a button to itself; Previous and Next are disabled at the ends,
+ * never hidden, so the row keeps its shape; and a long run of pages is
+ * shortened with an ellipsis, never with a jump the reader cannot see.
+ * Pages are 1-based, as the reader counts them; `pages` is the count of
+ * pages, not of rows. With one page or none, the row renders nothing:
+ * a pager for a single page is noise.
+ */
+import type { ReactNode } from 'react';
+export interface PaginationProps {
+    /** The current page, 1-based. */
+    page: number;
+    /** The number of pages. */
+    pages: number;
+    onPageChange: (page: number) => void;
+    /** The list's accessible name, where the pager needs one ("Invoices, pages"). */
+    ariaLabel?: string;
+    /** Every word the pager says, in the caller's language; any left out are English. */
+    words?: Partial<PaginationWords>;
+}
+interface PaginationWords {
+    /** The nav's name when `ariaLabel` is not given. */
+    pages: string;
+    previous: ReactNode;
+    next: ReactNode;
+}
+/** The page numbers to draw: the first, the last, and a window of five around the current, with gaps as ellipses. */
+export declare function paginationItems(page: number, pages: number): Array<number | '…'>;
+export declare function Pagination({ page, pages, onPageChange, ariaLabel, words: given }: PaginationProps): import("react").JSX.Element | null;
+export {};

package/dist/Pagination.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** The page numbers to draw: the first, the last, and a window of five around the current, with gaps as ellipses. */
+export function paginationItems(page, pages) {
+    if (pages <= 7)
+        return Array.from({ length: pages }, (_, i) => i + 1);
+    const window = new Set([1, pages]);
+    for (let p = page - 2; p <= page + 2; p++)
+        if (p >= 1 && p <= pages)
+            window.add(p);
+    const sorted = [...window].sort((a, b) => a - b);
+    const items = [];
+    for (const p of sorted) {
+        if (items.length && typeof items[items.length - 1] === 'number' && p - items[items.length - 1] > 1)
+            items.push('…');
+        items.push(p);
+    }
+    return items;
+}
+export function Pagination({ page, pages, onPageChange, ariaLabel, words: given }) {
+    const words = { pages: 'Pages', previous: 'Previous', next: 'Next', ...given };
+    if (pages <= 1)
+        return null;
+    const current = Math.min(Math.max(page, 1), pages);
+    return (_jsxs("nav", { className: "ui-pagination", "aria-label": ariaLabel ?? words.pages, children: [_jsx("button", { type: "button", className: "ui-page ui-page-step", disabled: current === 1, onClick: () => onPageChange(current - 1), children: words.previous }), paginationItems(current, pages).map((item, i) => item === '…' ? (_jsx("span", { className: "ui-page-gap", "aria-hidden": "true", children: "\u2026" }, `gap-${i}`)) : (_jsx("button", { type: "button", className: "ui-page", "aria-current": item === current ? 'page' : undefined, onClick: () => onPageChange(item), children: item }, item))), _jsx("button", { type: "button", className: "ui-page ui-page-step", disabled: current === pages, onClick: () => onPageChange(current + 1), children: words.next })] }));
+}

package/dist/Popover.d.ts

@@ -0,0 +1,21 @@
+/**
+ * A popover: a small layer anchored to a trigger, over Base UI's Popover,
+ * which gives it the anchoring, Escape and a click outside to dismiss,
+ * and focus handed back on close. The trigger is the caller's element
+ * (a button, a word); the popup is the layer's children. Controlled with
+ * `open`/`onOpenChange`, uncontrolled with `defaultOpen`. Where the
+ * popup is a menu of actions, DropMenu is the right primitive instead:
+ * a popover is a layer, not a list of commands.
+ */
+import { type ReactNode } from 'react';
+export interface PopoverProps {
+    trigger: ReactNode;
+    children: ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+    /** The popup's accessible name, where it needs one. */
+    ariaLabel?: string;
+}
+export declare function Popover({ trigger, children, open, defaultOpen, onOpenChange, className, ariaLabel }: PopoverProps): import("react").JSX.Element;

package/dist/Popover.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A popover: a small layer anchored to a trigger, over Base UI's Popover,
+ * which gives it the anchoring, Escape and a click outside to dismiss,
+ * and focus handed back on close. The trigger is the caller's element
+ * (a button, a word); the popup is the layer's children. Controlled with
+ * `open`/`onOpenChange`, uncontrolled with `defaultOpen`. Where the
+ * popup is a menu of actions, DropMenu is the right primitive instead:
+ * a popover is a layer, not a list of commands.
+ */
+import { isValidElement } from 'react';
+import { Popover as BasePopover } from '@base-ui/react/popover';
+export function Popover({ trigger, children, open, defaultOpen, onOpenChange, className, ariaLabel }) {
+    /* The trigger is rendered as the trigger, not inside one: a button
+       passed as a child nested inside Base UI's own button, giving two
+       buttons for one control. The render prop merges onto the caller's
+       element (DropMenu.tsx does the same for its trigger). */
+    const triggerElement = isValidElement(trigger) ? trigger : _jsx("button", { type: "button", children: trigger });
+    return (_jsxs(BasePopover.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, children: [_jsx(BasePopover.Trigger, { className: "ui-popover-trigger", render: triggerElement }), _jsx(BasePopover.Portal, { children: _jsx(BasePopover.Positioner, { sideOffset: 8, children: _jsx(BasePopover.Popup, { className: ['ui-popover', className].filter(Boolean).join(' '), "aria-label": ariaLabel, children: children }) }) })] }));
+}

package/dist/Resizable.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Resizable panels: two or more panes side by side (or stacked), divided
+ * by a handle the reader drags or walks with the keyboard. Plain React —
+ * Base UI has no resizable, and a flex row with a draggable divider is all
+ * one is. The panes are the caller's array; each names its own `minSize`
+ * in percent (10 by default) and its starting `defaultSize`, and sizes
+ * that do not add to 100 are scaled to it, so a caller who writes 1 and 2
+ * gets a third and two thirds. Controlled with `sizes`/`onSizesChange`,
+ * uncontrolled with the panels' `defaultSize`s.
+ *
+ * A handle is a separator, not a button: `role="separator"`,
+ * `aria-orientation`, `aria-valuenow`/`min`/`max` in percent, and the two
+ * panes it divides named by `aria-controls`. Arrow keys move it 5 points
+ * (10 with Shift), Home and End take it to its ends, and a pointer drag
+ * moves it by the pointer's share of the container — the same handle for
+ * mouse, pen and touch, so no reader needs a mouse to resize. The panes
+ * themselves never shrink below their minimum, and a drag that would push
+ * a neighbour below its minimum stops at that neighbour's edge.
+ */
+import { type ReactNode } from 'react';
+export interface ResizablePanel {
+    /** The pane's accessible name, said by its handle's controls. */
+    label?: string;
+    /** The pane's starting share, in percent; shares are scaled to 100. */
+    defaultSize?: number;
+    /** The pane's smallest share, in percent; 10 by default. */
+    minSize?: number;
+    children: ReactNode;
+}
+export interface ResizableProps {
+    panels: readonly ResizablePanel[];
+    direction?: 'horizontal' | 'vertical';
+    sizes?: readonly number[];
+    onSizesChange?: (sizes: number[]) => void;
+    /** The group's accessible name, where the panes need one ("Record and detail"). */
+    ariaLabel?: string;
+    /** Every word the handles say, in the caller's language; any left out are English. */
+    words?: Partial<ResizableWords>;
+    className?: string;
+}
+interface ResizableWords {
+    /** A handle's name, from the names of the two panes it parts (`before`, `after`). */
+    resize: (before: string, after: string) => string;
+    /** A pane's stand-in name when it has no `label`: "panel 2". */
+    panel: (number: number) => string;
+}
+export declare function Resizable({ panels, direction, sizes, onSizesChange, ariaLabel, words: given, className }: ResizableProps): import("react").JSX.Element | null;
+export {};