panelui-web 0.10.0 → 0.11.0

package/dist/components/toast/dither.js

@@ -0,0 +1,153 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+/*
+ * The ordered dither the toast's versions are drawn with.
+ *
+ * A coverage level picks the cells of the 4×4 Bayer matrix that are on, and
+ * one SVG tile of those cells, as a CSS mask, cuts an element down to an even
+ * dither, as the timer bar is drawn. The card sweep thresholds a tone per
+ * column against the same matrix on a canvas.
+ */
+/** The 4×4 Bayer matrix, as thresholds 0–15. */
+const BAYER = [
+    [0, 8, 2, 10],
+    [12, 4, 14, 6],
+    [3, 11, 1, 9],
+    [15, 7, 13, 5],
+];
+/** Levels a mask can take: 0 hides everything, 16 shows everything. */
+export const LEVELS = 16;
+const tiles = new Map();
+/** A CSS `url()` of one tile showing the cells lit at `level` (0–16). */
+function tile(level) {
+    const cached = tiles.get(level);
+    if (cached)
+        return cached;
+    let rects = '';
+    for (let y = 0; y < 4; y++) {
+        for (let x = 0; x < 4; x++) {
+            if (BAYER[y][x] < level)
+                rects += `<rect x='${x}' y='${y}' width='1' height='1'/>`;
+        }
+    }
+    const url = `url("data:image/svg+xml,${encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' shape-rendering='crispEdges'>${rects}</svg>`)}")`;
+    tiles.set(level, url);
+    return url;
+}
+/** Masks an element to an even dither at `level` (0–16), in cells of `cell` px. Full or empty need no mask. */
+export function maskStyle(level, cell = 2) {
+    const clamped = Math.max(0, Math.min(LEVELS, Math.round(level)));
+    if (clamped >= LEVELS)
+        return {};
+    const image = clamped === 0 ? 'linear-gradient(transparent, transparent)' : tile(clamped);
+    const size = `${cell * 4}px ${cell * 4}px`;
+    return {
+        maskImage: image,
+        WebkitMaskImage: image,
+        maskSize: size,
+        WebkitMaskSize: size,
+        maskRepeat: 'repeat',
+        WebkitMaskRepeat: 'repeat',
+    };
+}
+export function prefersReducedMotion() {
+    return typeof window !== 'undefined' && window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+}
+/** How wide the band of dither cells behind the head is, as a share of the card's width. */
+const BAND = 0.34;
+/** The width of one column of cells, in px: about a character, so the card is built as the text is. */
+const COLUMN = 8;
+/**
+ * Builds a card out of dither cells the way a line of text is built: a head
+ * moves across it, the columns it has just passed arrive as solid cells in
+ * the accent, and they thin out through the dither to show the card. On the
+ * way out the columns thicken into solid cells and go, from the start edge.
+ *
+ * Returns a mask for the card, which shows only what the head has passed (or
+ * what the tail has not), and a canvas of the cells, to sit over the card.
+ */
+export function useCardSweep(phase, duration) {
+    const [progress, setProgress] = useState(phase === 'done' ? 1 : 0);
+    useEffect(() => {
+        if (phase === 'done')
+            return;
+        if (prefersReducedMotion()) {
+            setProgress(1);
+            return;
+        }
+        const began = performance.now();
+        let frame = 0;
+        const tick = (time) => {
+            const t = Math.min(1, (time - began) / duration);
+            setProgress(t);
+            if (t < 1)
+                frame = requestAnimationFrame(tick);
+        };
+        setProgress(0);
+        frame = requestAnimationFrame(tick);
+        return () => cancelAnimationFrame(frame);
+    }, [phase, duration]);
+    // The head (arriving) or the tail (leaving), in units of the card's width.
+    const edge = progress * (1 + BAND);
+    let mask = {};
+    if (phase === 'in' && progress < 1) {
+        const image = `linear-gradient(to right, #000 ${edge * 100}%, transparent ${edge * 100}%)`;
+        mask = { maskImage: image, WebkitMaskImage: image };
+    }
+    else if (phase === 'out') {
+        const tail = Math.max(0, edge - BAND);
+        const image = `linear-gradient(to right, transparent ${tail * 100}%, #000 ${tail * 100}%)`;
+        mask = { maskImage: image, WebkitMaskImage: image };
+    }
+    const sweeping = phase !== 'done' && progress > 0 && progress < 1;
+    return { mask, progress, edge, sweeping };
+}
+/** The cells of a card sweep, drawn over the card in `color`. */
+export function SweepCells({ phase, edge, color, className, }) {
+    const canvas = useRef(null);
+    useEffect(() => {
+        const node = canvas.current;
+        const context = node?.getContext('2d');
+        if (!node || !context)
+            return;
+        node.style.color = color;
+        const ink = getComputedStyle(node).color;
+        const ratio = window.devicePixelRatio || 1;
+        const width = node.clientWidth;
+        const height = node.clientHeight;
+        if (node.width !== Math.round(width * ratio))
+            node.width = Math.round(width * ratio);
+        if (node.height !== Math.round(height * ratio))
+            node.height = Math.round(height * ratio);
+        context.setTransform(ratio, 0, 0, ratio, 0, 0);
+        context.clearRect(0, 0, width, height);
+        if (phase === 'done' || width === 0)
+            return;
+        context.fillStyle = ink;
+        const dot = 2;
+        const head = edge * width;
+        const band = BAND * width;
+        for (let column = 0; column * COLUMN < width; column++) {
+            const x = column * COLUMN;
+            // How far through its change this column is: 1 just behind the head, 0 at the band's far end.
+            const distance = phase === 'in' ? (head - (x + COLUMN)) / band : (x - (head - band)) / band;
+            if (distance < 0 || distance > 1)
+                continue;
+            // Arriving, a column starts solid and thins; leaving, it thickens to solid and goes.
+            const tone = phase === 'in' ? 1 - distance : 1 - distance;
+            for (let y = 0; y < height; y += dot) {
+                for (let dx = 0; dx < COLUMN; dx += dot) {
+                    const threshold = BAYER[(y / dot) % 4][((x + dx) / dot) % 4];
+                    if (tone * LEVELS > threshold + 0.5)
+                        context.fillRect(x + dx, y, dot, dot);
+                }
+            }
+        }
+        // The caret rides the head on the way in, as it does on a line of text.
+        if (phase === 'in' && head > 0 && head < width) {
+            context.fillRect(Math.round(head) - 1, Math.round(height * 0.18), 2, Math.round(height * 0.64));
+        }
+    }, [phase, edge, color]);
+    return _jsx("canvas", { ref: canvas, "aria-hidden": "true", className: className });
+}

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

