@veracity/vui 4.0.3 → 5.0.0-alpha.375407.2603121350

package/dist/button/button.d.ts

@@ -1,54 +1,17 @@
-import { ThemingProps } from "../theme/types.js";
-import { AnimationProps } from "../system/animations.js";
-import { BackgroundColorProps } from "../system/backgrounds.js";
-import { BorderBottomColorProps, BorderBottomProps, BorderBottomWidthProps, BorderColorProps, BorderLeftColorProps, BorderLeftProps, BorderLeftWidthProps, BorderProps, BorderRadiusProps, BorderRightColorProps, BorderRightProps, BorderRightWidthProps, BorderStyleProps, BorderTopColorProps, BorderTopProps, BorderTopWidthProps, BorderWidthProps, DivideColorProps, DivideStyleProps, DivideXProps, DivideXReverseProps, DivideYProps, DivideYReverseProps, OutlineColorProps, OutlineProps, OutlineStyleProps, OutlineWidthProps, RingColorProps, RingProps } from "../system/borders.js";
-import { IsTruncatedProps, MaxLinesProps, WordBreakProps } from "../system/custom.js";
-import { BoxShadowProps, OpacityProps, TextShadowProps } from "../system/effects.js";
-import { BottomProps, BoxSizingProps, DisplayProps, FloatProps, LeftProps, ObjectFitProps, OverflowProps, OverflowXProps, OverflowYProps, OverscrollBehaviorProps, PositionProps, RightProps, TopProps, VisibilityProps, ZIndexProps } from "../system/layout.js";
-import { AlignContentProps, AlignItemsProps, AlignSelfProps, FlexBasisProps, FlexDirectionProps, FlexGrowProps, FlexProps, FlexShrinkProps, FlexWrapProps, JustifyContentProps, JustifyItemsProps, JustifySelfProps, OrderProps } from "../system/flexboxes.js";
-import { AppearanceProps, CursorProps, PointerEventsProps, ResizeProps, UserSelectProps } from "../system/interactivity.js";
-import { HeightProps, MaxHeightProps, MaxWidthProps, MinHeightProps, MinWidthProps, WidthProps } from "../system/sizing.js";
-import { MarginBottomProps, MarginLeftProps, MarginProps, MarginRightProps, MarginTopProps, MarginXProps, MarginYProps, PaddingBottomProps, PaddingLeftProps, PaddingProps, PaddingRightProps, PaddingTopProps, PaddingXProps, PaddingYProps, SpaceXProps, SpaceXReverseProps, SpaceYProps, SpaceYReverseProps } from "../system/space.js";
-import { ColProps, RowProps } from "../system/flexboxGrids.js";
-import { ColumnGapProps, GapProps, GridAreaProps, GridAutoColumnsProps, GridAutoFlowProps, GridAutoRowsProps, GridColumnProps, GridRowProps, GridTemplateAreasProps, GridTemplateColumnsProps, GridTemplateRowsProps, RowGapProps } from "../system/grids.js";
-import { BorderCollapseProps, TableLayoutProps } from "../system/tables.js";
-import { RotateProps, ScaleProps, ScaleXProps, ScaleYProps, SkewXProps, SkewYProps, TransformOriginProps, TransformProps, TranslateXProps, TranslateYProps } from "../system/transforms.js";
-import { TransitionDelayProps, TransitionDurationProps, TransitionPropertyProps, TransitionProps, TransitionTimingFunctionProps } from "../system/transitions.js";
-import { ColorProps, FontFamilyProps, FontSizeProps, FontStyleProps, FontWeightProps, LetterSpacingProps, LineHeightProps, ListStylePositionProps, ListStyleTypeProps, TextAlignProps, TextDecorationProps, TextOverflowProps, TextTransformProps, VerticalAlignProps, WhiteSpaceProps } from "../system/typography.js";
 import { VuiComponent } from "../core/vui.js";
-import "../core/index.js";
-import { IconProp } from "../icon/icon.types.js";
-import { ButtonProps, ButtonState, ButtonStateMapping } from "./button.types.js";
+import { ButtonProps } from "./button.types.js";
 import { ButtonIcon } from "./buttonIcon.js";
 import { ButtonText } from "./buttonText.js";
