@veracity/vui 4.1.0 → 5.0.0-alpha.0

package/dist/button/button.types.d.ts

@@ -1,38 +1,160 @@
 import { AnyString } from "../utils/types.js";
 import "../utils/index.js";
 import { ThemingProps } from "../theme/types.js";
+import "../theme/index.js";
 import { SystemProps } from "../system/system.js";
 import "../system/index.js";
-import { IconProp, IconProps } from "../icon/icon.types.js";
+import { IconProp } from "../icon/icon.types.js";
 import "../icon/index.js";
 import { JSX } from "react";
 
 //#region src/button/button.types.d.ts
+/** Visual hierarchy (weight) of the button. */
+type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
+/** Semantic intent / colour family of the button. */
+type ButtonIntent = 'brand' | 'contrast' | 'success' | 'danger' | 'warning';
+/** Union of all fully-qualified legacy variant keys (backward-compat). */
+type ButtonVariantLegacy = 'primaryBrand' | 'secondaryBrand' | 'tertiaryBrand' | 'primaryContrast' | 'secondaryContrast' | 'tertiaryContrast' | 'primarySuccess' | 'secondarySuccess' | 'tertiarySuccess' | 'primaryDanger' | 'secondaryDanger' | 'tertiaryDanger';
+/** Token block per intent used by the generated theme approach. */
+interface IntentTokens {
+  solid: string;
+  solidInverse: string;
+  solidHover: string;
+  solidPressed: string;
+  subtleHover: string;
+  subtlePressed: string;
+}
+/** Shape of a single container token object in a theme variant. */
+interface ContainerStyles {
+  bg?: string;
+  borderColor?: string;
+  color?: string;
+  hoverBg?: string;
+  hoverBorderColor?: string;
+  hoverColor?: string;
+  activeBg?: string;
+  activeBorderColor?: string;
+  activeColor?: string;
+  borderRadius?: string | number;
+  /** Outer horizontal padding (px). Used instead of the legacy `spaceX` formula. */
+  paddingX?: number;
+  /** Outer horizontal padding (px) when an icon is present. Falls back to paddingX if not set. */
+  paddingXIcon?: number;
+  /** Outer vertical padding (px). Combined with borderWidth to derive CSS pt/pb. */
+  paddingY?: number;
+  /** Gap between icon and text (px). */
+  gapX?: number;
+  [key: string]: unknown;
+}
 type ButtonProps = SystemProps & ThemingProps<'Button'> & {
-  /** Deprecated. Please use variant instead. @deprecated  */colorScheme?: string; /** Icon for the drop-down element. @default falAngleDown */
-  dropDownIcon?: IconProp; /** Icon that replaces any other content. */
-  icon?: IconProp | JSX.Element; /** Socket displaying icon on the left side. */
-  iconLeft?: IconProp | JSX.Element; /** Socket displaying icon on the right side. */
+  /**
+   * Semantic intent (colour family) of the button. Used together with `variant`.
+   * When both are set the resolved theme key is `${variant}${Intent}` (e.g. `primaryBrand`).
+   * Accepts the canonical intent names or any string for custom/future intents.
+   */
+  intent?: ButtonIntent | AnyString;
+  /**
+   * Visual hierarchy of the button.
+   * Accepts the canonical hierarchy values (`'primary' | 'secondary' | 'tertiary'`),
+   * the fully-qualified legacy keys (`'primaryBrand'` etc.), or any custom string.
+   */
+  variant?: ButtonVariant | ButtonVariantLegacy | AnyString; /** Deprecated. Please use variant instead. @deprecated  */
+  colorScheme?: string; /** Icon for the drop-down element. @default 'uiAngleDown' */
+  dropDownIcon?: IconProp; /** Icon for icon-only buttons (no text content). */
+  icon?: IconProp | JSX.Element; /** Icon displayed on the leading (left) side of the button content. */
+  startIcon?: IconProp | JSX.Element; /** Icon displayed on the trailing (right) side of the button content. */
+  endIcon?: IconProp | JSX.Element; /** Deprecated alias for `startIcon`. @deprecated */
+  iconLeft?: IconProp | JSX.Element; /** Deprecated alias for `endIcon`. @deprecated */
   iconRight?: IconProp | JSX.Element; /** Adds an active class name for further handling. */
-  isActive?: boolean; /** Adds an drop down pointer to the left. */
+  isActive?: boolean; /** Adds a drop-down chevron indicator to the trailing (right) side of the button. */
   isDropDown?: boolean; /** Adds box shadow style. @default false */
   isElevated?: boolean; /** Makes the button take full width of the container. @deprecated */
   isFullWidth?: boolean; /** Replaces content with a loading spinner. @default false */
-  isLoading?: boolean; /** Rounds the borders. @default false */
-  isRound?: boolean; /** Separates right icon from the content. @deprecated */
-  isSplit?: boolean; /** Modifies Button style and content based on the given state. */
-  state?: ButtonState; /** Object definition of styles and content for each state. */
-  stateMapping?: ButtonStateMapping; /** Socket placing text as alternative to children. */
+  isLoading?: boolean;
+  /**
+   * Text announced to screen readers when the button is in a loading state.
+   * Rendered in a visually-hidden ARIA live region to meet WCAG requirements for
+   * status messages (for example, WCAG 2.1 4.1.3 Status Messages).
+   * @default 'Loading'
+   */
+  loadingText?: string; /** Rounds the borders. @default false */
+  isRound?: boolean;
+  /**
+   * Separates right icon from the content.
+   * @deprecated Has no effect and will be removed in VUI 5.x.
+   */
+  isSplit?: boolean; /** Socket placing text as alternative to children. */
   text?: React.ReactNode;
 };
-type ButtonState = 'error' | 'idle' | 'loading' | 'success' | AnyString;
-type ButtonStateMapping = Record<string, SystemProps & {
-  variant: ButtonProps['variant'];
-  iconProps: IconProps;
-}>;
 /** Narrower prop definition for IconButton component */
