@jonmilner/ui 0.0.0-stage → 0.1.1

package/dist/styles/button-fills.mjs

@@ -0,0 +1,17 @@
+//#region src/styles/button-fills.ts
+var e = {
+	primary: {
+		backgroundColor: "accent",
+		color: "accentFg"
+	},
+	secondary: {
+		backgroundColor: "bg",
+		color: "fg"
+	},
+	danger: {
+		backgroundColor: "danger",
+		color: "dangerFg"
+	}
+};
+//#endregion
+export { e as fills };

package/dist/styles/highlight.mjs

@@ -0,0 +1,8 @@
+//#region src/styles/highlight.ts
+var e = (e) => `light-dark(${e.bgMuted}, color-mix(in srgb, ${e.fg} 10%, ${e.bgRaised}))`, t = [
+	"fg",
+	"fgMuted",
+	"danger"
+];
+//#endregion
+export { e as highlightFill, t as highlightText };

package/dist/styles/hover-tint.mjs

@@ -0,0 +1,4 @@
+//#region src/styles/hover-tint.ts
+var e = (e, t) => `color-mix(in srgb, ${e} 15%, ${t})`;
+//#endregion
+export { e as hoverFill };

package/dist/styles/join.mjs

@@ -0,0 +1,4 @@
+//#region src/styles/join.ts
+var e = (...e) => e.filter(Boolean).join(" ");
+//#endregion
+export { e as join };

package/dist/styles/layers.css

@@ -0,0 +1,2 @@
+@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast;
+@layer tokens,reset,atoms,components;

package/dist/styles/part-props.d.mts

@@ -0,0 +1,8 @@
+import { StyleProps } from "../Box/index.mjs";
+import { CSSProperties } from "react";
+//#region src/styles/part-props.d.ts
+export type PartProps<P> = StyleProps & Omit<P, "render" | "className" | "style" | keyof StyleProps> & {
+  className?: string;
+  style?: CSSProperties;
+};
+//#endregion

package/dist/styles/split-style-props.mjs

@@ -0,0 +1,9 @@
+import { sprinkles as e } from "./atoms.css.mjs";
+//#region src/styles/split-style-props.ts
+function t(t) {
+	let n = {}, r = {};
+	for (let [i, a] of Object.entries(t)) (e.properties.has(i) ? n : r)[i] = a;
+	return [n, r];
+}
+//#endregion
+export { t as splitStyleProps };

package/dist/testing/index.d.mts

@@ -0,0 +1,4 @@
+import { Mode } from "../contrast/color.mjs";
+import { ContrastFailure, ContrastPair, checkContrast, contrastPairs, contrastRatio } from "../contrast/contrast.mjs";
+import { MediaEmulator, MotionLocator, MotionStyle, MotionTarget, emulateReducedMotion, expectCrossfadeOnly, expectNoMotion, readMotionStyle } from "./motion.mjs";
+export { type ContrastFailure, type ContrastPair, type MediaEmulator, type Mode, type MotionLocator, type MotionStyle, type MotionTarget, checkContrast, contrastPairs, contrastRatio, emulateReducedMotion, expectCrossfadeOnly, expectNoMotion, readMotionStyle };

package/dist/testing/index.mjs

@@ -0,0 +1,3 @@
+import { checkContrast as e, contrastPairs as t, contrastRatio as n } from "../contrast/contrast.mjs";
+import { emulateReducedMotion as r, expectCrossfadeOnly as i, expectNoMotion as a, readMotionStyle as o } from "./motion.mjs";
+export { e as checkContrast, t as contrastPairs, n as contrastRatio, r as emulateReducedMotion, i as expectCrossfadeOnly, a as expectNoMotion, o as readMotionStyle };

package/dist/testing/motion.d.mts

@@ -0,0 +1,22 @@
+//#region src/testing/motion.d.ts
+export interface MediaEmulator {
+  emulateMedia(options: {
+    reducedMotion: "reduce" | "no-preference" | null;
+  }): Promise<void>;
+}
+export interface MotionLocator {
+  evaluate<R>(fn: (el: Element) => R): Promise<R>;
+}
+export type MotionTarget = Element | MotionLocator;
+export interface MotionStyle {
+  displaced: string[];
+  transitions: {
+    ms: number;
+    property: string;
+  }[];
+}
+export declare function emulateReducedMotion(page: MediaEmulator): Promise<() => Promise<void>>;
+export declare const readMotionStyle: (el: Element) => MotionStyle;
+export declare function expectNoMotion(target: MotionTarget): Promise<void>;
+export declare function expectCrossfadeOnly(target: MotionTarget): Promise<void>;
+//#endregion

