@a-type/ui 3.0.44 → 3.1.0-beta.5

package/dist/esm/components/provider/Provider.js

@@ -6,7 +6,7 @@ import { useVirtualKeyboardBehavior } from '../../hooks/useVirtualKeyboardBehavi
 import { IconSpritesheet } from '../icon/index.js';
 import { ParticleLayer } from '../particles/index.js';
 import { PwaInstall } from '../pwaInstall/PwaInstall.js';
-import { Toaster } from '../toasts/toasts.js';
+import { DefaultToastProvider, Toaster } from '../toasts/toasts.js';
 import { TooltipProvider } from '../tooltip/index.js';
 /**
  * Provides all the stuff for all global junk.
@@ -20,8 +20,8 @@ export function Provider({ children, disableParticles, disableViewportOffset, vi
     useThemedTitleBar('gray', 'wash', undefined, disableTitleBarColor);
     const otherStuff = (_jsxs(_Fragment, { children: [_jsx(IconSpritesheet, {}), _jsx(Toaster, {}), _jsx(PwaInstall, { manifestPath: manifestPath })] }));
     if (disableParticles)
-        return (_jsx(ConfigContext.Provider, { value: { virtualKeyboardBehavior: supportedVirtualKeyboardBehavior }, children: _jsxs(TooltipProvider, { children: [children, otherStuff] }) }));
-    return (_jsx(ConfigContext.Provider, { value: { virtualKeyboardBehavior: supportedVirtualKeyboardBehavior }, children: _jsx(TooltipProvider, { children: _jsxs(ParticleLayer, { children: [children, otherStuff] }) }) }));
+        return (_jsx(ConfigContext.Provider, { value: { virtualKeyboardBehavior: supportedVirtualKeyboardBehavior }, children: _jsx(DefaultToastProvider, { children: _jsxs(TooltipProvider, { children: [children, otherStuff] }) }) }));
+    return (_jsx(ConfigContext.Provider, { value: { virtualKeyboardBehavior: supportedVirtualKeyboardBehavior }, children: _jsx(DefaultToastProvider, { children: _jsx(TooltipProvider, { children: _jsxs(ParticleLayer, { children: [children, otherStuff] }) }) }) }));
 }
 export const ConfigContext = createContext({
     virtualKeyboardBehavior: 'displace',

package/dist/esm/components/provider/Provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Provider.js","sourceRoot":"","sources":["../../../../src/components/provider/Provider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAa,UAAU,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;AAC5E,OAAO,EAAE,0BAA0B,EAAE,MAAM,2CAA2C,CAAC;AACvF,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAWtD;;GAEG;AACH,MAAM,UAAU,QAAQ,CAAC,EACxB,QAAQ,EACR,gBAAgB,EAChB,qBAAqB,EACrB,uBAAuB,GAAG,UAAU,EACpC,oBAAoB,EACpB,YAAY,GACG;IACf,uBAAuB,CAAC,qBAAqB,CAAC,CAAC;IAC/C,MAAM,gCAAgC,GACrC,OAAO,SAAS,KAAK,WAAW,IAAI,iBAAiB,IAAI,SAAS;QACjE,CAAC,CAAC,uBAAuB;QACzB,CAAC,CAAC,UAAU,CAAC;IACf,0BAA0B,CAAC,gCAAgC,CAAC,CAAC;IAC7D,iBAAiB,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,oBAAoB,CAAC,CAAC;IACnE,MAAM,UAAU,GAAG,CAClB,8BACC,KAAC,eAAe,KAAG,EACnB,KAAC,OAAO,KAAG,EACX,KAAC,UAAU,IAAC,YAAY,EAAE,YAAY,GAAI,IACxC,CACH,CAAC;IAEF,IAAI,gBAAgB;QACnB,OAAO,CACN,KAAC,aAAa,CAAC,QAAQ,IACtB,KAAK,EAAE,EAAE,uBAAuB,EAAE,gCAAgC,EAAE,YAEpE,MAAC,eAAe,eACd,QAAQ,EACR,UAAU,IACM,GACM,CACzB,CAAC;IAEH,OAAO,CACN,KAAC,aAAa,CAAC,QAAQ,IACtB,KAAK,EAAE,EAAE,uBAAuB,EAAE,gCAAgC,EAAE,YAEpE,KAAC,eAAe,cACf,MAAC,aAAa,eACZ,QAAQ,EACR,UAAU,IACI,GACC,GACM,CACzB,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAEvC;IACF,uBAAuB,EAAE,UAAU;CACnC,CAAC,CAAC;AAEH,MAAM,UAAU,SAAS;IACxB,OAAO,UAAU,CAAC,aAAa,CAAC,CAAC;AAClC,CAAC"}
+{"version":3,"file":"Provider.js","sourceRoot":"","sources":["../../../../src/components/provider/Provider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAa,UAAU,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;AAC5E,OAAO,EAAE,0BAA0B,EAAE,MAAM,2CAA2C,CAAC;AACvF,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AACpE,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAWtD;;GAEG;AACH,MAAM,UAAU,QAAQ,CAAC,EACxB,QAAQ,EACR,gBAAgB,EAChB,qBAAqB,EACrB,uBAAuB,GAAG,UAAU,EACpC,oBAAoB,EACpB,YAAY,GACG;IACf,uBAAuB,CAAC,qBAAqB,CAAC,CAAC;IAC/C,MAAM,gCAAgC,GACrC,OAAO,SAAS,KAAK,WAAW,IAAI,iBAAiB,IAAI,SAAS;QACjE,CAAC,CAAC,uBAAuB;QACzB,CAAC,CAAC,UAAU,CAAC;IACf,0BAA0B,CAAC,gCAAgC,CAAC,CAAC;IAC7D,iBAAiB,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,oBAAoB,CAAC,CAAC;IACnE,MAAM,UAAU,GAAG,CAClB,8BACC,KAAC,eAAe,KAAG,EACnB,KAAC,OAAO,KAAG,EACX,KAAC,UAAU,IAAC,YAAY,EAAE,YAAY,GAAI,IACxC,CACH,CAAC;IAEF,IAAI,gBAAgB;QACnB,OAAO,CACN,KAAC,aAAa,CAAC,QAAQ,IACtB,KAAK,EAAE,EAAE,uBAAuB,EAAE,gCAAgC,EAAE,YAEpE,KAAC,oBAAoB,cACpB,MAAC,eAAe,eACd,QAAQ,EACR,UAAU,IACM,GACI,GACC,CACzB,CAAC;IAEH,OAAO,CACN,KAAC,aAAa,CAAC,QAAQ,IACtB,KAAK,EAAE,EAAE,uBAAuB,EAAE,gCAAgC,EAAE,YAEpE,KAAC,oBAAoB,cACpB,KAAC,eAAe,cACf,MAAC,aAAa,eACZ,QAAQ,EACR,UAAU,IACI,GACC,GACI,GACC,CACzB,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAEvC;IACF,uBAAuB,EAAE,UAAU;CACnC,CAAC,CAAC;AAEH,MAAM,UAAU,SAAS;IACxB,OAAO,UAAU,CAAC,aAAa,CAAC,CAAC;AAClC,CAAC"}

package/dist/esm/components/toasts/toasts.d.ts

@@ -1,5 +1,36 @@
-export type * from 'react-hot-toast';
-export { toast } from 'react-hot-toast';
-export declare const Toaster: (props: {
-    className?: string;
-}) => import("react").ReactPortal | null;
+import { Toast, ToastManagerAddOptions, ToastManagerPromiseOptions } from '@base-ui/react/toast';
+import { ReactNode } from 'react';
+import { ButtonProps } from '../button/index.js';
+export declare const manager: import("@base-ui/react/toast").ToastManager;
+export declare const DefaultToastProvider: ({ children, ...rest }: {
+    children?: React.ReactNode;
+    timeout?: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare function Toaster(): import("react/jsx-runtime").JSX.Element;
+export interface CustomToastData {
+    actions?: {
+        label: ReactNode;
+        onClick: () => void;
+        emphasis?: ButtonProps['emphasis'];
+        color?: ButtonProps['color'];
+    }[];
+    loading?: boolean;
+}
+export interface ToastOptions extends ToastManagerAddOptions<CustomToastData> {
+    /** @deprecated - use timeout */
+    duration?: number;
+}
+declare function baseToast(messageOrOptions: string | ToastOptions, maybeOptions?: ToastOptions): string;
+export declare const toast: typeof baseToast & {
+    success(messageOrOptions: string | ToastOptions, maybeOptions?: ToastOptions): string;
+    error(messageOrOptions: string | ToastOptions, maybeOptions?: ToastOptions): string;
+    promise: <T>(promise: Promise<T>, options: ToastManagerPromiseOptions<T, CustomToastData>) => Promise<T>;
+    loading: (messageOrOptions: string | ToastOptions, maybeOptions?: ToastOptions) => {
+        id: string;
+        complete: (messageOrOptions: string | ToastOptions, maybeOptions?: ToastOptions) => void;
+    };
+    update: (id: string, messageOrOptions: string | ToastOptions, maybeOptions?: ToastOptions) => void;
+    close: (id: string) => void;
+};
+export type * from '@base-ui/react/toast';
+export { Toast };

