@solostylist/ui-kit 1.0.230 → 2.0.1

package/dist/colors-CNjL5fhq.js

@@ -0,0 +1,180 @@
+//#region ../core/dist/palettes/types.js
+var e = (e) => ({
+	50: e[0],
+	100: e[1],
+	200: e[2],
+	300: e[3],
+	400: e[4],
+	500: e[5],
+	600: e[6],
+	700: e[7],
+	800: e[8],
+	900: e[9]
+}), t = {
+	label: "Quantum",
+	swatch: "hsl(246, 95%, 68%)",
+	light: {
+		brand: e([
+			"hsl(248, 92%, 98%)",
+			"hsl(248, 88%, 95%)",
+			"hsl(248, 84%, 89%)",
+			"hsl(248, 82%, 79%)",
+			"hsl(248, 84%, 70%)",
+			"hsl(248, 88%, 62%)",
+			"hsl(249, 84%, 54%)",
+			"hsl(250, 80%, 45%)",
+			"hsl(252, 76%, 34%)",
+			"hsl(254, 72%, 25%)"
+		]),
+		neutral: e([
+			"hsl(232, 36%, 99%)",
+			"hsl(232, 30%, 97.5%)",
+			"hsl(231, 22%, 95%)",
+			"hsl(230, 17%, 89%)",
+			"hsl(232, 13%, 78%)",
+			"hsl(234, 12%, 63%)",
+			"hsl(236, 13%, 40%)",
+			"hsl(238, 18%, 28%)",
+			"hsl(240, 26%, 18%)",
+			"hsl(242, 34%, 10%)"
+		])
+	},
+	dark: {
+		brand: e([
+			"hsl(246, 100%, 96%)",
+			"hsl(246, 98%, 92%)",
+			"hsl(246, 96%, 86%)",
+			"hsl(246, 95%, 79%)",
+			"hsl(246, 95%, 74%)",
+			"hsl(246, 95%, 70%)",
+			"hsl(247, 88%, 62%)",
+			"hsl(248, 82%, 52%)",
+			"hsl(250, 78%, 38%)",
+			"hsl(252, 74%, 25%)"
+		]),
+		neutral: e([
+			"hsl(228, 22%, 96%)",
+			"hsl(228, 18%, 93%)",
+			"hsl(230, 15%, 86%)",
+			"hsl(232, 13%, 78%)",
+			"hsl(234, 12%, 60%)",
+			"hsl(236, 12%, 42%)",
+			"hsl(238, 16%, 28%)",
+			"hsl(240, 22%, 18%)",
+			"hsl(242, 34%, 8%)",
+			"hsl(244, 44%, 4%)"
+		])
+	}
+}, n = t.dark.brand, r = t.light.brand, i = t.dark.neutral, a = t.light.neutral, o = {
+	50: "hsl(120, 80%, 98%)",
+	100: "hsl(120, 75%, 94%)",
+	200: "hsl(120, 75%, 87%)",
+	300: "hsl(120, 61%, 77%)",
+	400: "hsl(120, 44%, 53%)",
+	500: "hsl(120, 59%, 30%)",
+	600: "hsl(120, 70%, 25%)",
+	700: "hsl(120, 75%, 16%)",
+	800: "hsl(120, 84%, 10%)",
+	900: "hsl(120, 87%, 6%)"
+}, s = {
+	50: "hsl(151, 60%, 98%)",
+	100: "hsl(151, 55%, 95%)",
+	200: "hsl(151, 50%, 88%)",
+	300: "hsl(151, 45%, 78%)",
+	400: "hsl(151, 65%, 62%)",
+	500: "hsl(151, 75%, 47%)",
+	600: "hsl(151, 85%, 38%)",
+	700: "hsl(151, 90%, 30%)",
+	800: "hsl(151, 95%, 23%)",
+	900: "hsl(151, 100%, 17%)"
+}, c = {
+	50: "hsl(45, 100%, 97%)",
+	100: "hsl(45, 92%, 90%)",
+	200: "hsl(45, 94%, 80%)",
+	300: "hsl(45, 90%, 65%)",
+	400: "hsl(45, 90%, 40%)",
+	500: "hsl(45, 90%, 35%)",
+	600: "hsl(45, 91%, 25%)",
+	700: "hsl(45, 94%, 20%)",
+	800: "hsl(45, 95%, 16%)",
+	900: "hsl(45, 93%, 12%)"
+}, l = {
+	50: "hsl(48, 100%, 98%)",
+	100: "hsl(48, 95%, 94%)",
+	200: "hsl(48, 90%, 86%)",
+	300: "hsl(48, 85%, 72%)",
+	400: "hsl(48, 88%, 58%)",
+	500: "hsl(48, 92%, 50%)",
+	600: "hsl(48, 95%, 42%)",
+	700: "hsl(48, 100%, 35%)",
+	800: "hsl(48, 100%, 28%)",
+	900: "hsl(48, 100%, 22%)"
+}, u = {
+	50: "hsl(210, 100%, 98%)",
+	100: "hsl(210, 95%, 94%)",
+	200: "hsl(210, 90%, 87%)",
+	300: "hsl(210, 85%, 77%)",
+	400: "hsl(210, 80%, 60%)",
+	500: "hsl(210, 85%, 45%)",
+	600: "hsl(210, 90%, 35%)",
+	700: "hsl(210, 95%, 25%)",
+	800: "hsl(210, 100%, 15%)",
+	900: "hsl(210, 100%, 10%)"
+}, d = {
+	50: "hsl(204, 100%, 98%)",
+	100: "hsl(204, 95%, 94%)",
+	200: "hsl(204, 90%, 86%)",
+	300: "hsl(204, 85%, 74%)",
+	400: "hsl(204, 88%, 60%)",
+	500: "hsl(204, 92%, 48%)",
+	600: "hsl(204, 95%, 40%)",
+	700: "hsl(204, 100%, 32%)",
+	800: "hsl(204, 100%, 25%)",
+	900: "hsl(204, 100%, 19%)"
+}, f = {
+	50: "hsl(0, 100%, 97%)",
+	100: "hsl(0, 92%, 90%)",
+	200: "hsl(0, 94%, 80%)",
+	300: "hsl(0, 90%, 65%)",
+	400: "hsl(0, 90%, 40%)",
+	500: "hsl(0, 90%, 30%)",
+	600: "hsl(0, 91%, 25%)",
+	700: "hsl(0, 94%, 18%)",
+	800: "hsl(0, 95%, 12%)",
+	900: "hsl(0, 93%, 6%)"
+}, p = {
+	50: "hsl(356, 100%, 98%)",
+	100: "hsl(356, 95%, 94%)",
+	200: "hsl(356, 90%, 87%)",
+	300: "hsl(356, 85%, 75%)",
+	400: "hsl(356, 88%, 61%)",
+	500: "hsl(356, 92%, 50%)",
+	600: "hsl(356, 95%, 42%)",
+	700: "hsl(356, 100%, 34%)",
+	800: "hsl(356, 100%, 27%)",
+	900: "hsl(356, 100%, 21%)"
+}, m = {
+	50: "hsl(270, 100%, 98%)",
+	100: "hsl(270, 95%, 94%)",
+	200: "hsl(270, 90%, 87%)",
+	300: "hsl(270, 80%, 77%)",
+	400: "hsl(270, 70%, 60%)",
+	500: "hsl(270, 65%, 45%)",
+	600: "hsl(270, 70%, 35%)",
+	700: "hsl(270, 75%, 25%)",
+	800: "hsl(270, 80%, 15%)",
+	900: "hsl(270, 85%, 10%)"
+}, h = {
+	50: "hsl(280, 60%, 98%)",
+	100: "hsl(280, 55%, 95%)",
+	200: "hsl(280, 50%, 88%)",
+	300: "hsl(280, 45%, 78%)",
+	400: "hsl(280, 65%, 65%)",
+	500: "hsl(280, 75%, 52%)",
+	600: "hsl(280, 85%, 42%)",
+	700: "hsl(280, 90%, 34%)",
+	800: "hsl(280, 95%, 27%)",
+	900: "hsl(280, 100%, 21%)"
+};
+//#endregion
+export { d as a, s as c, p as d, c as f, e as g, t as h, o as i, l, f as m, n, r as o, m as p, i as r, a as s, u as t, h as u };