package/dist/testing/motion.mjs

@@ -0,0 +1,49 @@
+//#region src/testing/motion.ts
+async function e(e) {
+	return await e.emulateMedia({ reducedMotion: "reduce" }), () => e.emulateMedia({ reducedMotion: null });
+}
+var t = (e) => {
+	let t = getComputedStyle(e), n = (e) => (e.match(/-?[\d.]+(?:e[-+]?\d+)?/g) ?? []).map(Number), r = (e, t) => Math.abs(e - t) < 1e-6, i = Object.entries({
+		translate: (e) => n(e.replace(/-?[\d.]+%/g, "")).every((e) => r(e, 0)),
+		scale: (e) => n(e).every((e) => r(e, 1)),
+		rotate: (e) => r(n(e).at(-1) ?? 0, 0),
+		transform: (e) => {
+			let t = n(e.replace(/^matrix(3d)?/, "")), i = t.length === 16 ? [
+				0,
+				5,
+				10,
+				15
+			] : [0, 3];
+			return t.every((e, t) => r(e, +!!i.includes(t)));
+		}
+	}).map(([e, n]) => [
+		e,
+		t.getPropertyValue(e),
+		n
+	]).filter(([, e, t]) => e !== "none" && !t(e)).map(([e, t]) => `${e}: ${t}`), a = (e) => parseFloat(e) * (e.endsWith("ms") ? 1 : 1e3), o = t.transitionProperty.split(",").map((e) => e.trim()), s = t.transitionDuration.split(",").map((e) => a(e.trim()));
+	return {
+		displaced: i,
+		transitions: o.map((e, t) => ({
+			property: e,
+			ms: s[t % s.length] ?? 0
+		}))
+	};
+};
+function n(e) {
+	return "evaluate" in e ? e.evaluate(t) : Promise.resolve(t(e));
+}
+function r({ displaced: e }) {
+	if (e.length > 0) throw Error(`Expected no motion, got ${e.join("; ")}`);
+}
+async function i(e) {
+	r(await n(e));
+}
+async function a(e) {
+	let t = await n(e);
+	if (r(t), !t.transitions.some(({ property: e, ms: t }) => (e === "opacity" || e === "all") && t > 0)) {
+		let e = t.transitions.map(({ property: e, ms: t }) => `${e} ${t}ms`).join(", ");
+		throw Error(`Expected an opacity transition over 0ms, got ${e}`);
+	}
+}
+//#endregion
+export { e as emulateReducedMotion, a as expectCrossfadeOnly, i as expectNoMotion, t as readMotionStyle };

package/dist/theme/FontCheck.mjs

@@ -0,0 +1,11 @@
+"use client";
+import { checkFonts as e } from "../brands/check-fonts.mjs";
+import { useEffect as t } from "react";
+//#region src/theme/FontCheck.tsx
+function n({ font: n }) {
+	return t(() => {
+		e({ font: n });
+	}, [n]), null;
+}
+//#endregion
+export { n as FontCheck };

package/dist/theme/ThemeProvider.d.mts

@@ -0,0 +1,15 @@
+import { presets } from "../brands/index.mjs";
+import { Theme } from "./define-theme.mjs";
+import { ComponentPropsWithRef } from "react";
+//#region src/theme/ThemeProvider.d.ts
+export type ThemeProviderProps = ComponentPropsWithRef<"div"> & {
+  mode?: "light" | "dark" | "system";
+} & ({
+  brand?: keyof typeof presets;
+  theme?: undefined;
+} | {
+  brand?: undefined;
+  theme: Theme;
+});
+export declare function ThemeProvider({ brand, mode, theme, children, ...props }: ThemeProviderProps): import("react").JSX.Element;
+//#endregion

package/dist/theme/ThemeProvider.mjs

@@ -0,0 +1,23 @@
+import { presets as e } from "../brands/index.mjs";
+import { FontCheck as t } from "./FontCheck.mjs";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/theme/ThemeProvider.tsx
+function i({ brand: i = "default", mode: a = "system", theme: o, children: s, ...c }) {
+	let l = o?.brand.name ?? i, u = o?.brand ?? e[i];
+	return /* @__PURE__ */ r("div", {
+		...c,
+		"data-brand": l,
+		"data-mode": a,
+		children: [
+			o && /* @__PURE__ */ n("style", {
+				href: o.href,
+				precedence: "ui-theme",
+				children: o.css
+			}),
+			process.env.NODE_ENV !== "production" && u && /* @__PURE__ */ n(t, { font: u.font }),
+			s
+		]
+	});
+}
+//#endregion
+export { i as ThemeProvider };

