@adecore/ui 0.14.0

package/src/Pill.tsx

@@ -0,0 +1,61 @@
+import type { ReactNode, Ref } from 'react';
+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'
+};
+
+export interface PillProps {
+    icon?: ReactNode;
+    children: ReactNode;
+    tone?: keyof typeof TONES;
+    shape?: keyof typeof SHAPES;
+    /* A branch name or a count reads better in the monospace face. */
+    mono?: boolean;
+    /* With a handler the pill is a button; without one it is a label. */
+    onClick?: () => void;
+    /* Makes the button a toggle, for a switch of what a surface shows. */
+    pressed?: boolean;
+    disabled?: boolean;
+    className?: string;
+    ref?: Ref<HTMLElement>;
+}
+
+/* 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 }: PillProps) {
+    const shared = clsx('inline-flex shrink-0 items-center gap-1 text-xs', SHAPES[shape], TONES[tone], mono && 'font-mono', className);
+    if (!onClick) {
+        return (
+            <span ref={ref} className={shared}>
+                {icon}
+                {children}
+            </span>
+        );
+    }
+    return (
+        <button
+            ref={ref as Ref<HTMLButtonElement>}
+            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}
+        >
+            {icon}
+            {children}
+        </button>
+    );
+}

package/src/ProjectSwitcher.tsx

@@ -0,0 +1,127 @@
+import type { ComponentProps, MouseEvent, ReactNode, Ref } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { ChevronDown, History } from 'lucide-react';
+import { Icon } from './Icon.tsx';
+import * as Menu from './menu/index.parts.ts';
+import { ProjectSwitcherRow } from './project-switcher-row.tsx';
+
+export interface ProjectSwitcherItem {
+    id: string;
+    name: string;
+    icon?: ReactNode;
+    /* The folder or other details, shown in a tooltip so the row stays on one line. */
+    description?: ReactNode;
+    /* A machine or workspace name at the end of the row. */
+    hint?: ReactNode;
+    disabled?: boolean;
+    /* A stale or disconnected project can still be selected to try opening it. */
+    muted?: boolean;
+    /* Menu items for the submenu beside this project's row. */
+    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;
+    /* Before the current project's icon, such as the machine it runs on. */
+    leading?: ReactNode;
+    /* Menu items in a group of their own between the open projects and Recent projects. */
+    before?: ReactNode;
+    /* Menu items in one group with Recent projects, such as opening a folder or creating a project. */
+    children?: ReactNode;
+    label?: string;
+    disabled?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: ComponentProps<typeof Menu.Root>['onOpenChange'];
+    className?: string;
+    ref?: Ref<HTMLButtonElement>;
+}
+
+export function ProjectSwitcher<Item extends ProjectSwitcherItem>({
+    current,
+    projects,
+    recentProjects,
+    onSelect,
+    leading,
+    before,
+    children,
+    label,
+    disabled,
+    open,
+    defaultOpen,
+    onOpenChange,
+    className,
+    ref
+}: ProjectSwitcherProps<Item>) {
+    const { t } = useTranslation('ui');
+
+    return (
+        <Menu.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
+            <Menu.Trigger
+                ref={ref}
+                disabled={disabled}
+                aria-label={label ?? current?.name ?? t('projectSwitcher.label')}
+                className={clsx('project-switcher-trigger', className)}
+            >
+                {leading}
+                {current?.icon}
+                <span className="truncate text-sm font-medium text-text">{current?.name ?? t('projectSwitcher.label')}</span>
+                <Icon icon={ChevronDown} size={14} className="shrink-0 text-text-muted" />
+            </Menu.Trigger>
+            <Menu.Popup className="min-w-60">
+                <ProjectSwitcherGroups projects={projects} recentProjects={recentProjects} before={before} onSelect={onSelect}>
+                    {children}
+                </ProjectSwitcherGroups>
+            </Menu.Popup>
+        </Menu.Root>
+    );
+}
+
+/* The rows of the popup, apart from it so they render without an open menu. */
+export function ProjectSwitcherGroups<Item extends ProjectSwitcherItem>({
+    projects,
+    recentProjects = [],
+    before,
+    children,
+    onSelect
+}: Pick<ProjectSwitcherProps<Item>, '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 (
+        <>
+            {projects.map((project) => (
+                <ProjectSwitcherRow key={project.id} project={project} onSelect={onSelect} />
+            ))}
+            {before && (
+                <>
+                    <Menu.Separator />
+                    {before}
+                </>
+            )}
+            {(recentProjects.length > 0 || children) && (
+                <>
+                    <Menu.Separator />
+                    {recentProjects.length > 0 && (
+                        <Menu.SubmenuRoot>
+                            <Menu.SubmenuTrigger>
+                                <Icon icon={History} size={14} /> {t('projectSwitcher.recent')}
+                            </Menu.SubmenuTrigger>
+                            <Menu.Popup className="min-w-60">
+                                {recentProjects.map((project) => (
+                                    <ProjectSwitcherRow key={project.id} project={project} onSelect={onSelect} />
+                                ))}
+                            </Menu.Popup>
+                        </Menu.SubmenuRoot>
+                    )}
+                    {children}
+                </>
+            )}
+        </>
+    );
+}

