@frontify/fondue 12.0.0-beta.377 → 12.0.0-beta.378
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/components/Toast/Toast.es.js +21 -13
- package/dist/components/Toast/Toast.es.js.map +1 -1
- package/dist/components/Toast/types.es.js.map +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.umd.js +1 -1
- package/dist/index.umd.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,18 +1,19 @@
|
|
|
1
|
-
import { jsx as o, jsxs as
|
|
2
|
-
import { INSET_BORDER as
|
|
1
|
+
import { jsx as o, jsxs as w } from "react/jsx-runtime";
|
|
2
|
+
import { INSET_BORDER as p, MIGHTY_INSET_BORDER as T } from "../../utilities/borderStyle.es.js";
|
|
3
3
|
import { merge as e } from "../../utilities/merge.es.js";
|
|
4
|
-
import { AnimatePresence as
|
|
4
|
+
import { AnimatePresence as S, motion as y } from "framer-motion";
|
|
5
5
|
import { toastStylesBackgroundColorsMap as A, ToastAnimationDirection as r } from "./types.es.js";
|
|
6
|
-
const g = "tw-min-h-[2rem] tw-rounded-lg tw-shadow-mid tw-z-[120000] before:!tw-rounded-lg",
|
|
6
|
+
const g = "tw-min-h-[2rem] tw-rounded-lg tw-shadow-mid tw-z-[120000] before:!tw-rounded-lg", f = e([p, "tw-bg-base"]), h = e([T, "tw-bg-box-neutral-mighty"]), a = (t) => t === r.BottomToTop ? "150%" : "-150%", N = (t) => e([g, t === "dark" ? h : f]), u = ({
|
|
7
7
|
isOpen: t,
|
|
8
8
|
style: s,
|
|
9
9
|
icon: n,
|
|
10
10
|
animationDirection: i = r.BottomToTop,
|
|
11
11
|
children: m,
|
|
12
12
|
theme: l = "light",
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
enableExitAnimation: d = !1,
|
|
14
|
+
"data-test-id": c = "toast"
|
|
15
|
+
}) => /* @__PURE__ */ o(S, { children: t && /* @__PURE__ */ o(
|
|
16
|
+
y.div,
|
|
16
17
|
{
|
|
17
18
|
className: N(l),
|
|
18
19
|
initial: {
|
|
@@ -20,14 +21,21 @@ const g = "tw-min-h-[2rem] tw-rounded-lg tw-shadow-mid tw-z-[120000] before:!tw-
|
|
|
20
21
|
y: a(i)
|
|
21
22
|
},
|
|
22
23
|
transition: {
|
|
23
|
-
|
|
24
|
+
opacity: {
|
|
25
|
+
ease: [0, 0, 1, 1]
|
|
26
|
+
},
|
|
27
|
+
y: {
|
|
28
|
+
ease: [0, 0.55, 0.45, 1]
|
|
29
|
+
},
|
|
30
|
+
delay: 0.3,
|
|
31
|
+
duration: 0.2
|
|
24
32
|
},
|
|
25
33
|
animate: { opacity: 1, y: 0 },
|
|
26
|
-
exit: { opacity: 0, y: a(i) },
|
|
27
|
-
"data-test-id":
|
|
34
|
+
...d ? { exit: { opacity: 0, y: a(i) } } : {},
|
|
35
|
+
"data-test-id": c,
|
|
28
36
|
"aria-live": "polite",
|
|
29
37
|
role: "alert",
|
|
30
|
-
children: /* @__PURE__ */
|
|
38
|
+
children: /* @__PURE__ */ w("div", { className: "tw-flex", children: [
|
|
31
39
|
/* @__PURE__ */ o(
|
|
32
40
|
"div",
|
|
33
41
|
{
|
|
@@ -42,8 +50,8 @@ const g = "tw-min-h-[2rem] tw-rounded-lg tw-shadow-mid tw-z-[120000] before:!tw-
|
|
|
42
50
|
] })
|
|
43
51
|
}
|
|
44
52
|
) });
|
|
45
|
-
|
|
53
|
+
u.displayName = "FondueToast";
|
|
46
54
|
export {
|
|
47
|
-
|
|
55
|
+
u as Toast
|
|
48
56
|
};
|
|
49
57
|
//# sourceMappingURL=Toast.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.es.js","sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { INSET_BORDER, MIGHTY_INSET_BORDER } from '@utilities/borderStyle';\nimport { merge } from '@utilities/merge';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { ReactElement } from 'react';\nimport { ToastAnimationDirection, ToastProps, ToastTheme, toastStylesBackgroundColorsMap } from './types';\n\nconst CONTAINER_BASE_CLASSES = 'tw-min-h-[2rem] tw-rounded-lg tw-shadow-mid tw-z-[120000] before:!tw-rounded-lg';\n\nconst LIGHT_VARIANT_CLASSES = merge([INSET_BORDER, 'tw-bg-base']);\nconst DARK_VARIANT_CLASSES = merge([MIGHTY_INSET_BORDER, 'tw-bg-box-neutral-mighty']);\n\nconst getToastStartPosition = (animationDirection: ToastAnimationDirection) =>\n animationDirection === ToastAnimationDirection.BottomToTop ? '150%' : '-150%';\n\nconst getContainerClasses = (theme: ToastTheme) => {\n return merge([CONTAINER_BASE_CLASSES, theme === 'dark' ? DARK_VARIANT_CLASSES : LIGHT_VARIANT_CLASSES]);\n};\n\nexport const Toast = ({\n isOpen,\n style,\n icon,\n animationDirection = ToastAnimationDirection.BottomToTop,\n children,\n theme = 'light',\n 'data-test-id': dataTestId = 'toast',\n}: ToastProps): ReactElement => (\n <AnimatePresence>\n {isOpen && (\n <motion.div\n className={getContainerClasses(theme)}\n initial={{\n opacity: 0,\n y: getToastStartPosition(animationDirection),\n }}\n transition={{\n ease:
|
|
1
|
+
{"version":3,"file":"Toast.es.js","sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { INSET_BORDER, MIGHTY_INSET_BORDER } from '@utilities/borderStyle';\nimport { merge } from '@utilities/merge';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { ReactElement } from 'react';\nimport { ToastAnimationDirection, ToastProps, ToastTheme, toastStylesBackgroundColorsMap } from './types';\n\nconst CONTAINER_BASE_CLASSES = 'tw-min-h-[2rem] tw-rounded-lg tw-shadow-mid tw-z-[120000] before:!tw-rounded-lg';\n\nconst LIGHT_VARIANT_CLASSES = merge([INSET_BORDER, 'tw-bg-base']);\nconst DARK_VARIANT_CLASSES = merge([MIGHTY_INSET_BORDER, 'tw-bg-box-neutral-mighty']);\n\nconst getToastStartPosition = (animationDirection: ToastAnimationDirection) =>\n animationDirection === ToastAnimationDirection.BottomToTop ? '150%' : '-150%';\n\nconst getContainerClasses = (theme: ToastTheme) => {\n return merge([CONTAINER_BASE_CLASSES, theme === 'dark' ? DARK_VARIANT_CLASSES : LIGHT_VARIANT_CLASSES]);\n};\n\nexport const Toast = ({\n isOpen,\n style,\n icon,\n animationDirection = ToastAnimationDirection.BottomToTop,\n children,\n theme = 'light',\n enableExitAnimation = false,\n 'data-test-id': dataTestId = 'toast',\n}: ToastProps): ReactElement => (\n <AnimatePresence>\n {isOpen && (\n <motion.div\n className={getContainerClasses(theme)}\n initial={{\n opacity: 0,\n y: getToastStartPosition(animationDirection),\n }}\n transition={{\n opacity: {\n ease: [0, 0, 1, 1],\n },\n y: {\n ease: [0, 0.55, 0.45, 1],\n },\n delay: 0.3,\n duration: 0.2,\n }}\n animate={{ opacity: 1, y: 0 }}\n {...(enableExitAnimation ? { exit: { opacity: 0, y: getToastStartPosition(animationDirection) } } : {})}\n data-test-id={dataTestId}\n aria-live=\"polite\"\n role=\"alert\"\n >\n <div className=\"tw-flex\">\n <div\n className={merge([\n 'tw-flex tw-items-center tw-justify-center tw-min-h-[2rem] tw-min-w-[3rem] tw-rounded-l-lg tw-text-white',\n toastStylesBackgroundColorsMap[style],\n ])}\n >\n {icon}\n </div>\n {children}\n </div>\n </motion.div>\n )}\n </AnimatePresence>\n);\nToast.displayName = 'FondueToast';\n"],"names":["CONTAINER_BASE_CLASSES","LIGHT_VARIANT_CLASSES","merge","INSET_BORDER","DARK_VARIANT_CLASSES","MIGHTY_INSET_BORDER","getToastStartPosition","animationDirection","ToastAnimationDirection","getContainerClasses","theme","Toast","isOpen","style","icon","children","enableExitAnimation","dataTestId","jsx","AnimatePresence","motion","jsxs","toastStylesBackgroundColorsMap"],"mappings":";;;;;AAQA,MAAMA,IAAyB,mFAEzBC,IAAwBC,EAAM,CAACC,GAAc,YAAY,CAAC,GAC1DC,IAAuBF,EAAM,CAACG,GAAqB,0BAA0B,CAAC,GAE9EC,IAAwB,CAACC,MAC3BA,MAAuBC,EAAwB,cAAc,SAAS,SAEpEC,IAAsB,CAACC,MAClBR,EAAM,CAACF,GAAwBU,MAAU,SAASN,IAAuBH,CAAqB,CAAC,GAG7FU,IAAQ,CAAC;AAAA,EAClB,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,oBAAAP,IAAqBC,EAAwB;AAAA,EAC7C,UAAAO;AAAA,EACA,OAAAL,IAAQ;AAAA,EACR,qBAAAM,IAAsB;AAAA,EACtB,gBAAgBC,IAAa;AACjC,MACI,gBAAAC,EAACC,KACI,UACGP,KAAA,gBAAAM;AAAA,EAACE,EAAO;AAAA,EAAP;AAAA,IACG,WAAWX,EAAoBC,CAAK;AAAA,IACpC,SAAS;AAAA,MACL,SAAS;AAAA,MACT,GAAGJ,EAAsBC,CAAkB;AAAA,IAC/C;AAAA,IACA,YAAY;AAAA,MACR,SAAS;AAAA,QACL,MAAM,CAAC,GAAG,GAAG,GAAG,CAAC;AAAA,MACrB;AAAA,MACA,GAAG;AAAA,QACC,MAAM,CAAC,GAAG,MAAM,MAAM,CAAC;AAAA,MAC3B;AAAA,MACA,OAAO;AAAA,MACP,UAAU;AAAA,IACd;AAAA,IACA,SAAS,EAAE,SAAS,GAAG,GAAG,EAAE;AAAA,IAC3B,GAAIS,IAAsB,EAAE,MAAM,EAAE,SAAS,GAAG,GAAGV,EAAsBC,CAAkB,EAAE,EAAA,IAAM,CAAC;AAAA,IACrG,gBAAcU;AAAA,IACd,aAAU;AAAA,IACV,MAAK;AAAA,IAEL,UAAA,gBAAAI,EAAC,OAAI,EAAA,WAAU,WACX,UAAA;AAAA,MAAA,gBAAAH;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAWhB,EAAM;AAAA,YACb;AAAA,YACAoB,EAA+BT,CAAK;AAAA,UAAA,CACvC;AAAA,UAEA,UAAAC;AAAA,QAAA;AAAA,MACL;AAAA,MACCC;AAAA,IAAA,GACL;AAAA,EAAA;AACJ,GAER;AAEJJ,EAAM,cAAc;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.es.js","sources":["../../../src/components/Toast/types.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ReactNode } from 'react';\n\nexport type ToastProps = {\n isOpen: boolean;\n style: ToastStyle;\n icon: ReactNode;\n animationDirection?: ToastAnimationDirection;\n children?: ReactNode;\n theme?: ToastTheme;\n 'data-test-id'?: string;\n};\n\nexport enum ToastAnimationDirection {\n BottomToTop = 'BottomToTop',\n TopToBottom = 'TopToBottom',\n}\n\nexport enum ToastStyle {\n Loud = 'Loud',\n Danger = 'Danger',\n Success = 'Success',\n Warning = 'Warning',\n}\n\nexport const toastStylesBackgroundColorsMap: Record<ToastStyle, string> = {\n [ToastStyle.Loud]: 'tw-bg-box-selected-strong',\n [ToastStyle.Danger]: 'tw-bg-box-negative-strong-pressed',\n [ToastStyle.Success]: 'tw-bg-box-positive-strong-pressed',\n [ToastStyle.Warning]: 'tw-bg-box-warning-strong',\n};\n\nexport type ToastTheme = 'light' | 'dark';\n"],"names":["ToastAnimationDirection","ToastStyle","toastStylesBackgroundColorsMap"],"mappings":"
|
|
1
|
+
{"version":3,"file":"types.es.js","sources":["../../../src/components/Toast/types.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ReactNode } from 'react';\n\nexport type ToastProps = {\n isOpen: boolean;\n style: ToastStyle;\n icon: ReactNode;\n animationDirection?: ToastAnimationDirection;\n children?: ReactNode;\n theme?: ToastTheme;\n enableExitAnimation?: boolean;\n 'data-test-id'?: string;\n};\n\nexport enum ToastAnimationDirection {\n BottomToTop = 'BottomToTop',\n TopToBottom = 'TopToBottom',\n}\n\nexport enum ToastStyle {\n Loud = 'Loud',\n Danger = 'Danger',\n Success = 'Success',\n Warning = 'Warning',\n}\n\nexport const toastStylesBackgroundColorsMap: Record<ToastStyle, string> = {\n [ToastStyle.Loud]: 'tw-bg-box-selected-strong',\n [ToastStyle.Danger]: 'tw-bg-box-negative-strong-pressed',\n [ToastStyle.Success]: 'tw-bg-box-positive-strong-pressed',\n [ToastStyle.Warning]: 'tw-bg-box-warning-strong',\n};\n\nexport type ToastTheme = 'light' | 'dark';\n"],"names":["ToastAnimationDirection","ToastStyle","toastStylesBackgroundColorsMap"],"mappings":"AAeY,IAAAA,sBAAAA,OACRA,EAAA,cAAc,eACdA,EAAA,cAAc,eAFNA,IAAAA,KAAA,CAAA,CAAA,GAKAC,sBAAAA,OACRA,EAAA,OAAO,QACPA,EAAA,SAAS,UACTA,EAAA,UAAU,WACVA,EAAA,UAAU,WAJFA,IAAAA,KAAA,CAAA,CAAA;AAOL,MAAMC,IAA6D;AAAA,EACrE,MAAkB;AAAA,EAClB,QAAoB;AAAA,EACpB,SAAqB;AAAA,EACrB,SAAqB;AAC1B;"}
|