@yahoo/uds 3.58.2-beta.1 → 3.59.0-beta.2

package/dist/tailwind/base/addScaleModeVars.js

@@ -0,0 +1,23 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { LARGE_SCALE_MODE_CLASSNAME, MEDIUM_SCALE_MODE_CLASSNAME, SMALL_SCALE_MODE_CLASSNAME, XLARGE_SCALE_MODE_CLASSNAME, XSMALL_SCALE_MODE_CLASSNAME, XXLARGE_SCALE_MODE_CLASSNAME, XXXLARGE_SCALE_MODE_CLASSNAME } from "../../tokens/consts/cssTokens.js";
+import { DEFAULT_SCALE_MODE } from "../../tokens/consts/defaultModes.js";
+import { getScaleModeStyles } from "../utils/getScaleModeStyles.js";
+
+//#region src/tailwind/base/addScaleModeVars.ts
+function addScaleModeVars(tokens, { addBase, addRootVariables }) {
+	const styles = getScaleModeStyles(tokens);
+	addRootVariables(styles[DEFAULT_SCALE_MODE]);
+	addBase({
+		[`.${XSMALL_SCALE_MODE_CLASSNAME}`]: styles.xSmall,
+		[`.${SMALL_SCALE_MODE_CLASSNAME}`]: styles.small,
+		[`.${MEDIUM_SCALE_MODE_CLASSNAME}`]: styles.medium,
+		[`.${LARGE_SCALE_MODE_CLASSNAME}`]: styles.large,
+		[`.${XLARGE_SCALE_MODE_CLASSNAME}`]: styles.xLarge,
+		[`.${XXLARGE_SCALE_MODE_CLASSNAME}`]: styles.xxLarge,
+		[`.${XXXLARGE_SCALE_MODE_CLASSNAME}`]: styles.xxxLarge
+	});
+}
+
+//#endregion
+export { addScaleModeVars };
+//# sourceMappingURL=addScaleModeVars.js.map

package/dist/tailwind/base/addScaleModeVars.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"addScaleModeVars.js","names":[],"sources":["../../../src/tailwind/base/addScaleModeVars.ts"],"sourcesContent":["import { getScaleModeStyles } from '@yahoo/uds/tailwind/utils';\nimport {\n  DEFAULT_SCALE_MODE,\n  LARGE_SCALE_MODE_CLASSNAME,\n  MEDIUM_SCALE_MODE_CLASSNAME,\n  SMALL_SCALE_MODE_CLASSNAME,\n  XLARGE_SCALE_MODE_CLASSNAME,\n  XSMALL_SCALE_MODE_CLASSNAME,\n  XXLARGE_SCALE_MODE_CLASSNAME,\n  XXXLARGE_SCALE_MODE_CLASSNAME,\n} from '@yahoo/uds/tokens';\nimport type { WebTokens } from '@yahoo/uds/tokens/parseTokens';\n\nimport type { TailwindPluginFns } from './types';\n\nexport function addScaleModeVars(\n  tokens: WebTokens,\n  { addBase, addRootVariables }: TailwindPluginFns,\n) {\n  const styles = getScaleModeStyles(tokens);\n\n  addRootVariables(styles[DEFAULT_SCALE_MODE]);\n\n  addBase({\n    [`.${XSMALL_SCALE_MODE_CLASSNAME}`]: styles.xSmall,\n    [`.${SMALL_SCALE_MODE_CLASSNAME}`]: styles.small,\n    [`.${MEDIUM_SCALE_MODE_CLASSNAME}`]: styles.medium,\n    [`.${LARGE_SCALE_MODE_CLASSNAME}`]: styles.large,\n    [`.${XLARGE_SCALE_MODE_CLASSNAME}`]: styles.xLarge,\n    [`.${XXLARGE_SCALE_MODE_CLASSNAME}`]: styles.xxLarge,\n    [`.${XXXLARGE_SCALE_MODE_CLASSNAME}`]: styles.xxxLarge,\n  });\n}\n"],"mappings":";;;;;;AAeA,SAAgB,iBACd,QACA,EAAE,SAAS,oBACX;CACA,MAAM,SAAS,mBAAmB,OAAO;AAEzC,kBAAiB,OAAO,oBAAoB;AAE5C,SAAQ;GACL,IAAI,gCAAgC,OAAO;GAC3C,IAAI,+BAA+B,OAAO;GAC1C,IAAI,gCAAgC,OAAO;GAC3C,IAAI,+BAA+B,OAAO;GAC1C,IAAI,gCAAgC,OAAO;GAC3C,IAAI,iCAAiC,OAAO;GAC5C,IAAI,kCAAkC,OAAO;EAC/C,CAAC"}

package/dist/tailwind/base/types.cjs

@@ -0,0 +1 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */

package/dist/tailwind/base/types.d.cts

@@ -0,0 +1,12 @@
+import { CSSRuleObject } from "tailwindcss/types/config";
+
+//#region src/tailwind/base/types.d.ts
+interface TailwindPluginFns {
+  addRootVariables: (base: CSSRuleObject) => void;
+  addBase: (base: CSSRuleObject | CSSRuleObject[]) => void;
+  addComponents: (base: CSSRuleObject | CSSRuleObject[]) => void;
+  addUtilities: (base: CSSRuleObject | CSSRuleObject[]) => void;
+}
+//#endregion
+export { TailwindPluginFns };
+//# sourceMappingURL=types.d.cts.map

package/dist/tailwind/base/types.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.cts","names":[],"sources":["../../../src/tailwind/base/types.ts"],"sourcesContent":[],"mappings":";;;UAEiB,iBAAA;2BACU;EADV,OAAA,CAAA,CAAA,CAAA,IAAA,CAAA,CAEC,aAFgB,CAAA,CAAA,CAEA,aAFA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA;EACP,aAAA,CAAA,CAAA,CAAA,IAAA,CAAA,CAEH,aAFG,CAAA,CAAA,CAEa,aAFb,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA;EACT,YAAA,CAAA,CAAA,CAAA,IAAA,CAAA,CAEK,aAFL,CAAA,CAAA,CAEqB,aAFrB,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA"}

package/dist/tailwind/base/types.d.ts

@@ -0,0 +1,12 @@
+import { CSSRuleObject } from "tailwindcss/types/config";
+
+//#region src/tailwind/base/types.d.ts
+interface TailwindPluginFns {
+  addRootVariables: (base: CSSRuleObject) => void;
+  addBase: (base: CSSRuleObject | CSSRuleObject[]) => void;
+  addComponents: (base: CSSRuleObject | CSSRuleObject[]) => void;
+  addUtilities: (base: CSSRuleObject | CSSRuleObject[]) => void;
+}
+//#endregion
+export { TailwindPluginFns };
+//# sourceMappingURL=types.d.ts.map

package/dist/tailwind/base/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","names":[],"sources":["../../../src/tailwind/base/types.ts"],"sourcesContent":[],"mappings":";;;UAEiB,iBAAA;2BACU;EADV,OAAA,CAAA,CAAA,CAAA,IAAA,CAAA,CAEC,aAFgB,CAAA,CAAA,CAEA,aAFA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA;EACP,aAAA,CAAA,CAAA,CAAA,IAAA,CAAA,CAEH,aAFG,CAAA,CAAA,CAEa,aAFb,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA;EACT,YAAA,CAAA,CAAA,CAAA,IAAA,CAAA,CAEK,aAFL,CAAA,CAAA,CAEqB,aAFrB,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA"}

