@xanui/core 1.2.63 → 1.2.65

package/AppRoot/index.cjs

@@ -4,11 +4,11 @@
 var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var ThemeProvider = require('../theme/ThemeProvider.cjs');
 require('../theme/core.cjs');
+var BreakpointProvider = require('../breakpoint/BreakpointProvider.cjs');
 require('../css/getValue.cjs');
 require('oncss');
-var ThemeProvider = require('../theme/ThemeProvider.cjs');
-var BreakpointProvider = require('../breakpoint/BreakpointProvider.cjs');
 var Renderar = require('./Renderar.cjs');
 var index = require('../Document/index.cjs');
 var AppRootProvider = require('./AppRootProvider.cjs');
@@ -35,7 +35,7 @@ const AppRoot = React.forwardRef((_a, ref) => {
     React.useEffect(() => {
         if (typeof _document === 'undefined')
             return;
-        _document.cookie = `xuitm=${theme};path=/`;
+        document.cookie = `xuitm=${theme.name};path=/`;
         const styles = Array.from(_document.querySelectorAll('body style[data-oncss]'));
         styles.forEach((style) => {
             _document.head.appendChild(style);
@@ -52,7 +52,7 @@ const AppRoot = React.forwardRef((_a, ref) => {
     }
     return (jsxRuntime.jsx(index.DocumentProvider, { value: _document ? { document: _document, id: docid } : undefined, children: jsxRuntime.jsx(CSSCacheProvider.CSSCacheProvider, { cacheId: CSSCacheId, children: jsxRuntime.jsx(AppRootProvider.AppRootProvider, { element: () => rootRef.current, children: jsxRuntime.jsx(ThemeProvider, Object.assign({ theme: theme, onThemeChange: (t) => {
                         onThemeChange && onThemeChange(t);
-                        document.cookie = `xuitm=${t};path=/`;
+                        document.cookie = `xuitm=${t.name};path=/`;
                     } }, props, { ref: mergeRef, isRoot: true, sx: Object.assign(Object.assign(Object.assign({}, props.sx), (visibility === "hidden" ? { visibility: "hidden" } : {})), selection), children: jsxRuntime.jsxs(BreakpointProvider.BreakpointProvider, { defaultKey: defaultBreakpoint !== null && defaultBreakpoint !== void 0 ? defaultBreakpoint : "xl", children: [children, !disableRenderar && jsxRuntime.jsx(Renderar.RenderRenderar, {})] }) })) }) }) }));
 });
 

package/AppRoot/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useId, useLayoutEffect, useRef } from 'react';\nimport { TagComponentType } from '../Tag/types';\nimport { ThemeProvider, ThemeProviderProps } from '../theme';\nimport { BreakpointProvider } from '../breakpoint';\nimport { RenderRenderar } from './Renderar';\nimport { DocumentProvider } from '../Document';\nimport { AppRootProvider } from './AppRootProvider';\nimport useMergeRefs from '../hooks/useMergeRefs';\nimport { CSSCacheProvider } from '../css/CSSCacheProvider';\nimport { BreakpointKeys } from '../css/types';\n\nexport type AppRootProps<T extends TagComponentType = \"div\"> = ThemeProviderProps<T> & {\n   noScrollbarCss?: boolean;\n   document?: Document;\n   CSSCacheId?: string;\n   disableRenderar?: boolean;\n   defaultBreakpoint?: BreakpointKeys\n   selectionColor?: \"default\" | \"brand\" | \"accent\" | \"success\" | \"info\" | \"warning\" | \"danger\";\n}\n\nconst AppRoot = React.forwardRef(<T extends TagComponentType = \"div\">({ children, defaultBreakpoint, noScrollbarCss, CSSCacheId, theme, onThemeChange, disableRenderar, selectionColor, document: _document, ...props }: AppRootProps<T>, ref: React.Ref<any>) => {\n\n   noScrollbarCss ??= false\n   selectionColor ??= \"brand\"\n   if (typeof window !== \"undefined\") {\n      _document ??= document\n   }\n   disableRenderar ??= false\n   const docid = useId()\n   const csscacheId = useId()\n   CSSCacheId ??= csscacheId\n\n   const [visibility, setVisibility] = React.useState<string>(!defaultBreakpoint ? \"hidden\" : \"\");\n   const rootRef = useRef(null)\n   const mergeRef = useMergeRefs(rootRef, ref)\n\n   useLayoutEffect(() => {\n      !defaultBreakpoint && setVisibility(\"\");\n   }, [])\n\n   useEffect(() => {\n      if (typeof _document === 'undefined') return;\n      _document.cookie = `xuitm=${theme};path=/`\n      const styles = Array.from(_document.querySelectorAll('body style[data-oncss]'));\n      styles.forEach((style) => {\n         _document.head.appendChild(style);\n      });\n   }, [])\n\n   let selection: any = {}\n   if (selectionColor && selectionColor !== 'default') {\n      selection = {\n         \"&::selection\": {\n            bgcolor: `${selectionColor}.primary`,\n            color: `${selectionColor}.text`\n         }\n      }\n   }\n\n   return (\n      <DocumentProvider value={_document ? { document: _document, id: docid } : undefined}>\n         <CSSCacheProvider cacheId={CSSCacheId}>\n            <AppRootProvider element={() => rootRef.current}>\n               <ThemeProvider\n                  theme={theme}\n                  onThemeChange={(t) => {\n                     onThemeChange && onThemeChange(t)\n                     document.cookie = `xuitm=${t};path=/`\n                  }}\n                  {...props}\n                  ref={mergeRef}\n                  isRoot\n                  sx={{\n                     ...props.sx,\n                     ...(visibility === \"hidden\" ? { visibility: \"hidden\" } : {}),\n                     ...selection\n                  }}\n               >\n                  <BreakpointProvider defaultKey={defaultBreakpoint ?? \"xl\"}>\n                     {children}\n                     {!disableRenderar && <RenderRenderar />}\n                  </BreakpointProvider>\n               </ThemeProvider>\n            </AppRootProvider>\n         </CSSCacheProvider>\n      </DocumentProvider>\n   )\n})\n\nexport default AppRoot\n\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAqBA;;;;AAIG;;;;AAIA;AACA;;;AAIA;;;AAIG;;;;;AAKA;AACA;AACA;AACG;AACH;;;AAIH;AACG;AACG;;;AAGC;;;;AAWW;AACA;AACH;AAmBlB;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useId, useLayoutEffect, useRef } from 'react';\nimport { TagComponentType } from '../Tag/types';\nimport { ThemeProvider, ThemeProviderProps } from '../theme';\nimport { BreakpointProvider } from '../breakpoint';\nimport { RenderRenderar } from './Renderar';\nimport { DocumentProvider } from '../Document';\nimport { AppRootProvider } from './AppRootProvider';\nimport useMergeRefs from '../hooks/useMergeRefs';\nimport { CSSCacheProvider } from '../css/CSSCacheProvider';\nimport { BreakpointKeys } from '../css/types';\n\nexport type AppRootProps<T extends TagComponentType = \"div\"> = ThemeProviderProps<T> & {\n   noScrollbarCss?: boolean;\n   document?: Document;\n   CSSCacheId?: string;\n   disableRenderar?: boolean;\n   defaultBreakpoint?: BreakpointKeys\n   selectionColor?: \"default\" | \"brand\" | \"accent\" | \"success\" | \"info\" | \"warning\" | \"danger\";\n}\n\nconst AppRoot = React.forwardRef(<T extends TagComponentType = \"div\">({ children, defaultBreakpoint, noScrollbarCss, CSSCacheId, theme, onThemeChange, disableRenderar, selectionColor, document: _document, ...props }: AppRootProps<T>, ref: React.Ref<any>) => {\n\n   noScrollbarCss ??= false\n   selectionColor ??= \"brand\"\n   if (typeof window !== \"undefined\") {\n      _document ??= document\n   }\n   disableRenderar ??= false\n   const docid = useId()\n   const csscacheId = useId()\n   CSSCacheId ??= csscacheId\n\n   const [visibility, setVisibility] = React.useState<string>(!defaultBreakpoint ? \"hidden\" : \"\");\n   const rootRef = useRef(null)\n   const mergeRef = useMergeRefs(rootRef, ref)\n\n   useLayoutEffect(() => {\n      !defaultBreakpoint && setVisibility(\"\");\n   }, [])\n\n   useEffect(() => {\n      if (typeof _document === 'undefined') return;\n      document.cookie = `xuitm=${theme.name};path=/`\n      const styles = Array.from(_document.querySelectorAll('body style[data-oncss]'));\n      styles.forEach((style) => {\n         _document.head.appendChild(style);\n      });\n   }, [])\n\n   let selection: any = {}\n   if (selectionColor && selectionColor !== 'default') {\n      selection = {\n         \"&::selection\": {\n            bgcolor: `${selectionColor}.primary`,\n            color: `${selectionColor}.text`\n         }\n      }\n   }\n\n   return (\n      <DocumentProvider value={_document ? { document: _document, id: docid } : undefined}>\n         <CSSCacheProvider cacheId={CSSCacheId}>\n            <AppRootProvider element={() => rootRef.current}>\n               <ThemeProvider\n                  theme={theme}\n                  onThemeChange={(t) => {\n                     onThemeChange && onThemeChange(t)\n                     document.cookie = `xuitm=${t.name};path=/`\n                  }}\n                  {...props}\n                  ref={mergeRef}\n                  isRoot\n                  sx={{\n                     ...props.sx,\n                     ...(visibility === \"hidden\" ? { visibility: \"hidden\" } : {}),\n                     ...selection\n                  }}\n               >\n                  <BreakpointProvider defaultKey={defaultBreakpoint ?? \"xl\"}>\n                     {children}\n                     {!disableRenderar && <RenderRenderar />}\n                  </BreakpointProvider>\n               </ThemeProvider>\n            </AppRootProvider>\n         </CSSCacheProvider>\n      </DocumentProvider>\n   )\n})\n\nexport default AppRoot\n\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAqBA;;;;AAIG;;;;AAIA;AACA;;;AAIA;;;AAIG;;;;;;AAMA;AACA;AACG;AACH;;;AAIH;AACG;AACG;;;AAGC;;;;AAWW;;AAEH;AAmBlB;;"}

package/AppRoot/index.d.ts

@@ -1,7 +1,7 @@
 import React__default from 'react';
 import { TagComponentType } from '../Tag/types.js';
-import { BreakpointKeys } from '../css/types.js';
 import { ThemeProviderProps } from '../theme/ThemeProvider.js';
+import { BreakpointKeys } from '../css/types.js';
 
 type AppRootProps<T extends TagComponentType = "div"> = ThemeProviderProps<T> & {
     noScrollbarCss?: boolean;

package/AppRoot/index.js

@@ -2,11 +2,11 @@
 import { __rest } from 'tslib';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default, { useId, useRef, useLayoutEffect, useEffect } from 'react';
+import ThemeProvider from '../theme/ThemeProvider.js';
 import '../theme/core.js';
+import { BreakpointProvider } from '../breakpoint/BreakpointProvider.js';
 import '../css/getValue.js';
 import 'oncss';
-import ThemeProvider from '../theme/ThemeProvider.js';
-import { BreakpointProvider } from '../breakpoint/BreakpointProvider.js';
 import { RenderRenderar } from './Renderar.js';
 import { DocumentProvider } from '../Document/index.js';
 import { AppRootProvider } from './AppRootProvider.js';
@@ -33,7 +33,7 @@ const AppRoot = React__default.forwardRef((_a, ref) => {
     useEffect(() => {
         if (typeof _document === 'undefined')
             return;
-        _document.cookie = `xuitm=${theme};path=/`;
+        document.cookie = `xuitm=${theme.name};path=/`;
         const styles = Array.from(_document.querySelectorAll('body style[data-oncss]'));
         styles.forEach((style) => {
             _document.head.appendChild(style);
@@ -50,7 +50,7 @@ const AppRoot = React__default.forwardRef((_a, ref) => {
     }
     return (jsx(DocumentProvider, { value: _document ? { document: _document, id: docid } : undefined, children: jsx(CSSCacheProvider, { cacheId: CSSCacheId, children: jsx(AppRootProvider, { element: () => rootRef.current, children: jsx(ThemeProvider, Object.assign({ theme: theme, onThemeChange: (t) => {
                         onThemeChange && onThemeChange(t);
-                        document.cookie = `xuitm=${t};path=/`;
+                        document.cookie = `xuitm=${t.name};path=/`;
                     } }, props, { ref: mergeRef, isRoot: true, sx: Object.assign(Object.assign(Object.assign({}, props.sx), (visibility === "hidden" ? { visibility: "hidden" } : {})), selection), children: jsxs(BreakpointProvider, { defaultKey: defaultBreakpoint !== null && defaultBreakpoint !== void 0 ? defaultBreakpoint : "xl", children: [children, !disableRenderar && jsx(RenderRenderar, {})] }) })) }) }) }));
 });
 

package/AppRoot/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useId, useLayoutEffect, useRef } from 'react';\nimport { TagComponentType } from '../Tag/types';\nimport { ThemeProvider, ThemeProviderProps } from '../theme';\nimport { BreakpointProvider } from '../breakpoint';\nimport { RenderRenderar } from './Renderar';\nimport { DocumentProvider } from '../Document';\nimport { AppRootProvider } from './AppRootProvider';\nimport useMergeRefs from '../hooks/useMergeRefs';\nimport { CSSCacheProvider } from '../css/CSSCacheProvider';\nimport { BreakpointKeys } from '../css/types';\n\nexport type AppRootProps<T extends TagComponentType = \"div\"> = ThemeProviderProps<T> & {\n   noScrollbarCss?: boolean;\n   document?: Document;\n   CSSCacheId?: string;\n   disableRenderar?: boolean;\n   defaultBreakpoint?: BreakpointKeys\n   selectionColor?: \"default\" | \"brand\" | \"accent\" | \"success\" | \"info\" | \"warning\" | \"danger\";\n}\n\nconst AppRoot = React.forwardRef(<T extends TagComponentType = \"div\">({ children, defaultBreakpoint, noScrollbarCss, CSSCacheId, theme, onThemeChange, disableRenderar, selectionColor, document: _document, ...props }: AppRootProps<T>, ref: React.Ref<any>) => {\n\n   noScrollbarCss ??= false\n   selectionColor ??= \"brand\"\n   if (typeof window !== \"undefined\") {\n      _document ??= document\n   }\n   disableRenderar ??= false\n   const docid = useId()\n   const csscacheId = useId()\n   CSSCacheId ??= csscacheId\n\n   const [visibility, setVisibility] = React.useState<string>(!defaultBreakpoint ? \"hidden\" : \"\");\n   const rootRef = useRef(null)\n   const mergeRef = useMergeRefs(rootRef, ref)\n\n   useLayoutEffect(() => {\n      !defaultBreakpoint && setVisibility(\"\");\n   }, [])\n\n   useEffect(() => {\n      if (typeof _document === 'undefined') return;\n      _document.cookie = `xuitm=${theme};path=/`\n      const styles = Array.from(_document.querySelectorAll('body style[data-oncss]'));\n      styles.forEach((style) => {\n         _document.head.appendChild(style);\n      });\n   }, [])\n\n   let selection: any = {}\n   if (selectionColor && selectionColor !== 'default') {\n      selection = {\n         \"&::selection\": {\n            bgcolor: `${selectionColor}.primary`,\n            color: `${selectionColor}.text`\n         }\n      }\n   }\n\n   return (\n      <DocumentProvider value={_document ? { document: _document, id: docid } : undefined}>\n         <CSSCacheProvider cacheId={CSSCacheId}>\n            <AppRootProvider element={() => rootRef.current}>\n               <ThemeProvider\n                  theme={theme}\n                  onThemeChange={(t) => {\n                     onThemeChange && onThemeChange(t)\n                     document.cookie = `xuitm=${t};path=/`\n                  }}\n                  {...props}\n                  ref={mergeRef}\n                  isRoot\n                  sx={{\n                     ...props.sx,\n                     ...(visibility === \"hidden\" ? { visibility: \"hidden\" } : {}),\n                     ...selection\n                  }}\n               >\n                  <BreakpointProvider defaultKey={defaultBreakpoint ?? \"xl\"}>\n                     {children}\n                     {!disableRenderar && <RenderRenderar />}\n                  </BreakpointProvider>\n               </ThemeProvider>\n            </AppRootProvider>\n         </CSSCacheProvider>\n      </DocumentProvider>\n   )\n})\n\nexport default AppRoot\n\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAqBA;;;;AAIG;;;;AAIA;AACA;;;AAIA;;;AAIG;;;;;AAKA;AACA;AACA;AACG;AACH;;;AAIH;AACG;AACG;;;AAGC;;;;AAWW;AACA;AACH;AAmBlB;;"}
+{"version":3,"file":"index.js","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useId, useLayoutEffect, useRef } from 'react';\nimport { TagComponentType } from '../Tag/types';\nimport { ThemeProvider, ThemeProviderProps } from '../theme';\nimport { BreakpointProvider } from '../breakpoint';\nimport { RenderRenderar } from './Renderar';\nimport { DocumentProvider } from '../Document';\nimport { AppRootProvider } from './AppRootProvider';\nimport useMergeRefs from '../hooks/useMergeRefs';\nimport { CSSCacheProvider } from '../css/CSSCacheProvider';\nimport { BreakpointKeys } from '../css/types';\n\nexport type AppRootProps<T extends TagComponentType = \"div\"> = ThemeProviderProps<T> & {\n   noScrollbarCss?: boolean;\n   document?: Document;\n   CSSCacheId?: string;\n   disableRenderar?: boolean;\n   defaultBreakpoint?: BreakpointKeys\n   selectionColor?: \"default\" | \"brand\" | \"accent\" | \"success\" | \"info\" | \"warning\" | \"danger\";\n}\n\nconst AppRoot = React.forwardRef(<T extends TagComponentType = \"div\">({ children, defaultBreakpoint, noScrollbarCss, CSSCacheId, theme, onThemeChange, disableRenderar, selectionColor, document: _document, ...props }: AppRootProps<T>, ref: React.Ref<any>) => {\n\n   noScrollbarCss ??= false\n   selectionColor ??= \"brand\"\n   if (typeof window !== \"undefined\") {\n      _document ??= document\n   }\n   disableRenderar ??= false\n   const docid = useId()\n   const csscacheId = useId()\n   CSSCacheId ??= csscacheId\n\n   const [visibility, setVisibility] = React.useState<string>(!defaultBreakpoint ? \"hidden\" : \"\");\n   const rootRef = useRef(null)\n   const mergeRef = useMergeRefs(rootRef, ref)\n\n   useLayoutEffect(() => {\n      !defaultBreakpoint && setVisibility(\"\");\n   }, [])\n\n   useEffect(() => {\n      if (typeof _document === 'undefined') return;\n      document.cookie = `xuitm=${theme.name};path=/`\n      const styles = Array.from(_document.querySelectorAll('body style[data-oncss]'));\n      styles.forEach((style) => {\n         _document.head.appendChild(style);\n      });\n   }, [])\n\n   let selection: any = {}\n   if (selectionColor && selectionColor !== 'default') {\n      selection = {\n         \"&::selection\": {\n            bgcolor: `${selectionColor}.primary`,\n            color: `${selectionColor}.text`\n         }\n      }\n   }\n\n   return (\n      <DocumentProvider value={_document ? { document: _document, id: docid } : undefined}>\n         <CSSCacheProvider cacheId={CSSCacheId}>\n            <AppRootProvider element={() => rootRef.current}>\n               <ThemeProvider\n                  theme={theme}\n                  onThemeChange={(t) => {\n                     onThemeChange && onThemeChange(t)\n                     document.cookie = `xuitm=${t.name};path=/`\n                  }}\n                  {...props}\n                  ref={mergeRef}\n                  isRoot\n                  sx={{\n                     ...props.sx,\n                     ...(visibility === \"hidden\" ? { visibility: \"hidden\" } : {}),\n                     ...selection\n                  }}\n               >\n                  <BreakpointProvider defaultKey={defaultBreakpoint ?? \"xl\"}>\n                     {children}\n                     {!disableRenderar && <RenderRenderar />}\n                  </BreakpointProvider>\n               </ThemeProvider>\n            </AppRootProvider>\n         </CSSCacheProvider>\n      </DocumentProvider>\n   )\n})\n\nexport default AppRoot\n\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAqBA;;;;AAIG;;;;AAIA;AACA;;;AAIA;;;AAIG;;;;;;AAMA;AACA;AACG;AACH;;;AAIH;AACG;AACG;;;AAGC;;;;AAWW;;AAEH;AAmBlB;;"}

package/Iframe/index.cjs

@@ -4,11 +4,12 @@
 var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var index$1 = require('../Tag/index.cjs');
 var core = require('../theme/core.cjs');
 require('../css/getValue.cjs');
 require('oncss');
-require('../theme/ThemeProvider.cjs');
-var index$1 = require('../Tag/index.cjs');
+require('../Document/index.cjs');
+require('../css/CSSCacheProvider.cjs');
 var reactDom = require('react-dom');
 var index$2 = require('../AppRoot/index.cjs');
 var useMergeRefs = require('../hooks/useMergeRefs.cjs');

package/Iframe/index.cjs.map

@@ -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;;"}
+{"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;;"}

package/Iframe/index.js

@@ -2,11 +2,12 @@
 import { __rest } from 'tslib';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import React__default, { createContext, useState, useRef, useEffect } from 'react';
+import Tag from '../Tag/index.js';
 import { useTheme } from '../theme/core.js';
 import '../css/getValue.js';
 import 'oncss';
-import '../theme/ThemeProvider.js';
-import Tag from '../Tag/index.js';
+import '../Document/index.js';
+import '../css/CSSCacheProvider.js';
 import { createPortal } from 'react-dom';
 import AppRoot from '../AppRoot/index.js';
 import useMergeRefs from '../hooks/useMergeRefs.js';

package/Iframe/index.js.map

@@ -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;;"}
+{"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;;"}

package/Transition/index.cjs

@@ -2,27 +2,88 @@
 'use strict';
 
 var tslib = require('tslib');
-var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var index = require('../hooks/useTransition/index.cjs');
+var variants = require('./variants.cjs');
+var index$1 = require('../css/index.cjs');
+var index = require('../Document/index.cjs');
+var CSSCacheProvider = require('../css/CSSCacheProvider.cjs');
+var useAnimation = require('../hooks/useAnimation.cjs');
+var oncss = require('oncss');
 
-const TransitionBase = (_a) => {
-    var { children } = _a, options = tslib.__rest(_a, ["children"]);
-    const { props, exited } = index(options);
-    if (exited)
-        return null;
-    const clone = React.Children.only(children);
-    return React.cloneElement(clone, props);
+const getVariant = (rect, variant) => {
+    let fn = typeof variant === 'string' ? variants[variant] : variant;
+    if (!fn)
+        throw new Error(`Transition variant "${variant}" not found.`);
+    return fn(rect);
 };
 function Transition(_a) {
     var { children } = _a, options = tslib.__rest(_a, ["children"]);
-    const [mounted, setMounted] = React.useState(false);
+    let { disableInitialTransition = false, variant = "fade", duration = 400, delay, ease, easing, open, onOpen, onOpened, onClose, onClosed, onState } = options;
+    const [rect, setRect] = React.useState();
+    const [isDisableInitial, setIsDisableInitial] = React.useState(disableInitialTransition);
+    const ref = React.useRef(null);
+    const doc = index.useDocument();
+    const cacheId = CSSCacheProvider.useCSSCacheId();
+    let _ease = ease || useAnimation.animationEases[easing] || useAnimation.animationEases.bounce;
+    const style = (obj = {}) => {
+        return index$1.css(obj, { container: doc === null || doc === void 0 ? void 0 : doc.document, cacheId }).classname;
+    };
+    let [cls, setCls] = React.useState(() => {
+        let props = {};
+        if (!isDisableInitial) {
+            props.visibility = 'hidden';
+        }
+        else if (isDisableInitial && !open) {
+            props.visibility = 'hidden';
+        }
+        return style(props);
+    });
     React.useEffect(() => {
-        setMounted(true);
+        var _a;
+        const rect = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        const v = getVariant(rect, variant);
+        setCls(style(open ? v.from : v.to));
+        setRect(rect);
     }, []);
-    if (!mounted)
-        return null;
-    return jsxRuntime.jsx(TransitionBase, Object.assign({}, options, { children: children }));
+    React.useLayoutEffect(() => {
+        if (rect) {
+            const v = getVariant(rect, variant);
+            let _css = open ? v.to : v.from;
+            let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`;
+            if (isDisableInitial) {
+                trans = '';
+                setIsDisableInitial(false);
+            }
+            let _ = Object.assign(Object.assign({}, _css), { transition: Object.keys(_css || {}).map(k => oncss.formatCSSProp(k)).join(trans + ", ") + trans });
+            setCls(style(_));
+            const ele = ref.current;
+            let stimer = null;
+            let etimer = null;
+            ele.ontransitionstart = () => {
+                clearTimeout(stimer);
+                stimer = setTimeout(() => {
+                    (onOpen && open) && onOpen();
+                    (onClose && !open) && onClose();
+                    onState && onState(open ? "open" : "close");
+                }, 1);
+            };
+            ele.ontransitionend = () => {
+                clearTimeout(etimer);
+                etimer = setTimeout(() => {
+                    if (onOpened && open)
+                        onOpened();
+                    if (onClosed && !open)
+                        onClosed();
+                    onState && onState(open ? "opened" : "closed");
+                }, 1);
+            };
+        }
+    }, [rect, open, variant]);
+    const clone = React.Children.only(children);
+    return React.cloneElement(clone, {
+        className: cls,
+        ref
+    });
 }
 
 module.exports = Transition;

package/Transition/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Transition/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { cloneElement, Children, useEffect, useState } from 'react';\nimport useTransition, { UseTransitionProps } from '../hooks/useTransition';\n\nexport type TransitionProps = UseTransitionProps & {\n    children: React.ReactElement;\n}\n\nconst TransitionBase = ({ children, ...options }: TransitionProps) => {\n    const { props, exited } = useTransition(options);\n    if (exited) return null;\n    const clone: any = Children.only(children);\n    return cloneElement(clone, props);\n}\n\nfunction Transition({ children, ...options }: TransitionProps) {\n    const [mounted, setMounted] = useState(false);\n\n    useEffect(() => {\n        setMounted(true);\n    }, []);\n\n    if (!mounted) return null;\n    return <TransitionBase  {...options} >{children}</TransitionBase>\n}\n\n\nexport default Transition"],"names":[],"mappings":";;;;;;;;AAQA;AAAwB;;AAEpB;AAAY;;AAEZ;AACJ;AAEA;AAAoB;;;;;AAOhB;AAAc;AACd;AACJ;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Transition/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { cloneElement, Children, useState, useLayoutEffect, 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 [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) {\n            props.visibility = 'hidden'\n        } else if (isDisableInitial && !open) {\n            props.visibility = 'hidden'\n        }\n        return style(props)\n    })\n\n\n    useEffect(() => {\n        const rect = ref.current?.getBoundingClientRect() as DOMRect\n        const v = getVariant(rect, variant)\n        setCls(style(open ? v.from : v.to))\n        setRect(rect)\n    }, [])\n\n    useLayoutEffect(() => {\n        if (rect) {\n            const v = getVariant(rect, variant)\n            let _css: any = open ? v.to : v.from\n            let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`\n            if (isDisableInitial) {\n                trans = ''\n                setIsDisableInitial(false)\n            }\n            let _ = {\n                ..._css,\n                transition: Object.keys(_css || {}).map(k => formatCSSProp(k)).join(trans + \", \") + trans,\n            }\n\n            setCls(style(_))\n\n            const ele = ref.current as HTMLElement\n            let stimer: any = null\n            let etimer: any = null\n            ele.ontransitionstart = () => {\n                clearTimeout(stimer)\n                stimer = setTimeout(() => {\n                    (onOpen && open) && onOpen();\n                    (onClose && !open) && onClose()\n                    onState && onState(open ? \"open\" : \"close\")\n                }, 1)\n            }\n            ele.ontransitionend = () => {\n                clearTimeout(etimer)\n                etimer = setTimeout(() => {\n                    if (onOpened && open) onOpened();\n                    if (onClosed && !open) onClosed();\n                    onState && onState(open ? \"opened\" : \"closed\")\n                }, 1)\n            }\n        }\n    }, [rect, open, variant])\n\n    const clone: any = Children.only(children);\n    return cloneElement(clone, {\n        className: cls,\n        ref\n    });\n}\n\nexport default Transition"],"names":[],"mappings":";;;;;;;;;;;;AA8BA;AACI;AACA;AAAS;AACT;AACJ;AAEA;AAAoB;AAChB;;;AAiBA;AACA;AACA;AACA;AAEA;;AAEA;;;;AAKQ;;AACG;AACH;;AAEJ;AACJ;;;;;AAMI;;;;;;AAOI;;;;;;AAMA;AAKA;AAEA;;;AAGA;;AAEI;AACI;;AAEA;;AAER;AACA;;AAEI;;AAC0B;;AACC;AACvB;;AAER;;;;;AAMJ;;AAEH;AACL;;"}

package/Transition/index.d.ts

@@ -1,10 +1,33 @@
 import React__default from 'react';
-import { UseTransitionProps } from '../hooks/useTransition/index.js';
+import * as variants from './variants.js';
+import { animationEases } from '../hooks/useAnimation.js';
+import { CSSProps } from '../css/types.js';
 
-type TransitionProps = UseTransitionProps & {
+type TransitionVariantTypes = keyof typeof variants;
+type TransitionVariant = TransitionVariantTypes | ((rect: DOMRect) => ({
+    from: CSSProps;
+    to: CSSProps;
+}));
+type TransitionState = "open" | "opened" | "close" | "closed";
+type TransitionProps = {
     children: React__default.ReactElement;
+    open: boolean;
+    variant: TransitionVariant;
+    ease?: string;
+    easing?: keyof typeof animationEases;
+    duration?: number;
+    delay?: number;
+    disableInitialTransition?: boolean;
+    onOpen?: () => void;
+    onOpened?: () => void;
+    onClose?: () => void;
+    onClosed?: () => void;
+    onState?: (state: TransitionState) => void;
 };
-declare function Transition({ children, ...options }: TransitionProps): React__default.JSX.Element | null;
+declare function Transition({ children, ...options }: TransitionProps): React__default.DetailedReactHTMLElement<{
+    className: string;
+    ref: React__default.RefObject<HTMLElement | null>;
+}, HTMLElement>;
 
 export { Transition as default };
-export type { TransitionProps };
+export type { TransitionProps, TransitionState, TransitionVariant, TransitionVariantTypes };

package/Transition/index.js

@@ -1,26 +1,87 @@
 "use client";
 import { __rest } from 'tslib';
-import { jsx } from 'react/jsx-runtime';
-import { useState, useEffect, Children, cloneElement } from 'react';
-import useTransition from '../hooks/useTransition/index.js';
+import { useState, useRef, useEffect, useLayoutEffect, Children, cloneElement } from 'react';
+import * as variants from './variants.js';
+import { css } from '../css/index.js';
+import { useDocument } from '../Document/index.js';
+import { useCSSCacheId } from '../css/CSSCacheProvider.js';
+import { animationEases } from '../hooks/useAnimation.js';
+import { formatCSSProp } from 'oncss';
 
-const TransitionBase = (_a) => {
-    var { children } = _a, options = __rest(_a, ["children"]);
-    const { props, exited } = useTransition(options);
-    if (exited)
-        return null;
-    const clone = Children.only(children);
-    return cloneElement(clone, props);
+const getVariant = (rect, variant) => {
+    let fn = typeof variant === 'string' ? variants[variant] : variant;
+    if (!fn)
+        throw new Error(`Transition variant "${variant}" not found.`);
+    return fn(rect);
 };
 function Transition(_a) {
     var { children } = _a, options = __rest(_a, ["children"]);
-    const [mounted, setMounted] = useState(false);
+    let { disableInitialTransition = false, variant = "fade", duration = 400, delay, ease, easing, open, onOpen, onOpened, onClose, onClosed, onState } = options;
+    const [rect, setRect] = useState();
+    const [isDisableInitial, setIsDisableInitial] = useState(disableInitialTransition);
+    const ref = useRef(null);
+    const doc = useDocument();
+    const cacheId = useCSSCacheId();
+    let _ease = ease || animationEases[easing] || animationEases.bounce;
+    const style = (obj = {}) => {
+        return css(obj, { container: doc === null || doc === void 0 ? void 0 : doc.document, cacheId }).classname;
+    };
+    let [cls, setCls] = useState(() => {
+        let props = {};
+        if (!isDisableInitial) {
+            props.visibility = 'hidden';
+        }
+        else if (isDisableInitial && !open) {
+            props.visibility = 'hidden';
+        }
+        return style(props);
+    });
     useEffect(() => {
-        setMounted(true);
+        var _a;
+        const rect = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        const v = getVariant(rect, variant);
+        setCls(style(open ? v.from : v.to));
+        setRect(rect);
     }, []);
-    if (!mounted)
-        return null;
-    return jsx(TransitionBase, Object.assign({}, options, { children: children }));
+    useLayoutEffect(() => {
+        if (rect) {
+            const v = getVariant(rect, variant);
+            let _css = open ? v.to : v.from;
+            let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`;
+            if (isDisableInitial) {
+                trans = '';
+                setIsDisableInitial(false);
+            }
+            let _ = Object.assign(Object.assign({}, _css), { transition: Object.keys(_css || {}).map(k => formatCSSProp(k)).join(trans + ", ") + trans });
+            setCls(style(_));
+            const ele = ref.current;
+            let stimer = null;
+            let etimer = null;
+            ele.ontransitionstart = () => {
+                clearTimeout(stimer);
+                stimer = setTimeout(() => {
+                    (onOpen && open) && onOpen();
+                    (onClose && !open) && onClose();
+                    onState && onState(open ? "open" : "close");
+                }, 1);
+            };
+            ele.ontransitionend = () => {
+                clearTimeout(etimer);
+                etimer = setTimeout(() => {
+                    if (onOpened && open)
+                        onOpened();
+                    if (onClosed && !open)
+                        onClosed();
+                    onState && onState(open ? "opened" : "closed");
+                }, 1);
+            };
+        }
+    }, [rect, open, variant]);
+    const clone = Children.only(children);
+    return cloneElement(clone, {
+        className: cls,
+        ref
+    });
 }
 
 export { Transition as default };

package/Transition/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Transition/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { cloneElement, Children, useEffect, useState } from 'react';\nimport useTransition, { UseTransitionProps } from '../hooks/useTransition';\n\nexport type TransitionProps = UseTransitionProps & {\n    children: React.ReactElement;\n}\n\nconst TransitionBase = ({ children, ...options }: TransitionProps) => {\n    const { props, exited } = useTransition(options);\n    if (exited) return null;\n    const clone: any = Children.only(children);\n    return cloneElement(clone, props);\n}\n\nfunction Transition({ children, ...options }: TransitionProps) {\n    const [mounted, setMounted] = useState(false);\n\n    useEffect(() => {\n        setMounted(true);\n    }, []);\n\n    if (!mounted) return null;\n    return <TransitionBase  {...options} >{children}</TransitionBase>\n}\n\n\nexport default Transition"],"names":[],"mappings":";;;;;;AAQA;AAAwB;;AAEpB;AAAY;;AAEZ;AACJ;AAEA;AAAoB;;;;;AAOhB;AAAc;AACd;AACJ;;"}
+{"version":3,"file":"index.js","sources":["../../src/Transition/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { cloneElement, Children, useState, useLayoutEffect, 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 [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) {\n            props.visibility = 'hidden'\n        } else if (isDisableInitial && !open) {\n            props.visibility = 'hidden'\n        }\n        return style(props)\n    })\n\n\n    useEffect(() => {\n        const rect = ref.current?.getBoundingClientRect() as DOMRect\n        const v = getVariant(rect, variant)\n        setCls(style(open ? v.from : v.to))\n        setRect(rect)\n    }, [])\n\n    useLayoutEffect(() => {\n        if (rect) {\n            const v = getVariant(rect, variant)\n            let _css: any = open ? v.to : v.from\n            let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`\n            if (isDisableInitial) {\n                trans = ''\n                setIsDisableInitial(false)\n            }\n            let _ = {\n                ..._css,\n                transition: Object.keys(_css || {}).map(k => formatCSSProp(k)).join(trans + \", \") + trans,\n            }\n\n            setCls(style(_))\n\n            const ele = ref.current as HTMLElement\n            let stimer: any = null\n            let etimer: any = null\n            ele.ontransitionstart = () => {\n                clearTimeout(stimer)\n                stimer = setTimeout(() => {\n                    (onOpen && open) && onOpen();\n                    (onClose && !open) && onClose()\n                    onState && onState(open ? \"open\" : \"close\")\n                }, 1)\n            }\n            ele.ontransitionend = () => {\n                clearTimeout(etimer)\n                etimer = setTimeout(() => {\n                    if (onOpened && open) onOpened();\n                    if (onClosed && !open) onClosed();\n                    onState && onState(open ? \"opened\" : \"closed\")\n                }, 1)\n            }\n        }\n    }, [rect, open, variant])\n\n    const clone: any = Children.only(children);\n    return cloneElement(clone, {\n        className: cls,\n        ref\n    });\n}\n\nexport default Transition"],"names":[],"mappings":";;;;;;;;;;AA8BA;AACI;AACA;AAAS;AACT;AACJ;AAEA;AAAoB;AAChB;;;AAiBA;AACA;AACA;AACA;AAEA;;AAEA;;;;AAKQ;;AACG;AACH;;AAEJ;AACJ;;;;;AAMI;;;;;;AAOI;;;;;;AAMA;AAKA;AAEA;;;AAGA;;AAEI;AACI;;AAEA;;AAER;AACA;;AAEI;;AAC0B;;AACC;AACvB;;AAER;;;;;AAMJ;;AAEH;AACL;;"}