@a-type/ui 3.0.44 → 3.1.0-beta.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/provider/Provider.js +2 -2
- package/dist/cjs/components/provider/Provider.js.map +1 -1
- package/dist/cjs/components/toasts/toasts.d.ts +34 -5
- package/dist/cjs/components/toasts/toasts.js +99 -34
- package/dist/cjs/components/toasts/toasts.js.map +1 -1
- package/dist/cjs/components/toasts/toasts.stories.js +44 -13
- package/dist/cjs/components/toasts/toasts.stories.js.map +1 -1
- package/dist/css/main.css +3 -4
- package/dist/esm/components/provider/Provider.js +3 -3
- package/dist/esm/components/provider/Provider.js.map +1 -1
- package/dist/esm/components/toasts/toasts.d.ts +34 -5
- package/dist/esm/components/toasts/toasts.js +96 -31
- package/dist/esm/components/toasts/toasts.js.map +1 -1
- package/dist/esm/components/toasts/toasts.stories.js +40 -9
- package/dist/esm/components/toasts/toasts.stories.js.map +1 -1
- package/package.json +3 -2
- package/src/components/provider/Provider.tsx +15 -11
- package/src/components/toasts/toasts.stories.tsx +50 -8
- package/src/components/toasts/toasts.tsx +248 -67
|
@@ -6,7 +6,7 @@ import { useVirtualKeyboardBehavior } from '../../hooks/useVirtualKeyboardBehavi
|
|
|
6
6
|
import { IconSpritesheet } from '../icon/index.js';
|
|
7
7
|
import { ParticleLayer } from '../particles/index.js';
|
|
8
8
|
import { PwaInstall } from '../pwaInstall/PwaInstall.js';
|
|
9
|
-
import { Toaster } from '../toasts/toasts.js';
|
|
9
|
+
import { DefaultToastProvider, Toaster } from '../toasts/toasts.js';
|
|
10
10
|
import { TooltipProvider } from '../tooltip/index.js';
|
|
11
11
|
/**
|
|
12
12
|
* Provides all the stuff for all global junk.
|
|
@@ -20,8 +20,8 @@ export function Provider({ children, disableParticles, disableViewportOffset, vi
|
|
|
20
20
|
useThemedTitleBar('gray', 'wash', undefined, disableTitleBarColor);
|
|
21
21
|
const otherStuff = (_jsxs(_Fragment, { children: [_jsx(IconSpritesheet, {}), _jsx(Toaster, {}), _jsx(PwaInstall, { manifestPath: manifestPath })] }));
|
|
22
22
|
if (disableParticles)
|
|
23
|
-
return (_jsx(ConfigContext.Provider, { value: { virtualKeyboardBehavior: supportedVirtualKeyboardBehavior }, children: _jsxs(TooltipProvider, { children: [children, otherStuff] }) }));
|
|
24
|
-
return (_jsx(ConfigContext.Provider, { value: { virtualKeyboardBehavior: supportedVirtualKeyboardBehavior }, children: _jsx(TooltipProvider, { children: _jsxs(ParticleLayer, { children: [children, otherStuff] }) }) }));
|
|
23
|
+
return (_jsx(ConfigContext.Provider, { value: { virtualKeyboardBehavior: supportedVirtualKeyboardBehavior }, children: _jsx(DefaultToastProvider, { children: _jsxs(TooltipProvider, { children: [children, otherStuff] }) }) }));
|
|
24
|
+
return (_jsx(ConfigContext.Provider, { value: { virtualKeyboardBehavior: supportedVirtualKeyboardBehavior }, children: _jsx(DefaultToastProvider, { children: _jsx(TooltipProvider, { children: _jsxs(ParticleLayer, { children: [children, otherStuff] }) }) }) }));
|
|
25
25
|
}
|
|
26
26
|
export const ConfigContext = createContext({
|
|
27
27
|
virtualKeyboardBehavior: 'displace',
|
|
@@ -1 +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;
|
|
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,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"}
|
|
@@ -1,5 +1,34 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
import { Toast, ToastManagerAddOptions, ToastManagerPromiseOptions } from '@base-ui/react/toast';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
import { ButtonProps } from '../button/index.js';
|
|
4
|
+
export declare const manager: import("@base-ui/react/toast").ToastManager;
|
|
5
|
+
export declare const DefaultToastProvider: ({ children, ...rest }: {
|
|
6
|
+
children?: React.ReactNode;
|
|
7
|
+
timeout?: number;
|
|
8
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export declare function Toaster(): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export interface CustomToastData {
|
|
11
|
+
actions?: {
|
|
12
|
+
label: ReactNode;
|
|
13
|
+
onClick: () => void;
|
|
14
|
+
emphasis?: ButtonProps['emphasis'];
|
|
15
|
+
color?: ButtonProps['color'];
|
|
16
|
+
}[];
|
|
17
|
+
loading?: boolean;
|
|
18
|
+
}
|
|
19
|
+
export interface ToastOptions extends ToastManagerAddOptions<CustomToastData> {
|
|
20
|
+
/** @deprecated - use timeout */
|
|
21
|
+
duration?: number;
|
|
22
|
+
}
|
|
23
|
+
declare function baseToast(messageOrOptions: string | ToastOptions, maybeOptions?: ToastOptions): string;
|
|
24
|
+
export declare const toast: typeof baseToast & {
|
|
25
|
+
success(messageOrOptions: string | ToastOptions, maybeOptions?: ToastOptions): string;
|
|
26
|
+
error(messageOrOptions: string | ToastOptions, maybeOptions?: ToastOptions): string;
|
|
27
|
+
promise: <T>(promise: Promise<T>, options: ToastManagerPromiseOptions<T, CustomToastData>) => Promise<T>;
|
|
28
|
+
loading: (messageOrOptions: string | ToastOptions, maybeOptions?: ToastOptions) => {
|
|
29
|
+
id: string;
|
|
30
|
+
complete: (messageOrOptions: string | ToastOptions, maybeOptions?: ToastOptions) => void;
|
|
31
|
+
};
|
|
32
|
+
};
|
|
33
|
+
export type * from '@base-ui/react/toast';
|
|
34
|
+
export { Toast };
|
|
@@ -1,39 +1,104 @@
|
|
|
1
1
|
// @unocss-include
|
|
2
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
3
|
+
var t = {};
|
|
4
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
5
|
+
t[p] = s[p];
|
|
6
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
7
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
8
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
9
|
+
t[p[i]] = s[p[i]];
|
|
10
|
+
}
|
|
11
|
+
return t;
|
|
12
|
+
};
|
|
2
13
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
|
|
14
|
+
import { Toast, } from '@base-ui/react/toast';
|
|
4
15
|
import clsx from 'clsx';
|
|
5
|
-
import { AnimatePresence, motion } from 'motion/react';
|
|
6
|
-
import { createPortal } from 'react-dom';
|
|
7
|
-
import { useToaster } from 'react-hot-toast';
|
|
8
16
|
import { useResolvedColorMode } from '../../colorMode.js';
|
|
17
|
+
import { Button } from '../button/index.js';
|
|
9
18
|
import { Icon } from '../icon/Icon.js';
|
|
10
|
-
|
|
11
|
-
export const
|
|
19
|
+
import { Spinner } from '../spinner/Spinner.js';
|
|
20
|
+
export const manager = Toast.createToastManager();
|
|
21
|
+
export const DefaultToastProvider = (_a) => {
|
|
22
|
+
var { children } = _a, rest = __rest(_a, ["children"]);
|
|
23
|
+
return (_jsx(Toast.Provider, Object.assign({ toastManager: manager }, rest, { children: children })));
|
|
24
|
+
};
|
|
25
|
+
export function Toaster() {
|
|
26
|
+
return (_jsx(Toast.Portal, { children: _jsx(Toast.Viewport, { className: "overflow-clip", children: _jsx(ToastList, {}) }) }));
|
|
27
|
+
}
|
|
28
|
+
function ToastList() {
|
|
29
|
+
const { toasts: untypedToasts } = Toast.useToastManager();
|
|
12
30
|
const mode = useResolvedColorMode();
|
|
13
|
-
const
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
31
|
+
const toasts = untypedToasts;
|
|
32
|
+
return toasts.map((toast) => {
|
|
33
|
+
var _a, _b;
|
|
34
|
+
return (_jsx(Toast.Root, { toast: toast, swipeDirection: ['up', 'right', 'left'], className: clsx(
|
|
35
|
+
// variable setup
|
|
36
|
+
'[--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))]',
|
|
37
|
+
// basic positioning
|
|
38
|
+
'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',
|
|
39
|
+
// other properties
|
|
40
|
+
'select-none',
|
|
41
|
+
// animation and interaction
|
|
42
|
+
'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]',
|
|
43
|
+
// ::after
|
|
44
|
+
'after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-empty',
|
|
45
|
+
// starting style
|
|
46
|
+
'data-[starting-style]:-translate-y-150%',
|
|
47
|
+
// limited
|
|
48
|
+
'data-[limited]:opacity-0',
|
|
49
|
+
//expanded
|
|
50
|
+
'data-[expanded]:h-[--toast-height] data-[expanded]:translate-x-[--toast-swipe-movement-x] data-[expanded]:translate-y-[--offset-y] data-[expanded]:scale-100',
|
|
51
|
+
// ending styles
|
|
52
|
+
'data-[ending-style]:opacity-0',
|
|
53
|
+
// natural or close button
|
|
54
|
+
'[&[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',
|
|
55
|
+
// swiping down
|
|
56
|
+
'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%)]',
|
|
57
|
+
// swiping left
|
|
58
|
+
'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)]',
|
|
59
|
+
// swiping right
|
|
60
|
+
'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)]',
|
|
61
|
+
// swiping up
|
|
62
|
+
'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%)]',
|
|
63
|
+
// themeing
|
|
64
|
+
{
|
|
65
|
+
'palette-success': toast.type === 'success',
|
|
66
|
+
'palette-attention': toast.type === 'error',
|
|
67
|
+
'palette-info': toast.type === 'blank',
|
|
68
|
+
}, 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));
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
function baseToast(messageOrOptions, maybeOptions) {
|
|
72
|
+
var _a, _b, _c;
|
|
73
|
+
const description = typeof messageOrOptions === 'string' ? messageOrOptions : undefined;
|
|
74
|
+
const options = typeof messageOrOptions === 'string' ? maybeOptions : messageOrOptions;
|
|
75
|
+
const extraOptions = typeof messageOrOptions === 'string' && maybeOptions ? maybeOptions : {};
|
|
76
|
+
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);
|
|
77
|
+
if (options === null || options === void 0 ? void 0 : options.id) {
|
|
78
|
+
manager.update(options.id, finalOptions);
|
|
79
|
+
return options.id;
|
|
19
80
|
}
|
|
20
|
-
return
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
}
|
|
81
|
+
return manager.add(finalOptions);
|
|
82
|
+
}
|
|
83
|
+
export const toast = Object.assign(baseToast, {
|
|
84
|
+
success(messageOrOptions, maybeOptions) {
|
|
85
|
+
return baseToast(messageOrOptions, Object.assign({ type: 'success' }, maybeOptions));
|
|
86
|
+
},
|
|
87
|
+
error(messageOrOptions, maybeOptions) {
|
|
88
|
+
return baseToast(messageOrOptions, Object.assign({ type: 'error' }, maybeOptions));
|
|
89
|
+
},
|
|
90
|
+
promise: function (promise, options) {
|
|
91
|
+
return manager.promise(promise, options);
|
|
92
|
+
},
|
|
93
|
+
loading: function (messageOrOptions, maybeOptions) {
|
|
94
|
+
const id = baseToast(messageOrOptions, Object.assign({ timeout: 0, data: { loading: true } }, maybeOptions));
|
|
95
|
+
return {
|
|
96
|
+
id,
|
|
97
|
+
complete: (messageOrOptions, maybeOptions) => {
|
|
98
|
+
baseToast(messageOrOptions, Object.assign({ id, data: { loading: false } }, maybeOptions));
|
|
99
|
+
},
|
|
100
|
+
};
|
|
101
|
+
},
|
|
102
|
+
});
|
|
103
|
+
export { Toast };
|
|
39
104
|
//# sourceMappingURL=toasts.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toasts.js","sourceRoot":"","sources":["../../../../src/components/toasts/toasts.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"toasts.js","sourceRoot":"","sources":["../../../../src/components/toasts/toasts.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
// @unocss-include
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { toast } from 'react-hot-toast';
|
|
4
3
|
import { Box } from '../box/Box.js';
|
|
5
4
|
import { Button } from '../button/Button.js';
|
|
5
|
+
import { toast } from './toasts.js';
|
|
6
6
|
const meta = {
|
|
7
7
|
title: 'Components/toasts',
|
|
8
8
|
argTypes: {},
|
|
@@ -15,30 +15,61 @@ export const Default = {
|
|
|
15
15
|
render(args) {
|
|
16
16
|
return (_jsxs(Box, { col: true, gap: true, children: [_jsx(Button, { onClick: () => {
|
|
17
17
|
toast('This is a default toast! With a lot of text. Enough to wrap around.', {
|
|
18
|
-
duration:
|
|
18
|
+
duration: 120000,
|
|
19
19
|
});
|
|
20
20
|
}, children: "Show Default Toast" }), _jsx(Button, { color: "success", onClick: () => {
|
|
21
21
|
toast.success('This is a success toast!', {
|
|
22
|
-
duration:
|
|
22
|
+
duration: 20000,
|
|
23
23
|
});
|
|
24
24
|
}, children: "Show Success Toast" }), _jsx(Button, { color: "attention", onClick: () => {
|
|
25
25
|
toast.error('This is an error toast!', {
|
|
26
|
-
duration:
|
|
26
|
+
duration: 20000,
|
|
27
27
|
});
|
|
28
28
|
}, children: "Show Error Toast" }), _jsx(Button, { onClick: () => {
|
|
29
|
-
const
|
|
29
|
+
const { complete } = toast.loading('This is a loading toast!');
|
|
30
30
|
setTimeout(() => {
|
|
31
|
-
|
|
32
|
-
|
|
31
|
+
complete('Loading complete!', {
|
|
32
|
+
duration: 5000,
|
|
33
|
+
type: 'success',
|
|
34
|
+
});
|
|
35
|
+
}, 5000);
|
|
33
36
|
}, children: "Show Loading Toast" }), _jsx(Button, { onClick: () => {
|
|
34
37
|
toast.promise((async () => {
|
|
35
38
|
await new Promise((resolve) => setTimeout(resolve, 3000));
|
|
36
39
|
})(), {
|
|
37
|
-
loading: 'Promise is loading...',
|
|
40
|
+
loading: 'Promise is loading... This text is longer to test animation of transition',
|
|
38
41
|
success: 'Promise resolved!',
|
|
39
42
|
error: 'Promise rejected.',
|
|
40
43
|
});
|
|
41
|
-
}, children: "Show Promise Toast" })
|
|
44
|
+
}, children: "Show Promise Toast" }), _jsx(Button, { onClick: () => {
|
|
45
|
+
toast('This is a toast with actions!', {
|
|
46
|
+
timeout: 20000,
|
|
47
|
+
data: {
|
|
48
|
+
actions: [
|
|
49
|
+
{
|
|
50
|
+
label: 'Retry',
|
|
51
|
+
emphasis: 'primary',
|
|
52
|
+
onClick: () => {
|
|
53
|
+
alert('Retry clicked!');
|
|
54
|
+
},
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
label: 'Undo',
|
|
58
|
+
emphasis: 'light',
|
|
59
|
+
onClick: () => {
|
|
60
|
+
alert('Undo clicked!');
|
|
61
|
+
},
|
|
62
|
+
},
|
|
63
|
+
],
|
|
64
|
+
},
|
|
65
|
+
});
|
|
66
|
+
}, children: "Show Toast with Actions" }), _jsx(Button, { onClick: () => {
|
|
67
|
+
toast({
|
|
68
|
+
title: 'Rich Toast',
|
|
69
|
+
description: 'This toast has both a title and a description.',
|
|
70
|
+
timeout: 20000,
|
|
71
|
+
});
|
|
72
|
+
}, children: "Show Rich Toast" })] }));
|
|
42
73
|
},
|
|
43
74
|
};
|
|
44
75
|
//# sourceMappingURL=toasts.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toasts.stories.js","sourceRoot":"","sources":["../../../../src/components/toasts/toasts.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,
|
|
1
|
+
{"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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@a-type/ui",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.1.0-beta.4",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"repository": {
|
|
6
6
|
"url": "https://github.com/a-type/ui"
|
|
@@ -41,6 +41,7 @@
|
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
43
|
"@a-type/utils": "^1.1.4",
|
|
44
|
+
"@base-ui/react": "^1.0.0",
|
|
44
45
|
"@radix-ui/react-accordion": "^1.2.2",
|
|
45
46
|
"@radix-ui/react-checkbox": "^1.1.3",
|
|
46
47
|
"@radix-ui/react-collapsible": "^1.1.2",
|
|
@@ -85,13 +86,13 @@
|
|
|
85
86
|
"@storybook/react": "8.4.7",
|
|
86
87
|
"@storybook/react-vite": "8.4.7",
|
|
87
88
|
"@storybook/test": "8.4.7",
|
|
89
|
+
"@types/dom-chromium-installation-events": "^101.0.4",
|
|
88
90
|
"@types/pluralize": "^0.0.33",
|
|
89
91
|
"@types/react": "^19.0.1",
|
|
90
92
|
"@types/react-dom": "^19.0.2",
|
|
91
93
|
"@types/react-is": "^19.0.0",
|
|
92
94
|
"@types/w3c-image-capture": "^1.0.10",
|
|
93
95
|
"@types/web-app-manifest": "^1.0.9",
|
|
94
|
-
"@types/dom-chromium-installation-events": "^101.0.4",
|
|
95
96
|
"@unocss/cli": "66.5.4",
|
|
96
97
|
"@unocss/core": "66.5.4",
|
|
97
98
|
"@unocss/transformer-variant-group": "66.5.4",
|
|
@@ -4,7 +4,7 @@ import { useVirtualKeyboardBehavior } from '../../hooks/useVirtualKeyboardBehavi
|
|
|
4
4
|
import { IconSpritesheet } from '../icon/index.js';
|
|
5
5
|
import { ParticleLayer } from '../particles/index.js';
|
|
6
6
|
import { PwaInstall } from '../pwaInstall/PwaInstall.js';
|
|
7
|
-
import { Toaster } from '../toasts/toasts.js';
|
|
7
|
+
import { DefaultToastProvider, Toaster } from '../toasts/toasts.js';
|
|
8
8
|
import { TooltipProvider } from '../tooltip/index.js';
|
|
9
9
|
|
|
10
10
|
export interface ProviderProps {
|
|
@@ -47,10 +47,12 @@ export function Provider({
|
|
|
47
47
|
<ConfigContext.Provider
|
|
48
48
|
value={{ virtualKeyboardBehavior: supportedVirtualKeyboardBehavior }}
|
|
49
49
|
>
|
|
50
|
-
<
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
50
|
+
<DefaultToastProvider>
|
|
51
|
+
<TooltipProvider>
|
|
52
|
+
{children}
|
|
53
|
+
{otherStuff}
|
|
54
|
+
</TooltipProvider>
|
|
55
|
+
</DefaultToastProvider>
|
|
54
56
|
</ConfigContext.Provider>
|
|
55
57
|
);
|
|
56
58
|
|
|
@@ -58,12 +60,14 @@ export function Provider({
|
|
|
58
60
|
<ConfigContext.Provider
|
|
59
61
|
value={{ virtualKeyboardBehavior: supportedVirtualKeyboardBehavior }}
|
|
60
62
|
>
|
|
61
|
-
<
|
|
62
|
-
<
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
63
|
+
<DefaultToastProvider>
|
|
64
|
+
<TooltipProvider>
|
|
65
|
+
<ParticleLayer>
|
|
66
|
+
{children}
|
|
67
|
+
{otherStuff}
|
|
68
|
+
</ParticleLayer>
|
|
69
|
+
</TooltipProvider>
|
|
70
|
+
</DefaultToastProvider>
|
|
67
71
|
</ConfigContext.Provider>
|
|
68
72
|
);
|
|
69
73
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
-
import { toast } from 'react-hot-toast';
|
|
3
2
|
import { Box } from '../box/Box.js';
|
|
4
3
|
import { Button } from '../button/Button.js';
|
|
4
|
+
import { toast } from './toasts.js';
|
|
5
5
|
|
|
6
6
|
const meta = {
|
|
7
7
|
title: 'Components/toasts',
|
|
@@ -24,7 +24,7 @@ export const Default: Story = {
|
|
|
24
24
|
toast(
|
|
25
25
|
'This is a default toast! With a lot of text. Enough to wrap around.',
|
|
26
26
|
{
|
|
27
|
-
duration:
|
|
27
|
+
duration: 120_000,
|
|
28
28
|
},
|
|
29
29
|
);
|
|
30
30
|
}}
|
|
@@ -35,7 +35,7 @@ export const Default: Story = {
|
|
|
35
35
|
color="success"
|
|
36
36
|
onClick={() => {
|
|
37
37
|
toast.success('This is a success toast!', {
|
|
38
|
-
duration:
|
|
38
|
+
duration: 20_000,
|
|
39
39
|
});
|
|
40
40
|
}}
|
|
41
41
|
>
|
|
@@ -45,7 +45,7 @@ export const Default: Story = {
|
|
|
45
45
|
color="attention"
|
|
46
46
|
onClick={() => {
|
|
47
47
|
toast.error('This is an error toast!', {
|
|
48
|
-
duration:
|
|
48
|
+
duration: 20_000,
|
|
49
49
|
});
|
|
50
50
|
}}
|
|
51
51
|
>
|
|
@@ -53,10 +53,13 @@ export const Default: Story = {
|
|
|
53
53
|
</Button>
|
|
54
54
|
<Button
|
|
55
55
|
onClick={() => {
|
|
56
|
-
const
|
|
56
|
+
const { complete } = toast.loading('This is a loading toast!');
|
|
57
57
|
setTimeout(() => {
|
|
58
|
-
|
|
59
|
-
|
|
58
|
+
complete('Loading complete!', {
|
|
59
|
+
duration: 5000,
|
|
60
|
+
type: 'success',
|
|
61
|
+
});
|
|
62
|
+
}, 5000);
|
|
60
63
|
}}
|
|
61
64
|
>
|
|
62
65
|
Show Loading Toast
|
|
@@ -68,7 +71,8 @@ export const Default: Story = {
|
|
|
68
71
|
await new Promise((resolve) => setTimeout(resolve, 3000));
|
|
69
72
|
})(),
|
|
70
73
|
{
|
|
71
|
-
loading:
|
|
74
|
+
loading:
|
|
75
|
+
'Promise is loading... This text is longer to test animation of transition',
|
|
72
76
|
success: 'Promise resolved!',
|
|
73
77
|
error: 'Promise rejected.',
|
|
74
78
|
},
|
|
@@ -77,6 +81,44 @@ export const Default: Story = {
|
|
|
77
81
|
>
|
|
78
82
|
Show Promise Toast
|
|
79
83
|
</Button>
|
|
84
|
+
<Button
|
|
85
|
+
onClick={() => {
|
|
86
|
+
toast('This is a toast with actions!', {
|
|
87
|
+
timeout: 20_000,
|
|
88
|
+
data: {
|
|
89
|
+
actions: [
|
|
90
|
+
{
|
|
91
|
+
label: 'Retry',
|
|
92
|
+
emphasis: 'primary',
|
|
93
|
+
onClick: () => {
|
|
94
|
+
alert('Retry clicked!');
|
|
95
|
+
},
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
label: 'Undo',
|
|
99
|
+
emphasis: 'light',
|
|
100
|
+
onClick: () => {
|
|
101
|
+
alert('Undo clicked!');
|
|
102
|
+
},
|
|
103
|
+
},
|
|
104
|
+
],
|
|
105
|
+
},
|
|
106
|
+
});
|
|
107
|
+
}}
|
|
108
|
+
>
|
|
109
|
+
Show Toast with Actions
|
|
110
|
+
</Button>
|
|
111
|
+
<Button
|
|
112
|
+
onClick={() => {
|
|
113
|
+
toast({
|
|
114
|
+
title: 'Rich Toast',
|
|
115
|
+
description: 'This toast has both a title and a description.',
|
|
116
|
+
timeout: 20_000,
|
|
117
|
+
});
|
|
118
|
+
}}
|
|
119
|
+
>
|
|
120
|
+
Show Rich Toast
|
|
121
|
+
</Button>
|
|
80
122
|
</Box>
|
|
81
123
|
);
|
|
82
124
|
},
|