@yahoo/uds-v5-wip 1.61.0 → 1.62.0

package/dist/config/dist/createConfig.js

@@ -1,503 +0,0 @@
-import { kebabCase } from "../../utils/dist/string-utils/kebabCase.js";
-import { safeTokenName } from "../../utils/dist/string-utils/cssVar.js";
-import "../../utils/dist/index.js";
-import { sniffTokenTypeFromValue } from "./sniffTokenType.js";
-import { resolveStyleProp } from "./resolveStyleProp.js";
-import { mergeAtomic } from "./merge-utils.js";
-import { setRegisteredComposites, setRegisteredStyleProps } from "./runtime-registry.js";
-//#region ../config/dist/createConfig.js
-/**
-* Convert the authored object-keyed input into the internal `ModeGroup[]` shape.
-* Derives `_${optionKey}` modifiers when no explicit `modifier` is provided.
-* Never sets `default: true` — the new API has no concept of a default option;
-* downstream consumers treat "no option active" as the implicit default.
-*/
-function convertModesInputToGroups(input) {
-	const groups = [];
-	for (const [setKey, setValue] of Object.entries(input)) {
-		const options = [];
-		for (const [optionKey, optionValue] of Object.entries(setValue.options)) {
-			const option = {
-				name: optionKey,
-				modifier: optionValue.modifier ?? `_${optionKey}`
-			};
-			if (optionValue.label !== void 0) option.label = optionValue.label;
-			if (optionValue.css !== void 0) option.css = optionValue.css;
-			if (optionValue.media !== void 0) option.media = optionValue.media;
-			options.push(option);
-		}
-		const group = {
-			name: setKey,
-			options
-		};
-		if (setValue.label !== void 0) group.label = setValue.label;
-		groups.push(group);
-	}
-	return groups;
-}
-/** Build a structured token reference object from atomic tokens */
-function buildTokenReference(atomic, configPrefix) {
-	const result = Object.create(null);
-	for (const token of atomic) {
-		const varPrefix = token.cssPrefix ?? token.properties[0];
-		const tokenEntries = Object.create(null);
-		for (const t of token.tokens) {
-			const safeName = safeTokenName(t.name);
-			const cssVarName = configPrefix ? `--${configPrefix}-${varPrefix}-${safeName}` : `--${varPrefix}-${safeName}`;
-			tokenEntries[t.name] = `var(${cssVarName})`;
-		}
-		for (const prop of token.properties) {
-			if (!result[prop]) result[prop] = Object.create(null);
-			Object.assign(result[prop], tokenEntries);
-		}
-		if (varPrefix) {
-			if (!result[varPrefix]) result[varPrefix] = Object.create(null);
-			Object.assign(result[varPrefix], tokenEntries);
-		}
-		if (token.namespace && token.namespace !== varPrefix) {
-			if (!result[token.namespace]) result[token.namespace] = Object.create(null);
-			Object.assign(result[token.namespace], tokenEntries);
-		}
-	}
-	return result;
-}
-/** Build a structured composite-styles reference object for use in defineModifiers context */
-function buildCompositeStylesReference(compositeStyles) {
-	const result = {};
-	for (const [groupName, def] of Object.entries(compositeStyles)) {
-		result[groupName] = {};
-		for (const valueName of Object.keys(def.styles)) result[groupName][valueName] = { className: `${groupName}-${safeTokenName(valueName)}` };
-	}
-	return result;
-}
-/**
-* Resolve `{composite/<group>/<value>}` brace-refs in a modifier `selector`
-* string. Each ref expands to a CSS container style query targeting the
-* composite's custom-property marker:
-*
-*   `{composite/elevation/1}`
-*   →  `@container style(--uds-composite-elevation: 1)`
-*
-* Multiple refs in the same string are supported. Unknown refs (composite
-* group not in config, or value not in that group's styles) pass through
-* unchanged so the caller can spot the typo at use time. See [[UDS-1644]].
-*/
-const COMPOSITE_REF_PATTERN = /\{composite\/([^/{}]+)\/([^/{}]+)\}/g;
-function resolveCompositeRefsInSelector(selector, compositeStyles) {
-	return selector.replace(COMPOSITE_REF_PATTERN, (raw, groupName, valueName) => {
-		const def = compositeStyles[groupName];
-		if (!def || !def.styles[valueName]) return raw;
-		return `@container style(--uds-composite-${safeTokenName(groupName)}: ${safeTokenName(valueName)})`;
-	});
-}
-/**
-* Convert a VarGroupDef into AtomicToken tokens, extracting modifier overrides.
-*
-* Also extracts group-level metadata:
-* - A top-level `$type` on the group → `groupType`
-* - A top-level `$description` on the group → `groupDescription`
-* - A `$type` on an individual token → `type` on that token (overrides group)
-*
-* Metadata keys (`$type`, `$description`) are filtered out of the emitted tokens.
-*/
-function varGroupToTokens(varGroup, knownModifiers) {
-	let groupType;
-	let groupDescription;
-	const tokens = [];
-	for (const [tokenName, rawDef] of Object.entries(varGroup)) if (tokenName === "$type" && typeof rawDef === "string") groupType = rawDef;
-	else if (tokenName === "$description" && typeof rawDef === "string") groupDescription = rawDef;
-	for (const [tokenName, rawDef] of Object.entries(varGroup)) {
-		if (tokenName === "$type" || tokenName === "$description") continue;
-		if (rawDef == null || typeof rawDef !== "object") continue;
-		const tokenDef = rawDef;
-		const modifiers = {};
-		for (const [key, val] of Object.entries(tokenDef)) {
-			if (key === "value" || key === "$type" || val === void 0) continue;
-			if (key.startsWith("_") && knownModifiers.has(key)) modifiers[key] = val;
-		}
-		const value = tokenDef.value;
-		let perTokenType = tokenDef.$type;
-		if (!perTokenType && groupType && typeof value === "string") {
-			const sniffed = sniffTokenTypeFromValue(value);
-			if (sniffed && sniffed !== groupType) perTokenType = sniffed;
-		}
-		tokens.push({
-			name: tokenName,
-			value,
-			...perTokenType ? { type: perTokenType } : {},
-			...Object.keys(modifiers).length > 0 ? { modifiers } : {}
-		});
-	}
-	return {
-		tokens,
-		groupType,
-		groupDescription
-	};
-}
-/**
-* For each var namespace, derive the list of style-prop names that consume
-* it by inverting `registerStyleProps(...).values`. A styleProp with
-* `values: ['{bg}', '{global}']` is recorded as consuming `bg` and `global`;
-* a `{ ref: '{bg}', namespace: 'background' }` namespaced ref counts the
-* same. Token-key refs like `'{spacing.4}'` also count toward `spacing`.
-*/
-function buildNamespaceConsumers(styleProps) {
-	const result = /* @__PURE__ */ new Map();
-	if (!styleProps) return result;
-	const addConsumer = (namespace, propName) => {
-		const list = result.get(namespace);
-		if (!list) {
-			result.set(namespace, [propName]);
-			return;
-		}
-		if (!list.includes(propName)) list.push(propName);
-	};
-	const namespaceOf = (entry) => {
-		if (typeof entry === "object" && entry !== null && entry.__kind === "tokenGroup" && typeof entry.group === "string") {
-			const group = entry.group;
-			const slash = group.indexOf("/");
-			return slash > 0 ? group.slice(0, slash) : group;
-		}
-		if (typeof entry === "object" && entry !== null && "ref" in entry && typeof entry.ref === "object") return namespaceOf(entry.ref);
-	};
-	for (const [propName, prop] of Object.entries(styleProps)) for (const entry of prop.values ?? []) {
-		const ns = namespaceOf(entry);
-		if (ns) addConsumer(ns, propName);
-	}
-	return result;
-}
-/**
-* Synthesize AtomicToken[] from defineVars + registerStyleProps data. For
-* each var namespace, emits an AtomicToken group whose `properties` list is
-* the set of style props that reference that namespace (or any key inside
-* it) via their `values` field. Replaces the older
-* `synthesizeAtomicFromScopesAndVars` once a config has retired
-* `defineScopes` in favor of per-prop `defineStyleProp({ values })`.
-*/
-function synthesizeAtomicFromVarsAndStyleProps(vars, styleProps, modes) {
-	const knownModifiers = /* @__PURE__ */ new Set();
-	for (const mode of modes) for (const option of mode.options) knownModifiers.add(option.modifier);
-	const consumers = buildNamespaceConsumers(styleProps);
-	const result = [];
-	for (const [namespace, varGroup] of Object.entries(vars)) {
-		const { tokens, groupType, groupDescription } = varGroupToTokens(varGroup, knownModifiers);
-		const properties = consumers.get(namespace) ?? [];
-		const cssPfx = kebabCase(namespace);
-		result.push({
-			properties,
-			tokens,
-			namespace,
-			cssPrefix: cssPfx,
-			...groupType ? { type: groupType } : {},
-			...groupDescription ? { description: groupDescription } : {}
-		});
-	}
-	return result;
-}
-/** Extract the raw config data from a builder instance */
-function resolveConfig(config) {
-	let configData;
-	if (config._data) configData = config._data;
-	else configData = {
-		modes: config.modes ?? [],
-		modifiers: config.modifiers ?? [],
-		atomic: [],
-		compositeStyles: config.compositeStyles ?? {},
-		motion: config.motion ?? {},
-		components: {},
-		globalStyles: config.globalStyles ?? {},
-		preflight: config.preflight ?? true,
-		prefix: config.prefix ?? "uds",
-		buildOptions: config.buildOptions,
-		examples: config.examples,
-		designPrinciples: config.designPrinciples,
-		vars: config.vars,
-		styleProps: config.styleProps
-	};
-	if (configData.vars) {
-		const synthesized = synthesizeAtomicFromVarsAndStyleProps(configData.vars, configData.styleProps, configData.modes);
-		const atomic = mergeAtomic(configData.atomic, synthesized, "merge");
-		configData = {
-			...configData,
-			atomic
-		};
-	}
-	if (configData.styleProps) {
-		const entries = Object.entries(configData.styleProps);
-		if (entries.length > 0) {
-			const resolved = entries.map(([propName, prop]) => resolveStyleProp(propName, prop, configData));
-			configData = {
-				...configData,
-				resolvedStyleProps: resolved
-			};
-		}
-		if (configData.styleProps) setRegisteredStyleProps(configData.styleProps);
-		if (configData.compositeStyles) setRegisteredComposites(configData.compositeStyles);
-	}
-	return configData;
-}
-function createConfigBuilder(data, extensions) {
-	const next = (overrides = {}) => createConfigBuilder({
-		...data,
-		...overrides
-	}, extensions);
-	return {
-		...extensions,
-		_data: data,
-		modes: data.modes,
-		atomic: data.atomic,
-		components: data.components,
-		preflight(enabled = true) {
-			return next({ preflight: enabled });
-		},
-		prefix(value) {
-			return next({ prefix: value });
-		},
-		buildOptions(options) {
-			return next({ buildOptions: options });
-		},
-		defineModes(params) {
-			const newGroups = convertModesInputToGroups(params);
-			return createConfigBuilder({
-				...data,
-				modes: [...data.modes, ...newGroups]
-			}, extensions);
-		},
-		defineModifiers(params) {
-			const resolvedWithComposites = (typeof params === "function" ? params({
-				tokens: buildTokenReference(data.atomic, data.prefix),
-				compositeStyles: buildCompositeStylesReference(data.compositeStyles)
-			}) : params).map((def) => ({
-				...def,
-				selector: resolveCompositeRefsInSelector(def.selector, data.compositeStyles)
-			}));
-			return createConfigBuilder({
-				...data,
-				modifiers: [...data.modifiers, ...resolvedWithComposites]
-			}, extensions);
-		},
-		defineCompositeStyles(params) {
-			const tokenReference = buildTokenReference(data.atomic, data.prefix);
-			const resolved = typeof params === "function" ? params({ tokens: tokenReference }) : params;
-			const allCompositeStyles = {
-				...data.compositeStyles,
-				...resolved
-			};
-			const edges = /* @__PURE__ */ new Map();
-			for (const [groupName, def] of Object.entries(allCompositeStyles)) {
-				const targets = /* @__PURE__ */ new Set();
-				for (const bag of Object.values(def.styles)) if (bag && typeof bag === "object") {
-					for (const key of Object.keys(bag)) if (key in allCompositeStyles) targets.add(key);
-				}
-				if (targets.size > 0) edges.set(groupName, targets);
-			}
-			const visited = /* @__PURE__ */ new Set();
-			const stack = /* @__PURE__ */ new Set();
-			const path = [];
-			function dfs(node) {
-				if (stack.has(node)) {
-					const cycleStart = path.indexOf(node);
-					throw new Error(`Circular composite style reference: ${[...path.slice(cycleStart), node].join(" → ")}`);
-				}
-				if (visited.has(node)) return;
-				visited.add(node);
-				stack.add(node);
-				path.push(node);
-				const neighbors = edges.get(node);
-				if (neighbors) for (const neighbor of neighbors) dfs(neighbor);
-				path.pop();
-				stack.delete(node);
-			}
-			for (const node of edges.keys()) dfs(node);
-			return createConfigBuilder({
-				...data,
-				compositeStyles: {
-					...data.compositeStyles,
-					...resolved
-				}
-			}, extensions);
-		},
-		registerComposites(composites) {
-			const resolved = {};
-			for (const [name, value] of Object.entries(composites)) resolved[name] = {
-				label: value.label,
-				...value.description !== void 0 ? { description: value.description } : {},
-				styles: value.styles
-			};
-			const allCompositeStyles = {
-				...data.compositeStyles,
-				...resolved
-			};
-			const edges = /* @__PURE__ */ new Map();
-			for (const [groupName, def] of Object.entries(allCompositeStyles)) {
-				const targets = /* @__PURE__ */ new Set();
-				for (const bag of Object.values(def.styles)) if (bag && typeof bag === "object") {
-					for (const key of Object.keys(bag)) if (key in allCompositeStyles) targets.add(key);
-				}
-				if (targets.size > 0) edges.set(groupName, targets);
-			}
-			const visited = /* @__PURE__ */ new Set();
-			const stack = /* @__PURE__ */ new Set();
-			const path = [];
-			function dfs(node) {
-				if (stack.has(node)) {
-					const cycleStart = path.indexOf(node);
-					throw new Error(`Circular composite style reference: ${[...path.slice(cycleStart), node].join(" → ")}`);
-				}
-				if (visited.has(node)) return;
-				visited.add(node);
-				stack.add(node);
-				path.push(node);
-				const neighbors = edges.get(node);
-				if (neighbors) for (const neighbor of neighbors) dfs(neighbor);
-				path.pop();
-				stack.delete(node);
-			}
-			for (const node of edges.keys()) dfs(node);
-			return createConfigBuilder({
-				...data,
-				compositeStyles: {
-					...data.compositeStyles,
-					...resolved
-				}
-			}, extensions);
-		},
-		registerStyleProps(props) {
-			const expanded = {};
-			for (const [propName, prop] of Object.entries(props)) {
-				expanded[propName] = prop;
-				if (prop.opacityPair) {
-					const sibling = {
-						kind: "styleProp",
-						cssProperty: prop.cssProperty,
-						classPrefix: "",
-						values: [prop.opacityPair.values],
-						arbitrary: void 0,
-						cssType: prop.cssType,
-						metadata: { label: prop.metadata?.label ? `${prop.metadata.label} opacity` : void 0 },
-						_pairedWith: propName,
-						_separator: prop.opacityPair.separator
-					};
-					expanded[prop.opacityPair.as] = sibling;
-				}
-			}
-			const mergedStyleProps = {
-				...data.styleProps ?? {},
-				...expanded
-			};
-			const updates = { styleProps: mergedStyleProps };
-			if (data.vars) updates.atomic = mergeAtomic([], synthesizeAtomicFromVarsAndStyleProps(data.vars, mergedStyleProps, data.modes ?? []), "override");
-			return next(updates);
-		},
-		registerComponents(configs) {
-			const normalized = {};
-			const instances = {};
-			for (const [name, entry] of Object.entries(configs)) {
-				const isBound = typeof entry === "function" && "__config" in entry;
-				const config = isBound ? entry.__config : entry;
-				Object.defineProperty(config, "__componentName", {
-					enumerable: false,
-					configurable: true,
-					writable: true,
-					value: name
-				});
-				normalized[name] = config;
-				if (isBound) instances[name] = entry;
-			}
-			return next({
-				components: {
-					...data.components,
-					...normalized
-				},
-				componentInstances: {
-					...data.componentInstances ?? {},
-					...instances
-				}
-			});
-		},
-		registerPreviews(previews) {
-			return next({ previews: {
-				...data.previews ?? {},
-				...previews
-			} });
-		},
-		defineMotion(presets) {
-			const tokenReference = buildTokenReference(data.atomic, data.prefix);
-			const resolved = typeof presets === "function" ? presets(tokenReference) : presets;
-			return createConfigBuilder({
-				...data,
-				motion: {
-					...data.motion,
-					...resolved
-				}
-			}, extensions);
-		},
-		defineGlobalStyles(params) {
-			const tokenReference = buildTokenReference(data.atomic, data.prefix);
-			const newGlobalStyles = typeof params === "function" ? params(tokenReference) : params;
-			return next({ globalStyles: {
-				...data.globalStyles,
-				...newGlobalStyles
-			} });
-		},
-		defineDesignPrinciples(principles) {
-			return next({ designPrinciples: [...data.designPrinciples ?? [], ...principles] });
-		},
-		extend(ext) {
-			return createConfigBuilder(data, {
-				...extensions,
-				...ext
-			});
-		},
-		defineVars(vars) {
-			const merged = { ...data.vars };
-			for (const [namespace, group] of Object.entries(vars)) merged[namespace] = {
-				...merged[namespace] ?? {},
-				...group
-			};
-			const synthesized = synthesizeAtomicFromVarsAndStyleProps(merged, data.styleProps, data.modes ?? []);
-			const updates = {
-				vars: merged,
-				atomic: mergeAtomic(data.atomic, synthesized, "merge")
-			};
-			return createConfigBuilder({
-				...data,
-				...updates
-			}, extensions);
-		}
-	};
-}
-function interpolate(config) {
-	return {
-		__type: "interpolate",
-		output: config.output,
-		extrapolate: config.extrapolate ?? "extend"
-	};
-}
-/**
-* Convert a px value to rem (assuming 16px base).
-*
-* @example rem(14) // '0.875rem'
-*/
-function rem(px) {
-	return `${px / 16}rem`;
-}
-function darker(color, amount) {
-	return `color-mix(in oklch, ${color}, light-dark(black, white) ${amount}%)`;
-}
-function lighter(color, amount) {
-	return `color-mix(in oklch, ${color}, light-dark(white, black) ${amount}%)`;
-}
-const uds = createConfigBuilder({
-	atomic: [],
-	modes: [],
-	modifiers: [],
-	compositeStyles: {},
-	motion: {},
-	components: {},
-	globalStyles: {},
-	preflight: true,
-	prefix: "uds"
-});
-//#endregion
-export { buildCompositeStylesReference, buildTokenReference, convertModesInputToGroups, createConfigBuilder, darker, interpolate, lighter, rem, resolveConfig, uds };

