@vjdesigns/vjdesigns-ui 0.0.0-stage → 2.0.0

package/dist/utils/brandPalette.d.ts

@@ -0,0 +1,146 @@
+/**
+ * Custom brand palettes from any hex color.
+ *
+ * `createBrandPalette("#e11d48")` derives the nine primary tokens a brand
+ * defines (see "Brand palettes" in src/styles/tokens.css) for both light and
+ * dark mode. Hue is kept; lightness (and chroma, when a color falls outside
+ * sRGB) is adjusted only as far as WCAG 2.2 AA needs against the library's
+ * surfaces, so any input yields an accessible palette.
+ *
+ * One color is used exactly in the mode where it passes (a dark color in
+ * light mode, a light color in dark mode); the other mode gets a derived
+ * shade. Pass `{ light, dark }` to choose both. `adjustments` lists every
+ * requested color that had to change.
+ *
+ * Self-contained (no imports) so scripts/check-contrast.mjs can load it and
+ * verify generated palettes in CI.
+ */
+/** A custom brand color: one hex for both modes, or one per mode. */
+export type BrandColor = string | {
+    light: string;
+    dark: string;
+};
+/** The primary tokens of one mode, as hex colors. */
+export interface BrandModePalette {
+    primary: string;
+    primaryHover: string;
+    primaryActive: string;
+    onPrimary: string;
+    primarySubtle: string;
+    primarySubtleHover: string;
+    primarySubtleText: string;
+    primaryBorder: string;
+    linkVisited: string;
+}
+/** A requested color that was changed to meet contrast. */
+export interface BrandColorAdjustment {
+    mode: "light" | "dark";
+    /** The color as given (normalized to `#rrggbb`). */
+    requested: string;
+    /** The color used for `--color-primary` instead. */
+    used: string;
+}
+export interface BrandPalette {
+    light: BrandModePalette;
+    dark: BrandModePalette;
+    /** Requested colors that failed contrast and were adjusted (empty when all were used as given). */
+    adjustments: BrandColorAdjustment[];
+    /** The brand's default accent: a brighter shade in the same color family. */
+    accent: AccentPalette;
+}
+export declare const BRAND_SURFACES: {
+    readonly light: {
+        readonly bg: "#ffffff";
+        readonly surface: "#ffffff";
+        readonly surfaceRaised: "#ffffff";
+        readonly surfaceSunken: "#f5f7fa";
+        readonly surfaceHover: "#eaeef3";
+        readonly neutralSubtle: "#eaeef3";
+        readonly text: "#141c25";
+        readonly textMuted: "#4a5868";
+    };
+    readonly dark: {
+        readonly bg: "#0b1118";
+        readonly surface: "#141c25";
+        readonly surfaceRaised: "#1b2531";
+        readonly surfaceSunken: "#070b10";
+        readonly surfaceHover: "#1f2a36";
+        readonly neutralSubtle: "#1f2a36";
+        readonly text: "#e8edf2";
+        readonly textMuted: "#a9b5c2";
+    };
+};
+/** True for `#rgb` or `#rrggbb` (the `#` is optional). */
+export declare function isHexColor(value: unknown): value is string;
+/** WCAG contrast ratio between two hex colors. */
+export declare function contrastRatio(a: string, b: string): number;
+/**
+ * Builds an accessible brand palette, for both modes, from any hex color.
+ * Throws a TypeError for anything that isn't `#rgb` or `#rrggbb`.
+ */
+export declare function createBrandPalette(color: BrandColor): BrandPalette;
+/**
+ * The accent is the energetic highlight (badges, switches, progress, active
+ * indicators): a bright fill that always carries dark text, in both modes.
+ */
+export interface AccentModePalette {
+    accent: string;
+    accentHover: string;
+    accentActive: string;
+    onAccent: string;
+    accentSubtle: string;
+    accentSubtleHover: string;
+    accentSubtleText: string;
+    accentBorder: string;
+}
+export interface AccentPalette {
+    light: AccentModePalette;
+    dark: AccentModePalette;
+    /** Requested colors that were too dark for dark text and were lightened. */
+    adjustments: BrandColorAdjustment[];
+}
+/** The lime accent (`accent="lime"`, and the black brand's accent): the original bright yellow-green. */
+export declare const LIME_ACCENT: AccentPalette;
+/** @deprecated Renamed to `LIME_ACCENT`. */
+export declare const VOLT_ACCENT: AccentPalette;
+/**
+ * Builds an accessible accent palette, for both modes, from any hex color.
+ * The same fill is used in both modes (it always carries dark text); a color
+ * too dark for that is lightened (same hue) and listed in `adjustments`.
+ * Throws a TypeError for anything that isn't `#rgb` or `#rrggbb`.
+ */
+export declare function createAccentPalette(color: BrandColor): AccentPalette;
+/**
+ * The default accent of a brand: a bright, lighter shade of its primary
+ * hue (blue gets a sky blue, purple a lavender, gold an amber, green a
+ * mint). Colorless brands (black) keep the lime.
+ */
+export declare function brandAccent(primary: string): AccentPalette;
+/**
+ * An accent palette as custom properties. `layer: "accent"` gives the
+ * `--accent-light-*` / `--accent-dark-*` properties of an explicit accent
+ * (what `Theme accent` sets inline for a hex); `layer: "brand"` gives a
+ * brand's own default accent (`--brand-light-accent`, ...).
+ */
+export declare function accentPaletteVars(palette: AccentPalette, layer?: "accent" | "brand"): Record<string, string>;
+/**
+ * A stylesheet rule defining a named accent: `accentCss("sunset", "#ff9f43")`
+ * gives `[data-accent="sunset"] { --accent-light-accent: ... }`, used as
+ * `<html data-accent="sunset">`. Names are letters, digits, and dashes.
+ */
+export declare function accentCss(name: string, color: BrandColor): string;
+/**
+ * The palette as the `--brand-light-*` / `--brand-dark-*` custom properties
+ * a `[data-brand]` element reads (what `Theme` sets inline for a hex `brand`).
+ */
+export declare function brandPaletteVars(palette: BrandPalette): Record<string, string>;
+/**
+ * A stylesheet rule defining a named brand, for apps that want the palette in
+ * CSS (set on `<html>` it applies before any script runs, so there is no flash):
+ *
+ * ```ts
+ * brandCss("acme", "#e11d48") // '[data-brand="acme"] { --brand-light-primary: ... }'
+ * ```
+ * Then use `<html data-brand="acme">`. Names are letters, digits, and dashes.
+ */
+export declare function brandCss(name: string, color: BrandColor): string;

