@xanui/core 1.2.70 → 1.3.0

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.
Files changed (46) hide show
  1. package/Iframe/index.cjs +1 -2
  2. package/Iframe/index.cjs.map +1 -1
  3. package/Iframe/index.d.ts +2 -1
  4. package/Iframe/index.js +1 -2
  5. package/Iframe/index.js.map +1 -1
  6. package/Transition/index.cjs +50 -100
  7. package/Transition/index.cjs.map +1 -1
  8. package/Transition/index.d.ts +13 -21
  9. package/Transition/index.js +51 -101
  10. package/Transition/index.js.map +1 -1
  11. package/Transition/variants.cjs +92 -171
  12. package/Transition/variants.cjs.map +1 -1
  13. package/Transition/variants.d.ts +65 -83
  14. package/Transition/variants.js +93 -170
  15. package/Transition/variants.js.map +1 -1
  16. package/animate/easing.cjs +59 -0
  17. package/animate/easing.cjs.map +1 -0
  18. package/animate/easing.d.ts +13 -0
  19. package/animate/easing.js +57 -0
  20. package/animate/easing.js.map +1 -0
  21. package/animate/index.cjs +104 -0
  22. package/animate/index.cjs.map +1 -0
  23. package/animate/index.d.ts +19 -0
  24. package/animate/index.js +99 -0
  25. package/animate/index.js.map +1 -0
  26. package/hooks/useTransition.cjs +98 -0
  27. package/hooks/useTransition.cjs.map +1 -0
  28. package/hooks/useTransition.d.ts +23 -0
  29. package/hooks/useTransition.js +96 -0
  30. package/hooks/useTransition.js.map +1 -0
  31. package/hooks/useTransitionGroup.cjs +95 -0
  32. package/hooks/useTransitionGroup.cjs.map +1 -0
  33. package/hooks/useTransitionGroup.d.ts +32 -0
  34. package/hooks/useTransitionGroup.js +93 -0
  35. package/hooks/useTransitionGroup.js.map +1 -0
  36. package/index.cjs +16 -11
  37. package/index.cjs.map +1 -1
  38. package/index.d.ts +5 -2
  39. package/index.js +4 -1
  40. package/index.js.map +1 -1
  41. package/package.json +1 -1
  42. package/hooks/useAnimation.cjs +0 -44
  43. package/hooks/useAnimation.cjs.map +0 -1
  44. package/hooks/useAnimation.d.ts +0 -20
  45. package/hooks/useAnimation.js +0 -39
  46. package/hooks/useAnimation.js.map +0 -1
package/Iframe/index.cjs CHANGED
@@ -24,7 +24,6 @@ const Iframe = (_a, ref) => {
24
24
  const iframeRef = React.useRef(null);
25
25
  const _ref = useMergeRefs(iframeRef, ref);
26
26
  const parentTheme = core.useTheme();
27
- theme !== null && theme !== void 0 ? theme : (theme = parentTheme.name);
28
27
  React.useEffect(() => {
29
28
  if (!iframeRef.current)
30
29
  return;
@@ -37,7 +36,7 @@ const Iframe = (_a, ref) => {
37
36
  reactDom.createPortal(jsxRuntime.jsx(IframeContext.Provider, { value: {
38
37
  document: doc,
39
38
  window: doc.defaultView,
40
- }, children: jsxRuntime.jsx(index$2, { disableRenderar: true, theme: theme, document: doc, CSSCacheId: CSSCacheId, children: children }) }), doc.body)] }));
39
+ }, children: jsxRuntime.jsx(index$2, { disableRenderar: true, theme: parentTheme, document: doc, CSSCacheId: CSSCacheId, children: children }) }), doc.body)] }));
41
40
  };
42
41
  var index = React.forwardRef(Iframe);
43
42
 
