@xanui/core 1.3.14 → 1.3.15
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/index.cjs +2 -8
- package/index.cjs.map +1 -1
- package/package.json +1 -1
- package/theme/core.cjs +11 -11
- package/theme/core.cjs.map +1 -1
- package/theme/core.d.ts +8 -8
- package/theme/core.js +8 -10
- package/theme/core.js.map +1 -1
- package/theme/index.cjs +2 -8
- package/theme/index.cjs.map +1 -1
- package/theme/types.d.ts +0 -1
package/index.cjs
CHANGED
|
@@ -58,14 +58,8 @@ exports.getValue = getValue;
|
|
|
58
58
|
exports.getProps = getProps;
|
|
59
59
|
exports.ThemeProvider = ThemeProvider;
|
|
60
60
|
exports.Easing = easing;
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
get: function () { return core.DEFAULT_THEME_NAME; }
|
|
64
|
-
});
|
|
65
|
-
Object.defineProperty(exports, "THEME_MODE", {
|
|
66
|
-
enumerable: true,
|
|
67
|
-
get: function () { return core.THEME_MODE; }
|
|
68
|
-
});
|
|
61
|
+
exports.DEFAULT_THEME_NAME = core.DEFAULT_THEME_NAME;
|
|
62
|
+
exports.THEME_MODE = core.THEME_MODE;
|
|
69
63
|
exports.createTheme = core.createTheme;
|
|
70
64
|
exports.useTheme = core.useTheme;
|
|
71
65
|
exports.darkThemeOptions = ThemeDefaultOptions.darkThemeOptions;
|
package/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
package/theme/core.cjs
CHANGED
|
@@ -6,16 +6,14 @@ var index = require('../css/index.cjs');
|
|
|
6
6
|
var ThemeDefaultOptions = require('./ThemeDefaultOptions.cjs');
|
|
7
7
|
var oklch = require('./oklch.cjs');
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
THEME_MODE["LIGTH"] = "light";
|
|
18
|
-
})(exports.THEME_MODE || (exports.THEME_MODE = {}));
|
|
9
|
+
const DEFAULT_THEME_NAME = {
|
|
10
|
+
DARK: "default-dark",
|
|
11
|
+
LIGHT: "default-light"
|
|
12
|
+
};
|
|
13
|
+
const THEME_MODE = {
|
|
14
|
+
DARK: "dark",
|
|
15
|
+
LIGTH: "light"
|
|
16
|
+
};
|
|
19
17
|
const mergeObject = (a, b) => {
|
|
20
18
|
a = Object.assign({}, a);
|
|
21
19
|
b = Object.assign({}, b);
|
|
@@ -47,7 +45,7 @@ const createTheme = (options) => {
|
|
|
47
45
|
}
|
|
48
46
|
}
|
|
49
47
|
}
|
|
50
|
-
let theme = mergeObject(defaultOptions, Object.assign(Object.assign({ name: mode === "dark" ?
|
|
48
|
+
let theme = mergeObject(defaultOptions, Object.assign(Object.assign({ name: mode === "dark" ? DEFAULT_THEME_NAME.DARK : DEFAULT_THEME_NAME.LIGHT }, options), { breakpoints: index.breakpoints }));
|
|
51
49
|
return theme;
|
|
52
50
|
};
|
|
53
51
|
const ThemeContex = React.createContext({
|
|
@@ -63,6 +61,8 @@ const useTheme = () => {
|
|
|
63
61
|
return theme;
|
|
64
62
|
};
|
|
65
63
|
|
|
64
|
+
exports.DEFAULT_THEME_NAME = DEFAULT_THEME_NAME;
|
|
65
|
+
exports.THEME_MODE = THEME_MODE;
|
|
66
66
|
exports.ThemeContex = ThemeContex;
|
|
67
67
|
exports.createTheme = createTheme;
|
|
68
68
|
exports.mergeObject = mergeObject;
|
package/theme/core.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"core.cjs","sources":["../../src/theme/core.ts"],"sourcesContent":["\"use client\"\r\nimport React, { useContext } from \"react\"\r\nimport { ObjectType, ThemeOptions, ThemeOptionInput } from \"./types\"\r\nimport { breakpoints } from \"../css\"\r\nimport { darkThemeOptions, lightThemeOptions } from \"./ThemeDefaultOptions\"\r\nimport { createPalette } from \"./oklch\"\r\n\r\nexport
|
|
1
|
+
{"version":3,"file":"core.cjs","sources":["../../src/theme/core.ts"],"sourcesContent":["\"use client\"\r\nimport React, { useContext } from \"react\"\r\nimport { ObjectType, ThemeOptions, ThemeOptionInput } from \"./types\"\r\nimport { breakpoints } from \"../css\"\r\nimport { darkThemeOptions, lightThemeOptions } from \"./ThemeDefaultOptions\"\r\nimport { createPalette } from \"./oklch\"\r\n\r\nexport const DEFAULT_THEME_NAME = {\r\n DARK: \"default-dark\",\r\n LIGHT: \"default-light\"\r\n}\r\n\r\nexport const THEME_MODE = {\r\n DARK: \"dark\",\r\n LIGTH: \"light\"\r\n}\r\n\r\nexport const mergeObject = (a: ObjectType, b: ObjectType) => {\r\n a = { ...a }\r\n b = { ...b }\r\n for (const key in b) {\r\n const v = (b as any)[key]\r\n if (typeof v === 'object' && !Array.isArray(v) && !React.isValidElement(v)) {\r\n a[key] = mergeObject(a[key], b[key])\r\n } else {\r\n a[key] = v\r\n }\r\n }\r\n return a\r\n}\r\n\r\n\r\nexport const createTheme = (options: ThemeOptionInput): ThemeOptions => {\r\n let mode = options?.mode ?? \"light\"\r\n const defaultOptions = mode === \"dark\" ? darkThemeOptions : lightThemeOptions\r\n\r\n for (let key in options?.colors) {\r\n const color = (options as any)?.colors[key] as any\r\n if (typeof color === \"string\") {\r\n (options as any).colors[key] = createPalette(color)\r\n } else {\r\n const main = color.base\r\n if (main) {\r\n const pallate = createPalette(main);\r\n (options as any).colors[key] = {\r\n ...pallate,\r\n ...(options as any).colors[key],\r\n main: pallate.base\r\n }\r\n }\r\n }\r\n }\r\n\r\n let theme: any = mergeObject(defaultOptions, {\r\n name: mode === \"dark\" ? DEFAULT_THEME_NAME.DARK : DEFAULT_THEME_NAME.LIGHT,\r\n ...options,\r\n breakpoints: breakpoints\r\n })\r\n\r\n return theme as ThemeOptions\r\n}\r\n\r\nexport type ThemeCntextProps = {\r\n theme: ThemeOptions,\r\n onChange: (theme: ThemeOptions) => void\r\n}\r\n\r\nexport const ThemeContex = React.createContext<ThemeCntextProps>({\r\n theme: createTheme({\r\n name: \"default-light\"\r\n }),\r\n onChange(theme) { },\r\n})\r\n\r\nexport const useTheme = () => {\r\n const ctx = useContext(ThemeContex)\r\n const theme = ctx.theme\r\n theme.change = (theme: ThemeOptionInput) => ctx.onChange(createTheme(theme))\r\n return theme\r\n}\r\n\r\n"],"names":[],"mappings":";;;;;;;;AAOO;AACJ;AACA;;AAGI;AACJ;AACA;;;;;AAMA;AACG;;AAEG;;;AAEA;;;AAGN;AACH;AAGO;;AACJ;AACA;;AAGG;AACA;;;;AAGG;;AAEG;;;;;AAUT;AAMA;AACH;AAOO;;AAED;;;AAGL;AAEM;AACJ;AACA;AACA;AACA;AACH;;;;;;;"}
|
package/theme/core.d.ts
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { ThemeOptionInput, ThemeOptions } from './types.js';
|
|
2
2
|
|
|
3
|
-
declare
|
|
4
|
-
DARK
|
|
5
|
-
LIGHT
|
|
6
|
-
}
|
|
7
|
-
declare
|
|
8
|
-
DARK
|
|
9
|
-
LIGTH
|
|
10
|
-
}
|
|
3
|
+
declare const DEFAULT_THEME_NAME: {
|
|
4
|
+
DARK: string;
|
|
5
|
+
LIGHT: string;
|
|
6
|
+
};
|
|
7
|
+
declare const THEME_MODE: {
|
|
8
|
+
DARK: string;
|
|
9
|
+
LIGTH: string;
|
|
10
|
+
};
|
|
11
11
|
declare const createTheme: (options: ThemeOptionInput) => ThemeOptions;
|
|
12
12
|
declare const useTheme: () => ThemeOptions;
|
|
13
13
|
|
package/theme/core.js
CHANGED
|
@@ -4,16 +4,14 @@ import { breakpoints } from '../css/index.js';
|
|
|
4
4
|
import { darkThemeOptions, lightThemeOptions } from './ThemeDefaultOptions.js';
|
|
5
5
|
import { createPalette } from './oklch.js';
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
THEME_MODE["LIGTH"] = "light";
|
|
16
|
-
})(THEME_MODE || (THEME_MODE = {}));
|
|
7
|
+
const DEFAULT_THEME_NAME = {
|
|
8
|
+
DARK: "default-dark",
|
|
9
|
+
LIGHT: "default-light"
|
|
10
|
+
};
|
|
11
|
+
const THEME_MODE = {
|
|
12
|
+
DARK: "dark",
|
|
13
|
+
LIGTH: "light"
|
|
14
|
+
};
|
|
17
15
|
const mergeObject = (a, b) => {
|
|
18
16
|
a = Object.assign({}, a);
|
|
19
17
|
b = Object.assign({}, b);
|
package/theme/core.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"core.js","sources":["../../src/theme/core.ts"],"sourcesContent":["\"use client\"\r\nimport React, { useContext } from \"react\"\r\nimport { ObjectType, ThemeOptions, ThemeOptionInput } from \"./types\"\r\nimport { breakpoints } from \"../css\"\r\nimport { darkThemeOptions, lightThemeOptions } from \"./ThemeDefaultOptions\"\r\nimport { createPalette } from \"./oklch\"\r\n\r\nexport
|
|
1
|
+
{"version":3,"file":"core.js","sources":["../../src/theme/core.ts"],"sourcesContent":["\"use client\"\r\nimport React, { useContext } from \"react\"\r\nimport { ObjectType, ThemeOptions, ThemeOptionInput } from \"./types\"\r\nimport { breakpoints } from \"../css\"\r\nimport { darkThemeOptions, lightThemeOptions } from \"./ThemeDefaultOptions\"\r\nimport { createPalette } from \"./oklch\"\r\n\r\nexport const DEFAULT_THEME_NAME = {\r\n DARK: \"default-dark\",\r\n LIGHT: \"default-light\"\r\n}\r\n\r\nexport const THEME_MODE = {\r\n DARK: \"dark\",\r\n LIGTH: \"light\"\r\n}\r\n\r\nexport const mergeObject = (a: ObjectType, b: ObjectType) => {\r\n a = { ...a }\r\n b = { ...b }\r\n for (const key in b) {\r\n const v = (b as any)[key]\r\n if (typeof v === 'object' && !Array.isArray(v) && !React.isValidElement(v)) {\r\n a[key] = mergeObject(a[key], b[key])\r\n } else {\r\n a[key] = v\r\n }\r\n }\r\n return a\r\n}\r\n\r\n\r\nexport const createTheme = (options: ThemeOptionInput): ThemeOptions => {\r\n let mode = options?.mode ?? \"light\"\r\n const defaultOptions = mode === \"dark\" ? darkThemeOptions : lightThemeOptions\r\n\r\n for (let key in options?.colors) {\r\n const color = (options as any)?.colors[key] as any\r\n if (typeof color === \"string\") {\r\n (options as any).colors[key] = createPalette(color)\r\n } else {\r\n const main = color.base\r\n if (main) {\r\n const pallate = createPalette(main);\r\n (options as any).colors[key] = {\r\n ...pallate,\r\n ...(options as any).colors[key],\r\n main: pallate.base\r\n }\r\n }\r\n }\r\n }\r\n\r\n let theme: any = mergeObject(defaultOptions, {\r\n name: mode === \"dark\" ? DEFAULT_THEME_NAME.DARK : DEFAULT_THEME_NAME.LIGHT,\r\n ...options,\r\n breakpoints: breakpoints\r\n })\r\n\r\n return theme as ThemeOptions\r\n}\r\n\r\nexport type ThemeCntextProps = {\r\n theme: ThemeOptions,\r\n onChange: (theme: ThemeOptions) => void\r\n}\r\n\r\nexport const ThemeContex = React.createContext<ThemeCntextProps>({\r\n theme: createTheme({\r\n name: \"default-light\"\r\n }),\r\n onChange(theme) { },\r\n})\r\n\r\nexport const useTheme = () => {\r\n const ctx = useContext(ThemeContex)\r\n const theme = ctx.theme\r\n theme.change = (theme: ThemeOptionInput) => ctx.onChange(createTheme(theme))\r\n return theme\r\n}\r\n\r\n"],"names":[],"mappings":";;;;;;AAOO;AACJ;AACA;;AAGI;AACJ;AACA;;;;;AAMA;AACG;;AAEG;;;AAEA;;;AAGN;AACH;AAGO;;AACJ;AACA;;AAGG;AACA;;;;AAGG;;AAEG;;;;;AAUT;AAMA;AACH;AAOO;;AAED;;;AAGL;AAEM;AACJ;AACA;AACA;AACA;AACH;;"}
|
package/theme/index.cjs
CHANGED
|
@@ -14,14 +14,8 @@ require('../css/CSSCacheProvider.cjs');
|
|
|
14
14
|
|
|
15
15
|
const themeRootClass = (theme) => `.xui-${theme}-theme-root`;
|
|
16
16
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
get: function () { return core.DEFAULT_THEME_NAME; }
|
|
20
|
-
});
|
|
21
|
-
Object.defineProperty(exports, "THEME_MODE", {
|
|
22
|
-
enumerable: true,
|
|
23
|
-
get: function () { return core.THEME_MODE; }
|
|
24
|
-
});
|
|
17
|
+
exports.DEFAULT_THEME_NAME = core.DEFAULT_THEME_NAME;
|
|
18
|
+
exports.THEME_MODE = core.THEME_MODE;
|
|
25
19
|
exports.createTheme = core.createTheme;
|
|
26
20
|
exports.useTheme = core.useTheme;
|
|
27
21
|
exports.darkThemeOptions = ThemeDefaultOptions.darkThemeOptions;
|
package/theme/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/theme/index.tsx"],"sourcesContent":["\"use client\"\r\nimport ThemeProvider from './ThemeProvider'\r\nimport { useTheme, createTheme, THEME_MODE, DEFAULT_THEME_NAME } from './core'\r\nimport { lightThemeOptions, darkThemeOptions } from './ThemeDefaultOptions'\r\nexport type { ThemeProviderProps } from './ThemeProvider'\r\n\r\nexport const themeRootClass = (theme: string) => `.xui-${theme}-theme-root`\r\n\r\nexport {\r\n ThemeProvider,\r\n createTheme,\r\n useTheme,\r\n lightThemeOptions,\r\n darkThemeOptions,\r\n THEME_MODE,\r\n DEFAULT_THEME_NAME\r\n}\r\n\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAMO
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/theme/index.tsx"],"sourcesContent":["\"use client\"\r\nimport ThemeProvider from './ThemeProvider'\r\nimport { useTheme, createTheme, THEME_MODE, DEFAULT_THEME_NAME } from './core'\r\nimport { lightThemeOptions, darkThemeOptions } from './ThemeDefaultOptions'\r\nexport type { ThemeProviderProps } from './ThemeProvider'\r\n\r\nexport const themeRootClass = (theme: string) => `.xui-${theme}-theme-root`\r\n\r\nexport {\r\n ThemeProvider,\r\n createTheme,\r\n useTheme,\r\n lightThemeOptions,\r\n darkThemeOptions,\r\n THEME_MODE,\r\n DEFAULT_THEME_NAME\r\n}\r\n\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAMO;;;;;;;;"}
|