@yahoo/uds-v5-wip 1.61.0 → 1.62.0

package/dist/config/dist/propertyAcceptedTypes.js

@@ -1,220 +0,0 @@
-//#region ../config/dist/propertyAcceptedTypes.js
-const LENGTH_PCT = { types: [
-	"length",
-	"percentage",
-	"length-percentage"
-] };
-const LENGTH_PCT_AUTO = {
-	types: [
-		"length",
-		"percentage",
-		"length-percentage"
-	],
-	literals: ["auto"]
-};
-const SIZING = {
-	types: [
-		"length",
-		"percentage",
-		"length-percentage"
-	],
-	literals: [
-		"auto",
-		"min-content",
-		"max-content",
-		"fit-content"
-	]
-};
-const SIZING_WITH_NONE = {
-	types: [
-		"length",
-		"percentage",
-		"length-percentage"
-	],
-	literals: [
-		"auto",
-		"min-content",
-		"max-content",
-		"fit-content",
-		"none"
-	]
-};
-const LENGTH_ONLY = { types: ["length"] };
-const COLOR_ONLY = {
-	types: ["color"],
-	literals: ["transparent", "currentColor"]
-};
-const TIME_ONLY = { types: ["time"] };
-const NUMBER_ONLY = { types: ["number", "integer"] };
-const ANGLE_ONLY = { types: ["angle"] };
-/**
-* CSS-wide keywords — accepted on every CSS property per the CSS spec.
-* Synthesizer marks these as `$type: 'string'` so they don't match the
-* property's type-based accept rule; they pass via this set instead.
-*/
-const CSS_WIDE_KEYWORDS = new Set([
-	"inherit",
-	"initial",
-	"unset",
-	"revert",
-	"revert-layer",
-	"transparent",
-	"currentColor",
-	"currentcolor"
-]);
-const LENGTH_PCT_PROPS = [
-	"gap",
-	"column-gap",
-	"row-gap",
-	"padding",
-	"padding-top",
-	"padding-right",
-	"padding-bottom",
-	"padding-left",
-	"padding-block",
-	"padding-inline",
-	"padding-inline-start",
-	"padding-inline-end",
-	"scroll-margin",
-	"scroll-margin-top",
-	"scroll-margin-bottom",
-	"scroll-margin-block",
-	"scroll-margin-inline",
-	"scroll-margin-inline-start",
-	"scroll-margin-inline-end",
-	"scroll-padding",
-	"scroll-padding-top",
-	"scroll-padding-bottom",
-	"scroll-padding-block",
-	"scroll-padding-inline",
-	"scroll-padding-inline-start",
-	"scroll-padding-inline-end",
-	"border-radius",
-	"border-top-left-radius",
-	"border-top-right-radius",
-	"border-bottom-left-radius",
-	"border-bottom-right-radius",
-	"border-start-start-radius",
-	"border-start-end-radius",
-	"border-end-start-radius",
-	"border-end-end-radius",
-	"text-indent",
-	"font-size"
-];
-const LENGTH_PCT_AUTO_PROPS = [
-	"margin",
-	"margin-top",
-	"margin-right",
-	"margin-bottom",
-	"margin-left",
-	"margin-block",
-	"margin-inline",
-	"margin-inline-start",
-	"margin-inline-end",
-	"top",
-	"right",
-	"bottom",
-	"left",
-	"inset",
-	"inset-block",
-	"inset-inline"
-];
-const SIZING_PROPS = [
-	"width",
-	"height",
-	"min-width",
-	"min-height"
-];
-const SIZING_WITH_NONE_PROPS = ["max-width", "max-height"];
-const LENGTH_ONLY_PROPS = [
-	"border-width",
-	"border-top-width",
-	"border-right-width",
-	"border-bottom-width",
-	"border-left-width",
-	"border-block-width",
-	"border-inline-width",
-	"border-inline-start-width",
-	"border-inline-end-width",
-	"outline-width",
-	"outline-offset",
-	"border-spacing",
-	"letter-spacing",
-	"text-underline-offset",
-	"text-decoration-thickness"
-];
-const COLOR_PROPS = [
-	"color",
-	"background-color",
-	"border-color",
-	"border-top-color",
-	"border-right-color",
-	"border-bottom-color",
-	"border-left-color",
-	"border-block-color",
-	"border-inline-color",
-	"border-inline-start-color",
-	"border-inline-end-color",
-	"outline-color",
-	"text-decoration-color",
-	"caret-color",
-	"fill",
-	"stroke"
-];
-const TIME_PROPS = ["transition-duration", "transition-delay"];
-const NUMBER_PROPS = [
-	"flex-grow",
-	"flex-shrink",
-	"order",
-	"z-index",
-	"-webkit-line-clamp"
-];
-const ANGLE_PROPS = ["rotate"];
-const PROPERTY_ACCEPTED_TYPES = new Map([
-	...LENGTH_PCT_PROPS.map((p) => [p, LENGTH_PCT]),
-	...LENGTH_PCT_AUTO_PROPS.map((p) => [p, LENGTH_PCT_AUTO]),
-	...SIZING_PROPS.map((p) => [p, SIZING]),
-	...SIZING_WITH_NONE_PROPS.map((p) => [p, SIZING_WITH_NONE]),
-	...LENGTH_ONLY_PROPS.map((p) => [p, LENGTH_ONLY]),
-	...COLOR_PROPS.map((p) => [p, COLOR_ONLY]),
-	...TIME_PROPS.map((p) => [p, TIME_ONLY]),
-	...NUMBER_PROPS.map((p) => [p, NUMBER_ONLY]),
-	...ANGLE_PROPS.map((p) => [p, ANGLE_ONLY]),
-	["font-weight", { types: [
-		"font-weight",
-		"number",
-		"integer"
-	] }],
-	["font-family", { types: ["font-family"] }],
-	["transition-timing-function", { types: ["easing-function"] }],
-	["box-shadow", {
-		types: ["shadow"],
-		literals: ["none"]
-	}],
-	["text-shadow", {
-		types: ["shadow"],
-		literals: ["none"]
-	}],
-	["list-style-image", { types: ["url", "image"] }],
-	["aspect-ratio", { types: ["ratio", "number"] }],
-	["opacity", { types: ["number", "percentage"] }],
-	["z-index", {
-		types: ["integer", "number"],
-		literals: ["auto"]
-	}]
-]);
-/**
-* Whether a token with the given detected value type AND raw string value
-* is accepted by the CSS property. Returns `true` for any property not in
-* the table.
-*/
-function isTokenAcceptedByProperty(cssProperty, valueType, rawValue) {
-	if (CSS_WIDE_KEYWORDS.has(rawValue)) return true;
-	const entry = PROPERTY_ACCEPTED_TYPES.get(cssProperty);
-	if (!entry) return true;
-	if (valueType && entry.types?.includes(valueType)) return true;
-	if (entry.literals?.includes(rawValue)) return true;
-	return false;
-}
-//#endregion
-export { PROPERTY_ACCEPTED_TYPES, isTokenAcceptedByProperty };