@@ -0,0 +1,108 @@
+/**
+ * Toast — a short message about something that just happened, which leaves on its own.
+ *
+ * ```tsx
+ * <Toast.Provider position="bottom-right">
+ *   <App />
+ * </Toast.Provider>
+ *
+ * const toast = useToast();
+ * toast.add({ title: 'Invoice sent', description: 'Harbour Bakery will get it in a minute.', type: 'success' });
+ * toast.promise(save(), { loading: 'Saving draft', success: 'Draft saved', error: 'Could not save' });
+ * ```
+ *
+ * ## The title changes through dither
+ *
+ * A toast's title is not swapped. When it arrives, it resolves out of a row of
+ * dither cells from the start, with a caret riding the edge, the way a line
+ * types itself onto a terminal. When it changes — a save going on to say
+ * "Draft saved" where it said "Saving draft" — the old words dim, turn
+ * monospace, are eaten by an ordered dither and the new ones resolve through
+ * the same cells, so a reader
+ * sees that this is the same toast with news, not a second one. When it
+ * leaves, it dissolves back into the cells before the card fades.
+ *
+ * The cells and caret are drawn in the toast's colour; the settled text is the
+ * ordinary foreground, so it reads as text and not as a highlight. With
+ * reduced motion turned on, the title changes in place.
+ *
+ * ## Versions
+ *
+ * `effect` on the provider picks one of three. `type`, the default, does the
+ * above to the title alone. `materialize` brings the whole card in through an
+ * ordered dither first, and only then resolves its title and description
+ * through the dither cells, so the toast builds itself in two steps; leaving,
+ * the words dissolve and then the card does. `timer` adds a dithered bar along
+ * the bottom that runs down the toast's time and pauses while the stack is open.
+ *
+ * ## The mark is a dither cell too
+ *
+ * Beside the title, a small square of ordered dither says what kind of toast
+ * it is: filled solid in the success, info, warning or destructive colour, or
+ * cycling through its densities while a `loading` toast waits.
+ *
+ * ## Stacked, then spread
+ *
+ * Several toasts stack into one, with the ones behind peeking out under it.
+ * Hovering or focusing the stack spreads them into a list, and pauses their
+ * timers while it is open. A toast can be swiped away towards the nearest edge.
+ *
+ * ## Announced, not focused
+ *
+ * Toasts are read out by a screen reader as they arrive, politely by default
+ * and at once for `priority: 'high'`, without moving focus. F6 moves focus to
+ * the stack, so its buttons can be reached from the keyboard. Anything that
+ * needs an answer before the reader moves on belongs in an Alert Dialog.
+ */
+import { Toast as BaseToast } from '@base-ui/react/toast';
+import { type ReactNode } from 'react';
+export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+export type ToastType = 'default' | 'success' | 'info' | 'warning' | 'destructive' | 'loading';
+export type ToastEffect = 'type' | 'materialize' | 'timer';
+/** What a toast can carry in `data`. */
+export interface ToastData {
+    /** Which dither this one toast is drawn with, overriding the provider's `effect`. */
+    effect?: ToastEffect;
+}
+export interface ToastProviderProps extends Omit<BaseToast.Provider.Props, 'children'> {
+    /** Which corner or edge of the screen the toasts gather at. Default `bottom-right`. */
+    position?: ToastPosition;
+    /**
+     * Draws the stack where the provider is, in the flow of the page, instead
+     * of pinned to a corner of the screen. For a preview or a thumbnail.
+     */
+    inline?: boolean;
+    /**
+     * How the toasts are dithered. `type` writes the title through dither
+     * cells. `materialize` dithers the whole card in, then resolves its title and
+     * description through dither inside it, and runs the same backwards when it
+     * leaves. `timer` writes the title as `type` does and runs a dithered bar down
+     * the toast's time. One toast can choose its own with `data: { effect }`.
+     * Default `type`.
+     */
+    effect?: ToastEffect;
+    children?: ReactNode;
+}
+/**
+ * Holds the toasts and draws them. Put it once near the root; `useToast()`
+ * works anywhere inside it. Takes `timeout` (ms, default 5000, `0` to stay),
+ * `limit` (default 3) and a `toastManager` from `createToaster()` for
+ * toasts raised outside React.
+ */
+declare function ToastProvider({ position, inline, effect, children, ...props }: ToastProviderProps): import("react").JSX.Element;
+declare namespace ToastProvider {
+    var displayName: string;
+}
+/**
+ * Raises, updates and closes toasts. `add({ title, description, type, timeout,
+ * actionProps })` returns an id; `update(id, …)` changes one in place, and its
+ * title dissolves into the new one; `promise(p, { loading, success, error })`
+ * follows a promise through the three; `close(id)` dismisses one, or all.
+ */
+export declare const useToast: typeof BaseToast.useToastManager;
+/** A toast manager for code outside React. Pass it to `Toast.Provider` as `toastManager`. */
+export declare const createToaster: typeof BaseToast.createToastManager;
+export declare const Toast: {
+    Provider: typeof ToastProvider;
+};
+export { ToastProvider };

