@xanui/core 1.2.43 → 1.2.45

package/hooks/usePortal.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePortal.cjs","sources":["../../src/hooks/usePortal.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useEffect, useMemo } from \"react\";\r\nimport { createRoot } from \"react-dom/client\";\r\nimport { ThemeProvider, useTheme } from \"../theme\";\r\nimport { useAppRootElement } from \"../AppRoot/AppRootProvider\";\r\nimport { useDocument } from \"../Document\";\r\nimport AppRoot from \"../AppRoot\";\r\nimport { useCSSCacheId } from \"../css/CSSCacheProvider\";\r\n\r\nexport type UsePortalOptions = {\r\n   container?: HTMLElement;\r\n   autoMount?: boolean;\r\n}\r\n\r\nfunction usePortal(children: React.ReactNode, options?: UsePortalOptions) {\r\n   options = options || {};\r\n   if (options.autoMount === undefined) {\r\n      options.autoMount = true;\r\n   }\r\n   const [mounted, setMounted] = React.useState(options.autoMount);\r\n   const theme = useTheme();\r\n   const doc = useDocument()\r\n   const appRoot = useAppRootElement();\r\n   const cacheId = useCSSCacheId()\r\n\r\n   const { el, root } = useMemo(() => {\r\n      const el = doc.document.createElement(\"div\");\r\n      const root = createRoot(el);\r\n      return { el, root };\r\n   }, [options.autoMount]);\r\n\r\n   const container = () => {\r\n      const container = options?.container || appRoot\r\n      if (!container) throw new Error(`Container not found for portal. Please ensure that AppRoot is present in the application tree.`);\r\n      return container;\r\n   }\r\n\r\n   const mount = () => {\r\n      const cont = container();\r\n      if (!cont.contains(el)) {\r\n         cont.appendChild(el);\r\n      }\r\n      root.render(<AppRoot theme={theme.name} CSSCacheId={cacheId} document={doc.document}>{children}</AppRoot>)\r\n   }\r\n\r\n   const unmount = () => {\r\n      root.render(null)\r\n      el.remove();\r\n   }\r\n\r\n   useEffect(() => {\r\n      (mounted && appRoot) ? mount() : unmount()\r\n   }, [mounted, appRoot]);\r\n\r\n   useEffect(() => {\r\n      if (mounted && appRoot) mount()\r\n   }, [children, appRoot]);\r\n\r\n   useEffect(() => {\r\n      return () => {\r\n         unmount()\r\n      };\r\n   }, []);\r\n\r\n   return {\r\n      isMount: () => mounted,\r\n      mount: () => setMounted(true),\r\n      unmount: () => setMounted(false)\r\n   }\r\n}\r\n\r\n\r\nexport default usePortal;"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAcA;AACG;AACA;AACG;;AAEH;AACA;AACA;AACA;AACA;;;AAIG;AACA;AACH;;AAGG;AACA;AAAgB;AAChB;AACH;;AAGG;;AAEG;;;AAGN;;AAGG;;AAEH;;AAGG;AACH;;;AAG2B;AAC3B;;AAGG;AACG;AACH;;;AAIA;AACA;AACA;;AAEN;;"}

package/hooks/usePortal.js

