@yahoo/uds 3.96.0-beta.3 → 3.97.0-beta.1

package/dist/automated-config/dist/utils/getConfigVariantProperties.d.cts

@@ -11,8 +11,8 @@ import { SelectedConfigurableProperty } from "../properties.cjs";
  * @returns A Record of layer names to their properties, or null if no properties are found
  */
 declare function getConfigVariantProperties(variant?: VariantConfig): {
-  [x: string]: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "backgroundColor" | "borderWidth" | "borderRadius" | "borderColor" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "color" | "opacity" | "iconSize" | "spacing" | "iconVariant" | "spacingHorizontal" | "spacingVertical" | "textVariant" | "textDecorationLine" | "shadow" | "insetShadow" | "height" | "width" | "scaleEffect", string, ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | ("elevationAliases" | "borderWidths" | "spacingAliases")[] | "borderRadii"[] | ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | "buttonSizes"[] | "buttonVariantsFlat"[] | "textVariants"[] | "spacingAliases"[] | ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | "opacitySteps"[] | "iconSizes"[] | "iconVariants"[] | "textDecorationLines"[] | ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | "scaleEffects"[], readonly (readonly unknown[])[]>>>;
-  root: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "backgroundColor" | "borderWidth" | "borderRadius" | "borderColor" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "color" | "opacity" | "iconSize" | "spacing" | "iconVariant" | "spacingHorizontal" | "spacingVertical" | "textVariant" | "textDecorationLine" | "shadow" | "insetShadow" | "height" | "width" | "scaleEffect", string, ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | ("elevationAliases" | "borderWidths" | "spacingAliases")[] | "borderRadii"[] | ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | "buttonSizes"[] | "buttonVariantsFlat"[] | "textVariants"[] | "spacingAliases"[] | ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | "opacitySteps"[] | "iconSizes"[] | "iconVariants"[] | "textDecorationLines"[] | ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | "scaleEffects"[], readonly (readonly unknown[])[]>>>;
+  [x: string]: Readonly<Record<string, SelectedConfigurableProperty<"backgroundColor" | "borderWidth" | "borderRadius" | "borderColor" | "buttonSize" | "buttonVariant" | "fontFamily" | "fontSize" | "fontVariationSettings" | "lineHeight" | "textTransform" | "letterSpacing" | "gap" | "color" | "opacity" | "fontWeight" | "iconSize" | "spacing" | "iconVariant" | "spacingHorizontal" | "spacingVertical" | "textVariant" | "textDecorationLine" | "shadow" | "insetShadow" | "height" | "width" | "scaleEffect", string, ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | ("elevationAliases" | "borderWidths" | "spacingAliases")[] | "borderRadii"[] | ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | "buttonSizes"[] | "buttonVariantsFlat"[] | "textVariants"[] | "spacingAliases"[] | ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | "opacitySteps"[] | "iconSizes"[] | "iconVariants"[] | "textDecorationLines"[] | ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | "scaleEffects"[], readonly (readonly unknown[])[]>>>;
+  root: Readonly<Record<string, SelectedConfigurableProperty<"backgroundColor" | "borderWidth" | "borderRadius" | "borderColor" | "buttonSize" | "buttonVariant" | "fontFamily" | "fontSize" | "fontVariationSettings" | "lineHeight" | "textTransform" | "letterSpacing" | "gap" | "color" | "opacity" | "fontWeight" | "iconSize" | "spacing" | "iconVariant" | "spacingHorizontal" | "spacingVertical" | "textVariant" | "textDecorationLine" | "shadow" | "insetShadow" | "height" | "width" | "scaleEffect", string, ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | ("elevationAliases" | "borderWidths" | "spacingAliases")[] | "borderRadii"[] | ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | "buttonSizes"[] | "buttonVariantsFlat"[] | "textVariants"[] | "spacingAliases"[] | ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | "opacitySteps"[] | "iconSizes"[] | "iconVariants"[] | "textDecorationLines"[] | ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | "scaleEffects"[], readonly (readonly unknown[])[]>>>;
 } | null; //#endregion
 //#endregion
 export { getConfigVariantProperties };

package/dist/automated-config/dist/utils/getConfigVariantProperties.d.ts

