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

package/dist/Resizable.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 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 { Fragment, useId, useRef, useState } from 'react';
+const ENGLISH = {
+    resize: (before, after) => `Resize ${before} and ${after}`,
+    panel: (number) => `panel ${number}`,
+};
+function initialSizes(panels) {
+    const given = panels.map((panel) => panel.defaultSize ?? 0);
+    const total = given.reduce((sum, size) => sum + size, 0);
+    if (total > 0)
+        return given.map((size) => (size / total) * 100);
+    return panels.map(() => 100 / panels.length);
+}
+function clampSizes(panels, sizes) {
+    const mins = panels.map((panel) => panel.minSize ?? 10);
+    const clamped = sizes.map((size, i) => Math.min(Math.max(size, mins[i]), 100 - mins.reduce((sum, min, j) => (j === i ? sum : sum + min), 0)));
+    const total = clamped.reduce((sum, size) => sum + size, 0);
+    return total ? clamped.map((size) => (size / total) * 100) : clamped;
+}
+export function Resizable({ panels, direction = 'horizontal', sizes, onSizesChange, ariaLabel, words: given, className }) {
+    const words = { ...ENGLISH, ...given };
+    const [uncontrolled, setUncontrolled] = useState(() => initialSizes(panels));
+    const containerRef = useRef(null);
+    const dragRef = useRef(null);
+    const baseId = useId();
+    if (panels.length < 2)
+        return null;
+    const current = clampSizes(panels, sizes ?? uncontrolled);
+    const mins = panels.map((panel) => panel.minSize ?? 10);
+    const setSizes = (next) => {
+        const clamped = clampSizes(panels, next);
+        if (sizes === undefined)
+            setUncontrolled(clamped);
+        onSizesChange?.(clamped);
+    };
+    /** Move handle `i` so pane `i` grows by `delta` points and pane `i + 1` shrinks by the same. */
+    const move = (i, delta) => {
+        const next = [...current];
+        const low = mins[i] - current[i];
+        const high = current[i + 1] - mins[i + 1];
+        const applied = Math.min(Math.max(delta, low), high);
+        next[i] = current[i] + applied;
+        next[i + 1] = current[i + 1] - applied;
+        setSizes(next);
+    };
+    const onHandleKeyDown = (i) => (event) => {
+        const horizontal = direction === 'horizontal';
+        const step = event.shiftKey ? 10 : 5;
+        if (event.key === (horizontal ? 'ArrowRight' : 'ArrowDown')) {
+            event.preventDefault();
+            move(i, step);
+        }
+        else if (event.key === (horizontal ? 'ArrowLeft' : 'ArrowUp')) {
+            event.preventDefault();
+            move(i, -step);
+        }
+        else if (event.key === 'Home') {
+            event.preventDefault();
+            move(i, -(current[i] - mins[i]));
+        }
+        else if (event.key === 'End') {
+            event.preventDefault();
+            move(i, current[i + 1] - mins[i + 1]);
+        }
+    };
+    const onPointerDown = (i) => (event) => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const rect = container.getBoundingClientRect();
+        const horizontal = direction === 'horizontal';
+        const pos = horizontal ? event.clientX - rect.left : event.clientY - rect.top;
+        const span = horizontal ? rect.width : rect.height;
+        dragRef.current = { handle: i, start: span ? (pos / span) * 100 : 0, sizes: current };
+        event.target.setPointerCapture?.(event.pointerId);
+    };
+    const onPointerMove = (event) => {
+        const drag = dragRef.current;
+        const container = containerRef.current;
+        if (!drag || !container)
+            return;
+        const rect = container.getBoundingClientRect();
+        const horizontal = direction === 'horizontal';
+        const pos = horizontal ? event.clientX - rect.left : event.clientY - rect.top;
+        const span = horizontal ? rect.width : rect.height;
+        if (!span)
+            return;
+        const delta = (pos / span) * 100 - drag.start;
+        const next = [...drag.sizes];
+        const low = mins[drag.handle] - drag.sizes[drag.handle];
+        const high = drag.sizes[drag.handle + 1] - mins[drag.handle + 1];
+        const applied = Math.min(Math.max(delta, low), high);
+        next[drag.handle] = drag.sizes[drag.handle] + applied;
+        next[drag.handle + 1] = drag.sizes[drag.handle + 1] - applied;
+        setSizes(next);
+    };
+    const onPointerUp = () => {
+        dragRef.current = null;
+    };
+    return (_jsx("div", { ref: containerRef, className: ['ui-resizable', direction === 'vertical' ? 'ui-resizable-vertical' : 'ui-resizable-horizontal', className]
+            .filter(Boolean)
+            .join(' '), role: "group", "aria-label": ariaLabel, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, children: panels.map((panel, i) => (_jsxs(Fragment, { children: [_jsx("div", { id: `${baseId}-panel-${i}`, className: "ui-resizable-panel", style: { flex: `${current[i]} 1 0` }, role: "group", "aria-label": panel.label, "data-scrolls": "", children: panel.children }), i < panels.length - 1 ? (_jsx("div", { className: "ui-resizable-handle", role: "separator", "aria-orientation": direction === 'horizontal' ? 'vertical' : 'horizontal', "aria-valuenow": Math.round(current[i]), "aria-valuemin": mins[i], "aria-valuemax": 100 - mins[i + 1], "aria-controls": `${baseId}-panel-${i} ${baseId}-panel-${i + 1}`, "aria-label": words.resize(panels[i]?.label ?? words.panel(i + 1), panels[i + 1]?.label ?? words.panel(i + 2)), tabIndex: 0, onKeyDown: onHandleKeyDown(i), onPointerDown: onPointerDown(i) })) : null] }, i))) }));
+}