package/dist/tailwind/base/types.js

@@ -0,0 +1 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */

package/dist/tailwind/components/getButtonStyles.cjs

@@ -0,0 +1,166 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_tokens_consts_cssTokens = require('../../tokens/consts/cssTokens.cjs');
+const require_tokens_utils_entries = require('../../tokens/utils/entries.cjs');
+const require_tailwind_components_utils = require('./utils.cjs');
+let __yahoo_uds_fixtures = require("@yahoo/uds/fixtures");
+
+//#region src/tailwind/components/getButtonStyles.ts
+function getStateStyles({ backgroundColor, borderColor, color, borderRadius, borderWidth, dropShadow, insetShadow }, theme) {
+	return {
+		[require_tokens_consts_cssTokens.BUTTON_CSS_VAR_MAP.backgroundColor]: require_tailwind_components_utils.getButtonColorForProperty("backgroundColor", backgroundColor, theme),
+		[require_tokens_consts_cssTokens.BUTTON_CSS_VAR_MAP.borderColor]: require_tailwind_components_utils.getButtonColorForProperty("borderColor", borderColor, theme),
+		[require_tokens_consts_cssTokens.BUTTON_CSS_VAR_MAP.color]: require_tailwind_components_utils.getButtonColorForProperty("color", color, theme),
+		...dropShadow ? { [require_tokens_consts_cssTokens.BUTTON_CSS_VAR_MAP.dropShadow]: require_tailwind_components_utils.getButtonShadowVar("dropShadow", {
+			dropShadow,
+			insetShadow
+		}) } : {},
+		...insetShadow ? { [require_tokens_consts_cssTokens.BUTTON_CSS_VAR_MAP.insetShadow]: require_tailwind_components_utils.getButtonShadowVar("insetShadow", {
+			dropShadow,
+			insetShadow
+		}) } : {},
+		...borderRadius ? { [require_tokens_consts_cssTokens.BUTTON_CSS_VAR_MAP.borderRadius]: theme(`borderRadius.${borderRadius}`) } : {},
+		...borderWidth ? { [require_tokens_consts_cssTokens.BUTTON_CSS_VAR_MAP.borderWidth]: theme(`borderWidth.${borderWidth}`) } : {}
+	};
+}
+function getSizeStyles(sizeConfig, theme) {
+	const { spacingHorizontal, spacingVertical, gap, textVariant, iconSize } = sizeConfig;
+	const lineHeightVarValue = theme(`typography.lineHeight.${textVariant}`);
+	const iconSizeVarValue = theme(`sizing.icon.${iconSize}`);
+	return {
+		[require_tokens_consts_cssTokens.BUTTON_CSS_VAR_MAP.padding]: `${theme(`spacing[${spacingVertical}]`)} ${theme(`spacing[${spacingHorizontal}]`)}`,
+		[require_tokens_consts_cssTokens.BUTTON_CSS_VAR_MAP.columnGap]: theme(`spacing[${gap}]`),
+		[require_tokens_consts_cssTokens.BUTTON_CSS_VAR_MAP.fontFamily]: theme(`typography.fontFamily.${textVariant}`),
+		[require_tokens_consts_cssTokens.BUTTON_CSS_VAR_MAP.fontWeight]: theme(`typography.fontWeight.${textVariant}`),
+		[require_tokens_consts_cssTokens.BUTTON_CSS_VAR_MAP.fontWidth]: theme(`typography.fontWidth.${textVariant}`),
+		[require_tokens_consts_cssTokens.BUTTON_CSS_VAR_MAP.fontSlant]: theme(`typography.fontSlant.${textVariant}`),
+		[require_tokens_consts_cssTokens.BUTTON_CSS_VAR_MAP.fontSize]: theme(`typography.fontSize.${textVariant}`),
+		[require_tokens_consts_cssTokens.BUTTON_CSS_VAR_MAP.lineHeight]: `max(${lineHeightVarValue}, ${iconSizeVarValue})`,
+		[require_tokens_consts_cssTokens.BUTTON_CSS_VAR_MAP.textTransform]: theme(`typography.textTransform.${textVariant}`),
+		[require_tokens_consts_cssTokens.BUTTON_CSS_VAR_MAP.iconSize]: theme(`sizing.icon.${iconSize}`)
+	};
+}
+function getButtonStyles(button, theme) {
+	const defaultVariantConfig = button.palette[button.defaults.palette][button.defaults.variant];
+	const defaultSize = button.size[button.defaults.size];
+	const defaultRestScale = defaultVariantConfig.base.scale;
+	const defaultHoverScale = defaultVariantConfig.effect.hover.scale.value;
+	const defaultPressedScale = defaultVariantConfig.effect.pressed.scale.value;
+	const variables = {
+		...getStateStyles(defaultVariantConfig.base, theme),
+		...getSizeStyles(defaultSize, theme),
+		[require_tokens_consts_cssTokens.BUTTON_CSS_VAR_MAP.effects.scale.rest]: require_tailwind_components_utils.getButtonScale({ scale: defaultRestScale }),
+		[require_tokens_consts_cssTokens.BUTTON_CSS_VAR_MAP.effects.scale.hover]: require_tailwind_components_utils.getButtonScale({ scale: defaultHoverScale }),
+		[require_tokens_consts_cssTokens.BUTTON_CSS_VAR_MAP.effects.scale.pressed]: require_tailwind_components_utils.getButtonScale({ scale: defaultPressedScale })
+	};
+	const TMP_transitionStyles = {
+		transitionProperty: "color, background-color, border-color, box-shadow, text-decoration-color, fill, stroke",
+		transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+		transitionDuration: "220ms"
+	};
+	/**
+	* Box shadow rule houses three concerns:
+	* 1. Border
+	* 2. Shadow
+	* 3. Inset shadow
+	*
+	* IMPORTANT: DO NOT SPLIT INTO MULTIPLE LINES, IT CAN BREAK POSTCSS.
+	*/
+	const boxShadow = `inset 0 0 0 ${require_tailwind_components_utils.getVar(require_tokens_consts_cssTokens.BUTTON_CSS_VAR_MAP, "borderWidth", variables)} ${require_tailwind_components_utils.getVar(require_tokens_consts_cssTokens.BUTTON_CSS_VAR_MAP, "borderColor", variables)}, ${require_tailwind_components_utils.getVar(require_tokens_consts_cssTokens.BUTTON_CSS_VAR_MAP, "dropShadow", variables)}, ${require_tailwind_components_utils.getVar(require_tokens_consts_cssTokens.BUTTON_CSS_VAR_MAP, "insetShadow", variables)}`;
+	/** Assign variables to configurable properties and fallback with default value */
+	const defaultStyles = {
+		borderRadius: require_tailwind_components_utils.getVar(require_tokens_consts_cssTokens.BUTTON_CSS_VAR_MAP, "borderRadius", variables),
+		boxShadow,
+		color: require_tailwind_components_utils.getVar(require_tokens_consts_cssTokens.BUTTON_CSS_VAR_MAP, "color", variables),
+		backgroundColor: require_tailwind_components_utils.getVar(require_tokens_consts_cssTokens.BUTTON_CSS_VAR_MAP, "backgroundColor", variables),
+		padding: require_tailwind_components_utils.getVar(require_tokens_consts_cssTokens.BUTTON_CSS_VAR_MAP, "padding", variables),
+		fontFamily: require_tailwind_components_utils.getVar(require_tokens_consts_cssTokens.BUTTON_CSS_VAR_MAP, "fontFamily", variables),
+		fontWeight: require_tailwind_components_utils.getVar(require_tokens_consts_cssTokens.BUTTON_CSS_VAR_MAP, "fontWeight", variables),
+		fontSize: require_tailwind_components_utils.getVar(require_tokens_consts_cssTokens.BUTTON_CSS_VAR_MAP, "fontSize", variables),
+		lineHeight: require_tailwind_components_utils.getVar(require_tokens_consts_cssTokens.BUTTON_CSS_VAR_MAP, "lineHeight", variables),
+		textTransform: require_tailwind_components_utils.getVar(require_tokens_consts_cssTokens.BUTTON_CSS_VAR_MAP, "textTransform", variables),
+		display: "inline-flex",
+		justifyContent: "center",
+		overflow: "hidden",
+		alignItems: "center",
+		whiteSpace: "nowrap",
+		userSelect: "none",
+		"font-variation-settings": `"wght" ${require_tailwind_components_utils.getVar(require_tokens_consts_cssTokens.BUTTON_CSS_VAR_MAP, "fontWeight", variables)}, "slnt" ${require_tailwind_components_utils.getVar(require_tokens_consts_cssTokens.BUTTON_CSS_VAR_MAP, "fontSlant", variables)}, "wdth" ${require_tailwind_components_utils.getVar(require_tokens_consts_cssTokens.BUTTON_CSS_VAR_MAP, "fontWidth", variables)}`,
+		...variables,
+		...TMP_transitionStyles
+	};
+	const hoverStyles = getStateStyles(defaultVariantConfig.state.hover, theme);
+	const pressedStyles = getStateStyles(defaultVariantConfig.state.pressed, theme);
+	const disabledStyles = {
+		cursor: "not-allowed",
+		opacity: "0.2",
+		[require_tokens_consts_cssTokens.BUTTON_CSS_VAR_MAP.effects.scale.hover]: require_tailwind_components_utils.getButtonScale({ scale: "none" }),
+		[require_tokens_consts_cssTokens.BUTTON_CSS_VAR_MAP.effects.scale.pressed]: require_tailwind_components_utils.getButtonScale({ scale: "none" })
+	};
+	const css = {
+		[".uds-button"]: defaultStyles,
+		[".uds-button .uds-button-icon"]: {
+			width: require_tailwind_components_utils.getVar(require_tokens_consts_cssTokens.BUTTON_CSS_VAR_MAP, "iconSize", variables),
+			height: require_tailwind_components_utils.getVar(require_tokens_consts_cssTokens.BUTTON_CSS_VAR_MAP, "iconSize", variables)
+		},
+		[`.uds-button${require_tokens_consts_cssTokens.PSEUDO_STYLE_SELECTOR_MAP.hover}`]: hoverStyles,
+		[`.uds-button${require_tokens_consts_cssTokens.PSEUDO_STYLE_SELECTOR_MAP.pressed}`]: pressedStyles,
+		[`.uds-button${require_tokens_consts_cssTokens.PSEUDO_STYLE_SELECTOR_MAP.disabled}`]: disabledStyles,
+		[".disabled .uds-button"]: disabledStyles
+	};
+	const pseudoCss = {
+		[".hover"]: { [".uds-button"]: hoverStyles },
+		[".pressed"]: { [".uds-button"]: pressedStyles }
+	};
+	for (const [size, sizeConfig] of require_tokens_utils_entries.entries(button.size)) css[`.uds-button-${size}`] = getSizeStyles(sizeConfig, theme);
+	function setVariantStyles(className, { palette, variant }) {
+		const variantConfig = button.palette[palette][variant];
+		const base = variantConfig.base;
+		const states = variantConfig.state;
+		const effects = variantConfig.effect;
+		const stateStyles = {
+			rest: { ...getStateStyles(base, theme) },
+			restScale: {
+				[require_tokens_consts_cssTokens.BUTTON_CSS_VAR_MAP.effects.scale.rest]: require_tailwind_components_utils.getButtonScale({ scale: base.scale }),
+				[require_tokens_consts_cssTokens.BUTTON_CSS_VAR_MAP.effects.scale.hover]: require_tailwind_components_utils.getButtonScale({ scale: effects.hover.scale.value }),
+				[require_tokens_consts_cssTokens.BUTTON_CSS_VAR_MAP.effects.scale.pressed]: require_tailwind_components_utils.getButtonScale({ scale: effects.pressed.scale.value })
+			},
+			hover: getStateStyles(states.hover, theme),
+			pressed: getStateStyles(states.pressed, theme)
+		};
+		css[className] = stateStyles.rest;
+		css[`${className}${require_tokens_consts_cssTokens.PSEUDO_STYLE_SELECTOR_MAP.notDisabled}`] = stateStyles.restScale;
+		css[`${className}${require_tokens_consts_cssTokens.PSEUDO_STYLE_SELECTOR_MAP.hover}`] = stateStyles.hover;
+		css[`${className}${require_tokens_consts_cssTokens.PSEUDO_STYLE_SELECTOR_MAP.pressed}`] = stateStyles.pressed;
+		pseudoCss[".hover"][className] = stateStyles.hover;
+		pseudoCss[".pressed"][className] = stateStyles.pressed;
+	}
+	for (const palette of __yahoo_uds_fixtures.buttonPalettes) {
+		setVariantStyles(`.uds-button-${palette}`, {
+			palette,
+			variant: button.defaults.variant
+		});
+		for (const variant of __yahoo_uds_fixtures.buttonVariants) {
+			setVariantStyles(`.uds-button-${palette}.uds-button-${variant}`, {
+				palette,
+				variant
+			});
+			if (palette === button.defaults.palette) setVariantStyles(`.uds-button-${variant}`, {
+				palette,
+				variant
+			});
+		}
+	}
+	/** TODO: figure out way to ensure this classMap and what's really being set here is in sync */
+	return {
+		...css,
+		...pseudoCss
+	};
+}
+function getTailwindButtonStyles(button, theme) {
+	return getButtonStyles(button, theme);
+}
+
+//#endregion
+exports.getButtonStyles = getButtonStyles;
+exports.getTailwindButtonStyles = getTailwindButtonStyles;

