@xanui/core 1.2.31 → 1.2.32

package/css/index.js

@@ -1,4 +1,11 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var getValue=require('./getValue.js'),getProps=require('./getProps.js'),aliases=require('./aliases.js'),oncss=require('oncss');const breakpoints = {
+'use strict';
+
+var getValue = require('./getValue.js');
+var getProps = require('./getProps.js');
+var aliases = require('./aliases.js');
+var oncss = require('oncss');
+
+const breakpoints = {
     xs: 0,
     sm: 600,
     md: 900,
@@ -7,20 +14,20 @@
 };
 const css = (props, options) => {
     const cssOptions = Object.assign(Object.assign({}, options), { breakpoints,
-        aliases: aliases.default, getValue: (p, v, _c, dept) => {
+        aliases, getValue: (p, v, _c, dept) => {
             if (options === null || options === void 0 ? void 0 : options.getValue) {
                 let _val = options === null || options === void 0 ? void 0 : options.getValue(p, v, _c, dept);
                 if (_val)
                     return _val;
             }
-            return getValue.default(p, v);
+            return getValue(p, v);
         }, getProps: (p, v, _c, dept) => {
             if (options === null || options === void 0 ? void 0 : options.getProps) {
                 let _p = options === null || options === void 0 ? void 0 : options.getProps(p, v, _c, dept);
                 if (_p)
                     return _p;
             }
-            return getProps.default(p, v, _c);
+            return getProps(p, v, _c);
         } });
     return oncss.css(props, cssOptions);
 };
@@ -52,4 +59,13 @@ const alpha = (color, opacity = 1) => {
     if (!color.startsWith("#"))
         throw new Error(`color must be hex`);
     return (color + (`0${Math.round((255 / 100) * _opacity).toString(16)}`.slice(-2))).toUpperCase();
-};exports.getValue=getValue.default;exports.getProps=getProps.default;exports.adjustColor=adjustColor;exports.adjustTextContrast=adjustTextContrast;exports.alpha=alpha;exports.breakpoints=breakpoints;exports.css=css;//# sourceMappingURL=index.js.map
+};
+
+exports.getValue = getValue;
+exports.getProps = getProps;
+exports.adjustColor = adjustColor;
+exports.adjustTextContrast = adjustTextContrast;
+exports.alpha = alpha;
+exports.breakpoints = breakpoints;
+exports.css = css;
+//# sourceMappingURL=index.js.map

package/css/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/css/index.ts"],"sourcesContent":["import getValue from \"./getValue\"\nimport getProps from \"./getProps\"\nimport aliases from \"./aliases\"\nimport { Aliases, BreakpointKeys, CSSOptionProps, CSSProps } from './types'\nimport { css as _css } from \"oncss\"\n\nexport {\n    getValue,\n    getProps\n}\n\nexport const breakpoints = {\n    xs: 0,\n    sm: 600,\n    md: 900,\n    lg: 1200,\n    xl: 1536\n}\n\nexport const css = (props: CSSProps, options?: CSSOptionProps) => {\n    const cssOptions: CSSOptionProps = {\n        ...options,\n        breakpoints,\n        aliases,\n        getValue: (p: any, v: any, _c: any, dept) => {\n            if (options?.getValue) {\n                let _val = options?.getValue(p, v, _c, dept)\n                if (_val) return _val\n            }\n            return getValue(p, v, _c)\n        },\n        getProps: (p: any, v: any, _c: any, dept) => {\n            if (options?.getProps) {\n                let _p = options?.getProps(p, v, _c, dept)\n                if (_p) return _p\n            }\n            return getProps(p, v, _c)\n        },\n    }\n    return _css<Aliases, BreakpointKeys>(props, cssOptions)\n}\n\nexport const adjustColor = (hex: string, factor: number) => {\n\n    hex = hex.replace(/^#/, '')\n\n    let r = parseInt(hex.slice(0, 2), 16)\n    let g = parseInt(hex.slice(2, 4), 16)\n    let b = parseInt(hex.slice(4, 6), 16)\n\n    r = Math.floor(r * factor)\n    g = Math.floor(g * factor)\n    b = Math.floor(b * factor)\n\n    r = Math.min(255, Math.max(0, r))\n    g = Math.min(255, Math.max(0, g))\n    b = Math.min(255, Math.max(0, b))\n\n    return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;\n}\n\nexport const adjustTextContrast = (color: string) => {\n    color = color.replace(/^#/, '')\n    const r = parseInt(color.slice(0, 2), 16);\n    const g = parseInt(color.slice(2, 4), 16);\n    const b = parseInt(color.slice(4, 6), 16);\n\n    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;\n    return luminance > 0.5 ? '#111111' : '#FFFFFF';\n}\n\nexport const alpha = (color: string, opacity = 1) => {\n    if (typeof opacity !== 'number') return color\n    let _opacity = opacity * 100\n    if (!color.startsWith(\"#\")) throw new Error(`color must be hex`)\n    return (color + (`0${Math.round((255 / 100) * _opacity).toString(16)}`.slice(-2))).toUpperCase();\n};\n\n"],"names":["aliases","getValue","getProps","_css"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/css/index.ts"],"sourcesContent":["import getValue from \"./getValue\"\r\nimport getProps from \"./getProps\"\r\nimport aliases from \"./aliases\"\r\nimport { Aliases, BreakpointKeys, CSSOptionProps, CSSProps } from './types'\r\nimport { css as _css } from \"oncss\"\r\n\r\nexport {\r\n    getValue,\r\n    getProps\r\n}\r\n\r\nexport const breakpoints = {\r\n    xs: 0,\r\n    sm: 600,\r\n    md: 900,\r\n    lg: 1200,\r\n    xl: 1536\r\n}\r\n\r\nexport const css = (props: CSSProps, options?: CSSOptionProps) => {\r\n    const cssOptions: CSSOptionProps = {\r\n        ...options,\r\n        breakpoints,\r\n        aliases,\r\n        getValue: (p: any, v: any, _c: any, dept) => {\r\n            if (options?.getValue) {\r\n                let _val = options?.getValue(p, v, _c, dept)\r\n                if (_val) return _val\r\n            }\r\n            return getValue(p, v, _c)\r\n        },\r\n        getProps: (p: any, v: any, _c: any, dept) => {\r\n            if (options?.getProps) {\r\n                let _p = options?.getProps(p, v, _c, dept)\r\n                if (_p) return _p\r\n            }\r\n            return getProps(p, v, _c)\r\n        },\r\n    }\r\n    return _css<Aliases, BreakpointKeys>(props, cssOptions)\r\n}\r\n\r\nexport const adjustColor = (hex: string, factor: number) => {\r\n\r\n    hex = hex.replace(/^#/, '')\r\n\r\n    let r = parseInt(hex.slice(0, 2), 16)\r\n    let g = parseInt(hex.slice(2, 4), 16)\r\n    let b = parseInt(hex.slice(4, 6), 16)\r\n\r\n    r = Math.floor(r * factor)\r\n    g = Math.floor(g * factor)\r\n    b = Math.floor(b * factor)\r\n\r\n    r = Math.min(255, Math.max(0, r))\r\n    g = Math.min(255, Math.max(0, g))\r\n    b = Math.min(255, Math.max(0, b))\r\n\r\n    return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;\r\n}\r\n\r\nexport const adjustTextContrast = (color: string) => {\r\n    color = color.replace(/^#/, '')\r\n    const r = parseInt(color.slice(0, 2), 16);\r\n    const g = parseInt(color.slice(2, 4), 16);\r\n    const b = parseInt(color.slice(4, 6), 16);\r\n\r\n    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;\r\n    return luminance > 0.5 ? '#111111' : '#FFFFFF';\r\n}\r\n\r\nexport const alpha = (color: string, opacity = 1) => {\r\n    if (typeof opacity !== 'number') return color\r\n    let _opacity = opacity * 100\r\n    if (!color.startsWith(\"#\")) throw new Error(`color must be hex`)\r\n    return (color + (`0${Math.round((255 / 100) * _opacity).toString(16)}`.slice(-2))).toUpperCase();\r\n};\r\n\r\n"],"names":["_css"],"mappings":"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"}

package/css/index.mjs