package/dist/ScrollArea.d.ts

@@ -0,0 +1,29 @@
+/**
+ * A scroll area: a region that scrolls inside itself, with its own
+ * thumb, instead of growing the page around it. Over Base UI's ScrollArea,
+ * which gives it the viewport, the thumb that tracks it and the corner
+ * where two thumbs meet. Where its content overflows, the viewport is a
+ * tab stop with the region's name, so a keyboard reader can reach it and
+ * scroll with the arrows without a mouse; a region whose content never
+ * overflows draws no thumb and is no tab stop to nowhere. `orientation`
+ * says which thumbs exist (vertical by default); `maxHeight` caps the
+ * region where the caller wants one, as a CSS length, and is otherwise
+ * the caller's own height.
+ * Where the scrolled content is a list, the list's own semantics stay on
+ * the content — this region adds scrolling, never a second list. The
+ * viewport is a tab stop only while its content overflows: a region
+ * whose content fits draws no thumb and must be no tab stop to nowhere.
+ * Overflow is measured, not assumed — on mount, on content change, and
+ * whenever the box resizes.
+ */
+import { type ReactNode } from 'react';
+export interface ScrollAreaProps {
+    children: ReactNode;
+    /** The scrollable region's accessible name ("Recent activity"). */
+    ariaLabel?: string;
+    orientation?: 'vertical' | 'horizontal' | 'both';
+    /** A cap on the region's height, as a CSS length (for example "320px"). */
+    maxHeight?: string;
+    className?: string;
+}
+export declare function ScrollArea({ children, ariaLabel, orientation, maxHeight, className }: ScrollAreaProps): import("react").JSX.Element;

