@maanlamp/react-web-ui 0.0.0-stage → 0.1.0

package/dist/lib/use-intent.js

@@ -0,0 +1,77 @@
+import { c } from "react/compiler-runtime";
+import { useEffect, useRef } from "react";
+// src/lib/use-intent.ts
+var INTENT_DELAY_MS = 50;
+/**
+* Trigger handlers that call `onIntent` once a pointer rests on the trigger or
+* it takes focus, so the caller can warm whatever the popup will show. Returns
+* no handlers when `onIntent` is omitted.
+*
+* @example
+* const intent = useIntent(() => prefetchRates(id));
+* return <button {...intent}>…</button>;
+*/
+var useIntent = (onIntent) => {
+	const $ = c(11);
+	const timer = useRef(void 0);
+	let t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = () => () => clearTimeout(timer.current);
+		t1 = [];
+		$[0] = t0;
+		$[1] = t1;
+	} else {
+		t0 = $[0];
+		t1 = $[1];
+	}
+	useEffect(t0, t1);
+	if (!onIntent) {
+		let t2;
+		if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+			t2 = {};
+			$[2] = t2;
+		} else t2 = $[2];
+		return t2;
+	}
+	let t2;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = () => {
+			clearTimeout(timer.current);
+			timer.current = void 0;
+		};
+		$[3] = t2;
+	} else t2 = $[3];
+	const cancel = t2;
+	let t3;
+	if ($[4] !== onIntent) {
+		t3 = () => {
+			cancel();
+			onIntent();
+		};
+		$[4] = onIntent;
+		$[5] = t3;
+	} else t3 = $[5];
+	const run = t3;
+	let t4;
+	if ($[6] !== run) {
+		t4 = () => {
+			if (timer.current === void 0) timer.current = setTimeout(run, INTENT_DELAY_MS);
+		};
+		$[6] = run;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== run || $[9] !== t4) {
+		t5 = {
+			onPointerEnter: t4,
+			onPointerLeave: cancel,
+			onFocus: run
+		};
+		$[8] = run;
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	return t5;
+};
+export { useIntent };

package/dist/lib/use-required-context.d.ts

@@ -0,0 +1,10 @@
+import { type Context } from "react";
+/**
+ * The value of `context` from the nearest provider; it throws `message` where
+ * there is none.
+ *
+ * @example
+ * const locale = useRequiredContext(LocaleContext, "useLocale must be used inside a LocaleProvider");
+ */
+export declare const useRequiredContext: <T>(context: Context<T>, message: string) => NonNullable<T>;
+//# sourceMappingURL=use-required-context.d.ts.map

package/dist/lib/use-required-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-required-context.d.ts","sourceRoot":"","sources":["../../src/lib/use-required-context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,OAAO,EAAO,MAAM,OAAO,CAAC;AAE1C;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,GAAI,CAAC,WAC1B,OAAO,CAAC,CAAC,CAAC,WACV,MAAM,KACb,WAAW,CAAC,CAAC,CAMf,CAAC"}

package/dist/lib/use-required-context.js

@@ -0,0 +1,15 @@
+import { use } from "react";
+// src/lib/use-required-context.ts
+/**
+* The value of `context` from the nearest provider; it throws `message` where
+* there is none.
+*
+* @example
+* const locale = useRequiredContext(LocaleContext, "useLocale must be used inside a LocaleProvider");
+*/
+var useRequiredContext = (context, message) => {
+	const value = use(context);
+	if (value === null || value === void 0) throw new Error(message);
+	return value;
+};
+export { useRequiredContext };

package/dist/terrazzo/index.d.ts

@@ -0,0 +1,38 @@
+import type { Plugin } from "@terrazzo/parser";
+export type KitTokensOptions = Readonly<{
+    /**
+     * The file the custom properties are written to, relative to the config's `outDir`.
+     *
+     * @default "tokens.css"
+     */
+    filename?: string;
+}>;
+/**
+ * The CSS custom property a design token is built into: its path in kebab
+ * case, dots as hyphens, with no prefix.
+ *
+ * @example
+ *   variableNameOf("sys.color.primary"); // "--sys-color-primary"
+ */
+export declare const variableNameOf: (id: string) => string;
+/**
+ * A Terrazzo plugin that builds a resolver's tokens into the custom properties
+ * the kit's components read: `--ref-*` and `--sys-*`, the `light` theme on
+ * `:root` and the `dark` theme's `sys` roles on `html[data-theme="dark"]`, and
+ * under `prefers-color-scheme: dark` unless `data-theme="light"`. A shadow
+ * tagged `$extensions["nl.igne.css"].property: "filter"` is written as
+ * `drop-shadow()` filters.
+ *
+ * @example
+ *   // terrazzo.config.ts
+ *   import { defineConfig } from "@terrazzo/cli";
+ *   import kitTokens from "@maanlamp/react-web-ui/terrazzo";
+ *
+ *   export default defineConfig({
+ *   	tokens: ["./src/style/tokens/app.resolver.json"],
+ *   	outDir: "./src/style/",
+ *   	plugins: [kitTokens({ filename: "tokens.gen.css" })],
+ *   });
+ */
+declare const kitTokens: (options?: KitTokensOptions) => Plugin;
+export default kitTokens;

