@ekkolyth/ui 0.1.17 → 0.1.19
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/LICENSE +21 -0
- package/README.md +77 -132
- package/dist/base.css +263 -0
- package/dist/blocks.d.ts +4 -0
- package/dist/blocks.js +4 -0
- package/dist/container-BBg21poC.js +10 -0
- package/dist/convex.d.ts +2 -0
- package/dist/convex.js +2 -0
- package/dist/hooks.d.ts +2 -0
- package/dist/hooks.js +2 -0
- package/dist/icon-picker-ByfHyJ7i.js +4078 -0
- package/dist/index-Bwp0YMmG.d.ts +5 -0
- package/dist/index-BxcqwZNT.d.ts +30 -0
- package/dist/index-DHF8OR1R.d.ts +60 -0
- package/dist/index-DsLGf2HX.d.ts +9 -0
- package/dist/index-qji4ohJZ.d.ts +24 -0
- package/dist/index.d.ts +793 -533
- package/dist/index.js +3236 -5578
- package/dist/layout.d.ts +2 -0
- package/dist/layout.js +2 -0
- package/dist/loading-screen-DB3youyT.js +63 -0
- package/dist/shiki-code-Bg__Vnt1.js +29 -0
- package/dist/text.d.ts +17 -0
- package/dist/text.js +177 -0
- package/dist/themes/catpuccin/frappe.css +33 -33
- package/dist/themes/catpuccin/latte.css +33 -33
- package/dist/themes/catpuccin/macchiato.css +33 -33
- package/dist/themes/catpuccin/mocha.css +33 -33
- package/dist/themes/ekko-os.css +92 -37
- package/dist/themes/ekkolyth.css +2 -2
- package/dist/themes/index.css +7 -66
- package/dist/themes/provider.d.ts +62 -0
- package/dist/themes/provider.js +271 -0
- package/dist/themes/tokyo-night.css +33 -33
- package/dist/themes.css +7 -66
- package/dist/toggle-B2PFPImC.js +182 -0
- package/dist/use-mobile-BVGje-2e.d.ts +4 -0
- package/dist/use-mobile-CqHXB_Nc.js +18 -0
- package/dist/utils-C_uf36nf.js +8 -0
- package/dist/widget-C2vjxQms.js +94 -0
- package/dist/widget.d.ts +6 -0
- package/dist/widget.js +19 -0
- package/package.json +125 -170
- package/dist/catpuccin/frappe.css +0 -35
- package/dist/catpuccin/latte.css +0 -35
- package/dist/catpuccin/macchiato.css +0 -35
- package/dist/catpuccin/mocha.css +0 -35
- package/dist/ekko-os.css +0 -71
- package/dist/ekko-playlist.css +0 -71
- package/dist/ekkolyth.css +0 -70
- package/dist/index-C3ceanPz.d.ts +0 -18
- package/dist/index-C7t_lwpi.d.ts +0 -13
- package/dist/next.d.ts +0 -13
- package/dist/next.js +0 -271
- package/dist/providers/next.d.ts +0 -25
- package/dist/providers/next.js +0 -216
- package/dist/providers/tanstack.d.ts +0 -24
- package/dist/providers/tanstack.js +0 -120
- package/dist/tanstack.d.ts +0 -12
- package/dist/tanstack.js +0 -203
- package/dist/themes/ekko-playlist.css +0 -71
- package/dist/themes/theme-select.d.ts +0 -12
- package/dist/themes/theme-select.js +0 -357
- package/dist/themes/theme-toggle.d.ts +0 -15
- package/dist/themes/theme-toggle.js +0 -179
- package/dist/tokyo-night.css +0 -35
- package/dist/types-fUfvw1Mz.d.ts +0 -8
package/dist/index-C3ceanPz.d.ts
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import * as React from 'react';
|
|
3
|
-
import { Select as Select$1 } from 'radix-ui';
|
|
4
|
-
|
|
5
|
-
declare function Select({ ...props }: React.ComponentProps<typeof Select$1.Root>): react_jsx_runtime.JSX.Element;
|
|
6
|
-
declare function SelectGroup({ ...props }: React.ComponentProps<typeof Select$1.Group>): react_jsx_runtime.JSX.Element;
|
|
7
|
-
declare function SelectValue({ ...props }: React.ComponentProps<typeof Select$1.Value>): react_jsx_runtime.JSX.Element;
|
|
8
|
-
declare function SelectTrigger({ className, size, children, ...props }: React.ComponentProps<typeof Select$1.Trigger> & {
|
|
9
|
-
size?: "sm" | "default";
|
|
10
|
-
}): react_jsx_runtime.JSX.Element;
|
|
11
|
-
declare function SelectContent({ className, children, position, align, ...props }: React.ComponentProps<typeof Select$1.Content>): react_jsx_runtime.JSX.Element;
|
|
12
|
-
declare function SelectLabel({ className, ...props }: React.ComponentProps<typeof Select$1.Label>): react_jsx_runtime.JSX.Element;
|
|
13
|
-
declare function SelectItem({ className, children, ...props }: React.ComponentProps<typeof Select$1.Item>): react_jsx_runtime.JSX.Element;
|
|
14
|
-
declare function SelectSeparator({ className, ...props }: React.ComponentProps<typeof Select$1.Separator>): react_jsx_runtime.JSX.Element;
|
|
15
|
-
declare function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof Select$1.ScrollUpButton>): react_jsx_runtime.JSX.Element;
|
|
16
|
-
declare function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof Select$1.ScrollDownButton>): react_jsx_runtime.JSX.Element;
|
|
17
|
-
|
|
18
|
-
export { Select as S, SelectContent as a, SelectGroup as b, SelectItem as c, SelectLabel as d, SelectScrollDownButton as e, SelectScrollUpButton as f, SelectSeparator as g, SelectTrigger as h, SelectValue as i };
|
package/dist/index-C7t_lwpi.d.ts
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
3
|
-
import * as React from 'react';
|
|
4
|
-
import { VariantProps } from 'class-variance-authority';
|
|
5
|
-
import { Toggle as Toggle$1 } from 'radix-ui';
|
|
6
|
-
|
|
7
|
-
declare const toggleVariants: (props?: ({
|
|
8
|
-
variant?: "default" | "outline" | null | undefined;
|
|
9
|
-
size?: "default" | "sm" | "lg" | null | undefined;
|
|
10
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
11
|
-
declare function Toggle({ className, variant, size, ...props }: React.ComponentProps<typeof Toggle$1.Root> & VariantProps<typeof toggleVariants>): react_jsx_runtime.JSX.Element;
|
|
12
|
-
|
|
13
|
-
export { Toggle as T, toggleVariants as t };
|
package/dist/next.d.ts
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
export { NextThemeProvider as ThemeProvider, NextThemeProviderProps as ThemeProviderProps, useNextTheme as useTheme } from './providers/next.js';
|
|
2
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
|
-
import { ToasterProps } from 'sonner';
|
|
4
|
-
export { S as SystemTheme, T as ThemeName } from './types-fUfvw1Mz.js';
|
|
5
|
-
import 'next-themes';
|
|
6
|
-
|
|
7
|
-
/**
|
|
8
|
-
* Theme-aware Toaster for Next.js apps using next-themes
|
|
9
|
-
* Automatically syncs with NextThemeProvider
|
|
10
|
-
*/
|
|
11
|
-
declare function NextToaster(props: ToasterProps): react_jsx_runtime.JSX.Element;
|
|
12
|
-
|
|
13
|
-
export { NextToaster as Toaster };
|
package/dist/next.js
DELETED
|
@@ -1,271 +0,0 @@
|
|
|
1
|
-
import { ThemeProvider, useTheme } from 'next-themes';
|
|
2
|
-
import { createContext, use, useState, useEffect, useMemo } from 'react';
|
|
3
|
-
import { jsx } from 'react/jsx-runtime';
|
|
4
|
-
import { Toaster as Toaster$1 } from 'sonner';
|
|
5
|
-
import { Loader2Icon, OctagonXIcon, TriangleAlertIcon, InfoIcon, CircleCheckIcon } from 'lucide-react';
|
|
6
|
-
|
|
7
|
-
var __defProp = Object.defineProperty;
|
|
8
|
-
var __defProps = Object.defineProperties;
|
|
9
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
10
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
11
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
12
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
13
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
14
|
-
var __spreadValues = (a, b) => {
|
|
15
|
-
for (var prop in b || (b = {}))
|
|
16
|
-
if (__hasOwnProp.call(b, prop))
|
|
17
|
-
__defNormalProp(a, prop, b[prop]);
|
|
18
|
-
if (__getOwnPropSymbols)
|
|
19
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
20
|
-
if (__propIsEnum.call(b, prop))
|
|
21
|
-
__defNormalProp(a, prop, b[prop]);
|
|
22
|
-
}
|
|
23
|
-
return a;
|
|
24
|
-
};
|
|
25
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
26
|
-
var __objRest = (source, exclude) => {
|
|
27
|
-
var target = {};
|
|
28
|
-
for (var prop in source)
|
|
29
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
30
|
-
target[prop] = source[prop];
|
|
31
|
-
if (source != null && __getOwnPropSymbols)
|
|
32
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
33
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
34
|
-
target[prop] = source[prop];
|
|
35
|
-
}
|
|
36
|
-
return target;
|
|
37
|
-
};
|
|
38
|
-
var initialState = {
|
|
39
|
-
systemTheme: "system",
|
|
40
|
-
resolvedTheme: "ekkolyth-light",
|
|
41
|
-
availableThemes: {
|
|
42
|
-
light: ["ekkolyth-light"],
|
|
43
|
-
dark: ["ekkolyth-dark"]
|
|
44
|
-
},
|
|
45
|
-
setSystemTheme: () => null,
|
|
46
|
-
setSpecificTheme: () => null
|
|
47
|
-
};
|
|
48
|
-
var NextThemeProviderContext = createContext(initialState);
|
|
49
|
-
var resolveSystemTheme = (systemTheme) => {
|
|
50
|
-
if (systemTheme === "system" || systemTheme === "normal") {
|
|
51
|
-
if (typeof window !== "undefined") {
|
|
52
|
-
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
|
53
|
-
}
|
|
54
|
-
return "light";
|
|
55
|
-
}
|
|
56
|
-
return systemTheme;
|
|
57
|
-
};
|
|
58
|
-
function NextThemeProvider(_a) {
|
|
59
|
-
var _b = _a, {
|
|
60
|
-
children,
|
|
61
|
-
defaultTheme = "system",
|
|
62
|
-
lightTheme = ["ekkolyth-light"],
|
|
63
|
-
darkTheme = ["ekkolyth-dark"],
|
|
64
|
-
storageKey = "ekko-ui"
|
|
65
|
-
} = _b, props = __objRest(_b, [
|
|
66
|
-
"children",
|
|
67
|
-
"defaultTheme",
|
|
68
|
-
"lightTheme",
|
|
69
|
-
"darkTheme",
|
|
70
|
-
"storageKey"
|
|
71
|
-
]);
|
|
72
|
-
const lightThemes = Array.isArray(lightTheme) ? lightTheme : [lightTheme];
|
|
73
|
-
const darkThemes = Array.isArray(darkTheme) ? darkTheme : [darkTheme];
|
|
74
|
-
const nextThemesDefaultTheme = defaultTheme === "normal" ? "light" : defaultTheme;
|
|
75
|
-
return /* @__PURE__ */ jsx(
|
|
76
|
-
ThemeProvider,
|
|
77
|
-
__spreadProps(__spreadValues({}, props), {
|
|
78
|
-
defaultTheme: nextThemesDefaultTheme,
|
|
79
|
-
attribute: "data-theme",
|
|
80
|
-
enableSystem: true,
|
|
81
|
-
children: /* @__PURE__ */ jsx(
|
|
82
|
-
ThemeMapper,
|
|
83
|
-
{
|
|
84
|
-
lightThemes,
|
|
85
|
-
darkThemes,
|
|
86
|
-
storageKey,
|
|
87
|
-
children
|
|
88
|
-
}
|
|
89
|
-
)
|
|
90
|
-
})
|
|
91
|
-
);
|
|
92
|
-
}
|
|
93
|
-
function ThemeMapper({
|
|
94
|
-
children,
|
|
95
|
-
lightThemes,
|
|
96
|
-
darkThemes,
|
|
97
|
-
storageKey
|
|
98
|
-
}) {
|
|
99
|
-
const { theme: nextTheme, setTheme: setNextTheme } = useTheme();
|
|
100
|
-
const [systemTheme, setSystemThemeState] = useState(() => {
|
|
101
|
-
if (typeof window !== "undefined") {
|
|
102
|
-
const stored = localStorage.getItem(
|
|
103
|
-
`${storageKey}.theme-mode`
|
|
104
|
-
);
|
|
105
|
-
return stored || "system";
|
|
106
|
-
}
|
|
107
|
-
return "system";
|
|
108
|
-
});
|
|
109
|
-
const [selectedLightTheme, setSelectedLightThemeState] = useState(() => {
|
|
110
|
-
if (typeof window !== "undefined") {
|
|
111
|
-
const stored = localStorage.getItem(
|
|
112
|
-
`${storageKey}.theme-light`
|
|
113
|
-
);
|
|
114
|
-
return stored && lightThemes.includes(stored) ? stored : lightThemes[0];
|
|
115
|
-
}
|
|
116
|
-
return lightThemes[0];
|
|
117
|
-
});
|
|
118
|
-
const [selectedDarkTheme, setSelectedDarkThemeState] = useState(
|
|
119
|
-
() => {
|
|
120
|
-
if (typeof window !== "undefined") {
|
|
121
|
-
const stored = localStorage.getItem(
|
|
122
|
-
`${storageKey}.theme-dark`
|
|
123
|
-
);
|
|
124
|
-
return stored && darkThemes.includes(stored) ? stored : darkThemes[0];
|
|
125
|
-
}
|
|
126
|
-
return darkThemes[0];
|
|
127
|
-
}
|
|
128
|
-
);
|
|
129
|
-
useEffect(() => {
|
|
130
|
-
if (typeof window !== "undefined") {
|
|
131
|
-
const stored = localStorage.getItem(
|
|
132
|
-
`${storageKey}.theme-mode`
|
|
133
|
-
);
|
|
134
|
-
if (stored) {
|
|
135
|
-
const nextThemesValue = stored === "normal" ? "light" : stored;
|
|
136
|
-
setNextTheme(nextThemesValue);
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
}, []);
|
|
140
|
-
useEffect(() => {
|
|
141
|
-
if (nextTheme) {
|
|
142
|
-
const currentSystemTheme = nextTheme === "system" ? "system" : nextTheme;
|
|
143
|
-
if (currentSystemTheme !== systemTheme) {
|
|
144
|
-
setSystemThemeState(currentSystemTheme);
|
|
145
|
-
if (typeof window !== "undefined") {
|
|
146
|
-
localStorage.setItem(`${storageKey}.theme-mode`, currentSystemTheme);
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
}
|
|
150
|
-
}, [nextTheme, storageKey, systemTheme]);
|
|
151
|
-
const resolvedTheme = useMemo(() => {
|
|
152
|
-
const resolvedSystem = resolveSystemTheme(systemTheme);
|
|
153
|
-
return resolvedSystem === "light" ? selectedLightTheme : selectedDarkTheme;
|
|
154
|
-
}, [systemTheme, selectedLightTheme, selectedDarkTheme]);
|
|
155
|
-
useEffect(() => {
|
|
156
|
-
const root = document.documentElement;
|
|
157
|
-
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
|
158
|
-
const updateTheme = () => {
|
|
159
|
-
const resolvedSystem = resolveSystemTheme(systemTheme);
|
|
160
|
-
const themeToApply = resolvedSystem === "light" ? selectedLightTheme : selectedDarkTheme;
|
|
161
|
-
root.setAttribute("data-theme", themeToApply);
|
|
162
|
-
};
|
|
163
|
-
updateTheme();
|
|
164
|
-
if (systemTheme === "system" || systemTheme === "normal") {
|
|
165
|
-
mediaQuery.addEventListener("change", updateTheme);
|
|
166
|
-
return () => mediaQuery.removeEventListener("change", updateTheme);
|
|
167
|
-
}
|
|
168
|
-
}, [systemTheme, selectedLightTheme, selectedDarkTheme]);
|
|
169
|
-
const value = useMemo(
|
|
170
|
-
() => ({
|
|
171
|
-
systemTheme,
|
|
172
|
-
resolvedTheme,
|
|
173
|
-
availableThemes: {
|
|
174
|
-
light: lightThemes,
|
|
175
|
-
dark: darkThemes
|
|
176
|
-
},
|
|
177
|
-
setSystemTheme: (newTheme) => {
|
|
178
|
-
if (typeof window !== "undefined") {
|
|
179
|
-
localStorage.setItem(`${storageKey}.theme-mode`, newTheme);
|
|
180
|
-
}
|
|
181
|
-
setSystemThemeState(newTheme);
|
|
182
|
-
const nextThemesValue = newTheme === "normal" ? "light" : newTheme;
|
|
183
|
-
setNextTheme(nextThemesValue);
|
|
184
|
-
},
|
|
185
|
-
setSpecificTheme: (mode, theme) => {
|
|
186
|
-
if (typeof window !== "undefined") {
|
|
187
|
-
const key = mode === "light" ? `${storageKey}.theme-light` : `${storageKey}.theme-dark`;
|
|
188
|
-
localStorage.setItem(key, theme);
|
|
189
|
-
}
|
|
190
|
-
if (mode === "light" && lightThemes.includes(theme)) {
|
|
191
|
-
setSelectedLightThemeState(theme);
|
|
192
|
-
} else if (mode === "dark" && darkThemes.includes(theme)) {
|
|
193
|
-
setSelectedDarkThemeState(theme);
|
|
194
|
-
}
|
|
195
|
-
setSystemThemeState(mode);
|
|
196
|
-
setNextTheme(mode);
|
|
197
|
-
}
|
|
198
|
-
}),
|
|
199
|
-
[
|
|
200
|
-
systemTheme,
|
|
201
|
-
resolvedTheme,
|
|
202
|
-
lightThemes,
|
|
203
|
-
darkThemes,
|
|
204
|
-
storageKey,
|
|
205
|
-
setNextTheme
|
|
206
|
-
]
|
|
207
|
-
);
|
|
208
|
-
return /* @__PURE__ */ jsx(NextThemeProviderContext.Provider, { value, children });
|
|
209
|
-
}
|
|
210
|
-
function useNextTheme() {
|
|
211
|
-
const context = use(NextThemeProviderContext);
|
|
212
|
-
if (context === void 0) {
|
|
213
|
-
throw new Error("useNextTheme must be used within a NextThemeProvider");
|
|
214
|
-
}
|
|
215
|
-
return context;
|
|
216
|
-
}
|
|
217
|
-
var Toaster = (_a) => {
|
|
218
|
-
var _b = _a, { theme = "system" } = _b, props = __objRest(_b, ["theme"]);
|
|
219
|
-
return /* @__PURE__ */ jsx(
|
|
220
|
-
Toaster$1,
|
|
221
|
-
__spreadValues({
|
|
222
|
-
theme,
|
|
223
|
-
className: "toaster group",
|
|
224
|
-
icons: {
|
|
225
|
-
success: /* @__PURE__ */ jsx(CircleCheckIcon, { className: "size-4" }),
|
|
226
|
-
info: /* @__PURE__ */ jsx(InfoIcon, { className: "size-4" }),
|
|
227
|
-
warning: /* @__PURE__ */ jsx(TriangleAlertIcon, { className: "size-4" }),
|
|
228
|
-
error: /* @__PURE__ */ jsx(OctagonXIcon, { className: "size-4" }),
|
|
229
|
-
loading: /* @__PURE__ */ jsx(Loader2Icon, { className: "size-4 animate-spin" })
|
|
230
|
-
},
|
|
231
|
-
style: {
|
|
232
|
-
"--normal-bg": "var(--popover)",
|
|
233
|
-
"--normal-text": "var(--popover-foreground)",
|
|
234
|
-
"--normal-border": "var(--border)",
|
|
235
|
-
"--border-radius": "var(--radius)"
|
|
236
|
-
},
|
|
237
|
-
toastOptions: {
|
|
238
|
-
classNames: {
|
|
239
|
-
toast: "cn-toast"
|
|
240
|
-
}
|
|
241
|
-
}
|
|
242
|
-
}, props)
|
|
243
|
-
);
|
|
244
|
-
};
|
|
245
|
-
|
|
246
|
-
// src/lib/types.ts
|
|
247
|
-
var DARK_THEMES = [
|
|
248
|
-
"mocha",
|
|
249
|
-
"frappe",
|
|
250
|
-
"macchiato",
|
|
251
|
-
"tokyo-night",
|
|
252
|
-
"ekkoos-dark",
|
|
253
|
-
"ekkolyth-dark",
|
|
254
|
-
"ekko-playlist-dark"
|
|
255
|
-
];
|
|
256
|
-
|
|
257
|
-
// src/lib/theme.ts
|
|
258
|
-
function isDarkTheme(theme) {
|
|
259
|
-
return DARK_THEMES.includes(theme);
|
|
260
|
-
}
|
|
261
|
-
function NextToaster(props) {
|
|
262
|
-
try {
|
|
263
|
-
const { resolvedTheme } = useNextTheme();
|
|
264
|
-
const theme = isDarkTheme(resolvedTheme) ? "dark" : "light";
|
|
265
|
-
return /* @__PURE__ */ jsx(Toaster, __spreadValues({ theme }, props));
|
|
266
|
-
} catch (e) {
|
|
267
|
-
return /* @__PURE__ */ jsx(Toaster, __spreadValues({ theme: "system" }, props));
|
|
268
|
-
}
|
|
269
|
-
}
|
|
270
|
-
|
|
271
|
-
export { NextThemeProvider as ThemeProvider, NextToaster as Toaster, useNextTheme as useTheme };
|
package/dist/providers/next.d.ts
DELETED
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import { ThemeProviderProps } from 'next-themes';
|
|
3
|
-
import { S as SystemTheme, L as LightThemes, D as DarkThemes, T as ThemeName } from '../types-fUfvw1Mz.js';
|
|
4
|
-
|
|
5
|
-
interface NextThemeProviderPropsExtended extends Omit<ThemeProviderProps, 'themes' | 'defaultTheme'> {
|
|
6
|
-
defaultTheme?: SystemTheme;
|
|
7
|
-
lightTheme?: LightThemes | LightThemes[];
|
|
8
|
-
darkTheme?: DarkThemes | DarkThemes[];
|
|
9
|
-
storageKey?: string;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
interface NextThemeProviderState {
|
|
13
|
-
systemTheme: SystemTheme;
|
|
14
|
-
resolvedTheme: ThemeName;
|
|
15
|
-
availableThemes: {
|
|
16
|
-
light: LightThemes[];
|
|
17
|
-
dark: DarkThemes[];
|
|
18
|
-
};
|
|
19
|
-
setSystemTheme: (theme: SystemTheme) => void;
|
|
20
|
-
setSpecificTheme: (mode: 'light' | 'dark', theme: LightThemes | DarkThemes) => void;
|
|
21
|
-
}
|
|
22
|
-
declare function NextThemeProvider({ children, defaultTheme, lightTheme, darkTheme, storageKey, ...props }: React.PropsWithChildren<NextThemeProviderPropsExtended>): react_jsx_runtime.JSX.Element;
|
|
23
|
-
declare function useNextTheme(): NextThemeProviderState;
|
|
24
|
-
|
|
25
|
-
export { DarkThemes, LightThemes, NextThemeProvider, type NextThemeProviderPropsExtended as NextThemeProviderProps, SystemTheme, ThemeName, useNextTheme };
|
package/dist/providers/next.js
DELETED
|
@@ -1,216 +0,0 @@
|
|
|
1
|
-
import { ThemeProvider, useTheme } from 'next-themes';
|
|
2
|
-
import { createContext, use, useState, useEffect, useMemo } from 'react';
|
|
3
|
-
import { jsx } from 'react/jsx-runtime';
|
|
4
|
-
|
|
5
|
-
var __defProp = Object.defineProperty;
|
|
6
|
-
var __defProps = Object.defineProperties;
|
|
7
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
8
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
9
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
11
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
12
|
-
var __spreadValues = (a, b) => {
|
|
13
|
-
for (var prop in b || (b = {}))
|
|
14
|
-
if (__hasOwnProp.call(b, prop))
|
|
15
|
-
__defNormalProp(a, prop, b[prop]);
|
|
16
|
-
if (__getOwnPropSymbols)
|
|
17
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
18
|
-
if (__propIsEnum.call(b, prop))
|
|
19
|
-
__defNormalProp(a, prop, b[prop]);
|
|
20
|
-
}
|
|
21
|
-
return a;
|
|
22
|
-
};
|
|
23
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
24
|
-
var __objRest = (source, exclude) => {
|
|
25
|
-
var target = {};
|
|
26
|
-
for (var prop in source)
|
|
27
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
28
|
-
target[prop] = source[prop];
|
|
29
|
-
if (source != null && __getOwnPropSymbols)
|
|
30
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
31
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
32
|
-
target[prop] = source[prop];
|
|
33
|
-
}
|
|
34
|
-
return target;
|
|
35
|
-
};
|
|
36
|
-
var initialState = {
|
|
37
|
-
systemTheme: "system",
|
|
38
|
-
resolvedTheme: "ekkolyth-light",
|
|
39
|
-
availableThemes: {
|
|
40
|
-
light: ["ekkolyth-light"],
|
|
41
|
-
dark: ["ekkolyth-dark"]
|
|
42
|
-
},
|
|
43
|
-
setSystemTheme: () => null,
|
|
44
|
-
setSpecificTheme: () => null
|
|
45
|
-
};
|
|
46
|
-
var NextThemeProviderContext = createContext(initialState);
|
|
47
|
-
var resolveSystemTheme = (systemTheme) => {
|
|
48
|
-
if (systemTheme === "system" || systemTheme === "normal") {
|
|
49
|
-
if (typeof window !== "undefined") {
|
|
50
|
-
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
|
51
|
-
}
|
|
52
|
-
return "light";
|
|
53
|
-
}
|
|
54
|
-
return systemTheme;
|
|
55
|
-
};
|
|
56
|
-
function NextThemeProvider(_a) {
|
|
57
|
-
var _b = _a, {
|
|
58
|
-
children,
|
|
59
|
-
defaultTheme = "system",
|
|
60
|
-
lightTheme = ["ekkolyth-light"],
|
|
61
|
-
darkTheme = ["ekkolyth-dark"],
|
|
62
|
-
storageKey = "ekko-ui"
|
|
63
|
-
} = _b, props = __objRest(_b, [
|
|
64
|
-
"children",
|
|
65
|
-
"defaultTheme",
|
|
66
|
-
"lightTheme",
|
|
67
|
-
"darkTheme",
|
|
68
|
-
"storageKey"
|
|
69
|
-
]);
|
|
70
|
-
const lightThemes = Array.isArray(lightTheme) ? lightTheme : [lightTheme];
|
|
71
|
-
const darkThemes = Array.isArray(darkTheme) ? darkTheme : [darkTheme];
|
|
72
|
-
const nextThemesDefaultTheme = defaultTheme === "normal" ? "light" : defaultTheme;
|
|
73
|
-
return /* @__PURE__ */ jsx(
|
|
74
|
-
ThemeProvider,
|
|
75
|
-
__spreadProps(__spreadValues({}, props), {
|
|
76
|
-
defaultTheme: nextThemesDefaultTheme,
|
|
77
|
-
attribute: "data-theme",
|
|
78
|
-
enableSystem: true,
|
|
79
|
-
children: /* @__PURE__ */ jsx(
|
|
80
|
-
ThemeMapper,
|
|
81
|
-
{
|
|
82
|
-
lightThemes,
|
|
83
|
-
darkThemes,
|
|
84
|
-
storageKey,
|
|
85
|
-
children
|
|
86
|
-
}
|
|
87
|
-
)
|
|
88
|
-
})
|
|
89
|
-
);
|
|
90
|
-
}
|
|
91
|
-
function ThemeMapper({
|
|
92
|
-
children,
|
|
93
|
-
lightThemes,
|
|
94
|
-
darkThemes,
|
|
95
|
-
storageKey
|
|
96
|
-
}) {
|
|
97
|
-
const { theme: nextTheme, setTheme: setNextTheme } = useTheme();
|
|
98
|
-
const [systemTheme, setSystemThemeState] = useState(() => {
|
|
99
|
-
if (typeof window !== "undefined") {
|
|
100
|
-
const stored = localStorage.getItem(
|
|
101
|
-
`${storageKey}.theme-mode`
|
|
102
|
-
);
|
|
103
|
-
return stored || "system";
|
|
104
|
-
}
|
|
105
|
-
return "system";
|
|
106
|
-
});
|
|
107
|
-
const [selectedLightTheme, setSelectedLightThemeState] = useState(() => {
|
|
108
|
-
if (typeof window !== "undefined") {
|
|
109
|
-
const stored = localStorage.getItem(
|
|
110
|
-
`${storageKey}.theme-light`
|
|
111
|
-
);
|
|
112
|
-
return stored && lightThemes.includes(stored) ? stored : lightThemes[0];
|
|
113
|
-
}
|
|
114
|
-
return lightThemes[0];
|
|
115
|
-
});
|
|
116
|
-
const [selectedDarkTheme, setSelectedDarkThemeState] = useState(
|
|
117
|
-
() => {
|
|
118
|
-
if (typeof window !== "undefined") {
|
|
119
|
-
const stored = localStorage.getItem(
|
|
120
|
-
`${storageKey}.theme-dark`
|
|
121
|
-
);
|
|
122
|
-
return stored && darkThemes.includes(stored) ? stored : darkThemes[0];
|
|
123
|
-
}
|
|
124
|
-
return darkThemes[0];
|
|
125
|
-
}
|
|
126
|
-
);
|
|
127
|
-
useEffect(() => {
|
|
128
|
-
if (typeof window !== "undefined") {
|
|
129
|
-
const stored = localStorage.getItem(
|
|
130
|
-
`${storageKey}.theme-mode`
|
|
131
|
-
);
|
|
132
|
-
if (stored) {
|
|
133
|
-
const nextThemesValue = stored === "normal" ? "light" : stored;
|
|
134
|
-
setNextTheme(nextThemesValue);
|
|
135
|
-
}
|
|
136
|
-
}
|
|
137
|
-
}, []);
|
|
138
|
-
useEffect(() => {
|
|
139
|
-
if (nextTheme) {
|
|
140
|
-
const currentSystemTheme = nextTheme === "system" ? "system" : nextTheme;
|
|
141
|
-
if (currentSystemTheme !== systemTheme) {
|
|
142
|
-
setSystemThemeState(currentSystemTheme);
|
|
143
|
-
if (typeof window !== "undefined") {
|
|
144
|
-
localStorage.setItem(`${storageKey}.theme-mode`, currentSystemTheme);
|
|
145
|
-
}
|
|
146
|
-
}
|
|
147
|
-
}
|
|
148
|
-
}, [nextTheme, storageKey, systemTheme]);
|
|
149
|
-
const resolvedTheme = useMemo(() => {
|
|
150
|
-
const resolvedSystem = resolveSystemTheme(systemTheme);
|
|
151
|
-
return resolvedSystem === "light" ? selectedLightTheme : selectedDarkTheme;
|
|
152
|
-
}, [systemTheme, selectedLightTheme, selectedDarkTheme]);
|
|
153
|
-
useEffect(() => {
|
|
154
|
-
const root = document.documentElement;
|
|
155
|
-
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
|
156
|
-
const updateTheme = () => {
|
|
157
|
-
const resolvedSystem = resolveSystemTheme(systemTheme);
|
|
158
|
-
const themeToApply = resolvedSystem === "light" ? selectedLightTheme : selectedDarkTheme;
|
|
159
|
-
root.setAttribute("data-theme", themeToApply);
|
|
160
|
-
};
|
|
161
|
-
updateTheme();
|
|
162
|
-
if (systemTheme === "system" || systemTheme === "normal") {
|
|
163
|
-
mediaQuery.addEventListener("change", updateTheme);
|
|
164
|
-
return () => mediaQuery.removeEventListener("change", updateTheme);
|
|
165
|
-
}
|
|
166
|
-
}, [systemTheme, selectedLightTheme, selectedDarkTheme]);
|
|
167
|
-
const value = useMemo(
|
|
168
|
-
() => ({
|
|
169
|
-
systemTheme,
|
|
170
|
-
resolvedTheme,
|
|
171
|
-
availableThemes: {
|
|
172
|
-
light: lightThemes,
|
|
173
|
-
dark: darkThemes
|
|
174
|
-
},
|
|
175
|
-
setSystemTheme: (newTheme) => {
|
|
176
|
-
if (typeof window !== "undefined") {
|
|
177
|
-
localStorage.setItem(`${storageKey}.theme-mode`, newTheme);
|
|
178
|
-
}
|
|
179
|
-
setSystemThemeState(newTheme);
|
|
180
|
-
const nextThemesValue = newTheme === "normal" ? "light" : newTheme;
|
|
181
|
-
setNextTheme(nextThemesValue);
|
|
182
|
-
},
|
|
183
|
-
setSpecificTheme: (mode, theme) => {
|
|
184
|
-
if (typeof window !== "undefined") {
|
|
185
|
-
const key = mode === "light" ? `${storageKey}.theme-light` : `${storageKey}.theme-dark`;
|
|
186
|
-
localStorage.setItem(key, theme);
|
|
187
|
-
}
|
|
188
|
-
if (mode === "light" && lightThemes.includes(theme)) {
|
|
189
|
-
setSelectedLightThemeState(theme);
|
|
190
|
-
} else if (mode === "dark" && darkThemes.includes(theme)) {
|
|
191
|
-
setSelectedDarkThemeState(theme);
|
|
192
|
-
}
|
|
193
|
-
setSystemThemeState(mode);
|
|
194
|
-
setNextTheme(mode);
|
|
195
|
-
}
|
|
196
|
-
}),
|
|
197
|
-
[
|
|
198
|
-
systemTheme,
|
|
199
|
-
resolvedTheme,
|
|
200
|
-
lightThemes,
|
|
201
|
-
darkThemes,
|
|
202
|
-
storageKey,
|
|
203
|
-
setNextTheme
|
|
204
|
-
]
|
|
205
|
-
);
|
|
206
|
-
return /* @__PURE__ */ jsx(NextThemeProviderContext.Provider, { value, children });
|
|
207
|
-
}
|
|
208
|
-
function useNextTheme() {
|
|
209
|
-
const context = use(NextThemeProviderContext);
|
|
210
|
-
if (context === void 0) {
|
|
211
|
-
throw new Error("useNextTheme must be used within a NextThemeProvider");
|
|
212
|
-
}
|
|
213
|
-
return context;
|
|
214
|
-
}
|
|
215
|
-
|
|
216
|
-
export { NextThemeProvider, useNextTheme };
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import { S as SystemTheme, L as LightThemes, D as DarkThemes, T as ThemeName } from '../types-fUfvw1Mz.js';
|
|
3
|
-
|
|
4
|
-
interface TanstackThemeProviderProps {
|
|
5
|
-
children: React.ReactNode;
|
|
6
|
-
defaultTheme?: SystemTheme;
|
|
7
|
-
lightTheme?: LightThemes | LightThemes[];
|
|
8
|
-
darkTheme?: DarkThemes | DarkThemes[];
|
|
9
|
-
storageKey?: string;
|
|
10
|
-
}
|
|
11
|
-
interface TanstackThemeProviderState {
|
|
12
|
-
systemTheme: SystemTheme;
|
|
13
|
-
resolvedTheme: ThemeName;
|
|
14
|
-
availableThemes: {
|
|
15
|
-
light: LightThemes[];
|
|
16
|
-
dark: DarkThemes[];
|
|
17
|
-
};
|
|
18
|
-
setSystemTheme: (theme: SystemTheme) => void;
|
|
19
|
-
setSpecificTheme: (mode: 'light' | 'dark', theme: ThemeName) => void;
|
|
20
|
-
}
|
|
21
|
-
declare function TanstackThemeProvider({ children, defaultTheme, lightTheme, darkTheme, storageKey, }: TanstackThemeProviderProps): react_jsx_runtime.JSX.Element;
|
|
22
|
-
declare function useTanstackTheme(): TanstackThemeProviderState;
|
|
23
|
-
|
|
24
|
-
export { DarkThemes, LightThemes, SystemTheme, TanstackThemeProvider, ThemeName, useTanstackTheme };
|