@xanui/core 1.1.14 → 1.1.16

package/AppRoot/index.d.ts

@@ -0,0 +1,11 @@
+import React__default from 'react';
+import { TagComponentType } from '../Tag/types.js';
+import { ThemeProviderProps } from '../theme/ThemeProvider.js';
+
+type AppRootProps<T extends TagComponentType = "div"> = ThemeProviderProps<T> & {
+    noScrollbarCss?: boolean;
+};
+declare const AppRoot: React__default.ForwardRefExoticComponent<Omit<AppRootProps<TagComponentType>, "ref"> & React__default.RefAttributes<any>>;
+
+export { AppRoot as default };
+export type { AppRootProps };

package/AppRoot/index.js

@@ -0,0 +1,62 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),index$1=require('../theme/index.js'),BreakpointProvider=require('../breakpoint/BreakpointProvider.js'),index=require('../css/index.js'),useScrollbar=require('../hooks/useScrollbar.js'),ThemeDefaultOptions=require('../theme/ThemeDefaultOptions.js'),createTheme=require('../theme/createTheme.js'),ThemeProvider=require('../theme/ThemeProvider.js');createTheme.createTheme("light", { colors: ThemeDefaultOptions.lightColorPallete });
+createTheme.createTheme("dark", { colors: ThemeDefaultOptions.darkColorPallete });
+const AppRoot = React.forwardRef((_a, ref) => {
+    var { children, noScrollbarCss, theme } = _a, props = tslib.__rest(_a, ["children", "noScrollbarCss", "theme"]);
+    noScrollbarCss !== null && noScrollbarCss !== void 0 ? noScrollbarCss : (noScrollbarCss = false);
+    React.useMemo(() => {
+        if (noScrollbarCss)
+            return;
+        useScrollbar.default({
+            themeName: theme,
+            root_cls: index$1.themeRootClass(theme)
+        });
+    }, [noScrollbarCss, theme]);
+    React.useMemo(() => {
+        index.css({
+            "@global": {
+                "*": {
+                    m: 0,
+                    p: 0,
+                    outline: "none",
+                    boxSizing: "border-box",
+                    verticalAlign: "baseline",
+                },
+                "html, body": {
+                    minHeight: "100%",
+                    "-webkit-font-smoothing": "antialiased"
+                },
+                "img, picture, video, canvas, svg": {
+                    maxWidth: "100%",
+                    display: "block"
+                },
+                "input, button, textarea, select": {
+                    font: "inherit"
+                },
+                "table": {
+                    borderCollapse: "collapse",
+                    borderSpacing: 0
+                },
+                "ol, ul": {
+                    listStyle: "none"
+                },
+                "a": {
+                    display: "inline-block"
+                },
+                "p, h1, h2, h3, h4, h5, h6": {
+                    overflowWrap: "break-word",
+                }
+            }
+        });
+    }, []);
+    React.useEffect(() => {
+        // move oncss style tags to head
+        if (typeof window === 'undefined')
+            return;
+        const head = document.getElementsByTagName('head')[0];
+        const styles = Array.from(document.querySelectorAll('body style[data-oncss]'));
+        styles.forEach((style) => {
+            head.appendChild(style);
+        });
+    }, []);
+    return (jsxRuntime.jsx(ThemeProvider.default, Object.assign({ ref: ref, theme: theme }, props, { classNames: [`xui-app-root`], children: jsxRuntime.jsx(BreakpointProvider.BreakpointProvider, { children: children }) })));
+});exports.default=AppRoot;//# sourceMappingURL=index.js.map

package/AppRoot/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\nimport React, { useEffect, useMemo } from 'react';\nimport { TagComponentType } from '../Tag/types';\nimport { createTheme, ThemeProvider, ThemeProviderProps, themeRootClass } from '../theme';\nimport { BreakpointProvider } from '../breakpoint';\nimport useScrollbar from '../hooks/useScrollbar';\nimport { css } from '../css';\nimport { darkColorPallete, lightColorPallete } from '../theme/ThemeDefaultOptions';\n\ncreateTheme(\"light\", { colors: lightColorPallete })\ncreateTheme(\"dark\", { colors: darkColorPallete })\n\nexport type AppRootProps<T extends TagComponentType = \"div\"> = ThemeProviderProps<T> & {\n   noScrollbarCss?: boolean;\n}\n\nconst AppRoot = React.forwardRef(<T extends TagComponentType = \"div\">({ children, noScrollbarCss, theme, ...props }: AppRootProps<T>, ref: React.Ref<any>) => {\n   noScrollbarCss ??= false\n\n   useMemo(() => {\n      if (noScrollbarCss) return;\n      useScrollbar({\n         themeName: theme,\n         root_cls: themeRootClass(theme)\n      })\n   }, [noScrollbarCss, theme])\n\n   useMemo(() => {\n      css({\n         \"@global\": {\n            \"*\": {\n               m: 0,\n               p: 0,\n               outline: \"none\",\n               boxSizing: \"border-box\",\n               verticalAlign: \"baseline\",\n            },\n            \"html, body\": {\n               minHeight: \"100%\",\n               \"-webkit-font-smoothing\": \"antialiased\"\n            } as any,\n            \"img, picture, video, canvas, svg\": {\n               maxWidth: \"100%\",\n               display: \"block\"\n            },\n            \"input, button, textarea, select\": {\n               font: \"inherit\"\n            },\n            \"table\": {\n               borderCollapse: \"collapse\",\n               borderSpacing: 0\n            },\n            \"ol, ul\": {\n               listStyle: \"none\"\n            },\n            \"a\": {\n               display: \"inline-block\"\n            },\n            \"p, h1, h2, h3, h4, h5, h6\": {\n               overflowWrap: \"break-word\",\n            }\n         }\n      })\n   }, [])\n\n   useEffect(() => {\n      // move oncss style tags to head\n      if (typeof window === 'undefined') return;\n      const head = document.getElementsByTagName('head')[0];\n      const styles = Array.from(document.querySelectorAll('body style[data-oncss]'));\n      styles.forEach((style) => {\n         head.appendChild(style);\n      });\n   }, [])\n\n   return (\n      <ThemeProvider\n         ref={ref}\n         theme={theme}\n         {...props}\n         classNames={[`xui-app-root`]}\n      >\n         <BreakpointProvider>\n            {children}\n         </BreakpointProvider>\n      </ThemeProvider>\n   )\n})\n\nexport default AppRoot\n\n"],"names":["createTheme","lightColorPallete","darkColorPallete","__rest","useMemo","useScrollbar","themeRootClass","css","useEffect","_jsx","ThemeProvider","BreakpointProvider"],"mappings":"0fASAA,uBAAW,CAAC,OAAO,EAAE,EAAE,MAAM,EAAEC,qCAAiB,EAAE,CAAC;AACnDD,uBAAW,CAAC,MAAM,EAAE,EAAE,MAAM,EAAEE,oCAAgB,EAAE,CAAC;AAMjD,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA8D,EAAE,GAAmB,KAAI;QAAvF,EAAE,QAAQ,EAAE,cAAc,EAAE,KAAK,OAA6B,EAAxB,KAAK,GAAAC,YAAA,CAAA,EAAA,EAA3C,CAAA,UAAA,EAAA,gBAAA,EAAA,OAAA,CAA6C,CAAF;IAC9G,cAAc,KAAA,IAAA,IAAd,cAAc,KAAA,MAAA,GAAd,cAAc,IAAd,cAAc,GAAK,KAAK,CAAA;IAExBC,aAAO,CAAC,MAAK;AACV,QAAA,IAAI,cAAc;YAAE;AACpB,QAAAC,oBAAY,CAAC;AACV,YAAA,SAAS,EAAE,KAAK;AAChB,YAAA,QAAQ,EAAEC,sBAAc,CAAC,KAAK;AAChC,SAAA,CAAC;AACL,IAAA,CAAC,EAAE,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC;IAE3BF,aAAO,CAAC,MAAK;AACV,QAAAG,SAAG,CAAC;AACD,YAAA,SAAS,EAAE;AACR,gBAAA,GAAG,EAAE;AACF,oBAAA,CAAC,EAAE,CAAC;AACJ,oBAAA,CAAC,EAAE,CAAC;AACJ,oBAAA,OAAO,EAAE,MAAM;AACf,oBAAA,SAAS,EAAE,YAAY;AACvB,oBAAA,aAAa,EAAE,UAAU;AAC3B,iBAAA;AACD,gBAAA,YAAY,EAAE;AACX,oBAAA,SAAS,EAAE,MAAM;AACjB,oBAAA,wBAAwB,EAAE;AACrB,iBAAA;AACR,gBAAA,kCAAkC,EAAE;AACjC,oBAAA,QAAQ,EAAE,MAAM;AAChB,oBAAA,OAAO,EAAE;AACX,iBAAA;AACD,gBAAA,iCAAiC,EAAE;AAChC,oBAAA,IAAI,EAAE;AACR,iBAAA;AACD,gBAAA,OAAO,EAAE;AACN,oBAAA,cAAc,EAAE,UAAU;AAC1B,oBAAA,aAAa,EAAE;AACjB,iBAAA;AACD,gBAAA,QAAQ,EAAE;AACP,oBAAA,SAAS,EAAE;AACb,iBAAA;AACD,gBAAA,GAAG,EAAE;AACF,oBAAA,OAAO,EAAE;AACX,iBAAA;AACD,gBAAA,2BAA2B,EAAE;AAC1B,oBAAA,YAAY,EAAE,YAAY;AAC5B;AACH;AACH,SAAA,CAAC;IACL,CAAC,EAAE,EAAE,CAAC;IAENC,eAAS,CAAC,MAAK;;QAEZ,IAAI,OAAO,MAAM,KAAK,WAAW;YAAE;QACnC,MAAM,IAAI,GAAG,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AACrD,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC;AAC9E,QAAA,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;AACtB,YAAA,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC1B,QAAA,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC;IAEN,QACGC,cAAA,CAACC,qBAAa,EAAA,MAAA,CAAA,MAAA,CAAA,EACX,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EAAA,EACR,KAAK,EAAA,EACT,UAAU,EAAE,CAAC,CAAA,YAAA,CAAc,CAAC,EAAA,QAAA,EAE5BD,cAAA,CAACE,qCAAkB,EAAA,EAAA,QAAA,EACf,QAAQ,EAAA,CACS,EAAA,CAAA,CACR;AAEtB,CAAC"}

