@yahoo/uds-v5-wip 1.35.0 → 1.36.1

package/dist/config.d.ts

@@ -35,51 +35,10 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | GetModifierF
     };
   };
 }>, {
-  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;
-    1: string;
-    2: string;
-    3: string;
-    6: string;
-    12: string;
-    90: string;
-    45: string;
-    180: string;
-  };
   color: {
+    transparent: string;
     inherit: string;
     current: string;
-    transparent: string;
     "always/black": string;
     "always/white": string;
     brand: string;
@@ -101,22 +60,16 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | GetModifierF
     inverse: string;
     "on-inverse": string;
   };
-  borderColor: {
-    brand: string;
-    accent: string;
-    alert: string;
-    positive: string;
-    warning: string;
-    primary: string;
-    secondary: string;
-    tertiary: string;
-    inverse: string;
-    surface: string;
-    "brand-wash": string;
-    "accent-wash": string;
-    "alert-wash": string;
-    "positive-wash": string;
-    "warning-wash": string;
+  shadow: {
+    none: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+    xs: string;
+    "2xs": string;
+    inner: string;
   };
   position: {
     auto: string;
@@ -128,17 +81,111 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | GetModifierF
     "2/4": string;
     "3/4": string;
   };
+  flex: {
+    1: string;
+    initial: string;
+    auto: string;
+    none: string;
+  };
+  rotate: {
+    0: string;
+    1: string;
+    2: 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;
+  };
+  translate: {
+    0: string;
+    1: string;
+    full: string;
+    "1/2": string;
+    "1/3": string;
+    "2/3": string;
+    "1/4": string;
+    "3/4": string;
+    2: string;
+    4: string;
+    8: string;
+    0.5: string;
+    1.5: string;
+    2.5: string;
+    3: string;
+    3.5: string;
+    5: string;
+    6: string;
+    7: string;
+    9: string;
+    10: string;
+    11: string;
+    12: string;
+    14: string;
+    16: string;
+    20: string;
+    24: string;
+    28: string;
+    32: string;
+    36: string;
+    40: string;
+    44: string;
+    48: string;
+    52: string;
+    56: string;
+    60: string;
+    64: string;
+    72: string;
+    80: string;
+    96: string;
+  };
+  animation: {
+    none: string;
+    spin: string;
+    ping: string;
+  };
+  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;
+  };
   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;
+    min: string;
+    max: string;
     fit: string;
     "1/5": string;
     "2/5": string;
@@ -150,11 +197,6 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | GetModifierF
     "4/6": string;
     "5/6": string;
   };
-  animation: {
-    none: string;
-    ping: string;
-    spin: string;
-  };
   bg: {
     overlay: string;
     brand: string;
@@ -176,6 +218,32 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | GetModifierF
     "positive-wash": string;
     "warning-wash": string;
   };
+  radius: {
+    none: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    full: string;
+    xs: string;
+  };
+  borderColor: {
+    brand: string;
+    accent: string;
+    alert: string;
+    positive: string;
+    warning: string;
+    primary: string;
+    secondary: string;
+    tertiary: string;
+    inverse: string;
+    surface: string;
+    "brand-wash": string;
+    "accent-wash": string;
+    "alert-wash": string;
+    "positive-wash": string;
+    "warning-wash": string;
+  };
   borderWidth: {
     none: string;
     thin: string;
@@ -184,16 +252,19 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | GetModifierF
   };
   divideWidth: {
     0: string;
-    4: string;
     reverse: string;
     2: string;
+    4: string;
     8: string;
   };