package/dist/gradients-DSnBONEQ.js

@@ -0,0 +1,199 @@
+import { n as e, o as t, r as n, s as r } from "./colors-CNjL5fhq.js";
+//#region ../core/dist/alpha.js
+var i = {
+	0: "rgba(0,0,0,0)",
+	10: "rgba(0,0,0,0.1)",
+	20: "rgba(0,0,0,0.2)",
+	30: "rgba(0,0,0,0.3)",
+	40: "rgba(0,0,0,0.4)",
+	50: "rgba(0,0,0,0.5)",
+	60: "rgba(0,0,0,0.6)",
+	70: "rgba(0,0,0,0.7)",
+	80: "rgba(0,0,0,0.8)",
+	90: "rgba(0,0,0,0.9)",
+	100: "rgba(0,0,0,1)"
+}, a = {
+	0: "rgba(255,255,255,0)",
+	10: "rgba(255,255,255,0.1)",
+	20: "rgba(255,255,255,0.2)",
+	30: "rgba(255,255,255,0.3)",
+	40: "rgba(255,255,255,0.4)",
+	50: "rgba(255,255,255,0.5)",
+	60: "rgba(255,255,255,0.6)",
+	70: "rgba(255,255,255,0.7)",
+	80: "rgba(255,255,255,0.8)",
+	90: "rgba(255,255,255,0.9)",
+	100: "rgba(255,255,255,1)"
+}, o = ({ mode: e, brand: t, neutral: n }) => {
+	let r = e === "dark", i = `linear-gradient(140deg in oklch, ${t[300]} 0%, ${t[600]} 100%)`, a = `linear-gradient(140deg in oklch, ${t[200]} 0%, ${t[400]} 100%)`, o = `radial-gradient(circle, color-mix(in srgb, ${t[400]} ${r ? 34 : 28}%, transparent) 0%, color-mix(in srgb, ${t[700]} 14%, transparent) 42%, transparent 72%)`;
+	return {
+		brand: {
+			primary: i,
+			subtle: a
+		},
+		surface: { hero: r ? `linear-gradient(135deg, ${n[900]} 0%, ${t[900]} 55%, ${n[800]} 100%)` : `linear-gradient(135deg, ${n[50]} 0%, ${t[100]} 52%, ${n[100]} 100%)` },
+		overlay: {
+			media: "linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.38) 48%, transparent 100%)",
+			scrim: "linear-gradient(90deg, rgba(17, 24, 39, 0.82) 0%, rgba(17, 24, 39, 0.56) 100%)",
+			edgeFade: `linear-gradient(to right, transparent 0%, color-mix(in srgb, ${t[500]} ${r ? 52 : 34}%, transparent) 50%, transparent 100%)`
+		},
+		effect: { glow: o }
+	};
+}, s = o({
+	mode: "dark",
+	brand: e,
+	neutral: n
+}), c = o({
+	mode: "light",
+	brand: t,
+	neutral: r
+}), l = {
+	shadowLight: a[30],
+	shadowMedium: a[60],
+	ring: a[80],
+	background: a[80],
+	radialGradient: `radial-gradient(circle, ${a[30]} 0%, ${a[10]} 50%, transparent 100%)`
+}, u = {
+	shadowLight: i[30],
+	shadowMedium: i[60],
+	ring: i[80],
+	background: i[80],
+	radialGradient: `radial-gradient(circle, ${i[30]} 0%, ${i[10]} 50%, transparent 100%)`
+}, d = {
+	start: {
+		x: 0,
+		y: .5
+	},
+	end: {
+		x: 1,
+		y: .5
+	}
+}, f = {
+	start: {
+		x: 0,
+		y: 0
+	},
+	end: {
+		x: 1,
+		y: 1
+	}
+}, p = ({ mode: e, brand: t, neutral: n }) => {
+	let r = e === "dark";
+	return {
+		brand: {
+			primary: {
+				colors: [
+					t[300],
+					t[400],
+					t[600]
+				],
+				locations: [
+					0,
+					.5,
+					1
+				],
+				...f
+			},
+			subtle: {
+				colors: [
+					t[200],
+					t[300],
+					t[400]
+				],
+				locations: [
+					0,
+					.5,
+					1
+				],
+				...f
+			}
+		},
+		surface: { hero: {
+			colors: r ? [
+				n[900],
+				t[900],
+				n[800]
+			] : [
+				n[50],
+				t[100],
+				n[100]
+			],
+			locations: [
+				0,
+				.55,
+				1
+			],
+			start: {
+				x: 0,
+				y: 0
+			},
+			end: {
+				x: 1,
+				y: 1
+			}
+		} },
+		overlay: {
+			media: {
+				colors: [
+					"rgba(0, 0, 0, 0.82)",
+					"rgba(0, 0, 0, 0.38)",
+					"transparent"
+				],
+				locations: [
+					0,
+					.48,
+					1
+				],
+				start: {
+					x: .5,
+					y: 1
+				},
+				end: {
+					x: .5,
+					y: 0
+				}
+			},
+			scrim: {
+				colors: ["rgba(17, 24, 39, 0.82)", "rgba(17, 24, 39, 0.56)"],
+				...d
+			},
+			edgeFade: {
+				colors: [
+					"transparent",
+					t[500],
+					"transparent"
+				],
+				locations: [
+					0,
+					.5,
+					1
+				],
+				...d
+			}
+		},
+		effect: { glow: {
+			colors: [
+				"transparent",
+				t[400],
+				"transparent"
+			],
+			locations: [
+				0,
+				.5,
+				1
+			],
+			...d
+		} }
+	};
+};
+p({
+	mode: "dark",
+	brand: e,
+	neutral: n
+}), p({
+	mode: "light",
+	brand: t,
+	neutral: r
+});
+//#endregion
+export { u as a, c as i, s as n, i as o, l as r, a as s, o as t };