package/dist/tailwind/components/getButtonStyles.d.cts

@@ -0,0 +1,10 @@
+import { ButtonClassMap, ButtonConfig } from "../../tokens/types.cjs";
+import "../../tokens/index.cjs";
+import { CssStyleObject, ThemeFn } from "./types.cjs";
+
+//#region src/tailwind/components/getButtonStyles.d.ts
+declare function getButtonStyles(button: ButtonConfig, theme: ThemeFn): ButtonClassMap;
+declare function getTailwindButtonStyles(button: ButtonConfig, theme: ThemeFn): CssStyleObject;
+//#endregion
+export { getButtonStyles, getTailwindButtonStyles };
+//# sourceMappingURL=getButtonStyles.d.cts.map

package/dist/tailwind/components/getButtonStyles.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getButtonStyles.d.cts","names":[],"sources":["../../../src/tailwind/components/getButtonStyles.ts"],"sourcesContent":[],"mappings":";;;;;iBA2FS,eAAA,SAAwB,qBAAqB,UA6IjB;iBAG5B,uBAAA,SAAgC,qBAAqB,UACnB"}

package/dist/tailwind/components/getButtonStyles.d.ts

@@ -0,0 +1,10 @@
+import { ButtonClassMap, ButtonConfig } from "../../tokens/types.js";
+import "../../tokens/index.js";
+import { CssStyleObject, ThemeFn } from "./types.js";
+
+//#region src/tailwind/components/getButtonStyles.d.ts
+declare function getButtonStyles(button: ButtonConfig, theme: ThemeFn): ButtonClassMap;
+declare function getTailwindButtonStyles(button: ButtonConfig, theme: ThemeFn): CssStyleObject;
+//#endregion
+export { getButtonStyles, getTailwindButtonStyles };
+//# sourceMappingURL=getButtonStyles.d.ts.map

