@adecore/ui 0.14.0

package/dist/toast-store.d.ts

@@ -0,0 +1,38 @@
+import { type StoreApi, type UseBoundStore } from 'zustand';
+import type { Shortcut } from './shortcut.ts';
+export declare const SUCCESS_MS = 4000;
+export declare const UNDO_MS = 8000;
+export type ToastKind = 'progress' | 'success' | 'error' | 'deleted';
+export interface ToastAction {
+    label: string;
+    run(): void;
+    shortcut?: Shortcut;
+}
+export interface ToastDeadline {
+    start: number;
+    end: number;
+}
+export declare const elapsedOf: (deadline: ToastDeadline, now: number) => number;
+export interface Toast {
+    id: string;
+    title: string;
+    description?: string;
+    kind: ToastKind;
+    action?: ToastAction;
+    actions?: ToastAction[];
+    persist?: boolean;
+    onClose?: () => void;
+    deadline?: ToastDeadline;
+}
+export type ToastInput<T extends Toast = Toast> = Omit<T, 'id' | 'deadline'> & {
+    id?: string;
+};
+export type ToastPatch<T extends Toast = Toast> = Partial<Omit<T, 'id' | 'deadline'>>;
+export interface ToastStore<T extends Toast = Toast> {
+    toasts: T[];
+    show(toast: ToastInput<T>): string;
+    update(id: string, patch: ToastPatch<T>): void;
+    dismiss(id: string): void;
+}
+export type ToastStoreHook<T extends Toast = Toast> = UseBoundStore<StoreApi<ToastStore<T>>>;
+export declare const createToastStore: <T extends Toast = Toast>() => ToastStoreHook<T>;

package/dist/toast-store.js

@@ -0,0 +1,61 @@
+import { create } from 'zustand';
+// How long a toast that went well stays up; a failure waits for the person instead.
+export const SUCCESS_MS = 4000;
+// How long a deletion can still be taken back.
+export const UNDO_MS = 8000;
+/* How far into its lifetime a toast is at `now`, held inside that lifetime. */
+export const elapsedOf = (deadline, now) => Math.min(Math.max(now - deadline.start, 0), deadline.end - deadline.start);
+/*
+ * The one place an app says how something went that no surface on screen shows. A long action keeps
+ * one id from progress to its outcome, so a person never watches two cards for one thing.
+ */
+export const createToastStore = () => {
+    const timers = new Map();
+    let counter = 0;
+    return create((set, get) => {
+        const stop = (id) => {
+            clearTimeout(timers.get(id));
+            timers.delete(id);
+        };
+        /* A toast that went well takes itself away, and so does the offer to undo; a failure and a running action stay. */
+        const schedule = (id, kind, persist) => {
+            stop(id);
+            const lifetime = kind === 'deleted' ? UNDO_MS : kind === 'success' && !persist ? SUCCESS_MS : null;
+            if (lifetime === null) {
+                return undefined;
+            }
+            timers.set(id, setTimeout(() => {
+                timers.delete(id);
+                get().dismiss(id);
+            }, lifetime));
+            const start = Date.now();
+            return { start, end: start + lifetime };
+        };
+        return {
+            toasts: [],
+            show(toast) {
+                counter += 1;
+                const id = toast.id ?? `toast-${counter}`;
+                const next = { ...toast, id, deadline: schedule(id, toast.kind, toast.persist === true) };
+                const toasts = get().toasts;
+                set({ toasts: toasts.some((entry) => entry.id === id) ? toasts.map((entry) => (entry.id === id ? next : entry)) : [...toasts, next] });
+                return id;
+            },
+            update(id, patch) {
+                const current = get().toasts.find((entry) => entry.id === id);
+                if (current === undefined) {
+                    return;
+                }
+                const merged = { ...current, ...patch };
+                const next = { ...merged, deadline: schedule(id, merged.kind, merged.persist === true) };
+                set({ toasts: get().toasts.map((entry) => (entry.id === id ? next : entry)) });
+            },
+            dismiss(id) {
+                stop(id);
+                const gone = get().toasts.find((entry) => entry.id === id);
+                set({ toasts: get().toasts.filter((entry) => entry.id !== id) });
+                gone?.onClose?.();
+            }
+        };
+    });
+};

