@yahoo/uds-v5-wip 1.60.0 → 1.62.0

package/dist/config/dist/Mode.d.ts

@@ -0,0 +1,42 @@
+import { ModeDefinition, ModeOptionDefinition, TokenModifierKey } from "./types.js";
+
+//#region ../config/dist/Mode.d.ts
+//#region src/Mode.d.ts
+declare class ModeOption {
+  readonly name: string;
+  readonly modifier: TokenModifierKey;
+  readonly label?: string;
+  readonly description?: string;
+  readonly css?: string;
+  readonly media?: string;
+  constructor(args: {
+    name: string;
+    definition: ModeOptionDefinition;
+  });
+  /**
+   * Human description for when this option surfaces as a style modifier
+   * (`_dark`, `_lg`). Distinguishes appearance/theme modes ("in dark mode")
+   * from responsive breakpoints ("at the lg breakpoint"), inferred from
+   * whether the option activates via `css` or `media`. Prefers the authored
+   * `label`, falling back to the option `name`.
+   */
+  describeAsModifier(): string;
+  toJSON(): ModeOptionDefinition & {
+    name: string;
+  };
+}
+declare class Mode {
+  readonly name: string;
+  readonly options: ReadonlyMap<string, ModeOption>;
+  private _derived?;
+  constructor(args: {
+    name: string;
+    definition: ModeDefinition;
+  });
+  get derived(): {
+    readonly modifierNames: readonly TokenModifierKey[];
+  };
+  toJSON(): ModeDefinition;
+} //#endregion
+//#endregion
+export { Mode, ModeOption };

package/dist/config/dist/Mode.js

@@ -0,0 +1,81 @@
+import { compact } from "./entity-utils.js";
+//#region ../config/dist/Mode.js
+/**
+* `Mode` — a set of mutually-exclusive options each contributing a
+* modifier (`colorMode: { light, dark }` → `_light`, `_dark`).
+*
+* Owns its options and exposes the derived modifier names produced by
+* the option set.
+*/
+var ModeOption = class {
+	name;
+	modifier;
+	label;
+	description;
+	css;
+	media;
+	constructor(args) {
+		this.name = args.name;
+		this.modifier = args.definition.modifier ?? `_${args.name}`;
+		this.label = args.definition.label;
+		this.description = args.definition.description;
+		this.css = args.definition.css;
+		this.media = args.definition.media;
+	}
+	/**
+	* Human description for when this option surfaces as a style modifier
+	* (`_dark`, `_lg`). Distinguishes appearance/theme modes ("in dark mode")
+	* from responsive breakpoints ("at the lg breakpoint"), inferred from
+	* whether the option activates via `css` or `media`. Prefers the authored
+	* `label`, falling back to the option `name`.
+	*/
+	describeAsModifier() {
+		const display = this.label ?? this.name;
+		if (this.media) return `Conditionally apply styles at the ${display} breakpoint`;
+		return `Conditionally apply styles in ${display} mode`;
+	}
+	toJSON() {
+		return {
+			name: this.name,
+			modifier: this.modifier,
+			...compact({
+				label: this.label,
+				description: this.description,
+				css: this.css,
+				media: this.media
+			})
+		};
+	}
+};
+var Mode = class {
+	name;
+	options;
+	_derived;
+	constructor(args) {
+		this.name = args.name;
+		const options = /* @__PURE__ */ new Map();
+		for (const [optName, optDef] of Object.entries(args.definition)) options.set(optName, new ModeOption({
+			name: optName,
+			definition: optDef
+		}));
+		this.options = options;
+	}
+	get derived() {
+		if (!this._derived) {
+			const modifierNames = [];
+			for (const option of this.options.values()) modifierNames.push(option.modifier);
+			this._derived = { modifierNames };
+		}
+		return this._derived;
+	}
+	toJSON() {
+		const out = {};
+		for (const [name, option] of this.options) {
+			const { name: _omit, ...rest } = option.toJSON();
+			out[name] = rest;
+		}
+		return out;
+	}
+};
+//#endregion
+export { Mode, ModeOption };

package/dist/config/dist/Modifier.d.ts