package/dist/utils/brandPalette.mjs

@@ -0,0 +1,387 @@
+//#region src/utils/brandPalette.ts
+var e = {
+	light: {
+		bg: "#ffffff",
+		surface: "#ffffff",
+		surfaceRaised: "#ffffff",
+		surfaceSunken: "#f5f7fa",
+		surfaceHover: "#eaeef3",
+		neutralSubtle: "#eaeef3",
+		text: "#141c25",
+		textMuted: "#4a5868"
+	},
+	dark: {
+		bg: "#0b1118",
+		surface: "#141c25",
+		surfaceRaised: "#1b2531",
+		surfaceSunken: "#070b10",
+		surfaceHover: "#1f2a36",
+		neutralSubtle: "#1f2a36",
+		text: "#e8edf2",
+		textMuted: "#a9b5c2"
+	}
+}, t = 4.5, n = 3, r = {
+	purple: {
+		light: "#6b3fa0",
+		dark: "#c9a6f2"
+	},
+	blue: {
+		light: "#005a8c",
+		dark: "#8fd0f0"
+	}
+}, i = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i;
+function a(e) {
+	return typeof e == "string" && i.test(e.trim());
+}
+function o(e) {
+	let t = e.trim().match(i);
+	if (!t) throw TypeError(`Invalid brand color "${e}": use a hex color like "#e11d48".`);
+	return `#${(t[1].length === 3 ? t[1].replace(/./g, "$&$&") : t[1]).toLowerCase()}`;
+}
+function s(e) {
+	return [
+		1,
+		3,
+		5
+	].map((t) => parseInt(e.slice(t, t + 2), 16) / 255);
+}
+var c = (e) => e <= .04045 ? e / 12.92 : ((e + .055) / 1.055) ** 2.4, l = (e) => e <= .0031308 ? e * 12.92 : 1.055 * e ** (1 / 2.4) - .055;
+function u(e) {
+	let [t, n, r] = s(e).map(c), i = Math.cbrt(.4122214708 * t + .5363325363 * n + .0514459929 * r), a = Math.cbrt(.2119034982 * t + .6806995451 * n + .1073969566 * r), o = Math.cbrt(.0883024619 * t + .2817188376 * n + .6299787005 * r), l = .2104542553 * i + .793617785 * a - .0040720468 * o, u = 1.9779984951 * i - 2.428592205 * a + .4505937099 * o, d = .0259040371 * i + .7827717662 * a - .808675766 * o, f = Math.hypot(u, d);
+	return {
+		l,
+		c: f,
+		h: f < 1e-4 ? 0 : (Math.atan2(d, u) * 180 / Math.PI + 360) % 360
+	};
+}
+function d({ l: e, c: t, h: n }) {
+	let r = t * Math.cos(n * Math.PI / 180), i = t * Math.sin(n * Math.PI / 180), a = (e + .3963377774 * r + .2158037573 * i) ** 3, o = (e - .1055613458 * r - .0638541728 * i) ** 3, s = (e - .0894841775 * r - 1.291485548 * i) ** 3;
+	return [
+		4.0767416621 * a - 3.3077115913 * o + .2309699292 * s,
+		-1.2684380046 * a + 2.6097574011 * o - .3413193965 * s,
+		-.0041960863 * a - .7034186147 * o + 1.707614701 * s
+	];
+}
+var f = (e) => e.every((e) => e >= -1e-4 && e <= 1.0001);
+function p(e) {
+	let t = Math.min(1, Math.max(0, e.l)), n = d({
+		...e,
+		l: t
+	});
+	if (!f(n)) {
+		let r = 0, i = e.c;
+		for (let n = 0; n < 20; n++) {
+			let n = (r + i) / 2;
+			f(d({
+				l: t,
+				c: n,
+				h: e.h
+			})) ? r = n : i = n;
+		}
+		n = d({
+			l: t,
+			c: r,
+			h: e.h
+		});
+	}
+	return `#${n.map((e) => Math.round(l(Math.min(1, Math.max(0, e))) * 255).toString(16).padStart(2, "0")).join("")}`;
+}
+function m(e) {
+	let [t, n, r] = s(e).map((e) => e <= .03928 ? e / 12.92 : ((e + .055) / 1.055) ** 2.4);
+	return .2126 * t + .7152 * n + .0722 * r;
+}
+function h(e, t) {
+	let [n, r] = [m(e), m(t)].sort((e, t) => t - e);
+	return (n + .05) / (r + .05);
+}
+var g = (e, t, n) => t.every((t) => h(e, t) >= n);
+function _(e, t, n) {
+	for (let r = e.l; r >= 0 && r <= 1; r += n * .005) {
+		let n = p({
+			...e,
+			l: r
+		});
+		if (t(n)) return n;
+	}
+	return n < 0 ? "#000000" : "#ffffff";
+}
+var v = {
+	light: -1,
+	dark: 1
+};
+function y(e, n, r) {
+	let i = (e) => g(r.text, [e], t) && g(r.textMuted, [e], t), a = -v[n], [o, s, c, l] = n === "light" ? [
+		.965,
+		.935,
+		.035,
+		.05
+	] : [
+		.26,
+		.3,
+		.06,
+		.07
+	];
+	return {
+		subtle: _({
+			l: o,
+			c: Math.min(e.c, c),
+			h: e.h
+		}, i, a),
+		subtleHover: _({
+			l: s,
+			c: Math.min(e.c, l),
+			h: e.h
+		}, i, a)
+	};
+}
+function b(e, r, i) {
+	return (a) => g(a, [
+		e.bg,
+		e.surface,
+		e.surfaceRaised
+	], t) && g(a, [
+		e.surfaceSunken,
+		e.surfaceHover,
+		e.neutralSubtle,
+		r,
+		i
+	], n);
+}
+function x(n, i, a, o) {
+	let s = e[i], c = u(n), l;
+	if (i === "light") l = "#ffffff";
+	else {
+		let e = p({
+			l: .17,
+			c: Math.min(c.c, .04),
+			h: c.h
+		});
+		l = h(e, n) >= t ? e : "#000000";
+	}
+	let d = v[i] * .055, f = (i === "light" ? c.l + 2 * d < .2 : c.l + 2 * d > .95) ? -d : d, m = (e) => h(l, e) >= t, y = _({
+		...c,
+		l: c.l + f
+	}, m, v[i]), b = _({
+		...c,
+		l: c.l + 2 * f
+	}, m, v[i]), x = [
+		a,
+		o,
+		s.bg,
+		s.surface,
+		s.surfaceRaised,
+		s.surfaceSunken
+	], S = _(i === "light" ? {
+		l: Math.min(c.l - .08, .45),
+		c: c.c,
+		h: c.h
+	} : {
+		l: Math.max(c.l + .1, .85),
+		c: Math.min(c.c, .12),
+		h: c.h
+	}, (e) => g(e, x, t), v[i]), C = (c.c > .04 && Math.abs(c.h - 300) < 35 ? r.blue : r.purple)[i];
+	return {
+		primary: n,
+		primaryHover: y,
+		primaryActive: b,
+		onPrimary: l,
+		primarySubtle: a,
+		primarySubtleHover: o,
+		primarySubtleText: S,
+		primaryBorder: n,
+		linkVisited: C
+	};
+}
+function S(t) {
+	let n = typeof t == "string", r = typeof t == "string" ? {
+		light: o(t),
+		dark: o(t)
+	} : {
+		light: o(t.light),
+		dark: o(t.dark)
+	}, i = [], a = {}, s;
+	if (n) {
+		let t = r.light, n = u(t), i = (r) => {
+			let { subtle: i, subtleHover: a } = y(n, r, e[r]), o = b(e[r], i, a);
+			return o(t) ? 0 : Math.abs(u(_(n, o, v[r])).l - n.l);
+		};
+		s = i("light") <= i("dark") ? "light" : "dark";
+	}
+	for (let t of ["light", "dark"]) {
+		let n = e[t], o = r[t], c = u(o), { subtle: l, subtleHover: d } = y(c, t, n), f = b(n, l, d), p = s === void 0 || s === t, m = p ? c : {
+			...c,
+			l: t === "light" ? Math.min(c.l, .55) : Math.max(c.l, .72)
+		}, h = p && f(o) ? o : _(m, f, v[t]);
+		p && h !== o && i.push({
+			mode: t,
+			requested: o,
+			used: h
+		}), a[t] = x(h, t, l, d);
+	}
+	return {
+		light: a.light,
+		dark: a.dark,
+		adjustments: i,
+		accent: D(a.light.primary)
+	};
+}
+var C = {
+	light: {
+		accent: "#c8f031",
+		accentHover: "#b5dc1f",
+		accentActive: "#a3c812",
+		onAccent: "#141c25",
+		accentSubtle: "#f3fcd6",
+		accentSubtleHover: "#e9f8b8",
+		accentSubtleText: "#3d4f00",
+		accentBorder: "#5f7a00"
+	},
+	dark: {
+		accent: "#c8f031",
+		accentHover: "#d6f65c",
+		accentActive: "#e0f97f",
+		onAccent: "#141c25",
+		accentSubtle: "#1f2a06",
+		accentSubtleHover: "#283608",
+		accentSubtleText: "#d6f65c",
+		accentBorder: "#c8f031"
+	},
+	adjustments: []
+}, w = C;
+function T(r, i, a) {
+	let o = e[a], s = p({
+		l: .2,
+		c: Math.min(r.c, .04),
+		h: r.h
+	}), c = (e) => h(s, e) >= t, l = i && c(i) ? i : _(r, c, 1), d = u(l), f = a === "light" ? -.04 : .04;
+	((e) => e > .97 || !c(p({
+		...d,
+		l: e
+	})))(d.l + 2 * f) && (f = -f);
+	let m = _({
+		...d,
+		l: d.l + f
+	}, c, 1), v = _({
+		...d,
+		l: d.l + 2 * f
+	}, c, 1), { subtle: b, subtleHover: x } = y(r, a, o), S = [
+		b,
+		x,
+		o.bg,
+		o.surface,
+		o.surfaceRaised,
+		o.surfaceSunken
+	], C = a === "light" ? _({
+		l: .42,
+		c: Math.min(d.c, .12),
+		h: d.h
+	}, (e) => g(e, S, t), -1) : _({
+		l: Math.max(d.l, .86),
+		c: Math.min(d.c, .14),
+		h: d.h
+	}, (e) => g(e, S, t), 1), w = [
+		o.bg,
+		o.surface,
+		o.surfaceRaised,
+		o.surfaceSunken,
+		o.surfaceHover,
+		o.neutralSubtle,
+		b,
+		x
+	], T = (e) => g(e, w, n);
+	return {
+		accent: l,
+		accentHover: m,
+		accentActive: v,
+		onAccent: s,
+		accentSubtle: b,
+		accentSubtleHover: x,
+		accentSubtleText: C,
+		accentBorder: a === "light" ? _({
+			l: Math.min(d.l, .55),
+			c: d.c,
+			h: d.h
+		}, T, -1) : T(l) ? l : _(d, T, 1)
+	};
+}
+function E(e) {
+	let t = typeof e == "string" ? {
+		light: o(e),
+		dark: o(e)
+	} : {
+		light: o(e.light),
+		dark: o(e.dark)
+	}, n = [], r = {};
+	for (let e of ["light", "dark"]) {
+		let i = T(u(t[e]), t[e], e);
+		i.accent !== t[e] && n.push({
+			mode: e,
+			requested: t[e],
+			used: i.accent
+		}), r[e] = i;
+	}
+	return {
+		light: r.light,
+		dark: r.dark,
+		adjustments: n
+	};
+}
+function D(e) {
+	let t = u(o(e));
+	if (t.c < .03) return C;
+	let n = {
+		l: .8,
+		c: Math.min(Math.max(t.c * 1.05, .09), .17),
+		h: t.h
+	};
+	return {
+		light: T(n, void 0, "light"),
+		dark: T(n, void 0, "dark"),
+		adjustments: []
+	};
+}
+var O = {
+	accent: "accent",
+	accentHover: "accent-hover",
+	accentActive: "accent-active",
+	onAccent: "on-accent",
+	accentSubtle: "accent-subtle",
+	accentSubtleHover: "accent-subtle-hover",
+	accentSubtleText: "accent-subtle-text",
+	accentBorder: "accent-border"
+};
+function k(e, t = "accent") {
+	let n = {};
+	for (let r of ["light", "dark"]) for (let i of Object.keys(O)) n[`--${t}-${r}-${O[i]}`] = e[r][i];
+	return n;
+}
+function A(e, t) {
+	if (!/^[a-z0-9-]+$/i.test(e)) throw TypeError(`Invalid accent name "${e}": use letters, digits, and dashes.`);
+	return `[data-accent="${e}"] {\n${Object.entries(k(E(t))).map(([e, t]) => `  ${e}: ${t};`).join("\n")}\n}\n`;
+}
+var j = {
+	primary: "primary",
+	primaryHover: "primary-hover",
+	primaryActive: "primary-active",
+	onPrimary: "on-primary",
+	primarySubtle: "primary-subtle",
+	primarySubtleHover: "primary-subtle-hover",
+	primarySubtleText: "primary-subtle-text",
+	primaryBorder: "primary-border",
+	linkVisited: "link-visited"
+};
+function M(e) {
+	let t = {};
+	for (let n of ["light", "dark"]) for (let r of Object.keys(j)) t[`--brand-${n}-${j[r]}`] = e[n][r];
+	return {
+		...t,
+		...k(e.accent, "brand")
+	};
+}
+function N(e, t) {
+	if (!/^[a-z0-9-]+$/i.test(e)) throw TypeError(`Invalid brand name "${e}": use letters, digits, and dashes.`);
+	let n = M(S(t));
+	return `[data-brand="${e}"] {\n${Object.entries(n).map(([e, t]) => `  ${e}: ${t};`).join("\n")}\n}\n`;
+}
+//#endregion
+export { e as BRAND_SURFACES, C as LIME_ACCENT, w as VOLT_ACCENT, A as accentCss, k as accentPaletteVars, D as brandAccent, N as brandCss, M as brandPaletteVars, h as contrastRatio, E as createAccentPalette, S as createBrandPalette, a as isHexColor };