@@ -1,27 +1,30 @@
 "use client";
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var client = require('react-dom/client');
-var core = require('../theme/core.js');
-require('../css/getValue.js');
-require('oncss');
-var ThemeProvider = require('../theme/ThemeProvider.js');
-require('react-state-bucket');
-var AppRootProvider = require('../AppRoot/AppRootProvider.js');
+import { jsx } from 'react/jsx-runtime';
+import React__default, { useMemo, useEffect } from 'react';
+import { createRoot } from 'react-dom/client';
+import { useTheme } from '../theme/core.js';
+import '../css/getValue.js';
+import 'oncss';
+import '../theme/ThemeProvider.js';
+import 'react-state-bucket';
+import { useAppRootElement } from '../AppRoot/AppRootProvider.js';
+import { useDocument } from '../Document/index.js';
+import AppRoot from '../AppRoot/index.js';
+import { useCSSCacheId } from '../css/CSSCacheProvider.js';
 
 function usePortal(children, options) {
     options = options || {};
     if (options.autoMount === undefined) {
         options.autoMount = true;
     }
-    const [mounted, setMounted] = React.useState(options.autoMount);
-    const theme = core.useTheme();
-    const appRoot = AppRootProvider.useAppRootElement();
-    const { el, root } = React.useMemo(() => {
-        const el = document.createElement("div");
-        const root = client.createRoot(el);
+    const [mounted, setMounted] = React__default.useState(options.autoMount);
+    const theme = useTheme();
+    const doc = useDocument();
+    const appRoot = useAppRootElement();
+    const cacheId = useCSSCacheId();
+    const { el, root } = useMemo(() => {
+        const el = doc.document.createElement("div");
+        const root = createRoot(el);
         return { el, root };
     }, [options.autoMount]);
     const container = () => {
@@ -35,26 +38,20 @@ function usePortal(children, options) {
         if (!cont.contains(el)) {
             cont.appendChild(el);
         }
-        root.render(jsxRuntime.jsx(ThemeProvider, { theme: theme.name, children: children }));
+        root.render(jsx(AppRoot, { theme: theme.name, CSSCacheId: cacheId, document: doc.document, children: children }));
     };
     const unmount = () => {
         root.render(null);
         el.remove();
     };
-    React.useEffect(() => {
-        if (mounted) {
-            mount();
-        }
-        else {
-            unmount();
-        }
-    }, [mounted]);
-    React.useEffect(() => {
-        if (mounted) {
+    useEffect(() => {
+        (mounted && appRoot) ? mount() : unmount();
+    }, [mounted, appRoot]);
+    useEffect(() => {
+        if (mounted && appRoot)
             mount();
-        }
-    }, [children]);
-    React.useEffect(() => {
+    }, [children, appRoot]);
+    useEffect(() => {
         return () => {
             unmount();
         };
@@ -66,5 +63,5 @@ function usePortal(children, options) {
     };
 }
 
-module.exports = usePortal;
+export { usePortal as default };
 //# sourceMappingURL=usePortal.js.map

package/hooks/usePortal.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePortal.js","sources":["../../src/hooks/usePortal.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useEffect, useMemo } from \"react\";\r\nimport { createRoot } from \"react-dom/client\";\r\nimport { ThemeProvider, useTheme } from \"../theme\";\r\nimport { useAppRootElement } from \"../AppRoot/AppRootProvider\";\r\n\r\nexport type UsePortalOptions = {\r\n   container?: HTMLElement;\r\n   autoMount?: boolean;\r\n}\r\n\r\nfunction usePortal(children: React.ReactNode, options?: UsePortalOptions) {\r\n   options = options || {};\r\n   if (options.autoMount === undefined) {\r\n      options.autoMount = true;\r\n   }\r\n   const [mounted, setMounted] = React.useState(options.autoMount);\r\n   const theme = useTheme();\r\n   const appRoot = useAppRootElement();\r\n   const { el, root } = useMemo(() => {\r\n      const el = document.createElement(\"div\");\r\n      const root = createRoot(el);\r\n      return { el, root };\r\n   }, [options.autoMount]);\r\n\r\n   const container = () => {\r\n      const container = options?.container || appRoot\r\n      if (!container) throw new Error(`Container not found for portal. Please ensure that AppRoot is present in the application tree.`);\r\n      return container;\r\n   }\r\n\r\n   const mount = () => {\r\n      const cont = container();\r\n      if (!cont.contains(el)) {\r\n         cont.appendChild(el);\r\n      }\r\n      root.render(<ThemeProvider theme={theme.name}>{children}</ThemeProvider>)\r\n   }\r\n\r\n   const unmount = () => {\r\n      root.render(null)\r\n      el.remove();\r\n   }\r\n\r\n\r\n   useEffect(() => {\r\n      if (mounted) {\r\n         mount()\r\n      } else {\r\n         unmount()\r\n      }\r\n   }, [mounted]);\r\n\r\n   useEffect(() => {\r\n      if (mounted) {\r\n         mount()\r\n      }\r\n   }, [children]);\r\n\r\n   useEffect(() => {\r\n      return () => {\r\n         unmount()\r\n      };\r\n   }, []);\r\n\r\n   return {\r\n      isMount: () => mounted,\r\n      mount: () => setMounted(true),\r\n      unmount: () => setMounted(false)\r\n   }\r\n}\r\n\r\n\r\nexport default usePortal;"],"names":[],"mappings":";;;;;;;;;;;;;AAWA;AACG;AACA;AACG;;AAEH;AACA;AACA;;;AAGG;AACA;AACH;;AAGG;AACA;AAAgB;AAChB;AACH;;AAGG;;AAEG;;AAEH;AACH;;AAGG;;AAEH;;;AAKM;;;AAEA;;AAEN;;;AAIM;;AAEN;;AAGG;AACG;AACH;;;AAIA;AACA;AACA;;AAEN;;"}
+{"version":3,"file":"usePortal.js","sources":["../../src/hooks/usePortal.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useEffect, useMemo } from \"react\";\r\nimport { createRoot } from \"react-dom/client\";\r\nimport { ThemeProvider, useTheme } from \"../theme\";\r\nimport { useAppRootElement } from \"../AppRoot/AppRootProvider\";\r\nimport { useDocument } from \"../Document\";\r\nimport AppRoot from \"../AppRoot\";\r\nimport { useCSSCacheId } from \"../css/CSSCacheProvider\";\r\n\r\nexport type UsePortalOptions = {\r\n   container?: HTMLElement;\r\n   autoMount?: boolean;\r\n}\r\n\r\nfunction usePortal(children: React.ReactNode, options?: UsePortalOptions) {\r\n   options = options || {};\r\n   if (options.autoMount === undefined) {\r\n      options.autoMount = true;\r\n   }\r\n   const [mounted, setMounted] = React.useState(options.autoMount);\r\n   const theme = useTheme();\r\n   const doc = useDocument()\r\n   const appRoot = useAppRootElement();\r\n   const cacheId = useCSSCacheId()\r\n\r\n   const { el, root } = useMemo(() => {\r\n      const el = doc.document.createElement(\"div\");\r\n      const root = createRoot(el);\r\n      return { el, root };\r\n   }, [options.autoMount]);\r\n\r\n   const container = () => {\r\n      const container = options?.container || appRoot\r\n      if (!container) throw new Error(`Container not found for portal. Please ensure that AppRoot is present in the application tree.`);\r\n      return container;\r\n   }\r\n\r\n   const mount = () => {\r\n      const cont = container();\r\n      if (!cont.contains(el)) {\r\n         cont.appendChild(el);\r\n      }\r\n      root.render(<AppRoot theme={theme.name} CSSCacheId={cacheId} document={doc.document}>{children}</AppRoot>)\r\n   }\r\n\r\n   const unmount = () => {\r\n      root.render(null)\r\n      el.remove();\r\n   }\r\n\r\n   useEffect(() => {\r\n      (mounted && appRoot) ? mount() : unmount()\r\n   }, [mounted, appRoot]);\r\n\r\n   useEffect(() => {\r\n      if (mounted && appRoot) mount()\r\n   }, [children, appRoot]);\r\n\r\n   useEffect(() => {\r\n      return () => {\r\n         unmount()\r\n      };\r\n   }, []);\r\n\r\n   return {\r\n      isMount: () => mounted,\r\n      mount: () => setMounted(true),\r\n      unmount: () => setMounted(false)\r\n   }\r\n}\r\n\r\n\r\nexport default usePortal;"],"names":[],"mappings":";;;;;;;;;;;;;;AAcA;AACG;AACA;AACG;;AAEH;AACA;AACA;AACA;AACA;;;AAIG;AACA;AACH;;AAGG;AACA;AAAgB;AAChB;AACH;;AAGG;;AAEG;;;AAGN;;AAGG;;AAEH;;AAGG;AACH;;;AAG2B;AAC3B;;AAGG;AACG;AACH;;;AAIA;AACA;AACA;;AAEN;;"}

package/hooks/useTransition/{index.mjs → index.cjs}

@@ -1,15 +1,17 @@
 "use client";
-import { __rest } from 'tslib';
-import { useId, useState, useEffect } from 'react';
-import { animationEases } from '../useAnimation.mjs';
-import { css } from '../../css/index.mjs';
-import { formatCSSProp } from 'oncss';
-import * as variants from './variants.mjs';
-import { useDocument } from '../../Document/index.mjs';
-import { useCSSCacheId } from '../../css/CSSCacheProvider.mjs';
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var useAnimation = require('../useAnimation.cjs');
+var index$1 = require('../../css/index.cjs');
+var oncss = require('oncss');
+var variants = require('./variants.cjs');
+var index = require('../../Document/index.cjs');
+var CSSCacheProvider = require('../../css/CSSCacheProvider.cjs');
 
 const style = (obj = {}, doc, cacheId) => {
-    return css(obj, { selector: "#", container: doc, cacheId }).classname;
+    return index$1.css(obj, { selector: "#", container: doc, cacheId }).classname;
 };
 const getVariant = (rect, variant) => {
     let fn = typeof variant === 'string' ? variants[variant] : variant;
@@ -18,34 +20,34 @@ const getVariant = (rect, variant) => {
     return fn(rect);
 };
 const useTransition = (_a) => {
-    var { open } = _a, props = __rest(_a, ["open"]);
+    var { open } = _a, props = tslib.__rest(_a, ["open"]);
     let { disableInitialTransition = false, variant = "fade", duration = 400, delay, ease, easing, exitOnUnmount = false, onOpen, onOpened, onClose, onClosed, onState } = props;
-    const doc = useDocument();
-    const cacheId = useCSSCacheId();
-    let _ease = ease || animationEases[easing] || animationEases.bounce;
-    const id = "xui-transition-" + useId();
-    const [state, setState] = useState({
+    const doc = index.useDocument();
+    const cacheId = CSSCacheProvider.useCSSCacheId();
+    let _ease = ease || useAnimation.animationEases[easing] || useAnimation.animationEases.bounce;
+    const id = "xui-transition-" + React.useId();
+    const [state, setState] = React.useState({
         initial: false,
-        classname: style({ visibility: "hidden" }, doc, cacheId),
+        classname: style({ visibility: "hidden" }, doc.document, cacheId),
         variant: variant,
         rect: null,
         stage: open ? "open" : "closed",
         unmounted: false,
     });
-    const getEle = () => doc.querySelector(`[data-transition="${id}"]`);
+    const getEle = () => doc.document.querySelector(`[data-transition="${id}"]`);
     const getBoundary = () => { var _a; return state.rect || ((_a = getEle()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || new DOMRect(0, 0, 0, 0); };
-    useEffect(() => {
+    React.useEffect(() => {
         if (exitOnUnmount && state.stage === 'closed') {
             if (!open) {
                 setState(s => (Object.assign(Object.assign({}, s), { initial: false, classname: "", unmounted: true, variant: variant })));
             }
             else {
-                setState(s => (Object.assign(Object.assign({}, s), { variant: variant, classname: style({ visibility: "hidden" }, doc, cacheId), stage: "open" })));
+                setState(s => (Object.assign(Object.assign({}, s), { variant: variant, classname: style({ visibility: "hidden" }, doc.document, cacheId), stage: "open" })));
             }
         }
     }, [open, state.stage, exitOnUnmount, variant]);
     // initial effect
-    useEffect(() => {
+    React.useEffect(() => {
         const ele = getEle();
         if (!ele)
             return;
@@ -54,7 +56,7 @@ const useTransition = (_a) => {
         const rect = getBoundary();
         let { from } = getVariant(rect, state.variant);
         if (open && !state.initial) {
-            setState(s => (Object.assign(Object.assign({}, s), { classname: (!disableInitialTransition || state.unmounted) ? style(from, doc, cacheId) : "", initial: true, rect: rect })));
+            setState(s => (Object.assign(Object.assign({}, s), { classname: (!disableInitialTransition || state.unmounted) ? style(from, doc.document, cacheId) : "", initial: true, rect: rect })));
             let stimer = null;
             let etimer = null;
             ele.ontransitionstart = () => {
@@ -79,17 +81,17 @@ const useTransition = (_a) => {
             };
         }
         else if (!state.initial) {
-            setState(s => (Object.assign(Object.assign({}, s), { classname: style(from, doc, cacheId), rect: rect })));
+            setState(s => (Object.assign(Object.assign({}, s), { classname: style(from, doc.document, cacheId), rect: rect })));
         }
     }, [open, state.initial, state.stage, exitOnUnmount]);
-    useEffect(() => {
+    React.useEffect(() => {
         if (state.initial) {
             let _variant = state.variant !== variant ? variant : state.variant;
             const { from, to } = getVariant(state.rect, _variant);
             let _css = open ? to : from;
             let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`;
-            let _ = Object.assign(Object.assign({}, _css), { transition: Object.keys(_css || {}).map(k => formatCSSProp(k)).join(trans + ", ") + trans });
-            setState(s => (Object.assign(Object.assign({}, s), { classname: style(_, doc, cacheId), variant: _variant })));
+            let _ = Object.assign(Object.assign({}, _css), { transition: Object.keys(_css || {}).map(k => oncss.formatCSSProp(k)).join(trans + ", ") + trans });
+            setState(s => (Object.assign(Object.assign({}, s), { classname: style(_, doc.document, cacheId), variant: _variant })));
         }
     }, [open, state.initial, variant]);
     return {
@@ -102,5 +104,5 @@ const useTransition = (_a) => {
     };
 };
 
-export { useTransition as default };
-//# sourceMappingURL=index.mjs.map
+module.exports = useTransition;
+//# sourceMappingURL=index.cjs.map

package/hooks/useTransition/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/hooks/useTransition/index.ts"],"sourcesContent":["\"use client\";\r\nimport { useState, useEffect, useId } from 'react';\r\nimport { animationEases } from '../useAnimation';\r\nimport { css } from '../../css';\r\nimport { formatCSSProp } from 'oncss';\r\nimport { CSSProps } from '../../css/types';\r\nimport * as variants from './variants'\r\nimport { useDocument } from '../../Document';\r\nimport { useCSSCacheId } from '../../css/CSSCacheProvider';\r\n\r\nexport type UseTransitionVariantTypes = keyof typeof variants\r\nexport type UseTransitionState = \"open\" | \"opened\" | \"close\" | \"closed\"\r\n\r\nexport type UseTransitionVariant = (rect: DOMRect) => ({ from: CSSProps, to: CSSProps })\r\n\r\nexport type UseTransitionProps = {\r\n   open: boolean;\r\n   variant: UseTransitionVariant | UseTransitionVariantTypes;\r\n   ease?: string;\r\n   easing?: keyof typeof animationEases;\r\n   duration?: number;\r\n   delay?: number;\r\n   disableInitialTransition?: boolean;\r\n   exitOnUnmount?: boolean;\r\n   onOpen?: () => void;\r\n   onOpened?: () => void;\r\n   onClose?: () => void;\r\n   onClosed?: () => void;\r\n   onState?: (state: UseTransitionState) => void;\r\n}\r\n\r\n\r\nconst style = (obj = {}, doc: Document, cacheId: string) => {\r\n   return css(obj, { selector: \"#\", container: doc, cacheId }).classname;\r\n}\r\n\r\nconst getVariant = (rect: DOMRect | null, variant: UseTransitionProps['variant']) => {\r\n   let fn = typeof variant === 'string' ? variants[variant] : variant\r\n   if (!fn) throw new Error(`Transition variant \"${variant}\" not found.`)\r\n   return fn(rect as DOMRect);\r\n}\r\n\r\nconst useTransition = ({ open, ...props }: UseTransitionProps) => {\r\n   let {\r\n      disableInitialTransition = false,\r\n      variant = \"fade\",\r\n      duration = 400,\r\n      delay,\r\n      ease,\r\n      easing,\r\n      exitOnUnmount = false,\r\n      onOpen,\r\n      onOpened,\r\n      onClose,\r\n      onClosed,\r\n      onState\r\n   } = props\r\n   const doc = useDocument();\r\n   const cacheId = useCSSCacheId()\r\n   let _ease = ease || (animationEases as any)[easing as any] || animationEases.bounce\r\n   const id = \"xui-transition-\" + useId()\r\n   const [state, setState] = useState({\r\n      initial: false,\r\n      classname: style({ visibility: \"hidden\" }, doc.document, cacheId),\r\n      variant: variant,\r\n      rect: null as DOMRect | null,\r\n      stage: open ? \"open\" : \"closed\",\r\n      unmounted: false,\r\n   })\r\n\r\n   const getEle = () => doc.document.querySelector(`[data-transition=\"${id}\"]`) as HTMLElement;\r\n   const getBoundary = () => state.rect || getEle()?.getBoundingClientRect() || new DOMRect(0, 0, 0, 0);\r\n\r\n   useEffect(() => {\r\n      if (exitOnUnmount && state.stage === 'closed') {\r\n         if (!open) {\r\n            setState(s => ({\r\n               ...s,\r\n               initial: false,\r\n               classname: \"\",\r\n               unmounted: true,\r\n               variant: variant,\r\n            }))\r\n         } else {\r\n            setState(s => ({\r\n               ...s,\r\n               variant: variant,\r\n               classname: style({ visibility: \"hidden\" }, doc.document, cacheId),\r\n               stage: \"open\",\r\n            }))\r\n         }\r\n      }\r\n   }, [open, state.stage, exitOnUnmount, variant])\r\n\r\n   // initial effect\r\n   useEffect(() => {\r\n      const ele = getEle()\r\n      if (!ele) return\r\n      if (exitOnUnmount && state.stage === 'closed') return\r\n\r\n      const rect = getBoundary();\r\n      let { from } = getVariant(rect, state.variant)\r\n      if (open && !state.initial) {\r\n         setState(s => ({\r\n            ...s,\r\n            classname: (!disableInitialTransition || state.unmounted) ? style(from, doc.document, cacheId) : \"\",\r\n            initial: true,\r\n            rect: rect,\r\n         }))\r\n         let stimer: any = null\r\n         let etimer: any = null\r\n         ele.ontransitionstart = () => {\r\n            clearTimeout(stimer)\r\n            stimer = setTimeout(() => {\r\n               const isOpen = ele.getAttribute('data-transition-state') === 'open';\r\n               (onOpen && isOpen) && onOpen();\r\n               (onClose && !isOpen) && onClose()\r\n               onState && onState(isOpen ? \"open\" : \"close\")\r\n               setState(s => ({\r\n                  ...s,\r\n                  stage: isOpen ? \"open\" : \"close\"\r\n               }))\r\n            }, 1)\r\n         }\r\n\r\n         ele.ontransitionend = () => {\r\n            clearTimeout(etimer)\r\n            etimer = setTimeout(() => {\r\n               const isOpen = ele.getAttribute('data-transition-state') === 'open';\r\n               (onOpened && isOpen) && onOpened();\r\n               (onClosed && !isOpen) && onClosed();\r\n               onState && onState(isOpen ? \"opened\" : \"closed\")\r\n               setState(s => ({\r\n                  ...s,\r\n                  stage: isOpen ? \"opened\" : \"closed\"\r\n               }))\r\n            }, 1)\r\n         }\r\n      } else if (!state.initial) {\r\n         setState(s => ({\r\n            ...s,\r\n            classname: style(from, doc.document, cacheId),\r\n            rect: rect,\r\n         }))\r\n      }\r\n   }, [open, state.initial, state.stage, exitOnUnmount])\r\n\r\n\r\n   useEffect(() => {\r\n      if (state.initial) {\r\n         let _variant = state.variant !== variant ? variant : state.variant\r\n         const { from, to } = getVariant(state.rect, _variant)\r\n         let _css: CSSProps = open ? to : from\r\n         let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`\r\n         let _ = {\r\n            ..._css,\r\n            transition: Object.keys(_css || {}).map(k => formatCSSProp(k)).join(trans + \", \") + trans,\r\n         }\r\n         setState(s => ({\r\n            ...s,\r\n            classname: style(_, doc.document, cacheId),\r\n            variant: _variant\r\n         }))\r\n      }\r\n   }, [open, state.initial, variant])\r\n\r\n   return {\r\n      exited: exitOnUnmount && state.stage === 'closed',\r\n      props: {\r\n         'id': state.classname,\r\n         'data-transition': id,\r\n         'data-transition-state': open ? 'open' : 'close',\r\n      }\r\n   }\r\n}\r\n\r\n\r\nexport default useTransition"],"names":[],"mappings":";;;;;;;;;;;;AAgCA;AACG;AACH;AAEA;AACG;AACA;AAAS;AACT;AACH;AAEA;AAAuB;AACpB;AAcA;AACA;AACA;AACA;AACA;AACG;AACA;AACA;AACA;;AAEA;AACF;AAED;AACA;;;;;;;AAaS;;;AAQT;;;AAIG;AACA;;AACA;;AAEA;AACA;AACA;;;;AASG;;AAEG;;AAEG;;AAEA;;;AAMN;AAEA;;AAEG;;AAEG;;AAEA;;;AAMN;;AACI;;;AAOV;;AAIG;AACG;AACA;;;AAGA;;;;;AAaH;AACA;;AAEG;;AAEF;;AAEP;;"}

package/hooks/useTransition/index.js

@@ -1,17 +1,15 @@
 "use client";
-'use strict';
-
-var tslib = require('tslib');
-var React = require('react');
-var useAnimation = require('../useAnimation.js');
-var index$1 = require('../../css/index.js');
-var oncss = require('oncss');
-var variants = require('./variants.js');
-var index = require('../../Document/index.js');
-var CSSCacheProvider = require('../../css/CSSCacheProvider.js');
+import { __rest } from 'tslib';
+import { useId, useState, useEffect } from 'react';
+import { animationEases } from '../useAnimation.js';
+import { css } from '../../css/index.js';
+import { formatCSSProp } from 'oncss';
+import * as variants from './variants.js';
+import { useDocument } from '../../Document/index.js';
+import { useCSSCacheId } from '../../css/CSSCacheProvider.js';
 
 const style = (obj = {}, doc, cacheId) => {
-    return index$1.css(obj, { selector: "#", container: doc, cacheId }).classname;
+    return css(obj, { selector: "#", container: doc, cacheId }).classname;
 };
 const getVariant = (rect, variant) => {
     let fn = typeof variant === 'string' ? variants[variant] : variant;
@@ -20,34 +18,34 @@ const getVariant = (rect, variant) => {
     return fn(rect);
 };
 const useTransition = (_a) => {
-    var { open } = _a, props = tslib.__rest(_a, ["open"]);
+    var { open } = _a, props = __rest(_a, ["open"]);
     let { disableInitialTransition = false, variant = "fade", duration = 400, delay, ease, easing, exitOnUnmount = false, onOpen, onOpened, onClose, onClosed, onState } = props;
-    const doc = index.useDocument();
-    const cacheId = CSSCacheProvider.useCSSCacheId();
-    let _ease = ease || useAnimation.animationEases[easing] || useAnimation.animationEases.bounce;
-    const id = "xui-transition-" + React.useId();
-    const [state, setState] = React.useState({
+    const doc = useDocument();
+    const cacheId = useCSSCacheId();
+    let _ease = ease || animationEases[easing] || animationEases.bounce;
+    const id = "xui-transition-" + useId();
+    const [state, setState] = useState({
         initial: false,
-        classname: style({ visibility: "hidden" }, doc, cacheId),
+        classname: style({ visibility: "hidden" }, doc.document, cacheId),
         variant: variant,
         rect: null,
         stage: open ? "open" : "closed",
         unmounted: false,
     });
-    const getEle = () => doc.querySelector(`[data-transition="${id}"]`);
+    const getEle = () => doc.document.querySelector(`[data-transition="${id}"]`);
     const getBoundary = () => { var _a; return state.rect || ((_a = getEle()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || new DOMRect(0, 0, 0, 0); };
-    React.useEffect(() => {
+    useEffect(() => {
         if (exitOnUnmount && state.stage === 'closed') {
             if (!open) {
                 setState(s => (Object.assign(Object.assign({}, s), { initial: false, classname: "", unmounted: true, variant: variant })));
             }
             else {
-                setState(s => (Object.assign(Object.assign({}, s), { variant: variant, classname: style({ visibility: "hidden" }, doc, cacheId), stage: "open" })));
+                setState(s => (Object.assign(Object.assign({}, s), { variant: variant, classname: style({ visibility: "hidden" }, doc.document, cacheId), stage: "open" })));
             }
         }
     }, [open, state.stage, exitOnUnmount, variant]);
     // initial effect
-    React.useEffect(() => {
+    useEffect(() => {
         const ele = getEle();
         if (!ele)
             return;
@@ -56,7 +54,7 @@ const useTransition = (_a) => {
         const rect = getBoundary();
         let { from } = getVariant(rect, state.variant);
         if (open && !state.initial) {
-            setState(s => (Object.assign(Object.assign({}, s), { classname: (!disableInitialTransition || state.unmounted) ? style(from, doc, cacheId) : "", initial: true, rect: rect })));
+            setState(s => (Object.assign(Object.assign({}, s), { classname: (!disableInitialTransition || state.unmounted) ? style(from, doc.document, cacheId) : "", initial: true, rect: rect })));
             let stimer = null;
             let etimer = null;
             ele.ontransitionstart = () => {
@@ -81,17 +79,17 @@ const useTransition = (_a) => {
             };
         }
         else if (!state.initial) {
-            setState(s => (Object.assign(Object.assign({}, s), { classname: style(from, doc, cacheId), rect: rect })));
+            setState(s => (Object.assign(Object.assign({}, s), { classname: style(from, doc.document, cacheId), rect: rect })));
         }
     }, [open, state.initial, state.stage, exitOnUnmount]);
-    React.useEffect(() => {
+    useEffect(() => {
         if (state.initial) {
             let _variant = state.variant !== variant ? variant : state.variant;
             const { from, to } = getVariant(state.rect, _variant);
             let _css = open ? to : from;
             let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`;
-            let _ = Object.assign(Object.assign({}, _css), { transition: Object.keys(_css || {}).map(k => oncss.formatCSSProp(k)).join(trans + ", ") + trans });
-            setState(s => (Object.assign(Object.assign({}, s), { classname: style(_, doc, cacheId), variant: _variant })));
+            let _ = Object.assign(Object.assign({}, _css), { transition: Object.keys(_css || {}).map(k => formatCSSProp(k)).join(trans + ", ") + trans });
+            setState(s => (Object.assign(Object.assign({}, s), { classname: style(_, doc.document, cacheId), variant: _variant })));
         }
     }, [open, state.initial, variant]);
     return {
@@ -104,5 +102,5 @@ const useTransition = (_a) => {
     };
 };
 
-module.exports = useTransition;
+export { useTransition as default };
 //# sourceMappingURL=index.js.map

package/hooks/useTransition/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/hooks/useTransition/index.ts"],"sourcesContent":["\"use client\";\r\nimport { useState, useEffect, useId } from 'react';\r\nimport { animationEases } from '../useAnimation';\r\nimport { css } from '../../css';\r\nimport { formatCSSProp } from 'oncss';\r\nimport { CSSProps } from '../../css/types';\r\nimport * as variants from './variants'\r\nimport { useDocument } from '../../Document';\r\nimport { useCSSCacheId } from '../../css/CSSCacheProvider';\r\n\r\nexport type UseTransitionVariantTypes = keyof typeof variants\r\nexport type UseTransitionState = \"open\" | \"opened\" | \"close\" | \"closed\"\r\n\r\nexport type UseTransitionVariant = (rect: DOMRect) => ({ from: CSSProps, to: CSSProps })\r\n\r\nexport type UseTransitionProps = {\r\n   open: boolean;\r\n   variant: UseTransitionVariant | UseTransitionVariantTypes;\r\n   ease?: string;\r\n   easing?: keyof typeof animationEases;\r\n   duration?: number;\r\n   delay?: number;\r\n   disableInitialTransition?: boolean;\r\n   exitOnUnmount?: boolean;\r\n   onOpen?: () => void;\r\n   onOpened?: () => void;\r\n   onClose?: () => void;\r\n   onClosed?: () => void;\r\n   onState?: (state: UseTransitionState) => void;\r\n}\r\n\r\n\r\nconst style = (obj = {}, doc: Document, cacheId: string) => {\r\n   return css(obj, { selector: \"#\", container: doc, cacheId }).classname;\r\n}\r\n\r\nconst getVariant = (rect: DOMRect | null, variant: UseTransitionProps['variant']) => {\r\n   let fn = typeof variant === 'string' ? variants[variant] : variant\r\n   if (!fn) throw new Error(`Transition variant \"${variant}\" not found.`)\r\n   return fn(rect as DOMRect);\r\n}\r\n\r\nconst useTransition = ({ open, ...props }: UseTransitionProps) => {\r\n   let {\r\n      disableInitialTransition = false,\r\n      variant = \"fade\",\r\n      duration = 400,\r\n      delay,\r\n      ease,\r\n      easing,\r\n      exitOnUnmount = false,\r\n      onOpen,\r\n      onOpened,\r\n      onClose,\r\n      onClosed,\r\n      onState\r\n   } = props\r\n   const doc = useDocument();\r\n   const cacheId = useCSSCacheId()\r\n   let _ease = ease || (animationEases as any)[easing as any] || animationEases.bounce\r\n   const id = \"xui-transition-\" + useId()\r\n   const [state, setState] = useState({\r\n      initial: false,\r\n      classname: style({ visibility: \"hidden\" }, doc, cacheId),\r\n      variant: variant,\r\n      rect: null as DOMRect | null,\r\n      stage: open ? \"open\" : \"closed\",\r\n      unmounted: false,\r\n   })\r\n\r\n   const getEle = () => doc.querySelector(`[data-transition=\"${id}\"]`) as HTMLElement;\r\n   const getBoundary = () => state.rect || getEle()?.getBoundingClientRect() || new DOMRect(0, 0, 0, 0);\r\n\r\n   useEffect(() => {\r\n      if (exitOnUnmount && state.stage === 'closed') {\r\n         if (!open) {\r\n            setState(s => ({\r\n               ...s,\r\n               initial: false,\r\n               classname: \"\",\r\n               unmounted: true,\r\n               variant: variant,\r\n            }))\r\n         } else {\r\n            setState(s => ({\r\n               ...s,\r\n               variant: variant,\r\n               classname: style({ visibility: \"hidden\" }, doc, cacheId),\r\n               stage: \"open\",\r\n            }))\r\n         }\r\n      }\r\n   }, [open, state.stage, exitOnUnmount, variant])\r\n\r\n   // initial effect\r\n   useEffect(() => {\r\n      const ele = getEle()\r\n      if (!ele) return\r\n      if (exitOnUnmount && state.stage === 'closed') return\r\n\r\n      const rect = getBoundary();\r\n      let { from } = getVariant(rect, state.variant)\r\n      if (open && !state.initial) {\r\n         setState(s => ({\r\n            ...s,\r\n            classname: (!disableInitialTransition || state.unmounted) ? style(from, doc, cacheId) : \"\",\r\n            initial: true,\r\n            rect: rect,\r\n         }))\r\n         let stimer: any = null\r\n         let etimer: any = null\r\n         ele.ontransitionstart = () => {\r\n            clearTimeout(stimer)\r\n            stimer = setTimeout(() => {\r\n               const isOpen = ele.getAttribute('data-transition-state') === 'open';\r\n               (onOpen && isOpen) && onOpen();\r\n               (onClose && !isOpen) && onClose()\r\n               onState && onState(isOpen ? \"open\" : \"close\")\r\n               setState(s => ({\r\n                  ...s,\r\n                  stage: isOpen ? \"open\" : \"close\"\r\n               }))\r\n            }, 1)\r\n         }\r\n\r\n         ele.ontransitionend = () => {\r\n            clearTimeout(etimer)\r\n            etimer = setTimeout(() => {\r\n               const isOpen = ele.getAttribute('data-transition-state') === 'open';\r\n               (onOpened && isOpen) && onOpened();\r\n               (onClosed && !isOpen) && onClosed();\r\n               onState && onState(isOpen ? \"opened\" : \"closed\")\r\n               setState(s => ({\r\n                  ...s,\r\n                  stage: isOpen ? \"opened\" : \"closed\"\r\n               }))\r\n            }, 1)\r\n         }\r\n      } else if (!state.initial) {\r\n         setState(s => ({\r\n            ...s,\r\n            classname: style(from, doc, cacheId),\r\n            rect: rect,\r\n         }))\r\n      }\r\n   }, [open, state.initial, state.stage, exitOnUnmount])\r\n\r\n\r\n   useEffect(() => {\r\n      if (state.initial) {\r\n         let _variant = state.variant !== variant ? variant : state.variant\r\n         const { from, to } = getVariant(state.rect, _variant)\r\n         let _css: CSSProps = open ? to : from\r\n         let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`\r\n         let _ = {\r\n            ..._css,\r\n            transition: Object.keys(_css || {}).map(k => formatCSSProp(k)).join(trans + \", \") + trans,\r\n         }\r\n         setState(s => ({\r\n            ...s,\r\n            classname: style(_, doc, cacheId),\r\n            variant: _variant\r\n         }))\r\n      }\r\n   }, [open, state.initial, variant])\r\n\r\n   return {\r\n      exited: exitOnUnmount && state.stage === 'closed',\r\n      props: {\r\n         'id': state.classname,\r\n         'data-transition': id,\r\n         'data-transition-state': open ? 'open' : 'close',\r\n      }\r\n   }\r\n}\r\n\r\n\r\nexport default useTransition"],"names":[],"mappings":";;;;;;;;;;;;AAgCA;AACG;AACH;AAEA;AACG;AACA;AAAS;AACT;AACH;AAEA;AAAuB;AACpB;AAcA;AACA;AACA;AACA;AACA;AACG;AACA;AACA;AACA;;AAEA;AACF;AAED;AACA;;;;;;;AAaS;;;AAQT;;;AAIG;AACA;;AACA;;AAEA;AACA;AACA;AACG;;;AAQA;;AAEG;;AAEG;;AAEA;;;AAMN;AAEA;;AAEG;;AAEG;;AAEA;;;AAMN;;AACI;;;AAOV;;AAIG;AACG;AACA;;;AAGA;;;;;AAaH;AACA;;AAEG;;AAEF;;AAEP;;"}
+{"version":3,"file":"index.js","sources":["../../../src/hooks/useTransition/index.ts"],"sourcesContent":["\"use client\";\r\nimport { useState, useEffect, useId } from 'react';\r\nimport { animationEases } from '../useAnimation';\r\nimport { css } from '../../css';\r\nimport { formatCSSProp } from 'oncss';\r\nimport { CSSProps } from '../../css/types';\r\nimport * as variants from './variants'\r\nimport { useDocument } from '../../Document';\r\nimport { useCSSCacheId } from '../../css/CSSCacheProvider';\r\n\r\nexport type UseTransitionVariantTypes = keyof typeof variants\r\nexport type UseTransitionState = \"open\" | \"opened\" | \"close\" | \"closed\"\r\n\r\nexport type UseTransitionVariant = (rect: DOMRect) => ({ from: CSSProps, to: CSSProps })\r\n\r\nexport type UseTransitionProps = {\r\n   open: boolean;\r\n   variant: UseTransitionVariant | UseTransitionVariantTypes;\r\n   ease?: string;\r\n   easing?: keyof typeof animationEases;\r\n   duration?: number;\r\n   delay?: number;\r\n   disableInitialTransition?: boolean;\r\n   exitOnUnmount?: boolean;\r\n   onOpen?: () => void;\r\n   onOpened?: () => void;\r\n   onClose?: () => void;\r\n   onClosed?: () => void;\r\n   onState?: (state: UseTransitionState) => void;\r\n}\r\n\r\n\r\nconst style = (obj = {}, doc: Document, cacheId: string) => {\r\n   return css(obj, { selector: \"#\", container: doc, cacheId }).classname;\r\n}\r\n\r\nconst getVariant = (rect: DOMRect | null, variant: UseTransitionProps['variant']) => {\r\n   let fn = typeof variant === 'string' ? variants[variant] : variant\r\n   if (!fn) throw new Error(`Transition variant \"${variant}\" not found.`)\r\n   return fn(rect as DOMRect);\r\n}\r\n\r\nconst useTransition = ({ open, ...props }: UseTransitionProps) => {\r\n   let {\r\n      disableInitialTransition = false,\r\n      variant = \"fade\",\r\n      duration = 400,\r\n      delay,\r\n      ease,\r\n      easing,\r\n      exitOnUnmount = false,\r\n      onOpen,\r\n      onOpened,\r\n      onClose,\r\n      onClosed,\r\n      onState\r\n   } = props\r\n   const doc = useDocument();\r\n   const cacheId = useCSSCacheId()\r\n   let _ease = ease || (animationEases as any)[easing as any] || animationEases.bounce\r\n   const id = \"xui-transition-\" + useId()\r\n   const [state, setState] = useState({\r\n      initial: false,\r\n      classname: style({ visibility: \"hidden\" }, doc.document, cacheId),\r\n      variant: variant,\r\n      rect: null as DOMRect | null,\r\n      stage: open ? \"open\" : \"closed\",\r\n      unmounted: false,\r\n   })\r\n\r\n   const getEle = () => doc.document.querySelector(`[data-transition=\"${id}\"]`) as HTMLElement;\r\n   const getBoundary = () => state.rect || getEle()?.getBoundingClientRect() || new DOMRect(0, 0, 0, 0);\r\n\r\n   useEffect(() => {\r\n      if (exitOnUnmount && state.stage === 'closed') {\r\n         if (!open) {\r\n            setState(s => ({\r\n               ...s,\r\n               initial: false,\r\n               classname: \"\",\r\n               unmounted: true,\r\n               variant: variant,\r\n            }))\r\n         } else {\r\n            setState(s => ({\r\n               ...s,\r\n               variant: variant,\r\n               classname: style({ visibility: \"hidden\" }, doc.document, cacheId),\r\n               stage: \"open\",\r\n            }))\r\n         }\r\n      }\r\n   }, [open, state.stage, exitOnUnmount, variant])\r\n\r\n   // initial effect\r\n   useEffect(() => {\r\n      const ele = getEle()\r\n      if (!ele) return\r\n      if (exitOnUnmount && state.stage === 'closed') return\r\n\r\n      const rect = getBoundary();\r\n      let { from } = getVariant(rect, state.variant)\r\n      if (open && !state.initial) {\r\n         setState(s => ({\r\n            ...s,\r\n            classname: (!disableInitialTransition || state.unmounted) ? style(from, doc.document, cacheId) : \"\",\r\n            initial: true,\r\n            rect: rect,\r\n         }))\r\n         let stimer: any = null\r\n         let etimer: any = null\r\n         ele.ontransitionstart = () => {\r\n            clearTimeout(stimer)\r\n            stimer = setTimeout(() => {\r\n               const isOpen = ele.getAttribute('data-transition-state') === 'open';\r\n               (onOpen && isOpen) && onOpen();\r\n               (onClose && !isOpen) && onClose()\r\n               onState && onState(isOpen ? \"open\" : \"close\")\r\n               setState(s => ({\r\n                  ...s,\r\n                  stage: isOpen ? \"open\" : \"close\"\r\n               }))\r\n            }, 1)\r\n         }\r\n\r\n         ele.ontransitionend = () => {\r\n            clearTimeout(etimer)\r\n            etimer = setTimeout(() => {\r\n               const isOpen = ele.getAttribute('data-transition-state') === 'open';\r\n               (onOpened && isOpen) && onOpened();\r\n               (onClosed && !isOpen) && onClosed();\r\n               onState && onState(isOpen ? \"opened\" : \"closed\")\r\n               setState(s => ({\r\n                  ...s,\r\n                  stage: isOpen ? \"opened\" : \"closed\"\r\n               }))\r\n            }, 1)\r\n         }\r\n      } else if (!state.initial) {\r\n         setState(s => ({\r\n            ...s,\r\n            classname: style(from, doc.document, cacheId),\r\n            rect: rect,\r\n         }))\r\n      }\r\n   }, [open, state.initial, state.stage, exitOnUnmount])\r\n\r\n\r\n   useEffect(() => {\r\n      if (state.initial) {\r\n         let _variant = state.variant !== variant ? variant : state.variant\r\n         const { from, to } = getVariant(state.rect, _variant)\r\n         let _css: CSSProps = open ? to : from\r\n         let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`\r\n         let _ = {\r\n            ..._css,\r\n            transition: Object.keys(_css || {}).map(k => formatCSSProp(k)).join(trans + \", \") + trans,\r\n         }\r\n         setState(s => ({\r\n            ...s,\r\n            classname: style(_, doc.document, cacheId),\r\n            variant: _variant\r\n         }))\r\n      }\r\n   }, [open, state.initial, variant])\r\n\r\n   return {\r\n      exited: exitOnUnmount && state.stage === 'closed',\r\n      props: {\r\n         'id': state.classname,\r\n         'data-transition': id,\r\n         'data-transition-state': open ? 'open' : 'close',\r\n      }\r\n   }\r\n}\r\n\r\n\r\nexport default useTransition"],"names":[],"mappings":";;;;;;;;;;AAgCA;AACG;AACH;AAEA;AACG;AACA;AAAS;AACT;AACH;AAEA;AAAuB;AACpB;AAcA;AACA;AACA;AACA;AACA;AACG;AACA;AACA;AACA;;AAEA;AACF;AAED;AACA;;;;;;;AAaS;;;AAQT;;;AAIG;AACA;;AACA;;AAEA;AACA;AACA;;;;AASG;;AAEG;;AAEG;;AAEA;;;AAMN;AAEA;;AAEG;;AAEG;;AAEA;;;AAMN;;AACI;;;AAOV;;AAIG;AACG;AACA;;;AAGA;;;;;AAaH;AACA;;AAEG;;AAEF;;AAEP;;"}

package/hooks/useTransition/{variants.mjs → variants.cjs}

@@ -1,3 +1,5 @@
+'use strict';
+
 const slideDown = (rect) => {
     return {
         from: {
@@ -157,5 +159,18 @@ const collapseHorizontal = (rect) => {
     };
 };
 
-export { collapseHorizontal, collapseVertical, fade, fadeDown, fadeLeft, fadeRight, fadeUp, grow, slideDown, slideLeft, slideRight, slideUp, zoom, zoomOver };
-//# sourceMappingURL=variants.mjs.map
+exports.collapseHorizontal = collapseHorizontal;
+exports.collapseVertical = collapseVertical;
+exports.fade = fade;
+exports.fadeDown = fadeDown;
+exports.fadeLeft = fadeLeft;
+exports.fadeRight = fadeRight;
+exports.fadeUp = fadeUp;
+exports.grow = grow;
+exports.slideDown = slideDown;
+exports.slideLeft = slideLeft;
+exports.slideRight = slideRight;
+exports.slideUp = slideUp;
+exports.zoom = zoom;
+exports.zoomOver = zoomOver;
+//# sourceMappingURL=variants.cjs.map

package/hooks/useTransition/{variants.mjs.map → variants.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"variants.mjs","sources":["../../../src/hooks/useTransition/variants.ts"],"sourcesContent":["\r\nexport const slideDown = (rect: DOMRect) => {\r\n\r\n    return {\r\n        from: {\r\n            transform: `translateY(-${rect.height}px)`,\r\n        },\r\n        to: {\r\n            transform: `translateY(0)`,\r\n        }\r\n    }\r\n}\r\n\r\nexport const slideUp = (rect: DOMRect) => {\r\n    return {\r\n        from: {\r\n            transform: `translateY(${rect.height}px)`,\r\n        },\r\n        to: {\r\n            transform: `translateY(0)`,\r\n        }\r\n    }\r\n}\r\n\r\nexport const slideRight = (rect: DOMRect) => {\r\n    return {\r\n        from: {\r\n            transform: `translateX(-${rect.width}px)`,\r\n        },\r\n        to: {\r\n            transform: `translateX(0)`,\r\n        }\r\n    }\r\n}\r\n\r\nexport const slideLeft = (rect: DOMRect) => {\r\n    return {\r\n        from: {\r\n            transform: `translateX(${rect.width}px)`,\r\n        },\r\n        to: {\r\n            transform: `translateX(0)`,\r\n        }\r\n    }\r\n}\r\n\r\nexport const fade = () => {\r\n    return {\r\n        from: {\r\n            opacity: 0\r\n        },\r\n        to: {\r\n            opacity: 1\r\n        }\r\n    }\r\n}\r\n\r\nexport const fadeDown = () => {\r\n    return {\r\n        from: {\r\n            transform: `translateY(-30px)`,\r\n            opacity: 0\r\n        },\r\n        to: {\r\n            transform: `translateY(0)`,\r\n            opacity: 1\r\n        }\r\n    }\r\n}\r\n\r\nexport const fadeUp = () => {\r\n    return {\r\n        from: {\r\n            transform: `translateY(30px)`,\r\n            opacity: 0\r\n        },\r\n        to: {\r\n            transform: `translateY(0)`,\r\n            opacity: 1\r\n        }\r\n    }\r\n}\r\n\r\nexport const fadeRight = () => {\r\n    return {\r\n        from: {\r\n            transform: `translateX(-30px)`,\r\n            opacity: 0\r\n        },\r\n        to: {\r\n            transform: `translateX(0)`,\r\n            opacity: 1\r\n        }\r\n    }\r\n}\r\n\r\nexport const fadeLeft = () => {\r\n    return {\r\n        from: {\r\n            transform: `translateX(30px)`,\r\n            opacity: 0\r\n        },\r\n        to: {\r\n            transform: `translateX(0)`,\r\n            opacity: 1\r\n        }\r\n    }\r\n}\r\n\r\nexport const grow = () => {\r\n    return {\r\n        from: {\r\n            transform: \"scale(.8, .6)\",\r\n            opacity: 0\r\n        },\r\n        to: {\r\n            transform: \"scale(1)\",\r\n            opacity: 1\r\n        }\r\n    }\r\n}\r\n\r\nexport const zoom = () => {\r\n    return {\r\n        from: {\r\n            transform: \"scale(.8)\",\r\n            opacity: 0\r\n        },\r\n        to: {\r\n            transform: \"scale(1)\",\r\n            opacity: 1\r\n        }\r\n    }\r\n}\r\n\r\nexport const zoomOver = () => {\r\n    return {\r\n        from: {\r\n            transform: \"scale(1.2)\",\r\n            opacity: 0\r\n        },\r\n        to: {\r\n            transform: \"scale(1)\",\r\n            opacity: 1\r\n        }\r\n    }\r\n}\r\n\r\nexport const collapseVertical = (rect: DOMRect) => {\r\n\r\n    return {\r\n        from: {\r\n            maxHeight: 0 + \"px\",\r\n            overflow: \"hidden\"\r\n        },\r\n        to: {\r\n            maxHeight: rect.height,\r\n            overflow: \"hidden\"\r\n        }\r\n    }\r\n}\r\n\r\n\r\nexport const collapseHorizontal = (rect: DOMRect) => {\r\n    return {\r\n        from: {\r\n            width: 0 + \"px\",\r\n            overflow: \"hidden\"\r\n        },\r\n        to: {\r\n            width: rect?.width ? rect?.width + \"px\" : \"auto\",\r\n            overflow: \"hidden\"\r\n        }\r\n    }\r\n}\r\n\r\n\r\n\r\n\r\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"variants.cjs","sources":["../../../src/hooks/useTransition/variants.ts"],"sourcesContent":["\r\nexport const slideDown = (rect: DOMRect) => {\r\n\r\n    return {\r\n        from: {\r\n            transform: `translateY(-${rect.height}px)`,\r\n        },\r\n        to: {\r\n            transform: `translateY(0)`,\r\n        }\r\n    }\r\n}\r\n\r\nexport const slideUp = (rect: DOMRect) => {\r\n    return {\r\n        from: {\r\n            transform: `translateY(${rect.height}px)`,\r\n        },\r\n        to: {\r\n            transform: `translateY(0)`,\r\n        }\r\n    }\r\n}\r\n\r\nexport const slideRight = (rect: DOMRect) => {\r\n    return {\r\n        from: {\r\n            transform: `translateX(-${rect.width}px)`,\r\n        },\r\n        to: {\r\n            transform: `translateX(0)`,\r\n        }\r\n    }\r\n}\r\n\r\nexport const slideLeft = (rect: DOMRect) => {\r\n    return {\r\n        from: {\r\n            transform: `translateX(${rect.width}px)`,\r\n        },\r\n        to: {\r\n            transform: `translateX(0)`,\r\n        }\r\n    }\r\n}\r\n\r\nexport const fade = () => {\r\n    return {\r\n        from: {\r\n            opacity: 0\r\n        },\r\n        to: {\r\n            opacity: 1\r\n        }\r\n    }\r\n}\r\n\r\nexport const fadeDown = () => {\r\n    return {\r\n        from: {\r\n            transform: `translateY(-30px)`,\r\n            opacity: 0\r\n        },\r\n        to: {\r\n            transform: `translateY(0)`,\r\n            opacity: 1\r\n        }\r\n    }\r\n}\r\n\r\nexport const fadeUp = () => {\r\n    return {\r\n        from: {\r\n            transform: `translateY(30px)`,\r\n            opacity: 0\r\n        },\r\n        to: {\r\n            transform: `translateY(0)`,\r\n            opacity: 1\r\n        }\r\n    }\r\n}\r\n\r\nexport const fadeRight = () => {\r\n    return {\r\n        from: {\r\n            transform: `translateX(-30px)`,\r\n            opacity: 0\r\n        },\r\n        to: {\r\n            transform: `translateX(0)`,\r\n            opacity: 1\r\n        }\r\n    }\r\n}\r\n\r\nexport const fadeLeft = () => {\r\n    return {\r\n        from: {\r\n            transform: `translateX(30px)`,\r\n            opacity: 0\r\n        },\r\n        to: {\r\n            transform: `translateX(0)`,\r\n            opacity: 1\r\n        }\r\n    }\r\n}\r\n\r\nexport const grow = () => {\r\n    return {\r\n        from: {\r\n            transform: \"scale(.8, .6)\",\r\n            opacity: 0\r\n        },\r\n        to: {\r\n            transform: \"scale(1)\",\r\n            opacity: 1\r\n        }\r\n    }\r\n}\r\n\r\nexport const zoom = () => {\r\n    return {\r\n        from: {\r\n            transform: \"scale(.8)\",\r\n            opacity: 0\r\n        },\r\n        to: {\r\n            transform: \"scale(1)\",\r\n            opacity: 1\r\n        }\r\n    }\r\n}\r\n\r\nexport const zoomOver = () => {\r\n    return {\r\n        from: {\r\n            transform: \"scale(1.2)\",\r\n            opacity: 0\r\n        },\r\n        to: {\r\n            transform: \"scale(1)\",\r\n            opacity: 1\r\n        }\r\n    }\r\n}\r\n\r\nexport const collapseVertical = (rect: DOMRect) => {\r\n\r\n    return {\r\n        from: {\r\n            maxHeight: 0 + \"px\",\r\n            overflow: \"hidden\"\r\n        },\r\n        to: {\r\n            maxHeight: rect.height,\r\n            overflow: \"hidden\"\r\n        }\r\n    }\r\n}\r\n\r\n\r\nexport const collapseHorizontal = (rect: DOMRect) => {\r\n    return {\r\n        from: {\r\n            width: 0 + \"px\",\r\n            overflow: \"hidden\"\r\n        },\r\n        to: {\r\n            width: rect?.width ? rect?.width + \"px\" : \"auto\",\r\n            overflow: \"hidden\"\r\n        }\r\n    }\r\n}\r\n\r\n\r\n\r\n\r\n"],"names":[],"mappings":"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"}

package/hooks/useTransition/variants.js

@@ -1,5 +1,3 @@
-'use strict';
-
 const slideDown = (rect) => {
     return {
         from: {
@@ -159,18 +157,5 @@ const collapseHorizontal = (rect) => {
     };
 };
 
-exports.collapseHorizontal = collapseHorizontal;
-exports.collapseVertical = collapseVertical;
-exports.fade = fade;
-exports.fadeDown = fadeDown;
-exports.fadeLeft = fadeLeft;
-exports.fadeRight = fadeRight;
-exports.fadeUp = fadeUp;
-exports.grow = grow;
-exports.slideDown = slideDown;
-exports.slideLeft = slideLeft;
-exports.slideRight = slideRight;
-exports.slideUp = slideUp;
-exports.zoom = zoom;
-exports.zoomOver = zoomOver;
+export { collapseHorizontal, collapseVertical, fade, fadeDown, fadeLeft, fadeRight, fadeUp, grow, slideDown, slideLeft, slideRight, slideUp, zoom, zoomOver };
 //# sourceMappingURL=variants.js.map

package/hooks/useTransition/variants.js.map

@@ -1 +1 @@
-{"version":3,"file":"variants.js","sources":["../../../src/hooks/useTransition/variants.ts"],"sourcesContent":["\r\nexport const slideDown = (rect: DOMRect) => {\r\n\r\n    return {\r\n        from: {\r\n            transform: `translateY(-${rect.height}px)`,\r\n        },\r\n        to: {\r\n            transform: `translateY(0)`,\r\n        }\r\n    }\r\n}\r\n\r\nexport const slideUp = (rect: DOMRect) => {\r\n    return {\r\n        from: {\r\n            transform: `translateY(${rect.height}px)`,\r\n        },\r\n        to: {\r\n            transform: `translateY(0)`,\r\n        }\r\n    }\r\n}\r\n\r\nexport const slideRight = (rect: DOMRect) => {\r\n    return {\r\n        from: {\r\n            transform: `translateX(-${rect.width}px)`,\r\n        },\r\n        to: {\r\n            transform: `translateX(0)`,\r\n        }\r\n    }\r\n}\r\n\r\nexport const slideLeft = (rect: DOMRect) => {\r\n    return {\r\n        from: {\r\n            transform: `translateX(${rect.width}px)`,\r\n        },\r\n        to: {\r\n            transform: `translateX(0)`,\r\n        }\r\n    }\r\n}\r\n\r\nexport const fade = () => {\r\n    return {\r\n        from: {\r\n            opacity: 0\r\n        },\r\n        to: {\r\n            opacity: 1\r\n        }\r\n    }\r\n}\r\n\r\nexport const fadeDown = () => {\r\n    return {\r\n        from: {\r\n            transform: `translateY(-30px)`,\r\n            opacity: 0\r\n        },\r\n        to: {\r\n            transform: `translateY(0)`,\r\n            opacity: 1\r\n        }\r\n    }\r\n}\r\n\r\nexport const fadeUp = () => {\r\n    return {\r\n        from: {\r\n            transform: `translateY(30px)`,\r\n            opacity: 0\r\n        },\r\n        to: {\r\n            transform: `translateY(0)`,\r\n            opacity: 1\r\n        }\r\n    }\r\n}\r\n\r\nexport const fadeRight = () => {\r\n    return {\r\n        from: {\r\n            transform: `translateX(-30px)`,\r\n            opacity: 0\r\n        },\r\n        to: {\r\n            transform: `translateX(0)`,\r\n            opacity: 1\r\n        }\r\n    }\r\n}\r\n\r\nexport const fadeLeft = () => {\r\n    return {\r\n        from: {\r\n            transform: `translateX(30px)`,\r\n            opacity: 0\r\n        },\r\n        to: {\r\n            transform: `translateX(0)`,\r\n            opacity: 1\r\n        }\r\n    }\r\n}\r\n\r\nexport const grow = () => {\r\n    return {\r\n        from: {\r\n            transform: \"scale(.8, .6)\",\r\n            opacity: 0\r\n        },\r\n        to: {\r\n            transform: \"scale(1)\",\r\n            opacity: 1\r\n        }\r\n    }\r\n}\r\n\r\nexport const zoom = () => {\r\n    return {\r\n        from: {\r\n            transform: \"scale(.8)\",\r\n            opacity: 0\r\n        },\r\n        to: {\r\n            transform: \"scale(1)\",\r\n            opacity: 1\r\n        }\r\n    }\r\n}\r\n\r\nexport const zoomOver = () => {\r\n    return {\r\n        from: {\r\n            transform: \"scale(1.2)\",\r\n            opacity: 0\r\n        },\r\n        to: {\r\n            transform: \"scale(1)\",\r\n            opacity: 1\r\n        }\r\n    }\r\n}\r\n\r\nexport const collapseVertical = (rect: DOMRect) => {\r\n\r\n    return {\r\n        from: {\r\n            maxHeight: 0 + \"px\",\r\n            overflow: \"hidden\"\r\n        },\r\n        to: {\r\n            maxHeight: rect.height,\r\n            overflow: \"hidden\"\r\n        }\r\n    }\r\n}\r\n\r\n\r\nexport const collapseHorizontal = (rect: DOMRect) => {\r\n    return {\r\n        from: {\r\n            width: 0 + \"px\",\r\n            overflow: \"hidden\"\r\n        },\r\n        to: {\r\n            width: rect?.width ? rect?.width + \"px\" : \"auto\",\r\n            overflow: \"hidden\"\r\n        }\r\n    }\r\n}\r\n\r\n\r\n\r\n\r\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"variants.js","sources":["../../../src/hooks/useTransition/variants.ts"],"sourcesContent":["\r\nexport const slideDown = (rect: DOMRect) => {\r\n\r\n    return {\r\n        from: {\r\n            transform: `translateY(-${rect.height}px)`,\r\n        },\r\n        to: {\r\n            transform: `translateY(0)`,\r\n        }\r\n    }\r\n}\r\n\r\nexport const slideUp = (rect: DOMRect) => {\r\n    return {\r\n        from: {\r\n            transform: `translateY(${rect.height}px)`,\r\n        },\r\n        to: {\r\n            transform: `translateY(0)`,\r\n        }\r\n    }\r\n}\r\n\r\nexport const slideRight = (rect: DOMRect) => {\r\n    return {\r\n        from: {\r\n            transform: `translateX(-${rect.width}px)`,\r\n        },\r\n        to: {\r\n            transform: `translateX(0)`,\r\n        }\r\n    }\r\n}\r\n\r\nexport const slideLeft = (rect: DOMRect) => {\r\n    return {\r\n        from: {\r\n            transform: `translateX(${rect.width}px)`,\r\n        },\r\n        to: {\r\n            transform: `translateX(0)`,\r\n        }\r\n    }\r\n}\r\n\r\nexport const fade = () => {\r\n    return {\r\n        from: {\r\n            opacity: 0\r\n        },\r\n        to: {\r\n            opacity: 1\r\n        }\r\n    }\r\n}\r\n\r\nexport const fadeDown = () => {\r\n    return {\r\n        from: {\r\n            transform: `translateY(-30px)`,\r\n            opacity: 0\r\n        },\r\n        to: {\r\n            transform: `translateY(0)`,\r\n            opacity: 1\r\n        }\r\n    }\r\n}\r\n\r\nexport const fadeUp = () => {\r\n    return {\r\n        from: {\r\n            transform: `translateY(30px)`,\r\n            opacity: 0\r\n        },\r\n        to: {\r\n            transform: `translateY(0)`,\r\n            opacity: 1\r\n        }\r\n    }\r\n}\r\n\r\nexport const fadeRight = () => {\r\n    return {\r\n        from: {\r\n            transform: `translateX(-30px)`,\r\n            opacity: 0\r\n        },\r\n        to: {\r\n            transform: `translateX(0)`,\r\n            opacity: 1\r\n        }\r\n    }\r\n}\r\n\r\nexport const fadeLeft = () => {\r\n    return {\r\n        from: {\r\n            transform: `translateX(30px)`,\r\n            opacity: 0\r\n        },\r\n        to: {\r\n            transform: `translateX(0)`,\r\n            opacity: 1\r\n        }\r\n    }\r\n}\r\n\r\nexport const grow = () => {\r\n    return {\r\n        from: {\r\n            transform: \"scale(.8, .6)\",\r\n            opacity: 0\r\n        },\r\n        to: {\r\n            transform: \"scale(1)\",\r\n            opacity: 1\r\n        }\r\n    }\r\n}\r\n\r\nexport const zoom = () => {\r\n    return {\r\n        from: {\r\n            transform: \"scale(.8)\",\r\n            opacity: 0\r\n        },\r\n        to: {\r\n            transform: \"scale(1)\",\r\n            opacity: 1\r\n        }\r\n    }\r\n}\r\n\r\nexport const zoomOver = () => {\r\n    return {\r\n        from: {\r\n            transform: \"scale(1.2)\",\r\n            opacity: 0\r\n        },\r\n        to: {\r\n            transform: \"scale(1)\",\r\n            opacity: 1\r\n        }\r\n    }\r\n}\r\n\r\nexport const collapseVertical = (rect: DOMRect) => {\r\n\r\n    return {\r\n        from: {\r\n            maxHeight: 0 + \"px\",\r\n            overflow: \"hidden\"\r\n        },\r\n        to: {\r\n            maxHeight: rect.height,\r\n            overflow: \"hidden\"\r\n        }\r\n    }\r\n}\r\n\r\n\r\nexport const collapseHorizontal = (rect: DOMRect) => {\r\n    return {\r\n        from: {\r\n            width: 0 + \"px\",\r\n            overflow: \"hidden\"\r\n        },\r\n        to: {\r\n            width: rect?.width ? rect?.width + \"px\" : \"auto\",\r\n            overflow: \"hidden\"\r\n        }\r\n    }\r\n}\r\n\r\n\r\n\r\n\r\n"],"names":[],"mappings":"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"}

package/index.cjs

@@ -0,0 +1,64 @@
+'use strict';
+
+var index$2 = require('./Tag/index.cjs');
+var useTagProps = require('./Tag/useTagProps.cjs');
+var useAnimation = require('./hooks/useAnimation.cjs');
+var useColorTemplate = require('./hooks/useColorTemplate.cjs');
+var useBreakpoint = require('./breakpoint/useBreakpoint.cjs');
+var useBreakpointProps = require('./breakpoint/useBreakpointProps.cjs');
+var useInterface = require('./hooks/useInterface.cjs');
+var index$5 = require('./hooks/useTransition/index.cjs');
+var useMergeRefs = require('./hooks/useMergeRefs.cjs');
+var index$4 = require('./Transition/index.cjs');
+var index = require('./AppRoot/index.cjs');
+var usePortal = require('./hooks/usePortal.cjs');
+var Renderar = require('./AppRoot/Renderar.cjs');
+var index$3 = require('./Document/index.cjs');
+var AppRootProvider = require('./AppRoot/AppRootProvider.cjs');
+var CSSCacheProvider = require('./css/CSSCacheProvider.cjs');
+var index$1 = require('./Iframe/index.cjs');
+var index$6 = require('./css/index.cjs');
+var index$7 = require('./theme/index.cjs');
+var getValue = require('./css/getValue.cjs');
+var getProps = require('./css/getProps.cjs');
+var ThemeProvider = require('./theme/ThemeProvider.cjs');
+var createThemeSwitcher = require('./theme/createThemeSwitcher.cjs');
+var createTheme = require('./theme/createTheme.cjs');
+var core = require('./theme/core.cjs');
+
+
+
+exports.Tag = index$2;
+exports.useTagProps = useTagProps;
+exports.animationEases = useAnimation.animationEases;
+exports.useAnimation = useAnimation.default;
+exports.useColorTemplate = useColorTemplate;
+exports.useBreakpoint = useBreakpoint;
+exports.useBreakpointProps = useBreakpointProps;
+exports.useInterface = useInterface;
+exports.useTransition = index$5;
+exports.useMergeRefs = useMergeRefs;
+exports.Transition = index$4;
+exports.AppRoot = index;
+exports.usePortal = usePortal;
+exports.Renderar = Renderar.Renderar;
+exports.useDocument = index$3.useDocument;
+exports.useAppRootElement = AppRootProvider.useAppRootElement;
+exports.getCSSCache = CSSCacheProvider.getCSSCache;
+exports.useCSSCache = CSSCacheProvider.useCSSCache;
+exports.useCSSCacheId = CSSCacheProvider.useCSSCacheId;
+exports.Iframe = index$1;
+exports.adjustColor = index$6.adjustColor;
+exports.adjustTextContrast = index$6.adjustTextContrast;
+exports.alpha = index$6.alpha;
+exports.breakpoints = index$6.breakpoints;
+exports.css = index$6.css;
+exports.themeRootClass = index$7.themeRootClass;
+exports.getValue = getValue;
+exports.getProps = getProps;
+exports.ThemeProvider = ThemeProvider;
+exports.createThemeSwitcher = createThemeSwitcher;
+exports.createTheme = createTheme.createTheme;
+exports.getTheme = core.getTheme;
+exports.useTheme = core.useTheme;
+//# sourceMappingURL=index.cjs.map

package/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}