-type IconButtonProps = Omit<ButtonProps, 'iconLeft' | 'iconRight' | 'text'>;
+type IconButtonProps = Omit<ButtonProps, 'text'>;
+/** @internal Resolved container token block as extracted from useStyleConfig. */
+interface ButtonStyleContainer {
+  borderWidth?: number;
+  h?: number;
+  minW?: number;
+  spaceX?: number;
+  disabledBg?: string;
+  disabledBorderColor?: string;
+  disabledColor?: string;
+  disabledOpacity?: number;
+  activeBg?: string;
+  activeBorderColor?: string;
+  activeColor?: string;
+  borderRadius?: number | string;
+  [key: string]: unknown;
+}
+/** @internal Normalised colour tokens after fallback resolution in useButtonComputed. */
+interface ButtonComputedStyles {
+  bg?: string;
+  borderColor?: string;
+  color?: string;
+  hoverBg?: string;
+  hoverBorderColor?: string;
+  hoverColor?: string;
+  activeBg?: string;
+  activeBorderColor?: string;
+  activeColor?: string;
+  [key: string]: unknown;
+}
+/** @internal Computed padding/border values for a single render pass. */
+interface SpacingProps {
+  borderWidth: number;
+  pl: string;
+  pr: string;
+  pt: string;
+  pb: string;
+  gap: string;
+}
+/** @internal Full return value of the useButtonComputed hook. */
+interface ComputedResult {
+  buttonStyles: ButtonComputedStyles;
+  spacing: SpacingProps;
+  disabledProps: SystemProps;
+  activeProps: SystemProps;
+  aliasedProps: SystemProps;
+  buttonClassName: string;
+}
+/** @internal Options bag accepted by the useButtonComputed hook. */
+interface ButtonComputedOptions {
+  size: string | undefined;
+  variant: {
+    variant?: string;
+  };
+  intentProp: string | undefined;
+  borderWidthProp: unknown;
+  disabled: boolean;
+  isActive: boolean;
+  isIconOnly: boolean;
+  isRound: boolean;
+  isElevated: boolean;
+  hasStartIcon: boolean;
+  hasEndIcon: boolean;
+  isFullWidth: boolean;
+  className: string | undefined;
+  variantProp: string | undefined;
+}
 //#endregion
-export { ButtonProps, ButtonState, ButtonStateMapping, IconButtonProps };
+export { ButtonComputedOptions, ButtonComputedStyles, ButtonIntent, ButtonProps, ButtonStyleContainer, ButtonVariant, ButtonVariantLegacy, ComputedResult, ContainerStyles, IconButtonProps, IntentTokens, SpacingProps };
 
 //# sourceMappingURL=button.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"button.types.d.ts","names":[],"sources":["../../src/button/button.types.ts"],"mappings":";;;;;;;;;;KAOY,WAAA,GAAc,WAAA,GACxB,YAAA;6DAEE,WAAA;EAEA,YAAA,GAAe,QAAA,EALP;EAOR,IAAA,GAAO,QAAA,GAAW,GAAA,CAAI,OAAA;EAEtB,QAAA,GAAW,QAAA,GAAW,GAAA,CAAI,OAAA,EAR5B;EAUE,SAAA,GAAY,QAAA,GAAW,GAAA,CAAI,OAAA,EAJpB;EAMP,QAAA,YAJW;EAMX,UAAA,YAJY;EAMZ,UAAA,YAUQ;EARR,WAAA,YAYO;EAVP,SAAA,YAUsB;EARtB,OAAA,YAtBF;EAwBE,OAAA,YApBA;EAsBA,KAAA,GAAQ,WAAA,EApBR;EAsBA,YAAA,GAAe,kBAAA,EAtBG;EAwBlB,IAAA,GAAO,KAAA,CAAM,SAAA;AAAA;AAAA,KAGL,WAAA,8CAAyD,SAAA;AAAA,KAEzD,kBAAA,GAAqB,MAAA,SAAe,WAAA;EAAgB,OAAA,EAAS,WAAA;EAAwB,SAAA,EAAW,SAAA;AAAA;;KAGhG,eAAA,GAAkB,IAAA,CAAK,WAAA"}
+{"version":3,"file":"button.types.d.ts","names":[],"sources":["../../src/button/button.types.ts"],"mappings":";;;;;;;;;;;;KAYY,aAAA;;KAGA,YAAA;;KAGA,mBAAA;AANZ;AAAA,UAqBiB,YAAA;EACf,KAAA;EACA,YAAA;EACA,UAAA;EACA,YAAA;EACA,WAAA;EACA,aAAA;AAAA;;UAIe,eAAA;EACf,EAAA;EACA,WAAA;EACA,KAAA;EACA,OAAA;EACA,gBAAA;EACA,UAAA;EACA,QAAA;EACA,iBAAA;EACA,WAAA;EACA,YAAA;EAjBA;EAmBA,QAAA;EAjBA;EAmBA,YAAA;EAlBa;EAoBb,QAAA;EAhBe;EAkBf,IAAA;EAAA,CACC,GAAA;AAAA;AAAA,KAKS,WAAA,GAAc,WAAA,GACxB,YAAA;EAvBA;;;;;EA6BE,MAAA,GAAS,YAAA,GAAe,SAAA;EAvB1B;;;;;EA6BE,OAAA,GAAU,aAAA,GAAgB,mBAAA,GAAsB,SAAA,EAnBlD;EAqBE,WAAA,WApBU;EAsBV,YAAA,GAAe,QAAA,EAjBP;EAmBR,IAAA,GAAO,QAAA,GAAW,GAAA,CAAI,OAAA;EAEtB,SAAA,GAAY,QAAA,GAAW,GAAA,CAAI,OAAA,EApB7B;EAsBE,OAAA,GAAU,QAAA,GAAW,GAAA,CAAI,OAAA,EAhBD;EAkBxB,QAAA,GAAW,QAAA,GAAW,GAAA,CAAI,OAAA,EAZA;EAc1B,SAAA,GAAY,QAAA,GAAW,GAAA,CAAI,OAAA,EAVZ;EAYf,QAAA,YAVkB;EAYlB,UAAA,YAVuB;EAYvB,UAAA,YAVqB;EAYrB,WAAA,YAVsB;EAYtB,SAAA;EAVuB;;;;;;EAiBvB,WAAA,WArCS;EAuCT,OAAA;EAjCA;;;;EAsCA,OAAA,YAlCA;EAoCA,IAAA,GAAO,KAAA,CAAM,SAAA;AAAA;;KAIL,eAAA,GAAkB,IAAA,CAAK,WAAA;;UAQlB,oBAAA;EACf,WAAA;EACA,CAAA;EACA,IAAA;EACA,MAAA;EACA,UAAA;EACA,mBAAA;EACA,aAAA;EACA,eAAA;EACA,QAAA;EACA,iBAAA;EACA,WAAA;EACA,YAAA;EAAA,CACC,GAAA;AAAA;;UAIc,oBAAA;EACf,EAAA;EACA,WAAA;EACA,KAAA;EACA,OAAA;EACA,gBAAA;EACA,UAAA;EACA,QAAA;EACA,iBAAA;EACA,WAAA;EAAA,CACC,GAAA;AAAA;;UAIc,YAAA;EACf,WAAA;EACA,EAAA;EACA,EAAA;EACA,EAAA;EACA,EAAA;EACA,GAAA;AAAA;;UAIe,cAAA;EACf,YAAA,EAAc,oBAAA;EACd,OAAA,EAAS,YAAA;EACT,aAAA,EAAe,WAAA;EACf,WAAA,EAAa,WAAA;EACb,YAAA,EAAc,WAAA;EACd,eAAA;AAAA;;UAIe,qBAAA;EACf,IAAA;EACA,OAAA;IAAW,OAAA;EAAA;EACX,UAAA;EACA,eAAA;EACA,QAAA;EACA,QAAA;EACA,UAAA;EACA,OAAA;EACA,UAAA;EACA,YAAA;EACA,UAAA;EACA,WAAA;EACA,SAAA;EACA,WAAA;AAAA"}