package/dist/config/dist/resolveCompoundProps.d.ts

@@ -1,65 +0,0 @@
-import { CompoundPropsEntry, HiddenMarker, LayerInput } from "./component-config.js";
-
-//#region ../config/dist/resolveCompoundProps.d.ts
-//#region src/resolveCompoundProps.d.ts
-/**
- * Per-layer entry on the resolved overrides map. Either a flat style/
- * prop bag (for style overrides) or the hide marker. Downstream
- * consumers can branch on `__kind === 'hidden'` to pick between
- * `display: none` and stripping the layer from the rendered tree.
- */
-type ResolvedLayerOverride = HiddenMarker | Record<string, unknown>;
-/**
- * Per-layer map of overrides that should win at the given active-prop
- * combination.
- */
-type ResolvedCompoundOverrides = Record<string, ResolvedLayerOverride>;
-/**
- * Find every `compoundProps` entry whose `when` clause is satisfied by
- * the active props and merge them into a single per-layer override map.
- *
- * Conflict resolution:
- *  - For style-map overrides, per-property: higher `specificity(when)`
- *    wins; tie-break is later position in source order.
- *  - For a `hidden()` layer marker, the layer-level decision: most-
- *    specific hidden marker wins; tie-break is later source order. The
- *    marker takes precedence over style overrides at the same layer,
- *    since a hidden layer's styles are moot anyway.
- *
- * Returns an empty object when nothing matches — callers can treat it
- * as a no-op without a separate `undefined` check.
- */
-declare function resolveCompoundProps<TLayers extends Record<string, LayerInput>, TProps extends Record<string, any> = Record<string, any>>(compoundProps: readonly CompoundPropsEntry<TLayers, TProps>[] | undefined, activeProps: Record<string, unknown>): ResolvedCompoundOverrides;
-/**
- * Fold a `resolveCompoundProps` result into an existing per-layer
- * bundle of resolved style-prop values (the output of the enum/bool
- * merge for the active prop combination).
- *
- * A `HiddenMarker` on a layer rewrites that layer's bundle to
- * `{ __hidden: true }` — a sentinel the render fn checks at the JSX
- * site to skip rendering the layer entirely, rather than emitting a
- * `display: none` declaration that would leave a layout-occupying
- * DOM node. Use {@link isLayerHidden} for the check:
- *
- *     .render(({ props }) => (
- *       <a {...props.root}>
- *         {!isLayerHidden(props.endIcon) && <span {...props.endIcon} />}
- *       </a>
- *     ))
- *
- * Style-map overrides merge per-key into the existing bundle. The
- * input bundles are not mutated — every layer that receives any
- * override is copied first.
- */
-declare function applyCompoundProps(layerBundles: Record<string, Record<string, unknown>>, overrides: ResolvedCompoundOverrides): Record<string, Record<string, unknown>>;
-/**
- * Type guard used by render fns to skip rendering a hidden layer:
- *
- *     {!isLayerHidden(props.endIcon) && <span {...props.endIcon} />}
- *
- * Returns `true` when the bundle carries the `__hidden: true`
- * sentinel written by `applyCompoundProps`.
- */
-declare function isLayerHidden(bundle: Record<string, unknown> | undefined): boolean; //#endregion
-//#endregion
-export { ResolvedCompoundOverrides, ResolvedLayerOverride, applyCompoundProps, isLayerHidden, resolveCompoundProps };

