@ekkolyth/ui 0.1.17 → 0.1.19

package/dist/themes/ekko-os.css

@@ -1,8 +1,61 @@
-/* EkkoOS - Light (from EkkoOS apps/web globals.css :root) */
-html[data-theme="ekkoos-light"] {
-    --radius: 0.25rem;
-    --background: oklch(1 0 0);
+/* Canonical ekko-os tokens. apps/web imports this and no longer carries
+ * its own :root / .dark blocks, so edits land here, not there. */
+
+@theme inline {
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    --color-background-notes: var(--background-notes);
+    --color-foreground-notes: var(--foreground-notes);
+    --color-sidebar-ring: var(--sidebar-ring);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar: var(--sidebar);
+    --color-chart-5: var(--chart-5);
+    --color-chart-4: var(--chart-4);
+    --color-chart-3: var(--chart-3);
+    --color-chart-2: var(--chart-2);
+    --color-chart-1: var(--chart-1);
+    --color-ring: var(--ring);
+    --color-input: var(--input);
+    --color-border: var(--border);
+    --color-destructive: var(--destructive);
+    --color-success: var(--success);
+    --color-warning: var(--warning);
+    --color-info: var(--info);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-accent: var(--accent);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-muted: var(--muted);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-secondary: var(--secondary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-primary: var(--primary);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-popover: var(--popover);
+    --color-card-foreground: var(--card-foreground);
+    --color-card: var(--card);
+    --radius-sm: calc(var(--radius) - 4px);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root,
+html[data-theme='ekkoos-light'] {
+    /* EkkoOS is the one palette that overrides the package's default face.
+     * Scoped, not global: a @theme entry here would set it for every theme. */
+    --font-sans: 'SatoshiVariable', sans-serif;
+    --font-atkinson-mono:
+        'Atkinson Hyperlegible Mono Variable', ui-monospace, monospace;
+    --radius: 0.625rem;
+    --background: oklch(0.98 0.001 286.375);
     --foreground: oklch(0.141 0.005 285.823);
+    --background-notes: oklch(0.98 0.001 286.375);
+    --foreground-notes: oklch(0.141 0.005 285.823);
     --card: oklch(1 0 0);
     --card-foreground: oklch(0.141 0.005 285.823);
     --popover: oklch(1 0 0);
@@ -15,31 +68,37 @@ html[data-theme="ekkoos-light"] {
     --muted-foreground: oklch(0.552 0.016 285.938);
     --accent: oklch(0.967 0.001 286.375);
     --accent-foreground: oklch(0.21 0.006 285.885);
-    --destructive: oklch(0.577 0.245 27.325);
-    --border: oklch(0.92 0.004 286.32);
-    --input: oklch(0.92 0.004 286.32);
+    --destructive: oklch(0.645 0.246 16.439);
+    --success: oklch(0.696 0.17 162.48);
+    --warning: oklch(0.769 0.188 70.08);
+    --info: oklch(0.62 0.14 250);
+    --border: oklch(0.885 0.004 286.32);
+    --input: oklch(0.94 0.002 286.375);
     --ring: oklch(0.705 0.015 286.067);
     --chart-1: oklch(0.646 0.222 41.116);
     --chart-2: oklch(0.6 0.118 184.704);
     --chart-3: oklch(0.398 0.07 227.392);
     --chart-4: oklch(0.828 0.189 84.429);
     --chart-5: oklch(0.769 0.188 70.08);
-    --sidebar: oklch(0.985 0 0);
-    --sidebar-foreground: oklch(0.141 0.005 285.823);
-    --sidebar-primary: oklch(0.21 0.006 285.885);
-    --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.967 0.001 286.375);
-    --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
-    --sidebar-border: oklch(0.92 0.004 286.32);
-    --sidebar-ring: oklch(0.705 0.015 286.067);
+    --sidebar: oklch(0.1221 0 0);
+    --sidebar-foreground: oklch(1 0 0);
+    --sidebar-primary: oklch(0.8 0 0);
+    --sidebar-primary-foreground: oklch(0 0 0);
+    --sidebar-accent: oklch(0.2 0 0);
+    --sidebar-accent-foreground: oklch(0.9 0 0);
+    --sidebar-border: oklch(0.25 0 0);
+    --sidebar-ring: oklch(0.8 0 0);
 }
 
-/* EkkoOS - Dark (from EkkoOS apps/web globals.css .dark - monochrome) */
-html[data-theme="ekkoos-dark"] {
-    --radius: 0.25rem;
-    --background: oklch(0 0 0);
+.dark,
+html[data-theme='ekkoos-dark'] {
+    --font-sans: 'SatoshiVariable', sans-serif;
+    --background: oklch(0.1221 0 0);
     --foreground: oklch(1 0 0);
+    --background-notes: oklch(0.1719 0.0016 197);
+    --foreground-notes: oklch(1 0 0);
     --card: oklch(0.05 0 0 / 0.8);
+    --sidebar: oklch(0.05 0 0 / 0.8);
     --card-foreground: oklch(1 0 0);
     --popover: oklch(0.05 0 0);
     --popover-foreground: oklch(1 0 0);
@@ -49,23 +108,19 @@ html[data-theme="ekkoos-dark"] {
     --secondary-foreground: oklch(0.9 0 0);
     --muted: oklch(0.1 0 0);
     --muted-foreground: oklch(0.6 0 0);
-    --accent: oklch(0.2 0 0);
-    --accent-foreground: oklch(1 0 0);
-    --destructive: oklch(0.62 0.25 29);
-    --border: oklch(0.15 0 0);
-    --input: oklch(0.08 0 0);
+    --accent: oklch(0.206 0.006 286);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.712 0.194 13.428);
+    --success: oklch(0.765 0.177 163.223);
+    --warning: oklch(0.828 0.189 84.429);
+    --info: oklch(0.7 0.14 250);
+    --border: oklch(0.25 0 0);
+    --input: oklch(0.18 0 0);
     --ring: oklch(0.8 0 0);
-    --chart-1: oklch(0.9 0 0);
-    --chart-2: oklch(0.8 0 0);
-    --chart-3: oklch(0.7 0 0);
-    --chart-4: oklch(0.6 0 0);
-    --chart-5: oklch(0.5 0 0);
-    --sidebar: oklch(0 0 0);
-    --sidebar-foreground: oklch(1 0 0);
-    --sidebar-primary: oklch(0.8 0 0);
-    --sidebar-primary-foreground: oklch(0 0 0);
-    --sidebar-accent: oklch(0.2 0 0);
-    --sidebar-accent-foreground: oklch(0.9 0 0);
-    --sidebar-border: oklch(0.1 0 0);
-    --sidebar-ring: oklch(0.8 0 0);
+    --chart-1: oklch(0.646 0.222 41.116);
+    --chart-2: oklch(0.6 0.118 184.704);
+    --chart-3: oklch(0.398 0.07 227.392);
+    --chart-4: oklch(0.828 0.189 84.429);
+    --chart-5: oklch(0.769 0.188 70.08);
+    --radius: 0.75rem;
 }

package/dist/themes/ekkolyth.css

@@ -1,5 +1,5 @@
 /* Ekkolyth - Light */
-html[data-theme="ekkolyth-light"] {
+html[data-theme='ekkolyth-light'] {
     --background: oklch(1 0 0);
     --foreground: oklch(0.141 0.005 285.823);
     --card: oklch(1 0 0);
@@ -35,7 +35,7 @@ html[data-theme="ekkolyth-light"] {
 }
 
 /* Ekkolyth - Dark */
-html[data-theme="ekkolyth-dark"] {
+html[data-theme='ekkolyth-dark'] {
     --background: oklch(0.141 0.005 285.823);
     --foreground: oklch(0.985 0 0);
     --card: oklch(0.21 0.006 285.885);

package/dist/themes/index.css

@@ -1,66 +1,7 @@
-@import "tailwindcss";
-@import "tw-animate-css";
-
-/* Import all theme CSS files */
-@import "./themes/catpuccin/latte.css";
-@import "./themes/catpuccin/frappe.css";
-@import "./themes/catpuccin/macchiato.css";
-@import "./themes/catpuccin/mocha.css";
-@import "./themes/ekko-os.css";
-@import "./themes/tokyo-night.css";
-@import "./themes/ekkolyth.css";
-@import "./themes/ekko-playlist.css";
-
-@custom-variant dark (&:is(.dark *));
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-sans);
-  --font-mono: var(--font-geist-mono);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
-  --color-card: var(--card);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --radius-2xl: calc(var(--radius) + 8px);
-  --radius-3xl: calc(var(--radius) + 12px);
-  --radius-4xl: calc(var(--radius) + 16px);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
+@import './catpuccin/latte.css';
+@import './catpuccin/frappe.css';
+@import './catpuccin/macchiato.css';
+@import './catpuccin/mocha.css';
+@import './ekko-os.css';
+@import './tokyo-night.css';
+@import './ekkolyth.css';

package/dist/themes/provider.d.ts

@@ -0,0 +1,62 @@
+import { i as Select, r as Toaster, t as Toggle } from "../index-BxcqwZNT.js";
+import * as React from "react";
+import { PropsWithChildren, ReactNode } from "react";
+//#region src/components/themes/components/theme-select/index.d.ts
+interface ThemeSelectProps extends React.ComponentProps<typeof Select> {
+  className?: string;
+  size?: 'sm' | 'default';
+}
+declare function ThemeSelect({ size, className, ...props }: ThemeSelectProps): React.JSX.Element;
+//#endregion
+//#region src/components/themes/components/theme-toggle/index.d.ts
+interface ThemeToggleProps extends React.ComponentProps<typeof Toggle> {
+  className?: string;
+  size?: 'default' | 'sm' | 'lg';
+  variant?: 'default' | 'outline';
+}
+declare function ThemeToggle({ variant, size, className, ...props }: ThemeToggleProps): React.JSX.Element;
+//#endregion
+//#region src/lib/types.d.ts
+declare const APPEARANCE: readonly ["light", "dark", "system", "normal"];
+type Appearance = (typeof APPEARANCE)[number];
+declare const LIGHT_THEMES: readonly ["latte", "ekkoos-light", "ekkolyth-light"];
+declare const DARK_THEMES: readonly ["mocha", "frappe", "macchiato", "tokyo-night", "ekkoos-dark", "ekkolyth-dark"];
+type LightThemes = (typeof LIGHT_THEMES)[number];
+type DarkThemes = (typeof DARK_THEMES)[number];
+type ThemeName = LightThemes | DarkThemes;
+//#endregion
+//#region src/components/themes/context.d.ts
+interface ThemeContextState {
+  appearance: Appearance;
+  availableThemes: {
+    dark: DarkThemes[];
+    light: LightThemes[];
+  };
+  resolvedMode: 'light' | 'dark';
+  resolvedTheme: ThemeName;
+  setAppearance: (appearance: Appearance) => void;
+  setSpecificTheme: (mode: 'light' | 'dark', theme: LightThemes | DarkThemes) => void;
+}
+interface ThemeProviderProps {
+  children?: ReactNode;
+  darkTheme?: DarkThemes | DarkThemes[];
+  defaultAppearance?: Appearance;
+  lightTheme?: LightThemes | LightThemes[];
+  storageKey?: string;
+}
+declare function useTheme(): ThemeContextState;
+declare function useThemeContext(): ThemeContextState | null;
+//#endregion
+//#region src/components/themes/provider.d.ts
+declare function ThemeProvider({ children, darkTheme, defaultAppearance, lightTheme, storageKey }: PropsWithChildren<ThemeProviderProps>): import("react").JSX.Element;
+//#endregion
+//#region src/components/themes/theme-script.d.ts
+interface ThemeScriptProps {
+  darkTheme?: DarkThemes | DarkThemes[];
+  defaultAppearance?: Appearance;
+  lightTheme?: LightThemes | LightThemes[];
+  storageKey?: string;
+}
+declare function ThemeScript({ darkTheme, defaultAppearance, lightTheme, storageKey }: ThemeScriptProps): import("react").JSX.Element;
+//#endregion
+export { type Appearance, type DarkThemes, type LightThemes, type ThemeContextState, type ThemeName, ThemeProvider, type ThemeProviderProps, ThemeScript, type ThemeScriptProps, ThemeSelect, ThemeToggle, Toaster, useTheme, useThemeContext };

package/dist/themes/provider.js

@@ -0,0 +1,271 @@
+import { t as cn } from "../utils-C_uf36nf.js";
+import { _ as SelectTrigger, a as applyTheme, c as useThemeContext, d as SelectGroup, f as SelectItem, i as ThemeContext, l as Select, o as normalizeMode, p as SelectLabel, r as Toaster, s as useTheme, t as Toggle, u as SelectContent, v as SelectValue } from "../toggle-B2PFPImC.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Monitor, Moon, Sun } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+//#region src/lib/types.ts
+const APPEARANCE = [
+	"light",
+	"dark",
+	"system",
+	"normal"
+];
+const LIGHT_THEMES = [
+	"latte",
+	"ekkoos-light",
+	"ekkolyth-light"
+];
+const DARK_THEMES = [
+	"mocha",
+	"frappe",
+	"macchiato",
+	"tokyo-night",
+	"ekkoos-dark",
+	"ekkolyth-dark"
+];
+//#endregion
+//#region src/lib/theme.ts
+function isLightTheme(theme) {
+	return LIGHT_THEMES.includes(theme);
+}
+function isDarkTheme(theme) {
+	return DARK_THEMES.includes(theme);
+}
+//#endregion
+//#region src/components/themes/components/theme-select/index.tsx
+function ThemeSelect({ size = "default", className, ...props }) {
+	const { availableThemes, resolvedTheme, setSpecificTheme, setAppearance } = useTheme();
+	const handleThemeChange = (value) => {
+		const theme = value;
+		if (isLightTheme(theme)) {
+			setSpecificTheme("light", theme);
+			setAppearance("light");
+		} else if (isDarkTheme(theme)) {
+			setSpecificTheme("dark", theme);
+			setAppearance("dark");
+		}
+	};
+	const formatThemeName = (theme) => {
+		if (theme === "ekkoos-light") return "EkkoOS Light";
+		if (theme === "ekkoos-dark") return "EkkoOS Dark";
+		if (theme === "tokyo-night") return "Tokyo Night";
+		return theme.charAt(0).toUpperCase() + theme.slice(1);
+	};
+	return /* @__PURE__ */ jsxs(Select, {
+		onValueChange: handleThemeChange,
+		value: resolvedTheme,
+		...props,
+		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			className: cn(className),
+			size,
+			children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select theme" })
+		}), /* @__PURE__ */ jsxs(SelectContent, { children: [availableThemes.light.length > 0 && /* @__PURE__ */ jsxs(SelectGroup, { children: [/* @__PURE__ */ jsx(SelectLabel, { children: "Light Themes" }), availableThemes.light.map((theme) => /* @__PURE__ */ jsx(SelectItem, {
+			value: theme,
+			children: formatThemeName(theme)
+		}, theme))] }), availableThemes.dark.length > 0 && /* @__PURE__ */ jsxs(SelectGroup, { children: [/* @__PURE__ */ jsx(SelectLabel, { children: "Dark Themes" }), availableThemes.dark.map((theme) => /* @__PURE__ */ jsx(SelectItem, {
+			value: theme,
+			children: formatThemeName(theme)
+		}, theme))] })] })]
+	});
+}
+//#endregion
+//#region src/components/themes/components/theme-toggle/index.tsx
+function ThemeToggle({ variant = "default", size = "default", className, ...props }) {
+	const { setAppearance, appearance } = useTheme();
+	const cycleTheme = () => {
+		const cycle = [
+			"light",
+			"dark",
+			"system"
+		];
+		const nextIndex = (cycle.indexOf(appearance === "normal" ? "light" : appearance) + 1) % cycle.length;
+		setAppearance(cycle[nextIndex]);
+	};
+	const getIcon = () => {
+		switch (appearance === "normal" ? "light" : appearance) {
+			case "light": return /* @__PURE__ */ jsx(Sun, { className: "size-4" });
+			case "dark": return /* @__PURE__ */ jsx(Moon, { className: "size-4" });
+			case "system": return /* @__PURE__ */ jsx(Monitor, { className: "size-4" });
+			default: return /* @__PURE__ */ jsx(Monitor, { className: "size-4" });
+		}
+	};
+	return /* @__PURE__ */ jsx(Toggle, {
+		"aria-label": `Switch theme. Current: ${appearance}`,
+		className: cn(className),
+		onClick: cycleTheme,
+		size,
+		variant,
+		...props,
+		children: getIcon()
+	});
+}
+//#endregion
+//#region src/components/themes/storage.ts
+const isMemberOf = (values) => (value) => values.includes(value);
+const isAppearance = isMemberOf(APPEARANCE);
+function readItem(key) {
+	if (typeof window === "undefined") return null;
+	try {
+		return window.localStorage.getItem(key);
+	} catch {
+		return null;
+	}
+}
+function readStoredTheme(storageKey, lightThemes, darkThemes) {
+	const stored = {};
+	const isLightTheme = isMemberOf(lightThemes);
+	const isDarkTheme = isMemberOf(darkThemes);
+	const mode = readItem(`${storageKey}.theme-mode`);
+	if (mode !== null && isAppearance(mode)) stored.mode = mode;
+	const light = readItem(`${storageKey}.theme-light`);
+	if (light !== null && isLightTheme(light)) stored.light = light;
+	const dark = readItem(`${storageKey}.theme-dark`);
+	if (dark !== null && isDarkTheme(dark)) stored.dark = dark;
+	return stored;
+}
+function writeStoredTheme(storageKey, key, value) {
+	if (typeof window === "undefined") return;
+	try {
+		window.localStorage.setItem(`${storageKey}.${key}`, value);
+	} catch {
+		return;
+	}
+}
+//#endregion
+//#region src/components/themes/provider.tsx
+function systemPrefersDark() {
+	if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+	return window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+function ThemeProvider({ children, darkTheme = ["ekkolyth-dark"], defaultAppearance = "system", lightTheme = ["ekkolyth-light"], storageKey = "ekko-ui" }) {
+	const lightThemes = useMemo(() => Array.isArray(lightTheme) ? lightTheme : [lightTheme], [lightTheme]);
+	const darkThemes = useMemo(() => Array.isArray(darkTheme) ? darkTheme : [darkTheme], [darkTheme]);
+	const [appearance, setAppearanceState] = useState(defaultAppearance);
+	const [lightName, setLightName] = useState(lightThemes[0]);
+	const [darkName, setDarkName] = useState(darkThemes[0]);
+	const [systemIsDark, setSystemIsDark] = useState(false);
+	const [hasRestored, setHasRestored] = useState(false);
+	const normalizedAppearance = normalizeMode(appearance);
+	const resolvedMode = normalizedAppearance === "system" ? systemIsDark ? "dark" : "light" : normalizedAppearance;
+	const resolvedTheme = resolvedMode === "light" ? lightName : darkName;
+	const restoring = useRef(false);
+	useEffect(() => {
+		if (restoring.current) return;
+		restoring.current = true;
+		const stored = readStoredTheme(storageKey, lightThemes, darkThemes);
+		if (stored.mode !== void 0) setAppearanceState(stored.mode);
+		if (stored.light !== void 0) setLightName(stored.light);
+		if (stored.dark !== void 0) setDarkName(stored.dark);
+		setSystemIsDark(systemPrefersDark());
+		setHasRestored(true);
+	}, [
+		darkThemes,
+		lightThemes,
+		storageKey
+	]);
+	useEffect(() => {
+		if (!hasRestored) return;
+		applyTheme(resolvedTheme, resolvedMode);
+	}, [
+		hasRestored,
+		resolvedMode,
+		resolvedTheme
+	]);
+	useEffect(() => {
+		if (normalizeMode(appearance) !== "system") return;
+		const media = window.matchMedia("(prefers-color-scheme: dark)");
+		const sync = () => setSystemIsDark(media.matches);
+		sync();
+		media.addEventListener("change", sync);
+		return () => media.removeEventListener("change", sync);
+	}, [appearance]);
+	useEffect(() => {
+		const onStorage = (event) => {
+			if (event.key !== null && !event.key.startsWith(`${storageKey}.`)) return;
+			const stored = readStoredTheme(storageKey, lightThemes, darkThemes);
+			if (stored.mode !== void 0) setAppearanceState(stored.mode);
+			if (stored.light !== void 0) setLightName(stored.light);
+			if (stored.dark !== void 0) setDarkName(stored.dark);
+		};
+		window.addEventListener("storage", onStorage);
+		return () => window.removeEventListener("storage", onStorage);
+	}, [
+		darkThemes,
+		lightThemes,
+		storageKey
+	]);
+	const setAppearance = useCallback((next) => {
+		writeStoredTheme(storageKey, "theme-mode", next);
+		setAppearanceState(next);
+	}, [storageKey]);
+	const setSpecificTheme = useCallback((mode, theme) => {
+		if (mode === "light" && lightThemes.includes(theme)) {
+			writeStoredTheme(storageKey, "theme-light", theme);
+			setLightName(theme);
+		} else if (mode === "dark" && darkThemes.includes(theme)) {
+			writeStoredTheme(storageKey, "theme-dark", theme);
+			setDarkName(theme);
+		}
+		setAppearance(mode);
+	}, [
+		darkThemes,
+		lightThemes,
+		setAppearance,
+		storageKey
+	]);
+	const value = useMemo(() => ({
+		appearance,
+		availableThemes: {
+			dark: darkThemes,
+			light: lightThemes
+		},
+		resolvedMode,
+		resolvedTheme,
+		setAppearance,
+		setSpecificTheme
+	}), [
+		appearance,
+		darkThemes,
+		lightThemes,
+		resolvedMode,
+		resolvedTheme,
+		setAppearance,
+		setSpecificTheme
+	]);
+	return /* @__PURE__ */ jsx(ThemeContext, {
+		value,
+		children
+	});
+}
+//#endregion
+//#region src/components/themes/theme-script.tsx
+function applyStoredTheme(storageKey, lightThemes, darkThemes, defaultAppearance) {
+	try {
+		const read = (key) => window.localStorage.getItem(`${storageKey}.${key}`);
+		const stored = read("theme-mode");
+		const appearance = stored !== null && [
+			"light",
+			"dark",
+			"system",
+			"normal"
+		].includes(stored) ? stored : defaultAppearance;
+		const normalized = appearance === "normal" ? "light" : appearance;
+		const mode = normalized === "dark" ? "dark" : normalized === "light" ? "light" : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+		const themes = mode === "dark" ? darkThemes : lightThemes;
+		const storedTheme = read(mode === "dark" ? "theme-dark" : "theme-light");
+		const theme = storedTheme !== null && themes.includes(storedTheme) ? storedTheme : themes[0];
+		document.documentElement.setAttribute("data-theme", theme);
+		document.documentElement.classList.toggle("dark", mode === "dark");
+	} catch {}
+}
+function ThemeScript({ darkTheme = "ekkolyth-dark", defaultAppearance = "system", lightTheme = "ekkolyth-light", storageKey = "ekko-ui" }) {
+	const lightThemes = Array.isArray(lightTheme) ? lightTheme : [lightTheme];
+	const darkThemes = Array.isArray(darkTheme) ? darkTheme : [darkTheme];
+	const call = `(${applyStoredTheme.toString()})(${JSON.stringify(storageKey)},${JSON.stringify(lightThemes)},${JSON.stringify(darkThemes)},${JSON.stringify(defaultAppearance)})`;
+	return /* @__PURE__ */ jsx("script", {
+		dangerouslySetInnerHTML: { __html: call },
+		suppressHydrationWarning: true
+	});
+}
+//#endregion
+export { ThemeProvider, ThemeScript, ThemeSelect, ThemeToggle, Toaster, useTheme, useThemeContext };

package/dist/themes/tokyo-night.css

@@ -1,35 +1,35 @@
 /* Tokyo Night Theme - Dark Mode */
-html[data-theme="tokyo-night"] {
-  --radius: 0.625rem;
-  --background: hsl(233 16.00% 13.33%); /* #1a1b26 - dark blue-gray */
-  --foreground: hsl(228 23.53% 87.06%); /* #c0caf5 - light blue-gray */
-  --card: hsl(233 16.00% 13.33%); /* #1a1b26 */
-  --card-foreground: hsl(228 23.53% 87.06%); /* #c0caf5 */
-  --popover: hsl(233 16.00% 13.33%); /* #1a1b26 */
-  --popover-foreground: hsl(228 23.53% 87.06%); /* #c0caf5 */
-  --primary: hsl(217 91.67% 79.80%); /* #7aa2f7 - Tokyo Night blue */
-  --primary-foreground: hsl(233 16.00% 13.33%); /* #1a1b26 */
-  --secondary: hsl(233 18.18% 15.29%); /* #24283b - darker blue-gray */
-  --secondary-foreground: hsl(228 23.53% 87.06%); /* #c0caf5 */
-  --muted: hsl(233 18.18% 15.29%); /* #24283b */
-  --muted-foreground: hsl(230 13.33% 66.67%); /* #565f89 - muted text */
-  --accent: hsl(233 18.18% 15.29%); /* #24283b */
-  --accent-foreground: hsl(228 23.53% 87.06%); /* #c0caf5 */
-  --destructive: hsl(354 65.22% 78.24%); /* #f7768e - Tokyo Night red */
-  --border: hsl(233 18.18% 20.00%); /* #2f3549 - border color */
-  --input: hsl(233 18.18% 20.00%); /* #2f3549 */
-  --ring: hsl(217 91.67% 79.80%); /* #7aa2f7 - primary blue */
-  --chart-1: hsl(354 65.22% 78.24%); /* #f7768e - red */
-  --chart-2: hsl(158 64.00% 71.37%); /* #9ece6a - green */
-  --chart-3: hsl(217 91.67% 79.80%); /* #7aa2f7 - blue */
-  --chart-4: hsl(38 92.00% 72.16%); /* #e0af68 - yellow */
-  --chart-5: hsl(266 85.00% 78.24%); /* #bb9af7 - purple */
-  --sidebar: hsl(233 18.18% 12.94%); /* #16161e - darker background */
-  --sidebar-foreground: hsl(228 23.53% 87.06%); /* #c0caf5 */
-  --sidebar-primary: hsl(217 91.67% 79.80%); /* #7aa2f7 */
-  --sidebar-primary-foreground: hsl(233 16.00% 13.33%); /* #1a1b26 */
-  --sidebar-accent: hsl(233 18.18% 15.29%); /* #24283b */
-  --sidebar-accent-foreground: hsl(228 23.53% 87.06%); /* #c0caf5 */
-  --sidebar-border: hsl(233 18.18% 20.00%); /* #2f3549 */
-  --sidebar-ring: hsl(233 18.18% 20.00%); /* #2f3549 */
+html[data-theme='tokyo-night'] {
+    --radius: 0.625rem;
+    --background: hsl(233 16.00% 13.33%); /* #1a1b26 - dark blue-gray */
+    --foreground: hsl(228 23.53% 87.06%); /* #c0caf5 - light blue-gray */
+    --card: hsl(233 16.00% 13.33%); /* #1a1b26 */
+    --card-foreground: hsl(228 23.53% 87.06%); /* #c0caf5 */
+    --popover: hsl(233 16.00% 13.33%); /* #1a1b26 */
+    --popover-foreground: hsl(228 23.53% 87.06%); /* #c0caf5 */
+    --primary: hsl(217 91.67% 79.80%); /* #7aa2f7 - Tokyo Night blue */
+    --primary-foreground: hsl(233 16.00% 13.33%); /* #1a1b26 */
+    --secondary: hsl(233 18.18% 15.29%); /* #24283b - darker blue-gray */
+    --secondary-foreground: hsl(228 23.53% 87.06%); /* #c0caf5 */
+    --muted: hsl(233 18.18% 15.29%); /* #24283b */
+    --muted-foreground: hsl(230 13.33% 66.67%); /* #565f89 - muted text */
+    --accent: hsl(233 18.18% 15.29%); /* #24283b */
+    --accent-foreground: hsl(228 23.53% 87.06%); /* #c0caf5 */
+    --destructive: hsl(354 65.22% 78.24%); /* #f7768e - Tokyo Night red */
+    --border: hsl(233 18.18% 20.00%); /* #2f3549 - border color */
+    --input: hsl(233 18.18% 20.00%); /* #2f3549 */
+    --ring: hsl(217 91.67% 79.80%); /* #7aa2f7 - primary blue */
+    --chart-1: hsl(354 65.22% 78.24%); /* #f7768e - red */
+    --chart-2: hsl(158 64.00% 71.37%); /* #9ece6a - green */
+    --chart-3: hsl(217 91.67% 79.80%); /* #7aa2f7 - blue */
+    --chart-4: hsl(38 92.00% 72.16%); /* #e0af68 - yellow */
+    --chart-5: hsl(266 85.00% 78.24%); /* #bb9af7 - purple */
+    --sidebar: hsl(233 18.18% 12.94%); /* #16161e - darker background */
+    --sidebar-foreground: hsl(228 23.53% 87.06%); /* #c0caf5 */
+    --sidebar-primary: hsl(217 91.67% 79.80%); /* #7aa2f7 */
+    --sidebar-primary-foreground: hsl(233 16.00% 13.33%); /* #1a1b26 */
+    --sidebar-accent: hsl(233 18.18% 15.29%); /* #24283b */
+    --sidebar-accent-foreground: hsl(228 23.53% 87.06%); /* #c0caf5 */
+    --sidebar-border: hsl(233 18.18% 20.00%); /* #2f3549 */
+    --sidebar-ring: hsl(233 18.18% 20.00%); /* #2f3549 */
 }