@inkra/react 0.2.0 → 0.4.3

package/dist/time-picker/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useId, useImperativeHandle, useRef, useState } from 'react';
-import { Button } from '../Button.js';
+import { forwardRef, memo, useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { Button, ButtonGroup } from '../Button.js';
 import { useResolvedControlProps } from '../form/controlProps.js';
 import { mergeAriaIds, useFieldContext } from '../form/context.js';
 import { useBrowserLayoutEffect } from '../internal/useBrowserLayoutEffect.js';
@@ -19,15 +19,19 @@ const pad = (value) => {
     return `${whole.padStart(2, '0')}${fraction ? `.${fraction}` : ''}`;
 };
 const times = (length, start = 0) => Array.from({ length }, (_, index) => index + start);
+const hourOptions24 = times(24);
+const hourOptions12 = times(12, 1);
+const minuteSecondOptions = times(60);
+const periodOptions = [0, 1];
 function partsOf(value) {
     if (!/^(?:[01]\d|2[0-3]):[0-5]\d(?::[0-5]\d(?:\.\d{1,3})?)?$/.test(value))
         return undefined;
     const [hour, minute, second = 0] = value.split(':').map(Number);
     return [hour, minute, second];
 }
-function TimeColumn({ name, label, value, options, onChange, format = pad }) {
+const TimeColumn = memo(function TimeColumn({ name, label, value, options, onChange, format = pad }) {
     return _jsx(RadioGroup, { name: name, label: label, value: String(value), variant: "segmented", className: "inkra-time-picker__column", onValueChange: next => onChange(Number(next)), children: options.map(option => _jsx(RadioGroupItem, { value: String(option), label: format(option) }, option)) });
-}
+});
 export const TimePicker = forwardRef(function TimePicker(allProps, forwardedRef) {
     const { value, defaultValue, onValueChange, onChange, onClear, clearable = true, clearButtonLabel, hourCycle = 'h24', locale, lang, showSeconds = false, step, min, max, name, form, id, disabled, readOnly, required, invalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className, style, size = 'md', fullWidth = true, startIcon, endIcon, endAction, startAction, prefix, suffix, placeholder, seed, variant = 'outline', textAlign = 'start', loading, classNames, ...nativeProps } = allProps;
     const generatedId = useId();
@@ -40,6 +44,8 @@ export const TimePicker = forwardRef(function TimePicker(allProps, forwardedRef)
     const [internalValue, setInternalValue] = useState(() => String(defaultValue ?? ''));
     const [open, setOpen] = useState(false);
     const [draft, setDraft] = useState('00:00');
+    const draftRef = useRef(draft);
+    draftRef.current = draft;
     const [draftValid, setDraftValid] = useState(true);
     const [constraintInvalid, setConstraintInvalid] = useState(false);
     useImperativeHandle(forwardedRef, () => inputRef.current);
@@ -59,16 +65,20 @@ export const TimePicker = forwardRef(function TimePicker(allProps, forwardedRef)
         : { title: 'Choose time', hour: 'Hour', minute: 'Minute', second: 'Second', period: 'Period', am: 'AM', pm: 'PM',
             done: 'Apply', cancel: 'Cancel', clear: 'Clear time', invalid: 'Choose a time within the allowed range and step.' };
     const currentParts = partsOf(currentValue);
+    const hasCurrentParts = currentParts !== undefined;
+    const formatter = useMemo(() => hasCurrentParts ? new Intl.DateTimeFormat(resolvedLocale, {
+        hour: '2-digit', minute: '2-digit', ...(secondsVisible ? { second: '2-digit' } : {}),
+        hourCycle: hourCycle === 'h12' ? 'h12' : 'h23',
+    }) : null, [resolvedLocale, secondsVisible, hourCycle, hasCurrentParts]);
     const displayValue = currentParts
-        ? new Intl.DateTimeFormat(resolvedLocale, {
-            hour: '2-digit', minute: '2-digit', ...(secondsVisible ? { second: '2-digit' } : {}),
-            hourCycle: hourCycle === 'h12' ? 'h12' : 'h23',
-        }).format(new Date(2000, 0, 1, ...currentParts))
+        ? formatter.format(new Date(2000, 0, 1, ...currentParts))
         : placeholder ?? copy.title;
     const canClear = clearable && Boolean(currentValue) && !state.disabled && !state.readOnly;
+    const buttonVariant = variant === 'soft' ? 'secondary' : variant === 'underline' ? 'outline' : variant;
+    const clearSize = size === 'sm' ? 'icon-sm' : size === 'lg' ? 'icon-lg' : 'icon';
     const valueId = field ? `${state.id}-value` : undefined;
     const [hour, minute, second] = partsOf(draft) ?? [0, 0, 0];
-    const validDraft = (candidate = draft) => {
+    const validDraft = useCallback((candidate = draftRef.current) => {
         // Native validation owns overnight ranges, fractional steps and step bases.
         const input = document.createElement('input');
         input.type = 'time';
@@ -81,7 +91,7 @@ export const TimePicker = forwardRef(function TimePicker(allProps, forwardedRef)
         input.required = true;
         input.value = candidate;
         return input.validity.valid;
-    };
+    }, [min, max, resolvedStep, stepBase]);
     const updateOpen = (next) => {
         if (next && (state.disabled || state.readOnly))
             return;
@@ -93,13 +103,21 @@ export const TimePicker = forwardRef(function TimePicker(allProps, forwardedRef)
         }
         setOpen(next);
     };
-    const updatePart = (part, next) => {
-        const values = [hour, minute, second];
+    const updatePart = useCallback((part, next) => {
+        const values = partsOf(draftRef.current) ?? [0, 0, 0];
         values[part] = next;
         const nextDraft = values.slice(0, secondsVisible ? 3 : 2).map(pad).join(':');
+        draftRef.current = nextDraft;
         setDraft(nextDraft);
         setDraftValid(validDraft(nextDraft));
-    };
+    }, [secondsVisible, validDraft]);
+    const period = hour >= 12 ? 1 : 0;
+    const hourWithinPeriod = hour % 12;
+    const changeHour = useCallback((next) => updatePart(0, hourCycle === 'h12' ? next % 12 + period * 12 : next), [hourCycle, period, updatePart]);
+    const changeMinute = useCallback((next) => updatePart(1, next), [updatePart]);
+    const changeSecond = useCallback((next) => updatePart(2, next), [updatePart]);
+    const changePeriod = useCallback((next) => updatePart(0, hourWithinPeriod + next * 12), [hourWithinPeriod, updatePart]);
+    const formatPeriod = useCallback((next) => next ? copy.pm : copy.am, [copy.pm, copy.am]);
     const commit = (next, reason) => {
         if (!controlled)
             setInternalValue(next);
@@ -107,7 +125,7 @@ export const TimePicker = forwardRef(function TimePicker(allProps, forwardedRef)
         onValueChange?.(next, { reason });
         setOpen(false);
     };
-    useEffect(() => { setDraftValid(validDraft()); }, [draft, min, max, resolvedStep, stepBase]);
+    useEffect(() => { setDraftValid(validDraft()); }, [draft, validDraft]);
     useBrowserLayoutEffect(() => {
         // React's controlled value attribute must not move the native step base on each edit.
         if (inputRef.current)
@@ -134,11 +152,11 @@ export const TimePicker = forwardRef(function TimePicker(allProps, forwardedRef)
     }, [controlled, currentValue, defaultValue, form]);
     useEffect(() => { if (state.disabled || state.readOnly)
         setOpen(false); }, [state.disabled, state.readOnly]);
-    return _jsxs(Popover.Root, { open: open, onOpenChange: updateOpen, children: [_jsxs("div", { className: ['inkra-time-picker', classNames?.root, className].filter(Boolean).join(' '), style: style, dir: nativeProps.dir, "data-full-width": fullWidth, "data-invalid": state.invalid || constraintInvalid || undefined, "data-readonly": state.readOnly || undefined, "data-disabled": state.disabled || undefined, children: [startAction, _jsx(Popover.Trigger, { asChild: true, children: _jsxs(Button, { className: ['inkra-time-picker__trigger', classNames?.control].filter(Boolean).join(' '), id: state.id, ref: triggerRef, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": mergeAriaIds(state.describedBy, valueId), "aria-invalid": constraintInvalid || state.ariaInvalid, "aria-errormessage": state.errorMessage, "aria-required": state.required || undefined, "aria-readonly": state.readOnly || undefined, disabled: state.disabled, fullWidth: true, align: textAlign, variant: variant === 'soft' ? 'secondary' : variant === 'underline' ? 'outline' : variant, size: size, seed: seed, loading: loading, autoFocus: nativeProps.autoFocus, startIcon: startIcon ?? _jsx(PencilIcon, { paths: clockPaths, sourceSize: 24, size: 22 }), endIcon: endIcon, children: [prefix, _jsx(PencilText, { children: displayValue }), suffix] }) }), valueId && _jsx("span", { className: "inkra-time-picker__accessible-value", id: valueId, children: displayValue }), clearable && _jsx(Button, { className: "inkra-time-picker__clear", "aria-label": clearButtonLabel ?? copy.clear, title: clearButtonLabel ?? copy.clear, "aria-hidden": !canClear || undefined, disabled: !canClear, tabIndex: canClear ? 0 : -1, variant: "outline", size: "icon", onClick: event => {
-                            commit('', 'clear');
-                            onClear?.(event);
-                            triggerRef.current?.focus({ preventScroll: true });
-                        }, children: _jsx(PencilIcon, { paths: clearPaths, sourceSize: 24, size: 22 }) }), endAction, _jsx("input", { ...nativeProps, ref: inputRef, type: "time", className: "inkra-time-picker__native", id: `${state.id}-native`, "aria-hidden": "true", tabIndex: -1, name: name, form: form, value: currentValue, min: min, max: max, step: resolvedStep, lang: lang ?? resolvedLocale, "data-hour-cycle": hourCycle, disabled: state.disabled, readOnly: state.readOnly, required: state.required, onChange: event => {
+    return _jsxs(Popover.Root, { open: open, onOpenChange: updateOpen, children: [_jsxs("div", { className: ['inkra-time-picker', classNames?.root, className].filter(Boolean).join(' '), style: style, dir: nativeProps.dir, "data-full-width": fullWidth, "data-invalid": state.invalid || constraintInvalid || undefined, "data-readonly": state.readOnly || undefined, "data-disabled": state.disabled || undefined, "data-size": size, children: [startAction, _jsxs(ButtonGroup, { "aria-label": copy.title, className: ['inkra-time-picker__control', classNames?.control].filter(Boolean).join(' '), "data-size": size, fullWidth: fullWidth, size: size, variant: buttonVariant, children: [_jsx(Popover.Trigger, { asChild: true, children: _jsxs(Button, { className: "inkra-time-picker__trigger", id: state.id, ref: triggerRef, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": mergeAriaIds(state.describedBy, valueId), "aria-invalid": constraintInvalid || state.ariaInvalid, "aria-errormessage": state.errorMessage, "aria-required": state.required || undefined, "aria-readonly": state.readOnly || undefined, disabled: state.disabled, fullWidth: fullWidth, align: textAlign, seed: seed, loading: loading, autoFocus: nativeProps.autoFocus, startIcon: startIcon ?? _jsx(PencilIcon, { paths: clockPaths, sourceSize: 24, size: 22 }), endIcon: endIcon, children: [prefix, _jsx(PencilText, { children: displayValue }), suffix] }) }), clearable && _jsx(Button, { className: "inkra-time-picker__clear", "aria-label": clearButtonLabel ?? copy.clear, title: clearButtonLabel ?? copy.clear, "aria-hidden": !canClear || undefined, disabled: !canClear, tabIndex: canClear ? 0 : -1, variant: "ghost", size: clearSize, onPointerDown: event => event.preventDefault(), onClick: event => {
+                                    commit('', 'clear');
+                                    onClear?.(event);
+                                    triggerRef.current?.focus({ preventScroll: true });
+                                }, children: _jsx(PencilIcon, { paths: clearPaths, sourceSize: 24, size: 22 }) })] }), valueId && _jsx("span", { className: "inkra-time-picker__accessible-value", id: valueId, children: displayValue }), endAction, _jsx("input", { ...nativeProps, ref: inputRef, type: "time", className: "inkra-time-picker__native", id: `${state.id}-native`, "aria-hidden": "true", tabIndex: -1, name: name, form: form, value: currentValue, min: min, max: max, step: resolvedStep, lang: lang ?? resolvedLocale, "data-hour-cycle": hourCycle, disabled: state.disabled, readOnly: state.readOnly, required: state.required, onChange: event => {
                             if (!controlled)
                                 setInternalValue(event.currentTarget.value);
                             onChange?.(event);
@@ -161,7 +179,7 @@ export const TimePicker = forwardRef(function TimePicker(allProps, forwardedRef)
                             (content?.querySelector('input:checked')
                                 ?? content?.querySelector('input'))?.focus({ preventScroll: true });
                         });
-                    }, children: [_jsx(Popover.Title, { children: copy.title }), _jsx(PencilLine, {}), _jsxs("div", { className: "inkra-time-picker__columns", children: [_jsx(TimeColumn, { name: `${generatedId}-hour`, label: copy.hour, value: hourCycle === 'h12' ? hour % 12 || 12 : hour, options: hourCycle === 'h12' ? times(12, 1) : times(24), onChange: next => updatePart(0, hourCycle === 'h12' ? next % 12 + (hour >= 12 ? 12 : 0) : next) }), _jsx(TimeColumn, { name: `${generatedId}-minute`, label: copy.minute, value: minute, options: times(60), onChange: next => updatePart(1, next) }), secondsVisible && _jsx(TimeColumn, { name: `${generatedId}-second`, label: copy.second, value: Math.floor(second), options: times(60), onChange: next => updatePart(2, next) }), hourCycle === 'h12' && _jsx(TimeColumn, { name: `${generatedId}-period`, label: copy.period, value: hour >= 12 ? 1 : 0, options: [0, 1], format: next => next ? copy.pm : copy.am, onChange: next => updatePart(0, hour % 12 + next * 12) })] }), !draftValid && _jsx(PencilText, { as: "p", className: "inkra-time-picker__error", role: "status", children: copy.invalid }), _jsx(PencilLine, {}), _jsxs("div", { className: "inkra-time-picker__footer", children: [_jsx(Popover.Close, { asChild: true, children: _jsx(Button, { variant: "outline", children: copy.cancel }) }), _jsx(Button, { disabled: !draftValid || state.disabled || state.readOnly, onClick: () => {
+                    }, children: [_jsx(Popover.Title, { children: copy.title }), _jsx(PencilLine, {}), _jsxs("div", { className: "inkra-time-picker__columns", children: [_jsx(TimeColumn, { name: `${generatedId}-hour`, label: copy.hour, value: hourCycle === 'h12' ? hour % 12 || 12 : hour, options: hourCycle === 'h12' ? hourOptions12 : hourOptions24, onChange: changeHour }), _jsx(TimeColumn, { name: `${generatedId}-minute`, label: copy.minute, value: minute, options: minuteSecondOptions, onChange: changeMinute }), secondsVisible && _jsx(TimeColumn, { name: `${generatedId}-second`, label: copy.second, value: Math.floor(second), options: minuteSecondOptions, onChange: changeSecond }), hourCycle === 'h12' && _jsx(TimeColumn, { name: `${generatedId}-period`, label: copy.period, value: period, options: periodOptions, format: formatPeriod, onChange: changePeriod })] }), !draftValid && _jsx(PencilText, { as: "p", className: "inkra-time-picker__error", role: "status", children: copy.invalid }), _jsx(PencilLine, {}), _jsxs("div", { className: "inkra-time-picker__footer", children: [_jsx(Popover.Close, { asChild: true, children: _jsx(Button, { variant: "outline", children: copy.cancel }) }), _jsx(Button, { disabled: !draftValid || state.disabled || state.readOnly, onClick: () => {
                                         if (validDraft())
                                             commit(draft, 'input');
                                     }, children: copy.done })] })] }) })] });

package/dist/toast/index.d.ts

@@ -1,27 +1,35 @@
-import { Toast as BaseToast } from '@base-ui/react/toast';
-import type { ToastManager as BaseToastManager } from '@base-ui/react/toast';
 import type { ReactNode } from 'react';
-export type ToastPlacement = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+import { createToastManager } from './manager.js';
+import type { ToastManager, ToastObject, ToastPlacement, ToastVariant } from './manager.js';
+export { createToastManager } from './manager.js';
+export type { ToastManager, ToastObject, ToastPlacement, ToastVariant, ToastAddOptions, ToastUpdateOptions, ToastPromiseOptions } from './manager.js';
 export type ToastTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info';
 export type ToastSwipeDirection = 'up' | 'down' | 'left' | 'right';
-export type ToastManager<Data extends object = any> = BaseToastManager<Data>;
 export interface ToastProviderProps {
     children?: ReactNode;
     timeout?: number;
     limit?: number;
     toastManager?: ToastManager;
     placement?: ToastPlacement;
+    variant?: ToastVariant;
+    /** Per-position overrides; limit otherwise applies independently to every queue. */
+    limits?: Partial<Record<ToastPlacement, number>>;
     swipeDirection?: ToastSwipeDirection | ToastSwipeDirection[];
     closeLabel?: string;
-    viewportLabel?: string;
+    viewportLabel?: string | ((placement: ToastPlacement) => string);
     viewportClassName?: string;
 }
-declare function Provider({ children, closeLabel, limit, placement, swipeDirection, timeout, toastManager, viewportClassName, viewportLabel, }: ToastProviderProps): import("react").JSX.Element;
-export declare const useToastManager: typeof BaseToast.useToastManager;
-export declare const createToastManager: typeof BaseToast.createToastManager;
+declare function Provider({ children, closeLabel, limit, limits, placement, variant, swipeDirection, timeout, toastManager, viewportClassName, viewportLabel, }: ToastProviderProps): import("react").JSX.Element;
+export declare function useToastManager<Data extends object = any>(): {
+    toasts: ToastObject<Data>[];
+    add: <T extends Data = Data>(options: import("./manager.js").ToastAddOptions<T>) => string;
+    update: <T extends Data = Data>(id: string, options: import("./manager.js").ToastUpdateOptions<T> | ((previous: ToastObject<T>) => import("./manager.js").ToastUpdateOptions<T>)) => void;
+    close: (id?: string) => void;
+    closeAll: (placement?: ToastPlacement) => void;
+    promise: <Value, T extends Data = Data>(value: Promise<Value>, options: import("./manager.js").ToastPromiseOptions<Value, T>) => Promise<Value>;
+};
 export declare const Toast: {
     Provider: typeof Provider;
-    useToastManager: typeof BaseToast.useToastManager;
-    createToastManager: typeof BaseToast.createToastManager;
+    useToastManager: typeof useToastManager;
+    createToastManager: typeof createToastManager;
 };
-export {};

package/dist/toast/index.js

@@ -1,10 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Toast as BaseToast } from '@base-ui/react/toast';
+import { createContext, useContext, useEffect, useMemo, useState, useSyncExternalStore } from 'react';
 import { Button } from '../Button.js';
 import { PencilIcon } from '../PencilIcon.js';
 import { PencilSurface } from '../PencilSurface.js';
 import { PencilText } from '../PencilText.js';
+import { useBrowserLayoutEffect } from '../internal/useBrowserLayoutEffect.js';
 import { PortalThemeBridge, PortalThemeProvider, usePortalTriggerRef, } from '../overlay/themeBridge.js';
+import { createToastManager, getToastRouter, toastPlacements } from './manager.js';
+import { useToastNavigation } from './useToastNavigation.js';
+export { createToastManager } from './manager.js';
+const ManagerContext = createContext(null);
+const emptyToasts = [];
+const getServerSnapshot = () => emptyToasts;
 const closePaths = [
     { d: 'M6 6 18 18' },
     { d: 'M18 6 6 18' },
@@ -13,6 +21,8 @@ function text(content) {
     return typeof content === 'string' ? _jsx(PencilText, { children: content }) : content;
 }
 function toneOf(type) {
+    if (type === 'error')
+        return 'danger';
     return type === 'success' || type === 'warning' || type === 'danger' || type === 'info'
         ? type
         : 'neutral';
@@ -21,16 +31,46 @@ function ToastThemeAnchor() {
     const ref = usePortalTriggerRef(null);
     return _jsx("span", { "aria-hidden": "true", className: "inkra-toast__theme-anchor", ref: ref });
 }
-function ToastQueue({ closeLabel, placement, swipeDirection, viewportClassName, viewportLabel, }) {
-    const { toasts } = BaseToast.useToastManager();
-    return (_jsx(BaseToast.Portal, { children: _jsx(PortalThemeBridge, { children: _jsx(BaseToast.Viewport, { "aria-label": viewportLabel, className: ['inkra-toast__viewport', viewportClassName].filter(Boolean).join(' '), "data-placement": placement, children: toasts.map((toastItem) => {
+function ToastDefaults({ manager, placement, variant }) {
+    const router = getToastRouter(manager);
+    useBrowserLayoutEffect(() => { router.defaults = { placement, variant }; }, [router, placement, variant]);
+    return null;
+}
+function ToastQueue({ closeLabel, placement, swipeDirection, viewportClassName, viewportLabel, manager, }) {
+    const controller = BaseToast.useToastManager();
+    const { toasts } = controller;
+    const router = getToastRouter(manager);
+    useBrowserLayoutEffect(() => { router.controllers.set(placement, controller); }, [router, placement, controller]);
+    useBrowserLayoutEffect(() => () => { router.controllers.delete(placement); }, [router, placement]);
+    useBrowserLayoutEffect(() => { router.report(placement, toasts); }, [router, placement, toasts]);
+    useEffect(() => () => { router.report(placement, emptyToasts); }, [router, placement]);
+    const directions = swipeDirection ?? (placement.startsWith('top') ? ['up', 'left', 'right'] : placement.startsWith('bottom') ? ['down', 'left', 'right'] : ['left', 'right']);
+    if (!toasts.length)
+        return null;
+    return (_jsx(BaseToast.Portal, { children: _jsx(PortalThemeBridge, { children: _jsx(BaseToast.Viewport, { ref: element => { if (element)
+                    router.viewports.set(placement, element);
+                else
+                    router.viewports.delete(placement); }, "aria-label": typeof viewportLabel === 'function' ? viewportLabel(placement) : viewportLabel, className: ['inkra-toast__viewport', viewportClassName].filter(Boolean).join(' '), "data-placement": placement, children: toasts.map((toastItem) => {
                     const tone = toneOf(toastItem.type);
-                    return (_jsxs(BaseToast.Root, { className: "inkra-toast__root", "data-tone": tone, swipeDirection: swipeDirection, toast: toastItem, children: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-toast__surface", seed: `toast-${toastItem.id}-${toastItem.updateKey ?? 0}`, variant: tone === 'neutral' ? 'paper' : 'quiet' }), _jsxs(BaseToast.Content, { className: "inkra-toast__content", children: [_jsxs("div", { className: "inkra-toast__copy", children: [toastItem.title != null && (_jsx(BaseToast.Title, { className: "inkra-toast__title", children: text(toastItem.title) })), toastItem.description != null && (_jsx(BaseToast.Description, { className: "inkra-toast__description", children: text(toastItem.description) }))] }), _jsxs("div", { className: "inkra-toast__actions", children: [toastItem.actionProps?.children != null && (_jsx(BaseToast.Action, { className: "inkra-toast__action", render: _jsx(Button, { size: "sm", variant: "outline" }) })), _jsx(BaseToast.Close, { "aria-label": closeLabel, className: "inkra-toast__close", render: _jsx(Button, { size: "icon-sm", variant: "ghost" }), children: _jsx(PencilIcon, { paths: closePaths, size: 20, sourceSize: 24, decorative: true }) })] })] })] }, toastItem.id));
+                    const variant = !toastItem.variant || toastItem.variant === 'auto'
+                        ? (/^(top|bottom)-(start|end)$/.test(placement) ? 'card' : 'compact')
+                        : toastItem.variant;
+                    return (_jsxs(BaseToast.Root, { className: "inkra-toast__root", "data-tone": tone, "data-variant": variant, "data-toast-id": toastItem.id, swipeDirection: directions, toast: toastItem, children: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-toast__surface", seed: `toast-${toastItem.id}`, variant: variant === 'compact' ? 'full' : tone === 'neutral' ? 'paper' : 'quiet' }), variant === 'compact' && _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-toast__wash", seed: `toast-wash-${toastItem.id}`, variant: "selection" }), _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-toast__focus", seed: `toast-focus-${toastItem.id}`, variant: "outline" }), _jsxs(BaseToast.Content, { className: "inkra-toast__content", children: [_jsxs("div", { className: "inkra-toast__copy", children: [toastItem.title != null && (_jsx(BaseToast.Title, { className: "inkra-toast__title", children: text(toastItem.title) })), toastItem.description != null && (_jsx(BaseToast.Description, { className: "inkra-toast__description", children: text(toastItem.description) }))] }), _jsxs("div", { className: "inkra-toast__actions", children: [toastItem.actionProps?.children != null && (_jsx(BaseToast.Action, { className: "inkra-toast__action", render: _jsx(Button, { size: "sm", variant: "outline" }) })), _jsx(BaseToast.Close, { "aria-label": closeLabel, className: "inkra-toast__close", render: _jsx(Button, { size: "icon-sm", variant: "ghost" }), children: _jsx(PencilIcon, { paths: closePaths, size: 20, sourceSize: 24, decorative: true }) })] })] })] }, toastItem.id));
                 }) }) }) }));
 }
-function Provider({ children, closeLabel = 'Close notification', limit, placement = 'bottom-end', swipeDirection = ['down', 'right'], timeout, toastManager, viewportClassName, viewportLabel = 'Notifications', }) {
-    return (_jsx(PortalThemeProvider, { children: _jsxs(BaseToast.Provider, { limit: limit, timeout: timeout, toastManager: toastManager, children: [_jsx(ToastThemeAnchor, {}), children, _jsx(ToastQueue, { closeLabel: closeLabel, placement: placement, swipeDirection: swipeDirection, viewportClassName: viewportClassName, viewportLabel: viewportLabel })] }) }));
+function Provider({ children, closeLabel = 'Close notification', limit, limits, placement = 'bottom-end', variant = 'auto', swipeDirection, timeout, toastManager, viewportClassName, viewportLabel = 'Notifications', }) {
+    const [localManager] = useState(() => createToastManager());
+    const manager = toastManager ?? localManager;
+    const router = getToastRouter(manager);
+    useToastNavigation(manager);
+    return (_jsx(PortalThemeProvider, { children: _jsxs(ManagerContext.Provider, { value: manager, children: [_jsx(ToastDefaults, { manager: manager, placement: placement, variant: variant }), _jsx(ToastThemeAnchor, {}), toastPlacements.map(position => (_jsx(BaseToast.Provider, { limit: limits?.[position] ?? limit, timeout: timeout, toastManager: router.queues[position], children: _jsx(ToastQueue, { manager: manager, closeLabel: closeLabel, placement: position, swipeDirection: swipeDirection, viewportClassName: viewportClassName, viewportLabel: viewportLabel }) }, position))), children] }) }));
+}
+export function useToastManager() {
+    const manager = useContext(ManagerContext);
+    if (!manager)
+        throw new Error('useToastManager must be used within Toast.Provider.');
+    const router = getToastRouter(manager);
+    const toasts = useSyncExternalStore(router.subscribe, router.getSnapshot, getServerSnapshot);
+    return useMemo(() => ({ ...manager, toasts }), [manager, toasts]);
 }
-export const useToastManager = BaseToast.useToastManager;
-export const createToastManager = BaseToast.createToastManager;
 export const Toast = { Provider, useToastManager, createToastManager };

package/dist/toast/manager.d.ts

@@ -0,0 +1,42 @@
+import type { ToastManagerAddOptions as BaseAddOptions, ToastManagerUpdateOptions as BaseUpdateOptions, ToastManagerPromiseOptions as BasePromiseOptions, ToastObject as BaseToastObject } from '@base-ui/react/toast';
+export declare const toastPlacements: readonly ["top-start", "top-center", "top-end", "center-start", "center", "center-end", "bottom-start", "bottom-center", "bottom-end"];
+export type ToastPlacement = typeof toastPlacements[number];
+export type ToastVariant = 'auto' | 'card' | 'compact';
+export type ToastObject<Data extends object = any> = BaseToastObject<Data> & {
+    placement?: ToastPlacement;
+    variant?: ToastVariant;
+};
+export type ToastAddOptions<Data extends object = any> = BaseAddOptions<Data> & {
+    placement?: ToastPlacement;
+    variant?: ToastVariant;
+};
+export type ToastUpdateOptions<Data extends object = any> = BaseUpdateOptions<Data> & {
+    variant?: ToastVariant;
+};
+export type ToastPromiseOptions<Value, Data extends object = any> = BasePromiseOptions<Value, Data> & {
+    placement?: ToastPlacement;
+    variant?: ToastVariant;
+};
+export interface ToastManager<Data extends object = any> {
+    add: <T extends Data = Data>(options: ToastAddOptions<T>) => string;
+    update: <T extends Data = Data>(id: string, options: ToastUpdateOptions<T> | ((previous: ToastObject<T>) => ToastUpdateOptions<T>)) => void;
+    close: (id?: string) => void;
+    closeAll: (placement?: ToastPlacement) => void;
+    promise: <Value, T extends Data = Data>(value: Promise<Value>, options: ToastPromiseOptions<Value, T>) => Promise<Value>;
+}
+export declare function getToastRouter(manager: ToastManager): {
+    queues: Record<"center" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "top-center" | "center-start" | "center-end" | "bottom-center", import("@base-ui/react/toast").ToastManager<object>>;
+    controllers: Map<"center" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "top-center" | "center-start" | "center-end" | "bottom-center", import("@base-ui/react/toast").UseToastManagerReturnValue<object>>;
+    engine: (placement: ToastPlacement) => import("@base-ui/react/toast").ToastManager<object> | import("@base-ui/react/toast").UseToastManagerReturnValue<object>;
+    viewports: Map<"center" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "top-center" | "center-start" | "center-end" | "bottom-center", HTMLElement>;
+    owners: Map<string, "center" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "top-center" | "center-start" | "center-end" | "bottom-center">;
+    defaults: {
+        placement: ToastPlacement;
+        variant: ToastVariant;
+    };
+    getSnapshot: () => ToastObject<any>[];
+    subscribe(listener: () => void): () => void;
+    report(placement: ToastPlacement, toasts: ToastObject[]): void;
+};
+/** Routes notifications; Base UI still owns each queue, timer and lifecycle. */
+export declare function createToastManager<Data extends object = any>(): ToastManager<Data>;

package/dist/toast/manager.js

@@ -0,0 +1,85 @@
+import { Toast as BaseToast } from '@base-ui/react/toast';
+export const toastPlacements = [
+    'top-start', 'top-center', 'top-end',
+    'center-start', 'center', 'center-end',
+    'bottom-start', 'bottom-center', 'bottom-end',
+];
+function createRouter() {
+    const queues = Object.fromEntries(toastPlacements.map(placement => [placement, BaseToast.createToastManager()]));
+    const controllers = new Map();
+    const snapshots = new Map();
+    const owners = new Map();
+    const listeners = new Set();
+    let snapshot = [];
+    return {
+        queues,
+        controllers,
+        engine: (placement) => controllers.get(placement) ?? queues[placement],
+        viewports: new Map(),
+        owners,
+        defaults: { placement: 'bottom-end', variant: 'auto' },
+        getSnapshot: () => snapshot,
+        subscribe(listener) {
+            listeners.add(listener);
+            return () => { listeners.delete(listener); };
+        },
+        report(placement, toasts) {
+            if (snapshots.get(placement) === toasts)
+                return;
+            const currentIds = new Set(toasts.map(toast => toast.id));
+            for (const previous of snapshots.get(placement) ?? []) {
+                if (!currentIds.has(previous.id))
+                    owners.delete(previous.id);
+            }
+            for (const toast of toasts)
+                owners.set(toast.id, placement);
+            snapshots.set(placement, toasts);
+            snapshot = toastPlacements.flatMap(position => snapshots.get(position) ?? []);
+            listeners.forEach(listener => listener());
+        },
+    };
+}
+const routers = new WeakMap();
+export function getToastRouter(manager) {
+    const router = routers.get(manager);
+    if (!router)
+        throw new Error('Use createToastManager from @inkra/react with Toast.Provider.');
+    return router;
+}
+/** Routes notifications; Base UI still owns each queue, timer and lifecycle. */
+export function createToastManager() {
+    const router = createRouter();
+    const manager = {
+        add(options) {
+            // An upsert stays in its original queue, even if the default position changed.
+            const placement = (options.id && router.owners.get(options.id)) || options.placement || router.defaults.placement;
+            const id = router.engine(placement).add({ ...options, placement, variant: options.variant ?? router.defaults.variant });
+            router.owners.set(id, placement);
+            return id;
+        },
+        update(id, options) {
+            for (const placement of toastPlacements)
+                router.engine(placement).update(id, options);
+        },
+        close(id) {
+            for (const placement of toastPlacements)
+                router.engine(placement).close(id);
+        },
+        closeAll(placement) {
+            if (placement)
+                router.engine(placement).close();
+            else
+                manager.close();
+        },
+        promise(value, options) {
+            const placement = options.placement ?? router.defaults.placement;
+            const loading = typeof options.loading === 'string' ? { title: options.loading } : options.loading;
+            return router.engine(placement).promise(value, {
+                ...options,
+                loading: { ...loading, placement, variant: options.variant ?? router.defaults.variant },
+            });
+        },
+    };
+    routers.set(manager, router);
+    return manager;
+}

package/dist/toast/useToastNavigation.d.ts

@@ -0,0 +1,3 @@
+import type { ToastManager } from './manager.js';
+/** Coordinate F6 once: native per-queue listeners would otherwise compete for focus. */
+export declare function useToastNavigation(manager: ToastManager): void;

package/dist/toast/useToastNavigation.js

@@ -0,0 +1,75 @@
+import { useEffect } from 'react';
+import { getToastRouter, toastPlacements } from './manager.js';
+/** Coordinate F6 once: native per-queue listeners would otherwise compete for focus. */
+export function useToastNavigation(manager) {
+    useEffect(() => {
+        const router = getToastRouter(manager);
+        let returnTarget = null;
+        let focusedToastElement = null;
+        const restore = () => {
+            if (returnTarget?.isConnected)
+                returnTarget.focus({ preventScroll: true });
+            returnTarget = null;
+        };
+        const focusin = (event) => {
+            const target = event.target;
+            if ([...router.viewports.values()].some(viewport => viewport.contains(target))) {
+                focusedToastElement = target;
+            }
+            else {
+                focusedToastElement = null;
+                returnTarget = null;
+            }
+        };
+        const unsubscribe = router.subscribe(() => {
+            if (returnTarget && focusedToastElement && !focusedToastElement.isConnected && document.activeElement === document.body)
+                restore();
+        });
+        const focusable = (viewport) => Array.from(viewport.querySelectorAll('button:not(:disabled), a[href], input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex="0"]')).filter(element => element.getClientRects().length && !element.closest('[inert], [data-ending-style], [data-limited]'));
+        const keydown = (event) => {
+            const viewports = toastPlacements.map(placement => router.viewports.get(placement))
+                .filter((viewport) => !!viewport?.isConnected && focusable(viewport).length > 0);
+            if (!viewports.length)
+                return;
+            const active = document.activeElement;
+            const index = viewports.findIndex(viewport => viewport.contains(active));
+            if (event.key === 'F6' && !event.altKey && !event.ctrlKey && !event.metaKey) {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+                if (index === -1)
+                    returnTarget = active;
+                const next = index === -1 ? (event.shiftKey ? viewports.length - 1 : 0)
+                    : (index + (event.shiftKey ? -1 : 1) + viewports.length) % viewports.length;
+                focusable(viewports[next])[0]?.focus({ preventScroll: true });
+            }
+            else if (index !== -1 && returnTarget && event.key === 'Tab') {
+                const items = focusable(viewports[index]);
+                if ((event.shiftKey && items[0] === active) || (!event.shiftKey && items[items.length - 1] === active)) {
+                    event.preventDefault();
+                    event.stopImmediatePropagation();
+                    restore();
+                }
+            }
+            else if (index !== -1 && returnTarget && event.key === 'Escape') {
+                const toast = active?.closest('[data-toast-id]');
+                if (!toast?.dataset.toastId)
+                    return;
+                event.preventDefault();
+                event.stopImmediatePropagation();
+                manager.close(toast.dataset.toastId);
+                const next = focusable(viewports[index]).find(element => !toast.contains(element));
+                if (next)
+                    next.focus({ preventScroll: true });
+                else
+                    restore();
+            }
+        };
+        window.addEventListener('keydown', keydown, true);
+        document.addEventListener('focusin', focusin, true);
+        return () => {
+            unsubscribe();
+            window.removeEventListener('keydown', keydown, true);
+            document.removeEventListener('focusin', focusin, true);
+        };
+    }, [manager]);
+}

package/dist/tokens.css

@@ -166,6 +166,10 @@
   --inkra-z-tooltip: 40;
 
   --inkra-stroke-width: 2px;
+  --inkra-icon-stroke-width: 1.5px;
+  --inkra-icon-breaks: 0.18;
+  --inkra-icon-break-count: 1;
+  --inkra-icon-pressure-variation: 0.82;
   --inkra-stroke-variation: 0.82;
   --inkra-stroke-grain: 0.7;
   --inkra-stroke-breaks: 0.2;

package/dist/tooltip/Tooltip.d.ts

@@ -7,7 +7,7 @@ export declare function TooltipRoot(props: TooltipRootProps): import("react").JS
 export type TooltipTriggerProps = TooltipPrimitive.TooltipTriggerProps;
 export declare const TooltipTrigger: import("react").ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
 export type TooltipPortalProps = TooltipPrimitive.TooltipPortalProps;
-export declare function TooltipPortal({ children, ...props }: TooltipPortalProps): import("react").JSX.Element;
+export declare function TooltipPortal({ children, ...props }: TooltipPortalProps): import("react").ReactNode;
 export interface TooltipContentProps extends TooltipPrimitive.TooltipContentProps {
     seed?: string | number;
     surfaceClassName?: string;

package/dist/tooltip/Tooltip.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { forwardRef, useId } from 'react';
-import { PortalThemeBridge, PortalThemeProvider, usePortalTriggerRef } from '../overlay/themeBridge.js';
+import { mapPortalChildren, PortalThemeProvider, usePortalThemeProps, usePortalTriggerRef } from '../overlay/themeBridge.js';
 import { PencilSurface } from '../PencilSurface.js';
 import { PencilText } from '../PencilText.js';
 function classes(...values) {
@@ -16,14 +16,15 @@ export const TooltipTrigger = forwardRef(function TooltipTrigger(props, forwarde
     return _jsx(TooltipPrimitive.Trigger, { ...props, ref: ref });
 });
 export function TooltipPortal({ children, ...props }) {
-    return (_jsx(TooltipPrimitive.Portal, { ...props, children: _jsx(PortalThemeBridge, { children: children }) }));
+    return mapPortalChildren(children, child => _jsx(TooltipPrimitive.Portal, { ...props, children: child }));
 }
-export const TooltipContent = forwardRef(function TooltipContent({ children, className, seed, sideOffset = 6, surfaceClassName, surfaceRadius = 6, surfaceVariant = 'paper', ...props }, ref) {
+export const TooltipContent = forwardRef(function TooltipContent({ children, className, collisionPadding = 8, seed, sideOffset = 6, surfaceClassName, surfaceRadius = 6, surfaceVariant = 'paper', ...props }, ref) {
     const generatedId = useId();
+    props = usePortalThemeProps(props);
     const resolvedSeed = seed ?? `inkra-tooltip-${generatedId}`;
-    return (_jsx(TooltipPrimitive.Content, { ...props, className: classes('inkra-tooltip__content', className), ref: ref, sideOffset: sideOffset, children: _jsx(PencilSurface, { className: classes('inkra-tooltip__surface', surfaceClassName), radius: surfaceRadius, seed: resolvedSeed, variant: surfaceVariant, children: _jsx("div", { className: "inkra-tooltip__content-body", children: typeof children === 'string' ? (_jsx(PencilText, { seed: `${resolvedSeed}-text`, children: children })) : children }) }) }));
+    return (_jsx(TooltipPrimitive.Content, { ...props, className: classes('inkra-tooltip__content', className), collisionPadding: collisionPadding, ref: ref, sideOffset: sideOffset, children: _jsx(PencilSurface, { className: classes('inkra-tooltip__surface', surfaceClassName), radius: surfaceRadius, seed: resolvedSeed, variant: surfaceVariant, children: _jsx("div", { className: "inkra-tooltip__content-body", children: typeof children === 'string' ? (_jsx(PencilText, { seed: `${resolvedSeed}-text`, children: children })) : children }) }) }));
 });
-export const Tooltip = Object.freeze({
+export const Tooltip = /* @__PURE__ */ Object.freeze({
     Provider: TooltipProvider,
     Root: TooltipRoot,
     Trigger: TooltipTrigger,

package/dist/transfer/index.d.ts

@@ -28,6 +28,8 @@ export interface TransferLabels {
     moveSelectedToTarget?: string;
     moveSelectedToSource?: string;
     batchActions?: string;
+    previousPage?: string;
+    nextPage?: string;
 }
 export interface TransferCountDetails {
     side: TransferSide;
@@ -58,6 +60,9 @@ export interface TransferProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onC
     filterItem?: (item: TransferItem, query: string, side: TransferSide) => boolean;
     renderItem?: (item: TransferItem, state: TransferItemRenderState) => ReactNode;
     formatCount?: (details: TransferCountDetails) => ReactNode;
+    /** Opt-in panel pagination. All items remain searchable and movable. */
+    pageSize?: number;
+    pageLabel?: (page: number, pageCount: number) => ReactNode;
 }
 export declare const Transfer: import("react").ForwardRefExoticComponent<TransferProps & import("react").RefAttributes<HTMLDivElement>>;
 export { moveTransferKeys, normalizeTargetKeys, splitTransferItems, uniqueTransferItems } from './model.js';