@xanui/core 1.1.14 → 1.1.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (80) hide show
  1. package/AppRoot/index.d.ts +11 -0
  2. package/AppRoot/index.js +62 -0
  3. package/AppRoot/index.js.map +1 -0
  4. package/AppRoot/index.mjs +62 -0
  5. package/AppRoot/index.mjs.map +1 -0
  6. package/Tag/index.js +12 -3
  7. package/Tag/index.js.map +1 -1
  8. package/Tag/index.mjs +12 -3
  9. package/Tag/index.mjs.map +1 -1
  10. package/Tag/useTagProps.d.ts +7 -1
  11. package/Tag/useTagProps.js +4 -3
  12. package/Tag/useTagProps.js.map +1 -1
  13. package/Tag/useTagProps.mjs +4 -3
  14. package/Tag/useTagProps.mjs.map +1 -1
  15. package/Transition/index.d.ts +1 -1
  16. package/Transition/index.js +1 -1
  17. package/Transition/index.js.map +1 -1
  18. package/Transition/index.mjs +1 -1
  19. package/Transition/index.mjs.map +1 -1
  20. package/breakpoint/BreakpointProvider.js +25 -35
  21. package/breakpoint/BreakpointProvider.js.map +1 -1
  22. package/breakpoint/BreakpointProvider.mjs +25 -35
  23. package/breakpoint/BreakpointProvider.mjs.map +1 -1
  24. package/breakpoint/useBreakpoint.d.ts +2 -2
  25. package/breakpoint/useBreakpoint.js +12 -10
  26. package/breakpoint/useBreakpoint.js.map +1 -1
  27. package/breakpoint/useBreakpoint.mjs +12 -10
  28. package/breakpoint/useBreakpoint.mjs.map +1 -1
  29. package/{useAnimation.d.ts → hooks/useAnimation.d.ts} +1 -1
  30. package/{useAnimation.js → hooks/useAnimation.js} +1 -1
  31. package/hooks/useAnimation.js.map +1 -0
  32. package/{useAnimation.mjs → hooks/useAnimation.mjs} +1 -1
  33. package/hooks/useAnimation.mjs.map +1 -0
  34. package/{useColorTemplate.js → hooks/useColorTemplate.js} +1 -1
  35. package/hooks/useColorTemplate.js.map +1 -0
  36. package/{useColorTemplate.mjs → hooks/useColorTemplate.mjs} +1 -1
  37. package/hooks/useColorTemplate.mjs.map +1 -0
  38. package/{useInterface.d.ts → hooks/useInterface.d.ts} +1 -1
  39. package/{useInterface.js → hooks/useInterface.js} +1 -1
  40. package/hooks/useInterface.js.map +1 -0
  41. package/{useInterface.mjs → hooks/useInterface.mjs} +1 -1
  42. package/hooks/useInterface.mjs.map +1 -0
  43. package/{useScrollbar.js → hooks/useScrollbar.js} +1 -1
  44. package/hooks/useScrollbar.js.map +1 -0
  45. package/{useScrollbar.mjs → hooks/useScrollbar.mjs} +1 -1
  46. package/hooks/useScrollbar.mjs.map +1 -0
  47. package/index.d.ts +11 -8
  48. package/index.js +1 -1
  49. package/index.mjs +1 -1
  50. package/isWindow.d.ts +1 -1
  51. package/isWindow.js +1 -1
  52. package/isWindow.js.map +1 -1
  53. package/isWindow.mjs +1 -1
  54. package/isWindow.mjs.map +1 -1
  55. package/package.json +3 -3
  56. package/theme/ThemeProvider.d.ts +1 -4
  57. package/theme/ThemeProvider.js +3 -45
  58. package/theme/ThemeProvider.js.map +1 -1
  59. package/theme/ThemeProvider.mjs +3 -45
  60. package/theme/ThemeProvider.mjs.map +1 -1
  61. package/theme/index.d.ts +3 -0
  62. package/theme/index.js +1 -0
  63. package/theme/index.js.map +1 -0
  64. package/theme/index.mjs +1 -0
  65. package/theme/index.mjs.map +1 -0
  66. package/usePortal.d.ts +9 -0
  67. package/usePortal.js +56 -0
  68. package/usePortal.js.map +1 -0
  69. package/usePortal.mjs +56 -0
  70. package/usePortal.mjs.map +1 -0
  71. package/useAnimation.js.map +0 -1
  72. package/useAnimation.mjs.map +0 -1
  73. package/useColorTemplate.js.map +0 -1
  74. package/useColorTemplate.mjs.map +0 -1
  75. package/useInterface.js.map +0 -1
  76. package/useInterface.mjs.map +0 -1
  77. package/useScrollbar.js.map +0 -1
  78. package/useScrollbar.mjs.map +0 -1
  79. /package/{useColorTemplate.d.ts → hooks/useColorTemplate.d.ts} +0 -0
  80. /package/{useScrollbar.d.ts → hooks/useScrollbar.d.ts} +0 -0
@@ -1 +1 @@
1
- {"version":3,"file":"BreakpointProvider.mjs","sources":["../../src/breakpoint/BreakpointProvider.tsx"],"sourcesContent":["import React, { ReactNode, useState } from \"react\";\nimport isWindow from \"../isWindow\";\nimport { breakpoints } from \"../css\";\nimport { BreakpointKeys } from \"../css/types\";\n\nexport const BreakpointCtx = React.createContext<BreakpointKeys>(\"xl\")\n\nconst getKey = (): BreakpointKeys => {\n const isWin = isWindow()\n if (isWin) {\n const width = window.innerWidth\n if (width < breakpoints.sm) {\n return 'xs'\n } else if (width > breakpoints.xs && width < breakpoints.md) {\n return 'sm'\n } else if (width > breakpoints.sm && width < breakpoints.lg) {\n return 'md'\n } else if (width > breakpoints.md && width < breakpoints.xl) {\n return 'lg'\n } else {\n return 'xl'\n }\n } else {\n return 'xl'\n }\n}\n\nexport const BreakpointProvider = ({ children }: { children?: ReactNode }) => {\n const [current, setCurrent] = useState<BreakpointKeys>(getKey)\n\n const handler = () => {\n let c = getKey()\n if (current !== c) {\n setCurrent(c)\n }\n }\n\n React.useEffect(() => {\n window.removeEventListener(\"resize\", handler)\n window.addEventListener(\"resize\", handler)\n handler()\n return () => {\n window.removeEventListener(\"resize\", handler)\n }\n }, [current])\n\n return (\n <BreakpointCtx.Provider value={current}>\n {children}\n </BreakpointCtx.Provider>\n )\n}\n"],"names":["React","_jsx"],"mappings":"iKAKO,MAAM,aAAa,GAAGA,cAAK,CAAC,aAAa,CAAiB,IAAI;AAErE,MAAM,MAAM,GAAG,MAAqB;AAChC,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE;IACxB,IAAI,KAAK,EAAE;AACP,QAAA,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU;AAC/B,QAAA,IAAI,KAAK,GAAG,WAAW,CAAC,EAAE,EAAE;AACxB,YAAA,OAAO,IAAI;QACf;AAAO,aAAA,IAAI,KAAK,GAAG,WAAW,CAAC,EAAE,IAAI,KAAK,GAAG,WAAW,CAAC,EAAE,EAAE;AACzD,YAAA,OAAO,IAAI;QACf;AAAO,aAAA,IAAI,KAAK,GAAG,WAAW,CAAC,EAAE,IAAI,KAAK,GAAG,WAAW,CAAC,EAAE,EAAE;AACzD,YAAA,OAAO,IAAI;QACf;AAAO,aAAA,IAAI,KAAK,GAAG,WAAW,CAAC,EAAE,IAAI,KAAK,GAAG,WAAW,CAAC,EAAE,EAAE;AACzD,YAAA,OAAO,IAAI;QACf;aAAO;AACH,YAAA,OAAO,IAAI;QACf;IACJ;SAAO;AACH,QAAA,OAAO,IAAI;IACf;AACJ,CAAC;MAEY,kBAAkB,GAAG,CAAC,EAAE,QAAQ,EAA4B,KAAI;IACzE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAiB,MAAM,CAAC;IAE9D,MAAM,OAAO,GAAG,MAAK;AACjB,QAAA,IAAI,CAAC,GAAG,MAAM,EAAE;AAChB,QAAA,IAAI,OAAO,KAAK,CAAC,EAAE;YACf,UAAU,CAAC,CAAC,CAAC;QACjB;AACJ,IAAA,CAAC;AAED,IAAAA,cAAK,CAAC,SAAS,CAAC,MAAK;AACjB,QAAA,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,OAAO,CAAC;AAC7C,QAAA,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,CAAC;AAC1C,QAAA,OAAO,EAAE;AACT,QAAA,OAAO,MAAK;AACR,YAAA,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,OAAO,CAAC;AACjD,QAAA,CAAC;AACL,IAAA,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;AAEb,IAAA,QACIC,GAAA,CAAC,aAAa,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,OAAO,EAAA,QAAA,EACjC,QAAQ,EAAA,CACY;AAEjC"}
1
+ {"version":3,"file":"BreakpointProvider.mjs","sources":["../../src/breakpoint/BreakpointProvider.tsx"],"sourcesContent":["import React, { ReactNode, useState, useCallback } from \"react\";\nimport isWindow from \"../isWindow\";\nimport { breakpoints } from \"../css\";\nimport { BreakpointKeys } from \"../css/types\";\n\nexport const BreakpointCtx = React.createContext<BreakpointKeys>(\"xs\");\n\n/**\n * SSR-safe breakpoint detection\n */\nconst getKey = (): BreakpointKeys => {\n if (!isWindow()) {\n // Server fallback (mobile-first)\n return \"xs\";\n }\n\n const width = window.innerWidth;\n\n if (width < breakpoints.sm) return \"xs\";\n if (width < breakpoints.md) return \"sm\";\n if (width < breakpoints.lg) return \"md\";\n if (width < breakpoints.xl) return \"lg\";\n return \"xl\";\n};\n\nexport const BreakpointProvider = ({ children }: { children?: ReactNode }) => {\n const [current, setCurrent] = useState<BreakpointKeys>(\"xs\");\n\n const handler = useCallback(() => {\n const newKey = getKey();\n setCurrent(prev => (prev === newKey ? prev : newKey));\n }, []);\n\n React.useEffect(() => {\n window.addEventListener(\"resize\", handler);\n handler(); // detect on mount\n return () => window.removeEventListener(\"resize\", handler);\n }, [handler]);\n\n return (\n <BreakpointCtx.Provider value={current}>\n {children}\n </BreakpointCtx.Provider>\n );\n};\n"],"names":["React","_jsx"],"mappings":"6KAKO,MAAM,aAAa,GAAGA,cAAK,CAAC,aAAa,CAAiB,IAAI;AAErE;;AAEG;AACH,MAAM,MAAM,GAAG,MAAqB;AAChC,IAAA,IAAI,CAAC,QAAQ,EAAE,EAAE;;AAEb,QAAA,OAAO,IAAI;IACf;AAEA,IAAA,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU;AAE/B,IAAA,IAAI,KAAK,GAAG,WAAW,CAAC,EAAE;AAAE,QAAA,OAAO,IAAI;AACvC,IAAA,IAAI,KAAK,GAAG,WAAW,CAAC,EAAE;AAAE,QAAA,OAAO,IAAI;AACvC,IAAA,IAAI,KAAK,GAAG,WAAW,CAAC,EAAE;AAAE,QAAA,OAAO,IAAI;AACvC,IAAA,IAAI,KAAK,GAAG,WAAW,CAAC,EAAE;AAAE,QAAA,OAAO,IAAI;AACvC,IAAA,OAAO,IAAI;AACf,CAAC;MAEY,kBAAkB,GAAG,CAAC,EAAE,QAAQ,EAA4B,KAAI;IACzE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAiB,IAAI,CAAC;AAE5D,IAAA,MAAM,OAAO,GAAG,WAAW,CAAC,MAAK;AAC7B,QAAA,MAAM,MAAM,GAAG,MAAM,EAAE;AACvB,QAAA,UAAU,CAAC,IAAI,KAAK,IAAI,KAAK,MAAM,GAAG,IAAI,GAAG,MAAM,CAAC,CAAC;IACzD,CAAC,EAAE,EAAE,CAAC;AAEN,IAAAA,cAAK,CAAC,SAAS,CAAC,MAAK;AACjB,QAAA,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,CAAC;QAC1C,OAAO,EAAE,CAAC;QACV,OAAO,MAAM,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,OAAO,CAAC;AAC9D,IAAA,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;AAEb,IAAA,QACIC,GAAA,CAAC,aAAa,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,OAAO,EAAA,QAAA,EACjC,QAAQ,EAAA,CACY;AAEjC"}
@@ -3,10 +3,10 @@ import { BreakpointKeys } from '../css/types.js';
3
3
  declare const useBreakpoint: () => {
4
4
  value: BreakpointKeys;
5
5
  is: (key: BreakpointKeys) => boolean;
6
- isDown: (key: BreakpointKeys) => boolean;
7
6
  isUp: (key: BreakpointKeys) => boolean;
8
- isOrDown: (key: BreakpointKeys) => boolean;
7
+ isDown: (key: BreakpointKeys) => boolean;
9
8
  isOrUp: (key: BreakpointKeys) => boolean;
9
+ isOrDown: (key: BreakpointKeys) => boolean;
10
10
  };