package/dist/tailwind/components/getButtonStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getButtonStyles.d.ts","names":[],"sources":["../../../src/tailwind/components/getButtonStyles.ts"],"sourcesContent":[],"mappings":";;;;;iBA2FS,eAAA,SAAwB,qBAAqB,UA6IjB;iBAG5B,uBAAA,SAAgC,qBAAqB,UACnB"}

package/dist/tailwind/components/getButtonStyles.js

@@ -0,0 +1,165 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { BUTTON_CSS_VAR_MAP, PSEUDO_STYLE_SELECTOR_MAP } from "../../tokens/consts/cssTokens.js";
+import { entries } from "../../tokens/utils/entries.js";
+import { getButtonColorForProperty, getButtonScale, getButtonShadowVar, getVar } from "./utils.js";
+import { buttonPalettes, buttonVariants } from "@yahoo/uds/fixtures";
+
+//#region src/tailwind/components/getButtonStyles.ts
+function getStateStyles({ backgroundColor, borderColor, color, borderRadius, borderWidth, dropShadow, insetShadow }, theme) {
+	return {
+		[BUTTON_CSS_VAR_MAP.backgroundColor]: getButtonColorForProperty("backgroundColor", backgroundColor, theme),
+		[BUTTON_CSS_VAR_MAP.borderColor]: getButtonColorForProperty("borderColor", borderColor, theme),
+		[BUTTON_CSS_VAR_MAP.color]: getButtonColorForProperty("color", color, theme),
+		...dropShadow ? { [BUTTON_CSS_VAR_MAP.dropShadow]: getButtonShadowVar("dropShadow", {
+			dropShadow,
+			insetShadow
+		}) } : {},
+		...insetShadow ? { [BUTTON_CSS_VAR_MAP.insetShadow]: getButtonShadowVar("insetShadow", {
+			dropShadow,
+			insetShadow
+		}) } : {},
+		...borderRadius ? { [BUTTON_CSS_VAR_MAP.borderRadius]: theme(`borderRadius.${borderRadius}`) } : {},
+		...borderWidth ? { [BUTTON_CSS_VAR_MAP.borderWidth]: theme(`borderWidth.${borderWidth}`) } : {}
+	};
+}
+function getSizeStyles(sizeConfig, theme) {
+	const { spacingHorizontal, spacingVertical, gap, textVariant, iconSize } = sizeConfig;
+	const lineHeightVarValue = theme(`typography.lineHeight.${textVariant}`);
+	const iconSizeVarValue = theme(`sizing.icon.${iconSize}`);
+	return {
+		[BUTTON_CSS_VAR_MAP.padding]: `${theme(`spacing[${spacingVertical}]`)} ${theme(`spacing[${spacingHorizontal}]`)}`,
+		[BUTTON_CSS_VAR_MAP.columnGap]: theme(`spacing[${gap}]`),
+		[BUTTON_CSS_VAR_MAP.fontFamily]: theme(`typography.fontFamily.${textVariant}`),
+		[BUTTON_CSS_VAR_MAP.fontWeight]: theme(`typography.fontWeight.${textVariant}`),
+		[BUTTON_CSS_VAR_MAP.fontWidth]: theme(`typography.fontWidth.${textVariant}`),
+		[BUTTON_CSS_VAR_MAP.fontSlant]: theme(`typography.fontSlant.${textVariant}`),
+		[BUTTON_CSS_VAR_MAP.fontSize]: theme(`typography.fontSize.${textVariant}`),
+		[BUTTON_CSS_VAR_MAP.lineHeight]: `max(${lineHeightVarValue}, ${iconSizeVarValue})`,
+		[BUTTON_CSS_VAR_MAP.textTransform]: theme(`typography.textTransform.${textVariant}`),
+		[BUTTON_CSS_VAR_MAP.iconSize]: theme(`sizing.icon.${iconSize}`)
+	};
+}
+function getButtonStyles(button, theme) {
+	const defaultVariantConfig = button.palette[button.defaults.palette][button.defaults.variant];
+	const defaultSize = button.size[button.defaults.size];
+	const defaultRestScale = defaultVariantConfig.base.scale;
+	const defaultHoverScale = defaultVariantConfig.effect.hover.scale.value;
+	const defaultPressedScale = defaultVariantConfig.effect.pressed.scale.value;
+	const variables = {
+		...getStateStyles(defaultVariantConfig.base, theme),
+		...getSizeStyles(defaultSize, theme),
+		[BUTTON_CSS_VAR_MAP.effects.scale.rest]: getButtonScale({ scale: defaultRestScale }),
+		[BUTTON_CSS_VAR_MAP.effects.scale.hover]: getButtonScale({ scale: defaultHoverScale }),
+		[BUTTON_CSS_VAR_MAP.effects.scale.pressed]: getButtonScale({ scale: defaultPressedScale })
+	};
+	const TMP_transitionStyles = {
+		transitionProperty: "color, background-color, border-color, box-shadow, text-decoration-color, fill, stroke",
+		transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+		transitionDuration: "220ms"
+	};
+	/**
+	* Box shadow rule houses three concerns:
+	* 1. Border
+	* 2. Shadow
+	* 3. Inset shadow
+	*
+	* IMPORTANT: DO NOT SPLIT INTO MULTIPLE LINES, IT CAN BREAK POSTCSS.
+	*/
+	const boxShadow = `inset 0 0 0 ${getVar(BUTTON_CSS_VAR_MAP, "borderWidth", variables)} ${getVar(BUTTON_CSS_VAR_MAP, "borderColor", variables)}, ${getVar(BUTTON_CSS_VAR_MAP, "dropShadow", variables)}, ${getVar(BUTTON_CSS_VAR_MAP, "insetShadow", variables)}`;
+	/** Assign variables to configurable properties and fallback with default value */
+	const defaultStyles = {
+		borderRadius: getVar(BUTTON_CSS_VAR_MAP, "borderRadius", variables),
+		boxShadow,
+		color: getVar(BUTTON_CSS_VAR_MAP, "color", variables),
+		backgroundColor: getVar(BUTTON_CSS_VAR_MAP, "backgroundColor", variables),
+		padding: getVar(BUTTON_CSS_VAR_MAP, "padding", variables),
+		fontFamily: getVar(BUTTON_CSS_VAR_MAP, "fontFamily", variables),
+		fontWeight: getVar(BUTTON_CSS_VAR_MAP, "fontWeight", variables),
+		fontSize: getVar(BUTTON_CSS_VAR_MAP, "fontSize", variables),
+		lineHeight: getVar(BUTTON_CSS_VAR_MAP, "lineHeight", variables),
+		textTransform: getVar(BUTTON_CSS_VAR_MAP, "textTransform", variables),
+		display: "inline-flex",
+		justifyContent: "center",
+		overflow: "hidden",
+		alignItems: "center",
+		whiteSpace: "nowrap",
+		userSelect: "none",
+		"font-variation-settings": `"wght" ${getVar(BUTTON_CSS_VAR_MAP, "fontWeight", variables)}, "slnt" ${getVar(BUTTON_CSS_VAR_MAP, "fontSlant", variables)}, "wdth" ${getVar(BUTTON_CSS_VAR_MAP, "fontWidth", variables)}`,
+		...variables,
+		...TMP_transitionStyles
+	};
+	const hoverStyles = getStateStyles(defaultVariantConfig.state.hover, theme);
+	const pressedStyles = getStateStyles(defaultVariantConfig.state.pressed, theme);
+	const disabledStyles = {
+		cursor: "not-allowed",
+		opacity: "0.2",
+		[BUTTON_CSS_VAR_MAP.effects.scale.hover]: getButtonScale({ scale: "none" }),
+		[BUTTON_CSS_VAR_MAP.effects.scale.pressed]: getButtonScale({ scale: "none" })
+	};
+	const css = {
+		[".uds-button"]: defaultStyles,
+		[".uds-button .uds-button-icon"]: {
+			width: getVar(BUTTON_CSS_VAR_MAP, "iconSize", variables),
+			height: getVar(BUTTON_CSS_VAR_MAP, "iconSize", variables)
+		},
+		[`.uds-button${PSEUDO_STYLE_SELECTOR_MAP.hover}`]: hoverStyles,
+		[`.uds-button${PSEUDO_STYLE_SELECTOR_MAP.pressed}`]: pressedStyles,
+		[`.uds-button${PSEUDO_STYLE_SELECTOR_MAP.disabled}`]: disabledStyles,
+		[".disabled .uds-button"]: disabledStyles
+	};
+	const pseudoCss = {
+		[".hover"]: { [".uds-button"]: hoverStyles },
+		[".pressed"]: { [".uds-button"]: pressedStyles }
+	};
+	for (const [size, sizeConfig] of entries(button.size)) css[`.uds-button-${size}`] = getSizeStyles(sizeConfig, theme);
+	function setVariantStyles(className, { palette, variant }) {
+		const variantConfig = button.palette[palette][variant];
+		const base = variantConfig.base;
+		const states = variantConfig.state;
+		const effects = variantConfig.effect;
+		const stateStyles = {
+			rest: { ...getStateStyles(base, theme) },
+			restScale: {
+				[BUTTON_CSS_VAR_MAP.effects.scale.rest]: getButtonScale({ scale: base.scale }),
+				[BUTTON_CSS_VAR_MAP.effects.scale.hover]: getButtonScale({ scale: effects.hover.scale.value }),
+				[BUTTON_CSS_VAR_MAP.effects.scale.pressed]: getButtonScale({ scale: effects.pressed.scale.value })
+			},
+			hover: getStateStyles(states.hover, theme),
+			pressed: getStateStyles(states.pressed, theme)
+		};
+		css[className] = stateStyles.rest;
+		css[`${className}${PSEUDO_STYLE_SELECTOR_MAP.notDisabled}`] = stateStyles.restScale;
+		css[`${className}${PSEUDO_STYLE_SELECTOR_MAP.hover}`] = stateStyles.hover;
+		css[`${className}${PSEUDO_STYLE_SELECTOR_MAP.pressed}`] = stateStyles.pressed;
+		pseudoCss[".hover"][className] = stateStyles.hover;
+		pseudoCss[".pressed"][className] = stateStyles.pressed;
+	}
+	for (const palette of buttonPalettes) {
+		setVariantStyles(`.uds-button-${palette}`, {
+			palette,
+			variant: button.defaults.variant
+		});
+		for (const variant of buttonVariants) {
+			setVariantStyles(`.uds-button-${palette}.uds-button-${variant}`, {
+				palette,
+				variant
+			});
+			if (palette === button.defaults.palette) setVariantStyles(`.uds-button-${variant}`, {
+				palette,
+				variant
+			});
+		}
+	}
+	/** TODO: figure out way to ensure this classMap and what's really being set here is in sync */
+	return {
+		...css,
+		...pseudoCss
+	};
+}
+function getTailwindButtonStyles(button, theme) {
+	return getButtonStyles(button, theme);
+}
+
+//#endregion
+export { getButtonStyles, getTailwindButtonStyles };
+//# sourceMappingURL=getButtonStyles.js.map