package/AppRoot/index.mjs

@@ -0,0 +1,62 @@
+import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React__default,{useMemo,useEffect}from'react';import {themeRootClass}from'../theme/index.mjs';import {BreakpointProvider}from'../breakpoint/BreakpointProvider.mjs';import {css}from'../css/index.mjs';import useScrollbar from'../hooks/useScrollbar.mjs';import {lightColorPallete,darkColorPallete}from'../theme/ThemeDefaultOptions.mjs';import {createTheme}from'../theme/createTheme.mjs';import ThemeProvider from'../theme/ThemeProvider.mjs';createTheme("light", { colors: lightColorPallete });
+createTheme("dark", { colors: darkColorPallete });
+const AppRoot = React__default.forwardRef((_a, ref) => {
+    var { children, noScrollbarCss, theme } = _a, props = __rest(_a, ["children", "noScrollbarCss", "theme"]);
+    noScrollbarCss !== null && noScrollbarCss !== void 0 ? noScrollbarCss : (noScrollbarCss = false);
+    useMemo(() => {
+        if (noScrollbarCss)
+            return;
+        useScrollbar({
+            themeName: theme,
+            root_cls: themeRootClass(theme)
+        });
+    }, [noScrollbarCss, theme]);
+    useMemo(() => {
+        css({
+            "@global": {
+                "*": {
+                    m: 0,
+                    p: 0,
+                    outline: "none",
+                    boxSizing: "border-box",
+                    verticalAlign: "baseline",
+                },
+                "html, body": {
+                    minHeight: "100%",
+                    "-webkit-font-smoothing": "antialiased"
+                },
+                "img, picture, video, canvas, svg": {
+                    maxWidth: "100%",
+                    display: "block"
+                },
+                "input, button, textarea, select": {
+                    font: "inherit"
+                },
+                "table": {
+                    borderCollapse: "collapse",
+                    borderSpacing: 0
+                },
+                "ol, ul": {
+                    listStyle: "none"
+                },
+                "a": {
+                    display: "inline-block"
+                },
+                "p, h1, h2, h3, h4, h5, h6": {
+                    overflowWrap: "break-word",
+                }
+            }
+        });
+    }, []);
+    useEffect(() => {
+        // move oncss style tags to head
+        if (typeof window === 'undefined')
+            return;
+        const head = document.getElementsByTagName('head')[0];
+        const styles = Array.from(document.querySelectorAll('body style[data-oncss]'));
+        styles.forEach((style) => {
+            head.appendChild(style);
+        });
+    }, []);
+    return (jsx(ThemeProvider, Object.assign({ ref: ref, theme: theme }, props, { classNames: [`xui-app-root`], children: jsx(BreakpointProvider, { children: children }) })));
+});export{AppRoot as default};//# sourceMappingURL=index.mjs.map

package/AppRoot/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\nimport React, { useEffect, useMemo } from 'react';\nimport { TagComponentType } from '../Tag/types';\nimport { createTheme, ThemeProvider, ThemeProviderProps, themeRootClass } from '../theme';\nimport { BreakpointProvider } from '../breakpoint';\nimport useScrollbar from '../hooks/useScrollbar';\nimport { css } from '../css';\nimport { darkColorPallete, lightColorPallete } from '../theme/ThemeDefaultOptions';\n\ncreateTheme(\"light\", { colors: lightColorPallete })\ncreateTheme(\"dark\", { colors: darkColorPallete })\n\nexport type AppRootProps<T extends TagComponentType = \"div\"> = ThemeProviderProps<T> & {\n   noScrollbarCss?: boolean;\n}\n\nconst AppRoot = React.forwardRef(<T extends TagComponentType = \"div\">({ children, noScrollbarCss, theme, ...props }: AppRootProps<T>, ref: React.Ref<any>) => {\n   noScrollbarCss ??= false\n\n   useMemo(() => {\n      if (noScrollbarCss) return;\n      useScrollbar({\n         themeName: theme,\n         root_cls: themeRootClass(theme)\n      })\n   }, [noScrollbarCss, theme])\n\n   useMemo(() => {\n      css({\n         \"@global\": {\n            \"*\": {\n               m: 0,\n               p: 0,\n               outline: \"none\",\n               boxSizing: \"border-box\",\n               verticalAlign: \"baseline\",\n            },\n            \"html, body\": {\n               minHeight: \"100%\",\n               \"-webkit-font-smoothing\": \"antialiased\"\n            } as any,\n            \"img, picture, video, canvas, svg\": {\n               maxWidth: \"100%\",\n               display: \"block\"\n            },\n            \"input, button, textarea, select\": {\n               font: \"inherit\"\n            },\n            \"table\": {\n               borderCollapse: \"collapse\",\n               borderSpacing: 0\n            },\n            \"ol, ul\": {\n               listStyle: \"none\"\n            },\n            \"a\": {\n               display: \"inline-block\"\n            },\n            \"p, h1, h2, h3, h4, h5, h6\": {\n               overflowWrap: \"break-word\",\n            }\n         }\n      })\n   }, [])\n\n   useEffect(() => {\n      // move oncss style tags to head\n      if (typeof window === 'undefined') return;\n      const head = document.getElementsByTagName('head')[0];\n      const styles = Array.from(document.querySelectorAll('body style[data-oncss]'));\n      styles.forEach((style) => {\n         head.appendChild(style);\n      });\n   }, [])\n\n   return (\n      <ThemeProvider\n         ref={ref}\n         theme={theme}\n         {...props}\n         classNames={[`xui-app-root`]}\n      >\n         <BreakpointProvider>\n            {children}\n         </BreakpointProvider>\n      </ThemeProvider>\n   )\n})\n\nexport default AppRoot\n\n"],"names":["React","_jsx"],"mappings":"4fASA,WAAW,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,iBAAiB,EAAE,CAAC;AACnD,WAAW,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,gBAAgB,EAAE,CAAC;AAMjD,MAAM,OAAO,GAAGA,cAAK,CAAC,UAAU,CAAC,CAAqC,EAA8D,EAAE,GAAmB,KAAI;QAAvF,EAAE,QAAQ,EAAE,cAAc,EAAE,KAAK,OAA6B,EAAxB,KAAK,GAAA,MAAA,CAAA,EAAA,EAA3C,CAAA,UAAA,EAAA,gBAAA,EAAA,OAAA,CAA6C,CAAF;IAC9G,cAAc,KAAA,IAAA,IAAd,cAAc,KAAA,MAAA,GAAd,cAAc,IAAd,cAAc,GAAK,KAAK,CAAA;IAExB,OAAO,CAAC,MAAK;AACV,QAAA,IAAI,cAAc;YAAE;AACpB,QAAA,YAAY,CAAC;AACV,YAAA,SAAS,EAAE,KAAK;AAChB,YAAA,QAAQ,EAAE,cAAc,CAAC,KAAK;AAChC,SAAA,CAAC;AACL,IAAA,CAAC,EAAE,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC;IAE3B,OAAO,CAAC,MAAK;AACV,QAAA,GAAG,CAAC;AACD,YAAA,SAAS,EAAE;AACR,gBAAA,GAAG,EAAE;AACF,oBAAA,CAAC,EAAE,CAAC;AACJ,oBAAA,CAAC,EAAE,CAAC;AACJ,oBAAA,OAAO,EAAE,MAAM;AACf,oBAAA,SAAS,EAAE,YAAY;AACvB,oBAAA,aAAa,EAAE,UAAU;AAC3B,iBAAA;AACD,gBAAA,YAAY,EAAE;AACX,oBAAA,SAAS,EAAE,MAAM;AACjB,oBAAA,wBAAwB,EAAE;AACrB,iBAAA;AACR,gBAAA,kCAAkC,EAAE;AACjC,oBAAA,QAAQ,EAAE,MAAM;AAChB,oBAAA,OAAO,EAAE;AACX,iBAAA;AACD,gBAAA,iCAAiC,EAAE;AAChC,oBAAA,IAAI,EAAE;AACR,iBAAA;AACD,gBAAA,OAAO,EAAE;AACN,oBAAA,cAAc,EAAE,UAAU;AAC1B,oBAAA,aAAa,EAAE;AACjB,iBAAA;AACD,gBAAA,QAAQ,EAAE;AACP,oBAAA,SAAS,EAAE;AACb,iBAAA;AACD,gBAAA,GAAG,EAAE;AACF,oBAAA,OAAO,EAAE;AACX,iBAAA;AACD,gBAAA,2BAA2B,EAAE;AAC1B,oBAAA,YAAY,EAAE,YAAY;AAC5B;AACH;AACH,SAAA,CAAC;IACL,CAAC,EAAE,EAAE,CAAC;IAEN,SAAS,CAAC,MAAK;;QAEZ,IAAI,OAAO,MAAM,KAAK,WAAW;YAAE;QACnC,MAAM,IAAI,GAAG,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AACrD,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC;AAC9E,QAAA,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;AACtB,YAAA,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC1B,QAAA,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC;IAEN,QACGC,GAAA,CAAC,aAAa,EAAA,MAAA,CAAA,MAAA,CAAA,EACX,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EAAA,EACR,KAAK,EAAA,EACT,UAAU,EAAE,CAAC,CAAA,YAAA,CAAc,CAAC,EAAA,QAAA,EAE5BA,GAAA,CAAC,kBAAkB,EAAA,EAAA,QAAA,EACf,QAAQ,EAAA,CACS,EAAA,CAAA,CACR;AAEtB,CAAC"}

