@nocoo/basalt 2.0.3 → 2.1.0

package/dist/providers/accent.d.ts

@@ -6,6 +6,7 @@ export type AccentSwatch = {
     light: string;
     dark: string;
 };
+/** Twelve candy accents inspired by the translucent iMac and iPhone 5C finishes. */
 export declare const ACCENT_SWATCHES: readonly AccentSwatch[];
 export declare const DEFAULT_ACCENT_ID = "primary";
 type AccentContextValue = {
@@ -16,8 +17,51 @@ type AccentContextValue = {
 export declare function accentSwatchById(id: string | null | undefined): AccentSwatch;
 export declare function accentForeground(hsl: string): "0 0% 10%" | "0 0% 100%";
 export declare function applyAccent(id: string, dark?: boolean): void;
-export declare function AccentProvider({ children }: {
+export interface AccentProviderProps {
+    /** Color overrides for the twelve preset IDs, using HSL channels (for example `204 88% 62%`).
+     * Invalid pairs and unknown IDs are ignored. Persistence belongs to the application.
+     * Chart colors remain fixed. */
+    paletteOverrides?: Readonly<Record<string, {
+        light: string;
+        dark: string;
+    }>>;
+    /**
+     * Application components wrapped by the accent context.
+     */
     children: ReactNode;
-}): import("react").JSX.Element;
+    /**
+     * Storage key used for accent persistence.
+     * @default "basalt-accent"
+     */
+    storageKey?: string;
+    /**
+     * Initial accent identifier used when no stored preference exists or during SSR.
+     * @default "primary"
+     */
+    defaultAccent?: string;
+    /**
+     * Whether to persist accent changes to localStorage.
+     * If false, localStorage is never read or written.
+     * @default true
+     */
+    persist?: boolean;
+    /**
+     * Controlled accent identifier. When provided, the provider acts as a controlled component
+     * and internal state is driven by this prop.
+     */
+    accent?: string;
+    /**
+     * Callback fired when accent change is requested.
+     * In controlled mode, callers are responsible for updating `accent`.
+     */
+    onAccentChange?: (accent: string) => void;
+    /**
+     * Whether to apply accent CSS variables and data-accent attribute to document.documentElement.
+     * Set to false when a host theme system manages CSS variables directly.
+     * @default true
+     */
+    applyToDocument?: boolean;
+}
+export declare function AccentProvider({ children, paletteOverrides, storageKey, defaultAccent, persist, accent: controlledAccent, onAccentChange, applyToDocument, }: AccentProviderProps): import("react").JSX.Element;
 export declare function useAccent(): AccentContextValue;
 export {};

package/dist/providers/accent.js

@@ -1,232 +1,418 @@
 "use client";
-import { createContext as e, useCallback as t, useContext as n, useEffect as r, useMemo as i, useSyncExternalStore as a } from "react";
-import { jsx as o } from "react/jsx-runtime";
+import { createContext as e, useCallback as t, useContext as n, useEffect as r, useMemo as i, useState as a, useSyncExternalStore as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
 //#region src/providers/accent.tsx
-var s = [
+var c = [
 	{
 		id: "primary",
-		label: "Primary",
-		token: "--basalt-chart-1",
-		light: "217 91% 60%",
-		dark: "217 91% 65%"
+		label: "Blue",
+		token: "--basalt-accent-1",
+		light: "204 88% 62%",
+		dark: "204 90% 70%"
 	},
 	{
 		id: "sky",
-		label: "Sky",
-		token: "--basalt-chart-2",
-		light: "200 90% 55%",
-		dark: "200 90% 60%"
+		label: "Ice",
+		token: "--basalt-accent-2",
+		light: "191 79% 70%",
+		dark: "191 79% 74%"
 	},
 	{
 		id: "teal",
-		label: "Teal",
-		token: "--basalt-chart-3",
-		light: "186 80% 45%",
-		dark: "186 80% 50%"
-	},
-	{
-		id: "jade",
-		label: "Jade",
-		token: "--basalt-chart-4",
-		light: "166 72% 44%",
-		dark: "166 72% 50%"
+		label: "Bondi",
+		token: "--basalt-accent-3",
+		light: "182 62% 47%",
+		dark: "182 62% 63%"
 	},
 	{
 		id: "green",
 		label: "Green",
-		token: "--basalt-chart-5",
-		light: "142 71% 45%",
-		dark: "142 71% 50%"
+		token: "--basalt-accent-4",
+		light: "113 58% 62%",
+		dark: "113 58% 70%"
 	},
 	{
 		id: "lime",
 		label: "Lime",
-		token: "--basalt-chart-6",
-		light: "84 65% 46%",
-		dark: "84 65% 52%"
+		token: "--basalt-accent-5",
+		light: "79 70% 64%",
+		dark: "79 70% 70%"
 	},
 	{
 		id: "amber",
-		label: "Amber",
-		token: "--basalt-chart-7",
-		light: "45 93% 47%",
-		dark: "45 93% 52%"
+		label: "Yellow",
+		token: "--basalt-accent-6",
+		light: "49 100% 69%",
+		dark: "49 100% 73%"
 	},
 	{
 		id: "orange",
-		label: "Orange",
-		token: "--basalt-chart-8",
-		light: "30 90% 55%",
-		dark: "30 90% 60%"
-	},
-	{
-		id: "vermilion",
-		label: "Vermilion",
-		token: "--basalt-chart-9",
-		light: "15 85% 52%",
-		dark: "15 85% 57%"
+		label: "Tangerine",
+		token: "--basalt-accent-7",
+		light: "27 95% 65%",
+		dark: "27 95% 72%"
 	},
 	{
 		id: "red",
-		label: "Red",
-		token: "--basalt-chart-10",
-		light: "0 72% 51%",
-		dark: "0 72% 56%"
+		label: "Strawberry",
+		token: "--basalt-accent-8",
+		light: "5 85% 66%",
+		dark: "5 85% 73%"
 	},
 	{
 		id: "rose",
-		label: "Rose",
-		token: "--basalt-chart-11",
-		light: "340 82% 55%",
-		dark: "340 82% 60%"
-	},
-	{
-		id: "magenta",
-		label: "Magenta",
-		token: "--basalt-chart-12",
-		light: "320 70% 55%",
-		dark: "320 70% 60%"
-	},
-	{
-		id: "orchid",
-		label: "Orchid",
-		token: "--basalt-chart-13",
-		light: "290 65% 55%",
-		dark: "290 65% 60%"
+		label: "Pink",
+		token: "--basalt-accent-9",
+		light: "345 88% 72%",
+		dark: "345 88% 77%"
 	},
 	{
 		id: "purple",
-		label: "Purple",
-		token: "--basalt-chart-14",
-		light: "270 70% 60%",
-		dark: "270 70% 65%"
+		label: "Grape",
+		token: "--basalt-accent-10",
+		light: "280 53% 71%",
+		dark: "280 53% 77%"
 	},
 	{
 		id: "indigo",
-		label: "Indigo",
-		token: "--basalt-chart-15",
-		light: "250 65% 58%",
-		dark: "250 65% 63%"
-	},
-	{
-		id: "cobalt",
-		label: "Cobalt",
-		token: "--basalt-chart-16",
-		light: "230 70% 56%",
-		dark: "230 70% 61%"
-	},
-	{
-		id: "steel",
-		label: "Steel",
-		token: "--basalt-chart-17",
-		light: "210 55% 50%",
-		dark: "210 55% 56%"
-	},
-	{
-		id: "cadet",
-		label: "Cadet",
-		token: "--basalt-chart-18",
-		light: "195 45% 55%",
-		dark: "195 45% 60%"
-	},
-	{
-		id: "seafoam",
-		label: "Seafoam",
-		token: "--basalt-chart-19",
-		light: "160 50% 50%",
-		dark: "160 50% 55%"
-	},
-	{
-		id: "olive",
-		label: "Olive",
-		token: "--basalt-chart-20",
-		light: "100 50% 48%",
-		dark: "100 50% 53%"
-	},
-	{
-		id: "gold",
-		label: "Gold",
-		token: "--basalt-chart-21",
-		light: "60 65% 45%",
-		dark: "60 65% 50%"
-	},
-	{
-		id: "tangerine",
-		label: "Tangerine",
-		token: "--basalt-chart-22",
-		light: "22 80% 50%",
-		dark: "22 80% 55%"
-	},
-	{
-		id: "crimson",
-		label: "Crimson",
-		token: "--basalt-chart-23",
-		light: "350 65% 50%",
-		dark: "350 65% 55%"
+		label: "Blueberry",
+		token: "--basalt-accent-11",
+		light: "237 66% 69%",
+		dark: "237 66% 77%"
 	},
 	{
 		id: "gray",
-		label: "Gray",
-		token: "--basalt-chart-24",
-		light: "0 0% 25%",
-		dark: "0 0% 65%"
+		label: "Pearl",
+		token: "--basalt-accent-12",
+		light: "210 20% 87%",
+		dark: "210 20% 88%"
 	}
-], c = "primary", l = "basalt-accent", u = e(null);
-function d(e) {
-	return s.find((t) => t.id === e) ?? s[0];
+], l = /* @__PURE__ */ new Map([
+	["jade", "teal"],
+	["vermilion", "red"],
+	["magenta", "rose"],
+	["orchid", "purple"],
+	["cobalt", "indigo"],
+	["steel", "primary"],
+	["cadet", "sky"],
+	["seafoam", "teal"],
+	["olive", "lime"],
+	["gold", "amber"],
+	["tangerine", "orange"],
+	["crimson", "red"]
+]), u = "primary", d = "basalt-accent", f = e(null);
+function p(e) {
+	let t = l.get(e ?? "") ?? e;
+	return c.find((e) => e.id === t) ?? c[0];
 }
-function f(e) {
+function m(e) {
 	return e <= .04045 ? e / 12.92 : ((e + .055) / 1.055) ** 2.4;
 }
-function p(e) {
-	let [t, n, r] = e.trim().split(/\s+/), i = Number(t), a = Number(n.replace("%", "")) / 100, o = Number(r.replace("%", "")) / 100, s = a * Math.min(o, 1 - o), c = (e) => {
-		let t = (e + i / 30) % 12;
-		return o - s * Math.max(Math.min(t - 3, 9 - t, 1), -1);
-	};
-	return .2126 * f(c(0)) + .7152 * f(c(8)) + .0722 * f(c(4)) > .35 ? "0 0% 10%" : "0 0% 100%";
+function h(e) {
+	let [t, n, r] = e.trim().split(/\s+/);
+	return [
+		Number(t),
+		Number(n.replace("%", "")) / 100,
+		Number(r.replace("%", "")) / 100
+	];
+}
+function g(e, t, n) {
+	let r = (t) => (t + e / 30) % 12, i = t * Math.min(n, 1 - n), a = (e) => n - i * Math.max(-1, Math.min(r(e) - 3, Math.min(9 - r(e), 1)));
+	return [
+		255 * a(0),
+		255 * a(8),
+		255 * a(4)
+	];
+}
+function _(e) {
+	return .2126 * m(e[0] / 255) + .7152 * m(e[1] / 255) + .0722 * m(e[2] / 255);
+}
+function v(e, t) {
+	let n = _(e), r = _(t);
+	return (Math.max(n, r) + .05) / (Math.min(n, r) + .05);
+}
+var y = [
+	26,
+	26,
+	26
+], b = [
+	255,
+	255,
+	255
+], x = [
+	[
+		238,
+		239,
+		242
+	],
+	[
+		246,
+		247,
+		248
+	],
+	[
+		252,
+		252,
+		253
+	],
+	[
+		255,
+		255,
+		255
+	]
+], S = [
+	[
+		23,
+		23,
+		23
+	],
+	[
+		27,
+		27,
+		27
+	],
+	[
+		31,
+		31,
+		31
+	],
+	[
+		36,
+		36,
+		36
+	]
+];
+function C(e, t) {
+	return [
+		e[0] * e[3] + t[0] * (1 - e[3]),
+		e[1] * e[3] + t[1] * (1 - e[3]),
+		e[2] * e[3] + t[2] * (1 - e[3])
+	];
+}
+function w(e, t) {
+	let [n, r, i] = h(t ? e.dark : e.light), a = t ? S : x;
+	if (t) for (let e = Math.max(Math.round(i * 100), 45); e <= 85; e++) {
+		let t = g(n, r, e / 100);
+		if (Math.min(...a.map((e) => v(t, e))) < 4.55 || v(t, y) < 4.55) continue;
+		let i = !0;
+		for (let e of a) if (v(C([...t, .9], e), y) < 4.55) {
+			i = !1;
+			break;
+		}
+		if (i) return `${n} ${Math.round(r * 100)}% ${e}%`;
+	}
+	else for (let e = Math.min(Math.round(i * 100), 60); e >= 15; e--) {
+		let t = g(n, r, e / 100);
+		if (Math.min(...a.map((e) => v(t, e))) < 4.55 || v(t, b) < 4.55) continue;
+		let i = !0;
+		for (let e of a) if (v(C([...t, .9], e), b) < 4.55) {
+			i = !1;
+			break;
+		}
+		if (i) return `${n} ${Math.round(r * 100)}% ${e}%`;
+	}
+	return t ? e.dark : e.light;
+}
+function T(e) {
+	let [t, n, r] = h(e), i = g(t, n, r), a = v(i, b);
+	return v(i, y) >= a ? "0 0% 10%" : "0 0% 100%";
 }
-function m(e, t = !1) {
-	let n = d(e), r = t ? n.dark : n.light, i = document.documentElement;
-	i.style.setProperty("--basalt-primary", r), i.style.setProperty("--basalt-primary-foreground", p(r)), i.style.setProperty("--basalt-ring", r), i.dataset.accent = n.id;
+function E(e, t = !1) {
+	typeof document > "u" || D(p(e), t);
 }
-function h() {
-	return d(window.localStorage.getItem(l)).id;
+function D(e, t) {
+	let n = w(e, t), r = document.documentElement;
+	r.style.setProperty("--basalt-primary", n), r.style.setProperty("--basalt-primary-foreground", T(n)), r.style.setProperty("--basalt-ring", n), r.dataset.accent = e.id;
 }
-function g(e) {
-	return window.addEventListener("storage", e), () => window.removeEventListener("storage", e);
+function O(e) {
+	return typeof e == "string" && (c.some((t) => t.id === e) || l.has(e));
 }
-function _() {
-	return document.documentElement.classList.contains("dark");
+function k(e) {
+	try {
+		return typeof window > "u" || !window.localStorage ? { status: "error" } : {
+			status: "success",
+			value: window.localStorage.getItem(e)
+		};
+	} catch {
+		return { status: "error" };
+	}
+}
+function A(e, t) {
+	try {
+		return typeof window > "u" || !window.localStorage ? !1 : (window.localStorage.setItem(e, t), !0);
+	} catch {
+		return !1;
+	}
+}
+function j(e) {
+	if (!e) return !0;
+	try {
+		if (typeof window < "u" && window.localStorage) return e === window.localStorage;
+	} catch {
+		return !1;
+	}
+	return !1;
+}
+var M = "basalt:accent-change";
+function N(e, t, n) {
+	let r = e, i = p(t).id, a = n, o = i, s = !1, c = !1;
+	if (a) {
+		let e = k(r);
+		e.status === "success" && O(e.value) && (o = p(e.value).id, s = !0);
+	}
+	let l = /* @__PURE__ */ new Set(), u = () => {
+		for (let e of l) e();
+	}, d = (e) => {
+		if (!a) return;
+		let t = e;
+		if (!t.detail || t.detail.key !== r) return;
+		let { value: n, writeSucceeded: i } = t.detail;
+		c = !i, o = n, s = !0, u();
+	}, f = (e) => {
+		if (!a) return;
+		let t = e;
+		if ("key" in t && t.key !== void 0) {
+			if (!j(t.storageArea) || t.key !== null && t.key !== r) return;
+			c = !1;
+			let e = t.newValue;
+			if (e == null || !O(e)) {
+				o = i, s = !1, u();
+				return;
+			}
+			o = p(e).id, s = !0, u();
+			return;
+		}
+		if (c) return;
+		let n = k(r);
+		n.status !== "error" && (O(n.value) ? (o = p(n.value).id, s = !0, u()) : (o = i, s = !1, u()));
+	}, m = null, h = () => {
+		typeof window > "u" || l.size === 1 && !m && (window.addEventListener("storage", f), window.addEventListener(M, d), m = () => {
+			window.removeEventListener("storage", f), window.removeEventListener(M, d), m = null;
+		});
+	}, g = () => {
+		l.size === 0 && m && m();
+	};
+	return {
+		getSnapshot: () => o,
+		subscribe: (e) => (l.add(e), h(), () => {
+			l.delete(e), g();
+		}),
+		setAccent: (e) => {
+			let t = p(e).id;
+			o = t, s = !0;
+			let n = !0;
+			if (a) {
+				let e = A(r, t);
+				if (c = !e, n = e, typeof window < "u") try {
+					window.dispatchEvent(new CustomEvent(M, { detail: {
+						key: r,
+						value: t,
+						writeSucceeded: n
+					} }));
+				} catch {}
+			}
+			u();
+		},
+		updateConfig: (e) => {
+			let t = r !== e.storageKey, n = a !== e.persist, l = p(e.defaultAccent).id, d = i !== l, f = a;
+			if (r = e.storageKey, i = l, a = e.persist, t) {
+				if (a) {
+					let e = k(r);
+					e.status === "success" && (c = !1, O(e.value) ? (o = p(e.value).id, s = !0) : (o = i, s = !1)), u();
+				}
+			} else if (n) {
+				if (!f && a) {
+					let e = k(r);
+					e.status === "success" && (c = !1, O(e.value) && (o = p(e.value).id, s = !0, u()));
+				}
+			} else if (d && !s) {
+				if (a) {
+					let e = k(r);
+					e.status === "success" && !O(e.value) && (o = i, u());
+				} else o = i, u();
+			}
+		}
+	};
 }
-function v({ children: e }) {
-	let n = a(g, h, () => c);
+function P(e) {
+	if (typeof e != "string" || !/^\d+(?:\.\d+)?\s+\d+(?:\.\d+)?%\s+\d+(?:\.\d+)?%$/.test(e)) return !1;
+	let [t, n, r] = h(e);
+	return t <= 360 && n <= 1 && r <= 1;
+}
+function F() {
+	return typeof document > "u" ? !1 : document.documentElement.classList.contains("dark");
+}
+function I({ children: e, paletteOverrides: n, storageKey: l = d, defaultAccent: m = u, persist: h = !0, accent: g, onAccentChange: _, applyToDocument: v = !0 }) {
+	let y = g !== void 0, b = i(() => c.map((e) => {
+		let t = n?.[e.id];
+		return t && P(t.light) && P(t.dark) ? {
+			...e,
+			light: t.light,
+			dark: t.dark
+		} : e;
+	}), [n]), [x] = a(() => N(l, m, h));
+	r(() => {
+		x.updateConfig({
+			storageKey: l,
+			defaultAccent: m,
+			persist: h
+		});
+	}, [
+		x,
+		l,
+		m,
+		h
+	]);
+	let S = t(() => p(m).id, [m]), C = o(x.subscribe, x.getSnapshot, S), w = y ? p(g).id : C;
 	r(() => {
-		m(n, _());
-		let e = new MutationObserver(() => m(n, _()));
-		return e.observe(document.documentElement, {
+		if (!v || typeof document > "u") return;
+		let e = () => {
+			let e = F();
+			for (let t of b) document.documentElement.style.setProperty(t.token, e ? t.dark : t.light);
+			D(b.find((e) => e.id === w) ?? b[0], e);
+		};
+		e();
+		let t = new MutationObserver(e);
+		return t.observe(document.documentElement, {
 			attributes: !0,
 			attributeFilter: ["class"]
-		}), () => e.disconnect();
-	}, [n]);
-	let f = t((e) => {
-		let t = d(e).id;
-		window.localStorage.setItem(l, t), m(t, _()), window.dispatchEvent(new Event("storage"));
-	}, []), p = i(() => ({
-		accent: n,
-		setAccent: f,
-		swatches: s
-	}), [n, f]);
-	return /* @__PURE__ */ o(u.Provider, {
-		value: p,
+		}), () => t.disconnect();
+	}, [
+		w,
+		v,
+		b
+	]);
+	let T = t((e) => {
+		let t = p(e).id;
+		if (y) {
+			_?.(t);
+			return;
+		}
+		x.setAccent(t), _?.(t);
+	}, [
+		y,
+		_,
+		x
+	]), E = i(() => ({
+		accent: w,
+		setAccent: T,
+		swatches: b
+	}), [
+		w,
+		T,
+		b
+	]);
+	return /* @__PURE__ */ s(f.Provider, {
+		value: E,
 		children: e
 	});
 }
-function y() {
-	let e = n(u);
+function L() {
+	let e = n(f);
 	if (!e) throw Error("useAccent must be used within AccentProvider");
 	return e;
 }
 //#endregion
-export { s as ACCENT_SWATCHES, v as AccentProvider, c as DEFAULT_ACCENT_ID, p as accentForeground, d as accentSwatchById, m as applyAccent, y as useAccent };
+export { c as ACCENT_SWATCHES, I as AccentProvider, u as DEFAULT_ACCENT_ID, T as accentForeground, p as accentSwatchById, E as applyAccent, L as useAccent };
 
 //# sourceMappingURL=accent.js.map