package/dist/tailwind/components/getButtonStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getButtonStyles.js","names":["css: CssStyleObject"],"sources":["../../../src/tailwind/components/getButtonStyles.ts"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                                BUTTON STYLES                               */\n/* -------------------------------------------------------------------------- */\n\nimport { buttonPalettes, buttonVariants } from '@yahoo/uds/fixtures';\nimport type {\n  ButtonBaseConfig,\n  ButtonClassMap,\n  ButtonColorPropertyConfig,\n  ButtonConfig,\n  ButtonMotionPropertyConfig,\n  ButtonPalette,\n  ButtonShadowPropertyConfig,\n  ButtonSize,\n  ButtonVariant,\n} from '@yahoo/uds/tokens';\nimport { BUTTON_CSS_VAR_MAP, entries, PSEUDO_STYLE_SELECTOR_MAP } from '@yahoo/uds/tokens';\n\nimport type { CssStyleObject, ThemeFn } from './types';\nimport { getButtonColorForProperty, getButtonScale, getButtonShadowVar, getVar } from './utils';\n\nfunction getStateStyles(\n  {\n    backgroundColor,\n    borderColor,\n    color,\n    borderRadius,\n    borderWidth,\n    dropShadow,\n    insetShadow,\n  }: ButtonMotionPropertyConfig &\n    ButtonColorPropertyConfig &\n    ButtonShadowPropertyConfig &\n    Partial<ButtonBaseConfig>,\n  theme: ThemeFn,\n) {\n  return {\n    [BUTTON_CSS_VAR_MAP.backgroundColor]: getButtonColorForProperty(\n      'backgroundColor',\n      backgroundColor,\n      theme,\n    ),\n    [BUTTON_CSS_VAR_MAP.borderColor]: getButtonColorForProperty('borderColor', borderColor, theme),\n    [BUTTON_CSS_VAR_MAP.color]: getButtonColorForProperty('color', color, theme),\n    ...(dropShadow\n      ? {\n          [BUTTON_CSS_VAR_MAP.dropShadow]: getButtonShadowVar('dropShadow', {\n            dropShadow,\n            insetShadow,\n          }),\n        }\n      : {}),\n    ...(insetShadow\n      ? {\n          [BUTTON_CSS_VAR_MAP.insetShadow]: getButtonShadowVar('insetShadow', {\n            dropShadow,\n            insetShadow,\n          }),\n        }\n      : {}),\n    ...(borderRadius\n      ? {\n          [BUTTON_CSS_VAR_MAP.borderRadius]: theme(`borderRadius.${borderRadius}`),\n        }\n      : {}),\n    ...(borderWidth\n      ? {\n          [BUTTON_CSS_VAR_MAP.borderWidth]: theme(`borderWidth.${borderWidth}`),\n        }\n      : {}),\n  };\n}\n\nfunction getSizeStyles(sizeConfig: ButtonConfig['size'][ButtonSize], theme: ThemeFn) {\n  const { spacingHorizontal, spacingVertical, gap, textVariant, iconSize } = sizeConfig;\n  const lineHeightVarValue = theme(`typography.lineHeight.${textVariant}`);\n  const iconSizeVarValue = theme(`sizing.icon.${iconSize}`);\n  return {\n    [BUTTON_CSS_VAR_MAP.padding]: `${theme(`spacing[${spacingVertical}]`)} ${theme(`spacing[${spacingHorizontal}]`)}`,\n    [BUTTON_CSS_VAR_MAP.columnGap]: theme(`spacing[${gap}]`),\n    [BUTTON_CSS_VAR_MAP.fontFamily]: theme(`typography.fontFamily.${textVariant}`),\n    [BUTTON_CSS_VAR_MAP.fontWeight]: theme(`typography.fontWeight.${textVariant}`),\n    [BUTTON_CSS_VAR_MAP.fontWidth]: theme(`typography.fontWidth.${textVariant}`),\n    [BUTTON_CSS_VAR_MAP.fontSlant]: theme(`typography.fontSlant.${textVariant}`),\n    [BUTTON_CSS_VAR_MAP.fontSize]: theme(`typography.fontSize.${textVariant}`),\n    [BUTTON_CSS_VAR_MAP.lineHeight]: `max(${lineHeightVarValue}, ${iconSizeVarValue})`,\n    [BUTTON_CSS_VAR_MAP.textTransform]: theme(`typography.textTransform.${textVariant}`),\n    [BUTTON_CSS_VAR_MAP.iconSize]: theme(`sizing.icon.${iconSize}`),\n  };\n}\n\nfunction getButtonStyles(button: ButtonConfig, theme: ThemeFn) {\n  const defaultVariantConfig = button.palette[button.defaults.palette][button.defaults.variant];\n  const defaultSize = button.size[button.defaults.size];\n  const defaultRestScale = defaultVariantConfig.base.scale;\n  const defaultHoverScale = defaultVariantConfig.effect.hover.scale.value;\n  const defaultPressedScale = defaultVariantConfig.effect.pressed.scale.value;\n\n  const variables = {\n    ...getStateStyles(defaultVariantConfig.base, theme),\n    ...getSizeStyles(defaultSize, theme),\n    // Set the default scale states\n    [BUTTON_CSS_VAR_MAP.effects.scale.rest]: getButtonScale({ scale: defaultRestScale }),\n    [BUTTON_CSS_VAR_MAP.effects.scale.hover]: getButtonScale({ scale: defaultHoverScale }),\n    [BUTTON_CSS_VAR_MAP.effects.scale.pressed]: getButtonScale({ scale: defaultPressedScale }),\n  };\n\n  // TODO remove these when UD-736 is resolved\n  const TMP_transitionStyles = {\n    transitionProperty:\n      'color, background-color, border-color, box-shadow, text-decoration-color, fill, stroke',\n    transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',\n    transitionDuration: '220ms',\n  };\n\n  /**\n   * Box shadow rule houses three concerns:\n   * 1. Border\n   * 2. Shadow\n   * 3. Inset shadow\n   *\n   * IMPORTANT: DO NOT SPLIT INTO MULTIPLE LINES, IT CAN BREAK POSTCSS.\n   */\n  const boxShadow = `inset 0 0 0 ${getVar(BUTTON_CSS_VAR_MAP, 'borderWidth', variables)} ${getVar(BUTTON_CSS_VAR_MAP, 'borderColor', variables)}, ${getVar(BUTTON_CSS_VAR_MAP, 'dropShadow', variables)}, ${getVar(BUTTON_CSS_VAR_MAP, 'insetShadow', variables)}`;\n\n  /** Assign variables to configurable properties and fallback with default value */\n  const defaultStyles = {\n    borderRadius: getVar(BUTTON_CSS_VAR_MAP, 'borderRadius', variables),\n    boxShadow,\n    color: getVar(BUTTON_CSS_VAR_MAP, 'color', variables),\n    backgroundColor: getVar(BUTTON_CSS_VAR_MAP, 'backgroundColor', variables),\n    padding: getVar(BUTTON_CSS_VAR_MAP, 'padding', variables),\n    fontFamily: getVar(BUTTON_CSS_VAR_MAP, 'fontFamily', variables),\n    fontWeight: getVar(BUTTON_CSS_VAR_MAP, 'fontWeight', variables),\n    fontSize: getVar(BUTTON_CSS_VAR_MAP, 'fontSize', variables),\n    lineHeight: getVar(BUTTON_CSS_VAR_MAP, 'lineHeight', variables),\n    textTransform: getVar(BUTTON_CSS_VAR_MAP, 'textTransform', variables),\n    display: 'inline-flex',\n    justifyContent: 'center',\n    overflow: 'hidden', // Ensure truncation works\n    alignItems: 'center',\n    whiteSpace: 'nowrap',\n    userSelect: 'none',\n    'font-variation-settings': `\"wght\" ${getVar(BUTTON_CSS_VAR_MAP, 'fontWeight', variables)}, \"slnt\" ${getVar(BUTTON_CSS_VAR_MAP, 'fontSlant', variables)}, \"wdth\" ${getVar(BUTTON_CSS_VAR_MAP, 'fontWidth', variables)}`,\n    // Ensure our default vars are _always_ set on the button\n    ...variables,\n    ...TMP_transitionStyles,\n  };\n\n  const hoverStyles = getStateStyles(defaultVariantConfig.state.hover, theme);\n  const pressedStyles = getStateStyles(defaultVariantConfig.state.pressed, theme);\n\n  const disabledStyles = {\n    cursor: 'not-allowed',\n    opacity: '0.2',\n    [BUTTON_CSS_VAR_MAP.effects.scale.hover]: getButtonScale({ scale: 'none' }),\n    [BUTTON_CSS_VAR_MAP.effects.scale.pressed]: getButtonScale({ scale: 'none' }),\n  };\n\n  const css: CssStyleObject = {\n    ['.uds-button']: defaultStyles,\n    ['.uds-button .uds-button-icon']: {\n      width: getVar(BUTTON_CSS_VAR_MAP, 'iconSize', variables),\n      height: getVar(BUTTON_CSS_VAR_MAP, 'iconSize', variables),\n    },\n    [`.uds-button${PSEUDO_STYLE_SELECTOR_MAP.hover}`]: hoverStyles,\n    [`.uds-button${PSEUDO_STYLE_SELECTOR_MAP.pressed}`]: pressedStyles,\n    [`.uds-button${PSEUDO_STYLE_SELECTOR_MAP.disabled}`]: disabledStyles,\n    ['.disabled .uds-button']: disabledStyles,\n  };\n\n  const pseudoCss = {\n    ['.hover']: { ['.uds-button']: hoverStyles } as CssStyleObject,\n    ['.pressed']: { ['.uds-button']: pressedStyles } as CssStyleObject,\n  };\n\n  // Generate styles for each size\n  for (const [size, sizeConfig] of entries(button.size)) {\n    css[`.uds-button-${size}`] = getSizeStyles(sizeConfig, theme);\n  }\n\n  // Iterate over user config and update variant styles\n  function setVariantStyles(\n    className: `.${string}`,\n    { palette, variant }: { palette: ButtonPalette; variant: ButtonVariant },\n  ) {\n    const variantConfig = button.palette[palette][variant];\n    const base = variantConfig.base;\n    const states = variantConfig.state;\n    const effects = variantConfig.effect;\n    const stateStyles = {\n      rest: {\n        ...getStateStyles(base, theme),\n      },\n      restScale: {\n        [BUTTON_CSS_VAR_MAP.effects.scale.rest]: getButtonScale({ scale: base.scale }),\n        [BUTTON_CSS_VAR_MAP.effects.scale.hover]: getButtonScale({\n          scale: effects.hover.scale.value,\n        }),\n        [BUTTON_CSS_VAR_MAP.effects.scale.pressed]: getButtonScale({\n          scale: effects.pressed.scale.value,\n        }),\n      },\n      hover: getStateStyles(states.hover, theme),\n      pressed: getStateStyles(states.pressed, theme),\n    };\n\n    css[className] = stateStyles.rest;\n    css[`${className}${PSEUDO_STYLE_SELECTOR_MAP.notDisabled}`] = stateStyles.restScale;\n    css[`${className}${PSEUDO_STYLE_SELECTOR_MAP.hover}`] = stateStyles.hover;\n    css[`${className}${PSEUDO_STYLE_SELECTOR_MAP.pressed}`] = stateStyles.pressed;\n    pseudoCss['.hover'][className] = stateStyles.hover;\n    pseudoCss['.pressed'][className] = stateStyles.pressed;\n  }\n\n  // Generate styles for each palette and variant\n  for (const palette of buttonPalettes) {\n    // Generate styles for each palette and with default variant\n    setVariantStyles(`.uds-button-${palette}`, { palette, variant: button.defaults.variant });\n\n    // Generate styles for each palette and variant combo\n    for (const variant of buttonVariants) {\n      setVariantStyles(`.uds-button-${palette}.uds-button-${variant}`, { palette, variant });\n\n      // Generate styles for each variant for default palette\n      if (palette === button.defaults.palette) {\n        setVariantStyles(`.uds-button-${variant}`, { palette, variant });\n      }\n    }\n  }\n\n  /** TODO: figure out way to ensure this classMap and what's really being set here is in sync */\n  return { ...css, ...pseudoCss } as ButtonClassMap;\n}\n\nfunction getTailwindButtonStyles(button: ButtonConfig, theme: ThemeFn) {\n  return getButtonStyles(button, theme) as CssStyleObject;\n}\n\nexport { getButtonStyles, getTailwindButtonStyles };\n"],"mappings":"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"}