package/Tag/index.js

@@ -1,6 +1,15 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),React=require('react'),useTagProps=require('./useTagProps.js');function _interopNamespaceDefault(e){var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var React__namespace=/*#__PURE__*/_interopNamespaceDefault(React);const Tag = React__namespace.forwardRef((_a, ref) => {
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),React=require('react'),useTagProps=require('./useTagProps.js'),isWindow=require('../isWindow.js');function _interopNamespaceDefault(e){var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}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 = useTagProps.default(rest);
+    const { props, style } = useTagProps.default(rest);
     props.ref = ref;
-    return React__namespace.createElement(component || "div", props, children);
+    const ele = React__namespace.createElement(component || "div", props, children);
+    if (!isWindow.default()) {
+        const isCache = style.cache;
+        const styletag = React__namespace.createElement("style", {
+            dangerouslySetInnerHTML: { __html: style.css },
+            'data-oncss': style.classname
+        });
+        return React__namespace.createElement(React__namespace.Fragment, null, [isCache ? null : styletag, ele]);
+    }
+    return ele;
 });exports.default=Tag;//# sourceMappingURL=index.js.map

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';\n\nconst Tag = React.forwardRef(<T extends TagComponentType = 'div'>({ component, children, ...rest }: TagPropsRoot<T>, ref: React.Ref<any>) => {\n    const props: any = useTagProps(rest)\n    props.ref = ref\n    return React.createElement(component || \"div\", props, children)\n})\n\nexport default Tag"],"names":["React","__rest","useTagProps"],"mappings":"ggBAIA,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,KAAK,GAAQC,mBAAW,CAAC,IAAI,CAAC;AACpC,IAAA,KAAK,CAAC,GAAG,GAAG,GAAG;AACf,IAAA,OAAOF,gBAAK,CAAC,aAAa,CAAC,SAAS,IAAI,KAAK,EAAE,KAAK,EAAE,QAAQ,CAAC;AACnE,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 isWindow from '../isWindow';\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 (!isWindow()) {\n        const isCache = style.cache\n        const styletag = React.createElement(\"style\", {\n            dangerouslySetInnerHTML: { __html: style.css },\n            'data-oncss': style.classname\n        })\n        return React.createElement(React.Fragment, null, [isCache ? null : styletag, ele])\n    }\n    return ele\n})\n\nexport default Tag"],"names":["React","__rest","useTagProps","isWindow"],"mappings":"miBAKA,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,GAAQC,mBAAW,CAAC,IAAI,CAAC;AAC/C,IAAA,KAAK,CAAC,GAAG,GAAG,GAAG;AACf,IAAA,MAAM,GAAG,GAAGF,gBAAK,CAAC,aAAa,CAAC,SAAS,IAAI,KAAK,EAAE,KAAK,EAAE,QAAQ,CAAC;AACpE,IAAA,IAAI,CAACG,gBAAQ,EAAE,EAAE;AACb,QAAA,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK;AAC3B,QAAA,MAAM,QAAQ,GAAGH,gBAAK,CAAC,aAAa,CAAC,OAAO,EAAE;AAC1C,YAAA,uBAAuB,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG,EAAE;YAC9C,YAAY,EAAE,KAAK,CAAC;AACvB,SAAA,CAAC;QACF,OAAOA,gBAAK,CAAC,aAAa,CAACA,gBAAK,CAAC,QAAQ,EAAE,IAAI,EAAE,CAAC,OAAO,GAAG,IAAI,GAAG,QAAQ,EAAE,GAAG,CAAC,CAAC;IACtF;AACA,IAAA,OAAO,GAAG;AACd,CAAC"}

package/Tag/index.mjs