@@ -11,8 +11,8 @@ import { SelectedConfigurableProperty } from "../properties.js";
  * @returns A Record of layer names to their properties, or null if no properties are found
  */
 declare function getConfigVariantProperties(variant?: VariantConfig): {
-  [x: string]: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "backgroundColor" | "borderWidth" | "borderRadius" | "borderColor" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "color" | "opacity" | "iconSize" | "spacing" | "iconVariant" | "spacingHorizontal" | "spacingVertical" | "textVariant" | "textDecorationLine" | "shadow" | "insetShadow" | "height" | "width" | "scaleEffect", string, ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | ("elevationAliases" | "borderWidths" | "spacingAliases")[] | "borderRadii"[] | ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | "buttonSizes"[] | "buttonVariantsFlat"[] | "textVariants"[] | "spacingAliases"[] | ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | "opacitySteps"[] | "iconSizes"[] | "iconVariants"[] | "textDecorationLines"[] | ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | "scaleEffects"[], readonly (readonly unknown[])[]>>>;
-  root: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "backgroundColor" | "borderWidth" | "borderRadius" | "borderColor" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "color" | "opacity" | "iconSize" | "spacing" | "iconVariant" | "spacingHorizontal" | "spacingVertical" | "textVariant" | "textDecorationLine" | "shadow" | "insetShadow" | "height" | "width" | "scaleEffect", string, ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | ("elevationAliases" | "borderWidths" | "spacingAliases")[] | "borderRadii"[] | ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | "buttonSizes"[] | "buttonVariantsFlat"[] | "textVariants"[] | "spacingAliases"[] | ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | "opacitySteps"[] | "iconSizes"[] | "iconVariants"[] | "textDecorationLines"[] | ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | "scaleEffects"[], readonly (readonly unknown[])[]>>>;
+  [x: string]: Readonly<Record<string, SelectedConfigurableProperty<"backgroundColor" | "borderWidth" | "borderRadius" | "borderColor" | "buttonSize" | "buttonVariant" | "fontFamily" | "fontSize" | "fontVariationSettings" | "lineHeight" | "textTransform" | "letterSpacing" | "gap" | "color" | "opacity" | "fontWeight" | "iconSize" | "spacing" | "iconVariant" | "spacingHorizontal" | "spacingVertical" | "textVariant" | "textDecorationLine" | "shadow" | "insetShadow" | "height" | "width" | "scaleEffect", string, ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | ("elevationAliases" | "borderWidths" | "spacingAliases")[] | "borderRadii"[] | ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | "buttonSizes"[] | "buttonVariantsFlat"[] | "textVariants"[] | "spacingAliases"[] | ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | "opacitySteps"[] | "iconSizes"[] | "iconVariants"[] | "textDecorationLines"[] | ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | "scaleEffects"[], readonly (readonly unknown[])[]>>>;
+  root: Readonly<Record<string, SelectedConfigurableProperty<"backgroundColor" | "borderWidth" | "borderRadius" | "borderColor" | "buttonSize" | "buttonVariant" | "fontFamily" | "fontSize" | "fontVariationSettings" | "lineHeight" | "textTransform" | "letterSpacing" | "gap" | "color" | "opacity" | "fontWeight" | "iconSize" | "spacing" | "iconVariant" | "spacingHorizontal" | "spacingVertical" | "textVariant" | "textDecorationLine" | "shadow" | "insetShadow" | "height" | "width" | "scaleEffect", string, ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | ("elevationAliases" | "borderWidths" | "spacingAliases")[] | "borderRadii"[] | ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | "buttonSizes"[] | "buttonVariantsFlat"[] | "textVariants"[] | "spacingAliases"[] | ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | "opacitySteps"[] | "iconSizes"[] | "iconVariants"[] | "textDecorationLines"[] | ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | "scaleEffects"[], readonly (readonly unknown[])[]>>>;
 } | null; //#endregion
 //#endregion
 export { getConfigVariantProperties };

package/dist/cli/commands/purge.cjs

@@ -0,0 +1,26 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_analytics = require('../dist/utils/analytics.cjs');
+const require_spinner = require('../dist/lib/spinner.cjs');
+const require_cli_commands_utils_purgeCSS = require('./utils/purgeCSS.cjs');
+
+//#region src/cli/commands/purge.ts
+const purgeCommand = {
+	name: "purge",
+	description: `Purge unused CSS`,
+	run: async (props) => {
+		require_spinner.spinStart("Purging css started...");
+		try {
+			await require_cli_commands_utils_purgeCSS.purge(props.options);
+			require_spinner.spinStop("✅", "Purging css done!");
+			return await require_analytics.trackEvent("purge");
+		} catch (error) {
+			if (error instanceof Error) require_spinner.spinStop("❌", error.message);
+			else require_spinner.spinStop("❌", "Purging css failed! Please reach out to #uds-ask channel for support.");
+			process.exitCode = 1;
+		}
+	}
+};
+
+//#endregion
+exports.purgeCommand = purgeCommand;