package/dist/utils/clipboard.cjs.js

@@ -0,0 +1 @@
+async function e(e){if(typeof navigator<`u`&&navigator.clipboard?.writeText)try{await navigator.clipboard.writeText(e);return}catch{}if(typeof document>`u`)throw Error(`No clipboard available`);let t=document.createElement(`textarea`);t.value=e,t.setAttribute(`readonly`,``),t.setAttribute(`aria-hidden`,`true`),t.style.position=`fixed`,t.style.insetBlockStart=`0`,t.style.opacity=`0`;let n=document.activeElement;document.body.appendChild(t),t.select();let r=!1;try{r=document.execCommand(`copy`)}finally{document.body.removeChild(t),n?.focus()}if(!r)throw Error(`Copy command was rejected`)}exports.copyToClipboard=e;

package/dist/utils/clipboard.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Copies text to the clipboard: the async Clipboard API when it's allowed,
+ * else a hidden-textarea fallback (insecure contexts, denied permission,
+ * older browsers). Focus returns to where it was. Rejects when both fail.
+ */
+export declare function copyToClipboard(text: string): Promise<void>;

package/dist/utils/clipboard.mjs

@@ -0,0 +1,21 @@
+//#region src/utils/clipboard.ts
+async function e(e) {
+	if (typeof navigator < "u" && navigator.clipboard?.writeText) try {
+		await navigator.clipboard.writeText(e);
+		return;
+	} catch {}
+	if (typeof document > "u") throw Error("No clipboard available");
+	let t = document.createElement("textarea");
+	t.value = e, t.setAttribute("readonly", ""), t.setAttribute("aria-hidden", "true"), t.style.position = "fixed", t.style.insetBlockStart = "0", t.style.opacity = "0";
+	let n = document.activeElement;
+	document.body.appendChild(t), t.select();
+	let r = !1;
+	try {
+		r = document.execCommand("copy");
+	} finally {
+		document.body.removeChild(t), n?.focus();
+	}
+	if (!r) throw Error("Copy command was rejected");
+}
+//#endregion
+export { e as copyToClipboard };