@@ -0,0 +1,52 @@
+import { CompositeRef, ModeRef } from "./refs.js";
+import { ModifierDefinition, TokenModifierKey } from "./types.js";
+import { CssSelector } from "./brands.js";
+
+//#region ../config/dist/Modifier.d.ts
+//#region src/Modifier.d.ts
+type CompositeSelectorLookup = (ref: string) => string | undefined;
+type ModeSelectorLookup = (ref: string) => string | undefined;
+declare class Modifier {
+  #private;
+  readonly name: TokenModifierKey;
+  readonly selector?: string | CompositeRef | ModeRef;
+  readonly media?: string;
+  readonly description?: string;
+  /**
+   * Tailwind variant prefix a modifier name maps to. Strip the leading
+   * underscore, kebab-case the remainder, append `:`. `_focusVisible` →
+   * `focus-visible:`, `_hover` → `hover:`. Static so callers that only
+   * have the modifier name string (codegen `prepareModifierProps`,
+   * className builders) can derive it without spinning up a Modifier.
+   *
+   * Loader and runtime must agree byte-for-byte on this output — the
+   * single source of truth lives here.
+   */
+  static tailwindPrefix(modifierName: string): string;
+  /**
+   * Auto-generate a human-readable description from a modifier name —
+   * strip the leading `_`, split on camelCase boundaries and digit
+   * groups, lowercase. `_onElevation1` → `on elevation 1`. Static so
+   * callers with just the name string (and no `Modifier` instance) can
+   * reach the same wording; the instance getter
+   * `derived.description` uses it as the fallback when the authored
+   * `description` is missing.
+   */
+  static autoDescription(modifierName: string): string;
+  constructor(args: {
+    name: TokenModifierKey;
+    definition: ModifierDefinition;
+    compositeLookup: CompositeSelectorLookup;
+    modeLookup: ModeSelectorLookup;
+  });
+  get derived(): {
+    readonly cssSelector: CssSelector;
+    readonly tailwindPrefix: string;
+    readonly description: string;
+  };
+  toJSON(): ModifierDefinition & {
+    name: TokenModifierKey;
+  };
+} //#endregion
+//#endregion
+export { Modifier };

package/dist/config/dist/Modifier.js

@@ -0,0 +1,97 @@
+import { cssSelector } from "./brands.js";
+import { compact, kebabCase } from "./entity-utils.js";
+import { isCompositeRef, isModeRef } from "./refs.js";
+//#region ../config/dist/Modifier.js
+/**
+* `Modifier` — a state or structural variation (`_hover`, `_dark`).
+*
+* Stores the authored `selector` (string, `composite()` marker, or
+* `mode()` marker) and resolves it to a CSS selector on demand via
+* the parent Config's lookup callables.
+*
+* `derived.cssSelector` recomputes on access — the resolved value
+* depends on the Config's composite/mode tables, which can grow after
+* the Modifier is constructed.
+*/
+var Modifier = class Modifier {
+	name;
+	selector;
+	media;
+	description;
+	#compositeLookup;
+	#modeLookup;
+	#derived;
+	/**
+	* Tailwind variant prefix a modifier name maps to. Strip the leading
+	* underscore, kebab-case the remainder, append `:`. `_focusVisible` →
+	* `focus-visible:`, `_hover` → `hover:`. Static so callers that only
+	* have the modifier name string (codegen `prepareModifierProps`,
+	* className builders) can derive it without spinning up a Modifier.
+	*
+	* Loader and runtime must agree byte-for-byte on this output — the
+	* single source of truth lives here.
+	*/
+	static tailwindPrefix(modifierName) {
+		return `${kebabCase(modifierName.slice(1))}:`;
+	}
+	/**
+	* Auto-generate a human-readable description from a modifier name —
+	* strip the leading `_`, split on camelCase boundaries and digit
+	* groups, lowercase. `_onElevation1` → `on elevation 1`. Static so
+	* callers with just the name string (and no `Modifier` instance) can
+	* reach the same wording; the instance getter
+	* `derived.description` uses it as the fallback when the authored
+	* `description` is missing.
+	*/
+	static autoDescription(modifierName) {
+		return `Conditionally apply styles ${modifierName.replace(/^_/, "").replace(/([A-Z])/g, " $1").replace(/(\d+)/g, " $1").trim().toLowerCase()}`;
+	}
+	constructor(args) {
+		this.name = args.name;
+		this.selector = args.definition.selector;
+		this.media = args.definition.media;
+		this.description = args.definition.description;
+		this.#compositeLookup = args.compositeLookup;
+		this.#modeLookup = args.modeLookup;
+	}
+	get derived() {
+		if (!this.#derived) {
+			const selector = this.selector;
+			const name = this.name;
+			const authoredDescription = this.description;
+			const compositeLookup = this.#compositeLookup;
+			const modeLookup = this.#modeLookup;
+			this.#derived = {
+				get cssSelector() {
+					return cssSelector(resolveSelector(selector, compositeLookup, modeLookup));
+				},
+				get tailwindPrefix() {
+					return Modifier.tailwindPrefix(name);
+				},
+				get description() {
+					return authoredDescription ?? Modifier.autoDescription(name);
+				}
+			};
+		}
+		return this.#derived;
+	}
+	toJSON() {
+		return {
+			name: this.name,
+			...compact({
+				selector: this.selector,
+				media: this.media,
+				description: this.description
+			})
+		};
+	}
+};
+function resolveSelector(selector, compositeLookup, modeLookup) {
+	if (selector === void 0) return "";
+	if (typeof selector === "string") return selector;
+	if (isCompositeRef(selector)) return compositeLookup(selector.ref) ?? "";
+	if (isModeRef(selector)) return modeLookup(selector.ref) ?? "";
+	return "";
+}
+//#endregion
+export { Modifier };

package/dist/config/dist/MotionDef.d.ts