package/dist/components/toast/index.js

@@ -0,0 +1,225 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Toast — a short message about something that just happened, which leaves on its own.
+ *
+ * ```tsx
+ * <Toast.Provider position="bottom-right">
+ *   <App />
+ * </Toast.Provider>
+ *
+ * const toast = useToast();
+ * toast.add({ title: 'Invoice sent', description: 'Harbour Bakery will get it in a minute.', type: 'success' });
+ * toast.promise(save(), { loading: 'Saving draft', success: 'Draft saved', error: 'Could not save' });
+ * ```
+ *
+ * ## The title changes through dither
+ *
+ * A toast's title is not swapped. When it arrives, it resolves out of a row of
+ * dither cells from the start, with a caret riding the edge, the way a line
+ * types itself onto a terminal. When it changes — a save going on to say
+ * "Draft saved" where it said "Saving draft" — the old words dim, turn
+ * monospace, are eaten by an ordered dither and the new ones resolve through
+ * the same cells, so a reader
+ * sees that this is the same toast with news, not a second one. When it
+ * leaves, it dissolves back into the cells before the card fades.
+ *
+ * The cells and caret are drawn in the toast's colour; the settled text is the
+ * ordinary foreground, so it reads as text and not as a highlight. With
+ * reduced motion turned on, the title changes in place.
+ *
+ * ## Versions
+ *
+ * `effect` on the provider picks one of three. `type`, the default, does the
+ * above to the title alone. `materialize` brings the whole card in through an
+ * ordered dither first, and only then resolves its title and description
+ * through the dither cells, so the toast builds itself in two steps; leaving,
+ * the words dissolve and then the card does. `timer` adds a dithered bar along
+ * the bottom that runs down the toast's time and pauses while the stack is open.
+ *
+ * ## The mark is a dither cell too
+ *
+ * Beside the title, a small square of ordered dither says what kind of toast
+ * it is: filled solid in the success, info, warning or destructive colour, or
+ * cycling through its densities while a `loading` toast waits.
+ *
+ * ## Stacked, then spread
+ *
+ * Several toasts stack into one, with the ones behind peeking out under it.
+ * Hovering or focusing the stack spreads them into a list, and pauses their
+ * timers while it is open. A toast can be swiped away towards the nearest edge.
+ *
+ * ## Announced, not focused
+ *
+ * Toasts are read out by a screen reader as they arrive, politely by default
+ * and at once for `priority: 'high'`, without moving focus. F6 moves focus to
+ * the stack, so its buttons can be reached from the keyboard. Anything that
+ * needs an answer before the reader moves on belongs in an Alert Dialog.
+ */
+import { Toast as BaseToast } from '@base-ui/react/toast';
+import { useEffect, useState } from 'react';
+import { tv } from 'tailwind-variants';
+import { maskStyle, prefersReducedMotion, SweepCells, useCardSweep } from './dither.js';
+import { DitherText } from './dither-text.js';
+const toastVariants = tv({
+    slots: {
+        viewport: [
+            'fixed z-[60] flex w-[calc(100%-2*var(--toast-inset))] max-w-[22.5rem] outline-none [--toast-inset:1rem] sm:[--toast-inset:1.5rem]',
+            'data-[position^=top]:top-(--toast-inset) data-[position^=bottom]:bottom-(--toast-inset)',
+            'data-[position$=left]:left-(--toast-inset) data-[position$=right]:right-(--toast-inset)',
+            'data-[position$=center]:left-1/2 data-[position$=center]:-translate-x-1/2',
+        ],
+        // In place, for a preview: as tall as the front toast, in the flow of the page.
+        inlineViewport: 'relative w-full max-w-[22.5rem] [--toast-inset:0px] h-(--toast-frontmost-height,5rem) min-h-16',
+        root: [
+            'group/toast absolute inset-x-0 z-[calc(100-var(--toast-index))] select-none',
+            'rounded-xl border bg-popover text-popover-foreground shadow-lg shadow-black/5 dark:shadow-black/30',
+            '[--gap:0.625rem] [--peek:0.5rem] [--shrink:calc(var(--toast-index)*0.05)]',
+            // Collapsed, every toast is as tall as the front one, so the ones behind show only as edges.
+            'h-(--toast-frontmost-height,var(--toast-height)) data-expanded:h-(--toast-height)',
+            '[transition:transform_0.45s_cubic-bezier(0.22,1,0.36,1),opacity_0.3s,height_0.2s]',
+            'data-[position^=bottom]:bottom-0 data-[position^=bottom]:origin-bottom',
+            'data-[position^=top]:top-0 data-[position^=top]:origin-top',
+            // Collapsed: peeking out behind the front one, a little smaller each.
+            'data-[position^=bottom]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-var(--toast-index)*var(--peek)))_scale(calc(1-var(--shrink)))]',
+            'data-[position^=top]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+var(--toast-index)*var(--peek)))_scale(calc(1-var(--shrink)))]',
+            // Spread: each at its own place in the list.
+            'data-[position^=bottom]:data-expanded:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-var(--toast-offset-y)-var(--toast-index)*var(--gap)))]',
+            'data-[position^=top]:data-expanded:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+var(--toast-offset-y)+var(--toast-index)*var(--gap)))]',
+            // A bridge over the gap, so moving the pointer between spread toasts does not collapse them.
+            "after:absolute after:inset-x-0 after:h-(--gap) after:content-[''] data-[position^=bottom]:after:top-full data-[position^=top]:after:bottom-full",
+            // Arriving from the edge it is pinned to.
+            'data-[position^=bottom]:data-starting-style:transform-[translateY(calc(100%+var(--toast-inset)))]',
+            'data-[position^=top]:data-starting-style:transform-[translateY(calc(-100%-var(--toast-inset)))]',
+            'data-starting-style:opacity-0 data-limited:opacity-0',
+            // Leaving: the title dissolves first, then the card fades. A swipe goes at once.
+            'data-ending-style:opacity-0 data-ending-style:not-data-swipe-direction:[transition-delay:0s,0.32s,0s]',
+            // Materialize holds the card until its text and then the card itself have dithered out.
+            'data-[effect=materialize]:data-ending-style:not-data-swipe-direction:[transition-delay:0s,0.9s,0s]',
+            'data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))]',
+            'data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))]',
+            'data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]',
+            'data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]',
+            'motion-reduce:transition-[opacity]',
+        ],
+        // A layer under or over the content, clipped to the card's corners.
+        surface: 'pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit]',
+        timer: 'absolute inset-x-0 bottom-0 h-[3px] origin-left bg-(--toast-color) group-data-expanded/toast:[animation-play-state:paused] motion-reduce:[animation:none!important]',
+        content: [
+            'relative flex items-start gap-3 overflow-hidden p-4 transition-opacity duration-200',
+            // Behind the front one, collapsed, its content would show through the edge.
+            'not-data-expanded:data-behind:opacity-0',
+        ],
+        mark: 'mt-[0.3125rem] grid size-2.5 shrink-0 grid-cols-2 grid-rows-2 gap-px text-(--toast-color)',
+        body: 'flex min-w-0 flex-1 flex-col gap-1',
+        title: 'text-sm font-medium leading-5 text-foreground',
+        description: 'text-[0.8125rem] leading-5 text-muted-foreground',
+        action: [
+            'inline-flex h-7 shrink-0 cursor-pointer items-center rounded-md border bg-background px-2.5 text-xs font-medium text-foreground shadow-xs outline-none',
+            'hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring dark:bg-input/30',
+        ],
+        close: [
+            'relative -me-1 -mt-1 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground outline-none',
+            'opacity-0 transition-opacity group-hover/toast:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring',
+            'hover:bg-accent hover:text-foreground pointer-coarse:opacity-100',
+        ],
+    },
+});
+/** The colour each type's mark and dither are drawn in. */
+const COLOR = {
+    default: 'var(--foreground)',
+    success: 'var(--success)',
+    info: 'var(--info)',
+    warning: 'var(--warning)',
+    destructive: 'var(--destructive)',
+    loading: 'var(--info)',
+};
+/** The order the mark's four cells light in while loading: a 2×2 Bayer matrix, read as thresholds. */
+const BAYER_2 = [0, 2, 3, 1];
+function Mark({ type }) {
+    const slots = toastVariants();
+    const loading = type === 'loading';
+    return (_jsx("span", { "data-slot": "toast-mark", "aria-hidden": "true", className: slots.mark(), children: BAYER_2.map((threshold, index) => (_jsx("span", { className: loading ? 'rounded-[1px] bg-current motion-safe:animate-pulse' : 'rounded-[1px] bg-current', style: loading ? { animationDelay: `${threshold * 0.25}s`, animationDuration: '1s' } : undefined }, index))) }));
+}
+function swipeOf(position) {
+    const vertical = position.startsWith('top') ? 'up' : 'down';
+    if (position.endsWith('center'))
+        return [vertical];
+    return [position.endsWith('left') ? 'left' : 'right', vertical];
+}
+function textOf(node) {
+    return typeof node === 'string' || typeof node === 'number' ? String(node) : null;
+}
+const DEFAULT_TIMEOUT = 5000;
+/** The keyframes the timer bar runs on, written once per provider. */
+const KEYFRAMES = '@keyframes panelui-toast-timer{from{transform:scaleX(1)}to{transform:scaleX(0)}}' +
+    '@keyframes panelui-toast-sweep{from{transform:translateX(-100%)}to{transform:translateX(250%)}}';
+/** How long the card takes to dither in or out, in `materialize`. */
+const CARD_MS = 520;
+/** How long the text takes to dissolve before the card follows it out. */
+const TEXT_OUT_MS = 380;
+/**
+ * A line of text that is held at its full size while it dithers in and out,
+ * so the toast keeps its height and the stack does not jump as letters arrive.
+ */
+function Dithered({ text, show, accent, caret }) {
+    return (_jsxs("span", { className: "grid", children: [_jsx("span", { "aria-hidden": "true", className: "invisible col-start-1 row-start-1", children: text }), _jsx("span", { className: "col-start-1 row-start-1", children: _jsx(DitherText, { text: show ? text : '', accent: accent, caret: caret }) })] }));
+}
+function ToastItem({ toast, index, position, swipe, effect: fallback, timeout: defaultTimeout, }) {
+    const slots = toastVariants();
+    const type = toast.type && toast.type in COLOR ? toast.type : 'default';
+    const effect = toast.data?.effect ?? fallback;
+    const title = textOf(toast.title);
+    const leaving = toast.transitionStatus === 'ending';
+    const timeout = toast.timeout ?? defaultTimeout;
+    const description = textOf(toast.description);
+    const materialize = effect === 'materialize';
+    // Materialize runs in order: the card dithers in, then its text resolves
+    // through dither; leaving, the text dissolves first and the card follows.
+    const [textIn, setTextIn] = useState(!materialize || prefersReducedMotion());
+    const [cardOut, setCardOut] = useState(false);
+    useEffect(() => {
+        if (textIn)
+            return;
+        const timer = setTimeout(() => setTextIn(true), CARD_MS);
+        return () => clearTimeout(timer);
+    }, [textIn]);
+    useEffect(() => {
+        if (!materialize || !leaving)
+            return;
+        const timer = setTimeout(() => setCardOut(true), prefersReducedMotion() ? 0 : TEXT_OUT_MS);
+        return () => clearTimeout(timer);
+    }, [materialize, leaving]);
+    const phase = !materialize ? 'done' : cardOut ? 'out' : textIn ? 'done' : 'in';
+    const sweep = useCardSweep(phase, CARD_MS);
+    const showText = textIn && !leaving;
+    return (_jsxs(BaseToast.Root, { toast: toast, swipeDirection: swipe, "data-slot": "toast", "data-type": type, "data-effect": effect, "data-position": position, "data-behind": index > 0 ? '' : undefined, className: slots.root(), style: { '--toast-color': COLOR[type], ...sweep.mask }, children: [materialize && phase !== 'done' ? (_jsx("span", { "aria-hidden": "true", className: slots.surface({ className: 'z-20' }), children: _jsx(SweepCells, { phase: phase, edge: sweep.edge, color: COLOR[type], className: "absolute inset-0 size-full" }) })) : null, _jsxs(BaseToast.Content, { className: slots.content(), children: [_jsx(Mark, { type: type }), _jsxs("div", { className: slots.body(), children: [_jsx(BaseToast.Title, { "data-slot": "toast-title", className: slots.title(), children: title !== null ? _jsx(Dithered, { text: title, show: showText, accent: COLOR[type] }) : toast.title }), toast.description ? (_jsx(BaseToast.Description, { "data-slot": "toast-description", className: slots.description(), children: materialize && description !== null ? (_jsx(Dithered, { text: description, show: showText, accent: COLOR[type], caret: false })) : (toast.description) })) : null] }), toast.actionProps ? _jsx(BaseToast.Action, { "data-slot": "toast-action", className: slots.action() }) : null, _jsx(BaseToast.Close, { "data-slot": "toast-close", "aria-label": "Dismiss", className: slots.close(), children: _jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", fill: "none", className: "size-3.5", children: _jsx("path", { d: "M4.5 4.5l7 7m0-7l-7 7", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round" }) }) })] }), effect === 'timer' ? (_jsx("span", { "aria-hidden": "true", className: slots.surface(), children: timeout > 0 ? (_jsx("span", { "data-slot": "toast-timer", className: slots.timer(), style: { ...maskStyle(10, 1), animation: `panelui-toast-timer ${timeout}ms linear forwards` } }, toast.updateKey ?? 0)) : (_jsx("span", { "data-slot": "toast-timer", className: slots.timer({ className: 'w-2/5 origin-center' }), style: { ...maskStyle(10, 1), animation: 'panelui-toast-sweep 1.4s cubic-bezier(0.45,0,0.55,1) infinite' } })) })) : null] }));
+}
+function ToastList({ position, inline, effect, timeout, }) {
+    const { toasts } = BaseToast.useToastManager();
+    const slots = toastVariants();
+    const swipe = swipeOf(position);
+    const viewport = (_jsxs(BaseToast.Viewport, { "data-slot": "toast-viewport", "data-position": position, "data-inline": inline ? '' : undefined, className: inline ? slots.inlineViewport() : slots.viewport(), children: [_jsx("style", { children: KEYFRAMES }), toasts.map((toast, index) => (_jsx(ToastItem, { toast: toast, index: index, position: position, swipe: swipe, effect: effect, timeout: timeout }, toast.id)))] }));
+    return inline ? viewport : _jsx(BaseToast.Portal, { children: viewport });
+}
+/**
+ * Holds the toasts and draws them. Put it once near the root; `useToast()`
+ * works anywhere inside it. Takes `timeout` (ms, default 5000, `0` to stay),
+ * `limit` (default 3) and a `toastManager` from `createToaster()` for
+ * toasts raised outside React.
+ */
+function ToastProvider({ position = 'bottom-right', inline = false, effect = 'type', children, ...props }) {
+    return (_jsxs(BaseToast.Provider, { ...props, children: [children, _jsx(ToastList, { position: position, inline: inline, effect: effect, timeout: props.timeout ?? DEFAULT_TIMEOUT })] }));
+}
+ToastProvider.displayName = 'Toast.Provider';
+/**
+ * Raises, updates and closes toasts. `add({ title, description, type, timeout,
+ * actionProps })` returns an id; `update(id, …)` changes one in place, and its
+ * title dissolves into the new one; `promise(p, { loading, success, error })`
+ * follows a promise through the three; `close(id)` dismisses one, or all.
+ */
+export const useToast = BaseToast.useToastManager;
+/** A toast manager for code outside React. Pass it to `Toast.Provider` as `toastManager`. */
+export const createToaster = BaseToast.createToastManager;
+export const Toast = { Provider: ToastProvider };
+export { ToastProvider };

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