@@ -1,4 +1,9 @@
-import getValue from'./getValue.mjs';import getProps from'./getProps.mjs';import aliases from'./aliases.mjs';import {css as css$1}from'oncss';const breakpoints = {
+import getValue from './getValue.mjs';
+import getProps from './getProps.mjs';
+import aliases from './aliases.mjs';
+import { css as css$1 } from 'oncss';
+
+const breakpoints = {
     xs: 0,
     sm: 600,
     md: 900,
@@ -52,4 +57,7 @@ const alpha = (color, opacity = 1) => {
     if (!color.startsWith("#"))
         throw new Error(`color must be hex`);
     return (color + (`0${Math.round((255 / 100) * _opacity).toString(16)}`.slice(-2))).toUpperCase();
-};export{adjustColor,adjustTextContrast,alpha,breakpoints,css,getProps,getValue};//# sourceMappingURL=index.mjs.map
+};
+
+export { adjustColor, adjustTextContrast, alpha, breakpoints, css, getProps, getValue };
+//# sourceMappingURL=index.mjs.map

package/css/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/css/index.ts"],"sourcesContent":["import getValue from \"./getValue\"\nimport getProps from \"./getProps\"\nimport aliases from \"./aliases\"\nimport { Aliases, BreakpointKeys, CSSOptionProps, CSSProps } from './types'\nimport { css as _css } from \"oncss\"\n\nexport {\n    getValue,\n    getProps\n}\n\nexport const breakpoints = {\n    xs: 0,\n    sm: 600,\n    md: 900,\n    lg: 1200,\n    xl: 1536\n}\n\nexport const css = (props: CSSProps, options?: CSSOptionProps) => {\n    const cssOptions: CSSOptionProps = {\n        ...options,\n        breakpoints,\n        aliases,\n        getValue: (p: any, v: any, _c: any, dept) => {\n            if (options?.getValue) {\n                let _val = options?.getValue(p, v, _c, dept)\n                if (_val) return _val\n            }\n            return getValue(p, v, _c)\n        },\n        getProps: (p: any, v: any, _c: any, dept) => {\n            if (options?.getProps) {\n                let _p = options?.getProps(p, v, _c, dept)\n                if (_p) return _p\n            }\n            return getProps(p, v, _c)\n        },\n    }\n    return _css<Aliases, BreakpointKeys>(props, cssOptions)\n}\n\nexport const adjustColor = (hex: string, factor: number) => {\n\n    hex = hex.replace(/^#/, '')\n\n    let r = parseInt(hex.slice(0, 2), 16)\n    let g = parseInt(hex.slice(2, 4), 16)\n    let b = parseInt(hex.slice(4, 6), 16)\n\n    r = Math.floor(r * factor)\n    g = Math.floor(g * factor)\n    b = Math.floor(b * factor)\n\n    r = Math.min(255, Math.max(0, r))\n    g = Math.min(255, Math.max(0, g))\n    b = Math.min(255, Math.max(0, b))\n\n    return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;\n}\n\nexport const adjustTextContrast = (color: string) => {\n    color = color.replace(/^#/, '')\n    const r = parseInt(color.slice(0, 2), 16);\n    const g = parseInt(color.slice(2, 4), 16);\n    const b = parseInt(color.slice(4, 6), 16);\n\n    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;\n    return luminance > 0.5 ? '#111111' : '#FFFFFF';\n}\n\nexport const alpha = (color: string, opacity = 1) => {\n    if (typeof opacity !== 'number') return color\n    let _opacity = opacity * 100\n    if (!color.startsWith(\"#\")) throw new Error(`color must be hex`)\n    return (color + (`0${Math.round((255 / 100) * _opacity).toString(16)}`.slice(-2))).toUpperCase();\n};\n\n"],"names":["_css"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../src/css/index.ts"],"sourcesContent":["import getValue from \"./getValue\"\r\nimport getProps from \"./getProps\"\r\nimport aliases from \"./aliases\"\r\nimport { Aliases, BreakpointKeys, CSSOptionProps, CSSProps } from './types'\r\nimport { css as _css } from \"oncss\"\r\n\r\nexport {\r\n    getValue,\r\n    getProps\r\n}\r\n\r\nexport const breakpoints = {\r\n    xs: 0,\r\n    sm: 600,\r\n    md: 900,\r\n    lg: 1200,\r\n    xl: 1536\r\n}\r\n\r\nexport const css = (props: CSSProps, options?: CSSOptionProps) => {\r\n    const cssOptions: CSSOptionProps = {\r\n        ...options,\r\n        breakpoints,\r\n        aliases,\r\n        getValue: (p: any, v: any, _c: any, dept) => {\r\n            if (options?.getValue) {\r\n                let _val = options?.getValue(p, v, _c, dept)\r\n                if (_val) return _val\r\n            }\r\n            return getValue(p, v, _c)\r\n        },\r\n        getProps: (p: any, v: any, _c: any, dept) => {\r\n            if (options?.getProps) {\r\n                let _p = options?.getProps(p, v, _c, dept)\r\n                if (_p) return _p\r\n            }\r\n            return getProps(p, v, _c)\r\n        },\r\n    }\r\n    return _css<Aliases, BreakpointKeys>(props, cssOptions)\r\n}\r\n\r\nexport const adjustColor = (hex: string, factor: number) => {\r\n\r\n    hex = hex.replace(/^#/, '')\r\n\r\n    let r = parseInt(hex.slice(0, 2), 16)\r\n    let g = parseInt(hex.slice(2, 4), 16)\r\n    let b = parseInt(hex.slice(4, 6), 16)\r\n\r\n    r = Math.floor(r * factor)\r\n    g = Math.floor(g * factor)\r\n    b = Math.floor(b * factor)\r\n\r\n    r = Math.min(255, Math.max(0, r))\r\n    g = Math.min(255, Math.max(0, g))\r\n    b = Math.min(255, Math.max(0, b))\r\n\r\n    return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;\r\n}\r\n\r\nexport const adjustTextContrast = (color: string) => {\r\n    color = color.replace(/^#/, '')\r\n    const r = parseInt(color.slice(0, 2), 16);\r\n    const g = parseInt(color.slice(2, 4), 16);\r\n    const b = parseInt(color.slice(4, 6), 16);\r\n\r\n    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;\r\n    return luminance > 0.5 ? '#111111' : '#FFFFFF';\r\n}\r\n\r\nexport const alpha = (color: string, opacity = 1) => {\r\n    if (typeof opacity !== 'number') return color\r\n    let _opacity = opacity * 100\r\n    if (!color.startsWith(\"#\")) throw new Error(`color must be hex`)\r\n    return (color + (`0${Math.round((255 / 100) * _opacity).toString(16)}`.slice(-2))).toUpperCase();\r\n};\r\n\r\n"],"names":["_css"],"mappings":"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"}

package/hooks/useAnimation.js

@@ -1,11 +1,11 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var index=require('../css/index.js'),React=require('react');// export const animationEases = {
-//     easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
-//     easeOut: "cubic-bezier(0.0, 0, 0.2, 1)",
-//     easeIn: "cubic-bezier(0.4, 0, 1, 1)",
-//     sharp: "cubic-bezier(0.4, 0, 0.6, 1)",
-//     linear: "cubic-bezier(0, 0, 1, 1)",
-//     easeBounceOut: "cubic-bezier(0.68, -0.55, 0.265, 1.55)"
-// }
+"use client";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var index = require('../css/index.js');
+var React = require('react');
+
 const animationEases = {
     standard: "cubic-bezier(0.4, 0, 0.2, 1)",
     fast: "cubic-bezier(0.2, 0, 0, 1)",
@@ -29,4 +29,8 @@ const useAnimation = ({ from, to, delay, ease, duration }) => {
         }
     });
     return anim.classname;
-};exports.animationEases=animationEases;exports.default=useAnimation;//# sourceMappingURL=useAnimation.js.map
+};
+
+exports.animationEases = animationEases;
+exports.default = useAnimation;
+//# sourceMappingURL=useAnimation.js.map

