@adecore/ui 0.14.0

package/dist/Field.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import clsx from 'clsx';
+import { useRender } from '@base-ui-components/react/use-render';
+import { FieldContext } from './field-context.js';
+import { SectionLabel } from './SectionLabel.js';
+const HINT = 'text-xs text-text-muted';
+const ERROR = 'text-xs text-status-error';
+// Beside the control the label reads at the size of what is typed, on the middle of the control's first line however tall it grows.
+const LABEL_BESIDE = 'flex h-8 items-center self-start text-sm text-text-muted';
+/* The line under a field that says what goes in it. */
+export function FieldHint({ render, className, ref, ...props }) {
+    return useRender({
+        render,
+        ref,
+        defaultTagName: 'p',
+        props: { ...props, className: clsx('mt-1', HINT, className) }
+    });
+}
+/* What went wrong in a dialog or a form. An alert, so a screen reader hears it arrive. */
+export function FormError({ render, className, ref, ...props }) {
+    return useRender({
+        render,
+        ref,
+        defaultTagName: 'p',
+        props: { role: 'alert', ...props, className: clsx(ERROR, className) }
+    });
+}
+/* A group's label names it through `aria-labelledby`; a control's points at the control. */
+function FieldLabel({ id, group, horizontal, children }) {
+    if (horizontal) {
+        return group ? (_jsx("span", { id: `${id}-label`, className: LABEL_BESIDE, children: children })) : (_jsx("label", { htmlFor: `${id}-control`, className: LABEL_BESIDE, children: children }));
+    }
+    return group ? (_jsx(SectionLabel, { id: `${id}-label`, children: children })) : (_jsx(SectionLabel, { render: _jsx("label", { htmlFor: `${id}-control` }), children: children }));
+}
+/*
+ * A labelled control, or a labelled group, with an optional hint and error under it, stacked 6px apart.
+ * Beside each other the label column is 112px, so the controls of every field in a form line up.
+ */
+export function Field({ label, hint, error, group = false, orientation = 'vertical', className, ref, children }) {
+    const horizontal = orientation === 'horizontal';
+    const id = useId();
+    const hasLabel = label !== undefined;
+    const hasHint = hint !== undefined && hint !== null && hint !== '';
+    const hasError = error !== undefined && error !== null && error !== '';
+    const describedBy = [hasHint ? `${id}-hint` : null, hasError ? `${id}-error` : null].filter((part) => part !== null).join(' ') || undefined;
+    return (_jsxs("div", { ref: ref, role: group ? 'group' : undefined, "aria-labelledby": group && hasLabel ? `${id}-label` : undefined, "aria-describedby": group ? describedBy : undefined, className: clsx(horizontal ? 'grid grid-cols-[112px_minmax(0,1fr)] gap-x-3 gap-y-1.5' : 'flex flex-col gap-1.5', className), children: [hasLabel && (_jsx(FieldLabel, { id: id, group: group, horizontal: horizontal, children: label })), _jsx(FieldContext, { value: group ? null : { id: `${id}-control`, describedBy, invalid: hasError }, children: horizontal ? _jsx("div", { className: "col-start-2 min-w-0", children: children }) : children }), hasHint && (_jsx("p", { id: `${id}-hint`, className: clsx(HINT, horizontal && 'col-start-2'), children: hint })), hasError && (_jsx("p", { id: `${id}-error`, role: "alert", className: clsx(ERROR, 'break-words', horizontal && 'col-start-2'), children: error }))] }));
+}

package/dist/FileIcon.d.ts

@@ -0,0 +1,8 @@
+import { type Ref } from 'react';
+export interface FileIconProps {
+    path: string;
+    size?: number;
+    className?: string;
+    ref?: Ref<SVGSVGElement>;
+}
+export declare function FileIcon({ path, size, className, ref }: FileIconProps): import("react").JSX.Element;

package/dist/FileIcon.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useInsertionEffect } from 'react';
+import clsx from 'clsx';
+import { fileIconFor, mountFileIconSprite } from './file-icon.js';
+/*
+ * The icon a file gets in a file tree, drawn anywhere else the same file's name shows up. It is the
+ * one place the library steps outside Lucide. The glyphs are Seti's, and so are their colors, because
+ * a TypeScript blue or a Vue green is the mark of the file type, not a theme choice. Decorative like
+ * every other icon here, so the name beside it does the reading.
+ */
+export function FileIcon({ path, size = 16, className, ref }) {
+    // Before the browser paints, so a `<use>` never points at a symbol that is not in the document yet.
+    useInsertionEffect(mountFileIconSprite, []);
+    return (_jsx("svg", { ref: ref, className: clsx('file-icon', className), width: size, height: size, viewBox: "0 0 16 16", "aria-hidden": true, children: _jsx("use", { href: `#${fileIconFor(path)}` }) }));
+}