@@ -1,6 +1,15 @@
-import {__rest}from'tslib';import*as React from'react';import useTagProps from'./useTagProps.mjs';const Tag = React.forwardRef((_a, ref) => {
+import {__rest}from'tslib';import*as React from'react';import useTagProps from'./useTagProps.mjs';import isWindow from'../isWindow.mjs';const Tag = React.forwardRef((_a, ref) => {
     var { component, children } = _a, rest = __rest(_a, ["component", "children"]);
-    const props = useTagProps(rest);
+    const { props, style } = useTagProps(rest);
     props.ref = ref;
-    return React.createElement(component || "div", props, children);
+    const ele = React.createElement(component || "div", props, children);
+    if (!isWindow()) {
+        const isCache = style.cache;
+        const styletag = React.createElement("style", {
+            dangerouslySetInnerHTML: { __html: style.css },
+            'data-oncss': style.classname
+        });
+        return React.createElement(React.Fragment, null, [isCache ? null : styletag, ele]);
+    }
+    return ele;
 });export{Tag as default};//# sourceMappingURL=index.mjs.map

package/Tag/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Tag/index.tsx"],"sourcesContent":["import * as React from 'react'\nimport { TagComponentType, TagPropsRoot } from './types';\nimport useTagProps from './useTagProps';\n\nconst Tag = React.forwardRef(<T extends TagComponentType = 'div'>({ component, children, ...rest }: TagPropsRoot<T>, ref: React.Ref<any>) => {\n    const props: any = useTagProps(rest)\n    props.ref = ref\n    return React.createElement(component || \"div\", props, children)\n})\n\nexport default Tag"],"names":[],"mappings":"kGAIA,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,KAAK,GAAQ,WAAW,CAAC,IAAI,CAAC;AACpC,IAAA,KAAK,CAAC,GAAG,GAAG,GAAG;AACf,IAAA,OAAO,KAAK,CAAC,aAAa,CAAC,SAAS,IAAI,KAAK,EAAE,KAAK,EAAE,QAAQ,CAAC;AACnE,CAAC"}
+{"version":3,"file":"index.mjs","sources":["../../src/Tag/index.tsx"],"sourcesContent":["import * as React from 'react'\nimport { TagComponentType, TagPropsRoot } from './types';\nimport useTagProps from './useTagProps';\nimport isWindow from '../isWindow';\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 (!isWindow()) {\n        const isCache = style.cache\n        const styletag = React.createElement(\"style\", {\n            dangerouslySetInnerHTML: { __html: style.css },\n            'data-oncss': style.classname\n        })\n        return React.createElement(React.Fragment, null, [isCache ? null : styletag, ele])\n    }\n    return ele\n})\n\nexport default Tag"],"names":[],"mappings":"wIAKA,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,CAAC,QAAQ,EAAE,EAAE;AACb,QAAA,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK;AAC3B,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,aAAa,CAAC,OAAO,EAAE;AAC1C,YAAA,uBAAuB,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG,EAAE;YAC9C,YAAY,EAAE,KAAK,CAAC;AACvB,SAAA,CAAC;QACF,OAAO,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,EAAE,IAAI,EAAE,CAAC,OAAO,GAAG,IAAI,GAAG,QAAQ,EAAE,GAAG,CAAC,CAAC;IACtF;AACA,IAAA,OAAO,GAAG;AACd,CAAC"}

package/Tag/useTagProps.d.ts

@@ -1,5 +1,11 @@
 import { TagComponentType, TagPropsRoot, TagProps } from './types.js';
+import { CSSFactoryType } from 'oncss';
 
-declare const useTagProps: <T extends TagComponentType = "div">({ sxr, sx, baseClass, classNames: clses, hover, ...props }: TagPropsRoot<T>) => TagProps<T>;
+type useTagPropsReturn<T extends TagComponentType = "div"> = {
+    props: TagProps<T>;
+    style: CSSFactoryType;
+};
+declare const useTagProps: <T extends TagComponentType = "div">({ sxr, sx, baseClass, classNames: clses, hover, ...props }: TagPropsRoot<T>) => useTagPropsReturn<T>;
 
 export { useTagProps as default };
+export type { useTagPropsReturn };

package/Tag/useTagProps.js

@@ -1,10 +1,11 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),cssPropList=require('./cssPropList.js'),index=require('../css/index.js'),prettyClass=require('pretty-class');const useTagProps = (_a) => {
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),cssPropList=require('./cssPropList.js'),index=require('../css/index.js'),prettyClass=require('pretty-class'),isWindow=require('../isWindow.js');const useTagProps = (_a) => {
     var { sxr, sx, baseClass, classNames: clses, hover } = _a, props = tslib.__rest(_a, ["sxr", "sx", "baseClass", "classNames", "hover"]);
     let _css = Object.assign(Object.assign(Object.assign({}, sxr), sx), props);
     if (hover)
         _css['&:hover'] = hover;
     const style = index.css(_css, {
-        skipProps: (prop, _val, dept) => dept === 1 && !cssPropList.default[prop]
+        skipProps: (prop, _val, dept) => dept === 1 && !cssPropList.default[prop],
+        injectStyle: isWindow.default(),
     });
     let skipProps = style.skiped[style.classname] || [];
     const _props = {};
@@ -17,5 +18,5 @@
         props.className,
         ...(clses || []),
     ]);
-    return _props;
+    return { props: _props, style };
 };exports.default=useTagProps;//# sourceMappingURL=useTagProps.js.map

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';\n\nconst useTagProps = <T extends TagComponentType = \"div\">({ sxr, sx, baseClass, classNames: clses, hover, ...props }: TagPropsRoot<T>): TagProps<T> => {\n   let _css: any = { ...sxr, ...sx, ...props }\n   if (hover) _css['&:hover'] = hover\n   const style = css(_css, {\n      skipProps: (prop, _val, dept): any => dept === 1 && !cssPropList[prop]\n   })\n\n   let skipProps = style.skiped[style.classname as any] || []\n   const _props: any = {};\n   for (let prop of skipProps) {\n      _props[prop] = (props as any)[prop]\n   }\n   _props.className = classNames([\n      baseClass ? \"xui-\" + baseClass : \"\",\n      style.classname,\n      props.className,\n      ...(clses as any || []),\n   ])\n   return _props\n}\n\n\nexport default useTagProps"],"names":["__rest","css","cssPropList","classNames"],"mappings":"8MAKA,MAAM,WAAW,GAAG,CAAqC,EAA2E,KAAiB;AAA5F,IAAA,IAAA,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAA,GAAA,EAA6B,EAAxB,KAAK,GAAAA,YAAA,CAAA,EAAA,EAAxD,iDAA0D,CAAF;IAC9G,IAAI,IAAI,iDAAa,GAAG,CAAA,EAAK,EAAE,CAAA,EAAK,KAAK,CAAE;AAC3C,IAAA,IAAI,KAAK;AAAE,QAAA,IAAI,CAAC,SAAS,CAAC,GAAG,KAAK;AAClC,IAAA,MAAM,KAAK,GAAGC,SAAG,CAAC,IAAI,EAAE;AACrB,QAAA,SAAS,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,KAAU,IAAI,KAAK,CAAC,IAAI,CAACC,mBAAW,CAAC,IAAI;AACvE,KAAA,CAAC;AAEF,IAAA,IAAI,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,SAAgB,CAAC,IAAI,EAAE;IAC1D,MAAM,MAAM,GAAQ,EAAE;AACtB,IAAA,KAAK,IAAI,IAAI,IAAI,SAAS,EAAE;QACzB,MAAM,CAAC,IAAI,CAAC,GAAI,KAAa,CAAC,IAAI,CAAC;IACtC;AACA,IAAA,MAAM,CAAC,SAAS,GAAGC,sBAAU,CAAC;QAC3B,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,EAAE;AACnC,QAAA,KAAK,CAAC,SAAS;AACf,QAAA,KAAK,CAAC,SAAS;AACf,QAAA,IAAI,KAAY,IAAI,EAAE,CAAC;AACzB,KAAA,CAAC;AACF,IAAA,OAAO,MAAM;AAChB"}
+{"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 isWindow from '../isWindow';\n\nexport type useTagPropsReturn<T extends TagComponentType = \"div\"> = {\n   props: TagProps<T>,\n   style: CSSFactoryType\n}\n\nconst useTagProps = <T extends TagComponentType = \"div\">({ sxr, sx, baseClass, classNames: clses, hover, ...props }: TagPropsRoot<T>): useTagPropsReturn<T> => {\n   let _css: any = { ...sxr, ...sx, ...props }\n   if (hover) _css['&:hover'] = hover\n   const style = css(_css, {\n      skipProps: (prop, _val, dept): any => dept === 1 && !cssPropList[prop],\n      injectStyle: isWindow(),\n   })\n\n   let skipProps = style.skiped[style.classname as any] || []\n   const _props: any = {};\n   for (let prop of skipProps) {\n      _props[prop] = (props as any)[prop]\n   }\n   _props.className = classNames([\n      baseClass ? \"xui-\" + baseClass : \"\",\n      style.classname,\n      props.className,\n      ...(clses as any || []),\n   ])\n   return { props: _props, style };\n}\n\n\nexport default useTagProps"],"names":["__rest","css","cssPropList","isWindow","classNames"],"mappings":"iPAYA,MAAM,WAAW,GAAG,CAAqC,EAA2E,KAA0B;AAArG,IAAA,IAAA,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAA,GAAA,EAA6B,EAAxB,KAAK,GAAAA,YAAA,CAAA,EAAA,EAAxD,iDAA0D,CAAF;IAC9G,IAAI,IAAI,iDAAa,GAAG,CAAA,EAAK,EAAE,CAAA,EAAK,KAAK,CAAE;AAC3C,IAAA,IAAI,KAAK;AAAE,QAAA,IAAI,CAAC,SAAS,CAAC,GAAG,KAAK;AAClC,IAAA,MAAM,KAAK,GAAGC,SAAG,CAAC,IAAI,EAAE;AACrB,QAAA,SAAS,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,KAAU,IAAI,KAAK,CAAC,IAAI,CAACC,mBAAW,CAAC,IAAI,CAAC;QACtE,WAAW,EAAEC,gBAAQ,EAAE;AACzB,KAAA,CAAC;AAEF,IAAA,IAAI,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,SAAgB,CAAC,IAAI,EAAE;IAC1D,MAAM,MAAM,GAAQ,EAAE;AACtB,IAAA,KAAK,IAAI,IAAI,IAAI,SAAS,EAAE;QACzB,MAAM,CAAC,IAAI,CAAC,GAAI,KAAa,CAAC,IAAI,CAAC;IACtC;AACA,IAAA,MAAM,CAAC,SAAS,GAAGC,sBAAU,CAAC;QAC3B,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,EAAE;AACnC,QAAA,KAAK,CAAC,SAAS;AACf,QAAA,KAAK,CAAC,SAAS;AACf,QAAA,IAAI,KAAY,IAAI,EAAE,CAAC;AACzB,KAAA,CAAC;AACF,IAAA,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE;AAClC"}

package/Tag/useTagProps.mjs

@@ -1,10 +1,11 @@
-import {__rest}from'tslib';import CSS_PROP_LIST from'./cssPropList.mjs';import {css}from'../css/index.mjs';import {classNames}from'pretty-class';const useTagProps = (_a) => {
+import {__rest}from'tslib';import CSS_PROP_LIST from'./cssPropList.mjs';import {css}from'../css/index.mjs';import {classNames}from'pretty-class';import isWindow from'../isWindow.mjs';const useTagProps = (_a) => {
     var { sxr, sx, baseClass, classNames: clses, hover } = _a, props = __rest(_a, ["sxr", "sx", "baseClass", "classNames", "hover"]);
     let _css = Object.assign(Object.assign(Object.assign({}, sxr), sx), props);
     if (hover)
         _css['&:hover'] = hover;
     const style = css(_css, {
-        skipProps: (prop, _val, dept) => dept === 1 && !CSS_PROP_LIST[prop]
+        skipProps: (prop, _val, dept) => dept === 1 && !CSS_PROP_LIST[prop],
+        injectStyle: isWindow(),
     });
     let skipProps = style.skiped[style.classname] || [];
     const _props = {};
@@ -17,5 +18,5 @@ import {__rest}from'tslib';import CSS_PROP_LIST from'./cssPropList.mjs';import {
         props.className,
         ...(clses || []),
     ]);
-    return _props;
+    return { props: _props, style };
 };export{useTagProps as default};//# sourceMappingURL=useTagProps.mjs.map