package/dist/theme/define-theme.d.mts

@@ -0,0 +1,9 @@
+import { Brand } from "../brands/brand.mjs";
+//#region src/theme/define-theme.d.ts
+export interface Theme {
+  readonly brand: Brand;
+  readonly href: string;
+  readonly css: string;
+}
+export declare function defineTheme(brand: Brand): Theme;
+//#endregion

package/dist/theme/define-theme.mjs

@@ -0,0 +1,84 @@
+import { fallbackFaces as e, fallbackFamily as t, fontStack as n, fontTrim as r } from "../brands/font.mjs";
+import { forcedColors as i } from "../brands/forced-colors.mjs";
+import { presets as a } from "../brands/index.mjs";
+import { resolveColor as o } from "../contrast/color.mjs";
+import { checkContrast as s, contrastPairs as c } from "../contrast/contrast.mjs";
+import { checkMixes as l, contrastMixes as u } from "../contrast/mixes.mjs";
+import { colorRoles as d, fontRoles as f } from "../tokens/roles.mjs";
+import { vars as p } from "../tokens/contract.mjs";
+//#region src/theme/define-theme.ts
+var m = (e) => e.slice(4, -1), h = (e) => e.replace(/[A-Z]/g, (e) => `-${e.toLowerCase()}`), g = (e, t) => `${e} {\n${t.map(([e, t]) => `  ${e}: ${t};\n`).join("")}}`;
+function _(o) {
+	let s = (e) => {
+		throw Error(`defineTheme("${o.name}"): ${e}`);
+	};
+	/^[a-z][\w-]*$/i.test(o.name) || s("the name must be a CSS identifier");
+	for (let [e, t] of Object.entries(o.color)) v.test(t) && s(`color.${e} must be a single color value`);
+	for (let [e, { metrics: t, fallback: n }] of Object.entries(o.font)) for (let r of [t, n].flatMap((e) => [
+		e.familyName,
+		e.fullName,
+		e.postscriptName
+	])) r !== void 0 && (v.test(r) || /["'\n]/.test(r)) && s(`font.${e} has a font name with quotes or CSS syntax: ${r}`);
+	process.env.NODE_ENV !== "production" && C(o, s);
+	let c = `[data-brand="${o.name}"]`, l = Object.values(o.font), u = Object.values(a).flatMap((e) => Object.values(e.font)), _;
+	try {
+		_ = e([...u, ...l]);
+	} catch (e) {
+		return s(e.message);
+	}
+	let b = new Set(l.map(t));
+	for (let e of u) b.delete(t(e));
+	let x = [
+		...[..._].filter(([e]) => b.has(e)).map(([e, t]) => g("@font-face", [["font-family", `"${e}"`], ...Object.entries(t).map(([e, t]) => [h(e), t])])),
+		g(c, [...d.map((e) => [m(p.color[e]), o.color[e]]), ...f.flatMap((e) => {
+			let t = r(o.font[e].metrics);
+			return [
+				[m(p.font[e]), n(o.font[e])],
+				[m(p.fontTrim[e].cap), t.cap],
+				[m(p.fontTrim[e].baseline), t.baseline]
+			];
+		})]),
+		`@media (forced-colors: active) {\n${g(c, d.map((e) => [m(p.color[e]), i[e]])).split("\n").map((e) => `  ${e}`).join("\n")}\n}`
+	].join("\n");
+	return {
+		brand: o,
+		href: `ui-theme-${o.name}-${y(x)}`,
+		css: x
+	};
+}
+var v = /[;{}<>\\!]|\/\*/;
+function y(e) {
+	let t = 2166136261;
+	for (let n = 0; n < e.length; n++) t = Math.imul(t ^ e.charCodeAt(n), 16777619);
+	return (t >>> 0).toString(36);
+}
+var b = /var\(\s*--color-([a-z-]+)\s*\)/g, x = new Map(d.map((e) => [h(e), e])), S = new Set(c.map((e) => e.bg));
+function C(e, t) {
+	let n = (r, i = []) => (i.includes(r) && t(`color.${r} references itself through var()`), e.color[r].replace(b, (e, t) => {
+		let a = x.get(t);
+		return a ? n(a, [...i, r]) : e;
+	})), r = Object.fromEntries(d.map((e) => [e, n(e)]));
+	for (let n of d) {
+		r[n].includes("var(") && t(`color.${n} is ${e.color[n]}: the contrast check needs literal colors, so use var() only to reference another color role`);
+		for (let i of ["light", "dark"]) {
+			let a;
+			try {
+				({alpha: a} = o(r[n], i));
+			} catch (r) {
+				return t(`color.${n} is ${e.color[n]}, which the contrast check cannot resolve (${r.message}). Use hex, rgb(), oklab(), oklch(), color-mix() or light-dark(); named colors other than white, black and transparent are not supported`);
+			}
+			a < 1 && S.has(n) && t(`color.${n} is translucent in ${i} mode, but it is a background in a contrast pair and must be opaque`);
+		}
+	}
+	for (let { name: e, fill: n } of u) for (let i of ["light", "dark"]) o(n(r), i).alpha < 1 && t(`the ${e} is translucent in ${i} mode: the roles it mixes must be opaque`);
+	let i = {
+		...e,
+		color: r
+	}, a = s(i), c = [...a, ...l(i).filter((e) => !a.some((t) => t.fg === e.fg && t.mode === e.mode && t.ratio === e.ratio)).map(({ mix: e, ...t }) => ({
+		...t,
+		bg: `the ${e}`
+	}))].toSorted((e, t) => e.mode === t.mode ? 0 : e.mode === "light" ? -1 : 1);
+	c.length > 0 && t(`fails WCAG AA contrast:\n${c.map(({ fg: e, bg: t, mode: n, ratio: r, min: i }) => `  ${e} on ${t} (${n}): ${r.toFixed(2)}, needs ${i}`).join("\n")}`);
+}
+//#endregion
+export { _ as defineTheme };

package/dist/theme/use-theme-container.mjs

@@ -0,0 +1,15 @@
+import { useCallback as e, useMemo as t, useRef as n } from "react";
+//#region src/theme/use-theme-container.ts
+function r() {
+	let r = n(null), i = e((e) => {
+		r.current = e;
+	}, []);
+	return t(() => ({
+		container: { get current() {
+			return r.current?.closest("[data-brand]") ?? null;
+		} },
+		ref: i
+	}), [i]);
+}
+//#endregion
+export { r as useThemeContainer };

package/dist/tokens/contract.d.mts

@@ -0,0 +1,110 @@
+//#region src/tokens/contract.d.ts
+type CssVar = `var(--${string})`;
+export type Contract<T> = { readonly [K in keyof T]: T[K] extends string ? CssVar : Contract<T[K]>; };
+export declare const contract: {
+  space: {
+    0: string;
+    1: string;
+    12: string;
+    16: string;
+    2: string;
+    20: string;
+    24: string;
+    32: string;
+    4: string;
+    40: string;
+    48: string;
+    6: string;
+    64: string;
+    8: string;
+    80: string;
+    96: string;
+  };
+  size: {
+    xs: string;
+    sm: string;
+    med: string;
+    lg: string;
+    xl: string;
+  };
+  container: {
+    prose: string;
+    page: string;
+    wide: string;
+  };
+  radius: {
+    none: string;
+    sm: string;
+    med: string;
+    lg: string;
+    xl: string;
+    full: string;
+  };
+  fontSize: {
+    xs: string;
+    sm: string;
+    med: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+    "3xl": string;
+    "4xl": string;
+  };
+  fontWeight: {
+    regular: string;
+    medium: string;
+    semibold: string;
+    bold: string;
+  };
+  lineHeight: {
+    sm: string;
+    med: string;
+    lg: string;
+  };
+  zIndex: {
+    base: string;
+    raised: string;
+    dropdown: string;
+    sticky: string;
+    overlay: string;
+    modal: string;
+    popover: string;
+    toast: string;
+    tooltip: string;
+  };
+  duration: {
+    fast: string;
+    med: string;
+    slow: string;
+  };
+  easing: {
+    standard: string;
+    enter: string;
+    exit: string;
+  };
+  distance: {
+    sm: string;
+    med: string;
+    lg: string;
+  };
+  scale: {
+    sm: string;
+    med: string;
+    lg: string;
+  };
+  dir: string;
+  shadow: {
+    sm: string;
+    med: string;
+    lg: string;
+  };
+  color: Record<"accent" | "accentFg" | "bg" | "bgMuted" | "bgRaised" | "border" | "borderStrong" | "danger" | "dangerFg" | "fg" | "fgMuted" | "focus" | "shadow", string>;
+  font: Record<"body" | "display" | "heading" | "label" | "mono", string>;
+  fontTrim: Record<"body" | "display" | "heading" | "label" | "mono", {
+    cap: string;
+    baseline: string;
+  }>;
+};
+export declare const vars: Contract<typeof contract>;
+//#endregion
+export {};

package/dist/tokens/contract.mjs

@@ -0,0 +1,17 @@
+import { tokens as e } from "./scales.mjs";
+import { colorRoles as t, fontRoles as n } from "./roles.mjs";
+//#region src/tokens/contract.ts
+function r(e, t) {
+	return typeof e == "string" ? `var(--${t.join("-").replace(/[A-Z]/g, (e) => `-${e.toLowerCase()}`)})` : Object.fromEntries(Object.entries(e).map(([e, n]) => [e, r(n, [...t, e])]));
+}
+var i = (e, t) => Object.fromEntries(e.map((e) => [e, t])), a = {
+	...e,
+	color: i(t, ""),
+	font: i(n, ""),
+	fontTrim: i(n, {
+		cap: "",
+		baseline: ""
+	})
+}, o = r(a, []);
+//#endregion
+export { a as contract, o as vars };

package/dist/tokens/index.d.mts

@@ -0,0 +1,2 @@
+import { vars } from "./contract.mjs";
+export { vars };

package/dist/tokens/index.mjs

@@ -0,0 +1 @@
+export { vars } from "./contract.mjs";

package/dist/tokens/roles.d.mts

@@ -0,0 +1,6 @@
+//#region src/tokens/roles.d.ts
+export declare const colorRoles: readonly ["bg", "bgMuted", "bgRaised", "fg", "fgMuted", "border", "borderStrong", "accent", "accentFg", "danger", "dangerFg", "focus", "shadow"];
+export type ColorRole = (typeof colorRoles)[number];
+export declare const fontRoles: readonly ["body", "heading", "display", "label", "mono"];
+export type FontRole = (typeof fontRoles)[number];
+//#endregion

package/dist/tokens/roles.mjs

@@ -0,0 +1,24 @@
+//#region src/tokens/roles.ts
+var e = [
+	"bg",
+	"bgMuted",
+	"bgRaised",
+	"fg",
+	"fgMuted",
+	"border",
+	"borderStrong",
+	"accent",
+	"accentFg",
+	"danger",
+	"dangerFg",
+	"focus",
+	"shadow"
+], t = [
+	"body",
+	"heading",
+	"display",
+	"label",
+	"mono"
+];
+//#endregion
+export { e as colorRoles, t as fontRoles };

package/dist/tokens/scales.d.mts

@@ -0,0 +1,100 @@
+//#region src/tokens/scales.d.ts
+export declare const tokens: {
+  space: {
+    0: string;
+    1: string;
+    12: string;
+    16: string;
+    2: string;
+    20: string;
+    24: string;
+    32: string;
+    4: string;
+    40: string;
+    48: string;
+    6: string;
+    64: string;
+    8: string;
+    80: string;
+    96: string;
+  };
+  size: {
+    xs: string;
+    sm: string;
+    med: string;
+    lg: string;
+    xl: string;
+  };
+  container: {
+    prose: string;
+    page: string;
+    wide: string;
+  };
+  radius: {
+    none: string;
+    sm: string;
+    med: string;
+    lg: string;
+    xl: string;
+    full: string;
+  };
+  fontSize: {
+    xs: string;
+    sm: string;
+    med: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+    "3xl": string;
+    "4xl": string;
+  };
+  fontWeight: {
+    regular: string;
+    medium: string;
+    semibold: string;
+    bold: string;
+  };
+  lineHeight: {
+    sm: string;
+    med: string;
+    lg: string;
+  };
+  zIndex: {
+    base: string;
+    raised: string;
+    dropdown: string;
+    sticky: string;
+    overlay: string;
+    modal: string;
+    popover: string;
+    toast: string;
+    tooltip: string;
+  };
+  duration: {
+    fast: string;
+    med: string;
+    slow: string;
+  };
+  easing: {
+    standard: string;
+    enter: string;
+    exit: string;
+  };
+  distance: {
+    sm: string;
+    med: string;
+    lg: string;
+  };
+  scale: {
+    sm: string;
+    med: string;
+    lg: string;
+  };
+  dir: string;
+  shadow: {
+    sm: string;
+    med: string;
+    lg: string;
+  };
+};
+//#endregion