@xanui/core 1.2.7 → 1.2.9

package/hooks/useColorTemplate.js

@@ -1,33 +1,35 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var index=require('../css/index.js'),core=require('../theme/core.js');require('../theme/ThemeDefaultOptions.js'),require('../theme/ThemeProvider.js'),require('react-state-bucket');const useColorTemplate = (name, type) => {
-    const theme = core.useTheme();
-    let color = theme.colors[name];
-    let divider = theme.colors.divider.primary;
-    if (name === "common") {
-        color = Object.assign(Object.assign({}, color), { text: theme.colors.text.primary });
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});const useColorTemplate = (color, type) => {
+    const is_def = color === "default";
+    if (is_def) {
+        color = "divider";
     }
-    const if_common = (a, b) => name === "common" ? a : b;
     if (type === "outline") {
         return {
-            bgcolor: "transparent",
-            color: if_common(color.text, color.primary),
-            border: 1,
-            borderColor: divider,
-            hover: {
-                color: if_common(color.text, color.secondary),
+            primary: {
+                bgcolor: `transparent`,
+                color: is_def ? `text.primary` : `${color}.primary`,
                 border: 1,
-                borderColor: color.divider,
+                borderColor: is_def ? `divider` : `${color}.primary`,
+            },
+            secondary: {
+                bgcolor: `transparent`,
+                color: is_def ? `text.primary` : `${color}.secondary`,
+                border: 1,
+                borderColor: is_def ? `divider.secondary` : `${color}.secondary`,
             }
         };
     }
     else if (type === "fill") {
         return {
-            bgcolor: if_common(color.secondary, color.primary),
-            color: color.text,
-            border: 0,
-            borderColor: `transparent`,
-            hover: {
-                bgcolor: if_common(color.secondary, color.secondary),
-                color: color.text,
+            primary: {
+                bgcolor: color,
+                color: is_def ? `text.primary` : `${color}.text`,
+                border: 1,
+                borderColor: is_def ? `divider.secondary` : `${color}.secondary`,
+            },
+            secondary: {
+                bgcolor: `${color}.secondary`,
+                color: is_def ? `text.primary` : `${color}.text`,
                 border: 0,
                 borderColor: `transparent`,
             }
@@ -35,27 +37,31 @@
     }
     else if (type === "text") {
         return {
-            bgcolor: "transparent",
-            color: if_common(color.text, color.primary),
-            border: 0,
-            borderColor: `transparent`,
-            hover: {
-                bgcolor: if_common(color.secondary, index.alpha(color.primary, 0.09)),
-                color: if_common(color.text, color.primary),
+            primary: {
+                bgcolor: "transparent",
+                color: is_def ? `text.primary` : `${color}.primary`,
+                border: 0,
+                borderColor: `transparent`,
+            },
+            secondary: {
+                bgcolor: "transparent",
+                color: is_def ? `text.primary` : `${color}.secondary`,
                 border: 0,
                 borderColor: `transparent`,
             }
         };
     }
-    else if (type === "alpha") {
+    else if (type === "soft") {
         return {
-            bgcolor: if_common(color.secondary, index.alpha(color.primary, 0.09)),
-            color: if_common(color.text, color.primary),
-            border: 0,
-            borderColor: `transparent`,
-            hover: {
-                bgcolor: if_common(color.secondary, index.alpha(color.primary, 0.15)),
-                color: if_common(color.text, color.primary),
+            primary: {
+                bgcolor: `${color}.soft.primary`,
+                color: is_def ? `text.primary` : color,
+                border: 0,
+                borderColor: `transparent`,
+            },
+            secondary: {
+                bgcolor: `${color}.soft.secondary`,
+                color: is_def ? `text.primary` : `${color}.secondary`,
                 border: 0,
                 borderColor: `transparent`,
             }

package/hooks/useColorTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"useColorTemplate.js","sources":["../../src/hooks/useColorTemplate.ts"],"sourcesContent":["import { alpha } from \"../css\"\r\nimport { useTheme } from \"../theme\"\r\nimport { ThemeColor } from \"../theme/types\"\r\n\r\nexport type UseColorTemplateType = \"fill\" | \"outline\" | \"text\" | \"alpha\"\r\nexport type UseColorTemplateColor = \"common\" | \"brand\" | \"accent\" | \"success\" | \"info\" | \"warning\" | \"danger\"\r\n\r\nconst useColorTemplate = (name: keyof ThemeColor, type: UseColorTemplateType) => {\r\n    const theme = useTheme()\r\n    let color: any = theme.colors[name]\r\n    let divider = theme.colors.divider.primary\r\n\r\n    if (name === \"common\") {\r\n        color = {\r\n            ...color,\r\n            text: theme.colors.text.primary,\r\n        }\r\n    }\r\n\r\n    const if_common = (a: string, b: string) => name === \"common\" ? a : b\r\n\r\n    if (type === \"outline\") {\r\n        return {\r\n            bgcolor: \"transparent\",\r\n            color: if_common(color.text, color.primary),\r\n            border: 1,\r\n            borderColor: divider,\r\n            hover: {\r\n                color: if_common(color.text, color.secondary),\r\n                border: 1,\r\n                borderColor: color.divider,\r\n            }\r\n        }\r\n    } else if (type === \"fill\") {\r\n        return {\r\n            bgcolor: if_common(color.secondary, color.primary),\r\n            color: color.text,\r\n            border: 0,\r\n            borderColor: `transparent`,\r\n            hover: {\r\n                bgcolor: if_common(color.secondary, color.secondary),\r\n                color: color.text,\r\n                border: 0,\r\n                borderColor: `transparent`,\r\n            }\r\n        }\r\n    } else if (type === \"text\") {\r\n        return {\r\n            bgcolor: \"transparent\",\r\n            color: if_common(color.text, color.primary),\r\n            border: 0,\r\n            borderColor: `transparent`,\r\n            hover: {\r\n                bgcolor: if_common(color.secondary, alpha(color.primary, 0.09)),\r\n                color: if_common(color.text, color.primary),\r\n                border: 0,\r\n                borderColor: `transparent`,\r\n            }\r\n        }\r\n    } else if (type === \"alpha\") {\r\n        return {\r\n            bgcolor: if_common(color.secondary, alpha(color.primary, 0.09)),\r\n            color: if_common(color.text, color.primary),\r\n            border: 0,\r\n            borderColor: `transparent`,\r\n            hover: {\r\n                bgcolor: if_common(color.secondary, alpha(color.primary, 0.15)),\r\n                color: if_common(color.text, color.primary),\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":["useTheme","alpha"],"mappings":"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"}
+{"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: 0,\n                borderColor: `transparent`,\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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"}

package/hooks/useColorTemplate.mjs

@@ -1,33 +1,35 @@
-import {alpha}from'../css/index.mjs';import {useTheme}from'../theme/core.mjs';import'../theme/ThemeDefaultOptions.mjs';import'../theme/ThemeProvider.mjs';import'react-state-bucket';const useColorTemplate = (name, type) => {
-    const theme = useTheme();
-    let color = theme.colors[name];
-    let divider = theme.colors.divider.primary;
-    if (name === "common") {
-        color = Object.assign(Object.assign({}, color), { text: theme.colors.text.primary });
+const useColorTemplate = (color, type) => {
+    const is_def = color === "default";
+    if (is_def) {
+        color = "divider";
     }
-    const if_common = (a, b) => name === "common" ? a : b;
     if (type === "outline") {
         return {
-            bgcolor: "transparent",
-            color: if_common(color.text, color.primary),
-            border: 1,
-            borderColor: divider,
-            hover: {
-                color: if_common(color.text, color.secondary),
+            primary: {
+                bgcolor: `transparent`,
+                color: is_def ? `text.primary` : `${color}.primary`,
                 border: 1,
-                borderColor: color.divider,
+                borderColor: is_def ? `divider` : `${color}.primary`,
+            },
+            secondary: {
+                bgcolor: `transparent`,
+                color: is_def ? `text.primary` : `${color}.secondary`,
+                border: 1,
+                borderColor: is_def ? `divider.secondary` : `${color}.secondary`,
             }
         };
     }
     else if (type === "fill") {
         return {
-            bgcolor: if_common(color.secondary, color.primary),
-            color: color.text,
-            border: 0,
-            borderColor: `transparent`,
-            hover: {
-                bgcolor: if_common(color.secondary, color.secondary),
-                color: color.text,
+            primary: {
+                bgcolor: color,
+                color: is_def ? `text.primary` : `${color}.text`,
+                border: 1,
+                borderColor: is_def ? `divider.secondary` : `${color}.secondary`,
+            },
+            secondary: {
+                bgcolor: `${color}.secondary`,
+                color: is_def ? `text.primary` : `${color}.text`,
                 border: 0,
                 borderColor: `transparent`,
             }
@@ -35,27 +37,31 @@ import {alpha}from'../css/index.mjs';import {useTheme}from'../theme/core.mjs';im
     }
     else if (type === "text") {
         return {
-            bgcolor: "transparent",
-            color: if_common(color.text, color.primary),
-            border: 0,
-            borderColor: `transparent`,
-            hover: {
-                bgcolor: if_common(color.secondary, alpha(color.primary, 0.09)),
-                color: if_common(color.text, color.primary),
+            primary: {
+                bgcolor: "transparent",
+                color: is_def ? `text.primary` : `${color}.primary`,
+                border: 0,
+                borderColor: `transparent`,
+            },
+            secondary: {
+                bgcolor: "transparent",
+                color: is_def ? `text.primary` : `${color}.secondary`,
                 border: 0,
                 borderColor: `transparent`,
             }
         };
     }
-    else if (type === "alpha") {
+    else if (type === "soft") {
         return {
-            bgcolor: if_common(color.secondary, alpha(color.primary, 0.09)),
-            color: if_common(color.text, color.primary),
-            border: 0,
-            borderColor: `transparent`,
-            hover: {
-                bgcolor: if_common(color.secondary, alpha(color.primary, 0.15)),
-                color: if_common(color.text, color.primary),
+            primary: {
+                bgcolor: `${color}.soft.primary`,
+                color: is_def ? `text.primary` : color,
+                border: 0,
+                borderColor: `transparent`,
+            },
+            secondary: {
+                bgcolor: `${color}.soft.secondary`,
+                color: is_def ? `text.primary` : `${color}.secondary`,
                 border: 0,
                 borderColor: `transparent`,
             }

package/hooks/useColorTemplate.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useColorTemplate.mjs","sources":["../../src/hooks/useColorTemplate.ts"],"sourcesContent":["import { alpha } from \"../css\"\r\nimport { useTheme } from \"../theme\"\r\nimport { ThemeColor } from \"../theme/types\"\r\n\r\nexport type UseColorTemplateType = \"fill\" | \"outline\" | \"text\" | \"alpha\"\r\nexport type UseColorTemplateColor = \"common\" | \"brand\" | \"accent\" | \"success\" | \"info\" | \"warning\" | \"danger\"\r\n\r\nconst useColorTemplate = (name: keyof ThemeColor, type: UseColorTemplateType) => {\r\n    const theme = useTheme()\r\n    let color: any = theme.colors[name]\r\n    let divider = theme.colors.divider.primary\r\n\r\n    if (name === \"common\") {\r\n        color = {\r\n            ...color,\r\n            text: theme.colors.text.primary,\r\n        }\r\n    }\r\n\r\n    const if_common = (a: string, b: string) => name === \"common\" ? a : b\r\n\r\n    if (type === \"outline\") {\r\n        return {\r\n            bgcolor: \"transparent\",\r\n            color: if_common(color.text, color.primary),\r\n            border: 1,\r\n            borderColor: divider,\r\n            hover: {\r\n                color: if_common(color.text, color.secondary),\r\n                border: 1,\r\n                borderColor: color.divider,\r\n            }\r\n        }\r\n    } else if (type === \"fill\") {\r\n        return {\r\n            bgcolor: if_common(color.secondary, color.primary),\r\n            color: color.text,\r\n            border: 0,\r\n            borderColor: `transparent`,\r\n            hover: {\r\n                bgcolor: if_common(color.secondary, color.secondary),\r\n                color: color.text,\r\n                border: 0,\r\n                borderColor: `transparent`,\r\n            }\r\n        }\r\n    } else if (type === \"text\") {\r\n        return {\r\n            bgcolor: \"transparent\",\r\n            color: if_common(color.text, color.primary),\r\n            border: 0,\r\n            borderColor: `transparent`,\r\n            hover: {\r\n                bgcolor: if_common(color.secondary, alpha(color.primary, 0.09)),\r\n                color: if_common(color.text, color.primary),\r\n                border: 0,\r\n                borderColor: `transparent`,\r\n            }\r\n        }\r\n    } else if (type === \"alpha\") {\r\n        return {\r\n            bgcolor: if_common(color.secondary, alpha(color.primary, 0.09)),\r\n            color: if_common(color.text, color.primary),\r\n            border: 0,\r\n            borderColor: `transparent`,\r\n            hover: {\r\n                bgcolor: if_common(color.secondary, alpha(color.primary, 0.15)),\r\n                color: if_common(color.text, color.primary),\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":"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"}
+{"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: 0,\n                borderColor: `transparent`,\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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"}

package/hooks/useInterface.d.ts

@@ -1,5 +1,5 @@
 import { ThemeOptions } from '../theme/types.js';
 
-declare const useInterface: <P extends object>(name: string, userPorps: P, defaultProps: P) => (ThemeOptions | P)[];
+declare const useInterface: <P extends object>(name: string, userPorps: P, defaultProps: P) => (P | ThemeOptions)[];
 
 export { useInterface as default };

package/hooks/useInterface.js

@@ -1,4 +1,4 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var core=require('../theme/core.js');require('../css/getValue.js'),require('oncss'),require('../theme/ThemeDefaultOptions.js'),require('../theme/ThemeProvider.js'),require('react-state-bucket');const useInterface = (name, userPorps, defaultProps) => {
+'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) => {
     const theme = core.useTheme();
     const _interface = theme.interfaces[name];
     if (_interface) {

package/hooks/useInterface.js.map

@@ -1 +1 @@
-{"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    const _interface = theme.interfaces[name]\r\n\r\n    if (_interface) {\r\n        defaultProps = _interface<P>({ ...defaultProps, ...userPorps }, theme)\r\n    }\r\n    return [{ ...defaultProps, ...userPorps }, theme]\r\n}\r\n\r\nexport default useInterface"],"names":["useTheme"],"mappings":"wQAEA,MAAM,YAAY,GAAG,CAAmB,IAAY,EAAE,SAAY,EAAE,YAAe,KAAI;AACnF,IAAA,MAAM,KAAK,GAAGA,aAAQ,EAAE;IACxB,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC;IAEzC,IAAI,UAAU,EAAE;QACZ,YAAY,GAAG,UAAU,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAS,YAAY,GAAK,SAAS,CAAA,EAAI,KAAK,CAAC;IAC1E;AACA,IAAA,OAAO,iCAAM,YAAY,CAAA,EAAK,SAAS,CAAA,EAAI,KAAK,CAAC;AACrD"}
+{"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    const _interface = theme.interfaces[name]\n\n    if (_interface) {\n        defaultProps = _interface<P>({ ...defaultProps, ...userPorps }, theme)\n    }\n    return [{ ...defaultProps, ...userPorps }, 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;IACxB,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC;IAEzC,IAAI,UAAU,EAAE;QACZ,YAAY,GAAG,UAAU,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAS,YAAY,GAAK,SAAS,CAAA,EAAI,KAAK,CAAC;IAC1E;AACA,IAAA,OAAO,iCAAM,YAAY,CAAA,EAAK,SAAS,CAAA,EAAI,KAAK,CAAC;AACrD"}

package/hooks/useInterface.mjs

@@ -1,4 +1,4 @@
-import {useTheme}from'../theme/core.mjs';import'../css/getValue.mjs';import'oncss';import'../theme/ThemeDefaultOptions.mjs';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();
     const _interface = theme.interfaces[name];
     if (_interface) {

package/hooks/useInterface.mjs.map

@@ -1 +1 @@
-{"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    const _interface = theme.interfaces[name]\r\n\r\n    if (_interface) {\r\n        defaultProps = _interface<P>({ ...defaultProps, ...userPorps }, theme)\r\n    }\r\n    return [{ ...defaultProps, ...userPorps }, theme]\r\n}\r\n\r\nexport default useInterface"],"names":[],"mappings":"0LAEA,MAAM,YAAY,GAAG,CAAmB,IAAY,EAAE,SAAY,EAAE,YAAe,KAAI;AACnF,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE;IACxB,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC;IAEzC,IAAI,UAAU,EAAE;QACZ,YAAY,GAAG,UAAU,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAS,YAAY,GAAK,SAAS,CAAA,EAAI,KAAK,CAAC;IAC1E;AACA,IAAA,OAAO,iCAAM,YAAY,CAAA,EAAK,SAAS,CAAA,EAAI,KAAK,CAAC;AACrD"}
+{"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    const _interface = theme.interfaces[name]\n\n    if (_interface) {\n        defaultProps = _interface<P>({ ...defaultProps, ...userPorps }, theme)\n    }\n    return [{ ...defaultProps, ...userPorps }, 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;IACxB,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC;IAEzC,IAAI,UAAU,EAAE;QACZ,YAAY,GAAG,UAAU,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAS,YAAY,GAAK,SAAS,CAAA,EAAI,KAAK,CAAC;IAC1E;AACA,IAAA,OAAO,iCAAM,YAAY,CAAA,EAAK,SAAS,CAAA,EAAI,KAAK,CAAC;AACrD"}

package/hooks/usePortal.js

@@ -1,4 +1,4 @@
-'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'),require('../theme/ThemeDefaultOptions.js');var ThemeProvider=require('../theme/ThemeProvider.js');require('react-state-bucket');var index=require('../AppRoot/index.js');function usePortal(children, options) {
+'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) {
     options = options || {};
     if (options.autoMount === undefined) {
         options.autoMount = true;

package/hooks/usePortal.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePortal.js","sources":["../../src/hooks/usePortal.tsx"],"sourcesContent":["import 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":["useTheme","useMemo","createRoot","appRootElement","_jsx","ThemeProvider","useEffect"],"mappings":"qaAUM,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":["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"}

package/hooks/usePortal.mjs

@@ -1,4 +1,4 @@
-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'../theme/ThemeDefaultOptions.mjs';import ThemeProvider from'../theme/ThemeProvider.mjs';import'react-state-bucket';import {appRootElement}from'../AppRoot/index.mjs';function usePortal(children, options) {
+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;

package/hooks/usePortal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"usePortal.mjs","sources":["../../src/hooks/usePortal.tsx"],"sourcesContent":["import 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":["React","_jsx"],"mappings":"kYAUM,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":["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"}

package/hooks/useScrollbar.d.ts

@@ -1,12 +1,11 @@
 type UseScrollbarOption = {
-    themeName: string;
     root_cls?: string;
     thumbSize?: number;
     thumbColor?: string;
     trackColor?: string;
 };
 type ClassName = string;
-declare const useScrollbar: ({ themeName, root_cls, thumbSize, thumbColor, trackColor }: UseScrollbarOption) => ClassName;
+declare const useScrollbar: ({ root_cls, thumbSize, thumbColor, trackColor }: UseScrollbarOption) => ClassName;
 
 export { useScrollbar as default };
 export type { UseScrollbarOption };

package/hooks/useScrollbar.js

@@ -1,42 +1,30 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var core=require('../theme/core.js'),index=require('../css/index.js');require('../theme/ThemeDefaultOptions.js'),require('../theme/ThemeProvider.js'),require('react-state-bucket');const useScrollbar = ({ themeName, root_cls, thumbSize, thumbColor, trackColor }) => {
-    let theme = core.getTheme(themeName);
-    if (!theme) {
-        console.error(`useScrollbar: The theme '${themeName}' is not defined. Please make sure to use a valid theme name.`);
-        theme = core.getTheme("light");
-    }
-    thumbSize = thumbSize || 12;
-    thumbColor = thumbColor || theme.colors.divider.secondary;
-    trackColor = trackColor || theme.colors.divider.primary;
-    root_cls = root_cls || "";
-    let clss = {
-        "*": root_cls ? `${root_cls} *` : `*`,
-        "scrollbar": root_cls ? `${root_cls}::-webkit-scrollbar, ${root_cls} ::-webkit-scrollbar` : `::-webkit-scrollbar`,
-        "scrollbarThumb": root_cls ? `${root_cls}::-webkit-scrollbar-thumb, ${root_cls} ::-webkit-scrollbar-thumb` : `::-webkit-scrollbar-thumb`,
-        "scrollbarThumbHover": root_cls ? `${root_cls}::-webkit-scrollbar-thumb:hover, ${root_cls} ::-webkit-scrollbar-thumb:hover` : `::-webkit-scrollbar-thumb:hover`,
-        "scrollbarTrack": root_cls ? `${root_cls}::-webkit-scrollbar-track, ${root_cls} ::-webkit-scrollbar-track` : `::-webkit-scrollbar-track`,
-    };
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var index=require('../css/index.js');const useScrollbar = ({ root_cls, thumbSize, thumbColor, trackColor }) => {
+    thumbSize = thumbSize || 8;
+    thumbColor = thumbColor || "var(--color-common-subtext)";
+    trackColor = trackColor || "var(--color-common-lighter)";
+    const cls = (cls) => root_cls ? `${root_cls} ${cls}` : cls;
     return index.css({
         "@global": {
-            [clss['*']]: {
-                scrollbarWidth: "thin",
-                scrollbarColor: `${thumbColor} ${trackColor}`,
-            },
-            [clss["scrollbar"]]: {
+            [cls('*::-webkit-scrollbar')]: {
                 width: thumbSize,
                 height: thumbSize,
+                cursor: "pointer",
             },
-            [clss["scrollbarThumb"]]: {
+            [cls("*::-webkit-scrollbar-thumb")]: {
                 backgroundColor: thumbColor,
                 borderRadius: "6px",
-                border: `2px solid ${theme.colors.common.primary}`,
             },
-            [clss["scrollbarThumbHover"]]: {
+            [cls("*::-webkit-scrollbar-thumb:hover")]: {
                 backgroundColor: thumbColor,
             },
-            [clss['scrollbarTrack']]: {
+            [cls("*::-webkit-scrollbar-track")]: {
                 backgroundColor: trackColor,
                 borderRadius: "6px",
             },
+            // [cls('*')]: {
+            //    scrollbarWidth: "thin",
+            //    scrollbarColor: `${thumbColor} ${trackColor}`,
+            // },
         }
     }, {
         injectStyle: typeof window !== 'undefined'

package/hooks/useScrollbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollbar.js","sources":["../../src/hooks/useScrollbar.ts"],"sourcesContent":["import { getTheme } from '../theme'\r\nimport { css } from '../css'\r\nimport { ThemeOptions } from '../theme/types';\r\n\r\nexport type UseScrollbarOption = {\r\n   themeName: string\r\n   root_cls?: string;\r\n   thumbSize?: number\r\n   thumbColor?: string\r\n   trackColor?: string\r\n}\r\n\r\ntype ClassName = string\r\n\r\nconst useScrollbar = ({ themeName, root_cls, thumbSize, thumbColor, trackColor }: UseScrollbarOption): ClassName => {\r\n   let theme = getTheme(themeName)\r\n   if (!theme) {\r\n      console.error(`useScrollbar: The theme '${themeName}' is not defined. Please make sure to use a valid theme name.`)\r\n      theme = getTheme(\"light\") as ThemeOptions\r\n   }\r\n\r\n   thumbSize = thumbSize || 12\r\n   thumbColor = thumbColor || theme.colors.divider.secondary\r\n   trackColor = trackColor || theme.colors.divider.primary\r\n   root_cls = root_cls || \"\"\r\n\r\n   let clss = {\r\n      \"*\": root_cls ? `${root_cls} *` : `*`,\r\n      \"scrollbar\": root_cls ? `${root_cls}::-webkit-scrollbar, ${root_cls} ::-webkit-scrollbar` : `::-webkit-scrollbar`,\r\n      \"scrollbarThumb\": root_cls ? `${root_cls}::-webkit-scrollbar-thumb, ${root_cls} ::-webkit-scrollbar-thumb` : `::-webkit-scrollbar-thumb`,\r\n      \"scrollbarThumbHover\": root_cls ? `${root_cls}::-webkit-scrollbar-thumb:hover, ${root_cls} ::-webkit-scrollbar-thumb:hover` : `::-webkit-scrollbar-thumb:hover`,\r\n      \"scrollbarTrack\": root_cls ? `${root_cls}::-webkit-scrollbar-track, ${root_cls} ::-webkit-scrollbar-track` : `::-webkit-scrollbar-track`,\r\n   }\r\n\r\n   return css({\r\n      \"@global\": {\r\n         [clss['*']]: {\r\n            scrollbarWidth: \"thin\",\r\n            scrollbarColor: `${thumbColor} ${trackColor}`,\r\n         },\r\n         [clss[\"scrollbar\"]]: {\r\n            width: thumbSize,\r\n            height: thumbSize,\r\n         },\r\n         [clss[\"scrollbarThumb\"]]: {\r\n            backgroundColor: thumbColor,\r\n            borderRadius: \"6px\",\r\n            border: `2px solid ${theme.colors.common.primary}`,\r\n         },\r\n         [clss[\"scrollbarThumbHover\"]]: {\r\n            backgroundColor: thumbColor,\r\n         },\r\n         [clss['scrollbarTrack']]: {\r\n            backgroundColor: trackColor,\r\n            borderRadius: \"6px\",\r\n         },\r\n      }\r\n   }, {\r\n      injectStyle: typeof window !== 'undefined'\r\n   }) as any\r\n}\r\n\r\nexport default useScrollbar\r\n"],"names":["getTheme","css"],"mappings":"0PAcA,MAAM,YAAY,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAsB,KAAe;AAChH,IAAA,IAAI,KAAK,GAAGA,aAAQ,CAAC,SAAS,CAAC;IAC/B,IAAI,CAAC,KAAK,EAAE;AACT,QAAA,OAAO,CAAC,KAAK,CAAC,4BAA4B,SAAS,CAAA,6DAAA,CAA+D,CAAC;AACnH,QAAA,KAAK,GAAGA,aAAQ,CAAC,OAAO,CAAiB;IAC5C;AAEA,IAAA,SAAS,GAAG,SAAS,IAAI,EAAE;IAC3B,UAAU,GAAG,UAAU,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS;IACzD,UAAU,GAAG,UAAU,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO;AACvD,IAAA,QAAQ,GAAG,QAAQ,IAAI,EAAE;AAEzB,IAAA,IAAI,IAAI,GAAG;QACR,GAAG,EAAE,QAAQ,GAAG,CAAA,EAAG,QAAQ,CAAA,EAAA,CAAI,GAAG,CAAA,CAAA,CAAG;AACrC,QAAA,WAAW,EAAE,QAAQ,GAAG,CAAA,EAAG,QAAQ,CAAA,qBAAA,EAAwB,QAAQ,CAAA,oBAAA,CAAsB,GAAG,CAAA,mBAAA,CAAqB;AACjH,QAAA,gBAAgB,EAAE,QAAQ,GAAG,CAAA,EAAG,QAAQ,CAAA,2BAAA,EAA8B,QAAQ,CAAA,0BAAA,CAA4B,GAAG,CAAA,yBAAA,CAA2B;AACxI,QAAA,qBAAqB,EAAE,QAAQ,GAAG,CAAA,EAAG,QAAQ,CAAA,iCAAA,EAAoC,QAAQ,CAAA,gCAAA,CAAkC,GAAG,CAAA,+BAAA,CAAiC;AAC/J,QAAA,gBAAgB,EAAE,QAAQ,GAAG,CAAA,EAAG,QAAQ,CAAA,2BAAA,EAA8B,QAAQ,CAAA,0BAAA,CAA4B,GAAG,CAAA,yBAAA,CAA2B;KAC1I;AAED,IAAA,OAAOC,SAAG,CAAC;AACR,QAAA,SAAS,EAAE;AACR,YAAA,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG;AACV,gBAAA,cAAc,EAAE,MAAM;AACtB,gBAAA,cAAc,EAAE,CAAA,EAAG,UAAU,CAAA,CAAA,EAAI,UAAU,CAAA,CAAE;AAC/C,aAAA;AACD,YAAA,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG;AAClB,gBAAA,KAAK,EAAE,SAAS;AAChB,gBAAA,MAAM,EAAE,SAAS;AACnB,aAAA;AACD,YAAA,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG;AACvB,gBAAA,eAAe,EAAE,UAAU;AAC3B,gBAAA,YAAY,EAAE,KAAK;gBACnB,MAAM,EAAE,aAAa,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAA,CAAE;AACpD,aAAA;AACD,YAAA,CAAC,IAAI,CAAC,qBAAqB,CAAC,GAAG;AAC5B,gBAAA,eAAe,EAAE,UAAU;AAC7B,aAAA;AACD,YAAA,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG;AACvB,gBAAA,eAAe,EAAE,UAAU;AAC3B,gBAAA,YAAY,EAAE,KAAK;AACrB,aAAA;AACH;KACH,EAAE;AACA,QAAA,WAAW,EAAE,OAAO,MAAM,KAAK;AACjC,KAAA,CAAQ;AACZ"}
+{"version":3,"file":"useScrollbar.js","sources":["../../src/hooks/useScrollbar.ts"],"sourcesContent":["import { css } from '../css'\n\nexport type UseScrollbarOption = {\n   root_cls?: string;\n   thumbSize?: number\n   thumbColor?: string\n   trackColor?: string;\n}\n\ntype ClassName = string\n\nconst useScrollbar = ({ root_cls, thumbSize, thumbColor, trackColor }: UseScrollbarOption): ClassName => {\n\n   thumbSize = thumbSize || 8\n   thumbColor = thumbColor || \"var(--color-common-subtext)\"\n   trackColor = trackColor || \"var(--color-common-lighter)\"\n\n   const cls = (cls: string) => root_cls ? `${root_cls} ${cls}` : cls\n\n   return css({\n      \"@global\": {\n\n         [cls('*::-webkit-scrollbar')]: {\n            width: thumbSize,\n            height: thumbSize,\n            cursor: \"pointer\",\n         },\n         [cls(\"*::-webkit-scrollbar-thumb\")]: {\n            backgroundColor: thumbColor,\n            borderRadius: \"6px\",\n         },\n         [cls(\"*::-webkit-scrollbar-thumb:hover\")]: {\n            backgroundColor: thumbColor,\n         },\n         [cls(\"*::-webkit-scrollbar-track\")]: {\n            backgroundColor: trackColor,\n            borderRadius: \"6px\",\n         },\n         // [cls('*')]: {\n         //    scrollbarWidth: \"thin\",\n         //    scrollbarColor: `${thumbColor} ${trackColor}`,\n         // },\n      }\n   }, {\n      injectStyle: typeof window !== 'undefined'\n   }) as any\n}\n\nexport default useScrollbar\n"],"names":["css"],"mappings":"2GAWA,MAAM,YAAY,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAsB,KAAe;AAErG,IAAA,SAAS,GAAG,SAAS,IAAI,CAAC;AAC1B,IAAA,UAAU,GAAG,UAAU,IAAI,6BAA6B;AACxD,IAAA,UAAU,GAAG,UAAU,IAAI,6BAA6B;IAExD,MAAM,GAAG,GAAG,CAAC,GAAW,KAAK,QAAQ,GAAG,CAAA,EAAG,QAAQ,IAAI,GAAG,CAAA,CAAE,GAAG,GAAG;AAElE,IAAA,OAAOA,SAAG,CAAC;AACR,QAAA,SAAS,EAAE;AAER,YAAA,CAAC,GAAG,CAAC,sBAAsB,CAAC,GAAG;AAC5B,gBAAA,KAAK,EAAE,SAAS;AAChB,gBAAA,MAAM,EAAE,SAAS;AACjB,gBAAA,MAAM,EAAE,SAAS;AACnB,aAAA;AACD,YAAA,CAAC,GAAG,CAAC,4BAA4B,CAAC,GAAG;AAClC,gBAAA,eAAe,EAAE,UAAU;AAC3B,gBAAA,YAAY,EAAE,KAAK;AACrB,aAAA;AACD,YAAA,CAAC,GAAG,CAAC,kCAAkC,CAAC,GAAG;AACxC,gBAAA,eAAe,EAAE,UAAU;AAC7B,aAAA;AACD,YAAA,CAAC,GAAG,CAAC,4BAA4B,CAAC,GAAG;AAClC,gBAAA,eAAe,EAAE,UAAU;AAC3B,gBAAA,YAAY,EAAE,KAAK;AACrB,aAAA;;;;;AAKH;KACH,EAAE;AACA,QAAA,WAAW,EAAE,OAAO,MAAM,KAAK;AACjC,KAAA,CAAQ;AACZ"}

package/hooks/useScrollbar.mjs

@@ -1,42 +1,30 @@
-import {getTheme}from'../theme/core.mjs';import {css}from'../css/index.mjs';import'../theme/ThemeDefaultOptions.mjs';import'../theme/ThemeProvider.mjs';import'react-state-bucket';const useScrollbar = ({ themeName, root_cls, thumbSize, thumbColor, trackColor }) => {
-    let theme = getTheme(themeName);
-    if (!theme) {
-        console.error(`useScrollbar: The theme '${themeName}' is not defined. Please make sure to use a valid theme name.`);
-        theme = getTheme("light");
-    }
-    thumbSize = thumbSize || 12;
-    thumbColor = thumbColor || theme.colors.divider.secondary;
-    trackColor = trackColor || theme.colors.divider.primary;
-    root_cls = root_cls || "";
-    let clss = {
-        "*": root_cls ? `${root_cls} *` : `*`,
-        "scrollbar": root_cls ? `${root_cls}::-webkit-scrollbar, ${root_cls} ::-webkit-scrollbar` : `::-webkit-scrollbar`,
-        "scrollbarThumb": root_cls ? `${root_cls}::-webkit-scrollbar-thumb, ${root_cls} ::-webkit-scrollbar-thumb` : `::-webkit-scrollbar-thumb`,
-        "scrollbarThumbHover": root_cls ? `${root_cls}::-webkit-scrollbar-thumb:hover, ${root_cls} ::-webkit-scrollbar-thumb:hover` : `::-webkit-scrollbar-thumb:hover`,
-        "scrollbarTrack": root_cls ? `${root_cls}::-webkit-scrollbar-track, ${root_cls} ::-webkit-scrollbar-track` : `::-webkit-scrollbar-track`,
-    };
+import {css}from'../css/index.mjs';const useScrollbar = ({ root_cls, thumbSize, thumbColor, trackColor }) => {
+    thumbSize = thumbSize || 8;
+    thumbColor = thumbColor || "var(--color-common-subtext)";
+    trackColor = trackColor || "var(--color-common-lighter)";
+    const cls = (cls) => root_cls ? `${root_cls} ${cls}` : cls;
     return css({
         "@global": {
-            [clss['*']]: {
-                scrollbarWidth: "thin",
-                scrollbarColor: `${thumbColor} ${trackColor}`,
-            },
-            [clss["scrollbar"]]: {
+            [cls('*::-webkit-scrollbar')]: {
                 width: thumbSize,
                 height: thumbSize,
+                cursor: "pointer",
             },
-            [clss["scrollbarThumb"]]: {
+            [cls("*::-webkit-scrollbar-thumb")]: {
                 backgroundColor: thumbColor,
                 borderRadius: "6px",
-                border: `2px solid ${theme.colors.common.primary}`,
             },
-            [clss["scrollbarThumbHover"]]: {
+            [cls("*::-webkit-scrollbar-thumb:hover")]: {
                 backgroundColor: thumbColor,
             },
-            [clss['scrollbarTrack']]: {
+            [cls("*::-webkit-scrollbar-track")]: {
                 backgroundColor: trackColor,
                 borderRadius: "6px",
             },
+            // [cls('*')]: {
+            //    scrollbarWidth: "thin",
+            //    scrollbarColor: `${thumbColor} ${trackColor}`,
+            // },
         }
     }, {
         injectStyle: typeof window !== 'undefined'

package/hooks/useScrollbar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollbar.mjs","sources":["../../src/hooks/useScrollbar.ts"],"sourcesContent":["import { getTheme } from '../theme'\r\nimport { css } from '../css'\r\nimport { ThemeOptions } from '../theme/types';\r\n\r\nexport type UseScrollbarOption = {\r\n   themeName: string\r\n   root_cls?: string;\r\n   thumbSize?: number\r\n   thumbColor?: string\r\n   trackColor?: string\r\n}\r\n\r\ntype ClassName = string\r\n\r\nconst useScrollbar = ({ themeName, root_cls, thumbSize, thumbColor, trackColor }: UseScrollbarOption): ClassName => {\r\n   let theme = getTheme(themeName)\r\n   if (!theme) {\r\n      console.error(`useScrollbar: The theme '${themeName}' is not defined. Please make sure to use a valid theme name.`)\r\n      theme = getTheme(\"light\") as ThemeOptions\r\n   }\r\n\r\n   thumbSize = thumbSize || 12\r\n   thumbColor = thumbColor || theme.colors.divider.secondary\r\n   trackColor = trackColor || theme.colors.divider.primary\r\n   root_cls = root_cls || \"\"\r\n\r\n   let clss = {\r\n      \"*\": root_cls ? `${root_cls} *` : `*`,\r\n      \"scrollbar\": root_cls ? `${root_cls}::-webkit-scrollbar, ${root_cls} ::-webkit-scrollbar` : `::-webkit-scrollbar`,\r\n      \"scrollbarThumb\": root_cls ? `${root_cls}::-webkit-scrollbar-thumb, ${root_cls} ::-webkit-scrollbar-thumb` : `::-webkit-scrollbar-thumb`,\r\n      \"scrollbarThumbHover\": root_cls ? `${root_cls}::-webkit-scrollbar-thumb:hover, ${root_cls} ::-webkit-scrollbar-thumb:hover` : `::-webkit-scrollbar-thumb:hover`,\r\n      \"scrollbarTrack\": root_cls ? `${root_cls}::-webkit-scrollbar-track, ${root_cls} ::-webkit-scrollbar-track` : `::-webkit-scrollbar-track`,\r\n   }\r\n\r\n   return css({\r\n      \"@global\": {\r\n         [clss['*']]: {\r\n            scrollbarWidth: \"thin\",\r\n            scrollbarColor: `${thumbColor} ${trackColor}`,\r\n         },\r\n         [clss[\"scrollbar\"]]: {\r\n            width: thumbSize,\r\n            height: thumbSize,\r\n         },\r\n         [clss[\"scrollbarThumb\"]]: {\r\n            backgroundColor: thumbColor,\r\n            borderRadius: \"6px\",\r\n            border: `2px solid ${theme.colors.common.primary}`,\r\n         },\r\n         [clss[\"scrollbarThumbHover\"]]: {\r\n            backgroundColor: thumbColor,\r\n         },\r\n         [clss['scrollbarTrack']]: {\r\n            backgroundColor: trackColor,\r\n            borderRadius: \"6px\",\r\n         },\r\n      }\r\n   }, {\r\n      injectStyle: typeof window !== 'undefined'\r\n   }) as any\r\n}\r\n\r\nexport default useScrollbar\r\n"],"names":[],"mappings":"mLAcA,MAAM,YAAY,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAsB,KAAe;AAChH,IAAA,IAAI,KAAK,GAAG,QAAQ,CAAC,SAAS,CAAC;IAC/B,IAAI,CAAC,KAAK,EAAE;AACT,QAAA,OAAO,CAAC,KAAK,CAAC,4BAA4B,SAAS,CAAA,6DAAA,CAA+D,CAAC;AACnH,QAAA,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAiB;IAC5C;AAEA,IAAA,SAAS,GAAG,SAAS,IAAI,EAAE;IAC3B,UAAU,GAAG,UAAU,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS;IACzD,UAAU,GAAG,UAAU,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO;AACvD,IAAA,QAAQ,GAAG,QAAQ,IAAI,EAAE;AAEzB,IAAA,IAAI,IAAI,GAAG;QACR,GAAG,EAAE,QAAQ,GAAG,CAAA,EAAG,QAAQ,CAAA,EAAA,CAAI,GAAG,CAAA,CAAA,CAAG;AACrC,QAAA,WAAW,EAAE,QAAQ,GAAG,CAAA,EAAG,QAAQ,CAAA,qBAAA,EAAwB,QAAQ,CAAA,oBAAA,CAAsB,GAAG,CAAA,mBAAA,CAAqB;AACjH,QAAA,gBAAgB,EAAE,QAAQ,GAAG,CAAA,EAAG,QAAQ,CAAA,2BAAA,EAA8B,QAAQ,CAAA,0BAAA,CAA4B,GAAG,CAAA,yBAAA,CAA2B;AACxI,QAAA,qBAAqB,EAAE,QAAQ,GAAG,CAAA,EAAG,QAAQ,CAAA,iCAAA,EAAoC,QAAQ,CAAA,gCAAA,CAAkC,GAAG,CAAA,+BAAA,CAAiC;AAC/J,QAAA,gBAAgB,EAAE,QAAQ,GAAG,CAAA,EAAG,QAAQ,CAAA,2BAAA,EAA8B,QAAQ,CAAA,0BAAA,CAA4B,GAAG,CAAA,yBAAA,CAA2B;KAC1I;AAED,IAAA,OAAO,GAAG,CAAC;AACR,QAAA,SAAS,EAAE;AACR,YAAA,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG;AACV,gBAAA,cAAc,EAAE,MAAM;AACtB,gBAAA,cAAc,EAAE,CAAA,EAAG,UAAU,CAAA,CAAA,EAAI,UAAU,CAAA,CAAE;AAC/C,aAAA;AACD,YAAA,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG;AAClB,gBAAA,KAAK,EAAE,SAAS;AAChB,gBAAA,MAAM,EAAE,SAAS;AACnB,aAAA;AACD,YAAA,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG;AACvB,gBAAA,eAAe,EAAE,UAAU;AAC3B,gBAAA,YAAY,EAAE,KAAK;gBACnB,MAAM,EAAE,aAAa,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAA,CAAE;AACpD,aAAA;AACD,YAAA,CAAC,IAAI,CAAC,qBAAqB,CAAC,GAAG;AAC5B,gBAAA,eAAe,EAAE,UAAU;AAC7B,aAAA;AACD,YAAA,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG;AACvB,gBAAA,eAAe,EAAE,UAAU;AAC3B,gBAAA,YAAY,EAAE,KAAK;AACrB,aAAA;AACH;KACH,EAAE;AACA,QAAA,WAAW,EAAE,OAAO,MAAM,KAAK;AACjC,KAAA,CAAQ;AACZ"}
+{"version":3,"file":"useScrollbar.mjs","sources":["../../src/hooks/useScrollbar.ts"],"sourcesContent":["import { css } from '../css'\n\nexport type UseScrollbarOption = {\n   root_cls?: string;\n   thumbSize?: number\n   thumbColor?: string\n   trackColor?: string;\n}\n\ntype ClassName = string\n\nconst useScrollbar = ({ root_cls, thumbSize, thumbColor, trackColor }: UseScrollbarOption): ClassName => {\n\n   thumbSize = thumbSize || 8\n   thumbColor = thumbColor || \"var(--color-common-subtext)\"\n   trackColor = trackColor || \"var(--color-common-lighter)\"\n\n   const cls = (cls: string) => root_cls ? `${root_cls} ${cls}` : cls\n\n   return css({\n      \"@global\": {\n\n         [cls('*::-webkit-scrollbar')]: {\n            width: thumbSize,\n            height: thumbSize,\n            cursor: \"pointer\",\n         },\n         [cls(\"*::-webkit-scrollbar-thumb\")]: {\n            backgroundColor: thumbColor,\n            borderRadius: \"6px\",\n         },\n         [cls(\"*::-webkit-scrollbar-thumb:hover\")]: {\n            backgroundColor: thumbColor,\n         },\n         [cls(\"*::-webkit-scrollbar-track\")]: {\n            backgroundColor: trackColor,\n            borderRadius: \"6px\",\n         },\n         // [cls('*')]: {\n         //    scrollbarWidth: \"thin\",\n         //    scrollbarColor: `${thumbColor} ${trackColor}`,\n         // },\n      }\n   }, {\n      injectStyle: typeof window !== 'undefined'\n   }) as any\n}\n\nexport default useScrollbar\n"],"names":[],"mappings":"mCAWA,MAAM,YAAY,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAsB,KAAe;AAErG,IAAA,SAAS,GAAG,SAAS,IAAI,CAAC;AAC1B,IAAA,UAAU,GAAG,UAAU,IAAI,6BAA6B;AACxD,IAAA,UAAU,GAAG,UAAU,IAAI,6BAA6B;IAExD,MAAM,GAAG,GAAG,CAAC,GAAW,KAAK,QAAQ,GAAG,CAAA,EAAG,QAAQ,IAAI,GAAG,CAAA,CAAE,GAAG,GAAG;AAElE,IAAA,OAAO,GAAG,CAAC;AACR,QAAA,SAAS,EAAE;AAER,YAAA,CAAC,GAAG,CAAC,sBAAsB,CAAC,GAAG;AAC5B,gBAAA,KAAK,EAAE,SAAS;AAChB,gBAAA,MAAM,EAAE,SAAS;AACjB,gBAAA,MAAM,EAAE,SAAS;AACnB,aAAA;AACD,YAAA,CAAC,GAAG,CAAC,4BAA4B,CAAC,GAAG;AAClC,gBAAA,eAAe,EAAE,UAAU;AAC3B,gBAAA,YAAY,EAAE,KAAK;AACrB,aAAA;AACD,YAAA,CAAC,GAAG,CAAC,kCAAkC,CAAC,GAAG;AACxC,gBAAA,eAAe,EAAE,UAAU;AAC7B,aAAA;AACD,YAAA,CAAC,GAAG,CAAC,4BAA4B,CAAC,GAAG;AAClC,gBAAA,eAAe,EAAE,UAAU;AAC3B,gBAAA,YAAY,EAAE,KAAK;AACrB,aAAA;;;;;AAKH;KACH,EAAE;AACA,QAAA,WAAW,EAAE,OAAO,MAAM,KAAK;AACjC,KAAA,CAAQ;AACZ"}

package/index.d.ts

@@ -14,7 +14,7 @@ export { adjustColor, adjustTextContrast, alpha, breakpoints, css } from './css/
 export { themeRootClass } from './theme/index.js';
 export { Aliases, BreakpointKeys, CSSBreakpointType, CSSOptionProps, CSSProps, CSSValueType, FN, GlobalCSS } from './css/types.js';
 export { CSSPropAsAttr, TagCSSProperties, TagComponentType, TagProps, TagPropsRoot } from './Tag/types.js';
-export { ColorsRefTypes, ObjectType, ThemeColor, ThemeColorInput, ThemeColorItem, ThemeColorItemInput, ThemeOptionInput, ThemeOptions, ThemeTypographyInputType, ThemeTypographyItem, ThemeTypographyItemInput, ThemeTypographyType, TypographyRefTypes } from './theme/types.js';
+export { ColorsRefTypes, ObjectType, ThemeColorOption, ThemeOptionInput, ThemeOptions, ThemeOptionsColor, ThemeTypographyInputType, ThemeTypographyItem, ThemeTypographyItemInput, ThemeTypographyType, TypographyRefTypes } from './theme/types.js';
 export { default as getValue } from './css/getValue.js';
 export { default as getProps } from './css/getProps.js';
 export { default as ThemeProvider, ThemeProviderProps } from './theme/ThemeProvider.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xanui/core",
-  "version": "1.2.7",
+  "version": "1.2.9",
   "description": "",
   "private": false,
   "main": "./index.js",