package/dist/config/dist/createStyler.d.ts

@@ -1,35 +0,0 @@
-import { UdsConfigData } from "./createConfig.js";
-
-//#region ../config/dist/createStyler.d.ts
-//#region src/createStyler.d.ts
-/**
- * A styler bound to a resolved config's style-prop registry. Takes a
- * props object and returns the className string. Empty string when
- * no prop matches a registered style prop.
- */
-type Styler = (props: Record<string, unknown>) => string;
-/**
- * Bind a styler to a resolved config. Reads the registered style-
- * prop registry once; the returned function does just per-call
- * className composition.
- *
- *     // codegen / build pipeline
- *     const getStyles = createStyler(resolveConfig(udsBuilder));
- *     for (const site of scannedJsxSites) {
- *       const merged = mergeComponentDefaults(site.config, site.props);
- *       safelist.add(getStyles(merged));
- *     }
- *
- * `resolvedConfig` is the output of `resolveConfig(udsBuilder)`. The
- * styler closes over the registry under either of two fields:
- *
- *   - `resolvedStyleProps` — the canonical resolved registry the
- *     codegen + runtime consume; entries carry `propName` +
- *     `classPrefix`.
- *   - `styleProps` — fallback to the unresolved map when
- *     `resolvedStyleProps` isn't populated (test configs that skip
- *     the full resolver).
- */
-declare function createStyler(resolvedConfig: UdsConfigData): Styler; //#endregion
-//#endregion
-export { Styler, createStyler };