package/dist/tailwind/components/getFocusRingStyles.cjs

@@ -0,0 +1,29 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+const require_tokens_consts_cssTokens = require('../../tokens/consts/cssTokens.cjs');
+
+//#region src/tailwind/components/getFocusRingStyles.ts
+const ringStyles = {
+	outlineOffset: "var(--uds-outline-offset)",
+	outlineWidth: "var(--uds-outline-width)",
+	outlineColor: "var(--uds-outline-color)",
+	outlineStyle: "var(--uds-outline-style)"
+};
+/**
+* Generates focus ring styles using Tailwind theme values and CSS variables.
+*/
+function getFocusRingStyles({ theme }) {
+	return {
+		".uds-ring": {
+			"--uds-outline-offset": theme("outlineOffset.DEFAULT"),
+			"--uds-outline-width": theme("outlineWidth.DEFAULT"),
+			"--uds-outline-color": theme("outlineColor.DEFAULT"),
+			"--uds-outline-style": "solid"
+		},
+		[`.uds-ring${require_tokens_consts_cssTokens.PSEUDO_STYLE_SELECTOR_MAP.focused}`]: ringStyles,
+		[".focused .uds-ring"]: ringStyles,
+		[`.uds-ring.uds-ring-within${require_tokens_consts_cssTokens.PSEUDO_STYLE_SELECTOR_MAP.focusedWithin}`]: ringStyles
+	};
+}
+
+//#endregion
+exports.getFocusRingStyles = getFocusRingStyles;

