@metamask-previews/design-system-react 0.0.0-preview.bf69b6b → 0.0.0-preview.fbd1fe9

package/dist/components/button-icon/ButtonIcon.constants.mjs

@@ -0,0 +1,13 @@
+import { IconSize } from "../icon/index.mjs";
+import { ButtonIconSize } from "./ButtonIcon.types.mjs";
+export const BUTTON_ICON_SIZE_CLASS_MAP = {
+    [ButtonIconSize.Sm]: 'h-6 w-6',
+    [ButtonIconSize.Md]: 'h-8 w-8',
+    [ButtonIconSize.Lg]: 'h-10 w-10',
+};
+export const BUTTON_ICON_SIZE_TO_ICON_SIZE_CLASS_MAP = {
+    [ButtonIconSize.Sm]: IconSize.Sm,
+    [ButtonIconSize.Md]: IconSize.Md,
+    [ButtonIconSize.Lg]: IconSize.Lg,
+};
+//# sourceMappingURL=ButtonIcon.constants.mjs.map

package/dist/components/button-icon/ButtonIcon.constants.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonIcon.constants.mjs","sourceRoot":"","sources":["../../../src/components/button-icon/ButtonIcon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,0BAAgB;AACnC,OAAO,EAAE,cAAc,EAAE,+BAA2B;AAEpD,MAAM,CAAC,MAAM,0BAA0B,GAAG;IACxC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,WAAW;CACxB,CAAC;AAEX,MAAM,CAAC,MAAM,uCAAuC,GAAG;IACrD,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;CACxB,CAAC","sourcesContent":["import { IconSize } from '../icon';\nimport { ButtonIconSize } from './ButtonIcon.types';\n\nexport const BUTTON_ICON_SIZE_CLASS_MAP = {\n  [ButtonIconSize.Sm]: 'h-6 w-6',\n  [ButtonIconSize.Md]: 'h-8 w-8',\n  [ButtonIconSize.Lg]: 'h-10 w-10',\n} as const;\n\nexport const BUTTON_ICON_SIZE_TO_ICON_SIZE_CLASS_MAP = {\n  [ButtonIconSize.Sm]: IconSize.Sm,\n  [ButtonIconSize.Md]: IconSize.Md,\n  [ButtonIconSize.Lg]: IconSize.Lg,\n} as const;\n"]}

package/dist/components/button-icon/ButtonIcon.d.cts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { ButtonIconProps } from "./ButtonIcon.types.cjs";
+export declare const ButtonIcon: React.ForwardRefExoticComponent<Omit<ButtonIconProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=ButtonIcon.d.cts.map

package/dist/components/button-icon/ButtonIcon.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonIcon.d.cts","sourceRoot":"","sources":["../../../src/components/button-icon/ButtonIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc;AAS1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAG1D,eAAO,MAAM,UAAU,wGAyDtB,CAAC"}

package/dist/components/button-icon/ButtonIcon.d.mts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { ButtonIconProps } from "./ButtonIcon.types.mjs";
+export declare const ButtonIcon: React.ForwardRefExoticComponent<Omit<ButtonIconProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=ButtonIcon.d.mts.map

package/dist/components/button-icon/ButtonIcon.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonIcon.d.mts","sourceRoot":"","sources":["../../../src/components/button-icon/ButtonIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc;AAS1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAG1D,eAAO,MAAM,UAAU,wGAyDtB,CAAC"}

package/dist/components/button-icon/ButtonIcon.mjs

@@ -0,0 +1,39 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+import $React from "react";
+const React = $importDefault($React);
+import { twMerge } from "../../utils/tw-merge.mjs";
+import { ButtonBase } from "../button-base/index.mjs";
+import { Icon } from "../icon/index.mjs";
+import { BUTTON_ICON_SIZE_CLASS_MAP, BUTTON_ICON_SIZE_TO_ICON_SIZE_CLASS_MAP } from "./ButtonIcon.constants.mjs";
+import { ButtonIconSize } from "./ButtonIcon.types.mjs";
+export const ButtonIcon = React.forwardRef(({ className, iconName, iconProps, ariaLabel, isDisabled = false, isInverse = false, isFloating = false, size = ButtonIconSize.Md, style, ...props }, ref) => {
+    const isInteractive = !isDisabled;
+    const mergedClassName = twMerge(
+    // Base styles
+    'p-0', 
+    // Size styles
+    BUTTON_ICON_SIZE_CLASS_MAP[size], 
+    // Floating styles
+    isFloating && [
+        'rounded-full',
+        !isInverse && 'bg-icon-default text-background-default',
+        isInverse && 'bg-icon-default text-background-default',
+    ], 
+    // Non-floating styles
+    !isFloating && [
+        'rounded bg-transparent ',
+        // Only apply hover/active styles when interactive
+        isInteractive && 'hover:bg-hover active:bg-pressed',
+        !isInverse && 'text-icon-default',
+        isInverse && 'text-background-default',
+    ], className);
+    return (React.createElement(ButtonBase, { ref: ref, className: mergedClassName, isDisabled: isDisabled, "aria-label": ariaLabel, ...props },
+        React.createElement(Icon, { name: iconName, size: BUTTON_ICON_SIZE_TO_ICON_SIZE_CLASS_MAP[size], className: twMerge('text-inherit', iconProps?.className), ...iconProps })));
+});
+ButtonIcon.displayName = 'ButtonIcon';
+//# sourceMappingURL=ButtonIcon.mjs.map