-  flex: {
+  blur: {
     none: string;
-    initial: string;
-    auto: string;
-    1: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+    "3xl": string;
   };
   flexGrow: {
     0: string;
@@ -202,29 +273,12 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | GetModifierF
   flexShrink: {
     0: string;
   };
-  aspectRatio: {
-    square: string;
-    landscape: string;
-    portrait: string;
-    widescreen: string;
-    ultrawide: string;
-    golden: string;
-  };
-  zIndex: {
-    0: string;
-    auto: string;
-    10: string;
-    20: string;
-    40: string;
-    30: string;
-    50: string;
-  };
   spacing: {
     0: string;
-    4: string;
     1: string;
     px: string;
     2: string;
+    4: string;
     8: string;
     0.5: string;
     1.5: string;
@@ -256,57 +310,62 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | GetModifierF
     80: string;
     96: string;
   };
-  w: {
-    screen: string;
-    svw: string;
-    lvw: string;
-    dvw: string;
-  };
-  outlineWidth: {
+  zIndex: {
     0: string;
-    4: string;
-    1: string;
-    2: string;
-    8: string;
+    auto: string;
+    10: string;
+    20: string;
+    40: string;
+    30: string;
+    50: string;
   };
   outlineOffset: {
     0: string;
-    4: string;
     1: string;
     2: string;
+    4: string;
     8: string;
   };
   ringWidth: {
     0: string;
-    4: string;
-    inset: string;
     1: string;
+    inset: string;
     2: string;
+    4: string;
     8: string;
   };
   ringOffsetWidth: {
     0: string;
-    4: string;
     1: string;
     2: string;
+    4: string;
     8: string;
   };
-  shadow: {
-    none: string;
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    "2xl": string;
-    "2xs": string;
-    xs: string;
-    inner: string;
+  h: {
+    screen: string;
+    svh: string;
+    lvh: string;
+    dvh: string;
+  };
+  w: {
+    screen: string;
+    svw: string;
+    lvw: string;
+    dvw: string;
   };
   strokeWidth: {
     0: string;
     1: string;
     2: string;
   };
+  skew: {
+    0: string;
+    1: string;
+    2: string;
+    3: string;
+    6: string;
+    12: string;
+  };
   fontFamily: {
     sans: string;
     serif: string;
@@ -314,8 +373,8 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | GetModifierF
   };
   fontWeight: {
     normal: string;
-    thin: string;
     bold: string;
+    thin: string;
     medium: string;
     extralight: string;
     light: string;
@@ -332,8 +391,8 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | GetModifierF
     widest: string;
   };
   lineHeight: {
-    none: string;
     normal: string;
+    none: string;
     tight: string;
     relaxed: string;
   };
@@ -342,82 +401,23 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | GetModifierF
     sm: string;
     md: string;
     lg: string;
-    "2xs": string;
     xs: string;
+    "2xs": string;
   };
-  blur: {
-    none: string;
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    "2xl": string;
-    "3xl": string;
-  };
-  translate: {
+  outlineWidth: {
     0: string;
-    4: string;
-    full: string;
     1: string;
-    "1/2": string;
-    "1/3": string;
-    "2/3": string;
-    "1/4": string;
-    "3/4": string;
     2: string;
+    4: string;
     8: string;
-    0.5: string;
-    1.5: string;
-    2.5: string;
-    3: string;
-    3.5: string;
-    5: string;
-    6: string;
-    7: string;
-    9: string;
-    10: string;
-    11: string;
-    12: string;
-    14: string;
-    16: string;
-    20: string;
-    24: string;
-    28: string;
-    32: string;
-    36: string;
-    40: string;
-    44: string;
-    48: string;
-    52: string;
-    56: string;
-    60: string;
-    64: string;
-    72: string;
-    80: string;
-    96: string;
-  };
-  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;
-    1: string;
-    2: string;
-    3: string;
-    6: string;
-    12: string;
+  aspectRatio: {
+    square: string;
+    landscape: string;
+    portrait: string;
+    widescreen: string;
+    ultrawide: string;
+    golden: string;
   };
 }, {}, {}, {}, GetModifierFromInput<{
   readonly colorMode: {

package/dist/core/dist/color-opacity-map.d.ts

@@ -0,0 +1,13 @@
+//#region ../core/dist/color-opacity-map.d.ts
+//#region src/color-opacity-map.d.ts
+/**
+ * Maps each color prop name to its corresponding opacity prop name.
+ * Used by the runtime (`getStyles`) and loader (`style-transform`) to merge
+ * a color value with its opacity before class generation.
+ *
+ * @example
+ * `bg="primary"` + `bgOpacity="75"` → class `bg-primary_75`
+ */
+declare const colorPropToOpacityProp: Record<string, string>; //#endregion
+//#endregion
+export { colorPropToOpacityProp };

package/dist/core/dist/color-opacity-map.js

@@ -0,0 +1,33 @@
+//#region ../core/dist/color-opacity-map.js
+/**
+* Maps each color prop name to its corresponding opacity prop name.
+* Used by the runtime (`getStyles`) and loader (`style-transform`) to merge
+* a color value with its opacity before class generation.
+*
+* @example
+* `bg="primary"` + `bgOpacity="75"` → class `bg-primary_75`
+*/
+const colorPropToOpacityProp = {
+	bg: "bgOpacity",
+	color: "colorOpacity",
+	textDecorationColor: "textDecorationColorOpacity",
+	borderColor: "borderColorOpacity",
+	borderYColor: "borderYColorOpacity",
+	borderXColor: "borderXColorOpacity",
+	borderStartColor: "borderStartColorOpacity",
+	borderLeftColor: "borderLeftColorOpacity",
+	borderEndColor: "borderEndColorOpacity",
+	borderRightColor: "borderRightColorOpacity",
+	borderTopColor: "borderTopColorOpacity",
+	borderBottomColor: "borderBottomColorOpacity",
+	divideColor: "divideColorOpacity",
+	outlineColor: "outlineColorOpacity",
+	ringColor: "ringColorOpacity",
+	ringOffsetColor: "ringOffsetColorOpacity",
+	fillColor: "fillColorOpacity",
+	strokeColor: "strokeColorOpacity",
+	shadowColor: "shadowColorOpacity",
+	caretColor: "caretColorOpacity"
+};
+//#endregion
+export { colorPropToOpacityProp };

package/dist/core/dist/configurable-prop-helpers.d.ts

@@ -0,0 +1,32 @@
+import { PropMapping } from "./style-prop-data.js";
+import { ConfigurableProp } from "@uds/types";
+
+//#region ../core/dist/configurable-prop-helpers.d.ts
+//#region src/configurable-prop-helpers.d.ts
+/** Look up a {@link PropMapping} by ConfigurableProp name. */
+declare function getConfigurablePropMapping(prop: ConfigurableProp): PropMapping | undefined;
+interface ConfigurablePropertyEntry {
+  property: string;
+  subProperties: string[];
+  augmentType: string;
+}
+/**
+ * Derives the configurable properties table from {@link propMappings}.
+ * Groups props by augmentType — the primary prop is the one matching
+ * a ConfigurableProp name, the rest are sub-properties.
+ */
+declare function getConfigurableProperties(): ConfigurablePropertyEntry[];
+interface CssVariablePrefixEntry {
+  property: string;
+  cssPrefix: string;
+  exampleVariable: string;
+  exampleUtility: string;
+}
+/**
+ * Derives the CSS variable prefix table from {@link propMappings}.
+ * Only includes props that have both `cssProperty` and `defaultVarPrefix`.
+ * Deduplicates by `defaultVarPrefix` so each namespace appears once.
+ */
+declare function getCssVariablePrefixes(): CssVariablePrefixEntry[]; //#endregion
+//#endregion
+export { ConfigurablePropertyEntry, CssVariablePrefixEntry, getConfigurablePropMapping, getConfigurableProperties, getCssVariablePrefixes };

package/dist/core/dist/configurable-prop-helpers.js

@@ -0,0 +1,61 @@
+import { propMappings } from "./style-prop-data.js";
+//#region ../core/dist/configurable-prop-helpers.js
+/** Maps ConfigurableProp names to propMappings keys when they differ. */
+const configurablePropAliases = {};
+/** Look up a {@link PropMapping} by ConfigurableProp name. */
+function getConfigurablePropMapping(prop) {
+	return propMappings[configurablePropAliases[prop] ?? prop];
+}
+/**
+* Derives the configurable properties table from {@link propMappings}.
+* Groups props by augmentType — the primary prop is the one matching
+* a ConfigurableProp name, the rest are sub-properties.
+*/
+function getConfigurableProperties() {
+	const byAugment = {};
+	for (const [prop, mapping] of Object.entries(propMappings)) {
+		if (!mapping.augmentType) continue;
+		const aug = mapping.augmentType;
+		if (!byAugment[aug]) byAugment[aug] = [];
+		byAugment[aug].push(prop);
+	}
+	const entries = [];
+	for (const [augmentType, props] of Object.entries(byAugment)) {
+		const sorted = [...props].sort((a, b) => a.length - b.length);
+		const primary = sorted[0];
+		const subs = sorted.slice(1);
+		entries.push({
+			property: primary,
+			subProperties: subs,
+			augmentType
+		});
+	}
+	return entries;
+}
+/**
+* Derives the CSS variable prefix table from {@link propMappings}.
+* Only includes props that have both `cssProperty` and `defaultVarPrefix`.
+* Deduplicates by `defaultVarPrefix` so each namespace appears once.
+*/
+function getCssVariablePrefixes() {
+	const seen = /* @__PURE__ */ new Set();
+	const entries = [];
+	for (const [prop, mapping] of Object.entries(propMappings)) {
+		if (!mapping.defaultVarPrefix || !mapping.cssProperty) continue;
+		if (seen.has(mapping.defaultVarPrefix)) continue;
+		seen.add(mapping.defaultVarPrefix);
+		const prefix = `--uds-${mapping.defaultVarPrefix}-*`;
+		const exampleToken = mapping.defaultVarPrefix.includes("color") ? "brand" : mapping.defaultVarPrefix === "spacing" ? "4" : mapping.defaultVarPrefix === "radius" ? "lg" : mapping.defaultVarPrefix === "border-width" ? "2" : "value";
+		const exampleVar = `--uds-${mapping.defaultVarPrefix}-${exampleToken}`;
+		const exampleUtility = `${mapping.classPrefix}-${exampleToken}`;
+		entries.push({
+			property: prop,
+			cssPrefix: prefix,
+			exampleVariable: exampleVar,
+			exampleUtility
+		});
+	}
+	return entries;
+}
+//#endregion
+export { getConfigurablePropMapping, getConfigurableProperties, getCssVariablePrefixes };

package/dist/core/dist/getStyles.js

@@ -1,8 +1,10 @@
+import { colorPropToOpacityProp } from "./color-opacity-map.js";
 import { componentSlotClass } from "../../utils/dist/string-utils/componentClassName.js";
 import "../../utils/dist/index.js";
 import { expandCompositeStyles, getCompositeStylesConfig } from "./compositeStyles.js";
+import { propMappings } from "./style-prop-data.js";
 import { stylePropsTwMap } from "./generated/stylePropsTwMap.js";
-import { colorPropToOpacityProp, modifierMappings, propMappings } from "./propMappings.js";
+import { modifierMappings } from "./modifier-mappings.js";
 import { clsx } from "clsx";
 //#region ../core/dist/getStyles.js
 /** Convert kebab-case CSS property to camelCase for React inline styles.

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

@@ -1,11 +1,14 @@
+import { colorPropToOpacityProp } from "./color-opacity-map.js";
 import { expandCompositeStyles, getCompositeStylesConfig, setCompositeStylesConfig } from "./compositeStyles.js";
+import { PropMapping, propMappings } from "./style-prop-data.js";
+import { ConfigurablePropertyEntry, CssVariablePrefixEntry, getConfigurablePropMapping, getConfigurableProperties, getCssVariablePrefixes } from "./configurable-prop-helpers.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 { ConfigurablePropertyEntry, CssVariablePrefixEntry, ModifierEntry, PropMapping, colorPropToOpacityProp, getConfigurablePropMapping, getConfigurableProperties, getCssVariablePrefixes, modifierMappings, propMappings } from "./propMappings.js";
+import { ModifierEntry, modifierMappings } from "./modifier-mappings.js";
 import { resolveMotionState } from "./resolveMotionState.js";
 import { TransformedMotionProps, transformPreset } from "./transformPreset.js";
 import { withDefaultStyleProps } from "./withDefaultStyleProps.js";

package/dist/core/dist/index.js

@@ -1,6 +1,9 @@
+import "./color-opacity-map.js";
 import "./compositeStyles.js";
+import "./style-prop-data.js";
+import "./configurable-prop-helpers.js";
 import "./generated/stylePropsTwMap.js";
-import "./propMappings.js";
+import "./modifier-mappings.js";
 import "./getStyles.js";
 import "./getComponentStyles.js";
 import "./createComponent.js";

package/dist/core/dist/modifier-mappings.d.ts

@@ -0,0 +1,13 @@
+import { ModifierProp } from "@uds/types";
+
+//#region ../core/dist/modifier-mappings.d.ts
+//#region src/modifier-mappings.d.ts
+declare const modifierMappings: Record<ModifierProp, string>;
+interface ModifierEntry {
+  prop: string;
+  cssSelector: string;
+  category: string;
+  description: string;
+} //#endregion
+//#endregion
+export { ModifierEntry, modifierMappings };