11
11
 
12
12
  export { useBreakpoint as default };
@@ -1,13 +1,15 @@
1
1
  'use strict';Object.defineProperty(exports,'__esModule',{value:true});var React=require('react'),BreakpointProvider=require('./BreakpointProvider.js'),isWindow=require('../isWindow.js'),index=require('../css/index.js');const useBreakpoint = () => {
2
- const val = React.useContext(BreakpointProvider.BreakpointCtx);
3
- const isWin = isWindow.default();
4
- const bp = {
5
- value: val,
6
- is: (key) => val === key,
7
- isDown: (key) => isWin ? window.innerWidth < index.breakpoints[key] : false,
8
- isUp: (key) => isWin ? window.innerWidth > index.breakpoints[key] : false,
9
- isOrDown: (key) => bp.is(key) || bp.isDown(key),
10
- isOrUp: (key) => bp.is(key) || bp.isUp(key)
2
+ const value = React.useContext(BreakpointProvider.BreakpointCtx);
3
+ const getWidth = () => isWindow.default() ? window.innerWidth : 99999;
4
+ const is = (key) => value === key;
5
+ const isUp = (key) => getWidth() >= index.breakpoints[key];
6
+ const isDown = (key) => getWidth() < index.breakpoints[key];
7
+ return {
8
+ value,
9
+ is,
10
+ isUp,
11
+ isDown,
12
+ isOrUp: (key) => is(key) || isUp(key),
13
+ isOrDown: (key) => is(key) || isDown(key)
11
14
  };
12
- return bp;
13
15
  };exports.default=useBreakpoint;//# sourceMappingURL=useBreakpoint.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"useBreakpoint.js","sources":["../../src/breakpoint/useBreakpoint.ts"],"sourcesContent":["import { useContext } from \"react\"\nimport { BreakpointCtx } from \"./BreakpointProvider\"\nimport isWindow from \"../isWindow\"\nimport { breakpoints } from \"../css\"\nimport { BreakpointKeys } from \"../css/types\"\n\nconst useBreakpoint = () => {\n const val = useContext(BreakpointCtx)\n const isWin = isWindow()\n const bp = {\n value: val,\n is: (key: BreakpointKeys) => val === key,\n isDown: (key: BreakpointKeys) => isWin ? window.innerWidth < breakpoints[key] : false,\n isUp: (key: BreakpointKeys) => isWin ? window.innerWidth > breakpoints[key] : false,\n isOrDown: (key: BreakpointKeys) => bp.is(key) || bp.isDown(key),\n isOrUp: (key: BreakpointKeys) => bp.is(key) || bp.isUp(key)\n }\n return bp\n}\n\nexport default useBreakpoint\n"],"names":["useContext","BreakpointCtx","isWindow","breakpoints"],"mappings":"2NAMA,MAAM,aAAa,GAAG,MAAK;AACxB,IAAA,MAAM,GAAG,GAAGA,gBAAU,CAACC,gCAAa,CAAC;AACrC,IAAA,MAAM,KAAK,GAAGC,gBAAQ,EAAE;AACxB,IAAA,MAAM,EAAE,GAAG;AACR,QAAA,KAAK,EAAE,GAAG;QACV,EAAE,EAAE,CAAC,GAAmB,KAAK,GAAG,KAAK,GAAG;QACxC,MAAM,EAAE,CAAC,GAAmB,KAAK,KAAK,GAAG,MAAM,CAAC,UAAU,GAAGC,iBAAW,CAAC,GAAG,CAAC,GAAG,KAAK;QACrF,IAAI,EAAE,CAAC,GAAmB,KAAK,KAAK,GAAG,MAAM,CAAC,UAAU,GAAGA,iBAAW,CAAC,GAAG,CAAC,GAAG,KAAK;AACnF,QAAA,QAAQ,EAAE,CAAC,GAAmB,KAAK,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC;AAC/D,QAAA,MAAM,EAAE,CAAC,GAAmB,KAAK,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC,GAAG;KAC5D;AACD,IAAA,OAAO,EAAE;AACZ"}
1
+ {"version":3,"file":"useBreakpoint.js","sources":["../../src/breakpoint/useBreakpoint.ts"],"sourcesContent":["import { useContext } from \"react\"\nimport { BreakpointCtx } from \"./BreakpointProvider\"\nimport isWindow from \"../isWindow\"\nimport { breakpoints } from \"../css\"\nimport { BreakpointKeys } from \"../css/types\"\n\nconst useBreakpoint = () => {\n const value = useContext(BreakpointCtx)\n const getWidth = () => isWindow() ? window.innerWidth : 99999\n const is = (key: BreakpointKeys) => value === key\n const isUp = (key: BreakpointKeys) => getWidth() >= breakpoints[key]\n const isDown = (key: BreakpointKeys) => getWidth() < breakpoints[key]\n\n return {\n value,\n is,\n isUp,\n isDown,\n isOrUp: (key: BreakpointKeys) => is(key) || isUp(key),\n isOrDown: (key: BreakpointKeys) => is(key) || isDown(key)\n }\n}\n\nexport default useBreakpoint\n"],"names":["useContext","BreakpointCtx","isWindow","breakpoints"],"mappings":"2NAMA,MAAM,aAAa,GAAG,MAAK;AACxB,IAAA,MAAM,KAAK,GAAGA,gBAAU,CAACC,gCAAa,CAAC;AACvC,IAAA,MAAM,QAAQ,GAAG,MAAMC,gBAAQ,EAAE,GAAG,MAAM,CAAC,UAAU,GAAG,KAAK;IAC7D,MAAM,EAAE,GAAG,CAAC,GAAmB,KAAK,KAAK,KAAK,GAAG;AACjD,IAAA,MAAM,IAAI,GAAG,CAAC,GAAmB,KAAK,QAAQ,EAAE,IAAIC,iBAAW,CAAC,GAAG,CAAC;AACpE,IAAA,MAAM,MAAM,GAAG,CAAC,GAAmB,KAAK,QAAQ,EAAE,GAAGA,iBAAW,CAAC,GAAG,CAAC;IAErE,OAAO;QACJ,KAAK;QACL,EAAE;QACF,IAAI;QACJ,MAAM;AACN,QAAA,MAAM,EAAE,CAAC,GAAmB,KAAK,EAAE,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC;AACrD,QAAA,QAAQ,EAAE,CAAC,GAAmB,KAAK,EAAE,CAAC,GAAG,CAAC,IAAI,MAAM,CAAC,GAAG;KAC1D;AACJ"}
@@ -1,13 +1,15 @@
1
1
  import {useContext}from'react';import {BreakpointCtx}from'./BreakpointProvider.mjs';import isWindow from'../isWindow.mjs';import {breakpoints}from'../css/index.mjs';const useBreakpoint = () => {
2
- const val = useContext(BreakpointCtx);
3
- const isWin = isWindow();
4
- const bp = {
5
- value: val,
6
- is: (key) => val === key,
7
- isDown: (key) => isWin ? window.innerWidth < breakpoints[key] : false,
8
- isUp: (key) => isWin ? window.innerWidth > breakpoints[key] : false,
9
- isOrDown: (key) => bp.is(key) || bp.isDown(key),
10
- isOrUp: (key) => bp.is(key) || bp.isUp(key)
2
+ const value = useContext(BreakpointCtx);
3
+ const getWidth = () => isWindow() ? window.innerWidth : 99999;
4
+ const is = (key) => value === key;
5
+ const isUp = (key) => getWidth() >= breakpoints[key];
6
+ const isDown = (key) => getWidth() < breakpoints[key];
7
+ return {
8
+ value,
9
+ is,
10
+ isUp,
11
+ isDown,
12
+ isOrUp: (key) => is(key) || isUp(key),
13
+ isOrDown: (key) => is(key) || isDown(key)
11
14
  };
12
- return bp;
13
15
  };export{useBreakpoint as default};//# sourceMappingURL=useBreakpoint.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"useBreakpoint.mjs","sources":["../../src/breakpoint/useBreakpoint.ts"],"sourcesContent":["import { useContext } from \"react\"\nimport { BreakpointCtx } from \"./BreakpointProvider\"\nimport isWindow from \"../isWindow\"\nimport { breakpoints } from \"../css\"\nimport { BreakpointKeys } from \"../css/types\"\n\nconst useBreakpoint = () => {\n const val = useContext(BreakpointCtx)\n const isWin = isWindow()\n const bp = {\n value: val,\n is: (key: BreakpointKeys) => val === key,\n isDown: (key: BreakpointKeys) => isWin ? window.innerWidth < breakpoints[key] : false,\n isUp: (key: BreakpointKeys) => isWin ? window.innerWidth > breakpoints[key] : false,\n isOrDown: (key: BreakpointKeys) => bp.is(key) || bp.isDown(key),\n isOrUp: (key: BreakpointKeys) => bp.is(key) || bp.isUp(key)\n }\n return bp\n}\n\nexport default useBreakpoint\n"],"names":[],"mappings":"qKAMA,MAAM,aAAa,GAAG,MAAK;AACxB,IAAA,MAAM,GAAG,GAAG,UAAU,CAAC,aAAa,CAAC;AACrC,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE;AACxB,IAAA,MAAM,EAAE,GAAG;AACR,QAAA,KAAK,EAAE,GAAG;QACV,EAAE,EAAE,CAAC,GAAmB,KAAK,GAAG,KAAK,GAAG;QACxC,MAAM,EAAE,CAAC,GAAmB,KAAK,KAAK,GAAG,MAAM,CAAC,UAAU,GAAG,WAAW,CAAC,GAAG,CAAC,GAAG,KAAK;QACrF,IAAI,EAAE,CAAC,GAAmB,KAAK,KAAK,GAAG,MAAM,CAAC,UAAU,GAAG,WAAW,CAAC,GAAG,CAAC,GAAG,KAAK;AACnF,QAAA,QAAQ,EAAE,CAAC,GAAmB,KAAK,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC;AAC/D,QAAA,MAAM,EAAE,CAAC,GAAmB,KAAK,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC,GAAG;KAC5D;AACD,IAAA,OAAO,EAAE;AACZ"}
1
+ {"version":3,"file":"useBreakpoint.mjs","sources":["../../src/breakpoint/useBreakpoint.ts"],"sourcesContent":["import { useContext } from \"react\"\nimport { BreakpointCtx } from \"./BreakpointProvider\"\nimport isWindow from \"../isWindow\"\nimport { breakpoints } from \"../css\"\nimport { BreakpointKeys } from \"../css/types\"\n\nconst useBreakpoint = () => {\n const value = useContext(BreakpointCtx)\n const getWidth = () => isWindow() ? window.innerWidth : 99999\n const is = (key: BreakpointKeys) => value === key\n const isUp = (key: BreakpointKeys) => getWidth() >= breakpoints[key]\n const isDown = (key: BreakpointKeys) => getWidth() < breakpoints[key]\n\n return {\n value,\n is,\n isUp,\n isDown,\n isOrUp: (key: BreakpointKeys) => is(key) || isUp(key),\n isOrDown: (key: BreakpointKeys) => is(key) || isDown(key)\n }\n}\n\nexport default useBreakpoint\n"],"names":[],"mappings":"qKAMA,MAAM,aAAa,GAAG,MAAK;AACxB,IAAA,MAAM,KAAK,GAAG,UAAU,CAAC,aAAa,CAAC;AACvC,IAAA,MAAM,QAAQ,GAAG,MAAM,QAAQ,EAAE,GAAG,MAAM,CAAC,UAAU,GAAG,KAAK;IAC7D,MAAM,EAAE,GAAG,CAAC,GAAmB,KAAK,KAAK,KAAK,GAAG;AACjD,IAAA,MAAM,IAAI,GAAG,CAAC,GAAmB,KAAK,QAAQ,EAAE,IAAI,WAAW,CAAC,GAAG,CAAC;AACpE,IAAA,MAAM,MAAM,GAAG,CAAC,GAAmB,KAAK,QAAQ,EAAE,GAAG,WAAW,CAAC,GAAG,CAAC;IAErE,OAAO;QACJ,KAAK;QACL,EAAE;QACF,IAAI;QACJ,MAAM;AACN,QAAA,MAAM,EAAE,CAAC,GAAmB,KAAK,EAAE,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC;AACrD,QAAA,QAAQ,EAAE,CAAC,GAAmB,KAAK,EAAE,CAAC,GAAG,CAAC,IAAI,MAAM,CAAC,GAAG;KAC1D;AACJ"}
@@ -1,4 +1,4 @@
1
- import { CSSProps } from './css/types.js';
1
+ import { CSSProps } from '../css/types.js';
2
2
 
3
3
  declare const animationEases: {
4
4
  easeInOut: string;
@@ -1,4 +1,4 @@
1
- 'use strict';Object.defineProperty(exports,'__esModule',{value:true});var index=require('./css/index.js'),React=require('react');const animationEases = {
1
+ 'use strict';Object.defineProperty(exports,'__esModule',{value:true});var index=require('../css/index.js'),React=require('react');const animationEases = {
2
2
  easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
3
3
  easeOut: "cubic-bezier(0.0, 0, 0.2, 1)",
4
4
  easeIn: "cubic-bezier(0.4, 0, 1, 1)",
@@ -0,0 +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\nexport 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 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 || \"easeBounceOut\"\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.easeBounceOut,\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":"kIAIO,MAAM,cAAc,GAAG;AAC1B,IAAA,SAAS,EAAE,8BAA8B;AACzC,IAAA,OAAO,EAAE,8BAA8B;AACvC,IAAA,MAAM,EAAE,4BAA4B;AACpC,IAAA,KAAK,EAAE,8BAA8B;AACrC,IAAA,MAAM,EAAE,0BAA0B;AAClC,IAAA,aAAa,EAAE;;AAWnB,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,eAAe;AACnC,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,aAAa;AAC9E,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"}
@@ -1,4 +1,4 @@
1
- import {css}from'./css/index.mjs';import {useId}from'react';const animationEases = {
1
+ import {css}from'../css/index.mjs';import {useId}from'react';const animationEases = {
2
2
  easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
3
3
  easeOut: "cubic-bezier(0.0, 0, 0.2, 1)",
4
4
  easeIn: "cubic-bezier(0.4, 0, 1, 1)",
@@ -0,0 +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\nexport 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 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 || \"easeBounceOut\"\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.easeBounceOut,\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":"6DAIO,MAAM,cAAc,GAAG;AAC1B,IAAA,SAAS,EAAE,8BAA8B;AACzC,IAAA,OAAO,EAAE,8BAA8B;AACvC,IAAA,MAAM,EAAE,4BAA4B;AACpC,IAAA,KAAK,EAAE,8BAA8B;AACrC,IAAA,MAAM,EAAE,0BAA0B;AAClC,IAAA,aAAa,EAAE;;AAWnB,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,eAAe;AACnC,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,aAAa;AAC9E,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"}
@@ -1,4 +1,4 @@
1
- 'use strict';Object.defineProperty(exports,'__esModule',{value:true});require('./theme/ThemeDefaultOptions.js');var core=require('./theme/core.js');require('./css/getValue.js'),require('oncss'),require('./theme/ThemeProvider.js'),require('react-state-bucket');const useColorTemplate = (color, type) => {
1
+ 'use strict';Object.defineProperty(exports,'__esModule',{value:true});require('../theme/ThemeDefaultOptions.js');var core=require('../theme/core.js');require('../css/getValue.js'),require('oncss'),require('tslib'),require('react/jsx-runtime'),require('react'),require('../Tag/index.js'),require('react-state-bucket');const useColorTemplate = (color, type) => {
2
2
  var _a;
3
3
  const theme = core.useTheme();
4
4
  let _color = color === 'default' ? "background" : color;
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useColorTemplate.js","sources":["../../src/hooks/useColorTemplate.ts"],"sourcesContent":["import { useTheme } from \"../theme\"\nexport type ColorTemplateColors = \"default\" | \"brand\" | \"accent\" | \"info\" | \"success\" | \"warning\" | \"danger\"\nexport type ColorTemplateType = \"fill\" | \"outline\" | \"text\" | \"alpha\"\n\nconst useColorTemplate = (color: ColorTemplateColors, type: ColorTemplateType) => {\n const theme: any = useTheme()\n let _color = color === 'default' ? \"background\" : color as any\n return theme.colors[_color]?.template[type]\n}\n\nexport default useColorTemplate"],"names":["useTheme"],"mappings":"6TAIA,MAAM,gBAAgB,GAAG,CAAC,KAA0B,EAAE,IAAuB,KAAI;;AAC7E,IAAA,MAAM,KAAK,GAAQA,aAAQ,EAAE;AAC7B,IAAA,IAAI,MAAM,GAAG,KAAK,KAAK,SAAS,GAAG,YAAY,GAAG,KAAY;AAC9D,IAAA,OAAO,CAAA,EAAA,GAAA,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,QAAQ,CAAC,IAAI,CAAC;AAC/C"}
@@ -1,4 +1,4 @@
1
- import'./theme/ThemeDefaultOptions.mjs';import {useTheme}from'./theme/core.mjs';import'./css/getValue.mjs';import'oncss';import'./theme/ThemeProvider.mjs';import'react-state-bucket';const useColorTemplate = (color, type) => {
1
+ import'../theme/ThemeDefaultOptions.mjs';import {useTheme}from'../theme/core.mjs';import'../css/getValue.mjs';import'oncss';import'tslib';import'react/jsx-runtime';import'react';import'../Tag/index.mjs';import'react-state-bucket';const useColorTemplate = (color, type) => {
2
2
  var _a;
3
3
  const theme = useTheme();
4
4
  let _color = color === 'default' ? "background" : color;
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useColorTemplate.mjs","sources":["../../src/hooks/useColorTemplate.ts"],"sourcesContent":["import { useTheme } from \"../theme\"\nexport type ColorTemplateColors = \"default\" | \"brand\" | \"accent\" | \"info\" | \"success\" | \"warning\" | \"danger\"\nexport type ColorTemplateType = \"fill\" | \"outline\" | \"text\" | \"alpha\"\n\nconst useColorTemplate = (color: ColorTemplateColors, type: ColorTemplateType) => {\n const theme: any = useTheme()\n let _color = color === 'default' ? \"background\" : color as any\n return theme.colors[_color]?.template[type]\n}\n\nexport default useColorTemplate"],"names":[],"mappings":"sOAIA,MAAM,gBAAgB,GAAG,CAAC,KAA0B,EAAE,IAAuB,KAAI;;AAC7E,IAAA,MAAM,KAAK,GAAQ,QAAQ,EAAE;AAC7B,IAAA,IAAI,MAAM,GAAG,KAAK,KAAK,SAAS,GAAG,YAAY,GAAG,KAAY;AAC9D,IAAA,OAAO,CAAA,EAAA,GAAA,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,QAAQ,CAAC,IAAI,CAAC;AAC/C"}
@@ -1,4 +1,4 @@
1
- import { ThemeOptions } from './theme/types.js';
1
+ import { ThemeOptions } from '../theme/types.js';
2
2
 
3
3
  declare const useInterface: <P extends object>(name: string, userPorps: P, defaultProps: P) => (P | ThemeOptions)[];
4
4
 
@@ -1,4 +1,4 @@
1
- 'use strict';Object.defineProperty(exports,'__esModule',{value:true});require('./theme/ThemeDefaultOptions.js');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) => {
1
+ 'use strict';Object.defineProperty(exports,'__esModule',{value:true});require('../theme/ThemeDefaultOptions.js');var core=require('../theme/core.js');require('../css/getValue.js'),require('oncss'),require('tslib'),require('react/jsx-runtime'),require('react'),require('../Tag/index.js'),require('react-state-bucket');const useInterface = (name, userPorps, defaultProps) => {
2
2
  const theme = core.useTheme();
3
3
  const _interface = theme.interfaces[name];
4
4
  if (_interface) {
@@ -0,0 +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 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":"6TAEA,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"}
@@ -1,4 +1,4 @@
1
- import'./theme/ThemeDefaultOptions.mjs';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) => {
1
+ import'../theme/ThemeDefaultOptions.mjs';import {useTheme}from'../theme/core.mjs';import'../css/getValue.mjs';import'oncss';import'tslib';import'react/jsx-runtime';import'react';import'../Tag/index.mjs';import'react-state-bucket';const useInterface = (name, userPorps, defaultProps) => {
2
2
  const theme = useTheme();
3
3
  const _interface = theme.interfaces[name];
4
4
  if (_interface) {
@@ -0,0 +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 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":"sOAEA,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"}
@@ -1,4 +1,4 @@
1
- 'use strict';Object.defineProperty(exports,'__esModule',{value:true});require('./theme/ThemeDefaultOptions.js');var core=require('./theme/core.js'),index=require('./css/index.js');require('./theme/ThemeProvider.js'),require('react-state-bucket');const useScrollbar = ({ themeName, root_cls, thumbSize, thumbColor, trackColor }) => {
1
+ 'use strict';Object.defineProperty(exports,'__esModule',{value:true});require('../theme/ThemeDefaultOptions.js');var core=require('../theme/core.js'),index=require('../css/index.js');require('tslib'),require('react/jsx-runtime'),require('react'),require('../Tag/index.js'),require('react-state-bucket');const useScrollbar = ({ themeName, root_cls, thumbSize, thumbColor, trackColor }) => {
2
2
  const theme = core.getTheme(themeName);
3
3
  if (!theme)
4
4
  throw new Error(`theme "${themeName}" not found for ScrollbarCss`);
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useScrollbar.js","sources":["../../src/hooks/useScrollbar.ts"],"sourcesContent":["import { getTheme } from '../theme'\nimport { css } from '../css'\n\nexport type UseScrollbarOption = {\n themeName: string\n root_cls?: string;\n thumbSize?: number\n thumbColor?: string\n trackColor?: string\n}\n\ntype ClassName = string\n\nconst useScrollbar = ({ themeName, root_cls, thumbSize, thumbColor, trackColor }: UseScrollbarOption): ClassName => {\n const theme = getTheme(themeName)\n if (!theme) throw new Error(`theme \"${themeName}\" not found for ScrollbarCss`);\n\n thumbSize = thumbSize || 10\n thumbColor = thumbColor || theme.colors.text.secondary\n trackColor = trackColor || theme.colors.divider\n root_cls = root_cls || \"\"\n\n let clss = {\n \"*\": root_cls ? `${root_cls} *` : `*`,\n \"scrollbar\": root_cls ? `${root_cls}::-webkit-scrollbar, ${root_cls} ::-webkit-scrollbar` : `::-webkit-scrollbar`,\n \"scrollbarThumb\": root_cls ? `${root_cls}::-webkit-scrollbar-thumb, ${root_cls} ::-webkit-scrollbar-thumb` : `::-webkit-scrollbar-thumb`,\n \"scrollbarThumbHover\": root_cls ? `${root_cls}::-webkit-scrollbar-thumb:hover, ${root_cls} ::-webkit-scrollbar-thumb:hover` : `::-webkit-scrollbar-thumb:hover`,\n \"scrollbarTrack\": root_cls ? `${root_cls}::-webkit-scrollbar-track, ${root_cls} ::-webkit-scrollbar-track` : `::-webkit-scrollbar-track`,\n }\n\n return css({\n \"@global\": {\n [clss['*']]: {\n scrollbarWidth: \"thin\",\n scrollbarColor: `${thumbColor} ${trackColor}`,\n },\n [clss[\"scrollbar\"]]: {\n width: thumbSize,\n height: thumbSize,\n },\n [clss[\"scrollbarThumb\"]]: {\n backgroundColor: thumbColor,\n borderRadius: \"5px\",\n border: \"2px solid #f4f4f4\",\n },\n [clss[\"scrollbarThumbHover\"]]: {\n backgroundColor: thumbColor,\n },\n [clss['scrollbarTrack']]: {\n backgroundColor: trackColor,\n borderRadius: \"5px\",\n },\n }\n }) as any\n}\n\nexport default useScrollbar\n"],"names":["getTheme","css"],"mappings":"+SAaA,MAAM,YAAY,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAsB,KAAe;AAChH,IAAA,MAAM,KAAK,GAAGA,aAAQ,CAAC,SAAS,CAAC;AACjC,IAAA,IAAI,CAAC,KAAK;AAAE,QAAA,MAAM,IAAI,KAAK,CAAC,UAAU,SAAS,CAAA,4BAAA,CAA8B,CAAC;AAE9E,IAAA,SAAS,GAAG,SAAS,IAAI,EAAE;IAC3B,UAAU,GAAG,UAAU,IAAI,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS;IACtD,UAAU,GAAG,UAAU,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO;AAC/C,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;AACnB,gBAAA,MAAM,EAAE,mBAAmB;AAC7B,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;AACH,KAAA,CAAQ;AACZ"}
@@ -1,4 +1,4 @@
1
- import'./theme/ThemeDefaultOptions.mjs';import {getTheme}from'./theme/core.mjs';import {css}from'./css/index.mjs';import'./theme/ThemeProvider.mjs';import'react-state-bucket';const useScrollbar = ({ themeName, root_cls, thumbSize, thumbColor, trackColor }) => {
1
+ import'../theme/ThemeDefaultOptions.mjs';import {getTheme}from'../theme/core.mjs';import {css}from'../css/index.mjs';import'tslib';import'react/jsx-runtime';import'react';import'../Tag/index.mjs';import'react-state-bucket';const useScrollbar = ({ themeName, root_cls, thumbSize, thumbColor, trackColor }) => {
2
2
  const theme = getTheme(themeName);
3
3
  if (!theme)
4
4
  throw new Error(`theme "${themeName}" not found for ScrollbarCss`);
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useScrollbar.mjs","sources":["../../src/hooks/useScrollbar.ts"],"sourcesContent":["import { getTheme } from '../theme'\nimport { css } from '../css'\n\nexport type UseScrollbarOption = {\n themeName: string\n root_cls?: string;\n thumbSize?: number\n thumbColor?: string\n trackColor?: string\n}\n\ntype ClassName = string\n\nconst useScrollbar = ({ themeName, root_cls, thumbSize, thumbColor, trackColor }: UseScrollbarOption): ClassName => {\n const theme = getTheme(themeName)\n if (!theme) throw new Error(`theme \"${themeName}\" not found for ScrollbarCss`);\n\n thumbSize = thumbSize || 10\n thumbColor = thumbColor || theme.colors.text.secondary\n trackColor = trackColor || theme.colors.divider\n root_cls = root_cls || \"\"\n\n let clss = {\n \"*\": root_cls ? `${root_cls} *` : `*`,\n \"scrollbar\": root_cls ? `${root_cls}::-webkit-scrollbar, ${root_cls} ::-webkit-scrollbar` : `::-webkit-scrollbar`,\n \"scrollbarThumb\": root_cls ? `${root_cls}::-webkit-scrollbar-thumb, ${root_cls} ::-webkit-scrollbar-thumb` : `::-webkit-scrollbar-thumb`,\n \"scrollbarThumbHover\": root_cls ? `${root_cls}::-webkit-scrollbar-thumb:hover, ${root_cls} ::-webkit-scrollbar-thumb:hover` : `::-webkit-scrollbar-thumb:hover`,\n \"scrollbarTrack\": root_cls ? `${root_cls}::-webkit-scrollbar-track, ${root_cls} ::-webkit-scrollbar-track` : `::-webkit-scrollbar-track`,\n }\n\n return css({\n \"@global\": {\n [clss['*']]: {\n scrollbarWidth: \"thin\",\n scrollbarColor: `${thumbColor} ${trackColor}`,\n },\n [clss[\"scrollbar\"]]: {\n width: thumbSize,\n height: thumbSize,\n },\n [clss[\"scrollbarThumb\"]]: {\n backgroundColor: thumbColor,\n borderRadius: \"5px\",\n border: \"2px solid #f4f4f4\",\n },\n [clss[\"scrollbarThumbHover\"]]: {\n backgroundColor: thumbColor,\n },\n [clss['scrollbarTrack']]: {\n backgroundColor: trackColor,\n borderRadius: \"5px\",\n },\n }\n }) as any\n}\n\nexport default useScrollbar\n"],"names":[],"mappings":"+NAaA,MAAM,YAAY,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAsB,KAAe;AAChH,IAAA,MAAM,KAAK,GAAG,QAAQ,CAAC,SAAS,CAAC;AACjC,IAAA,IAAI,CAAC,KAAK;AAAE,QAAA,MAAM,IAAI,KAAK,CAAC,UAAU,SAAS,CAAA,4BAAA,CAA8B,CAAC;AAE9E,IAAA,SAAS,GAAG,SAAS,IAAI,EAAE;IAC3B,UAAU,GAAG,UAAU,IAAI,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS;IACtD,UAAU,GAAG,UAAU,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO;AAC/C,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;AACnB,gBAAA,MAAM,EAAE,mBAAmB;AAC7B,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;AACH,KAAA,CAAQ;AACZ"}
package/index.d.ts CHANGED
@@ -1,21 +1,24 @@
1
1
  export { default as Tag } from './Tag/index.js';
2
2
  export { default as useTagProps } from './Tag/useTagProps.js';
3
- export { UseAnimationProps, animationEases, default as useAnimation } from './useAnimation.js';
4
- export { ColorTemplateColors, ColorTemplateType, default as useColorTemplate } from './useColorTemplate.js';
3
+ export { UseAnimationProps, animationEases, default as useAnimation } from './hooks/useAnimation.js';
4
+ export { ColorTemplateColors, ColorTemplateType, default as useColorTemplate } from './hooks/useColorTemplate.js';
5
5
  export { default as useBreakpoint } from './breakpoint/useBreakpoint.js';
6
6
  export { default as useBreakpointProps, useBreakpointPropsType } from './breakpoint/useBreakpointProps.js';
7
7
  export { default as RenderServerStyles } from './RenderServerStyles.js';
8
8
  export { default as isWindow } from './isWindow.js';
9
- export { default as useInterface } from './useInterface.js';
9
+ export { default as useInterface } from './hooks/useInterface.js';
10
10
  export { default as Transition, TransitionElementProps, TransitionProps, TransitionState, TransitionVariantTypes } from './Transition/index.js';
11
- export { default as useScrollbar } from './useScrollbar.js';
11
+ export { default as useScrollbar } from './hooks/useScrollbar.js';
12
+ export { default as AppRoot, AppRootProps } from './AppRoot/index.js';
13
+ export { default as usePortal } from './usePortal.js';
12
14
  export { adjustColor, adjustTextContrast, alpha, breakpoints, css } from './css/index.js';
13
- export { createTheme } from './theme/createTheme.js';
14
- export { default as ThemeProvider, ThemeProviderProps } from './theme/ThemeProvider.js';
15
- export { ThemeSwitcherOption, default as createThemeSwitcher } from './theme/createThemeSwitcher.js';
16
- export { getTheme, useTheme } from './theme/core.js';
15
+ export { themeRootClass } from './theme/index.js';
17
16
  export { Aliases, BreakpointKeys, CSSBreakpointType, CSSOptionProps, CSSProps, CSSValueType, FN, GlobalCSS } from './css/types.js';
18
17
  export { CSSPropAsAttr, TagCSSProperties, TagComponentType, TagProps, TagPropsRoot } from './Tag/types.js';
19
18
  export { ColorsRefTypes, ObjectType, ThemeColor, ThemeColorInput, ThemeColorItem, ThemeColorItemInput, ThemeOptionInput, ThemeOptions, ThemeTypographyInputType, ThemeTypographyItem, ThemeTypographyItemInput, ThemeTypographyType, TypographyRefTypes } from './theme/types.js';
20
19
  export { default as getValue } from './css/getValue.js';
21
20
  export { default as getProps } from './css/getProps.js';
21
+ export { default as ThemeProvider, ThemeProviderProps } from './theme/ThemeProvider.js';
22
+ export { ThemeSwitcherOption, default as createThemeSwitcher } from './theme/createThemeSwitcher.js';
23
+ export { createTheme } from './theme/createTheme.js';
24
+ export { getTheme, useTheme } from './theme/core.js';
package/index.js CHANGED
@@ -1 +1 @@
1
- 'use strict';Object.defineProperty(exports,'__esModule',{value:true});var index=require('./Tag/index.js'),useTagProps=require('./Tag/useTagProps.js'),useAnimation=require('./useAnimation.js'),useColorTemplate=require('./useColorTemplate.js'),useBreakpoint=require('./breakpoint/useBreakpoint.js'),useBreakpointProps=require('./breakpoint/useBreakpointProps.js'),RenderServerStyles=require('./RenderServerStyles.js'),isWindow=require('./isWindow.js'),useInterface=require('./useInterface.js'),index$1=require('./Transition/index.js'),useScrollbar=require('./useScrollbar.js'),index$2=require('./css/index.js'),createTheme=require('./theme/createTheme.js'),ThemeProvider=require('./theme/ThemeProvider.js'),createThemeSwitcher=require('./theme/createThemeSwitcher.js'),core=require('./theme/core.js'),getValue=require('./css/getValue.js'),getProps=require('./css/getProps.js');exports.Tag=index.default;exports.useTagProps=useTagProps.default;exports.animationEases=useAnimation.animationEases;exports.useAnimation=useAnimation.default;exports.useColorTemplate=useColorTemplate.default;exports.useBreakpoint=useBreakpoint.default;exports.useBreakpointProps=useBreakpointProps.default;exports.RenderServerStyles=RenderServerStyles.default;exports.isWindow=isWindow.default;exports.useInterface=useInterface.default;exports.Transition=index$1.default;exports.useScrollbar=useScrollbar.default;exports.adjustColor=index$2.adjustColor;exports.adjustTextContrast=index$2.adjustTextContrast;exports.alpha=index$2.alpha;exports.breakpoints=index$2.breakpoints;exports.css=index$2.css;exports.createTheme=createTheme.createTheme;exports.ThemeProvider=ThemeProvider.default;exports.createThemeSwitcher=createThemeSwitcher.default;exports.getTheme=core.getTheme;exports.useTheme=core.useTheme;exports.getValue=getValue.default;exports.getProps=getProps.default;//# sourceMappingURL=index.js.map
1
+ 'use strict';Object.defineProperty(exports,'__esModule',{value:true});var index$1=require('./Tag/index.js'),useTagProps=require('./Tag/useTagProps.js'),useAnimation=require('./hooks/useAnimation.js'),useColorTemplate=require('./hooks/useColorTemplate.js'),useBreakpoint=require('./breakpoint/useBreakpoint.js'),useBreakpointProps=require('./breakpoint/useBreakpointProps.js'),RenderServerStyles=require('./RenderServerStyles.js'),isWindow=require('./isWindow.js'),useInterface=require('./hooks/useInterface.js'),index$2=require('./Transition/index.js'),useScrollbar=require('./hooks/useScrollbar.js'),index=require('./AppRoot/index.js'),usePortal=require('./usePortal.js'),index$3=require('./css/index.js'),index$4=require('./theme/index.js'),getValue=require('./css/getValue.js'),getProps=require('./css/getProps.js'),ThemeProvider=require('./theme/ThemeProvider.js'),createThemeSwitcher=require('./theme/createThemeSwitcher.js'),createTheme=require('./theme/createTheme.js'),core=require('./theme/core.js');exports.Tag=index$1.default;exports.useTagProps=useTagProps.default;exports.animationEases=useAnimation.animationEases;exports.useAnimation=useAnimation.default;exports.useColorTemplate=useColorTemplate.default;exports.useBreakpoint=useBreakpoint.default;exports.useBreakpointProps=useBreakpointProps.default;exports.RenderServerStyles=RenderServerStyles.default;exports.isWindow=isWindow.default;exports.useInterface=useInterface.default;exports.Transition=index$2.default;exports.useScrollbar=useScrollbar.default;exports.AppRoot=index.default;exports.usePortal=usePortal.usePortal;exports.adjustColor=index$3.adjustColor;exports.adjustTextContrast=index$3.adjustTextContrast;exports.alpha=index$3.alpha;exports.breakpoints=index$3.breakpoints;exports.css=index$3.css;exports.themeRootClass=index$4.themeRootClass;exports.getValue=getValue.default;exports.getProps=getProps.default;exports.ThemeProvider=ThemeProvider.default;exports.createThemeSwitcher=createThemeSwitcher.default;exports.createTheme=createTheme.createTheme;exports.getTheme=core.getTheme;exports.useTheme=core.useTheme;//# sourceMappingURL=index.js.map
package/index.mjs CHANGED
@@ -1 +1 @@
1
- export{default as Tag}from'./Tag/index.mjs';export{default as useTagProps}from'./Tag/useTagProps.mjs';export{animationEases,default as useAnimation}from'./useAnimation.mjs';export{default as useColorTemplate}from'./useColorTemplate.mjs';export{default as useBreakpoint}from'./breakpoint/useBreakpoint.mjs';export{default as useBreakpointProps}from'./breakpoint/useBreakpointProps.mjs';export{default as RenderServerStyles}from'./RenderServerStyles.mjs';export{default as isWindow}from'./isWindow.mjs';export{default as useInterface}from'./useInterface.mjs';export{default as Transition}from'./Transition/index.mjs';export{default as useScrollbar}from'./useScrollbar.mjs';export{adjustColor,adjustTextContrast,alpha,breakpoints,css}from'./css/index.mjs';export{createTheme}from'./theme/createTheme.mjs';export{default as ThemeProvider}from'./theme/ThemeProvider.mjs';export{default as createThemeSwitcher}from'./theme/createThemeSwitcher.mjs';export{getTheme,useTheme}from'./theme/core.mjs';export{default as getValue}from'./css/getValue.mjs';export{default as getProps}from'./css/getProps.mjs';//# sourceMappingURL=index.mjs.map
1
+ export{default as Tag}from'./Tag/index.mjs';export{default as useTagProps}from'./Tag/useTagProps.mjs';export{animationEases,default as useAnimation}from'./hooks/useAnimation.mjs';export{default as useColorTemplate}from'./hooks/useColorTemplate.mjs';export{default as useBreakpoint}from'./breakpoint/useBreakpoint.mjs';export{default as useBreakpointProps}from'./breakpoint/useBreakpointProps.mjs';export{default as RenderServerStyles}from'./RenderServerStyles.mjs';export{default as isWindow}from'./isWindow.mjs';export{default as useInterface}from'./hooks/useInterface.mjs';export{default as Transition}from'./Transition/index.mjs';export{default as useScrollbar}from'./hooks/useScrollbar.mjs';export{default as AppRoot}from'./AppRoot/index.mjs';export{usePortal}from'./usePortal.mjs';export{adjustColor,adjustTextContrast,alpha,breakpoints,css}from'./css/index.mjs';export{themeRootClass}from'./theme/index.mjs';export{default as getValue}from'./css/getValue.mjs';export{default as getProps}from'./css/getProps.mjs';export{default as ThemeProvider}from'./theme/ThemeProvider.mjs';export{default as createThemeSwitcher}from'./theme/createThemeSwitcher.mjs';export{createTheme}from'./theme/createTheme.mjs';export{getTheme,useTheme}from'./theme/core.mjs';//# sourceMappingURL=index.mjs.map
package/isWindow.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- declare const isWindow: () => Window | void;
1
+ declare const isWindow: () => boolean;
2
2
 
3
3
  export { isWindow as default };
package/isWindow.js CHANGED
@@ -1 +1 @@
1
- 'use strict';Object.defineProperty(exports,'__esModule',{value:true});const isWindow = () => typeof window !== 'undefined' ? window : undefined;exports.default=isWindow;//# sourceMappingURL=isWindow.js.map
1
+ 'use strict';Object.defineProperty(exports,'__esModule',{value:true});const isWindow = () => typeof window !== 'undefined';exports.default=isWindow;//# sourceMappingURL=isWindow.js.map
package/isWindow.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"isWindow.js","sources":["../src/isWindow.ts"],"sourcesContent":["\nconst isWindow = (): Window | void => typeof window !== 'undefined' ? window : undefined\nexport default isWindow"],"names":[],"mappings":"sEACA,MAAM,QAAQ,GAAG,MAAqB,OAAO,MAAM,KAAK,WAAW,GAAG,MAAM,GAAG"}
1
+ {"version":3,"file":"isWindow.js","sources":["../src/isWindow.ts"],"sourcesContent":["\nconst isWindow = () => typeof window !== 'undefined'\nexport default isWindow"],"names":[],"mappings":"sEACA,MAAM,QAAQ,GAAG,MAAM,OAAO,MAAM,KAAK"}
package/isWindow.mjs CHANGED
@@ -1 +1 @@
1
- const isWindow = () => typeof window !== 'undefined' ? window : undefined;export{isWindow as default};//# sourceMappingURL=isWindow.mjs.map
1
+ const isWindow = () => typeof window !== 'undefined';export{isWindow as default};//# sourceMappingURL=isWindow.mjs.map
package/isWindow.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"isWindow.mjs","sources":["../src/isWindow.ts"],"sourcesContent":["\nconst isWindow = (): Window | void => typeof window !== 'undefined' ? window : undefined\nexport default isWindow"],"names":[],"mappings":"AACA,MAAM,QAAQ,GAAG,MAAqB,OAAO,MAAM,KAAK,WAAW,GAAG,MAAM,GAAG"}
1
+ {"version":3,"file":"isWindow.mjs","sources":["../src/isWindow.ts"],"sourcesContent":["\nconst isWindow = () => typeof window !== 'undefined'\nexport default isWindow"],"names":[],"mappings":"AACA,MAAM,QAAQ,GAAG,MAAM,OAAO,MAAM,KAAK"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xanui/core",
3
- "version": "1.1.14",
3
+ "version": "1.1.16",
4
4
  "description": "",
5
5
  "private": false,
6
6
  "main": "./index.js",
@@ -8,9 +8,9 @@
8
8
  "types": "./index.d.ts",
9
9
  "sideEffects": false,
10
10
  "dependencies": {
11
- "oncss": "^1.2.2",
11
+ "oncss": "^1.2.3",
12
12
  "pretty-class": "^1.0.8",
13
- "react-state-bucket": "^1.2.3"
13
+ "react-state-bucket": "^1.2.4"
14
14
  },
15
15
  "devDependencies": {
16
16
  "@types/react": "^19.2.7",
@@ -3,11 +3,8 @@ import { TagComponentType, TagProps } from '../Tag/types.js';
3
3
 
4
4
  type ThemeProviderProps<T extends TagComponentType = 'div'> = TagProps<T> & {
5
5
  theme: string;
6
- applyScrollbarCss?: boolean;
7
- isRootProvider?: boolean;
8
- renderIsRoot?: React.ReactElement;
9
6
  };
10
- declare const ThemeProvider: <T extends TagComponentType = "div">({ children, theme, applyScrollbarCss, isRootProvider, renderIsRoot, ...props }: ThemeProviderProps<T>) => React.JSX.Element;
7
+ declare const ThemeProvider: <T extends TagComponentType = "div">({ children, theme, ...props }: ThemeProviderProps<T>) => React.JSX.Element;
11
8
 
12
9
  export { ThemeProvider as default };
13
10
  export type { ThemeProviderProps };
@@ -1,11 +1,8 @@
1
- 'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),index$1=require('../Tag/index.js'),BreakpointProvider=require('../breakpoint/BreakpointProvider.js'),index=require('../css/index.js'),core=require('./core.js'),ThemeCssVars=require('./ThemeCssVars.js'),useScrollbar=require('../useScrollbar.js'),createTheme=require('./createTheme.js'),ThemeDefaultOptions=require('./ThemeDefaultOptions.js');function _interopNamespaceDefault(e){var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var React__namespace=/*#__PURE__*/_interopNamespaceDefault(React);createTheme.createTheme("light", { colors: ThemeDefaultOptions.lightColorPallete });
2
- createTheme.createTheme("dark", { colors: ThemeDefaultOptions.darkColorPallete });
3
- const ThemeProvider = (_a) => {
4
- var { children, theme, applyScrollbarCss, isRootProvider, renderIsRoot } = _a, props = tslib.__rest(_a, ["children", "theme", "applyScrollbarCss", "isRootProvider", "renderIsRoot"]);
1
+ 'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),index$1=require('../Tag/index.js'),core=require('./core.js'),ThemeCssVars=require('./ThemeCssVars.js'),index=require('../css/index.js');function _interopNamespaceDefault(e){var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var React__namespace=/*#__PURE__*/_interopNamespaceDefault(React);const ThemeProvider = (_a) => {
2
+ var { children, theme } = _a, props = tslib.__rest(_a, ["children", "theme"]);
5
3
  const THEME = core.ThemeFactory.get(theme);
6
4
  if (!THEME)
7
5
  throw new Error(`Invalid theme name provided: ${theme}`);
8
- applyScrollbarCss !== null && applyScrollbarCss !== void 0 ? applyScrollbarCss : (applyScrollbarCss = true);
9
6
  React__namespace.useMemo(() => {
10
7
  const root_cls = `.xui-${theme}-theme-root`;
11
8
  let gkeys = Object.keys(THEME.globalStyle || {});
@@ -16,45 +13,6 @@ const ThemeProvider = (_a) => {
16
13
  index.css({
17
14
  "@global": Object.assign(Object.assign({}, gstyles), { [root_cls]: ThemeCssVars.default(THEME) })
18
15
  });
19
- applyScrollbarCss && useScrollbar.default({
20
- themeName: theme,
21
- root_cls: root_cls
22
- });
23
- index.css({
24
- "@global": {
25
- "*": {
26
- m: 0,
27
- p: 0,
28
- outline: "none",
29
- boxSizing: "border-box",
30
- verticalAlign: "baseline",
31
- },
32
- "html, body": {
33
- minHeight: "100%",
34
- "-webkit-font-smoothing": "antialiased"
35
- },
36
- "img, picture, video, canvas, svg": {
37
- maxWidth: "100%",
38
- display: "block"
39
- },
40
- "input, button, textarea, select": {
41
- font: "inherit"
42
- },
43
- "table": {
44
- borderCollapse: "collapse",
45
- borderSpacing: 0
46
- },
47
- "ol, ul": {
48
- listStyle: "none"
49
- },
50
- "a": {
51
- display: "inline-block"
52
- },
53
- "p, h1, h2, h3, h4, h5, h6": {
54
- overflowWrap: "break-word",
55
- }
56
- }
57
- });
58
16
  }, [theme]);
59
- return (jsxRuntime.jsx(core.ThemeContex.Provider, { value: theme, children: isRootProvider ? jsxRuntime.jsx(BreakpointProvider.BreakpointProvider, { children: jsxRuntime.jsxs(index$1.default, Object.assign({ minHeight: "100%", bgcolor: THEME.colors.background.primary, fontFamily: THEME.typography.fontFamily, fontSize: THEME.typography.text.fontSize, fontWeight: THEME.typography.text.fontWeight, lineHeight: THEME.typography.text.lineHeight }, props, { baseClass: `${theme}-theme-root`, direction: THEME.rtl ? "rtl" : "ltr", children: [children, renderIsRoot] })) }) : jsxRuntime.jsx(index$1.default, Object.assign({ minHeight: "100%", bgcolor: THEME.colors.background.primary, fontFamily: THEME.typography.fontFamily, fontSize: THEME.typography.text.fontSize, fontWeight: THEME.typography.text.fontWeight, lineHeight: THEME.typography.text.lineHeight }, props, { baseClass: `${theme}-theme-root`, direction: THEME.rtl ? "rtl" : "ltr", children: children })) }));
17
+ return (jsxRuntime.jsx(core.ThemeContex.Provider, { value: theme, children: jsxRuntime.jsx(index$1.default, Object.assign({ minHeight: "100%", bgcolor: THEME.colors.background.primary, fontFamily: THEME.typography.fontFamily, fontSize: THEME.typography.text.fontSize, fontWeight: THEME.typography.text.fontWeight, lineHeight: THEME.typography.text.lineHeight }, props, { baseClass: `${theme}-theme-root`, direction: THEME.rtl ? "rtl" : "ltr", children: children })) }));
60
18
  };exports.default=ThemeProvider;//# sourceMappingURL=ThemeProvider.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"ThemeProvider.js","sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { ThemeOptions } from \"./types\"\nimport Tag from \"../Tag\"\nimport { TagComponentType, TagProps } from \"../Tag/types\"\nimport { BreakpointProvider } from \"../breakpoint\"\nimport { ThemeContex, ThemeFactory } from \"./core\"\nimport ThemeCssVars from \"./ThemeCssVars\"\nimport { css } from \"../css\"\nimport useScrollbar from \"../useScrollbar\"\nimport { createTheme } from \"./createTheme\"\nimport { darkColorPallete, lightColorPallete } from \"./ThemeDefaultOptions\"\n\nexport type ThemeProviderProps<T extends TagComponentType = 'div'> = TagProps<T> & {\n theme: string;\n applyScrollbarCss?: boolean;\n isRootProvider?: boolean;\n renderIsRoot?: React.ReactElement;\n}\n\ncreateTheme(\"light\", { colors: lightColorPallete })\ncreateTheme(\"dark\", { colors: darkColorPallete })\n\nconst ThemeProvider = <T extends TagComponentType = 'div'>({ children, theme, applyScrollbarCss, isRootProvider, renderIsRoot, ...props }: ThemeProviderProps<T>) => {\n\n const THEME = ThemeFactory.get(theme) as ThemeOptions\n if (!THEME) throw new Error(`Invalid theme name provided: ${theme}`)\n applyScrollbarCss ??= true\n\n React.useMemo(() => {\n const root_cls = `.xui-${theme}-theme-root`\n let gkeys = Object.keys(THEME.globalStyle || {})\n let gstyles: any = {}\n gkeys.forEach((key) => {\n gstyles[`${root_cls} ${key}`] = THEME.globalStyle[key as any]\n })\n\n css({\n \"@global\": {\n ...gstyles,\n [root_cls]: ThemeCssVars(THEME)\n }\n })\n\n applyScrollbarCss && useScrollbar({\n themeName: theme,\n root_cls: root_cls\n })\n\n css({\n \"@global\": {\n \"*\": {\n m: 0,\n p: 0,\n outline: \"none\",\n boxSizing: \"border-box\",\n verticalAlign: \"baseline\",\n },\n \"html, body\": {\n minHeight: \"100%\",\n \"-webkit-font-smoothing\": \"antialiased\"\n } as any,\n \"img, picture, video, canvas, svg\": {\n maxWidth: \"100%\",\n display: \"block\"\n },\n \"input, button, textarea, select\": {\n font: \"inherit\"\n },\n \"table\": {\n borderCollapse: \"collapse\",\n borderSpacing: 0\n },\n \"ol, ul\": {\n listStyle: \"none\"\n },\n \"a\": {\n display: \"inline-block\"\n },\n \"p, h1, h2, h3, h4, h5, h6\": {\n overflowWrap: \"break-word\",\n }\n }\n })\n }, [theme])\n\n return (\n <ThemeContex.Provider value={theme}>\n {\n isRootProvider ? <BreakpointProvider>\n <Tag\n minHeight=\"100%\"\n bgcolor={THEME.colors.background.primary}\n fontFamily={THEME.typography.fontFamily}\n fontSize={THEME.typography.text.fontSize}\n fontWeight={THEME.typography.text.fontWeight}\n lineHeight={THEME.typography.text.lineHeight}\n {...props}\n baseClass={`${theme}-theme-root`}\n direction={THEME.rtl ? \"rtl\" : \"ltr\"}\n >\n {children}\n {renderIsRoot}\n </Tag>\n </BreakpointProvider> : <Tag\n minHeight=\"100%\"\n bgcolor={THEME.colors.background.primary}\n fontFamily={THEME.typography.fontFamily}\n fontSize={THEME.typography.text.fontSize}\n fontWeight={THEME.typography.text.fontWeight}\n lineHeight={THEME.typography.text.lineHeight}\n {...props}\n baseClass={`${theme}-theme-root`}\n direction={THEME.rtl ? \"rtl\" : \"ltr\"}\n >\n {children}\n </Tag>\n }\n </ThemeContex.Provider>\n )\n}\n\nexport default ThemeProvider"],"names":["createTheme","lightColorPallete","darkColorPallete","__rest","ThemeFactory","React","css","ThemeCssVars","useScrollbar","_jsx","ThemeContex","BreakpointProvider","_jsxs","Tag"],"mappings":"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"}
1
+ {"version":3,"file":"ThemeProvider.js","sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { ThemeOptions } from \"./types\"\nimport Tag from \"../Tag\"\nimport { TagComponentType, TagProps } from \"../Tag/types\"\nimport { ThemeContex, ThemeFactory } from \"./core\"\nimport ThemeCssVars from \"./ThemeCssVars\"\nimport { css } from \"../css\"\n\nexport type ThemeProviderProps<T extends TagComponentType = 'div'> = TagProps<T> & {\n theme: string;\n}\n\n\nconst ThemeProvider = <T extends TagComponentType = 'div'>({ children, theme, ...props }: ThemeProviderProps<T>) => {\n\n const THEME = ThemeFactory.get(theme) as ThemeOptions\n if (!THEME) throw new Error(`Invalid theme name provided: ${theme}`)\n\n React.useMemo(() => {\n const root_cls = `.xui-${theme}-theme-root`\n let gkeys = Object.keys(THEME.globalStyle || {})\n let gstyles: any = {}\n gkeys.forEach((key) => {\n gstyles[`${root_cls} ${key}`] = THEME.globalStyle[key as any]\n })\n\n css({\n \"@global\": {\n ...gstyles,\n [root_cls]: ThemeCssVars(THEME)\n }\n })\n }, [theme])\n\n return (\n <ThemeContex.Provider value={theme}>\n <Tag\n minHeight=\"100%\"\n bgcolor={THEME.colors.background.primary}\n fontFamily={THEME.typography.fontFamily}\n fontSize={THEME.typography.text.fontSize}\n fontWeight={THEME.typography.text.fontWeight}\n lineHeight={THEME.typography.text.lineHeight}\n {...props}\n baseClass={`${theme}-theme-root`}\n direction={THEME.rtl ? \"rtl\" : \"ltr\"}\n >\n {children}\n </Tag>\n </ThemeContex.Provider>\n )\n}\n\nexport default ThemeProvider"],"names":["__rest","ThemeFactory","React","css","ThemeCssVars","_jsx","ThemeContex","Tag"],"mappings":"woBAaA,MAAM,aAAa,GAAG,CAAqC,EAAoD,KAAI;QAAxD,EAAE,QAAQ,EAAE,KAAK,EAAA,GAAA,EAAmC,EAA9B,KAAK,GAAAA,YAAA,CAAA,EAAA,EAA3B,qBAA6B,CAAF;IAEnF,MAAM,KAAK,GAAGC,iBAAY,CAAC,GAAG,CAAC,KAAK,CAAiB;AACrD,IAAA,IAAI,CAAC,KAAK;AAAE,QAAA,MAAM,IAAI,KAAK,CAAC,gCAAgC,KAAK,CAAA,CAAE,CAAC;AAEpE,IAAAC,gBAAK,CAAC,OAAO,CAAC,MAAK;AAChB,QAAA,MAAM,QAAQ,GAAG,CAAA,KAAA,EAAQ,KAAK,aAAa;AAC3C,QAAA,IAAI,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,IAAI,EAAE,CAAC;QAChD,IAAI,OAAO,GAAQ,EAAE;AACrB,QAAA,KAAK,CAAC,OAAO,CAAC,CAAC,GAAG,KAAI;AACnB,YAAA,OAAO,CAAC,CAAA,EAAG,QAAQ,CAAA,CAAA,EAAI,GAAG,CAAA,CAAE,CAAC,GAAG,KAAK,CAAC,WAAW,CAAC,GAAU,CAAC;AAChE,QAAA,CAAC,CAAC;AAEF,QAAAC,SAAG,CAAC;YACD,SAAS,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACH,OAAO,CAAA,EAAA,EACV,CAAC,QAAQ,GAAGC,oBAAY,CAAC,KAAK,CAAC,EAAA;AAEpC,SAAA,CAAC;AACL,IAAA,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;AAEX,IAAA,QACGC,cAAA,CAACC,gBAAW,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,KAAK,YAC/BD,cAAA,CAACE,eAAG,kBACD,SAAS,EAAC,MAAM,EAChB,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,OAAO,EACxC,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,UAAU,EACvC,QAAQ,EAAE,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,EACxC,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,EAC5C,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,EAAA,EACxC,KAAK,IACT,SAAS,EAAE,GAAG,KAAK,CAAA,WAAA,CAAa,EAChC,SAAS,EAAE,KAAK,CAAC,GAAG,GAAG,KAAK,GAAG,KAAK,EAAA,QAAA,EAEnC,QAAQ,EAAA,CAAA,CACN,EAAA,CACc;AAE7B"}
@@ -1,11 +1,8 @@
1
- import {__rest}from'tslib';import {jsx,jsxs}from'react/jsx-runtime';import*as React from'react';import Tag from'../Tag/index.mjs';import {BreakpointProvider}from'../breakpoint/BreakpointProvider.mjs';import {css}from'../css/index.mjs';import {ThemeFactory,ThemeContex}from'./core.mjs';import ThemeCssVars from'./ThemeCssVars.mjs';import useScrollbar from'../useScrollbar.mjs';import {createTheme}from'./createTheme.mjs';import {lightColorPallete,darkColorPallete}from'./ThemeDefaultOptions.mjs';createTheme("light", { colors: lightColorPallete });
2
- createTheme("dark", { colors: darkColorPallete });
3
- const ThemeProvider = (_a) => {
4
- var { children, theme, applyScrollbarCss, isRootProvider, renderIsRoot } = _a, props = __rest(_a, ["children", "theme", "applyScrollbarCss", "isRootProvider", "renderIsRoot"]);
1
+ import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import*as React from'react';import Tag from'../Tag/index.mjs';import {ThemeFactory,ThemeContex}from'./core.mjs';import ThemeCssVars from'./ThemeCssVars.mjs';import {css}from'../css/index.mjs';const ThemeProvider = (_a) => {
2
+ var { children, theme } = _a, props = __rest(_a, ["children", "theme"]);
5
3
  const THEME = ThemeFactory.get(theme);
6
4
  if (!THEME)
7
5
  throw new Error(`Invalid theme name provided: ${theme}`);
8
- applyScrollbarCss !== null && applyScrollbarCss !== void 0 ? applyScrollbarCss : (applyScrollbarCss = true);
9
6
  React.useMemo(() => {
10
7
  const root_cls = `.xui-${theme}-theme-root`;
11
8
  let gkeys = Object.keys(THEME.globalStyle || {});
@@ -16,45 +13,6 @@ const ThemeProvider = (_a) => {
16
13
  css({
17
14
  "@global": Object.assign(Object.assign({}, gstyles), { [root_cls]: ThemeCssVars(THEME) })
18
15
  });
19
- applyScrollbarCss && useScrollbar({
20
- themeName: theme,
21
- root_cls: root_cls
22
- });
23
- css({
24
- "@global": {
25
- "*": {
26
- m: 0,
27
- p: 0,
28
- outline: "none",
29
- boxSizing: "border-box",
30
- verticalAlign: "baseline",
31
- },
32
- "html, body": {
33
- minHeight: "100%",
34
- "-webkit-font-smoothing": "antialiased"
35
- },
36
- "img, picture, video, canvas, svg": {
37
- maxWidth: "100%",
38
- display: "block"
39
- },
40
- "input, button, textarea, select": {
41
- font: "inherit"
42
- },
43
- "table": {
44
- borderCollapse: "collapse",
45
- borderSpacing: 0
46
- },
47
- "ol, ul": {
48
- listStyle: "none"
49
- },
50
- "a": {
51
- display: "inline-block"
52
- },
53
- "p, h1, h2, h3, h4, h5, h6": {
54
- overflowWrap: "break-word",
55
- }
56
- }
57
- });
58
16
  }, [theme]);
59
- return (jsx(ThemeContex.Provider, { value: theme, children: isRootProvider ? jsx(BreakpointProvider, { children: jsxs(Tag, Object.assign({ minHeight: "100%", bgcolor: THEME.colors.background.primary, fontFamily: THEME.typography.fontFamily, fontSize: THEME.typography.text.fontSize, fontWeight: THEME.typography.text.fontWeight, lineHeight: THEME.typography.text.lineHeight }, props, { baseClass: `${theme}-theme-root`, direction: THEME.rtl ? "rtl" : "ltr", children: [children, renderIsRoot] })) }) : jsx(Tag, Object.assign({ minHeight: "100%", bgcolor: THEME.colors.background.primary, fontFamily: THEME.typography.fontFamily, fontSize: THEME.typography.text.fontSize, fontWeight: THEME.typography.text.fontWeight, lineHeight: THEME.typography.text.lineHeight }, props, { baseClass: `${theme}-theme-root`, direction: THEME.rtl ? "rtl" : "ltr", children: children })) }));
17
+ return (jsx(ThemeContex.Provider, { value: theme, children: jsx(Tag, Object.assign({ minHeight: "100%", bgcolor: THEME.colors.background.primary, fontFamily: THEME.typography.fontFamily, fontSize: THEME.typography.text.fontSize, fontWeight: THEME.typography.text.fontWeight, lineHeight: THEME.typography.text.lineHeight }, props, { baseClass: `${theme}-theme-root`, direction: THEME.rtl ? "rtl" : "ltr", children: children })) }));
60
18
  };export{ThemeProvider as default};//# sourceMappingURL=ThemeProvider.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"ThemeProvider.mjs","sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { ThemeOptions } from \"./types\"\nimport Tag from \"../Tag\"\nimport { TagComponentType, TagProps } from \"../Tag/types\"\nimport { BreakpointProvider } from \"../breakpoint\"\nimport { ThemeContex, ThemeFactory } from \"./core\"\nimport ThemeCssVars from \"./ThemeCssVars\"\nimport { css } from \"../css\"\nimport useScrollbar from \"../useScrollbar\"\nimport { createTheme } from \"./createTheme\"\nimport { darkColorPallete, lightColorPallete } from \"./ThemeDefaultOptions\"\n\nexport type ThemeProviderProps<T extends TagComponentType = 'div'> = TagProps<T> & {\n theme: string;\n applyScrollbarCss?: boolean;\n isRootProvider?: boolean;\n renderIsRoot?: React.ReactElement;\n}\n\ncreateTheme(\"light\", { colors: lightColorPallete })\ncreateTheme(\"dark\", { colors: darkColorPallete })\n\nconst ThemeProvider = <T extends TagComponentType = 'div'>({ children, theme, applyScrollbarCss, isRootProvider, renderIsRoot, ...props }: ThemeProviderProps<T>) => {\n\n const THEME = ThemeFactory.get(theme) as ThemeOptions\n if (!THEME) throw new Error(`Invalid theme name provided: ${theme}`)\n applyScrollbarCss ??= true\n\n React.useMemo(() => {\n const root_cls = `.xui-${theme}-theme-root`\n let gkeys = Object.keys(THEME.globalStyle || {})\n let gstyles: any = {}\n gkeys.forEach((key) => {\n gstyles[`${root_cls} ${key}`] = THEME.globalStyle[key as any]\n })\n\n css({\n \"@global\": {\n ...gstyles,\n [root_cls]: ThemeCssVars(THEME)\n }\n })\n\n applyScrollbarCss && useScrollbar({\n themeName: theme,\n root_cls: root_cls\n })\n\n css({\n \"@global\": {\n \"*\": {\n m: 0,\n p: 0,\n outline: \"none\",\n boxSizing: \"border-box\",\n verticalAlign: \"baseline\",\n },\n \"html, body\": {\n minHeight: \"100%\",\n \"-webkit-font-smoothing\": \"antialiased\"\n } as any,\n \"img, picture, video, canvas, svg\": {\n maxWidth: \"100%\",\n display: \"block\"\n },\n \"input, button, textarea, select\": {\n font: \"inherit\"\n },\n \"table\": {\n borderCollapse: \"collapse\",\n borderSpacing: 0\n },\n \"ol, ul\": {\n listStyle: \"none\"\n },\n \"a\": {\n display: \"inline-block\"\n },\n \"p, h1, h2, h3, h4, h5, h6\": {\n overflowWrap: \"break-word\",\n }\n }\n })\n }, [theme])\n\n return (\n <ThemeContex.Provider value={theme}>\n {\n isRootProvider ? <BreakpointProvider>\n <Tag\n minHeight=\"100%\"\n bgcolor={THEME.colors.background.primary}\n fontFamily={THEME.typography.fontFamily}\n fontSize={THEME.typography.text.fontSize}\n fontWeight={THEME.typography.text.fontWeight}\n lineHeight={THEME.typography.text.lineHeight}\n {...props}\n baseClass={`${theme}-theme-root`}\n direction={THEME.rtl ? \"rtl\" : \"ltr\"}\n >\n {children}\n {renderIsRoot}\n </Tag>\n </BreakpointProvider> : <Tag\n minHeight=\"100%\"\n bgcolor={THEME.colors.background.primary}\n fontFamily={THEME.typography.fontFamily}\n fontSize={THEME.typography.text.fontSize}\n fontWeight={THEME.typography.text.fontWeight}\n lineHeight={THEME.typography.text.lineHeight}\n {...props}\n baseClass={`${theme}-theme-root`}\n direction={THEME.rtl ? \"rtl\" : \"ltr\"}\n >\n {children}\n </Tag>\n }\n </ThemeContex.Provider>\n )\n}\n\nexport default ThemeProvider"],"names":["_jsx","_jsxs"],"mappings":"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"}
1
+ {"version":3,"file":"ThemeProvider.mjs","sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { ThemeOptions } from \"./types\"\nimport Tag from \"../Tag\"\nimport { TagComponentType, TagProps } from \"../Tag/types\"\nimport { ThemeContex, ThemeFactory } from \"./core\"\nimport ThemeCssVars from \"./ThemeCssVars\"\nimport { css } from \"../css\"\n\nexport type ThemeProviderProps<T extends TagComponentType = 'div'> = TagProps<T> & {\n theme: string;\n}\n\n\nconst ThemeProvider = <T extends TagComponentType = 'div'>({ children, theme, ...props }: ThemeProviderProps<T>) => {\n\n const THEME = ThemeFactory.get(theme) as ThemeOptions\n if (!THEME) throw new Error(`Invalid theme name provided: ${theme}`)\n\n React.useMemo(() => {\n const root_cls = `.xui-${theme}-theme-root`\n let gkeys = Object.keys(THEME.globalStyle || {})\n let gstyles: any = {}\n gkeys.forEach((key) => {\n gstyles[`${root_cls} ${key}`] = THEME.globalStyle[key as any]\n })\n\n css({\n \"@global\": {\n ...gstyles,\n [root_cls]: ThemeCssVars(THEME)\n }\n })\n }, [theme])\n\n return (\n <ThemeContex.Provider value={theme}>\n <Tag\n minHeight=\"100%\"\n bgcolor={THEME.colors.background.primary}\n fontFamily={THEME.typography.fontFamily}\n fontSize={THEME.typography.text.fontSize}\n fontWeight={THEME.typography.text.fontWeight}\n lineHeight={THEME.typography.text.lineHeight}\n {...props}\n baseClass={`${theme}-theme-root`}\n direction={THEME.rtl ? \"rtl\" : \"ltr\"}\n >\n {children}\n </Tag>\n </ThemeContex.Provider>\n )\n}\n\nexport default ThemeProvider"],"names":["_jsx"],"mappings":"+PAaA,MAAM,aAAa,GAAG,CAAqC,EAAoD,KAAI;QAAxD,EAAE,QAAQ,EAAE,KAAK,EAAA,GAAA,EAAmC,EAA9B,KAAK,GAAA,MAAA,CAAA,EAAA,EAA3B,qBAA6B,CAAF;IAEnF,MAAM,KAAK,GAAG,YAAY,CAAC,GAAG,CAAC,KAAK,CAAiB;AACrD,IAAA,IAAI,CAAC,KAAK;AAAE,QAAA,MAAM,IAAI,KAAK,CAAC,gCAAgC,KAAK,CAAA,CAAE,CAAC;AAEpE,IAAA,KAAK,CAAC,OAAO,CAAC,MAAK;AAChB,QAAA,MAAM,QAAQ,GAAG,CAAA,KAAA,EAAQ,KAAK,aAAa;AAC3C,QAAA,IAAI,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,IAAI,EAAE,CAAC;QAChD,IAAI,OAAO,GAAQ,EAAE;AACrB,QAAA,KAAK,CAAC,OAAO,CAAC,CAAC,GAAG,KAAI;AACnB,YAAA,OAAO,CAAC,CAAA,EAAG,QAAQ,CAAA,CAAA,EAAI,GAAG,CAAA,CAAE,CAAC,GAAG,KAAK,CAAC,WAAW,CAAC,GAAU,CAAC;AAChE,QAAA,CAAC,CAAC;AAEF,QAAA,GAAG,CAAC;YACD,SAAS,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACH,OAAO,CAAA,EAAA,EACV,CAAC,QAAQ,GAAG,YAAY,CAAC,KAAK,CAAC,EAAA;AAEpC,SAAA,CAAC;AACL,IAAA,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;AAEX,IAAA,QACGA,GAAA,CAAC,WAAW,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,KAAK,YAC/BA,GAAA,CAAC,GAAG,kBACD,SAAS,EAAC,MAAM,EAChB,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,OAAO,EACxC,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,UAAU,EACvC,QAAQ,EAAE,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,EACxC,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,EAC5C,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,EAAA,EACxC,KAAK,IACT,SAAS,EAAE,GAAG,KAAK,CAAA,WAAA,CAAa,EAChC,SAAS,EAAE,KAAK,CAAC,GAAG,GAAG,KAAK,GAAG,KAAK,EAAA,QAAA,EAEnC,QAAQ,EAAA,CAAA,CACN,EAAA,CACc;AAE7B"}
@@ -0,0 +1,3 @@
1
+ declare const themeRootClass: (theme: string) => string;
2
+
3
+ export { themeRootClass };
package/theme/index.js ADDED
@@ -0,0 +1 @@
1
+ 'use strict';Object.defineProperty(exports,'__esModule',{value:true});require('./ThemeDefaultOptions.js');var core=require('./core.js');require('../css/getValue.js'),require('oncss'),require('tslib'),require('react/jsx-runtime'),require('react'),require('../Tag/index.js'),require('react-state-bucket');const themeRootClass = (theme) => `.xui-${theme}-theme-root`;exports.getTheme=core.getTheme;exports.useTheme=core.useTheme;exports.themeRootClass=themeRootClass;//# sourceMappingURL=index.js.map