package/hooks/useAnimation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAnimation.js","sources":["../../src/hooks/useAnimation.ts"],"sourcesContent":["import { css } from '../css'\nimport { useId } from 'react'\nimport { CSSProps } from '../css/types'\n\n// export const animationEases = {\n//     easeInOut: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n//     easeOut: \"cubic-bezier(0.0, 0, 0.2, 1)\",\n//     easeIn: \"cubic-bezier(0.4, 0, 1, 1)\",\n//     sharp: \"cubic-bezier(0.4, 0, 0.6, 1)\",\n//     linear: \"cubic-bezier(0, 0, 1, 1)\",\n//     easeBounceOut: \"cubic-bezier(0.68, -0.55, 0.265, 1.55)\"\n// }\n\nexport const animationEases = {\n    standard: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    fast: \"cubic-bezier(0.2, 0, 0, 1)\",\n    smooth: \"cubic-bezier(0.25, 0.46, 0.45, 0.94)\",\n    linear: \"cubic-bezier(0, 0, 1, 1)\",\n    bounce: \"cubic-bezier(0.34, 1.50, 0.64, 1)\",\n};\n\n\n\nexport interface UseAnimationProps {\n    delay?: number;\n    duration?: number;\n    from: CSSProps;\n    to: CSSProps;\n    ease?: keyof typeof animationEases;\n}\n\nconst useAnimation = ({ from, to, delay, ease, duration }: UseAnimationProps) => {\n    let _delay = delay || 0;\n    let _duration = duration || 600;\n    let _ease = ease || \"standard\"\n    const id = \"anim\" + useId().replace(/:/g, \"\")\n    const anim = css({\n        animationName: id,\n        animationDelay: _delay + \"ms\",\n        animationDuration: _duration + \"ms\",\n        animationTimingFunction: animationEases[_ease] || animationEases.standard,\n        [`@keyframes ${id}`]: {\n            from: from as any,\n            to: to as any\n        }\n    })\n    return anim.classname\n}\n\nexport default useAnimation"],"names":["useId","css"],"mappings":"kIAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEO,MAAM,cAAc,GAAG;AAC1B,IAAA,QAAQ,EAAE,8BAA8B;AACxC,IAAA,IAAI,EAAE,4BAA4B;AAClC,IAAA,MAAM,EAAE,sCAAsC;AAC9C,IAAA,MAAM,EAAE,0BAA0B;AAClC,IAAA,MAAM,EAAE,mCAAmC;;AAa/C,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAqB,KAAI;AAC5E,IAAA,IAAI,MAAM,GAAG,KAAK,IAAI,CAAC;AACvB,IAAA,IAAI,SAAS,GAAG,QAAQ,IAAI,GAAG;AAC/B,IAAA,IAAI,KAAK,GAAG,IAAI,IAAI,UAAU;AAC9B,IAAA,MAAM,EAAE,GAAG,MAAM,GAAGA,WAAK,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC;IAC7C,MAAM,IAAI,GAAGC,SAAG,CAAC;AACb,QAAA,aAAa,EAAE,EAAE;QACjB,cAAc,EAAE,MAAM,GAAG,IAAI;QAC7B,iBAAiB,EAAE,SAAS,GAAG,IAAI;QACnC,uBAAuB,EAAE,cAAc,CAAC,KAAK,CAAC,IAAI,cAAc,CAAC,QAAQ;AACzE,QAAA,CAAC,CAAA,WAAA,EAAc,EAAE,CAAA,CAAE,GAAG;AAClB,YAAA,IAAI,EAAE,IAAW;AACjB,YAAA,EAAE,EAAE;AACP;AACJ,KAAA,CAAC;IACF,OAAO,IAAI,CAAC,SAAS;AACzB"}
+{"version":3,"file":"useAnimation.js","sources":["../../src/hooks/useAnimation.ts"],"sourcesContent":["\"use client\";\r\nimport { css } from '../css'\r\nimport { useId } from 'react'\r\nimport { CSSProps } from '../css/types'\r\n\r\nexport const animationEases = {\r\n    standard: \"cubic-bezier(0.4, 0, 0.2, 1)\",\r\n    fast: \"cubic-bezier(0.2, 0, 0, 1)\",\r\n    smooth: \"cubic-bezier(0.25, 0.46, 0.45, 0.94)\",\r\n    linear: \"cubic-bezier(0, 0, 1, 1)\",\r\n    bounce: \"cubic-bezier(0.34, 1.50, 0.64, 1)\",\r\n};\r\n\r\nexport interface UseAnimationProps {\r\n    delay?: number;\r\n    duration?: number;\r\n    from: CSSProps;\r\n    to: CSSProps;\r\n    ease?: keyof typeof animationEases;\r\n}\r\n\r\nconst useAnimation = ({ from, to, delay, ease, duration }: UseAnimationProps) => {\r\n    let _delay = delay || 0;\r\n    let _duration = duration || 600;\r\n    let _ease = ease || \"standard\"\r\n    const id = \"anim\" + useId().replace(/:/g, \"\")\r\n    const anim = css({\r\n        animationName: id,\r\n        animationDelay: _delay + \"ms\",\r\n        animationDuration: _duration + \"ms\",\r\n        animationTimingFunction: animationEases[_ease] || animationEases.standard,\r\n        [`@keyframes ${id}`]: {\r\n            from: from as any,\r\n            to: to as any\r\n        }\r\n    })\r\n    return anim.classname\r\n}\r\n\r\nexport default useAnimation"],"names":[],"mappings":";;;;;;;;AAKO;AACH;AACA;AACA;AACA;AACA;;AAWJ;AACI;AACA;AACA;AACA;;AAEI;;;;AAIA;AACI;AACA;AACH;AACJ;;AAEL;;;"}

package/hooks/useAnimation.mjs

@@ -1,11 +1,7 @@
-import {css}from'../css/index.mjs';import {useId}from'react';// export const animationEases = {
-//     easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
-//     easeOut: "cubic-bezier(0.0, 0, 0.2, 1)",
-//     easeIn: "cubic-bezier(0.4, 0, 1, 1)",
-//     sharp: "cubic-bezier(0.4, 0, 0.6, 1)",
-//     linear: "cubic-bezier(0, 0, 1, 1)",
-//     easeBounceOut: "cubic-bezier(0.68, -0.55, 0.265, 1.55)"
-// }
+"use client";
+import { css } from '../css/index.mjs';
+import { useId } from 'react';
+
 const animationEases = {
     standard: "cubic-bezier(0.4, 0, 0.2, 1)",
     fast: "cubic-bezier(0.2, 0, 0, 1)",
@@ -29,4 +25,7 @@ const useAnimation = ({ from, to, delay, ease, duration }) => {
         }
     });
     return anim.classname;
-};export{animationEases,useAnimation as default};//# sourceMappingURL=useAnimation.mjs.map
+};
+
+export { animationEases, useAnimation as default };
+//# sourceMappingURL=useAnimation.mjs.map

package/hooks/useAnimation.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useAnimation.mjs","sources":["../../src/hooks/useAnimation.ts"],"sourcesContent":["import { css } from '../css'\nimport { useId } from 'react'\nimport { CSSProps } from '../css/types'\n\n// export const animationEases = {\n//     easeInOut: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n//     easeOut: \"cubic-bezier(0.0, 0, 0.2, 1)\",\n//     easeIn: \"cubic-bezier(0.4, 0, 1, 1)\",\n//     sharp: \"cubic-bezier(0.4, 0, 0.6, 1)\",\n//     linear: \"cubic-bezier(0, 0, 1, 1)\",\n//     easeBounceOut: \"cubic-bezier(0.68, -0.55, 0.265, 1.55)\"\n// }\n\nexport const animationEases = {\n    standard: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    fast: \"cubic-bezier(0.2, 0, 0, 1)\",\n    smooth: \"cubic-bezier(0.25, 0.46, 0.45, 0.94)\",\n    linear: \"cubic-bezier(0, 0, 1, 1)\",\n    bounce: \"cubic-bezier(0.34, 1.50, 0.64, 1)\",\n};\n\n\n\nexport interface UseAnimationProps {\n    delay?: number;\n    duration?: number;\n    from: CSSProps;\n    to: CSSProps;\n    ease?: keyof typeof animationEases;\n}\n\nconst useAnimation = ({ from, to, delay, ease, duration }: UseAnimationProps) => {\n    let _delay = delay || 0;\n    let _duration = duration || 600;\n    let _ease = ease || \"standard\"\n    const id = \"anim\" + useId().replace(/:/g, \"\")\n    const anim = css({\n        animationName: id,\n        animationDelay: _delay + \"ms\",\n        animationDuration: _duration + \"ms\",\n        animationTimingFunction: animationEases[_ease] || animationEases.standard,\n        [`@keyframes ${id}`]: {\n            from: from as any,\n            to: to as any\n        }\n    })\n    return anim.classname\n}\n\nexport default useAnimation"],"names":[],"mappings":"6DAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEO,MAAM,cAAc,GAAG;AAC1B,IAAA,QAAQ,EAAE,8BAA8B;AACxC,IAAA,IAAI,EAAE,4BAA4B;AAClC,IAAA,MAAM,EAAE,sCAAsC;AAC9C,IAAA,MAAM,EAAE,0BAA0B;AAClC,IAAA,MAAM,EAAE,mCAAmC;;AAa/C,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAqB,KAAI;AAC5E,IAAA,IAAI,MAAM,GAAG,KAAK,IAAI,CAAC;AACvB,IAAA,IAAI,SAAS,GAAG,QAAQ,IAAI,GAAG;AAC/B,IAAA,IAAI,KAAK,GAAG,IAAI,IAAI,UAAU;AAC9B,IAAA,MAAM,EAAE,GAAG,MAAM,GAAG,KAAK,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC;IAC7C,MAAM,IAAI,GAAG,GAAG,CAAC;AACb,QAAA,aAAa,EAAE,EAAE;QACjB,cAAc,EAAE,MAAM,GAAG,IAAI;QAC7B,iBAAiB,EAAE,SAAS,GAAG,IAAI;QACnC,uBAAuB,EAAE,cAAc,CAAC,KAAK,CAAC,IAAI,cAAc,CAAC,QAAQ;AACzE,QAAA,CAAC,CAAA,WAAA,EAAc,EAAE,CAAA,CAAE,GAAG;AAClB,YAAA,IAAI,EAAE,IAAW;AACjB,YAAA,EAAE,EAAE;AACP;AACJ,KAAA,CAAC;IACF,OAAO,IAAI,CAAC,SAAS;AACzB"}
+{"version":3,"file":"useAnimation.mjs","sources":["../../src/hooks/useAnimation.ts"],"sourcesContent":["\"use client\";\r\nimport { css } from '../css'\r\nimport { useId } from 'react'\r\nimport { CSSProps } from '../css/types'\r\n\r\nexport const animationEases = {\r\n    standard: \"cubic-bezier(0.4, 0, 0.2, 1)\",\r\n    fast: \"cubic-bezier(0.2, 0, 0, 1)\",\r\n    smooth: \"cubic-bezier(0.25, 0.46, 0.45, 0.94)\",\r\n    linear: \"cubic-bezier(0, 0, 1, 1)\",\r\n    bounce: \"cubic-bezier(0.34, 1.50, 0.64, 1)\",\r\n};\r\n\r\nexport interface UseAnimationProps {\r\n    delay?: number;\r\n    duration?: number;\r\n    from: CSSProps;\r\n    to: CSSProps;\r\n    ease?: keyof typeof animationEases;\r\n}\r\n\r\nconst useAnimation = ({ from, to, delay, ease, duration }: UseAnimationProps) => {\r\n    let _delay = delay || 0;\r\n    let _duration = duration || 600;\r\n    let _ease = ease || \"standard\"\r\n    const id = \"anim\" + useId().replace(/:/g, \"\")\r\n    const anim = css({\r\n        animationName: id,\r\n        animationDelay: _delay + \"ms\",\r\n        animationDuration: _duration + \"ms\",\r\n        animationTimingFunction: animationEases[_ease] || animationEases.standard,\r\n        [`@keyframes ${id}`]: {\r\n            from: from as any,\r\n            to: to as any\r\n        }\r\n    })\r\n    return anim.classname\r\n}\r\n\r\nexport default useAnimation"],"names":[],"mappings":";;;;AAKO;AACH;AACA;AACA;AACA;AACA;;AAWJ;AACI;AACA;AACA;AACA;;AAEI;;;;AAIA;AACI;AACA;AACH;AACJ;;AAEL;;"}