package/Tag/useTagProps.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useTagProps.mjs","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';\n\nconst useTagProps = <T extends TagComponentType = \"div\">({ sxr, sx, baseClass, classNames: clses, hover, ...props }: TagPropsRoot<T>): TagProps<T> => {\n   let _css: any = { ...sxr, ...sx, ...props }\n   if (hover) _css['&:hover'] = hover\n   const style = css(_css, {\n      skipProps: (prop, _val, dept): any => dept === 1 && !cssPropList[prop]\n   })\n\n   let skipProps = style.skiped[style.classname as any] || []\n   const _props: any = {};\n   for (let prop of skipProps) {\n      _props[prop] = (props as any)[prop]\n   }\n   _props.className = classNames([\n      baseClass ? \"xui-\" + baseClass : \"\",\n      style.classname,\n      props.className,\n      ...(clses as any || []),\n   ])\n   return _props\n}\n\n\nexport default useTagProps"],"names":["cssPropList"],"mappings":"iJAKA,MAAM,WAAW,GAAG,CAAqC,EAA2E,KAAiB;AAA5F,IAAA,IAAA,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAA,GAAA,EAA6B,EAAxB,KAAK,GAAA,MAAA,CAAA,EAAA,EAAxD,iDAA0D,CAAF;IAC9G,IAAI,IAAI,iDAAa,GAAG,CAAA,EAAK,EAAE,CAAA,EAAK,KAAK,CAAE;AAC3C,IAAA,IAAI,KAAK;AAAE,QAAA,IAAI,CAAC,SAAS,CAAC,GAAG,KAAK;AAClC,IAAA,MAAM,KAAK,GAAG,GAAG,CAAC,IAAI,EAAE;AACrB,QAAA,SAAS,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,KAAU,IAAI,KAAK,CAAC,IAAI,CAACA,aAAW,CAAC,IAAI;AACvE,KAAA,CAAC;AAEF,IAAA,IAAI,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,SAAgB,CAAC,IAAI,EAAE;IAC1D,MAAM,MAAM,GAAQ,EAAE;AACtB,IAAA,KAAK,IAAI,IAAI,IAAI,SAAS,EAAE;QACzB,MAAM,CAAC,IAAI,CAAC,GAAI,KAAa,CAAC,IAAI,CAAC;IACtC;AACA,IAAA,MAAM,CAAC,SAAS,GAAG,UAAU,CAAC;QAC3B,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,EAAE;AACnC,QAAA,KAAK,CAAC,SAAS;AACf,QAAA,KAAK,CAAC,SAAS;AACf,QAAA,IAAI,KAAY,IAAI,EAAE,CAAC;AACzB,KAAA,CAAC;AACF,IAAA,OAAO,MAAM;AAChB"}
+{"version":3,"file":"useTagProps.mjs","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 isWindow from '../isWindow';\n\nexport type useTagPropsReturn<T extends TagComponentType = \"div\"> = {\n   props: TagProps<T>,\n   style: CSSFactoryType\n}\n\nconst useTagProps = <T extends TagComponentType = \"div\">({ sxr, sx, baseClass, classNames: clses, hover, ...props }: TagPropsRoot<T>): useTagPropsReturn<T> => {\n   let _css: any = { ...sxr, ...sx, ...props }\n   if (hover) _css['&:hover'] = hover\n   const style = css(_css, {\n      skipProps: (prop, _val, dept): any => dept === 1 && !cssPropList[prop],\n      injectStyle: isWindow(),\n   })\n\n   let skipProps = style.skiped[style.classname as any] || []\n   const _props: any = {};\n   for (let prop of skipProps) {\n      _props[prop] = (props as any)[prop]\n   }\n   _props.className = classNames([\n      baseClass ? \"xui-\" + baseClass : \"\",\n      style.classname,\n      props.className,\n      ...(clses as any || []),\n   ])\n   return { props: _props, style };\n}\n\n\nexport default useTagProps"],"names":["cssPropList"],"mappings":"uLAYA,MAAM,WAAW,GAAG,CAAqC,EAA2E,KAA0B;AAArG,IAAA,IAAA,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAA,GAAA,EAA6B,EAAxB,KAAK,GAAA,MAAA,CAAA,EAAA,EAAxD,iDAA0D,CAAF;IAC9G,IAAI,IAAI,iDAAa,GAAG,CAAA,EAAK,EAAE,CAAA,EAAK,KAAK,CAAE;AAC3C,IAAA,IAAI,KAAK;AAAE,QAAA,IAAI,CAAC,SAAS,CAAC,GAAG,KAAK;AAClC,IAAA,MAAM,KAAK,GAAG,GAAG,CAAC,IAAI,EAAE;AACrB,QAAA,SAAS,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,KAAU,IAAI,KAAK,CAAC,IAAI,CAACA,aAAW,CAAC,IAAI,CAAC;QACtE,WAAW,EAAE,QAAQ,EAAE;AACzB,KAAA,CAAC;AAEF,IAAA,IAAI,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,SAAgB,CAAC,IAAI,EAAE;IAC1D,MAAM,MAAM,GAAQ,EAAE;AACtB,IAAA,KAAK,IAAI,IAAI,IAAI,SAAS,EAAE;QACzB,MAAM,CAAC,IAAI,CAAC,GAAI,KAAa,CAAC,IAAI,CAAC;IACtC;AACA,IAAA,MAAM,CAAC,SAAS,GAAG,UAAU,CAAC;QAC3B,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,EAAE;AACnC,QAAA,KAAK,CAAC,SAAS;AACf,QAAA,KAAK,CAAC,SAAS;AACf,QAAA,IAAI,KAAY,IAAI,EAAE,CAAC;AACzB,KAAA,CAAC;AACF,IAAA,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE;AAClC"}

package/Transition/index.d.ts

@@ -1,5 +1,5 @@
 import React__default, { ReactElement } from 'react';
-import { animationEases } from '../useAnimation.js';
+import { animationEases } from '../hooks/useAnimation.js';
 import { CSSProps } from '../css/types.js';
 import * as variants from './variants.js';
 

package/Transition/index.js

@@ -1,4 +1,4 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),index$1=require('../Tag/index.js'),useAnimation=require('../useAnimation.js'),index=require('../css/index.js'),oncss=require('oncss'),variants=require('./variants.js');const Transition = (_a) => {
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),index$1=require('../Tag/index.js'),useAnimation=require('../hooks/useAnimation.js'),index=require('../css/index.js'),oncss=require('oncss'),variants=require('./variants.js');const Transition = (_a) => {
     var { children, open } = _a, props = tslib.__rest(_a, ["children", "open"]);
     let { disableInitialTransition, variant, duration, delay, ease, easing, onOpen, onOpened, onClose, onClosed, onState } = props;
     let _ease = ease || useAnimation.animationEases[easing] || useAnimation.animationEases.easeBounceOut;

package/Transition/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Transition/index.tsx"],"sourcesContent":["import React, { ReactElement, cloneElement, Children, useState, useEffect, useId } from 'react';\nimport Tag from '../Tag';\nimport { animationEases } from '../useAnimation';\nimport { css } from '../css';\nimport { formatCSSProp } from 'oncss';\nimport { CSSProps } from '../css/types';\nimport * as variants from './variants'\nexport type TransitionVariantTypes = keyof typeof variants\n\nexport type TransitionElementProps = {\n    height: number;\n    width: number;\n    rect: DOMRect | null\n}\n\nexport type TransitionState = \"open\" | \"opened\" | \"close\" | \"closed\"\n\nexport type TransitionProps = {\n    children: ReactElement;\n    open: boolean;\n    variant: {\n        from: CSSProps;\n        to: CSSProps;\n    } | TransitionVariantTypes;\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 Transition = ({ children, open, ...props }: TransitionProps) => {\n    let { disableInitialTransition, variant, duration, delay, ease, easing, onOpen, onOpened, onClose, onClosed, onState } = props as TransitionProps\n    let _ease = ease || (animationEases as any)[easing as any] || animationEases.easeBounceOut\n    disableInitialTransition ??= false\n    duration ??= 400\n    variant ??= \"fade\"\n\n    const id = useId().replace(/:/g, \"\")\n    const [rendered, setRendered] = useState(false)\n    const [initial, setInitial] = useState(false)\n    const [transitionState, setTransitionState] = useState<TransitionState>(open ? (disableInitialTransition ? \"opened\" : \"open\") : \"closed\")\n    const [element, setElement] = useState<TransitionElementProps>({\n        height: 0,\n        width: 0,\n        rect: null\n    });\n\n    if (typeof variant === 'string') {\n        variant = (variants as any)[variant](element)\n    }\n\n    let from = (variant as any).from\n    let to = (variant as any).to\n\n    const [_css, setCss] = useState(open ? to : from)\n\n    useEffect(() => {\n        const ele: HTMLElement = document.querySelector(`.trans-${id}`) as any\n        if (ele) {\n            setRendered(true)\n            setElement({\n                height: ele.clientHeight,\n                width: ele.clientWidth,\n                rect: ele.getBoundingClientRect()\n            })\n            if (!disableInitialTransition && open) {\n                setCss(from)\n            }\n        }\n    }, [])\n\n    useEffect(() => {\n        const ele: HTMLElement = document.querySelector(`.trans-${id}`) as any\n        if (rendered && ele) {\n            let stimer: any = null\n            let etimer: any = null\n            ele.ontransitionstart = () => {\n                clearTimeout(stimer)\n                stimer = setTimeout(() => {\n                    const isOpen = Array.from(ele.classList).includes(\"trans-open\");\n                    (onOpen && isOpen) && onOpen();\n                    (onClose && !isOpen) && onClose()\n                    onState && onState(isOpen ? \"open\" : \"close\")\n                    setTransitionState(isOpen ? \"open\" : \"close\")\n                }, 1)\n            }\n            ele.ontransitionend = () => {\n                clearTimeout(etimer)\n                etimer = setTimeout(() => {\n                    const isOpen = Array.from(ele.classList).includes(\"trans-open\");\n                    (onOpened && isOpen) && onOpened();\n                    (onClosed && !isOpen) && onClosed();\n                    onState && onState(isOpen ? \"opened\" : \"closed\")\n                    setTransitionState(isOpen ? \"opened\" : \"closed\")\n                }, 1)\n            }\n        }\n    }, [rendered])\n\n    useEffect(() => {\n        if (rendered) {\n            if (!initial) {\n                setInitial(true)\n                setTimeout(() => {\n                    setCss(open ? to : from)\n                }, 50);\n            } else {\n                setCss(open ? to : from)\n            }\n        }\n    }, [rendered, open, JSON.stringify(from), JSON.stringify(to)])\n\n    let _: any = {}\n    if (rendered) {\n        let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`\n        _ = {\n            ..._css,\n            transition: Object.keys(_css || {}).map(k => formatCSSProp(k)).join(trans + \", \") + trans,\n        }\n    }\n\n    const cls = css(_)\n    if (!children || Array.isArray(children)) throw new Error(\"Invalid children in Transition\")\n    const first: any = Children.toArray(children).shift();\n    let classname = `${cls.classname} trans-${id} trans-${(open ? \"open\" : \"close\")} trans-state-${transitionState}`\n    const child = cloneElement(first, { classNames: [classname] })\n    if (rendered) return child\n    if (!rendered && disableInitialTransition && open) return child\n\n    return (\n        <Tag\n            height={0}\n            overflow=\"hidden\"\n        >\n            {child}\n        </Tag>\n    )\n}\n\n\nexport default Transition"],"names":["__rest","animationEases","useId","useState","useEffect","formatCSSProp","css","Children","cloneElement","_jsx","Tag"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/Transition/index.tsx"],"sourcesContent":["import React, { ReactElement, cloneElement, Children, useState, useEffect, useId } from 'react';\nimport Tag from '../Tag';\nimport { animationEases } from '../hooks/useAnimation';\nimport { css } from '../css';\nimport { formatCSSProp } from 'oncss';\nimport { CSSProps } from '../css/types';\nimport * as variants from './variants'\nexport type TransitionVariantTypes = keyof typeof variants\n\nexport type TransitionElementProps = {\n    height: number;\n    width: number;\n    rect: DOMRect | null\n}\n\nexport type TransitionState = \"open\" | \"opened\" | \"close\" | \"closed\"\n\nexport type TransitionProps = {\n    children: ReactElement;\n    open: boolean;\n    variant: {\n        from: CSSProps;\n        to: CSSProps;\n    } | TransitionVariantTypes;\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 Transition = ({ children, open, ...props }: TransitionProps) => {\n    let { disableInitialTransition, variant, duration, delay, ease, easing, onOpen, onOpened, onClose, onClosed, onState } = props as TransitionProps\n    let _ease = ease || (animationEases as any)[easing as any] || animationEases.easeBounceOut\n    disableInitialTransition ??= false\n    duration ??= 400\n    variant ??= \"fade\"\n\n    const id = useId().replace(/:/g, \"\")\n    const [rendered, setRendered] = useState(false)\n    const [initial, setInitial] = useState(false)\n    const [transitionState, setTransitionState] = useState<TransitionState>(open ? (disableInitialTransition ? \"opened\" : \"open\") : \"closed\")\n    const [element, setElement] = useState<TransitionElementProps>({\n        height: 0,\n        width: 0,\n        rect: null\n    });\n\n    if (typeof variant === 'string') {\n        variant = (variants as any)[variant](element)\n    }\n\n    let from = (variant as any).from\n    let to = (variant as any).to\n\n    const [_css, setCss] = useState(open ? to : from)\n\n    useEffect(() => {\n        const ele: HTMLElement = document.querySelector(`.trans-${id}`) as any\n        if (ele) {\n            setRendered(true)\n            setElement({\n                height: ele.clientHeight,\n                width: ele.clientWidth,\n                rect: ele.getBoundingClientRect()\n            })\n            if (!disableInitialTransition && open) {\n                setCss(from)\n            }\n        }\n    }, [])\n\n    useEffect(() => {\n        const ele: HTMLElement = document.querySelector(`.trans-${id}`) as any\n        if (rendered && ele) {\n            let stimer: any = null\n            let etimer: any = null\n            ele.ontransitionstart = () => {\n                clearTimeout(stimer)\n                stimer = setTimeout(() => {\n                    const isOpen = Array.from(ele.classList).includes(\"trans-open\");\n                    (onOpen && isOpen) && onOpen();\n                    (onClose && !isOpen) && onClose()\n                    onState && onState(isOpen ? \"open\" : \"close\")\n                    setTransitionState(isOpen ? \"open\" : \"close\")\n                }, 1)\n            }\n            ele.ontransitionend = () => {\n                clearTimeout(etimer)\n                etimer = setTimeout(() => {\n                    const isOpen = Array.from(ele.classList).includes(\"trans-open\");\n                    (onOpened && isOpen) && onOpened();\n                    (onClosed && !isOpen) && onClosed();\n                    onState && onState(isOpen ? \"opened\" : \"closed\")\n                    setTransitionState(isOpen ? \"opened\" : \"closed\")\n                }, 1)\n            }\n        }\n    }, [rendered])\n\n    useEffect(() => {\n        if (rendered) {\n            if (!initial) {\n                setInitial(true)\n                setTimeout(() => {\n                    setCss(open ? to : from)\n                }, 50);\n            } else {\n                setCss(open ? to : from)\n            }\n        }\n    }, [rendered, open, JSON.stringify(from), JSON.stringify(to)])\n\n    let _: any = {}\n    if (rendered) {\n        let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`\n        _ = {\n            ..._css,\n            transition: Object.keys(_css || {}).map(k => formatCSSProp(k)).join(trans + \", \") + trans,\n        }\n    }\n\n    const cls = css(_)\n    if (!children || Array.isArray(children)) throw new Error(\"Invalid children in Transition\")\n    const first: any = Children.toArray(children).shift();\n    let classname = `${cls.classname} trans-${id} trans-${(open ? \"open\" : \"close\")} trans-state-${transitionState}`\n    const child = cloneElement(first, { classNames: [classname] })\n    if (rendered) return child\n    if (!rendered && disableInitialTransition && open) return child\n\n    return (\n        <Tag\n            height={0}\n            overflow=\"hidden\"\n        >\n            {child}\n        </Tag>\n    )\n}\n\n\nexport default Transition"],"names":["__rest","animationEases","useId","useState","useEffect","formatCSSProp","css","Children","cloneElement","_jsx","Tag"],"mappings":"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"}