package/dist/utils/cx.cjs.js

@@ -0,0 +1 @@
+function e(...e){return e.filter(Boolean).join(` `)}exports.cx=e;

package/dist/utils/cx.d.ts

@@ -0,0 +1,2 @@
+/** Joins class names, skipping falsy values. `cx("a", cond && "b", undefined)` */
+export declare function cx(...classes: Array<string | false | null | undefined>): string;

package/dist/utils/cx.mjs

@@ -0,0 +1,6 @@
+//#region src/utils/cx.ts
+function e(...e) {
+	return e.filter(Boolean).join(" ");
+}
+//#endregion
+export { e as cx };

package/dist/utils/fillSlot.cjs.js

@@ -0,0 +1 @@
+let e=require("react");var t=(0,e.createContext)(!1),n=()=>(0,e.useContext)(t);exports.FillSlotContext=t,exports.useFillSlot=n;

package/dist/utils/fillSlot.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Set by a container that sizes and clips the media inside it (Card.Media).
+ * Media components read it to fill that box by default, with no rounding of
+ * their own (the container owns the corners), so consumers don't have to
+ * pass `stretch` and `radius="none"` by hand.
+ */
+export declare const FillSlotContext: import('react').Context<boolean>;
+/** True inside a container that provides `FillSlotContext`. */
+export declare const useFillSlot: () => boolean;