package/hooks/useColorTemplate.js

@@ -1,4 +1,7 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});const useColorTemplate = (color, type) => {
+"use client";
+'use strict';
+
+const useColorTemplate = (color, type) => {
     const is_def = color === "default";
     if (is_def) {
         color = "divider";
@@ -68,4 +71,7 @@
         };
     }
     throw new Error(`useColorTemplate: Unknown type ${type}`);
-};exports.default=useColorTemplate;//# sourceMappingURL=useColorTemplate.js.map
+};
+
+module.exports = useColorTemplate;
+//# sourceMappingURL=useColorTemplate.js.map

package/hooks/useColorTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"useColorTemplate.js","sources":["../../src/hooks/useColorTemplate.ts"],"sourcesContent":["export type UseColorTemplateType = \"fill\" | \"outline\" | \"text\" | \"soft\"\nexport type UseColorTemplateColor = \"default\" | \"brand\" | \"accent\" | \"success\" | \"info\" | \"warning\" | \"danger\"\n\nconst useColorTemplate = (color: UseColorTemplateColor, type: UseColorTemplateType) => {\n    const is_def = color === \"default\";\n    if (is_def) {\n        color = \"divider\" as any\n    }\n\n    if (type === \"outline\") {\n        return {\n            primary: {\n                bgcolor: `transparent`,\n                color: is_def ? `text.primary` : `${color}.primary`,\n                border: 1,\n                borderColor: is_def ? `divider` : `${color}.primary`,\n            },\n            secondary: {\n                bgcolor: `transparent`,\n                color: is_def ? `text.primary` : `${color}.secondary`,\n                border: 1,\n                borderColor: is_def ? `divider.secondary` : `${color}.secondary`,\n            }\n        }\n    } else if (type === \"fill\") {\n        return {\n            primary: {\n                bgcolor: color,\n                color: is_def ? `text.primary` : `${color}.text`,\n                border: 1,\n                borderColor: is_def ? `divider.secondary` : `${color}.secondary`,\n            },\n            secondary: {\n                bgcolor: `${color}.secondary`,\n                color: is_def ? `text.primary` : `${color}.text`,\n                border: 1,\n                borderColor: is_def ? `divider.secondary` : `${color}.secondary`,\n            }\n        }\n    } else if (type === \"text\") {\n        return {\n            primary: {\n                bgcolor: \"transparent\",\n                color: is_def ? `text.primary` : `${color}.primary`,\n                border: 0,\n                borderColor: `transparent`,\n            },\n            secondary: {\n                bgcolor: \"transparent\",\n                color: is_def ? `text.primary` : `${color}.secondary`,\n                border: 0,\n                borderColor: `transparent`,\n            }\n        }\n    } else if (type === \"soft\") {\n        return {\n            primary: {\n                bgcolor: `${color}.soft.primary`,\n                color: is_def ? `text.primary` : color,\n                border: 0,\n                borderColor: `transparent`,\n            },\n            secondary: {\n                bgcolor: `${color}.soft.secondary`,\n                color: is_def ? `text.primary` : `${color}.secondary`,\n                border: 0,\n                borderColor: `transparent`,\n            }\n        }\n    }\n\n    throw new Error(`useColorTemplate: Unknown type ${type}`);\n}\n\nexport default useColorTemplate"],"names":[],"mappings":"sEAGA,MAAM,gBAAgB,GAAG,CAAC,KAA4B,EAAE,IAA0B,KAAI;AAClF,IAAA,MAAM,MAAM,GAAG,KAAK,KAAK,SAAS;IAClC,IAAI,MAAM,EAAE;QACR,KAAK,GAAG,SAAgB;IAC5B;AAEA,IAAA,IAAI,IAAI,KAAK,SAAS,EAAE;QACpB,OAAO;AACH,YAAA,OAAO,EAAE;AACL,gBAAA,OAAO,EAAE,CAAA,WAAA,CAAa;gBACtB,KAAK,EAAE,MAAM,GAAG,CAAA,YAAA,CAAc,GAAG,CAAA,EAAG,KAAK,CAAA,QAAA,CAAU;AACnD,gBAAA,MAAM,EAAE,CAAC;gBACT,WAAW,EAAE,MAAM,GAAG,CAAA,OAAA,CAAS,GAAG,CAAA,EAAG,KAAK,CAAA,QAAA,CAAU;AACvD,aAAA;AACD,YAAA,SAAS,EAAE;AACP,gBAAA,OAAO,EAAE,CAAA,WAAA,CAAa;gBACtB,KAAK,EAAE,MAAM,GAAG,CAAA,YAAA,CAAc,GAAG,CAAA,EAAG,KAAK,CAAA,UAAA,CAAY;AACrD,gBAAA,MAAM,EAAE,CAAC;gBACT,WAAW,EAAE,MAAM,GAAG,CAAA,iBAAA,CAAmB,GAAG,CAAA,EAAG,KAAK,CAAA,UAAA,CAAY;AACnE;SACJ;IACL;AAAO,SAAA,IAAI,IAAI,KAAK,MAAM,EAAE;QACxB,OAAO;AACH,YAAA,OAAO,EAAE;AACL,gBAAA,OAAO,EAAE,KAAK;gBACd,KAAK,EAAE,MAAM,GAAG,CAAA,YAAA,CAAc,GAAG,CAAA,EAAG,KAAK,CAAA,KAAA,CAAO;AAChD,gBAAA,MAAM,EAAE,CAAC;gBACT,WAAW,EAAE,MAAM,GAAG,CAAA,iBAAA,CAAmB,GAAG,CAAA,EAAG,KAAK,CAAA,UAAA,CAAY;AACnE,aAAA;AACD,YAAA,SAAS,EAAE;gBACP,OAAO,EAAE,CAAA,EAAG,KAAK,CAAA,UAAA,CAAY;gBAC7B,KAAK,EAAE,MAAM,GAAG,CAAA,YAAA,CAAc,GAAG,CAAA,EAAG,KAAK,CAAA,KAAA,CAAO;AAChD,gBAAA,MAAM,EAAE,CAAC;gBACT,WAAW,EAAE,MAAM,GAAG,CAAA,iBAAA,CAAmB,GAAG,CAAA,EAAG,KAAK,CAAA,UAAA,CAAY;AACnE;SACJ;IACL;AAAO,SAAA,IAAI,IAAI,KAAK,MAAM,EAAE;QACxB,OAAO;AACH,YAAA,OAAO,EAAE;AACL,gBAAA,OAAO,EAAE,aAAa;gBACtB,KAAK,EAAE,MAAM,GAAG,CAAA,YAAA,CAAc,GAAG,CAAA,EAAG,KAAK,CAAA,QAAA,CAAU;AACnD,gBAAA,MAAM,EAAE,CAAC;AACT,gBAAA,WAAW,EAAE,CAAA,WAAA,CAAa;AAC7B,aAAA;AACD,YAAA,SAAS,EAAE;AACP,gBAAA,OAAO,EAAE,aAAa;gBACtB,KAAK,EAAE,MAAM,GAAG,CAAA,YAAA,CAAc,GAAG,CAAA,EAAG,KAAK,CAAA,UAAA,CAAY;AACrD,gBAAA,MAAM,EAAE,CAAC;AACT,gBAAA,WAAW,EAAE,CAAA,WAAA,CAAa;AAC7B;SACJ;IACL;AAAO,SAAA,IAAI,IAAI,KAAK,MAAM,EAAE;QACxB,OAAO;AACH,YAAA,OAAO,EAAE;gBACL,OAAO,EAAE,CAAA,EAAG,KAAK,CAAA,aAAA,CAAe;gBAChC,KAAK,EAAE,MAAM,GAAG,CAAA,YAAA,CAAc,GAAG,KAAK;AACtC,gBAAA,MAAM,EAAE,CAAC;AACT,gBAAA,WAAW,EAAE,CAAA,WAAA,CAAa;AAC7B,aAAA;AACD,YAAA,SAAS,EAAE;gBACP,OAAO,EAAE,CAAA,EAAG,KAAK,CAAA,eAAA,CAAiB;gBAClC,KAAK,EAAE,MAAM,GAAG,CAAA,YAAA,CAAc,GAAG,CAAA,EAAG,KAAK,CAAA,UAAA,CAAY;AACrD,gBAAA,MAAM,EAAE,CAAC;AACT,gBAAA,WAAW,EAAE,CAAA,WAAA,CAAa;AAC7B;SACJ;IACL;AAEA,IAAA,MAAM,IAAI,KAAK,CAAC,kCAAkC,IAAI,CAAA,CAAE,CAAC;AAC7D"}
+{"version":3,"file":"useColorTemplate.js","sources":["../../src/hooks/useColorTemplate.ts"],"sourcesContent":["\"use client\";\r\nexport type UseColorTemplateType = \"fill\" | \"outline\" | \"text\" | \"soft\"\r\nexport type UseColorTemplateColor = \"default\" | \"brand\" | \"accent\" | \"success\" | \"info\" | \"warning\" | \"danger\"\r\n\r\nconst useColorTemplate = (color: UseColorTemplateColor, type: UseColorTemplateType) => {\r\n    const is_def = color === \"default\";\r\n    if (is_def) {\r\n        color = \"divider\" as any\r\n    }\r\n\r\n    if (type === \"outline\") {\r\n        return {\r\n            primary: {\r\n                bgcolor: `transparent`,\r\n                color: is_def ? `text.primary` : `${color}.primary`,\r\n                border: 1,\r\n                borderColor: is_def ? `divider` : `${color}.primary`,\r\n            },\r\n            secondary: {\r\n                bgcolor: `transparent`,\r\n                color: is_def ? `text.primary` : `${color}.secondary`,\r\n                border: 1,\r\n                borderColor: is_def ? `divider.secondary` : `${color}.secondary`,\r\n            }\r\n        }\r\n    } else if (type === \"fill\") {\r\n        return {\r\n            primary: {\r\n                bgcolor: color,\r\n                color: is_def ? `text.primary` : `${color}.text`,\r\n                border: 1,\r\n                borderColor: is_def ? `divider.secondary` : `${color}.secondary`,\r\n            },\r\n            secondary: {\r\n                bgcolor: `${color}.secondary`,\r\n                color: is_def ? `text.primary` : `${color}.text`,\r\n                border: 1,\r\n                borderColor: is_def ? `divider.secondary` : `${color}.secondary`,\r\n            }\r\n        }\r\n    } else if (type === \"text\") {\r\n        return {\r\n            primary: {\r\n                bgcolor: \"transparent\",\r\n                color: is_def ? `text.primary` : `${color}.primary`,\r\n                border: 0,\r\n                borderColor: `transparent`,\r\n            },\r\n            secondary: {\r\n                bgcolor: \"transparent\",\r\n                color: is_def ? `text.primary` : `${color}.secondary`,\r\n                border: 0,\r\n                borderColor: `transparent`,\r\n            }\r\n        }\r\n    } else if (type === \"soft\") {\r\n        return {\r\n            primary: {\r\n                bgcolor: `${color}.soft.primary`,\r\n                color: is_def ? `text.primary` : color,\r\n                border: 0,\r\n                borderColor: `transparent`,\r\n            },\r\n            secondary: {\r\n                bgcolor: `${color}.soft.secondary`,\r\n                color: is_def ? `text.primary` : `${color}.secondary`,\r\n                border: 0,\r\n                borderColor: `transparent`,\r\n            }\r\n        }\r\n    }\r\n\r\n    throw new Error(`useColorTemplate: Unknown type ${type}`);\r\n}\r\n\r\nexport default useColorTemplate"],"names":[],"mappings":";;;AAIA;AACI;;;;AAKA;;AAEQ;AACI;;AAEA;;AAEH;AACD;AACI;;AAEA;;AAEH;;;AAEF;;AAEC;AACI;;AAEA;;AAEH;AACD;;;AAGI;;AAEH;;;AAEF;;AAEC;AACI;;AAEA;AACA;AACH;AACD;AACI;;AAEA;AACA;AACH;;;AAEF;;AAEC;;;AAGI;AACA;AACH;AACD;;;AAGI;AACA;AACH;;;AAIT;AACJ;;"}