package/dist/button/buttonHelpers.js

@@ -0,0 +1,48 @@
+import { isReactText, isString } from "../utils/assertion.js";
+import ButtonIcon from "./buttonIcon.js";
+import ButtonText from "./buttonText.js";
+import { loadingIconProps } from "./consts.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/button/buttonHelpers.tsx
+/**
+* Unified icon renderer for all button icon positions.
+* Converts string icon names to ButtonIcon components with appropriate margins.
+*
+* @param iconProp - Icon name string or React element
+* @param position - Icon position: 'main' (center), 'left', or 'right'
+* @param isLoading - Whether to show loading spinner (only applies to left position)
+* @returns Rendered icon or null
+*/
+const renderButtonIcon = (iconProp, position, isLoading = false) => {
+	if (position === "left" && isLoading) return /* @__PURE__ */ jsx(ButtonIcon, { ...loadingIconProps });
+	if (!iconProp) return null;
+	if (!isString(iconProp)) return iconProp;
+	return /* @__PURE__ */ jsx(ButtonIcon, { name: iconProp });
+};
+/**
+* Renders the button content (text or children).
+* Wraps text strings in ButtonText component with optional truncation.
+*
+* @param children - React children content
+* @param text - Text string to render
+* @param isTruncated - Whether to enable text truncation
+* @returns Rendered content
+*/
+const renderContent = (children, text, isTruncated) => {
+	if (children) return children;
+	if (isReactText(text)) return /* @__PURE__ */ jsx(ButtonText, {
+		isTruncated,
+		text
+	});
+	if (text) return /* @__PURE__ */ jsx(ButtonText, {
+		isTruncated,
+		children: text
+	});
+	return null;
+};
+
+//#endregion
+export { renderButtonIcon, renderContent };
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
+//# sourceMappingURL=buttonHelpers.js.map