package/dist/utils/fillSlot.mjs

@@ -0,0 +1,5 @@
+import { createContext as e, useContext as t } from "react";
+//#region src/utils/fillSlot.ts
+var n = e(!1), r = () => t(n);
+//#endregion
+export { n as FillSlotContext, r as useFillSlot };

package/dist/utils/flattenChildren.cjs.js

@@ -0,0 +1 @@
+let e=require("react");function t(n){return e.Children.toArray(n).flatMap(n=>(0,e.isValidElement)(n)?n.type===e.Fragment?t(n.props.children):[n]:[])}exports.flattenChildren=t;

package/dist/utils/flattenChildren.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement, ReactNode } from 'react';
+/**
+ * Returns the element children as a flat array, looking through Fragments
+ * (including nested ones) and skipping strings, numbers, null, and booleans.
+ * Use it where a parent counts or indexes its parts (Breadcrumbs items,
+ * Stepper steps), so `<>{a}{b}</>` counts as two parts, not one.
+ */
+export declare function flattenChildren(children: ReactNode): ReactElement[];

package/dist/utils/flattenChildren.mjs

@@ -0,0 +1,7 @@
+import { Children as e, Fragment as t, isValidElement as n } from "react";
+//#region src/utils/flattenChildren.ts
+function r(i) {
+	return e.toArray(i).flatMap((e) => n(e) ? e.type === t ? r(e.props.children) : [e] : []);
+}
+//#endregion
+export { r as flattenChildren };

