@veracity/vui 4.1.0 → 5.0.0-alpha.0

package/dist/button/button.js

@@ -1,286 +1,196 @@
-import { isReactText, isString } from "../utils/assertion.js";
-import { activeClassName } from "../utils/consts.js";
 import { filterUndefined } from "../utils/object.js";
-import { cs } from "../utils/styles.js";
-import { useStyleConfig } from "../core/theme.js";
 import styled from "../core/styled.js";
 import vui from "../core/vui.js";
 import { useButtonGroupContext } from "../buttonGroup/context.js";
 import { ButtonProvider } from "./context.js";
 import ButtonIcon from "./buttonIcon.js";
 import ButtonText from "./buttonText.js";
-import { buttonStateMapping, loadingIconProps } from "./consts.js";
-import { Fragment, useCallback, useMemo } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { CSS_VAR_MAPPINGS } from "./consts.js";
+import { renderButtonIcon, renderContent } from "./buttonHelpers.js";
+import { resolveVariantKey, wrapWithVars } from "./utils.js";
+import { useButtonComputed } from "./useButtonComputed.js";
+import { useEffect, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/button/button.tsx
-const DEFAULT_BORDER_WIDTH = 1;
-const DEFAULT_BOX_SHADOW = "md";
-const DEFAULT_DISABLED_OPACITY = .5;
 const BUTTON_TYPE = "button";
 const FOCUS_RING_SIZE = 3;
-const ContentWrapper = styled.span`
-  visibility: hidden;
-`;
-const StateWrapper = styled.span`
-  bottom: 0;
-  display: flex;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-`;
 const ButtonBase = styled.buttonBox`
   align-items: center;
   display: inline-flex;
   flex-shrink: 0;
-  font-weight: medium;
+  font-weight: var(--vui-button-font-weight, 500);
   justify-content: center;
-  line-height: normal;
+  line-height: 1.2;
   overflow: hidden;
   position: relative;
-  transition-duration: fast;
+  transition-duration: var(--vui-button-transition-duration, fast);
   user-select: none;
   width: fit-content;
-
-  &.vui-button-variant-menuLight.vui-button-variant-menuLight.vui-active:hover {
-    background-color: #d3eef8;
-    color: #003591;
-    border-color-left: #003591;
-  }
-  &.vui-button-variant-menuDark.vui-button-variant-menuDark.vui-active:hover {
-    background-color: #003591;
-    color: #91ffba;
-    border-color-left: #91ffba;
-  }
-  &.vui-button-variant-menuDark.vui-button-variant-menuDark:focus,
-  &.vui-button-variant-menuDark.vui-button-variant-menuDark:focus-visible,
-  &.vui-button-variant-menuLight.vui-button-variant-menuLight:focus,
-  &.vui-button-variant-menuLight.vui-button-variant-menuLight:focus-visible {
-    box-shadow: none;
-    outline: none;
-    border-bottom: 0 solid transparent;
-  }
-  &.vui-button-variant-menuDark.vui-button-variant-menuDark.focusAsBorder:focus,
-  &.vui-button-variant-menuDark.vui-button-variant-menuDark.focusAsBorder:focus-visible,
-  &.vui-button-variant-menuLight.vui-button-variant-menuLight.focusAsBorder:focus,
-  &.vui-button-variant-menuLight.vui-button-variant-menuLight.focusAsBorder:focus-visible {
-    transition: border-bottom 0s linear;
-    border-bottom: 3px solid #d3eef8;
-  }
 `;
-const useButtonStyles = (mergedProps, variant) => {
-	const styles = useStyleConfig("Button", {
-		...mergedProps,
-		...variant
-	}) || {};
-	return useMemo(() => {
-		const { borderWidth = DEFAULT_BORDER_WIDTH, h = 32, spaceX = 0, ...buttonStyles } = styles.container || {};
-		return {
-			styles,
-			borderWidth,
-			h,
-			spaceX,
-			buttonStyles
-		};
-	}, [mergedProps, variant]);
-};
-const extractNumericValue = (value) => {
-	if (typeof value === "number") return value;
-	if (typeof value === "string") {
-		const parsed = parseInt(value, 10);
-		return isNaN(parsed) ? DEFAULT_BORDER_WIDTH : parsed;
-	}
-	return DEFAULT_BORDER_WIDTH;
-};
-const useSpacingProps = (borderWidthProp, borderWidth, spaceX, icon, iconLeft, iconRight, isLoading, isSplit) => {
-	return useMemo(() => {
-		const border = extractNumericValue(borderWidthProp) || borderWidth || DEFAULT_BORDER_WIDTH;
-		const spaceXItem = spaceX - border;
-		const spaceXText = spaceX * 2 - border;
-		return {
-			border,
-			iconLeftMr: `${spaceXItem + 1}px`,
-			iconRightMl: isSplit ? "auto" : `${spaceXItem + 1}px`,
-			pl: `${icon || iconLeft || isLoading ? spaceXItem : spaceXText}px`,
-			pr: `${icon || iconRight ? spaceXItem : spaceXText}px`
-		};
-	}, [
-		borderWidthProp,
-		borderWidth,
-		spaceX,
-		icon,
-		iconLeft,
-		iconRight,
-		isLoading,
-		isSplit
-	]);
-};
-const useDisabledProps = (disabled, styles) => {
-	return useMemo(() => disabled ? {
-		"aria-disabled": disabled,
-		disabledBg: styles?.container?.disabledBg ?? "bg",
-		disabledBorderColor: styles?.container?.disabledBorderColor ?? "borderColor",
-		disabledColor: styles?.container?.disabledColor ?? "color",
-		hoverBg: styles?.container?.disabledBg ?? "bg",
-		hoverBorderColor: styles?.container?.disabledBorderColor ?? "borderColor",
-		hoverColor: styles?.container?.disabledColor ?? "color",
-		activeBg: styles?.container?.disabledBg ?? "bg",
-		cursor: "not-allowed",
-		opacity: styles?.container?.disabledOpacity ?? DEFAULT_DISABLED_OPACITY
-	} : {}, [disabled, styles?.container]);
-};
-const useActiveProps = (isActive, styles) => {
-	return useMemo(() => isActive ? filterUndefined({
-		bg: styles?.container?.activeBg,
-		borderBg: styles?.container?.activeBorderBg,
-		color: styles?.container?.activeColor
-	}) : {}, [isActive, styles?.container]);
-};
-const useAliasedProps = (isRound, h, styles, isElevated, icon, hasState, isFullWidth) => {
-	return useMemo(() => filterUndefined({
-		borderRadius: isRound ? h / 2 : styles?.container?.borderRadius || 0,
-		boxShadow: isElevated ? DEFAULT_BOX_SHADOW : void 0,
-		minW: icon ? 0 : void 0,
-		pointerEvents: hasState ? "none" : void 0,
-		w: isFullWidth ? "100%" : void 0
-	}), [
-		isRound,
-		h,
-		styles?.container?.borderRadius,
-		isElevated,
-		icon,
-		hasState,
-		isFullWidth
-	]);
-};
-const useButtonClassName = (className, isActive, variantProp) => {
-	return useMemo(() => cs("vui-button", className, isActive && activeClassName, variantProp ? `vui-button-variant-${variantProp}` : void 0), [
-		className,
-		isActive,
-		variantProp
-	]);
-};
-const useIconRenderer = (icon, iconLeft, iconRight, isLoading, spacingProps, children, text, isTruncated) => {
-	return useMemo(() => ({
-		main: isString(icon) ? /* @__PURE__ */ jsx(ButtonIcon, { name: icon }) : icon,
-		left: isLoading ? /* @__PURE__ */ jsx(ButtonIcon, {
-			mr: spacingProps.iconLeftMr,
-			...loadingIconProps
-		}) : isString(iconLeft) ? /* @__PURE__ */ jsx(ButtonIcon, {
-			mr: spacingProps.iconLeftMr,
-			name: iconLeft
-		}) : iconLeft,
-		right: isString(iconRight) ? /* @__PURE__ */ jsx(ButtonIcon, {
-			ml: !children && !text ? 0 : spacingProps.iconRightMl,
-			name: iconRight
-		}) : iconRight,
-		content: children ?? (isReactText(text) ? /* @__PURE__ */ jsx(ButtonText, {
-			isTruncated,
-			text
-		}) : text)
-	}), [
-		icon,
-		iconLeft,
-		iconRight,
-		isLoading,
-		spacingProps,
-		children,
-		text,
-		isTruncated
-	]);
-};
+const StatusAnnouncer = styled.spanBox`
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+`;
 /**
-* Triggers given actions on click. Supports multiple states, sizes and variants.
+* Button Component
 *
-* Comes with additional props for extra behavior, like loading, disabled or elevated.
+* A versatile button component that supports multiple states, sizes, variants, and behaviors.
+* Part of the VUI design system with built-in accessibility features.
 *
-* Exposes some props to the children via context.
 */
 const Button = vui((props, ref) => {
-	const mergedProps = {
+	const { borderWidth: borderWidthProp, children, className, colorScheme, disabled, dropDownIcon = "uiAngleDown", intent: intentProp, isSplit: _isSplit, icon, startIcon, iconLeft, endIcon: endIconProp, iconRight, isActive = false, isDropDown, isElevated = false, isFullWidth = false, isLoading = false, loadingText = "Loading", isRound = false, isTruncated = false, size, text, title, variant: variantProp, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, onClick, ...rest } = {
 		...useButtonGroupContext(),
 		...props
 	};
-	const { borderWidth: borderWidthProp, children, className, colorScheme, disabled, dropDownIcon = "falAngleDown", icon, iconLeft, iconRight: iconRightProp, isActive, isDropDown, isElevated, isFullWidth, isLoading, isRound, isSplit, isTruncated, size, state = "", stateMapping, text, title, variant: variantProp, ...rest } = mergedProps;
-	const hasState = useMemo(() => Boolean(state) && state !== "idle", [state]);
-	const states = useMemo(() => ({
-		...buttonStateMapping,
-		...stateMapping
-	}), [stateMapping]);
-	const stateData = useMemo(() => states[state] ?? {}, [states, state]);
-	const { iconProps: stateIconProps, ...stateProps } = stateData;
-	const iconRight = useMemo(() => isDropDown ? "falAngleDown" : iconRightProp, [isDropDown, iconRightProp]);
-	const variant = useMemo(() => filterUndefined({ variant: stateData?.variant ?? variantProp }), [stateData?.variant, variantProp]);
-	const { styles, borderWidth, h, spaceX, buttonStyles } = useButtonStyles(mergedProps, variant);
-	const spacingProps = useSpacingProps(borderWidthProp, borderWidth, spaceX, icon, iconLeft, iconRight, isLoading ?? false, isSplit ?? false);
-	const disabledProps = useDisabledProps(disabled ?? false, styles);
-	const isActiveProps = useActiveProps(isActive ?? false, styles);
-	const aliasedProps = useAliasedProps(isRound ?? false, h, styles, isElevated ?? false, icon, hasState, isFullWidth ?? false);
-	const buttonClassName = useButtonClassName(className, isActive ?? false, variantProp);
-	const IconRenderer = useIconRenderer(icon, iconLeft, iconRight, isLoading ?? false, spacingProps, children, text, isTruncated ?? false);
+	const hasTextContent = Boolean(children || text);
+	const isIconOnly = !children && !text && !isDropDown;
+	const resolvedStartIcon = startIcon ?? iconLeft;
+	const resolvedEndIconProp = endIconProp ?? iconRight;
+	const hasStartIcon = Boolean(resolvedStartIcon || icon || isLoading);
+	const hasEndIcon = Boolean(resolvedEndIconProp || isDropDown);
+	const endIcon = isDropDown ? dropDownIcon : resolvedEndIconProp;
+	const variantForTheme = useMemo(() => filterUndefined({ variant: resolveVariantKey(variantProp, intentProp) }), [variantProp, intentProp]);
+	const computed = useButtonComputed({
+		size,
+		variant: variantForTheme,
+		intentProp,
+		borderWidthProp,
+		disabled: disabled ?? false,
+		isActive,
+		isIconOnly,
+		isRound,
+		isElevated,
+		hasStartIcon,
+		hasEndIcon,
+		isFullWidth,
+		className,
+		variantProp
+	});
 	const contextValue = useMemo(() => filterUndefined({
 		disabled,
 		size,
-		variant: variant.variant
+		variant: variantForTheme.variant,
+		intent: intentProp,
+		isDropDown,
+		hasTextContent,
+		isLoading
 	}), [
 		disabled,
 		size,
-		variant.variant
+		variantForTheme.variant,
+		intentProp,
+		isDropDown,
+		hasTextContent,
+		isLoading
+	]);
+	const finalVariant = variantForTheme.variant;
+	const borderWidth = computed.spacing.borderWidth;
+	const plValue = computed.spacing.pl;
+	const prValue = computed.spacing.pr;
+	const ptValue = computed.spacing.pt;
+	const pbValue = computed.spacing.pb;
+	const gapValue = computed.spacing.gap;
+	const propsWithVars = useMemo(() => ({
+		...wrapWithVars(computed.buttonStyles, CSS_VAR_MAPPINGS.base),
+		...wrapWithVars(computed.activeProps, CSS_VAR_MAPPINGS.active),
+		...wrapWithVars(computed.disabledProps, CSS_VAR_MAPPINGS.disabled)
+	}), [
+		computed.buttonStyles,
+		computed.activeProps,
+		computed.disabledProps
+	]);
+	const finalProps = {
+		...useMemo(() => ({
+			borderWidth: `var(--vui-button-border-width, ${borderWidth}px)`,
+			className: computed.buttonClassName,
+			disabled,
+			"aria-label": isLoading && isIconOnly ? loadingText || "Loading" : ariaLabel,
+			"aria-labelledby": ariaLabelledby,
+			"aria-busy": isLoading ? true : void 0,
+			"aria-disabled": isLoading ? true : void 0,
+			"aria-haspopup": isDropDown ? true : void 0,
+			focusRing: FOCUS_RING_SIZE,
+			gap: gapValue,
+			pl: plValue,
+			pr: prValue,
+			pt: ptValue,
+			pb: pbValue,
+			onClick: isLoading ? void 0 : onClick,
+			pointerEvents: isLoading ? "none" : void 0,
+			ref,
+			title: title || void 0,
+			type: BUTTON_TYPE,
+			variant: finalVariant,
+			...propsWithVars,
+			...computed.aliasedProps
+		}), [
+			borderWidth,
+			plValue,
+			prValue,
+			ptValue,
+			pbValue,
+			gapValue,
+			computed.buttonClassName,
+			computed.aliasedProps,
+			disabled,
+			ariaLabel,
+			ariaLabelledby,
+			isDropDown,
+			ref,
+			title,
+			isLoading,
+			onClick,
+			finalVariant,
+			isIconOnly,
+			loadingText,
+			propsWithVars
+		]),
+		...rest
+	};
+	useEffect(() => {
+		if (_isSplit !== void 0) console.warn("[Button] The `isSplit` prop is deprecated and has no effect. It will be removed in VUI 5.x.");
+		if (colorScheme !== void 0) console.warn("[Button] `colorScheme` is deprecated. Use `variant` + `intent` instead.");
+		if (iconLeft !== void 0) console.warn("[Button] `iconLeft` is deprecated. Use `startIcon` instead.");
+		if (iconRight !== void 0) console.warn("[Button] `iconRight` is deprecated. Use `endIcon` instead.");
+		if (!children && !text && !Boolean(ariaLabel || ariaLabelledby || title)) console.warn("[Button] Icon-only buttons must have an accessible label. Add `aria-label`, `aria-labelledby`, or `title` to describe the button action.");
+	}, [
+		_isSplit,
+		colorScheme,
+		iconLeft,
+		iconRight,
+		children,
+		text,
+		title,
+		ariaLabel,
+		ariaLabelledby
 	]);
-	const Content = useMemo(() => hasState ? ContentWrapper : Fragment, [hasState]);
-	const ariaLabel = useMemo(() => title || "", [title]);
-	const handleStateClick = useCallback((e) => {
-		e.stopPropagation();
-	}, []);
-	return /* @__PURE__ */ jsx(ButtonProvider, {
+	const leftIcon = renderButtonIcon(resolvedStartIcon ?? icon, "left", isLoading);
+	const rightIcon = renderButtonIcon(endIcon, "right");
+	const contentElement = isLoading ? isIconOnly ? null : renderContent(loadingText, void 0, isTruncated) : renderContent(children, text, isTruncated);
+	return /* @__PURE__ */ jsxs(ButtonProvider, {
 		value: contextValue,
-		children: /* @__PURE__ */ jsxs(ButtonBase, {
-			...useMemo(() => ({
-				borderWidth: spacingProps.border,
-				className: buttonClassName,
-				disabled,
-				focusRing: FOCUS_RING_SIZE,
-				h,
-				pl: spacingProps.pl,
-				pr: spacingProps.pr,
-				ref,
-				title: title || ariaLabel,
-				type: BUTTON_TYPE,
-				variant,
-				...buttonStyles,
-				...isActiveProps,
-				...disabledProps,
-				...aliasedProps,
-				...rest
-			}), [
-				spacingProps,
-				buttonClassName,
-				disabled,
-				h,
-				ref,
-				title,
-				ariaLabel,
-				variant,
-				buttonStyles,
-				isActiveProps,
-				disabledProps,
-				aliasedProps,
-				rest
-			]),
-			children: [hasState && /* @__PURE__ */ jsx(StateWrapper, {
-				onClick: handleStateClick,
-				...stateProps,
-				children: /* @__PURE__ */ jsx(ButtonIcon, {
-					m: "auto",
-					...stateIconProps
-				})
-			}), /* @__PURE__ */ jsxs(Content, { children: [IconRenderer.main, !icon && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-				IconRenderer.left,
-				IconRenderer.content,
-				IconRenderer.right
-			] })] })]
-		})
+		children: [/* @__PURE__ */ jsxs(ButtonBase, {
+			...finalProps,
+			children: [
+				leftIcon,
+				contentElement,
+				rightIcon
+			]
+		}), /* @__PURE__ */ jsx(StatusAnnouncer, {
+			role: "status",
+			"aria-live": "polite",
+			"aria-atomic": "true",
+			children: isLoading ? loadingText : ""
+		})]
 	});
 });
 Button.Icon = ButtonIcon;
@@ -289,5 +199,5 @@ Button.displayName = "Button";
 
 //#endregion
 export { ButtonBase, Button as default };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=button.js.map

package/dist/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":[],"sources":["../../src/button/button.tsx"],"sourcesContent":["import { Fragment, useMemo, useCallback } from 'react'\n\nimport { useButtonGroupContext } from '../buttonGroup/context'\nimport type { VuiComponent } from '../core'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { activeClassName, cs, filterUndefined, isReactText, isString } from '../utils'\nimport type { ButtonProps } from './button.types'\nimport ButtonIcon from './buttonIcon'\nimport ButtonText from './buttonText'\nimport { buttonStateMapping, loadingIconProps } from './consts'\nimport { ButtonProvider } from './context'\n\n// Constants\nconst DEFAULT_BORDER_WIDTH = 1\nconst DEFAULT_BOX_SHADOW = 'md'\nconst DEFAULT_DISABLED_OPACITY = 0.5\nconst BUTTON_TYPE = 'button'\nconst FOCUS_RING_SIZE = 3\n\n// Memoized styled components\nconst ContentWrapper = styled.span`\n  visibility: hidden;\n`\n\nconst StateWrapper = styled.span`\n  bottom: 0;\n  display: flex;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n`\n\nexport const ButtonBase = styled.buttonBox<ButtonProps>`\n  align-items: center;\n  display: inline-flex;\n  flex-shrink: 0;\n  font-weight: medium;\n  justify-content: center;\n  line-height: normal;\n  overflow: hidden;\n  position: relative;\n  transition-duration: fast;\n  user-select: none;\n  width: fit-content;\n\n  &.vui-button-variant-menuLight.vui-button-variant-menuLight.vui-active:hover {\n    background-color: #d3eef8;\n    color: #003591;\n    border-color-left: #003591;\n  }\n  &.vui-button-variant-menuDark.vui-button-variant-menuDark.vui-active:hover {\n    background-color: #003591;\n    color: #91ffba;\n    border-color-left: #91ffba;\n  }\n  &.vui-button-variant-menuDark.vui-button-variant-menuDark:focus,\n  &.vui-button-variant-menuDark.vui-button-variant-menuDark:focus-visible,\n  &.vui-button-variant-menuLight.vui-button-variant-menuLight:focus,\n  &.vui-button-variant-menuLight.vui-button-variant-menuLight:focus-visible {\n    box-shadow: none;\n    outline: none;\n    border-bottom: 0 solid transparent;\n  }\n  &.vui-button-variant-menuDark.vui-button-variant-menuDark.focusAsBorder:focus,\n  &.vui-button-variant-menuDark.vui-button-variant-menuDark.focusAsBorder:focus-visible,\n  &.vui-button-variant-menuLight.vui-button-variant-menuLight.focusAsBorder:focus,\n  &.vui-button-variant-menuLight.vui-button-variant-menuLight.focusAsBorder:focus-visible {\n    transition: border-bottom 0s linear;\n    border-bottom: 3px solid #d3eef8;\n  }\n`\n\nconst useButtonStyles = (mergedProps: any, variant: any) => {\n  const styles = useStyleConfig('Button', { ...mergedProps, ...variant }) || {}\n\n  return useMemo(() => {\n    const container = styles.container || {}\n    const { borderWidth = DEFAULT_BORDER_WIDTH, h = 32, spaceX = 0, ...buttonStyles } = container\n    return { styles, borderWidth, h, spaceX, buttonStyles }\n  }, [mergedProps, variant])\n}\n\n// Utility function to extract numeric value from responsive or themed props\nconst extractNumericValue = (value: any): number => {\n  if (typeof value === 'number') return value\n  if (typeof value === 'string') {\n    const parsed = parseInt(value, 10)\n    return isNaN(parsed) ? DEFAULT_BORDER_WIDTH : parsed\n  }\n  return DEFAULT_BORDER_WIDTH\n}\n\nconst useSpacingProps = (\n  borderWidthProp: any,\n  borderWidth: number | undefined,\n  spaceX: number,\n  icon: any,\n  iconLeft: any,\n  iconRight: any,\n  isLoading: boolean,\n  isSplit: boolean,\n) => {\n  return useMemo(() => {\n    const border = extractNumericValue(borderWidthProp) || borderWidth || DEFAULT_BORDER_WIDTH\n    const spaceXItem = spaceX - border\n    const spaceXText = spaceX * 2 - border\n\n    return {\n      border,\n      iconLeftMr: `${spaceXItem + 1}px`,\n      iconRightMl: isSplit ? 'auto' : `${spaceXItem + 1}px`,\n      pl: `${icon || iconLeft || isLoading ? spaceXItem : spaceXText}px`,\n      pr: `${icon || iconRight ? spaceXItem : spaceXText}px`,\n    }\n  }, [borderWidthProp, borderWidth, spaceX, icon, iconLeft, iconRight, isLoading, isSplit])\n}\n\nconst useDisabledProps = (disabled: boolean, styles: any) => {\n  return useMemo(\n    () =>\n      disabled\n        ? {\n            'aria-disabled': disabled,\n            disabledBg: styles?.container?.disabledBg ?? 'bg',\n            disabledBorderColor: styles?.container?.disabledBorderColor ?? 'borderColor',\n            disabledColor: styles?.container?.disabledColor ?? 'color',\n            hoverBg: styles?.container?.disabledBg ?? 'bg',\n            hoverBorderColor: styles?.container?.disabledBorderColor ?? 'borderColor',\n            hoverColor: styles?.container?.disabledColor ?? 'color',\n            activeBg: styles?.container?.disabledBg ?? 'bg',\n            cursor: 'not-allowed',\n            opacity: styles?.container?.disabledOpacity ?? DEFAULT_DISABLED_OPACITY,\n          }\n        : {},\n    [disabled, styles?.container],\n  )\n}\n\nconst useActiveProps = (isActive: boolean, styles: any) => {\n  return useMemo(\n    () =>\n      isActive\n        ? filterUndefined({\n            bg: styles?.container?.activeBg,\n            borderBg: styles?.container?.activeBorderBg,\n            color: styles?.container?.activeColor,\n          })\n        : {},\n    [isActive, styles?.container],\n  )\n}\n\nconst useAliasedProps = (\n  isRound: boolean,\n  h: number,\n  styles: any,\n  isElevated: boolean,\n  icon: any,\n  hasState: boolean,\n  isFullWidth: boolean,\n) => {\n  return useMemo(\n    () =>\n      filterUndefined({\n        borderRadius: isRound ? h / 2 : styles?.container?.borderRadius || 0,\n        boxShadow: isElevated ? DEFAULT_BOX_SHADOW : undefined,\n        minW: icon ? 0 : undefined,\n        pointerEvents: hasState ? 'none' : undefined,\n        w: isFullWidth ? '100%' : undefined,\n      }),\n    [isRound, h, styles?.container?.borderRadius, isElevated, icon, hasState, isFullWidth],\n  )\n}\n\nconst useButtonClassName = (className: string | undefined, isActive: boolean, variantProp: string | undefined) => {\n  return useMemo(\n    () =>\n      cs(\n        'vui-button',\n        className,\n        isActive && activeClassName,\n        variantProp ? `vui-button-variant-${variantProp}` : undefined,\n      ),\n    [className, isActive, variantProp],\n  )\n}\n\nconst useIconRenderer = (\n  icon: any,\n  iconLeft: any,\n  iconRight: any,\n  isLoading: boolean,\n  spacingProps: any,\n  children: any,\n  text: any,\n  isTruncated: boolean,\n) => {\n  return useMemo(\n    () => ({\n      main: isString(icon) ? <ButtonIcon name={icon} /> : icon,\n      left: isLoading ? (\n        <ButtonIcon mr={spacingProps.iconLeftMr} {...loadingIconProps} />\n      ) : isString(iconLeft) ? (\n        <ButtonIcon mr={spacingProps.iconLeftMr} name={iconLeft} />\n      ) : (\n        iconLeft\n      ),\n      right: isString(iconRight) ? (\n        <ButtonIcon ml={!children && !text ? 0 : spacingProps.iconRightMl} name={iconRight} />\n      ) : (\n        iconRight\n      ),\n      content: children ?? (isReactText(text) ? <ButtonText {...{ isTruncated, text }} /> : text),\n    }),\n    [icon, iconLeft, iconRight, isLoading, spacingProps, children, text, isTruncated],\n  )\n}\n\n/**\n * Triggers given actions on click. Supports multiple states, sizes and variants.\n *\n * Comes with additional props for extra behavior, like loading, disabled or elevated.\n *\n * Exposes some props to the children via context.\n */\nexport const Button = vui<'button', ButtonProps>((props, ref) => {\n  const buttonGroupProps = useButtonGroupContext()\n  const mergedProps = { ...buttonGroupProps, ...props }\n  const {\n    borderWidth: borderWidthProp,\n    children,\n    className,\n    colorScheme,\n    disabled,\n    dropDownIcon = 'falAngleDown',\n    icon,\n    iconLeft,\n    iconRight: iconRightProp,\n    isActive,\n    isDropDown,\n    isElevated,\n    isFullWidth,\n    isLoading,\n    isRound,\n    isSplit,\n    isTruncated,\n    size,\n    state = '',\n    stateMapping,\n    text,\n    title,\n    variant: variantProp,\n    ...rest\n  } = mergedProps\n\n  // Memoized calculations\n  const hasState = useMemo(() => Boolean(state) && state !== 'idle', [state])\n  const states = useMemo(() => ({ ...buttonStateMapping, ...stateMapping }), [stateMapping])\n  const stateData = useMemo(() => states[state] ?? {}, [states, state])\n  const { iconProps: stateIconProps, ...stateProps } = stateData\n\n  const iconRight = useMemo(() => (isDropDown ? 'falAngleDown' : iconRightProp), [isDropDown, iconRightProp])\n\n  const variant = useMemo(\n    () =>\n      filterUndefined({\n        variant: stateData?.variant ?? variantProp,\n      }),\n    [stateData?.variant, variantProp],\n  )\n\n  // Custom hooks for optimization\n  const { styles, borderWidth, h, spaceX, buttonStyles } = useButtonStyles(mergedProps, variant)\n  const spacingProps = useSpacingProps(\n    borderWidthProp,\n    borderWidth,\n    spaceX,\n    icon,\n    iconLeft,\n    iconRight,\n    isLoading ?? false,\n    isSplit ?? false,\n  )\n  const disabledProps = useDisabledProps(disabled ?? false, styles)\n  const isActiveProps = useActiveProps(isActive ?? false, styles)\n  const aliasedProps = useAliasedProps(\n    isRound ?? false,\n    h,\n    styles,\n    isElevated ?? false,\n    icon,\n    hasState,\n    isFullWidth ?? false,\n  )\n  const buttonClassName = useButtonClassName(className, isActive ?? false, variantProp)\n  const IconRenderer = useIconRenderer(\n    icon,\n    iconLeft,\n    iconRight,\n    isLoading ?? false,\n    spacingProps,\n    children,\n    text,\n    isTruncated ?? false,\n  )\n\n  // Memoized context value\n  const contextValue = useMemo(\n    () => filterUndefined({ disabled, size, variant: variant.variant }),\n    [disabled, size, variant.variant],\n  )\n\n  // Memoized content wrapper\n  const Content = useMemo(() => (hasState ? ContentWrapper : Fragment), [hasState])\n\n  // Memoized aria label\n  const ariaLabel = useMemo(() => title || '', [title])\n\n  // Optimized event handler\n  const handleStateClick = useCallback((e: { stopPropagation: () => void }) => {\n    e.stopPropagation()\n  }, [])\n\n  // Memoized final props\n  const finalProps = useMemo(\n    () => ({\n      borderWidth: spacingProps.border,\n      className: buttonClassName,\n      disabled,\n      focusRing: FOCUS_RING_SIZE,\n      h,\n      pl: spacingProps.pl,\n      pr: spacingProps.pr,\n      ref,\n      title: title || ariaLabel,\n      type: BUTTON_TYPE,\n      variant,\n      ...buttonStyles,\n      ...isActiveProps,\n      ...disabledProps,\n      ...aliasedProps,\n      ...rest,\n    }),\n    [\n      spacingProps,\n      buttonClassName,\n      disabled,\n      h,\n      ref,\n      title,\n      ariaLabel,\n      variant,\n      buttonStyles,\n      isActiveProps,\n      disabledProps,\n      aliasedProps,\n      rest,\n    ],\n  )\n\n  return (\n    <ButtonProvider value={contextValue}>\n      <ButtonBase {...finalProps}>\n        {hasState && (\n          <StateWrapper onClick={handleStateClick} {...stateProps}>\n            <ButtonIcon m=\"auto\" {...stateIconProps} />\n          </StateWrapper>\n        )}\n\n        <Content>\n          {IconRenderer.main}\n          {!icon && (\n            <>\n              {IconRenderer.left}\n              {IconRenderer.content}\n              {IconRenderer.right}\n            </>\n          )}\n        </Content>\n      </ButtonBase>\n    </ButtonProvider>\n  )\n}) as VuiComponent<'button', ButtonProps> & {\n  Icon: typeof ButtonIcon\n  Text: typeof ButtonText\n}\n\nButton.Icon = ButtonIcon\nButton.Text = ButtonText\nButton.displayName = 'Button'\n\nexport default Button\n"],"mappings":";;;;;;;;;;;;;;;;AAaA,MAAM,uBAAuB;AAC7B,MAAM,qBAAqB;AAC3B,MAAM,2BAA2B;AACjC,MAAM,cAAc;AACpB,MAAM,kBAAkB;AAGxB,MAAM,iBAAiB,OAAO,IAAI;;;AAIlC,MAAM,eAAe,OAAO,IAAI;;;;;;;;AAShC,MAAa,aAAa,OAAO,SAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCvD,MAAM,mBAAmB,aAAkB,YAAiB;CAC1D,MAAM,SAAS,eAAe,UAAU;EAAE,GAAG;EAAa,GAAG;EAAS,CAAC,IAAI,EAAE;AAE7E,QAAO,cAAc;EAEnB,MAAM,EAAE,cAAc,sBAAsB,IAAI,IAAI,SAAS,GAAG,GAAG,iBADjD,OAAO,aAAa,EAAE;AAExC,SAAO;GAAE;GAAQ;GAAa;GAAG;GAAQ;GAAc;IACtD,CAAC,aAAa,QAAQ,CAAC;;AAI5B,MAAM,uBAAuB,UAAuB;AAClD,KAAI,OAAO,UAAU,SAAU,QAAO;AACtC,KAAI,OAAO,UAAU,UAAU;EAC7B,MAAM,SAAS,SAAS,OAAO,GAAG;AAClC,SAAO,MAAM,OAAO,GAAG,uBAAuB;;AAEhD,QAAO;;AAGT,MAAM,mBACJ,iBACA,aACA,QACA,MACA,UACA,WACA,WACA,YACG;AACH,QAAO,cAAc;EACnB,MAAM,SAAS,oBAAoB,gBAAgB,IAAI,eAAe;EACtE,MAAM,aAAa,SAAS;EAC5B,MAAM,aAAa,SAAS,IAAI;AAEhC,SAAO;GACL;GACA,YAAY,GAAG,aAAa,EAAE;GAC9B,aAAa,UAAU,SAAS,GAAG,aAAa,EAAE;GAClD,IAAI,GAAG,QAAQ,YAAY,YAAY,aAAa,WAAW;GAC/D,IAAI,GAAG,QAAQ,YAAY,aAAa,WAAW;GACpD;IACA;EAAC;EAAiB;EAAa;EAAQ;EAAM;EAAU;EAAW;EAAW;EAAQ,CAAC;;AAG3F,MAAM,oBAAoB,UAAmB,WAAgB;AAC3D,QAAO,cAEH,WACI;EACE,iBAAiB;EACjB,YAAY,QAAQ,WAAW,cAAc;EAC7C,qBAAqB,QAAQ,WAAW,uBAAuB;EAC/D,eAAe,QAAQ,WAAW,iBAAiB;EACnD,SAAS,QAAQ,WAAW,cAAc;EAC1C,kBAAkB,QAAQ,WAAW,uBAAuB;EAC5D,YAAY,QAAQ,WAAW,iBAAiB;EAChD,UAAU,QAAQ,WAAW,cAAc;EAC3C,QAAQ;EACR,SAAS,QAAQ,WAAW,mBAAmB;EAChD,GACD,EAAE,EACR,CAAC,UAAU,QAAQ,UAAU,CAC9B;;AAGH,MAAM,kBAAkB,UAAmB,WAAgB;AACzD,QAAO,cAEH,WACI,gBAAgB;EACd,IAAI,QAAQ,WAAW;EACvB,UAAU,QAAQ,WAAW;EAC7B,OAAO,QAAQ,WAAW;EAC3B,CAAC,GACF,EAAE,EACR,CAAC,UAAU,QAAQ,UAAU,CAC9B;;AAGH,MAAM,mBACJ,SACA,GACA,QACA,YACA,MACA,UACA,gBACG;AACH,QAAO,cAEH,gBAAgB;EACd,cAAc,UAAU,IAAI,IAAI,QAAQ,WAAW,gBAAgB;EACnE,WAAW,aAAa,qBAAqB;EAC7C,MAAM,OAAO,IAAI;EACjB,eAAe,WAAW,SAAS;EACnC,GAAG,cAAc,SAAS;EAC3B,CAAC,EACJ;EAAC;EAAS;EAAG,QAAQ,WAAW;EAAc;EAAY;EAAM;EAAU;EAAY,CACvF;;AAGH,MAAM,sBAAsB,WAA+B,UAAmB,gBAAoC;AAChH,QAAO,cAEH,GACE,cACA,WACA,YAAY,iBACZ,cAAc,sBAAsB,gBAAgB,OACrD,EACH;EAAC;EAAW;EAAU;EAAY,CACnC;;AAGH,MAAM,mBACJ,MACA,UACA,WACA,WACA,cACA,UACA,MACA,gBACG;AACH,QAAO,eACE;EACL,MAAM,SAAS,KAAK,GAAG,oBAAC,cAAW,MAAM,OAAQ,GAAG;EACpD,MAAM,YACJ,oBAAC;GAAW,IAAI,aAAa;GAAY,GAAI;IAAoB,GAC/D,SAAS,SAAS,GACpB,oBAAC;GAAW,IAAI,aAAa;GAAY,MAAM;IAAY,GAE3D;EAEF,OAAO,SAAS,UAAU,GACxB,oBAAC;GAAW,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,aAAa;GAAa,MAAM;IAAa,GAEtF;EAEF,SAAS,aAAa,YAAY,KAAK,GAAG,oBAAC;GAAiB;GAAa;IAAU,GAAG;EACvF,GACD;EAAC;EAAM;EAAU;EAAW;EAAW;EAAc;EAAU;EAAM;EAAY,CAClF;;;;;;;;;AAUH,MAAa,SAAS,KAA4B,OAAO,QAAQ;CAE/D,MAAM,cAAc;EAAE,GADG,uBAAuB;EACL,GAAG;EAAO;CACrD,MAAM,EACJ,aAAa,iBACb,UACA,WACA,aACA,UACA,eAAe,gBACf,MACA,UACA,WAAW,eACX,UACA,YACA,YACA,aACA,WACA,SACA,SACA,aACA,MACA,QAAQ,IACR,cACA,MACA,OACA,SAAS,aACT,GAAG,SACD;CAGJ,MAAM,WAAW,cAAc,QAAQ,MAAM,IAAI,UAAU,QAAQ,CAAC,MAAM,CAAC;CAC3E,MAAM,SAAS,eAAe;EAAE,GAAG;EAAoB,GAAG;EAAc,GAAG,CAAC,aAAa,CAAC;CAC1F,MAAM,YAAY,cAAc,OAAO,UAAU,EAAE,EAAE,CAAC,QAAQ,MAAM,CAAC;CACrE,MAAM,EAAE,WAAW,gBAAgB,GAAG,eAAe;CAErD,MAAM,YAAY,cAAe,aAAa,iBAAiB,eAAgB,CAAC,YAAY,cAAc,CAAC;CAE3G,MAAM,UAAU,cAEZ,gBAAgB,EACd,SAAS,WAAW,WAAW,aAChC,CAAC,EACJ,CAAC,WAAW,SAAS,YAAY,CAClC;CAGD,MAAM,EAAE,QAAQ,aAAa,GAAG,QAAQ,iBAAiB,gBAAgB,aAAa,QAAQ;CAC9F,MAAM,eAAe,gBACnB,iBACA,aACA,QACA,MACA,UACA,WACA,aAAa,OACb,WAAW,MACZ;CACD,MAAM,gBAAgB,iBAAiB,YAAY,OAAO,OAAO;CACjE,MAAM,gBAAgB,eAAe,YAAY,OAAO,OAAO;CAC/D,MAAM,eAAe,gBACnB,WAAW,OACX,GACA,QACA,cAAc,OACd,MACA,UACA,eAAe,MAChB;CACD,MAAM,kBAAkB,mBAAmB,WAAW,YAAY,OAAO,YAAY;CACrF,MAAM,eAAe,gBACnB,MACA,UACA,WACA,aAAa,OACb,cACA,UACA,MACA,eAAe,MAChB;CAGD,MAAM,eAAe,cACb,gBAAgB;EAAE;EAAU;EAAM,SAAS,QAAQ;EAAS,CAAC,EACnE;EAAC;EAAU;EAAM,QAAQ;EAAQ,CAClC;CAGD,MAAM,UAAU,cAAe,WAAW,iBAAiB,UAAW,CAAC,SAAS,CAAC;CAGjF,MAAM,YAAY,cAAc,SAAS,IAAI,CAAC,MAAM,CAAC;CAGrD,MAAM,mBAAmB,aAAa,MAAuC;AAC3E,IAAE,iBAAiB;IAClB,EAAE,CAAC;AAuCN,QACE,oBAAC;EAAe,OAAO;YACrB,qBAAC;GAAW,GAtCG,eACV;IACL,aAAa,aAAa;IAC1B,WAAW;IACX;IACA,WAAW;IACX;IACA,IAAI,aAAa;IACjB,IAAI,aAAa;IACjB;IACA,OAAO,SAAS;IAChB,MAAM;IACN;IACA,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;IACJ,GACD;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD,CACF;cAKM,YACC,oBAAC;IAAa,SAAS;IAAkB,GAAI;cAC3C,oBAAC;KAAW,GAAE;KAAO,GAAI;MAAkB;KAC9B,EAGjB,qBAAC,sBACE,aAAa,MACb,CAAC,QACA;IACG,aAAa;IACb,aAAa;IACb,aAAa;OACb,IAEG;IACC;GACE;EAEnB;AAKF,OAAO,OAAO;AACd,OAAO,OAAO;AACd,OAAO,cAAc"}
+{"version":3,"file":"button.js","names":[],"sources":["../../src/button/button.tsx"],"sourcesContent":["import { useEffect, useMemo } from 'react'\n\nimport { useButtonGroupContext } from '../buttonGroup/context'\nimport type { VuiComponent } from '../core'\nimport { styled, vui } from '../core'\nimport { filterUndefined } from '../utils'\nimport type { ButtonProps } from './button.types'\nimport { renderButtonIcon, renderContent } from './buttonHelpers'\nimport ButtonIcon from './buttonIcon'\nimport ButtonText from './buttonText'\nimport { CSS_VAR_MAPPINGS } from './consts'\nimport { ButtonProvider } from './context'\nimport { useButtonComputed } from './useButtonComputed'\nimport { resolveVariantKey, wrapWithVars } from './utils'\n\n// ---------------------------------------------------------------------------\n// Constants\n// ---------------------------------------------------------------------------\nconst BUTTON_TYPE = 'button'\nconst FOCUS_RING_SIZE = 3\n\n// ---------------------------------------------------------------------------\n// Styled primitives\n// ---------------------------------------------------------------------------\nexport const ButtonBase = styled.buttonBox<ButtonProps>`\n  align-items: center;\n  display: inline-flex;\n  flex-shrink: 0;\n  font-weight: var(--vui-button-font-weight, 500);\n  justify-content: center;\n  line-height: 1.2;\n  overflow: hidden;\n  position: relative;\n  transition-duration: var(--vui-button-transition-duration, fast);\n  user-select: none;\n  width: fit-content;\n`\n\n// Visually-hidden live-region container — invisible on screen but present in\n// the accessibility tree so aria-live announcements fire reliably (WCAG 2.2 SC 4.1.3).\nconst StatusAnnouncer = styled.spanBox`\n  border: 0;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n  white-space: nowrap;\n`\n\n// ---------------------------------------------------------------------------\n// Button component\n// ---------------------------------------------------------------------------\n\n/**\n * Button Component\n *\n * A versatile button component that supports multiple states, sizes, variants, and behaviors.\n * Part of the VUI design system with built-in accessibility features.\n *\n */\nexport const Button = vui<'button', ButtonProps>((props, ref) => {\n  const buttonGroupProps = useButtonGroupContext()\n  const mergedProps = { ...buttonGroupProps, ...props }\n  const {\n    borderWidth: borderWidthProp,\n    children,\n    className,\n    colorScheme, // deprecated — not forwarded to DOM\n    disabled,\n    dropDownIcon = 'uiAngleDown',\n    intent: intentProp,\n    isSplit: _isSplit, // deprecated — destructured to prevent DOM leak\n    icon,\n    startIcon,\n    iconLeft,\n    endIcon: endIconProp,\n    iconRight,\n    isActive = false,\n    isDropDown,\n    isElevated = false,\n    isFullWidth = false,\n    isLoading = false,\n    loadingText = 'Loading',\n    isRound = false,\n    isTruncated = false,\n    size,\n    text,\n    title,\n    variant: variantProp,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    onClick,\n    ...rest\n  } = mergedProps\n\n  // Non-memoized calculations (trivial expressions — no memo benefit)\n  const hasTextContent = Boolean(children || text)\n  const isIconOnly = !children && !text && !isDropDown\n  const resolvedStartIcon = startIcon ?? iconLeft\n  const resolvedEndIconProp = endIconProp ?? iconRight\n  const hasStartIcon = Boolean(resolvedStartIcon || icon || isLoading)\n  const hasEndIcon = Boolean(resolvedEndIconProp || isDropDown)\n  const endIcon = isDropDown ? dropDownIcon : resolvedEndIconProp\n\n  const variantForTheme = useMemo(\n    () => filterUndefined({ variant: resolveVariantKey(variantProp, intentProp) }),\n    [variantProp, intentProp],\n  )\n\n  // Consolidated computation of all button styles and props\n  const computed = useButtonComputed({\n    size,\n    variant: variantForTheme,\n    intentProp,\n    borderWidthProp,\n    disabled: disabled ?? false,\n    isActive,\n    isIconOnly,\n    isRound,\n    isElevated,\n    hasStartIcon,\n    hasEndIcon,\n    isFullWidth,\n    className,\n    variantProp,\n  })\n\n  // Memoized context value\n  const contextValue = useMemo(\n    () =>\n      filterUndefined({\n        disabled,\n        size,\n        variant: variantForTheme.variant,\n        intent: intentProp,\n        isDropDown,\n        hasTextContent,\n        isLoading,\n      }),\n    [disabled, size, variantForTheme.variant, intentProp, isDropDown, hasTextContent, isLoading],\n  )\n\n  // Memoized final props - using primitives to avoid object reference changes\n  const finalVariant = variantForTheme.variant as string | undefined\n\n  // Extract primitive values for stable dependencies\n  const borderWidth = computed.spacing.borderWidth\n  const plValue = computed.spacing.pl\n  const prValue = computed.spacing.pr\n  const ptValue = computed.spacing.pt\n  const pbValue = computed.spacing.pb\n  const gapValue = computed.spacing.gap\n\n  // Wrap props with CSS variables for customization.\n  // Uses module-level CSS_VAR_MAPPINGS and wrapWithVars for stable references.\n  const propsWithVars = useMemo(\n    () => ({\n      ...wrapWithVars(computed.buttonStyles, CSS_VAR_MAPPINGS.base),\n      ...wrapWithVars(computed.activeProps, CSS_VAR_MAPPINGS.active),\n      ...wrapWithVars(computed.disabledProps, CSS_VAR_MAPPINGS.disabled),\n    }),\n    [computed.buttonStyles, computed.activeProps, computed.disabledProps],\n  )\n\n  // Stable props memoized without `rest` so the memo can actually reuse between renders.\n  // `rest` (a new object every render) is spread in separately below.\n  const stableFinalProps = useMemo(\n    () => ({\n      borderWidth: `var(--vui-button-border-width, ${borderWidth}px)`,\n      className: computed.buttonClassName,\n      disabled,\n      'aria-label': isLoading && isIconOnly ? loadingText || 'Loading' : ariaLabel,\n      'aria-labelledby': ariaLabelledby,\n      'aria-busy': isLoading ? true : undefined,\n      'aria-disabled': isLoading ? true : undefined,\n      'aria-haspopup': isDropDown ? true : undefined,\n      focusRing: FOCUS_RING_SIZE,\n      gap: gapValue,\n      pl: plValue,\n      pr: prValue,\n      pt: ptValue,\n      pb: pbValue,\n      onClick: isLoading ? undefined : onClick,\n      pointerEvents: isLoading ? ('none' as const) : undefined,\n      ref,\n      title: title || undefined,\n      type: BUTTON_TYPE as 'button',\n      variant: finalVariant,\n      ...propsWithVars,\n      ...computed.aliasedProps,\n    }),\n    [\n      borderWidth,\n      plValue,\n      prValue,\n      ptValue,\n      pbValue,\n      gapValue,\n      computed.buttonClassName,\n      computed.aliasedProps,\n      disabled,\n      ariaLabel,\n      ariaLabelledby,\n      isDropDown,\n      ref,\n      title,\n      isLoading,\n      onClick,\n      finalVariant,\n      isIconOnly,\n      loadingText,\n      propsWithVars,\n    ],\n  )\n  const finalProps = { ...stableFinalProps, ...rest }\n\n  // Consolidate all dev-mode warnings into a single effect so they run after all hooks\n  useEffect(() => {\n    if (process.env.NODE_ENV !== 'production') {\n      if (_isSplit !== undefined) {\n        console.warn('[Button] The `isSplit` prop is deprecated and has no effect. It will be removed in VUI 5.x.')\n      }\n      if (colorScheme !== undefined) {\n        console.warn('[Button] `colorScheme` is deprecated. Use `variant` + `intent` instead.')\n      }\n      if (iconLeft !== undefined) {\n        console.warn('[Button] `iconLeft` is deprecated. Use `startIcon` instead.')\n      }\n      if (iconRight !== undefined) {\n        console.warn('[Button] `iconRight` is deprecated. Use `endIcon` instead.')\n      }\n      const isIconOnly = !children && !text\n      const hasLabel = Boolean(ariaLabel || ariaLabelledby || title)\n      if (isIconOnly && !hasLabel) {\n        console.warn(\n          '[Button] Icon-only buttons must have an accessible label. ' +\n            'Add `aria-label`, `aria-labelledby`, or `title` to describe the button action.',\n        )\n      }\n    }\n  }, [_isSplit, colorScheme, iconLeft, iconRight, children, text, title, ariaLabel, ariaLabelledby])\n\n  const leftIcon = renderButtonIcon(resolvedStartIcon ?? icon, 'left', isLoading)\n  const rightIcon = renderButtonIcon(endIcon, 'right')\n  // Icon-only buttons: suppress loadingText as visible content — it is set as aria-label above\n  // and announced via the StatusAnnouncer live region.\n  const contentElement = isLoading\n    ? isIconOnly\n      ? null\n      : renderContent(loadingText, undefined, isTruncated)\n    : renderContent(children, text, isTruncated)\n\n  return (\n    <ButtonProvider value={contextValue}>\n      <ButtonBase {...finalProps}>\n        {leftIcon}\n        {contentElement}\n        {rightIcon}\n      </ButtonBase>\n      {/* Sibling live region — outside the <button> so AT fire announcements\n          reliably (live regions inside interactive elements are unreliable across\n          NVDA, JAWS and VoiceOver). Always in the DOM so AT register it before\n          content changes (WCAG 2.2 SC 4.1.3 Status Messages). */}\n      <StatusAnnouncer role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n        {isLoading ? loadingText : ''}\n      </StatusAnnouncer>\n    </ButtonProvider>\n  )\n}) as VuiComponent<'button', ButtonProps> & {\n  Icon: typeof ButtonIcon\n  Text: typeof ButtonText\n}\n\nButton.Icon = ButtonIcon\nButton.Text = ButtonText\nButton.displayName = 'Button'\n\nexport default Button\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAM,cAAc;AACpB,MAAM,kBAAkB;AAKxB,MAAa,aAAa,OAAO,SAAsB;;;;;;;;;;;;;AAgBvD,MAAM,kBAAkB,OAAO,OAAO;;;;;;;;;;;;;;;;;;AAuBtC,MAAa,SAAS,KAA4B,OAAO,QAAQ;CAG/D,MAAM,EACJ,aAAa,iBACb,UACA,WACA,aACA,UACA,eAAe,eACf,QAAQ,YACR,SAAS,UACT,MACA,WACA,UACA,SAAS,aACT,WACA,WAAW,OACX,YACA,aAAa,OACb,cAAc,OACd,YAAY,OACZ,cAAc,WACd,UAAU,OACV,cAAc,OACd,MACA,MACA,OACA,SAAS,aACT,cAAc,WACd,mBAAmB,gBACnB,SACA,GAAG,SA9Be;EAAE,GADG,uBAAuB;EACL,GAAG;EAAO;CAkCrD,MAAM,iBAAiB,QAAQ,YAAY,KAAK;CAChD,MAAM,aAAa,CAAC,YAAY,CAAC,QAAQ,CAAC;CAC1C,MAAM,oBAAoB,aAAa;CACvC,MAAM,sBAAsB,eAAe;CAC3C,MAAM,eAAe,QAAQ,qBAAqB,QAAQ,UAAU;CACpE,MAAM,aAAa,QAAQ,uBAAuB,WAAW;CAC7D,MAAM,UAAU,aAAa,eAAe;CAE5C,MAAM,kBAAkB,cAChB,gBAAgB,EAAE,SAAS,kBAAkB,aAAa,WAAW,EAAE,CAAC,EAC9E,CAAC,aAAa,WAAW,CAC1B;CAGD,MAAM,WAAW,kBAAkB;EACjC;EACA,SAAS;EACT;EACA;EACA,UAAU,YAAY;EACtB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAGF,MAAM,eAAe,cAEjB,gBAAgB;EACd;EACA;EACA,SAAS,gBAAgB;EACzB,QAAQ;EACR;EACA;EACA;EACD,CAAC,EACJ;EAAC;EAAU;EAAM,gBAAgB;EAAS;EAAY;EAAY;EAAgB;EAAU,CAC7F;CAGD,MAAM,eAAe,gBAAgB;CAGrC,MAAM,cAAc,SAAS,QAAQ;CACrC,MAAM,UAAU,SAAS,QAAQ;CACjC,MAAM,UAAU,SAAS,QAAQ;CACjC,MAAM,UAAU,SAAS,QAAQ;CACjC,MAAM,UAAU,SAAS,QAAQ;CACjC,MAAM,WAAW,SAAS,QAAQ;CAIlC,MAAM,gBAAgB,eACb;EACL,GAAG,aAAa,SAAS,cAAc,iBAAiB,KAAK;EAC7D,GAAG,aAAa,SAAS,aAAa,iBAAiB,OAAO;EAC9D,GAAG,aAAa,SAAS,eAAe,iBAAiB,SAAS;EACnE,GACD;EAAC,SAAS;EAAc,SAAS;EAAa,SAAS;EAAc,CACtE;CAoDD,MAAM,aAAa;EAAE,GAhDI,eAChB;GACL,aAAa,kCAAkC,YAAY;GAC3D,WAAW,SAAS;GACpB;GACA,cAAc,aAAa,aAAa,eAAe,YAAY;GACnE,mBAAmB;GACnB,aAAa,YAAY,OAAO;GAChC,iBAAiB,YAAY,OAAO;GACpC,iBAAiB,aAAa,OAAO;GACrC,WAAW;GACX,KAAK;GACL,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS,YAAY,SAAY;GACjC,eAAe,YAAa,SAAmB;GAC/C;GACA,OAAO,SAAS;GAChB,MAAM;GACN,SAAS;GACT,GAAG;GACH,GAAG,SAAS;GACb,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA,SAAS;GACT,SAAS;GACT;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;EACyC,GAAG;EAAM;AAGnD,iBAAgB;AAEZ,MAAI,aAAa,OACf,SAAQ,KAAK,8FAA8F;AAE7G,MAAI,gBAAgB,OAClB,SAAQ,KAAK,0EAA0E;AAEzF,MAAI,aAAa,OACf,SAAQ,KAAK,8DAA8D;AAE7E,MAAI,cAAc,OAChB,SAAQ,KAAK,6DAA6D;AAI5E,MAFmB,CAAC,YAAY,CAAC,QAEf,CADD,QAAQ,aAAa,kBAAkB,MAAM,CAE5D,SAAQ,KACN,2IAED;IAGJ;EAAC;EAAU;EAAa;EAAU;EAAW;EAAU;EAAM;EAAO;EAAW;EAAe,CAAC;CAElG,MAAM,WAAW,iBAAiB,qBAAqB,MAAM,QAAQ,UAAU;CAC/E,MAAM,YAAY,iBAAiB,SAAS,QAAQ;CAGpD,MAAM,iBAAiB,YACnB,aACE,OACA,cAAc,aAAa,QAAW,YAAY,GACpD,cAAc,UAAU,MAAM,YAAY;AAE9C,QACE,qBAAC;EAAe,OAAO;aACrB,qBAAC;GAAW,GAAI;;IACb;IACA;IACA;;IACU,EAKb,oBAAC;GAAgB,MAAK;GAAS,aAAU;GAAS,eAAY;aAC3D,YAAY,cAAc;IACX;GACH;EAEnB;AAKF,OAAO,OAAO;AACd,OAAO,OAAO;AACd,OAAO,cAAc"}