package/dist/ScrollArea.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A scroll area: a region that scrolls inside itself, with its own
+ * thumb, instead of growing the page around it. Over Base UI's ScrollArea,
+ * which gives it the viewport, the thumb that tracks it and the corner
+ * where two thumbs meet. Where its content overflows, the viewport is a
+ * tab stop with the region's name, so a keyboard reader can reach it and
+ * scroll with the arrows without a mouse; a region whose content never
+ * overflows draws no thumb and is no tab stop to nowhere. `orientation`
+ * says which thumbs exist (vertical by default); `maxHeight` caps the
+ * region where the caller wants one, as a CSS length, and is otherwise
+ * the caller's own height.
+ * Where the scrolled content is a list, the list's own semantics stay on
+ * the content — this region adds scrolling, never a second list. The
+ * viewport is a tab stop only while its content overflows: a region
+ * whose content fits draws no thumb and must be no tab stop to nowhere.
+ * Overflow is measured, not assumed — on mount, on content change, and
+ * whenever the box resizes.
+ */
+import { useEffect, useRef, useState } from 'react';
+import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';
+export function ScrollArea({ children, ariaLabel, orientation = 'vertical', maxHeight, className }) {
+    const vertical = orientation === 'vertical' || orientation === 'both';
+    const horizontal = orientation === 'horizontal' || orientation === 'both';
+    const viewportRef = useRef(null);
+    const contentRef = useRef(null);
+    const [overflows, setOverflows] = useState(false);
+    useEffect(() => {
+        const viewport = viewportRef.current;
+        if (!viewport)
+            return;
+        const measure = () => {
+            const at = viewportRef.current;
+            if (!at)
+                return;
+            const tall = vertical && at.scrollHeight - at.clientHeight > 1;
+            const wide = horizontal && at.scrollWidth - at.clientWidth > 1;
+            setOverflows(tall || wide);
+        };
+        measure();
+        /* Content growth changes scroll size without resizing the viewport,
+           so the content is watched too; where ResizeObserver is absent
+           (a test renderer) the mount-time measure above is all there is. */
+        let observer;
+        if (typeof ResizeObserver !== 'undefined') {
+            observer = new ResizeObserver(measure);
+            observer.observe(viewport);
+            const content = contentRef.current;
+            if (content)
+                observer.observe(content);
+        }
+        window.addEventListener('resize', measure);
+        return () => {
+            observer?.disconnect();
+            window.removeEventListener('resize', measure);
+        };
+    }, [vertical, horizontal, children]);
+    return (_jsxs(BaseScrollArea.Root, { className: ['ui-scroll-area', className].filter(Boolean).join(' '), children: [_jsx(BaseScrollArea.Viewport, { ref: viewportRef, className: "ui-scroll-area-viewport", tabIndex: overflows ? 0 : -1, 
+                /* Base UI renders its viewport as presentation; a named scroll
+                   region needs the region role, or the label is dropped with it. */
+                role: "region", "aria-label": ariaLabel, "data-scrolls": "", style: maxHeight ? { maxHeight } : undefined, children: _jsx(BaseScrollArea.Content, { ref: contentRef, className: "ui-scroll-area-content", children: children }) }), vertical ? (_jsx(BaseScrollArea.Scrollbar, { className: "ui-scroll-area-scrollbar ui-scroll-area-scrollbar-vertical", orientation: "vertical", children: _jsx(BaseScrollArea.Thumb, { className: "ui-scroll-area-thumb" }) })) : null, horizontal ? (_jsx(BaseScrollArea.Scrollbar, { className: "ui-scroll-area-scrollbar ui-scroll-area-scrollbar-horizontal", orientation: "horizontal", children: _jsx(BaseScrollArea.Thumb, { className: "ui-scroll-area-thumb" }) })) : null, vertical && horizontal ? _jsx(BaseScrollArea.Corner, { className: "ui-scroll-area-corner" }) : null] }));
+}

package/dist/Select.d.ts

@@ -0,0 +1,26 @@
+/**
+ * The listbox of a form: one choice, or several, in a field. It is the Dropdown (Base UI's Select) dressed as a field
+ * box, so the keyboard is the one it has: ArrowDown opens it, the arrows move, Enter and Space choose, Escape closes and
+ * returns focus to the box. Props only. Preview: @mistriwork/ui is Preview at 1.0.
+ */
+import { type ReactNode, type Ref } from 'react';
+import { type DropdownItem } from './Dropdown.js';
+import { type FieldFrame } from './fieldFrame.js';
+interface ListFrame extends FieldFrame {
+    options: DropdownItem[];
+    /** What the box says while nothing is chosen ("Choose"). */
+    placeholder?: string;
+    disabled?: boolean;
+    buttonRef?: Ref<HTMLButtonElement>;
+}
+/** One choice from a list, under a field box. */
+export declare function Select(props: ListFrame & {
+    value: string;
+    onChange: (value: string) => void;
+}): ReactNode;
+/** Several choices, each with a checkbox; the closed box says them as "Acura, Alfa Romeo". */
+export declare function MultiSelect(props: ListFrame & {
+    value: string[];
+    onChange: (value: string[]) => void;
+}): ReactNode;
+export {};