package/Transition/index.mjs

@@ -1,4 +1,4 @@
-import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import {useId,useState,useEffect,Children,cloneElement}from'react';import Tag from'../Tag/index.mjs';import {animationEases}from'../useAnimation.mjs';import {css}from'../css/index.mjs';import {formatCSSProp}from'oncss';import*as variants from'./variants.mjs';const Transition = (_a) => {
+import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import {useId,useState,useEffect,Children,cloneElement}from'react';import Tag from'../Tag/index.mjs';import {animationEases}from'../hooks/useAnimation.mjs';import {css}from'../css/index.mjs';import {formatCSSProp}from'oncss';import*as variants from'./variants.mjs';const Transition = (_a) => {
     var { children, open } = _a, props = __rest(_a, ["children", "open"]);
     let { disableInitialTransition, variant, duration, delay, ease, easing, onOpen, onOpened, onClose, onClosed, onState } = props;
     let _ease = ease || animationEases[easing] || animationEases.easeBounceOut;

package/Transition/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Transition/index.tsx"],"sourcesContent":["import React, { ReactElement, cloneElement, Children, useState, useEffect, useId } from 'react';\nimport Tag from '../Tag';\nimport { animationEases } from '../useAnimation';\nimport { css } from '../css';\nimport { formatCSSProp } from 'oncss';\nimport { CSSProps } from '../css/types';\nimport * as variants from './variants'\nexport type TransitionVariantTypes = keyof typeof variants\n\nexport type TransitionElementProps = {\n    height: number;\n    width: number;\n    rect: DOMRect | null\n}\n\nexport type TransitionState = \"open\" | \"opened\" | \"close\" | \"closed\"\n\nexport type TransitionProps = {\n    children: ReactElement;\n    open: boolean;\n    variant: {\n        from: CSSProps;\n        to: CSSProps;\n    } | TransitionVariantTypes;\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 Transition = ({ children, open, ...props }: TransitionProps) => {\n    let { disableInitialTransition, variant, duration, delay, ease, easing, onOpen, onOpened, onClose, onClosed, onState } = props as TransitionProps\n    let _ease = ease || (animationEases as any)[easing as any] || animationEases.easeBounceOut\n    disableInitialTransition ??= false\n    duration ??= 400\n    variant ??= \"fade\"\n\n    const id = useId().replace(/:/g, \"\")\n    const [rendered, setRendered] = useState(false)\n    const [initial, setInitial] = useState(false)\n    const [transitionState, setTransitionState] = useState<TransitionState>(open ? (disableInitialTransition ? \"opened\" : \"open\") : \"closed\")\n    const [element, setElement] = useState<TransitionElementProps>({\n        height: 0,\n        width: 0,\n        rect: null\n    });\n\n    if (typeof variant === 'string') {\n        variant = (variants as any)[variant](element)\n    }\n\n    let from = (variant as any).from\n    let to = (variant as any).to\n\n    const [_css, setCss] = useState(open ? to : from)\n\n    useEffect(() => {\n        const ele: HTMLElement = document.querySelector(`.trans-${id}`) as any\n        if (ele) {\n            setRendered(true)\n            setElement({\n                height: ele.clientHeight,\n                width: ele.clientWidth,\n                rect: ele.getBoundingClientRect()\n            })\n            if (!disableInitialTransition && open) {\n                setCss(from)\n            }\n        }\n    }, [])\n\n    useEffect(() => {\n        const ele: HTMLElement = document.querySelector(`.trans-${id}`) as any\n        if (rendered && ele) {\n            let stimer: any = null\n            let etimer: any = null\n            ele.ontransitionstart = () => {\n                clearTimeout(stimer)\n                stimer = setTimeout(() => {\n                    const isOpen = Array.from(ele.classList).includes(\"trans-open\");\n                    (onOpen && isOpen) && onOpen();\n                    (onClose && !isOpen) && onClose()\n                    onState && onState(isOpen ? \"open\" : \"close\")\n                    setTransitionState(isOpen ? \"open\" : \"close\")\n                }, 1)\n            }\n            ele.ontransitionend = () => {\n                clearTimeout(etimer)\n                etimer = setTimeout(() => {\n                    const isOpen = Array.from(ele.classList).includes(\"trans-open\");\n                    (onOpened && isOpen) && onOpened();\n                    (onClosed && !isOpen) && onClosed();\n                    onState && onState(isOpen ? \"opened\" : \"closed\")\n                    setTransitionState(isOpen ? \"opened\" : \"closed\")\n                }, 1)\n            }\n        }\n    }, [rendered])\n\n    useEffect(() => {\n        if (rendered) {\n            if (!initial) {\n                setInitial(true)\n                setTimeout(() => {\n                    setCss(open ? to : from)\n                }, 50);\n            } else {\n                setCss(open ? to : from)\n            }\n        }\n    }, [rendered, open, JSON.stringify(from), JSON.stringify(to)])\n\n    let _: any = {}\n    if (rendered) {\n        let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`\n        _ = {\n            ..._css,\n            transition: Object.keys(_css || {}).map(k => formatCSSProp(k)).join(trans + \", \") + trans,\n        }\n    }\n\n    const cls = css(_)\n    if (!children || Array.isArray(children)) throw new Error(\"Invalid children in Transition\")\n    const first: any = Children.toArray(children).shift();\n    let classname = `${cls.classname} trans-${id} trans-${(open ? \"open\" : \"close\")} trans-state-${transitionState}`\n    const child = cloneElement(first, { classNames: [classname] })\n    if (rendered) return child\n    if (!rendered && disableInitialTransition && open) return child\n\n    return (\n        <Tag\n            height={0}\n            overflow=\"hidden\"\n        >\n            {child}\n        </Tag>\n    )\n}\n\n\nexport default Transition"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../src/Transition/index.tsx"],"sourcesContent":["import React, { ReactElement, cloneElement, Children, useState, useEffect, useId } from 'react';\nimport Tag from '../Tag';\nimport { animationEases } from '../hooks/useAnimation';\nimport { css } from '../css';\nimport { formatCSSProp } from 'oncss';\nimport { CSSProps } from '../css/types';\nimport * as variants from './variants'\nexport type TransitionVariantTypes = keyof typeof variants\n\nexport type TransitionElementProps = {\n    height: number;\n    width: number;\n    rect: DOMRect | null\n}\n\nexport type TransitionState = \"open\" | \"opened\" | \"close\" | \"closed\"\n\nexport type TransitionProps = {\n    children: ReactElement;\n    open: boolean;\n    variant: {\n        from: CSSProps;\n        to: CSSProps;\n    } | TransitionVariantTypes;\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 Transition = ({ children, open, ...props }: TransitionProps) => {\n    let { disableInitialTransition, variant, duration, delay, ease, easing, onOpen, onOpened, onClose, onClosed, onState } = props as TransitionProps\n    let _ease = ease || (animationEases as any)[easing as any] || animationEases.easeBounceOut\n    disableInitialTransition ??= false\n    duration ??= 400\n    variant ??= \"fade\"\n\n    const id = useId().replace(/:/g, \"\")\n    const [rendered, setRendered] = useState(false)\n    const [initial, setInitial] = useState(false)\n    const [transitionState, setTransitionState] = useState<TransitionState>(open ? (disableInitialTransition ? \"opened\" : \"open\") : \"closed\")\n    const [element, setElement] = useState<TransitionElementProps>({\n        height: 0,\n        width: 0,\n        rect: null\n    });\n\n    if (typeof variant === 'string') {\n        variant = (variants as any)[variant](element)\n    }\n\n    let from = (variant as any).from\n    let to = (variant as any).to\n\n    const [_css, setCss] = useState(open ? to : from)\n\n    useEffect(() => {\n        const ele: HTMLElement = document.querySelector(`.trans-${id}`) as any\n        if (ele) {\n            setRendered(true)\n            setElement({\n                height: ele.clientHeight,\n                width: ele.clientWidth,\n                rect: ele.getBoundingClientRect()\n            })\n            if (!disableInitialTransition && open) {\n                setCss(from)\n            }\n        }\n    }, [])\n\n    useEffect(() => {\n        const ele: HTMLElement = document.querySelector(`.trans-${id}`) as any\n        if (rendered && ele) {\n            let stimer: any = null\n            let etimer: any = null\n            ele.ontransitionstart = () => {\n                clearTimeout(stimer)\n                stimer = setTimeout(() => {\n                    const isOpen = Array.from(ele.classList).includes(\"trans-open\");\n                    (onOpen && isOpen) && onOpen();\n                    (onClose && !isOpen) && onClose()\n                    onState && onState(isOpen ? \"open\" : \"close\")\n                    setTransitionState(isOpen ? \"open\" : \"close\")\n                }, 1)\n            }\n            ele.ontransitionend = () => {\n                clearTimeout(etimer)\n                etimer = setTimeout(() => {\n                    const isOpen = Array.from(ele.classList).includes(\"trans-open\");\n                    (onOpened && isOpen) && onOpened();\n                    (onClosed && !isOpen) && onClosed();\n                    onState && onState(isOpen ? \"opened\" : \"closed\")\n                    setTransitionState(isOpen ? \"opened\" : \"closed\")\n                }, 1)\n            }\n        }\n    }, [rendered])\n\n    useEffect(() => {\n        if (rendered) {\n            if (!initial) {\n                setInitial(true)\n                setTimeout(() => {\n                    setCss(open ? to : from)\n                }, 50);\n            } else {\n                setCss(open ? to : from)\n            }\n        }\n    }, [rendered, open, JSON.stringify(from), JSON.stringify(to)])\n\n    let _: any = {}\n    if (rendered) {\n        let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`\n        _ = {\n            ..._css,\n            transition: Object.keys(_css || {}).map(k => formatCSSProp(k)).join(trans + \", \") + trans,\n        }\n    }\n\n    const cls = css(_)\n    if (!children || Array.isArray(children)) throw new Error(\"Invalid children in Transition\")\n    const first: any = Children.toArray(children).shift();\n    let classname = `${cls.classname} trans-${id} trans-${(open ? \"open\" : \"close\")} trans-state-${transitionState}`\n    const child = cloneElement(first, { classNames: [classname] })\n    if (rendered) return child\n    if (!rendered && disableInitialTransition && open) return child\n\n    return (\n        <Tag\n            height={0}\n            overflow=\"hidden\"\n        >\n            {child}\n        </Tag>\n    )\n}\n\n\nexport default Transition"],"names":["_jsx"],"mappings":"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"}