package/dist/useAsyncAction.d.ts

@@ -0,0 +1,8 @@
+export interface AsyncAction {
+    busy: boolean;
+    failure: string | null;
+    run(work: () => Promise<unknown>): Promise<boolean>;
+    fail(message: string): void;
+    clear(): void;
+}
+export declare function useAsyncAction(fallback?: string): AsyncAction;

package/dist/useAsyncAction.js

@@ -0,0 +1,23 @@
+import { useState } from 'react';
+import { messageOf } from './error-message.js';
+/* One step a surface waits on: the button goes quiet while it runs and the reason stays on screen when it does not. */
+export function useAsyncAction(fallback) {
+    const [busy, setBusy] = useState(false);
+    const [failure, setFailure] = useState(null);
+    const run = async (work) => {
+        setBusy(true);
+        setFailure(null);
+        try {
+            await work();
+            return true;
+        }
+        catch (e) {
+            setFailure(messageOf(e, fallback));
+            return false;
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return { busy, failure, run, fail: setFailure, clear: () => setFailure(null) };
+}

package/dist/useColumnResize.d.ts

@@ -0,0 +1,14 @@
+import type { PointerEvent as ReactPointerEvent, RefObject } from 'react';
+export type ColumnEdge = 'left' | 'right' | 'top' | 'bottom';
+export interface ColumnResizeOptions {
+    size: number;
+    min: number;
+    from: ColumnEdge;
+    max?(): number;
+    onSize(size: number): void;
+}
+export interface ColumnResize {
+    startResize(event: ReactPointerEvent<HTMLElement>): void;
+}
+export declare const clampColumnSize: (options: Pick<ColumnResizeOptions, 'min' | 'max'>, size: number) => number;
+export declare const useColumnResize: (ref: RefObject<HTMLElement | null>, options: ColumnResizeOptions) => ColumnResize;

package/dist/useColumnResize.js

@@ -0,0 +1,49 @@
+export const clampColumnSize = (options, size) => {
+    const max = Math.max(options.min, options.max?.() ?? Number.MAX_SAFE_INTEGER);
+    return Math.max(options.min, Math.min(Math.round(size), max));
+};
+/* Where the pointer sits on the axis this edge belongs to. */
+const along = (from, event) => (from === 'left' || from === 'right' ? event.clientX : event.clientY);
+/* The edge the column is pinned to, in page coordinates, or the window's own when there is no box yet. */
+const anchorOf = (from, rect) => {
+    switch (from) {
+        case 'left':
+            return rect?.left ?? 0;
+        case 'right':
+            return rect?.right ?? window.innerWidth;
+        case 'top':
+            return rect?.top ?? 0;
+        case 'bottom':
+            return rect?.bottom ?? window.innerHeight;
+    }
+};
+/*
+ * One resizable column or row: a handle that drags the size its owner keeps. The handle takes the
+ * pointer capture, so the drag survives leaving the few pixels it is wide, and `[data-resizing]` on
+ * the column turns off any transition on that size for as long as it lasts.
+ */
+export const useColumnResize = (ref, options) => {
+    const startResize = (event) => {
+        event.preventDefault();
+        const handle = event.currentTarget;
+        const column = ref.current;
+        const anchor = anchorOf(options.from, column?.getBoundingClientRect());
+        /* The far edge grows as the pointer comes towards it; the near edge grows as it goes away. */
+        const growsTowardsAnchor = options.from === 'right' || options.from === 'bottom';
+        column?.setAttribute('data-resizing', 'true');
+        const onMove = (move) => {
+            const reach = along(options.from, move);
+            options.onSize(clampColumnSize(options, growsTowardsAnchor ? anchor - reach : reach - anchor));
+        };
+        const onUp = () => {
+            handle.removeEventListener('pointermove', onMove);
+            handle.removeEventListener('pointerup', onUp);
+            handle.releasePointerCapture(event.pointerId);
+            column?.removeAttribute('data-resizing');
+        };
+        handle.setPointerCapture(event.pointerId);
+        handle.addEventListener('pointermove', onMove);
+        handle.addEventListener('pointerup', onUp);
+    };
+    return { startResize };
+};

package/dist/useContentSize.d.ts

@@ -0,0 +1,5 @@
+export interface ContentSize {
+    width: number;
+    height: number;
+}
+export declare function useContentSize(): [(node: HTMLElement | null) => void, ContentSize];

package/dist/useContentSize.js

@@ -0,0 +1,21 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+/* Whole pixels, so a frame fitted into the space lands on them too. */
+export function useContentSize() {
+    const [size, setSize] = useState({ width: 0, height: 0 });
+    const observer = useRef(null);
+    useEffect(() => () => observer.current?.disconnect(), []);
+    const measure = useCallback((node) => {
+        observer.current?.disconnect();
+        if (node === null) {
+            return;
+        }
+        const update = (width, height) => {
+            const next = { width: Math.round(width), height: Math.round(height) };
+            setSize((current) => (current.width === next.width && current.height === next.height ? current : next));
+        };
+        update(node.clientWidth, node.clientHeight);
+        observer.current = new ResizeObserver(([entry]) => update(entry.contentRect.width, entry.contentRect.height));
+        observer.current.observe(node);
+    }, []);
+    return [measure, size];
+}

package/dist/useMeasuredWidth.d.ts

@@ -0,0 +1 @@
+export declare function useMeasuredWidth(): [(node: HTMLElement | null) => void, number];

package/dist/useMeasuredWidth.js

@@ -0,0 +1,6 @@
+import { useContentSize } from './useContentSize.js';
+/* A plot draws in real pixels rather than a stretched view box, so what it draws lands on whole ones. */
+export function useMeasuredWidth() {
+    const [measure, size] = useContentSize();
+    return [measure, size.width];
+}

package/dist/useNow.d.ts

@@ -0,0 +1,3 @@
+import { type RefObject } from 'react';
+export declare const useNow: (intervalMs: number, ticking?: boolean) => number;
+export declare const useTickingText: (render: () => string, intervalMs?: number) => RefObject<HTMLSpanElement | null>;

package/dist/useNow.js

@@ -0,0 +1,41 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+/*
+ * The clock a surface reads to say how long something has been running. One timer for the whole
+ * surface, ticking only while there is something to count, and starting at the time it was mounted
+ * so a panel that comes back mid-session does not read zero for a second first.
+ */
+export const useNow = (intervalMs, ticking = true) => {
+    const [now, setNow] = useState(Date.now);
+    useEffect(() => {
+        if (!ticking) {
+            return;
+        }
+        const timer = window.setInterval(() => setNow(Date.now()), intervalMs);
+        return () => window.clearInterval(timer);
+    }, [intervalMs, ticking]);
+    return now;
+};
+/*
+ * A timer on one line of a long thread. The text is written straight into the node, because a chat
+ * that re-renders every second while an agent works re-renders every row it is drawing with it.
+ */
+export const useTickingText = (render, intervalMs = 1000) => {
+    const ref = useRef(null);
+    const latest = useRef(render);
+    const tick = useCallback(() => {
+        if (ref.current !== null) {
+            ref.current.textContent = latest.current();
+        }
+    }, []);
+    useEffect(() => {
+        const timer = window.setInterval(tick, intervalMs);
+        return () => window.clearInterval(timer);
+    }, [intervalMs, tick]);
+    /* After every render as well, so the first one writes the line and a language or region change
+       lands on it without waiting for the next tick. */
+    useEffect(() => {
+        latest.current = render;
+        tick();
+    });
+    return ref;
+};

package/dist/wipe-split.d.ts

@@ -0,0 +1,7 @@
+export declare const WIPE_KEY_STEP = 0.02;
+export declare const clampSplit: (split: number) => number;
+export declare const splitAt: (clientX: number, frame: {
+    left: number;
+    width: number;
+}) => number | null;
+export declare const splitForKey: (split: number, key: string) => number | null;

package/dist/wipe-split.js

@@ -0,0 +1,20 @@
+/* One press of an arrow moves the handle this share of the frame. */
+export const WIPE_KEY_STEP = 0.02;
+export const clampSplit = (split) => Math.min(1, Math.max(0, split));
+/* A frame without a width has no place to point at, so the split stays where it is. */
+export const splitAt = (clientX, frame) => frame.width > 0 ? clampSplit((clientX - frame.left) / frame.width) : null;
+/* Null for a key the handle does not answer, so it goes on to whatever is around it. */
+export const splitForKey = (split, key) => {
+    switch (key) {
+        case 'ArrowLeft':
+            return clampSplit(split - WIPE_KEY_STEP);
+        case 'ArrowRight':
+            return clampSplit(split + WIPE_KEY_STEP);
+        case 'Home':
+            return 0;
+        case 'End':
+            return 1;
+        default:
+            return null;
+    }
+};

package/dist/zoom.d.ts

@@ -0,0 +1,3 @@
+export declare const ZOOM_PRESETS: readonly number[];
+export declare const activeZoomPreset: (zoom: number, presets: readonly number[]) => number | null;
+export declare const steppedZoom: (zoom: number, by: number) => number;

package/dist/zoom.js

@@ -0,0 +1,6 @@
+/* The percentages a zoom menu offers when the app names none. */
+export const ZOOM_PRESETS = [25, 50, 75, 100, 150, 200];
+/* Compared on the rounded percent the readout shows, so 0.999 still ticks 100%. */
+export const activeZoomPreset = (zoom, presets) => presets.find((preset) => preset === Math.round(zoom * 100)) ?? null;
+/* Ten percent a click, on the readout's own rounded percent, so + and - come back where they were. */
+export const steppedZoom = (zoom, by) => Math.round(zoom * 100 + by) / 100;

package/package.json

@@ -0,0 +1,92 @@
+{
+  "name": "@adecore/ui",
+  "version": "0.14.0",
+  "description": "React components, a theme, formatters and a settings dialog for desktop-grade apps on React 19, Base UI and Tailwind 4.",
+  "license": "MIT",
+  "author": "Bas Milius",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/basmilius/adecore.git",
+    "directory": "packages/ui"
+  },
+  "bugs": {
+    "url": "https://github.com/basmilius/adecore/issues"
+  },
+  "homepage": "https://adecore.dev/ui/",
+  "type": "module",
+  "sideEffects": [
+    "*.css",
+    "./src/testing/dedupe.ts",
+    "./dist/testing/dedupe.js"
+  ],
+  "files": [
+    "dist",
+    "src",
+    "!src/**/*.test.ts",
+    "!src/**/*.test.tsx",
+    "!src/**/__snapshots__"
+  ],
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./settings": {
+      "source": "./src/settings/index.ts",
+      "types": "./dist/settings/index.d.ts",
+      "default": "./dist/settings/index.js"
+    },
+    "./format": {
+      "source": "./src/format/index.ts",
+      "types": "./dist/format/index.d.ts",
+      "default": "./dist/format/index.js"
+    },
+    "./testing": {
+      "source": "./src/testing/index.ts",
+      "types": "./dist/testing/index.d.ts",
+      "default": "./dist/testing/index.js"
+    },
+    "./testing/dedupe": {
+      "source": "./src/testing/dedupe.ts",
+      "types": "./dist/testing/dedupe.d.ts",
+      "default": "./dist/testing/dedupe.js"
+    },
+    "./theme.css": {
+      "source": "./src/theme.css",
+      "style": "./src/theme.css",
+      "default": "./dist/theme.css"
+    }
+  },
+  "scripts": {
+    "build": "bun scripts/build.ts",
+    "typecheck": "tsc --noEmit",
+    "test": "bun test"
+  },
+  "dependencies": {
+    "@base-ui-components/react": "^1.0.0-rc.0",
+    "@pierre/trees": "1.0.0-beta.6",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.47.0",
+    "zustand": "^5.0.15"
+  },
+  "peerDependencies": {
+    "i18next": "^26.4.2",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "react-i18next": "^17.0.15"
+  },
+  "devDependencies": {
+    "@types/bun": "^1.4.2",
+    "@types/opentype.js": "^1.3.10",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "i18next": "^26.4.2",
+    "opentype.js": "2.0.0",
+    "oxc-parser": "^0.151.0",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "react-i18next": "^17.0.15",
+    "typescript": "^7.0.2"
+  }
+}