package/dist/Select.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The listbox of a form: one choice, or several, in a field. It is the Dropdown (Base UI's Select) dressed as a field
+ * box, so the keyboard is the one it has: ArrowDown opens it, the arrows move, Enter and Space choose, Escape closes and
+ * returns focus to the box. Props only. Preview: @mistriwork/ui is Preview at 1.0.
+ */
+import { useId } from 'react';
+import { Dropdown, MultiDropdown } from './Dropdown.js';
+import { Field } from './Field.js';
+import { frameOf } from './fieldFrame.js';
+/** One choice from a list, under a field box. */
+export function Select(props) {
+    const valueId = useId();
+    return (_jsx(Field, { ...frameOf(props), group: true, children: (control) => (_jsx(Dropdown, { items: props.options, value: props.value, onChange: props.onChange, id: control.id, ariaLabelledBy: `${control['aria-labelledby']} ${valueId}`, ariaDescribedBy: control['aria-describedby'], ariaInvalid: control['aria-invalid'], valueId: valueId, buttonClassName: "field-control field-select", listClassName: "field-list", buttonRef: props.buttonRef, placeholder: props.placeholder, disabled: props.disabled })) }));
+}
+/** Several choices, each with a checkbox; the closed box says them as "Acura, Alfa Romeo". */
+export function MultiSelect(props) {
+    const valueId = useId();
+    return (_jsx(Field, { ...frameOf(props), group: true, children: (control) => (_jsx(MultiDropdown, { items: props.options, value: props.value, onChange: props.onChange, id: control.id, ariaLabelledBy: `${control['aria-labelledby']} ${valueId}`, ariaDescribedBy: control['aria-describedby'], ariaInvalid: control['aria-invalid'], valueId: valueId, buttonClassName: "field-control field-select", listClassName: "field-list", buttonRef: props.buttonRef, placeholder: props.placeholder, disabled: props.disabled })) }));
+}

package/dist/SensitiveField.d.ts

@@ -0,0 +1,26 @@
+/**
+ * A number kept out of sight (an SSN, say): dots until Show is pressed, typed at the end. Show is a button of its own,
+ * after the box: two controls do not share a box (docs/design.md). The intake style draws it over the box's inline end,
+ * in room the box keeps for it, so it reads as part of the field and is still its own Tab stop. The value lives in the caller's state alone:
+ * this never logs it, stores it or writes it anywhere, the box turns off autofill and spellcheck, and while hidden the
+ * dots are all the page holds. Preview: @mistriwork/ui is Preview at 1.0.
+ */
+import { type ReactNode } from 'react';
+import { type FieldFrame } from './fieldFrame.js';
+import { type Mask } from './masks.js';
+export interface SensitiveFieldProps extends FieldFrame {
+    /** The raw value. */
+    value: string;
+    onChange: (raw: string) => void;
+    mask: Mask;
+    valid?: boolean;
+    validIcon?: ReactNode;
+    onBlur?: () => void;
+    /** The line under the box. */
+    note?: ReactNode;
+    noteIcon?: ReactNode;
+    /** The words of the button beside the box. */
+    showLabel: string;
+    hideLabel: string;
+}
+export declare function SensitiveField(props: SensitiveFieldProps): ReactNode;

package/dist/SensitiveField.js

@@ -0,0 +1,27 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A number kept out of sight (an SSN, say): dots until Show is pressed, typed at the end. Show is a button of its own,
+ * after the box: two controls do not share a box (docs/design.md). The intake style draws it over the box's inline end,
+ * in room the box keeps for it, so it reads as part of the field and is still its own Tab stop. The value lives in the caller's state alone:
+ * this never logs it, stores it or writes it anywhere, the box turns off autofill and spellcheck, and while hidden the
+ * dots are all the page holds. Preview: @mistriwork/ui is Preview at 1.0.
+ */
+import { useState } from 'react';
+import { Button } from './Button.js';
+import { Field } from './Field.js';
+import { frameOf } from './fieldFrame.js';
+import { digits } from './masks.js';
+import { ValidMark } from './TextField.js';
+export function SensitiveField(props) {
+    const [shown, setShown] = useState(false);
+    const formatted = props.mask.format(props.value);
+    const display = shown ? formatted : '•'.repeat(formatted.length);
+    const change = (typed) => {
+        if (shown)
+            return props.onChange(props.mask.parse(typed));
+        // Hidden: what is left of the dots keeps that many characters of the number; a digit typed is added at the end.
+        const kept = formatted.slice(0, typed.replace(/[^•]/g, '').length);
+        props.onChange(props.mask.parse(digits(kept) + digits(typed)));
+    };
+    return (_jsx(Field, { ...frameOf(props), children: (control) => (_jsxs(_Fragment, { children: [_jsxs("div", { className: "field-with-action", children: [_jsxs("div", { className: `field-box${props.valid === undefined ? '' : ' has-mark'}`, children: [_jsx("input", { ...control, className: `field-control${shown ? '' : ' field-hidden'}`, value: display, inputMode: props.mask.inputMode ?? 'numeric', autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, "data-1p-ignore": true, "data-lpignore": "true", onChange: (e) => change(e.target.value), onBlur: props.onBlur }), props.valid ? _jsx(ValidMark, { icon: props.validIcon }) : null] }), _jsx(Button, { intent: "quiet", onClick: () => setShown(!shown), children: shown ? props.hideLabel : props.showLabel })] }), props.note ? (_jsxs("p", { className: "field-note", children: [props.noteIcon, props.note] })) : null] })) }));
+}

package/dist/Slider.d.ts

@@ -0,0 +1,17 @@
+/**
+ * An amount set by a slider and read out in a box above it, with the range's ends labelled. The slider is the native
+ * range input, so the arrows, Home, End and Page keys are the browser's. Props only. Preview: @mistriwork/ui is Preview at 1.0.
+ */
+import type { ReactNode } from 'react';
+import { type FieldFrame } from './fieldFrame.js';
+export interface SliderProps extends FieldFrame {
+    value: number;
+    onChange: (value: number) => void;
+    min: number;
+    max: number;
+    step?: number;
+    /** How a number is said, in the box, at the ends and to assistive technology. Whole numbers with separators by default. */
+    format?: (n: number) => string;
+    disabled?: boolean;
+}
+export declare function Slider(props: SliderProps): ReactNode;

package/dist/Slider.js

@@ -0,0 +1,10 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Field } from './Field.js';
+import { frameOf } from './fieldFrame.js';
+import { grouped } from './masks.js';
+export function Slider(props) {
+    const say = props.format ?? grouped;
+    const span = props.max - props.min;
+    const share = span > 0 ? ((props.value - props.min) / span) * 100 : 0;
+    return (_jsx(Field, { ...frameOf(props), children: (control) => (_jsxs(_Fragment, { children: [_jsx("div", { className: "field-control field-readout", "aria-hidden": "true", children: say(props.value) }), _jsx("input", { ...control, type: "range", className: "field-range", min: props.min, max: props.max, step: props.step, value: props.value, disabled: props.disabled, "aria-valuetext": say(props.value), style: { '--range-share': `${share}%` }, onChange: (e) => props.onChange(Number(e.target.value)) }), _jsxs("div", { className: "field-range-ends", "aria-hidden": "true", children: [_jsx("span", { children: say(props.min) }), _jsx("span", { children: say(props.max) })] })] })) }));
+}