package/dist/Icon.d.ts

@@ -0,0 +1,9 @@
+import type { Ref } from 'react';
+import type { LucideIcon } from 'lucide-react';
+export interface IconProps {
+    icon: LucideIcon;
+    size?: number;
+    className?: string;
+    ref?: Ref<SVGSVGElement>;
+}
+export declare function Icon({ icon: Glyph, size, className, ref }: IconProps): import("react").JSX.Element;

package/dist/Icon.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+// The whole client draws at this weight. 2 is Lucide's default, but at 12 and 14 pixels next to
+// text of the same size a hair thinner keeps the glyph from outweighing the words beside it.
+const STROKE_WIDTH = 1.75;
+/* One Lucide icon, sized in pixels. Icons here are decorative. The name a screen reader reads
+   sits on the button or the label next to it, so the glyph stays hidden. */
+export function Icon({ icon: Glyph, size = 16, className, ref }) {
+    // An inline svg sits on the text baseline, which drops a square glyph below the words next to
+    // it; the middle of the box against the middle of the text is what reads as aligned.
+    return _jsx(Glyph, { ref: ref, size: size, strokeWidth: STROKE_WIDTH, className: clsx('align-middle', className), "aria-hidden": true });
+}

package/dist/IconButton.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentProps, ReactNode } from 'react';
+import type { LucideIcon } from 'lucide-react';
+import { useRender } from '@base-ui-components/react/use-render';
+import type { Shortcut } from './shortcut.ts';
+import { type TooltipSide } from './Tooltip.tsx';
+import { type IconButtonSize } from './icon-button-size.ts';
+export type { IconButtonSize };
+export interface IconButtonProps extends Omit<ComponentProps<'button'>, 'children'> {
+    icon?: LucideIcon;
+    label: string;
+    tooltip?: ReactNode | false;
+    kbd?: Shortcut | string;
+    tooltipSide?: TooltipSide;
+    size?: IconButtonSize;
+    active?: boolean;
+    busy?: boolean;
+    /** @deprecated Turns the icon; use `busy`, which draws a `Spinner` in its place. */
+    spin?: boolean;
+    iconClassName?: string;
+    children?: ReactNode;
+    render?: useRender.RenderProp;
+}
+export declare function IconButton({ icon, label, tooltip, kbd, tooltipSide, size, active, busy, spin, iconClassName, render, className, ref, children, ...props }: IconButtonProps): import("react").JSX.Element;

package/dist/IconButton.js

@@ -0,0 +1,25 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useRender } from '@base-ui-components/react/use-render';
+import { Icon } from './Icon.js';
+import { Spinner } from './Spinner.js';
+import { Tooltip } from './Tooltip.js';
+import { ICON_BUTTON_CLASS, ICON_BUTTON_ICON_SIZE } from './icon-button-size.js';
+/* Every button that is an icon and no word. A square, and the one place the icon inside it is sized. */
+export function IconButton({ icon, label, tooltip, kbd, tooltipSide, size = 'md', active = false, busy = false, spin = false, iconClassName, render, className, ref, children, ...props }) {
+    const button = useRender({
+        render: render ?? _jsx("button", { type: "button" }),
+        ref,
+        props: {
+            'aria-label': label,
+            'data-active': active ? 'true' : undefined,
+            ...props,
+            className: clsx('icon-btn', ICON_BUTTON_CLASS[size], className),
+            children: (_jsxs(_Fragment, { children: [busy ? (_jsx(Spinner, { size: ICON_BUTTON_ICON_SIZE[size], className: iconClassName })) : (icon !== undefined && _jsx(Icon, { icon: icon, size: ICON_BUTTON_ICON_SIZE[size], className: clsx(spin && 'animate-spin', iconClassName) })), children] }))
+        }
+    });
+    if (tooltip === false) {
+        return button;
+    }
+    return (_jsx(Tooltip, { label: tooltip ?? label, kbd: kbd, side: tooltipSide, children: button }));
+}

package/dist/IconPicker.d.ts

