panelui-web 0.7.0 → 0.9.0

package/dist/components/alert-dialog/index.js

@@ -0,0 +1,327 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * AlertDialog — a question that has to be answered before anything else on
+ * the page can be done: delete this, discard that, sign out everywhere.
+ *
+ * ```tsx
+ * <AlertDialog>
+ *   <AlertDialog.Trigger render={<Button variant="destructive" />}>Delete project</AlertDialog.Trigger>
+ *   <AlertDialog.Content tone="destructive">
+ *     <AlertDialog.Title>Delete Orchard?</AlertDialog.Title>
+ *     <AlertDialog.Description>Its 14 boards and their history go with it.</AlertDialog.Description>
+ *     <AlertDialog.Footer>
+ *       <AlertDialog.Cancel />
+ *       <AlertDialog.Action onClick={remove}>Delete project</AlertDialog.Action>
+ *     </AlertDialog.Footer>
+ *   </AlertDialog.Content>
+ * </AlertDialog>
+ * ```
+ *
+ * ## A press outside is Cancel
+ *
+ * A press anywhere outside the dialog, Escape and `AlertDialog.Cancel` all
+ * close it without doing anything; an action closes it once it has done its
+ * work. `dismissible={false}` takes the outside press away, for a question
+ * that should not be waved off by a stray click. While an action is running,
+ * nothing closes it.
+ *
+ * ## The question, then the answers
+ *
+ * It is drawn as a panel in a darker band, the way Feedback is: the panel
+ * holds the question, and `AlertDialog.Footer` moves out of it into the band
+ * underneath, where the answers sit side by side at equal widths. Neither
+ * answer is made to look like the default by being bigger.
+ *
+ * ## Actions that take time, or nerve
+ *
+ * An action whose `onClick` returns a promise shows a spinner and keeps the
+ * dialog open, and unclosable, until the promise settles: closed if it
+ * resolved, still open if it failed, so the failure can be shown in it.
+ * `hold` makes an action one that must be pressed and held while a fill
+ * runs across it, for a step that cannot be undone.
+ */
+// The dialog primitive rather than the alert-dialog one, which refuses every
+// press outside; the role is still `alertdialog`, set on the popup.
+import { Dialog as Primitive } from '@base-ui/react/dialog';
+import { Children, createContext, isValidElement, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, } from 'react';
+import { tv } from 'tailwind-variants';
+import { Button } from '../button/index.js';
+const alertDialogVariants = tv({
+    slots: {
+        backdrop: 'fixed inset-0 z-50 bg-black/40 transition-opacity duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none',
+        viewport: 'fixed inset-0 z-50 grid place-items-center overflow-y-auto p-4',
+        /*
+         * The band is the popover surface with black mixed in, so it is the
+         * darker of the two in a light theme and a dark one alike. 38 and 30 are
+         * one corner: the panel's radius is the band's less the 8px between them.
+         */
+        shell: 'relative flex w-full flex-col rounded-[38px] bg-[color-mix(in_oklab,var(--popover),black_5%)] p-2 text-popover-foreground shadow-xl outline-none ring-1 ring-foreground/[0.06] dark:bg-[color-mix(in_oklab,var(--popover),black_14%)]',
+        popup: 'transition-[opacity,scale,translate] duration-200 ease-[cubic-bezier(0.2,0,0,1)] data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:translate-y-2 data-starting-style:scale-95 data-starting-style:opacity-0 motion-reduce:transition-none',
+        panel: 'flex flex-col gap-2 rounded-[30px] bg-popover p-5 shadow-xs',
+        media: [
+            'mb-2 flex size-12 shrink-0 items-center justify-center rounded-full',
+            'bg-[color-mix(in_oklab,var(--pu-tone)_14%,transparent)] text-[var(--pu-tone)] [&_svg:not([class*=size-])]:size-6',
+        ],
+        title: 'text-[19px] font-semibold leading-6 tracking-[-0.01em]',
+        description: 'text-[15px] leading-[22px] text-muted-foreground',
+        // Held in from the band's edge further than the panel is, so the row of
+        // answers does not read as a third edge of the dialog.
+        footer: 'flex items-center gap-3 px-[18px] pb-2.5 pt-4',
+        action: 'relative isolate h-11 min-w-0 flex-1 overflow-hidden rounded-full px-4 text-[15px]',
+        // Drawn under the label and over the button's own fill, from the start edge.
+        fill: 'pointer-events-none absolute inset-0 -z-10 origin-left scale-x-0 bg-[color-mix(in_oklab,currentColor_24%,transparent)] rtl:origin-right',
+    },
+    variants: {
+        palette: {
+            neutral: { shell: '[--pu-tone:var(--muted-foreground)]' },
+            info: { shell: '[--pu-tone:var(--info)]' },
+            success: { shell: '[--pu-tone:var(--success)]' },
+            warning: { shell: '[--pu-tone:var(--warning)]' },
+            destructive: { shell: '[--pu-tone:var(--destructive)]' },
+        },
+        size: {
+            default: { shell: 'max-w-md' },
+            // Narrow, so the question is centred over the two answers.
+            sm: { shell: 'max-w-xs', panel: 'items-center text-center' },
+        },
+        blur: {
+            true: { backdrop: 'bg-black/20 backdrop-blur-md' },
+        },
+        /** How much an answer asks to be pressed: filled, or a tint of its colour. */
+        weight: {
+            solid: {},
+            soft: {},
+        },
+        actionTone: {
+            primary: {},
+            destructive: {},
+            neutral: {},
+        },
+    },
+    compoundVariants: [
+        {
+            weight: 'soft',
+            actionTone: 'primary',
+            className: { action: 'bg-foreground/10 text-foreground hover:not-disabled:bg-foreground/15 hover:not-disabled:text-foreground' },
+        },
+        {
+            weight: 'soft',
+            actionTone: 'neutral',
+            className: {
+                action: 'bg-foreground/10 text-muted-foreground hover:not-disabled:bg-foreground/15 hover:not-disabled:text-foreground',
+            },
+        },
+        {
+            weight: 'soft',
+            actionTone: 'destructive',
+            className: {
+                action: 'bg-[color-mix(in_oklab,var(--destructive)_12%,transparent)] text-destructive hover:not-disabled:bg-[color-mix(in_oklab,var(--destructive)_18%,transparent)] hover:not-disabled:text-destructive',
+            },
+        },
+    ],
+    defaultVariants: { palette: 'neutral', size: 'default' },
+});
+const AlertDialogContext = createContext(null);
+function useAlertDialog(part) {
+    const context = useContext(AlertDialogContext);
+    if (!context)
+        throw new Error(`${part} must be used inside an <AlertDialog>.`);
+    return context;
+}
+function AlertDialogRoot({ children, open, defaultOpen = false, onOpenChange, dismissible = true, }) {
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const resolvedOpen = open ?? internalOpen;
+    const [busy, setBusy] = useState(false);
+    const setOpen = useCallback((next) => {
+        if (open === undefined)
+            setInternalOpen(next);
+        onOpenChange?.(next);
+    }, [open, onOpenChange]);
+    const context = useMemo(() => ({ open: resolvedOpen, setOpen, busy, setBusy, tone: 'neutral', inline: false }), [resolvedOpen, setOpen, busy]);
+    return (_jsx(AlertDialogContext.Provider, { value: context, children: _jsx(Primitive.Root, { open: resolvedOpen, disablePointerDismissal: !dismissible, onOpenChange: (next) => {
+                // While an action runs, the answer is already being acted on.
+                if (!next && busy)
+                    return;
+                setOpen(next);
+            }, children: children }) }));
+}
+AlertDialogRoot.displayName = 'AlertDialog';
+/** What opens the dialog. A plain button unless `render` supplies one. */
+function AlertDialogTrigger({ render, children, ...props }) {
+    return (_jsx(Primitive.Trigger, { render: render, ...props, children: children }));
+}
+AlertDialogTrigger.displayName = 'AlertDialog.Trigger';
+const isFooter = (child) => isValidElement(child) && child.type === AlertDialogFooter;
+/** The dialog: the panel with the question, in a band that holds the answers. */
+function AlertDialogContent({ tone = 'neutral', size = 'default', blur = false, inline = false, className, children, ...props }) {
+    const dialog = useAlertDialog('AlertDialog.Content');
+    const slots = alertDialogVariants({ palette: tone, size, blur });
+    const context = useMemo(() => ({ ...dialog, tone, inline }), [dialog, tone, inline]);
+    // The footer leaves the panel for the band under it.
+    const all = Children.toArray(children);
+    const footer = all.filter(isFooter);
+    const inside = (_jsxs(AlertDialogContext.Provider, { value: context, children: [_jsx("div", { "data-slot": "alert-dialog-panel", className: slots.panel(), children: all.filter((child) => !isFooter(child)) }), footer] }));
+    if (inline) {
+        return (_jsx("div", { "data-slot": "alert-dialog-content", "data-tone": tone, className: slots.shell({ className }), ...props, children: inside }));
+    }
+    return (_jsxs(Primitive.Portal, { children: [_jsx(Primitive.Backdrop, { className: slots.backdrop() }), _jsx(Primitive.Viewport, { className: slots.viewport(), children: _jsx(Primitive.Popup, { role: "alertdialog", "data-slot": "alert-dialog-content", "data-tone": tone, className: slots.shell({ className: [slots.popup(), className] }), ...props, children: inside }) })] }));
+}
+AlertDialogContent.displayName = 'AlertDialog.Content';
+/** A glyph in a disc of the dialog's tone, above the title. */
+function AlertDialogMedia({ className, ...props }) {
+    return _jsx("div", { "data-slot": "alert-dialog-media", "aria-hidden": "true", className: alertDialogVariants().media({ className }), ...props });
+}
+AlertDialogMedia.displayName = 'AlertDialog.Media';
+/** The question. It is what the dialog is announced as. */
+function AlertDialogTitle({ className, ...props }) {
+    const { inline } = useAlertDialog('AlertDialog.Title');
+    const slots = alertDialogVariants();
+    if (inline)
+        return _jsx("h2", { "data-slot": "alert-dialog-title", className: slots.title({ className }), ...props });
+    return _jsx(Primitive.Title, { "data-slot": "alert-dialog-title", className: slots.title({ className }), ...props });
+}
+AlertDialogTitle.displayName = 'AlertDialog.Title';
+/** What follows from each answer, read out after the title. */
+function AlertDialogDescription({ className, ...props }) {
+    const { inline } = useAlertDialog('AlertDialog.Description');
+    const slots = alertDialogVariants();
+    if (inline)
+        return _jsx("p", { "data-slot": "alert-dialog-description", className: slots.description({ className }), ...props });
+    return _jsx(Primitive.Description, { "data-slot": "alert-dialog-description", className: slots.description({ className }), ...props });
+}
+AlertDialogDescription.displayName = 'AlertDialog.Description';
+/**
+ * The answers, side by side at equal widths in the band under the panel.
+ * Keep it a direct child of `AlertDialog.Content`, so the band can find it.
+ */
+function AlertDialogFooter({ className, ...props }) {
+    return _jsx("div", { "data-slot": "alert-dialog-footer", className: alertDialogVariants().footer({ className }), ...props });
+}
+AlertDialogFooter.displayName = 'AlertDialog.Footer';
+/** Closes the dialog without doing anything. It reads "Cancel" unless given children. */
+function AlertDialogCancel({ className, children = 'Cancel', disabled, ...props }) {
+    const dialog = useAlertDialog('AlertDialog.Cancel');
+    const slots = alertDialogVariants({ weight: 'soft', actionTone: 'neutral' });
+    const button = (_jsx(Button, { variant: "ghost", "data-slot": "alert-dialog-cancel", disabled: disabled || dialog.busy, className: slots.action({ className }), ...props }));
+    if (dialog.inline)
+        return _jsx(Button, { ...button.props, children: children });
+    return _jsx(Primitive.Close, { render: button, children: children });
+}
+AlertDialogCancel.displayName = 'AlertDialog.Cancel';
+/** Holding starts on a press and ends on a release; a click on its own does nothing. */
+function useHold(duration, onDone) {
+    const [holding, setHolding] = useState(false);
+    const timer = useRef(undefined);
+    // When the last press or key went down, so a click that no press preceded,
+    // as a screen reader sends, can be told apart.
+    const pressedAt = useRef(0);
+    const done = useRef(onDone);
+    done.current = onDone;
+    const stop = useCallback(() => {
+        window.clearTimeout(timer.current);
+        setHolding(false);
+    }, []);
+    const start = useCallback(() => {
+        if (duration === undefined)
+            return;
+        pressedAt.current = Date.now();
+        window.clearTimeout(timer.current);
+        setHolding(true);
+        timer.current = window.setTimeout(() => {
+            setHolding(false);
+            done.current();
+        }, duration);
+    }, [duration]);
+    useEffect(() => () => window.clearTimeout(timer.current), []);
+    return {
+        holding,
+        pressed: () => Date.now() - pressedAt.current < (duration ?? 0) + 1000,
+        handlers: duration === undefined
+            ? {}
+            : {
+                onPointerDown: (event) => {
+                    if (event.button === 0)
+                        start();
+                },
+                onPointerUp: stop,
+                onPointerLeave: stop,
+                onPointerCancel: stop,
+                onKeyDown: (event) => {
+                    if ((event.key === ' ' || event.key === 'Enter') && !event.repeat) {
+                        // Enter would click at once; the hold decides instead.
+                        event.preventDefault();
+                        start();
+                    }
+                },
+                onKeyUp: (event) => {
+                    if (event.key === ' ' || event.key === 'Enter') {
+                        event.preventDefault();
+                        stop();
+                    }
+                },
+                onContextMenu: (event) => event.preventDefault(),
+            },
+    };
+}
+/** Does what the dialog asks about, then closes it. */
+function AlertDialogAction({ onClick, tone, variant = 'solid', hold, loading, disabled, className, children, ...props }) {
+    const dialog = useAlertDialog('AlertDialog.Action');
+    const resolvedTone = tone ?? (dialog.tone === 'destructive' ? 'destructive' : 'primary');
+    const slots = alertDialogVariants({ weight: variant, actionTone: resolvedTone });
+    const [pending, setPending] = useState(false);
+    const hintId = useId();
+    const run = (event) => {
+        const result = onClick?.(event);
+        if (event.defaultPrevented)
+            return;
+        if (result && typeof result.then === 'function') {
+            setPending(true);
+            dialog.setBusy(true);
+            result.then(() => {
+                setPending(false);
+                dialog.setBusy(false);
+                dialog.setOpen(false);
+            }, () => {
+                setPending(false);
+                dialog.setBusy(false);
+            });
+            return;
+        }
+        dialog.setOpen(false);
+    };
+    // A hold that completes acts as a click on the button would.
+    const button = useRef(null);
+    const confirmed = useRef(false);
+    const { holding, pressed, handlers } = useHold(hold, () => {
+        confirmed.current = true;
+        button.current?.click();
+    });
+    return (_jsxs(Button, { ref: button, "data-slot": "alert-dialog-action", "data-holding": holding ? '' : undefined, variant: variant === 'solid' ? (resolvedTone === 'destructive' ? 'destructive' : 'default') : 'ghost', loading: loading || pending, disabled: disabled || (dialog.busy && !pending), "aria-describedby": hold !== undefined ? hintId : undefined, className: slots.action({ className }), ...handlers, onClick: (event) => {
+            if (hold !== undefined) {
+                const wasHeld = confirmed.current;
+                confirmed.current = false;
+                // A click no press or key preceded comes from assistive technology,
+                // which cannot hold; it confirms. Any other click must be a hold.
+                if (!wasHeld && pressed())
+                    return;
+            }
+            run(event);
+        }, ...props, children: [hold !== undefined ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", "data-slot": "alert-dialog-action-fill", className: slots.fill({ className: holding ? 'scale-x-100' : undefined }), style: {
+                            transitionProperty: 'scale, transform',
+                            transitionDuration: holding ? `${hold}ms` : '250ms',
+                            transitionTimingFunction: holding ? 'linear' : 'cubic-bezier(0.2,0,0,1)',
+                        } }), _jsx("span", { id: hintId, className: "sr-only", children: "Press and hold to confirm" })] })) : null, children] }));
+}
+AlertDialogAction.displayName = 'AlertDialog.Action';
+export const AlertDialog = Object.assign(AlertDialogRoot, {
+    Trigger: AlertDialogTrigger,
+    Content: AlertDialogContent,
+    Media: AlertDialogMedia,
+    Title: AlertDialogTitle,
+    Description: AlertDialogDescription,
+    Footer: AlertDialogFooter,
+    Cancel: AlertDialogCancel,
+    Action: AlertDialogAction,
+});
+export { AlertDialogTrigger, AlertDialogContent, AlertDialogMedia, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, };