package/dist/cli/commands/purge.d.cts

@@ -0,0 +1,15 @@
+
+import { PurgeOptions } from "./utils/purgeCSS.cjs";
+import { Props } from "@yahoo/uds-cli";
+
+//#region src/cli/commands/purge.d.ts
+interface PurgeProps extends Props {
+  options: PurgeOptions;
+}
+declare const purgeCommand: {
+  name: string;
+  description: string;
+  run: (props: PurgeProps) => Promise<void>;
+};
+//#endregion
+export { purgeCommand };

package/dist/cli/commands/purge.d.ts

@@ -0,0 +1,15 @@
+
+import { PurgeOptions } from "./utils/purgeCSS.js";
+import { Props } from "@yahoo/uds-cli";
+
+//#region src/cli/commands/purge.d.ts
+interface PurgeProps extends Props {
+  options: PurgeOptions;
+}
+declare const purgeCommand: {
+  name: string;
+  description: string;
+  run: (props: PurgeProps) => Promise<void>;
+};
+//#endregion
+export { purgeCommand };

package/dist/cli/commands/purge.js

@@ -0,0 +1,25 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { trackEvent } from "../dist/utils/analytics.js";
+import { spinStart, spinStop } from "../dist/lib/spinner.js";
+import { purge } from "./utils/purgeCSS.js";
+
+//#region src/cli/commands/purge.ts
+const purgeCommand = {
+	name: "purge",
+	description: `Purge unused CSS`,
+	run: async (props) => {
+		spinStart("Purging css started...");
+		try {
+			await purge(props.options);
+			spinStop("✅", "Purging css done!");
+			return await trackEvent("purge");
+		} catch (error) {
+			if (error instanceof Error) spinStop("❌", error.message);
+			else spinStop("❌", "Purging css failed! Please reach out to #uds-ask channel for support.");
+			process.exitCode = 1;
+		}
+	}
+};
+
+//#endregion
+export { purgeCommand };

package/dist/cli/commands/sync.cjs

