@yahoo/uds-v5-wip 1.23.0 → 1.25.0

package/dist/config.d.ts

@@ -8,6 +8,47 @@ import * as _$_uds_types0 from "@uds/types";
 //#region src/config.d.ts
 declare const uds: UdsConfig<_$_uds_types0.ModifierProp, {}, {}, {}, {}, never, {}>;
 declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "_dark" | "_sm" | "_md" | "_lg" | "_xl" | "_2xl", {
+  opacity: {
+    0: string;
+    5: string;
+    10: string;
+    20: string;
+    40: string;
+    60: string;
+    80: string;
+    25: string;
+    30: string;
+    50: string;
+    70: string;
+    75: string;
+    90: string;
+    95: string;
+    100: string;
+  };
+  scale: {
+    0: string;
+    50: string;
+    75: string;
+    90: string;
+    95: string;
+    100: string;
+    105: string;
+    110: string;
+    125: string;
+    150: string;
+    200: string;
+  };
+  rotate: {
+    0: string;
+    2: string;
+    1: string;
+    3: string;
+    6: string;
+    12: string;
+    90: string;
+    45: string;
+    180: string;
+  };
   color: {
     inherit: string;
     current: string;
@@ -33,23 +74,7 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
     inverse: string;
     "on-inverse": string;
   };
-  fontFamily: {
-    sans: string;
-    serif: string;
-    mono: string;
-  };
-  fontWeight: {
-    bold: string;
-    light: string;
-    thin: string;
-    medium: string;
-    extralight: string;
-    normal: string;
-    semibold: string;
-    extrabold: string;
-    black: string;
-  };
-  bg: {
+  borderColor: {
     brand: string;
     accent: string;
     alert: string;
@@ -60,17 +85,51 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
     tertiary: string;
     inverse: string;
     surface: string;
-    "elevation-1": string;
-    "elevation-2": string;
-    "elevation-3": string;
     "brand-wash": string;
     "accent-wash": string;
     "alert-wash": string;
     "positive-wash": string;
     "warning-wash": string;
-    overlay: string;
   };
-  borderColor: {
+  position: {
+    auto: string;
+    full: string;
+    "1/2": string;
+    "1/3": string;
+    "2/3": string;
+    "1/4": string;
+    "2/4": string;
+    "3/4": string;
+  };
+  size: {
+    auto: string;
+    full: string;
+    max: string;
+    min: string;
+    "1/2": string;
+    "1/3": string;
+    "2/3": string;
+    "1/4": string;
+    "2/4": string;
+    "3/4": string;
+    fit: string;
+    "1/5": string;
+    "2/5": string;
+    "3/5": string;
+    "4/5": string;
+    "1/6": string;
+    "2/6": string;
+    "3/6": string;
+    "4/6": string;
+    "5/6": string;
+  };
+  animation: {
+    none: string;
+    ping: string;
+    spin: string;
+  };
+  bg: {
+    overlay: string;
     brand: string;
     accent: string;
     alert: string;
@@ -81,6 +140,9 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
     tertiary: string;
     inverse: string;
     surface: string;
+    "elevation-1": string;
+    "elevation-2": string;
+    "elevation-3": string;
     "brand-wash": string;
     "accent-wash": string;
     "alert-wash": string;
@@ -93,63 +155,50 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
     medium: string;
     thick: string;
   };
-  outlineWidth: {
+  divideWidth: {
     0: string;
-    2: string;
-    1: string;
     4: string;
-    8: string;
-  };
-  outlineOffset: {
-    0: string;
+    reverse: string;
     2: string;
-    1: string;
-    4: string;
     8: string;
   };
-  divideWidth: {
-    0: string;
-    2: string;
-    reverse: string;
-    4: string;
-    8: string;
+  flex: {
+    none: string;
+    initial: string;
+    auto: string;
+    1: string;
   };
-  ringWidth: {
+  flexGrow: {
     0: string;
-    2: string;
     1: string;
-    inset: string;
-    4: string;
-    8: string;
   };
-  ringOffsetWidth: {
+  flexShrink: {
     0: string;
-    2: string;
-    1: string;
-    4: string;
-    8: string;
   };
-  lineHeight: {
-    none: string;
-    normal: string;
-    tight: string;
-    relaxed: string;
+  aspectRatio: {
+    square: string;
+    landscape: string;
+    portrait: string;
+    widescreen: string;
+    ultrawide: string;
+    golden: string;
   };
-  letterSpacing: {
-    normal: string;
-    tight: string;
-    tighter: string;
-    wide: string;
-    wider: string;
-    widest: string;
+  zIndex: {
+    0: string;
+    auto: string;
+    10: string;
+    20: string;
+    40: string;
+    30: string;
+    50: string;
   };
   spacing: {
     0: string;
+    4: string;
     2: string;
     5: string;
     1: string;
     px: string;
-    4: string;
     8: string;
     0.5: string;
     1.5: string;
@@ -180,183 +229,116 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
     80: string;
     96: string;
   };
-  position: {
-    auto: string;
-    full: string;
-    "1/2": string;
-    "1/3": string;
-    "2/3": string;
-    "1/4": string;
-    "2/4": string;
-    "3/4": string;
-  };
-  aspectRatio: {
-    square: string;
-    landscape: string;
-    portrait: string;
-    widescreen: string;
-    ultrawide: string;
-    golden: string;
+  w: {
+    screen: string;
+    svw: string;
+    lvw: string;
+    dvw: string;
   };
-  flex: {
+  outlineWidth: {
+    0: string;
+    4: string;
+    2: string;
     1: string;
-    none: string;
-    auto: string;
-    initial: string;
+    8: string;
   };
-  flexGrow: {
+  outlineOffset: {
     0: string;
+    4: string;
+    2: string;
     1: string;
+    8: string;
   };
-  flexShrink: {
+  ringWidth: {
     0: string;
+    4: string;
+    inset: string;
+    2: string;
+    1: string;
+    8: string;
   };
-  opacity: {
+  ringOffsetWidth: {
     0: string;
-    5: string;
-    10: string;
-    20: string;
-    40: string;
-    60: string;
-    80: string;
-    25: string;
-    30: string;
-    50: string;
-    70: string;
-    75: string;
-    90: string;
-    95: string;
-    100: string;
+    4: string;
+    2: string;
+    1: string;
+    8: string;
   };
-  radius: {
+  shadow: {
+    none: string;
     sm: string;
     md: string;
     lg: string;
     xl: string;
-    none: string;
-    full: string;
+    "2xl": string;
+    "2xs": string;
     xs: string;
+    inner: string;
   };
-  animation: {
+  strokeWidth: {
+    0: string;
+    2: string;
+    1: string;
+  };
+  fontFamily: {
+    sans: string;
+    serif: string;
+    mono: string;
+  };
+  fontWeight: {
+    normal: string;
+    thin: string;
+    bold: string;
+    light: string;
+    medium: string;
+    extralight: string;
+    semibold: string;
+    extrabold: string;
+    black: string;
+  };
+  letterSpacing: {
+    normal: string;
+    tight: string;
+    tighter: string;
+    wide: string;
+    wider: string;
+    widest: string;
+  };
+  lineHeight: {
     none: string;
-    spin: string;
-    ping: string;
+    normal: string;
+    tight: string;
+    relaxed: string;
   };
-  shadow: {
+  textShadow: {
+    none: string;
     sm: string;
     md: string;
     lg: string;
-    xl: string;
-    "2xl": string;
-    none: string;
-    xs: string;
     "2xs": string;
-    inner: string;
+    xs: string;
   };
   blur: {
+    none: string;
     sm: string;
     md: string;
     lg: string;
     xl: string;
     "2xl": string;
-    none: string;
     "3xl": string;
   };
-  textShadow: {
-    sm: string;
-    md: string;
-    lg: string;
-    none: string;
-    xs: string;
-    "2xs": string;
-  };
-  zIndex: {
-    0: string;
-    auto: string;
-    10: string;
-    20: string;
-    40: string;
-    30: string;
-    50: string;
-  };
-  size: {
-    auto: string;
-    full: string;
-    "1/2": string;
-    "1/3": string;
-    "2/3": string;
-    "1/4": string;
-    "2/4": string;
-    "3/4": string;
-    min: string;
-    max: string;
-    fit: string;
-    "1/5": string;
-    "2/5": string;
-    "3/5": string;
-    "4/5": string;
-    "1/6": string;
-    "2/6": string;
-    "3/6": string;
-    "4/6": string;
-    "5/6": string;
-  };
-  w: {
-    screen: string;
-    svw: string;
-    lvw: string;
-    dvw: string;
-  };
-  h: {
-    screen: string;
-    svh: string;
-    lvh: string;
-    dvh: string;
-  };
-  rotate: {
-    0: string;
-    2: string;
-    1: string;
-    3: string;
-    6: string;
-    12: string;
-    90: string;
-    45: string;
-    180: string;
-  };
-  scale: {
-    0: string;
-    50: string;
-    75: string;
-    90: string;
-    95: string;
-    100: string;
-    105: string;
-    110: string;
-    125: string;
-    150: string;
-    200: string;
-  };
-  skew: {
-    0: string;
-    2: string;
-    1: string;
-    3: string;
-    6: string;
-    12: string;
-  };
   translate: {
     0: string;
+    4: string;
+    full: string;
     2: string;
     5: string;
     1: string;
-    full: string;
     "1/2": string;
     "1/3": string;
     "2/3": string;
     "1/4": string;
     "3/4": string;
-    4: string;
     8: string;
     0.5: string;
     1.5: string;
@@ -387,10 +369,28 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
     80: string;
     96: string;
   };
-  strokeWidth: {
+  radius: {
+    none: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    xs: string;
+    full: string;
+  };
+  h: {
+    screen: string;
+    svh: string;
+    lvh: string;
+    dvh: string;
+  };
+  skew: {
     0: string;
     2: string;
     1: string;
+    3: string;
+    6: string;
+    12: string;
   };
 }, {}, {}, {}, "_light" | "_dark" | "_sm" | "_md" | "_lg" | "_xl" | "_2xl", {
   readonly color: {

package/dist/config.js

@@ -10,7 +10,7 @@ const uds = createConfigBuilder({
 	atomic: [],
 	modes: [],
 	modifiers: [],
-	macros: {},
+	compositeStyles: {},
 	motion: {},
 	components: {},
 	globalStyles: {},

package/dist/core/dist/compositeStyles.d.ts

@@ -0,0 +1,22 @@
+import { CompositeStylesConfig } from "@uds/types";
+
+//#region ../core/dist/compositeStyles.d.ts
+//#region src/compositeStyles.d.ts
+/** Set the composite-styles config (called by loader at build time) */
+declare function setCompositeStylesConfig(config: CompositeStylesConfig): void;
+/** Get the current composite-styles config */
+declare function getCompositeStylesConfig(): CompositeStylesConfig;
+/**
+ * Expand composite-style props into their constituent style props + marker classes.
+ *
+ * - Composite styles are lowest priority: explicit props always win
+ * - Nested composite styles are supported (a style bag can reference another group)
+ * - Circular references are detected and throw
+ * - Marker classes (e.g. "elevation-0") are returned for modifier targeting
+ */
+declare function expandCompositeStyles(props: Record<string, unknown>, config?: CompositeStylesConfig): {
+  expanded: Record<string, unknown>;
+  markerClasses: string[];
+}; //#endregion
+//#endregion
+export { expandCompositeStyles, getCompositeStylesConfig, setCompositeStylesConfig };

package/dist/core/dist/compositeStyles.js

@@ -0,0 +1,51 @@
+import { safeTokenName } from "../../utils/dist/string-utils/cssVar.js";
+import "../../utils/dist/index.js";
+//#region ../core/dist/compositeStyles.js
+/**
+* Runtime composite-styles config — set by the loader/codegen at build time.
+* Maps composite-style group names to a `{ label, description?, styles }`
+* definition where `styles` holds variant id -> style bag.
+*/
+let compositeStylesConfig = {};
+/** Set the composite-styles config (called by loader at build time) */
+function setCompositeStylesConfig(config) {
+	compositeStylesConfig = config;
+}
+/** Get the current composite-styles config */
+function getCompositeStylesConfig() {
+	return compositeStylesConfig;
+}
+/**
+* Expand composite-style props into their constituent style props + marker classes.
+*
+* - Composite styles are lowest priority: explicit props always win
+* - Nested composite styles are supported (a style bag can reference another group)
+* - Circular references are detected and throw
+* - Marker classes (e.g. "elevation-0") are returned for modifier targeting
+*/
+function expandCompositeStyles(props, config = compositeStylesConfig) {
+	const expanded = {};
+	const markers = [];
+	const seen = /* @__PURE__ */ new Set();
+	function expand(key, value) {
+		const def = config[key];
+		if (def && typeof value === "string") {
+			if (seen.has(key)) throw new Error(`Circular composite style: ${[...seen, key].join(" → ")}`);
+			seen.add(key);
+			markers.push(`${key}-${safeTokenName(value)}`);
+			const bag = def.styles[value];
+			if (bag) {
+				for (const [k, v] of Object.entries(bag)) if (!(k in expanded)) expand(k, v);
+			}
+			seen.delete(key);
+		} else if (!(key in expanded)) expanded[key] = value;
+	}
+	for (const [key, value] of Object.entries(props)) if (key in config) expand(key, value);
+	for (const [key, value] of Object.entries(props)) if (!(key in config)) expanded[key] = value;
+	return {
+		expanded,
+		markerClasses: markers
+	};
+}
+//#endregion
+export { expandCompositeStyles, getCompositeStylesConfig, setCompositeStylesConfig };

package/dist/core/dist/createComponent.js

@@ -1,6 +1,6 @@
+import { applySlotOverrides, assertTransformedConfig, buildSlotProps, buildUntransformedSlotProps, inferComponentNameFromRenderFn, mergeMotionConfig, mergeRootClassName, mergeSlotMotionProps, partitionMergedProps } from "./createComponent.boundaries.js";
 import { processStyleProps } from "./getStyles.js";
 import { createComponentStyler } from "./getComponentStyles.js";
-import { applySlotOverrides, assertTransformedConfig, buildSlotProps, buildUntransformedSlotProps, inferComponentNameFromRenderFn, mergeMotionConfig, mergeRootClassName, mergeSlotMotionProps, partitionMergedProps } from "./createComponent.boundaries.js";
 import { createElement } from "react";
 //#region ../core/dist/createComponent.js
 function createPrimitiveRenderFn(tag) {

package/dist/core/dist/getStyles.js

@@ -1,7 +1,7 @@
-import { stylePropsTwMap } from "./generated/stylePropsTwMap.js";
 import { componentSlotClass } from "../../utils/dist/string-utils/componentClassName.js";
 import "../../utils/dist/index.js";
-import { expandMacros, getMacroConfig } from "./macros.js";
+import { expandCompositeStyles, getCompositeStylesConfig } from "./compositeStyles.js";
+import { stylePropsTwMap } from "./generated/stylePropsTwMap.js";
 import { colorPropToOpacityProp, modifierMappings, propMappings } from "./propMappings.js";
 import { clsx } from "clsx";
 //#region ../core/dist/getStyles.js
@@ -146,20 +146,20 @@ function cx(...inputs) {
 	return clsx(inputs);
 }
 function processStyleProps(props = {}, opts = {}) {
-	const macroConfig = getMacroConfig();
-	const hasMacros = Object.keys(macroConfig).length > 0;
+	const compositeStylesConfig = getCompositeStylesConfig();
+	const hasCompositeStyles = Object.keys(compositeStylesConfig).length > 0;
 	let effectiveProps = props;
-	let macroMarkerClasses;
-	if (hasMacros && !opts.modifier) {
-		const { expanded, markerClasses } = expandMacros(props, macroConfig);
+	let compositeStyleMarkerClasses;
+	if (hasCompositeStyles && !opts.modifier) {
+		const { expanded, markerClasses } = expandCompositeStyles(props, compositeStylesConfig);
 		effectiveProps = expanded;
-		if (markerClasses.length > 0) macroMarkerClasses = markerClasses;
+		if (markerClasses.length > 0) compositeStyleMarkerClasses = markerClasses;
 	}
 	const coveredProps = opts.existingClassName ? getPropsFromClassName(opts.existingClassName) : void 0;
 	const classnameParts = [];
 	const nativeProps = {};
 	let inlineStyles;
-	if (macroMarkerClasses) classnameParts.push(...macroMarkerClasses);
+	if (compositeStyleMarkerClasses) classnameParts.push(...compositeStyleMarkerClasses);
 	for (const propKey in effectiveProps) {
 		if (!Object.hasOwn(effectiveProps, propKey)) continue;
 		const propValue = effectiveProps[propKey];

package/dist/core/dist/index.d.ts

@@ -1,10 +1,10 @@
+import { expandCompositeStyles, getCompositeStylesConfig, setCompositeStylesConfig } from "./compositeStyles.js";
 import { createComponent } from "./createComponent.js";
 import { ComponentExample, createComponentExample } from "./createComponentExample.js";
 import { createProvider } from "./createProvider.js";
 import { stylePropsTwMap } from "./generated/stylePropsTwMap.js";
 import { createComponentStyler } from "./getComponentStyles.js";
 import { createVariants, cx, getStyles, getVariantClassName, processStyleProps, toCamelCase } from "./getStyles.js";
-import { expandMacros, getMacroConfig, setMacroConfig } from "./macros.js";
 import { ConfigurablePropertyEntry, CssVariablePrefixEntry, ModifierEntry, PropMapping, colorPropToOpacityProp, getConfigurablePropMapping, getConfigurableProperties, getCssVariablePrefixes, modifierMappings, propMappings } from "./propMappings.js";
 import { resolveMotionState } from "./resolveMotionState.js";
 import { TransformedMotionProps, transformPreset } from "./transformPreset.js";

package/dist/core/dist/index.js

@@ -1,5 +1,5 @@
+import "./compositeStyles.js";
 import "./generated/stylePropsTwMap.js";
-import "./macros.js";
 import "./propMappings.js";
 import "./getStyles.js";
 import "./getComponentStyles.js";

package/dist/core.d.ts

@@ -1,12 +1,12 @@
+import { expandCompositeStyles, getCompositeStylesConfig, setCompositeStylesConfig } from "./core/dist/compositeStyles.js";
 import { createComponent } from "./core/dist/createComponent.js";
 import { ComponentExample, createComponentExample } from "./core/dist/createComponentExample.js";
 import { createProvider } from "./core/dist/createProvider.js";
 import { stylePropsTwMap } from "./core/dist/generated/stylePropsTwMap.js";
 import { createComponentStyler } from "./core/dist/getComponentStyles.js";
 import { createVariants, cx, getStyles, getVariantClassName, processStyleProps, toCamelCase } from "./core/dist/getStyles.js";
-import { expandMacros, getMacroConfig, setMacroConfig } from "./core/dist/macros.js";
 import { ConfigurablePropertyEntry, CssVariablePrefixEntry, ModifierEntry, PropMapping, colorPropToOpacityProp, getConfigurablePropMapping, getConfigurableProperties, getCssVariablePrefixes, modifierMappings, propMappings } from "./core/dist/propMappings.js";
 import { resolveMotionState } from "./core/dist/resolveMotionState.js";
 import { TransformedMotionProps, transformPreset } from "./core/dist/transformPreset.js";
 import { withDefaultStyleProps } from "./core/dist/withDefaultStyleProps.js";
-export { ComponentExample, ConfigurablePropertyEntry, CssVariablePrefixEntry, ModifierEntry, PropMapping, TransformedMotionProps, colorPropToOpacityProp, createComponent, createComponentExample, createComponentStyler, createProvider, createVariants, cx, expandMacros, getConfigurablePropMapping, getConfigurableProperties, getCssVariablePrefixes, getMacroConfig, getStyles, getVariantClassName, modifierMappings, processStyleProps, propMappings, resolveMotionState, setMacroConfig, stylePropsTwMap, toCamelCase, transformPreset, withDefaultStyleProps };
+export { ComponentExample, ConfigurablePropertyEntry, CssVariablePrefixEntry, ModifierEntry, PropMapping, TransformedMotionProps, colorPropToOpacityProp, createComponent, createComponentExample, createComponentStyler, createProvider, createVariants, cx, expandCompositeStyles, getCompositeStylesConfig, getConfigurablePropMapping, getConfigurableProperties, getCssVariablePrefixes, getStyles, getVariantClassName, modifierMappings, processStyleProps, propMappings, resolveMotionState, setCompositeStylesConfig, stylePropsTwMap, toCamelCase, transformPreset, withDefaultStyleProps };

package/dist/core.js

@@ -1,5 +1,5 @@
+import { expandCompositeStyles, getCompositeStylesConfig, setCompositeStylesConfig } from "./core/dist/compositeStyles.js";
 import { stylePropsTwMap } from "./core/dist/generated/stylePropsTwMap.js";
-import { expandMacros, getMacroConfig, setMacroConfig } from "./core/dist/macros.js";
 import { colorPropToOpacityProp, getConfigurablePropMapping, getConfigurableProperties, getCssVariablePrefixes, modifierMappings, propMappings } from "./core/dist/propMappings.js";
 import { createVariants, cx, getStyles, getVariantClassName, processStyleProps, toCamelCase } from "./core/dist/getStyles.js";
 import { createComponentStyler } from "./core/dist/getComponentStyles.js";
@@ -10,4 +10,4 @@ import { resolveMotionState } from "./core/dist/resolveMotionState.js";
 import { transformPreset } from "./core/dist/transformPreset.js";
 import { withDefaultStyleProps } from "./core/dist/withDefaultStyleProps.js";
 import "./core/dist/index.js";
-export { colorPropToOpacityProp, createComponent, createComponentExample, createComponentStyler, createProvider, createVariants, cx, expandMacros, getConfigurablePropMapping, getConfigurableProperties, getCssVariablePrefixes, getMacroConfig, getStyles, getVariantClassName, modifierMappings, processStyleProps, propMappings, resolveMotionState, setMacroConfig, stylePropsTwMap, toCamelCase, transformPreset, withDefaultStyleProps };
+export { colorPropToOpacityProp, createComponent, createComponentExample, createComponentStyler, createProvider, createVariants, cx, expandCompositeStyles, getCompositeStylesConfig, getConfigurablePropMapping, getConfigurableProperties, getCssVariablePrefixes, getStyles, getVariantClassName, modifierMappings, processStyleProps, propMappings, resolveMotionState, setCompositeStylesConfig, stylePropsTwMap, toCamelCase, transformPreset, withDefaultStyleProps };