@xanui/core 1.0.6 → 1.0.8

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.
@@ -78,7 +78,7 @@ const Transition = ({ children, open, ...props }) => {
78
78
  setCss(open ? to : from);
79
79
  }
80
80
  }
81
- }, [rendered, open]);
81
+ }, [rendered, open, JSON.stringify(from), JSON.stringify(to)]);
82
82
  let _ = {};
83
83
  if (rendered) {
84
84
  let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`;
@@ -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 [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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",
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\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, JSON.stringify(from), JSON.stringify(to)])\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": ";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,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,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;AAE1B,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,UAAI,CAAC,SAAS;AACV,mBAAW,IAAI;AACf,mBAAW,MAAM;AACb,iBAAO,OAAO,KAAK,IAAI;AAAA,QAC3B,GAAG,EAAE;AAAA,MACT,OAAO;AACH,eAAO,OAAO,KAAK,IAAI;AAAA,MAC3B;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,UAAU,MAAM,KAAK,UAAU,IAAI,GAAG,KAAK,UAAU,EAAE,CAAC,CAAC;AAE7D,MAAI,IAAS,CAAC;AACd,MAAI,UAAU;AACV,QAAI,QAAQ,IAAI,QAAQ,MAAM,KAAK,IAAI,SAAS,CAAC;AACjD,QAAI;AAAA,MACA,GAAG;AAAA,MACH,YAAY,OAAO,KAAK,QAAQ,CAAC,CAAC,EAAE,IAAI,OAAK,cAAc,CAAC,CAAC,EAAE,KAAK,QAAQ,IAAI,IAAI;AAAA,IACxF;AAAA,EACJ;AAEA,QAAM,MAAM,IAAI,CAAC;AACjB,MAAI,CAAC,YAAY,MAAM,QAAQ,QAAQ,EAAG,OAAM,IAAI,MAAM,gCAAgC;AAC1F,QAAM,QAAa,SAAS,QAAQ,QAAQ,EAAE,MAAM;AACpD,MAAI,YAAY,GAAG,IAAI,SAAS,UAAU,EAAE,UAAW,OAAO,SAAS,OAAQ,gBAAgB,eAAe;AAC9G,QAAM,QAAQ,aAAa,OAAO,EAAE,YAAY,CAAC,SAAS,EAAE,CAAC;AAC7D,MAAI,SAAU,QAAO;AACrB,MAAI,CAAC,YAAY,4BAA4B,KAAM,QAAO;AAE1D,SACI;AAAA,IAAC;AAAA;AAAA,MACG,QAAQ;AAAA,MACR,UAAS;AAAA;AAAA,IAER;AAAA,EACL;AAER;AAGA,IAAO,qBAAQ;",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xanui/core",
3
- "version": "1.0.6",
3
+ "version": "1.0.8",
4
4
  "description": "",
5
5
  "main": "./index.js",
6
6
  "publishConfig": {
@@ -4,7 +4,8 @@ export type ThemeProviderProps<T extends TagComponentType = 'div'> = TagProps<T>
4
4
  theme: string;
5
5
  resetCss?: boolean;
6
6
  scrollbarCss?: boolean;
7
+ isRootProvider?: boolean;
7
8
  renderIsRoot?: React.ReactElement;
8
9
  };
9
- declare const ThemeProvider: ({ children, theme, resetCss, scrollbarCss, renderIsRoot, ...props }: ThemeProviderProps) => React.JSX.Element;
10
+ declare const ThemeProvider: ({ children, theme, resetCss, scrollbarCss, isRootProvider, renderIsRoot, ...props }: ThemeProviderProps) => React.JSX.Element;
10
11
  export default ThemeProvider;
@@ -4,9 +4,7 @@ import { BreakpointProvider } from "../breakpoint";
4
4
  import { ThemeContex, ThemeFactory } from "./core";
5
5
  import ThemeCssVars from "./ThemeCssVars";
6
6
  import { css } from "../css";
7
- const providers = [];
8
- const ThemeProvider = ({ children, theme, resetCss, scrollbarCss, renderIsRoot, ...props }) => {
9
- const id = React.useId();
7
+ const ThemeProvider = ({ children, theme, resetCss, scrollbarCss, isRootProvider, renderIsRoot, ...props }) => {
10
8
  const THEME = ThemeFactory.get(theme);
11
9
  if (!THEME) throw new Error(`Invalid theme name provided: ${theme}`);
12
10
  resetCss ??= true;
@@ -87,16 +85,22 @@ const ThemeProvider = ({ children, theme, resetCss, scrollbarCss, renderIsRoot,
87
85
  }
88
86
  });
89
87
  }, [theme]);
90
- React.useMemo(() => {
91
- providers.push(id);
92
- }, []);
93
- React.useEffect(() => {
94
- return () => {
95
- providers.splice(providers.indexOf(id), 1);
96
- };
97
- }, []);
98
- const isRoot = id === providers[0];
99
- let content = /* @__PURE__ */ React.createElement(
88
+ return /* @__PURE__ */ React.createElement(ThemeContex.Provider, { value: theme }, isRootProvider ? /* @__PURE__ */ React.createElement(BreakpointProvider, null, /* @__PURE__ */ React.createElement(
89
+ Tag,
90
+ {
91
+ minHeight: "100%",
92
+ bgcolor: THEME.colors.background.primary,
93
+ fontFamily: THEME.typography.fontFamily,
94
+ fontSize: THEME.typography.text.fontSize,
95
+ fontWeight: THEME.typography.text.fontWeight,
96
+ lineHeight: THEME.typography.text.lineHeight,
97
+ ...props,
98
+ baseClass: `${theme}-theme-root`,
99
+ direction: THEME.rtl ? "rtl" : "ltr"
100
+ },
101
+ children,
102
+ renderIsRoot
103
+ )) : /* @__PURE__ */ React.createElement(
100
104
  Tag,
101
105
  {
102
106
  minHeight: "100%",
@@ -109,9 +113,9 @@ const ThemeProvider = ({ children, theme, resetCss, scrollbarCss, renderIsRoot,
109
113
  baseClass: `${theme}-theme-root`,
110
114
  direction: THEME.rtl ? "rtl" : "ltr"
111
115
  },
112
- children
113
- );
114
- return /* @__PURE__ */ React.createElement(ThemeContex.Provider, { value: theme }, isRoot ? /* @__PURE__ */ React.createElement(BreakpointProvider, null, content, renderIsRoot) : content);
116
+ children,
117
+ renderIsRoot
118
+ ));
115
119
  };
116
120
  var ThemeProvider_default = ThemeProvider;
117
121
  export {
@@ -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 [`.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
- "mappings": "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",
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 isRootProvider?: boolean;\n renderIsRoot?: React.ReactElement;\n}\n\nconst ThemeProvider = ({ children, theme, resetCss, scrollbarCss, isRootProvider, renderIsRoot, ...props }: ThemeProviderProps) => {\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 }, [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 {renderIsRoot}\n </Tag>\n }\n </ThemeContex.Provider>\n )\n}\n\nexport default ThemeProvider"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }