@yahoo/uds 3.117.4 → 3.117.5

package/dist/tailwind/dist/automated-config/dist/utils/index.cjs

@@ -0,0 +1,479 @@
+/*! © 2026 Yahoo, Inc. UDS Tailwind and Purger v0.0.0-development */
+const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+const require_index = require('../../../css-tokens/dist/index.cjs');
+const require_properties = require('../properties.cjs');
+const require_generateDefaultClassName = require('./generateDefaultClassName.cjs');
+const require_generateSchemaKey = require('./generateSchemaKey.cjs');
+const require_variantConfigGuards = require('./variantConfigGuards.cjs');
+let lodash_es = require("lodash-es");
+
+//#region ../automated-config/dist/utils/index.js
+/*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
+const CSS_GAP = "gap";
+const CSS_LINE_HEIGHT = "line-height";
+const CSS_BORDER_WIDTH = "border-width";
+const CSS_BORDER_COLOR = "border-color";
+const CSS_BOX_SHADOW = "box-shadow";
+function deepMerge(target, source) {
+	return (0, lodash_es.mergeWith)({}, target, source);
+}
+const COMPONENTS_WITH_SHADOW_BORDERS = [
+	{
+		componentName: "button",
+		layer: "root"
+	},
+	{
+		componentName: "iconbutton",
+		layer: "root"
+	},
+	{
+		componentName: "chip",
+		layer: "root"
+	}
+];
+/**
+* Map our "states" to pseudo-classes (hover => :hover, pressed => :active, etc.).
+* Adjust or extend as needed.
+*/
+const statePseudoMap = {
+	rest: "",
+	hover: ":hover:not(:active, :disabled, :has(:disabled))",
+	pressed: ":active:not(:disabled, :has(:disabled))",
+	disabled: ":is(:disabled, :has(:disabled))",
+	visited: ":visited",
+	focused: ":focus",
+	"focus-within": ":focus-within",
+	"focused-keyboard": ":focus-visible",
+	readonly: ":has(input:read-only)",
+	invalid: ":has(input[aria-invalid=\"true\"])",
+	"invalid&hover": ":has(input[aria-invalid=\"true\"]):hover:not(:active, :disabled, :has(:disabled))",
+	"invalid&pressed": ":has(input[aria-invalid=\"true\"]):active:not(:disabled, :has(:disabled))"
+};
+const statePseudoMapDocsMode = {
+	rest: "",
+	hover: "hover",
+	pressed: "active",
+	disabled: "has-disabled",
+	visited: "visited",
+	focused: "focus",
+	"focus-within": "focus-within",
+	"focused-keyboard": "focus-visible",
+	readonly: "input-readonly",
+	invalid: "has-input-invalid",
+	"invalid&hover": "has-input-invalid-and-hover",
+	"invalid&pressed": "has-input-invalid-and-active"
+};
+/**
+* Generates button line-height with icon size minimum.
+* Ensures button line-height is at least as tall as the icon to prevent clipping.
+* @returns Enhanced line-height CSS value with max(), or original value if icon size unavailable
+*/
+function getButtonLineHeightWithIconMinimum({ lineHeight, schema, iconLayerKey, state, theme }) {
+	const iconSizeValue = schema.variables?.[iconLayerKey]?.size?.[state]?.value;
+	if (iconSizeValue) return `max(${lineHeight}, ${theme(require_properties.configurableProperties.iconSize.twThemePath("iconSizes", iconSizeValue))})`;
+	return lineHeight;
+}
+/**
+* Forces button borders to use box-shadow instead of border properties.
+* Converts border-width and border-color into an inset box-shadow layer.
+*
+* Why box-shadow for borders?
+* - Respects border-radius (unlike outline which stays rectangular)
+* - Allows layering multiple shadows in a single property
+* - GPU-accelerated and performant
+* - Works perfectly with rounded/circular buttons
+*
+* @param classStyles - The CSS declarations for a button class
+* @returns Modified styles with box-shadow layers, or original if no border
+*
+* @example
+* Input:  { border-width: '2px', border-color: 'red', box-shadow: '0 2px 4px rgba(0,0,0,0.1)' }
+* Output: { box-shadow: 'inset 0 0 0 2px red, 0 2px 4px rgba(0,0,0,0.1)' }
+*/
+function applyBoxShadowBorder(classStyles) {
+	const borderWidth = classStyles[CSS_BORDER_WIDTH];
+	const borderColor = classStyles[CSS_BORDER_COLOR];
+	if (!borderWidth || !borderColor) return classStyles;
+	const stripImportant = (value) => value.replace(/\s*!important\s*$/, "");
+	const hasImportant = (value) => value?.includes("!important") ?? false;
+	const layers = [`inset 0 0 0 ${stripImportant(borderWidth)} ${stripImportant(borderColor)}`, classStyles[CSS_BOX_SHADOW] && stripImportant(classStyles[CSS_BOX_SHADOW])].filter(Boolean);
+	const needsImportant = hasImportant(borderWidth) || hasImportant(borderColor) || hasImportant(classStyles[CSS_BOX_SHADOW]);
+	const newStyles = { ...classStyles };
+	newStyles[CSS_BOX_SHADOW] = layers.join(", ") + (needsImportant ? " !important" : "");
+	delete newStyles[CSS_BORDER_WIDTH];
+	delete newStyles[CSS_BORDER_COLOR];
+	return newStyles;
+}
+function generateClassName({ componentName, subComponentName, variantKey, variantValue, componentStateKey, componentStateValue, layer, layerOptionalPseudoSelector }) {
+	let className = "";
+	if (subComponentName) className = `uds-${componentName}-${subComponentName}-${variantKey}`.toLowerCase();
+	else className = `uds-${componentName}-${variantKey}`.toLowerCase();
+	if (variantValue) className = `${className}-${variantValue}`.toLowerCase();
+	if (componentStateKey && componentStateValue) className = `${className}-${componentStateKey}-${componentStateValue}`.toLowerCase();
+	className = `${className}-${layer}`.toLowerCase();
+	if (layerOptionalPseudoSelector) className = `${className}${layerOptionalPseudoSelector}`;
+	return className.replaceAll(/\s+/g, "-");
+}
+const getTheCssPropertyValue = (schema, theme, propertyName, schemaStateValue, existingValue, originalPropertyDefinition) => {
+	const { value, type } = schemaStateValue;
+	const propertyConfig = require_properties.configurableProperties[propertyName];
+	let newValue;
+	if (propertyConfig.customValueRenderer) newValue = propertyConfig.customValueRenderer(schemaStateValue, schema, theme, originalPropertyDefinition);
+	else {
+		const safeTwThemePath = propertyConfig.twThemePath;
+		newValue = theme(safeTwThemePath(type, String(value)));
+	}
+	if (propertyConfig.concatenate && existingValue) return `${existingValue}${propertyConfig.concatenationDelimiter || ", "}${newValue}`;
+	return newValue;
+};
+function generateDeclaration({ componentName, subComponentName, variantKey, variantValue, layer, layerOptionalPseudoSelector, componentStateKey, componentStateValue, schema, propertyKey, originalPropertyDefinition, theme, currentStyles, previewOptions }) {
+	const schemaKey = require_generateSchemaKey.generateSchemaKey({
+		variantKey,
+		variantValue,
+		layer,
+		subComponentName,
+		componentStateKey,
+		componentStateValue
+	});
+	let className = generateClassName({
+		componentName,
+		variantKey,
+		variantValue,
+		layer,
+		subComponentName,
+		componentStateKey,
+		componentStateValue
+	});
+	const propertyStateMap = schema.variables?.[schemaKey]?.[propertyKey];
+	if (!propertyStateMap) throw new Error(`Prop definition (${componentName} - ${schemaKey} - ${propertyKey}) not found, this is not expected, please report the bug to the UDS team`);
+	const styles = {};
+	for (const propStateStr in propertyStateMap) {
+		const propertyState = propStateStr;
+		const propertyStateSelector = statePseudoMap[propertyState] ?? "";
+		const schemaValueForState = propertyStateMap[propertyState];
+		let fullClassName = ``;
+		if (layer === "root") if (componentStateKey && componentStateValue) {
+			const rootVariantClass = generateClassName({
+				componentName,
+				variantKey,
+				variantValue,
+				layer,
+				subComponentName
+			});
+			className = generateClassName({
+				componentName,
+				variantKey,
+				layer,
+				subComponentName,
+				componentStateKey,
+				componentStateValue
+			});
+			fullClassName = `.${rootVariantClass}${propertyStateSelector}.${className}`;
+		} else fullClassName = `.${className}${propertyStateSelector}`;
+		else {
+			const rootVariantClassName = generateClassName({
+				componentName,
+				variantKey,
+				variantValue,
+				layer: "root",
+				subComponentName
+			});
+			if (componentStateKey && componentStateValue) {
+				const rootVariantClassNameWithComponentState = generateClassName({
+					componentName,
+					variantKey,
+					layer: "root",
+					subComponentName,
+					componentStateKey,
+					componentStateValue
+				});
+				className = generateClassName({
+					componentName,
+					variantKey,
+					variantValue,
+					layer,
+					layerOptionalPseudoSelector,
+					subComponentName
+				});
+				fullClassName = `.${rootVariantClassName}${propertyStateSelector}.${rootVariantClassNameWithComponentState} .${className}`;
+			} else fullClassName = `.${rootVariantClassName}${propertyStateSelector} .${className}`;
+		}
+		const { cssProperties, extendedProperties: extendedPropertiesGetter } = require_properties.configurableProperties[originalPropertyDefinition.name];
+		const cssDeclarations = {};
+		const isExtendedPropertiesFunction = (0, lodash_es.isFunction)(extendedPropertiesGetter);
+		const extendedProperties = isExtendedPropertiesFunction ? extendedPropertiesGetter({
+			componentName,
+			subComponentName,
+			layer,
+			propertyKey
+		}) : extendedPropertiesGetter;
+		if (extendedProperties && extendedProperties.length) {
+			if (!isExtendedPropertiesFunction && (typeof cssProperties === "string" || Array.isArray(cssProperties) && cssProperties.length > 0)) throw new Error("Invalid configuration: cssProperties should not be configured when extendedProperties are defined. Please update your property configuration accordingly.");
+			for (const extendedProp of extendedProperties) {
+				const cssPropertiesRef = require_properties.configurableProperties[extendedProp].cssProperties;
+				if (typeof cssPropertiesRef === "string") {
+					const existingValue = currentStyles?.[fullClassName]?.[cssPropertiesRef];
+					cssDeclarations[cssPropertiesRef] = getTheCssPropertyValue(schema, theme, extendedProp, schemaValueForState, existingValue);
+				} else if (Array.isArray(cssPropertiesRef)) for (const cssProp of cssPropertiesRef) {
+					const existingValue = currentStyles?.[fullClassName]?.[cssProp];
+					cssDeclarations[cssProp] = getTheCssPropertyValue(schema, theme, extendedProp, schemaValueForState, existingValue);
+				}
+			}
+		} else if (typeof cssProperties === "string") {
+			const existingValue = currentStyles?.[fullClassName]?.[cssProperties];
+			cssDeclarations[cssProperties] = getTheCssPropertyValue(schema, theme, originalPropertyDefinition.name, schemaValueForState, existingValue, originalPropertyDefinition);
+		} else if (Array.isArray(cssProperties)) for (const cssProp of cssProperties) {
+			const existingValue = currentStyles?.[fullClassName]?.[cssProp];
+			cssDeclarations[cssProp] = getTheCssPropertyValue(schema, theme, originalPropertyDefinition.name, schemaValueForState, existingValue, originalPropertyDefinition);
+		}
+		/**
+		* Button root layer workarounds & enhancements.
+		* These handle Motion animation bridges and visual fixes until better config-to-component solutions exist.
+		*/
+		if (componentName === "button" && layer === "root") {
+			if (propertyKey === CSS_GAP) cssDeclarations[require_index.BUTTON_GAP_VAR] = cssDeclarations[CSS_GAP];
+			if (propertyKey === "scaleEffect" && propertyState === "hover") {
+				const rootClassName = `.${className}`;
+				const renderValue = (schemaValue) => require_properties.configurableProperties.scaleEffect.customValueRenderer?.(schemaValue, schema, () => "") ?? "1";
+				if (!styles[rootClassName]) styles[rootClassName] = {};
+				styles[rootClassName][require_index.BUTTON_SCALE_EFFECT_REST] = "1";
+				if (propertyStateMap.hover) styles[rootClassName][require_index.BUTTON_SCALE_EFFECT_HOVER] = renderValue(propertyStateMap.hover);
+				if (propertyStateMap.pressed) styles[rootClassName][require_index.BUTTON_SCALE_EFFECT_PRESSED] = renderValue(propertyStateMap.pressed);
+			}
+			if (cssDeclarations[CSS_LINE_HEIGHT]) {
+				const iconLayerKey = require_generateSchemaKey.generateSchemaKey({
+					variantKey,
+					variantValue,
+					layer: "icon",
+					subComponentName
+				});
+				cssDeclarations[CSS_LINE_HEIGHT] = getButtonLineHeightWithIconMinimum({
+					lineHeight: cssDeclarations[CSS_LINE_HEIGHT],
+					schema,
+					iconLayerKey,
+					state: propertyState,
+					theme
+				});
+			}
+		}
+		if (!styles[fullClassName]) styles[fullClassName] = {
+			...cssDeclarations,
+			...styles[fullClassName]
+		};
+		if (previewOptions?.generatePseudoStateClassModifier) {
+			const pseudoPrefixClass = statePseudoMapDocsMode[propertyState] ?? "";
+			if (pseudoPrefixClass.length) {
+				const importantCssDeclarations = Object.fromEntries(Object.entries(cssDeclarations).map(([prop, value]) => {
+					const strValue = String(value).trimEnd().replace(/;$/, "");
+					if (strValue.includes("!important")) return [prop, strValue];
+					return [prop, `${strValue} !important`];
+				}));
+				styles[`.${pseudoPrefixClass}${fullClassName}`.replace(propertyStateSelector, "")] = {
+					...importantCssDeclarations,
+					...styles[`.${pseudoPrefixClass}${fullClassName}`.replace(propertyStateSelector, "")]
+				};
+			}
+		}
+	}
+	return styles;
+}
+function generateConfigStyles(config, schema, theme, previewOptions) {
+	const componentName = config.label.toLowerCase();
+	let styles = {};
+	for (const variantKey in config.variants) {
+		const variantConfig = config.variants[variantKey];
+		for (const variantOption of variantConfig.options) if (require_variantConfigGuards.isVariantConfigWithComponentStates(variantConfig)) {
+			const componentStates = variantConfig.componentStates;
+			for (const componentStateKey in componentStates) {
+				const componentState = componentStates[componentStateKey];
+				for (const componentStateOption of componentState.options) for (const layerKey in componentState.layers) {
+					const layer = componentState.layers[layerKey];
+					for (const propertyKey in layer.properties) {
+						const originalPropertyDefinition = layer.properties[propertyKey];
+						const declarations = generateDeclaration({
+							componentName,
+							variantKey,
+							variantValue: variantOption,
+							componentStateKey,
+							componentStateValue: componentStateOption,
+							layer: layerKey,
+							layerOptionalPseudoSelector: layer.pseudoSelector,
+							propertyKey,
+							originalPropertyDefinition,
+							theme,
+							schema,
+							currentStyles: styles,
+							previewOptions
+						});
+						styles = deepMerge(styles, declarations);
+					}
+				}
+			}
+		} else if (require_variantConfigGuards.isVariantConfigWithProperties(variantConfig)) {
+			const layers = variantConfig.layers;
+			for (const layerKey in layers) {
+				const layer = layers[layerKey];
+				for (const propertyKey in layer.properties) {
+					const originalPropertyDefinition = layer.properties[propertyKey];
+					const declarations = generateDeclaration({
+						componentName,
+						variantKey,
+						variantValue: variantOption,
+						layer: layerKey,
+						layerOptionalPseudoSelector: layer.pseudoSelector,
+						propertyKey,
+						originalPropertyDefinition,
+						theme,
+						schema,
+						currentStyles: styles,
+						previewOptions
+					});
+					styles = deepMerge(styles, declarations);
+				}
+			}
+		}
+	}
+	if (config.subComponents) {
+		const { subComponents } = config;
+		for (const subComponentKey in subComponents) for (const variantKey in subComponents[subComponentKey].variants) {
+			const variantConfig = subComponents[subComponentKey].variants[variantKey];
+			for (const variantOption of variantConfig.options) if (require_variantConfigGuards.isVariantConfigWithComponentStates(variantConfig)) {
+				const componentStates = variantConfig.componentStates;
+				for (const componentStateKey in componentStates) {
+					const componentState = componentStates[componentStateKey];
+					for (const componentStateOption of componentState.options) for (const layerKey in componentState.layers) {
+						const layer = componentState.layers[layerKey];
+						for (const propertyKey in layer.properties) {
+							const originalPropertyDefinition = layer.properties[propertyKey];
+							const declarations = generateDeclaration({
+								componentName,
+								variantKey,
+								variantValue: variantOption,
+								componentStateKey,
+								componentStateValue: componentStateOption,
+								subComponentName: subComponentKey,
+								layer: layerKey,
+								layerOptionalPseudoSelector: layer.pseudoSelector,
+								propertyKey,
+								originalPropertyDefinition,
+								theme,
+								schema,
+								currentStyles: styles,
+								previewOptions
+							});
+							styles = deepMerge(styles, declarations);
+						}
+					}
+				}
+			} else if (require_variantConfigGuards.isVariantConfigWithProperties(variantConfig)) {
+				const layers = variantConfig.layers;
+				for (const layerKey in layers) {
+					const layer = layers[layerKey];
+					for (const propertyKey in layer.properties) {
+						const originalPropertyDefinition = layer.properties[propertyKey];
+						const declarations = generateDeclaration({
+							componentName,
+							subComponentName: subComponentKey,
+							variantKey,
+							variantValue: variantOption,
+							layer: layerKey,
+							layerOptionalPseudoSelector: layer.pseudoSelector,
+							propertyKey,
+							originalPropertyDefinition,
+							theme,
+							schema,
+							currentStyles: styles,
+							previewOptions
+						});
+						styles = deepMerge(styles, declarations);
+					}
+				}
+			}
+		}
+	}
+	/**
+	* Post-process button/iconbutton styles to force box-shadow for borders.
+	* This runs AFTER all properties have been processed and merged.
+	*/
+	const toApply = COMPONENTS_WITH_SHADOW_BORDERS.find((c) => c.componentName === componentName);
+	if (toApply) {
+		for (const className in styles) if (className.includes(`-${toApply.layer}`.toLowerCase())) styles[className] = applyBoxShadowBorder(styles[className]);
+	}
+	return styles;
+}
+/**
+* @param config - Component configuration (Button, IconButton, etc.)
+* @param schema - Production schema with defaults and variables
+* @param theme - Tailwind theme function to resolve design tokens
+* @param previewOptions - Options for generating preview mode class modifiers
+* @returns CSS styles object with grouped selectors for default aliases
+*/
+const generateStyles = (config, schema, theme, previewOptions) => {
+	const styles = generateConfigStyles(config, schema, theme, previewOptions);
+	if (!config.variants && !config.subComponents) return styles;
+	const componentName = config.label.toLowerCase();
+	if (componentName !== "button" && componentName !== "iconbutton") return styles;
+	const replacementMap = /* @__PURE__ */ new Map();
+	/**
+	* Helper: Extract all layer keys from a variant configuration
+	* Handles both simple variants (with direct layers) and variants with component states
+	*/
+	const getLayerKeys = (variantConfig) => {
+		if (require_variantConfigGuards.isVariantConfigWithProperties(variantConfig)) return Object.keys(variantConfig.layers);
+		else if (require_variantConfigGuards.isVariantConfigWithComponentStates(variantConfig)) {
+			const layerKeysSet = /* @__PURE__ */ new Set();
+			for (const componentStateConfig of Object.values(variantConfig.componentStates)) Object.keys(componentStateConfig.layers).forEach((key) => layerKeysSet.add(key));
+			return Array.from(layerKeysSet);
+		}
+		return [];
+	};
+	/**
+	* Helper: Build replacement map for default variant values
+	* For each default variant + layer combination, creates an entry like:
+	*   "uds-button-size-sm-root" → ".uds-button-size-sm-root, .uds-button-size-default-root"
+	*/
+	const buildReplacements = (variants, subComponentName) => {
+		for (const [variantType, variantConfig] of Object.entries(variants)) {
+			if (!require_variantConfigGuards.isVariantConfigWithProperties(variantConfig) && !require_variantConfigGuards.isVariantConfigWithComponentStates(variantConfig)) continue;
+			const layerKeys = getLayerKeys(variantConfig);
+			if (layerKeys.length) {
+				const defaultValue = schema.defaults?.[variantType];
+				if (defaultValue) for (const layerKey of layerKeys) {
+					const baseClass = generateClassName({
+						componentName,
+						variantKey: variantType,
+						variantValue: defaultValue,
+						layer: layerKey,
+						subComponentName
+					});
+					const defaultClass = require_generateDefaultClassName.generateDefaultClassName(componentName, variantType, layerKey, subComponentName);
+					replacementMap.set(baseClass, `.${baseClass}, .${defaultClass}`);
+				}
+			}
+		}
+	};
+	if (config.variants) buildReplacements(config.variants);
+	if (config.subComponents) for (const [subComponentName, subComponentConfig] of Object.entries(config.subComponents)) buildReplacements(subComponentConfig.variants, subComponentName);
+	const finalStyles = {};
+	for (const [selector, declarations] of Object.entries(styles)) {
+		let defaultsSelector = selector;
+		let hasMatch = false;
+		for (const [defaultVariantClass, replacement] of replacementMap.entries()) if (selector.includes(defaultVariantClass)) {
+			hasMatch = true;
+			const defaultMatch = replacement.match(/,\s*\.([a-z0-9-]+)/);
+			if (defaultMatch) {
+				const defaultClass = defaultMatch[1];
+				defaultsSelector = defaultsSelector.replaceAll(defaultVariantClass, defaultClass);
+			}
+		}
+		if (!hasMatch) {
+			finalStyles[selector] = declarations;
+			continue;
+		}
+		finalStyles[`${selector}, ${defaultsSelector}`] = declarations;
+	}
+	return finalStyles;
+};
+
+//#endregion
+exports.generateStyles = generateStyles;