package/dist/hooks/index.d.ts

@@ -2,4 +2,3 @@ export * from './use-dialog';
 export * from './use-popover';
 export * from './use-countdown';
 export * from './use-scroll-animation';
-export * from './use-is-passed-position';

package/dist/hooks/index.js

@@ -1,5 +1,4 @@
-import { useDialog as e } from "./use-dialog.js";
-import { useIsPassedPosition as t } from "./use-is-passed-position.js";
-import { useScrollAnimation as n } from "./use-scroll-animation.js";
-import { usePopover as r } from "./use-popover.js";
-export { e as useDialog, t as useIsPassedPosition, r as usePopover, n as useScrollAnimation };
+import { useScrollAnimation as e } from "./use-scroll-animation.js";
+import { usePopover as t } from "./use-popover.js";
+import { useDialog as n } from "./use-dialog.js";
+export { n as useDialog, t as usePopover, e as useScrollAnimation };

package/dist/hooks/use-countdown.js

@@ -6,81 +6,103 @@ var a = {
 	minutes: 0,
 	seconds: 0
 }, o = ({ expireDate: o, onComplete: s, onTick: c, onStart: l, paused: u = !1, interval: d = 1e3, autoStart: f = !0 }) => {
-	let [p, m] = i(a), [h, g] = i(!1), [_, v] = i(f && !u), [y, b] = i(u), [x, S] = i(null), C = r(null), w = r(s), T = r(c), E = r(l), D = r(!1), O = r(!1);
+	let [p, m] = i(a), [h, g] = i(!1), [_, v] = i(!1), [y, b] = i(u), [x, S] = i(null), [C, w] = i(() => Date.now()), T = r(null), E = r(s), D = r(c), O = r(l), k = r(!1), A = r(!1), j = r(o), M = r(u), N = r(!1);
 	t(() => {
-		w.current = s;
+		E.current = s;
 	}, [s]), t(() => {
-		T.current = c;
+		D.current = c;
 	}, [c]), t(() => {
-		E.current = l;
+		O.current = l;
 	}, [l]);
-	let k = e(() => {
-		let e = o - (/* @__PURE__ */ new Date()).getTime();
-		return e < 0 ? {
+	let P = e((e = Date.now()) => {
+		let t = o - e;
+		return t <= 0 ? {
 			timeLeft: a,
 			expired: !0
 		} : {
 			timeLeft: {
-				days: Math.floor(e / (1e3 * 60 * 60 * 24)),
-				hours: Math.floor(e % (1e3 * 60 * 60 * 24) / (1e3 * 60 * 60)),
-				minutes: Math.floor(e % (1e3 * 60 * 60) / (1e3 * 60)),
-				seconds: Math.floor(e % (1e3 * 60) / 1e3)
+				days: Math.floor(t / (1e3 * 60 * 60 * 24)),
+				hours: Math.floor(t % (1e3 * 60 * 60 * 24) / (1e3 * 60 * 60)),
+				minutes: Math.floor(t % (1e3 * 60 * 60) / (1e3 * 60)),
+				seconds: Math.floor(t % (1e3 * 60) / 1e3)
 			},
 			expired: !1
 		};
-	}, [o]), A = e(() => {
-		let { timeLeft: e, expired: t } = k();
-		m(e), g(t), T.current && T.current(e), t && !O.current && (O.current = !0, v(!1), w.current && w.current());
-	}, [k]), j = e(() => {
-		!D.current && E.current && (E.current(), D.current = !0), v(!0), b(!1), x || S((/* @__PURE__ */ new Date()).getTime());
-	}, [x]), M = e(() => {
+	}, [o]), F = e(() => {
+		k.current || (k.current = !0, O.current?.());
+	}, []), I = e((e = Date.now()) => {
+		let { timeLeft: t, expired: n } = P(e);
+		return w(e), m(t), g(n), D.current?.(t), n && !A.current && (A.current = !0, v(!1), E.current?.()), n;
+	}, [P]), L = e(() => {
+		if (u) return;
+		let e = Date.now();
+		I(e) || (S((t) => t ?? e), v(!0), b(!1), F());
+	}, [
+		F,
+		u,
+		I
+	]), R = e(() => {
 		v(!1), b(!0);
-	}, []), N = e(() => {
-		v(!0), b(!1);
-	}, []), P = e(() => {
-		v(f && !u), b(u), g(!1), S(null), D.current = !1, O.current = !1;
-		let { timeLeft: e } = k();
-		m(e);
+	}, []), z = e(() => {
+		L();
+	}, [L]), B = e(() => {
+		k.current = !1, A.current = !1;
+		let e = Date.now(), t = I(e);
+		S(f && !u && !t ? e : null), v(f && !u && !t), b(u), f && !u && !t && F();
 	}, [
 		f,
+		F,
 		u,
-		k
+		I
 	]);
 	t(() => {
-		u && M();
-	}, [u, M]), t(() => {
-		!u && y && N();
+		let e = j.current !== o;
+		if (N.current && !e) return;
+		N.current = !0, j.current = o, k.current = !1, A.current = !1;
+		let t = Date.now(), n = I(t), r = f && !u && !n;
+		S(r ? t : null), v(r), b(u), r && F();
+	}, [
+		f,
+		o,
+		F,
+		u,
+		I
+	]), t(() => {
+		M.current !== u && (M.current = u, u ? R() : (k.current || f) && L());
 	}, [
+		f,
+		R,
 		u,
-		y,
-		N
-	]), t(() => (_ && !h ? C.current = setInterval(A, d) : C.current &&= (clearInterval(C.current), null), () => {
-		C.current &&= (clearInterval(C.current), null);
+		L
+	]), t(() => (_ && !h ? T.current = setInterval(() => I(), d) : T.current &&= (clearInterval(T.current), null), () => {
+		T.current &&= (clearInterval(T.current), null);
 	}), [
 		_,
 		h,
 		d,
-		A
-	]), t(() => {
-		A();
-	}, [A]);
-	let F = n(() => x ? Math.max(0, o - x) : 0, [o, x]), I = n(() => {
-		if (!x) return 0;
-		let e = (/* @__PURE__ */ new Date()).getTime();
-		return Math.max(0, e - x);
-	}, [x]);
+		I
+	]);
+	let V = n(() => x ? Math.max(0, o - x) : 0, [o, x]), H = n(() => x ? Math.max(0, Math.min(C, o) - x) : 0, [
+		C,
+		o,
+		x
+	]);
 	return {
 		timeLeft: p,
 		isExpired: h,
 		isRunning: _,
 		isPaused: y,
-		start: j,
-		pause: M,
-		resume: N,
-		reset: P,
-		totalDuration: F,
-		elapsedTime: I,
-		progress: n(() => F === 0 ? 0 : Math.min(100, Math.max(0, I / F * 100)), [I, F])
+		start: L,
+		pause: R,
+		resume: z,
+		reset: B,
+		totalDuration: V,
+		elapsedTime: H,
+		progress: n(() => V === 0 ? h ? 100 : 0 : Math.min(100, Math.max(0, H / V * 100)), [
+			H,
+			h,
+			V
+		])
 	};
 };
 //#endregion

package/dist/main.d.ts

@@ -1,5 +1,10 @@
 /**
- * Root entry intentionally stays empty.
+ * Root entry is component-free by design — import components via their subpaths
+ * such as `@solostylist/ui-kit/s-button`.
  *
- * Use component subpaths such as `@solostylist/ui-kit/s-button` instead.
+ * The one exception is the palette theming API (not a component): it is
+ * re-exported here so consumers can `import { PALETTE_OPTIONS, paletteThemeOptions }
+ * from '@solostylist/ui-kit'`. It also remains available at `@solostylist/ui-kit/palettes`.
  */
+export type {} from './theme/component-augmentation';
+export { paletteThemeOptions, PALETTE_OPTIONS, VARIANTS, type PaletteVariantKey, type Variant } from './palettes';

package/dist/main.js

@@ -0,0 +1,2 @@
+import { n as e, r as t, t as n } from "./palettes-CJLuEy1m.js";
+export { e as PALETTE_OPTIONS, t as VARIANTS, n as paletteThemeOptions };

package/dist/palettes/index.d.ts

@@ -0,0 +1,11 @@
+import { ThemeOptions } from '@mui/material/styles';
+import { PaletteVariantKey } from '@solostylist/core/palettes';
+export { PALETTE_OPTIONS, VARIANTS, type PaletteVariantKey, type Variant } from '@solostylist/core/palettes';
+/**
+ * Maps the chosen palette variant onto MUI colorSchemes (brand → primary,
+ * neutral → grey/surfaces). Returns `undefined` for an unknown/stale key so
+ * callers fall back to the shipped default theme (Quantum) instead of
+ * crashing. `quantum` flows through the normal mapping and reproduces the
+ * built-in look, so no special-casing is required.
+ */
+export declare const paletteThemeOptions: (key: PaletteVariantKey) => ThemeOptions | undefined;

package/dist/palettes/index.js

@@ -0,0 +1,2 @@
+import { n as e, r as t, t as n } from "../palettes-CJLuEy1m.js";
+export { e as PALETTE_OPTIONS, t as VARIANTS, n as paletteThemeOptions };