package/dist/esm/components/toasts/toasts.js

@@ -1,39 +1,110 @@
 // @unocss-include
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export { toast } from 'react-hot-toast';
+import { Toast, } from '@base-ui/react/toast';
 import clsx from 'clsx';
-import { AnimatePresence, motion } from 'motion/react';
-import { createPortal } from 'react-dom';
-import { useToaster } from 'react-hot-toast';
 import { useResolvedColorMode } from '../../colorMode.js';
+import { Button } from '../button/index.js';
 import { Icon } from '../icon/Icon.js';
-const toastOptions = {};
-export const Toaster = (props) => {
-    const mode = useResolvedColorMode();
-    const { toasts, handlers } = useToaster(toastOptions);
-    const { startPause, endPause } = handlers;
-    const visibleToasts = toasts.filter((t) => t.visible);
-    const target = typeof document === 'undefined' ? null : document.body;
-    if (!target) {
-        return null;
-    }
-    return createPortal(_jsx("div", { className: clsx('fixed z-100000 flex flex-col items-center gap-xs left-1/2 center-x top-sm max-w-400px', mode === 'dark' ? 'override-light' : 'override-dark', props.className), onMouseEnter: startPause, onMouseLeave: endPause, children: _jsx(AnimatePresence, { children: visibleToasts.map((toast) => {
-                const message = typeof toast.message === 'function'
-                    ? toast.message(toast)
-                    : toast.message;
-                return (_jsxs(motion.div, Object.assign({ className: clsx({
-                        'palette-success': toast.type === 'success',
-                        'palette-attention': toast.type === 'error',
-                        'palette-info': toast.type === 'blank',
-                    }, 'bg-main-wash color-black rounded-md shadow-md px-md py-sm', 'flex flex-row gap-sm') }, toast.ariaProps, { initial: { scale: 0.8, opacity: 0, y: -20 }, exit: { scale: 0.8, opacity: 0, y: -20 }, animate: {
-                        scale: 1,
-                        opacity: 1,
-                        y: 0,
-                    }, layout: true, children: [_jsx(Icon, { className: "mt-2px", loading: toast.type === 'loading', name: toast.type === 'success'
-                                ? 'check'
-                                : toast.type === 'error'
-                                    ? 'warning'
-                                    : 'info' }), message] }), toast.id));
-            }) }) }), target);
+import { Spinner } from '../spinner/Spinner.js';
+export const manager = Toast.createToastManager();
+export const DefaultToastProvider = (_a) => {
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    return (_jsx(Toast.Provider, Object.assign({ toastManager: manager }, rest, { children: children })));
 };
+export function Toaster() {
+    return (_jsx(Toast.Portal, { children: _jsx(Toast.Viewport, { className: "overflow-clip", children: _jsx(ToastList, {}) }) }));
+}
+function ToastList() {
+    const { toasts: untypedToasts } = Toast.useToastManager();
+    const mode = useResolvedColorMode();
+    const toasts = untypedToasts;
+    return toasts.map((toast) => {
+        var _a, _b;
+        return (_jsx(Toast.Root, { toast: toast, swipeDirection: ['up', 'right', 'left'], className: clsx(
+            // variable setup
+            '[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))]', '[--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))]', '[--offset-y:calc(var(--toast-offset-y)+calc(var(--toast-index)*var(--gap))+var(--toast-swipe-movement-y))]', 
+            // basic positioning
+            'absolute left-0 top-xs left-auto z-[calc(100000-var(--toast-index))] mr-0 w-full origin-top', 'h-[--height]', 'flex flex-col gap-xs items-center', 
+            // other properties
+            'select-none', 
+            // animation and interaction
+            'translate-x-[--toast-swipe-movement-x] translate-y-[calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--peek))+(var(--shrink)*var(--height)))] scale-[var(--scale)]', '[transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]', 
+            // ::after
+            'after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-empty', 
+            // starting style
+            'data-[starting-style]:-translate-y-150%', 
+            // limited
+            'data-[limited]:opacity-0', 
+            //expanded
+            'data-[expanded]:h-[--toast-height] data-[expanded]:translate-x-[--toast-swipe-movement-x] data-[expanded]:translate-y-[--offset-y] data-[expanded]:scale-100', 
+            // ending styles
+            'data-[ending-style]:opacity-0', 
+            // natural or close button
+            '[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:-translate-y-150% [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:scale-90 [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:opacity-50', 
+            // swiping down
+            'data-[ending-style]:data-[swipe-direction=down]:translate-y-[calc(var(--toast-swipe-movement-y)+150%)]', 'data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:translate-y-[calc(var(--toast-swipe-movement-y)+150%)]', 
+            // swiping left
+            'data-[ending-style]:data-[swipe-direction=left]:translate-x-[calc(var(--toast-swipe-movement-x)-150%)] data-[ending-style]:data-[swipe-direction=left]:translate-y-[var(--offset-y)]', 'data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:translate-x-[calc(var(--toast-swipe-movement-x)-150%)] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:translate-y-[var(--offset-y)]', 
+            // swiping right
+            'data-[ending-style]:data-[swipe-direction=right]:translate-x-[calc(var(--toast-swipe-movement-x)+150%)] data-[ending-style]:data-[swipe-direction=right]:translate-y-[var(--offset-y)]', 'data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:translate-x-[calc(var(--toast-swipe-movement-x)+150%)] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:translate-y-[var(--offset-y)]', 
+            // swiping up
+            'data-[ending-style]:data-[swipe-direction=up]:translate-y-[calc(var(--toast-swipe-movement-y)-150%)]', 'data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:translate-y-[calc(var(--toast-swipe-movement-y)-150%)]', 
+            // themeing
+            {
+                'palette-success': toast.type === 'success',
+                'palette-attention': toast.type === 'error',
+                'palette-info': toast.type === 'blank',
+            }, mode === 'dark' ? 'override-light' : 'override-dark'), children: _jsxs(Toast.Content, { className: "[&[data-behind]:not([data-expanded])]:pointer-events-none flex flex-col gap-2px max-w-sm", children: [_jsx("div", { className: clsx('layer-components:bg-main-wash layer-components:color-black layer-components:rounded-md layer-components:b-1 layer-components:b-solid layer-components:b-black layer-components:shadow-md layer-components:pl-md layer-components:pr-sm layer-components:py-sm layer-components:relative', 'layer-components:flex layer-components:flex-row layer-components:gap-sm', '[[data-behind]:not([data-expanded])_&]:bg-darken-2 [[data-behind]:not([data-expanded])_&]:max-h-[--height]'), children: _jsxs("div", { className: clsx('flex flex-row gap-xs items-center', '[[data-behind]:not([data-expanded])_&]:opacity-0 [[data-expanded]_&]:opacity-100 transition-opacity [transition-duration:250ms]'), children: [_jsxs("div", { className: "flex flex-col gap-xs", children: [_jsx(Toast.Title, { className: "text-sm leading-tight font-bold m-0" }), _jsxs("div", { className: "flex gap-sm", children: [((_a = toast.data) === null || _a === void 0 ? void 0 : _a.loading) ? (_jsx(Spinner, { size: 15, className: "relative top-2px" })) : toast.type === 'success' ? (_jsx(Icon, { name: "check", color: "success", className: "relative top-2px" })) : toast.type === 'error' ? (_jsx(Icon, { name: "warning", color: "attention", className: "relative top-2px" })) : null, _jsx(Toast.Description, { className: "text-sm m-0" })] })] }), _jsx(Toast.Close, { className: "mb-auto [[data-behind]:not([data-expanded])_&]:invisible", "aria-label": "Close", render: _jsx(Button, { size: "small", emphasis: "ghost", children: _jsx(Icon, { name: "x" }) }) })] }) }), ((_b = toast.data) === null || _b === void 0 ? void 0 : _b.actions) && (_jsx("div", { className: "flex gap-xxs items-center ml-auto [[data-behind]:not([data-expanded])_&]:opacity-0 transition-opacity", children: toast.data.actions.toReversed().map((action, index) => (_jsx(Toast.Action, { className: "text-xs", onClick: action.onClick, render: _jsx(Button, { size: "small", emphasis: action.emphasis, color: action.color }), children: action.label }, index))) }))] }) }, toast.id));
+    });
+}
+function toOptions(messageOrOptions, maybeOptions) {
+    var _a, _b, _c;
+    const description = typeof messageOrOptions === 'string' ? messageOrOptions : undefined;
+    const options = typeof messageOrOptions === 'string' ? maybeOptions : messageOrOptions;
+    const extraOptions = typeof messageOrOptions === 'string' && maybeOptions ? maybeOptions : {};
+    const finalOptions = Object.assign(Object.assign({ description, timeout: (_c = (_b = (_a = options === null || options === void 0 ? void 0 : options.duration) !== null && _a !== void 0 ? _a : extraOptions === null || extraOptions === void 0 ? void 0 : extraOptions.duration) !== null && _b !== void 0 ? _b : options === null || options === void 0 ? void 0 : options.timeout) !== null && _c !== void 0 ? _c : extraOptions === null || extraOptions === void 0 ? void 0 : extraOptions.timeout }, options), extraOptions);
+    return finalOptions;
+}
+function baseToast(messageOrOptions, maybeOptions) {
+    const finalOptions = toOptions(messageOrOptions, maybeOptions);
+    return manager.add(finalOptions);
+}
+export const toast = Object.assign(baseToast, {
+    success(messageOrOptions, maybeOptions) {
+        return baseToast(messageOrOptions, Object.assign({ type: 'success' }, maybeOptions));
+    },
+    error(messageOrOptions, maybeOptions) {
+        return baseToast(messageOrOptions, Object.assign({ type: 'error' }, maybeOptions));
+    },
+    promise: function (promise, options) {
+        return manager.promise(promise, options);
+    },
+    loading: function (messageOrOptions, maybeOptions) {
+        const id = baseToast(messageOrOptions, Object.assign({ timeout: 0, data: { loading: true } }, maybeOptions));
+        return {
+            id,
+            complete: (messageOrOptions, maybeOptions) => {
+                manager.update(id, toOptions(messageOrOptions, Object.assign(Object.assign({}, maybeOptions), { data: { loading: false } })));
+            },
+        };
+    },
+    update: function (id, messageOrOptions, maybeOptions) {
+        return manager.update(id, toOptions(messageOrOptions, maybeOptions));
+    },
+    close: function (id) {
+        return manager.close(id);
+    },
+});
+export { Toast };
 //# sourceMappingURL=toasts.js.map

package/dist/esm/components/toasts/toasts.js.map

@@ -1 +1 @@
-{"version":3,"file":"toasts.js","sourceRoot":"","sources":["../../../../src/components/toasts/toasts.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"toasts.js","sourceRoot":"","sources":["../../../../src/components/toasts/toasts.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/toasts/toasts.stories.js

@@ -1,8 +1,8 @@
 // @unocss-include
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { toast } from 'react-hot-toast';
 import { Box } from '../box/Box.js';
 import { Button } from '../button/Button.js';
+import { toast } from './toasts.js';
 const meta = {
     title: 'Components/toasts',
     argTypes: {},
@@ -15,30 +15,61 @@ export const Default = {
     render(args) {
         return (_jsxs(Box, { col: true, gap: true, children: [_jsx(Button, { onClick: () => {
                         toast('This is a default toast! With a lot of text. Enough to wrap around.', {
-                            duration: 10000,
+                            duration: 120000,
                         });
                     }, children: "Show Default Toast" }), _jsx(Button, { color: "success", onClick: () => {
                         toast.success('This is a success toast!', {
-                            duration: 10000,
+                            duration: 20000,
                         });
                     }, children: "Show Success Toast" }), _jsx(Button, { color: "attention", onClick: () => {
                         toast.error('This is an error toast!', {
-                            duration: 10000,
+                            duration: 20000,
                         });
                     }, children: "Show Error Toast" }), _jsx(Button, { onClick: () => {
-                        const id = toast.loading('This is a loading toast!');
+                        const { complete } = toast.loading('This is a loading toast!');
                         setTimeout(() => {
-                            toast.success('Loading complete!', { id, duration: 5000 });
-                        }, 3000);
+                            complete('Loading complete!', {
+                                duration: 5000,
+                                type: 'success',
+                            });
+                        }, 5000);
                     }, children: "Show Loading Toast" }), _jsx(Button, { onClick: () => {
                         toast.promise((async () => {
                             await new Promise((resolve) => setTimeout(resolve, 3000));
                         })(), {
-                            loading: 'Promise is loading...',
+                            loading: 'Promise is loading... This text is longer to test animation of transition',
                             success: 'Promise resolved!',
                             error: 'Promise rejected.',
                         });
-                    }, children: "Show Promise Toast" })] }));
+                    }, children: "Show Promise Toast" }), _jsx(Button, { onClick: () => {
+                        toast('This is a toast with actions!', {
+                            timeout: 20000,
+                            data: {
+                                actions: [
+                                    {
+                                        label: 'Retry',
+                                        emphasis: 'primary',
+                                        onClick: () => {
+                                            alert('Retry clicked!');
+                                        },
+                                    },
+                                    {
+                                        label: 'Undo',
+                                        emphasis: 'light',
+                                        onClick: () => {
+                                            alert('Undo clicked!');
+                                        },
+                                    },
+                                ],
+                            },
+                        });
+                    }, children: "Show Toast with Actions" }), _jsx(Button, { onClick: () => {
+                        toast({
+                            title: 'Rich Toast',
+                            description: 'This toast has both a title and a description.',
+                            timeout: 20000,
+                        });
+                    }, children: "Show Rich Toast" })] }));
     },
 };
 //# sourceMappingURL=toasts.stories.js.map

