@veracity/vui 4.0.2 → 4.0.3-alpha.375407.2603101342

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__ = "4.0.3"
+//# 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.0.2"
+globalThis.__vuiVersion__ = "4.0.3"
 //# 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.0.2"
+globalThis.__vuiVersion__ = "4.0.3"
 //# sourceMappingURL=buttonText.js.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,cAKT,UAAA,EAAU,YAAA,WAAA,eAAA;AAAA,cAKV,WAAA,EAAW,YAAA,WAAA,eAAA;AAAA,cAKX,SAAA,EAAS,YAAA,WAAA,WAAA;AAAA,cAKT,YAAA,EAAY,YAAA,WAAA,WAAA;AAAA,cAKZ,UAAA,EAAU,YAAA,WAAA,eAAA;AAAA,cAKV,UAAA,EAAU,YAAA,WAAA,WAAA;AAAA,cAKV,UAAA,EAAU,YAAA,WAAA,WAAA"}

package/dist/button/buttons.js

@@ -5,48 +5,64 @@ import { jsx } from "react/jsx-runtime";
 //#region src/button/buttons.tsx
 const AppButton = vui((props, ref) => /* @__PURE__ */ jsx(Button, {
 	ref,
-	variant: "primaryDark",
+	variant: "primary",
+	intent: "brand",
 	...props
 }));
+AppButton.displayName = "AppButton";
 const BackButton = vui((props, ref) => /* @__PURE__ */ jsx(IconButton, {
-	icon: "uiArrowLeft",
+	startIcon: "uiArrowLeft",
 	ref,
-	variant: "tertiaryDark",
+	variant: "tertiary",
+	intent: "brand",
 	...props
 }));
+BackButton.displayName = "BackButton";
 const CloseButton = vui((props, ref) => /* @__PURE__ */ jsx(IconButton, {
-	icon: "uiTimes",
+	startIcon: "uiTimes",
 	ref,
-	variant: "tertiaryDark",
+	variant: "tertiary",
+	intent: "brand",
 	...props
 }));
+CloseButton.displayName = "CloseButton";
 const CTAButton = vui((props, ref) => /* @__PURE__ */ jsx(Button, {
 	ref,
-	variant: "solidGreen",
+	variant: "primary",
+	intent: "success",
 	...props
 }));
+CTAButton.displayName = "CTAButton";
 const DangerButton = vui((props, ref) => /* @__PURE__ */ jsx(Button, {
 	ref,
-	variant: "solidRed",
+	variant: "primary",
+	intent: "danger",
 	...props
 }));
+DangerButton.displayName = "DangerButton";
 const IconButton = vui((props, ref) => /* @__PURE__ */ jsx(Button, {
 	ref,
-	variant: "tertiaryDark",
+	variant: "tertiary",
+	intent: "brand",
 	...props
 }));
+IconButton.displayName = "IconButton";
 const LineButton = vui((props, ref) => /* @__PURE__ */ jsx(Button, {
 	ref,
-	variant: "secondaryDark",
+	variant: "secondary",
+	intent: "brand",
 	...props
 }));
+LineButton.displayName = "LineButton";
 const TextButton = vui((props, ref) => /* @__PURE__ */ jsx(Button, {
 	ref,
-	variant: "tertiaryDark",
+	variant: "tertiary",
+	intent: "brand",
 	...props
 }));
+TextButton.displayName = "TextButton";
 
 //#endregion
 export { AppButton, BackButton, CTAButton, CloseButton, DangerButton, IconButton, LineButton, TextButton };
-globalThis.__vuiVersion__ = "4.0.2"
+globalThis.__vuiVersion__ = "4.0.3"
 //# 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 { 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=\"primary\" intent=\"brand\" {...props} />\n))\nAppButton.displayName = 'AppButton'\n\nexport const BackButton = vui<'button', IconButtonProps>((props, ref) => (\n  <IconButton startIcon=\"uiArrowLeft\" ref={ref} variant=\"tertiary\" intent=\"brand\" {...props} />\n))\nBackButton.displayName = 'BackButton'\n\nexport const CloseButton = vui<'button', IconButtonProps>((props, ref) => (\n  <IconButton startIcon=\"uiTimes\" ref={ref} variant=\"tertiary\" intent=\"brand\" {...props} />\n))\nCloseButton.displayName = 'CloseButton'\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 IconButton = vui<'button', IconButtonProps>((props, ref) => (\n  <Button ref={ref} variant=\"tertiary\" intent=\"brand\" {...props} />\n))\nIconButton.displayName = 'IconButton'\n\nexport const LineButton = vui<'button', ButtonProps>((props, ref) => (\n  <Button ref={ref} variant=\"secondary\" intent=\"brand\" {...props} />\n))\nLineButton.displayName = 'LineButton'\n\nexport const TextButton = vui<'button', ButtonProps>((props, ref) => (\n  <Button ref={ref} variant=\"tertiary\" intent=\"brand\" {...props} />\n))\nTextButton.displayName = 'TextButton'\n"],"mappings":";;;;;AAIA,MAAa,YAAY,KAA4B,OAAO,QAC1D,oBAAC;CAAY;CAAK,SAAQ;CAAU,QAAO;CAAQ,GAAI;EAAS,CAChE;AACF,UAAU,cAAc;AAExB,MAAa,aAAa,KAAgC,OAAO,QAC/D,oBAAC;CAAW,WAAU;CAAmB;CAAK,SAAQ;CAAW,QAAO;CAAQ,GAAI;EAAS,CAC7F;AACF,WAAW,cAAc;AAEzB,MAAa,cAAc,KAAgC,OAAO,QAChE,oBAAC;CAAW,WAAU;CAAe;CAAK,SAAQ;CAAW,QAAO;CAAQ,GAAI;EAAS,CACzF;AACF,YAAY,cAAc;AAE1B,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,KAAgC,OAAO,QAC/D,oBAAC;CAAY;CAAK,SAAQ;CAAW,QAAO;CAAQ,GAAI;EAAS,CACjE;AACF,WAAW,cAAc;AAEzB,MAAa,aAAa,KAA4B,OAAO,QAC3D,oBAAC;CAAY;CAAK,SAAQ;CAAY,QAAO;CAAQ,GAAI;EAAS,CAClE;AACF,WAAW,cAAc;AAEzB,MAAa,aAAa,KAA4B,OAAO,QAC3D,oBAAC;CAAY;CAAK,SAAQ;CAAW,QAAO;CAAQ,GAAI;EAAS,CACjE;AACF,WAAW,cAAc"}

package/dist/button/consts.js

@@ -1,31 +1,41 @@
 //#region src/button/consts.ts
+const DEFAULT_BORDER_WIDTH = 1;
+const DEFAULT_BOX_SHADOW = "md";
+const DEFAULT_DISABLED_OPACITY = .5;
 const loadingIconProps = {
 	animation: "vui-spin 0.6s linear infinite",
-	name: "fadSpinnerThird",
+	name: "uiSpinner",
 	pathFill: ["", "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.0.2"
+export { CSS_VAR_MAPPINGS, DEFAULT_BORDER_WIDTH, DEFAULT_BOX_SHADOW, DEFAULT_DISABLED_OPACITY, loadingIconProps };
+globalThis.__vuiVersion__ = "4.0.3"
 //# 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: 'uiSpinner',\n  pathFill: ['', '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;AAClC,MAAa,2BAA2B;AAExC,MAAa,mBAAmB;CAC9B,WAAW;CACX,MAAM;CACN,UAAU,CAAC,IAAI,cAAc;CAC9B;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,16 @@
-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;
+}
+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;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.0.2"
+globalThis.__vuiVersion__ = "4.0.3"
 //# 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}\n\nconst [ButtonProvider, useButtonContext] = createContext<ButtonContextValue>({ isOptional: true })\n\nexport { ButtonProvider, useButtonContext }\n"],"mappings":";;;AAWA,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 { ButtonContextValue, ButtonProvider, useButtonContext } from "./context.js";
+import { resolveVariantKey } from "./utils.js";