package/breakpoint/BreakpointProvider.js

@@ -1,43 +1,33 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var jsxRuntime=require('react/jsx-runtime'),React=require('react'),isWindow=require('../isWindow.js'),index=require('../css/index.js');const BreakpointCtx = React.createContext("xl");
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var jsxRuntime=require('react/jsx-runtime'),React=require('react'),isWindow=require('../isWindow.js'),index=require('../css/index.js');const BreakpointCtx = React.createContext("xs");
+/**
+ * SSR-safe breakpoint detection
+ */
 const getKey = () => {
-    const isWin = isWindow.default();
-    if (isWin) {
-        const width = window.innerWidth;
-        if (width < index.breakpoints.sm) {
-            return 'xs';
-        }
-        else if (width > index.breakpoints.xs && width < index.breakpoints.md) {
-            return 'sm';
-        }
-        else if (width > index.breakpoints.sm && width < index.breakpoints.lg) {
-            return 'md';
-        }
-        else if (width > index.breakpoints.md && width < index.breakpoints.xl) {
-            return 'lg';
-        }
-        else {
-            return 'xl';
-        }
-    }
-    else {
-        return 'xl';
+    if (!isWindow.default()) {
+        // Server fallback (mobile-first)
+        return "xs";
     }
+    const width = window.innerWidth;
+    if (width < index.breakpoints.sm)
+        return "xs";
+    if (width < index.breakpoints.md)
+        return "sm";
+    if (width < index.breakpoints.lg)
+        return "md";
+    if (width < index.breakpoints.xl)
+        return "lg";
+    return "xl";
 };
 const BreakpointProvider = ({ children }) => {
-    const [current, setCurrent] = React.useState(getKey);
-    const handler = () => {
-        let c = getKey();
-        if (current !== c) {
-            setCurrent(c);
-        }
-    };
+    const [current, setCurrent] = React.useState("xs");
+    const handler = React.useCallback(() => {
+        const newKey = getKey();
+        setCurrent(prev => (prev === newKey ? prev : newKey));
+    }, []);
     React.useEffect(() => {
-        window.removeEventListener("resize", handler);
         window.addEventListener("resize", handler);
-        handler();
-        return () => {
-            window.removeEventListener("resize", handler);
-        };
-    }, [current]);
+        handler(); // detect on mount
+        return () => window.removeEventListener("resize", handler);
+    }, [handler]);
     return (jsxRuntime.jsx(BreakpointCtx.Provider, { value: current, children: children }));
 };exports.BreakpointCtx=BreakpointCtx;exports.BreakpointProvider=BreakpointProvider;//# sourceMappingURL=BreakpointProvider.js.map

