@adecore/ui 0.14.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Bas Milius
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,83 @@
+# @adecore/ui
+
+[![npm](https://img.shields.io/npm/v/@adecore/ui)](https://www.npmjs.com/package/@adecore/ui)
+[![Docs](https://img.shields.io/badge/docs-adecore.dev-blue)](https://adecore.dev/ui/)
+
+React components for apps that behave like desktop software: menus with shortcuts, dialogs over dialogs, tooltips, fields, toasts and a settings dialog. Every number and date goes through formatters that follow the language and the region a person set, and one theme of tokens draws it all. Built on React 19, [Base UI](https://base-ui.com), [Lucide](https://lucide.dev) and Tailwind 4.
+
+**[Documentation with a live demo of every component](https://adecore.dev/ui/)**
+
+## Install
+
+```sh
+bun add @adecore/ui
+```
+
+React 19, `react-dom`, `i18next` and `react-i18next` are peer dependencies; the app brings them.
+
+## Set up
+
+Import the theme right after Tailwind and let Tailwind scan the library for the classes it uses. The `@source` path is relative to the CSS file.
+
+```css
+@import "tailwindcss";
+@import "@adecore/ui/theme.css";
+@source "../node_modules/@adecore/ui/dist";
+```
+
+Wrap the app in `UIProvider` once, above the first component of the library. It adds the library's words to the app's i18next (English and Dutch ship with it), hands the formatters their [format source](https://adecore.dev/ui/formatting/) and mounts the tooltip provider.
+
+```tsx
+import i18next from 'i18next';
+import { UIProvider } from '@adecore/ui';
+
+createRoot(root).render(
+    <UIProvider i18n={i18next} formatSource={formatSource}>
+        <App />
+    </UIProvider>
+);
+```
+
+From there, every component is ready to use:
+
+```tsx
+<Menu.Root>
+    <IconButton icon={Ellipsis} label="More" render={<Menu.Trigger />} />
+    <Menu.Popup align="end">
+        <Menu.Item onClick={rename}>
+            Rename <Kbd shortcut={KEY_SHORTCUTS.rename} />
+        </Menu.Item>
+        <Menu.Item onClick={remove}>Remove</Menu.Item>
+    </Menu.Popup>
+</Menu.Root>
+```
+
+[Getting started](https://adecore.dev/ui/guide/getting-started) covers the rest: the format source, a third language, the optional pieces and how to work on a local checkout.
+
+## Entry points
+
+| Import | What it holds |
+|---|---|
+| `@adecore/ui` | The components, hooks and helpers |
+| `@adecore/ui/settings` | `SettingsDialog` and the parts of a pane |
+| `@adecore/ui/format` | Numbers, dates, durations and regions, and `setFormatSource` |
+| `@adecore/ui/testing` | Fakes for an app's tests, such as `fakeFormatSource()` |
+| `@adecore/ui/testing/dedupe` | A `bun test` preload for an app that links a checkout |
+| `@adecore/ui/theme.css` | The theme |
+
+Nothing else is public. No module does work on import, so a bundler keeps only what an app uses.
+
+## Documentation
+
+| Page | What it covers |
+|---|---|
+| [Getting started](https://adecore.dev/ui/guide/getting-started) | Install, the theme, `UIProvider`, the format source and a local checkout |
+| [Principles](https://adecore.dev/ui/guide/principles) | The rules every component follows, from the type scale to keyboard focus |
+| [Theme](https://adecore.dev/ui/guide/theme) | Every token in light and dark, and how to set an accent |
+| [Components](https://adecore.dev/ui/actions/button) | A page per component with a live demo, grouped in the sidebar |
+| [Formatting](https://adecore.dev/ui/formatting/) | Numbers, dates, durations and regions |
+| [Testing](https://adecore.dev/ui/utilities/testing) | Fakes for an app's tests and the preload for a linked checkout |
+
+## License
+
+MIT

package/dist/AccentSwatches.d.ts

@@ -0,0 +1,15 @@
+import type { Ref } from 'react';
+export interface AccentSwatchesProps<Id extends string> {
+    value: string | undefined;
+    onValueChange(id: Id): void;
+    label: string;
+    accents: readonly {
+        id: Id;
+        color: string;
+    }[];
+    featured: readonly Id[];
+    labelOf(id: Id): string;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function AccentSwatches<Id extends string>({ value, onValueChange, label, accents, featured, labelOf, className, ref }: AccentSwatchesProps<Id>): import("react").JSX.Element;

package/dist/AccentSwatches.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { Ellipsis } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { ColorSwatch } from './ColorSwatch.js';
+import { Icon } from './Icon.js';
+import { MenuPopup, MenuRadioGroup, MenuRadioItem, MenuRoot, MenuTrigger } from './menu/parts.js';
+import { Tooltip } from './Tooltip.js';
+/*
+ * An accent, a few colors at a time. A palette is more than a settings row can carry, so the list
+ * behind them holds all of them, the featured ones included; the trigger wears the chosen color
+ * itself whenever that color is not one of the few. A value that is no accent at all picks nothing.
+ */
+export function AccentSwatches({ value, onValueChange, label, accents, featured, labelOf, className, ref }) {
+    const { t } = useTranslation('ui');
+    const isFeatured = (id) => featured.some((entry) => entry === id);
+    const colorOf = (id) => accents.find((entry) => entry.id === id)?.color;
+    const shown = accents.filter((entry) => isFeatured(entry.id)).sort((a, b) => featured.indexOf(a.id) - featured.indexOf(b.id));
+    const hidden = value !== undefined && !isFeatured(value) && colorOf(value) !== undefined ? value : null;
+    return (_jsxs("div", { ref: ref, className: clsx('flex items-center gap-2', className), role: "radiogroup", "aria-label": label, children: [shown.map((entry) => (_jsx(Tooltip, { label: labelOf(entry.id), children: _jsx(ColorSwatch, { role: "radio", "aria-checked": value === entry.id, "aria-label": labelOf(entry.id), color: entry.color, picked: value === entry.id, onClick: () => onValueChange(entry.id) }) }, entry.id))), _jsxs(MenuRoot, { children: [_jsx(Tooltip, { label: t('accent.more'), children: _jsx(ColorSwatch, { render: _jsx(MenuTrigger, {}), "aria-label": t('accent.more'), color: hidden === null ? undefined : colorOf(hidden), picked: hidden !== null, children: hidden === null ? _jsx(Icon, { icon: Ellipsis, size: 12 }) : undefined }) }), _jsx(MenuPopup, { align: "end", className: "max-h-96 overflow-y-auto", children: _jsx(MenuRadioGroup, { value: value ?? null, onValueChange: (id) => onValueChange(id), children: accents.map((entry) => (_jsxs(MenuRadioItem, { value: entry.id, children: [_jsx("span", { className: "h-3 w-3 shrink-0 rounded-full", style: { background: entry.color }, "aria-hidden": true }), _jsx("span", { className: "grow", children: labelOf(entry.id) })] }, entry.id))) }) })] })] }));
+}

package/dist/Banner.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode, Ref } from 'react';
+import type { LucideIcon } from 'lucide-react';
+export type BannerTone = 'attention' | 'error' | 'neutral';
+export interface BannerProps {
+    icon: LucideIcon;
+    tone: BannerTone;
+    message: ReactNode;
+    children?: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function Banner({ icon, tone, message, children, className, ref }: BannerProps): import("react").JSX.Element;

package/dist/Banner.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { Icon } from './Icon.js';
+import { Surface } from './Surface.js';
+const TONE = {
+    attention: 'text-status-needs-you',
+    error: 'text-status-error',
+    neutral: 'text-text-muted'
+};
+/*
+ * The strip over a view: one line and the buttons that answer it. It is where anything that waits
+ * for a person goes (a conflict, a failure, a request), because a corner toast is read after the fact
+ * and a decision has to be where the eyes already are. One at a time: the slot is one row and the
+ * caller picks what stands in it.
+ */
+export function Banner({ icon, tone, message, children, className = 'absolute inset-x-0 top-3 z-20', ref }) {
+    return (_jsx("div", { ref: ref, className: clsx('pointer-events-auto flex justify-center px-4', className), role: "status", "aria-live": "polite", children: _jsxs(Surface, { className: "flex max-w-[640px] items-center gap-3 rounded-lg px-3 py-2 text-sm text-text", children: [_jsx(Icon, { icon: icon, size: 16, className: clsx('shrink-0', TONE[tone]) }), _jsx("span", { className: "grow", children: message }), children] }) }));
+}

package/dist/Button.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentProps } from 'react';
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'danger-outline' | 'positive' | 'inverse';
+export type ButtonSize = 'xs' | 'sm' | 'md';
+export interface ButtonProps extends ComponentProps<'button'> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    href?: string;
+}
+export declare function Button({ variant, size, className, href, type, ref, ...rest }: ButtonProps): import("react").JSX.Element;

package/dist/Button.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+const VARIANT = {
+    // A filled button darkens under the pointer. Its color is the meaning, so no token of its own for hover.
+    primary: 'bg-accent text-accent-text hover:brightness-90 disabled:hover:brightness-100',
+    secondary: 'border border-border bg-surface-raised text-text hover:bg-surface-hover disabled:hover:bg-surface-raised',
+    ghost: 'text-text-muted hover:bg-surface-hover hover:text-text',
+    danger: 'bg-status-error text-accent-text hover:brightness-90 disabled:hover:brightness-100',
+    // A step that forgets something rather than destroys it: softer than the filled button of a deletion that cannot come back.
+    'danger-outline': 'border border-status-error/35 text-status-error hover:bg-status-error/10 disabled:hover:bg-transparent',
+    positive: 'bg-positive text-positive-text hover:brightness-90 disabled:hover:brightness-100',
+    // Dark on a light theme, light on a dark one, matching what Apple's and GitHub's sign-in buttons ask for.
+    inverse: 'bg-text text-bg hover:opacity-90 disabled:hover:opacity-100'
+};
+/* 28 and 32 pixels are the compact and the normal control; 24 fits a header of 32. */
+const SIZE = {
+    xs: 'h-6 px-2',
+    sm: 'h-7 px-2.5',
+    md: 'h-8 px-3'
+};
+/* Every button with a word in it. A button that is only an icon is an `IconButton`, which is a square, not a label. */
+export function Button({ variant = 'ghost', size = 'md', className, href, type = 'button', ref, ...rest }) {
+    const classes = clsx('inline-flex shrink-0 items-center justify-center gap-1.5 rounded-md text-xs font-medium disabled:opacity-50', VARIANT[variant], SIZE[size], className);
+    if (href) {
+        return (_jsx("a", { ref: ref, className: classes, href: href, target: "_blank", rel: "noreferrer", ...rest }));
+    }
+    return _jsx("button", { ref: ref, type: type, className: classes, ...rest });
+}

package/dist/ButtonGroup.d.ts

@@ -0,0 +1,3 @@
+import { useRender } from '@base-ui-components/react/use-render';
+export type ButtonGroupProps = useRender.ComponentProps<'div'>;
+export declare function ButtonGroup({ render, className, ref, ...props }: ButtonGroupProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/ButtonGroup.js

@@ -0,0 +1,11 @@
+import clsx from 'clsx';
+import { useRender } from '@base-ui-components/react/use-render';
+/* Icon buttons that belong together sit 1px apart; groups keep the wider gap of their container. */
+export function ButtonGroup({ render, className, ref, ...props }) {
+    return useRender({
+        render,
+        ref,
+        defaultTagName: 'div',
+        props: { ...props, className: clsx('inline-flex items-center gap-px', className) }
+    });
+}

package/dist/Checkbox.d.ts

@@ -0,0 +1,11 @@
+import type { Ref } from 'react';
+export interface CheckboxProps {
+    checked: boolean;
+    onCheckedChange(checked: boolean): void;
+    label: string;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    className?: string;
+    ref?: Ref<HTMLButtonElement>;
+}
+export declare function Checkbox({ checked, onCheckedChange, label, indeterminate, disabled, className, ref }: CheckboxProps): import("react").JSX.Element;

package/dist/Checkbox.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { Check, Minus } from 'lucide-react';
+import { Checkbox as BaseCheckbox } from '@base-ui-components/react/checkbox';
+import { Icon } from './Icon.js';
+/* Picked or not, as one item out of a list or an option that waits for a Save button. */
+export function Checkbox({ checked, onCheckedChange, label, indeterminate = false, disabled, className, ref }) {
+    return (_jsx(BaseCheckbox.Root, { ref: ref, checked: checked, indeterminate: indeterminate, onCheckedChange: (next) => onCheckedChange(next), "aria-label": label, disabled: disabled, className: clsx('flex size-4 shrink-0 items-center justify-center rounded-sm border border-border-strong bg-surface text-accent-text transition-colors', 'data-checked:border-accent data-checked:bg-accent data-indeterminate:border-accent data-indeterminate:bg-accent data-disabled:opacity-50', className), children: _jsx(BaseCheckbox.Indicator, { render: (props, state) => (_jsx("span", { ...props, children: _jsx(Icon, { icon: state.indeterminate ? Minus : Check, size: 12 }) })) }) }));
+}

package/dist/ChoiceCards.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode, type Ref } from 'react';
+import type { LucideIcon } from 'lucide-react';
+export interface Choice<Value extends string | number> {
+    value: Value;
+    title: string;
+    description: string;
+    icon?: LucideIcon;
+    disabled?: boolean;
+}
+export interface ChoiceCardsProps<Value extends string | number> {
+    value: Value;
+    onValueChange(value: Value): void;
+    choices: readonly Choice<Value>[];
+    label: string;
+    orientation?: 'horizontal' | 'vertical';
+    columns?: number;
+    radio?: 'start' | 'end';
+    detail?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function ChoiceCards<Value extends string | number>({ value, onValueChange, choices, label, orientation, columns, radio, detail, disabled, className, ref }: ChoiceCardsProps<Value>): import("react").JSX.Element;

package/dist/ChoiceCards.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useId } from 'react';
+import clsx from 'clsx';
+import { Radio } from '@base-ui-components/react/radio';
+import { RadioGroup } from '@base-ui-components/react/radio-group';
+import { Icon } from './Icon.js';
+function ChoiceCard({ choice, radio }) {
+    const id = useId();
+    // As tall as the title's line, so the dot centers on it.
+    const dot = (_jsx("span", { className: "flex h-(--text-sm--line-height) shrink-0 items-center", "aria-hidden": true, children: _jsx("span", { className: "size-4 rounded-full border border-border-strong group-data-checked:border-5 group-data-checked:border-accent group-data-checked:bg-accent-text" }) }));
+    return (_jsxs(Radio.Root, { value: choice.value, disabled: choice.disabled, "aria-labelledby": `${id}-title`, "aria-describedby": `${id}-description`, className: "group focus-ring flex min-w-0 items-start gap-3 rounded-xl border border-border bg-surface p-3 text-left hover:bg-surface-hover data-checked:border-accent data-disabled:opacity-50 data-disabled:hover:bg-surface", children: [radio === 'start' && dot, choice.icon && (_jsx("span", { className: "grid size-8 shrink-0 place-items-center rounded-lg bg-surface-sunken text-text-muted group-data-checked:text-accent", children: _jsx(Icon, { icon: choice.icon, size: 16 }) })), _jsxs("span", { className: "flex min-w-0 grow flex-col gap-0.5", children: [_jsx("span", { id: `${id}-title`, className: "text-sm font-medium text-text", children: choice.title }), _jsx("span", { id: `${id}-description`, className: "text-xs text-pretty text-text-muted", children: choice.description })] }), radio === 'end' && dot] }));
+}
+/*
+ * One of a few options, each a card that says what it means, for a choice that deserves more than a
+ * select: the cards stand side by side at the same width, one under the other or in a set number of
+ * columns, and the arrow keys move between them.
+ */
+export function ChoiceCards({ value, onValueChange, choices, label, orientation = 'horizontal', columns, radio = 'end', detail, disabled, className, ref }) {
+    const vertical = columns === undefined && orientation === 'vertical';
+    return (_jsx(RadioGroup, { ref: ref, value: value, onValueChange: (next) => onValueChange(next), disabled: disabled, "aria-label": label, className: clsx('grid gap-2', columns !== undefined || vertical ? 'grid-flow-row' : 'auto-cols-fr grid-flow-col', className), style: columns !== undefined ? { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` } : undefined, children: choices.map((choice) => (_jsxs(Fragment, { children: [_jsx(ChoiceCard, { choice: choice, radio: radio }), vertical && choice.value === value && detail] }, choice.value))) }));
+}

package/dist/CloseButton.d.ts

@@ -0,0 +1,15 @@
+import type { Ref } from 'react';
+import { type IconButtonSize } from './IconButton.tsx';
+import type { Shortcut } from './shortcut.ts';
+export type CloseButtonProps = {
+    label: string;
+    kbd?: Shortcut | string;
+    size?: IconButtonSize;
+    className?: string;
+    ref?: Ref<HTMLButtonElement>;
+} & ({
+    onClick: () => void;
+} | {
+    dialog: true;
+});
+export declare function CloseButton({ label, kbd, size, className, ref, ...closes }: CloseButtonProps): import("react").JSX.Element;

package/dist/CloseButton.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { X } from 'lucide-react';
+import { Dialog } from '@base-ui-components/react/dialog';
+import { IconButton } from './IconButton.js';
+/* The close button in the header of every panel and dialog. In a dialog it is that dialog's own close part. */
+export function CloseButton({ label, kbd, size, className, ref, ...closes }) {
+    if ('dialog' in closes) {
+        return _jsx(IconButton, { ref: ref, icon: X, label: label, kbd: kbd, size: size, className: className, render: _jsx(Dialog.Close, {}) });
+    }
+    return _jsx(IconButton, { ref: ref, icon: X, label: label, kbd: kbd, size: size, className: className, onClick: closes.onClick });
+}

package/dist/ColorSwatch.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentProps } from 'react';
+import { useRender } from '@base-ui-components/react/use-render';
+declare const PICKED_RING: {
+    readonly surface: 'ring-2 ring-accent ring-offset-2 ring-offset-surface';
+    readonly popup: 'ring-2 ring-accent ring-offset-1 ring-offset-surface-raised';
+};
+export interface ColorSwatchProps extends ComponentProps<'button'> {
+    color?: string;
+    picked?: boolean;
+    on?: keyof typeof PICKED_RING;
+    render?: useRender.RenderProp;
+}
+export declare function ColorSwatch({ color, picked, on, render, className, style, ref, children, ...props }: ColorSwatchProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export {};

package/dist/ColorSwatch.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { Check } from 'lucide-react';
+import { useRender } from '@base-ui-components/react/use-render';
+import { Icon } from './Icon.js';
+/* `focus-ring` for the swatch that is a menu item rather than a button, which the keyboard reaches all the same. */
+const SWATCH = 'focus-ring grid h-6 w-6 place-items-center rounded-full text-accent-text';
+/* The ring of the picked color is offset against whatever the swatch stands on. */
+const PICKED_RING = {
+    surface: 'ring-2 ring-accent ring-offset-2 ring-offset-surface',
+    popup: 'ring-2 ring-accent ring-offset-1 ring-offset-surface-raised'
+};
+/*
+ * One color, drawn as the color itself. Its name belongs in a tooltip, so the circle carries a tick
+ * alone when it is picked. Children replace the tick, such as the ellipsis of a "more colors" swatch.
+ */
+export function ColorSwatch({ color, picked = false, on = 'surface', render, className, style, ref, children, ...props }) {
+    return useRender({
+        render: render ?? _jsx("button", { type: "button" }),
+        ref,
+        props: {
+            ...props,
+            className: clsx(SWATCH, color === undefined ? 'border border-border-strong text-text-muted' : picked && PICKED_RING[on], className),
+            style: color === undefined ? style : { ...style, background: color },
+            children: children ?? (picked && _jsx(Icon, { icon: Check, size: 12 }))
+        }
+    });
+}

package/dist/ColumnResizeHandle.d.ts

@@ -0,0 +1,9 @@
+import type { PointerEvent as ReactPointerEvent, Ref } from 'react';
+import type { ColumnEdge } from './useColumnResize.ts';
+export interface ColumnResizeHandleProps {
+    from: ColumnEdge;
+    onPointerDown(event: ReactPointerEvent<HTMLElement>): void;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function ColumnResizeHandle({ from, onPointerDown, className, ref }: ColumnResizeHandleProps): import("react").JSX.Element;

package/dist/ColumnResizeHandle.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+const PLACEMENT = {
+    left: 'inset-y-0 right-0 w-2 cursor-col-resize',
+    right: 'inset-y-0 left-0 w-2 cursor-col-resize',
+    top: 'inset-x-0 bottom-0 h-2 cursor-row-resize',
+    bottom: 'inset-x-0 top-0 h-2 cursor-row-resize'
+};
+/* An invisible strip over the free edge of a column, so the column needs `relative` and draws its own border. */
+export function ColumnResizeHandle({ from, onPointerDown, className, ref }) {
+    return _jsx("div", { ref: ref, className: clsx('absolute z-10', PLACEMENT[from], className), onPointerDown: onPointerDown });
+}

package/dist/DisabledReason.d.ts

@@ -0,0 +1,6 @@
+import type { ReactElement } from 'react';
+export interface DisabledReasonProps {
+    reason: string | null;
+    children: ReactElement<Record<string, unknown>>;
+}
+export declare function DisabledReason({ reason, children }: DisabledReasonProps): import("react").JSX.Element;

package/dist/DisabledReason.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip } from './Tooltip.js';
+export function DisabledReason({ reason, children }) {
+    if (reason === null) {
+        return children;
+    }
+    return (_jsx(Tooltip, { label: reason, side: "right", children: children }));
+}

package/dist/DockShell.d.ts

@@ -0,0 +1,9 @@
+import { type HTMLAttributes, type ReactNode, type Ref } from 'react';
+export interface DockShellProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    autoHide?: boolean;
+    barClassName?: string;
+    onHiddenChange?: (hidden: boolean) => void;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function DockShell({ children, autoHide, className, barClassName, onHiddenChange, ref, ...rest }: DockShellProps): import("react").JSX.Element;

package/dist/DockShell.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import clsx from 'clsx';
+import { Surface } from './Surface.js';
+/* How close to the bottom of the window the pointer has to come before a hidden dock slides back. */
+const REVEAL_ZONE = 120;
+/*
+ * The floating bar at the bottom of a canvas-like view, and the one place that knows how to get out
+ * of the way. With `autoHide` it waits below the edge until the pointer comes down to it, an open
+ * menu keeps it up (it would take its own popup with it), and a keyboard reaches it by tabbing. The
+ * buttons stay in the tab order while it is out of sight, so focus brings it back. Something that
+ * moves with the dock marks itself `data-holds-dock`, so reaching for it does not hide the dock.
+ */
+export function DockShell({ children, autoHide = false, className, barClassName, onHiddenChange, ref, ...rest }) {
+    const barRef = useRef(null);
+    const [revealed, setRevealed] = useState(false);
+    useEffect(() => {
+        if (!autoHide) {
+            return;
+        }
+        let pointerNear = false;
+        const evaluate = () => {
+            const bar = barRef.current;
+            const holds = bar !== null && (bar.querySelector('[data-popup-open]') !== null || bar.querySelector(':focus-visible') !== null);
+            setRevealed(pointerNear || holds);
+        };
+        const onMove = (event) => {
+            /* Something that moves with the dock would slide away under the pointer reaching for it,
+               so over one the dock stays as it is. */
+            if (event.target instanceof Element && event.target.closest('[data-holds-dock]') !== null) {
+                return;
+            }
+            pointerNear = window.innerHeight - event.clientY <= REVEAL_ZONE;
+            evaluate();
+        };
+        window.addEventListener('pointermove', onMove);
+        window.addEventListener('focusin', evaluate);
+        return () => {
+            window.removeEventListener('pointermove', onMove);
+            window.removeEventListener('focusin', evaluate);
+            setRevealed(false);
+        };
+    }, [autoHide]);
+    const hidden = autoHide && !revealed;
+    useEffect(() => {
+        onHiddenChange?.(hidden);
+    }, [hidden, onHiddenChange]);
+    return (_jsx("div", { ref: ref, ...rest, className: clsx('pointer-events-none absolute inset-x-0 bottom-4 flex justify-center', className), children: _jsx(Surface, { ref: barRef, className: clsx('flex items-center gap-2 rounded-xl p-1 transition-[opacity,translate] duration-200', barClassName, hidden ? 'pointer-events-none translate-y-6 opacity-0' : 'pointer-events-auto'), children: children }) }));
+}

package/dist/EmptyState.d.ts

@@ -0,0 +1,16 @@
+import { type ReactElement, type ReactNode, type Ref } from 'react';
+import type { LucideIcon } from 'lucide-react';
+export interface EmptyStateProps {
+    icon?: LucideIcon | ReactElement<{
+        size?: number;
+    }>;
+    busy?: boolean;
+    /** @deprecated Turns a Lucide icon; use `busy`, which draws a `Spinner` in its place. */
+    spin?: boolean;
+    title?: ReactNode;
+    children: ReactNode;
+    action?: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function EmptyState({ icon, busy, spin, title, children, action, className, ref }: EmptyStateProps): import("react").JSX.Element;

package/dist/EmptyState.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, isValidElement } from 'react';
+import clsx from 'clsx';
+import { Icon } from './Icon.js';
+import { Spinner } from './Spinner.js';
+// One size in a panel, a card and a dialog alike, so no caller picks its own.
+const ICON_SIZE = 20;
+/* What a list, a canvas or a thread shows before it holds anything. */
+export function EmptyState({ icon, busy = false, spin = false, title, children, action, className, ref }) {
+    return (_jsxs("div", { ref: ref, className: clsx('flex flex-col items-center justify-center gap-2 px-6 py-8 text-center', className), children: [(busy || icon) && (_jsx("span", { className: "text-text-faint", children: busy ? (_jsx(Spinner, { size: ICON_SIZE })) : isValidElement(icon) ? (cloneElement(icon, { size: ICON_SIZE })) : (icon && _jsx(Icon, { icon: icon, size: ICON_SIZE, className: spin ? 'animate-spin' : undefined })) })), title && _jsx("p", { className: "text-sm font-medium text-text", children: title }), _jsx("p", { className: "max-w-[280px] text-xs leading-snug text-text-muted", children: children }), action && _jsx("div", { className: "mt-2", children: action })] }));
+}

package/dist/ErrorBoundary.d.ts

@@ -0,0 +1,24 @@
+import { Component, type ErrorInfo, type ReactNode } from 'react';
+import { type ResetKeys } from './error-boundary.ts';
+export interface ErrorBoundaryProps {
+    label: string;
+    resetKeys?: ResetKeys;
+    compact?: boolean;
+    reload?: boolean;
+    className?: string;
+    children: ReactNode;
+}
+interface ErrorBoundaryState {
+    error: unknown;
+    failed: boolean;
+    componentStack: string | null;
+}
+export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    state: ErrorBoundaryState;
+    static getDerivedStateFromError(error: unknown): Partial<ErrorBoundaryState>;
+    componentDidCatch(error: unknown, info: ErrorInfo): void;
+    componentDidUpdate(previous: ErrorBoundaryProps): void;
+    reset(): void;
+    render(): ReactNode;
+}
+export {};

package/dist/ErrorBoundary.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Component } from 'react';
+import clsx from 'clsx';
+import { Copy, RotateCw, TriangleAlert } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Button } from './Button.js';
+import { ButtonGroup } from './ButtonGroup.js';
+import { copyText } from './clipboard.js';
+import { errorMessageOf, errorReport, shouldReset } from './error-boundary.js';
+import { Icon } from './Icon.js';
+import { IconButton } from './IconButton.js';
+const CLEAR = { error: null, failed: false, componentStack: null };
+/* A function component, so the words come from the i18next instance the app renders with. */
+function ErrorFallback({ label, error, componentStack, compact, reload, className, onRetry }) {
+    const { t } = useTranslation('ui');
+    return (_jsx("div", { role: "alert", className: clsx('grid place-items-center overflow-auto bg-surface', compact ? 'p-3' : 'p-6', className), children: _jsxs("div", { className: clsx('flex max-w-[360px] flex-col items-center text-center', compact ? 'gap-1' : 'gap-2'), children: [!compact && _jsx(Icon, { icon: TriangleAlert, size: 20, className: "text-status-error" }), _jsx("p", { className: "text-sm font-medium text-text", children: label }), _jsx("p", { className: "line-clamp-4 text-xs break-words text-text-muted", children: errorMessageOf(error) }), _jsxs("div", { className: clsx('flex items-center gap-2', compact ? 'mt-1' : 'mt-2'), children: [_jsx(Button, { variant: "secondary", size: "sm", onClick: onRetry, children: t('action.retry') }), reload && (_jsxs(Button, { variant: "secondary", size: "sm", onClick: () => window.location.reload(), children: [_jsx(Icon, { icon: RotateCw, size: 14 }), t('action.reload')] })), _jsx(ButtonGroup, { children: _jsx(IconButton, { icon: Copy, size: "sm", label: t('action.copyError'), onClick: () => copyText(errorReport(label, error, componentStack)) }) })] })] }) }));
+}
+/*
+ * Keeps a render failure to the subtree it happened in. Without one React unmounts the whole tree,
+ * and whatever lives in it (an embedded page, a running terminal) goes down with it. Key it so it
+ * resets only while it holds an error: `resetKeys` for what the children draw from.
+ */
+export class ErrorBoundary extends Component {
+    state = CLEAR;
+    static getDerivedStateFromError(error) {
+        return { error, failed: true };
+    }
+    componentDidCatch(error, info) {
+        console.error(`${this.props.label}:`, error, info.componentStack);
+        this.setState({ componentStack: info.componentStack ?? null });
+    }
+    componentDidUpdate(previous) {
+        if (shouldReset(this.state.failed, previous.resetKeys ?? [], this.props.resetKeys ?? [])) {
+            this.reset();
+        }
+    }
+    reset() {
+        this.setState(CLEAR);
+    }
+    render() {
+        if (!this.state.failed) {
+            return this.props.children;
+        }
+        const { label, compact = false, reload = false, className = 'absolute inset-0' } = this.props;
+        return (_jsx(ErrorFallback, { label: label, error: this.state.error, componentStack: this.state.componentStack, compact: compact, reload: reload, className: className, onRetry: () => this.reset() }));
+    }
+}

package/dist/Field.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode, type Ref } from 'react';
+import { useRender } from '@base-ui-components/react/use-render';
+export type FieldHintProps = useRender.ComponentProps<'p'>;
+export declare function FieldHint({ render, className, ref, ...props }: FieldHintProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type FormErrorProps = useRender.ComponentProps<'p'>;
+export declare function FormError({ render, className, ref, ...props }: FormErrorProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export interface FieldProps {
+    label?: ReactNode;
+    hint?: ReactNode;
+    error?: ReactNode;
+    group?: boolean;
+    orientation?: 'vertical' | 'horizontal';
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+    children: ReactNode;
+}
+export declare function Field({ label, hint, error, group, orientation, className, ref, children }: FieldProps): import("react").JSX.Element;