package/dist/components/button-icon/ButtonIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonIcon.mjs","sourceRoot":"","sources":["../../../src/components/button-icon/ButtonIcon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,UAAU,EAAE,iCAAuB;AAC5C,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAC/B,OAAO,EACL,0BAA0B,EAC1B,uCAAuC,EACxC,mCAA+B;AAEhC,OAAO,EAAE,cAAc,EAAE,+BAA2B;AAEpD,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CACxC,CACE,EACE,SAAS,EACT,QAAQ,EACR,SAAS,EACT,SAAS,EACT,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,KAAK,EACjB,UAAU,GAAG,KAAK,EAClB,IAAI,GAAG,cAAc,CAAC,EAAE,EACxB,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GAAG,CAAC,UAAU,CAAC;IAElC,MAAM,eAAe,GAAG,OAAO;IAC7B,cAAc;IACd,KAAK;IACL,cAAc;IACd,0BAA0B,CAAC,IAAI,CAAC;IAChC,kBAAkB;IAClB,UAAU,IAAI;QACZ,cAAc;QACd,CAAC,SAAS,IAAI,yCAAyC;QACvD,SAAS,IAAI,yCAAyC;KACvD;IACD,sBAAsB;IACtB,CAAC,UAAU,IAAI;QACb,yBAAyB;QACzB,kDAAkD;QAClD,aAAa,IAAI,kCAAkC;QACnD,CAAC,SAAS,IAAI,mBAAmB;QACjC,SAAS,IAAI,yBAAyB;KACvC,EACD,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,UAAU,gBACV,SAAS,KACjB,KAAK;QAET,oBAAC,IAAI,IACH,IAAI,EAAE,QAAQ,EACd,IAAI,EAAE,uCAAuC,CAAC,IAAI,CAAC,EACnD,SAAS,EAAE,OAAO,CAAC,cAAc,EAAE,SAAS,EAAE,SAAS,CAAC,KACpD,SAAS,GACb,CACS,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import React from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { ButtonBase } from '../button-base';\nimport { Icon } from '../icon';\nimport {\n  BUTTON_ICON_SIZE_CLASS_MAP,\n  BUTTON_ICON_SIZE_TO_ICON_SIZE_CLASS_MAP,\n} from './ButtonIcon.constants';\nimport type { ButtonIconProps } from './ButtonIcon.types';\nimport { ButtonIconSize } from './ButtonIcon.types';\n\nexport const ButtonIcon = React.forwardRef<HTMLButtonElement, ButtonIconProps>(\n  (\n    {\n      className,\n      iconName,\n      iconProps,\n      ariaLabel,\n      isDisabled = false,\n      isInverse = false,\n      isFloating = false,\n      size = ButtonIconSize.Md,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const isInteractive = !isDisabled;\n\n    const mergedClassName = twMerge(\n      // Base styles\n      'p-0',\n      // Size styles\n      BUTTON_ICON_SIZE_CLASS_MAP[size],\n      // Floating styles\n      isFloating && [\n        'rounded-full',\n        !isInverse && 'bg-icon-default text-background-default',\n        isInverse && 'bg-icon-default text-background-default',\n      ],\n      // Non-floating styles\n      !isFloating && [\n        'rounded bg-transparent ',\n        // Only apply hover/active styles when interactive\n        isInteractive && 'hover:bg-hover active:bg-pressed',\n        !isInverse && 'text-icon-default',\n        isInverse && 'text-background-default',\n      ],\n      className,\n    );\n\n    return (\n      <ButtonBase\n        ref={ref}\n        className={mergedClassName}\n        isDisabled={isDisabled}\n        aria-label={ariaLabel}\n        {...props}\n      >\n        <Icon\n          name={iconName}\n          size={BUTTON_ICON_SIZE_TO_ICON_SIZE_CLASS_MAP[size]}\n          className={twMerge('text-inherit', iconProps?.className)}\n          {...iconProps}\n        />\n      </ButtonBase>\n    );\n  },\n);\n\nButtonIcon.displayName = 'ButtonIcon';\n"]}

package/dist/components/button-icon/ButtonIcon.types.cjs

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonIconSize = void 0;
+var ButtonIconSize;
+(function (ButtonIconSize) {
+    /**
+     * Represents a small button size (24px).
+     */
+    ButtonIconSize["Sm"] = "sm";
+    /**
+     * Represents a medium button size (32px).
+     */
+    ButtonIconSize["Md"] = "md";
+    /**
+     * Represents a large button size (40px).
+     */
+    ButtonIconSize["Lg"] = "lg";
+})(ButtonIconSize || (exports.ButtonIconSize = ButtonIconSize = {}));
+//# sourceMappingURL=ButtonIcon.types.cjs.map

package/dist/components/button-icon/ButtonIcon.types.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonIcon.types.cjs","sourceRoot":"","sources":["../../../src/components/button-icon/ButtonIcon.types.ts"],"names":[],"mappings":";;;AAGA,IAAY,cAaX;AAbD,WAAY,cAAc;IACxB;;OAEG;IACH,2BAAS,CAAA;IACT;;OAEG;IACH,2BAAS,CAAA;IACT;;OAEG;IACH,2BAAS,CAAA;AACX,CAAC,EAbW,cAAc,8BAAd,cAAc,QAazB","sourcesContent":["import type { ButtonBaseProps } from '../button-base';\nimport type { IconName, IconProps } from '../icon';\n\nexport enum ButtonIconSize {\n  /**\n   * Represents a small button size (24px).\n   */\n  Sm = 'sm',\n  /**\n   * Represents a medium button size (32px).\n   */\n  Md = 'md',\n  /**\n   * Represents a large button size (40px).\n   */\n  Lg = 'lg',\n}\n\nexport type ButtonIconProps = Omit<\n  ButtonBaseProps,\n  // We handle these props in ButtonIcon\n  | 'className'\n  | 'isDisabled'\n  | 'isLoading'\n  | 'style'\n  | 'children'\n  | 'size'\n  | 'aria-label'\n> & {\n  /**\n   * Required prop to specify the icon to show\n   */\n  iconName: IconName;\n  /**\n   * Required prop to provide an accessible label for the button\n   */\n  ariaLabel: string;\n  /**\n   * Optional prop to pass additional properties to the icon\n   */\n  iconProps?: Partial<IconProps>;\n  /**\n   * Optional prop that when true, disables the button\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Optional prop that when true, applies inverse styling to the button\n   * @default false\n   */\n  isInverse?: boolean;\n  /**\n   * Optional prop that when true, applies floating/contained styling to the button\n   * @default false\n   */\n  isFloating?: boolean;\n  /**\n   * Optional prop to control the size of the button\n   * @default ButtonIconSize.Md\n   */\n  size?: ButtonIconSize;\n  /**\n   * Optional prop for additional CSS classes to be applied to the ButtonIcon component\n   */\n  className?: string;\n  /**\n   * Optional CSS styles to be applied to the component.\n   * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n   */\n  style?: React.CSSProperties;\n};\n"]}

package/dist/components/button-icon/ButtonIcon.types.d.cts

@@ -0,0 +1,61 @@
+/// <reference types="react" />
+import type { ButtonBaseProps } from "../button-base/index.cjs";
+import type { IconName, IconProps } from "../icon/index.cjs";
+export declare enum ButtonIconSize {
+    /**
+     * Represents a small button size (24px).
+     */
+    Sm = "sm",
+    /**
+     * Represents a medium button size (32px).
+     */
+    Md = "md",
+    /**
+     * Represents a large button size (40px).
+     */
+    Lg = "lg"
+}
+export type ButtonIconProps = Omit<ButtonBaseProps, 'className' | 'isDisabled' | 'isLoading' | 'style' | 'children' | 'size' | 'aria-label'> & {
+    /**
+     * Required prop to specify the icon to show
+     */
+    iconName: IconName;
+    /**
+     * Required prop to provide an accessible label for the button
+     */
+    ariaLabel: string;
+    /**
+     * Optional prop to pass additional properties to the icon
+     */
+    iconProps?: Partial<IconProps>;
+    /**
+     * Optional prop that when true, disables the button
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Optional prop that when true, applies inverse styling to the button
+     * @default false
+     */
+    isInverse?: boolean;
+    /**
+     * Optional prop that when true, applies floating/contained styling to the button
+     * @default false
+     */
+    isFloating?: boolean;
+    /**
+     * Optional prop to control the size of the button
+     * @default ButtonIconSize.Md
+     */
+    size?: ButtonIconSize;
+    /**
+     * Optional prop for additional CSS classes to be applied to the ButtonIcon component
+     */
+    className?: string;
+    /**
+     * Optional CSS styles to be applied to the component.
+     * Should be used sparingly and only for dynamic styles that can't be achieved with className.
+     */
+    style?: React.CSSProperties;
+};
+//# sourceMappingURL=ButtonIcon.types.d.cts.map

package/dist/components/button-icon/ButtonIcon.types.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonIcon.types.d.cts","sourceRoot":"","sources":["../../../src/components/button-icon/ButtonIcon.types.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,iCAAuB;AACtD,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,0BAAgB;AAEnD,oBAAY,cAAc;IACxB;;OAEG;IACH,EAAE,OAAO;IACT;;OAEG;IACH,EAAE,OAAO;IACT;;OAEG;IACH,EAAE,OAAO;CACV;AAED,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,eAAe,EAEb,WAAW,GACX,YAAY,GACZ,WAAW,GACX,OAAO,GACP,UAAU,GACV,MAAM,GACN,YAAY,CACf,GAAG;IACF;;OAEG;IACH,QAAQ,EAAE,QAAQ,CAAC;IACnB;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC/B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC"}

package/dist/components/button-icon/ButtonIcon.types.d.mts

@@ -0,0 +1,61 @@
+/// <reference types="react" />
+import type { ButtonBaseProps } from "../button-base/index.mjs";
+import type { IconName, IconProps } from "../icon/index.mjs";
+export declare enum ButtonIconSize {
+    /**
+     * Represents a small button size (24px).
+     */
+    Sm = "sm",
+    /**
+     * Represents a medium button size (32px).
+     */
+    Md = "md",
+    /**
+     * Represents a large button size (40px).
+     */
+    Lg = "lg"
+}
+export type ButtonIconProps = Omit<ButtonBaseProps, 'className' | 'isDisabled' | 'isLoading' | 'style' | 'children' | 'size' | 'aria-label'> & {
+    /**
+     * Required prop to specify the icon to show
+     */
+    iconName: IconName;
+    /**
+     * Required prop to provide an accessible label for the button
+     */
+    ariaLabel: string;
+    /**
+     * Optional prop to pass additional properties to the icon
+     */
+    iconProps?: Partial<IconProps>;
+    /**
+     * Optional prop that when true, disables the button
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Optional prop that when true, applies inverse styling to the button
+     * @default false
+     */
+    isInverse?: boolean;
+    /**
+     * Optional prop that when true, applies floating/contained styling to the button
+     * @default false
+     */
+    isFloating?: boolean;
+    /**
+     * Optional prop to control the size of the button
+     * @default ButtonIconSize.Md
+     */
+    size?: ButtonIconSize;
+    /**
+     * Optional prop for additional CSS classes to be applied to the ButtonIcon component
+     */
+    className?: string;
+    /**
+     * Optional CSS styles to be applied to the component.
+     * Should be used sparingly and only for dynamic styles that can't be achieved with className.
+     */
+    style?: React.CSSProperties;
+};
+//# sourceMappingURL=ButtonIcon.types.d.mts.map

package/dist/components/button-icon/ButtonIcon.types.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonIcon.types.d.mts","sourceRoot":"","sources":["../../../src/components/button-icon/ButtonIcon.types.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,iCAAuB;AACtD,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,0BAAgB;AAEnD,oBAAY,cAAc;IACxB;;OAEG;IACH,EAAE,OAAO;IACT;;OAEG;IACH,EAAE,OAAO;IACT;;OAEG;IACH,EAAE,OAAO;CACV;AAED,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,eAAe,EAEb,WAAW,GACX,YAAY,GACZ,WAAW,GACX,OAAO,GACP,UAAU,GACV,MAAM,GACN,YAAY,CACf,GAAG;IACF;;OAEG;IACH,QAAQ,EAAE,QAAQ,CAAC;IACnB;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC/B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC"}

package/dist/components/button-icon/ButtonIcon.types.mjs

@@ -0,0 +1,16 @@
+export var ButtonIconSize;
+(function (ButtonIconSize) {
+    /**
+     * Represents a small button size (24px).
+     */
+    ButtonIconSize["Sm"] = "sm";
+    /**
+     * Represents a medium button size (32px).
+     */
+    ButtonIconSize["Md"] = "md";
+    /**
+     * Represents a large button size (40px).
+     */
+    ButtonIconSize["Lg"] = "lg";
+})(ButtonIconSize || (ButtonIconSize = {}));
+//# sourceMappingURL=ButtonIcon.types.mjs.map

package/dist/components/button-icon/ButtonIcon.types.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonIcon.types.mjs","sourceRoot":"","sources":["../../../src/components/button-icon/ButtonIcon.types.ts"],"names":[],"mappings":"AAGA,MAAM,CAAN,IAAY,cAaX;AAbD,WAAY,cAAc;IACxB;;OAEG;IACH,2BAAS,CAAA;IACT;;OAEG;IACH,2BAAS,CAAA;IACT;;OAEG;IACH,2BAAS,CAAA;AACX,CAAC,EAbW,cAAc,KAAd,cAAc,QAazB","sourcesContent":["import type { ButtonBaseProps } from '../button-base';\nimport type { IconName, IconProps } from '../icon';\n\nexport enum ButtonIconSize {\n  /**\n   * Represents a small button size (24px).\n   */\n  Sm = 'sm',\n  /**\n   * Represents a medium button size (32px).\n   */\n  Md = 'md',\n  /**\n   * Represents a large button size (40px).\n   */\n  Lg = 'lg',\n}\n\nexport type ButtonIconProps = Omit<\n  ButtonBaseProps,\n  // We handle these props in ButtonIcon\n  | 'className'\n  | 'isDisabled'\n  | 'isLoading'\n  | 'style'\n  | 'children'\n  | 'size'\n  | 'aria-label'\n> & {\n  /**\n   * Required prop to specify the icon to show\n   */\n  iconName: IconName;\n  /**\n   * Required prop to provide an accessible label for the button\n   */\n  ariaLabel: string;\n  /**\n   * Optional prop to pass additional properties to the icon\n   */\n  iconProps?: Partial<IconProps>;\n  /**\n   * Optional prop that when true, disables the button\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Optional prop that when true, applies inverse styling to the button\n   * @default false\n   */\n  isInverse?: boolean;\n  /**\n   * Optional prop that when true, applies floating/contained styling to the button\n   * @default false\n   */\n  isFloating?: boolean;\n  /**\n   * Optional prop to control the size of the button\n   * @default ButtonIconSize.Md\n   */\n  size?: ButtonIconSize;\n  /**\n   * Optional prop for additional CSS classes to be applied to the ButtonIcon component\n   */\n  className?: string;\n  /**\n   * Optional CSS styles to be applied to the component.\n   * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n   */\n  style?: React.CSSProperties;\n};\n"]}

package/dist/components/button-icon/index.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonIconSize = exports.ButtonIcon = void 0;
+var ButtonIcon_1 = require("./ButtonIcon.cjs");
+Object.defineProperty(exports, "ButtonIcon", { enumerable: true, get: function () { return ButtonIcon_1.ButtonIcon; } });
+var ButtonIcon_types_1 = require("./ButtonIcon.types.cjs");
+Object.defineProperty(exports, "ButtonIconSize", { enumerable: true, get: function () { return ButtonIcon_types_1.ButtonIconSize; } });
+//# sourceMappingURL=index.cjs.map

package/dist/components/button-icon/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/button-icon/index.ts"],"names":[],"mappings":";;;AAAA,+CAA0C;AAAjC,wGAAA,UAAU,OAAA;AAEnB,2DAAoD;AAA3C,kHAAA,cAAc,OAAA","sourcesContent":["export { ButtonIcon } from './ButtonIcon';\nexport type { ButtonIconProps } from './ButtonIcon.types';\nexport { ButtonIconSize } from './ButtonIcon.types';\n"]}

package/dist/components/button-icon/index.d.cts

@@ -0,0 +1,4 @@
+export { ButtonIcon } from "./ButtonIcon.cjs";
+export type { ButtonIconProps } from "./ButtonIcon.types.cjs";
+export { ButtonIconSize } from "./ButtonIcon.types.cjs";
+//# sourceMappingURL=index.d.cts.map

package/dist/components/button-icon/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/button-icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B;AAC1D,OAAO,EAAE,cAAc,EAAE,+BAA2B"}

package/dist/components/button-icon/index.d.mts

@@ -0,0 +1,4 @@
+export { ButtonIcon } from "./ButtonIcon.mjs";
+export type { ButtonIconProps } from "./ButtonIcon.types.mjs";
+export { ButtonIconSize } from "./ButtonIcon.types.mjs";
+//# sourceMappingURL=index.d.mts.map

package/dist/components/button-icon/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/button-icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B;AAC1D,OAAO,EAAE,cAAc,EAAE,+BAA2B"}

package/dist/components/button-icon/index.mjs

@@ -0,0 +1,3 @@
+export { ButtonIcon } from "./ButtonIcon.mjs";
+export { ButtonIconSize } from "./ButtonIcon.types.mjs";
+//# sourceMappingURL=index.mjs.map

package/dist/components/button-icon/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/button-icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAE1C,OAAO,EAAE,cAAc,EAAE,+BAA2B","sourcesContent":["export { ButtonIcon } from './ButtonIcon';\nexport type { ButtonIconProps } from './ButtonIcon.types';\nexport { ButtonIconSize } from './ButtonIcon.types';\n"]}

package/dist/components/button-primary/ButtonPrimary.cjs

@@ -11,33 +11,55 @@ exports.ButtonPrimary = react_1.default.forwardRef(({ className, isDanger, isInv
     const isInteractive = !(isDisabled ?? isLoading);
     const mergedClassName = (0, tw_merge_1.twMerge)(
     // Default primary styles
-    !isDanger && !isInverse && 'bg-primary-default text-primary-inverse', 
+    !isDanger &&
+        !isInverse && [
+        'bg-primary-default text-primary-inverse',
+        // Loading state uses pressed color
+        isLoading && 'bg-primary-default-pressed',
+    ], 
     // Danger styles
-    isDanger && !isInverse && 'bg-error-default text-error-inverse', 
+    isDanger &&
+        !isInverse && [
+        'bg-error-default text-error-inverse',
+        // Loading state uses pressed color
+        isLoading && 'bg-error-default-pressed',
+    ], 
     // Inverse styles
-    isInverse && !isDanger && 'bg-default text-default', 
+    isInverse &&
+        !isDanger && [
+        'bg-default text-default',
+        // Loading state uses pressed color
+        isLoading && 'bg-default-pressed',
+    ], 
     // Inverse danger styles
-    isInverse && isDanger && 'bg-default text-error-default', 
-    // Animation classes - only applied when interactive
+    isInverse &&
+        isDanger && [
+        'bg-default text-error-default',
+        // Loading state uses pressed color
+        isLoading && 'bg-default-pressed',
+    ], 
+    // Hover/Active states - only applied when interactive
     isInteractive && [
-        'transition-[transform,colors,opacity]',
-        'duration-100',
-        'ease-linear',
-        // Hover states based on variant
-        !isDanger && !isInverse && 'hover:bg-primary-default-hover',
-        isDanger && !isInverse && 'hover:bg-error-default-hover',
-        isInverse && !isDanger && 'hover:bg-default-hover',
-        isInverse && isDanger && 'hover:bg-default-hover',
-        // Active/Pressed states
-        !isDanger && !isInverse && 'active:bg-primary-default-pressed',
-        isDanger && !isInverse && 'active:bg-error-default-pressed',
-        isInverse && !isDanger && 'active:bg-default-pressed',
-        isInverse && isDanger && 'active:bg-default-pressed',
-        // Scale animation
-        'active:scale-95',
-        'active:ease-[cubic-bezier(0.3,0.8,0.3,1)]', // TODO: Add to design tokens
-    ], className);
-    return (react_1.default.createElement(button_base_1.ButtonBase, { ref: ref, className: mergedClassName, isDisabled: isDisabled, isLoading: isLoading, ...props }));
+        !isDanger &&
+            !isInverse && [
+            'hover:bg-primary-default-hover',
+            'active:bg-primary-default-pressed',
+        ],
+        isDanger &&
+            !isInverse && [
+            'hover:bg-error-default-hover',
+            'active:bg-error-default-pressed',
+        ],
+        isInverse &&
+            !isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],
+        isInverse &&
+            isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],
+    ], 
+    // Loading styles
+    isLoading && 'cursor-not-allowed', 
+    // Disabled styles (but not loading)
+    isDisabled && !isLoading && ['opacity-50', 'cursor-not-allowed'], className);
+    return (react_1.default.createElement(button_base_1.ButtonBase, { ref: ref, className: mergedClassName, isDisabled: isDisabled, isLoading: isLoading, "data-theme": !isInverse && 'light', ...props }));
 });
 exports.ButtonPrimary.displayName = 'ButtonPrimary';
 //# sourceMappingURL=ButtonPrimary.cjs.map

package/dist/components/button-primary/ButtonPrimary.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonPrimary.cjs","sourceRoot":"","sources":["../../../src/components/button-primary/ButtonPrimary.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,uDAA+C;AAC/C,0DAA4C;AAG/B,QAAA,aAAa,GAAG,eAAK,CAAC,UAAU,CAI3C,CACE,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACnE,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GAAG,CAAC,CAAC,UAAU,IAAI,SAAS,CAAC,CAAC;IAEjD,MAAM,eAAe,GAAG,IAAA,kBAAO;IAC7B,yBAAyB;IACzB,CAAC,QAAQ,IAAI,CAAC,SAAS,IAAI,yCAAyC;IACpE,gBAAgB;IAChB,QAAQ,IAAI,CAAC,SAAS,IAAI,qCAAqC;IAC/D,iBAAiB;IACjB,SAAS,IAAI,CAAC,QAAQ,IAAI,yBAAyB;IACnD,wBAAwB;IACxB,SAAS,IAAI,QAAQ,IAAI,+BAA+B;IACxD,oDAAoD;IACpD,aAAa,IAAI;QACf,uCAAuC;QACvC,cAAc;QACd,aAAa;QACb,gCAAgC;QAChC,CAAC,QAAQ,IAAI,CAAC,SAAS,IAAI,gCAAgC;QAC3D,QAAQ,IAAI,CAAC,SAAS,IAAI,8BAA8B;QACxD,SAAS,IAAI,CAAC,QAAQ,IAAI,wBAAwB;QAClD,SAAS,IAAI,QAAQ,IAAI,wBAAwB;QACjD,wBAAwB;QACxB,CAAC,QAAQ,IAAI,CAAC,SAAS,IAAI,mCAAmC;QAC9D,QAAQ,IAAI,CAAC,SAAS,IAAI,iCAAiC;QAC3D,SAAS,IAAI,CAAC,QAAQ,IAAI,2BAA2B;QACrD,SAAS,IAAI,QAAQ,IAAI,2BAA2B;QACpD,kBAAkB;QAClB,iBAAiB;QACjB,2CAA2C,EAAE,6BAA6B;KAC3E,EACD,SAAS,CACV,CAAC;IAEF,OAAO,CACL,8BAAC,wBAAU,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,KAChB,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,qBAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import React from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { ButtonBase } from '../button-base';\nimport type { ButtonPrimaryProps } from './ButtonPrimary.types';\n\nexport const ButtonPrimary = React.forwardRef<\n  HTMLButtonElement,\n  ButtonPrimaryProps\n>(\n  (\n    { className, isDanger, isInverse, isDisabled, isLoading, ...props },\n    ref,\n  ) => {\n    const isInteractive = !(isDisabled ?? isLoading);\n\n    const mergedClassName = twMerge(\n      // Default primary styles\n      !isDanger && !isInverse && 'bg-primary-default text-primary-inverse',\n      // Danger styles\n      isDanger && !isInverse && 'bg-error-default text-error-inverse',\n      // Inverse styles\n      isInverse && !isDanger && 'bg-default text-default',\n      // Inverse danger styles\n      isInverse && isDanger && 'bg-default text-error-default',\n      // Animation classes - only applied when interactive\n      isInteractive && [\n        'transition-[transform,colors,opacity]',\n        'duration-100',\n        'ease-linear',\n        // Hover states based on variant\n        !isDanger && !isInverse && 'hover:bg-primary-default-hover',\n        isDanger && !isInverse && 'hover:bg-error-default-hover',\n        isInverse && !isDanger && 'hover:bg-default-hover',\n        isInverse && isDanger && 'hover:bg-default-hover',\n        // Active/Pressed states\n        !isDanger && !isInverse && 'active:bg-primary-default-pressed',\n        isDanger && !isInverse && 'active:bg-error-default-pressed',\n        isInverse && !isDanger && 'active:bg-default-pressed',\n        isInverse && isDanger && 'active:bg-default-pressed',\n        // Scale animation\n        'active:scale-95',\n        'active:ease-[cubic-bezier(0.3,0.8,0.3,1)]', // TODO: Add to design tokens\n      ],\n      className,\n    );\n\n    return (\n      <ButtonBase\n        ref={ref}\n        className={mergedClassName}\n        isDisabled={isDisabled}\n        isLoading={isLoading}\n        {...props}\n      />\n    );\n  },\n);\n\nButtonPrimary.displayName = 'ButtonPrimary';\n"]}
+{"version":3,"file":"ButtonPrimary.cjs","sourceRoot":"","sources":["../../../src/components/button-primary/ButtonPrimary.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,uDAA+C;AAC/C,0DAA4C;AAG/B,QAAA,aAAa,GAAG,eAAK,CAAC,UAAU,CAI3C,CACE,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACnE,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GAAG,CAAC,CAAC,UAAU,IAAI,SAAS,CAAC,CAAC;IAEjD,MAAM,eAAe,GAAG,IAAA,kBAAO;IAC7B,yBAAyB;IACzB,CAAC,QAAQ;QACP,CAAC,SAAS,IAAI;QACZ,yCAAyC;QACzC,mCAAmC;QACnC,SAAS,IAAI,4BAA4B;KAC1C;IACH,gBAAgB;IAChB,QAAQ;QACN,CAAC,SAAS,IAAI;QACZ,qCAAqC;QACrC,mCAAmC;QACnC,SAAS,IAAI,0BAA0B;KACxC;IACH,iBAAiB;IACjB,SAAS;QACP,CAAC,QAAQ,IAAI;QACX,yBAAyB;QACzB,mCAAmC;QACnC,SAAS,IAAI,oBAAoB;KAClC;IACH,wBAAwB;IACxB,SAAS;QACP,QAAQ,IAAI;QACV,+BAA+B;QAC/B,mCAAmC;QACnC,SAAS,IAAI,oBAAoB;KAClC;IACH,sDAAsD;IACtD,aAAa,IAAI;QACf,CAAC,QAAQ;YACP,CAAC,SAAS,IAAI;YACZ,gCAAgC;YAChC,mCAAmC;SACpC;QACH,QAAQ;YACN,CAAC,SAAS,IAAI;YACZ,8BAA8B;YAC9B,iCAAiC;SAClC;QACH,SAAS;YACP,CAAC,QAAQ,IAAI,CAAC,wBAAwB,EAAE,2BAA2B,CAAC;QACtE,SAAS;YACP,QAAQ,IAAI,CAAC,wBAAwB,EAAE,2BAA2B,CAAC;KACtE;IACD,iBAAiB;IACjB,SAAS,IAAI,oBAAoB;IACjC,oCAAoC;IACpC,UAAU,IAAI,CAAC,SAAS,IAAI,CAAC,YAAY,EAAE,oBAAoB,CAAC,EAChE,SAAS,CACV,CAAC;IAEF,OAAO,CACL,8BAAC,wBAAU,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,gBACR,CAAC,SAAS,IAAI,OAAO,KAC7B,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,qBAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import React from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { ButtonBase } from '../button-base';\nimport type { ButtonPrimaryProps } from './ButtonPrimary.types';\n\nexport const ButtonPrimary = React.forwardRef<\n  HTMLButtonElement,\n  ButtonPrimaryProps\n>(\n  (\n    { className, isDanger, isInverse, isDisabled, isLoading, ...props },\n    ref,\n  ) => {\n    const isInteractive = !(isDisabled ?? isLoading);\n\n    const mergedClassName = twMerge(\n      // Default primary styles\n      !isDanger &&\n        !isInverse && [\n          'bg-primary-default text-primary-inverse',\n          // Loading state uses pressed color\n          isLoading && 'bg-primary-default-pressed',\n        ],\n      // Danger styles\n      isDanger &&\n        !isInverse && [\n          'bg-error-default text-error-inverse',\n          // Loading state uses pressed color\n          isLoading && 'bg-error-default-pressed',\n        ],\n      // Inverse styles\n      isInverse &&\n        !isDanger && [\n          'bg-default text-default',\n          // Loading state uses pressed color\n          isLoading && 'bg-default-pressed',\n        ],\n      // Inverse danger styles\n      isInverse &&\n        isDanger && [\n          'bg-default text-error-default',\n          // Loading state uses pressed color\n          isLoading && 'bg-default-pressed',\n        ],\n      // Hover/Active states - only applied when interactive\n      isInteractive && [\n        !isDanger &&\n          !isInverse && [\n            'hover:bg-primary-default-hover',\n            'active:bg-primary-default-pressed',\n          ],\n        isDanger &&\n          !isInverse && [\n            'hover:bg-error-default-hover',\n            'active:bg-error-default-pressed',\n          ],\n        isInverse &&\n          !isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],\n        isInverse &&\n          isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],\n      ],\n      // Loading styles\n      isLoading && 'cursor-not-allowed',\n      // Disabled styles (but not loading)\n      isDisabled && !isLoading && ['opacity-50', 'cursor-not-allowed'],\n      className,\n    );\n\n    return (\n      <ButtonBase\n        ref={ref}\n        className={mergedClassName}\n        isDisabled={isDisabled}\n        isLoading={isLoading}\n        data-theme={!isInverse && 'light'} // Lock button primary to light theme\n        {...props}\n      />\n    );\n  },\n);\n\nButtonPrimary.displayName = 'ButtonPrimary';\n"]}

package/dist/components/button-primary/ButtonPrimary.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonPrimary.d.cts","sourceRoot":"","sources":["../../../src/components/button-primary/ButtonPrimary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc;AAI1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,2GAmDzB,CAAC"}
+{"version":3,"file":"ButtonPrimary.d.cts","sourceRoot":"","sources":["../../../src/components/button-primary/ButtonPrimary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc;AAI1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,2GA0EzB,CAAC"}

package/dist/components/button-primary/ButtonPrimary.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonPrimary.d.mts","sourceRoot":"","sources":["../../../src/components/button-primary/ButtonPrimary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc;AAI1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,2GAmDzB,CAAC"}
+{"version":3,"file":"ButtonPrimary.d.mts","sourceRoot":"","sources":["../../../src/components/button-primary/ButtonPrimary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc;AAI1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,2GA0EzB,CAAC"}

package/dist/components/button-primary/ButtonPrimary.mjs

@@ -12,33 +12,55 @@ export const ButtonPrimary = React.forwardRef(({ className, isDanger, isInverse,
     const isInteractive = !(isDisabled ?? isLoading);
     const mergedClassName = twMerge(
     // Default primary styles
-    !isDanger && !isInverse && 'bg-primary-default text-primary-inverse', 
+    !isDanger &&
+        !isInverse && [
+        'bg-primary-default text-primary-inverse',
+        // Loading state uses pressed color
+        isLoading && 'bg-primary-default-pressed',
+    ], 
     // Danger styles
-    isDanger && !isInverse && 'bg-error-default text-error-inverse', 
+    isDanger &&
+        !isInverse && [
+        'bg-error-default text-error-inverse',
+        // Loading state uses pressed color
+        isLoading && 'bg-error-default-pressed',
+    ], 
     // Inverse styles
-    isInverse && !isDanger && 'bg-default text-default', 
+    isInverse &&
+        !isDanger && [
+        'bg-default text-default',
+        // Loading state uses pressed color
+        isLoading && 'bg-default-pressed',
+    ], 
     // Inverse danger styles
-    isInverse && isDanger && 'bg-default text-error-default', 
-    // Animation classes - only applied when interactive
+    isInverse &&
+        isDanger && [
+        'bg-default text-error-default',
+        // Loading state uses pressed color
+        isLoading && 'bg-default-pressed',
+    ], 
+    // Hover/Active states - only applied when interactive
     isInteractive && [
-        'transition-[transform,colors,opacity]',
-        'duration-100',
-        'ease-linear',
-        // Hover states based on variant
-        !isDanger && !isInverse && 'hover:bg-primary-default-hover',
-        isDanger && !isInverse && 'hover:bg-error-default-hover',
-        isInverse && !isDanger && 'hover:bg-default-hover',
-        isInverse && isDanger && 'hover:bg-default-hover',
-        // Active/Pressed states
-        !isDanger && !isInverse && 'active:bg-primary-default-pressed',
-        isDanger && !isInverse && 'active:bg-error-default-pressed',
-        isInverse && !isDanger && 'active:bg-default-pressed',
-        isInverse && isDanger && 'active:bg-default-pressed',
-        // Scale animation
-        'active:scale-95',
-        'active:ease-[cubic-bezier(0.3,0.8,0.3,1)]', // TODO: Add to design tokens
-    ], className);
-    return (React.createElement(ButtonBase, { ref: ref, className: mergedClassName, isDisabled: isDisabled, isLoading: isLoading, ...props }));
+        !isDanger &&
+            !isInverse && [
+            'hover:bg-primary-default-hover',
+            'active:bg-primary-default-pressed',
+        ],
+        isDanger &&
+            !isInverse && [
+            'hover:bg-error-default-hover',
+            'active:bg-error-default-pressed',
+        ],
+        isInverse &&
+            !isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],
+        isInverse &&
+            isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],
+    ], 
+    // Loading styles
+    isLoading && 'cursor-not-allowed', 
+    // Disabled styles (but not loading)
+    isDisabled && !isLoading && ['opacity-50', 'cursor-not-allowed'], className);
+    return (React.createElement(ButtonBase, { ref: ref, className: mergedClassName, isDisabled: isDisabled, isLoading: isLoading, "data-theme": !isInverse && 'light', ...props }));
 });
 ButtonPrimary.displayName = 'ButtonPrimary';
 //# sourceMappingURL=ButtonPrimary.mjs.map

package/dist/components/button-primary/ButtonPrimary.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonPrimary.mjs","sourceRoot":"","sources":["../../../src/components/button-primary/ButtonPrimary.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,UAAU,EAAE,iCAAuB;AAG5C,MAAM,CAAC,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAI3C,CACE,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACnE,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GAAG,CAAC,CAAC,UAAU,IAAI,SAAS,CAAC,CAAC;IAEjD,MAAM,eAAe,GAAG,OAAO;IAC7B,yBAAyB;IACzB,CAAC,QAAQ,IAAI,CAAC,SAAS,IAAI,yCAAyC;IACpE,gBAAgB;IAChB,QAAQ,IAAI,CAAC,SAAS,IAAI,qCAAqC;IAC/D,iBAAiB;IACjB,SAAS,IAAI,CAAC,QAAQ,IAAI,yBAAyB;IACnD,wBAAwB;IACxB,SAAS,IAAI,QAAQ,IAAI,+BAA+B;IACxD,oDAAoD;IACpD,aAAa,IAAI;QACf,uCAAuC;QACvC,cAAc;QACd,aAAa;QACb,gCAAgC;QAChC,CAAC,QAAQ,IAAI,CAAC,SAAS,IAAI,gCAAgC;QAC3D,QAAQ,IAAI,CAAC,SAAS,IAAI,8BAA8B;QACxD,SAAS,IAAI,CAAC,QAAQ,IAAI,wBAAwB;QAClD,SAAS,IAAI,QAAQ,IAAI,wBAAwB;QACjD,wBAAwB;QACxB,CAAC,QAAQ,IAAI,CAAC,SAAS,IAAI,mCAAmC;QAC9D,QAAQ,IAAI,CAAC,SAAS,IAAI,iCAAiC;QAC3D,SAAS,IAAI,CAAC,QAAQ,IAAI,2BAA2B;QACrD,SAAS,IAAI,QAAQ,IAAI,2BAA2B;QACpD,kBAAkB;QAClB,iBAAiB;QACjB,2CAA2C,EAAE,6BAA6B;KAC3E,EACD,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,KAChB,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import React from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { ButtonBase } from '../button-base';\nimport type { ButtonPrimaryProps } from './ButtonPrimary.types';\n\nexport const ButtonPrimary = React.forwardRef<\n  HTMLButtonElement,\n  ButtonPrimaryProps\n>(\n  (\n    { className, isDanger, isInverse, isDisabled, isLoading, ...props },\n    ref,\n  ) => {\n    const isInteractive = !(isDisabled ?? isLoading);\n\n    const mergedClassName = twMerge(\n      // Default primary styles\n      !isDanger && !isInverse && 'bg-primary-default text-primary-inverse',\n      // Danger styles\n      isDanger && !isInverse && 'bg-error-default text-error-inverse',\n      // Inverse styles\n      isInverse && !isDanger && 'bg-default text-default',\n      // Inverse danger styles\n      isInverse && isDanger && 'bg-default text-error-default',\n      // Animation classes - only applied when interactive\n      isInteractive && [\n        'transition-[transform,colors,opacity]',\n        'duration-100',\n        'ease-linear',\n        // Hover states based on variant\n        !isDanger && !isInverse && 'hover:bg-primary-default-hover',\n        isDanger && !isInverse && 'hover:bg-error-default-hover',\n        isInverse && !isDanger && 'hover:bg-default-hover',\n        isInverse && isDanger && 'hover:bg-default-hover',\n        // Active/Pressed states\n        !isDanger && !isInverse && 'active:bg-primary-default-pressed',\n        isDanger && !isInverse && 'active:bg-error-default-pressed',\n        isInverse && !isDanger && 'active:bg-default-pressed',\n        isInverse && isDanger && 'active:bg-default-pressed',\n        // Scale animation\n        'active:scale-95',\n        'active:ease-[cubic-bezier(0.3,0.8,0.3,1)]', // TODO: Add to design tokens\n      ],\n      className,\n    );\n\n    return (\n      <ButtonBase\n        ref={ref}\n        className={mergedClassName}\n        isDisabled={isDisabled}\n        isLoading={isLoading}\n        {...props}\n      />\n    );\n  },\n);\n\nButtonPrimary.displayName = 'ButtonPrimary';\n"]}
+{"version":3,"file":"ButtonPrimary.mjs","sourceRoot":"","sources":["../../../src/components/button-primary/ButtonPrimary.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,UAAU,EAAE,iCAAuB;AAG5C,MAAM,CAAC,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAI3C,CACE,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACnE,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GAAG,CAAC,CAAC,UAAU,IAAI,SAAS,CAAC,CAAC;IAEjD,MAAM,eAAe,GAAG,OAAO;IAC7B,yBAAyB;IACzB,CAAC,QAAQ;QACP,CAAC,SAAS,IAAI;QACZ,yCAAyC;QACzC,mCAAmC;QACnC,SAAS,IAAI,4BAA4B;KAC1C;IACH,gBAAgB;IAChB,QAAQ;QACN,CAAC,SAAS,IAAI;QACZ,qCAAqC;QACrC,mCAAmC;QACnC,SAAS,IAAI,0BAA0B;KACxC;IACH,iBAAiB;IACjB,SAAS;QACP,CAAC,QAAQ,IAAI;QACX,yBAAyB;QACzB,mCAAmC;QACnC,SAAS,IAAI,oBAAoB;KAClC;IACH,wBAAwB;IACxB,SAAS;QACP,QAAQ,IAAI;QACV,+BAA+B;QAC/B,mCAAmC;QACnC,SAAS,IAAI,oBAAoB;KAClC;IACH,sDAAsD;IACtD,aAAa,IAAI;QACf,CAAC,QAAQ;YACP,CAAC,SAAS,IAAI;YACZ,gCAAgC;YAChC,mCAAmC;SACpC;QACH,QAAQ;YACN,CAAC,SAAS,IAAI;YACZ,8BAA8B;YAC9B,iCAAiC;SAClC;QACH,SAAS;YACP,CAAC,QAAQ,IAAI,CAAC,wBAAwB,EAAE,2BAA2B,CAAC;QACtE,SAAS;YACP,QAAQ,IAAI,CAAC,wBAAwB,EAAE,2BAA2B,CAAC;KACtE;IACD,iBAAiB;IACjB,SAAS,IAAI,oBAAoB;IACjC,oCAAoC;IACpC,UAAU,IAAI,CAAC,SAAS,IAAI,CAAC,YAAY,EAAE,oBAAoB,CAAC,EAChE,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,gBACR,CAAC,SAAS,IAAI,OAAO,KAC7B,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import React from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { ButtonBase } from '../button-base';\nimport type { ButtonPrimaryProps } from './ButtonPrimary.types';\n\nexport const ButtonPrimary = React.forwardRef<\n  HTMLButtonElement,\n  ButtonPrimaryProps\n>(\n  (\n    { className, isDanger, isInverse, isDisabled, isLoading, ...props },\n    ref,\n  ) => {\n    const isInteractive = !(isDisabled ?? isLoading);\n\n    const mergedClassName = twMerge(\n      // Default primary styles\n      !isDanger &&\n        !isInverse && [\n          'bg-primary-default text-primary-inverse',\n          // Loading state uses pressed color\n          isLoading && 'bg-primary-default-pressed',\n        ],\n      // Danger styles\n      isDanger &&\n        !isInverse && [\n          'bg-error-default text-error-inverse',\n          // Loading state uses pressed color\n          isLoading && 'bg-error-default-pressed',\n        ],\n      // Inverse styles\n      isInverse &&\n        !isDanger && [\n          'bg-default text-default',\n          // Loading state uses pressed color\n          isLoading && 'bg-default-pressed',\n        ],\n      // Inverse danger styles\n      isInverse &&\n        isDanger && [\n          'bg-default text-error-default',\n          // Loading state uses pressed color\n          isLoading && 'bg-default-pressed',\n        ],\n      // Hover/Active states - only applied when interactive\n      isInteractive && [\n        !isDanger &&\n          !isInverse && [\n            'hover:bg-primary-default-hover',\n            'active:bg-primary-default-pressed',\n          ],\n        isDanger &&\n          !isInverse && [\n            'hover:bg-error-default-hover',\n            'active:bg-error-default-pressed',\n          ],\n        isInverse &&\n          !isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],\n        isInverse &&\n          isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],\n      ],\n      // Loading styles\n      isLoading && 'cursor-not-allowed',\n      // Disabled styles (but not loading)\n      isDisabled && !isLoading && ['opacity-50', 'cursor-not-allowed'],\n      className,\n    );\n\n    return (\n      <ButtonBase\n        ref={ref}\n        className={mergedClassName}\n        isDisabled={isDisabled}\n        isLoading={isLoading}\n        data-theme={!isInverse && 'light'} // Lock button primary to light theme\n        {...props}\n      />\n    );\n  },\n);\n\nButtonPrimary.displayName = 'ButtonPrimary';\n"]}