package/dist/button/buttonHelpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttonHelpers.js","names":[],"sources":["../../src/button/buttonHelpers.tsx"],"sourcesContent":["import type { IconProp } from '../icon'\nimport { isReactText, isString } from '../utils'\nimport ButtonIcon from './buttonIcon'\nimport ButtonText from './buttonText'\nimport { loadingIconProps } from './consts'\n\n/**\n * Unified icon renderer for all button icon positions.\n * Converts string icon names to ButtonIcon components with appropriate margins.\n *\n * @param iconProp - Icon name string or React element\n * @param position - Icon position: 'main' (center), 'left', or 'right'\n * @param isLoading - Whether to show loading spinner (only applies to left position)\n * @returns Rendered icon or null\n */\nexport const renderButtonIcon = (\n  iconProp: IconProp | React.ReactElement | undefined,\n  position: 'left' | 'right',\n  isLoading: boolean = false,\n): React.ReactElement | null => {\n  if (position === 'left' && isLoading) {\n    return <ButtonIcon {...loadingIconProps} />\n  }\n\n  if (!iconProp) return null\n\n  // JSX element icons are returned as-is — no wrapper\n  if (!isString(iconProp)) return iconProp as React.ReactElement\n\n  return <ButtonIcon name={iconProp} />\n}\n\n/**\n * Renders the button content (text or children).\n * Wraps text strings in ButtonText component with optional truncation.\n *\n * @param children - React children content\n * @param text - Text string to render\n * @param isTruncated - Whether to enable text truncation\n * @returns Rendered content\n */\nexport const renderContent = (\n  children: React.ReactNode,\n  text: React.ReactNode,\n  isTruncated: boolean,\n): React.ReactNode => {\n  if (children) return children\n  // isReactText covers string/number; the second branch wraps JSX/complex nodes via children\n  if (isReactText(text)) return <ButtonText isTruncated={isTruncated} text={text} />\n  if (text) return <ButtonText isTruncated={isTruncated}>{text}</ButtonText>\n  return null\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAeA,MAAa,oBACX,UACA,UACA,YAAqB,UACS;AAC9B,KAAI,aAAa,UAAU,UACzB,QAAO,oBAAC,cAAW,GAAI,mBAAoB;AAG7C,KAAI,CAAC,SAAU,QAAO;AAGtB,KAAI,CAAC,SAAS,SAAS,CAAE,QAAO;AAEhC,QAAO,oBAAC,cAAW,MAAM,WAAY;;;;;;;;;;;AAYvC,MAAa,iBACX,UACA,MACA,gBACoB;AACpB,KAAI,SAAU,QAAO;AAErB,KAAI,YAAY,KAAK,CAAE,QAAO,oBAAC;EAAwB;EAAmB;GAAQ;AAClF,KAAI,KAAM,QAAO,oBAAC;EAAwB;YAAc;GAAkB;AAC1E,QAAO"}

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

@@ -1 +1 @@
-{"version":3,"file":"buttonIcon.d.ts","names":[],"sources":["../../src/button/buttonIcon.tsx"],"mappings":";;;;;;;cASa,UAAA,EAAU,YAAA,QAAA,SAAA"}
+{"version":3,"file":"buttonIcon.d.ts","names":[],"sources":["../../src/button/buttonIcon.tsx"],"mappings":";;;;;;;cAWa,UAAA,EAAU,YAAA,QAAA,SAAA"}

package/dist/button/buttonIcon.js

@@ -3,6 +3,7 @@ import { useStyleConfig } from "../core/theme.js";
 import vui from "../core/vui.js";
 import Icon from "../icon/icon.js";
 import { useButtonContext } from "./context.js";
+import { useEffect } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/button/buttonIcon.tsx
@@ -11,12 +12,18 @@ const isConceptualIcon = (name) => name?.startsWith("con");
 const ButtonIcon = vui((props, ref) => {
 	const { className, name, ...rest } = props;
 	const styles = useStyleConfig("Button", useButtonContext());
-	const verifiedName = isConceptualIcon(name) ? void 0 : name;
+	useEffect(() => {
+		if (isConceptualIcon(name)) console.warn(`[ButtonIcon] Conceptual icon "${name}" is not supported inside a Button. Use a UI icon (name starting with "ui") instead.`);
+	}, [name]);
+	if (isConceptualIcon(name)) return null;
+	const iconSize = `var(--vui-button-icon-size, ${styles.icon?.fontSize || "1rem"})`;
 	return /* @__PURE__ */ jsx(Icon, {
 		className: cs("vui-buttonIcon", className),
-		name: verifiedName,
+		fontSize: iconSize,
+		h: iconSize,
+		w: iconSize,
+		name,
 		ref,
-		...styles.icon,
 		...rest
 	});
 });
@@ -24,5 +31,5 @@ ButtonIcon.displayName = "ButtonIcon";
 
 //#endregion
 export { ButtonIcon as default };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=buttonIcon.js.map

package/dist/button/buttonIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"buttonIcon.js","names":[],"sources":["../../src/button/buttonIcon.tsx"],"sourcesContent":["import { useStyleConfig, vui } from '../core'\nimport type { IconProp, IconProps } from '../icon'\nimport Icon from '../icon'\nimport { cs } from '../utils'\nimport { useButtonContext } from './context'\n\nconst isConceptualIcon = (name?: IconProp) => name?.startsWith('con')\n\n/** Displays an icon within the Button. */\nexport const ButtonIcon = vui<'svg', IconProps>((props, ref) => {\n  const { className, name, ...rest } = props\n  const styles = useStyleConfig('Button', useButtonContext())\n  const verifiedName = isConceptualIcon(name) ? undefined : name\n\n  return <Icon className={cs('vui-buttonIcon', className)} name={verifiedName} ref={ref} {...styles.icon} {...rest} />\n})\n\nButtonIcon.displayName = 'ButtonIcon'\nexport default ButtonIcon\n"],"mappings":";;;;;;;;AAMA,MAAM,oBAAoB,SAAoB,MAAM,WAAW,MAAM;;AAGrE,MAAa,aAAa,KAAuB,OAAO,QAAQ;CAC9D,MAAM,EAAE,WAAW,MAAM,GAAG,SAAS;CACrC,MAAM,SAAS,eAAe,UAAU,kBAAkB,CAAC;CAC3D,MAAM,eAAe,iBAAiB,KAAK,GAAG,SAAY;AAE1D,QAAO,oBAAC;EAAK,WAAW,GAAG,kBAAkB,UAAU;EAAE,MAAM;EAAmB;EAAK,GAAI,OAAO;EAAM,GAAI;GAAQ;EACpH;AAEF,WAAW,cAAc"}
+{"version":3,"file":"buttonIcon.js","names":[],"sources":["../../src/button/buttonIcon.tsx"],"sourcesContent":["import { useEffect } from 'react'\n\nimport { useStyleConfig, vui } from '../core'\nimport type { IconProp, IconProps } from '../icon'\nimport Icon from '../icon'\nimport { cs } from '../utils'\nimport { useButtonContext } from './context'\n\nconst isConceptualIcon = (name?: IconProp) => name?.startsWith('con')\n\n/** Displays an icon within the Button. */\nexport const ButtonIcon = vui<'svg', IconProps>((props, ref) => {\n  const { className, name, ...rest } = props\n  const buttonContext = useButtonContext()\n  const styles = useStyleConfig('Button', buttonContext)\n\n  useEffect(() => {\n    if (process.env.NODE_ENV !== 'production' && isConceptualIcon(name)) {\n      console.warn(\n        `[ButtonIcon] Conceptual icon \"${name}\" is not supported inside a Button. Use a UI icon (name starting with \"ui\") instead.`,\n      )\n    }\n  }, [name])\n\n  if (isConceptualIcon(name)) return null\n\n  const iconSize = `var(--vui-button-icon-size, ${styles.icon?.fontSize || '1rem'})`\n\n  return (\n    <Icon\n      className={cs('vui-buttonIcon', className)}\n      fontSize={iconSize}\n      h={iconSize}\n      w={iconSize}\n      name={name}\n      ref={ref}\n      {...rest}\n    />\n  )\n})\n\nButtonIcon.displayName = 'ButtonIcon'\nexport default ButtonIcon\n"],"mappings":";;;;;;;;;AAQA,MAAM,oBAAoB,SAAoB,MAAM,WAAW,MAAM;;AAGrE,MAAa,aAAa,KAAuB,OAAO,QAAQ;CAC9D,MAAM,EAAE,WAAW,MAAM,GAAG,SAAS;CAErC,MAAM,SAAS,eAAe,UADR,kBAAkB,CACc;AAEtD,iBAAgB;AACd,MAA6C,iBAAiB,KAAK,CACjE,SAAQ,KACN,iCAAiC,KAAK,sFACvC;IAEF,CAAC,KAAK,CAAC;AAEV,KAAI,iBAAiB,KAAK,CAAE,QAAO;CAEnC,MAAM,WAAW,+BAA+B,OAAO,MAAM,YAAY,OAAO;AAEhF,QACE,oBAAC;EACC,WAAW,GAAG,kBAAkB,UAAU;EAC1C,UAAU;EACV,GAAG;EACH,GAAG;EACG;EACD;EACL,GAAI;GACJ;EAEJ;AAEF,WAAW,cAAc"}

package/dist/button/buttonText.js

@@ -22,5 +22,5 @@ ButtonText.displayName = "ButtonText";
 
 //#endregion
 export { ButtonText as default };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=buttonText.js.map

package/dist/button/buttons.d.ts

@@ -4,14 +4,16 @@ import "../index.js";
 
 //#region src/button/buttons.d.ts
 declare const AppButton: VuiComponent<"button", ButtonProps>;
+declare const IconButton: VuiComponent<"button", IconButtonProps>;
 declare const BackButton: VuiComponent<"button", IconButtonProps>;
+declare const DismissButton: VuiComponent<"button", IconButtonProps>;
+/** @deprecated Renamed to `DismissButton`. Will be removed in VUI 5.0. */
 declare const CloseButton: VuiComponent<"button", IconButtonProps>;
 declare const CTAButton: VuiComponent<"button", ButtonProps>;
 declare const DangerButton: VuiComponent<"button", ButtonProps>;