package/dist/tailwind/components/getFocusRingStyles.d.cts

@@ -0,0 +1,15 @@
+import { CssStyleObject, ThemeFn } from "./types.cjs";
+
+//#region src/tailwind/components/getFocusRingStyles.d.ts
+
+/**
+ * Generates focus ring styles using Tailwind theme values and CSS variables.
+ */
+declare function getFocusRingStyles({
+  theme
+}: {
+  theme: ThemeFn;
+}): CssStyleObject;
+//#endregion
+export { getFocusRingStyles };
+//# sourceMappingURL=getFocusRingStyles.d.cts.map

package/dist/tailwind/components/getFocusRingStyles.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getFocusRingStyles.d.cts","names":[],"sources":["../../../src/tailwind/components/getFocusRingStyles.ts"],"sourcesContent":[],"mappings":";;;;;;AAEuD,CAAA,CAAA;iBAa9C,kBAAA,CAAqB;EAAA;CAAA,CAAA,CAAA;EAAkB,KAAA,CAAA,CAAA,OAAA;CAazC,CAAA,CAAA,CAAA,cAAA"}

package/dist/tailwind/components/getFocusRingStyles.d.ts

@@ -0,0 +1,15 @@
+import { CssStyleObject, ThemeFn } from "./types.js";
+
+//#region src/tailwind/components/getFocusRingStyles.d.ts
+
+/**
+ * Generates focus ring styles using Tailwind theme values and CSS variables.
+ */
+declare function getFocusRingStyles({
+  theme
+}: {
+  theme: ThemeFn;
+}): CssStyleObject;
+//#endregion
+export { getFocusRingStyles };
+//# sourceMappingURL=getFocusRingStyles.d.ts.map

package/dist/tailwind/components/getFocusRingStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getFocusRingStyles.d.ts","names":[],"sources":["../../../src/tailwind/components/getFocusRingStyles.ts"],"sourcesContent":[],"mappings":";;;;;;AAEuD,CAAA,CAAA;iBAa9C,kBAAA,CAAqB;EAAA;CAAA,CAAA,CAAA;EAAkB,KAAA,CAAA,CAAA,OAAA;CAazC,CAAA,CAAA,CAAA,cAAA"}

package/dist/tailwind/components/getFocusRingStyles.js