package/dist/esm/components/toasts/toasts.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"toasts.stories.js","sourceRoot":"","sources":["../../../../src/components/toasts/toasts.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,mBAAmB;IAC1B,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACc,CAAC;AAEjB,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,OAAO,CACN,MAAC,GAAG,IAAC,GAAG,QAAC,GAAG,mBACX,KAAC,MAAM,IACN,OAAO,EAAE,GAAG,EAAE;wBACb,KAAK,CACJ,qEAAqE,EACrE;4BACC,QAAQ,EAAE,KAAM;yBAChB,CACD,CAAC;oBACH,CAAC,mCAGO,EACT,KAAC,MAAM,IACN,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,GAAG,EAAE;wBACb,KAAK,CAAC,OAAO,CAAC,0BAA0B,EAAE;4BACzC,QAAQ,EAAE,KAAM;yBAChB,CAAC,CAAC;oBACJ,CAAC,mCAGO,EACT,KAAC,MAAM,IACN,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE,GAAG,EAAE;wBACb,KAAK,CAAC,KAAK,CAAC,yBAAyB,EAAE;4BACtC,QAAQ,EAAE,KAAM;yBAChB,CAAC,CAAC;oBACJ,CAAC,iCAGO,EACT,KAAC,MAAM,IACN,OAAO,EAAE,GAAG,EAAE;wBACb,MAAM,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,0BAA0B,CAAC,CAAC;wBACrD,UAAU,CAAC,GAAG,EAAE;4BACf,KAAK,CAAC,OAAO,CAAC,mBAAmB,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;wBAC5D,CAAC,EAAE,IAAI,CAAC,CAAC;oBACV,CAAC,mCAGO,EACT,KAAC,MAAM,IACN,OAAO,EAAE,GAAG,EAAE;wBACb,KAAK,CAAC,OAAO,CACZ,CAAC,KAAK,IAAI,EAAE;4BACX,MAAM,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;wBAC3D,CAAC,CAAC,EAAE,EACJ;4BACC,OAAO,EAAE,uBAAuB;4BAChC,OAAO,EAAE,mBAAmB;4BAC5B,KAAK,EAAE,mBAAmB;yBAC1B,CACD,CAAC;oBACH,CAAC,mCAGO,IACJ,CACN,CAAC;IACH,CAAC;CACD,CAAC"}
+{"version":3,"file":"toasts.stories.js","sourceRoot":"","sources":["../../../../src/components/toasts/toasts.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,mBAAmB;IAC1B,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACc,CAAC;AAEjB,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,OAAO,CACN,MAAC,GAAG,IAAC,GAAG,QAAC,GAAG,mBACX,KAAC,MAAM,IACN,OAAO,EAAE,GAAG,EAAE;wBACb,KAAK,CACJ,qEAAqE,EACrE;4BACC,QAAQ,EAAE,MAAO;yBACjB,CACD,CAAC;oBACH,CAAC,mCAGO,EACT,KAAC,MAAM,IACN,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,GAAG,EAAE;wBACb,KAAK,CAAC,OAAO,CAAC,0BAA0B,EAAE;4BACzC,QAAQ,EAAE,KAAM;yBAChB,CAAC,CAAC;oBACJ,CAAC,mCAGO,EACT,KAAC,MAAM,IACN,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE,GAAG,EAAE;wBACb,KAAK,CAAC,KAAK,CAAC,yBAAyB,EAAE;4BACtC,QAAQ,EAAE,KAAM;yBAChB,CAAC,CAAC;oBACJ,CAAC,iCAGO,EACT,KAAC,MAAM,IACN,OAAO,EAAE,GAAG,EAAE;wBACb,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,0BAA0B,CAAC,CAAC;wBAC/D,UAAU,CAAC,GAAG,EAAE;4BACf,QAAQ,CAAC,mBAAmB,EAAE;gCAC7B,QAAQ,EAAE,IAAI;gCACd,IAAI,EAAE,SAAS;6BACf,CAAC,CAAC;wBACJ,CAAC,EAAE,IAAI,CAAC,CAAC;oBACV,CAAC,mCAGO,EACT,KAAC,MAAM,IACN,OAAO,EAAE,GAAG,EAAE;wBACb,KAAK,CAAC,OAAO,CACZ,CAAC,KAAK,IAAI,EAAE;4BACX,MAAM,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;wBAC3D,CAAC,CAAC,EAAE,EACJ;4BACC,OAAO,EACN,2EAA2E;4BAC5E,OAAO,EAAE,mBAAmB;4BAC5B,KAAK,EAAE,mBAAmB;yBAC1B,CACD,CAAC;oBACH,CAAC,mCAGO,EACT,KAAC,MAAM,IACN,OAAO,EAAE,GAAG,EAAE;wBACb,KAAK,CAAC,+BAA+B,EAAE;4BACtC,OAAO,EAAE,KAAM;4BACf,IAAI,EAAE;gCACL,OAAO,EAAE;oCACR;wCACC,KAAK,EAAE,OAAO;wCACd,QAAQ,EAAE,SAAS;wCACnB,OAAO,EAAE,GAAG,EAAE;4CACb,KAAK,CAAC,gBAAgB,CAAC,CAAC;wCACzB,CAAC;qCACD;oCACD;wCACC,KAAK,EAAE,MAAM;wCACb,QAAQ,EAAE,OAAO;wCACjB,OAAO,EAAE,GAAG,EAAE;4CACb,KAAK,CAAC,eAAe,CAAC,CAAC;wCACxB,CAAC;qCACD;iCACD;6BACD;yBACD,CAAC,CAAC;oBACJ,CAAC,wCAGO,EACT,KAAC,MAAM,IACN,OAAO,EAAE,GAAG,EAAE;wBACb,KAAK,CAAC;4BACL,KAAK,EAAE,YAAY;4BACnB,WAAW,EAAE,gDAAgD;4BAC7D,OAAO,EAAE,KAAM;yBACf,CAAC,CAAC;oBACJ,CAAC,gCAGO,IACJ,CACN,CAAC;IACH,CAAC;CACD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "3.0.44",
+  "version": "3.1.0-beta.5",
   "type": "module",
   "repository": {
     "url": "https://github.com/a-type/ui"
@@ -41,6 +41,7 @@
   },
   "dependencies": {
     "@a-type/utils": "^1.1.4",
+    "@base-ui/react": "^1.0.0",
     "@radix-ui/react-accordion": "^1.2.2",
     "@radix-ui/react-checkbox": "^1.1.3",
     "@radix-ui/react-collapsible": "^1.1.2",
@@ -85,13 +86,13 @@
     "@storybook/react": "8.4.7",
     "@storybook/react-vite": "8.4.7",
     "@storybook/test": "8.4.7",
+    "@types/dom-chromium-installation-events": "^101.0.4",
     "@types/pluralize": "^0.0.33",
     "@types/react": "^19.0.1",
     "@types/react-dom": "^19.0.2",
     "@types/react-is": "^19.0.0",
     "@types/w3c-image-capture": "^1.0.10",
     "@types/web-app-manifest": "^1.0.9",
-    "@types/dom-chromium-installation-events": "^101.0.4",
     "@unocss/cli": "66.5.4",
     "@unocss/core": "66.5.4",
     "@unocss/transformer-variant-group": "66.5.4",

package/src/components/provider/Provider.tsx

@@ -4,7 +4,7 @@ import { useVirtualKeyboardBehavior } from '../../hooks/useVirtualKeyboardBehavi
 import { IconSpritesheet } from '../icon/index.js';
 import { ParticleLayer } from '../particles/index.js';
 import { PwaInstall } from '../pwaInstall/PwaInstall.js';
-import { Toaster } from '../toasts/toasts.js';
+import { DefaultToastProvider, Toaster } from '../toasts/toasts.js';
 import { TooltipProvider } from '../tooltip/index.js';
 
 export interface ProviderProps {
@@ -47,10 +47,12 @@ export function Provider({
 			<ConfigContext.Provider
 				value={{ virtualKeyboardBehavior: supportedVirtualKeyboardBehavior }}
 			>
-				<TooltipProvider>
-					{children}
-					{otherStuff}
-				</TooltipProvider>
+				<DefaultToastProvider>
+					<TooltipProvider>
+						{children}
+						{otherStuff}
+					</TooltipProvider>
+				</DefaultToastProvider>
 			</ConfigContext.Provider>
 		);
 
@@ -58,12 +60,14 @@ export function Provider({
 		<ConfigContext.Provider
 			value={{ virtualKeyboardBehavior: supportedVirtualKeyboardBehavior }}
 		>
-			<TooltipProvider>
-				<ParticleLayer>
-					{children}
-					{otherStuff}
-				</ParticleLayer>
-			</TooltipProvider>
+			<DefaultToastProvider>
+				<TooltipProvider>
+					<ParticleLayer>
+						{children}
+						{otherStuff}
+					</ParticleLayer>
+				</TooltipProvider>
+			</DefaultToastProvider>
 		</ConfigContext.Provider>
 	);
 }

package/src/components/toasts/toasts.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { toast } from 'react-hot-toast';
 import { Box } from '../box/Box.js';
 import { Button } from '../button/Button.js';
+import { toast } from './toasts.js';
 
 const meta = {
 	title: 'Components/toasts',
@@ -24,7 +24,7 @@ export const Default: Story = {
 						toast(
 							'This is a default toast! With a lot of text. Enough to wrap around.',
 							{
-								duration: 10_000,
+								duration: 120_000,
 							},
 						);
 					}}
@@ -35,7 +35,7 @@ export const Default: Story = {
 					color="success"
 					onClick={() => {
 						toast.success('This is a success toast!', {
-							duration: 10_000,
+							duration: 20_000,
 						});
 					}}
 				>
@@ -45,7 +45,7 @@ export const Default: Story = {
 					color="attention"
 					onClick={() => {
 						toast.error('This is an error toast!', {
-							duration: 10_000,
+							duration: 20_000,
 						});
 					}}
 				>
@@ -53,10 +53,13 @@ export const Default: Story = {
 				</Button>
 				<Button
 					onClick={() => {
-						const id = toast.loading('This is a loading toast!');
+						const { complete } = toast.loading('This is a loading toast!');
 						setTimeout(() => {
-							toast.success('Loading complete!', { id, duration: 5000 });
-						}, 3000);
+							complete('Loading complete!', {
+								duration: 5000,
+								type: 'success',
+							});
+						}, 5000);
 					}}
 				>
 					Show Loading Toast
@@ -68,7 +71,8 @@ export const Default: Story = {
 								await new Promise((resolve) => setTimeout(resolve, 3000));
 							})(),
 							{
-								loading: 'Promise is loading...',
+								loading:
+									'Promise is loading... This text is longer to test animation of transition',
 								success: 'Promise resolved!',
 								error: 'Promise rejected.',
 							},
@@ -77,6 +81,44 @@ export const Default: Story = {
 				>
 					Show Promise Toast
 				</Button>
+				<Button
+					onClick={() => {
+						toast('This is a toast with actions!', {
+							timeout: 20_000,
+							data: {
+								actions: [
+									{
+										label: 'Retry',
+										emphasis: 'primary',
+										onClick: () => {
+											alert('Retry clicked!');
+										},
+									},
+									{
+										label: 'Undo',
+										emphasis: 'light',
+										onClick: () => {
+											alert('Undo clicked!');
+										},
+									},
+								],
+							},
+						});
+					}}
+				>
+					Show Toast with Actions
+				</Button>
+				<Button
+					onClick={() => {
+						toast({
+							title: 'Rich Toast',
+							description: 'This toast has both a title and a description.',
+							timeout: 20_000,
+						});
+					}}
+				>
+					Show Rich Toast
+				</Button>
 			</Box>
 		);
 	},