-declare const IconButton: VuiComponent<"button", IconButtonProps>;
 declare const LineButton: VuiComponent<"button", ButtonProps>;
 declare const TextButton: VuiComponent<"button", ButtonProps>;
 //#endregion
-export { AppButton, BackButton, CTAButton, CloseButton, DangerButton, IconButton, LineButton, TextButton };
+export { AppButton, BackButton, CTAButton, CloseButton, DangerButton, DismissButton, IconButton, LineButton, TextButton };
 
 //# sourceMappingURL=buttons.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"buttons.d.ts","names":[],"sources":["../../src/button/buttons.tsx"],"mappings":";;;;;cAIa,SAAA,EAAS,YAAA,WAAA,WAAA;AAAA,cAIT,UAAA,EAAU,YAAA,WAAA,eAAA;AAAA,cAIV,WAAA,EAAW,YAAA,WAAA,eAAA;AAAA,cAIX,SAAA,EAAS,YAAA,WAAA,WAAA;AAAA,cAIT,YAAA,EAAY,YAAA,WAAA,WAAA;AAAA,cAIZ,UAAA,EAAU,YAAA,WAAA,eAAA;AAAA,cAIV,UAAA,EAAU,YAAA,WAAA,WAAA;AAAA,cAIV,UAAA,EAAU,YAAA,WAAA,WAAA"}
+{"version":3,"file":"buttons.d.ts","names":[],"sources":["../../src/button/buttons.tsx"],"mappings":";;;;;cAIa,SAAA,EAAS,YAAA,WAAA,WAAA;AAAA,cAIT,UAAA,EAAU,YAAA,WAAA,eAAA;AAAA,cAKV,UAAA,EAAU,YAAA,WAAA,eAAA;AAAA,cAmBV,aAAA,EAAa,YAAA,WAAA,eAAA;AA5B1B;AAAA,cAkCa,WAAA,EAAW,YAAA,WAAA,eAAA;AAAA,cAEX,SAAA,EAAS,YAAA,WAAA,WAAA;AAAA,cAKT,YAAA,EAAY,YAAA,WAAA,WAAA;AAAA,cAKZ,UAAA,EAAU,YAAA,WAAA,WAAA;AAAA,cAKV,UAAA,EAAU,YAAA,WAAA,WAAA"}

package/dist/button/buttons.js

@@ -1,3 +1,4 @@
+import styled from "../core/styled.js";
 import vui from "../core/vui.js";
 import Button from "./button.js";
 import { jsx } from "react/jsx-runtime";
@@ -5,48 +6,71 @@ import { jsx } from "react/jsx-runtime";
 //#region src/button/buttons.tsx
 const AppButton = vui((props, ref) => /* @__PURE__ */ jsx(Button, {
 	ref,
-	variant: "primaryDark",
+	variant: "primary",
 	...props
 }));