@@ -0,0 +1,17 @@
+import { type Ref } from 'react';
+import { type IconPickerIcons } from './icon-picker.ts';
+export type { IconPickerGroup } from './icon-picker.ts';
+export interface IconPickerProps {
+    icons: IconPickerIcons;
+    value: string | null;
+    onValueChange(name: string): void;
+    keywords?: Readonly<Record<string, readonly string[]>>;
+    searchable?: boolean;
+    rows?: number;
+    disabled?: boolean;
+    onClear?: () => void;
+    label?: string;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function IconPicker({ icons, value, onValueChange, keywords, searchable, rows, disabled, onClear, label, className, ref }: IconPickerProps): import("react").JSX.Element;

package/dist/IconPicker.js

@@ -0,0 +1,93 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import clsx from 'clsx';
+import { Ban, Search, X } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { EmptyState } from './EmptyState.js';
+import { formatNumber } from './format/number.js';
+import { Icon } from './Icon.js';
+import { IconButton } from './IconButton.js';
+import { cellForKey, escapeClearsSearch, filterSections, isGrouped, sectionsOf, tabStopOf } from './icon-picker.js';
+import { SectionLabel } from './SectionLabel.js';
+import { Tooltip } from './Tooltip.js';
+/* A row of cells is 28 high with a gap of 4. Under a heading of 28 the last row keeps 8 below it; without headings the grid has 6 above as well. */
+const ROW_HEIGHT = 32;
+const HEADED_EXTRA = 32;
+const BARE_EXTRA = 10;
+/* A heading is stuck while its group runs past the top of the scroll area, and only then draws a line under it. */
+const markStuckHeadings = (area) => {
+    const top = area.scrollTop;
+    for (const heading of area.querySelectorAll('[data-icon-heading]')) {
+        const group = heading.parentElement;
+        const stuck = group !== null && top > 0 && group.offsetTop <= top && group.offsetTop + group.offsetHeight > top;
+        heading.toggleAttribute('data-stuck', stuck);
+    }
+};
+/*
+ * The mark a thing wears, one of a set of Lucide icons, as a grid under a label. With a search or a
+ * height in rows, the search and the grid share one frame. The grid is one tab stop: arrows move the
+ * focus and only Enter, Space or a click chooses, since a caller may save every choice at once.
+ */
+export function IconPicker({ icons, value, onValueChange, keywords, searchable = isGrouped(icons), rows, disabled = false, onClear, label, className, ref }) {
+    const { t } = useTranslation('ui');
+    const id = useId();
+    const area = useRef(null);
+    const input = useRef(null);
+    const [query, setQuery] = useState('');
+    const [focused, setFocused] = useState(null);
+    const headed = isGrouped(icons);
+    const framed = searchable || rows !== undefined;
+    const sections = useMemo(() => sectionsOf(icons), [icons]);
+    const shown = useMemo(() => filterSections(sections, query, keywords), [sections, query, keywords]);
+    const tabStop = tabStopOf(shown.flatMap((section) => section.icons.map(([name]) => name)), focused, value);
+    const name = label ?? t('iconPicker.label');
+    // Opens with the chosen icon in the middle of the area: a person changing an icon often starts from the current one.
+    useLayoutEffect(() => {
+        const element = area.current;
+        const chosen = element?.querySelector('[aria-checked="true"]');
+        if (!element || !chosen || element.scrollHeight <= element.clientHeight) {
+            return;
+        }
+        const heading = element.querySelector('[data-icon-heading]')?.offsetHeight ?? 0;
+        element.scrollTop = Math.round(chosen.offsetTop - heading - (element.clientHeight - heading - chosen.offsetHeight) / 2);
+    }, []);
+    const search = (next) => {
+        setQuery(next);
+        if (area.current) {
+            area.current.scrollTop = 0;
+        }
+    };
+    const moveFocus = (event) => {
+        if (event.metaKey || event.ctrlKey || event.altKey) {
+            return;
+        }
+        const cells = [...event.currentTarget.querySelectorAll('[role="radio"]')];
+        const from = cells.indexOf(event.target);
+        if (from === -1) {
+            return;
+        }
+        const to = cellForKey(event.key, cells.map((cell) => cell.getBoundingClientRect()), from);
+        if (to === null) {
+            return;
+        }
+        event.preventDefault();
+        cells[to]?.focus();
+    };
+    const grid = (_jsx("div", { ref: area, id: `${id}-grid`, role: "radiogroup", "aria-label": name, className: clsx(framed && 'relative overflow-y-auto overscroll-contain', framed && (headed ? 'scroll-pt-7' : 'px-1.5 pt-1.5 pb-2')), style: rows === undefined ? undefined : { height: rows * ROW_HEIGHT + (headed ? HEADED_EXTRA : BARE_EXTRA) }, onScroll: (event) => markStuckHeadings(event.currentTarget), onKeyDown: moveFocus, children: shown.length === 0 && query.trim() !== '' ? (_jsx(EmptyState, { className: "h-full", children: t('iconPicker.noMatch', { query: query.trim() }) })) : (shown.map((section, index) => {
+            const cells = (_jsx("div", { className: clsx('grid grid-cols-[repeat(auto-fill,minmax(28px,1fr))] gap-1', framed && section.label !== null && 'px-1.5 pb-2'), children: section.icons.map(([icon, glyph]) => (_jsx(Tooltip, { label: icon, name: true, children: _jsx("button", { type: "button", role: "radio", "aria-checked": value === icon, tabIndex: icon === tabStop ? 0 : -1, disabled: disabled, className: clsx('flex h-7 items-center justify-center rounded-md hover:bg-surface-hover disabled:opacity-50', value === icon ? 'bg-surface-active text-text' : 'text-text-muted'), onFocus: () => setFocused(icon), onClick: () => onValueChange(icon), children: _jsx(Icon, { icon: glyph, size: 16 }) }) }, icon))) }, section.id));
+            if (section.label === null) {
+                return cells;
+            }
+            const headingId = `${id}-group-${index}`;
+            return (_jsxs("div", { role: "group", "aria-labelledby": headingId, children: [_jsxs(SectionLabel, { render: _jsx("div", {}), "data-icon-heading": "", className: clsx('flex h-7 items-center gap-2', framed ? 'sticky top-0 z-10 bg-surface px-2.5 data-stuck:shadow-[0_1px_0_var(--border)]' : 'mt-1'), children: [_jsx("span", { id: headingId, className: "truncate", children: section.label }), _jsx("span", { className: "ms-auto shrink-0", children: formatNumber(section.icons.length) })] }), cells] }, section.id));
+        })) }));
+    return (_jsxs("div", { ref: ref, className: className, children: [_jsxs(SectionLabel, { render: _jsx("div", {}), className: "mb-1.5 flex items-center gap-2", children: [name, onClear && (_jsxs(_Fragment, { children: [_jsx("span", { className: "grow" }), _jsx(IconButton, { icon: Ban, size: "sm", label: t('iconPicker.none'), className: "-my-1", disabled: disabled || value === null, onClick: onClear })] }))] }), framed ? (_jsxs("div", { className: "field h-auto overflow-hidden p-0 has-[input:focus-visible]:outline-2 has-[input:focus-visible]:-outline-offset-1 has-[input:focus-visible]:outline-accent", children: [searchable && (_jsxs("div", { className: "flex h-8 items-center gap-2 border-b border-border pr-1 pl-2.5", children: [_jsx(Icon, { icon: Search, size: 14, className: "shrink-0 text-text-faint" }), _jsx("input", { ref: input, type: "text", value: query, placeholder: t('iconPicker.search'), "aria-label": t('iconPicker.search'), "aria-controls": `${id}-grid`, spellCheck: false, autoComplete: "off", disabled: disabled, className: "h-full min-w-0 flex-1 bg-transparent outline-none placeholder:text-text-faint", onChange: (event) => search(event.target.value), onKeyDown: (event) => {
+                                    if (escapeClearsSearch(event.key, query)) {
+                                        event.stopPropagation();
+                                        search('');
+                                    }
+                                } }), query && (_jsx(IconButton, { icon: X, size: "sm", label: t('iconPicker.clear'), tooltip: false, onClick: () => {
+                                    search('');
+                                    input.current?.focus();
+                                } }))] })), grid] })) : (grid)] }));
+}

package/dist/Input.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentProps } from 'react';
+import type { LucideIcon } from 'lucide-react';
+export interface InputProps extends Omit<ComponentProps<'input'>, 'size'> {
+    size?: 'md' | 'sm';
+    mono?: boolean;
+    icon?: LucideIcon;
+}
+export declare function Input({ size, mono, icon, className, id, ...props }: InputProps): import("react").JSX.Element;
+export interface TextAreaProps extends ComponentProps<'textarea'> {
+    size?: 'md' | 'sm';
+    resize?: 'none' | 'vertical';
+    mono?: boolean;
+}
+export declare function TextArea({ size, resize, mono, className, id, ...props }: TextAreaProps): import("react").JSX.Element;