package/dist/config/dist/createStyler.js

@@ -1,93 +0,0 @@
-import { buildStylePropClassName } from "./className.js";
-//#region ../config/dist/createStyler.js
-/**
-* **NEW-API ONLY** — factory that produces a styler bound to a
-* resolved config's registered style props. The returned function
-* takes a props object and returns the className string for those
-* style-prop values.
-*
-*     const getStyles = createStyler(resolveConfig(udsBuilder));
-*     getStyles({ bg: 'brand', gap: '4' });
-*     // → 'bg-brand gap-4'
-*
-* Parity with the legacy `getStyles` from `@uds/core`, but the lookup
-* is sourced from the user's `.registerStyleProps({...})` registry
-* (via `resolveConfig`) instead of `@uds/core`'s hardcoded
-* `propMappings` table. Registering a style prop is enough to make
-* it work — no edits to `@uds/core`.
-*
-* Used by:
-*
-*   - `@uds/codegen/css/extractClasses` (build-time CSS scanner) —
-*     populates the Tailwind safelist with every class the runtime
-*     can produce. The scanner walks JSX call sites, merges the
-*     component's `defaultProps` into the JSX props, and passes the
-*     merged shape here.
-*   - Custom tooling that wants "what would the runtime render?"
-*     without going through React.
-*
-* Both the styler and `bindRender` (the runtime) call the same
-* `buildStylePropClassName` helper in `./className.ts` — that's the
-* load-bearing invariant: identical class strings for the same
-* inputs.
-*
-* Scope: only style-prop bindings the user registered. Markers
-* (`bool()` / `enums()`), `ForwardBinding`, compound variants, and
-* `_<modifier>` props don't flow through here — they're handled by
-* codegen via dedicated emission paths (component-utility classes,
-* modifier-prefixed @utility blocks).
-*/
-/**
-* Bind a styler to a resolved config. Reads the registered style-
-* prop registry once; the returned function does just per-call
-* className composition.
-*
-*     // codegen / build pipeline
-*     const getStyles = createStyler(resolveConfig(udsBuilder));
-*     for (const site of scannedJsxSites) {
-*       const merged = mergeComponentDefaults(site.config, site.props);
-*       safelist.add(getStyles(merged));
-*     }
-*
-* `resolvedConfig` is the output of `resolveConfig(udsBuilder)`. The
-* styler closes over the registry under either of two fields:
-*
-*   - `resolvedStyleProps` — the canonical resolved registry the
-*     codegen + runtime consume; entries carry `propName` +
-*     `classPrefix`.
-*   - `styleProps` — fallback to the unresolved map when
-*     `resolvedStyleProps` isn't populated (test configs that skip
-*     the full resolver).
-*/
-function createStyler(resolvedConfig) {
-	const classPrefixByPropName = buildClassPrefixLookup(resolvedConfig);
-	return (props) => classNameFor(props, classPrefixByPropName);
-}
-/**
-* Per-styler resolved style-prop lookup. Keys are JSX-prop names
-* (e.g. `bg`, `padding`); values are the `classPrefix` the style
-* prop registered with.
-*
-* `resolvedStyleProps` (the canonical shape) takes precedence;
-* `styleProps` (the unresolved map) is consulted only when a prop
-* isn't already present — that keeps test configs that skip the
-* full resolver working without overriding the canonical entries.
-*/
-function buildClassPrefixLookup(config) {
-	const out = {};
-	for (const entry of config.resolvedStyleProps ?? []) if (entry.propName) out[entry.propName] = entry.classPrefix ?? "";
-	for (const [propName, styleProp] of Object.entries(config.styleProps ?? {})) if (!(propName in out)) out[propName] = styleProp.classPrefix ?? "";
-	return out;
-}
-function classNameFor(props, classPrefixByPropName) {
-	const classNames = [];
-	for (const [propName, value] of Object.entries(props)) {
-		const classPrefix = classPrefixByPropName[propName];
-		if (classPrefix === void 0) continue;
-		const className = buildStylePropClassName({ classPrefix }, value);
-		if (className) classNames.push(className);
-	}
-	return classNames.join(" ");
-}
-//#endregion
-export { createStyler };