@@ -0,0 +1,96 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+const require_defaultTokensConfig = require('../../defaultTokensConfig.cjs');
+const require_runtime_breakpointsConfig = require('../../runtime/breakpointsConfig.cjs');
+const require_runtime_toastConfig = require('../../runtime/toastConfig.cjs');
+const require_analytics = require('../dist/utils/analytics.cjs');
+const require_colors = require('../dist/lib/colors.cjs');
+const require_print = require('../dist/lib/print.cjs');
+const require_cli_commands_utils_sortKeys = require('./utils/sortKeys.cjs');
+let node_fs = require("node:fs");
+let node_path = require("node:path");
+node_path = require_runtime.__toESM(node_path);
+
+//#region src/cli/commands/sync.ts
+const PRODUCTION_ENDPOINT = "https://config.uds.build/api/config";
+const STAGING_ENDPOINT = "https://staging.config.uds.build/api/config";
+function getConfigEndpoint() {
+	if (process.env.DATABASE === "staging") return STAGING_ENDPOINT;
+	if (process.env.DATABASE === "local") return `http://localhost:${process.env.PORT || 4001}/api/config`;
+	return PRODUCTION_ENDPOINT;
+}
+const syncCommand = {
+	name: "sync",
+	description: "🔄 Update to latest design config 🎨",
+	aliases: ["update"],
+	run: async ({ name, commandPath, options }) => {
+		const id = options.id || process.env.UDS_ID;
+		const outFile = options.outFile || process.env.UDS_OUT_FILE;
+		if (!id || typeof id === "boolean") {
+			console.error("\nMissing config ID. Please pass an --id flag or set the UDS_ID env variable.\n");
+			require_print.print(`${require_colors.magenta("Usage:")} ${name} ${commandPath} --id <config-id>\n`);
+			return;
+		}
+		const outputPath = outFile ?? "./uds.config.ts";
+		const outFileExtension = outputPath.split(".").pop()?.toLowerCase();
+		if (outFileExtension !== "ts" && outFileExtension !== "js") {
+			require_print.print(require_colors.red("❌ Output file must be a TypeScript or JavaScript file."));
+			process.exitCode = 1;
+			return;
+		}
+		try {
+			const fetchUrl = `${getConfigEndpoint()}?id=${id}`;
+			const fullPath = node_path.default.resolve(process.cwd(), outputPath);
+			require_print.print(require_colors.yellow("Fetching from configurator..."));
+			let config;
+			if (process.env.DATABASE === "test") config = require_defaultTokensConfig.defaultTokensConfig;
+			else {
+				const resp = await fetch(fetchUrl);
+				if (!resp.ok) {
+					if (resp.status === 401) throw new Error(`${resp.status} error: ${resp.statusText}\nYou're not authorized to fetch from ${fetchUrl}\nMake sure you have a valid VERCEL_PROTECTION_BYPASS token in your root .env.local`);
+					throw new Error(`Error fetching config id '${id}'. Does it exist in the Configurator?`);
+				}
+				config = (await resp.json()).config;
+			}
+			if (!config) throw new Error("Config JSON could not be parsed.");
+			const sortedConfig = require_cli_commands_utils_sortKeys.sortKeys(config);
+			const importsTS = [`import type { UniversalTokensConfig } from '@yahoo/uds';`];
+			const exportsTS = [`export const config: UniversalTokensConfig = ${JSON.stringify(sortedConfig, null, 2)};`];
+			const exportsJS = [`export const config = ${JSON.stringify(sortedConfig, null, 2)};`];
+			const runtimeConfigs = {
+				breakpoints: [require_runtime_breakpointsConfig.configToBreakpointsConfigContext(sortedConfig), "UDSBreakpointsConfigContextType"],
+				toast: [require_runtime_toastConfig.configToToastConfigContext(sortedConfig), "UDSToastConfigContextType"]
+			};
+			const runtimeTypeImports = [];
+			for (const [name, [json, type]] of Object.entries(runtimeConfigs)) {
+				const content = require_cli_commands_utils_sortKeys.sortKeys(json);
+				runtimeTypeImports.push(type);
+				exportsTS.push(`export const ${name}RuntimeConfig: ${type} = ${JSON.stringify(content, null, 2)};`);
+				exportsJS.push(`export const ${name}RuntimeConfig = ${JSON.stringify(content, null, 2)};`);
+			}
+			runtimeTypeImports.push("UDSConfigContextType");
+			importsTS.push(`import type { ${runtimeTypeImports.sort().join(", ")} } from '@yahoo/uds/runtime';`);
+			exportsTS.push(`export const runtimeConfig: UDSConfigContextType = {
+  breakpoints: breakpointsRuntimeConfig,
+  toast: toastRuntimeConfig,
+};`);
+			exportsJS.push(`export const runtimeConfig = {
+  breakpoints: breakpointsRuntimeConfig,
+  toast: toastRuntimeConfig,
+};`);
+			const configContentTs = `${importsTS.join("\n")}\n\n${exportsTS.join("\n\n")}\n`;
+			const configContentJs = `${exportsJS.join("\n\n")}\n`;
+			(0, node_fs.writeFileSync)(fullPath, outFileExtension === "js" ? configContentJs : configContentTs);
+			require_print.print(require_colors.green(`✅ Synced UDS config ${id} to ${fullPath}`));
+			await require_analytics.trackEvent("sync", { id });
+		} catch (error) {
+			require_print.print(require_colors.red(`❌ ${error.message}`));
+			require_print.print(require_colors.yellow("Please reach out to #uds-ask channel for support."));
+			process.exitCode = 1;
+		}
+	}
+};
+
+//#endregion
+exports.syncCommand = syncCommand;

package/dist/cli/commands/sync.d.cts

@@ -0,0 +1,16 @@
+
+import { Props } from "@yahoo/uds-cli";
+
+//#region src/cli/commands/sync.d.ts
+declare const syncCommand: {
+  name: string;
+  description: string;
+  aliases: string[];
+  run: ({
+    name,
+    commandPath,
+    options
+  }: Props) => Promise<void>;
+};
+//#endregion
+export { syncCommand };

package/dist/cli/commands/sync.d.ts

@@ -0,0 +1,16 @@
+
+import { Props } from "@yahoo/uds-cli";
+
+//#region src/cli/commands/sync.d.ts
+declare const syncCommand: {
+  name: string;
+  description: string;
+  aliases: string[];
+  run: ({
+    name,
+    commandPath,
+    options
+  }: Props) => Promise<void>;
+};
+//#endregion
+export { syncCommand };

package/dist/cli/commands/sync.js