package/dist/Switch.d.ts

@@ -0,0 +1,28 @@
+/**
+ * A switch: one on/off choice, said as a switch, not a checkbox. Over Base
+ * UI's Switch, which gives it the role, the keyboard (Space toggles, as a
+ * checkbox does) and the checked state; the label beside it is a click
+ * target too, and a description under it never is. Controlled with
+ * `checked`/`onCheckedChange`, uncontrolled with `defaultChecked`.
+ * Busy is not disabled here either (Button.tsx): a disabled switch drops
+ * the focus it holds, so a switch that is working says `aria-disabled`
+ * and refuses the press itself.
+ */
+import { type ReactNode, type Ref } from 'react';
+export interface SwitchProps {
+    /** The label beside the switch; its click toggles, as the switch's own does. */
+    label?: ReactNode;
+    /** A line under the label, in the muted ink, never a click target. */
+    description?: ReactNode;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    /** Base UI reports the reason second; the caller's claim is the state, so the reason is untyped here. */
+    onCheckedChange?: (checked: boolean, event: unknown) => void;
+    disabled?: boolean;
+    /** Working: pressed once already. Says so and refuses another press, keeping the focus. */
+    busy?: boolean;
+    id?: string;
+    className?: string;
+    ref?: Ref<HTMLButtonElement>;
+}
+export declare function Switch({ label, description, checked, defaultChecked, onCheckedChange, disabled, busy, id, className, ref, }: SwitchProps): import("react").JSX.Element;