package/dist/components/button-group/index.d.ts

@@ -0,0 +1,156 @@
+/**
+ * ButtonGroup — related actions joined into one control.
+ *
+ * ```tsx
+ * <ButtonGroup aria-label="History">
+ *   <Button variant="outline">Undo</Button>
+ *   <Button variant="outline">Redo</Button>
+ * </ButtonGroup>
+ * ```
+ *
+ * ## Joining
+ *
+ * The group does not draw anything of its own. It squares the corners where
+ * two children meet and drops the border one of them would otherwise double,
+ * so outline buttons read as one strip with dividers. It does that with child
+ * selectors rather than props, so any `Button`, `Input`, `Menu.Trigger` or
+ * `Select.Trigger` placed directly inside joins without being told to.
+ *
+ * Filled buttons have no border to share, so put a `ButtonGroup.Separator`
+ * between them; without one, two primary buttons become one long button.
+ *
+ * ## Groups of groups
+ *
+ * A group whose children are groups spaces them apart instead of joining
+ * them, which is how a toolbar is built: one group per kind of action.
+ */
+import type { ComponentProps } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+export declare const buttonGroupVariants: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: {
+            root: string[];
+            separator: string;
+        };
+        vertical: {
+            root: string[];
+            separator: string;
+        };
+    };
+    /** Matches the heights of `Button` and `Input` at the same size. */
+    size: {
+        sm: {
+            text: string;
+        };
+        md: {
+            text: string;
+        };
+        lg: {
+            text: string;
+        };
+    };
+}, {
+    root: string[];
+    separator: string;
+    text: string[];
+}, undefined, {
+    orientation: {
+        horizontal: {
+            root: string[];
+            separator: string;
+        };
+        vertical: {
+            root: string[];
+            separator: string;
+        };
+    };
+    /** Matches the heights of `Button` and `Input` at the same size. */
+    size: {
+        sm: {
+            text: string;
+        };
+        md: {
+            text: string;
+        };
+        lg: {
+            text: string;
+        };
+    };
+}, {
+    root: string[];
+    separator: string;
+    text: string[];
+}, import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: {
+            root: string[];
+            separator: string;
+        };
+        vertical: {
+            root: string[];
+            separator: string;
+        };
+    };
+    /** Matches the heights of `Button` and `Input` at the same size. */
+    size: {
+        sm: {
+            text: string;
+        };
+        md: {
+            text: string;
+        };
+        lg: {
+            text: string;
+        };
+    };
+}, {
+    root: string[];
+    separator: string;
+    text: string[];
+}, undefined, unknown, unknown, undefined>>;
+export type ButtonGroupOrientation = NonNullable<VariantProps<typeof buttonGroupVariants>['orientation']>;
+export type ButtonGroupTextSize = NonNullable<VariantProps<typeof buttonGroupVariants>['size']>;
+export interface ButtonGroupProps extends ComponentProps<'div'> {
+    /** Lay the children out in a row or a column. Default `horizontal`. */
+    orientation?: ButtonGroupOrientation;
+}
+/**
+ * The group. It is a `role="group"`, so give it an `aria-label` that names
+ * what its actions have in common.
+ */
+declare function ButtonGroupRoot({ orientation, className, ...props }: ButtonGroupProps): import("react").JSX.Element;
+declare namespace ButtonGroupRoot {
+    var displayName: string;
+}
+export interface ButtonGroupSeparatorProps extends ComponentProps<'span'> {
+    /**
+     * Which way the line runs. It follows the group: a row of buttons is divided
+     * by upright lines, a column by flat ones. Default `vertical`, for a row.
+     */
+    orientation?: 'vertical' | 'horizontal';
+}
+/**
+ * A line between two children that have no border to share, such as filled
+ * buttons. It is decorative and hidden from assistive technology.
+ */
+declare function ButtonGroupSeparator({ orientation, className, ...props }: ButtonGroupSeparatorProps): import("react").JSX.Element;
+declare namespace ButtonGroupSeparator {
+    var displayName: string;
+}
+export interface ButtonGroupTextProps extends ComponentProps<'div'> {
+    /** The height, matching the buttons and fields beside it. Default `md`. */
+    size?: ButtonGroupTextSize;
+}
+/**
+ * A cell that is read rather than pressed: a prefix such as `https://`, a unit,
+ * or the value a pair of buttons changes.
+ */
+declare function ButtonGroupText({ size, className, ...props }: ButtonGroupTextProps): import("react").JSX.Element;
+declare namespace ButtonGroupText {
+    var displayName: string;
+}
+export declare const ButtonGroup: typeof ButtonGroupRoot & {
+    Separator: typeof ButtonGroupSeparator;
+    Text: typeof ButtonGroupText;
+};
+export { ButtonGroupSeparator, ButtonGroupText };