package/dist/utils/hotkeys.cjs.js

@@ -0,0 +1 @@
+function e(){if(typeof navigator>`u`)return`windows`;let e=navigator,t=e.userAgentData?.platform||e.platform||e.userAgent||``;return/mac|iphone|ipad|ipod/i.test(t)?`mac`:/linux|cros|x11/i.test(t)&&!/android/i.test(t)?`linux`:`windows`}function t(t,n=e()){let r={meta:!1,ctrl:!1,alt:!1,shift:!1,key:``},i=t.toLowerCase().split(/\+(?!$)/).map(e=>e.trim());for(let e of i)e===`mod`?n===`mac`?r.meta=!0:r.ctrl=!0:e===`cmd`||e===`meta`?r.meta=!0:e===`ctrl`||e===`control`?r.ctrl=!0:e===`alt`||e===`option`?r.alt=!0:e===`shift`?r.shift=!0:r.key=e===`esc`?`escape`:e===`space`?` `:e;return r.key?r:null}function n(e,t){if(e.metaKey!==t.meta||e.ctrlKey!==t.ctrl||e.altKey!==t.alt)return!1;let n=/^[a-z]$/.test(t.key);return(t.shift||n)&&e.shiftKey!==t.shift?!1:e.key.toLowerCase()===t.key?!0:/^[a-z0-9]$/i.test(e.key)?!1:n?e.code===`Key${t.key.toUpperCase()}`:/^[0-9]$/.test(t.key)?e.code===`Digit${t.key}`:!1}function r(e){let t=[];e.ctrl&&t.push(`Control`),e.meta&&t.push(`Meta`),e.alt&&t.push(`Alt`),e.shift&&t.push(`Shift`);let n=e.key===` `?`Space`:e.key===`escape`?`Escape`:e.key;return t.push(n.length===1?n.toUpperCase():n[0].toUpperCase()+n.slice(1)),t.join(`+`)}var i=new Set([`checkbox`,`radio`,`button`,`submit`,`reset`,`range`,`color`,`file`,`image`,`hidden`]);function a(e){return e instanceof HTMLElement?e.isContentEditable||e instanceof HTMLTextAreaElement||e instanceof HTMLSelectElement?!0:e instanceof HTMLInputElement&&!i.has(e.type):!1}exports.detectPlatform=e,exports.hotkeyToAria=r,exports.isTypingTarget=a,exports.matchesHotkey=n,exports.parseHotkey=t;