@@ -1,5 +1,11 @@
 import { Toolbar as BaseToolbar } from '@base-ui/react/toolbar';
 import { type ComponentProps, type CSSProperties, type ReactElement, type ReactNode } from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { ElementType as RenderElementType } from 'react';
+/** Draws a part as another element, or composes it with a component: `render={<a href="/" />}`. */
+type RenderProp<Tag extends RenderElementType> = {
+    render?: useRender.ComponentProps<Tag>['render'];
+};
 export type ToolbarVariant = 'floating' | 'inline';
 export type ToolbarSize = 'sm' | 'md' | 'lg';
 declare const toolbarVariants: import("tailwind-variants").TVReturnType<{
@@ -58,7 +64,7 @@ declare const toolbarVariants: import("tailwind-variants").TVReturnType<{
     caret: string[];
     tooltip: string[];
     kbd: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
         floating: {
             root: string[];
@@ -86,7 +92,7 @@ declare const toolbarVariants: import("tailwind-variants").TVReturnType<{
     caret: string[];
     tooltip: string[];
     kbd: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export interface ToolbarProps extends Omit<BaseToolbar.Root.Props, 'className' | 'style'> {
     /** `floating` sits on a raised surface of its own; `inline` draws only the buttons. Default `floating`. */
     variant?: ToolbarVariant;
@@ -171,7 +177,7 @@ declare namespace ToolbarSeparator {
 export interface ToolbarCaretProps extends ComponentProps<'span'> {
 }
 /** A small chevron after a tool's icon, saying it opens more choices. */
-declare function ToolbarCaret({ className, children, ...props }: ToolbarCaretProps): import("react").JSX.Element;
+declare function ToolbarCaret({ className, children, render, ...props }: ToolbarCaretProps & RenderProp<'span'>): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace ToolbarCaret {
     var displayName: string;
 }

package/dist/components/toolbar/index.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * Toolbar — a strip of tools and actions for an editor: one tool chosen at a
  * time, and buttons that act at once.
@@ -42,6 +42,8 @@ import { Toolbar as BaseToolbar } from '@base-ui/react/toolbar';
 import { Tooltip } from '@base-ui/react/tooltip';
 import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { tv } from 'tailwind-variants';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
 const toolbarVariants = tv({
     slots: {
         root: [
@@ -101,9 +103,15 @@ const toolbarVariants = tv({
             inline: {},
         },
         size: {
-            sm: { root: '[--toolbar-item:1.75rem] [--toolbar-icon:0.875rem] [--toolbar-radius:0.5rem] [--toolbar-pad:0.25rem]' },
-            md: { root: '[--toolbar-item:2.25rem] [--toolbar-icon:1.125rem] [--toolbar-radius:0.75rem] [--toolbar-pad:0.3125rem]' },
-            lg: { root: '[--toolbar-item:2.75rem] [--toolbar-icon:1.25rem] [--toolbar-radius:0.875rem] [--toolbar-pad:0.375rem]' },
+            sm: {
+                root: '[--toolbar-item:1.75rem] [--toolbar-icon:0.875rem] [--toolbar-radius:0.5rem] [--toolbar-pad:0.25rem]',
+            },
+            md: {
+                root: '[--toolbar-item:2.25rem] [--toolbar-icon:1.125rem] [--toolbar-radius:0.75rem] [--toolbar-pad:0.3125rem]',
+            },
+            lg: {
+                root: '[--toolbar-item:2.75rem] [--toolbar-icon:1.25rem] [--toolbar-radius:0.875rem] [--toolbar-pad:0.375rem]',
+            },
         },
     },
     defaultVariants: { variant: 'floating', size: 'md' },
@@ -255,9 +263,18 @@ function ToolbarSeparator({ className, ...props }) {
 }
 ToolbarSeparator.displayName = 'Toolbar.Separator';
 /** A small chevron after a tool's icon, saying it opens more choices. */
-function ToolbarCaret({ className, children, ...props }) {
+function ToolbarCaret({ className, children, render, ...props }) {
     const slots = toolbarVariants();
-    return (_jsx("span", { "aria-hidden": true, "data-slot": "toolbar-caret", className: slots.caret({ className }), ...props, children: children ?? (_jsx("svg", { viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.8, strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M3.5 4.75 6 7.25l2.5-2.5" }) })) }));
+    return useRender({
+        defaultTagName: 'span',
+        render,
+        props: mergeProps({
+            'aria-hidden': true,
+            'data-slot': 'toolbar-caret',
+            className: slots.caret({ className }),
+            children: (_jsx(_Fragment, { children: children ?? (_jsx("svg", { viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.8, strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M3.5 4.75 6 7.25l2.5-2.5" }) })) })),
+        }, props),
+    });
 }
 ToolbarCaret.displayName = 'Toolbar.Caret';
 export const Toolbar = Object.assign(ToolbarRoot, {