package/src/AccentSwatches.tsx

@@ -0,0 +1,73 @@
+import type { Ref } from 'react';
+import clsx from 'clsx';
+import { Ellipsis } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { ColorSwatch } from './ColorSwatch.tsx';
+import { Icon } from './Icon.tsx';
+import { MenuPopup, MenuRadioGroup, MenuRadioItem, MenuRoot, MenuTrigger } from './menu/parts.tsx';
+import { Tooltip } from './Tooltip.tsx';
+
+export interface AccentSwatchesProps<Id extends string> {
+    value: string | undefined;
+    onValueChange(id: Id): void;
+    label: string;
+    /* Every color on offer, in the order of the list behind the featured ones. */
+    accents: readonly { id: Id; color: string }[];
+    /* The few drawn in the open, in the order they stand. */
+    featured: readonly Id[];
+    labelOf(id: Id): string;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+
+/*
+ * 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<Id extends string>({ value, onValueChange, label, accents, featured, labelOf, className, ref }: AccentSwatchesProps<Id>) {
+    const { t } = useTranslation('ui');
+    const isFeatured = (id: string): boolean => featured.some((entry) => entry === id);
+    const colorOf = (id: string): string | undefined => 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 (
+        <div ref={ref} className={clsx('flex items-center gap-2', className)} role="radiogroup" aria-label={label}>
+            {shown.map((entry) => (
+                <Tooltip key={entry.id} label={labelOf(entry.id)}>
+                    <ColorSwatch
+                        role="radio"
+                        aria-checked={value === entry.id}
+                        aria-label={labelOf(entry.id)}
+                        color={entry.color}
+                        picked={value === entry.id}
+                        onClick={() => onValueChange(entry.id)}
+                    />
+                </Tooltip>
+            ))}
+            <MenuRoot>
+                <Tooltip label={t('accent.more')}>
+                    <ColorSwatch
+                        render={<MenuTrigger />}
+                        aria-label={t('accent.more')}
+                        color={hidden === null ? undefined : colorOf(hidden)}
+                        picked={hidden !== null}
+                    >
+                        {/* Undefined leaves the tick of the picked color; otherwise this says there is more behind the swatch. */}
+                        {hidden === null ? <Icon icon={Ellipsis} size={12} /> : undefined}
+                    </ColorSwatch>
+                </Tooltip>
+                <MenuPopup align="end" className="max-h-96 overflow-y-auto">
+                    <MenuRadioGroup value={value ?? null} onValueChange={(id: Id) => onValueChange(id)}>
+                        {accents.map((entry) => (
+                            <MenuRadioItem key={entry.id} value={entry.id}>
+                                <span className="h-3 w-3 shrink-0 rounded-full" style={{ background: entry.color }} aria-hidden />
+                                <span className="grow">{labelOf(entry.id)}</span>
+                            </MenuRadioItem>
+                        ))}
+                    </MenuRadioGroup>
+                </MenuPopup>
+            </MenuRoot>
+        </div>
+    );
+}

