@yahoo/uds 3.169.1 → 3.170.0

package/dist/styles/styleVariantTemplates.d.cts

@@ -0,0 +1,161 @@
+
+//#region src/styles/styleVariantTemplates.d.ts
+/**
+ * A class-name template for one style prop. Either a single template string in
+ * which `%v` is replaced with the normalized prop value, or a template plus an
+ * exceptions map (`e`) for the values whose class does not follow the
+ * template. Exception lookups use the raw (pre-normalization) value.
+ */
+type VariantTemplate = string | {
+  t: string;
+  e: Record<string, string>;
+};
+/**
+ * Compact class-name templates for the hand-written style props in
+ * `./variants.ts`. The enumerated `variants` map stays the build-time source
+ * of truth (CSS generation, purging, public `tokens` export); the runtime
+ * styler derives class names from these templates instead so the ~50 kB
+ * enumeration never enters the client bundle.
+ *
+ * `variantClass.test.ts` exhaustively asserts template-derived classes equal
+ * the `variants` map, so any drift fails CI.
+ */
+declare const styleVariantTemplates: {
+  readonly color: "text-%v";
+  readonly placeholderColor: "placeholder:text-%v";
+  readonly fontFamily: "uds-font-family-%v";
+  readonly fontSize: "uds-font-size-%v";
+  readonly fontWeight: "uds-font-weight-%v";
+  readonly lineHeight: "uds-line-height-%v";
+  readonly letterSpacing: "uds-letter-spacing-%v";
+  readonly textAlign: "text-%v";
+  readonly textTransform: {
+    readonly t: "uds-text-transform-%v";
+    readonly e: {
+      readonly none: "normal-case";
+      readonly uppercase: "uppercase";
+      readonly lowercase: "lowercase";
+      readonly capitalize: "capitalize";
+    };
+  };
+  readonly spacing: "p-%v";
+  readonly spacingHorizontal: "px-%v";
+  readonly spacingVertical: "py-%v";
+  readonly spacingBottom: "pb-%v";
+  readonly spacingEnd: "pe-%v";
+  readonly spacingStart: "ps-%v";
+  readonly spacingTop: "pt-%v";
+  readonly offset: "-m-%v";
+  readonly offsetVertical: "-my-%v";
+  readonly offsetHorizontal: "-mx-%v";
+  readonly offsetBottom: "-mb-%v";
+  readonly offsetEnd: "-me-%v";
+  readonly offsetStart: "-ms-%v";
+  readonly offsetTop: "-mt-%v";
+  readonly columnGap: "gap-x-%v";
+  readonly rowGap: "gap-y-%v";
+  readonly backgroundColor: "bg-%v";
+  readonly borderColor: "border-%v";
+  readonly borderStartColor: "border-s-%v";
+  readonly borderEndColor: "border-e-%v";
+  readonly borderBottomColor: "border-b-%v";
+  readonly borderTopColor: "border-t-%v";
+  readonly borderRadius: "uds-border-radius-%v";
+  readonly borderTopStartRadius: "uds-border-top-start-radius-%v";
+  readonly borderTopEndRadius: "uds-border-top-end-radius-%v";
+  readonly borderBottomStartRadius: "uds-border-bottom-start-radius-%v";
+  readonly borderBottomEndRadius: "uds-border-bottom-end-radius-%v";
+  readonly borderWidth: "uds-border-width-%v";
+  readonly borderVerticalWidth: "uds-border-width-y-%v";
+  readonly borderHorizontalWidth: "uds-border-width-x-%v";
+  readonly borderStartWidth: "uds-border-width-start-%v";
+  readonly borderEndWidth: "uds-border-width-end-%v";
+  readonly borderTopWidth: "uds-border-width-top-%v";
+  readonly borderBottomWidth: "uds-border-width-bottom-%v";
+  readonly avatarSize: "avatarSize-%v";
+  readonly iconSize: "iconSize-%v leading-none";
+  readonly alignContent: {
+    readonly t: "content-%v";
+    readonly e: {
+      readonly 'flex-start': "content-start";
+      readonly 'flex-end': "content-end";
+      readonly 'space-between': "content-between";
+      readonly 'space-around': "content-around";
+    };
+  };
+  readonly alignItems: {
+    readonly t: "items-%v";
+    readonly e: {
+      readonly 'flex-start': "items-start";
+      readonly 'flex-end': "items-end";
+    };
+  };
+  readonly alignSelf: {
+    readonly t: "self-%v";
+    readonly e: {
+      readonly 'flex-start': "self-start";
+      readonly 'flex-end': "self-end";
+    };
+  };
+  readonly flex: "flex-%v";
+  readonly flexDirection: {
+    readonly t: "flex-%v";
+    readonly e: {
+      readonly column: "flex-col";
+      readonly 'column-reverse': "flex-col-reverse";
+    };
+  };
+  readonly flexGrow: {
+    readonly t: "grow-[%v]";
+    readonly e: {
+      readonly '0': "grow-0";
+      readonly '1': "grow";
+    };
+  };
+  readonly flexShrink: {
+    readonly t: "shrink-%v";
+    readonly e: {
+      readonly '1': "shrink";
+    };
+  };
+  readonly flexWrap: "flex-%v";
+  readonly justifyContent: {
+    readonly t: "justify-%v";
+    readonly e: {
+      readonly 'flex-start': "justify-start";
+      readonly 'flex-end': "justify-end";
+      readonly 'space-between': "justify-between";
+      readonly 'space-around': "justify-around";
+      readonly 'space-evenly': "justify-evenly";
+    };
+  };
+  readonly flexBasis: "basis-[%v]";
+  readonly display: {
+    readonly t: "%v";
+    readonly e: {
+      readonly none: "hidden";
+    };
+  };
+  readonly overflow: "overflow-%v";
+  readonly overflowX: "overflow-x-%v";
+  readonly overflowY: "overflow-y-%v";
+  readonly position: "%v";
+  readonly contentFit: "object-%v";
+  readonly colorMode: "uds-color-mode-%v";
+  readonly scaleMode: "uds-scale-mode-%v";
+  readonly width: "w-%v";
+  readonly height: "h-%v";
+  readonly dropShadow: "uds-drop-shadow-%v";
+  readonly insetShadow: "uds-inset-shadow-%v";
+  readonly nestedBorderRadiusSize: "uds-nested-border-radius-size-%v";
+  readonly nestedBorderRadiusWidth: "uds-nested-border-radius-width-%v";
+  readonly nestedBorderRadiusSpacing: "uds-nested-border-radius-spacing-%v";
+  readonly nestedBorderRadius: {
+    readonly t: "uds-nested-border-radius-%v";
+    readonly e: {
+      readonly true: "uds-nested-border-radius";
+    };
+  };
+};
+//#endregion
+export { type VariantTemplate, styleVariantTemplates };

package/dist/styles/styleVariantTemplates.d.ts

@@ -0,0 +1,161 @@
+
+//#region src/styles/styleVariantTemplates.d.ts
+/**
+ * A class-name template for one style prop. Either a single template string in
+ * which `%v` is replaced with the normalized prop value, or a template plus an
+ * exceptions map (`e`) for the values whose class does not follow the
+ * template. Exception lookups use the raw (pre-normalization) value.
+ */
+type VariantTemplate = string | {
+  t: string;
+  e: Record<string, string>;
+};
+/**
+ * Compact class-name templates for the hand-written style props in
+ * `./variants.ts`. The enumerated `variants` map stays the build-time source
+ * of truth (CSS generation, purging, public `tokens` export); the runtime
+ * styler derives class names from these templates instead so the ~50 kB
+ * enumeration never enters the client bundle.
+ *
+ * `variantClass.test.ts` exhaustively asserts template-derived classes equal
+ * the `variants` map, so any drift fails CI.
+ */
+declare const styleVariantTemplates: {
+  readonly color: "text-%v";
+  readonly placeholderColor: "placeholder:text-%v";
+  readonly fontFamily: "uds-font-family-%v";
+  readonly fontSize: "uds-font-size-%v";
+  readonly fontWeight: "uds-font-weight-%v";
+  readonly lineHeight: "uds-line-height-%v";
+  readonly letterSpacing: "uds-letter-spacing-%v";
+  readonly textAlign: "text-%v";
+  readonly textTransform: {
+    readonly t: "uds-text-transform-%v";
+    readonly e: {
+      readonly none: "normal-case";
+      readonly uppercase: "uppercase";
+      readonly lowercase: "lowercase";
+      readonly capitalize: "capitalize";
+    };
+  };
+  readonly spacing: "p-%v";
+  readonly spacingHorizontal: "px-%v";
+  readonly spacingVertical: "py-%v";
+  readonly spacingBottom: "pb-%v";
+  readonly spacingEnd: "pe-%v";
+  readonly spacingStart: "ps-%v";
+  readonly spacingTop: "pt-%v";
+  readonly offset: "-m-%v";
+  readonly offsetVertical: "-my-%v";
+  readonly offsetHorizontal: "-mx-%v";
+  readonly offsetBottom: "-mb-%v";
+  readonly offsetEnd: "-me-%v";
+  readonly offsetStart: "-ms-%v";
+  readonly offsetTop: "-mt-%v";
+  readonly columnGap: "gap-x-%v";
+  readonly rowGap: "gap-y-%v";
+  readonly backgroundColor: "bg-%v";
+  readonly borderColor: "border-%v";
+  readonly borderStartColor: "border-s-%v";
+  readonly borderEndColor: "border-e-%v";
+  readonly borderBottomColor: "border-b-%v";
+  readonly borderTopColor: "border-t-%v";
+  readonly borderRadius: "uds-border-radius-%v";
+  readonly borderTopStartRadius: "uds-border-top-start-radius-%v";
+  readonly borderTopEndRadius: "uds-border-top-end-radius-%v";
+  readonly borderBottomStartRadius: "uds-border-bottom-start-radius-%v";
+  readonly borderBottomEndRadius: "uds-border-bottom-end-radius-%v";
+  readonly borderWidth: "uds-border-width-%v";
+  readonly borderVerticalWidth: "uds-border-width-y-%v";
+  readonly borderHorizontalWidth: "uds-border-width-x-%v";
+  readonly borderStartWidth: "uds-border-width-start-%v";
+  readonly borderEndWidth: "uds-border-width-end-%v";
+  readonly borderTopWidth: "uds-border-width-top-%v";
+  readonly borderBottomWidth: "uds-border-width-bottom-%v";
+  readonly avatarSize: "avatarSize-%v";
+  readonly iconSize: "iconSize-%v leading-none";
+  readonly alignContent: {
+    readonly t: "content-%v";
+    readonly e: {
+      readonly 'flex-start': "content-start";
+      readonly 'flex-end': "content-end";
+      readonly 'space-between': "content-between";
+      readonly 'space-around': "content-around";
+    };
+  };
+  readonly alignItems: {
+    readonly t: "items-%v";
+    readonly e: {
+      readonly 'flex-start': "items-start";
+      readonly 'flex-end': "items-end";
+    };
+  };
+  readonly alignSelf: {
+    readonly t: "self-%v";
+    readonly e: {
+      readonly 'flex-start': "self-start";
+      readonly 'flex-end': "self-end";
+    };
+  };
+  readonly flex: "flex-%v";
+  readonly flexDirection: {
+    readonly t: "flex-%v";
+    readonly e: {
+      readonly column: "flex-col";
+      readonly 'column-reverse': "flex-col-reverse";
+    };
+  };
+  readonly flexGrow: {
+    readonly t: "grow-[%v]";
+    readonly e: {
+      readonly '0': "grow-0";
+      readonly '1': "grow";
+    };
+  };
+  readonly flexShrink: {
+    readonly t: "shrink-%v";
+    readonly e: {
+      readonly '1': "shrink";
+    };
+  };
+  readonly flexWrap: "flex-%v";
+  readonly justifyContent: {
+    readonly t: "justify-%v";
+    readonly e: {
+      readonly 'flex-start': "justify-start";
+      readonly 'flex-end': "justify-end";
+      readonly 'space-between': "justify-between";
+      readonly 'space-around': "justify-around";
+      readonly 'space-evenly': "justify-evenly";
+    };
+  };
+  readonly flexBasis: "basis-[%v]";
+  readonly display: {
+    readonly t: "%v";
+    readonly e: {
+      readonly none: "hidden";
+    };
+  };
+  readonly overflow: "overflow-%v";
+  readonly overflowX: "overflow-x-%v";
+  readonly overflowY: "overflow-y-%v";
+  readonly position: "%v";
+  readonly contentFit: "object-%v";
+  readonly colorMode: "uds-color-mode-%v";
+  readonly scaleMode: "uds-scale-mode-%v";
+  readonly width: "w-%v";
+  readonly height: "h-%v";
+  readonly dropShadow: "uds-drop-shadow-%v";
+  readonly insetShadow: "uds-inset-shadow-%v";
+  readonly nestedBorderRadiusSize: "uds-nested-border-radius-size-%v";
+  readonly nestedBorderRadiusWidth: "uds-nested-border-radius-width-%v";
+  readonly nestedBorderRadiusSpacing: "uds-nested-border-radius-spacing-%v";
+  readonly nestedBorderRadius: {
+    readonly t: "uds-nested-border-radius-%v";
+    readonly e: {
+      readonly true: "uds-nested-border-radius";
+    };
+  };
+};
+//#endregion
+export { type VariantTemplate, styleVariantTemplates };

package/dist/styles/styleVariantTemplates.js

@@ -0,0 +1,145 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+//#region src/styles/styleVariantTemplates.ts
+/**
+* Compact class-name templates for the hand-written style props in
+* `./variants.ts`. The enumerated `variants` map stays the build-time source
+* of truth (CSS generation, purging, public `tokens` export); the runtime
+* styler derives class names from these templates instead so the ~50 kB
+* enumeration never enters the client bundle.
+*
+* `variantClass.test.ts` exhaustively asserts template-derived classes equal
+* the `variants` map, so any drift fails CI.
+*/
+const styleVariantTemplates = {
+	color: "text-%v",
+	placeholderColor: "placeholder:text-%v",
+	fontFamily: "uds-font-family-%v",
+	fontSize: "uds-font-size-%v",
+	fontWeight: "uds-font-weight-%v",
+	lineHeight: "uds-line-height-%v",
+	letterSpacing: "uds-letter-spacing-%v",
+	textAlign: "text-%v",
+	textTransform: {
+		t: "uds-text-transform-%v",
+		e: {
+			none: "normal-case",
+			uppercase: "uppercase",
+			lowercase: "lowercase",
+			capitalize: "capitalize"
+		}
+	},
+	spacing: "p-%v",
+	spacingHorizontal: "px-%v",
+	spacingVertical: "py-%v",
+	spacingBottom: "pb-%v",
+	spacingEnd: "pe-%v",
+	spacingStart: "ps-%v",
+	spacingTop: "pt-%v",
+	offset: "-m-%v",
+	offsetVertical: "-my-%v",
+	offsetHorizontal: "-mx-%v",
+	offsetBottom: "-mb-%v",
+	offsetEnd: "-me-%v",
+	offsetStart: "-ms-%v",
+	offsetTop: "-mt-%v",
+	columnGap: "gap-x-%v",
+	rowGap: "gap-y-%v",
+	backgroundColor: "bg-%v",
+	borderColor: "border-%v",
+	borderStartColor: "border-s-%v",
+	borderEndColor: "border-e-%v",
+	borderBottomColor: "border-b-%v",
+	borderTopColor: "border-t-%v",
+	borderRadius: "uds-border-radius-%v",
+	borderTopStartRadius: "uds-border-top-start-radius-%v",
+	borderTopEndRadius: "uds-border-top-end-radius-%v",
+	borderBottomStartRadius: "uds-border-bottom-start-radius-%v",
+	borderBottomEndRadius: "uds-border-bottom-end-radius-%v",
+	borderWidth: "uds-border-width-%v",
+	borderVerticalWidth: "uds-border-width-y-%v",
+	borderHorizontalWidth: "uds-border-width-x-%v",
+	borderStartWidth: "uds-border-width-start-%v",
+	borderEndWidth: "uds-border-width-end-%v",
+	borderTopWidth: "uds-border-width-top-%v",
+	borderBottomWidth: "uds-border-width-bottom-%v",
+	avatarSize: "avatarSize-%v",
+	iconSize: "iconSize-%v leading-none",
+	alignContent: {
+		t: "content-%v",
+		e: {
+			"flex-start": "content-start",
+			"flex-end": "content-end",
+			"space-between": "content-between",
+			"space-around": "content-around"
+		}
+	},
+	alignItems: {
+		t: "items-%v",
+		e: {
+			"flex-start": "items-start",
+			"flex-end": "items-end"
+		}
+	},
+	alignSelf: {
+		t: "self-%v",
+		e: {
+			"flex-start": "self-start",
+			"flex-end": "self-end"
+		}
+	},
+	flex: "flex-%v",
+	flexDirection: {
+		t: "flex-%v",
+		e: {
+			column: "flex-col",
+			"column-reverse": "flex-col-reverse"
+		}
+	},
+	flexGrow: {
+		t: "grow-[%v]",
+		e: {
+			"0": "grow-0",
+			"1": "grow"
+		}
+	},
+	flexShrink: {
+		t: "shrink-%v",
+		e: { "1": "shrink" }
+	},
+	flexWrap: "flex-%v",
+	justifyContent: {
+		t: "justify-%v",
+		e: {
+			"flex-start": "justify-start",
+			"flex-end": "justify-end",
+			"space-between": "justify-between",
+			"space-around": "justify-around",
+			"space-evenly": "justify-evenly"
+		}
+	},
+	flexBasis: "basis-[%v]",
+	display: {
+		t: "%v",
+		e: { none: "hidden" }
+	},
+	overflow: "overflow-%v",
+	overflowX: "overflow-x-%v",
+	overflowY: "overflow-y-%v",
+	position: "%v",
+	contentFit: "object-%v",
+	colorMode: "uds-color-mode-%v",
+	scaleMode: "uds-scale-mode-%v",
+	width: "w-%v",
+	height: "h-%v",
+	dropShadow: "uds-drop-shadow-%v",
+	insetShadow: "uds-inset-shadow-%v",
+	nestedBorderRadiusSize: "uds-nested-border-radius-size-%v",
+	nestedBorderRadiusWidth: "uds-nested-border-radius-width-%v",
+	nestedBorderRadiusSpacing: "uds-nested-border-radius-spacing-%v",
+	nestedBorderRadius: {
+		t: "uds-nested-border-radius-%v",
+		e: { true: "uds-nested-border-radius" }
+	}
+};
+//#endregion
+export { styleVariantTemplates };