@@ -0,0 +1,50 @@
+import { CssMotionDefinition, JsMotionDefinition, MotionKeyframes, MotionStateKeyframe, MotionTransition } from "./types.js";
+import { CssClassName } from "./brands.js";
+
+//#region ../config/dist/MotionDef.d.ts
+//#region src/MotionDef.d.ts
+declare class CssMotionDef {
+  #private;
+  readonly runtime: "css";
+  readonly name: string;
+  readonly keyframes: MotionKeyframes;
+  readonly transition?: MotionTransition;
+  readonly animationDuration?: string | number;
+  readonly animationTimingFunction?: string;
+  readonly animationDelay?: string | number;
+  readonly animationIterationCount?: string | number;
+  readonly animationDirection?: string;
+  readonly animationFillMode?: string;
+  readonly animationPlayState?: string;
+  readonly reducedMotion?: 'none';
+  constructor(args: {
+    name: string;
+    definition: CssMotionDefinition;
+  });
+  get derived(): {
+    readonly cssClassName: CssClassName;
+  };
+  toJSON(): CssMotionDefinition & {
+    name: string;
+  };
+}
+declare class JsMotionDef {
+  readonly runtime: "js";
+  readonly name: string;
+  readonly initial?: MotionStateKeyframe;
+  readonly animate?: MotionStateKeyframe;
+  readonly exit?: MotionStateKeyframe;
+  readonly transition?: MotionTransition;
+  readonly whileHover?: MotionStateKeyframe;
+  readonly whileTap?: MotionStateKeyframe;
+  constructor(args: {
+    name: string;
+    definition: JsMotionDefinition;
+  });
+  toJSON(): JsMotionDefinition & {
+    name: string;
+  };
+}
+type MotionDef = CssMotionDef | JsMotionDef; //#endregion
+//#endregion
+export { CssMotionDef, JsMotionDef, MotionDef };

package/dist/config/dist/MotionDef.js

@@ -0,0 +1,97 @@
+import { cssClassName } from "./brands.js";
+import { compact, kebabCase } from "./entity-utils.js";
+//#region ../config/dist/MotionDef.js
+/**
+* `MotionDef` — animation presets, discriminated by `runtime`.
+*
+* `CssMotionDef` carries the CSS keyframes + transition for the CSS
+* runtime and exposes a derived CSS class name. `JsMotionDef` carries
+* raw keyframe state for a JS animation library (motion-one / framer)
+* and has no `.derived` — the consumer reads authored state directly.
+*/
+var CssMotionDef = class {
+	runtime = "css";
+	name;
+	keyframes;
+	transition;
+	animationDuration;
+	animationTimingFunction;
+	animationDelay;
+	animationIterationCount;
+	animationDirection;
+	animationFillMode;
+	animationPlayState;
+	reducedMotion;
+	#derived;
+	constructor(args) {
+		const d = args.definition;
+		this.name = args.name;
+		this.keyframes = d.keyframes;
+		this.transition = d.transition;
+		this.animationDuration = d.animationDuration;
+		this.animationTimingFunction = d.animationTimingFunction;
+		this.animationDelay = d.animationDelay;
+		this.animationIterationCount = d.animationIterationCount;
+		this.animationDirection = d.animationDirection;
+		this.animationFillMode = d.animationFillMode;
+		this.animationPlayState = d.animationPlayState;
+		this.reducedMotion = d.reducedMotion === "none" ? "none" : void 0;
+	}
+	get derived() {
+		if (!this.#derived) this.#derived = { cssClassName: cssClassName(`motion-${kebabCase(this.name)}`) };
+		return this.#derived;
+	}
+	toJSON() {
+		return {
+			name: this.name,
+			runtime: "css",
+			keyframes: this.keyframes,
+			...compact({
+				transition: this.transition,
+				animationDuration: this.animationDuration,
+				animationTimingFunction: this.animationTimingFunction,
+				animationDelay: this.animationDelay,
+				animationIterationCount: this.animationIterationCount,
+				animationDirection: this.animationDirection,
+				animationFillMode: this.animationFillMode,
+				animationPlayState: this.animationPlayState,
+				reducedMotion: this.reducedMotion
+			})
+		};
+	}
+};
+var JsMotionDef = class {
+	runtime = "js";
+	name;
+	initial;
+	animate;
+	exit;
+	transition;
+	whileHover;
+	whileTap;
+	constructor(args) {
+		this.name = args.name;
+		this.initial = args.definition.initial;
+		this.animate = args.definition.animate;
+		this.exit = args.definition.exit;
+		this.transition = args.definition.transition;
+		this.whileHover = args.definition.whileHover;
+		this.whileTap = args.definition.whileTap;
+	}
+	toJSON() {
+		return {
+			name: this.name,
+			runtime: "js",
+			...compact({
+				initial: this.initial,
+				animate: this.animate,
+				exit: this.exit,
+				transition: this.transition,
+				whileHover: this.whileHover,
+				whileTap: this.whileTap
+			})
+		};
+	}
+};
+//#endregion
+export { CssMotionDef, JsMotionDef };