@xanui/core 1.1.15 → 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.
- package/AppRoot/index.d.ts +11 -0
- package/AppRoot/index.js +62 -0
- package/AppRoot/index.js.map +1 -0
- package/AppRoot/index.mjs +62 -0
- package/AppRoot/index.mjs.map +1 -0
- package/Tag/index.js +12 -3
- package/Tag/index.js.map +1 -1
- package/Tag/index.mjs +12 -3
- package/Tag/index.mjs.map +1 -1
- package/Tag/useTagProps.d.ts +7 -1
- package/Tag/useTagProps.js +4 -3
- package/Tag/useTagProps.js.map +1 -1
- package/Tag/useTagProps.mjs +4 -3
- package/Tag/useTagProps.mjs.map +1 -1
- package/Transition/index.d.ts +1 -1
- package/Transition/index.js +1 -1
- package/Transition/index.js.map +1 -1
- package/Transition/index.mjs +1 -1
- package/Transition/index.mjs.map +1 -1
- package/breakpoint/BreakpointProvider.js +1 -3
- package/breakpoint/BreakpointProvider.js.map +1 -1
- package/breakpoint/BreakpointProvider.mjs +1 -3
- package/breakpoint/BreakpointProvider.mjs.map +1 -1
- package/{useAnimation.d.ts → hooks/useAnimation.d.ts} +1 -1
- package/{useAnimation.js → hooks/useAnimation.js} +1 -1
- package/hooks/useAnimation.js.map +1 -0
- package/{useAnimation.mjs → hooks/useAnimation.mjs} +1 -1
- package/hooks/useAnimation.mjs.map +1 -0
- package/{useColorTemplate.js → hooks/useColorTemplate.js} +1 -1
- package/hooks/useColorTemplate.js.map +1 -0
- package/{useColorTemplate.mjs → hooks/useColorTemplate.mjs} +1 -1
- package/hooks/useColorTemplate.mjs.map +1 -0
- package/{useInterface.d.ts → hooks/useInterface.d.ts} +1 -1
- package/{useInterface.js → hooks/useInterface.js} +1 -1
- package/hooks/useInterface.js.map +1 -0
- package/{useInterface.mjs → hooks/useInterface.mjs} +1 -1
- package/hooks/useInterface.mjs.map +1 -0
- package/{useScrollbar.js → hooks/useScrollbar.js} +1 -1
- package/hooks/useScrollbar.js.map +1 -0
- package/{useScrollbar.mjs → hooks/useScrollbar.mjs} +1 -1
- package/hooks/useScrollbar.mjs.map +1 -0
- package/index.d.ts +11 -8
- package/index.js +1 -1
- package/index.mjs +1 -1
- package/isWindow.d.ts +1 -1
- package/isWindow.js +1 -1
- package/isWindow.js.map +1 -1
- package/isWindow.mjs +1 -1
- package/isWindow.mjs.map +1 -1
- package/package.json +2 -2
- package/theme/ThemeProvider.d.ts +1 -4
- package/theme/ThemeProvider.js +3 -45
- package/theme/ThemeProvider.js.map +1 -1
- package/theme/ThemeProvider.mjs +3 -45
- package/theme/ThemeProvider.mjs.map +1 -1
- package/theme/index.d.ts +3 -0
- package/theme/index.js +1 -0
- package/theme/index.js.map +1 -0
- package/theme/index.mjs +1 -0
- package/theme/index.mjs.map +1 -0
- package/usePortal.d.ts +9 -0
- package/usePortal.js +56 -0
- package/usePortal.js.map +1 -0
- package/usePortal.mjs +56 -0
- package/usePortal.mjs.map +1 -0
- package/useAnimation.js.map +0 -1
- package/useAnimation.mjs.map +0 -1
- package/useColorTemplate.js.map +0 -1
- package/useColorTemplate.mjs.map +0 -1
- package/useInterface.js.map +0 -1
- package/useInterface.mjs.map +0 -1
- package/useScrollbar.js.map +0 -1
- package/useScrollbar.mjs.map +0 -1
- /package/{useColorTemplate.d.ts → hooks/useColorTemplate.d.ts} +0 -0
- /package/{useScrollbar.d.ts → hooks/useScrollbar.d.ts} +0 -0
|
@@ -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'
|
|
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('
|
|
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'
|
|
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 {
|
|
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
|
+
'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{
|
|
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
package/isWindow.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
'use strict';Object.defineProperty(exports,'__esModule',{value:true});const isWindow = () => typeof window !== 'undefined'
|
|
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 = ()
|
|
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'
|
|
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 = ()
|
|
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.
|
|
3
|
+
"version": "1.1.16",
|
|
4
4
|
"description": "",
|
|
5
5
|
"private": false,
|
|
6
6
|
"main": "./index.js",
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"types": "./index.d.ts",
|
|
9
9
|
"sideEffects": false,
|
|
10
10
|
"dependencies": {
|
|
11
|
-
"oncss": "^1.2.
|
|
11
|
+
"oncss": "^1.2.3",
|
|
12
12
|
"pretty-class": "^1.0.8",
|
|
13
13
|
"react-state-bucket": "^1.2.4"
|
|
14
14
|
},
|
package/theme/ThemeProvider.d.ts
CHANGED
|
@@ -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,
|
|
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 };
|
package/theme/ThemeProvider.js
CHANGED
|
@@ -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'),
|
|
2
|
-
|
|
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:
|
|
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 {
|
|
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"}
|
package/theme/ThemeProvider.mjs
CHANGED
|
@@ -1,11 +1,8 @@
|
|
|
1
|
-
import {__rest}from'tslib';import {jsx
|
|
2
|
-
|
|
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:
|
|
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 {
|
|
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"}
|
package/theme/index.d.ts
ADDED
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
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/theme/index.tsx"],"sourcesContent":["import { createTheme } from \"./createTheme\"\nimport ThemeProvider from './ThemeProvider'\nimport createThemeSwitcher from './createThemeSwitcher'\nimport { getTheme, useTheme } from './core'\nexport type { ThemeProviderProps } from './ThemeProvider'\nexport type { ThemeSwitcherOption } from './createThemeSwitcher'\n\nexport const themeRootClass = (theme: string) => `.xui-${theme}-theme-root`\n\nexport {\n ThemeProvider,\n createThemeSwitcher,\n createTheme,\n getTheme,\n useTheme\n}\n\n"],"names":[],"mappings":"+SAOO,MAAM,cAAc,GAAG,CAAC,KAAa,KAAK,CAAA,KAAA,EAAQ,KAAK,CAAA,WAAA"}
|
package/theme/index.mjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import'./ThemeDefaultOptions.mjs';export{getTheme,useTheme}from'./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 themeRootClass = (theme) => `.xui-${theme}-theme-root`;export{themeRootClass};//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/theme/index.tsx"],"sourcesContent":["import { createTheme } from \"./createTheme\"\nimport ThemeProvider from './ThemeProvider'\nimport createThemeSwitcher from './createThemeSwitcher'\nimport { getTheme, useTheme } from './core'\nexport type { ThemeProviderProps } from './ThemeProvider'\nexport type { ThemeSwitcherOption } from './createThemeSwitcher'\n\nexport const themeRootClass = (theme: string) => `.xui-${theme}-theme-root`\n\nexport {\n ThemeProvider,\n createThemeSwitcher,\n createTheme,\n getTheme,\n useTheme\n}\n\n"],"names":[],"mappings":"gOAOO,MAAM,cAAc,GAAG,CAAC,KAAa,KAAK,CAAA,KAAA,EAAQ,KAAK,CAAA,WAAA"}
|
package/usePortal.d.ts
ADDED
package/usePortal.js
ADDED
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var jsxRuntime=require('react/jsx-runtime'),React=require('react'),client=require('react-dom/client');require('./theme/ThemeDefaultOptions.js');var core=require('./theme/core.js');require('./css/getValue.js'),require('oncss');var ThemeProvider=require('./theme/ThemeProvider.js');require('react-state-bucket');function usePortal(children) {
|
|
2
|
+
const [initialized, setInitialized] = React.useState(false);
|
|
3
|
+
const theme = core.useTheme();
|
|
4
|
+
const { el, root } = React.useMemo(() => {
|
|
5
|
+
const el = document.createElement("div");
|
|
6
|
+
const root = client.createRoot(el); // React 18 root
|
|
7
|
+
return { el, root };
|
|
8
|
+
}, []);
|
|
9
|
+
const render = () => {
|
|
10
|
+
root.render(jsxRuntime.jsx(ThemeProvider.default, { theme: theme.name, children: children }));
|
|
11
|
+
};
|
|
12
|
+
React.useEffect(() => {
|
|
13
|
+
const container = document.querySelector(`.xui-app-root`);
|
|
14
|
+
if (!container) {
|
|
15
|
+
throw new Error("No ThemeProvider found in the application tree. Please wrap your application with ThemeProvider to use usePortal hook.");
|
|
16
|
+
}
|
|
17
|
+
const isContained = document.body.contains(el);
|
|
18
|
+
if (initialized) {
|
|
19
|
+
if (isContained) {
|
|
20
|
+
render();
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
else {
|
|
24
|
+
if (!isContained) {
|
|
25
|
+
container.appendChild(el);
|
|
26
|
+
}
|
|
27
|
+
render();
|
|
28
|
+
setInitialized(true);
|
|
29
|
+
}
|
|
30
|
+
}, [children]);
|
|
31
|
+
React.useEffect(() => {
|
|
32
|
+
return () => {
|
|
33
|
+
const isContained = document.body.contains(el);
|
|
34
|
+
if (isContained) {
|
|
35
|
+
root.unmount();
|
|
36
|
+
document.body.removeChild(el);
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
}, []);
|
|
40
|
+
return {
|
|
41
|
+
isMount: () => document.body.contains(el),
|
|
42
|
+
mount: () => {
|
|
43
|
+
const isContained = document.body.contains(el);
|
|
44
|
+
if (!isContained) {
|
|
45
|
+
document.body.appendChild(el);
|
|
46
|
+
}
|
|
47
|
+
render();
|
|
48
|
+
},
|
|
49
|
+
unmount: () => {
|
|
50
|
+
if (document.body.contains(el)) {
|
|
51
|
+
document.body.removeChild(el);
|
|
52
|
+
}
|
|
53
|
+
root.render(jsxRuntime.jsx(jsxRuntime.Fragment, {}));
|
|
54
|
+
}
|
|
55
|
+
};
|
|
56
|
+
}exports.default=usePortal;exports.usePortal=usePortal;//# sourceMappingURL=usePortal.js.map
|
package/usePortal.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"usePortal.js","sources":["../src/usePortal.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport { ThemeProvider, useTheme } from \"./theme\";\n\nexport function usePortal(children: React.ReactNode) {\n const [initialized, setInitialized] = React.useState(false);\n const theme = useTheme();\n const { el, root } = useMemo(() => {\n const el = document.createElement(\"div\");\n const root = createRoot(el); // React 18 root\n return { el, root };\n }, []);\n\n const render = () => {\n root.render(<ThemeProvider theme={theme.name}>{children}</ThemeProvider>);\n }\n\n useEffect(() => {\n const container = document.querySelector(`.xui-app-root`) as HTMLDivElement;\n if (!container) {\n throw new Error(\"No ThemeProvider found in the application tree. Please wrap your application with ThemeProvider to use usePortal hook.\");\n }\n const isContained = document.body.contains(el);\n\n if (initialized) {\n if (isContained) {\n render()\n }\n } else {\n if (!isContained) {\n container.appendChild(el);\n }\n render()\n setInitialized(true);\n }\n\n }, [children]);\n\n useEffect(() => {\n return () => {\n const isContained = document.body.contains(el);\n if (isContained) {\n root.unmount();\n document.body.removeChild(el);\n }\n };\n }, []);\n\n return {\n isMount: () => document.body.contains(el),\n mount: () => {\n const isContained = document.body.contains(el);\n if (!isContained) {\n document.body.appendChild(el);\n }\n render()\n },\n unmount: () => {\n if (document.body.contains(el)) {\n document.body.removeChild(el);\n }\n root.render(<></>);\n }\n }\n}\n\n\nexport default usePortal;"],"names":["useTheme","useMemo","createRoot","_jsx","ThemeProvider","useEffect","_Fragment"],"mappings":"4XAIM,SAAU,SAAS,CAAC,QAAyB,EAAA;AAChD,IAAA,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC;AAC3D,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;QACxC,MAAM,IAAI,GAAGC,iBAAU,CAAC,EAAE,CAAC,CAAC;AAC5B,QAAA,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE;IACtB,CAAC,EAAE,EAAE,CAAC;IAEN,MAAM,MAAM,GAAG,MAAK;AACjB,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;IAEDC,eAAS,CAAC,MAAK;QACZ,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAA,aAAA,CAAe,CAAmB;QAC3E,IAAI,CAAC,SAAS,EAAE;AACb,YAAA,MAAM,IAAI,KAAK,CAAC,wHAAwH,CAAC;QAC5I;QACA,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;QAE9C,IAAI,WAAW,EAAE;YACd,IAAI,WAAW,EAAE;AACd,gBAAA,MAAM,EAAE;YACX;QACH;aAAO;YACJ,IAAI,CAAC,WAAW,EAAE;AACf,gBAAA,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC;YAC5B;AACA,YAAA,MAAM,EAAE;YACR,cAAc,CAAC,IAAI,CAAC;QACvB;AAEH,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IAEdA,eAAS,CAAC,MAAK;AACZ,QAAA,OAAO,MAAK;YACT,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC9C,IAAI,WAAW,EAAE;gBACd,IAAI,CAAC,OAAO,EAAE;AACd,gBAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;YAChC;AACH,QAAA,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC;IAEN,OAAO;QACJ,OAAO,EAAE,MAAM,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;QACzC,KAAK,EAAE,MAAK;YACT,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC9C,IAAI,CAAC,WAAW,EAAE;AACf,gBAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;YAChC;AACA,YAAA,MAAM,EAAE;QACX,CAAC;QACD,OAAO,EAAE,MAAK;YACX,IAAI,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE;AAC7B,gBAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;YAChC;AACA,YAAA,IAAI,CAAC,MAAM,CAACF,cAAA,CAAAG,mBAAA,EAAA,EAAA,CAAK,CAAC;QACrB;KACF;AACJ"}
|
package/usePortal.mjs
ADDED
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import {jsx,Fragment}from'react/jsx-runtime';import React__default,{useMemo,useEffect}from'react';import {createRoot}from'react-dom/client';import'./theme/ThemeDefaultOptions.mjs';import {useTheme}from'./theme/core.mjs';import'./css/getValue.mjs';import'oncss';import ThemeProvider from'./theme/ThemeProvider.mjs';import'react-state-bucket';function usePortal(children) {
|
|
2
|
+
const [initialized, setInitialized] = React__default.useState(false);
|
|
3
|
+
const theme = useTheme();
|
|
4
|
+
const { el, root } = useMemo(() => {
|
|
5
|
+
const el = document.createElement("div");
|
|
6
|
+
const root = createRoot(el); // React 18 root
|
|
7
|
+
return { el, root };
|
|
8
|
+
}, []);
|
|
9
|
+
const render = () => {
|
|
10
|
+
root.render(jsx(ThemeProvider, { theme: theme.name, children: children }));
|
|
11
|
+
};
|
|
12
|
+
useEffect(() => {
|
|
13
|
+
const container = document.querySelector(`.xui-app-root`);
|
|
14
|
+
if (!container) {
|
|
15
|
+
throw new Error("No ThemeProvider found in the application tree. Please wrap your application with ThemeProvider to use usePortal hook.");
|
|
16
|
+
}
|
|
17
|
+
const isContained = document.body.contains(el);
|
|
18
|
+
if (initialized) {
|
|
19
|
+
if (isContained) {
|
|
20
|
+
render();
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
else {
|
|
24
|
+
if (!isContained) {
|
|
25
|
+
container.appendChild(el);
|
|
26
|
+
}
|
|
27
|
+
render();
|
|
28
|
+
setInitialized(true);
|
|
29
|
+
}
|
|
30
|
+
}, [children]);
|
|
31
|
+
useEffect(() => {
|
|
32
|
+
return () => {
|
|
33
|
+
const isContained = document.body.contains(el);
|
|
34
|
+
if (isContained) {
|
|
35
|
+
root.unmount();
|
|
36
|
+
document.body.removeChild(el);
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
}, []);
|
|
40
|
+
return {
|
|
41
|
+
isMount: () => document.body.contains(el),
|
|
42
|
+
mount: () => {
|
|
43
|
+
const isContained = document.body.contains(el);
|
|
44
|
+
if (!isContained) {
|
|
45
|
+
document.body.appendChild(el);
|
|
46
|
+
}
|
|
47
|
+
render();
|
|
48
|
+
},
|
|
49
|
+
unmount: () => {
|
|
50
|
+
if (document.body.contains(el)) {
|
|
51
|
+
document.body.removeChild(el);
|
|
52
|
+
}
|
|
53
|
+
root.render(jsx(Fragment, {}));
|
|
54
|
+
}
|
|
55
|
+
};
|
|
56
|
+
}export{usePortal as default,usePortal};//# sourceMappingURL=usePortal.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"usePortal.mjs","sources":["../src/usePortal.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport { ThemeProvider, useTheme } from \"./theme\";\n\nexport function usePortal(children: React.ReactNode) {\n const [initialized, setInitialized] = React.useState(false);\n const theme = useTheme();\n const { el, root } = useMemo(() => {\n const el = document.createElement(\"div\");\n const root = createRoot(el); // React 18 root\n return { el, root };\n }, []);\n\n const render = () => {\n root.render(<ThemeProvider theme={theme.name}>{children}</ThemeProvider>);\n }\n\n useEffect(() => {\n const container = document.querySelector(`.xui-app-root`) as HTMLDivElement;\n if (!container) {\n throw new Error(\"No ThemeProvider found in the application tree. Please wrap your application with ThemeProvider to use usePortal hook.\");\n }\n const isContained = document.body.contains(el);\n\n if (initialized) {\n if (isContained) {\n render()\n }\n } else {\n if (!isContained) {\n container.appendChild(el);\n }\n render()\n setInitialized(true);\n }\n\n }, [children]);\n\n useEffect(() => {\n return () => {\n const isContained = document.body.contains(el);\n if (isContained) {\n root.unmount();\n document.body.removeChild(el);\n }\n };\n }, []);\n\n return {\n isMount: () => document.body.contains(el),\n mount: () => {\n const isContained = document.body.contains(el);\n if (!isContained) {\n document.body.appendChild(el);\n }\n render()\n },\n unmount: () => {\n if (document.body.contains(el)) {\n document.body.removeChild(el);\n }\n root.render(<></>);\n }\n }\n}\n\n\nexport default usePortal;"],"names":["React","_jsx","_Fragment"],"mappings":"qVAIM,SAAU,SAAS,CAAC,QAAyB,EAAA;AAChD,IAAA,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAGA,cAAK,CAAC,QAAQ,CAAC,KAAK,CAAC;AAC3D,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;QACxC,MAAM,IAAI,GAAG,UAAU,CAAC,EAAE,CAAC,CAAC;AAC5B,QAAA,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE;IACtB,CAAC,EAAE,EAAE,CAAC;IAEN,MAAM,MAAM,GAAG,MAAK;AACjB,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,SAAS,CAAC,MAAK;QACZ,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAA,aAAA,CAAe,CAAmB;QAC3E,IAAI,CAAC,SAAS,EAAE;AACb,YAAA,MAAM,IAAI,KAAK,CAAC,wHAAwH,CAAC;QAC5I;QACA,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;QAE9C,IAAI,WAAW,EAAE;YACd,IAAI,WAAW,EAAE;AACd,gBAAA,MAAM,EAAE;YACX;QACH;aAAO;YACJ,IAAI,CAAC,WAAW,EAAE;AACf,gBAAA,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC;YAC5B;AACA,YAAA,MAAM,EAAE;YACR,cAAc,CAAC,IAAI,CAAC;QACvB;AAEH,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IAEd,SAAS,CAAC,MAAK;AACZ,QAAA,OAAO,MAAK;YACT,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC9C,IAAI,WAAW,EAAE;gBACd,IAAI,CAAC,OAAO,EAAE;AACd,gBAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;YAChC;AACH,QAAA,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC;IAEN,OAAO;QACJ,OAAO,EAAE,MAAM,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;QACzC,KAAK,EAAE,MAAK;YACT,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC9C,IAAI,CAAC,WAAW,EAAE;AACf,gBAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;YAChC;AACA,YAAA,MAAM,EAAE;QACX,CAAC;QACD,OAAO,EAAE,MAAK;YACX,IAAI,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE;AAC7B,gBAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;YAChC;AACA,YAAA,IAAI,CAAC,MAAM,CAACA,GAAA,CAAAC,QAAA,EAAA,EAAA,CAAK,CAAC;QACrB;KACF;AACJ"}
|
package/useAnimation.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useAnimation.js","sources":["../src/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":"iIAIO,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"}
|
package/useAnimation.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useAnimation.mjs","sources":["../src/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":"4DAIO,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"}
|
package/useColorTemplate.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useColorTemplate.js","sources":["../src/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":"oQAIA,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"}
|
package/useColorTemplate.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useColorTemplate.mjs","sources":["../src/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":"sLAIA,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"}
|
package/useInterface.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useInterface.js","sources":["../src/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":"oQAEA,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/useInterface.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useInterface.mjs","sources":["../src/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":"sLAEA,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/useScrollbar.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useScrollbar.js","sources":["../src/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":"sPAaA,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"}
|