package/dist/utils/hotkeys.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Keyboard shortcut parsing and matching, shared by `useHotkeys`,
+ * `CommandPalette`, and anything else that listens for shortcuts.
+ */
+/** The platform, for `mod` (⌘ on Mac, Ctrl elsewhere) and key names. */
+export type HotkeyPlatform = "mac" | "windows" | "linux";
+export interface ParsedHotkey {
+    meta: boolean;
+    ctrl: boolean;
+    alt: boolean;
+    shift: boolean;
+    key: string;
+}
+/** The current platform from the browser (`"windows"` during server rendering). */
+export declare function detectPlatform(): HotkeyPlatform;
+/**
+ * Parses a shortcut like `"mod+k"`, `"shift+mod+p"`, `"ctrl+/"`, or
+ * `"escape"` into modifiers and a key. `mod` is ⌘ on Mac and Ctrl
+ * elsewhere. Returns null when there is no key.
+ */
+export declare function parseHotkey(hotkey: string, platform?: HotkeyPlatform): ParsedHotkey | null;
+/** True when a keyboard event matches a parsed hotkey. */
+export declare function matchesHotkey(event: KeyboardEvent, hotkey: ParsedHotkey): boolean;
+/** `aria-keyshortcuts` value for a parsed hotkey, e.g. "Meta+K". */
+export declare function hotkeyToAria(hotkey: ParsedHotkey): string;
+/** True when the element accepts typed text, so a global hotkey must not steal its keys. */
+export declare function isTypingTarget(target: EventTarget | null): boolean;