@veracity/vui 4.1.0 → 5.0.0-alpha.0

package/dist/button/theme.js

@@ -1,8 +1,89 @@
 //#region src/button/theme.ts
+/** Token references per semantic intent. */
+const intentTokens = {
+	brand: {
+		solid: "var(--vui-action-brand-solid)",
+		solidInverse: "var(--vui-action-brand-solid-inverse)",
+		solidHover: "var(--vui-action-brand-solid-hover)",
+		solidPressed: "var(--vui-action-brand-solid-pressed)",
+		subtleHover: "var(--vui-action-brand-subtle-hover)",
+		subtlePressed: "var(--vui-action-brand-subtle-pressed)"
+	},
+	contrast: {
+		solid: "var(--vui-action-contrast-solid)",
+		solidInverse: "var(--vui-action-contrast-solid-inverse)",
+		solidHover: "var(--vui-action-contrast-solid-hover)",
+		solidPressed: "var(--vui-action-contrast-solid-pressed)",
+		subtleHover: "var(--vui-action-contrast-subtle-hover)",
+		subtlePressed: "var(--vui-action-contrast-subtle-pressed)"
+	},
+	success: {
+		solid: "var(--vui-action-success-solid)",
+		solidInverse: "var(--vui-action-success-solid-inverse)",
+		solidHover: "var(--vui-action-success-solid-hover)",
+		solidPressed: "var(--vui-action-success-solid-pressed)",
+		subtleHover: "var(--vui-action-success-subtle-hover)",
+		subtlePressed: "var(--vui-action-success-subtle-pressed)"
+	},
+	danger: {
+		solid: "var(--vui-action-danger-solid)",
+		solidInverse: "var(--vui-action-danger-solid-inverse)",
+		solidHover: "var(--vui-action-danger-solid-hover)",
+		solidPressed: "var(--vui-action-danger-solid-pressed)",
+		subtleHover: "var(--vui-action-danger-subtle-hover)",
+		subtlePressed: "var(--vui-action-danger-subtle-pressed)"
+	},
+	warning: {
+		solid: "var(--vui-action-yellow-solid)",
+		solidInverse: "var(--vui-action-yellow-solid-inverse)",
+		solidHover: "var(--vui-action-yellow-solid-hover)",
+		solidPressed: "var(--vui-action-yellow-solid-pressed)",
+		subtleHover: "var(--vui-action-yellow-subtle-hover)",
+		subtlePressed: "var(--vui-action-yellow-subtle-pressed)"
+	}
+};
+const TRANSPARENT = "var(--vui-color-opacity-none)";
+const DISABLED_BG = "var(--vui-action-disabled-background)";
+const DISABLED_FG = "var(--vui-action-disabled-foreground)";
+/** Container styles per visual hierarchy, composed from intent tokens. */
+const hierarchyRules = {
+	primary: (t) => ({
+		bg: t.solid,
+		borderColor: t.solid,
+		color: t.solidInverse,
+		hoverBg: t.solidHover,
+		hoverBorderColor: t.solidHover,
+		activeBg: t.solidPressed,
+		activeBorderColor: t.solidPressed,
+		disabledBg: DISABLED_BG,
+		disabledBorderColor: DISABLED_BG,
+		disabledColor: DISABLED_FG
+	}),
+	secondary: (t) => ({
+		bg: TRANSPARENT,
+		borderColor: t.solid,
+		color: t.solid,
+		hoverBg: t.subtleHover,
+		activeBg: t.subtlePressed,
+		disabledBg: TRANSPARENT,
+		disabledBorderColor: DISABLED_BG,
+		disabledColor: DISABLED_FG
+	}),
+	tertiary: (t) => ({
+		bg: TRANSPARENT,
+		borderColor: TRANSPARENT,
+		color: t.solid,
+		hoverBg: t.subtleHover,
+		activeBg: t.subtlePressed,
+		disabledBg: TRANSPARENT,
+		disabledBorderColor: TRANSPARENT,
+		disabledColor: DISABLED_FG
+	})
+};
 const baseStyle = {};
 const defaultProps = {
 	size: "lg",
-	variant: "primaryDark",
+	variant: "primaryBrand",
 	fontWeight: "medium"
 };
 const parts = [
@@ -15,261 +96,84 @@ const sizes = {
 		container: {
 			fontSize: "xs",
 			h: 24,
-			minW: 48,
-			spaceX: 4
+			paddingX: 12,
+			paddingXIcon: 8,
+			paddingY: 5,
+			gapX: 8
 		},
-		icon: { size: "xs" },
-		text: {}
+		icon: { fontSize: "12px" }
 	},
 	md: {
 		container: {
 			fontSize: "sm",
 			h: 32,
-			minW: 64,
-			spaceX: 6
+			paddingX: 16,
+			paddingXIcon: 12,
+			paddingY: 8,
+			gapX: 8
 		},
-		icon: { size: "sm" },
-		text: {}
+		icon: { fontSize: "16px" }
 	},
 	lg: {
 		container: {
 			fontSize: "md",
 			h: 40,
-			minW: 80,
-			spaceX: 8
+			paddingX: 16,
+			paddingXIcon: 16,
+			paddingY: 10,
+			gapX: 8
 		},
-		icon: { size: "md" },
-		text: {}
+		icon: { fontSize: "16px" }
 	},
 	xl: {
 		container: {
 			fontSize: "lg",
 			h: 48,
-			minW: 96,
-			spaceX: 10
+			paddingX: 16,
+			paddingXIcon: 16,
+			paddingY: 13,
+			gapX: 8
 		},
-		icon: { size: "lg" },
-		text: {}
+		icon: { fontSize: "18px" }
 	}
 };