package/Iframe/index.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../../src/Iframe/index.tsx"],"sourcesContent":["'use client'\nimport React, { createContext, useEffect, useRef, useState } from \"react\";\nimport { useTheme } from \"../theme\";\nimport Tag from \"../Tag\";\nimport { createPortal } from \"react-dom\";\nimport AppRoot from \"../AppRoot\";\nimport { TagPropsRoot } from \"../Tag/types\";\nimport useMergeRefs from \"../hooks/useMergeRefs\";\n\nconst IframeContext = createContext<{ document: Document | null; window: Window | null; }>({\n document: null,\n window: null,\n});\n\n\nexport type IframeProps = Omit<TagPropsRoot<\"iframe\">, \"component\"> & {\n theme?: string;\n CSSCacheId?: string;\n}\n\nconst Iframe = ({ children, sxr, theme, CSSCacheId, ...props }: IframeProps, ref: React.Ref<HTMLIFrameElement>) => {\n const [doc, setDoc] = useState<Document | null>(null);\n const iframeRef = useRef<HTMLIFrameElement>(null);\n const _ref = useMergeRefs(iframeRef, ref)\n const parentTheme = useTheme()\n theme ??= parentTheme.name\n\n useEffect(() => {\n if (!iframeRef.current) return;\n const iframe = iframeRef.current;\n const onLoad = () => setDoc(iframe.contentDocument);\n iframe.addEventListener(\"load\", onLoad);\n return () => iframe.removeEventListener(\"load\", onLoad);\n }, []);\n\n return (\n <>\n <Tag\n {...props}\n component={\"iframe\"}\n sxr={{\n border: 'none',\n width: \"100%\",\n height: \"100%\",\n p: 0,\n m: 0,\n ...sxr\n }}\n ref={_ref}\n srcDoc={\"<!DOCTYPE html><html><head></head><body></body></html>\"}\n />\n {doc &&\n createPortal(\n <IframeContext.Provider\n value={{\n document: doc,\n window: doc.defaultView,\n }}\n >\n <AppRoot disableRenderar theme={theme} document={doc as Document} CSSCacheId={CSSCacheId}>\n {children}\n </AppRoot>\n </IframeContext.Provider>,\n doc.body\n )}\n </>\n );\n}\n\nexport default React.forwardRef(Iframe)"],"names":[],"mappings":";;;;;;;;;;;;;;;;AASA;AACG;AACA;AACF;AAQD;AAAgB;;AAEb;;AAEA;;;;;AAKG;;AAEA;;;;AAqBM;AAGS;;;AAYrB;AAEA;;"}
1
+ {"version":3,"file":"index.cjs","sources":["../../src/Iframe/index.tsx"],"sourcesContent":["'use client'\nimport React, { createContext, useEffect, useRef, useState } from \"react\";\nimport { useTheme } from \"../theme\";\nimport Tag from \"../Tag\";\nimport { createPortal } from \"react-dom\";\nimport AppRoot from \"../AppRoot\";\nimport { TagPropsRoot } from \"../Tag/types\";\nimport useMergeRefs from \"../hooks/useMergeRefs\";\nimport { ThemeOptions } from \"../theme/types\";\n\nconst IframeContext = createContext<{ document: Document | null; window: Window | null; }>({\n document: null,\n window: null,\n});\n\n\nexport type IframeProps = Omit<TagPropsRoot<\"iframe\">, \"component\"> & {\n theme?: ThemeOptions;\n CSSCacheId?: string;\n}\n\nconst Iframe = ({ children, sxr, theme, CSSCacheId, ...props }: IframeProps, ref: React.Ref<HTMLIFrameElement>) => {\n const [doc, setDoc] = useState<Document | null>(null);\n const iframeRef = useRef<HTMLIFrameElement>(null);\n const _ref = useMergeRefs(iframeRef, ref)\n const parentTheme = useTheme()\n\n\n useEffect(() => {\n if (!iframeRef.current) return;\n const iframe = iframeRef.current;\n const onLoad = () => setDoc(iframe.contentDocument);\n iframe.addEventListener(\"load\", onLoad);\n return () => iframe.removeEventListener(\"load\", onLoad);\n }, []);\n\n return (\n <>\n <Tag\n {...props}\n component={\"iframe\"}\n sxr={{\n border: 'none',\n width: \"100%\",\n height: \"100%\",\n p: 0,\n m: 0,\n ...sxr\n }}\n ref={_ref}\n srcDoc={\"<!DOCTYPE html><html><head></head><body></body></html>\"}\n />\n {doc &&\n createPortal(\n <IframeContext.Provider\n value={{\n document: doc,\n window: doc.defaultView,\n }}\n >\n <AppRoot disableRenderar theme={parentTheme} document={doc as Document} CSSCacheId={CSSCacheId}>\n {children}\n </AppRoot>\n </IframeContext.Provider>,\n doc.body\n )}\n </>\n );\n}\n\nexport default React.forwardRef(Iframe)"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAUA;AACG;AACA;AACF;AAQD;AAAgB;;AAEb;;AAEA;;;;AAKG;;AAEA;;;;AAqBM;AAGS;;;AAYrB;AAEA;;"}
package/Iframe/index.d.ts CHANGED
@@ -1,8 +1,9 @@
1
1
  import React__default from 'react';
2
2
  import { TagPropsRoot } from '../Tag/types.js';
3
+ import { ThemeOptions } from '../theme/types.js';
3
4
 
4
5
  type IframeProps = Omit<TagPropsRoot<"iframe">, "component"> & {
5
- theme?: string;
6
+ theme?: ThemeOptions;
6
7
  CSSCacheId?: string;
7
8
  };
8
9
  declare const _default: React__default.ForwardRefExoticComponent<Omit<IframeProps, "ref"> & React__default.RefAttributes<HTMLIFrameElement>>;
package/Iframe/index.js CHANGED
@@ -22,7 +22,6 @@ const Iframe = (_a, ref) => {
22
22
  const iframeRef = useRef(null);
23
23
  const _ref = useMergeRefs(iframeRef, ref);
24
24
  const parentTheme = useTheme();
25
- theme !== null && theme !== void 0 ? theme : (theme = parentTheme.name);
26
25
  useEffect(() => {
27
26
  if (!iframeRef.current)
28
27
  return;
@@ -35,7 +34,7 @@ const Iframe = (_a, ref) => {
35
34
  createPortal(jsx(IframeContext.Provider, { value: {
36
35
  document: doc,
37
36
  window: doc.defaultView,
38
- }, children: jsx(AppRoot, { disableRenderar: true, theme: theme, document: doc, CSSCacheId: CSSCacheId, children: children }) }), doc.body)] }));
37
+ }, children: jsx(AppRoot, { disableRenderar: true, theme: parentTheme, document: doc, CSSCacheId: CSSCacheId, children: children }) }), doc.body)] }));
39
38
  };
40
39
  var index = React__default.forwardRef(Iframe);
41
40
 