-const BackButton = vui((props, ref) => /* @__PURE__ */ jsx(IconButton, {
-	icon: "uiArrowLeft",
+AppButton.displayName = "AppButton";
+const IconButton = vui((props, ref) => /* @__PURE__ */ jsx(Button, {
 	ref,
-	variant: "tertiaryDark",
+	variant: "secondary",
 	...props
 }));
-const CloseButton = vui((props, ref) => /* @__PURE__ */ jsx(IconButton, {
-	icon: "uiTimes",
+IconButton.displayName = "IconButton";
+const BackButton = vui((props, ref) => /* @__PURE__ */ jsx(IconButton, {
+	startIcon: "uiArrowLeft",
 	ref,
-	variant: "tertiaryDark",
+	variant: "tertiary",
 	...props
 }));
-const CTAButton = vui((props, ref) => /* @__PURE__ */ jsx(Button, {
+BackButton.displayName = "BackButton";
+const DismissButtonBase = styled(IconButton)`
+  --vui-button-border-color: transparent;
+
+  --vui-button-color: var(--vui-dismiss-text, var(--vui-dismiss-fg, var(--vui-feedback-neutral-solid)));
+  --vui-button-hover-color: var(--vui-dismiss-text, var(--vui-dismiss-fg, var(--vui-feedback-neutral-solid)));
+  --vui-button-active-color: var(--vui-dismiss-text, var(--vui-dismiss-fg, var(--vui-feedback-neutral-solid)));
+
+  --vui-button-hover-bg: color-mix(in srgb, var(--vui-dismiss-fg, var(--vui-feedback-neutral-solid)) 20%, transparent);
+  --vui-button-active-bg: color-mix(in srgb, var(--vui-dismiss-fg, var(--vui-feedback-neutral-solid)) 10%, transparent);
+`;
+const DismissButton = vui((props, ref) => /* @__PURE__ */ jsx(DismissButtonBase, {
+	"aria-label": "Dismiss",
+	startIcon: "uiTimes",
 	ref,
-	variant: "solidGreen",
+	variant: "tertiary",
 	...props
 }));
-const DangerButton = vui((props, ref) => /* @__PURE__ */ jsx(Button, {
+DismissButton.displayName = "DismissButton";
+/** @deprecated Renamed to `DismissButton`. Will be removed in VUI 5.0. */
+const CloseButton = DismissButton;
+const CTAButton = vui((props, ref) => /* @__PURE__ */ jsx(Button, {
 	ref,
-	variant: "solidRed",
+	variant: "primary",
+	intent: "success",
 	...props
 }));
-const IconButton = vui((props, ref) => /* @__PURE__ */ jsx(Button, {
+CTAButton.displayName = "CTAButton";
+const DangerButton = vui((props, ref) => /* @__PURE__ */ jsx(Button, {
 	ref,
-	variant: "tertiaryDark",
+	variant: "primary",
+	intent: "danger",
 	...props
 }));
+DangerButton.displayName = "DangerButton";
 const LineButton = vui((props, ref) => /* @__PURE__ */ jsx(Button, {
 	ref,
-	variant: "secondaryDark",
+	variant: "secondary",
 	...props
 }));
+LineButton.displayName = "LineButton";
 const TextButton = vui((props, ref) => /* @__PURE__ */ jsx(Button, {
 	ref,
-	variant: "tertiaryDark",
+	variant: "tertiary",
 	...props
 }));
+TextButton.displayName = "TextButton";
 
 //#endregion
-export { AppButton, BackButton, CTAButton, CloseButton, DangerButton, IconButton, LineButton, TextButton };
-globalThis.__vuiVersion__ = "4.1.0"
+export { AppButton, BackButton, CTAButton, CloseButton, DangerButton, DismissButton, IconButton, LineButton, TextButton };
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=buttons.js.map

package/dist/button/buttons.js.map

@@ -1 +1 @@
-{"version":3,"file":"buttons.js","names":[],"sources":["../../src/button/buttons.tsx"],"sourcesContent":["import { vui } from '../core'\nimport Button from './button'\nimport type { ButtonProps, IconButtonProps } from './button.types'\n\nexport const AppButton = vui<'button', ButtonProps>((props, ref) => (\n  <Button ref={ref} variant=\"primaryDark\" {...props} />\n))\n\nexport const BackButton = vui<'button', IconButtonProps>((props, ref) => (\n  <IconButton icon=\"uiArrowLeft\" ref={ref} variant=\"tertiaryDark\" {...props} />\n))\n\nexport const CloseButton = vui<'button', IconButtonProps>((props, ref) => (\n  <IconButton icon=\"uiTimes\" ref={ref} variant=\"tertiaryDark\" {...props} />\n))\n\nexport const CTAButton = vui<'button', ButtonProps>((props, ref) => (\n  <Button ref={ref} variant=\"solidGreen\" {...props} />\n))\n\nexport const DangerButton = vui<'button', ButtonProps>((props, ref) => (\n  <Button ref={ref} variant=\"solidRed\" {...props} />\n))\n\nexport const IconButton = vui<'button', IconButtonProps>((props, ref) => (\n  <Button ref={ref} variant=\"tertiaryDark\" {...props} />\n))\n\nexport const LineButton = vui<'button', ButtonProps>((props, ref) => (\n  <Button ref={ref} variant=\"secondaryDark\" {...props} />\n))\n\nexport const TextButton = vui<'button', ButtonProps>((props, ref) => (\n  <Button ref={ref} variant=\"tertiaryDark\" {...props} />\n))\n"],"mappings":";;;;;AAIA,MAAa,YAAY,KAA4B,OAAO,QAC1D,oBAAC;CAAY;CAAK,SAAQ;CAAc,GAAI;EAAS,CACrD;AAEF,MAAa,aAAa,KAAgC,OAAO,QAC/D,oBAAC;CAAW,MAAK;CAAmB;CAAK,SAAQ;CAAe,GAAI;EAAS,CAC7E;AAEF,MAAa,cAAc,KAAgC,OAAO,QAChE,oBAAC;CAAW,MAAK;CAAe;CAAK,SAAQ;CAAe,GAAI;EAAS,CACzE;AAEF,MAAa,YAAY,KAA4B,OAAO,QAC1D,oBAAC;CAAY;CAAK,SAAQ;CAAa,GAAI;EAAS,CACpD;AAEF,MAAa,eAAe,KAA4B,OAAO,QAC7D,oBAAC;CAAY;CAAK,SAAQ;CAAW,GAAI;EAAS,CAClD;AAEF,MAAa,aAAa,KAAgC,OAAO,QAC/D,oBAAC;CAAY;CAAK,SAAQ;CAAe,GAAI;EAAS,CACtD;AAEF,MAAa,aAAa,KAA4B,OAAO,QAC3D,oBAAC;CAAY;CAAK,SAAQ;CAAgB,GAAI;EAAS,CACvD;AAEF,MAAa,aAAa,KAA4B,OAAO,QAC3D,oBAAC;CAAY;CAAK,SAAQ;CAAe,GAAI;EAAS,CACtD"}
+{"version":3,"file":"buttons.js","names":[],"sources":["../../src/button/buttons.tsx"],"sourcesContent":["import { styled, vui } from '../core'\nimport Button from './button'\nimport type { ButtonProps, IconButtonProps } from './button.types'\n\nexport const AppButton = vui<'button', ButtonProps>((props, ref) => <Button ref={ref} variant=\"primary\" {...props} />)\nAppButton.displayName = 'AppButton'\n\n// Declared before DismissButton so styled(IconButton) can reference it at module-eval time.\nexport const IconButton = vui<'button', IconButtonProps>((props, ref) => (\n  <Button ref={ref} variant=\"secondary\" {...props} />\n))\nIconButton.displayName = 'IconButton'\n\nexport const BackButton = vui<'button', IconButtonProps>((props, ref) => (\n  <IconButton startIcon=\"uiArrowLeft\" ref={ref} variant=\"tertiary\" {...props} />\n))\nBackButton.displayName = 'BackButton'\n\n// Styled wrapper that injects dismiss-specific CSS variable defaults as a class rule.\n// --vui-dismiss-fg is read via CSS inheritance from any ancestor that sets it.\n// --vui-dismiss-text lets consumers override icon color only, without affecting bg tints.\nconst DismissButtonBase = styled(IconButton)`\n  --vui-button-border-color: transparent;\n\n  --vui-button-color: var(--vui-dismiss-text, var(--vui-dismiss-fg, var(--vui-feedback-neutral-solid)));\n  --vui-button-hover-color: var(--vui-dismiss-text, var(--vui-dismiss-fg, var(--vui-feedback-neutral-solid)));\n  --vui-button-active-color: var(--vui-dismiss-text, var(--vui-dismiss-fg, var(--vui-feedback-neutral-solid)));\n\n  --vui-button-hover-bg: color-mix(in srgb, var(--vui-dismiss-fg, var(--vui-feedback-neutral-solid)) 20%, transparent);\n  --vui-button-active-bg: color-mix(in srgb, var(--vui-dismiss-fg, var(--vui-feedback-neutral-solid)) 10%, transparent);\n`\n\nexport const DismissButton = vui<'button', IconButtonProps>((props, ref) => (\n  <DismissButtonBase aria-label=\"Dismiss\" startIcon=\"uiTimes\" ref={ref} variant=\"tertiary\" {...props} />\n))\nDismissButton.displayName = 'DismissButton'\n\n/** @deprecated Renamed to `DismissButton`. Will be removed in VUI 5.0. */\nexport const CloseButton = DismissButton\n\nexport const CTAButton = vui<'button', ButtonProps>((props, ref) => (\n  <Button ref={ref} variant=\"primary\" intent=\"success\" {...props} />\n))\nCTAButton.displayName = 'CTAButton'\n\nexport const DangerButton = vui<'button', ButtonProps>((props, ref) => (\n  <Button ref={ref} variant=\"primary\" intent=\"danger\" {...props} />\n))\nDangerButton.displayName = 'DangerButton'\n\nexport const LineButton = vui<'button', ButtonProps>((props, ref) => (\n  <Button ref={ref} variant=\"secondary\" {...props} />\n))\nLineButton.displayName = 'LineButton'\n\nexport const TextButton = vui<'button', ButtonProps>((props, ref) => <Button ref={ref} variant=\"tertiary\" {...props} />)\nTextButton.displayName = 'TextButton'\n"],"mappings":";;;;;;AAIA,MAAa,YAAY,KAA4B,OAAO,QAAQ,oBAAC;CAAY;CAAK,SAAQ;CAAU,GAAI;EAAS,CAAC;AACtH,UAAU,cAAc;AAGxB,MAAa,aAAa,KAAgC,OAAO,QAC/D,oBAAC;CAAY;CAAK,SAAQ;CAAY,GAAI;EAAS,CACnD;AACF,WAAW,cAAc;AAEzB,MAAa,aAAa,KAAgC,OAAO,QAC/D,oBAAC;CAAW,WAAU;CAAmB;CAAK,SAAQ;CAAW,GAAI;EAAS,CAC9E;AACF,WAAW,cAAc;AAKzB,MAAM,oBAAoB,OAAO,WAAW;;;;;;;;;;AAW5C,MAAa,gBAAgB,KAAgC,OAAO,QAClE,oBAAC;CAAkB,cAAW;CAAU,WAAU;CAAe;CAAK,SAAQ;CAAW,GAAI;EAAS,CACtG;AACF,cAAc,cAAc;;AAG5B,MAAa,cAAc;AAE3B,MAAa,YAAY,KAA4B,OAAO,QAC1D,oBAAC;CAAY;CAAK,SAAQ;CAAU,QAAO;CAAU,GAAI;EAAS,CAClE;AACF,UAAU,cAAc;AAExB,MAAa,eAAe,KAA4B,OAAO,QAC7D,oBAAC;CAAY;CAAK,SAAQ;CAAU,QAAO;CAAS,GAAI;EAAS,CACjE;AACF,aAAa,cAAc;AAE3B,MAAa,aAAa,KAA4B,OAAO,QAC3D,oBAAC;CAAY;CAAK,SAAQ;CAAY,GAAI;EAAS,CACnD;AACF,WAAW,cAAc;AAEzB,MAAa,aAAa,KAA4B,OAAO,QAAQ,oBAAC;CAAY;CAAK,SAAQ;CAAW,GAAI;EAAS,CAAC;AACxH,WAAW,cAAc"}

package/dist/button/consts.js

@@ -1,31 +1,40 @@
 //#region src/button/consts.ts
+const DEFAULT_BORDER_WIDTH = 1;
+const DEFAULT_BOX_SHADOW = "md";
 const loadingIconProps = {
 	animation: "vui-spin 0.6s linear infinite",
-	name: "fadSpinnerThird",
-	pathFill: ["", "transparent"]
+	name: "uiSpinnerThird",
+	pathFill: ["currentColor", "transparent"]
 };
-const buttonStateMapping = {
-	error: {
-		variant: "solidRed",
-		iconProps: {
-			animation: "fadeDown",
-			icon: "uiTimesCircle"
-		}
+const CSS_VAR_MAPPINGS = {
+	base: {
+		bg: "--vui-button-bg",
+		borderColor: "--vui-button-border-color",
+		color: "--vui-button-color",
+		hoverBg: "--vui-button-hover-bg",
+		hoverBorderColor: "--vui-button-hover-border-color",
+		hoverColor: "--vui-button-hover-color",
+		activeBg: "--vui-button-active-bg",
+		activeBorderColor: "--vui-button-active-border-color",
+		activeColor: "--vui-button-active-color"
 	},
-	loading: {
-		variant: "primaryDark",
-		iconProps: loadingIconProps
+	active: {
+		bg: "--vui-button-active-bg",
+		borderColor: "--vui-button-active-border-color",
+		color: "--vui-button-active-color",
+		hoverBg: "--vui-button-active-hover-bg",
+		hoverBorderColor: "--vui-button-active-hover-border-color",
+		hoverColor: "--vui-button-active-hover-color"
 	},
-	success: {
-		variant: "solidGreen",
-		iconProps: {
-			animation: "fadeDown",
-			icon: "uiCheckCircle"
-		}
+	disabled: {
+		bg: "--vui-button-disabled-bg",
+		borderColor: "--vui-button-disabled-border-color",
+		color: "--vui-button-disabled-color",
+		opacity: "--vui-button-disabled-opacity"
 	}
 };
 
 //#endregion
-export { buttonStateMapping, loadingIconProps };
-globalThis.__vuiVersion__ = "4.1.0"
+export { CSS_VAR_MAPPINGS, DEFAULT_BORDER_WIDTH, DEFAULT_BOX_SHADOW, loadingIconProps };
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=consts.js.map

package/dist/button/consts.js.map

@@ -1 +1 @@
-{"version":3,"file":"consts.js","names":[],"sources":["../../src/button/consts.ts"],"sourcesContent":["import type { ButtonStateMapping } from './button.types'\n\nexport const loadingIconProps = {\n  animation: 'vui-spin 0.6s linear infinite',\n  name: 'fadSpinnerThird',\n  pathFill: ['', 'transparent'],\n}\n\nexport const buttonStateMapping: ButtonStateMapping = {\n  error: {\n    variant: 'solidRed',\n    iconProps: {\n      animation: 'fadeDown',\n      icon: 'uiTimesCircle',\n    },\n  },\n  loading: {\n    variant: 'primaryDark',\n    iconProps: loadingIconProps,\n  },\n  success: {\n    variant: 'solidGreen',\n    iconProps: {\n      animation: 'fadeDown',\n      icon: 'uiCheckCircle',\n    },\n  },\n}\n"],"mappings":";AAEA,MAAa,mBAAmB;CAC9B,WAAW;CACX,MAAM;CACN,UAAU,CAAC,IAAI,cAAc;CAC9B;AAED,MAAa,qBAAyC;CACpD,OAAO;EACL,SAAS;EACT,WAAW;GACT,WAAW;GACX,MAAM;GACP;EACF;CACD,SAAS;EACP,SAAS;EACT,WAAW;EACZ;CACD,SAAS;EACP,SAAS;EACT,WAAW;GACT,WAAW;GACX,MAAM;GACP;EACF;CACF"}
+{"version":3,"file":"consts.js","names":[],"sources":["../../src/button/consts.ts"],"sourcesContent":["export const DEFAULT_BORDER_WIDTH = 1\nexport const DEFAULT_BOX_SHADOW = 'md'\nexport const DEFAULT_DISABLED_OPACITY = 0.5\n\nexport const loadingIconProps = {\n  animation: 'vui-spin 0.6s linear infinite',\n  name: 'uiSpinnerThird',\n  pathFill: ['currentColor', 'transparent'],\n}\n\nexport const CSS_VAR_MAPPINGS = {\n  base: {\n    bg: '--vui-button-bg',\n    borderColor: '--vui-button-border-color',\n    color: '--vui-button-color',\n    hoverBg: '--vui-button-hover-bg',\n    hoverBorderColor: '--vui-button-hover-border-color',\n    hoverColor: '--vui-button-hover-color',\n    activeBg: '--vui-button-active-bg',\n    activeBorderColor: '--vui-button-active-border-color',\n    activeColor: '--vui-button-active-color',\n  },\n  active: {\n    bg: '--vui-button-active-bg',\n    borderColor: '--vui-button-active-border-color',\n    color: '--vui-button-active-color',\n    hoverBg: '--vui-button-active-hover-bg',\n    hoverBorderColor: '--vui-button-active-hover-border-color',\n    hoverColor: '--vui-button-active-hover-color',\n  },\n  disabled: {\n    bg: '--vui-button-disabled-bg',\n    borderColor: '--vui-button-disabled-border-color',\n    color: '--vui-button-disabled-color',\n    opacity: '--vui-button-disabled-opacity',\n  },\n} as const\n"],"mappings":";AAAA,MAAa,uBAAuB;AACpC,MAAa,qBAAqB;AAGlC,MAAa,mBAAmB;CAC9B,WAAW;CACX,MAAM;CACN,UAAU,CAAC,gBAAgB,cAAc;CAC1C;AAED,MAAa,mBAAmB;CAC9B,MAAM;EACJ,IAAI;EACJ,aAAa;EACb,OAAO;EACP,SAAS;EACT,kBAAkB;EAClB,YAAY;EACZ,UAAU;EACV,mBAAmB;EACnB,aAAa;EACd;CACD,QAAQ;EACN,IAAI;EACJ,aAAa;EACb,OAAO;EACP,SAAS;EACT,kBAAkB;EAClB,YAAY;EACb;CACD,UAAU;EACR,IAAI;EACJ,aAAa;EACb,OAAO;EACP,SAAS;EACV;CACF"}

package/dist/button/context.d.ts

@@ -1,10 +1,17 @@
-import { Dict } from "../utils/types.js";
-import "../utils/index.js";
 import * as react from "react";
 
 //#region src/button/context.d.ts
-declare const ButtonProvider: react.Provider<Dict>, useButtonContext: () => Dict;
+interface ButtonContextValue {
+  disabled?: boolean;
+  size?: string;
+  variant?: string;
+  intent?: string;
+  isDropDown?: boolean;
+  hasTextContent?: boolean;
+  isLoading?: boolean;
+}
+declare const ButtonProvider: react.Provider<ButtonContextValue>, useButtonContext: () => ButtonContextValue;
 //#endregion
-export { ButtonProvider, useButtonContext };
+export { ButtonContextValue, ButtonProvider, useButtonContext };
 
 //# sourceMappingURL=context.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","names":[],"sources":["../../src/button/context.ts"],"mappings":";;;;;cAGO,cAAA,EAAc,KAAA,CAAA,QAAA,CAAA,IAAA,GAAE,gBAAA,QAAgB,IAAA"}
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../src/button/context.ts"],"mappings":";;;UAEiB,kBAAA;EACf,QAAA;EACA,IAAA;EACA,OAAA;EACA,MAAA;EACA,UAAA;EACA,cAAA;EACA,SAAA;AAAA;AAAA,cAGK,cAAA,EAAc,KAAA,CAAA,QAAA,CAAA,kBAAA,GAAE,gBAAA,QAAgB,kBAAA"}

package/dist/button/context.js

@@ -5,5 +5,5 @@ const [ButtonProvider, useButtonContext] = createContext({ isOptional: true });
 
 //#endregion
 export { ButtonProvider, useButtonContext };
-globalThis.__vuiVersion__ = "4.1.0"
+globalThis.__vuiVersion__ = "5.0.0-alpha.0"
 //# sourceMappingURL=context.js.map

package/dist/button/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../src/button/context.ts"],"sourcesContent":["import type { Dict } from '../utils'\nimport { createContext } from '../utils'\n\nconst [ButtonProvider, useButtonContext] = createContext<Dict>({ isOptional: true })\n\nexport { ButtonProvider, useButtonContext }\n"],"mappings":";;;AAGA,MAAM,CAAC,gBAAgB,oBAAoB,cAAoB,EAAE,YAAY,MAAM,CAAC"}
+{"version":3,"file":"context.js","names":[],"sources":["../../src/button/context.ts"],"sourcesContent":["import { createContext } from '../utils'\n\nexport interface ButtonContextValue {\n  disabled?: boolean\n  size?: string\n  variant?: string\n  intent?: string\n  isDropDown?: boolean\n  hasTextContent?: boolean\n  isLoading?: boolean\n}\n\nconst [ButtonProvider, useButtonContext] = createContext<ButtonContextValue>({ isOptional: true })\n\nexport { ButtonProvider, useButtonContext }\n"],"mappings":";;;AAYA,MAAM,CAAC,gBAAgB,oBAAoB,cAAkC,EAAE,YAAY,MAAM,CAAC"}

package/dist/button/index.d.ts

@@ -1,6 +1,7 @@
-import { ButtonProps, ButtonState, ButtonStateMapping, IconButtonProps } from "./button.types.js";
+import { ButtonComputedOptions, ButtonComputedStyles, ButtonIntent, ButtonProps, ButtonStyleContainer, ButtonVariant, ButtonVariantLegacy, ComputedResult, ContainerStyles, IconButtonProps, IntentTokens, SpacingProps } from "./button.types.js";
 import { ButtonIcon } from "./buttonIcon.js";
 import { ButtonText } from "./buttonText.js";
 import { Button, ButtonBase } from "./button.js";
-import { AppButton, BackButton, CTAButton, CloseButton, DangerButton, IconButton, LineButton, TextButton } from "./buttons.js";
-import { ButtonProvider, useButtonContext } from "./context.js";
+import { AppButton, BackButton, CTAButton, CloseButton, DangerButton, DismissButton, IconButton, LineButton, TextButton } from "./buttons.js";
+import { ButtonContextValue, ButtonProvider, useButtonContext } from "./context.js";
+import { resolveVariantKey } from "./utils.js";