package/hooks/useColorTemplate.mjs

@@ -1,3 +1,4 @@
+"use client";
 const useColorTemplate = (color, type) => {
     const is_def = color === "default";
     if (is_def) {
@@ -68,4 +69,7 @@ const useColorTemplate = (color, type) => {
         };
     }
     throw new Error(`useColorTemplate: Unknown type ${type}`);
-};export{useColorTemplate as default};//# sourceMappingURL=useColorTemplate.mjs.map
+};
+
+export { useColorTemplate as default };
+//# sourceMappingURL=useColorTemplate.mjs.map

package/hooks/useColorTemplate.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useColorTemplate.mjs","sources":["../../src/hooks/useColorTemplate.ts"],"sourcesContent":["export type UseColorTemplateType = \"fill\" | \"outline\" | \"text\" | \"soft\"\nexport type UseColorTemplateColor = \"default\" | \"brand\" | \"accent\" | \"success\" | \"info\" | \"warning\" | \"danger\"\n\nconst useColorTemplate = (color: UseColorTemplateColor, type: UseColorTemplateType) => {\n    const is_def = color === \"default\";\n    if (is_def) {\n        color = \"divider\" as any\n    }\n\n    if (type === \"outline\") {\n        return {\n            primary: {\n                bgcolor: `transparent`,\n                color: is_def ? `text.primary` : `${color}.primary`,\n                border: 1,\n                borderColor: is_def ? `divider` : `${color}.primary`,\n            },\n            secondary: {\n                bgcolor: `transparent`,\n                color: is_def ? `text.primary` : `${color}.secondary`,\n                border: 1,\n                borderColor: is_def ? `divider.secondary` : `${color}.secondary`,\n            }\n        }\n    } else if (type === \"fill\") {\n        return {\n            primary: {\n                bgcolor: color,\n                color: is_def ? `text.primary` : `${color}.text`,\n                border: 1,\n                borderColor: is_def ? `divider.secondary` : `${color}.secondary`,\n            },\n            secondary: {\n                bgcolor: `${color}.secondary`,\n                color: is_def ? `text.primary` : `${color}.text`,\n                border: 1,\n                borderColor: is_def ? `divider.secondary` : `${color}.secondary`,\n            }\n        }\n    } else if (type === \"text\") {\n        return {\n            primary: {\n                bgcolor: \"transparent\",\n                color: is_def ? `text.primary` : `${color}.primary`,\n                border: 0,\n                borderColor: `transparent`,\n            },\n            secondary: {\n                bgcolor: \"transparent\",\n                color: is_def ? `text.primary` : `${color}.secondary`,\n                border: 0,\n                borderColor: `transparent`,\n            }\n        }\n    } else if (type === \"soft\") {\n        return {\n            primary: {\n                bgcolor: `${color}.soft.primary`,\n                color: is_def ? `text.primary` : color,\n                border: 0,\n                borderColor: `transparent`,\n            },\n            secondary: {\n                bgcolor: `${color}.soft.secondary`,\n                color: is_def ? `text.primary` : `${color}.secondary`,\n                border: 0,\n                borderColor: `transparent`,\n            }\n        }\n    }\n\n    throw new Error(`useColorTemplate: Unknown type ${type}`);\n}\n\nexport default useColorTemplate"],"names":[],"mappings":"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"}
+{"version":3,"file":"useColorTemplate.mjs","sources":["../../src/hooks/useColorTemplate.ts"],"sourcesContent":["\"use client\";\r\nexport type UseColorTemplateType = \"fill\" | \"outline\" | \"text\" | \"soft\"\r\nexport type UseColorTemplateColor = \"default\" | \"brand\" | \"accent\" | \"success\" | \"info\" | \"warning\" | \"danger\"\r\n\r\nconst useColorTemplate = (color: UseColorTemplateColor, type: UseColorTemplateType) => {\r\n    const is_def = color === \"default\";\r\n    if (is_def) {\r\n        color = \"divider\" as any\r\n    }\r\n\r\n    if (type === \"outline\") {\r\n        return {\r\n            primary: {\r\n                bgcolor: `transparent`,\r\n                color: is_def ? `text.primary` : `${color}.primary`,\r\n                border: 1,\r\n                borderColor: is_def ? `divider` : `${color}.primary`,\r\n            },\r\n            secondary: {\r\n                bgcolor: `transparent`,\r\n                color: is_def ? `text.primary` : `${color}.secondary`,\r\n                border: 1,\r\n                borderColor: is_def ? `divider.secondary` : `${color}.secondary`,\r\n            }\r\n        }\r\n    } else if (type === \"fill\") {\r\n        return {\r\n            primary: {\r\n                bgcolor: color,\r\n                color: is_def ? `text.primary` : `${color}.text`,\r\n                border: 1,\r\n                borderColor: is_def ? `divider.secondary` : `${color}.secondary`,\r\n            },\r\n            secondary: {\r\n                bgcolor: `${color}.secondary`,\r\n                color: is_def ? `text.primary` : `${color}.text`,\r\n                border: 1,\r\n                borderColor: is_def ? `divider.secondary` : `${color}.secondary`,\r\n            }\r\n        }\r\n    } else if (type === \"text\") {\r\n        return {\r\n            primary: {\r\n                bgcolor: \"transparent\",\r\n                color: is_def ? `text.primary` : `${color}.primary`,\r\n                border: 0,\r\n                borderColor: `transparent`,\r\n            },\r\n            secondary: {\r\n                bgcolor: \"transparent\",\r\n                color: is_def ? `text.primary` : `${color}.secondary`,\r\n                border: 0,\r\n                borderColor: `transparent`,\r\n            }\r\n        }\r\n    } else if (type === \"soft\") {\r\n        return {\r\n            primary: {\r\n                bgcolor: `${color}.soft.primary`,\r\n                color: is_def ? `text.primary` : color,\r\n                border: 0,\r\n                borderColor: `transparent`,\r\n            },\r\n            secondary: {\r\n                bgcolor: `${color}.soft.secondary`,\r\n                color: is_def ? `text.primary` : `${color}.secondary`,\r\n                border: 0,\r\n                borderColor: `transparent`,\r\n            }\r\n        }\r\n    }\r\n\r\n    throw new Error(`useColorTemplate: Unknown type ${type}`);\r\n}\r\n\r\nexport default useColorTemplate"],"names":[],"mappings":";AAIA;AACI;;;;AAKA;;AAEQ;AACI;;AAEA;;AAEH;AACD;AACI;;AAEA;;AAEH;;;AAEF;;AAEC;AACI;;AAEA;;AAEH;AACD;;;AAGI;;AAEH;;;AAEF;;AAEC;AACI;;AAEA;AACA;AACH;AACD;AACI;;AAEA;AACA;AACH;;;AAEF;;AAEC;;;AAGI;AACA;AACH;AACD;;;AAGI;AACA;AACH;;;AAIT;AACJ;;"}