package/Iframe/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/Iframe/index.tsx"],"sourcesContent":["'use client'\nimport React, { createContext, useEffect, useRef, useState } from \"react\";\nimport { useTheme } from \"../theme\";\nimport Tag from \"../Tag\";\nimport { createPortal } from \"react-dom\";\nimport AppRoot from \"../AppRoot\";\nimport { TagPropsRoot } from \"../Tag/types\";\nimport useMergeRefs from \"../hooks/useMergeRefs\";\n\nconst IframeContext = createContext<{ document: Document | null; window: Window | null; }>({\n document: null,\n window: null,\n});\n\n\nexport type IframeProps = Omit<TagPropsRoot<\"iframe\">, \"component\"> & {\n theme?: string;\n CSSCacheId?: string;\n}\n\nconst Iframe = ({ children, sxr, theme, CSSCacheId, ...props }: IframeProps, ref: React.Ref<HTMLIFrameElement>) => {\n const [doc, setDoc] = useState<Document | null>(null);\n const iframeRef = useRef<HTMLIFrameElement>(null);\n const _ref = useMergeRefs(iframeRef, ref)\n const parentTheme = useTheme()\n theme ??= parentTheme.name\n\n useEffect(() => {\n if (!iframeRef.current) return;\n const iframe = iframeRef.current;\n const onLoad = () => setDoc(iframe.contentDocument);\n iframe.addEventListener(\"load\", onLoad);\n return () => iframe.removeEventListener(\"load\", onLoad);\n }, []);\n\n return (\n <>\n <Tag\n {...props}\n component={\"iframe\"}\n sxr={{\n border: 'none',\n width: \"100%\",\n height: \"100%\",\n p: 0,\n m: 0,\n ...sxr\n }}\n ref={_ref}\n srcDoc={\"<!DOCTYPE html><html><head></head><body></body></html>\"}\n />\n {doc &&\n createPortal(\n <IframeContext.Provider\n value={{\n document: doc,\n window: doc.defaultView,\n }}\n >\n <AppRoot disableRenderar theme={theme} document={doc as Document} CSSCacheId={CSSCacheId}>\n {children}\n </AppRoot>\n </IframeContext.Provider>,\n doc.body\n )}\n </>\n );\n}\n\nexport default React.forwardRef(Iframe)"],"names":[],"mappings":";;;;;;;;;;;;;;AASA;AACG;AACA;AACF;AAQD;AAAgB;;AAEb;;AAEA;;;;;AAKG;;AAEA;;;;AAqBM;AAGS;;;AAYrB;AAEA;;"}
1
+ {"version":3,"file":"index.js","sources":["../../src/Iframe/index.tsx"],"sourcesContent":["'use client'\nimport React, { createContext, useEffect, useRef, useState } from \"react\";\nimport { useTheme } from \"../theme\";\nimport Tag from \"../Tag\";\nimport { createPortal } from \"react-dom\";\nimport AppRoot from \"../AppRoot\";\nimport { TagPropsRoot } from \"../Tag/types\";\nimport useMergeRefs from \"../hooks/useMergeRefs\";\nimport { ThemeOptions } from \"../theme/types\";\n\nconst IframeContext = createContext<{ document: Document | null; window: Window | null; }>({\n document: null,\n window: null,\n});\n\n\nexport type IframeProps = Omit<TagPropsRoot<\"iframe\">, \"component\"> & {\n theme?: ThemeOptions;\n CSSCacheId?: string;\n}\n\nconst Iframe = ({ children, sxr, theme, CSSCacheId, ...props }: IframeProps, ref: React.Ref<HTMLIFrameElement>) => {\n const [doc, setDoc] = useState<Document | null>(null);\n const iframeRef = useRef<HTMLIFrameElement>(null);\n const _ref = useMergeRefs(iframeRef, ref)\n const parentTheme = useTheme()\n\n\n useEffect(() => {\n if (!iframeRef.current) return;\n const iframe = iframeRef.current;\n const onLoad = () => setDoc(iframe.contentDocument);\n iframe.addEventListener(\"load\", onLoad);\n return () => iframe.removeEventListener(\"load\", onLoad);\n }, []);\n\n return (\n <>\n <Tag\n {...props}\n component={\"iframe\"}\n sxr={{\n border: 'none',\n width: \"100%\",\n height: \"100%\",\n p: 0,\n m: 0,\n ...sxr\n }}\n ref={_ref}\n srcDoc={\"<!DOCTYPE html><html><head></head><body></body></html>\"}\n />\n {doc &&\n createPortal(\n <IframeContext.Provider\n value={{\n document: doc,\n window: doc.defaultView,\n }}\n >\n <AppRoot disableRenderar theme={parentTheme} document={doc as Document} CSSCacheId={CSSCacheId}>\n {children}\n </AppRoot>\n </IframeContext.Provider>,\n doc.body\n )}\n </>\n );\n}\n\nexport default React.forwardRef(Iframe)"],"names":[],"mappings":";;;;;;;;;;;;;;AAUA;AACG;AACA;AACF;AAQD;AAAgB;;AAEb;;AAEA;;;;AAKG;;AAEA;;;;AAqBM;AAGS;;;AAYrB;AAEA;;"}
package/Transition/index.cjs CHANGED
@@ -4,115 +4,65 @@
4
4
  var tslib = require('tslib');
5
5
  var React = require('react');
6
6
  var variants = require('./variants.cjs');
7
- var index$1 = require('../css/index.cjs');
8
- var index = require('../Document/index.cjs');
9
- var CSSCacheProvider = require('../css/CSSCacheProvider.cjs');
10
- var useAnimation = require('../hooks/useAnimation.cjs');
11
- var oncss = require('oncss');
7
+ var useTransition = require('../hooks/useTransition.cjs');
8
+ var easing = require('../animate/easing.cjs');
12
9
 