package/src/Banner.tsx

@@ -0,0 +1,43 @@
+import type { ReactNode, Ref } from 'react';
+import clsx from 'clsx';
+import type { LucideIcon } from 'lucide-react';
+import { Icon } from './Icon.tsx';
+import { Surface } from './Surface.tsx';
+
+/* The mark in front of the line: a decision to make, a failure to read, or something that happened. */
+export type BannerTone = 'attention' | 'error' | 'neutral';
+
+const TONE: Record<BannerTone, string> = {
+    attention: 'text-status-needs-you',
+    error: 'text-status-error',
+    neutral: 'text-text-muted'
+};
+
+export interface BannerProps {
+    icon: LucideIcon;
+    tone: BannerTone;
+    message: ReactNode;
+    /* The buttons that answer the line. */
+    children?: ReactNode;
+    /* Where the strip stands; by default centered along the top of the positioned parent. */
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+
+/*
+ * 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 }: BannerProps) {
+    return (
+        <div ref={ref} className={clsx('pointer-events-auto flex justify-center px-4', className)} role="status" aria-live="polite">
+            <Surface className="flex max-w-[640px] items-center gap-3 rounded-lg px-3 py-2 text-sm text-text">
+                <Icon icon={icon} size={16} className={clsx('shrink-0', TONE[tone])} />
+                <span className="grow">{message}</span>
+                {children}
+            </Surface>
+        </div>
+    );
+}

package/src/Button.tsx

@@ -0,0 +1,55 @@
+import type { AnchorHTMLAttributes, ComponentProps, Ref } from 'react';
+import clsx from 'clsx';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'danger-outline' | 'positive' | 'inverse';
+export type ButtonSize = 'xs' | 'sm' | 'md';
+
+const VARIANT: Record<ButtonVariant, string> = {
+    // 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: Record<ButtonSize, string> = {
+    xs: 'h-6 px-2',
+    sm: 'h-7 px-2.5',
+    md: 'h-8 px-3'
+};
+
+export interface ButtonProps extends ComponentProps<'button'> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    /* Makes it a link that looks like a button, a real anchor, so it opens the way links open. */
+    href?: string;
+}
+
+/* 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 }: ButtonProps) {
+    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 (
+            <a
+                ref={ref as Ref<HTMLAnchorElement>}
+                className={classes}
+                href={href}
+                target="_blank"
+                rel="noreferrer"
+                {...(rest as AnchorHTMLAttributes<HTMLAnchorElement>)}
+            />
+        );
+    }
+    return <button ref={ref} type={type} className={classes} {...rest} />;
+}

package/src/ButtonGroup.tsx

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

package/src/Checkbox.tsx

@@ -0,0 +1,44 @@
+import type { Ref } from 'react';
+import clsx from 'clsx';
+import { Check, Minus } from 'lucide-react';
+import { Checkbox as BaseCheckbox } from '@base-ui-components/react/checkbox';
+import { Icon } from './Icon.tsx';
+
+export interface CheckboxProps {
+    checked: boolean;
+    onCheckedChange(checked: boolean): void;
+    /* The accessible name; a `<label>` around the box and its text usually carries the visible one. */
+    label: string;
+    /* Some of the items it stands for are picked and some are not, as on a box that picks every row of a list. */
+    indeterminate?: boolean;
+    disabled?: boolean;
+    className?: string;
+    ref?: Ref<HTMLButtonElement>;
+}
+
+/* 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 }: CheckboxProps) {
+    return (
+        <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
+            )}
+        >
+            <BaseCheckbox.Indicator
+                render={(props, state) => (
+                    <span {...props}>
+                        <Icon icon={state.indeterminate ? Minus : Check} size={12} />
+                    </span>
+                )}
+            />
+        </BaseCheckbox.Root>
+    );
+}