package/dist/Switch.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A switch: one on/off choice, said as a switch, not a checkbox. Over Base
+ * UI's Switch, which gives it the role, the keyboard (Space toggles, as a
+ * checkbox does) and the checked state; the label beside it is a click
+ * target too, and a description under it never is. Controlled with
+ * `checked`/`onCheckedChange`, uncontrolled with `defaultChecked`.
+ * Busy is not disabled here either (Button.tsx): a disabled switch drops
+ * the focus it holds, so a switch that is working says `aria-disabled`
+ * and refuses the press itself.
+ */
+import { useId } from 'react';
+import { Switch as BaseSwitch } from '@base-ui/react/switch';
+export function Switch({ label, description, checked, defaultChecked, onCheckedChange, disabled = false, busy = false, id, className, ref, }) {
+    /* The label names the switch by its id; a caller who gives none gets
+       a generated one, never Base UI's own, which the label cannot know. */
+    const generatedId = useId();
+    const switchId = id ?? generatedId;
+    return (_jsxs("span", { className: ['ui-switch-row', className].filter(Boolean).join(' '), children: [_jsx(BaseSwitch.Root, { id: switchId, ref: ref, className: "ui-switch", checked: checked, defaultChecked: defaultChecked, disabled: disabled, "aria-disabled": busy || undefined, onCheckedChange: (next, event) => {
+                    if (busy)
+                        return;
+                    onCheckedChange?.(next, event);
+                }, children: _jsx(BaseSwitch.Thumb, { className: "ui-switch-thumb" }) }), label !== undefined || description !== undefined ? (_jsxs("span", { className: "ui-switch-copy", children: [label !== undefined ? (_jsx("label", { htmlFor: switchId, className: "ui-switch-label", children: label })) : null, description !== undefined ? _jsx("span", { className: "ui-switch-description", children: description }) : null] })) : null] }));
+}

package/dist/Tabs.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Tabs: one panel at a time, chosen from a row. Over Base UI's Tabs, which
+ * gives it the tablist, the arrow-key walk between tabs and the panel that
+ * belongs to the chosen one; a disabled tab is skipped by that walk, never
+ * a dead end. Controlled with `value`/`onValueChange`, uncontrolled with
+ * `defaultValue`. Panels are the tab's own children, not a second render
+ * the caller keeps in step.
+ */
+import type { ReactNode } from 'react';
+export interface TabItem {
+    value: string;
+    label: ReactNode;
+    children: ReactNode;
+    disabled?: boolean;
+}
+export interface TabsProps {
+    tabs: readonly TabItem[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    className?: string;
+    /** The tablist's accessible name, where the tabs need one ("Settings sections"). */
+    ariaLabel?: string;
+}
+export declare function Tabs({ tabs, value, defaultValue, onValueChange, className, ariaLabel }: TabsProps): import("react").JSX.Element;

package/dist/Tabs.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tabs as BaseTabs } from '@base-ui/react/tabs';
+export function Tabs({ tabs, value, defaultValue, onValueChange, className, ariaLabel }) {
+    return (_jsxs(BaseTabs.Root, { className: ['ui-tabs', className].filter(Boolean).join(' '), value: value, defaultValue: defaultValue ?? tabs.find((tab) => !tab.disabled)?.value, onValueChange: onValueChange, children: [_jsx(BaseTabs.List, { className: "ui-tabs-list", "aria-label": ariaLabel, children: tabs.map((tab) => (_jsx(BaseTabs.Tab, { className: "ui-tab", value: tab.value, disabled: tab.disabled, children: tab.label }, tab.value))) }), tabs.map((tab) => (_jsx(BaseTabs.Panel, { className: "ui-tab-panel", value: tab.value, children: tab.children }, tab.value)))] }));
+}