package/dist/styles/styler.cjs

@@ -3,10 +3,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("../_virtual/_rolldown/runtime.cjs");
 const require_flags = require("../flags.cjs");
 const require_utils_falsyToString = require("../utils/falsyToString.cjs");
-const require_styles_variants = require("./variants.cjs");
-let _yahoo_uds_fixtures = require("@yahoo/uds/fixtures");
+const require_styles_udsTailwindMerge = require("./udsTailwindMerge.cjs");
+const require_styles_variantClass = require("./variantClass.cjs");
 let clsx = require("clsx");
-let tailwind_merge = require("tailwind-merge");
 //#region src/styles/styler.ts
 const createObjectWithoutPrototype = () => Object.create(null);
 const { useGetStylesCache, skipTailwindMerge } = require_flags.getFeatureFlags();
@@ -24,32 +23,16 @@ function normalizeObject(props) {
 	return sorted;
 }
 /**
-* !WARNING: The `@__PURE__` annotation below is load-bearing for tree-shaking — do not remove it.
-*
-* Without it, bundlers must assume this module-level call has side effects and keep it (plus
-* `tailwind-merge` and the fixtures color lists it references) in any bundle that imports
-* anything from this module. Do not rename/wrap the call without re-checking bundle output
-* (e.g. `esbuild --bundle --minify` an entry that imports a single lightweight export).
+* !WARNING: The `@__PURE__` annotation on the `createTailwindMerge(...)` call
+* inside `./udsTailwindMerge.ts` is load-bearing for tree-shaking — without
+* it, bundlers must assume the module-level call has side effects and keep
+* the merge engine in any bundle that imports anything from this module. Do
+* not remove it without re-checking bundle output (e.g. `esbuild --bundle
+* --minify` an entry that imports a single lightweight export).
 */