package/dist/Input.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useFieldControl } from './field-context.js';
+import { Icon } from './Icon.js';
+/* The one text input: one border and one focus ring at the one height or the compact one. */
+export function Input({ size = 'md', mono = false, icon, className, id, ...props }) {
+    const field = useFieldControl();
+    const small = size === 'sm';
+    const control = {
+        id: id ?? field?.id,
+        'aria-describedby': field?.describedBy,
+        'aria-invalid': field?.invalid || undefined,
+        ...props
+    };
+    if (icon === undefined) {
+        return _jsx("input", { ...control, className: clsx('field', small && 'field-sm', mono && 'font-mono text-code', className) });
+    }
+    // The input fills the whole box and the icon lets clicks through, so a click on the icon still lands in the input.
+    return (_jsxs("span", { className: clsx('field relative flex p-0', small && 'field-sm', className), children: [_jsx(Icon, { icon: icon, size: small ? 12 : 14, className: clsx('pointer-events-none absolute top-1/2 -translate-y-1/2 text-text-faint', small ? 'left-2' : 'left-2.5') }), _jsx("input", { ...control, className: clsx('min-w-0 flex-1 bg-transparent outline-none placeholder:text-text-faint', small ? 'pr-2 pl-7' : 'pr-2.5 pl-8', mono && 'font-mono text-code') })] }));
+}
+/* A field of a few lines: a commit message, the body of a pull request, a note. At least 64px tall; `rows` makes it taller. */
+export function TextArea({ size = 'md', resize = 'none', mono = false, className, id, ...props }) {
+    const field = useFieldControl();
+    return (_jsx("textarea", { id: id ?? field?.id, "aria-describedby": field?.describedBy, "aria-invalid": field?.invalid || undefined, ...props, className: clsx('field h-auto min-h-16 py-1.5', size === 'sm' && 'field-sm', resize === 'vertical' ? 'resize-y' : 'resize-none', mono && 'font-mono text-code', className) }));
+}