package/hooks/useInterface.js

@@ -1,8 +1,19 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var core=require('../theme/core.js');require('../css/getValue.js'),require('oncss'),require('../theme/ThemeProvider.js'),require('react-state-bucket');const useInterface = (name, userPorps, defaultProps) => {
+'use strict';
+
+var core = require('../theme/core.js');
+require('../css/getValue.js');
+require('oncss');
+require('../theme/ThemeProvider.js');
+require('react-state-bucket');
+
+const useInterface = (name, userPorps, defaultProps) => {
     const theme = core.useTheme();
     let _props = Object.assign(Object.assign({}, defaultProps), userPorps);
     if (name in theme.interfaces) {
         return theme.interfaces[name](_props, theme);
     }
     return [_props, theme];
-};exports.default=useInterface;//# sourceMappingURL=useInterface.js.map
+};
+
+module.exports = useInterface;
+//# sourceMappingURL=useInterface.js.map

package/hooks/useInterface.js.map

@@ -1 +1 @@
-{"version":3,"file":"useInterface.js","sources":["../../src/hooks/useInterface.ts"],"sourcesContent":["import { useTheme } from \"../theme\"\n\nconst useInterface = <P extends object>(name: string, userPorps: P, defaultProps: P) => {\n    const theme = useTheme()\n    let _props = { ...defaultProps, ...userPorps } as P\n    if (name in theme.interfaces) {\n        return theme.interfaces[name](_props, theme)\n    }\n    return [_props, theme]\n}\n\nexport default useInterface"],"names":["useTheme"],"mappings":"6NAEA,MAAM,YAAY,GAAG,CAAmB,IAAY,EAAE,SAAY,EAAE,YAAe,KAAI;AACnF,IAAA,MAAM,KAAK,GAAGA,aAAQ,EAAE;AACxB,IAAA,IAAI,MAAM,GAAG,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,YAAY,CAAA,EAAK,SAAS,CAAO;AACnD,IAAA,IAAI,IAAI,IAAI,KAAK,CAAC,UAAU,EAAE;QAC1B,OAAO,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,KAAK,CAAC;IAChD;AACA,IAAA,OAAO,CAAC,MAAM,EAAE,KAAK,CAAC;AAC1B"}
+{"version":3,"file":"useInterface.js","sources":["../../src/hooks/useInterface.ts"],"sourcesContent":["import { useTheme } from \"../theme\"\r\n\r\nconst useInterface = <P extends object>(name: string, userPorps: P, defaultProps: P) => {\r\n    const theme = useTheme()\r\n    let _props = { ...defaultProps, ...userPorps } as P\r\n    if (name in theme.interfaces) {\r\n        return theme.interfaces[name](_props, theme)\r\n    }\r\n    return [_props, theme]\r\n}\r\n\r\nexport default useInterface"],"names":["useTheme"],"mappings":";;;;;;;;AAEA,MAAM,YAAY,GAAG,CAAmB,IAAY,EAAE,SAAY,EAAE,YAAe,KAAI;AACnF,IAAA,MAAM,KAAK,GAAGA,aAAQ,EAAE;AACxB,IAAA,IAAI,MAAM,GAAG,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,YAAY,CAAA,EAAK,SAAS,CAAO;AACnD,IAAA,IAAI,IAAI,IAAI,KAAK,CAAC,UAAU,EAAE;QAC1B,OAAO,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,KAAK,CAAC;IAChD;AACA,IAAA,OAAO,CAAC,MAAM,EAAE,KAAK,CAAC;AAC1B;;;;"}

package/hooks/useInterface.mjs

@@ -1,8 +1,17 @@
-import {useTheme}from'../theme/core.mjs';import'../css/getValue.mjs';import'oncss';import'../theme/ThemeProvider.mjs';import'react-state-bucket';const useInterface = (name, userPorps, defaultProps) => {
+import { useTheme } from '../theme/core.mjs';
+import '../css/getValue.mjs';
+import 'oncss';
+import '../theme/ThemeProvider.mjs';
+import 'react-state-bucket';
+
+const useInterface = (name, userPorps, defaultProps) => {
     const theme = useTheme();
     let _props = Object.assign(Object.assign({}, defaultProps), userPorps);
     if (name in theme.interfaces) {
         return theme.interfaces[name](_props, theme);
     }
     return [_props, theme];
-};export{useInterface as default};//# sourceMappingURL=useInterface.mjs.map
+};
+
+export { useInterface as default };
+//# sourceMappingURL=useInterface.mjs.map

package/hooks/useInterface.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useInterface.mjs","sources":["../../src/hooks/useInterface.ts"],"sourcesContent":["import { useTheme } from \"../theme\"\n\nconst useInterface = <P extends object>(name: string, userPorps: P, defaultProps: P) => {\n    const theme = useTheme()\n    let _props = { ...defaultProps, ...userPorps } as P\n    if (name in theme.interfaces) {\n        return theme.interfaces[name](_props, theme)\n    }\n    return [_props, theme]\n}\n\nexport default useInterface"],"names":[],"mappings":"iJAEA,MAAM,YAAY,GAAG,CAAmB,IAAY,EAAE,SAAY,EAAE,YAAe,KAAI;AACnF,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE;AACxB,IAAA,IAAI,MAAM,GAAG,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,YAAY,CAAA,EAAK,SAAS,CAAO;AACnD,IAAA,IAAI,IAAI,IAAI,KAAK,CAAC,UAAU,EAAE;QAC1B,OAAO,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,KAAK,CAAC;IAChD;AACA,IAAA,OAAO,CAAC,MAAM,EAAE,KAAK,CAAC;AAC1B"}
+{"version":3,"file":"useInterface.mjs","sources":["../../src/hooks/useInterface.ts"],"sourcesContent":["import { useTheme } from \"../theme\"\r\n\r\nconst useInterface = <P extends object>(name: string, userPorps: P, defaultProps: P) => {\r\n    const theme = useTheme()\r\n    let _props = { ...defaultProps, ...userPorps } as P\r\n    if (name in theme.interfaces) {\r\n        return theme.interfaces[name](_props, theme)\r\n    }\r\n    return [_props, theme]\r\n}\r\n\r\nexport default useInterface"],"names":[],"mappings":";;;;;;AAEA,MAAM,YAAY,GAAG,CAAmB,IAAY,EAAE,SAAY,EAAE,YAAe,KAAI;AACnF,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE;AACxB,IAAA,IAAI,MAAM,GAAG,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,YAAY,CAAA,EAAK,SAAS,CAAO;AACnD,IAAA,IAAI,IAAI,IAAI,KAAK,CAAC,UAAU,EAAE;QAC1B,OAAO,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,KAAK,CAAC;IAChD;AACA,IAAA,OAAO,CAAC,MAAM,EAAE,KAAK,CAAC;AAC1B;;;;"}

package/hooks/usePortal.js

@@ -1,4 +1,19 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var jsxRuntime=require('react/jsx-runtime'),React=require('react'),client=require('react-dom/client'),core=require('../theme/core.js');require('../css/getValue.js'),require('oncss');var ThemeProvider=require('../theme/ThemeProvider.js');require('react-state-bucket');var index=require('../AppRoot/index.js');function usePortal(children, options) {
+"use client";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var client = require('react-dom/client');
+var core = require('../theme/core.js');
+require('../css/getValue.js');
+require('oncss');
+var ThemeProvider = require('../theme/ThemeProvider.js');
+require('react-state-bucket');
+var index = require('../AppRoot/index.js');
+
+function usePortal(children, options) {
     options = options || {};
     if (options.autoMount === undefined) {
         options.autoMount = true;
@@ -22,7 +37,7 @@
         if (!cont.contains(el)) {
             cont.appendChild(el);
         }
-        root.render(jsxRuntime.jsx(ThemeProvider.default, { theme: theme.name, children: children }));
+        root.render(jsxRuntime.jsx(ThemeProvider, { theme: theme.name, children: children }));
     };
     const unmount = () => {
         root.render(null);
@@ -51,4 +66,8 @@
         mount: () => setMounted(true),
         unmount: () => setMounted(false)
     };
-}exports.default=usePortal;exports.usePortal=usePortal;//# sourceMappingURL=usePortal.js.map
+}
+
+exports.default = usePortal;
+exports.usePortal = usePortal;
+//# sourceMappingURL=usePortal.js.map

