@xanui/core 1.0.2 → 1.0.4
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/Tag/useTagProps.js +1 -1
- package/Tag/useTagProps.js.map +1 -1
- package/Transition/index.js +12 -4
- package/Transition/index.js.map +2 -2
- package/css/aliases.js +5 -5
- package/css/aliases.js.map +2 -2
- package/package.json +1 -1
- package/theme/ThemeProvider.js +1 -1
- package/theme/ThemeProvider.js.map +1 -1
package/Tag/useTagProps.js
CHANGED
|
@@ -13,7 +13,7 @@ const useTagProps = ({ sxr, sx, baseClass, classNames: clses, hover, ...props })
|
|
|
13
13
|
_props[prop] = props[prop];
|
|
14
14
|
}
|
|
15
15
|
_props.className = classNames([
|
|
16
|
-
baseClass ? "
|
|
16
|
+
baseClass ? "xui-" + baseClass : "",
|
|
17
17
|
style.classname,
|
|
18
18
|
props.className,
|
|
19
19
|
...clses || []
|
package/Tag/useTagProps.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Tag/useTagProps.ts"],
|
|
4
|
-
"sourcesContent": ["import { TagComponentType, TagProps, TagPropsRoot } from './types';\nimport cssPropList from './cssPropList';\nimport { css } from '../css';\nimport { classNames } from 'pretty-class';\n\nconst useTagProps = <T extends TagComponentType = \"div\">({ sxr, sx, baseClass, classNames: clses, hover, ...props }: TagPropsRoot<T>): TagProps<T> => {\n let _css: any = { ...sxr, ...sx, ...props }\n if (hover) _css['&:hover'] = hover\n const style = css(_css, {\n skipProps: (prop): any => !cssPropList[prop]\n })\n\n let skipProps = style.skiped[style.classname as any] || []\n const _props: any = {};\n for (let prop of skipProps) {\n _props[prop] = (props as any)[prop]\n }\n _props.className = classNames([\n baseClass ? \"
|
|
4
|
+
"sourcesContent": ["import { TagComponentType, TagProps, TagPropsRoot } from './types';\nimport cssPropList from './cssPropList';\nimport { css } from '../css';\nimport { classNames } from 'pretty-class';\n\nconst useTagProps = <T extends TagComponentType = \"div\">({ sxr, sx, baseClass, classNames: clses, hover, ...props }: TagPropsRoot<T>): TagProps<T> => {\n let _css: any = { ...sxr, ...sx, ...props }\n if (hover) _css['&:hover'] = hover\n const style = css(_css, {\n skipProps: (prop): any => !cssPropList[prop]\n })\n\n let skipProps = style.skiped[style.classname as any] || []\n const _props: any = {};\n for (let prop of skipProps) {\n _props[prop] = (props as any)[prop]\n }\n _props.className = classNames([\n baseClass ? \"xui-\" + baseClass : \"\",\n style.classname,\n props.className,\n ...(clses as any || []),\n ])\n return _props\n}\n\n\nexport default useTagProps"],
|
|
5
5
|
"mappings": "AACA,OAAO,iBAAiB;AACxB,SAAS,WAAW;AACpB,SAAS,kBAAkB;AAE3B,MAAM,cAAc,CAAqC,EAAE,KAAK,IAAI,WAAW,YAAY,OAAO,OAAO,GAAG,MAAM,MAAoC;AACnJ,MAAI,OAAY,EAAE,GAAG,KAAK,GAAG,IAAI,GAAG,MAAM;AAC1C,MAAI,MAAO,MAAK,SAAS,IAAI;AAC7B,QAAM,QAAQ,IAAI,MAAM;AAAA,IACrB,WAAW,CAAC,SAAc,CAAC,YAAY,IAAI;AAAA,EAC9C,CAAC;AAED,MAAI,YAAY,MAAM,OAAO,MAAM,SAAgB,KAAK,CAAC;AACzD,QAAM,SAAc,CAAC;AACrB,WAAS,QAAQ,WAAW;AACzB,WAAO,IAAI,IAAK,MAAc,IAAI;AAAA,EACrC;AACA,SAAO,YAAY,WAAW;AAAA,IAC3B,YAAY,SAAS,YAAY;AAAA,IACjC,MAAM;AAAA,IACN,MAAM;AAAA,IACN,GAAI,SAAgB,CAAC;AAAA,EACxB,CAAC;AACD,SAAO;AACV;AAGA,IAAO,sBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/Transition/index.js
CHANGED
|
@@ -13,6 +13,7 @@ const Transition = ({ children, open, ...props }) => {
|
|
|
13
13
|
variant ??= "fade";
|
|
14
14
|
const id = useId().replaceAll(":", "");
|
|
15
15
|
const [rendered, setRendered] = useState(false);
|
|
16
|
+
const [initial, setInitial] = useState(false);
|
|
16
17
|
const [transitionState, setTransitionState] = useState(open ? disableInitialTransition ? "opened" : "open" : "closed");
|
|
17
18
|
const [element, setElement] = useState({
|
|
18
19
|
height: 0,
|
|
@@ -68,22 +69,29 @@ const Transition = ({ children, open, ...props }) => {
|
|
|
68
69
|
}, [rendered]);
|
|
69
70
|
useEffect(() => {
|
|
70
71
|
if (rendered) {
|
|
71
|
-
|
|
72
|
+
if (!initial) {
|
|
73
|
+
setInitial(true);
|
|
74
|
+
setTimeout(() => {
|
|
75
|
+
setCss(open ? to : from);
|
|
76
|
+
}, 50);
|
|
77
|
+
} else {
|
|
78
|
+
setCss(open ? to : from);
|
|
79
|
+
}
|
|
72
80
|
}
|
|
73
81
|
}, [rendered, open]);
|
|
74
82
|
let _ = {};
|
|
75
83
|
if (rendered) {
|
|
76
84
|
let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`;
|
|
77
85
|
_ = {
|
|
78
|
-
|
|
79
|
-
|
|
86
|
+
..._css,
|
|
87
|
+
transition: Object.keys(_css || {}).map((k) => formatCSSProp(k)).join(trans + ", ") + trans
|
|
80
88
|
};
|
|
81
89
|
}
|
|
82
90
|
const cls = css(_);
|
|
83
91
|
if (!children || Array.isArray(children)) throw new Error("Invalid children in Transition");
|
|
84
92
|
const first = Children.toArray(children).shift();
|
|
85
93
|
let classname = `${cls.classname} trans-${id} trans-${open ? "open" : "close"} trans-state-${transitionState}`;
|
|
86
|
-
const child = cloneElement(first, {
|
|
94
|
+
const child = cloneElement(first, { classNames: [classname] });
|
|
87
95
|
if (rendered) return child;
|
|
88
96
|
if (!rendered && disableInitialTransition && open) return child;
|
|
89
97
|
return /* @__PURE__ */ React.createElement(
|
package/Transition/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Transition/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { ReactElement, cloneElement, Children, useState, useEffect, useId } from 'react';\nimport Tag from '../Tag';\nimport { animationEases } from '../useAnimation';\nimport { css } from '../css';\nimport { formatCSSProp } from 'oncss';\nimport { CSSProps } from '../css/types';\nimport * as variants from './variants'\nexport type TransitionVariantTypes = keyof typeof variants\n\nexport type TransitionElementProps = {\n height: number;\n width: number;\n rect: DOMRect | null\n}\n\nexport type TransitionState = \"open\" | \"opened\" | \"close\" | \"closed\"\n\nexport type TransitionProps = {\n children: ReactElement;\n open: boolean;\n variant: {\n from: CSSProps;\n to: CSSProps;\n } | TransitionVariantTypes;\n ease?: string;\n easing?: keyof typeof animationEases;\n duration?: number;\n delay?: number;\n disableInitialTransition?: boolean;\n onOpen?: () => void;\n onOpened?: () => void;\n onClose?: () => void;\n onClosed?: () => void;\n onState?: (state: TransitionState) => void;\n}\n\nconst Transition = ({ children, open, ...props }: TransitionProps) => {\n let { disableInitialTransition, variant, duration, delay, ease, easing, onOpen, onOpened, onClose, onClosed, onState } = props as TransitionProps\n let _ease = ease || (animationEases as any)[easing as any] || animationEases.easeBounceOut\n disableInitialTransition ??= false\n duration ??= 400\n variant ??= \"fade\"\n\n const id = useId().replaceAll(\":\", \"\")\n const [rendered, setRendered] = useState(false)\n const [transitionState, setTransitionState] = useState<TransitionState>(open ? (disableInitialTransition ? \"opened\" : \"open\") : \"closed\")\n const [element, setElement] = useState<TransitionElementProps>({\n height: 0,\n width: 0,\n rect: null\n });\n\n if (typeof variant === 'string') {\n variant = (variants as any)[variant](element)\n }\n\n let from = (variant as any).from\n let to = (variant as any).to\n const [_css, setCss] = useState(open ? to : from)\n\n useEffect(() => {\n const ele: HTMLElement = document.querySelector(`.trans-${id}`) as any\n if (ele) {\n setRendered(true)\n setElement({\n height: ele.clientHeight,\n width: ele.clientWidth,\n rect: ele.getBoundingClientRect()\n })\n if (!disableInitialTransition && open) {\n setCss(from)\n }\n }\n }, [])\n\n useEffect(() => {\n const ele: HTMLElement = document.querySelector(`.trans-${id}`) as any\n if (rendered && ele) {\n let stimer: any = null\n let etimer: any = null\n ele.ontransitionstart = () => {\n clearTimeout(stimer)\n stimer = setTimeout(() => {\n const isOpen = Array.from(ele.classList).includes(\"trans-open\");\n (onOpen && isOpen) && onOpen();\n (onClose && !isOpen) && onClose()\n onState && onState(isOpen ? \"open\" : \"close\")\n setTransitionState(isOpen ? \"open\" : \"close\")\n }, 1)\n }\n ele.ontransitionend = () => {\n clearTimeout(etimer)\n etimer = setTimeout(() => {\n const isOpen = Array.from(ele.classList).includes(\"trans-open\");\n (onOpened && isOpen) && onOpened();\n (onClosed && !isOpen) && onClosed();\n onState && onState(isOpen ? \"opened\" : \"closed\")\n setTransitionState(isOpen ? \"opened\" : \"closed\")\n }, 1)\n }\n }\n }, [rendered])\n\n useEffect(() => {\n if (rendered) {\n setCss(open ? to : from)\n }\n }, [rendered, open])\n\n let _: any = {}\n if (rendered) {\n let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`\n _ = {\n transition: Object.keys(_css || {}).map(k => formatCSSProp(k)).join(trans + \", \") + trans,\n
|
|
5
|
-
"mappings": ";AACA,OAAO,SAAuB,cAAc,UAAU,UAAU,WAAW,aAAa;AACxF,OAAO,SAAS;AAChB,SAAS,sBAAsB;AAC/B,SAAS,WAAW;AACpB,SAAS,qBAAqB;AAE9B,YAAY,cAAc;AA8B1B,MAAM,aAAa,CAAC,EAAE,UAAU,MAAM,GAAG,MAAM,MAAuB;AAClE,MAAI,EAAE,0BAA0B,SAAS,UAAU,OAAO,MAAM,QAAQ,QAAQ,UAAU,SAAS,UAAU,QAAQ,IAAI;AACzH,MAAI,QAAQ,QAAS,eAAuB,MAAa,KAAK,eAAe;AAC7E,+BAA6B;AAC7B,eAAa;AACb,cAAY;AAEZ,QAAM,KAAK,MAAM,EAAE,WAAW,KAAK,EAAE;AACrC,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAA0B,OAAQ,2BAA2B,WAAW,SAAU,QAAQ;AACxI,QAAM,CAAC,SAAS,UAAU,IAAI,SAAiC;AAAA,IAC3D,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EACV,CAAC;AAED,MAAI,OAAO,YAAY,UAAU;AAC7B,cAAW,SAAiB,OAAO,EAAE,OAAO;AAAA,EAChD;AAEA,MAAI,OAAQ,QAAgB;AAC5B,MAAI,KAAM,QAAgB;AAC1B,QAAM,CAAC,MAAM,MAAM,IAAI,SAAS,OAAO,KAAK,IAAI;AAEhD,YAAU,MAAM;AACZ,UAAM,MAAmB,SAAS,cAAc,UAAU,EAAE,EAAE;AAC9D,QAAI,KAAK;AACL,kBAAY,IAAI;AAChB,iBAAW;AAAA,QACP,QAAQ,IAAI;AAAA,QACZ,OAAO,IAAI;AAAA,QACX,MAAM,IAAI,sBAAsB;AAAA,MACpC,CAAC;AACD,UAAI,CAAC,4BAA4B,MAAM;AACnC,eAAO,IAAI;AAAA,MACf;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACZ,UAAM,MAAmB,SAAS,cAAc,UAAU,EAAE,EAAE;AAC9D,QAAI,YAAY,KAAK;AACjB,UAAI,SAAc;AAClB,UAAI,SAAc;AAClB,UAAI,oBAAoB,MAAM;AAC1B,qBAAa,MAAM;AACnB,iBAAS,WAAW,MAAM;AACtB,gBAAM,SAAS,MAAM,KAAK,IAAI,SAAS,EAAE,SAAS,YAAY;AAC9D,UAAC,UAAU,UAAW,OAAO;AAC7B,UAAC,WAAW,CAAC,UAAW,QAAQ;AAChC,qBAAW,QAAQ,SAAS,SAAS,OAAO;AAC5C,6BAAmB,SAAS,SAAS,OAAO;AAAA,QAChD,GAAG,CAAC;AAAA,MACR;AACA,UAAI,kBAAkB,MAAM;AACxB,qBAAa,MAAM;AACnB,iBAAS,WAAW,MAAM;AACtB,gBAAM,SAAS,MAAM,KAAK,IAAI,SAAS,EAAE,SAAS,YAAY;AAC9D,UAAC,YAAY,UAAW,SAAS;AACjC,UAAC,YAAY,CAAC,UAAW,SAAS;AAClC,qBAAW,QAAQ,SAAS,WAAW,QAAQ;AAC/C,6BAAmB,SAAS,WAAW,QAAQ;AAAA,QACnD,GAAG,CAAC;AAAA,MACR;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,QAAQ,CAAC;AAEb,YAAU,MAAM;AACZ,QAAI,UAAU;AACV,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { ReactElement, cloneElement, Children, useState, useEffect, useId } from 'react';\nimport Tag from '../Tag';\nimport { animationEases } from '../useAnimation';\nimport { css } from '../css';\nimport { formatCSSProp } from 'oncss';\nimport { CSSProps } from '../css/types';\nimport * as variants from './variants'\nexport type TransitionVariantTypes = keyof typeof variants\n\nexport type TransitionElementProps = {\n height: number;\n width: number;\n rect: DOMRect | null\n}\n\nexport type TransitionState = \"open\" | \"opened\" | \"close\" | \"closed\"\n\nexport type TransitionProps = {\n children: ReactElement;\n open: boolean;\n variant: {\n from: CSSProps;\n to: CSSProps;\n } | TransitionVariantTypes;\n ease?: string;\n easing?: keyof typeof animationEases;\n duration?: number;\n delay?: number;\n disableInitialTransition?: boolean;\n onOpen?: () => void;\n onOpened?: () => void;\n onClose?: () => void;\n onClosed?: () => void;\n onState?: (state: TransitionState) => void;\n}\n\nconst Transition = ({ children, open, ...props }: TransitionProps) => {\n let { disableInitialTransition, variant, duration, delay, ease, easing, onOpen, onOpened, onClose, onClosed, onState } = props as TransitionProps\n let _ease = ease || (animationEases as any)[easing as any] || animationEases.easeBounceOut\n disableInitialTransition ??= false\n duration ??= 400\n variant ??= \"fade\"\n\n const id = useId().replaceAll(\":\", \"\")\n const [rendered, setRendered] = useState(false)\n const [initial, setInitial] = useState(false)\n const [transitionState, setTransitionState] = useState<TransitionState>(open ? (disableInitialTransition ? \"opened\" : \"open\") : \"closed\")\n const [element, setElement] = useState<TransitionElementProps>({\n height: 0,\n width: 0,\n rect: null\n });\n\n if (typeof variant === 'string') {\n variant = (variants as any)[variant](element)\n }\n\n let from = (variant as any).from\n let to = (variant as any).to\n const [_css, setCss] = useState(open ? to : from)\n\n useEffect(() => {\n const ele: HTMLElement = document.querySelector(`.trans-${id}`) as any\n if (ele) {\n setRendered(true)\n setElement({\n height: ele.clientHeight,\n width: ele.clientWidth,\n rect: ele.getBoundingClientRect()\n })\n if (!disableInitialTransition && open) {\n setCss(from)\n }\n }\n }, [])\n\n useEffect(() => {\n const ele: HTMLElement = document.querySelector(`.trans-${id}`) as any\n if (rendered && ele) {\n let stimer: any = null\n let etimer: any = null\n ele.ontransitionstart = () => {\n clearTimeout(stimer)\n stimer = setTimeout(() => {\n const isOpen = Array.from(ele.classList).includes(\"trans-open\");\n (onOpen && isOpen) && onOpen();\n (onClose && !isOpen) && onClose()\n onState && onState(isOpen ? \"open\" : \"close\")\n setTransitionState(isOpen ? \"open\" : \"close\")\n }, 1)\n }\n ele.ontransitionend = () => {\n clearTimeout(etimer)\n etimer = setTimeout(() => {\n const isOpen = Array.from(ele.classList).includes(\"trans-open\");\n (onOpened && isOpen) && onOpened();\n (onClosed && !isOpen) && onClosed();\n onState && onState(isOpen ? \"opened\" : \"closed\")\n setTransitionState(isOpen ? \"opened\" : \"closed\")\n }, 1)\n }\n }\n }, [rendered])\n\n useEffect(() => {\n if (rendered) {\n if (!initial) {\n setInitial(true)\n setTimeout(() => {\n setCss(open ? to : from)\n }, 50);\n } else {\n setCss(open ? to : from)\n }\n }\n }, [rendered, open])\n\n let _: any = {}\n if (rendered) {\n let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`\n _ = {\n ..._css,\n transition: Object.keys(_css || {}).map(k => formatCSSProp(k)).join(trans + \", \") + trans,\n }\n }\n\n const cls = css(_)\n if (!children || Array.isArray(children)) throw new Error(\"Invalid children in Transition\")\n const first: any = Children.toArray(children).shift();\n let classname = `${cls.classname} trans-${id} trans-${(open ? \"open\" : \"close\")} trans-state-${transitionState}`\n const child = cloneElement(first, { classNames: [classname] })\n if (rendered) return child\n if (!rendered && disableInitialTransition && open) return child\n\n return (\n <Tag\n height={0}\n overflow=\"hidden\"\n >\n {child}\n </Tag>\n )\n}\n\n\nexport default Transition"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/css/aliases.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
const isStr = (v, or) => typeof v === "string" ? v : or;
|
|
2
2
|
const aliases = {
|
|
3
3
|
bgcolor: (v) => ({ backgroundColor: v }),
|
|
4
|
-
bgimage: (v) => ({ backgroundImage: `url(${v})`,
|
|
5
|
-
bg: (v) => ({
|
|
6
|
-
p: (v) => ({
|
|
4
|
+
bgimage: (v) => ({ backgroundImage: `url(${v})`, backgroundSize: "cover", backgroundRepeat: "no-repeat" }),
|
|
5
|
+
bg: (v) => ({ background: v }),
|
|
6
|
+
p: (v) => ({ padding: isStr(v, 8 * v) }),
|
|
7
7
|
pt: (v) => ({ paddingTop: isStr(v, 8 * v) }),
|
|
8
8
|
pr: (v) => ({ paddingRight: isStr(v, 8 * v) }),
|
|
9
9
|
pb: (v) => ({ paddingBottom: isStr(v, 8 * v) }),
|
|
@@ -24,8 +24,8 @@ const aliases = {
|
|
|
24
24
|
flexRow: (v) => v ? { flexDirection: "row" } : {},
|
|
25
25
|
flexColumn: (v) => v ? { flexDirection: "column" } : {},
|
|
26
26
|
flexWraped: (v) => v ? { flexWrap: "wrap" } : {},
|
|
27
|
-
direction: (v) => v === "row" || v === "column" ? {
|
|
28
|
-
gap: (v) => ({
|
|
27
|
+
direction: (v) => v === "row" || v === "column" ? { flexDirection: v } : { direction: v },
|
|
28
|
+
gap: (v) => ({ gap: isStr(v, 8 * v) })
|
|
29
29
|
};
|
|
30
30
|
var aliases_default = aliases;
|
|
31
31
|
export {
|
package/css/aliases.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/css/aliases.ts"],
|
|
4
|
-
"sourcesContent": ["import { OptionAliases } from 'oncss'\nimport { Aliases } from './types'\n\nconst isStr = (v: any, or: any) => typeof v === 'string' ? v : or\n\nconst aliases: OptionAliases<Aliases> = {\n bgcolor: (v) => ({ backgroundColor: v }),\n bgimage: (v) => ({ backgroundImage: `url(${v})`,
|
|
5
|
-
"mappings": "AAGA,MAAM,QAAQ,CAAC,GAAQ,OAAY,OAAO,MAAM,WAAW,IAAI;AAE/D,MAAM,UAAkC;AAAA,EACrC,SAAS,CAAC,OAAO,EAAE,iBAAiB,EAAE;AAAA,EACtC,SAAS,CAAC,OAAO,EAAE,iBAAiB,OAAO,CAAC,KAAK,
|
|
4
|
+
"sourcesContent": ["import { OptionAliases } from 'oncss'\nimport { Aliases } from './types'\n\nconst isStr = (v: any, or: any) => typeof v === 'string' ? v : or\n\nconst aliases: OptionAliases<Aliases> = {\n bgcolor: (v) => ({ backgroundColor: v }),\n bgimage: (v) => ({ backgroundImage: `url(${v})`, backgroundSize: \"cover\", backgroundRepeat: \"no-repeat\" }),\n bg: (v) => ({ background: v }),\n p: (v) => ({ padding: isStr(v, 8 * v) }),\n pt: (v) => ({ paddingTop: isStr(v, 8 * v) }),\n pr: (v) => ({ paddingRight: isStr(v, 8 * v) }),\n pb: (v) => ({ paddingBottom: isStr(v, 8 * v) }),\n pl: (v) => ({ paddingLeft: isStr(v, 8 * v) }),\n px: (v) => ({ paddingLeft: isStr(v, 8 * v), paddingRight: isStr(v, 8 * v) }),\n py: (v) => ({ paddingTop: isStr(v, 8 * v), paddingBottom: isStr(v, 8 * v) }),\n m: (v) => ({ margin: isStr(v, 8 * v) }),\n mt: (v) => ({ marginTop: isStr(v, 8 * v) }),\n mr: (v) => ({ marginRight: isStr(v, 8 * v) }),\n mb: (v) => ({ marginBottom: isStr(v, 8 * v) }),\n ml: (v) => ({ marginLeft: isStr(v, 8 * v) }),\n mx: (v) => ({ marginLeft: isStr(v, 8 * v), marginRight: isStr(v, 8 * v) }),\n my: (v) => ({ marginTop: isStr(v, 8 * v), marginBottom: isStr(v, 8 * v) }),\n radius: (v) => ({ borderRadius: isStr(v, 8 * v) }),\n borderRadius: (v) => ({ borderRadius: isStr(v, 8 * v) }),\n shadow: (v) => ({ boxShadow: v }),\n flexBox: (v) => (v ? { display: \"flex\" } : {}),\n flexRow: (v) => (v ? { flexDirection: \"row\" } : {}),\n flexColumn: (v) => (v ? { flexDirection: \"column\" } : {}),\n flexWraped: (v) => (v ? { flexWrap: \"wrap\" } : {}),\n direction: (v) => (v === 'row' || v === 'column' ? { flexDirection: v } : { direction: v }),\n gap: (v) => ({ gap: isStr(v, 8 * v) }),\n};\n\nexport default aliases"],
|
|
5
|
+
"mappings": "AAGA,MAAM,QAAQ,CAAC,GAAQ,OAAY,OAAO,MAAM,WAAW,IAAI;AAE/D,MAAM,UAAkC;AAAA,EACrC,SAAS,CAAC,OAAO,EAAE,iBAAiB,EAAE;AAAA,EACtC,SAAS,CAAC,OAAO,EAAE,iBAAiB,OAAO,CAAC,KAAK,gBAAgB,SAAS,kBAAkB,YAAY;AAAA,EACxG,IAAI,CAAC,OAAO,EAAE,YAAY,EAAE;AAAA,EAC5B,GAAG,CAAC,OAAO,EAAE,SAAS,MAAM,GAAG,IAAI,CAAC,EAAE;AAAA,EACtC,IAAI,CAAC,OAAO,EAAE,YAAY,MAAM,GAAG,IAAI,CAAC,EAAE;AAAA,EAC1C,IAAI,CAAC,OAAO,EAAE,cAAc,MAAM,GAAG,IAAI,CAAC,EAAE;AAAA,EAC5C,IAAI,CAAC,OAAO,EAAE,eAAe,MAAM,GAAG,IAAI,CAAC,EAAE;AAAA,EAC7C,IAAI,CAAC,OAAO,EAAE,aAAa,MAAM,GAAG,IAAI,CAAC,EAAE;AAAA,EAC3C,IAAI,CAAC,OAAO,EAAE,aAAa,MAAM,GAAG,IAAI,CAAC,GAAG,cAAc,MAAM,GAAG,IAAI,CAAC,EAAE;AAAA,EAC1E,IAAI,CAAC,OAAO,EAAE,YAAY,MAAM,GAAG,IAAI,CAAC,GAAG,eAAe,MAAM,GAAG,IAAI,CAAC,EAAE;AAAA,EAC1E,GAAG,CAAC,OAAO,EAAE,QAAQ,MAAM,GAAG,IAAI,CAAC,EAAE;AAAA,EACrC,IAAI,CAAC,OAAO,EAAE,WAAW,MAAM,GAAG,IAAI,CAAC,EAAE;AAAA,EACzC,IAAI,CAAC,OAAO,EAAE,aAAa,MAAM,GAAG,IAAI,CAAC,EAAE;AAAA,EAC3C,IAAI,CAAC,OAAO,EAAE,cAAc,MAAM,GAAG,IAAI,CAAC,EAAE;AAAA,EAC5C,IAAI,CAAC,OAAO,EAAE,YAAY,MAAM,GAAG,IAAI,CAAC,EAAE;AAAA,EAC1C,IAAI,CAAC,OAAO,EAAE,YAAY,MAAM,GAAG,IAAI,CAAC,GAAG,aAAa,MAAM,GAAG,IAAI,CAAC,EAAE;AAAA,EACxE,IAAI,CAAC,OAAO,EAAE,WAAW,MAAM,GAAG,IAAI,CAAC,GAAG,cAAc,MAAM,GAAG,IAAI,CAAC,EAAE;AAAA,EACxE,QAAQ,CAAC,OAAO,EAAE,cAAc,MAAM,GAAG,IAAI,CAAC,EAAE;AAAA,EAChD,cAAc,CAAC,OAAO,EAAE,cAAc,MAAM,GAAG,IAAI,CAAC,EAAE;AAAA,EACtD,QAAQ,CAAC,OAAO,EAAE,WAAW,EAAE;AAAA,EAC/B,SAAS,CAAC,MAAO,IAAI,EAAE,SAAS,OAAO,IAAI,CAAC;AAAA,EAC5C,SAAS,CAAC,MAAO,IAAI,EAAE,eAAe,MAAM,IAAI,CAAC;AAAA,EACjD,YAAY,CAAC,MAAO,IAAI,EAAE,eAAe,SAAS,IAAI,CAAC;AAAA,EACvD,YAAY,CAAC,MAAO,IAAI,EAAE,UAAU,OAAO,IAAI,CAAC;AAAA,EAChD,WAAW,CAAC,MAAO,MAAM,SAAS,MAAM,WAAW,EAAE,eAAe,EAAE,IAAI,EAAE,WAAW,EAAE;AAAA,EACzF,KAAK,CAAC,OAAO,EAAE,KAAK,MAAM,GAAG,IAAI,CAAC,EAAE;AACvC;AAEA,IAAO,kBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
package/theme/ThemeProvider.js
CHANGED
|
@@ -19,7 +19,7 @@ const ThemeProvider = ({ children, theme, resetCss, scrollbarCss, renderIsRoot,
|
|
|
19
19
|
}
|
|
20
20
|
css({
|
|
21
21
|
"@global": {
|
|
22
|
-
[`.
|
|
22
|
+
[`.xui-${theme}-theme-root`]: ThemeCssVars(THEME)
|
|
23
23
|
}
|
|
24
24
|
});
|
|
25
25
|
if (scrollbarCss && typeof document !== "undefined") {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/theme/ThemeProvider.tsx"],
|
|
4
|
-
"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\"\n\nexport type ThemeProviderProps<T extends TagComponentType = 'div'> = TagProps<T> & {\n theme: string;\n resetCss?: boolean;\n scrollbarCss?: boolean;\n renderIsRoot?: React.ReactElement;\n}\n\nconst providers: string[] = []\n\nconst ThemeProvider = ({ children, theme, resetCss, scrollbarCss, renderIsRoot, ...props }: ThemeProviderProps) => {\n const id = React.useId()\n const THEME = ThemeFactory.get(theme) as ThemeOptions\n if (!THEME) throw new Error(`Invalid theme name provided: ${theme}`)\n resetCss ??= true\n scrollbarCss ??= true\n\n React.useMemo(() => {\n if (!!Object.keys(THEME.globalStyle).length) {\n css({\n \"@global\": THEME.globalStyle\n })\n }\n\n css({\n \"@global\": {\n [`.
|
|
4
|
+
"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\"\n\nexport type ThemeProviderProps<T extends TagComponentType = 'div'> = TagProps<T> & {\n theme: string;\n resetCss?: boolean;\n scrollbarCss?: boolean;\n renderIsRoot?: React.ReactElement;\n}\n\nconst providers: string[] = []\n\nconst ThemeProvider = ({ children, theme, resetCss, scrollbarCss, renderIsRoot, ...props }: ThemeProviderProps) => {\n const id = React.useId()\n const THEME = ThemeFactory.get(theme) as ThemeOptions\n if (!THEME) throw new Error(`Invalid theme name provided: ${theme}`)\n resetCss ??= true\n scrollbarCss ??= true\n\n React.useMemo(() => {\n if (!!Object.keys(THEME.globalStyle).length) {\n css({\n \"@global\": THEME.globalStyle\n })\n }\n\n css({\n \"@global\": {\n [`.xui-${theme}-theme-root`]: ThemeCssVars(THEME)\n }\n })\n\n if (scrollbarCss && typeof document !== 'undefined') {\n let thumbSize = 10\n let thumbColor = THEME.colors.divider\n let trackColor = THEME.colors.background.secondary\n css({\n \"@global\": {\n \"*\": {\n scrollbarWidth: \"thin\",\n scrollbarColor: `${thumbColor} ${trackColor}`,\n },\n \"::-webkit-scrollbar\": {\n width: thumbSize,\n height: thumbSize,\n },\n \"::-webkit-scrollbar-thumb\": {\n backgroundColor: thumbColor,\n borderRadius: \"5px\",\n border: \"2px solid #f4f4f4\",\n },\n \"::-webkit-scrollbar-thumb:hover\": {\n backgroundColor: thumbColor,\n },\n \"::-webkit-scrollbar-track\": {\n backgroundColor: trackColor,\n borderRadius: \"5px\",\n },\n }\n })\n }\n\n resetCss && css({\n \"@global\": {\n \"*\": {\n m: 0,\n p: 0,\n outline: \"none\",\n boxSizing: \"border-box\",\n verticalAlign: \"baseline\",\n },\n \"html, body\": {\n minHeight: \"100%\",\n \"-webkit-font-smoothing\": \"antialiased\"\n } as any,\n \"img, picture, video, canvas, svg\": {\n maxWidth: \"100%\",\n display: \"block\"\n },\n \"input, button, textarea, select\": {\n font: \"inherit\"\n },\n \"table\": {\n borderCollapse: \"collapse\",\n borderSpacing: 0\n },\n \"ol, ul\": {\n listStyle: \"none\"\n },\n \"a\": {\n display: \"inline-block\"\n },\n \"p, h1, h2, h3, h4, h5, h6\": {\n overflowWrap: \"break-word\",\n }\n }\n })\n\n }, [theme])\n\n React.useMemo(() => {\n providers.push(id)\n }, [])\n\n React.useEffect(() => {\n return () => {\n providers.splice(providers.indexOf(id), 1)\n }\n }, [])\n\n const isRoot = id === providers[0]\n\n let content = (\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 )\n\n return (\n <ThemeContex.Provider value={theme}>\n {\n isRoot ? <BreakpointProvider>\n {content}\n {renderIsRoot}\n </BreakpointProvider> : content\n }\n </ThemeContex.Provider>\n )\n}\n\n\nexport default ThemeProvider"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|