package/dist/Kbd.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode, Ref } from 'react';
+import { type Shortcut } from './shortcut.ts';
+export interface KbdProps {
+    shortcut?: Shortcut;
+    children?: ReactNode;
+    variant?: 'menu' | 'inline';
+    className?: string;
+    ref?: Ref<HTMLElement>;
+}
+export declare function Kbd({ shortcut, children, variant, className, ref }: KbdProps): import("react").JSX.Element;
+export interface KeyCapProps {
+    children: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLElement>;
+}
+export declare function KeyCap({ children, className, ref }: KeyCapProps): import("react").JSX.Element;
+export interface KeysProps {
+    shortcut: Shortcut;
+    then?: string;
+    className?: string;
+    ref?: Ref<HTMLSpanElement>;
+}
+export declare function Keys({ shortcut, then, className, ref }: KeysProps): import("react").JSX.Element;

package/dist/Kbd.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { isApplePlatform } from './platform.js';
+import { formatShortcut, shortcutParts } from './shortcut.js';
+/* A shortcut chip on the surface it sits on: in a tooltip, in a palette's footer, in a line of help. */
+const INLINE_KBD = 'rounded-sm bg-surface-sunken px-[5px] py-px font-sans text-xs/[inherit] text-text-muted';
+/* One key, drawn as a cap. A settings page prints a shortcut key by key, so a gesture can stand beside it. */
+const KEY_CAP = 'inline-grid h-6 min-w-6 place-items-center rounded-md border border-b-2 border-border-strong bg-surface-hover bg-clip-padding px-1.5 font-sans text-xs text-text';
+/* A shortcut as this platform prints it: `⌘K` on macOS, `Ctrl+K` elsewhere. */
+export function Kbd({ shortcut, children, variant = 'menu', className, ref }) {
+    return (_jsx("kbd", { ref: ref, className: clsx(variant === 'inline' && INLINE_KBD, className), children: shortcut !== undefined ? formatShortcut(shortcut, isApplePlatform()) : children }));
+}
+export function KeyCap({ children, className, ref }) {
+    return (_jsx("kbd", { ref: ref, className: clsx(KEY_CAP, className), children: children }));
+}
+/* A shortcut as one cap per key, `⌘` and `K`, plus the pointer gesture it goes with. */
+export function Keys({ shortcut, then, className, ref }) {
+    const parts = [...shortcutParts(shortcut, isApplePlatform()), ...(then ? [then] : [])];
+    return (_jsx("span", { ref: ref, className: clsx('flex items-center gap-1', className), children: parts.map((part, index) => (_jsx(KeyCap, { children: part }, `${part}-${index}`))) }));
+}