package/dist/config/dist/resolveCompoundProps.js

@@ -1,120 +0,0 @@
-//#region ../config/dist/resolveCompoundProps.js
-function whenMatches(when, activeProps) {
-	for (const key in when) {
-		if (!Object.hasOwn(when, key)) continue;
-		if (activeProps[key] !== when[key]) return false;
-	}
-	return true;
-}
-function specificity(when) {
-	let count = 0;
-	for (const key in when) if (Object.hasOwn(when, key)) count++;
-	return count;
-}
-function isHiddenMarker(value) {
-	return typeof value === "object" && value !== null && value.__kind === "hidden";
-}
-/**
-* Find every `compoundProps` entry whose `when` clause is satisfied by
-* the active props and merge them into a single per-layer override map.
-*
-* Conflict resolution:
-*  - For style-map overrides, per-property: higher `specificity(when)`
-*    wins; tie-break is later position in source order.
-*  - For a `hidden()` layer marker, the layer-level decision: most-
-*    specific hidden marker wins; tie-break is later source order. The
-*    marker takes precedence over style overrides at the same layer,
-*    since a hidden layer's styles are moot anyway.
-*
-* Returns an empty object when nothing matches — callers can treat it
-* as a no-op without a separate `undefined` check.
-*/
-function resolveCompoundProps(compoundProps, activeProps) {
-	if (!compoundProps || compoundProps.length === 0) return {};
-	const styleResolved = {};
-	const stylePropSpecificity = {};
-	const hiddenSpecificity = {};
-	for (const entry of compoundProps) {
-		if (!whenMatches(entry.when, activeProps)) continue;
-		const entrySpecificity = specificity(entry.when);
-		for (const layerName in entry.layers) {
-			if (!Object.hasOwn(entry.layers, layerName)) continue;
-			const layerOverride = entry.layers[layerName];
-			if (!layerOverride) continue;
-			if (isHiddenMarker(layerOverride)) {
-				const prev = hiddenSpecificity[layerName];
-				if (prev === void 0 || entrySpecificity >= prev) hiddenSpecificity[layerName] = entrySpecificity;
-				continue;
-			}
-			const styleMap = layerOverride;
-			styleResolved[layerName] ??= {};
-			stylePropSpecificity[layerName] ??= {};
-			for (const propKey in styleMap) {
-				if (!Object.hasOwn(styleMap, propKey)) continue;
-				const prevSpecificity = stylePropSpecificity[layerName][propKey];
-				if (prevSpecificity === void 0 || entrySpecificity >= prevSpecificity) {
-					styleResolved[layerName][propKey] = styleMap[propKey];
-					stylePropSpecificity[layerName][propKey] = entrySpecificity;
-				}
-			}
-		}
-	}
-	const resolved = {};
-	for (const layerName in styleResolved) resolved[layerName] = styleResolved[layerName];
-	for (const layerName in hiddenSpecificity) resolved[layerName] = { __kind: "hidden" };
-	return resolved;
-}
-/**
-* Fold a `resolveCompoundProps` result into an existing per-layer
-* bundle of resolved style-prop values (the output of the enum/bool
-* merge for the active prop combination).
-*
-* A `HiddenMarker` on a layer rewrites that layer's bundle to
-* `{ __hidden: true }` — a sentinel the render fn checks at the JSX
-* site to skip rendering the layer entirely, rather than emitting a
-* `display: none` declaration that would leave a layout-occupying
-* DOM node. Use {@link isLayerHidden} for the check:
-*
-*     .render(({ props }) => (
-*       <a {...props.root}>
-*         {!isLayerHidden(props.endIcon) && <span {...props.endIcon} />}
-*       </a>
-*     ))
-*
-* Style-map overrides merge per-key into the existing bundle. The
-* input bundles are not mutated — every layer that receives any
-* override is copied first.
-*/
-function applyCompoundProps(layerBundles, overrides) {
-	if (Object.keys(overrides).length === 0) return layerBundles;
-	const result = { ...layerBundles };
-	for (const layerName in overrides) {
-		if (!Object.hasOwn(overrides, layerName)) continue;
-		const override = overrides[layerName];
-		if (!override) continue;
-		if (isHiddenMarker(override)) {
-			result[layerName] = { __hidden: true };
-			continue;
-		}
-		const merged = { ...result[layerName] ?? {} };
-		for (const propKey in override) {
-			if (!Object.hasOwn(override, propKey)) continue;
-			merged[propKey] = override[propKey];
-		}
-		result[layerName] = merged;
-	}
-	return result;
-}
-/**
-* Type guard used by render fns to skip rendering a hidden layer:
-*
-*     {!isLayerHidden(props.endIcon) && <span {...props.endIcon} />}
-*
-* Returns `true` when the bundle carries the `__hidden: true`
-* sentinel written by `applyCompoundProps`.
-*/
-function isLayerHidden(bundle) {
-	return bundle?.__hidden === true;
-}
-//#endregion
-export { applyCompoundProps, isLayerHidden, resolveCompoundProps };