@@ -0,0 +1,93 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { defaultTokensConfig } from "../../defaultTokensConfig.js";
+import { configToBreakpointsConfigContext } from "../../runtime/breakpointsConfig.js";
+import { configToToastConfigContext } from "../../runtime/toastConfig.js";
+import { trackEvent } from "../dist/utils/analytics.js";
+import { green, magenta, red, yellow } from "../dist/lib/colors.js";
+import { print } from "../dist/lib/print.js";
+import { sortKeys } from "./utils/sortKeys.js";
+import { writeFileSync } from "node:fs";
+import path from "node:path";
+
+//#region src/cli/commands/sync.ts
+const PRODUCTION_ENDPOINT = "https://config.uds.build/api/config";
+const STAGING_ENDPOINT = "https://staging.config.uds.build/api/config";
+function getConfigEndpoint() {
+	if (process.env.DATABASE === "staging") return STAGING_ENDPOINT;
+	if (process.env.DATABASE === "local") return `http://localhost:${process.env.PORT || 4001}/api/config`;
+	return PRODUCTION_ENDPOINT;
+}
+const syncCommand = {
+	name: "sync",
+	description: "🔄 Update to latest design config 🎨",
+	aliases: ["update"],
+	run: async ({ name, commandPath, options }) => {
+		const id = options.id || process.env.UDS_ID;
+		const outFile = options.outFile || process.env.UDS_OUT_FILE;
+		if (!id || typeof id === "boolean") {
+			console.error("\nMissing config ID. Please pass an --id flag or set the UDS_ID env variable.\n");
+			print(`${magenta("Usage:")} ${name} ${commandPath} --id <config-id>\n`);
+			return;
+		}
+		const outputPath = outFile ?? "./uds.config.ts";
+		const outFileExtension = outputPath.split(".").pop()?.toLowerCase();
+		if (outFileExtension !== "ts" && outFileExtension !== "js") {
+			print(red("❌ Output file must be a TypeScript or JavaScript file."));
+			process.exitCode = 1;
+			return;
+		}
+		try {
+			const fetchUrl = `${getConfigEndpoint()}?id=${id}`;
+			const fullPath = path.resolve(process.cwd(), outputPath);
+			print(yellow("Fetching from configurator..."));
+			let config;
+			if (process.env.DATABASE === "test") config = defaultTokensConfig;
+			else {
+				const resp = await fetch(fetchUrl);
+				if (!resp.ok) {
+					if (resp.status === 401) throw new Error(`${resp.status} error: ${resp.statusText}\nYou're not authorized to fetch from ${fetchUrl}\nMake sure you have a valid VERCEL_PROTECTION_BYPASS token in your root .env.local`);
+					throw new Error(`Error fetching config id '${id}'. Does it exist in the Configurator?`);
+				}
+				config = (await resp.json()).config;
+			}
+			if (!config) throw new Error("Config JSON could not be parsed.");
+			const sortedConfig = sortKeys(config);
+			const importsTS = [`import type { UniversalTokensConfig } from '@yahoo/uds';`];
+			const exportsTS = [`export const config: UniversalTokensConfig = ${JSON.stringify(sortedConfig, null, 2)};`];
+			const exportsJS = [`export const config = ${JSON.stringify(sortedConfig, null, 2)};`];
+			const runtimeConfigs = {
+				breakpoints: [configToBreakpointsConfigContext(sortedConfig), "UDSBreakpointsConfigContextType"],
+				toast: [configToToastConfigContext(sortedConfig), "UDSToastConfigContextType"]
+			};
+			const runtimeTypeImports = [];
+			for (const [name, [json, type]] of Object.entries(runtimeConfigs)) {
+				const content = sortKeys(json);
+				runtimeTypeImports.push(type);
+				exportsTS.push(`export const ${name}RuntimeConfig: ${type} = ${JSON.stringify(content, null, 2)};`);
+				exportsJS.push(`export const ${name}RuntimeConfig = ${JSON.stringify(content, null, 2)};`);
+			}
+			runtimeTypeImports.push("UDSConfigContextType");
+			importsTS.push(`import type { ${runtimeTypeImports.sort().join(", ")} } from '@yahoo/uds/runtime';`);
+			exportsTS.push(`export const runtimeConfig: UDSConfigContextType = {
+  breakpoints: breakpointsRuntimeConfig,
+  toast: toastRuntimeConfig,
+};`);
+			exportsJS.push(`export const runtimeConfig = {
+  breakpoints: breakpointsRuntimeConfig,
+  toast: toastRuntimeConfig,
+};`);
+			const configContentTs = `${importsTS.join("\n")}\n\n${exportsTS.join("\n\n")}\n`;
+			const configContentJs = `${exportsJS.join("\n\n")}\n`;
+			writeFileSync(fullPath, outFileExtension === "js" ? configContentJs : configContentTs);
+			print(green(`✅ Synced UDS config ${id} to ${fullPath}`));
+			await trackEvent("sync", { id });
+		} catch (error) {
+			print(red(`❌ ${error.message}`));
+			print(yellow("Please reach out to #uds-ask channel for support."));
+			process.exitCode = 1;
+		}
+	}
+};
+
+//#endregion
+export { syncCommand };