package/dist/ListRow.d.ts

@@ -0,0 +1,10 @@
+import { useRender } from '@base-ui-components/react/use-render';
+declare const VARIANT: {
+    readonly flat: 'flex h-7 items-center';
+    readonly inset: 'flex h-8 items-center rounded-md px-2';
+};
+export type ListRowProps = useRender.ComponentProps<'div'> & {
+    variant: keyof typeof VARIANT;
+};
+export declare function ListRow({ variant, render, className, ref, ...props }: ListRowProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export {};

package/dist/ListRow.js

@@ -0,0 +1,20 @@
+import clsx from 'clsx';
+import { useRender } from '@base-ui-components/react/use-render';
+const VARIANT = {
+    /* A row of a list that reads as a table and fills the width of its panel: commits, processes,
+       branches. Square, so the rows stack into one block. It carries no padding; the caller pads 12px
+       beside text and 4px beside a button. */
+    flat: 'flex h-7 items-center',
+    /* A row of a list a person finds their way through: a sidebar, devices, recent files. Inset from
+       the edge and rounded, so each row reads as a place of its own. */
+    inset: 'flex h-8 items-center rounded-md px-2'
+};
+/* The height and the shape of one row of a list. What it does (a button, a link, a menu trigger) comes from `render`. */
+export function ListRow({ variant, render, className, ref, ...props }) {
+    return useRender({
+        render,
+        ref,
+        defaultTagName: 'div',
+        props: { ...props, className: clsx(VARIANT[variant], className) }
+    });
+}

package/dist/Meter.d.ts

@@ -0,0 +1,12 @@
+import type { Ref } from 'react';
+export interface MeterProps {
+    value: number | null;
+    min?: number;
+    max?: number;
+    marks?: readonly number[];
+    label: string;
+    valueText?: string;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function Meter({ value, min, max, marks, label, valueText, className, ref }: MeterProps): import("react").JSX.Element;

package/dist/Meter.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+/* A level against a scale: how full it is, and where a target or a limit sits on the same scale. */
+export function Meter({ value, min = 0, max = 100, marks = [], label, valueText, className, ref }) {
+    const fractionOf = (level) => (max > min ? Math.min(1, Math.max(0, (level - min) / (max - min))) : 0);
+    return (_jsxs("div", { ref: ref, role: "meter", "aria-label": label, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value === null ? min : Math.min(max, Math.max(min, value)), "aria-valuetext": valueText, className: clsx('relative h-1.5 rounded-full bg-surface-sunken', className), children: [value !== null && _jsx("span", { className: "absolute inset-y-0 left-0 rounded-full bg-accent", style: { width: `${fractionOf(value) * 100}%` } }), marks.map((mark) => (_jsx("span", { className: "absolute -inset-y-0.5 w-px bg-text-muted", style: { left: `${fractionOf(mark) * 100}%` } }, mark)))] }));
+}

package/dist/PanelEmpty.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode, Ref } from 'react';
+import type { LucideIcon } from 'lucide-react';
+export interface PanelEmptyProps {
+    header?: ReactNode;
+    icon?: LucideIcon;
+    busy?: boolean;
+    /** @deprecated Turns the icon; use `busy`, which draws a `Spinner` in its place. */
+    spin?: boolean;
+    action?: ReactNode;
+    sunken?: boolean;
+    fill?: 'grow' | 'full';
+    children: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function PanelEmpty({ header, icon, busy, spin, action, sunken, fill, children, className, ref }: PanelEmptyProps): import("react").JSX.Element;

package/dist/PanelEmpty.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { EmptyState } from './EmptyState.js';
+/* What a panel or a card shows while it holds nothing: a sentence, one icon, at most one button. */
+export function PanelEmpty({ header, icon, busy = false, spin = false, action, sunken = false, fill = 'grow', children, className, ref }) {
+    return (_jsxs("div", { ref: ref, className: clsx('grid min-h-0 place-items-center', fill === 'full' ? 'h-full' : 'grow', sunken && 'bg-surface-sunken', className), children: [header, _jsx(EmptyState, { icon: icon, busy: busy, spin: spin, action: action, children: children })] }));
+}

package/dist/PanelHeader.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+import { useRender } from '@base-ui-components/react/use-render';
+export type PanelHeaderProps = useRender.ComponentProps<'header'> & {
+    title?: ReactNode;
+};
+export declare function PanelHeader({ title, render, className, ref, children, ...props }: PanelHeaderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/PanelHeader.js

@@ -0,0 +1,20 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useRender } from '@base-ui-components/react/use-render';
+import { SectionLabel } from './SectionLabel.js';
+/*
+ * The bar across the top of a side panel, as tall as a 48px toolbar beside it: the panel's name,
+ * its own controls, and a close button last.
+ */
+export function PanelHeader({ title, render, className, ref, children, ...props }) {
+    return useRender({
+        render,
+        ref,
+        defaultTagName: 'header',
+        props: {
+            ...props,
+            className: clsx('flex h-12 shrink-0 items-center gap-2 border-b border-border pr-2 pl-3', className),
+            children: (_jsxs(_Fragment, { children: [title !== undefined && _jsx(SectionLabel, { className: "shrink-0", children: title }), children] }))
+        }
+    });
+}

package/dist/Pill.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode, Ref } from 'react';
+declare const TONES: {
+    muted: string;
+    raised: string;
+    idle: string;
+    needsYou: string;
+    error: string;
+    accent: string;
+};
+declare const SHAPES: {
+    pill: string;
+    tag: string;
+};
+export interface PillProps {
+    icon?: ReactNode;
+    children: ReactNode;
+    tone?: keyof typeof TONES;
+    shape?: keyof typeof SHAPES;
+    mono?: boolean;
+    onClick?: () => void;
+    pressed?: boolean;
+    disabled?: boolean;
+    className?: string;
+    ref?: Ref<HTMLElement>;
+}
+export declare function Pill({ icon, children, tone, shape, mono, onClick, pressed, disabled, className, ref }: PillProps): import("react").JSX.Element;
+export {};

package/dist/Pill.js

@@ -0,0 +1,25 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+/* What the label says about the thing it names, drawn as its ground. */
+const TONES = {
+    muted: 'bg-surface-sunken text-text-muted',
+    /* Lifted off a sunken header, for a label that should stand out as a control. */
+    raised: 'bg-surface-active text-text-muted',
+    idle: 'bg-status-idle/15 text-status-idle',
+    needsYou: 'bg-status-needs-you/15 text-status-needs-you',
+    error: 'bg-status-error/15 text-status-error',
+    accent: 'bg-accent-soft text-accent'
+};
+/* A pill rides in a header or a row; a tag sits at the end of a line of prose, tighter and bolder. */
+const SHAPES = {
+    pill: 'rounded-full px-2 py-0.5',
+    tag: 'rounded-md px-1.5 py-0.5 font-medium'
+};
+/* The small rounded label in a header, a sidebar row or a settings line: a count, a branch, a status. */
+export function Pill({ icon, children, tone = 'muted', shape = 'pill', mono = false, onClick, pressed, disabled, className, ref }) {
+    const shared = clsx('inline-flex shrink-0 items-center gap-1 text-xs', SHAPES[shape], TONES[tone], mono && 'font-mono', className);
+    if (!onClick) {
+        return (_jsxs("span", { ref: ref, className: shared, children: [icon, children] }));
+    }
+    return (_jsxs("button", { ref: ref, type: "button", "aria-pressed": pressed, disabled: disabled, className: clsx(shared, 'enabled:hover:text-text disabled:opacity-50 aria-pressed:bg-surface-active aria-pressed:text-text'), onClick: onClick, children: [icon, children] }));
+}

package/dist/ProjectSwitcher.d.ts

@@ -0,0 +1,30 @@
+import type { ComponentProps, MouseEvent, ReactNode, Ref } from 'react';
+import * as Menu from './menu/index.parts.ts';
+export interface ProjectSwitcherItem {
+    id: string;
+    name: string;
+    icon?: ReactNode;
+    description?: ReactNode;
+    hint?: ReactNode;
+    disabled?: boolean;
+    muted?: boolean;
+    actions?: ReactNode;
+}
+export interface ProjectSwitcherProps<Item extends ProjectSwitcherItem = ProjectSwitcherItem> {
+    current: ProjectSwitcherItem | null;
+    projects: readonly Item[];
+    recentProjects?: readonly Item[];
+    onSelect(project: Item, event: MouseEvent<HTMLElement>): void;
+    leading?: ReactNode;
+    before?: ReactNode;
+    children?: ReactNode;
+    label?: string;
+    disabled?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: ComponentProps<typeof Menu.Root>['onOpenChange'];
+    className?: string;
+    ref?: Ref<HTMLButtonElement>;
+}
+export declare function ProjectSwitcher<Item extends ProjectSwitcherItem>({ current, projects, recentProjects, onSelect, leading, before, children, label, disabled, open, defaultOpen, onOpenChange, className, ref }: ProjectSwitcherProps<Item>): import("react").JSX.Element;
+export declare function ProjectSwitcherGroups<Item extends ProjectSwitcherItem>({ projects, recentProjects, before, children, onSelect }: Pick<ProjectSwitcherProps<Item>, 'projects' | 'recentProjects' | 'before' | 'children' | 'onSelect'>): import("react").JSX.Element;

package/dist/ProjectSwitcher.js

@@ -0,0 +1,18 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { ChevronDown, History } from 'lucide-react';
+import { Icon } from './Icon.js';
+import * as Menu from './menu/index.parts.js';
+import { ProjectSwitcherRow } from './project-switcher-row.js';
+export function ProjectSwitcher({ current, projects, recentProjects, onSelect, leading, before, children, label, disabled, open, defaultOpen, onOpenChange, className, ref }) {
+    const { t } = useTranslation('ui');
+    return (_jsxs(Menu.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, children: [_jsxs(Menu.Trigger, { ref: ref, disabled: disabled, "aria-label": label ?? current?.name ?? t('projectSwitcher.label'), className: clsx('project-switcher-trigger', className), children: [leading, current?.icon, _jsx("span", { className: "truncate text-sm font-medium text-text", children: current?.name ?? t('projectSwitcher.label') }), _jsx(Icon, { icon: ChevronDown, size: 14, className: "shrink-0 text-text-muted" })] }), _jsx(Menu.Popup, { className: "min-w-60", children: _jsx(ProjectSwitcherGroups, { projects: projects, recentProjects: recentProjects, before: before, onSelect: onSelect, children: children }) })] }));
+}
+/* The rows of the popup, apart from it so they render without an open menu. */
+export function ProjectSwitcherGroups({ projects, recentProjects = [], before, children, onSelect }) {
+    const { t } = useTranslation('ui');
+    // The theme hides a separator at the top of a menu or against another, so a group that draws
+    // nothing leaves no line behind.
+    return (_jsxs(_Fragment, { children: [projects.map((project) => (_jsx(ProjectSwitcherRow, { project: project, onSelect: onSelect }, project.id))), before && (_jsxs(_Fragment, { children: [_jsx(Menu.Separator, {}), before] })), (recentProjects.length > 0 || children) && (_jsxs(_Fragment, { children: [_jsx(Menu.Separator, {}), recentProjects.length > 0 && (_jsxs(Menu.SubmenuRoot, { children: [_jsxs(Menu.SubmenuTrigger, { children: [_jsx(Icon, { icon: History, size: 14 }), " ", t('projectSwitcher.recent')] }), _jsx(Menu.Popup, { className: "min-w-60", children: recentProjects.map((project) => (_jsx(ProjectSwitcherRow, { project: project, onSelect: onSelect }, project.id))) })] })), children] }))] }));
+}