13
- const getVariant = (rect, variant) => {
14
- let fn = typeof variant === 'string' ? variants[variant] : variant;
15
- if (!fn)
16
- throw new Error(`Transition variant "${variant}" not found.`);
17
- return fn(rect);
18
- };
19
10
  function Transition(_a) {
20
11
  var { children } = _a, options = tslib.__rest(_a, ["children"]);
21
- let { disableInitialTransition = false, variant = "fade", duration = 400, delay, ease, easing, open, onOpen, onOpened, onClose, onClosed, onState } = options;
22
- const endTimer = React.useRef(null);
23
- const animId = React.useRef(0);
24
- const [rect, setRect] = React.useState();
25
- const [isDisableInitial, setIsDisableInitial] = React.useState(disableInitialTransition);
12
+ let { open, variant = "fade", duration = 450, delay, easing: easing$1, exitOnUnmount = false, initialTransition = false, onEnter, onEntered, onExit, onExited, onUpdate, onDone, } = options;
13
+ easing$1 !== null && easing$1 !== void 0 ? easing$1 : (easing$1 = "default");
14
+ const variantCb = variants[variant];
26
15
  const ref = React.useRef(null);
27
- const doc = index.useDocument();
28
- const cacheId = CSSCacheProvider.useCSSCacheId();
29
- let _ease = ease || useAnimation.animationEases[easing] || useAnimation.animationEases.bounce;
30
- const style = (obj = {}) => {
31
- return index$1.css(obj, { container: doc === null || doc === void 0 ? void 0 : doc.document, cacheId }).classname;
32
- };
33
- let [cls, setCls] = React.useState(() => {
34
- let props = {};
35
- if (!isDisableInitial || (isDisableInitial && !open)) {
36
- props.opacity = 0;
37
- props.pointerEvents = 'none';
38
- props.transition = 'none';
16
+ const init = React.useRef(false);
17
+ const trans = useTransition({
18
+ delay,
19
+ duration,
20
+ easing: easing[easing$1],
21
+ onEnter,
22
+ onEntered,
23
+ onExit,
24
+ onExited,
25
+ onDone,
26
+ from: () => {
27
+ const v = variantCb(ref.current);
28
+ return v.from;
29
+ },
30
+ to: () => {
31
+ const v = variantCb(ref.current);
32
+ return v.to;
33
+ },
34
+ onUpdate: (val, prograss) => {
35
+ if (!ref.current)
36
+ throw new Error("Invalid Transition Element");
37
+ const vc = variantCb(ref.current);
38
+ onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(val, prograss);
39
+ return vc.onUpdate(val);
39
40
  }
40
- return style(props);
41
41
  });
42
- React.useEffect(() => {
43
- let frame;
44
- const measure = () => {
45
- const node = ref.current;
46
- if (!node) {
47
- frame = requestAnimationFrame(measure); // ⬅️ retry next frame
48
- return;
49
- }
50
- const rect = node.getBoundingClientRect();
51
- const v = getVariant(rect, variant);
52
- const initial = isDisableInitial
53
- ? (open ? v.to : v.from)
54
- : (open ? v.from : v.to);
55
- setCls(style(Object.assign(Object.assign({}, initial), { transition: 'none' })));
56
- setRect(rect);
57
- };
58
- frame = requestAnimationFrame(measure);
59
- return () => {
60
- if (endTimer.current) {
61
- clearTimeout(endTimer.current);
62
- }
63
- cancelAnimationFrame(frame);
64
- };
65
- }, []);
66
- React.useEffect(() => {
67
- if (rect) {
68
- let _duration = isDisableInitial ? 0 : duration;
69
- let _delay = isDisableInitial ? 0 : (delay || 0);
70
- if (isDisableInitial) {
71
- setIsDisableInitial(false);
72
- }
73
- const v = getVariant(rect, variant);
74
- let _css = open ? v.to : v.from;
75
- let _ = Object.assign(Object.assign({}, _css), { transition: Object.keys(_css || {})
76
- .map(k => `${oncss.formatCSSProp(k)} ${_duration}ms ${_ease} ${_delay}ms`)
77
- .join(", "), willChange: Object.keys(_css || {})
78
- .map(oncss.formatCSSProp)
79
- .join(", ") });
80
- if (open) {
81
- onOpen === null || onOpen === void 0 ? void 0 : onOpen();
82
- onState === null || onState === void 0 ? void 0 : onState("open");
83
- }
84
- else {
85
- onClose === null || onClose === void 0 ? void 0 : onClose();
86
- onState === null || onState === void 0 ? void 0 : onState("close");
87
- }
88
- setTimeout(() => {
89
- setCls(style(_));
90
- if (endTimer.current) {
91
- clearTimeout(endTimer.current);
92
- }
93
- animId.current++;
94
- const id = animId.current;
95
- endTimer.current = setTimeout(() => {
96
- if (id !== animId.current)
97
- return;
98
- if (open) {
99
- onOpened === null || onOpened === void 0 ? void 0 : onOpened();
100
- onState === null || onState === void 0 ? void 0 : onState("opened");
101
- }
102
- else {
103
- onClosed === null || onClosed === void 0 ? void 0 : onClosed();
104
- onState === null || onState === void 0 ? void 0 : onState("closed");
105
- }
106
- }, _duration + _delay);
107
- }, 50);
42
+ React.useLayoutEffect(() => {
43
+ const isnot = !init.current && !initialTransition;
44
+ init.current = true;
45
+ if (open) {
46
+ trans.enter(isnot ? false : true);
47
+ }
48
+ else {
49
+ trans.exit(isnot ? false : true);
108
50
  }
109
- }, [rect, open, variant]);
110
- const clone = React.Children.only(children);
111
- return React.cloneElement(clone, {
112
- className: cls,
51
+ }, [open]);
52
+ if (exitOnUnmount && trans.status === "exited")
53
+ return;
54
+ const childs = React.Children.toArray(children);
55
+ if (childs.length !== 1) {
56
+ throw new Error("Transition expects exactly one child.");
57
+ }
58
+ const child = childs[0];
59
+ if (!React.isValidElement(child)) {
60
+ throw new Error("Transition expects a valid React element.");
61
+ }
62
+ return React.cloneElement(child, {
113
63
  ref: (node) => {
114
64
  ref.current = node;
115
- const childRef = clone.ref;
65
+ const childRef = child.ref;
116
66
  if (typeof childRef === "function") {
117
67
  childRef(node);
118
68
  }
package/Transition/index.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../../src/Transition/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { cloneElement, Children, useState, useEffect, useRef } from 'react';\nimport * as variants from './variants'\nimport { css } from '../css';\nimport { useDocument } from '../Document';\nimport { useCSSCacheId } from '../css/CSSCacheProvider';\nimport { animationEases } from '../hooks/useAnimation';\nimport { formatCSSProp } from 'oncss';\nimport { CSSProps } from '../css/types';\n\nexport type TransitionVariantTypes = keyof typeof variants\nexport type TransitionVariant = TransitionVariantTypes | ((rect: DOMRect) => ({ from: CSSProps, to: CSSProps }))\nexport type TransitionState = \"open\" | \"opened\" | \"close\" | \"closed\"\n\nexport type TransitionProps = {\n children: React.ReactElement;\n open: boolean;\n variant: TransitionVariant\n ease?: string;\n easing?: keyof typeof animationEases;\n duration?: number;\n delay?: number;\n disableInitialTransition?: boolean;\n onOpen?: () => void;\n onOpened?: () => void;\n onClose?: () => void;\n onClosed?: () => void;\n onState?: (state: TransitionState) => void;\n}\n\nconst getVariant = (rect: DOMRect, variant: TransitionVariant) => {\n let fn = typeof variant === 'string' ? variants[variant] : variant\n if (!fn) throw new Error(`Transition variant \"${variant}\" not found.`)\n return fn(rect as DOMRect);\n}\n\nfunction Transition({ children, ...options }: TransitionProps) {\n let {\n disableInitialTransition = false,\n variant = \"fade\",\n duration = 400,\n delay,\n ease,\n easing,\n open,\n onOpen,\n onOpened,\n onClose,\n onClosed,\n onState\n } = options\n\n const endTimer = useRef<any>(null)\n const animId = useRef(0)\n const [rect, setRect] = useState<DOMRect>()\n const [isDisableInitial, setIsDisableInitial] = useState(disableInitialTransition)\n const ref = useRef<HTMLElement>(null)\n const doc = useDocument();\n const cacheId = useCSSCacheId()\n let _ease = ease || (animationEases as any)[easing as any] || animationEases.bounce\n\n const style = (obj = {}) => {\n return css(obj, { container: doc?.document, cacheId }).classname;\n }\n\n let [cls, setCls] = useState(() => {\n let props: any = {}\n if (!isDisableInitial || (isDisableInitial && !open)) {\n props.opacity = 0\n props.pointerEvents = 'none'\n props.transition = 'none'\n }\n return style(props)\n })\n\n\n useEffect(() => {\n let frame: any\n const measure = () => {\n const node = ref.current\n if (!node) {\n frame = requestAnimationFrame(measure) // ⬅️ retry next frame\n return\n }\n\n const rect = node.getBoundingClientRect()\n const v = getVariant(rect, variant)\n const initial = isDisableInitial\n ? (open ? v.to : v.from)\n : (open ? v.from : v.to)\n\n setCls(style({\n ...initial,\n transition: 'none'\n }))\n setRect(rect)\n }\n\n frame = requestAnimationFrame(measure)\n\n return () => {\n if (endTimer.current) {\n clearTimeout(endTimer.current)\n }\n cancelAnimationFrame(frame)\n }\n\n }, [])\n\n useEffect(() => {\n if (rect) {\n let _duration = isDisableInitial ? 0 : duration\n let _delay = isDisableInitial ? 0 : (delay || 0)\n\n if (isDisableInitial) {\n setIsDisableInitial(false)\n }\n const v = getVariant(rect, variant)\n let _css: any = open ? v.to : v.from\n\n let _ = {\n ..._css,\n transition: Object.keys(_css || {})\n .map(k => `${formatCSSProp(k)} ${_duration}ms ${_ease} ${_delay}ms`)\n .join(\", \"),\n willChange: Object.keys(_css || {})\n .map(formatCSSProp)\n .join(\", \"),\n }\n\n if (open) {\n onOpen?.();\n onState?.(\"open\");\n } else {\n onClose?.();\n onState?.(\"close\");\n }\n\n setTimeout(() => {\n setCls(style(_))\n if (endTimer.current) {\n clearTimeout(endTimer.current)\n }\n animId.current++\n const id = animId.current\n endTimer.current = setTimeout(() => {\n if (id !== animId.current) return\n if (open) {\n onOpened?.();\n onState?.(\"opened\");\n } else {\n onClosed?.();\n onState?.(\"closed\");\n }\n }, _duration + _delay)\n }, 50);\n }\n }, [rect, open, variant])\n\n const clone: any = Children.only(children);\n\n return cloneElement(clone, {\n className: cls,\n ref: (node: HTMLElement) => {\n ref.current = node;\n\n const childRef = (clone as any).ref;\n if (typeof childRef === \"function\") {\n childRef(node);\n } else if (childRef) {\n childRef.current = node;\n }\n }\n });\n}\n\nexport default Transition"],"names":[],"mappings":";;;;;;;;;;;;AA8BA;AACI;AACA;AAAS;AACT;AACJ;AAEA;AAAoB;AAChB;AAeA;AACA;;;AAGA;AACA;AACA;AACA;AAEA;;AAEA;;;;AAKQ;AACA;AACA;;AAEJ;AACJ;;AAII;;AAEI;;AAEI;;;AAIJ;;;AAGI;AACA;;;AAOR;AAEA;AAEA;AACI;AACI;;;AAGR;;;;;AAOI;;;;;AAMA;AAEA;AAGS;AACA;;AAGA;;AAIL;AACA;;;AAEA;AACA;;;AAIA;AACA;AACI;;;AAGJ;AACA;AACI;;;AAEI;AACA;;;AAEA;AACA;;AAER;;;;;;AAQR;AACA;AACI;AAEA;AACA;;;;AAGI;;;AAGX;AACL;;"}
1
+ {"version":3,"file":"index.cjs","sources":["../../src/Transition/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { cloneElement, Children, useRef, isValidElement, useLayoutEffect } from 'react';\nimport * as variants from './variants'\nimport useTransition from '../hooks/useTransition';\nimport { Easing } from '../animate';\n\nexport type TransitionVariantTypes = keyof typeof variants\nexport type TransitionProps = {\n children: React.ReactElement;\n open: boolean;\n variant: TransitionVariantTypes\n easing?: keyof typeof Easing\n duration?: number;\n delay?: number;\n initialTransition?: boolean;\n\n exitOnUnmount?: boolean;\n\n onEnter?: () => void\n onEntered?: () => void\n onExit?: () => void\n onExited?: () => void\n onUpdate?: (value: Record<string, number>, progress: number) => void;\n onDone?: () => void;\n}\n\n\nfunction Transition({ children, ...options }: TransitionProps) {\n let {\n open,\n variant = \"fade\",\n duration = 450,\n delay,\n easing,\n exitOnUnmount = false,\n initialTransition = false,\n onEnter,\n onEntered,\n onExit,\n onExited,\n onUpdate,\n onDone,\n\n } = options\n\n easing ??= \"default\"\n\n const variantCb = variants[variant]\n const ref = useRef<HTMLElement>(null)\n const init = useRef(false)\n\n const trans = useTransition({\n delay,\n duration,\n easing: Easing[easing],\n onEnter,\n onEntered,\n onExit,\n onExited,\n onDone,\n from: () => {\n const v = variantCb(ref.current as HTMLElement)\n return v.from\n },\n to: () => {\n const v = variantCb(ref.current as HTMLElement)\n return v.to\n },\n onUpdate: (val, prograss) => {\n if (!ref.current) throw new Error(\"Invalid Transition Element\");\n const vc = variantCb(ref.current)\n onUpdate?.(val, prograss)\n return vc.onUpdate(val)\n }\n })\n\n\n useLayoutEffect(() => {\n const isnot = !init.current && !initialTransition\n init.current = true\n if (open) {\n trans.enter(isnot ? false : true)\n } else {\n trans.exit(isnot ? false : true)\n }\n }, [open])\n\n if (exitOnUnmount && trans.status === \"exited\") return\n\n const childs = Children.toArray(children)\n if (childs.length !== 1) {\n throw new Error(\"Transition expects exactly one child.\");\n }\n const child = childs[0]\n if (!isValidElement(child)) {\n throw new Error(\"Transition expects a valid React element.\");\n }\n\n return cloneElement(child, {\n ref: (node: HTMLElement) => {\n ref.current = node;\n\n const childRef = (child as any).ref;\n if (typeof childRef === \"function\") {\n childRef(node);\n } else if (childRef) {\n childRef.current = node;\n }\n }\n } as any);\n}\n\nexport default Transition"],"names":[],"mappings":";;;;;;;;;AA2BA;AAAoB;AAChB;;AAmBA;AACA;AACA;;;;AAKI;;;;;;;;;;;;;;AAcA;;AACsB;;;AAGlB;;AAEP;;;AAKG;;AAEI;;;AAEA;;AAER;AAEA;;;AAGA;AACI;;AAEJ;AACA;AACI;;;AAIA;AACI;AAEA;AACA;;;;AAGI;;;AAGJ;AACZ;;"}
package/Transition/index.d.ts CHANGED
@@ -1,33 +1,25 @@
1
1
  import React__default from 'react';
2
2
  import * as variants from './variants.js';
3
- import { animationEases } from '../hooks/useAnimation.js';
4
- import { CSSProps } from '../css/types.js';
3
+ import Easing from '../animate/easing.js';
5
4
 
6
5
  type TransitionVariantTypes = keyof typeof variants;
7
- type TransitionVariant = TransitionVariantTypes | ((rect: DOMRect) => ({
8
- from: CSSProps;
9
- to: CSSProps;
10
- }));
11
- type TransitionState = "open" | "opened" | "close" | "closed";
12
6
  type TransitionProps = {
13
7
  children: React__default.ReactElement;
14
8
  open: boolean;
15
- variant: TransitionVariant;
16
- ease?: string;
17
- easing?: keyof typeof animationEases;
9
+ variant: TransitionVariantTypes;
10
+ easing?: keyof typeof Easing;
18
11
  duration?: number;
19
12
  delay?: number;
20
- disableInitialTransition?: boolean;
21
- onOpen?: () => void;
22
- onOpened?: () => void;
23
- onClose?: () => void;
24
- onClosed?: () => void;
25
- onState?: (state: TransitionState) => void;
13
+ initialTransition?: boolean;
14
+ exitOnUnmount?: boolean;
15
+ onEnter?: () => void;
16
+ onEntered?: () => void;
17
+ onExit?: () => void;
18
+ onExited?: () => void;
19
+ onUpdate?: (value: Record<string, number>, progress: number) => void;
20
+ onDone?: () => void;
26
21
  };
27
- declare function Transition({ children, ...options }: TransitionProps): React__default.DetailedReactHTMLElement<{
28
- className: string;
29
- ref: (node: HTMLElement) => void;
30
- }, HTMLElement>;
22
+ declare function Transition({ children, ...options }: TransitionProps): React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | undefined;
31
23
 
32
24
  export { Transition as default };
33
- export type { TransitionProps, TransitionState, TransitionVariant, TransitionVariantTypes };
25
+ export type { TransitionProps, TransitionVariantTypes };
package/Transition/index.js CHANGED
@@ -1,116 +1,66 @@
1
1
  "use client";
2
2
  import { __rest } from 'tslib';
3
- import { useRef, useState, useEffect, Children, cloneElement } from 'react';
3
+ import { useRef, useLayoutEffect, Children, isValidElement, cloneElement } from 'react';
4
4
  import * as variants from './variants.js';
5
- import { css } from '../css/index.js';
6
- import { useDocument } from '../Document/index.js';
7
- import { useCSSCacheId } from '../css/CSSCacheProvider.js';
8
- import { animationEases } from '../hooks/useAnimation.js';
9
- import { formatCSSProp } from 'oncss';
5
+ import useTransition from '../hooks/useTransition.js';
6
+ import Easing from '../animate/easing.js';
10
7
 
11
- const getVariant = (rect, variant) => {
12
- let fn = typeof variant === 'string' ? variants[variant] : variant;
13
- if (!fn)
14
- throw new Error(`Transition variant "${variant}" not found.`);
15
- return fn(rect);
16
- };
17
8
  function Transition(_a) {
18
9
  var { children } = _a, options = __rest(_a, ["children"]);
19
- let { disableInitialTransition = false, variant = "fade", duration = 400, delay, ease, easing, open, onOpen, onOpened, onClose, onClosed, onState } = options;
20
- const endTimer = useRef(null);
21
- const animId = useRef(0);
22
- const [rect, setRect] = useState();
23
- const [isDisableInitial, setIsDisableInitial] = useState(disableInitialTransition);
10
+ let { open, variant = "fade", duration = 450, delay, easing, exitOnUnmount = false, initialTransition = false, onEnter, onEntered, onExit, onExited, onUpdate, onDone, } = options;
11
+ easing !== null && easing !== void 0 ? easing : (easing = "default");
12
+ const variantCb = variants[variant];
24
13
  const ref = useRef(null);
25
- const doc = useDocument();
26
- const cacheId = useCSSCacheId();
27
- let _ease = ease || animationEases[easing] || animationEases.bounce;
28
- const style = (obj = {}) => {
29
- return css(obj, { container: doc === null || doc === void 0 ? void 0 : doc.document, cacheId }).classname;
30
- };
31
- let [cls, setCls] = useState(() => {
32
- let props = {};
33
- if (!isDisableInitial || (isDisableInitial && !open)) {
34
- props.opacity = 0;
35
- props.pointerEvents = 'none';
36
- props.transition = 'none';
14
+ const init = useRef(false);
15
+ const trans = useTransition({
16
+ delay,
17
+ duration,
18
+ easing: Easing[easing],
19
+ onEnter,
20
+ onEntered,
21
+ onExit,
22
+ onExited,
23
+ onDone,
24
+ from: () => {
25
+ const v = variantCb(ref.current);
26
+ return v.from;
27
+ },
28
+ to: () => {
29
+ const v = variantCb(ref.current);
30
+ return v.to;
31
+ },
32
+ onUpdate: (val, prograss) => {
33
+ if (!ref.current)
34
+ throw new Error("Invalid Transition Element");
35
+ const vc = variantCb(ref.current);
36
+ onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(val, prograss);
37
+ return vc.onUpdate(val);
37
38
  }
38
- return style(props);
39
39
  });
40
- useEffect(() => {
41
- let frame;
42
- const measure = () => {
43
- const node = ref.current;
44
- if (!node) {
45
- frame = requestAnimationFrame(measure); // ⬅️ retry next frame
46
- return;
47
- }
48
- const rect = node.getBoundingClientRect();
49
- const v = getVariant(rect, variant);
50
- const initial = isDisableInitial
51
- ? (open ? v.to : v.from)
52
- : (open ? v.from : v.to);
53
- setCls(style(Object.assign(Object.assign({}, initial), { transition: 'none' })));
54
- setRect(rect);
55
- };
56
- frame = requestAnimationFrame(measure);
57
- return () => {
58
- if (endTimer.current) {
59
- clearTimeout(endTimer.current);
60
- }
61
- cancelAnimationFrame(frame);
62
- };
63
- }, []);
64
- useEffect(() => {
65
- if (rect) {
66
- let _duration = isDisableInitial ? 0 : duration;
67
- let _delay = isDisableInitial ? 0 : (delay || 0);
68
- if (isDisableInitial) {
69
- setIsDisableInitial(false);
70
- }
71
- const v = getVariant(rect, variant);
72
- let _css = open ? v.to : v.from;
73
- let _ = Object.assign(Object.assign({}, _css), { transition: Object.keys(_css || {})
74
- .map(k => `${formatCSSProp(k)} ${_duration}ms ${_ease} ${_delay}ms`)
75
- .join(", "), willChange: Object.keys(_css || {})
76
- .map(formatCSSProp)
77
- .join(", ") });
78
- if (open) {
79
- onOpen === null || onOpen === void 0 ? void 0 : onOpen();
80
- onState === null || onState === void 0 ? void 0 : onState("open");
81
- }
82
- else {
83
- onClose === null || onClose === void 0 ? void 0 : onClose();
84
- onState === null || onState === void 0 ? void 0 : onState("close");
85
- }
86
- setTimeout(() => {
87
- setCls(style(_));
88
- if (endTimer.current) {
89
- clearTimeout(endTimer.current);
90
- }
91
- animId.current++;
92
- const id = animId.current;
93
- endTimer.current = setTimeout(() => {
94
- if (id !== animId.current)
95
- return;
96
- if (open) {
97
- onOpened === null || onOpened === void 0 ? void 0 : onOpened();
98
- onState === null || onState === void 0 ? void 0 : onState("opened");
99
- }
100
- else {
101
- onClosed === null || onClosed === void 0 ? void 0 : onClosed();
102
- onState === null || onState === void 0 ? void 0 : onState("closed");
103
- }
104
- }, _duration + _delay);
105
- }, 50);
40
+ useLayoutEffect(() => {
41
+ const isnot = !init.current && !initialTransition;
42
+ init.current = true;
43
+ if (open) {
44
+ trans.enter(isnot ? false : true);
45
+ }
46
+ else {
47
+ trans.exit(isnot ? false : true);
106
48
  }
107
- }, [rect, open, variant]);
108
- const clone = Children.only(children);
109
- return cloneElement(clone, {
110
- className: cls,
49
+ }, [open]);
50
+ if (exitOnUnmount && trans.status === "exited")
51
+ return;
52
+ const childs = Children.toArray(children);
53
+ if (childs.length !== 1) {
54
+ throw new Error("Transition expects exactly one child.");
55
+ }
56
+ const child = childs[0];
57
+ if (!isValidElement(child)) {
58
+ throw new Error("Transition expects a valid React element.");
59
+ }
60
+ return cloneElement(child, {
111
61
  ref: (node) => {
112
62
  ref.current = node;
113
- const childRef = clone.ref;
63
+ const childRef = child.ref;
114
64
  if (typeof childRef === "function") {
115
65
  childRef(node);
116
66
  }
package/Transition/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/Transition/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { cloneElement, Children, useState, useEffect, useRef } from 'react';\nimport * as variants from './variants'\nimport { css } from '../css';\nimport { useDocument } from '../Document';\nimport { useCSSCacheId } from '../css/CSSCacheProvider';\nimport { animationEases } from '../hooks/useAnimation';\nimport { formatCSSProp } from 'oncss';\nimport { CSSProps } from '../css/types';\n\nexport type TransitionVariantTypes = keyof typeof variants\nexport type TransitionVariant = TransitionVariantTypes | ((rect: DOMRect) => ({ from: CSSProps, to: CSSProps }))\nexport type TransitionState = \"open\" | \"opened\" | \"close\" | \"closed\"\n\nexport type TransitionProps = {\n children: React.ReactElement;\n open: boolean;\n variant: TransitionVariant\n ease?: string;\n easing?: keyof typeof animationEases;\n duration?: number;\n delay?: number;\n disableInitialTransition?: boolean;\n onOpen?: () => void;\n onOpened?: () => void;\n onClose?: () => void;\n onClosed?: () => void;\n onState?: (state: TransitionState) => void;\n}\n\nconst getVariant = (rect: DOMRect, variant: TransitionVariant) => {\n let fn = typeof variant === 'string' ? variants[variant] : variant\n if (!fn) throw new Error(`Transition variant \"${variant}\" not found.`)\n return fn(rect as DOMRect);\n}\n\nfunction Transition({ children, ...options }: TransitionProps) {\n let {\n disableInitialTransition = false,\n variant = \"fade\",\n duration = 400,\n delay,\n ease,\n easing,\n open,\n onOpen,\n onOpened,\n onClose,\n onClosed,\n onState\n } = options\n\n const endTimer = useRef<any>(null)\n const animId = useRef(0)\n const [rect, setRect] = useState<DOMRect>()\n const [isDisableInitial, setIsDisableInitial] = useState(disableInitialTransition)\n const ref = useRef<HTMLElement>(null)\n const doc = useDocument();\n const cacheId = useCSSCacheId()\n let _ease = ease || (animationEases as any)[easing as any] || animationEases.bounce\n\n const style = (obj = {}) => {\n return css(obj, { container: doc?.document, cacheId }).classname;\n }\n\n let [cls, setCls] = useState(() => {\n let props: any = {}\n if (!isDisableInitial || (isDisableInitial && !open)) {\n props.opacity = 0\n props.pointerEvents = 'none'\n props.transition = 'none'\n }\n return style(props)\n })\n\n\n useEffect(() => {\n let frame: any\n const measure = () => {\n const node = ref.current\n if (!node) {\n frame = requestAnimationFrame(measure) // ⬅️ retry next frame\n return\n }\n\n const rect = node.getBoundingClientRect()\n const v = getVariant(rect, variant)\n const initial = isDisableInitial\n ? (open ? v.to : v.from)\n : (open ? v.from : v.to)\n\n setCls(style({\n ...initial,\n transition: 'none'\n }))\n setRect(rect)\n }\n\n frame = requestAnimationFrame(measure)\n\n return () => {\n if (endTimer.current) {\n clearTimeout(endTimer.current)\n }\n cancelAnimationFrame(frame)\n }\n\n }, [])\n\n useEffect(() => {\n if (rect) {\n let _duration = isDisableInitial ? 0 : duration\n let _delay = isDisableInitial ? 0 : (delay || 0)\n\n if (isDisableInitial) {\n setIsDisableInitial(false)\n }\n const v = getVariant(rect, variant)\n let _css: any = open ? v.to : v.from\n\n let _ = {\n ..._css,\n transition: Object.keys(_css || {})\n .map(k => `${formatCSSProp(k)} ${_duration}ms ${_ease} ${_delay}ms`)\n .join(\", \"),\n willChange: Object.keys(_css || {})\n .map(formatCSSProp)\n .join(\", \"),\n }\n\n if (open) {\n onOpen?.();\n onState?.(\"open\");\n } else {\n onClose?.();\n onState?.(\"close\");\n }\n\n setTimeout(() => {\n setCls(style(_))\n if (endTimer.current) {\n clearTimeout(endTimer.current)\n }\n animId.current++\n const id = animId.current\n endTimer.current = setTimeout(() => {\n if (id !== animId.current) return\n if (open) {\n onOpened?.();\n onState?.(\"opened\");\n } else {\n onClosed?.();\n onState?.(\"closed\");\n }\n }, _duration + _delay)\n }, 50);\n }\n }, [rect, open, variant])\n\n const clone: any = Children.only(children);\n\n return cloneElement(clone, {\n className: cls,\n ref: (node: HTMLElement) => {\n ref.current = node;\n\n const childRef = (clone as any).ref;\n if (typeof childRef === \"function\") {\n childRef(node);\n } else if (childRef) {\n childRef.current = node;\n }\n }\n });\n}\n\nexport default Transition"],"names":[],"mappings":";;;;;;;;;;AA8BA;AACI;AACA;AAAS;AACT;AACJ;AAEA;AAAoB;AAChB;AAeA;AACA;;;AAGA;AACA;AACA;AACA;AAEA;;AAEA;;;;AAKQ;AACA;AACA;;AAEJ;AACJ;;AAII;;AAEI;;AAEI;;;AAIJ;;;AAGI;AACA;;;AAOR;AAEA;AAEA;AACI;AACI;;;AAGR;;;;;AAOI;;;;;AAMA;AAEA;AAGS;AACA;;AAGA;;AAIL;AACA;;;AAEA;AACA;;;AAIA;AACA;AACI;;;AAGJ;AACA;AACI;;;AAEI;AACA;;;AAEA;AACA;;AAER;;;;;;AAQR;AACA;AACI;AAEA;AACA;;;;AAGI;;;AAGX;AACL;;"}
1
+ {"version":3,"file":"index.js","sources":["../../src/Transition/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { cloneElement, Children, useRef, isValidElement, useLayoutEffect } from 'react';\nimport * as variants from './variants'\nimport useTransition from '../hooks/useTransition';\nimport { Easing } from '../animate';\n\nexport type TransitionVariantTypes = keyof typeof variants\nexport type TransitionProps = {\n children: React.ReactElement;\n open: boolean;\n variant: TransitionVariantTypes\n easing?: keyof typeof Easing\n duration?: number;\n delay?: number;\n initialTransition?: boolean;\n\n exitOnUnmount?: boolean;\n\n onEnter?: () => void\n onEntered?: () => void\n onExit?: () => void\n onExited?: () => void\n onUpdate?: (value: Record<string, number>, progress: number) => void;\n onDone?: () => void;\n}\n\n\nfunction Transition({ children, ...options }: TransitionProps) {\n let {\n open,\n variant = \"fade\",\n duration = 450,\n delay,\n easing,\n exitOnUnmount = false,\n initialTransition = false,\n onEnter,\n onEntered,\n onExit,\n onExited,\n onUpdate,\n onDone,\n\n } = options\n\n easing ??= \"default\"\n\n const variantCb = variants[variant]\n const ref = useRef<HTMLElement>(null)\n const init = useRef(false)\n\n const trans = useTransition({\n delay,\n duration,\n easing: Easing[easing],\n onEnter,\n onEntered,\n onExit,\n onExited,\n onDone,\n from: () => {\n const v = variantCb(ref.current as HTMLElement)\n return v.from\n },\n to: () => {\n const v = variantCb(ref.current as HTMLElement)\n return v.to\n },\n onUpdate: (val, prograss) => {\n if (!ref.current) throw new Error(\"Invalid Transition Element\");\n const vc = variantCb(ref.current)\n onUpdate?.(val, prograss)\n return vc.onUpdate(val)\n }\n })\n\n\n useLayoutEffect(() => {\n const isnot = !init.current && !initialTransition\n init.current = true\n if (open) {\n trans.enter(isnot ? false : true)\n } else {\n trans.exit(isnot ? false : true)\n }\n }, [open])\n\n if (exitOnUnmount && trans.status === \"exited\") return\n\n const childs = Children.toArray(children)\n if (childs.length !== 1) {\n throw new Error(\"Transition expects exactly one child.\");\n }\n const child = childs[0]\n if (!isValidElement(child)) {\n throw new Error(\"Transition expects a valid React element.\");\n }\n\n return cloneElement(child, {\n ref: (node: HTMLElement) => {\n ref.current = node;\n\n const childRef = (child as any).ref;\n if (typeof childRef === \"function\") {\n childRef(node);\n } else if (childRef) {\n childRef.current = node;\n }\n }\n } as any);\n}\n\nexport default Transition"],"names":[],"mappings":";;;;;;;AA2BA;AAAoB;AAChB;;AAmBA;AACA;AACA;;;;AAKI;;;;;;;;;;;;;;AAcA;;AACsB;;;AAGlB;;AAEP;;;AAKG;;AAEI;;;AAEA;;AAER;AAEA;;;AAGA;AACI;;AAEJ;AACA;AACI;;;AAIA;AACI;AAEA;AACA;;;;AAGI;;;AAGJ;AACZ;;"}