package/dist/components/button-group/index.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { tv } from 'tailwind-variants';
+export const buttonGroupVariants = tv({
+    slots: {
+        root: [
+            'flex w-fit items-stretch',
+            // A focused child draws its ring over its neighbours, not under them.
+            '*:focus-visible:relative *:focus-visible:z-10',
+            // Groups inside a group are spaced, not joined.
+            'has-[>[data-slot=button-group]]:gap-2',
+            // A field takes the room the buttons leave.
+            '[&>[data-slot=input]]:min-w-0 [&>[data-slot=input]]:flex-1',
+        ],
+        separator: 'shrink-0 self-stretch bg-border',
+        text: [
+            'flex shrink-0 items-center gap-2 whitespace-nowrap border bg-muted font-medium text-muted-foreground shadow-xs dark:bg-input/30',
+            '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',
+        ],
+    },
+    variants: {
+        orientation: {
+            horizontal: {
+                root: [
+                    '[&>*:not(:first-child)]:rounded-l-none [&>*:not(:last-child)]:rounded-r-none',
+                    '[&>*:not(:first-child)]:border-l-0',
+                ],
+                separator: 'w-px',
+            },
+            vertical: {
+                root: [
+                    'flex-col',
+                    '[&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none',
+                    '[&>*:not(:first-child)]:border-t-0',
+                ],
+                separator: 'h-px',
+            },
+        },
+        /** Matches the heights of `Button` and `Input` at the same size. */
+        size: {
+            sm: { text: 'h-8 rounded-md px-2.5 text-[0.8125rem]' },
+            md: { text: 'h-9 rounded-lg px-3 text-sm' },
+            lg: { text: 'h-11 rounded-xl px-3.5 text-[0.9375rem]' },
+        },
+    },
+    defaultVariants: { orientation: 'horizontal', size: 'md' },
+});
+/**
+ * The group. It is a `role="group"`, so give it an `aria-label` that names
+ * what its actions have in common.
+ */
+function ButtonGroupRoot({ orientation = 'horizontal', className, ...props }) {
+    return (_jsx("div", { role: "group", "data-slot": "button-group", "data-orientation": orientation, className: buttonGroupVariants({ orientation }).root({ className }), ...props }));
+}
+ButtonGroupRoot.displayName = 'ButtonGroup';
+/**
+ * A line between two children that have no border to share, such as filled
+ * buttons. It is decorative and hidden from assistive technology.
+ */
+function ButtonGroupSeparator({ orientation = 'vertical', className, ...props }) {
+    const slots = buttonGroupVariants({
+        orientation: orientation === 'vertical' ? 'horizontal' : 'vertical',
+    });
+    return (_jsx("span", { "aria-hidden": "true", "data-slot": "button-group-separator", "data-orientation": orientation, className: slots.separator({ className }), ...props }));
+}
+ButtonGroupSeparator.displayName = 'ButtonGroup.Separator';
+/**
+ * A cell that is read rather than pressed: a prefix such as `https://`, a unit,
+ * or the value a pair of buttons changes.
+ */
+function ButtonGroupText({ size, className, ...props }) {
+    return (_jsx("div", { "data-slot": "button-group-text", className: buttonGroupVariants({ size }).text({ className }), ...props }));
+}
+ButtonGroupText.displayName = 'ButtonGroup.Text';
+export const ButtonGroup = Object.assign(ButtonGroupRoot, {
+    Separator: ButtonGroupSeparator,
+    Text: ButtonGroupText,
+});
+export { ButtonGroupSeparator, ButtonGroupText };

