@yahoo/uds-v5-wip 1.48.0 → 1.49.0

package/dist/config/dist/createConfig.js

@@ -421,9 +421,27 @@ function createConfigBuilder(data, extensions) {
 			}, 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 ?? {},
-				...props
+				...expanded
 			};
 			const updates = { styleProps: mergedStyleProps };
 			if (data.vars) updates.atomic = mergeAtomic([], synthesizeAtomicFromVarsAndStyleProps(data.vars, mergedStyleProps, data.modes ?? []), "override");

package/dist/config/dist/defineStyleProp.d.ts

@@ -47,6 +47,23 @@ type StylePropMetadata = {
  * (`Array.isArray(p) ? p : [p]`); readers that only need the primary
  * use the string directly or `Array.isArray(p) ? p[0] : p`.
  */
+/**
+ * Internal shape attached to a {@link StyleProp} by `.withOpacity()`.
+ * The resolver inspects this at `resolveConfig` time to synthesize a
+ * second {@link ResolvedStyleProp} for the opacity sibling.
+ */
+interface OpacityPairSpec {
+  /** JSX-prop name for the opacity sibling, e.g. `'bgOpacity'`. */
+  readonly as: string;
+  /** Token-group refs the opacity sibling accepts as values. */
+  readonly values: readonly unknown[];
+  /**
+   * Separator between the parent's value-token suffix and the opacity
+   * value in the emitted class name (`bg-primary_75` vs.
+   * `bg-primary/75`). Defaults to `_`.
+   */
+  readonly separator: string;
+}
 /**
  * Structurally-loose form of {@link StyleProp}. Any concrete `StyleProp<P>`
  * is assignable to this. Used at registration / resolution boundaries where
@@ -61,6 +78,7 @@ interface AnyStyleProp {
   readonly arbitrary?: ArbitrarySpec;
   readonly cssType?: CssValueTypeName;
   readonly metadata: StylePropMetadata;
+  readonly opacityPair?: OpacityPairSpec;
 }
 /**
  * Return shape of {@link defineStyleProp}. The `metadata` field doubles as

package/dist/config/dist/defineStyleProp.js

@@ -35,14 +35,26 @@ function defineStyleProp(spec) {
 		arbitrary,
 		cssType
 	};
-	const metadata = (meta = {}) => ({
-		...baseFields,
-		metadata: meta
-	});
-	return {
-		...baseFields,
-		metadata
+	const buildChainable = (fields) => {
+		const metadata = (meta = {}) => ({
+			...fields,
+			metadata: meta
+		});
+		const withOpacity = (spec) => buildChainable({
+			...fields,
+			opacityPair: {
+				as: spec.as,
+				values: spec.values,
+				separator: spec.separator ?? "_"
+			}
+		});
+		return {
+			...fields,
+			metadata,
+			withOpacity
+		};
 	};
+	return buildChainable(baseFields);
 }
 //#endregion
 export { defineStyleProp };

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

@@ -52,6 +52,20 @@ interface ResolvedStyleProp {
    *  (`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`.

package/dist/config/dist/resolveStyleProp.js

@@ -124,13 +124,13 @@ function isNamespacedRef(entry) {
 function buildCssVar(configPrefix, varPrefix, safeName) {
 	return configPrefix ? `--${configPrefix}-${varPrefix}-${safeName}` : `--${varPrefix}-${safeName}`;
 }
-function resolveGroupTokens(group, cssProperty, configPrefix, namespace) {
+function resolveGroupTokens(group, cssProperty, configPrefix, namespace, skipPropertyFilter = false) {
 	const groupName = group.namespace ?? group.cssPrefix ?? "";
 	const varPrefix = group.cssPrefix ?? group.namespace ?? "";
 	const out = [];
 	for (const token of group.tokens) {
 		const valueType = detectTokenValueType(token, group);
-		if (!isTokenAcceptedByProperty(cssProperty, valueType, token.value)) continue;
+		if (!skipPropertyFilter && !isTokenAcceptedByProperty(cssProperty, valueType, token.value)) continue;
 		const safeName = safeTokenName(token.name);
 		out.push({
 			name: token.name,
@@ -156,6 +156,8 @@ function resolveGroupTokens(group, cssProperty, configPrefix, namespace) {
 */
 function resolveStyleProp(propName, styleProp, config) {
 	const { cssProperty, classPrefix, values, arbitrary, metadata } = styleProp;
+	const pairedWith = styleProp._pairedWith;
+	const separator = styleProp._separator;
 	const primaryCssProperty = Array.isArray(cssProperty) ? cssProperty[0] : cssProperty;
 	const configPrefix = config.prefix;
 	const tokens = [];
@@ -179,7 +181,7 @@ function resolveStyleProp(propName, styleProp, config) {
 				const token = group.tokens.find((t) => t.name === parsed.key);
 				if (!token) continue;
 				const valueType = detectTokenValueType(token, group);
-				if (!isTokenAcceptedByProperty(primaryCssProperty, valueType, token.value)) continue;
+				if (!pairedWith && !isTokenAcceptedByProperty(primaryCssProperty, valueType, token.value)) continue;
 				const safeName = safeTokenName(token.name);
 				const varPrefix = group.cssPrefix ?? group.namespace ?? parsed.group;
 				tokens.push({
@@ -192,7 +194,7 @@ function resolveStyleProp(propName, styleProp, config) {
 					cssVar: buildCssVar(configPrefix, varPrefix, safeName),
 					modifiers: token.modifiers
 				});
-			} else tokens.push(...resolveGroupTokens(group, primaryCssProperty, configPrefix));
+			} else tokens.push(...resolveGroupTokens(group, primaryCssProperty, configPrefix, void 0, pairedWith !== void 0));
 			continue;
 		}
 		if (isNamespacedRef(entry)) {
@@ -200,7 +202,7 @@ function resolveStyleProp(propName, styleProp, config) {
 			if (!parsed || parsed.key !== void 0) continue;
 			const group = findGroup(config.atomic, parsed.group);
 			if (!group) continue;
-			tokens.push(...resolveGroupTokens(group, primaryCssProperty, configPrefix, entry.namespace));
+			tokens.push(...resolveGroupTokens(group, primaryCssProperty, configPrefix, entry.namespace, pairedWith !== void 0));
 			continue;
 		}
 		if (typeof entry === "object" && entry !== null && "alias" in entry && "value" in entry) {
@@ -218,6 +220,10 @@ function resolveStyleProp(propName, styleProp, config) {
 		propName,
 		cssProperty,
 		classPrefix,
+		...pairedWith !== void 0 ? {
+			pairedWith,
+			separator
+		} : {},
 		tokens,
 		literals,
 		...Object.keys(literalAliases).length > 0 ? { literalAliases } : {},

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,9 +1,9 @@
-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 } from "./color-opacity-map.js";
 import { modifierMappings } from "./modifier-mappings.js";
 import { clsx } from "clsx";
 //#region ../core/dist/getStyles.js

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

@@ -1,4 +1,3 @@
-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";

package/dist/core/dist/index.js

@@ -1,4 +1,3 @@
-import "./color-opacity-map.js";
 import "./compositeStyles.js";
 import "./style-prop-data.js";
 import "./configurable-prop-helpers.js";

package/dist/core.d.ts

@@ -1,4 +1,3 @@
-import { colorPropToOpacityProp } from "./core/dist/color-opacity-map.js";
 import { expandCompositeStyles, getCompositeStylesConfig, setCompositeStylesConfig } from "./core/dist/compositeStyles.js";
 import { PropMapping, propMappings } from "./core/dist/style-prop-data.js";
 import { ConfigurablePropertyEntry, CssVariablePrefixEntry, getConfigurablePropMapping, getConfigurableProperties, getCssVariablePrefixes } from "./core/dist/configurable-prop-helpers.js";
@@ -12,4 +11,4 @@ import { ModifierEntry, modifierMappings } from "./core/dist/modifier-mappings.j
 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, expandCompositeStyles, getCompositeStylesConfig, getConfigurablePropMapping, getConfigurableProperties, getCssVariablePrefixes, getStyles, getVariantClassName, modifierMappings, processStyleProps, propMappings, resolveMotionState, setCompositeStylesConfig, stylePropsTwMap, toCamelCase, transformPreset, withDefaultStyleProps };
+export { ComponentExample, ConfigurablePropertyEntry, CssVariablePrefixEntry, ModifierEntry, PropMapping, TransformedMotionProps, 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,4 +1,3 @@
-import { colorPropToOpacityProp } from "./core/dist/color-opacity-map.js";
 import { expandCompositeStyles, getCompositeStylesConfig, setCompositeStylesConfig } from "./core/dist/compositeStyles.js";
 import { propMappings } from "./core/dist/style-prop-data.js";
 import { getConfigurablePropMapping, getConfigurableProperties, getCssVariablePrefixes } from "./core/dist/configurable-prop-helpers.js";
@@ -13,4 +12,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, expandCompositeStyles, getCompositeStylesConfig, getConfigurablePropMapping, getConfigurableProperties, getCssVariablePrefixes, getStyles, getVariantClassName, modifierMappings, processStyleProps, propMappings, resolveMotionState, setCompositeStylesConfig, stylePropsTwMap, toCamelCase, transformPreset, withDefaultStyleProps };
+export { createComponent, createComponentExample, createComponentStyler, createProvider, createVariants, cx, expandCompositeStyles, getCompositeStylesConfig, getConfigurablePropMapping, getConfigurableProperties, getCssVariablePrefixes, getStyles, getVariantClassName, modifierMappings, processStyleProps, propMappings, resolveMotionState, setCompositeStylesConfig, stylePropsTwMap, toCamelCase, transformPreset, withDefaultStyleProps };

package/dist/foundational-presets/dist/style-props.js

@@ -239,6 +239,9 @@ const bg = defineStyleProp({
 	classPrefix: "bg",
 	values: ["{color}", "{bg}"],
 	arbitrary: "color"
+}).withOpacity({
+	as: "bgOpacity",
+	values: ["{opacity}"]
 }).metadata({ label: "Background" });
 const borderRadius = defineStyleProp({
 	cssProperty: "border-radius",
@@ -299,54 +302,81 @@ const borderColor = defineStyleProp({
 	classPrefix: "border-color",
 	values: ["{color}", "{borderColor}"],
 	arbitrary: "color"
+}).withOpacity({
+	as: "borderColorOpacity",
+	values: ["{opacity}"]
 }).metadata({ label: "Border color" });
 const borderYColor = defineStyleProp({
 	cssProperty: "border-block-color",
 	classPrefix: "border-y-color",
 	values: ["{color}", "{borderColor}"],
 	arbitrary: "color"
+}).withOpacity({
+	as: "borderYColorOpacity",
+	values: ["{opacity}"]
 }).metadata({ label: "Border Y color" });
 const borderXColor = defineStyleProp({
 	cssProperty: "border-inline-color",
 	classPrefix: "border-x-color",
 	values: ["{color}", "{borderColor}"],
 	arbitrary: "color"
+}).withOpacity({
+	as: "borderXColorOpacity",
+	values: ["{opacity}"]
 }).metadata({ label: "Border X color" });
 const borderStartColor = defineStyleProp({
 	cssProperty: "border-inline-start-color",
 	classPrefix: "border-s-color",
 	values: ["{color}", "{borderColor}"],
 	arbitrary: "color"
+}).withOpacity({
+	as: "borderStartColorOpacity",
+	values: ["{opacity}"]
 }).metadata({ label: "Border start color" });
 const borderLeftColor = defineStyleProp({
 	cssProperty: "border-left-color",
 	classPrefix: "border-l-color",
 	values: ["{color}", "{borderColor}"],
 	arbitrary: "color"
+}).withOpacity({
+	as: "borderLeftColorOpacity",
+	values: ["{opacity}"]
 }).metadata({ label: "Border left color" });
 const borderEndColor = defineStyleProp({
 	cssProperty: "border-inline-end-color",
 	classPrefix: "border-e-color",
 	values: ["{color}", "{borderColor}"],
 	arbitrary: "color"
+}).withOpacity({
+	as: "borderEndColorOpacity",
+	values: ["{opacity}"]
 }).metadata({ label: "Border end color" });
 const borderRightColor = defineStyleProp({
 	cssProperty: "border-right-color",
 	classPrefix: "border-r-color",
 	values: ["{color}", "{borderColor}"],
 	arbitrary: "color"
+}).withOpacity({
+	as: "borderRightColorOpacity",
+	values: ["{opacity}"]
 }).metadata({ label: "Border right color" });
 const borderTopColor = defineStyleProp({
 	cssProperty: "border-top-color",
 	classPrefix: "border-t-color",
 	values: ["{color}", "{borderColor}"],
 	arbitrary: "color"
+}).withOpacity({
+	as: "borderTopColorOpacity",
+	values: ["{opacity}"]
 }).metadata({ label: "Border top color" });
 const borderBottomColor = defineStyleProp({
 	cssProperty: "border-bottom-color",
 	classPrefix: "border-b-color",
 	values: ["{color}", "{borderColor}"],
 	arbitrary: "color"
+}).withOpacity({
+	as: "borderBottomColorOpacity",
+	values: ["{opacity}"]
 }).metadata({ label: "Border bottom color" });
 const border = defineStyleProp({
 	cssProperty: "border-width",
@@ -435,6 +465,9 @@ const color = defineStyleProp({
 	classPrefix: "color",
 	values: ["{color}"],
 	arbitrary: "color"
+}).withOpacity({
+	as: "colorOpacity",
+	values: ["{opacity}"]
 }).metadata({ label: "Color" });
 const divideWidth = defineStyleProp({
 	cssProperty: "border-width",
@@ -446,6 +479,9 @@ const divideColor = defineStyleProp({
 	classPrefix: "divide-color",
 	values: ["{color}", "{borderColor}"],
 	arbitrary: "color"
+}).withOpacity({
+	as: "divideColorOpacity",
+	values: ["{opacity}"]
 }).metadata({ label: "Divide color" });
 const divideStyle = defineStyleProp({
 	cssProperty: "border-style",
@@ -578,6 +614,9 @@ const caretColor = defineStyleProp({
 	classPrefix: "caret-color",
 	values: ["{color}"],
 	arbitrary: "color"
+}).withOpacity({
+	as: "caretColorOpacity",
+	values: ["{opacity}"]
 }).metadata({ label: "Caret color" });
 const pointerEvents = defineStyleProp({
 	cssProperty: "pointer-events",
@@ -832,6 +871,9 @@ const outlineColor = defineStyleProp({
 	classPrefix: "outline-color",
 	values: ["{color}"],
 	arbitrary: "color"
+}).withOpacity({
+	as: "outlineColorOpacity",
+	values: ["{opacity}"]
 }).metadata({ label: "Outline color" });
 const outlineStyle = defineStyleProp({
 	cssProperty: "outline-style",
@@ -854,6 +896,9 @@ const ringColor = defineStyleProp({
 	classPrefix: "ring-color",
 	values: ["{color}"],
 	arbitrary: "color"
+}).withOpacity({
+	as: "ringColorOpacity",
+	values: ["{opacity}"]
 }).metadata({ label: "Ring color" });
 const ringOffsetWidth = defineStyleProp({
 	cssProperty: "--tw-ring-offset-width",
@@ -867,6 +912,9 @@ const ringOffsetColor = defineStyleProp({
 	classPrefix: "ring-offset-color",
 	values: ["{color}"],
 	arbitrary: "color"
+}).withOpacity({
+	as: "ringOffsetColorOpacity",
+	values: ["{opacity}"]
 }).metadata({ label: "Ring offset color" });
 const ringInset = defineStyleProp({
 	cssProperty: "--tw-ring-inset",
@@ -885,6 +933,9 @@ const shadowColor = defineStyleProp({
 	classPrefix: "shadow-color",
 	values: ["{color}"],
 	arbitrary: "color"
+}).withOpacity({
+	as: "shadowColorOpacity",
+	values: ["{opacity}"]
 }).metadata({ label: "Shadow color" });
 const height = defineStyleProp({
 	cssProperty: "height",
@@ -1131,12 +1182,18 @@ const fillColor = defineStyleProp({
 	classPrefix: "fill",
 	values: ["{color}"],
 	arbitrary: "color"
+}).withOpacity({
+	as: "fillColorOpacity",
+	values: ["{opacity}"]
 }).metadata({ label: "Fill color" });
 const strokeColor = defineStyleProp({
 	cssProperty: "stroke",
 	classPrefix: "stroke-color",
 	values: ["{color}"],
 	arbitrary: "color"
+}).withOpacity({
+	as: "strokeColorOpacity",
+	values: ["{opacity}"]
 }).metadata({ label: "Stroke color" });
 const strokeWidth = defineStyleProp({
 	cssProperty: "stroke-width",
@@ -1321,6 +1378,9 @@ const textDecorationColor = defineStyleProp({
 	classPrefix: "decoration-color",
 	values: ["{color}"],
 	arbitrary: "color"
+}).withOpacity({
+	as: "textDecorationColorOpacity",
+	values: ["{opacity}"]
 }).metadata({ label: "Text decoration color" });
 const textDecorationStyle = defineStyleProp({
 	cssProperty: "text-decoration-style",

package/dist/loader/dist/loader/style-transform.js

@@ -2,7 +2,6 @@ import { applyComponentStyleDefaults } from "../../../utils/dist/component-style
 import { kebabCase } from "../../../utils/dist/string-utils/kebabCase.js";
 import { componentVariantClass } from "../../../utils/dist/string-utils/componentClassName.js";
 import "../../../utils/dist/index.js";
-import { colorPropToOpacityProp } from "../packages/core/dist/color-opacity-map.js";
 import { expandCompositeStyles } from "../packages/core/dist/compositeStyles.js";
 import { propMappings } from "../packages/core/dist/style-prop-data.js";
 import { toCamelCase } from "../packages/core/dist/getStyles.js";
@@ -163,9 +162,9 @@ function createStyleTransformRuntime(transformData, manifest) {
 			effectiveProps = expanded;
 			if (markerClasses.length > 0) effectiveProps.__compositeStyleMarkers = markerClasses;
 		}
-		for (const [colorProp, opacityPropName] of Object.entries(colorPropToOpacityProp)) if (effectiveProps[opacityPropName] !== void 0 && effectiveProps[colorProp] !== void 0) {
-			effectiveProps[colorProp] = `${effectiveProps[colorProp]}_${effectiveProps[opacityPropName]}`;
-			delete effectiveProps[opacityPropName];
+		for (const { colorProp, opacityProp, separator } of transformData?.colorOpacityPairs ?? []) if (effectiveProps[opacityProp] !== void 0 && effectiveProps[colorProp] !== void 0) {
+			effectiveProps[colorProp] = `${effectiveProps[colorProp]}${separator}${effectiveProps[opacityProp]}`;
+			delete effectiveProps[opacityProp];
 		}
 		const classParts = [];
 		if (Array.isArray(effectiveProps.__compositeStyleMarkers)) {

package/dist/loader/dist/packages/core/dist/getStyles.js

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