package/dist/TextField.d.ts

@@ -0,0 +1,44 @@
+/**
+ * The text boxes of a form: a plain box, a box that draws its value through a mask, and whole money. A Field's label,
+ * hint and problem are wired into the box; a valid mark stands at its inline end in space that is always reserved, so
+ * it arrives without moving the text. Props only. Preview: @mistriwork/ui is Preview at 1.0.
+ */
+import type { ReactNode, Ref } from 'react';
+import { type FieldFrame } from './fieldFrame.js';
+import { type Mask } from './masks.js';
+/** The mark at a box's inline end: drawn in CSS unless a picture is lent. Decorative: validity is `aria-invalid`'s to say. */
+export declare function ValidMark({ icon }: {
+    icon?: ReactNode;
+}): ReactNode;
+export interface TextFieldProps extends FieldFrame {
+    value: string;
+    onChange: (value: string) => void;
+    onBlur?: () => void;
+    /** Present, the box reserves room for the mark; true draws it. Leave it out for a box that never shows one. */
+    valid?: boolean;
+    /** A picture for the mark in place of the drawn check. */
+    validIcon?: ReactNode;
+    type?: 'text' | 'email' | 'tel' | 'url';
+    inputMode?: 'text' | 'email' | 'tel' | 'numeric' | 'url';
+    autoComplete?: string;
+    placeholder?: string;
+    name?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    inputRef?: Ref<HTMLInputElement>;
+    /** Something drawn under the box: a computed line, say. */
+    after?: ReactNode;
+}
+export declare function TextField(props: TextFieldProps): ReactNode;
+export interface MaskedFieldProps extends Omit<TextFieldProps, 'value' | 'onChange'> {
+    mask: Mask;
+    /** The raw value: the digits, usually. */
+    value: string;
+    onChange: (raw: string) => void;
+}
+/** A box that shows its value through a mask and keeps the raw one: `masks.phone`, `masks.date` (typed MM/DD/YYYY), `masks.ssn`… */
+export declare function MaskedField({ mask, value, onChange, ...rest }: MaskedFieldProps): ReactNode;
+/** Whole money, drawn `$2,500` (or `25,000` with `symbol=""`). The value is the digits. */
+export declare function MoneyField({ symbol, ...rest }: Omit<MaskedFieldProps, 'mask'> & {
+    symbol?: string;
+}): ReactNode;

package/dist/TextField.js

@@ -0,0 +1,19 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Field } from './Field.js';
+import { frameOf } from './fieldFrame.js';
+import { masks } from './masks.js';
+/** The mark at a box's inline end: drawn in CSS unless a picture is lent. Decorative: validity is `aria-invalid`'s to say. */
+export function ValidMark({ icon }) {
+    return (_jsx("span", { className: "field-mark", "aria-hidden": "true", children: icon }));
+}
+export function TextField(props) {
+    return (_jsx(Field, { ...frameOf(props), children: (control) => (_jsxs(_Fragment, { children: [_jsxs("div", { className: `field-box${props.valid === undefined ? '' : ' has-mark'}`, children: [_jsx("input", { ...control, ref: props.inputRef, className: "field-control", type: props.type ?? 'text', name: props.name, value: props.value, inputMode: props.inputMode, autoComplete: props.autoComplete ?? 'off', placeholder: props.placeholder, disabled: props.disabled, readOnly: props.readOnly, onChange: (e) => props.onChange(e.target.value), onBlur: props.onBlur }), props.valid ? _jsx(ValidMark, { icon: props.validIcon }) : null] }), props.after] })) }));
+}
+/** A box that shows its value through a mask and keeps the raw one: `masks.phone`, `masks.date` (typed MM/DD/YYYY), `masks.ssn`… */
+export function MaskedField({ mask, value, onChange, ...rest }) {
+    return (_jsx(TextField, { ...rest, value: mask.format(value), onChange: (typed) => onChange(mask.parse(typed)), inputMode: rest.inputMode ?? mask.inputMode, placeholder: rest.placeholder ?? mask.placeholder }));
+}
+/** Whole money, drawn `$2,500` (or `25,000` with `symbol=""`). The value is the digits. */
+export function MoneyField({ symbol = '$', ...rest }) {
+    return _jsx(MaskedField, { ...rest, mask: masks.money(symbol) });
+}