package/src/PromptDialog.tsx

@@ -0,0 +1,168 @@
+import { useState, type ReactNode, type Ref } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { LucideIcon } from 'lucide-react';
+import { Button } from './Button.tsx';
+import { DialogDescription, DialogFooter, DialogPopup, DialogRoot, DialogTitle } from './dialog/parts.tsx';
+import { Field, FormError } from './Field.tsx';
+import { Icon } from './Icon.tsx';
+import { Input, TextArea } from './Input.tsx';
+import { useAsyncAction } from './useAsyncAction.ts';
+
+export interface PromptDialogProps {
+    open: boolean;
+    title: string;
+    /* The mark beside the title, for a dialog that names the thing it is about. */
+    titleIcon?: LucideIcon;
+    description?: ReactNode;
+    /* A one line field the answer is typed in; without it the dialog is a confirm and nothing else. */
+    field?: {
+        /* Drawn above the field. Without one only a screen reader hears the name, from `ariaLabel`. */
+        label?: string;
+        ariaLabel?: string;
+        initial?: string;
+        placeholder?: string;
+        /* A branch, a path or anything else read back letter by letter. */
+        mono?: boolean;
+        maxLength?: number;
+    };
+    /* A second, taller field under it, for the body of a pull request. */
+    area?: { label: string; initial?: string; placeholder?: string };
+    confirmLabel: string;
+    /* What the button says while the step runs, for one slow enough that a quiet button is not enough. */
+    confirmBusyLabel?: string;
+    confirmIcon?: LucideIcon;
+    danger?: boolean;
+    /* The caller runs the step somewhere else and says when it is busy; a step this dialog awaits says so itself. */
+    busy?: boolean;
+    /* Lets the field be confirmed empty, for a list that may be cleared or a name with a default. */
+    allowEmpty?: boolean;
+    /* A reason this question cannot be answered at all, beside the one an empty field is. */
+    confirmDisabled?: boolean;
+    /* A second way out next to the confirm, such as merging before removing. */
+    secondary?: { label: string; onClick(): void };
+    /* Over another dialog, so what is under it is dimmed a second time. */
+    nested?: boolean;
+    /* Whatever this question needs beyond a field, between the description and the buttons. */
+    children?: ReactNode;
+    /* Told what was typed. A rejection stays on screen as the reason and leaves the dialog open. */
+    onConfirm(value: string, body: string): void | Promise<unknown>;
+    /* What the failure line reads when the rejection carries no sentence of its own. */
+    fallbackMessage?: string;
+    /* Only ever told `false`: Cancel, Escape or a click outside. The dialog never closes itself. */
+    onOpenChange(open: boolean): void;
+    /* Extra on the popup. */
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+
+/*
+ * The one dialog a question is asked in: a name to type, or a warning to agree with. Every confirm
+ * and every rename shares it, so none of them grows a layout of its own. It never closes itself,
+ * because what a confirm leads to is the caller's business: an action that asks a second question
+ * would be shut out by a close of its own.
+ */
+export function PromptDialog({
+    open,
+    title,
+    titleIcon,
+    description,
+    field,
+    area,
+    confirmLabel,
+    confirmBusyLabel,
+    confirmIcon,
+    danger = false,
+    busy = false,
+    allowEmpty = false,
+    confirmDisabled = false,
+    secondary,
+    nested = false,
+    children,
+    onConfirm,
+    fallbackMessage,
+    onOpenChange,
+    className,
+    ref
+}: PromptDialogProps) {
+    const { t } = useTranslation('ui');
+    /* The dialog stays mounted between questions, so every opening starts from what it was handed.
+       The token is what it was handed, so a new question resets the fields in the same render that
+       shows it and not in a second one after. */
+    const token = open ? `${field?.initial ?? ''}\u0000${area?.initial ?? ''}` : '';
+    const [draft, setDraft] = useState({ token, value: field?.initial ?? '', body: area?.initial ?? '' });
+    const step = useAsyncAction(fallbackMessage);
+    if (draft.token !== token) {
+        setDraft({ token, value: field?.initial ?? '', body: area?.initial ?? '' });
+        step.clear();
+    }
+    const value = draft.value;
+    const body = draft.body;
+    const working = busy || step.busy;
+    const setValue = (next: string): void => setDraft({ ...draft, value: next });
+    const setBody = (next: string): void => setDraft({ ...draft, body: next });
+
+    const submit = (): void => {
+        if (!working && !confirmDisabled && (field === undefined || allowEmpty || value.trim() !== '')) {
+            void step.run(async () => await onConfirm(value.trim(), body.trim()));
+        }
+    };
+
+    const close = (): void => onOpenChange(false);
+
+    return (
+        <DialogRoot open={open} onOpenChange={(next) => !next && close()}>
+            <DialogPopup ref={ref} size="sm" nested={nested} className={className}>
+                <DialogTitle className="flex items-center gap-2 break-words">
+                    {titleIcon && <Icon icon={titleIcon} size={16} />}
+                    {title}
+                </DialogTitle>
+                {description !== undefined && <DialogDescription className="mt-1 break-words">{description}</DialogDescription>}
+                {field !== undefined && (
+                    <Field label={field.label} className="mt-4">
+                        <Input
+                            autoFocus
+                            mono={field.mono === true}
+                            aria-label={field.ariaLabel}
+                            spellCheck={false}
+                            placeholder={field.placeholder}
+                            maxLength={field.maxLength}
+                            value={value}
+                            onChange={(event) => setValue(event.target.value)}
+                            onKeyDown={(event) => {
+                                // Whatever listens on the window has keys of its own, and a name may hold any of them.
+                                event.stopPropagation();
+                                if (event.key === 'Enter') {
+                                    event.preventDefault();
+                                    submit();
+                                }
+                            }}
+                        />
+                    </Field>
+                )}
+                {area !== undefined && (
+                    <Field label={area.label} className="mt-3">
+                        <TextArea rows={5} spellCheck={false} placeholder={area.placeholder} value={body} onChange={(event) => setBody(event.target.value)} />
+                    </Field>
+                )}
+                {children}
+                {step.failure !== null && <FormError className="mt-2 break-words">{step.failure}</FormError>}
+                <DialogFooter>
+                    <Button onClick={close}>{t('action.cancel')}</Button>
+                    {secondary !== undefined && (
+                        <Button disabled={working} onClick={secondary.onClick}>
+                            {secondary.label}
+                        </Button>
+                    )}
+                    <Button
+                        variant={danger ? 'danger' : 'primary'}
+                        disabled={working || confirmDisabled || (field !== undefined && !allowEmpty && value.trim() === '')}
+                        onClick={submit}
+                    >
+                        {confirmIcon && <Icon icon={confirmIcon} size={12} />}
+                        {working && confirmBusyLabel !== undefined ? confirmBusyLabel : confirmLabel}
+                    </Button>
+                </DialogFooter>
+            </DialogPopup>
+        </DialogRoot>
+    );
+}

package/src/SectionLabel.tsx

@@ -0,0 +1,20 @@
+import clsx from 'clsx';
+import { useRender } from '@base-ui-components/react/use-render';
+
+/* A label takes the line height of the row it sits in, which is why the size carries `/[inherit]`. */
+const SECTION_LABEL = 'text-xs/[inherit] font-medium text-text-faint';
+
+export type SectionLabelProps = useRender.ComponentProps<'span'>;
+
+/*
+ * The small label above a group of rows outside a popup: a sidebar's groups, a palette's sections,
+ * the name of a field. Always sentence case. A `<span>` unless `render` makes it a heading or a label.
+ */
+export function SectionLabel({ render, className, ref, ...props }: SectionLabelProps) {
+    return useRender({
+        render,
+        ref,
+        defaultTagName: 'span',
+        props: { ...props, className: clsx(SECTION_LABEL, className) }
+    });
+}

package/src/SegmentBar.tsx

@@ -0,0 +1,128 @@
+import { useEffect, useMemo, useRef, useState, type Ref } from 'react';
+import clsx from 'clsx';
+import { mergeRefs } from './merge-refs.ts';
+import { Tooltip } from './Tooltip.tsx';
+import { useMeasuredWidth } from './useMeasuredWidth.ts';
+
+export interface SegmentBarPart {
+    /* Its length, in the unit of the bar's `range`. */
+    value: number;
+    /* Where it starts, in the unit of the bar's `range`. Defaults to the end of the part before, or 0 for the first;
+       a later start leaves the stretch in between empty. Parts stay in order. */
+    start?: number;
+    /* Drawn in the part where there is room for it, and always read by a screen reader. */
+    label?: string;
+    /* Any CSS color, such as `var(--positive)`, in place of the theme's. It wins over the accent of `current`. */
+    color?: string;
+    /* The part a person is at, such as the section under the playhead. */
+    current?: boolean;
+}
+
+export interface SegmentBarProps {
+    parts: readonly SegmentBarPart[];
+    /* The stretch the bar shows, in the unit of the parts: the rest of a whole, or the visible part of a zoomed timeline.
+       Defaults to 0 up to the end of the last part. */
+    range?: readonly [from: number, to: number];
+    /* `md` draws each label in its part, `sm` is a thin bar that shows its labels only as a tooltip. */
+    size?: 'sm' | 'md';
+    /* Makes every part a button, which calls this with its index in `parts`. */
+    onSelect?(index: number): void;
+    /* The accessible name of the whole. */
+    label?: string;
+    className?: string;
+    ref?: Ref<HTMLOListElement>;
+}
+
+/* A whole split into parts, each as wide as it lasts, so they compare at a glance. A part starts exactly at its
+   place; the gap between two parts that touch comes out of the one before. */
+export function SegmentBar({ parts, range, size = 'md', onSelect, label, className, ref }: SegmentBarProps) {
+    const [measure, width] = useMeasuredWidth();
+    const rootRef = useMemo(() => mergeRefs(ref, measure), [ref, measure]);
+    const labels = useRef<(HTMLSpanElement | null)[]>([]);
+    const [cut, setCut] = useState<readonly boolean[]>([]);
+
+    let end = 0;
+    const placed = parts.map((part, index) => {
+        const from = part.start ?? end;
+        end = from + Math.max(0, part.value);
+        return { part, index, from, to: end };
+    });
+    const [from, to] = range ?? [0, end];
+    const span = to - from;
+    const visible = span > 0 ? placed.filter((placement) => placement.to > from && placement.from < to) : [];
+    // Parts without a name say nothing a screen reader could use; the element around the bar names it, as a meter does.
+    // Parts a person can press stay reachable, since a hidden list must not hold focusable buttons.
+    const hidden = onSelect === undefined && !parts.some((part) => part.label !== undefined);
+
+    // A label that stops fitting after a resize or a new range gets its tooltip.
+    useEffect(() => {
+        const next = labels.current.slice(0, visible.length).map((element) => element !== null && element.scrollWidth > element.clientWidth);
+        setCut((current) => (current.length === next.length && current.every((value, i) => value === next[i]) ? current : next));
+    }, [width, parts, from, to, size, visible.length]);
+
+    return (
+        <ol
+            ref={rootRef}
+            aria-label={hidden ? undefined : label}
+            aria-hidden={hidden ? true : undefined}
+            className={clsx('relative min-w-0', size === 'sm' ? 'h-1.5' : 'h-7', className)}
+        >
+            {visible.map(({ part, index, from: partFrom, to: partTo }, i) => {
+                const left = (Math.max(partFrom, from) - from) / span;
+                const right = (Math.min(partTo, to) - from) / span;
+                const next = visible[i + 1];
+                // Less than a pixel apart they touch, whatever rounding the caller's starts carry.
+                const touches = next !== undefined && ((next.from - partTo) / span) * width < 1;
+                const fill = clsx(
+                    'flex size-full min-w-0 items-center',
+                    size === 'sm' ? 'rounded-full' : 'rounded-sm px-1.5 text-left text-xs',
+                    part.current && (size === 'sm' ? 'bg-accent' : 'bg-accent-soft text-text'),
+                    !part.current && part.color === undefined && 'bg-surface-active',
+                    !part.current && size === 'md' && 'text-text-muted',
+                    onSelect !== undefined && 'cursor-pointer hover:opacity-80'
+                );
+                const text = (
+                    <span
+                        ref={(element) => {
+                            labels.current[i] = element;
+                        }}
+                        className={size === 'sm' ? 'sr-only' : 'min-w-0 truncate'}
+                    >
+                        {part.label}
+                    </span>
+                );
+                const body =
+                    onSelect === undefined ? (
+                        <span className={fill} style={{ backgroundColor: part.color }} aria-current={part.current ? true : undefined}>
+                            {text}
+                        </span>
+                    ) : (
+                        <button
+                            type="button"
+                            className={fill}
+                            style={{ backgroundColor: part.color }}
+                            aria-current={part.current ? true : undefined}
+                            onClick={() => onSelect(index)}
+                        >
+                            {text}
+                        </button>
+                    );
+                return (
+                    <li
+                        key={index}
+                        className={clsx('absolute inset-y-0 focus-within:z-10', touches && 'pr-0.5')}
+                        style={{ left: `${left * 100}%`, width: `${(right - left) * 100}%` }}
+                    >
+                        {part.label === undefined ? (
+                            body
+                        ) : (
+                            <Tooltip label={part.label} disabled={size === 'md' && !cut[i]}>
+                                {body}
+                            </Tooltip>
+                        )}
+                    </li>
+                );
+            })}
+        </ol>
+    );
+}

package/src/Segmented.tsx

@@ -0,0 +1,51 @@
+import type { Ref } from 'react';
+import clsx from 'clsx';
+import type { LucideIcon } from 'lucide-react';
+import { Icon } from './Icon.tsx';
+
+export interface SegmentedOption<T extends string> {
+    id: T;
+    label: string;
+    icon?: LucideIcon;
+}
+
+export interface SegmentedProps<T extends string> {
+    value: T;
+    onValueChange(id: T): void;
+    options: readonly SegmentedOption<T>[];
+    /* The accessible name of the group. */
+    label: string;
+    disabled?: boolean;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+
+/* One of a few options side by side in one sunken track, the picked one lifted out of it. */
+export function Segmented<T extends string>({ value, onValueChange, options, label, disabled, className, ref }: SegmentedProps<T>) {
+    return (
+        <div
+            ref={ref}
+            className={clsx('flex h-8 w-fit items-center rounded-lg bg-surface-sunken p-0.5 text-xs font-medium', className)}
+            role="radiogroup"
+            aria-label={label}
+        >
+            {options.map((option) => (
+                <button
+                    key={option.id}
+                    type="button"
+                    role="radio"
+                    aria-checked={value === option.id}
+                    disabled={disabled}
+                    className={clsx(
+                        'flex h-7 items-center gap-1.5 rounded-md px-3 transition-colors disabled:opacity-50',
+                        value === option.id ? 'bg-surface-raised text-text shadow-raised' : 'text-text-muted hover:text-text'
+                    )}
+                    onClick={() => onValueChange(option.id)}
+                >
+                    {option.icon && <Icon icon={option.icon} size={14} />}
+                    {option.label}
+                </button>
+            ))}
+        </div>
+    );
+}