package/dist/components/canvas/index.d.ts

@@ -0,0 +1,114 @@
+/**
+ * Canvas — a surface for other components to sit on: a field of dots, a
+ * grid or crosses, with a light that can follow the pointer across it.
+ *
+ * ```tsx
+ * <Canvas className="h-96">
+ *   <Canvas.Pattern variant="dots" />
+ *   <Canvas.Spotlight />
+ *   <Canvas.Content>…</Canvas.Content>
+ * </Canvas>
+ * ```
+ *
+ * ## Layers on one surface
+ *
+ * A canvas is a stack of layers. `Canvas.Pattern` draws marks across the
+ * whole surface, several patterns stack, `Canvas.Spotlight` lights them near
+ * the pointer, and `Canvas.Content` is what sits on top. Every layer is
+ * drawn from the same `viewport`, so a layer added later, such as ink drawn
+ * with the pointer, lines up with the pattern without measuring it.
+ *
+ * ## It moves with what is on it
+ *
+ * `viewport` takes the `{ x, y, zoom }` a Flow reports from
+ * `onViewportChange`, so the pattern pans and scales with the graph on top
+ * of it instead of staying behind as the graph slides over it.
+ *
+ * ## The light follows the hand
+ *
+ * The spotlight is a second copy of the pattern in the foreground colour,
+ * shown through a round window centred on the pointer that fades from the
+ * middle to its edge. It follows the pointer without easing, from events on
+ * the canvas itself, so it works over whatever is in the content. It is
+ * written straight to the element, once a frame, without rendering, and it
+ * fades out when the pointer leaves. On a touch screen it shows while a
+ * finger is down.
+ */
+import { type ComponentProps } from 'react';
+/** Where the canvas is looking: the same shape a Flow reports. */
+export interface CanvasViewport {
+    x: number;
+    y: number;
+    zoom: number;
+}
+/** The marks a pattern draws. */
+export type CanvasPatternVariant = 'dots' | 'grid' | 'cross';
+/** How a pattern fades out: not at all, towards every edge, or towards the bottom. */
+export type CanvasFade = 'none' | 'edges' | 'bottom';
+export interface CanvasProps extends ComponentProps<'div'> {
+    /**
+     * Where the canvas is looking, as `{ x, y, zoom }`. Pass what a Flow reports
+     * from `onViewportChange`, and the pattern pans and scales with the graph.
+     * Default `{ x: 0, y: 0, zoom: 1 }`.
+     */
+    viewport?: CanvasViewport;
+}
+declare function CanvasRoot({ viewport, className, children, ...props }: CanvasProps): import("react").JSX.Element;
+declare namespace CanvasRoot {
+    var displayName: string;
+}
+export interface CanvasPatternProps extends Omit<ComponentProps<'svg'>, 'children'> {
+    /** Dots, a grid of lines, or small crosses. Default `dots`. */
+    variant?: CanvasPatternVariant;
+    /** The distance from one mark to the next, in pixels at a zoom of 1. Default `12`, or `24` for a grid. */
+    gap?: number;
+    /** How big a mark is: a dot's radius, a line's width, half a cross's arm. Default `0.75`, `1` or `3`. */
+    size?: number;
+    /** Draws every this-many-th line or mark stronger, as on graph paper. */
+    major?: number;
+    /** Fades the pattern out towards every edge or towards the bottom. Default `none`. */
+    fade?: CanvasFade;
+    /**
+     * How strongly the marks show at rest, as a share of the foreground
+     * colour. Default `28%` for dots and crosses, `10%` for a grid.
+     */
+    strength?: string;
+}
+/** A pattern across the whole canvas, which pans and scales with its viewport. */
+declare function CanvasPattern({ variant, gap, size, major, fade, strength, className, style, ...props }: CanvasPatternProps): import("react").JSX.Element;
+declare namespace CanvasPattern {
+    var displayName: string;
+}
+export interface CanvasSpotlightProps extends Omit<ComponentProps<'div'>, 'children'> {
+    /** How far the light reaches from its centre, in pixels. Default `100`. */
+    radius?: number;
+    /**
+     * Holds the light at a point, in pixels from the canvas's top left corner,
+     * instead of following the pointer.
+     */
+    position?: {
+        x: number;
+        y: number;
+    };
+}
+/**
+ * Lights the patterns near the pointer: the marks inside the circle brighten
+ * towards the foreground colour, most at the centre.
+ */
+declare function CanvasSpotlight({ radius, position, className, style, ...props }: CanvasSpotlightProps): import("react").JSX.Element;
+declare namespace CanvasSpotlight {
+    var displayName: string;
+}
+export interface CanvasContentProps extends ComponentProps<'div'> {
+}
+/** What sits on the canvas, above its patterns and its light. */
+declare function CanvasContent({ className, ...props }: CanvasContentProps): import("react").JSX.Element;
+declare namespace CanvasContent {
+    var displayName: string;
+}
+export declare const Canvas: typeof CanvasRoot & {
+    Pattern: typeof CanvasPattern;
+    Spotlight: typeof CanvasSpotlight;
+    Content: typeof CanvasContent;
+};
+export { CanvasPattern, CanvasSpotlight, CanvasContent };