@@ -0,0 +1,30 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { PSEUDO_STYLE_SELECTOR_MAP } from "../../tokens/consts/cssTokens.js";
+
+//#region src/tailwind/components/getFocusRingStyles.ts
+const ringStyles = {
+	outlineOffset: "var(--uds-outline-offset)",
+	outlineWidth: "var(--uds-outline-width)",
+	outlineColor: "var(--uds-outline-color)",
+	outlineStyle: "var(--uds-outline-style)"
+};
+/**
+* Generates focus ring styles using Tailwind theme values and CSS variables.
+*/
+function getFocusRingStyles({ theme }) {
+	return {
+		".uds-ring": {
+			"--uds-outline-offset": theme("outlineOffset.DEFAULT"),
+			"--uds-outline-width": theme("outlineWidth.DEFAULT"),
+			"--uds-outline-color": theme("outlineColor.DEFAULT"),
+			"--uds-outline-style": "solid"
+		},
+		[`.uds-ring${PSEUDO_STYLE_SELECTOR_MAP.focused}`]: ringStyles,
+		[".focused .uds-ring"]: ringStyles,
+		[`.uds-ring.uds-ring-within${PSEUDO_STYLE_SELECTOR_MAP.focusedWithin}`]: ringStyles
+	};
+}
+
+//#endregion
+export { getFocusRingStyles };
+//# sourceMappingURL=getFocusRingStyles.js.map

package/dist/tailwind/components/getFocusRingStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getFocusRingStyles.js","names":[],"sources":["../../../src/tailwind/components/getFocusRingStyles.ts"],"sourcesContent":["import { PSEUDO_STYLE_SELECTOR_MAP } from '@yahoo/uds/tokens';\n\nimport type { CssStyleObject, ThemeFn } from './types';\n\n// Using css vars so consumers have a css only path to customize\nconst ringStyles = {\n  outlineOffset: 'var(--uds-outline-offset)',\n  outlineWidth: 'var(--uds-outline-width)',\n  outlineColor: 'var(--uds-outline-color)',\n  outlineStyle: 'var(--uds-outline-style)',\n};\n\n/**\n * Generates focus ring styles using Tailwind theme values and CSS variables.\n */\nfunction getFocusRingStyles({ theme }: { theme: ThemeFn }) {\n  return {\n    /** Setup vars */\n    '.uds-ring': {\n      '--uds-outline-offset': theme('outlineOffset.DEFAULT'),\n      '--uds-outline-width': theme('outlineWidth.DEFAULT'),\n      '--uds-outline-color': theme('outlineColor.DEFAULT'),\n      '--uds-outline-style': 'solid', // outlineStyle isn't in the tailwind theme\n    },\n    /** Apply styles */\n    [`.uds-ring${PSEUDO_STYLE_SELECTOR_MAP.focused}`]: ringStyles,\n    ['.focused .uds-ring']: ringStyles,\n    [`.uds-ring.uds-ring-within${PSEUDO_STYLE_SELECTOR_MAP.focusedWithin}`]: ringStyles,\n  } as CssStyleObject;\n}\n\nexport { getFocusRingStyles };\n"],"mappings":";;;;AAKA,MAAM,aAAa;CACjB,eAAe;CACf,cAAc;CACd,cAAc;CACd,cAAc;CACf;;;;AAKD,SAAS,mBAAmB,EAAE,SAA6B;AACzD,QAAO;EAEL,aAAa;GACX,wBAAwB,MAAM,wBAAwB;GACtD,uBAAuB,MAAM,uBAAuB;GACpD,uBAAuB,MAAM,uBAAuB;GACpD,uBAAuB;GACxB;GAEA,YAAY,0BAA0B,YAAY;GAClD,uBAAuB;GACvB,4BAA4B,0BAA0B,kBAAkB;EAC1E"}

package/dist/tailwind/components/getGroupedTextStyles.cjs

@@ -0,0 +1,18 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_tokens_consts_cssTokens = require('../../tokens/consts/cssTokens.cjs');
+const require_tailwind_components_getResponsiveTextStyles = require('./getResponsiveTextStyles.cjs');
+let __yahoo_uds_fixtures = require("@yahoo/uds/fixtures");
+
+//#region src/tailwind/components/getGroupedTextStyles.ts
+const getGroupedTextStyles = () => Object.fromEntries(__yahoo_uds_fixtures.textVariants.map(require_tailwind_components_getResponsiveTextStyles.textVariantsSafe).map((variant) => [`.uds-text-${variant}`, {
+	fontFamily: `var(--${require_tokens_consts_cssTokens.FONT_FAMILY_PREFIX}-${variant})`,
+	fontSize: `var(--${require_tokens_consts_cssTokens.FONT_SIZE_PREFIX}-${variant})`,
+	fontWeight: `var(--${require_tokens_consts_cssTokens.FONT_WEIGHT_PREFIX}-${variant})`,
+	fontVariationSettings: `"wght" var(--${require_tokens_consts_cssTokens.FONT_WEIGHT_PREFIX}-${variant}), "slnt" var(--${require_tokens_consts_cssTokens.FONT_SLANT_PREFIX}-${variant}), "wdth" var(--${require_tokens_consts_cssTokens.FONT_WIDTH_PREFIX}-${variant})`,
+	lineHeight: `var(--${require_tokens_consts_cssTokens.LINE_HEIGHT_PREFIX}-${variant})`,
+	textTransform: `var(--${require_tokens_consts_cssTokens.TEXT_TRANSFORM_PREFIX}-${variant})`
+}]));
+
+//#endregion
+exports.getGroupedTextStyles = getGroupedTextStyles;

package/dist/tailwind/components/getGroupedTextStyles.d.cts

@@ -0,0 +1,14 @@
+//#region src/tailwind/components/getGroupedTextStyles.d.ts
+declare const getGroupedTextStyles: () => {
+  [k: string]: {
+    fontFamily: string;
+    fontSize: string;
+    fontWeight: string;
+    fontVariationSettings: string;
+    lineHeight: string;
+    textTransform: string;
+  };
+};
+//#endregion
+export { getGroupedTextStyles };
+//# sourceMappingURL=getGroupedTextStyles.d.cts.map

package/dist/tailwind/components/getGroupedTextStyles.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getGroupedTextStyles.d.cts","names":[],"sources":["../../../src/tailwind/components/getGroupedTextStyles.ts"],"sourcesContent":[],"mappings":";cAaM;EAAA,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,CAAA,CAAA"}

package/dist/tailwind/components/getGroupedTextStyles.d.ts

@@ -0,0 +1,14 @@
+//#region src/tailwind/components/getGroupedTextStyles.d.ts
+declare const getGroupedTextStyles: () => {
+  [k: string]: {
+    fontFamily: string;
+    fontSize: string;
+    fontWeight: string;
+    fontVariationSettings: string;
+    lineHeight: string;
+    textTransform: string;
+  };
+};
+//#endregion
+export { getGroupedTextStyles };
+//# sourceMappingURL=getGroupedTextStyles.d.ts.map

package/dist/tailwind/components/getGroupedTextStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getGroupedTextStyles.d.ts","names":[],"sources":["../../../src/tailwind/components/getGroupedTextStyles.ts"],"sourcesContent":[],"mappings":";cAaM;EAAA,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,CAAA,CAAA"}