package/hooks/usePortal.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePortal.js","sources":["../../src/hooks/usePortal.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport { ThemeProvider, useTheme } from \"../theme\";\nimport { appRootElement } from \"../AppRoot\";\n\nexport type UsePortalOptions = {\n   container?: HTMLElement;\n   autoMount?: boolean;\n}\n\nexport function usePortal(children: React.ReactNode, options?: UsePortalOptions) {\n   options = options || {};\n   if (options.autoMount === undefined) {\n      options.autoMount = true;\n   }\n   const [mounted, setMounted] = React.useState(options.autoMount);\n   const theme = useTheme();\n   const { el, root } = useMemo(() => {\n      const el = document.createElement(\"div\");\n      const root = createRoot(el);\n      return { el, root };\n   }, [options.autoMount]);\n\n   const container = () => {\n      const rootEle = appRootElement();\n      const container = options?.container || rootEle\n      if (!container) throw new Error(`Container not found for portal. Please ensure that AppRoot is present in the application tree.`);\n      return container;\n   }\n\n   const mount = () => {\n      const cont = container();\n      if (!cont.contains(el)) {\n         cont.appendChild(el);\n      }\n      root.render(<ThemeProvider theme={theme.name}>{children}</ThemeProvider>)\n   }\n\n   const unmount = () => {\n      root.render(null)\n      el.remove();\n   }\n\n\n   useEffect(() => {\n      if (mounted) {\n         mount()\n      } else {\n         unmount()\n      }\n   }, [mounted]);\n\n   useEffect(() => {\n      if (mounted) {\n         mount()\n      }\n   }, [children]);\n\n   useEffect(() => {\n      return () => {\n         unmount()\n      };\n   }, []);\n\n   return {\n      isMount: () => mounted,\n      mount: () => setMounted(true),\n      unmount: () => setMounted(false)\n   }\n}\n\n\nexport default usePortal;"],"names":["useTheme","useMemo","createRoot","appRootElement","_jsx","ThemeProvider","useEffect"],"mappings":"0XAUM,SAAU,SAAS,CAAC,QAAyB,EAAE,OAA0B,EAAA;AAC5E,IAAA,OAAO,GAAG,OAAO,IAAI,EAAE;AACvB,IAAA,IAAI,OAAO,CAAC,SAAS,KAAK,SAAS,EAAE;AAClC,QAAA,OAAO,CAAC,SAAS,GAAG,IAAI;IAC3B;AACA,IAAA,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC;AAC/D,IAAA,MAAM,KAAK,GAAGA,aAAQ,EAAE;IACxB,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,GAAGC,aAAO,CAAC,MAAK;QAC/B,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AACxC,QAAA,MAAM,IAAI,GAAGC,iBAAU,CAAC,EAAE,CAAC;AAC3B,QAAA,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE;AACtB,IAAA,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IAEvB,MAAM,SAAS,GAAG,MAAK;AACpB,QAAA,MAAM,OAAO,GAAGC,oBAAc,EAAE;AAChC,QAAA,MAAM,SAAS,GAAG,CAAA,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAE,SAAS,KAAI,OAAO;AAC/C,QAAA,IAAI,CAAC,SAAS;AAAE,YAAA,MAAM,IAAI,KAAK,CAAC,CAAA,8FAAA,CAAgG,CAAC;AACjI,QAAA,OAAO,SAAS;AACnB,IAAA,CAAC;IAED,MAAM,KAAK,GAAG,MAAK;AAChB,QAAA,MAAM,IAAI,GAAG,SAAS,EAAE;QACxB,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE;AACrB,YAAA,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;QACvB;AACA,QAAA,IAAI,CAAC,MAAM,CAACC,cAAA,CAACC,qBAAa,EAAA,EAAC,KAAK,EAAE,KAAK,CAAC,IAAI,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAiB,CAAC;AAC5E,IAAA,CAAC;IAED,MAAM,OAAO,GAAG,MAAK;AAClB,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;QACjB,EAAE,CAAC,MAAM,EAAE;AACd,IAAA,CAAC;IAGDC,eAAS,CAAC,MAAK;QACZ,IAAI,OAAO,EAAE;AACV,YAAA,KAAK,EAAE;QACV;aAAO;AACJ,YAAA,OAAO,EAAE;QACZ;AACH,IAAA,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;IAEbA,eAAS,CAAC,MAAK;QACZ,IAAI,OAAO,EAAE;AACV,YAAA,KAAK,EAAE;QACV;AACH,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IAEdA,eAAS,CAAC,MAAK;AACZ,QAAA,OAAO,MAAK;AACT,YAAA,OAAO,EAAE;AACZ,QAAA,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC;IAEN,OAAO;AACJ,QAAA,OAAO,EAAE,MAAM,OAAO;AACtB,QAAA,KAAK,EAAE,MAAM,UAAU,CAAC,IAAI,CAAC;AAC7B,QAAA,OAAO,EAAE,MAAM,UAAU,CAAC,KAAK;KACjC;AACJ"}
+{"version":3,"file":"usePortal.js","sources":["../../src/hooks/usePortal.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useEffect, useMemo } from \"react\";\r\nimport { createRoot } from \"react-dom/client\";\r\nimport { ThemeProvider, useTheme } from \"../theme\";\r\nimport { appRootElement } from \"../AppRoot\";\r\n\r\nexport type UsePortalOptions = {\r\n   container?: HTMLElement;\r\n   autoMount?: boolean;\r\n}\r\n\r\nexport function usePortal(children: React.ReactNode, options?: UsePortalOptions) {\r\n   options = options || {};\r\n   if (options.autoMount === undefined) {\r\n      options.autoMount = true;\r\n   }\r\n   const [mounted, setMounted] = React.useState(options.autoMount);\r\n   const theme = useTheme();\r\n   const { el, root } = useMemo(() => {\r\n      const el = document.createElement(\"div\");\r\n      const root = createRoot(el);\r\n      return { el, root };\r\n   }, [options.autoMount]);\r\n\r\n   const container = () => {\r\n      const rootEle = appRootElement();\r\n      const container = options?.container || rootEle\r\n      if (!container) throw new Error(`Container not found for portal. Please ensure that AppRoot is present in the application tree.`);\r\n      return container;\r\n   }\r\n\r\n   const mount = () => {\r\n      const cont = container();\r\n      if (!cont.contains(el)) {\r\n         cont.appendChild(el);\r\n      }\r\n      root.render(<ThemeProvider theme={theme.name}>{children}</ThemeProvider>)\r\n   }\r\n\r\n   const unmount = () => {\r\n      root.render(null)\r\n      el.remove();\r\n   }\r\n\r\n\r\n   useEffect(() => {\r\n      if (mounted) {\r\n         mount()\r\n      } else {\r\n         unmount()\r\n      }\r\n   }, [mounted]);\r\n\r\n   useEffect(() => {\r\n      if (mounted) {\r\n         mount()\r\n      }\r\n   }, [children]);\r\n\r\n   useEffect(() => {\r\n      return () => {\r\n         unmount()\r\n      };\r\n   }, []);\r\n\r\n   return {\r\n      isMount: () => mounted,\r\n      mount: () => setMounted(true),\r\n      unmount: () => setMounted(false)\r\n   }\r\n}\r\n\r\n\r\nexport default usePortal;"],"names":[],"mappings":";;;;;;;;;;;;;;;AAWM;AACH;AACA;AACG;;AAEH;AACA;;;AAGG;AACA;AACH;;AAGG;AACA;AACA;AAAgB;AAChB;AACH;;AAGG;;AAEG;;AAEH;AACH;;AAGG;;AAEH;;;AAKM;;;AAEA;;AAEN;;;AAIM;;AAEN;;AAGG;AACG;AACH;;;AAIA;AACA;AACA;;AAEN;;;"}

package/hooks/usePortal.mjs

@@ -1,4 +1,15 @@
-import {jsx}from'react/jsx-runtime';import React__default,{useMemo,useEffect}from'react';import {createRoot}from'react-dom/client';import {useTheme}from'../theme/core.mjs';import'../css/getValue.mjs';import'oncss';import ThemeProvider from'../theme/ThemeProvider.mjs';import'react-state-bucket';import {appRootElement}from'../AppRoot/index.mjs';function usePortal(children, options) {
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React__default, { useMemo, useEffect } from 'react';
+import { createRoot } from 'react-dom/client';
+import { useTheme } from '../theme/core.mjs';
+import '../css/getValue.mjs';
+import 'oncss';
+import ThemeProvider from '../theme/ThemeProvider.mjs';
+import 'react-state-bucket';
+import { appRootElement } from '../AppRoot/index.mjs';
+
+function usePortal(children, options) {
     options = options || {};
     if (options.autoMount === undefined) {
         options.autoMount = true;
@@ -51,4 +62,7 @@ import {jsx}from'react/jsx-runtime';import React__default,{useMemo,useEffect}fro
         mount: () => setMounted(true),
         unmount: () => setMounted(false)
     };
-}export{usePortal as default,usePortal};//# sourceMappingURL=usePortal.mjs.map
+}
+
+export { usePortal as default, usePortal };
+//# sourceMappingURL=usePortal.mjs.map