-import "../index.js";
-import * as react from "react";
-import * as styled_components0 from "styled-components";
+import * as styled_components_dist_types0 from "styled-components/dist/types";
 
 //#region src/button/button.d.ts
-declare const ButtonBase: styled_components0.StyledComponent<"button", styled_components0.DefaultTheme, AnimationProps & BackgroundColorProps & BorderProps & BorderTopProps & BorderRightProps & BorderBottomProps & BorderLeftProps & BorderColorProps & BorderTopColorProps & BorderRightColorProps & BorderBottomColorProps & BorderLeftColorProps & BorderWidthProps & BorderTopWidthProps & BorderRightWidthProps & BorderBottomWidthProps & BorderLeftWidthProps & BorderStyleProps & BorderRadiusProps & OutlineProps & OutlineColorProps & OutlineWidthProps & OutlineStyleProps & DivideXProps & DivideYProps & DivideXReverseProps & DivideYReverseProps & DivideColorProps & DivideStyleProps & RingProps & RingColorProps & OpacityProps & BoxShadowProps & TextShadowProps & DisplayProps & AlignItemsProps & AlignContentProps & JustifyContentProps & JustifyItemsProps & FlexWrapProps & FlexGrowProps & FlexShrinkProps & FlexBasisProps & FlexDirectionProps & FlexProps & JustifySelfProps & AlignSelfProps & OrderProps & RowProps & ColProps & GapProps & ColumnGapProps & RowGapProps & GridColumnProps & GridRowProps & GridAutoFlowProps & GridAutoColumnsProps & GridAutoRowsProps & GridTemplateColumnsProps & GridTemplateRowsProps & GridTemplateAreasProps & GridAreaProps & AppearanceProps & CursorProps & PointerEventsProps & ResizeProps & UserSelectProps & IsTruncatedProps & FloatProps & BoxSizingProps & OverflowProps & OverflowXProps & OverflowYProps & PositionProps & ZIndexProps & TopProps & RightProps & BottomProps & LeftProps & VisibilityProps & OverscrollBehaviorProps & ObjectFitProps & MaxLinesProps & WidthProps & HeightProps & MaxWidthProps & MaxHeightProps & MinWidthProps & MinHeightProps & MarginProps & MarginTopProps & MarginRightProps & MarginBottomProps & MarginLeftProps & MarginXProps & MarginYProps & PaddingProps & PaddingTopProps & PaddingRightProps & PaddingBottomProps & PaddingLeftProps & PaddingXProps & PaddingYProps & SpaceXProps & SpaceYProps & SpaceXReverseProps & SpaceYReverseProps & BorderCollapseProps & TableLayoutProps & TransformProps & TransformOriginProps & TranslateXProps & TranslateYProps & RotateProps & SkewXProps & SkewYProps & ScaleProps & ScaleXProps & ScaleYProps & TransitionProps & TransitionPropertyProps & TransitionDurationProps & TransitionTimingFunctionProps & TransitionDelayProps & FontFamilyProps & FontSizeProps & FontStyleProps & FontWeightProps & LineHeightProps & ColorProps & TextTransformProps & TextDecorationProps & TextAlignProps & VerticalAlignProps & LetterSpacingProps & WhiteSpaceProps & TextOverflowProps & ListStyleTypeProps & ListStylePositionProps & WordBreakProps & ThemingProps<"Button"> & {
-  colorScheme?: string;
-  dropDownIcon?: IconProp;
-  icon?: IconProp | react.JSX.Element;
-  iconLeft?: IconProp | react.JSX.Element;
-  iconRight?: IconProp | react.JSX.Element;
-  isActive?: boolean;
-  isDropDown?: boolean;
-  isElevated?: boolean;
-  isFullWidth?: boolean;
-  isLoading?: boolean;
-  isRound?: boolean;
-  isSplit?: boolean;
-  state?: ButtonState;
-  stateMapping?: ButtonStateMapping;
-  text?: React.ReactNode;
-}, never>;
+declare const ButtonBase: styled_components_dist_types0.IStyledComponentBase<"web", styled_components_dist_types0.Substitute<any, ButtonProps>> & string;
 /**
- * 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.
  */
 declare const Button: VuiComponent<"button", ButtonProps> & {
   Icon: typeof ButtonIcon;

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

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","names":[],"sources":["../../src/button/button.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;cAiCa,UAAA,qBAAU,eAAA,WAsCtB,kBAAA,CAtCsB,YAAA,EAAA,cAAA,GAAA,oBAAA,GAAA,WAAA,GAAA,cAAA,GAAA,gBAAA,GAAA,iBAAA,GAAA,eAAA,GAAA,gBAAA,GAAA,mBAAA,GAAA,qBAAA,GAAA,sBAAA,GAAA,oBAAA,GAAA,gBAAA,GAAA,mBAAA,GAAA,qBAAA,GAAA,sBAAA,GAAA,oBAAA,GAAA,gBAAA,GAAA,iBAAA,GAAA,YAAA,GAAA,iBAAA,GAAA,iBAAA,GAAA,iBAAA,GAAA,YAAA,GAAA,YAAA,GAAA,mBAAA,GAAA,mBAAA,GAAA,gBAAA,GAAA,gBAAA,GAAA,SAAA,GAAA,cAAA,GAAA,YAAA,GAAA,cAAA,GAAA,eAAA,GAAA,YAAA,GAAA,eAAA,GAAA,iBAAA,GAAA,mBAAA,GAAA,iBAAA,GAAA,aAAA,GAAA,aAAA,GAAA,eAAA,GAAA,cAAA,GAAA,kBAAA,GAAA,SAAA,GAAA,gBAAA,GAAA,cAAA,GAAA,UAAA,GAAA,QAAA,GAAA,QAAA,GAAA,QAAA,GAAA,cAAA,GAAA,WAAA,GAAA,eAAA,GAAA,YAAA,GAAA,iBAAA,GAAA,oBAAA,GAAA,iBAAA,GAAA,wBAAA,GAAA,qBAAA,GAAA,sBAAA,GAAA,aAAA,GAAA,eAAA,GAAA,WAAA,GAAA,kBAAA,GAAA,WAAA,GAAA,eAAA,GAAA,gBAAA,GAAA,UAAA,GAAA,cAAA,GAAA,aAAA,GAAA,cAAA,GAAA,cAAA,GAAA,aAAA,GAAA,WAAA,GAAA,QAAA,GAAA,UAAA,GAAA,WAAA,GAAA,SAAA,GAAA,eAAA,GAAA,uBAAA,GAAA,cAAA,GAAA,aAAA,GAAA,UAAA,GAAA,WAAA,GAAA,aAAA,GAAA,cAAA,GAAA,aAAA,GAAA,cAAA,GAAA,WAAA,GAAA,cAAA,GAAA,gBAAA,GAAA,iBAAA,GAAA,eAAA,GAAA,YAAA,GAAA,YAAA,GAAA,YAAA,GAAA,eAAA,GAAA,iBAAA,GAAA,kBAAA,GAAA,gBAAA,GAAA,aAAA,GAAA,aAAA,GAAA,WAAA,GAAA,WAAA,GAAA,kBAAA,GAAA,kBAAA,GAAA,mBAAA,GAAA,gBAAA,GAAA,cAAA,GAAA,oBAAA,GAAA,eAAA,GAAA,eAAA,GAAA,WAAA,GAAA,UAAA,GAAA,UAAA,GAAA,UAAA,GAAA,WAAA,GAAA,WAAA,GAAA,eAAA,GAAA,uBAAA,GAAA,uBAAA,GAAA,6BAAA,GAAA,oBAAA,GAAA,eAAA,GAAA,aAAA,GAAA,cAAA,GAAA,eAAA,GAAA,eAAA,GAAA,UAAA,GAAA,kBAAA,GAAA,mBAAA,GAAA,cAAA,GAAA,kBAAA,GAAA,kBAAA,GAAA,eAAA,GAAA,iBAAA,GAAA,kBAAA,GAAA,sBAAA,GAAA,cAAA,GAAA,YAAA;;iBAAA,QAAA;;;;;;;;;;;;;;;;;;;;;;cAiMV,MAAA,EA6JP,YAAA,WAAuB,WAAA;EAC3B,IAAA,SAAa,UAAA;EACb,IAAA,SAAa,UAAA;AAAA"}
+{"version":3,"file":"button.d.ts","names":[],"sources":["../../src/button/button.tsx"],"mappings":";;;;;;;cAwBa,UAAA,EAAU,6BAAA,CAAA,oBAAA,QAAA,6BAAA,CAAA,UAAA,MAAA,WAAA;;;;AAAvB;;;;cAyBa,MAAA,EAuLP,YAAA,WAAuB,WAAA;EAC3B,IAAA,SAAa,UAAA;EACb,IAAA,SAAa,UAAA;AAAA"}

package/dist/button/button.js

@@ -1,285 +1,168 @@
-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
-	]);
-};
 /**
-* 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, isRound = false, isTruncated = false, size, text, title, variant: variantProp, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...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 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,
+		isRound,
+		isElevated,
+		hasTextContent,
+		hasStartIcon,
+		hasEndIcon,
+		isFullWidth,
+		className,
+		variantProp
+	});
 	const contextValue = useMemo(() => filterUndefined({
 		disabled,
 		size,
-		variant: variant.variant
+		variant: variantForTheme.variant,
+		intent: intentProp,
+		isDropDown,
+		hasTextContent
 	}), [
 		disabled,
 		size,
-		variant.variant
+		variantForTheme.variant,
+		intentProp,
+		isDropDown,
+		hasTextContent
+	]);
+	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": ariaLabel,
+			"aria-labelledby": ariaLabelledby,
+			"aria-busy": isLoading ? true : void 0,
+			"aria-haspopup": isDropDown ? true : void 0,
+			focusRing: FOCUS_RING_SIZE,
+			gap: gapValue,
+			pl: plValue,
+			pr: prValue,
+			pt: ptValue,
+			pb: pbValue,
+			ref,
+			title: title || void 0,
+			type: BUTTON_TYPE,
+			variant: finalVariant,
+			...propsWithVars,
+			...computed.aliasedProps
+		}), [
+			borderWidth,
+			plValue,
+			prValue,
+			ptValue,
+			pbValue,
+			gapValue,
+			computed.buttonClassName,
+			disabled,
+			ariaLabel,
+			ariaLabelledby,
+			isDropDown,
+			ref,
+			title,
+			isLoading,
+			finalVariant
+		]),
+		...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();
-	}, []);
+	const leftIcon = renderButtonIcon(resolvedStartIcon ?? icon, "left", isLoading);
+	const rightIcon = renderButtonIcon(endIcon, "right");
+	const contentElement = renderContent(children, text, isTruncated);
 	return /* @__PURE__ */ jsx(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
-			] })] })]
+			...finalProps,
+			children: [
+				leftIcon,
+				contentElement,
+				rightIcon
+			]
 		})
 	});
 });
@@ -289,5 +172,5 @@ Button.displayName = "Button";
 
 //#endregion
 export { ButtonBase, Button as default };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# 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":"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"}
+{"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// ---------------------------------------------------------------------------\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    isRound = false,\n    isTruncated = false,\n    size,\n    text,\n    title,\n    variant: variantProp,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    ...rest\n  } = mergedProps\n\n  // Non-memoized calculations (trivial expressions — no memo benefit)\n  const hasTextContent = Boolean(children || text)\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    isRound,\n    isElevated,\n    hasTextContent,\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      }),\n    [disabled, size, variantForTheme.variant, intentProp, isDropDown, hasTextContent],\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': ariaLabel,\n      'aria-labelledby': ariaLabelledby,\n      'aria-busy': 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      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      disabled,\n      ariaLabel,\n      ariaLabelledby,\n      isDropDown,\n      ref,\n      title,\n      isLoading,\n      finalVariant,\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  const contentElement = renderContent(children, text, isTruncated)\n\n  return (\n    <ButtonProvider value={contextValue}>\n      <ButtonBase {...finalProps}>\n        {leftIcon}\n        {contentElement}\n        {rightIcon}\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":"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"}