package/dist/cli/commands/utils/purgeCSS.cjs

@@ -0,0 +1,258 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+const require_index = require('../../../css-tokens/dist/index.cjs');
+const require_styles_variants = require('../../../styles/variants.cjs');
+const require_print = require('../../dist/lib/print.cjs');
+const require_spinner = require('../../dist/lib/spinner.cjs');
+const require_tailwindPurge = require('../../../uds/generated/tailwindPurge.cjs');
+const require_tsMorph = require('../../../uds/scripts/utils/tsMorph.cjs');
+let node_fs = require("node:fs");
+let node_path = require("node:path");
+node_path = require_runtime.__toESM(node_path);
+let _yahoo_uds_package_json = require("@yahoo/uds/package.json");
+_yahoo_uds_package_json = require_runtime.__toESM(_yahoo_uds_package_json);
+let fast_glob = require("fast-glob");
+fast_glob = require_runtime.__toESM(fast_glob);
+let ts_morph = require("ts-morph");
+
+//#region src/cli/commands/utils/purgeCSS.ts
+const scaleModeToClass = {
+	large: require_index.LARGE_SCALE_MODE_CLASSNAME,
+	medium: require_index.MEDIUM_SCALE_MODE_CLASSNAME,
+	small: require_index.SMALL_SCALE_MODE_CLASSNAME,
+	xLarge: require_index.XLARGE_SCALE_MODE_CLASSNAME,
+	xSmall: require_index.XSMALL_SCALE_MODE_CLASSNAME,
+	xxLarge: require_index.XXLARGE_SCALE_MODE_CLASSNAME,
+	xxxLarge: require_index.XXXLARGE_SCALE_MODE_CLASSNAME
+};
+const colorModeToClass = {
+	dark: require_index.DARK_COLOR_MODE_CLASSNAME,
+	light: require_index.LIGHT_COLOR_MODE_CLASSNAME
+};
+const getFiles = async (entry) => {
+	try {
+		const workspaceDir = process.env.PWD || process.cwd();
+		if (!workspaceDir) throw new Error("Workspace directory not found.");
+		return await (0, fast_glob.default)(["**/*.jsx", "**/*.tsx"], {
+			cwd: node_path.default.join(workspaceDir, entry),
+			absolute: true
+		});
+	} catch {
+		throw new Error(`Couldn't find the entry directory: ${entry}. Please make sure it exists.`);
+	}
+};
+/**
+* Find all JSX references for a named import.
+*
+* @example
+* const references = findNamedImportReferences(project, '@yahoo/uds', 'HStack')
+*/
+function findNamedImportReferences(project, moduleSpecifierValue, namedImportName) {
+	const references = [];
+	for (const sourceFile of project.getSourceFiles()) for (const importDeclaration of sourceFile.getImportDeclarations()) if (importDeclaration.getModuleSpecifierValue() === moduleSpecifierValue) {
+		for (const namedImport of importDeclaration.getNamedImports()) if (namedImport.getName() === namedImportName) {
+			const identifier = namedImport.getFirstDescendantByKindOrThrow(ts_morph.ts.SyntaxKind.Identifier);
+			references.push(...require_tsMorph.findReferencesAsJsxElements(identifier));
+		}
+	}
+	return references;
+}
+/**
+* Given a file it returns the list of imports from @yahoo/uds
+*/
+const parseFiles = (project, files) => {
+	const importsSet = /* @__PURE__ */ new Set();
+	files.map((file) => {
+		return project.getSourceFile(file)?.getImportDeclarations().filter((declaration) => {
+			return declaration.getModuleSpecifier().getText().includes("@yahoo/uds") || declaration.getModuleSpecifier().getText().includes("@yahoo/uds/experimental");
+		}).map((declaration) => {
+			return declaration.getNamedImports().map((namedImport) => namedImport.getName());
+		}).flat() ?? [];
+	}).flat().forEach((item) => {
+		if (!importsSet.has(item)) importsSet.add(item);
+	});
+	return Array.from(importsSet);
+};
+const getTailwindSafelist = (project, componentList) => {
+	const safeList = [];
+	const validVariants = new Set(require_tailwindPurge.variantsList);
+	const usedProps = /* @__PURE__ */ new Map();
+	componentList.forEach((component) => {
+		if (isUDSComponent(component)) {
+			require_tailwindPurge.componentToVariants[component].forEach(([propName, usedValues]) => {
+				if (validVariants.has(propName)) {
+					const options = usedProps.get(propName) ?? /* @__PURE__ */ new Set();
+					usedValues.forEach((val) => options.add(val));
+					usedProps.set(propName, options);
+				}
+			});
+			getUsedProps(project, component).forEach(([propName, usedValues]) => {
+				if (validVariants.has(propName)) {
+					if (usedValues.length === 0) usedValues = Object.keys(require_styles_variants.variants[propName]);
+					const options = usedProps.get(propName) ?? /* @__PURE__ */ new Set();
+					usedValues.forEach((val) => options.add(val));
+					usedProps.set(propName, options);
+				}
+			});
+			safeList.push(...require_tailwindPurge.componentToTwClasses[component].replaceAll("\\", "").split(" "));
+		}
+	});
+	for (const [propName, usedValues] of usedProps) {
+		const variantGroup = require_styles_variants.variants[propName];
+		if (variantGroup) usedValues.forEach((option) => {
+			const variantClass = variantGroup[option];
+			if (variantClass) safeList.push(variantClass.replaceAll("\\", ""));
+		});
+	}
+	for (const [variant, variantOptions] of scanGetStylesReferences(project)) {
+		const variantGroup = require_styles_variants.variants[variant];
+		if (variantGroup) variantOptions.forEach((option) => {
+			const variantClass = variantGroup[option];
+			if (variantClass) safeList.push(variantClass.replaceAll("\\", ""));
+		});
+	}
+	return Array.from(new Set(safeList)).filter(Boolean);
+};
+/**
+* Get the used props for a given component.
+*
+* @example
+* const usedProps = getUsedProps(project, 'HStack');
+*/
+const getUsedProps = (project, component) => {
+	const references = [];
+	references.push(...findNamedImportReferences(project, _yahoo_uds_package_json.default.name, component));
+	references.push(...findNamedImportReferences(project, `${_yahoo_uds_package_json.default.name}/experimental`, component));
+	return references.map((reference) => require_tsMorph.getUsedPropsInReference(reference)).flat();
+};
+const isUDSComponent = (component) => {
+	return !!require_tailwindPurge.componentToVariants[component];
+};
+const saveToFile = (safeList, outputPath) => {
+	const fileContent = `
+    //! This file is generated by purgeCSS.ts from @yahoo/uds
+    //! Do not edit directly
+    //! If there is issue with this file please report to #ask-uds
+    export const safelist = ${JSON.stringify(safeList)};
+    `;
+	(0, node_fs.mkdirSync)(node_path.default.dirname(outputPath), { recursive: true });
+	(0, node_fs.writeFileSync)(outputPath, fileContent);
+};
+const getComponentsToConvertToTW = (udsImport) => {
+	const components = udsImport.filter((importedItem) => !!require_tailwindPurge.componentToVariants[importedItem]);
+	const set = /* @__PURE__ */ new Set();
+	components.forEach((component) => {
+		if (!set.has(component)) set.add(component);
+		if (require_tailwindPurge.componentsDependencies[component]) require_tailwindPurge.componentsDependencies[component].forEach((dependent) => {
+			if (!set.has(dependent)) set.add(dependent);
+		});
+	});
+	return Array.from(set);
+};
+/**
+* Get the classes that corresponds to the used modes
+*/
+const getClassesForEnabledThemesAndScales = () => {
+	const classes = [];
+	if (process.env.ENABLED_SCALE_AND_COLOR_MODES) process.env.ENABLED_SCALE_AND_COLOR_MODES.split(",").map((mode) => {
+		mode = mode.trim();
+		if (colorModeToClass[mode]) classes.push(colorModeToClass[mode]);
+		else if (scaleModeToClass[mode]) classes.push(scaleModeToClass[mode]);
+	});
+	else {
+		classes.push(colorModeToClass.dark);
+		classes.push(colorModeToClass.light);
+		classes.push(scaleModeToClass.large);
+	}
+	return classes;
+};
+/**
+* Scan the source code for all `getStyles` references
+*
+* Note: This currently only works if we are passing a literal object to getStyles.
+*
+* Explanation: They we are able to enfer what css to include is by looking at the properties of the object passed.
+* If something other than an object is passed, we can fallback on the Type, but that would require handling
+* a lot of edge cases (function return type, spread operator, ternary, ...) and each one of these cases will
+* most likely have a sub case. Falling back to the Type will complicate the code a lot is error prone as there
+* is only so much info we can get out of the types as the Users are free to use `any` on their project which will
+* provide no value for us. Hence why having a literal object passed is the best and probably the only sane way
+* to go about this.
+*/
+const scanGetStylesReferences = (project) => {
+	const references = [];
+	for (const sourceFile of project.getSourceFiles()) for (const importDeclaration of sourceFile.getImportDeclarations()) if (importDeclaration.getModuleSpecifierValue() === _yahoo_uds_package_json.default.name) {
+		for (const namedImport of importDeclaration.getNamedImports()) if (namedImport.getName() === "getStyles") {
+			const identifier = namedImport.getFirstDescendantByKindOrThrow(ts_morph.ts.SyntaxKind.Identifier);
+			for (const reference of identifier.findReferencesAsNodes()) {
+				const node = reference.getFirstAncestor((node) => {
+					return ts_morph.Node.isCallExpression(node);
+				});
+				if (node) references.push(node);
+			}
+		}
+	}
+	const usedProps = /* @__PURE__ */ new Map();
+	for (const reference of references) {
+		const objectLiteralExpression = reference.getFirstChildByKindOrThrow(ts_morph.SyntaxKind.ObjectLiteralExpression);
+		const propertyAssignments = objectLiteralExpression.getDescendantsOfKind(ts_morph.SyntaxKind.PropertyAssignment);
+		const shorthandPropertyAssignments = objectLiteralExpression.getDescendantsOfKind(ts_morph.SyntaxKind.ShorthandPropertyAssignment);
+		propertyAssignments.forEach((propertyAssigment) => {
+			const identifier = propertyAssigment.getFirstChildByKind(ts_morph.SyntaxKind.Identifier)?.getText();
+			const stringLiteral = propertyAssigment.getFirstChildByKind(ts_morph.SyntaxKind.StringLiteral)?.getLiteralText();
+			if (identifier && !stringLiteral) {
+				const fallback = !!require_styles_variants.variants[identifier] ? Object.keys(require_styles_variants.variants[identifier]) : [];
+				usedProps.set(identifier, new Set(fallback));
+			}
+			if (identifier && stringLiteral) {
+				let options;
+				if (usedProps.has(identifier)) options = usedProps.get(identifier);
+				else options = /* @__PURE__ */ new Set();
+				options.add(stringLiteral);
+				usedProps.set(identifier, options);
+			}
+		});
+		shorthandPropertyAssignments.forEach((propertyAssigment) => {
+			const identifier = propertyAssigment.getFirstChildByKind(ts_morph.SyntaxKind.Identifier)?.getText();
+			if (identifier) usedProps.set(identifier, /* @__PURE__ */ new Set());
+		});
+	}
+	return usedProps;
+};
+async function purge({ config: configPath = process.env.UDS_OUT_FILE ?? "./uds.config.ts", output = "dist/safelist.ts", entry = "/src/" }) {
+	const workspaceDir = process.env.PWD || process.cwd();
+	if (!workspaceDir) throw new Error("Workspace directory not found.");
+	const project = new ts_morph.Project({ tsConfigFilePath: node_path.default.join(workspaceDir, "/tsconfig.json") });
+	const outputFilePath = node_path.default.join(workspaceDir, output);
+	const configAbsolutePath = node_path.default.join(workspaceDir, configPath);
+	try {
+		await import(configAbsolutePath);
+	} catch {
+		throw new Error("Couldn't load the UDS config. Make sure you have uds.config.ts in the root of your project.");
+	}
+	require_spinner.spinStart("Getting used UDS components...");
+	require_print.print("Loading the project...");
+	const files = await getFiles(entry);
+	require_print.print("Going through the imports...");
+	const udsImports = parseFiles(project, files);
+	require_print.print("Finding all the components imported from UDS...");
+	const udsComponents = getComponentsToConvertToTW(udsImports);
+	require_print.print("🧑‍🍳 Cooking...");
+	const safeList = getTailwindSafelist(project, udsComponents);
+	const themesAndScalesClasses = getClassesForEnabledThemesAndScales();
+	saveToFile(safeList.concat(themesAndScalesClasses), outputFilePath);
+	require_spinner.spinStop("Generated your safelist!");
+}
+
+//#endregion
+exports.findNamedImportReferences = findNamedImportReferences;
+exports.getClassesForEnabledThemesAndScales = getClassesForEnabledThemesAndScales;
+exports.getComponentsToConvertToTW = getComponentsToConvertToTW;
+exports.getFiles = getFiles;
+exports.getTailwindSafelist = getTailwindSafelist;
+exports.getUsedProps = getUsedProps;
+exports.isUDSComponent = isUDSComponent;
+exports.parseFiles = parseFiles;
+exports.purge = purge;
+exports.scanGetStylesReferences = scanGetStylesReferences;