@xanui/core 1.3.5 → 1.3.8

package/AppRoot/index.cjs

@@ -36,7 +36,7 @@ const AppRoot = React.forwardRef((_a, ref) => {
     React.useEffect(() => {
         if (typeof _document === 'undefined')
             return;
-        if (!cookie.exists("xuitm")) {
+        if (!cookie.exists("xuitm") && theme.name) {
             cookie.set("xuitm", theme.name);
         }
         const styles = Array.from(_document.querySelectorAll('body style[data-oncss]'));

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';\nimport Cookie from '../cookie';\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      if (!Cookie.exists(\"xuitm\")) {\n         Cookie.set(\"xuitm\", theme.name)\n      }\n\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                     Cookie.set(\"xuitm\", t.name)\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":";;;;;;;;;;;;;;;;;;AAsBA;;;;AAIG;;;;AAIA;AACA;;;AAIA;;;AAIG;;;;;;;;AASA;AACA;AACG;AACH;;;AAIH;AACG;AACG;;;AAGC;;;;AAWW;;AAEH;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';\nimport Cookie from '../cookie';\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      if (!Cookie.exists(\"xuitm\") && theme.name) {\n         Cookie.set(\"xuitm\", theme.name)\n      }\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                     Cookie.set(\"xuitm\", t.name)\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":";;;;;;;;;;;;;;;;;;AAsBA;;;;AAIG;;;;AAIA;AACA;;;AAIA;;;AAIG;;;;;AAKA;;;AAGA;AACA;AACG;AACH;;;AAIH;AACG;AACG;;;AAGC;;;;AAWW;;AAEH;AAmBlB;;"}

package/AppRoot/index.js

@@ -34,7 +34,7 @@ const AppRoot = React__default.forwardRef((_a, ref) => {
     useEffect(() => {
         if (typeof _document === 'undefined')
             return;
-        if (!Cookie.exists("xuitm")) {
+        if (!Cookie.exists("xuitm") && theme.name) {
             Cookie.set("xuitm", theme.name);
         }
         const styles = Array.from(_document.querySelectorAll('body style[data-oncss]'));

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';\nimport Cookie from '../cookie';\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      if (!Cookie.exists(\"xuitm\")) {\n         Cookie.set(\"xuitm\", theme.name)\n      }\n\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                     Cookie.set(\"xuitm\", t.name)\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":";;;;;;;;;;;;;;;;AAsBA;;;;AAIG;;;;AAIA;AACA;;;AAIA;;;AAIG;;;;;;;;AASA;AACA;AACG;AACH;;;AAIH;AACG;AACG;;;AAGC;;;;AAWW;;AAEH;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';\nimport Cookie from '../cookie';\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      if (!Cookie.exists(\"xuitm\") && theme.name) {\n         Cookie.set(\"xuitm\", theme.name)\n      }\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                     Cookie.set(\"xuitm\", t.name)\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":";;;;;;;;;;;;;;;;AAsBA;;;;AAIG;;;;AAIA;AACA;;;AAIA;;;AAIG;;;;;AAKA;;;AAGA;AACA;AACG;AACH;;;AAIH;AACG;AACG;;;AAGC;;;;AAWW;;AAEH;AAmBlB;;"}

package/Tag/index.cjs

@@ -27,11 +27,11 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 const Tag = React__namespace.forwardRef((_a, ref) => {
     var { component, children } = _a, rest = tslib.__rest(_a, ["component", "children"]);
-    const { props, style } = useTagProps(rest);
+    const { props, style, themeStyle } = useTagProps(rest);
     props.ref = ref;
     const ele = React__namespace.createElement(component || "div", props, children);
     if (typeof window === 'undefined') {
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ServerStyleTag, { factory: style }), ele] }));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ServerStyleTag, { factory: style }), themeStyle && jsxRuntime.jsx(ServerStyleTag, { factory: themeStyle }), ele] }));
     }
     return ele;
 });

package/Tag/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Tag/index.tsx"],"sourcesContent":["import * as React from 'react'\nimport { TagComponentType, TagPropsRoot } from './types';\nimport useTagProps from './useTagProps';\nimport ServerStyleTag from './ServerStyleTag';\n\nconst Tag = React.forwardRef(<T extends TagComponentType = 'div'>({ component, children, ...rest }: TagPropsRoot<T>, ref: React.Ref<any>) => {\n    const { props, style }: any = useTagProps(rest)\n    props.ref = ref\n    const ele = React.createElement(component || \"div\", props, children)\n    if (typeof window === 'undefined') {\n        return (\n            <>\n                <ServerStyleTag factory={style} />\n                {ele}\n            </>\n        )\n    }\n    return ele\n})\n\nexport default Tag"],"names":["React","__rest","_jsxs","_Fragment","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,MAAM,GAAG,GAAGA,gBAAK,CAAC,UAAU,CAAC,CAAqC,EAAiD,EAAE,GAAmB,KAAI;QAA1E,EAAE,SAAS,EAAE,QAAQ,EAAA,GAAA,EAA4B,EAAvB,IAAI,GAAAC,YAAA,CAAA,EAAA,EAA9B,yBAAgC,CAAF;IAC5F,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAQ,WAAW,CAAC,IAAI,CAAC;AAC/C,IAAA,KAAK,CAAC,GAAG,GAAG,GAAG;AACf,IAAA,MAAM,GAAG,GAAGD,gBAAK,CAAC,aAAa,CAAC,SAAS,IAAI,KAAK,EAAE,KAAK,EAAE,QAAQ,CAAC;AACpE,IAAA,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;AAC/B,QAAA,QACIE,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA,CACIC,cAAA,CAAC,cAAc,EAAA,EAAC,OAAO,EAAE,KAAK,EAAA,CAAI,EACjC,GAAG,CAAA,EAAA,CACL;IAEX;AACA,IAAA,OAAO,GAAG;AACd,CAAC;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Tag/index.tsx"],"sourcesContent":["import * as React from 'react'\nimport { TagComponentType, TagPropsRoot } from './types';\nimport useTagProps from './useTagProps';\nimport ServerStyleTag from './ServerStyleTag';\n\nconst Tag = React.forwardRef(<T extends TagComponentType = 'div'>({ component, children, ...rest }: TagPropsRoot<T>, ref: React.Ref<any>) => {\n    const { props, style, themeStyle }: any = useTagProps(rest)\n    props.ref = ref\n    const ele = React.createElement(component || \"div\", props, children)\n    if (typeof window === 'undefined') {\n        return (\n            <>\n                <ServerStyleTag factory={style} />\n                {themeStyle && <ServerStyleTag factory={themeStyle} />}\n                {ele}\n            </>\n        )\n    }\n    return ele\n})\n\nexport default Tag"],"names":["React","__rest","_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,MAAM,GAAG,GAAGA,gBAAK,CAAC,UAAU,CAAC,CAAqC,EAAiD,EAAE,GAAmB,KAAI;QAA1E,EAAE,SAAS,EAAE,QAAQ,EAAA,GAAA,EAA4B,EAAvB,IAAI,GAAAC,YAAA,CAAA,EAAA,EAA9B,yBAAgC,CAAF;AAC5F,IAAA,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,GAAQ,WAAW,CAAC,IAAI,CAAC;AAC3D,IAAA,KAAK,CAAC,GAAG,GAAG,GAAG;AACf,IAAA,MAAM,GAAG,GAAGD,gBAAK,CAAC,aAAa,CAAC,SAAS,IAAI,KAAK,EAAE,KAAK,EAAE,QAAQ,CAAC;AACpE,IAAA,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;QAC/B,QACIE,kDACIC,cAAA,CAAC,cAAc,IAAC,OAAO,EAAE,KAAK,EAAA,CAAI,EACjC,UAAU,IAAIA,cAAA,CAAC,cAAc,EAAA,EAAC,OAAO,EAAE,UAAU,GAAI,EACrD,GAAG,CAAA,EAAA,CACL;IAEX;AACA,IAAA,OAAO,GAAG;AACd,CAAC;;;;"}

package/Tag/index.js

@@ -6,11 +6,11 @@ import ServerStyleTag from './ServerStyleTag.js';
 
 const Tag = React.forwardRef((_a, ref) => {
     var { component, children } = _a, rest = __rest(_a, ["component", "children"]);
-    const { props, style } = useTagProps(rest);
+    const { props, style, themeStyle } = useTagProps(rest);
     props.ref = ref;
     const ele = React.createElement(component || "div", props, children);
     if (typeof window === 'undefined') {
-        return (jsxs(Fragment, { children: [jsx(ServerStyleTag, { factory: style }), ele] }));
+        return (jsxs(Fragment, { children: [jsx(ServerStyleTag, { factory: style }), themeStyle && jsx(ServerStyleTag, { factory: themeStyle }), ele] }));
     }
     return ele;
 });

package/Tag/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Tag/index.tsx"],"sourcesContent":["import * as React from 'react'\nimport { TagComponentType, TagPropsRoot } from './types';\nimport useTagProps from './useTagProps';\nimport ServerStyleTag from './ServerStyleTag';\n\nconst Tag = React.forwardRef(<T extends TagComponentType = 'div'>({ component, children, ...rest }: TagPropsRoot<T>, ref: React.Ref<any>) => {\n    const { props, style }: any = useTagProps(rest)\n    props.ref = ref\n    const ele = React.createElement(component || \"div\", props, children)\n    if (typeof window === 'undefined') {\n        return (\n            <>\n                <ServerStyleTag factory={style} />\n                {ele}\n            </>\n        )\n    }\n    return ele\n})\n\nexport default Tag"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;AAKA,MAAM,GAAG,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAiD,EAAE,GAAmB,KAAI;QAA1E,EAAE,SAAS,EAAE,QAAQ,EAAA,GAAA,EAA4B,EAAvB,IAAI,GAAA,MAAA,CAAA,EAAA,EAA9B,yBAAgC,CAAF;IAC5F,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAQ,WAAW,CAAC,IAAI,CAAC;AAC/C,IAAA,KAAK,CAAC,GAAG,GAAG,GAAG;AACf,IAAA,MAAM,GAAG,GAAG,KAAK,CAAC,aAAa,CAAC,SAAS,IAAI,KAAK,EAAE,KAAK,EAAE,QAAQ,CAAC;AACpE,IAAA,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;AAC/B,QAAA,QACIA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACIC,GAAA,CAAC,cAAc,EAAA,EAAC,OAAO,EAAE,KAAK,EAAA,CAAI,EACjC,GAAG,CAAA,EAAA,CACL;IAEX;AACA,IAAA,OAAO,GAAG;AACd,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/Tag/index.tsx"],"sourcesContent":["import * as React from 'react'\nimport { TagComponentType, TagPropsRoot } from './types';\nimport useTagProps from './useTagProps';\nimport ServerStyleTag from './ServerStyleTag';\n\nconst Tag = React.forwardRef(<T extends TagComponentType = 'div'>({ component, children, ...rest }: TagPropsRoot<T>, ref: React.Ref<any>) => {\n    const { props, style, themeStyle }: any = useTagProps(rest)\n    props.ref = ref\n    const ele = React.createElement(component || \"div\", props, children)\n    if (typeof window === 'undefined') {\n        return (\n            <>\n                <ServerStyleTag factory={style} />\n                {themeStyle && <ServerStyleTag factory={themeStyle} />}\n                {ele}\n            </>\n        )\n    }\n    return ele\n})\n\nexport default Tag"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAKA,MAAM,GAAG,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAiD,EAAE,GAAmB,KAAI;QAA1E,EAAE,SAAS,EAAE,QAAQ,EAAA,GAAA,EAA4B,EAAvB,IAAI,GAAA,MAAA,CAAA,EAAA,EAA9B,yBAAgC,CAAF;AAC5F,IAAA,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,GAAQ,WAAW,CAAC,IAAI,CAAC;AAC3D,IAAA,KAAK,CAAC,GAAG,GAAG,GAAG;AACf,IAAA,MAAM,GAAG,GAAG,KAAK,CAAC,aAAa,CAAC,SAAS,IAAI,KAAK,EAAE,KAAK,EAAE,QAAQ,CAAC;AACpE,IAAA,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;QAC/B,QACIA,4BACIC,GAAA,CAAC,cAAc,IAAC,OAAO,EAAE,KAAK,EAAA,CAAI,EACjC,UAAU,IAAIA,GAAA,CAAC,cAAc,EAAA,EAAC,OAAO,EAAE,UAAU,GAAI,EACrD,GAAG,CAAA,EAAA,CACL;IAEX;AACA,IAAA,OAAO,GAAG;AACd,CAAC;;;;"}

package/Tag/types.d.ts

@@ -1,6 +1,6 @@
 import * as CSS from 'csstype';
 import { CSSValueType, BreakpointKeys, Aliases, CSSProps } from '../css/types.js';
-import { ColorsRefTypes, TypographyRefTypes } from '../theme/types.js';
+import { ColorsRefTypes, TypographyRefTypes, ThemeOptionInput } from '../theme/types.js';
 import { classNamesTypes } from 'pretty-class';
 
 type TagComponentType = keyof React.JSX.IntrinsicElements | React.ComponentType<any>;
@@ -176,6 +176,7 @@ type CSSPropAsAttr = Partial<TagCSSProperties> & Aliases & {
     hover?: CSSProps;
     disabled?: boolean;
     classNames?: classNamesTypes;
+    theme?: ThemeOptionInput;
 };
 
 export type { CSSPropAsAttr, TagCSSProperties, TagComponentType, TagProps, TagPropsRoot };

package/Tag/useTagProps.cjs

@@ -1,54 +1,80 @@
+"use client";
 'use strict';
 
+var tslib = require('tslib');
+var React = require('react');
 var cssPropList = require('./cssPropList.cjs');
 var index$1 = require('../css/index.cjs');
 var prettyClass = require('pretty-class');
-var React = require('react');
 var index = require('../Document/index.cjs');
 var CSSCacheProvider = require('../css/CSSCacheProvider.cjs');
+var ThemeCssVars = require('../theme/ThemeCssVars.cjs');
 
 const useTagProps = (props) => {
-    const cachekey = JSON.stringify(props, (key, value) => {
-        return key === '_owner' || key === '_store' ? undefined : value;
-    }, 2);
     const doc = index.useDocument();
     const cacheId = CSSCacheProvider.useCSSCacheId();
-    const parsed = React.useMemo(() => {
-        let _props = {};
-        let _css = {};
-        if (props.hover && Object.keys(props.hover).length > 0) {
-            _css['&:hover'] = Object.assign({}, props.hover);
-        }
-        for (let key in props) {
-            const keys = ["sx", "sxr", "style", "hover", "className", "classNames", "baseClass"];
-            if (keys.includes(key)) {
-                continue;
-            }
-            let val = props[key];
-            if (!cssPropList[key]) {
-                _props[key] = val;
+    // Extract known styling-related props
+    const { sx, sxr, style, hover, className, classNames: clsNames, baseClass, theme } = props, rest = tslib.__rest(props, ["sx", "sxr", "style", "hover", "className", "classNames", "baseClass", "theme"]);
+    /**
+     * Split DOM props vs CSS props
+     */
+    const { domProps, cssProps } = React.useMemo(() => {
+        const _dom = {};
+        const _css = {};
+        for (const key in rest) {
+            const val = rest[key];
+            if (cssPropList[key]) {
+                _css[key] = val;
             }
             else {
-                _css[key] = val;
+                _dom[key] = val;
             }
         }
-        const styles = index$1.css(Object.assign(Object.assign(Object.assign(Object.assign({}, props.sxr), _css), props.sx), props.style), {
-            injectStyle: typeof window !== 'undefined',
+        return { domProps: _dom, cssProps: _css };
+    }, [rest]);
+    /**
+     * Generate styles
+     */
+    const { styles, themeStyle } = React.useMemo(() => {
+        const hoverStyles = hover && Object.keys(hover).length > 0
+            ? { "&:hover": hover }
+            : undefined;
+        const cls = index$1.css(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, sxr), cssProps), sx), style), hoverStyles), {
+            injectStyle: typeof window !== "undefined",
             container: doc === null || doc === void 0 ? void 0 : doc.document,
-            cacheId
+            cacheId,
         });
-        return {
-            props: _props,
-            styles,
-            className: prettyClass.classNames(props.baseClass ? "xui-" + props.baseClass : undefined, props.classNames, props.className, styles.classname)
-        };
-    }, [cachekey]);
-    const _props = {};
-    for (let prop in parsed.props) {
-        _props[prop] = props[prop];
-    }
-    _props.className = parsed.className;
-    return { props: _props, style: parsed.styles };
+        let themeStyle;
+        if (theme) {
+            themeStyle = index$1.css({
+                "@global": {
+                    [`.${cls.classname}`]: ThemeCssVars(theme)
+                }
+            }, {
+                injectStyle: typeof window !== "undefined",
+                container: doc === null || doc === void 0 ? void 0 : doc.document,
+                cacheId,
+            });
+        }
+        return { styles: cls, themeStyle };
+    }, [sx, sxr, style, hover, cssProps, doc, cacheId, theme]);
+    /**
+     * Compose className
+     */
+    const finalClassName = React.useMemo(() => {
+        return prettyClass.classNames(baseClass ? "xui-" + baseClass : undefined, clsNames, className, styles.classname);
+    }, [baseClass, clsNames, className, styles.classname]);
+    /**
+     * Final props
+     */
+    const finalProps = React.useMemo(() => {
+        return Object.assign(Object.assign({}, domProps), { className: finalClassName });
+    }, [domProps, finalClassName]);
+    return {
+        props: finalProps,
+        style: styles,
+        themeStyle
+    };
 };
 
 module.exports = useTagProps;

package/Tag/useTagProps.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useTagProps.cjs","sources":["../../src/Tag/useTagProps.ts"],"sourcesContent":["import { TagComponentType, TagProps, TagPropsRoot } from './types';\nimport cssPropList from './cssPropList';\nimport { css } from '../css';\nimport { classNames } from 'pretty-class';\nimport { CSSFactoryType } from 'oncss';\nimport { useMemo } from 'react';\nimport { useDocument } from '../Document';\nimport { useCSSCacheId } from '../css/CSSCacheProvider';\n\nexport type useTagPropsReturn<T extends TagComponentType = \"div\"> = {\n   props: TagProps<T>,\n   style: CSSFactoryType\n}\n\nconst useTagProps = <T extends TagComponentType = \"div\">(props: TagPropsRoot<T>): useTagPropsReturn<T> => {\n   const cachekey = JSON.stringify(props, (key, value) => {\n      return key === '_owner' || key === '_store' ? undefined : value;\n   }, 2);\n\n   const doc = useDocument();\n   const cacheId = useCSSCacheId()\n\n   const parsed = useMemo(() => {\n      let _props: any = {}\n      let _css: any = {}\n\n      if (props.hover && Object.keys(props.hover).length > 0) {\n         _css['&:hover'] = {\n            ...props.hover\n         }\n      }\n\n      for (let key in props) {\n         const keys = [\"sx\", \"sxr\", \"style\", \"hover\", \"className\", \"classNames\", \"baseClass\"];\n         if (keys.includes(key)) {\n            continue;\n         }\n         let val = (props as any)[key];\n         if (!cssPropList[key]) {\n            _props[key] = val\n         } else {\n            _css[key] = val\n         }\n      }\n\n      const styles = css({ ...props.sxr, ..._css, ...props.sx, ...props.style }, {\n         injectStyle: typeof window !== 'undefined',\n         container: doc?.document,\n         cacheId\n      })\n\n      return {\n         props: _props,\n         styles,\n         className: classNames(\n            props.baseClass ? \"xui-\" + props.baseClass : undefined,\n            props.classNames,\n            props.className,\n            styles.classname\n         )\n      }\n   }, [cachekey])\n\n   const _props: any = {};\n   for (let prop in parsed.props) {\n      _props[prop] = (props as any)[prop]\n   }\n   _props.className = parsed.className;\n\n   return { props: _props, style: parsed.styles };\n}\n\n\nexport default useTagProps"],"names":["useDocument","useCSSCacheId","useMemo","css","classNames"],"mappings":";;;;;;;;;AAcA,MAAM,WAAW,GAAG,CAAqC,KAAsB,KAA0B;AACtG,IAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC,GAAG,EAAE,KAAK,KAAI;AACnD,QAAA,OAAO,GAAG,KAAK,QAAQ,IAAI,GAAG,KAAK,QAAQ,GAAG,SAAS,GAAG,KAAK;IAClE,CAAC,EAAE,CAAC,CAAC;AAEL,IAAA,MAAM,GAAG,GAAGA,iBAAW,EAAE;AACzB,IAAA,MAAM,OAAO,GAAGC,8BAAa,EAAE;AAE/B,IAAA,MAAM,MAAM,GAAGC,aAAO,CAAC,MAAK;QACzB,IAAI,MAAM,GAAQ,EAAE;QACpB,IAAI,IAAI,GAAQ,EAAE;AAElB,QAAA,IAAI,KAAK,CAAC,KAAK,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE;YACrD,IAAI,CAAC,SAAS,CAAC,GAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACT,KAAK,CAAC,KAAK,CAChB;QACJ;AAEA,QAAA,KAAK,IAAI,GAAG,IAAI,KAAK,EAAE;AACpB,YAAA,MAAM,IAAI,GAAG,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;AACpF,YAAA,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;gBACrB;YACH;AACA,YAAA,IAAI,GAAG,GAAI,KAAa,CAAC,GAAG,CAAC;AAC7B,YAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE;AACpB,gBAAA,MAAM,CAAC,GAAG,CAAC,GAAG,GAAG;YACpB;iBAAO;AACJ,gBAAA,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG;YAClB;QACH;AAEA,QAAA,MAAM,MAAM,GAAGC,WAAG,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAM,KAAK,CAAC,GAAG,CAAA,EAAK,IAAI,CAAA,EAAK,KAAK,CAAC,EAAE,GAAK,KAAK,CAAC,KAAK,CAAA,EAAI;AACxE,YAAA,WAAW,EAAE,OAAO,MAAM,KAAK,WAAW;AAC1C,YAAA,SAAS,EAAE,GAAG,KAAA,IAAA,IAAH,GAAG,KAAA,MAAA,GAAA,MAAA,GAAH,GAAG,CAAE,QAAQ;YACxB;AACF,SAAA,CAAC;QAEF,OAAO;AACJ,YAAA,KAAK,EAAE,MAAM;YACb,MAAM;AACN,YAAA,SAAS,EAAEC,sBAAU,CAClB,KAAK,CAAC,SAAS,GAAG,MAAM,GAAG,KAAK,CAAC,SAAS,GAAG,SAAS,EACtD,KAAK,CAAC,UAAU,EAChB,KAAK,CAAC,SAAS,EACf,MAAM,CAAC,SAAS;SAErB;AACJ,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IAEd,MAAM,MAAM,GAAQ,EAAE;AACtB,IAAA,KAAK,IAAI,IAAI,IAAI,MAAM,CAAC,KAAK,EAAE;QAC5B,MAAM,CAAC,IAAI,CAAC,GAAI,KAAa,CAAC,IAAI,CAAC;IACtC;AACA,IAAA,MAAM,CAAC,SAAS,GAAG,MAAM,CAAC,SAAS;IAEnC,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE;AACjD;;;;"}
+{"version":3,"file":"useTagProps.cjs","sources":["../../src/Tag/useTagProps.ts"],"sourcesContent":["\"use client\"\nimport { useMemo } from \"react\";\nimport { TagComponentType, TagProps, TagPropsRoot } from \"./types\";\nimport cssPropList from \"./cssPropList\";\nimport { css } from \"../css\";\nimport { classNames } from \"pretty-class\";\nimport { CSSFactoryType } from \"oncss\";\nimport { useDocument } from \"../Document\";\nimport { useCSSCacheId } from \"../css/CSSCacheProvider\";\nimport ThemeCssVars from \"../theme/ThemeCssVars\";\nimport { createTheme } from \"../theme\";\n\nexport type useTagPropsReturn<T extends TagComponentType = \"div\"> = {\n   props: TagProps<T>;\n   style: CSSFactoryType;\n   themeStyle?: CSSFactoryType;\n};\n\nconst useTagProps = <T extends TagComponentType = \"div\">(props: TagPropsRoot<T>): useTagPropsReturn<T> => {\n   const doc = useDocument();\n   const cacheId = useCSSCacheId();\n\n   // Extract known styling-related props\n   const {\n      sx,\n      sxr,\n      style,\n      hover,\n      className,\n      classNames: clsNames,\n      baseClass,\n      theme,\n      ...rest\n   } = props;\n\n   /**\n    * Split DOM props vs CSS props\n    */\n   const { domProps, cssProps } = useMemo(() => {\n      const _dom: any = {};\n      const _css: any = {};\n\n      for (const key in rest) {\n         const val = (rest as any)[key];\n         if (cssPropList[key]) {\n            _css[key] = val;\n         } else {\n            _dom[key] = val;\n         }\n      }\n\n      return { domProps: _dom, cssProps: _css };\n   }, [rest]);\n\n   /**\n    * Generate styles\n    */\n   const { styles, themeStyle } = useMemo(() => {\n      const hoverStyles =\n         hover && Object.keys(hover).length > 0\n            ? { \"&:hover\": hover }\n            : undefined;\n\n      const cls = css(\n         {\n            ...sxr,\n            ...cssProps,\n            ...sx,\n            ...style,\n            ...hoverStyles,\n         },\n         {\n            injectStyle: typeof window !== \"undefined\",\n            container: doc?.document,\n            cacheId,\n         }\n      );\n\n      let themeStyle\n      if (theme) {\n         themeStyle = css({\n            \"@global\": {\n               [`.${cls.classname}`]: ThemeCssVars(theme as any)\n            }\n         },\n            {\n               injectStyle: typeof window !== \"undefined\",\n               container: doc?.document,\n               cacheId,\n            }\n         );\n      }\n\n      return { styles: cls, themeStyle }\n   }, [sx, sxr, style, hover, cssProps, doc, cacheId, theme]);\n\n\n   /**\n    * Compose className\n    */\n   const finalClassName = useMemo(() => {\n      return classNames(\n         baseClass ? \"xui-\" + baseClass : undefined,\n         clsNames,\n         className,\n         styles.classname\n      );\n   }, [baseClass, clsNames, className, styles.classname]);\n\n   /**\n    * Final props\n    */\n   const finalProps = useMemo(() => {\n      return {\n         ...domProps,\n         className: finalClassName,\n      };\n   }, [domProps, finalClassName]);\n\n   return {\n      props: finalProps,\n      style: styles,\n      themeStyle\n   };\n};\n\nexport default useTagProps;"],"names":[],"mappings":";;;;;;;;;;;;AAkBA;AACG;AACA;;;AAeA;;AAEG;;;;AAKA;AACG;AACA;AACG;;;AAEA;;;;AAKT;AAEA;;AAEG;;AAEA;AAEM;;AAGN;AASM;AACA;;AAEF;AAGJ;;;AAGM;;AAEC;;AAGE;AACA;;AAEF;;AAIP;AACH;AAGA;;AAEG;AACH;;AAOA;AAEA;;AAEG;AACH;AACG;AAIH;;AAGG;AACA;;;AAGN;;"}

package/Tag/useTagProps.d.ts

@@ -4,6 +4,7 @@ import { CSSFactoryType } from 'oncss';
 type useTagPropsReturn<T extends TagComponentType = "div"> = {
     props: TagProps<T>;
     style: CSSFactoryType;
+    themeStyle?: CSSFactoryType;
 };
 declare const useTagProps: <T extends TagComponentType = "div">(props: TagPropsRoot<T>) => useTagPropsReturn<T>;
 

package/Tag/useTagProps.js

@@ -1,52 +1,78 @@
+"use client";
+import { __rest } from 'tslib';
+import { useMemo } from 'react';
 import CSS_PROP_LIST from './cssPropList.js';
 import { css } from '../css/index.js';
 import { classNames } from 'pretty-class';
-import { useMemo } from 'react';
 import { useDocument } from '../Document/index.js';
 import { useCSSCacheId } from '../css/CSSCacheProvider.js';
+import ThemeCssVars from '../theme/ThemeCssVars.js';
 
 const useTagProps = (props) => {
-    const cachekey = JSON.stringify(props, (key, value) => {
-        return key === '_owner' || key === '_store' ? undefined : value;
-    }, 2);
     const doc = useDocument();
     const cacheId = useCSSCacheId();
-    const parsed = useMemo(() => {
-        let _props = {};
-        let _css = {};
-        if (props.hover && Object.keys(props.hover).length > 0) {
-            _css['&:hover'] = Object.assign({}, props.hover);
-        }
-        for (let key in props) {
-            const keys = ["sx", "sxr", "style", "hover", "className", "classNames", "baseClass"];
-            if (keys.includes(key)) {
-                continue;
-            }
-            let val = props[key];
-            if (!CSS_PROP_LIST[key]) {
-                _props[key] = val;
+    // Extract known styling-related props
+    const { sx, sxr, style, hover, className, classNames: clsNames, baseClass, theme } = props, rest = __rest(props, ["sx", "sxr", "style", "hover", "className", "classNames", "baseClass", "theme"]);
+    /**
+     * Split DOM props vs CSS props
+     */
+    const { domProps, cssProps } = useMemo(() => {
+        const _dom = {};
+        const _css = {};
+        for (const key in rest) {
+            const val = rest[key];
+            if (CSS_PROP_LIST[key]) {
+                _css[key] = val;
             }
             else {
-                _css[key] = val;
+                _dom[key] = val;
             }
         }
-        const styles = css(Object.assign(Object.assign(Object.assign(Object.assign({}, props.sxr), _css), props.sx), props.style), {
-            injectStyle: typeof window !== 'undefined',
+        return { domProps: _dom, cssProps: _css };
+    }, [rest]);
+    /**
+     * Generate styles
+     */
+    const { styles, themeStyle } = useMemo(() => {
+        const hoverStyles = hover && Object.keys(hover).length > 0
+            ? { "&:hover": hover }
+            : undefined;
+        const cls = css(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, sxr), cssProps), sx), style), hoverStyles), {
+            injectStyle: typeof window !== "undefined",
             container: doc === null || doc === void 0 ? void 0 : doc.document,
-            cacheId
+            cacheId,
         });
-        return {
-            props: _props,
-            styles,
-            className: classNames(props.baseClass ? "xui-" + props.baseClass : undefined, props.classNames, props.className, styles.classname)
-        };
-    }, [cachekey]);
-    const _props = {};
-    for (let prop in parsed.props) {
-        _props[prop] = props[prop];
-    }
-    _props.className = parsed.className;
-    return { props: _props, style: parsed.styles };
+        let themeStyle;
+        if (theme) {
+            themeStyle = css({
+                "@global": {
+                    [`.${cls.classname}`]: ThemeCssVars(theme)
+                }
+            }, {
+                injectStyle: typeof window !== "undefined",
+                container: doc === null || doc === void 0 ? void 0 : doc.document,
+                cacheId,
+            });
+        }
+        return { styles: cls, themeStyle };
+    }, [sx, sxr, style, hover, cssProps, doc, cacheId, theme]);
+    /**
+     * Compose className
+     */
+    const finalClassName = useMemo(() => {
+        return classNames(baseClass ? "xui-" + baseClass : undefined, clsNames, className, styles.classname);
+    }, [baseClass, clsNames, className, styles.classname]);
+    /**
+     * Final props
+     */
+    const finalProps = useMemo(() => {
+        return Object.assign(Object.assign({}, domProps), { className: finalClassName });
+    }, [domProps, finalClassName]);
+    return {
+        props: finalProps,
+        style: styles,
+        themeStyle
+    };
 };
 
 export { useTagProps as default };

package/Tag/useTagProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTagProps.js","sources":["../../src/Tag/useTagProps.ts"],"sourcesContent":["import { TagComponentType, TagProps, TagPropsRoot } from './types';\nimport cssPropList from './cssPropList';\nimport { css } from '../css';\nimport { classNames } from 'pretty-class';\nimport { CSSFactoryType } from 'oncss';\nimport { useMemo } from 'react';\nimport { useDocument } from '../Document';\nimport { useCSSCacheId } from '../css/CSSCacheProvider';\n\nexport type useTagPropsReturn<T extends TagComponentType = \"div\"> = {\n   props: TagProps<T>,\n   style: CSSFactoryType\n}\n\nconst useTagProps = <T extends TagComponentType = \"div\">(props: TagPropsRoot<T>): useTagPropsReturn<T> => {\n   const cachekey = JSON.stringify(props, (key, value) => {\n      return key === '_owner' || key === '_store' ? undefined : value;\n   }, 2);\n\n   const doc = useDocument();\n   const cacheId = useCSSCacheId()\n\n   const parsed = useMemo(() => {\n      let _props: any = {}\n      let _css: any = {}\n\n      if (props.hover && Object.keys(props.hover).length > 0) {\n         _css['&:hover'] = {\n            ...props.hover\n         }\n      }\n\n      for (let key in props) {\n         const keys = [\"sx\", \"sxr\", \"style\", \"hover\", \"className\", \"classNames\", \"baseClass\"];\n         if (keys.includes(key)) {\n            continue;\n         }\n         let val = (props as any)[key];\n         if (!cssPropList[key]) {\n            _props[key] = val\n         } else {\n            _css[key] = val\n         }\n      }\n\n      const styles = css({ ...props.sxr, ..._css, ...props.sx, ...props.style }, {\n         injectStyle: typeof window !== 'undefined',\n         container: doc?.document,\n         cacheId\n      })\n\n      return {\n         props: _props,\n         styles,\n         className: classNames(\n            props.baseClass ? \"xui-\" + props.baseClass : undefined,\n            props.classNames,\n            props.className,\n            styles.classname\n         )\n      }\n   }, [cachekey])\n\n   const _props: any = {};\n   for (let prop in parsed.props) {\n      _props[prop] = (props as any)[prop]\n   }\n   _props.className = parsed.className;\n\n   return { props: _props, style: parsed.styles };\n}\n\n\nexport default useTagProps"],"names":["cssPropList"],"mappings":";;;;;;;AAcA,MAAM,WAAW,GAAG,CAAqC,KAAsB,KAA0B;AACtG,IAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC,GAAG,EAAE,KAAK,KAAI;AACnD,QAAA,OAAO,GAAG,KAAK,QAAQ,IAAI,GAAG,KAAK,QAAQ,GAAG,SAAS,GAAG,KAAK;IAClE,CAAC,EAAE,CAAC,CAAC;AAEL,IAAA,MAAM,GAAG,GAAG,WAAW,EAAE;AACzB,IAAA,MAAM,OAAO,GAAG,aAAa,EAAE;AAE/B,IAAA,MAAM,MAAM,GAAG,OAAO,CAAC,MAAK;QACzB,IAAI,MAAM,GAAQ,EAAE;QACpB,IAAI,IAAI,GAAQ,EAAE;AAElB,QAAA,IAAI,KAAK,CAAC,KAAK,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE;YACrD,IAAI,CAAC,SAAS,CAAC,GAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACT,KAAK,CAAC,KAAK,CAChB;QACJ;AAEA,QAAA,KAAK,IAAI,GAAG,IAAI,KAAK,EAAE;AACpB,YAAA,MAAM,IAAI,GAAG,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;AACpF,YAAA,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;gBACrB;YACH;AACA,YAAA,IAAI,GAAG,GAAI,KAAa,CAAC,GAAG,CAAC;AAC7B,YAAA,IAAI,CAACA,aAAW,CAAC,GAAG,CAAC,EAAE;AACpB,gBAAA,MAAM,CAAC,GAAG,CAAC,GAAG,GAAG;YACpB;iBAAO;AACJ,gBAAA,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG;YAClB;QACH;AAEA,QAAA,MAAM,MAAM,GAAG,GAAG,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAM,KAAK,CAAC,GAAG,CAAA,EAAK,IAAI,CAAA,EAAK,KAAK,CAAC,EAAE,GAAK,KAAK,CAAC,KAAK,CAAA,EAAI;AACxE,YAAA,WAAW,EAAE,OAAO,MAAM,KAAK,WAAW;AAC1C,YAAA,SAAS,EAAE,GAAG,KAAA,IAAA,IAAH,GAAG,KAAA,MAAA,GAAA,MAAA,GAAH,GAAG,CAAE,QAAQ;YACxB;AACF,SAAA,CAAC;QAEF,OAAO;AACJ,YAAA,KAAK,EAAE,MAAM;YACb,MAAM;AACN,YAAA,SAAS,EAAE,UAAU,CAClB,KAAK,CAAC,SAAS,GAAG,MAAM,GAAG,KAAK,CAAC,SAAS,GAAG,SAAS,EACtD,KAAK,CAAC,UAAU,EAChB,KAAK,CAAC,SAAS,EACf,MAAM,CAAC,SAAS;SAErB;AACJ,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IAEd,MAAM,MAAM,GAAQ,EAAE;AACtB,IAAA,KAAK,IAAI,IAAI,IAAI,MAAM,CAAC,KAAK,EAAE;QAC5B,MAAM,CAAC,IAAI,CAAC,GAAI,KAAa,CAAC,IAAI,CAAC;IACtC;AACA,IAAA,MAAM,CAAC,SAAS,GAAG,MAAM,CAAC,SAAS;IAEnC,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE;AACjD;;;;"}
+{"version":3,"file":"useTagProps.js","sources":["../../src/Tag/useTagProps.ts"],"sourcesContent":["\"use client\"\nimport { useMemo } from \"react\";\nimport { TagComponentType, TagProps, TagPropsRoot } from \"./types\";\nimport cssPropList from \"./cssPropList\";\nimport { css } from \"../css\";\nimport { classNames } from \"pretty-class\";\nimport { CSSFactoryType } from \"oncss\";\nimport { useDocument } from \"../Document\";\nimport { useCSSCacheId } from \"../css/CSSCacheProvider\";\nimport ThemeCssVars from \"../theme/ThemeCssVars\";\nimport { createTheme } from \"../theme\";\n\nexport type useTagPropsReturn<T extends TagComponentType = \"div\"> = {\n   props: TagProps<T>;\n   style: CSSFactoryType;\n   themeStyle?: CSSFactoryType;\n};\n\nconst useTagProps = <T extends TagComponentType = \"div\">(props: TagPropsRoot<T>): useTagPropsReturn<T> => {\n   const doc = useDocument();\n   const cacheId = useCSSCacheId();\n\n   // Extract known styling-related props\n   const {\n      sx,\n      sxr,\n      style,\n      hover,\n      className,\n      classNames: clsNames,\n      baseClass,\n      theme,\n      ...rest\n   } = props;\n\n   /**\n    * Split DOM props vs CSS props\n    */\n   const { domProps, cssProps } = useMemo(() => {\n      const _dom: any = {};\n      const _css: any = {};\n\n      for (const key in rest) {\n         const val = (rest as any)[key];\n         if (cssPropList[key]) {\n            _css[key] = val;\n         } else {\n            _dom[key] = val;\n         }\n      }\n\n      return { domProps: _dom, cssProps: _css };\n   }, [rest]);\n\n   /**\n    * Generate styles\n    */\n   const { styles, themeStyle } = useMemo(() => {\n      const hoverStyles =\n         hover && Object.keys(hover).length > 0\n            ? { \"&:hover\": hover }\n            : undefined;\n\n      const cls = css(\n         {\n            ...sxr,\n            ...cssProps,\n            ...sx,\n            ...style,\n            ...hoverStyles,\n         },\n         {\n            injectStyle: typeof window !== \"undefined\",\n            container: doc?.document,\n            cacheId,\n         }\n      );\n\n      let themeStyle\n      if (theme) {\n         themeStyle = css({\n            \"@global\": {\n               [`.${cls.classname}`]: ThemeCssVars(theme as any)\n            }\n         },\n            {\n               injectStyle: typeof window !== \"undefined\",\n               container: doc?.document,\n               cacheId,\n            }\n         );\n      }\n\n      return { styles: cls, themeStyle }\n   }, [sx, sxr, style, hover, cssProps, doc, cacheId, theme]);\n\n\n   /**\n    * Compose className\n    */\n   const finalClassName = useMemo(() => {\n      return classNames(\n         baseClass ? \"xui-\" + baseClass : undefined,\n         clsNames,\n         className,\n         styles.classname\n      );\n   }, [baseClass, clsNames, className, styles.classname]);\n\n   /**\n    * Final props\n    */\n   const finalProps = useMemo(() => {\n      return {\n         ...domProps,\n         className: finalClassName,\n      };\n   }, [domProps, finalClassName]);\n\n   return {\n      props: finalProps,\n      style: styles,\n      themeStyle\n   };\n};\n\nexport default useTagProps;"],"names":[],"mappings":";;;;;;;;;;AAkBA;AACG;AACA;;;AAeA;;AAEG;;;;AAKA;AACG;AACA;AACG;;;AAEA;;;;AAKT;AAEA;;AAEG;;AAEA;AAEM;;AAGN;AASM;AACA;;AAEF;AAGJ;;;AAGM;;AAEC;;AAGE;AACA;;AAEF;;AAIP;AACH;AAGA;;AAEG;AACH;;AAOA;AAEA;;AAEG;AACH;AACG;AAIH;;AAGG;AACA;;;AAGN;;"}

package/Transition/variants.cjs

@@ -42,10 +42,9 @@ const fade = (el, rect) => ({
     onUpdate: ({ opacity }) => (el.style.opacity = opacity),
 });
 const fadeDown = (el, rect) => {
-    const y = getY(rect);
-    console.log(y);
+    getY(rect);
     return {
-        from: { y: -y, scale: 0.98, opacity: 0 },
+        from: { y: -40, scale: 0.98, opacity: 0 },
         to: { y: 0, scale: 1, opacity: 1 },
         onUpdate: ({ y, scale, opacity }) => {
             el.style.transform = `translateY(${y}px) scale(${scale})`;

package/Transition/variants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"variants.cjs","sources":["../../src/Transition/variants.ts"],"sourcesContent":["\"use client\"\nconst getY = (rect: DOMRect) => (rect.height / 2, 40)\nconst getX = (rect: DOMRect) => (rect.width / 2, 40)\n\n// ------------------ Variants ------------------\n\nexport const slideDown = (el: HTMLElement, rect: DOMRect) => {\n    const y = getY(rect)\n    return {\n        from: { y: -y },\n        to: { y: 0 },\n        onUpdate: ({ y }: any) => (el.style.transform = `translateY(${y}px)`),\n    }\n}\n\nexport const slideUp = (el: HTMLElement, rect: DOMRect) => {\n    const y = getY(rect)\n    return {\n        from: { y },\n        to: { y: 0 },\n        onUpdate: ({ y }: any) => (el.style.transform = `translateY(${y}px)`),\n    }\n}\n\nexport const slideRight = (el: HTMLElement, rect: DOMRect) => {\n    const x = getX(rect)\n    return {\n        from: { x: -x },\n        to: { x: 0 },\n        onUpdate: ({ x }: any) => (el.style.transform = `translateX(${x}px)`),\n    }\n}\n\nexport const slideLeft = (el: HTMLElement, rect: DOMRect) => {\n    const x = getX(rect)\n    return {\n        from: { x },\n        to: { x: 0 },\n        onUpdate: ({ x }: any) => (el.style.transform = `translateX(${x}px)`),\n    }\n}\n\nexport const fade = (el: HTMLElement, rect: DOMRect) => ({\n    from: { opacity: 0 },\n    to: { opacity: 1 },\n    onUpdate: ({ opacity }: any) => (el.style.opacity = opacity),\n})\n\nexport const fadeDown = (el: HTMLElement, rect: DOMRect) => {\n    const y = getY(rect)\n    console.log(y);\n\n    return {\n        from: { y: -y, scale: 0.98, opacity: 0 },\n        to: { y: 0, scale: 1, opacity: 1 },\n        onUpdate: ({ y, scale, opacity }: any) => {\n            el.style.transform = `translateY(${y}px) scale(${scale})`\n            el.style.opacity = String(opacity)\n        }\n    }\n}\n\nexport const fadeUp = (el: HTMLElement, rect: DOMRect) => {\n    const y = getY(rect)\n    return {\n        from: { y, scale: 0.98, opacity: 0 },\n        to: { y: 0, scale: 1, opacity: 1 },\n        onUpdate: ({ y, scale, opacity }: any) => {\n            el.style.transform = `translateY(${y}px) scale(${scale})`\n            el.style.opacity = String(opacity)\n        }\n    }\n}\n\nexport const fadeRight = (el: HTMLElement, rect: DOMRect) => {\n    const x = getX(rect)\n    return {\n        from: { x: -x, scale: 0.98, opacity: 0 },\n        to: { x: 0, scale: 1, opacity: 1 },\n        onUpdate: ({ x, scale, opacity }: any) => {\n            el.style.transform = `translateX(${x}px) scale(${scale})`\n            el.style.opacity = String(opacity)\n        }\n    }\n}\n\nexport const fadeLeft = (el: HTMLElement, rect: DOMRect) => {\n    const x = getX(rect)\n    return {\n        from: { x, scale: 0.98, opacity: 0 },\n        to: { x: 0, scale: 1, opacity: 1 },\n        onUpdate: ({ x, scale, opacity }: any) => {\n            el.style.transform = `translateX(${x}px) scale(${scale})`\n            el.style.opacity = String(opacity)\n        }\n    }\n}\n\nexport const zoom = (el: HTMLElement, rect: DOMRect) => ({\n    from: { scale: 0.8, opacity: 0 },\n    to: { scale: 1, opacity: 1 },\n    onUpdate: ({ scale, opacity }: any) => {\n        el.style.transform = `scale(${scale})`\n        el.style.opacity = String(opacity)\n    },\n})\n\nexport const zoomOver = (el: HTMLElement, rect: DOMRect) => ({\n    from: { scale: 1.2, opacity: 0 },\n    to: { scale: 1, opacity: 1 },\n    onUpdate: ({ scale, opacity }: any) => {\n        el.style.transform = `scale(${scale})`\n        el.style.opacity = String(opacity)\n    },\n})\n\nexport const grow = (el: HTMLElement, rect: DOMRect) => ({\n    from: { scaleX: 0.8, scaleY: 0.6, opacity: 0 },\n    to: { scaleX: 1, scaleY: 1, opacity: 1 },\n    onUpdate: ({ scaleX, scaleY, opacity }: any) => {\n        el.style.transform = `scale(${scaleX}, ${scaleY})`\n        el.style.opacity = String(opacity)\n    }\n})\n\nexport const collapseVertical = (el: HTMLElement, rect: DOMRect) => {\n    const height = rect.height\n    return {\n        from: { maxHeight: 0 },\n        to: { maxHeight: height },\n        onUpdate: ({ maxHeight }: any) => {\n            el.style.maxHeight = `${maxHeight}px`\n        },\n    }\n}\n\nexport const collapseHorizontal = (el: HTMLElement, rect: DOMRect) => {\n    const width = rect.width\n    return {\n        from: { width: 0 },\n        to: { width },\n        onUpdate: ({ width }: any) => {\n            el.style.width = `${width}px`\n        },\n    }\n}"],"names":[],"mappings":";;;AACA;AACA;AAEA;;AAGI;;AAEI;AACA;AACA;;AAER;;AAGI;;;AAGI;AACA;;AAER;;AAGI;;AAEI;AACA;AACA;;AAER;;AAGI;;;AAGI;AACA;;AAER;AAEO;AACH;AACA;AACA;AACH;;AAGG;AACA;;AAGI;AACA;;;;;;AAMR;;AAGI;;;AAGI;;;;;;AAMR;;AAGI;;AAEI;AACA;;;;;;AAMR;;AAGI;;;AAGI;;;;;;AAMR;AAEO;;;;;;;AAON;AAEM;;;;;;;AAON;AAEM;AACH;AACA;;;;;AAKH;;AAGG;;AAEI;AACA;AACA;;;;AAIR;;AAGI;;AAEI;;AAEA;;;;AAIR;;;;;;;;;;;;;;;"}
+{"version":3,"file":"variants.cjs","sources":["../../src/Transition/variants.ts"],"sourcesContent":["\"use client\"\nconst getY = (rect: DOMRect) => (rect.height / 2, 40)\nconst getX = (rect: DOMRect) => (rect.width / 2, 40)\n\n// ------------------ Variants ------------------\n\nexport const slideDown = (el: HTMLElement, rect: DOMRect) => {\n    const y = getY(rect)\n    return {\n        from: { y: -y },\n        to: { y: 0 },\n        onUpdate: ({ y }: any) => (el.style.transform = `translateY(${y}px)`),\n    }\n}\n\nexport const slideUp = (el: HTMLElement, rect: DOMRect) => {\n    const y = getY(rect)\n    return {\n        from: { y },\n        to: { y: 0 },\n        onUpdate: ({ y }: any) => (el.style.transform = `translateY(${y}px)`),\n    }\n}\n\nexport const slideRight = (el: HTMLElement, rect: DOMRect) => {\n    const x = getX(rect)\n    return {\n        from: { x: -x },\n        to: { x: 0 },\n        onUpdate: ({ x }: any) => (el.style.transform = `translateX(${x}px)`),\n    }\n}\n\nexport const slideLeft = (el: HTMLElement, rect: DOMRect) => {\n    const x = getX(rect)\n    return {\n        from: { x },\n        to: { x: 0 },\n        onUpdate: ({ x }: any) => (el.style.transform = `translateX(${x}px)`),\n    }\n}\n\nexport const fade = (el: HTMLElement, rect: DOMRect) => ({\n    from: { opacity: 0 },\n    to: { opacity: 1 },\n    onUpdate: ({ opacity }: any) => (el.style.opacity = opacity),\n})\n\nexport const fadeDown = (el: HTMLElement, rect: DOMRect) => {\n    const y = getY(rect)\n    return {\n        from: { y: -y, scale: 0.98, opacity: 0 },\n        to: { y: 0, scale: 1, opacity: 1 },\n        onUpdate: ({ y, scale, opacity }: any) => {\n            el.style.transform = `translateY(${y}px) scale(${scale})`\n            el.style.opacity = String(opacity)\n        }\n    }\n}\n\nexport const fadeUp = (el: HTMLElement, rect: DOMRect) => {\n    const y = getY(rect)\n    return {\n        from: { y, scale: 0.98, opacity: 0 },\n        to: { y: 0, scale: 1, opacity: 1 },\n        onUpdate: ({ y, scale, opacity }: any) => {\n            el.style.transform = `translateY(${y}px) scale(${scale})`\n            el.style.opacity = String(opacity)\n        }\n    }\n}\n\nexport const fadeRight = (el: HTMLElement, rect: DOMRect) => {\n    const x = getX(rect)\n    return {\n        from: { x: -x, scale: 0.98, opacity: 0 },\n        to: { x: 0, scale: 1, opacity: 1 },\n        onUpdate: ({ x, scale, opacity }: any) => {\n            el.style.transform = `translateX(${x}px) scale(${scale})`\n            el.style.opacity = String(opacity)\n        }\n    }\n}\n\nexport const fadeLeft = (el: HTMLElement, rect: DOMRect) => {\n    const x = getX(rect)\n    return {\n        from: { x, scale: 0.98, opacity: 0 },\n        to: { x: 0, scale: 1, opacity: 1 },\n        onUpdate: ({ x, scale, opacity }: any) => {\n            el.style.transform = `translateX(${x}px) scale(${scale})`\n            el.style.opacity = String(opacity)\n        }\n    }\n}\n\nexport const zoom = (el: HTMLElement, rect: DOMRect) => ({\n    from: { scale: 0.8, opacity: 0 },\n    to: { scale: 1, opacity: 1 },\n    onUpdate: ({ scale, opacity }: any) => {\n        el.style.transform = `scale(${scale})`\n        el.style.opacity = String(opacity)\n    },\n})\n\nexport const zoomOver = (el: HTMLElement, rect: DOMRect) => ({\n    from: { scale: 1.2, opacity: 0 },\n    to: { scale: 1, opacity: 1 },\n    onUpdate: ({ scale, opacity }: any) => {\n        el.style.transform = `scale(${scale})`\n        el.style.opacity = String(opacity)\n    },\n})\n\nexport const grow = (el: HTMLElement, rect: DOMRect) => ({\n    from: { scaleX: 0.8, scaleY: 0.6, opacity: 0 },\n    to: { scaleX: 1, scaleY: 1, opacity: 1 },\n    onUpdate: ({ scaleX, scaleY, opacity }: any) => {\n        el.style.transform = `scale(${scaleX}, ${scaleY})`\n        el.style.opacity = String(opacity)\n    }\n})\n\nexport const collapseVertical = (el: HTMLElement, rect: DOMRect) => {\n    const height = rect.height\n    return {\n        from: { maxHeight: 0 },\n        to: { maxHeight: height },\n        onUpdate: ({ maxHeight }: any) => {\n            el.style.maxHeight = `${maxHeight}px`\n        },\n    }\n}\n\nexport const collapseHorizontal = (el: HTMLElement, rect: DOMRect) => {\n    const width = rect.width\n    return {\n        from: { width: 0 },\n        to: { width },\n        onUpdate: ({ width }: any) => {\n            el.style.width = `${width}px`\n        },\n    }\n}"],"names":[],"mappings":";;;AACA;AACA;AAEA;;AAGI;;AAEI;AACA;AACA;;AAER;;AAGI;;;AAGI;AACA;;AAER;;AAGI;;AAEI;AACA;AACA;;AAER;;AAGI;;;AAGI;AACA;;AAER;AAEO;AACH;AACA;AACA;AACH;;AAGG;;AAEI;AACA;;;;;;AAMR;;AAGI;;;AAGI;;;;;;AAMR;;AAGI;;AAEI;AACA;;;;;;AAMR;;AAGI;;;AAGI;;;;;;AAMR;AAEO;;;;;;;AAON;AAEM;;;;;;;AAON;AAEM;AACH;AACA;;;;;AAKH;;AAGG;;AAEI;AACA;AACA;;;;AAIR;;AAGI;;AAEI;;AAEA;;;;AAIR;;;;;;;;;;;;;;;"}

package/Transition/variants.js

@@ -40,10 +40,9 @@ const fade = (el, rect) => ({
     onUpdate: ({ opacity }) => (el.style.opacity = opacity),
 });
 const fadeDown = (el, rect) => {
-    const y = getY(rect);
-    console.log(y);
+    getY(rect);
     return {
-        from: { y: -y, scale: 0.98, opacity: 0 },
+        from: { y: -40, scale: 0.98, opacity: 0 },
         to: { y: 0, scale: 1, opacity: 1 },
         onUpdate: ({ y, scale, opacity }) => {
             el.style.transform = `translateY(${y}px) scale(${scale})`;

package/Transition/variants.js.map

@@ -1 +1 @@
-{"version":3,"file":"variants.js","sources":["../../src/Transition/variants.ts"],"sourcesContent":["\"use client\"\nconst getY = (rect: DOMRect) => (rect.height / 2, 40)\nconst getX = (rect: DOMRect) => (rect.width / 2, 40)\n\n// ------------------ Variants ------------------\n\nexport const slideDown = (el: HTMLElement, rect: DOMRect) => {\n    const y = getY(rect)\n    return {\n        from: { y: -y },\n        to: { y: 0 },\n        onUpdate: ({ y }: any) => (el.style.transform = `translateY(${y}px)`),\n    }\n}\n\nexport const slideUp = (el: HTMLElement, rect: DOMRect) => {\n    const y = getY(rect)\n    return {\n        from: { y },\n        to: { y: 0 },\n        onUpdate: ({ y }: any) => (el.style.transform = `translateY(${y}px)`),\n    }\n}\n\nexport const slideRight = (el: HTMLElement, rect: DOMRect) => {\n    const x = getX(rect)\n    return {\n        from: { x: -x },\n        to: { x: 0 },\n        onUpdate: ({ x }: any) => (el.style.transform = `translateX(${x}px)`),\n    }\n}\n\nexport const slideLeft = (el: HTMLElement, rect: DOMRect) => {\n    const x = getX(rect)\n    return {\n        from: { x },\n        to: { x: 0 },\n        onUpdate: ({ x }: any) => (el.style.transform = `translateX(${x}px)`),\n    }\n}\n\nexport const fade = (el: HTMLElement, rect: DOMRect) => ({\n    from: { opacity: 0 },\n    to: { opacity: 1 },\n    onUpdate: ({ opacity }: any) => (el.style.opacity = opacity),\n})\n\nexport const fadeDown = (el: HTMLElement, rect: DOMRect) => {\n    const y = getY(rect)\n    console.log(y);\n\n    return {\n        from: { y: -y, scale: 0.98, opacity: 0 },\n        to: { y: 0, scale: 1, opacity: 1 },\n        onUpdate: ({ y, scale, opacity }: any) => {\n            el.style.transform = `translateY(${y}px) scale(${scale})`\n            el.style.opacity = String(opacity)\n        }\n    }\n}\n\nexport const fadeUp = (el: HTMLElement, rect: DOMRect) => {\n    const y = getY(rect)\n    return {\n        from: { y, scale: 0.98, opacity: 0 },\n        to: { y: 0, scale: 1, opacity: 1 },\n        onUpdate: ({ y, scale, opacity }: any) => {\n            el.style.transform = `translateY(${y}px) scale(${scale})`\n            el.style.opacity = String(opacity)\n        }\n    }\n}\n\nexport const fadeRight = (el: HTMLElement, rect: DOMRect) => {\n    const x = getX(rect)\n    return {\n        from: { x: -x, scale: 0.98, opacity: 0 },\n        to: { x: 0, scale: 1, opacity: 1 },\n        onUpdate: ({ x, scale, opacity }: any) => {\n            el.style.transform = `translateX(${x}px) scale(${scale})`\n            el.style.opacity = String(opacity)\n        }\n    }\n}\n\nexport const fadeLeft = (el: HTMLElement, rect: DOMRect) => {\n    const x = getX(rect)\n    return {\n        from: { x, scale: 0.98, opacity: 0 },\n        to: { x: 0, scale: 1, opacity: 1 },\n        onUpdate: ({ x, scale, opacity }: any) => {\n            el.style.transform = `translateX(${x}px) scale(${scale})`\n            el.style.opacity = String(opacity)\n        }\n    }\n}\n\nexport const zoom = (el: HTMLElement, rect: DOMRect) => ({\n    from: { scale: 0.8, opacity: 0 },\n    to: { scale: 1, opacity: 1 },\n    onUpdate: ({ scale, opacity }: any) => {\n        el.style.transform = `scale(${scale})`\n        el.style.opacity = String(opacity)\n    },\n})\n\nexport const zoomOver = (el: HTMLElement, rect: DOMRect) => ({\n    from: { scale: 1.2, opacity: 0 },\n    to: { scale: 1, opacity: 1 },\n    onUpdate: ({ scale, opacity }: any) => {\n        el.style.transform = `scale(${scale})`\n        el.style.opacity = String(opacity)\n    },\n})\n\nexport const grow = (el: HTMLElement, rect: DOMRect) => ({\n    from: { scaleX: 0.8, scaleY: 0.6, opacity: 0 },\n    to: { scaleX: 1, scaleY: 1, opacity: 1 },\n    onUpdate: ({ scaleX, scaleY, opacity }: any) => {\n        el.style.transform = `scale(${scaleX}, ${scaleY})`\n        el.style.opacity = String(opacity)\n    }\n})\n\nexport const collapseVertical = (el: HTMLElement, rect: DOMRect) => {\n    const height = rect.height\n    return {\n        from: { maxHeight: 0 },\n        to: { maxHeight: height },\n        onUpdate: ({ maxHeight }: any) => {\n            el.style.maxHeight = `${maxHeight}px`\n        },\n    }\n}\n\nexport const collapseHorizontal = (el: HTMLElement, rect: DOMRect) => {\n    const width = rect.width\n    return {\n        from: { width: 0 },\n        to: { width },\n        onUpdate: ({ width }: any) => {\n            el.style.width = `${width}px`\n        },\n    }\n}"],"names":[],"mappings":";AACA;AACA;AAEA;;AAGI;;AAEI;AACA;AACA;;AAER;;AAGI;;;AAGI;AACA;;AAER;;AAGI;;AAEI;AACA;AACA;;AAER;;AAGI;;;AAGI;AACA;;AAER;AAEO;AACH;AACA;AACA;AACH;;AAGG;AACA;;AAGI;AACA;;;;;;AAMR;;AAGI;;;AAGI;;;;;;AAMR;;AAGI;;AAEI;AACA;;;;;;AAMR;;AAGI;;;AAGI;;;;;;AAMR;AAEO;;;;;;;AAON;AAEM;;;;;;;AAON;AAEM;AACH;AACA;;;;;AAKH;;AAGG;;AAEI;AACA;AACA;;;;AAIR;;AAGI;;AAEI;;AAEA;;;;AAIR;;"}
+{"version":3,"file":"variants.js","sources":["../../src/Transition/variants.ts"],"sourcesContent":["\"use client\"\nconst getY = (rect: DOMRect) => (rect.height / 2, 40)\nconst getX = (rect: DOMRect) => (rect.width / 2, 40)\n\n// ------------------ Variants ------------------\n\nexport const slideDown = (el: HTMLElement, rect: DOMRect) => {\n    const y = getY(rect)\n    return {\n        from: { y: -y },\n        to: { y: 0 },\n        onUpdate: ({ y }: any) => (el.style.transform = `translateY(${y}px)`),\n    }\n}\n\nexport const slideUp = (el: HTMLElement, rect: DOMRect) => {\n    const y = getY(rect)\n    return {\n        from: { y },\n        to: { y: 0 },\n        onUpdate: ({ y }: any) => (el.style.transform = `translateY(${y}px)`),\n    }\n}\n\nexport const slideRight = (el: HTMLElement, rect: DOMRect) => {\n    const x = getX(rect)\n    return {\n        from: { x: -x },\n        to: { x: 0 },\n        onUpdate: ({ x }: any) => (el.style.transform = `translateX(${x}px)`),\n    }\n}\n\nexport const slideLeft = (el: HTMLElement, rect: DOMRect) => {\n    const x = getX(rect)\n    return {\n        from: { x },\n        to: { x: 0 },\n        onUpdate: ({ x }: any) => (el.style.transform = `translateX(${x}px)`),\n    }\n}\n\nexport const fade = (el: HTMLElement, rect: DOMRect) => ({\n    from: { opacity: 0 },\n    to: { opacity: 1 },\n    onUpdate: ({ opacity }: any) => (el.style.opacity = opacity),\n})\n\nexport const fadeDown = (el: HTMLElement, rect: DOMRect) => {\n    const y = getY(rect)\n    return {\n        from: { y: -y, scale: 0.98, opacity: 0 },\n        to: { y: 0, scale: 1, opacity: 1 },\n        onUpdate: ({ y, scale, opacity }: any) => {\n            el.style.transform = `translateY(${y}px) scale(${scale})`\n            el.style.opacity = String(opacity)\n        }\n    }\n}\n\nexport const fadeUp = (el: HTMLElement, rect: DOMRect) => {\n    const y = getY(rect)\n    return {\n        from: { y, scale: 0.98, opacity: 0 },\n        to: { y: 0, scale: 1, opacity: 1 },\n        onUpdate: ({ y, scale, opacity }: any) => {\n            el.style.transform = `translateY(${y}px) scale(${scale})`\n            el.style.opacity = String(opacity)\n        }\n    }\n}\n\nexport const fadeRight = (el: HTMLElement, rect: DOMRect) => {\n    const x = getX(rect)\n    return {\n        from: { x: -x, scale: 0.98, opacity: 0 },\n        to: { x: 0, scale: 1, opacity: 1 },\n        onUpdate: ({ x, scale, opacity }: any) => {\n            el.style.transform = `translateX(${x}px) scale(${scale})`\n            el.style.opacity = String(opacity)\n        }\n    }\n}\n\nexport const fadeLeft = (el: HTMLElement, rect: DOMRect) => {\n    const x = getX(rect)\n    return {\n        from: { x, scale: 0.98, opacity: 0 },\n        to: { x: 0, scale: 1, opacity: 1 },\n        onUpdate: ({ x, scale, opacity }: any) => {\n            el.style.transform = `translateX(${x}px) scale(${scale})`\n            el.style.opacity = String(opacity)\n        }\n    }\n}\n\nexport const zoom = (el: HTMLElement, rect: DOMRect) => ({\n    from: { scale: 0.8, opacity: 0 },\n    to: { scale: 1, opacity: 1 },\n    onUpdate: ({ scale, opacity }: any) => {\n        el.style.transform = `scale(${scale})`\n        el.style.opacity = String(opacity)\n    },\n})\n\nexport const zoomOver = (el: HTMLElement, rect: DOMRect) => ({\n    from: { scale: 1.2, opacity: 0 },\n    to: { scale: 1, opacity: 1 },\n    onUpdate: ({ scale, opacity }: any) => {\n        el.style.transform = `scale(${scale})`\n        el.style.opacity = String(opacity)\n    },\n})\n\nexport const grow = (el: HTMLElement, rect: DOMRect) => ({\n    from: { scaleX: 0.8, scaleY: 0.6, opacity: 0 },\n    to: { scaleX: 1, scaleY: 1, opacity: 1 },\n    onUpdate: ({ scaleX, scaleY, opacity }: any) => {\n        el.style.transform = `scale(${scaleX}, ${scaleY})`\n        el.style.opacity = String(opacity)\n    }\n})\n\nexport const collapseVertical = (el: HTMLElement, rect: DOMRect) => {\n    const height = rect.height\n    return {\n        from: { maxHeight: 0 },\n        to: { maxHeight: height },\n        onUpdate: ({ maxHeight }: any) => {\n            el.style.maxHeight = `${maxHeight}px`\n        },\n    }\n}\n\nexport const collapseHorizontal = (el: HTMLElement, rect: DOMRect) => {\n    const width = rect.width\n    return {\n        from: { width: 0 },\n        to: { width },\n        onUpdate: ({ width }: any) => {\n            el.style.width = `${width}px`\n        },\n    }\n}"],"names":[],"mappings":";AACA;AACA;AAEA;;AAGI;;AAEI;AACA;AACA;;AAER;;AAGI;;;AAGI;AACA;;AAER;;AAGI;;AAEI;AACA;AACA;;AAER;;AAGI;;;AAGI;AACA;;AAER;AAEO;AACH;AACA;AACA;AACH;;AAGG;;AAEI;AACA;;;;;;AAMR;;AAGI;;;AAGI;;;;;;AAMR;;AAGI;;AAEI;AACA;;;;;;AAMR;;AAGI;;;AAGI;;;;;;AAMR;AAEO;;;;;;;AAON;AAEM;;;;;;;AAON;AAEM;AACH;AACA;;;;;AAKH;;AAGG;;AAEI;AACA;AACA;;;;AAIR;;AAGI;;AAEI;;AAEA;;;;AAIR;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xanui/core",
-  "version": "1.3.5",
+  "version": "1.3.8",
   "description": "Xanui Core Library",
   "private": false,
   "main": "./index.cjs",