package/hooks/usePortal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"usePortal.mjs","sources":["../../src/hooks/usePortal.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport { ThemeProvider, useTheme } from \"../theme\";\nimport { appRootElement } from \"../AppRoot\";\n\nexport type UsePortalOptions = {\n   container?: HTMLElement;\n   autoMount?: boolean;\n}\n\nexport function usePortal(children: React.ReactNode, options?: UsePortalOptions) {\n   options = options || {};\n   if (options.autoMount === undefined) {\n      options.autoMount = true;\n   }\n   const [mounted, setMounted] = React.useState(options.autoMount);\n   const theme = useTheme();\n   const { el, root } = useMemo(() => {\n      const el = document.createElement(\"div\");\n      const root = createRoot(el);\n      return { el, root };\n   }, [options.autoMount]);\n\n   const container = () => {\n      const rootEle = appRootElement();\n      const container = options?.container || rootEle\n      if (!container) throw new Error(`Container not found for portal. Please ensure that AppRoot is present in the application tree.`);\n      return container;\n   }\n\n   const mount = () => {\n      const cont = container();\n      if (!cont.contains(el)) {\n         cont.appendChild(el);\n      }\n      root.render(<ThemeProvider theme={theme.name}>{children}</ThemeProvider>)\n   }\n\n   const unmount = () => {\n      root.render(null)\n      el.remove();\n   }\n\n\n   useEffect(() => {\n      if (mounted) {\n         mount()\n      } else {\n         unmount()\n      }\n   }, [mounted]);\n\n   useEffect(() => {\n      if (mounted) {\n         mount()\n      }\n   }, [children]);\n\n   useEffect(() => {\n      return () => {\n         unmount()\n      };\n   }, []);\n\n   return {\n      isMount: () => mounted,\n      mount: () => setMounted(true),\n      unmount: () => setMounted(false)\n   }\n}\n\n\nexport default usePortal;"],"names":["React","_jsx"],"mappings":"yVAUM,SAAU,SAAS,CAAC,QAAyB,EAAE,OAA0B,EAAA;AAC5E,IAAA,OAAO,GAAG,OAAO,IAAI,EAAE;AACvB,IAAA,IAAI,OAAO,CAAC,SAAS,KAAK,SAAS,EAAE;AAClC,QAAA,OAAO,CAAC,SAAS,GAAG,IAAI;IAC3B;AACA,IAAA,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAGA,cAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC;AAC/D,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE;IACxB,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC,MAAK;QAC/B,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AACxC,QAAA,MAAM,IAAI,GAAG,UAAU,CAAC,EAAE,CAAC;AAC3B,QAAA,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE;AACtB,IAAA,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IAEvB,MAAM,SAAS,GAAG,MAAK;AACpB,QAAA,MAAM,OAAO,GAAG,cAAc,EAAE;AAChC,QAAA,MAAM,SAAS,GAAG,CAAA,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAE,SAAS,KAAI,OAAO;AAC/C,QAAA,IAAI,CAAC,SAAS;AAAE,YAAA,MAAM,IAAI,KAAK,CAAC,CAAA,8FAAA,CAAgG,CAAC;AACjI,QAAA,OAAO,SAAS;AACnB,IAAA,CAAC;IAED,MAAM,KAAK,GAAG,MAAK;AAChB,QAAA,MAAM,IAAI,GAAG,SAAS,EAAE;QACxB,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE;AACrB,YAAA,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;QACvB;AACA,QAAA,IAAI,CAAC,MAAM,CAACC,GAAA,CAAC,aAAa,EAAA,EAAC,KAAK,EAAE,KAAK,CAAC,IAAI,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAiB,CAAC;AAC5E,IAAA,CAAC;IAED,MAAM,OAAO,GAAG,MAAK;AAClB,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;QACjB,EAAE,CAAC,MAAM,EAAE;AACd,IAAA,CAAC;IAGD,SAAS,CAAC,MAAK;QACZ,IAAI,OAAO,EAAE;AACV,YAAA,KAAK,EAAE;QACV;aAAO;AACJ,YAAA,OAAO,EAAE;QACZ;AACH,IAAA,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;IAEb,SAAS,CAAC,MAAK;QACZ,IAAI,OAAO,EAAE;AACV,YAAA,KAAK,EAAE;QACV;AACH,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IAEd,SAAS,CAAC,MAAK;AACZ,QAAA,OAAO,MAAK;AACT,YAAA,OAAO,EAAE;AACZ,QAAA,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC;IAEN,OAAO;AACJ,QAAA,OAAO,EAAE,MAAM,OAAO;AACtB,QAAA,KAAK,EAAE,MAAM,UAAU,CAAC,IAAI,CAAC;AAC7B,QAAA,OAAO,EAAE,MAAM,UAAU,CAAC,KAAK;KACjC;AACJ"}
+{"version":3,"file":"usePortal.mjs","sources":["../../src/hooks/usePortal.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useEffect, useMemo } from \"react\";\r\nimport { createRoot } from \"react-dom/client\";\r\nimport { ThemeProvider, useTheme } from \"../theme\";\r\nimport { appRootElement } from \"../AppRoot\";\r\n\r\nexport type UsePortalOptions = {\r\n   container?: HTMLElement;\r\n   autoMount?: boolean;\r\n}\r\n\r\nexport function usePortal(children: React.ReactNode, options?: UsePortalOptions) {\r\n   options = options || {};\r\n   if (options.autoMount === undefined) {\r\n      options.autoMount = true;\r\n   }\r\n   const [mounted, setMounted] = React.useState(options.autoMount);\r\n   const theme = useTheme();\r\n   const { el, root } = useMemo(() => {\r\n      const el = document.createElement(\"div\");\r\n      const root = createRoot(el);\r\n      return { el, root };\r\n   }, [options.autoMount]);\r\n\r\n   const container = () => {\r\n      const rootEle = appRootElement();\r\n      const container = options?.container || rootEle\r\n      if (!container) throw new Error(`Container not found for portal. Please ensure that AppRoot is present in the application tree.`);\r\n      return container;\r\n   }\r\n\r\n   const mount = () => {\r\n      const cont = container();\r\n      if (!cont.contains(el)) {\r\n         cont.appendChild(el);\r\n      }\r\n      root.render(<ThemeProvider theme={theme.name}>{children}</ThemeProvider>)\r\n   }\r\n\r\n   const unmount = () => {\r\n      root.render(null)\r\n      el.remove();\r\n   }\r\n\r\n\r\n   useEffect(() => {\r\n      if (mounted) {\r\n         mount()\r\n      } else {\r\n         unmount()\r\n      }\r\n   }, [mounted]);\r\n\r\n   useEffect(() => {\r\n      if (mounted) {\r\n         mount()\r\n      }\r\n   }, [children]);\r\n\r\n   useEffect(() => {\r\n      return () => {\r\n         unmount()\r\n      };\r\n   }, []);\r\n\r\n   return {\r\n      isMount: () => mounted,\r\n      mount: () => setMounted(true),\r\n      unmount: () => setMounted(false)\r\n   }\r\n}\r\n\r\n\r\nexport default usePortal;"],"names":[],"mappings":";;;;;;;;;;;AAWM;AACH;AACA;AACG;;AAEH;AACA;;;AAGG;AACA;AACH;;AAGG;AACA;AACA;AAAgB;AAChB;AACH;;AAGG;;AAEG;;AAEH;AACH;;AAGG;;AAEH;;;AAKM;;;AAEA;;AAEN;;;AAIM;;AAEN;;AAGG;AACG;AACH;;;AAIA;AACA;AACA;;AAEN;;"}

package/hooks/useTransition/index.js

@@ -1,4 +1,14 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),React=require('react'),useAnimation=require('../useAnimation.js'),index=require('../../css/index.js'),oncss=require('oncss'),variants=require('./variants.js');const style = (obj) => {
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var useAnimation = require('../useAnimation.js');
+var index = require('../../css/index.js');
+var oncss = require('oncss');
+var variants = require('./variants.js');
+
+const style = (obj) => {
     return index.css(obj || {}, { selector: "#" }).classname;
 };
 const getVariant = (rect, variant) => {
@@ -88,4 +98,7 @@ const useTransition = (_a) => {
             'data-transition-state': open ? 'open' : 'close',
         }
     };
-};exports.default=useTransition;//# sourceMappingURL=index.js.map
+};
+
+module.exports = useTransition;
+//# sourceMappingURL=index.js.map

package/hooks/useTransition/index.js.map

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

package/hooks/useTransition/index.mjs

@@ -1,4 +1,12 @@
-import {__rest}from'tslib';import {useId,useState,useEffect}from'react';import {animationEases}from'../useAnimation.mjs';import {css}from'../../css/index.mjs';import {formatCSSProp}from'oncss';import*as variants from'./variants.mjs';const style = (obj) => {
+"use client";
+import { __rest } from 'tslib';
+import { useId, useState, useEffect } from 'react';
+import { animationEases } from '../useAnimation.mjs';
+import { css } from '../../css/index.mjs';
+import { formatCSSProp } from 'oncss';
+import * as variants from './variants.mjs';
+
+const style = (obj) => {
     return css(obj || {}, { selector: "#" }).classname;
 };
 const getVariant = (rect, variant) => {
@@ -88,4 +96,7 @@ const useTransition = (_a) => {
             'data-transition-state': open ? 'open' : 'close',
         }
     };
-};export{useTransition as default};//# sourceMappingURL=index.mjs.map
+};
+
+export { useTransition as default };
+//# sourceMappingURL=index.mjs.map