package/dist/config/dist/resolveStyleProp.d.ts

@@ -1,157 +0,0 @@
-import { CssValueTypeName } from "./types/css-values.js";
-import { ArbitrarySpec, StylePropMetadata } from "./defineStyleProp.js";
-import { TokenType } from "./types.js";
-import { UdsConfigData } from "./createConfig.js";
-
-//#region ../config/dist/resolveStyleProp.d.ts
-//#region src/resolveStyleProp.d.ts
-interface ResolvedToken {
-  /** The token's raw key, e.g. `'brand'`. */
-  readonly name: string;
-  /** Resolved CSS value, e.g. `'#1167f4'` or `'1rem'`. */
-  readonly value: string;
-  /** Detected CSS value type, used for filtering. `undefined` if not detectable. */
-  readonly valueType: CssValueTypeName | undefined;
-  /** The token group's namespace (or cssPrefix fallback) the token came from. */
-  readonly group: string;
-  /**
-   * Style-prop-local namespace, set only when the token was sourced via a
-   * `NamespacedTokenGroup` (`{ ref: tokenGroup('X'), namespace: 'Y' }`).
-   * Used to disambiguate when two groups feed the same prop and share keys.
-   */
-  readonly namespace?: string;
-  /**
-   * The user-facing key the consumer writes in JSX. For un-namespaced
-   * groups this is just `name`; for namespaced groups, `'${namespace}.${name}'`.
-   */
-  readonly qualifiedName: string;
-  /**
-   * The token name with characters that aren't class-name-safe replaced
-   * (e.g. `/` → `_`, `.` → `_`). Used as the trailing segment of generated
-   * `@utility` class names and CSS variable names. Mirrors
-   * `safeTokenName` from `@uds/utils`.
-   */
-  readonly safeName: string;
-  /**
-   * Full CSS variable reference for this token at config-build time, e.g.
-   * `'--uds-bg-brand'`. Built as `--{config.prefix}-{group.cssPrefix}-{safeName}`,
-   * falling back to omit the config prefix when it's empty.
-   */
-  readonly cssVar: string;
-  /**
-   * Per-modifier value overrides carried verbatim from the source
-   * `AtomicTokenValue`. Used by CSS-gen to emit mode override blocks
-   * (e.g. `.dark { --uds-bg-brand: ... }`).
-   */
-  readonly modifiers?: Record<string, string>;
-}
-interface ResolvedStyleProp {
-  /** The JSX prop name — the map key from `registerStyleProps({...})`. */
-  readonly propName: string;
-  /** The CSS property (or properties) this prop writes — passed through
-   *  verbatim from the source `defineStyleProp` input. Single string for
-   *  direct props, array for fan-out props (e.g. `borderRadiusStart` →
-   *  both start-side corners). Readers normalize at the call site
-   *  (`Array.isArray(p) ? p : [p]`) when iteration matters. */
-  readonly cssProperty: string | readonly string[];
-  readonly classPrefix: string;
-  /**
-   * Set on opacity-sibling entries to the JSX-prop name of the parent
-   * color prop they compose with (`bg` for `bgOpacity`). Authored via
-   * `.withOpacity({ as })` on the parent's `defineStyleProp`. Consumers
-   * use this to merge `bg="primary"` + `bgOpacity="75"` into a single
-   * `bg-primary_75` class.
-   */
-  readonly pairedWith?: string;
-  /**
-   * Class-name separator between the parent's token suffix and the
-   * opacity value (`bg-primary_75` vs. `bg-primary/75`). Only set when
-   * `pairedWith` is set. Defaults to `'_'` at the authoring layer.
-   */
-  readonly separator?: string;
-  readonly tokens: readonly ResolvedToken[];
-  readonly literals: readonly (string | number | boolean)[];
-  /** Alias → CSS-value map for `{ alias, value }` entries in `values`.
-   *  When an author writes `flexDirection='col'`, the CSS emitter looks
-   *  this up to write `flex-direction: column` instead of `flex-direction: col`.
-   *  Object values represent composite styles (`truncate=true` mapping to
-   *  three CSS properties at once). Only populated when at least one
-   *  entry used the alias form. */
-  readonly literalAliases?: Readonly<Record<string, string | Readonly<Record<string, string>>>>;
-  readonly arbitrary: ArbitrarySpec | undefined;
-  readonly metadata: StylePropMetadata;
-}
-/**
- * Structurally-loose input shape for the resolver. Any `StyleProp<P>` from
- * `defineStyleProp` is assignable to this. Defined locally so the
- * resolver's signature doesn't expand `ValuesEntry<P>` over the full CSS
- * property union (TS2590).
- */
-interface ResolveStylePropInput {
-  readonly kind?: 'styleProp';
-  readonly cssProperty: string | readonly string[];
-  readonly classPrefix: string;
-  readonly values?: readonly unknown[];
-  readonly arbitrary?: ArbitrarySpec;
-  readonly cssType?: CssValueTypeName;
-  readonly metadata?: StylePropMetadata;
-}
-/**
- * Minimal input shapes for {@link detectTokenValueType} — see that
- * function's docs for the algorithmic contract.
- * `AtomicToken['tokens'][number]` and `AtomicToken` are structurally
- * assignable to these, so codegen's existing call sites keep working
- * unchanged.
- */
-interface DetectTokenValueTypeInput {
-  readonly value: string;
-  readonly type?: TokenType;
-}
-interface DetectTokenValueTypeGroup {
-  readonly type?: TokenType;
-}
-/**
- * Detect a token's CSS value type. Resolution order:
- *  1. Per-token `type` override.
- *  2. Group-level `type`.
- *
- * When the resolved type is `'length-percentage'` and the raw value ends in
- * `%`, narrow to `'percentage'`; otherwise narrow to `'length'`. When the
- * resolved type is `'string'`, narrow shadow-like values to `'shadow'` and
- * ratio-shaped values to `'ratio'`.
- *
- * Exported so Studio (and any other runtime consumer) can resolve a cell's
- * effective `CssValueTypeName`.
- *
- * The input shapes ({@link DetectTokenValueTypeInput} /
- * {@link DetectTokenValueTypeGroup}) are intentionally minimal: the resolver
- * reads only `token.value`, `token.type`, and `group.type` — never walks
- * `group.tokens`, never checks that `token` is inside `group`. Typing them
- * as full `AtomicToken` would force trimmed-shape consumers (Studio's
- * `TokenEntry`) to either round-trip back to the source group or `as`-assert
- * past the type system.
- */
-declare function detectTokenValueType(token: DetectTokenValueTypeInput, group: DetectTokenValueTypeGroup): CssValueTypeName | undefined;
-/**
- * Resolve a style prop against the given resolved UDS config. Unknown group
- * refs are silently dropped from `tokens` (callers can detect this by
- * comparing input refs vs. resolved tokens if they need to surface a
- * config-build warning).
- *
- * @param propName - The JSX prop name (the map key from `registerStyleProps`).
- */
-declare function resolveStyleProp(propName: string, styleProp: ResolveStylePropInput, config: UdsConfigData): ResolvedStyleProp;
-/**
- * Walk a resolved config's `resolvedStyleProps` and return the
- * color-prop → opacity-sibling-prop map. Built from each opacity
- * sibling's `pairedWith` field (set by the resolver when expanding a
- * `.withOpacity({ as })` parent). Returns an empty object when no
- * pairings exist.
- *
- * Replaces the legacy `colorPropToOpacityProp` table that lived in
- * `@uds/core` — consumers (codegen safelist generation, runtime
- * `getStyles`, loader style-transform) should call this instead.
- */
-declare function getColorOpacityMap(config: UdsConfigData): Record<string, string>; //#endregion
-//#endregion
-export { DetectTokenValueTypeGroup, DetectTokenValueTypeInput, ResolvedStyleProp, ResolvedToken, detectTokenValueType, getColorOpacityMap, resolveStyleProp };