package/dist/PromptDialog.d.ts

@@ -0,0 +1,40 @@
+import { type ReactNode, type Ref } from 'react';
+import type { LucideIcon } from 'lucide-react';
+export interface PromptDialogProps {
+    open: boolean;
+    title: string;
+    titleIcon?: LucideIcon;
+    description?: ReactNode;
+    field?: {
+        label?: string;
+        ariaLabel?: string;
+        initial?: string;
+        placeholder?: string;
+        mono?: boolean;
+        maxLength?: number;
+    };
+    area?: {
+        label: string;
+        initial?: string;
+        placeholder?: string;
+    };
+    confirmLabel: string;
+    confirmBusyLabel?: string;
+    confirmIcon?: LucideIcon;
+    danger?: boolean;
+    busy?: boolean;
+    allowEmpty?: boolean;
+    confirmDisabled?: boolean;
+    secondary?: {
+        label: string;
+        onClick(): void;
+    };
+    nested?: boolean;
+    children?: ReactNode;
+    onConfirm(value: string, body: string): void | Promise<unknown>;
+    fallbackMessage?: string;
+    onOpenChange(open: boolean): void;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function PromptDialog({ open, title, titleIcon, description, field, area, confirmLabel, confirmBusyLabel, confirmIcon, danger, busy, allowEmpty, confirmDisabled, secondary, nested, children, onConfirm, fallbackMessage, onOpenChange, className, ref }: PromptDialogProps): import("react").JSX.Element;