package/breakpoint/BreakpointProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreakpointProvider.js","sources":["../../src/breakpoint/BreakpointProvider.tsx"],"sourcesContent":["import React, { ReactNode, useState } from \"react\";\nimport isWindow from \"../isWindow\";\nimport { breakpoints } from \"../css\";\nimport { BreakpointKeys } from \"../css/types\";\n\nexport const BreakpointCtx = React.createContext<BreakpointKeys>(\"xl\")\n\nconst getKey = (): BreakpointKeys => {\n    const isWin = isWindow()\n    if (isWin) {\n        const width = window.innerWidth\n        if (width < breakpoints.sm) {\n            return 'xs'\n        } else if (width > breakpoints.xs && width < breakpoints.md) {\n            return 'sm'\n        } else if (width > breakpoints.sm && width < breakpoints.lg) {\n            return 'md'\n        } else if (width > breakpoints.md && width < breakpoints.xl) {\n            return 'lg'\n        } else {\n            return 'xl'\n        }\n    } else {\n        return 'xl'\n    }\n}\n\nexport const BreakpointProvider = ({ children }: { children?: ReactNode }) => {\n    const [current, setCurrent] = useState<BreakpointKeys>(getKey)\n\n    const handler = () => {\n        let c = getKey()\n        if (current !== c) {\n            setCurrent(c)\n        }\n    }\n\n    React.useEffect(() => {\n        window.removeEventListener(\"resize\", handler)\n        window.addEventListener(\"resize\", handler)\n        handler()\n        return () => {\n            window.removeEventListener(\"resize\", handler)\n        }\n    }, [current])\n\n    return (\n        <BreakpointCtx.Provider value={current}>\n            {children}\n        </BreakpointCtx.Provider>\n    )\n}\n"],"names":["isWindow","breakpoints","useState","_jsx"],"mappings":"6MAKO,MAAM,aAAa,GAAG,KAAK,CAAC,aAAa,CAAiB,IAAI;AAErE,MAAM,MAAM,GAAG,MAAqB;AAChC,IAAA,MAAM,KAAK,GAAGA,gBAAQ,EAAE;IACxB,IAAI,KAAK,EAAE;AACP,QAAA,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU;AAC/B,QAAA,IAAI,KAAK,GAAGC,iBAAW,CAAC,EAAE,EAAE;AACxB,YAAA,OAAO,IAAI;QACf;AAAO,aAAA,IAAI,KAAK,GAAGA,iBAAW,CAAC,EAAE,IAAI,KAAK,GAAGA,iBAAW,CAAC,EAAE,EAAE;AACzD,YAAA,OAAO,IAAI;QACf;AAAO,aAAA,IAAI,KAAK,GAAGA,iBAAW,CAAC,EAAE,IAAI,KAAK,GAAGA,iBAAW,CAAC,EAAE,EAAE;AACzD,YAAA,OAAO,IAAI;QACf;AAAO,aAAA,IAAI,KAAK,GAAGA,iBAAW,CAAC,EAAE,IAAI,KAAK,GAAGA,iBAAW,CAAC,EAAE,EAAE;AACzD,YAAA,OAAO,IAAI;QACf;aAAO;AACH,YAAA,OAAO,IAAI;QACf;IACJ;SAAO;AACH,QAAA,OAAO,IAAI;IACf;AACJ,CAAC;MAEY,kBAAkB,GAAG,CAAC,EAAE,QAAQ,EAA4B,KAAI;IACzE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAGC,cAAQ,CAAiB,MAAM,CAAC;IAE9D,MAAM,OAAO,GAAG,MAAK;AACjB,QAAA,IAAI,CAAC,GAAG,MAAM,EAAE;AAChB,QAAA,IAAI,OAAO,KAAK,CAAC,EAAE;YACf,UAAU,CAAC,CAAC,CAAC;QACjB;AACJ,IAAA,CAAC;AAED,IAAA,KAAK,CAAC,SAAS,CAAC,MAAK;AACjB,QAAA,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,OAAO,CAAC;AAC7C,QAAA,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,CAAC;AAC1C,QAAA,OAAO,EAAE;AACT,QAAA,OAAO,MAAK;AACR,YAAA,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,OAAO,CAAC;AACjD,QAAA,CAAC;AACL,IAAA,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;AAEb,IAAA,QACIC,cAAA,CAAC,aAAa,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,OAAO,EAAA,QAAA,EACjC,QAAQ,EAAA,CACY;AAEjC"}
+{"version":3,"file":"BreakpointProvider.js","sources":["../../src/breakpoint/BreakpointProvider.tsx"],"sourcesContent":["import React, { ReactNode, useState, useCallback } from \"react\";\nimport isWindow from \"../isWindow\";\nimport { breakpoints } from \"../css\";\nimport { BreakpointKeys } from \"../css/types\";\n\nexport const BreakpointCtx = React.createContext<BreakpointKeys>(\"xs\");\n\n/**\n * SSR-safe breakpoint detection\n */\nconst getKey = (): BreakpointKeys => {\n    if (!isWindow()) {\n        // Server fallback (mobile-first)\n        return \"xs\";\n    }\n\n    const width = window.innerWidth;\n\n    if (width < breakpoints.sm) return \"xs\";\n    if (width < breakpoints.md) return \"sm\";\n    if (width < breakpoints.lg) return \"md\";\n    if (width < breakpoints.xl) return \"lg\";\n    return \"xl\";\n};\n\nexport const BreakpointProvider = ({ children }: { children?: ReactNode }) => {\n    const [current, setCurrent] = useState<BreakpointKeys>(\"xs\");\n\n    const handler = useCallback(() => {\n        const newKey = getKey();\n        setCurrent(prev => (prev === newKey ? prev : newKey));\n    }, []);\n\n    React.useEffect(() => {\n        window.addEventListener(\"resize\", handler);\n        handler(); // detect on mount\n        return () => window.removeEventListener(\"resize\", handler);\n    }, [handler]);\n\n    return (\n        <BreakpointCtx.Provider value={current}>\n            {children}\n        </BreakpointCtx.Provider>\n    );\n};\n"],"names":["isWindow","breakpoints","useState","useCallback","_jsx"],"mappings":"6MAKO,MAAM,aAAa,GAAG,KAAK,CAAC,aAAa,CAAiB,IAAI;AAErE;;AAEG;AACH,MAAM,MAAM,GAAG,MAAqB;AAChC,IAAA,IAAI,CAACA,gBAAQ,EAAE,EAAE;;AAEb,QAAA,OAAO,IAAI;IACf;AAEA,IAAA,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU;AAE/B,IAAA,IAAI,KAAK,GAAGC,iBAAW,CAAC,EAAE;AAAE,QAAA,OAAO,IAAI;AACvC,IAAA,IAAI,KAAK,GAAGA,iBAAW,CAAC,EAAE;AAAE,QAAA,OAAO,IAAI;AACvC,IAAA,IAAI,KAAK,GAAGA,iBAAW,CAAC,EAAE;AAAE,QAAA,OAAO,IAAI;AACvC,IAAA,IAAI,KAAK,GAAGA,iBAAW,CAAC,EAAE;AAAE,QAAA,OAAO,IAAI;AACvC,IAAA,OAAO,IAAI;AACf,CAAC;MAEY,kBAAkB,GAAG,CAAC,EAAE,QAAQ,EAA4B,KAAI;IACzE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAGC,cAAQ,CAAiB,IAAI,CAAC;AAE5D,IAAA,MAAM,OAAO,GAAGC,iBAAW,CAAC,MAAK;AAC7B,QAAA,MAAM,MAAM,GAAG,MAAM,EAAE;AACvB,QAAA,UAAU,CAAC,IAAI,KAAK,IAAI,KAAK,MAAM,GAAG,IAAI,GAAG,MAAM,CAAC,CAAC;IACzD,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,KAAK,CAAC,SAAS,CAAC,MAAK;AACjB,QAAA,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,CAAC;QAC1C,OAAO,EAAE,CAAC;QACV,OAAO,MAAM,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,OAAO,CAAC;AAC9D,IAAA,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;AAEb,IAAA,QACIC,cAAA,CAAC,aAAa,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,OAAO,EAAA,QAAA,EACjC,QAAQ,EAAA,CACY;AAEjC"}

package/breakpoint/BreakpointProvider.mjs

@@ -1,43 +1,33 @@
-import {jsx}from'react/jsx-runtime';import React__default,{useState}from'react';import isWindow from'../isWindow.mjs';import {breakpoints}from'../css/index.mjs';const BreakpointCtx = React__default.createContext("xl");
+import {jsx}from'react/jsx-runtime';import React__default,{useState,useCallback}from'react';import isWindow from'../isWindow.mjs';import {breakpoints}from'../css/index.mjs';const BreakpointCtx = React__default.createContext("xs");
+/**
+ * SSR-safe breakpoint detection
+ */
 const getKey = () => {
-    const isWin = isWindow();
-    if (isWin) {
-        const width = window.innerWidth;
-        if (width < breakpoints.sm) {
-            return 'xs';
-        }
-        else if (width > breakpoints.xs && width < breakpoints.md) {
-            return 'sm';
-        }
-        else if (width > breakpoints.sm && width < breakpoints.lg) {
-            return 'md';
-        }
-        else if (width > breakpoints.md && width < breakpoints.xl) {
-            return 'lg';
-        }
-        else {
-            return 'xl';
-        }
-    }
-    else {
-        return 'xl';
+    if (!isWindow()) {
+        // Server fallback (mobile-first)
+        return "xs";
     }
+    const width = window.innerWidth;
+    if (width < breakpoints.sm)
+        return "xs";
+    if (width < breakpoints.md)
+        return "sm";
+    if (width < breakpoints.lg)
+        return "md";
+    if (width < breakpoints.xl)
+        return "lg";
+    return "xl";
 };
 const BreakpointProvider = ({ children }) => {
-    const [current, setCurrent] = useState(getKey);
-    const handler = () => {
-        let c = getKey();
-        if (current !== c) {
-            setCurrent(c);
-        }
-    };
+    const [current, setCurrent] = useState("xs");
+    const handler = useCallback(() => {
+        const newKey = getKey();
+        setCurrent(prev => (prev === newKey ? prev : newKey));
+    }, []);
     React__default.useEffect(() => {
-        window.removeEventListener("resize", handler);
         window.addEventListener("resize", handler);
-        handler();
-        return () => {
-            window.removeEventListener("resize", handler);
-        };
-    }, [current]);
+        handler(); // detect on mount
+        return () => window.removeEventListener("resize", handler);
+    }, [handler]);
     return (jsx(BreakpointCtx.Provider, { value: current, children: children }));
 };export{BreakpointCtx,BreakpointProvider};//# sourceMappingURL=BreakpointProvider.mjs.map