-const variants = {
-	primaryDark: { container: {
-		bg: "buttonTypePrimaryDefaultBackgroundColorDark",
-		borderColor: "buttonTypePrimaryDefaultBorderColorDark",
-		color: "buttonTypePrimaryDefaultTextColorDark",
-		hoverBg: "buttonTypePrimaryHoverBackgroundColorDark",
-		hoverBorderColor: "buttonTypePrimaryHoverBorderColorDark",
-		hoverColor: "buttonTypePrimaryHoverTextColorDark",
-		activeBg: "buttonTypePrimaryActiveBackgroundColorDark",
-		activeBorderColor: "buttonTypePrimaryActiveBorderColorDark",
-		activeColor: "buttonTypePrimaryActiveTextColorDark"
-	} },
-	primaryLight: { container: {
-		bg: "buttonTypePrimaryDefaultBackgroundColorLight",
-		borderColor: "buttonTypePrimaryDefaultBorderColorLight",
-		color: "buttonTypePrimaryDefaultTextColorLight",
-		hoverBg: "buttonTypePrimaryHoverBackgroundColorLight",
-		hoverBorderColor: "buttonTypePrimaryHoverBorderColorLight",
-		hoverColor: "buttonTypePrimaryHoverTextColorLight",
-		activeBg: "buttonTypePrimaryActiveBackgroundColorLight",
-		activeBorderColor: "buttonTypePrimaryActiveBorderColorLight",
-		activeColor: "buttonTypePrimaryActiveTextColorLight"
-	} },
-	secondaryDark: { container: {
-		bg: "buttonTypeSecondaryDefaultBackgroundColorDark",
-		borderColor: "buttonTypeSecondaryDefaultBorderColorDark",
-		color: "buttonTypeSecondaryDefaultTextColorDark",
-		hoverBg: "buttonTypeSecondaryHoverBackgroundColorDark",
-		hoverBorderColor: "buttonTypeSecondaryHoverBorderColorDark",
-		hoverColor: "buttonTypeSecondaryHoverTextColorDark",
-		activeBg: "buttonTypeSecondaryActiveBackgroundColorDark",
-		activeBorderColor: "buttonTypeSecondaryActiveBorderColorDark",
-		activeColor: "buttonTypeSecondaryActiveTextColorDark"
-	} },
-	secondaryLight: { container: {
-		bg: "buttonTypeSecondaryDefaultBackgroundColorLight",
-		borderColor: "buttonTypeSecondaryDefaultBorderColorLight",
-		color: "buttonTypeSecondaryDefaultTextColorLight",
-		hoverBg: "buttonTypeSecondaryHoverBackgroundColorLight",
-		hoverBorderColor: "buttonTypeSecondaryHoverBorderColorLight",
-		hoverColor: "buttonTypeSecondaryHoverTextColorLight",
-		activeBg: "buttonTypeSecondaryActiveBackgroundColorLight",
-		activeBorderColor: "buttonTypeSecondaryActiveBorderColorLight",
-		activeColor: "buttonTypeSecondaryActiveTextColorLight"
-	} },
-	tertiaryDark: { container: {
-		bg: "buttonTypeTertiaryDefaultBackgroundColorDark",
-		borderColor: "buttonTypeTertiaryDefaultBorderColorDark",
-		color: "buttonTypeTertiaryDefaultTextColorDark",
-		hoverBg: "buttonTypeTertiaryHoverBackgroundColorDark",
-		hoverBorderColor: "buttonTypeTertiaryHoverBorderColorDark",
-		hoverColor: "buttonTypeTertiaryHoverTextColorDark",
-		activeBg: "buttonTypeTertiaryActiveBackgroundColorDark",
-		activeBorderColor: "buttonTypeTertiaryActiveBorderColorDark",
-		activeColor: "buttonTypeTertiaryActiveTextColorDark"
-	} },
-	tertiaryLight: { container: {
-		bg: "buttonTypeTertiaryDefaultBackgroundColorLight",
-		borderColor: "buttonTypeTertiaryDefaultBorderColorLight",
-		color: "buttonTypeTertiaryDefaultTextColorLight",
-		hoverBg: "buttonTypeTertiaryHoverBackgroundColorLight",
-		hoverBorderColor: "buttonTypeTertiaryHoverBorderColorLight",
-		hoverColor: "buttonTypeTertiaryHoverTextColorLight",
-		activeBg: "buttonTypeTertiaryActiveBackgroundColorLight",
-		activeBorderColor: "buttonTypeTertiaryActiveBorderColorLight",
-		activeColor: "buttonTypeTertiaryActiveTextColorLight"
-	} },
-	solidBlue: { container: {
-		bg: "seaBlue.main",
-		borderColor: "seaBlue.main",
-		color: "white",
-		disabledBg: "darkBlue.75",
-		disabledBorderColor: "darkBlue.75",
-		disabledColor: "white",
-		hoverBg: "seaBlue.20",
-		hoverBorderColor: "seaBlue.20",
-		focusBg: "seaBlue.main",
-		activeBg: "seaBlue.35",
-		activeBorderColor: "seaBlue.35"
-	} },
-	blueOutlined: { container: {
-		bg: "white",
-		borderColor: "seaBlue.main",
-		color: "seaBlue.main",
-		disabledBg: "white",
-		disabledBorderColor: "darkBlue.75",
-		disabledColor: "darkBlue.75",
-		hoverBg: "skyBlue.85",
-		hoverBorderColor: "seaBlue.35",
-		activeBg: "skyBlue.90",
-		activeBorderColor: "seaBlue.35"
-	} },
-	blueText: { container: {
-		bg: "transparent",
-		borderColor: "transparent",
-		color: "seaBlue.main",
-		disabledBg: "white",
-		disabledBorderColor: "white",
-		disabledColor: "darkBlue.75",
-		hoverBg: "skyBlue.85",
-		hoverBorderColor: "skyBlue.85",
-		focusBg: "transparent",
-		activeBg: "skyBlue.90",
-		activeBorderColor: "skyBlue.90"
-	} },
-	solidGreen: { container: {
-		bg: "landGreen.35",
-		borderColor: "landGreen.35",
-		color: "white",
-		disabledBg: "landGreen.70",
-		disabledBorderColor: "landGreen.70",
-		disabledColor: "white",
-		hoverBg: "landGreen.25",
-		hoverBorderColor: "landGreen.25",
-		focusBg: "landGreen.35",
-		activeBg: "landGreen.41",
-		activeBorderColor: "landGreen.41"
-	} },
-	solidRed: { container: {
-		bg: "energyRed.45",
-		borderColor: "energyRed.45",
-		color: "white",
-		disabledBg: "energyRed.80",
-		disabledBorderColor: "energyRed.80",
-		disabledColor: "white",
-		hoverBg: "energyRed.35",
-		hoverBorderColor: "energyRed.35",
-		focusBg: "energyRed.45",
-		activeBg: "energyRed.50",
-		activeBorderColor: "energyRed.50"
-	} },
-	subtleBlue: { container: {
-		bg: "transparent",
-		borderColor: "transparent",
-		color: "seaBlue.main",
-		disabledBg: "white",
-		disabledBorderColor: "darkBlue.75",
-		disabledColor: "darkBlue.75",
-		hoverBg: "skyBlue.90",
-		hoverBorderColor: "skyBlue.90",
-		focusBg: "transparent",
-		activeBg: "skyBlue.85",
-		activeBorderColor: "skyBlue.85"
-	} },
-	subtleRed: { container: {
-		bg: "transparent",
-		borderColor: "transparent",
-		hoverBg: "energyRed.90",
-		hoverBorderColor: "energyRed.90",
-		focusBg: "transparent",
-		activeBg: "energyRed.85",
-		color: "energyRed.45"
-	} },
-	subtleYellow: { container: {
-		bg: "transparent",
-		borderColor: "transparent",
-		hoverBg: "sunflower.70",
-		hoverBorderColor: "sunflower.70",
-		focusBg: "transparent",
-		activeBg: "sunflower.65",
-		color: "sunflower.15"
-	} },
-	subtleGreen: { container: {
-		bg: "transparent",
-		borderColor: "transparent",
-		hoverBg: "landGreen.90",
-		hoverBorderColor: "landGreen.90",
-		focusBg: "transparent",
-		activeBg: "landGreen.85",
-		color: "landGreen.30"
-	} },
-	menuLight: { container: {
-		bg: "#ffffff",
-		hoverBg: "#D3EEF8",
-		activeBg: "#E9F7FC",
-		disabledBg: "#F8F7F7",
-		borderColor: "transparent",
-		hoverBorderColor: "#003591",
-		activeBorderColor: "#003591",
-		color: "#1A1A19",
-		hoverColor: "#1A1A19",
-		activeColor: "#003591",
-		disabledColor: "#908D89",
-		disabledBorderColor: "transparent",
-		disabledOpacity: "1"
-	} },
-	menuDark: { container: {
-		bg: "#0F204B",
-		hoverBg: "#003591",
-		activeBg: "#0041B2",
-		disabledBg: "#0F204B",
-		borderColor: "transparent",
-		hoverBorderColor: "#91FFB4",
-		activeBorderColor: "#91FFB4",
-		color: "#FFFFFF",
-		hoverColor: "#FFFFFF",
-		activeColor: "#91FFBA",
-		disabledColor: "#FFFFFF",
-		disabledBorderColor: "transparent",
-		disabledOpacity: "1"
-	} }
-};
+const variants = Object.fromEntries(Object.entries(intentTokens).flatMap(([intentKey, tokens]) => Object.entries(hierarchyRules).map(([hierarchyKey, buildContainer]) => [`${hierarchyKey}${intentKey.charAt(0).toUpperCase()}${intentKey.slice(1)}`, { container: buildContainer(tokens) }])));
+variants.primaryDark = variants.primaryBrand;
+variants.secondaryDark = variants.secondaryBrand;
+variants.tertiaryDark = variants.tertiaryBrand;
+variants.primaryLight = variants.primaryContrast;
+variants.secondaryLight = variants.secondaryContrast;
+variants.tertiaryLight = variants.tertiaryContrast;
+variants.solidGreen = variants.primarySuccess;
+variants.solidRed = variants.primaryDanger;
+variants.solidBlue = variants.primaryBrand;
+variants.blueOutlined = variants.secondaryBrand;
+variants.blueText = variants.tertiaryBrand;
+variants.subtleBlue = variants.secondaryBrand;
+variants.subtleRed = variants.secondaryDanger;
+variants.subtleGreen = variants.secondarySuccess;
+variants.subtleYellow = variants.secondaryWarning;
+variants.menuLight = variants.tertiaryBrand;
+variants.menuDark = variants.tertiaryBrand;
 variants.buttonGroupDefault = { container: {
-	...variants.secondaryDark.container,
-	borderColor: "sandstone.60"
+	bg: "var(--vui-color-opacity-none)",
+	borderColor: "var(--vui-control-placeholder)",
+	color: "var(--vui-action-brand-solid)",
+	hoverBg: "var(--vui-action-brand-subtle-hover)",
+	activeBg: "var(--vui-action-brand-subtle-pressed)"
 } };
 variants.buttonGroupRounded = { container: {
-	bg: "white",
-	borderColor: "sandstone.79",
-	color: "sandstone.10",
-	hoverBg: "seaBlue.20",
-	hoverBorderColor: "buttonTypePrimaryHoverBorderColorDark",
-	hoverColor: "white",
-	activeBg: "seaBlue.35",
-	activeBorderColor: "buttonTypePrimaryActiveBorderColorDark",
-	activeColor: "white",
-	borderRadius: "round",
-	marginRight: "22px"
+	bg: "var(--vui-background-default)",
+	borderColor: "var(--vui-utility-border-subtle)",
+	color: "var(--vui-foreground-default)",
+	hoverBg: "var(--vui-action-brand-subtle-hover)",
+	hoverBorderColor: "var(--vui-action-brand-subtle-hover)",
+	hoverColor: "var(--vui-action-brand-subtle-inverse)",
+	activeBg: "var(--vui-action-brand-solid-pressed)",
+	activeBorderColor: "var(--vui-action-brand-solid-pressed)",
+	activeColor: "var(--vui-action-brand-solid-inverse)",
+	borderRadius: "1000",
+	marginRight: "var(--vui-button-group-rounded-spacing, 22px)"
 } };
 var theme_default = {
 	baseStyle,
@@ -281,5 +185,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=theme.js.map

package/dist/button/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","names":[],"sources":["../../src/button/theme.ts"],"sourcesContent":["const baseStyle = {}\n\nconst defaultProps = {\n  size: 'lg',\n  variant: 'primaryDark',\n  fontWeight: 'medium',\n}\n\nconst parts = ['container', 'icon', 'text']\n\nconst sizes = {\n  sm: {\n    container: {\n      fontSize: 'xs',\n      h: 24,\n      minW: 48,\n      spaceX: 4,\n    },\n    icon: {\n      size: 'xs',\n    },\n    text: {},\n  },\n  md: {\n    container: {\n      fontSize: 'sm',\n      h: 32,\n      minW: 64,\n      spaceX: 6,\n    },\n    icon: {\n      size: 'sm',\n    },\n    text: {},\n  },\n  lg: {\n    container: {\n      fontSize: 'md',\n      h: 40,\n      minW: 80,\n      spaceX: 8,\n    },\n    icon: {\n      size: 'md',\n    },\n    text: {},\n  },\n  xl: {\n    container: {\n      fontSize: 'lg',\n      h: 48,\n      minW: 96,\n      spaceX: 10,\n    },\n    icon: {\n      size: 'lg',\n    },\n    text: {},\n  },\n}\n\nconst variants: Record<string, Record<string, Record<string, string>>> = {\n  primaryDark: {\n    container: {\n      bg: 'buttonTypePrimaryDefaultBackgroundColorDark',\n      borderColor: 'buttonTypePrimaryDefaultBorderColorDark',\n      color: 'buttonTypePrimaryDefaultTextColorDark',\n      hoverBg: 'buttonTypePrimaryHoverBackgroundColorDark',\n      hoverBorderColor: 'buttonTypePrimaryHoverBorderColorDark',\n      hoverColor: 'buttonTypePrimaryHoverTextColorDark',\n      activeBg: 'buttonTypePrimaryActiveBackgroundColorDark',\n      activeBorderColor: 'buttonTypePrimaryActiveBorderColorDark',\n      activeColor: 'buttonTypePrimaryActiveTextColorDark',\n    },\n  },\n  primaryLight: {\n    container: {\n      bg: 'buttonTypePrimaryDefaultBackgroundColorLight',\n      borderColor: 'buttonTypePrimaryDefaultBorderColorLight',\n      color: 'buttonTypePrimaryDefaultTextColorLight',\n      hoverBg: 'buttonTypePrimaryHoverBackgroundColorLight',\n      hoverBorderColor: 'buttonTypePrimaryHoverBorderColorLight',\n      hoverColor: 'buttonTypePrimaryHoverTextColorLight',\n      activeBg: 'buttonTypePrimaryActiveBackgroundColorLight',\n      activeBorderColor: 'buttonTypePrimaryActiveBorderColorLight',\n      activeColor: 'buttonTypePrimaryActiveTextColorLight',\n    },\n  },\n  secondaryDark: {\n    container: {\n      bg: 'buttonTypeSecondaryDefaultBackgroundColorDark',\n      borderColor: 'buttonTypeSecondaryDefaultBorderColorDark',\n      color: 'buttonTypeSecondaryDefaultTextColorDark',\n      // discussed with Jesus, the decision was made on 2-may-2022 that OneDesign designers will update to VUI shade\n      // hover will change from 90 to 85\n      hoverBg: 'buttonTypeSecondaryHoverBackgroundColorDark',\n      hoverBorderColor: 'buttonTypeSecondaryHoverBorderColorDark',\n      hoverColor: 'buttonTypeSecondaryHoverTextColorDark',\n      // discussed with Jesus, the decision was made on 2-may-2022 that OneDesign designers will update to VUI shade\n      // active will change from 95% to 90%\n      activeBg: 'buttonTypeSecondaryActiveBackgroundColorDark',\n      activeBorderColor: 'buttonTypeSecondaryActiveBorderColorDark',\n      activeColor: 'buttonTypeSecondaryActiveTextColorDark',\n    },\n  },\n  secondaryLight: {\n    container: {\n      bg: 'buttonTypeSecondaryDefaultBackgroundColorLight',\n      borderColor: 'buttonTypeSecondaryDefaultBorderColorLight',\n      color: 'buttonTypeSecondaryDefaultTextColorLight',\n      hoverBg: 'buttonTypeSecondaryHoverBackgroundColorLight',\n      hoverBorderColor: 'buttonTypeSecondaryHoverBorderColorLight',\n      hoverColor: 'buttonTypeSecondaryHoverTextColorLight',\n      activeBg: 'buttonTypeSecondaryActiveBackgroundColorLight',\n      activeBorderColor: 'buttonTypeSecondaryActiveBorderColorLight',\n      activeColor: 'buttonTypeSecondaryActiveTextColorLight',\n    },\n  },\n  tertiaryDark: {\n    container: {\n      bg: 'buttonTypeTertiaryDefaultBackgroundColorDark',\n      borderColor: 'buttonTypeTertiaryDefaultBorderColorDark',\n      color: 'buttonTypeTertiaryDefaultTextColorDark',\n      hoverBg: 'buttonTypeTertiaryHoverBackgroundColorDark',\n      hoverBorderColor: 'buttonTypeTertiaryHoverBorderColorDark',\n      hoverColor: 'buttonTypeTertiaryHoverTextColorDark',\n      activeBg: 'buttonTypeTertiaryActiveBackgroundColorDark',\n      activeBorderColor: 'buttonTypeTertiaryActiveBorderColorDark',\n      activeColor: 'buttonTypeTertiaryActiveTextColorDark',\n    },\n  },\n  tertiaryLight: {\n    container: {\n      bg: 'buttonTypeTertiaryDefaultBackgroundColorLight',\n      borderColor: 'buttonTypeTertiaryDefaultBorderColorLight',\n      color: 'buttonTypeTertiaryDefaultTextColorLight',\n      hoverBg: 'buttonTypeTertiaryHoverBackgroundColorLight',\n      hoverBorderColor: 'buttonTypeTertiaryHoverBorderColorLight',\n      hoverColor: 'buttonTypeTertiaryHoverTextColorLight',\n      activeBg: 'buttonTypeTertiaryActiveBackgroundColorLight',\n      activeBorderColor: 'buttonTypeTertiaryActiveBorderColorLight',\n      activeColor: 'buttonTypeTertiaryActiveTextColorLight',\n    },\n  },\n  solidBlue: {\n    container: {\n      bg: 'seaBlue.main',\n      borderColor: 'seaBlue.main',\n      color: 'white',\n      disabledBg: 'darkBlue.75',\n      disabledBorderColor: 'darkBlue.75',\n      disabledColor: 'white',\n      // proper order next: hover, focus, active\n      hoverBg: 'seaBlue.20',\n      hoverBorderColor: 'seaBlue.20',\n      focusBg: 'seaBlue.main',\n      activeBg: 'seaBlue.35',\n      activeBorderColor: 'seaBlue.35',\n    },\n  },\n  blueOutlined: {\n    container: {\n      bg: 'white',\n      borderColor: 'seaBlue.main',\n      color: 'seaBlue.main',\n      disabledBg: 'white',\n      disabledBorderColor: 'darkBlue.75',\n      disabledColor: 'darkBlue.75',\n      hoverBg: 'skyBlue.85',\n      hoverBorderColor: 'seaBlue.35',\n      activeBg: 'skyBlue.90',\n      activeBorderColor: 'seaBlue.35',\n    },\n  },\n  blueText: {\n    container: {\n      bg: 'transparent',\n      borderColor: 'transparent',\n      color: 'seaBlue.main',\n      disabledBg: 'white',\n      disabledBorderColor: 'white',\n      disabledColor: 'darkBlue.75',\n      hoverBg: 'skyBlue.85',\n      hoverBorderColor: 'skyBlue.85',\n      focusBg: 'transparent',\n      activeBg: 'skyBlue.90',\n      activeBorderColor: 'skyBlue.90',\n    },\n  },\n  solidGreen: {\n    container: {\n      bg: 'landGreen.35',\n      borderColor: 'landGreen.35',\n      color: 'white',\n      disabledBg: 'landGreen.70',\n      disabledBorderColor: 'landGreen.70',\n      disabledColor: 'white',\n      hoverBg: 'landGreen.25',\n      hoverBorderColor: 'landGreen.25',\n      focusBg: 'landGreen.35',\n      activeBg: 'landGreen.41',\n      activeBorderColor: 'landGreen.41',\n    },\n  },\n  solidRed: {\n    container: {\n      bg: 'energyRed.45',\n      borderColor: 'energyRed.45',\n      color: 'white',\n      disabledBg: 'energyRed.80',\n      disabledBorderColor: 'energyRed.80',\n      disabledColor: 'white',\n      // proper order is important next: hover >  focus >  active\n      hoverBg: 'energyRed.35',\n      hoverBorderColor: 'energyRed.35',\n      focusBg: 'energyRed.45',\n      activeBg: 'energyRed.50',\n      activeBorderColor: 'energyRed.50',\n    },\n  },\n  // subtleBlue is an internal variant, used in notification; based on primaryDark\n  subtleBlue: {\n    container: {\n      bg: 'transparent',\n      borderColor: 'transparent',\n      color: 'seaBlue.main',\n      disabledBg: 'white',\n      disabledBorderColor: 'darkBlue.75',\n      disabledColor: 'darkBlue.75',\n      // proper order is important next: hover >  focus >  active\n      hoverBg: 'skyBlue.90',\n      hoverBorderColor: 'skyBlue.90',\n      focusBg: 'transparent',\n      activeBg: 'skyBlue.85',\n      activeBorderColor: 'skyBlue.85',\n    },\n  },\n  // subtleRed is an internal variant, used in notification; based on primaryDark\n  subtleRed: {\n    container: {\n      bg: 'transparent',\n      borderColor: 'transparent',\n      // proper order is important next: hover >  focus >  active\n      hoverBg: 'energyRed.90',\n      hoverBorderColor: 'energyRed.90',\n      focusBg: 'transparent',\n      activeBg: 'energyRed.85',\n      color: 'energyRed.45',\n    },\n  },\n  // subtleYellow is an internal variant, used in notification; based on primaryDark\n  subtleYellow: {\n    container: {\n      bg: 'transparent',\n      borderColor: 'transparent',\n      // proper order is important next: hover >  focus >  active\n      hoverBg: 'sunflower.70',\n      hoverBorderColor: 'sunflower.70',\n      focusBg: 'transparent',\n      activeBg: 'sunflower.65',\n      color: 'sunflower.15',\n    },\n  },\n  // subtleGreen is an internal variant, used in notification; based on primaryDark\n  subtleGreen: {\n    container: {\n      bg: 'transparent',\n      borderColor: 'transparent',\n      // proper order is important next: hover >  focus >  active\n      hoverBg: 'landGreen.90',\n      hoverBorderColor: 'landGreen.90',\n      focusBg: 'transparent',\n      activeBg: 'landGreen.85',\n      color: 'landGreen.30',\n    },\n  },\n  menuLight: {\n    container: {\n      bg: '#ffffff',\n      hoverBg: '#D3EEF8',\n      activeBg: '#E9F7FC',\n      disabledBg: '#F8F7F7',\n      borderColor: 'transparent',\n      hoverBorderColor: '#003591',\n      activeBorderColor: '#003591',\n      color: '#1A1A19',\n      hoverColor: '#1A1A19',\n      activeColor: '#003591',\n      disabledColor: '#908D89',\n      disabledBorderColor: 'transparent',\n      disabledOpacity: '1',\n    },\n  },\n  menuDark: {\n    container: {\n      bg: '#0F204B',\n      hoverBg: '#003591',\n      activeBg: '#0041B2',\n      disabledBg: '#0F204B',\n      borderColor: 'transparent',\n      hoverBorderColor: '#91FFB4',\n      activeBorderColor: '#91FFB4',\n      color: '#FFFFFF',\n      hoverColor: '#FFFFFF',\n      activeColor: '#91FFBA',\n      disabledColor: '#FFFFFF',\n      disabledBorderColor: 'transparent',\n      disabledOpacity: '1',\n    },\n  },\n}\n\n// buttonGroupDefault is an internal variant, used in ButtonGroup; based on secondaryDark\nvariants.buttonGroupDefault = {\n  container: {\n    ...variants.secondaryDark.container,\n    borderColor: 'sandstone.60',\n  },\n}\n\n// buttonGroupRounded is an internal variant\nvariants.buttonGroupRounded = {\n  container: {\n    bg: 'white',\n    borderColor: 'sandstone.79',\n    color: 'sandstone.10',\n    hoverBg: 'seaBlue.20',\n    hoverBorderColor: 'buttonTypePrimaryHoverBorderColorDark',\n    hoverColor: 'white',\n    activeBg: 'seaBlue.35',\n    activeBorderColor: 'buttonTypePrimaryActiveBorderColorDark',\n    activeColor: 'white',\n    borderRadius: 'round',\n    marginRight: '22px',\n  },\n}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  parts,\n  sizes,\n  variants,\n}\n"],"mappings":"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"}
+{"version":3,"file":"theme.js","names":[],"sources":["../../src/button/theme.ts"],"sourcesContent":["import type { ContainerStyles, IntentTokens } from './button.types'\n\n// ---------------------------------------------------------------------------\n// Generated variant approach\n//\n// Each intent defines its token references once.\n// Each hierarchy rule composes container styles from those tokens.\n// The 12 canonical variants are produced via Object.fromEntries — no\n// hand-written duplication; adding a new intent or hierarchy is a 1-line change.\n// ---------------------------------------------------------------------------\n\n/** Token references per semantic intent. */\nconst intentTokens: Record<string, IntentTokens> = {\n  brand: {\n    solid: 'var(--vui-action-brand-solid)',\n    solidInverse: 'var(--vui-action-brand-solid-inverse)',\n    solidHover: 'var(--vui-action-brand-solid-hover)',\n    solidPressed: 'var(--vui-action-brand-solid-pressed)',\n    subtleHover: 'var(--vui-action-brand-subtle-hover)',\n    subtlePressed: 'var(--vui-action-brand-subtle-pressed)',\n  },\n  contrast: {\n    solid: 'var(--vui-action-contrast-solid)',\n    solidInverse: 'var(--vui-action-contrast-solid-inverse)',\n    solidHover: 'var(--vui-action-contrast-solid-hover)',\n    solidPressed: 'var(--vui-action-contrast-solid-pressed)',\n    subtleHover: 'var(--vui-action-contrast-subtle-hover)',\n    subtlePressed: 'var(--vui-action-contrast-subtle-pressed)',\n  },\n  success: {\n    solid: 'var(--vui-action-success-solid)',\n    solidInverse: 'var(--vui-action-success-solid-inverse)',\n    solidHover: 'var(--vui-action-success-solid-hover)',\n    solidPressed: 'var(--vui-action-success-solid-pressed)',\n    subtleHover: 'var(--vui-action-success-subtle-hover)',\n    subtlePressed: 'var(--vui-action-success-subtle-pressed)',\n  },\n  danger: {\n    solid: 'var(--vui-action-danger-solid)',\n    solidInverse: 'var(--vui-action-danger-solid-inverse)',\n    solidHover: 'var(--vui-action-danger-solid-hover)',\n    solidPressed: 'var(--vui-action-danger-solid-pressed)',\n    subtleHover: 'var(--vui-action-danger-subtle-hover)',\n    subtlePressed: 'var(--vui-action-danger-subtle-pressed)',\n  },\n  warning: {\n    solid: 'var(--vui-action-yellow-solid)',\n    solidInverse: 'var(--vui-action-yellow-solid-inverse)',\n    solidHover: 'var(--vui-action-yellow-solid-hover)',\n    solidPressed: 'var(--vui-action-yellow-solid-pressed)',\n    subtleHover: 'var(--vui-action-yellow-subtle-hover)',\n    subtlePressed: 'var(--vui-action-yellow-subtle-pressed)',\n  },\n}\n\nconst TRANSPARENT = 'var(--vui-color-opacity-none)'\nconst DISABLED_BG = 'var(--vui-action-disabled-background)'\nconst DISABLED_FG = 'var(--vui-action-disabled-foreground)'\n\n/** Container styles per visual hierarchy, composed from intent tokens. */\nconst hierarchyRules: Record<string, (t: IntentTokens) => ContainerStyles> = {\n  primary: t => ({\n    bg: t.solid,\n    borderColor: t.solid,\n    color: t.solidInverse,\n    hoverBg: t.solidHover,\n    hoverBorderColor: t.solidHover,\n    activeBg: t.solidPressed,\n    activeBorderColor: t.solidPressed,\n    disabledBg: DISABLED_BG,\n    disabledBorderColor: DISABLED_BG,\n    disabledColor: DISABLED_FG,\n  }),\n  secondary: t => ({\n    bg: TRANSPARENT,\n    borderColor: t.solid,\n    color: t.solid,\n    hoverBg: t.subtleHover,\n    activeBg: t.subtlePressed,\n    disabledBg: TRANSPARENT,\n    disabledBorderColor: DISABLED_BG,\n    disabledColor: DISABLED_FG,\n  }),\n  tertiary: t => ({\n    bg: TRANSPARENT,\n    borderColor: TRANSPARENT,\n    color: t.solid,\n    hoverBg: t.subtleHover,\n    activeBg: t.subtlePressed,\n    disabledBg: TRANSPARENT,\n    disabledBorderColor: TRANSPARENT,\n    disabledColor: DISABLED_FG,\n  }),\n}\n\n// ---------------------------------------------------------------------------\n\nconst baseStyle = {}\n\nconst defaultProps = {\n  size: 'lg',\n  variant: 'primaryBrand',\n  fontWeight: 'medium',\n}\n\nconst parts = ['container', 'icon', 'text']\n\n// Padding model (applied in useButtonComputed.ts):\n// - Horizontal uses 2 tiers via theme tokens:\n//   text-only => paddingX\n//   icon+text => paddingXIcon (fallback: paddingX)\n//   icon-only => no padding (centering via fixed w=h)\n// - Vertical token paddingY is border-box aware at runtime:\n//   effective pt/pb = paddingY - borderWidth\nconst sizes = {\n  sm: {\n    container: {\n      fontSize: 'xs',\n      h: 24,\n      paddingX: 12,\n      paddingXIcon: 8,\n      paddingY: 5,\n      gapX: 8,\n    },\n    icon: {\n      fontSize: '12px',\n    },\n  },\n  md: {\n    container: {\n      fontSize: 'sm',\n      h: 32,\n      paddingX: 16,\n      paddingXIcon: 12,\n      paddingY: 8,\n      gapX: 8,\n    },\n    icon: {\n      fontSize: '16px',\n    },\n  },\n  lg: {\n    container: {\n      fontSize: 'md',\n      h: 40,\n      paddingX: 16,\n      paddingXIcon: 16,\n      paddingY: 10,\n      gapX: 8,\n    },\n    icon: {\n      fontSize: '16px',\n    },\n  },\n  xl: {\n    container: {\n      fontSize: 'lg',\n      h: 48,\n      paddingX: 16,\n      paddingXIcon: 16,\n      paddingY: 13,\n      gapX: 8,\n    },\n    icon: {\n      fontSize: '18px',\n    },\n  },\n}\n\nconst variants: Record<string, Record<string, ContainerStyles>> = Object.fromEntries(\n  Object.entries(intentTokens).flatMap(([intentKey, tokens]) =>\n    Object.entries(hierarchyRules).map(([hierarchyKey, buildContainer]) => [\n      `${hierarchyKey}${intentKey.charAt(0).toUpperCase()}${intentKey.slice(1)}`,\n      { container: buildContainer(tokens) },\n    ]),\n  ),\n)\n\n// Deprecated variant aliases for backward compatibility - will be removed in VUI 5.x\nvariants.primaryDark = variants.primaryBrand\nvariants.secondaryDark = variants.secondaryBrand\nvariants.tertiaryDark = variants.tertiaryBrand\nvariants.primaryLight = variants.primaryContrast\nvariants.secondaryLight = variants.secondaryContrast\nvariants.tertiaryLight = variants.tertiaryContrast\nvariants.solidGreen = variants.primarySuccess\nvariants.solidRed = variants.primaryDanger\n\n// Legacy blue variants (removed in VUI 4.0, added back as deprecated aliases)\nvariants.solidBlue = variants.primaryBrand\nvariants.blueOutlined = variants.secondaryBrand\nvariants.blueText = variants.tertiaryBrand\n\n// Component-specific subtle variants (removed in VUI 4.0, added back as deprecated aliases)\nvariants.subtleBlue = variants.secondaryBrand\nvariants.subtleRed = variants.secondaryDanger\nvariants.subtleGreen = variants.secondarySuccess\nvariants.subtleYellow = variants.secondaryWarning\n\n// Menu-specific variants (removed in VUI 4.0, added back as deprecated aliases)\nvariants.menuLight = variants.tertiaryBrand\nvariants.menuDark = variants.tertiaryBrand\n\n// buttonGroupDefault is an internal variant, used in ButtonGroup; based on secondaryBrand\nvariants.buttonGroupDefault = {\n  container: {\n    bg: 'var(--vui-color-opacity-none)',\n    borderColor: 'var(--vui-control-placeholder)',\n    color: 'var(--vui-action-brand-solid)',\n    hoverBg: 'var(--vui-action-brand-subtle-hover)',\n    activeBg: 'var(--vui-action-brand-subtle-pressed)',\n  },\n}\n\n// buttonGroupRounded is an internal variant\nvariants.buttonGroupRounded = {\n  container: {\n    bg: 'var(--vui-background-default)',\n    borderColor: 'var(--vui-utility-border-subtle)',\n    color: 'var(--vui-foreground-default)',\n    hoverBg: 'var(--vui-action-brand-subtle-hover)',\n    hoverBorderColor: 'var(--vui-action-brand-subtle-hover)',\n    hoverColor: 'var(--vui-action-brand-subtle-inverse)',\n    activeBg: 'var(--vui-action-brand-solid-pressed)',\n    activeBorderColor: 'var(--vui-action-brand-solid-pressed)',\n    activeColor: 'var(--vui-action-brand-solid-inverse)',\n    borderRadius: '1000',\n    marginRight: 'var(--vui-button-group-rounded-spacing, 22px)',\n  },\n}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  parts,\n  sizes,\n  variants,\n}\n"],"mappings":"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"}

package/dist/button/useButtonComputed.js

@@ -0,0 +1,108 @@
+import { activeClassName } from "../utils/consts.js";
+import { filterUndefined } from "../utils/object.js";
+import { cs } from "../utils/styles.js";
+import fontSizes_default from "../theme/foundations/fontSizes.js";
+import { useStyleConfig, useTheme } from "../core/theme.js";
+import { DEFAULT_BORDER_WIDTH, DEFAULT_BOX_SHADOW } from "./consts.js";
+import { extractNumericValue, resolveVariantKey } from "./utils.js";
+import { useMemo } from "react";
+
+//#region src/button/useButtonComputed.ts
+/**
+* Consolidated hook for computing all button styles and props.
+* Combines theme resolution, spacing, state-based styles, and className generation.
+* Reduces memoization overhead by computing all derived values in a single pass.
+*
+* @param options - See {@link ButtonComputedOptions} for individual field descriptions.
+* @returns See {@link ComputedResult}
+*/
+const useButtonComputed = ({ size, variant, intentProp, borderWidthProp, disabled, isActive, isIconOnly, isRound, isElevated, hasStartIcon, hasEndIcon, isFullWidth, className, variantProp }) => {
+	const theme = useTheme();
+	const styles = useStyleConfig("Button", {
+		size,
+		...variant
+	}) || {};
+	const defaultStyles = useStyleConfig("Button", { variant: resolveVariantKey("primary", intentProp ?? "brand") }) || {};
+	return useMemo(() => {
+		const requestedContainer = styles.container || {};
+		const container = requestedContainer.bg || requestedContainer.borderColor || requestedContainer.color ? requestedContainer : defaultStyles.container || {};
+		const { borderWidth = DEFAULT_BORDER_WIDTH, paddingX = 16, paddingXIcon, paddingY = 12, gapX = 8, h = 40, fontSize = "md", ...buttonStyles } = container;
+		const normalizedStyles = {
+			...buttonStyles,
+			activeColor: buttonStyles.activeColor ?? buttonStyles.color,
+			hoverColor: buttonStyles.hoverColor ?? buttonStyles.color
+		};
+		const border = extractNumericValue(borderWidthProp) || borderWidth || DEFAULT_BORDER_WIDTH;
+		const py = paddingY - border;
+		const pxForSide = (hasIcon) => {
+			if (isIconOnly) return 0;
+			return hasIcon ? paddingXIcon ?? paddingX : paddingX;
+		};
+		const spacing = {
+			borderWidth: border,
+			pl: `var(--vui-button-px-start, ${pxForSide(hasStartIcon)}px)`,
+			pr: `var(--vui-button-px-end,   ${pxForSide(hasEndIcon)}px)`,
+			pt: `var(--vui-button-py-start, ${isIconOnly ? 0 : py}px)`,
+			pb: `var(--vui-button-py-end,   ${isIconOnly ? 0 : py}px)`,
+			gap: `var(--vui-button-gap,     ${gapX}px)`
+		};
+		const disabledProps = disabled ? filterUndefined({
+			"aria-disabled": disabled,
+			bg: container.disabledBg ?? void 0,
+			borderColor: container.disabledBorderColor ?? void 0,
+			color: container.disabledColor ?? void 0,
+			hoverBg: container.disabledBg ?? normalizedStyles.bg,
+			hoverBorderColor: container.disabledBorderColor ?? normalizedStyles.borderColor,
+			hoverColor: container.disabledColor ?? normalizedStyles.color,
+			activeBg: container.disabledBg ?? normalizedStyles.bg,
+			cursor: "not-allowed"
+		}) : {};
+		const activeProps = isActive ? filterUndefined({
+			bg: container.activeBg,
+			borderColor: container.activeBorderColor,
+			color: container.activeColor,
+			hoverBg: container.activeBg,
+			hoverBorderColor: container.activeBorderColor,
+			hoverColor: container.activeColor,
+			cursor: "default"
+		}) : {};
+		const resolvedBoxShadow = theme.shadows[DEFAULT_BOX_SHADOW] ?? DEFAULT_BOX_SHADOW;
+		const resolvedFontSize = fontSizes_default[fontSize] ?? fontSize;
+		return {
+			buttonStyles: normalizedStyles,
+			spacing,
+			disabledProps,
+			activeProps,
+			aliasedProps: filterUndefined({
+				borderRadius: isRound ? `var(--vui-button-border-radius, 9999px)` : `var(--vui-button-border-radius, ${container.borderRadius || 0}px)`,
+				boxShadow: isElevated ? `var(--vui-button-box-shadow, ${resolvedBoxShadow})` : void 0,
+				fontSize: `var(--vui-button-font-size, ${resolvedFontSize}px)`,
+				h: `var(--vui-button-h, ${h}px)`,
+				minW: isFullWidth ? void 0 : `var(--vui-button-min-w, auto)`,
+				w: isIconOnly ? `var(--vui-button-w, ${h}px)` : isFullWidth ? "100%" : void 0
+			}),
+			buttonClassName: cs("vui-button", className, isActive && activeClassName, variantProp ? `vui-button-variant-${variantProp}` : void 0, intentProp ? `vui-button-intent-${intentProp}` : void 0)
+		};
+	}, [
+		styles,
+		defaultStyles,
+		theme,
+		intentProp,
+		borderWidthProp,
+		hasStartIcon,
+		hasEndIcon,
+		isIconOnly,
+		disabled,
+		isActive,
+		isRound,
+		isElevated,
+		isFullWidth,
+		className,
+		variantProp
+	]);
+};
+
+//#endregion
+export { useButtonComputed };
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
+//# sourceMappingURL=useButtonComputed.js.map

package/dist/button/useButtonComputed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useButtonComputed.js","names":["fontSizes"],"sources":["../../src/button/useButtonComputed.ts"],"sourcesContent":["import { useMemo } from 'react'\n\nimport { useStyleConfig, useTheme } from '../core'\nimport { fontSizes } from '../theme'\nimport { activeClassName, cs, filterUndefined } from '../utils'\nimport type { ButtonComputedOptions, ComputedResult } from './button.types'\nimport { DEFAULT_BORDER_WIDTH, DEFAULT_BOX_SHADOW } from './consts'\nimport { extractNumericValue, resolveVariantKey } from './utils'\n\n/**\n * Consolidated hook for computing all button styles and props.\n * Combines theme resolution, spacing, state-based styles, and className generation.\n * Reduces memoization overhead by computing all derived values in a single pass.\n *\n * @param options - See {@link ButtonComputedOptions} for individual field descriptions.\n * @returns See {@link ComputedResult}\n */\nexport const useButtonComputed = ({\n  size,\n  variant,\n  intentProp,\n  borderWidthProp,\n  disabled,\n  isActive,\n  isIconOnly,\n  isRound,\n  isElevated,\n  hasStartIcon,\n  hasEndIcon,\n  isFullWidth,\n  className,\n  variantProp,\n}: ButtonComputedOptions): ComputedResult => {\n  const theme = useTheme()\n  const styles = useStyleConfig('Button', { size, ...variant }) || {}\n\n  // Fallback to default variant — resolves correctly with the two-prop API.\n  // resolveVariantKey with a non-falsy variant always returns a string; ?? 'primaryBrand' is unreachable.\n  const fallbackVariant = resolveVariantKey('primary', intentProp ?? 'brand')!\n  const defaultStyles = useStyleConfig('Button', { variant: fallbackVariant }) || {}\n\n  return useMemo(() => {\n    // Theme and style resolution — use default styles if container is empty or has no bg color\n    const requestedContainer = styles.container || {}\n    const hasValidStyles = requestedContainer.bg || requestedContainer.borderColor || requestedContainer.color\n    const container = hasValidStyles ? requestedContainer : defaultStyles.container || {}\n    const {\n      borderWidth = DEFAULT_BORDER_WIDTH,\n      paddingX = 16,\n      paddingXIcon,\n      paddingY = 12,\n      gapX = 8,\n      h = 40,\n      fontSize = 'md',\n      ...buttonStyles\n    } = container\n\n    // Normalize button styles with fallbacks for text colors only\n    const normalizedStyles = {\n      ...buttonStyles,\n      activeColor: buttonStyles.activeColor ?? buttonStyles.color,\n      hoverColor: buttonStyles.hoverColor ?? buttonStyles.color,\n    }\n\n    // Spacing calculations\n    const border = extractNumericValue(borderWidthProp) || borderWidth || DEFAULT_BORDER_WIDTH\n    const py = paddingY - border\n\n    // Horizontal padding — two tiers (border handled by border-box, icon-only uses no padding):\n    const pxForSide = (hasIcon: boolean) => {\n      if (isIconOnly) return 0\n      return hasIcon ? (paddingXIcon ?? paddingX) : paddingX\n    }\n\n    const spacing = {\n      borderWidth: border,\n      pl: `var(--vui-button-px-start, ${pxForSide(hasStartIcon)}px)`,\n      pr: `var(--vui-button-px-end,   ${pxForSide(hasEndIcon)}px)`,\n      pt: `var(--vui-button-py-start, ${isIconOnly ? 0 : py}px)`,\n      pb: `var(--vui-button-py-end,   ${isIconOnly ? 0 : py}px)`,\n      gap: `var(--vui-button-gap,     ${gapX}px)`,\n    }\n\n    // Disabled state props with CSS variable overrides\n    // Theme tokens (like landGreen.70) are resolved by styled system, then wrapped in CSS variables\n    // This allows both theme resolution and CSS variable overrides to work together\n    const disabledProps = disabled\n      ? filterUndefined({\n          'aria-disabled': disabled,\n          bg: container.disabledBg ?? undefined,\n          borderColor: container.disabledBorderColor ?? undefined,\n          color: container.disabledColor ?? undefined,\n          hoverBg: container.disabledBg ?? normalizedStyles.bg,\n          hoverBorderColor: container.disabledBorderColor ?? normalizedStyles.borderColor,\n          hoverColor: container.disabledColor ?? normalizedStyles.color,\n          activeBg: container.disabledBg ?? normalizedStyles.bg,\n          cursor: 'not-allowed',\n        })\n      : {}\n\n    // Active state props - prevents hover effects when button is active\n    const activeProps = isActive\n      ? filterUndefined({\n          bg: container.activeBg,\n          borderColor: container.activeBorderColor,\n          color: container.activeColor,\n          hoverBg: container.activeBg,\n          hoverBorderColor: container.activeBorderColor,\n          hoverColor: container.activeColor,\n          cursor: 'default',\n        })\n      : {}\n\n    // Aliased props (computed properties)\n    const resolvedBoxShadow = theme.shadows[DEFAULT_BOX_SHADOW as keyof typeof theme.shadows] ?? DEFAULT_BOX_SHADOW\n    const resolvedFontSize = fontSizes[fontSize as keyof typeof fontSizes] ?? fontSize\n    const aliasedProps = filterUndefined({\n      borderRadius: isRound\n        ? `var(--vui-button-border-radius, 9999px)`\n        : `var(--vui-button-border-radius, ${container.borderRadius || 0}px)`,\n      boxShadow: isElevated ? `var(--vui-button-box-shadow, ${resolvedBoxShadow})` : undefined,\n      fontSize: `var(--vui-button-font-size, ${resolvedFontSize}px)`,\n      h: `var(--vui-button-h, ${h}px)`,\n      minW: isFullWidth ? undefined : `var(--vui-button-min-w, auto)`,\n      w: isIconOnly ? `var(--vui-button-w, ${h}px)` : isFullWidth ? '100%' : undefined,\n    })\n\n    // Class name generation\n    const buttonClassName = cs(\n      'vui-button',\n      className,\n      isActive && activeClassName,\n      variantProp ? `vui-button-variant-${variantProp}` : undefined,\n      intentProp ? `vui-button-intent-${intentProp}` : undefined,\n    )\n\n    return {\n      buttonStyles: normalizedStyles,\n      spacing,\n      disabledProps,\n      activeProps,\n      aliasedProps,\n      buttonClassName,\n    }\n  }, [\n    styles,\n    defaultStyles,\n    theme,\n    intentProp,\n    borderWidthProp,\n    hasStartIcon,\n    hasEndIcon,\n    isIconOnly,\n    disabled,\n    isActive,\n    isRound,\n    isElevated,\n    isFullWidth,\n    className,\n    variantProp,\n  ])\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAiBA,MAAa,qBAAqB,EAChC,MACA,SACA,YACA,iBACA,UACA,UACA,YACA,SACA,YACA,cACA,YACA,aACA,WACA,kBAC2C;CAC3C,MAAM,QAAQ,UAAU;CACxB,MAAM,SAAS,eAAe,UAAU;EAAE;EAAM,GAAG;EAAS,CAAC,IAAI,EAAE;CAKnE,MAAM,gBAAgB,eAAe,UAAU,EAAE,SADzB,kBAAkB,WAAW,cAAc,QAAQ,EACA,CAAC,IAAI,EAAE;AAElF,QAAO,cAAc;EAEnB,MAAM,qBAAqB,OAAO,aAAa,EAAE;EAEjD,MAAM,YADiB,mBAAmB,MAAM,mBAAmB,eAAe,mBAAmB,QAClE,qBAAqB,cAAc,aAAa,EAAE;EACrF,MAAM,EACJ,cAAc,sBACd,WAAW,IACX,cACA,WAAW,IACX,OAAO,GACP,IAAI,IACJ,WAAW,MACX,GAAG,iBACD;EAGJ,MAAM,mBAAmB;GACvB,GAAG;GACH,aAAa,aAAa,eAAe,aAAa;GACtD,YAAY,aAAa,cAAc,aAAa;GACrD;EAGD,MAAM,SAAS,oBAAoB,gBAAgB,IAAI,eAAe;EACtE,MAAM,KAAK,WAAW;EAGtB,MAAM,aAAa,YAAqB;AACtC,OAAI,WAAY,QAAO;AACvB,UAAO,UAAW,gBAAgB,WAAY;;EAGhD,MAAM,UAAU;GACd,aAAa;GACb,IAAI,8BAA8B,UAAU,aAAa,CAAC;GAC1D,IAAI,8BAA8B,UAAU,WAAW,CAAC;GACxD,IAAI,8BAA8B,aAAa,IAAI,GAAG;GACtD,IAAI,8BAA8B,aAAa,IAAI,GAAG;GACtD,KAAK,6BAA6B,KAAK;GACxC;EAKD,MAAM,gBAAgB,WAClB,gBAAgB;GACd,iBAAiB;GACjB,IAAI,UAAU,cAAc;GAC5B,aAAa,UAAU,uBAAuB;GAC9C,OAAO,UAAU,iBAAiB;GAClC,SAAS,UAAU,cAAc,iBAAiB;GAClD,kBAAkB,UAAU,uBAAuB,iBAAiB;GACpE,YAAY,UAAU,iBAAiB,iBAAiB;GACxD,UAAU,UAAU,cAAc,iBAAiB;GACnD,QAAQ;GACT,CAAC,GACF,EAAE;EAGN,MAAM,cAAc,WAChB,gBAAgB;GACd,IAAI,UAAU;GACd,aAAa,UAAU;GACvB,OAAO,UAAU;GACjB,SAAS,UAAU;GACnB,kBAAkB,UAAU;GAC5B,YAAY,UAAU;GACtB,QAAQ;GACT,CAAC,GACF,EAAE;EAGN,MAAM,oBAAoB,MAAM,QAAQ,uBAAqD;EAC7F,MAAM,mBAAmBA,kBAAU,aAAuC;AAqB1E,SAAO;GACL,cAAc;GACd;GACA;GACA;GACA,cAzBmB,gBAAgB;IACnC,cAAc,UACV,4CACA,mCAAmC,UAAU,gBAAgB,EAAE;IACnE,WAAW,aAAa,gCAAgC,kBAAkB,KAAK;IAC/E,UAAU,+BAA+B,iBAAiB;IAC1D,GAAG,uBAAuB,EAAE;IAC5B,MAAM,cAAc,SAAY;IAChC,GAAG,aAAa,uBAAuB,EAAE,OAAO,cAAc,SAAS;IACxE,CAAC;GAiBA,iBAdsB,GACtB,cACA,WACA,YAAY,iBACZ,cAAc,sBAAsB,gBAAgB,QACpD,aAAa,qBAAqB,eAAe,OAClD;GASA;IACA;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC"}

package/dist/button/utils.d.ts

@@ -0,0 +1,19 @@
+import { ButtonIntent, ButtonVariant } from "./button.types.js";
+
+//#region src/button/utils.d.ts
+/**
+ * Converts a two-prop variant+intent pair into the combined theme key used
+ * internally (e.g. `resolveVariantKey('primary','brand') => 'primaryBrand'`).
+ * When `intent` is omitted, `'brand'` is used as the default
+ * (e.g. `resolveVariantKey('primary') => 'primaryBrand'`).
+ *
+ * If `variant` is already a fully-qualified legacy key (e.g. `'primaryBrand'`)
+ * it is returned unchanged so the new API is backward-compatible.
+ *
+ * Returns `'primaryBrand'` (the default variant) when `variant` is absent.
+ */
+declare const resolveVariantKey: (variant: ButtonVariant | string | undefined, intent: ButtonIntent | string | undefined) => string | undefined;
+//#endregion
+export { resolveVariantKey };
+
+//# sourceMappingURL=utils.d.ts.map

package/dist/button/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","names":[],"sources":["../../src/button/utils.ts"],"mappings":";;;;;;;;;;;;;;cA0Ba,iBAAA,GACX,OAAA,EAAS,aAAA,uBACT,MAAA,EAAQ,YAAA"}