-const twMerge = /* @__PURE__ */ (0, tailwind_merge.extendTailwindMerge)({
-	extend: { theme: {
-		borderColor: _yahoo_uds_fixtures.lineColors,
-		borderWidth: _yahoo_uds_fixtures.borderWidthsWithElevation,
-		borderRadius: _yahoo_uds_fixtures.borderRadii
-	} },
-	override: {
-		classGroups: {
-			"text-color": [{ text: [..._yahoo_uds_fixtures.foregroundColors, ..._yahoo_uds_fixtures.spectrumColors] }],
-			"bg-color": [{ bg: _yahoo_uds_fixtures.backgroundColors }],
-			"font-family": [{ font: ["icons", ..._yahoo_uds_fixtures.textVariants] }],
-			leading: [{ leading: _yahoo_uds_fixtures.textVariants }]
-		},
-		conflictingClassGroups: {}
-	}
-});
 const cx = (...inputs) => {
 	const finalClassName = (0, clsx.clsx)(inputs);
-	return skipTailwindMerge ? finalClassName : twMerge(finalClassName);
+	return skipTailwindMerge ? finalClassName : require_styles_udsTailwindMerge.udsTwMerge(finalClassName);
 };
 const cva = (config) => {
 	const { base, variants, defaultVariants, compoundVariants } = config;
@@ -94,14 +77,26 @@ const cva = (config) => {
 	};
 };
 /**
-* !WARNING: The `@__PURE__` annotation below is load-bearing for tree-shaking — do not remove it.
+* Resolves style/variant props to class names via template substitution
+* (`./variantClass.ts`) instead of a `cva({ variants })` lookup, so neither
+* the hand-written `variants` map nor the auto-generated `autoVariants` map
+* (~70 kB minified combined) ships in the client bundle. Output is identical:
+* the templates are exhaustively verified against the maps in
+* `variantClass.test.ts`.
 *
-* Without it, importing anything from this module (e.g. just `cx`) drags the full `variants`
-* map and the auto-generated `autoVariants` (~70 kB minified) into the bundle, because bundlers
-* must assume the module-level `cva(...)` call has side effects. With it, `getStylesInternal`
-* and its `variants` import are dropped when `getStyles` is unused.
+* !WARNING: This mirrors the `cva()` hot path — same iteration order, same
+* `cx` merge — and is equally performance-sensitive. Benchmark before changing.
 */
-const getStylesInternal = /* @__PURE__ */ cva({ variants: require_styles_variants.variants });
+const getStylesInternal = (maybeProps) => {
+	if (!maybeProps) return cx();
+	const { className, ...props } = maybeProps;
+	const variantClassNames = [];
+	for (const prop in props) {
+		const propValue = props[prop];
+		variantClassNames.push(require_styles_variantClass.resolveVariantClass(prop, require_utils_falsyToString.falsyToString(propValue)));
+	}
+	return cx(variantClassNames, className);
+};
 const styleCache = /* @__PURE__ */ new Map();
 const getStylesCacheKeySymbol = Symbol("getStylesCacheKey");
 const generateCacheKey = (props) => {