package/dist/terrazzo/index.js

@@ -0,0 +1,77 @@
+import css, {} from "@terrazzo/plugin-css";
+const isRecord = (value) => typeof value === "object" && value !== null;
+const drawnAsFilter = (extensions) => {
+    if (!isRecord(extensions)) {
+        return false;
+    }
+    const extension = extensions["nl.igne.css"];
+    return (isRecord(extension) &&
+        extension["property"] === "filter");
+};
+const length = ({ value, unit }) => `${value}${unit}`;
+/**
+ * The CSS custom property a design token is built into: its path in kebab
+ * case, dots as hyphens, with no prefix.
+ *
+ * @example
+ *   variableNameOf("sys.color.primary"); // "--sys-color-primary"
+ */
+export const variableNameOf = (id) => `--${id
+    .replaceAll(".", "-")
+    .replace(/(\p{Uppercase_Letter})(\p{Uppercase_Letter}*)/gu, (_, first, rest) => `-${first.toLocaleLowerCase()}${rest}`)}`;
+const variableName = (token) => variableNameOf(token.id);
+const dropShadows = (token, { tokensSet, transformAlias }) => {
+    if (token.$type !== "shadow" ||
+        !drawnAsFilter(token.$extensions)) {
+        return undefined;
+    }
+    const alias = transformAlias ??
+        ((colour) => `var(${variableName(colour)})`);
+    return token.$value
+        .map((layer, index) => {
+        const partial = token.partialAliasOf?.[index];
+        const colour = typeof partial === "object"
+            ? tokensSet[partial.color ?? ""]
+            : undefined;
+        if (colour === undefined) {
+            throw new Error(`${token.id}: a shadow drawn as a filter takes its colour from a colour token`);
+        }
+        return `drop-shadow(${length(layer.offsetX)} ${length(layer.offsetY)} ${length(layer.blur)} ${alias(colour)})`;
+    })
+        .join(" ");
+};
+const light = (contents) => `:root {\n\tcolor-scheme: light;\n${contents}\n}`;
+const dark = (contents) => `html[data-theme="dark"] {\n\tcolor-scheme: dark;\n${contents}\n}\n\n@media (prefers-color-scheme: dark) {\n\thtml:not([data-theme="light"]) {\n\t\tcolor-scheme: dark;\n${contents}\n\t}\n}`;
+/**
+ * A Terrazzo plugin that builds a resolver's tokens into the custom properties
+ * the kit's components read: `--ref-*` and `--sys-*`, the `light` theme on
+ * `:root` and the `dark` theme's `sys` roles on `html[data-theme="dark"]`, and
+ * under `prefers-color-scheme: dark` unless `data-theme="light"`. A shadow
+ * tagged `$extensions["nl.igne.css"].property: "filter"` is written as
+ * `drop-shadow()` filters.
+ *
+ * @example
+ *   // terrazzo.config.ts
+ *   import { defineConfig } from "@terrazzo/cli";
+ *   import kitTokens from "@maanlamp/react-web-ui/terrazzo";
+ *
+ *   export default defineConfig({
+ *   	tokens: ["./src/style/tokens/app.resolver.json"],
+ *   	outDir: "./src/style/",
+ *   	plugins: [kitTokens({ filename: "tokens.gen.css" })],
+ *   });
+ */
+const kitTokens = (options = {}) => css({
+    filename: options.filename ?? "tokens.css",
+    variableName,
+    transform: dropShadows,
+    permutations: [
+        { input: { theme: "light" }, prepare: light },
+        {
+            input: { theme: "dark" },
+            include: ["sys.**"],
+            prepare: dark,
+        },
+    ],
+});
+export default kitTokens;