package/dist/Tooltip.d.ts

@@ -0,0 +1,29 @@
+/**
+ * A tooltip: a short note on an element, said on hover and on focus alike,
+ * never on hover alone. Over Base UI's Tooltip, which gives it the
+ * anchoring and the Escape to dismiss. Base UI does not name the note
+ * itself in this version — no `role="tooltip"`, no `aria-describedby` on
+ * the trigger — so this wrapper owns both: the popup carries the role
+ * and an id, and the trigger carries that id as its description while
+ * the note is open. The trigger is the caller's element (a button, a
+ * word); the note is the popup's children. The render prop merges onto
+ * the caller's element (Popover.tsx does the same), so a button passed as
+ * the trigger is never nested inside Base UI's own button.
+ *
+ * A tooltip says something extra, never something essential: a reader who
+ * never hovers must still understand the trigger from its own label, and
+ * a note that carries an action belongs in a Popover instead, where it
+ * can be reached and used.
+ */
+import { type ReactNode } from 'react';
+export interface TooltipProps {
+    /** The element the note belongs to; a button, a word, an icon. */
+    trigger: ReactNode;
+    /** The note itself: short, supplementary, never an action. */
+    children: ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+}
+export declare function Tooltip({ trigger, children, open, defaultOpen, onOpenChange, className }: TooltipProps): import("react").JSX.Element;

package/dist/Tooltip.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A tooltip: a short note on an element, said on hover and on focus alike,
+ * never on hover alone. Over Base UI's Tooltip, which gives it the
+ * anchoring and the Escape to dismiss. Base UI does not name the note
+ * itself in this version — no `role="tooltip"`, no `aria-describedby` on
+ * the trigger — so this wrapper owns both: the popup carries the role
+ * and an id, and the trigger carries that id as its description while
+ * the note is open. The trigger is the caller's element (a button, a
+ * word); the note is the popup's children. The render prop merges onto
+ * the caller's element (Popover.tsx does the same), so a button passed as
+ * the trigger is never nested inside Base UI's own button.
+ *
+ * A tooltip says something extra, never something essential: a reader who
+ * never hovers must still understand the trigger from its own label, and
+ * a note that carries an action belongs in a Popover instead, where it
+ * can be reached and used.
+ */
+import { cloneElement, isValidElement, useId, useState } from 'react';
+import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';
+export function Tooltip({ trigger, children, open, defaultOpen, onOpenChange, className }) {
+    const tooltipId = useId();
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen ?? false);
+    const isOpen = open ?? uncontrolledOpen;
+    const base = isValidElement(trigger) ? trigger : _jsx("button", { type: "button", children: trigger });
+    /* The description wire exists only while the note is open, so a closed
+       tooltip never points at an id that is not in the tree. It joins the
+       trigger's own description (a field's hint) rather than replacing it. */
+    const existing = base.props['aria-describedby'];
+    const triggerElement = isOpen
+        ? cloneElement(base, { 'aria-describedby': [existing, tooltipId].filter(Boolean).join(' ') })
+        : base;
+    return (_jsxs(BaseTooltip.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: (next, details) => {
+            if (open === undefined)
+                setUncontrolledOpen(next);
+            onOpenChange?.(next);
+            void details;
+        }, children: [_jsx(BaseTooltip.Trigger, { className: "ui-tooltip-trigger", render: triggerElement }), _jsx(BaseTooltip.Portal, { children: _jsx(BaseTooltip.Positioner, { sideOffset: 8, children: _jsx(BaseTooltip.Popup, { id: tooltipId, role: "tooltip", className: ['ui-tooltip', className].filter(Boolean).join(' '), children: children }) }) })] }));
+}