@neo-ui-kit/react 1.2.3 → 1.3.1
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/README.md +50 -1
- package/dist/chunks/{chunk-RHMNSDIW.js → chunk-TQWTM23C.js} +480 -185
- package/dist/chunks/{chunk-YKCUOZ7V.js → chunk-WOUWYJ6U.js} +85 -1
- package/dist/components/artwork/QuantumField/QuantumFieldExperience.d.ts +6 -0
- package/dist/components/controls/ThemePicker/ThemePicker.d.ts +2 -0
- package/dist/components/controls/ThemePicker/styles.css +45 -10
- package/dist/components/forms/FormFields/FormFields.d.ts +10 -4
- package/dist/components/forms/FormFields/styles.css +3 -0
- package/dist/components/foundation/LoaderGenerator/LoaderGenerator.d.ts +2 -2
- package/dist/core.js +2 -4
- package/dist/forms.js +2 -2
- package/dist/index.js +705 -980
- package/package.json +1 -1
- package/dist/chunks/chunk-JZ4GDTH5.js +0 -87
package/package.json
CHANGED
|
@@ -1,87 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
classes,
|
|
3
|
-
mark
|
|
4
|
-
} from "./chunk-BJSFN52W.js";
|
|
5
|
-
|
|
6
|
-
// src/components/foundation/ThemeProvider/ThemeProvider.tsx
|
|
7
|
-
import { createContext, useContext, useMemo } from "react";
|
|
8
|
-
import { jsx } from "react/jsx-runtime";
|
|
9
|
-
var themes = {
|
|
10
|
-
ruby: ["#ff244c", "#ff7c97"],
|
|
11
|
-
light: ["#e0a43a", "#f3d38f"],
|
|
12
|
-
green: ["#10c99a", "#7cf3d0"],
|
|
13
|
-
violet: ["#9b5cff", "#d3a8ff"]
|
|
14
|
-
};
|
|
15
|
-
var ThemeColorSchemeContext = createContext("dark");
|
|
16
|
-
var ThemePaletteContext = createContext({
|
|
17
|
-
theme: "ruby",
|
|
18
|
-
primary: themes.ruby[0],
|
|
19
|
-
secondary: themes.ruby[1]
|
|
20
|
-
});
|
|
21
|
-
var useThemePalette = () => useContext(ThemePaletteContext);
|
|
22
|
-
var emptyTokens = {};
|
|
23
|
-
function hue(hex) {
|
|
24
|
-
const [r, g, b] = [1, 3, 5].map(
|
|
25
|
-
(i) => parseInt(hex.slice(i, i + 2), 16) / 255
|
|
26
|
-
);
|
|
27
|
-
const max = Math.max(r, g, b);
|
|
28
|
-
const delta = max - Math.min(r, g, b);
|
|
29
|
-
if (!delta) return 0;
|
|
30
|
-
let h = (r - g) / delta + 4;
|
|
31
|
-
if (max === r) h = (g - b) / delta % 6;
|
|
32
|
-
else if (max === g) h = (b - r) / delta + 2;
|
|
33
|
-
return (h * 60 + 360) % 360;
|
|
34
|
-
}
|
|
35
|
-
var ThemeProvider = ({
|
|
36
|
-
theme,
|
|
37
|
-
colorScheme,
|
|
38
|
-
primary,
|
|
39
|
-
secondary,
|
|
40
|
-
accent,
|
|
41
|
-
tokens = emptyTokens,
|
|
42
|
-
style,
|
|
43
|
-
children,
|
|
44
|
-
id,
|
|
45
|
-
className,
|
|
46
|
-
...attributes
|
|
47
|
-
}) => {
|
|
48
|
-
const inheritedScheme = useContext(ThemeColorSchemeContext);
|
|
49
|
-
const inheritedPalette = useThemePalette();
|
|
50
|
-
const scheme = colorScheme ?? inheritedScheme;
|
|
51
|
-
const selected = theme ?? inheritedPalette.theme;
|
|
52
|
-
const main = primary ?? accent ?? (theme ? themes[theme][0] : inheritedPalette.primary);
|
|
53
|
-
const light = secondary ?? (theme ? themes[theme][1] : inheritedPalette.secondary);
|
|
54
|
-
const vars = useMemo(() => {
|
|
55
|
-
const next = { ...style };
|
|
56
|
-
if (theme !== void 0 || primary !== void 0 || accent !== void 0) next["--ad-primary"] = main;
|
|
57
|
-
if (theme !== void 0 || secondary !== void 0) next["--ad-secondary"] = light;
|
|
58
|
-
for (const [key, value] of Object.entries(tokens))
|
|
59
|
-
next[key.startsWith("--") ? key : `--ad-${key}`] = value;
|
|
60
|
-
const effectivePrimary2 = next["--ad-primary"];
|
|
61
|
-
if (typeof effectivePrimary2 === "string" && /^#[0-9a-f]{6}$/i.test(effectivePrimary2) && next["--ad-hue-shift"] === void 0)
|
|
62
|
-
next["--ad-hue-shift"] = `${Math.round(hue(effectivePrimary2) - hue(themes.ruby[0]))}deg`;
|
|
63
|
-
return next;
|
|
64
|
-
}, [style, main, light, primary, secondary, accent, theme, tokens]);
|
|
65
|
-
const effectivePrimary = String(vars["--ad-primary"] ?? main);
|
|
66
|
-
const effectiveSecondary = String(vars["--ad-secondary"] ?? light);
|
|
67
|
-
const palette = useMemo(() => ({ theme: selected, primary: effectivePrimary, secondary: effectiveSecondary }), [selected, effectivePrimary, effectiveSecondary]);
|
|
68
|
-
return /* @__PURE__ */ jsx(ThemeColorSchemeContext.Provider, { value: scheme, children: /* @__PURE__ */ jsx(ThemePaletteContext.Provider, { value: palette, children: /* @__PURE__ */ jsx(
|
|
69
|
-
"div",
|
|
70
|
-
{
|
|
71
|
-
...mark("ThemeProvider", attributes),
|
|
72
|
-
id,
|
|
73
|
-
className: classes("ad-theme", className),
|
|
74
|
-
style: vars,
|
|
75
|
-
"data-ad-component": "ThemeProvider",
|
|
76
|
-
"data-ad-theme": selected,
|
|
77
|
-
"data-ad-color-scheme": scheme,
|
|
78
|
-
children
|
|
79
|
-
}
|
|
80
|
-
) }) });
|
|
81
|
-
};
|
|
82
|
-
|
|
83
|
-
export {
|
|
84
|
-
themes,
|
|
85
|
-
useThemePalette,
|
|
86
|
-
ThemeProvider
|
|
87
|
-
};
|