@metamask-previews/design-system-react-native 0.0.0-preview.e1b50dd → 0.0.0-preview.f289564

package/dist/components/Button/index.d.mts

@@ -0,0 +1,4 @@
+export { ButtonSize, ButtonVariant } from "../../types/index.mjs";
+export { Button } from "./Button.mjs";
+export type { ButtonProps } from "./Button.types.mjs";
+//# sourceMappingURL=index.d.mts.map

package/dist/components/Button/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,8BAAoB;AACxD,OAAO,EAAE,MAAM,EAAE,qBAAiB;AAClC,YAAY,EAAE,WAAW,EAAE,2BAAuB"}

package/dist/components/Button/index.mjs

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

package/dist/components/Button/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,8BAAoB;AACxD,OAAO,EAAE,MAAM,EAAE,qBAAiB","sourcesContent":["export { ButtonSize, ButtonVariant } from '../../types';\nexport { Button } from './Button';\nexport type { ButtonProps } from './Button.types';\n"]}

package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.cjs

@@ -0,0 +1,106 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonPrimary = void 0;
+const design_system_twrnc_preset_1 = require("@metamask-previews/design-system-twrnc-preset");
+const react_1 = __importStar(require("react"));
+const ButtonBase_1 = require("../../../ButtonBase/index.cjs");
+const Icon_1 = require("../../../Icon/index.cjs");
+const Text_1 = require("../../../Text/index.cjs");
+const ButtonPrimaryBase = ({ children, textProps, spinnerProps, startIconProps, endIconProps, isDanger = false, isInverse, isLoading = false, onPressIn, onPressOut, twClassName = '', style, ...props }) => {
+    const [isPressed, setIsPressed] = (0, react_1.useState)(false);
+    const tw = (0, design_system_twrnc_preset_1.useTailwind)();
+    const twContainerClassNames = `
+    ${isInverse && isDanger
+        ? isPressed || isLoading
+            ? 'bg-default-pressed'
+            : 'bg-default'
+        : isDanger
+            ? isPressed || isLoading
+                ? 'bg-error-default-pressed'
+                : 'bg-error-default'
+            : isInverse
+                ? isPressed || isLoading
+                    ? 'bg-default-pressed'
+                    : 'bg-default'
+                : isPressed || isLoading
+                    ? 'bg-primary-default-pressed'
+                    : 'bg-primary-default'}
+    ${twClassName}
+  `;
+    const twTextClassNames = isInverse && isDanger
+        ? isPressed || isLoading
+            ? 'text-error-default-pressed'
+            : 'text-error-default'
+        : isDanger
+            ? 'text-primary-inverse'
+            : isInverse
+                ? 'text-default'
+                : 'text-primary-inverse';
+    const onPressInHandler = (event) => {
+        setIsPressed(true);
+        onPressIn?.(event);
+    };
+    const onPressOutHandler = (event) => {
+        setIsPressed(false);
+        onPressOut?.(event);
+    };
+    return (<ButtonBase_1.ButtonBase textProps={{
+            variant: Text_1.TextVariant.BodyMd,
+            fontWeight: Text_1.FontWeight.Medium,
+            numberOfLines: 1,
+            ellipsizeMode: 'clip',
+            ...textProps,
+            twClassName: `${twTextClassNames} ${textProps?.twClassName ?? ''}`,
+        }} spinnerProps={{
+            color: twTextClassNames,
+            loadingTextProps: {
+                twClassName: twTextClassNames,
+            },
+            ...spinnerProps,
+        }} startIconProps={{
+            size: Icon_1.IconSize.Sm,
+            ...startIconProps,
+            twClassName: `${twTextClassNames} ${startIconProps?.twClassName ?? ''}`,
+        }} endIconProps={{
+            size: Icon_1.IconSize.Sm,
+            ...endIconProps,
+            twClassName: `${twTextClassNames} ${startIconProps?.twClassName ?? ''}`,
+        }} isLoading={isLoading} onPressIn={onPressInHandler} onPressOut={onPressOutHandler} style={[tw `${twContainerClassNames}`, style]} {...props}>
+      {children}
+    </ButtonBase_1.ButtonBase>);
+};
+const ButtonPrimary = ({ isInverse = false, ...props }) => {
+    // If inverse, use the current theme context
+    if (isInverse) {
+        return <ButtonPrimaryBase isInverse {...props}/>;
+    }
+    // Otherwise, force light theme
+    return (<design_system_twrnc_preset_1.ThemeProvider theme={design_system_twrnc_preset_1.Theme.Light}>
+      <ButtonPrimaryBase isInverse={false} {...props}/>
+    </design_system_twrnc_preset_1.ThemeProvider>);
+};
+exports.ButtonPrimary = ButtonPrimary;
+//# sourceMappingURL=ButtonPrimary.cjs.map

package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonPrimary.cjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  useTailwind,\n  ThemeProvider,\n  Theme,\n} from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useState } from 'react';\nimport type { GestureResponderEvent } from 'react-native';\n\nimport { ButtonBase } from '../../../ButtonBase';\nimport type { IconColor } from '../../../Icon';\nimport { IconSize } from '../../../Icon';\nimport { TextVariant, FontWeight } from '../../../Text';\n\nimport type { ButtonPrimaryProps } from './ButtonPrimary.types';\n\nconst ButtonPrimaryBase = ({\n  children,\n  textProps,\n  spinnerProps,\n  startIconProps,\n  endIconProps,\n  isDanger = false,\n  isInverse,\n  isLoading = false,\n  onPressIn,\n  onPressOut,\n  twClassName = '',\n  style,\n  ...props\n}: ButtonPrimaryProps) => {\n  const [isPressed, setIsPressed] = useState(false);\n  const tw = useTailwind();\n\n  const twContainerClassNames = `\n    ${\n      isInverse && isDanger\n        ? isPressed || isLoading\n          ? 'bg-default-pressed'\n          : 'bg-default'\n        : isDanger\n          ? isPressed || isLoading\n            ? 'bg-error-default-pressed'\n            : 'bg-error-default'\n          : isInverse\n            ? isPressed || isLoading\n              ? 'bg-default-pressed'\n              : 'bg-default'\n            : isPressed || isLoading\n              ? 'bg-primary-default-pressed'\n              : 'bg-primary-default'\n    }\n    ${twClassName}\n  `;\n\n  const twTextClassNames =\n    isInverse && isDanger\n      ? isPressed || isLoading\n        ? 'text-error-default-pressed'\n        : 'text-error-default'\n      : isDanger\n        ? 'text-primary-inverse'\n        : isInverse\n          ? 'text-default'\n          : 'text-primary-inverse';\n\n  const onPressInHandler = (event: GestureResponderEvent) => {\n    setIsPressed(true);\n    onPressIn?.(event);\n  };\n\n  const onPressOutHandler = (event: GestureResponderEvent) => {\n    setIsPressed(false);\n    onPressOut?.(event);\n  };\n\n  return (\n    <ButtonBase\n      textProps={{\n        variant: TextVariant.BodyMd,\n        fontWeight: FontWeight.Medium,\n        numberOfLines: 1,\n        ellipsizeMode: 'clip',\n        ...textProps,\n        twClassName: `${twTextClassNames} ${textProps?.twClassName ?? ''}`,\n      }}\n      spinnerProps={{\n        color: twTextClassNames as IconColor,\n        loadingTextProps: {\n          twClassName: twTextClassNames,\n        },\n        ...spinnerProps,\n      }}\n      startIconProps={{\n        size: IconSize.Sm,\n        ...startIconProps,\n        twClassName: `${twTextClassNames} ${startIconProps?.twClassName ?? ''}`,\n      }}\n      endIconProps={{\n        size: IconSize.Sm,\n        ...endIconProps,\n        twClassName: `${twTextClassNames} ${startIconProps?.twClassName ?? ''}`,\n      }}\n      isLoading={isLoading}\n      onPressIn={onPressInHandler}\n      onPressOut={onPressOutHandler}\n      style={[tw`${twContainerClassNames}`, style]}\n      {...props}\n    >\n      {children}\n    </ButtonBase>\n  );\n};\n\nexport const ButtonPrimary = ({\n  isInverse = false,\n  ...props\n}: ButtonPrimaryProps) => {\n  // If inverse, use the current theme context\n  if (isInverse) {\n    return <ButtonPrimaryBase isInverse {...props} />;\n  }\n  // Otherwise, force light theme\n  return (\n    <ThemeProvider theme={Theme.Light}>\n      <ButtonPrimaryBase isInverse={false} {...props} />\n    </ThemeProvider>\n  );\n};\n"]}

package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.d.cts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { ButtonPrimaryProps } from "./ButtonPrimary.types.cjs";
+export declare const ButtonPrimary: ({ isInverse, ...props }: ButtonPrimaryProps) => React.JSX.Element;
+//# sourceMappingURL=ButtonPrimary.d.cts.map

package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonPrimary.d.cts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAmB,cAAc;AAQxC,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAoGhE,eAAO,MAAM,aAAa,4BAGvB,kBAAkB,sBAWpB,CAAC"}

package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.d.mts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { ButtonPrimaryProps } from "./ButtonPrimary.types.mjs";
+export declare const ButtonPrimary: ({ isInverse, ...props }: ButtonPrimaryProps) => React.JSX.Element;
+//# sourceMappingURL=ButtonPrimary.d.mts.map

package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonPrimary.d.mts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAmB,cAAc;AAQxC,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAoGhE,eAAO,MAAM,aAAa,4BAGvB,kBAAkB,sBAWpB,CAAC"}

package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.mjs

@@ -0,0 +1,86 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+import { useTailwind, ThemeProvider, Theme } from "@metamask-previews/design-system-twrnc-preset";
+import $React, { useState } from "react";
+const React = $importDefault($React);
+import { ButtonBase } from "../../../ButtonBase/index.mjs";
+import { IconSize } from "../../../Icon/index.mjs";
+import { TextVariant, FontWeight } from "../../../Text/index.mjs";
+const ButtonPrimaryBase = ({ children, textProps, spinnerProps, startIconProps, endIconProps, isDanger = false, isInverse, isLoading = false, onPressIn, onPressOut, twClassName = '', style, ...props }) => {
+    const [isPressed, setIsPressed] = useState(false);
+    const tw = useTailwind();
+    const twContainerClassNames = `
+    ${isInverse && isDanger
+        ? isPressed || isLoading
+            ? 'bg-default-pressed'
+            : 'bg-default'
+        : isDanger
+            ? isPressed || isLoading
+                ? 'bg-error-default-pressed'
+                : 'bg-error-default'
+            : isInverse
+                ? isPressed || isLoading
+                    ? 'bg-default-pressed'
+                    : 'bg-default'
+                : isPressed || isLoading
+                    ? 'bg-primary-default-pressed'
+                    : 'bg-primary-default'}
+    ${twClassName}
+  `;
+    const twTextClassNames = isInverse && isDanger
+        ? isPressed || isLoading
+            ? 'text-error-default-pressed'
+            : 'text-error-default'
+        : isDanger
+            ? 'text-primary-inverse'
+            : isInverse
+                ? 'text-default'
+                : 'text-primary-inverse';
+    const onPressInHandler = (event) => {
+        setIsPressed(true);
+        onPressIn?.(event);
+    };
+    const onPressOutHandler = (event) => {
+        setIsPressed(false);
+        onPressOut?.(event);
+    };
+    return (<ButtonBase textProps={{
+            variant: TextVariant.BodyMd,
+            fontWeight: FontWeight.Medium,
+            numberOfLines: 1,
+            ellipsizeMode: 'clip',
+            ...textProps,
+            twClassName: `${twTextClassNames} ${textProps?.twClassName ?? ''}`,
+        }} spinnerProps={{
+            color: twTextClassNames,
+            loadingTextProps: {
+                twClassName: twTextClassNames,
+            },
+            ...spinnerProps,
+        }} startIconProps={{
+            size: IconSize.Sm,
+            ...startIconProps,
+            twClassName: `${twTextClassNames} ${startIconProps?.twClassName ?? ''}`,
+        }} endIconProps={{
+            size: IconSize.Sm,
+            ...endIconProps,
+            twClassName: `${twTextClassNames} ${startIconProps?.twClassName ?? ''}`,
+        }} isLoading={isLoading} onPressIn={onPressInHandler} onPressOut={onPressOutHandler} style={[tw `${twContainerClassNames}`, style]} {...props}>
+      {children}
+    </ButtonBase>);
+};
+export const ButtonPrimary = ({ isInverse = false, ...props }) => {
+    // If inverse, use the current theme context
+    if (isInverse) {
+        return <ButtonPrimaryBase isInverse {...props}/>;
+    }
+    // Otherwise, force light theme
+    return (<ThemeProvider theme={Theme.Light}>
+      <ButtonPrimaryBase isInverse={false} {...props}/>
+    </ThemeProvider>);
+};
+//# sourceMappingURL=ButtonPrimary.mjs.map

package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonPrimary.mjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  useTailwind,\n  ThemeProvider,\n  Theme,\n} from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useState } from 'react';\nimport type { GestureResponderEvent } from 'react-native';\n\nimport { ButtonBase } from '../../../ButtonBase';\nimport type { IconColor } from '../../../Icon';\nimport { IconSize } from '../../../Icon';\nimport { TextVariant, FontWeight } from '../../../Text';\n\nimport type { ButtonPrimaryProps } from './ButtonPrimary.types';\n\nconst ButtonPrimaryBase = ({\n  children,\n  textProps,\n  spinnerProps,\n  startIconProps,\n  endIconProps,\n  isDanger = false,\n  isInverse,\n  isLoading = false,\n  onPressIn,\n  onPressOut,\n  twClassName = '',\n  style,\n  ...props\n}: ButtonPrimaryProps) => {\n  const [isPressed, setIsPressed] = useState(false);\n  const tw = useTailwind();\n\n  const twContainerClassNames = `\n    ${\n      isInverse && isDanger\n        ? isPressed || isLoading\n          ? 'bg-default-pressed'\n          : 'bg-default'\n        : isDanger\n          ? isPressed || isLoading\n            ? 'bg-error-default-pressed'\n            : 'bg-error-default'\n          : isInverse\n            ? isPressed || isLoading\n              ? 'bg-default-pressed'\n              : 'bg-default'\n            : isPressed || isLoading\n              ? 'bg-primary-default-pressed'\n              : 'bg-primary-default'\n    }\n    ${twClassName}\n  `;\n\n  const twTextClassNames =\n    isInverse && isDanger\n      ? isPressed || isLoading\n        ? 'text-error-default-pressed'\n        : 'text-error-default'\n      : isDanger\n        ? 'text-primary-inverse'\n        : isInverse\n          ? 'text-default'\n          : 'text-primary-inverse';\n\n  const onPressInHandler = (event: GestureResponderEvent) => {\n    setIsPressed(true);\n    onPressIn?.(event);\n  };\n\n  const onPressOutHandler = (event: GestureResponderEvent) => {\n    setIsPressed(false);\n    onPressOut?.(event);\n  };\n\n  return (\n    <ButtonBase\n      textProps={{\n        variant: TextVariant.BodyMd,\n        fontWeight: FontWeight.Medium,\n        numberOfLines: 1,\n        ellipsizeMode: 'clip',\n        ...textProps,\n        twClassName: `${twTextClassNames} ${textProps?.twClassName ?? ''}`,\n      }}\n      spinnerProps={{\n        color: twTextClassNames as IconColor,\n        loadingTextProps: {\n          twClassName: twTextClassNames,\n        },\n        ...spinnerProps,\n      }}\n      startIconProps={{\n        size: IconSize.Sm,\n        ...startIconProps,\n        twClassName: `${twTextClassNames} ${startIconProps?.twClassName ?? ''}`,\n      }}\n      endIconProps={{\n        size: IconSize.Sm,\n        ...endIconProps,\n        twClassName: `${twTextClassNames} ${startIconProps?.twClassName ?? ''}`,\n      }}\n      isLoading={isLoading}\n      onPressIn={onPressInHandler}\n      onPressOut={onPressOutHandler}\n      style={[tw`${twContainerClassNames}`, style]}\n      {...props}\n    >\n      {children}\n    </ButtonBase>\n  );\n};\n\nexport const ButtonPrimary = ({\n  isInverse = false,\n  ...props\n}: ButtonPrimaryProps) => {\n  // If inverse, use the current theme context\n  if (isInverse) {\n    return <ButtonPrimaryBase isInverse {...props} />;\n  }\n  // Otherwise, force light theme\n  return (\n    <ThemeProvider theme={Theme.Light}>\n      <ButtonPrimaryBase isInverse={false} {...props} />\n    </ThemeProvider>\n  );\n};\n"]}

package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.types.cjs

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=ButtonPrimary.types.cjs.map

package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.types.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonPrimary.types.cjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonPrimary/ButtonPrimary.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonBaseProps } from '../../../ButtonBase';\n\n/**\n * ButtonPrimary component props.\n */\nexport type ButtonPrimaryProps = {\n  /**\n   * Optional prop to show the danger state of the button.\n   *\n   * @default false\n   */\n  isDanger?: boolean;\n  /**\n   * Optional prop to show the inverse state of the button, which is reserved for buttons on colored backgrounds.\n   *\n   * @default false\n   */\n  isInverse?: boolean;\n} & ButtonBaseProps;\n"]}

package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.types.d.cts

@@ -0,0 +1,19 @@
+import type { ButtonBaseProps } from "../../../ButtonBase/index.cjs";
+/**
+ * ButtonPrimary component props.
+ */
+export type ButtonPrimaryProps = {
+    /**
+     * Optional prop to show the danger state of the button.
+     *
+     * @default false
+     */
+    isDanger?: boolean;
+    /**
+     * Optional prop to show the inverse state of the button, which is reserved for buttons on colored backgrounds.
+     *
+     * @default false
+     */
+    isInverse?: boolean;
+} & ButtonBaseProps;
+//# sourceMappingURL=ButtonPrimary.types.d.cts.map

package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.types.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonPrimary.types.d.cts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonPrimary/ButtonPrimary.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,sCAA4B;AAE3D;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,eAAe,CAAC"}

package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.types.d.mts

@@ -0,0 +1,19 @@
+import type { ButtonBaseProps } from "../../../ButtonBase/index.mjs";
+/**
+ * ButtonPrimary component props.
+ */
+export type ButtonPrimaryProps = {
+    /**
+     * Optional prop to show the danger state of the button.
+     *
+     * @default false
+     */
+    isDanger?: boolean;
+    /**
+     * Optional prop to show the inverse state of the button, which is reserved for buttons on colored backgrounds.
+     *
+     * @default false
+     */
+    isInverse?: boolean;
+} & ButtonBaseProps;
+//# sourceMappingURL=ButtonPrimary.types.d.mts.map

package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.types.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonPrimary.types.d.mts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonPrimary/ButtonPrimary.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,sCAA4B;AAE3D;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,eAAe,CAAC"}

package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.types.mjs

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ButtonPrimary.types.mjs.map

package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.types.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonPrimary.types.mjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonPrimary/ButtonPrimary.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonBaseProps } from '../../../ButtonBase';\n\n/**\n * ButtonPrimary component props.\n */\nexport type ButtonPrimaryProps = {\n  /**\n   * Optional prop to show the danger state of the button.\n   *\n   * @default false\n   */\n  isDanger?: boolean;\n  /**\n   * Optional prop to show the inverse state of the button, which is reserved for buttons on colored backgrounds.\n   *\n   * @default false\n   */\n  isInverse?: boolean;\n} & ButtonBaseProps;\n"]}

package/dist/components/Button/variants/ButtonPrimary/index.cjs

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

package/dist/components/Button/variants/ButtonPrimary/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonPrimary/index.ts"],"names":[],"mappings":";;;AAAA,qDAAsD;AAA7C,0GAAA,iBAAiB,OAAA;AAC1B,qDAAgD;AAAvC,8GAAA,aAAa,OAAA","sourcesContent":["export { ButtonPrimarySize } from '../../../../types';\nexport { ButtonPrimary } from './ButtonPrimary';\nexport type { ButtonPrimaryProps } from './ButtonPrimary.types';\n"]}

package/dist/components/Button/variants/ButtonPrimary/index.d.cts

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

package/dist/components/Button/variants/ButtonPrimary/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonPrimary/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,oCAA0B;AACtD,OAAO,EAAE,aAAa,EAAE,4BAAwB;AAChD,YAAY,EAAE,kBAAkB,EAAE,kCAA8B"}

package/dist/components/Button/variants/ButtonPrimary/index.d.mts

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

package/dist/components/Button/variants/ButtonPrimary/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonPrimary/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,oCAA0B;AACtD,OAAO,EAAE,aAAa,EAAE,4BAAwB;AAChD,YAAY,EAAE,kBAAkB,EAAE,kCAA8B"}

package/dist/components/Button/variants/ButtonPrimary/index.mjs

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

package/dist/components/Button/variants/ButtonPrimary/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonPrimary/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,oCAA0B;AACtD,OAAO,EAAE,aAAa,EAAE,4BAAwB","sourcesContent":["export { ButtonPrimarySize } from '../../../../types';\nexport { ButtonPrimary } from './ButtonPrimary';\nexport type { ButtonPrimaryProps } from './ButtonPrimary.types';\n"]}

package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.cjs

@@ -0,0 +1,102 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonSecondary = void 0;
+const design_system_twrnc_preset_1 = require("@metamask-previews/design-system-twrnc-preset");
+const react_1 = __importStar(require("react"));
+const ButtonBase_1 = require("../../../ButtonBase/index.cjs");
+const Icon_1 = require("../../../Icon/index.cjs");
+const Text_1 = require("../../../Text/index.cjs");
+const ButtonSecondary = ({ children, textProps, spinnerProps, startIconProps, endIconProps, isDanger = false, isInverse = false, isLoading = false, onPressIn, onPressOut, twClassName = '', style, ...props }) => {
+    const [isPressed, setIsPressed] = (0, react_1.useState)(false);
+    const tw = (0, design_system_twrnc_preset_1.useTailwind)();
+    const twContainerClassNames = `
+    ${isInverse && isDanger
+        ? isPressed || isLoading
+            ? 'bg-default-pressed'
+            : 'bg-default'
+        : isDanger
+            ? isPressed || isLoading
+                ? 'bg-error-muted-pressed'
+                : 'bg-transparent'
+            : isPressed || isLoading
+                ? 'bg-pressed'
+                : 'bg-transparent'}
+    border-[1.5px]
+    ${isInverse && isDanger
+        ? isPressed || isLoading
+            ? 'border-background-default-pressed'
+            : 'border-background-default'
+        : isDanger
+            ? isPressed || isLoading
+                ? 'border-error-default-pressed'
+                : 'border-error-default'
+            : isInverse
+                ? 'border-primary-inverse'
+                : 'border-icon-default'}
+    ${twClassName}
+  `;
+    const twTextClassNames = isDanger
+        ? isPressed || isLoading
+            ? 'text-error-default-pressed'
+            : 'text-error-default'
+        : isInverse
+            ? 'text-primary-inverse'
+            : 'text-default';
+    const onPressInHandler = (event) => {
+        setIsPressed(true);
+        onPressIn?.(event);
+    };
+    const onPressOutHandler = (event) => {
+        setIsPressed(false);
+        onPressOut?.(event);
+    };
+    return (<ButtonBase_1.ButtonBase textProps={{
+            variant: Text_1.TextVariant.BodyMd,
+            fontWeight: Text_1.FontWeight.Medium,
+            numberOfLines: 1,
+            ellipsizeMode: 'clip',
+            ...textProps,
+            twClassName: `${twTextClassNames} ${textProps?.twClassName ?? ''}`,
+        }} spinnerProps={{
+            color: twTextClassNames,
+            loadingTextProps: {
+                twClassName: twTextClassNames,
+            },
+            ...spinnerProps,
+        }} startIconProps={{
+            size: Icon_1.IconSize.Sm,
+            ...startIconProps,
+            twClassName: `${twTextClassNames} ${startIconProps?.twClassName ?? ''}`,
+        }} endIconProps={{
+            size: Icon_1.IconSize.Sm,
+            ...endIconProps,
+            twClassName: `${twTextClassNames} ${endIconProps?.twClassName ?? ''}`,
+        }} isLoading={isLoading} onPressIn={onPressInHandler} onPressOut={onPressOutHandler} style={[tw `${twContainerClassNames}`, style]} {...props}>
+      {children}
+    </ButtonBase_1.ButtonBase>);
+};
+exports.ButtonSecondary = ButtonSecondary;
+//# sourceMappingURL=ButtonSecondary.cjs.map

package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonSecondary.cjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useState } from 'react';\nimport type { GestureResponderEvent } from 'react-native';\n\nimport { ButtonBase } from '../../../ButtonBase';\nimport type { IconColor } from '../../../Icon';\nimport { IconSize } from '../../../Icon';\nimport { TextVariant, FontWeight } from '../../../Text';\n\nimport type { ButtonSecondaryProps } from './ButtonSecondary.types';\n\nexport const ButtonSecondary = ({\n  children,\n  textProps,\n  spinnerProps,\n  startIconProps,\n  endIconProps,\n  isDanger = false,\n  isInverse = false,\n  isLoading = false,\n  onPressIn,\n  onPressOut,\n  twClassName = '',\n  style,\n  ...props\n}: ButtonSecondaryProps) => {\n  const [isPressed, setIsPressed] = useState(false);\n  const tw = useTailwind();\n  const twContainerClassNames = `\n    ${\n      isInverse && isDanger\n        ? isPressed || isLoading\n          ? 'bg-default-pressed'\n          : 'bg-default'\n        : isDanger\n          ? isPressed || isLoading\n            ? 'bg-error-muted-pressed'\n            : 'bg-transparent'\n          : isPressed || isLoading\n            ? 'bg-pressed'\n            : 'bg-transparent'\n    }\n    border-[1.5px]\n    ${\n      isInverse && isDanger\n        ? isPressed || isLoading\n          ? 'border-background-default-pressed'\n          : 'border-background-default'\n        : isDanger\n          ? isPressed || isLoading\n            ? 'border-error-default-pressed'\n            : 'border-error-default'\n          : isInverse\n            ? 'border-primary-inverse'\n            : 'border-icon-default'\n    }\n    ${twClassName}\n  `;\n\n  const twTextClassNames = isDanger\n    ? isPressed || isLoading\n      ? 'text-error-default-pressed'\n      : 'text-error-default'\n    : isInverse\n      ? 'text-primary-inverse'\n      : 'text-default';\n\n  const onPressInHandler = (event: GestureResponderEvent) => {\n    setIsPressed(true);\n    onPressIn?.(event);\n  };\n\n  const onPressOutHandler = (event: GestureResponderEvent) => {\n    setIsPressed(false);\n    onPressOut?.(event);\n  };\n\n  return (\n    <ButtonBase\n      textProps={{\n        variant: TextVariant.BodyMd,\n        fontWeight: FontWeight.Medium,\n        numberOfLines: 1,\n        ellipsizeMode: 'clip',\n        ...textProps,\n        twClassName: `${twTextClassNames} ${textProps?.twClassName ?? ''}`,\n      }}\n      spinnerProps={{\n        color: twTextClassNames as IconColor,\n        loadingTextProps: {\n          twClassName: twTextClassNames,\n        },\n        ...spinnerProps,\n      }}\n      startIconProps={{\n        size: IconSize.Sm,\n        ...startIconProps,\n        twClassName: `${twTextClassNames} ${startIconProps?.twClassName ?? ''}`,\n      }}\n      endIconProps={{\n        size: IconSize.Sm,\n        ...endIconProps,\n        twClassName: `${twTextClassNames} ${endIconProps?.twClassName ?? ''}`,\n      }}\n      isLoading={isLoading}\n      onPressIn={onPressInHandler}\n      onPressOut={onPressOutHandler}\n      style={[tw`${twContainerClassNames}`, style]}\n      {...props}\n    >\n      {children}\n    </ButtonBase>\n  );\n};\n"]}

package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.d.cts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { ButtonSecondaryProps } from "./ButtonSecondary.types.cjs";
+export declare const ButtonSecondary: ({ children, textProps, spinnerProps, startIconProps, endIconProps, isDanger, isInverse, isLoading, onPressIn, onPressOut, twClassName, style, ...props }: ButtonSecondaryProps) => React.JSX.Element;
+//# sourceMappingURL=ButtonSecondary.d.cts.map

package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonSecondary.d.cts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,cAAc;AAQxC,OAAO,KAAK,EAAE,oBAAoB,EAAE,oCAAgC;AAEpE,eAAO,MAAM,eAAe,6JAczB,oBAAoB,sBAwFtB,CAAC"}

package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.d.mts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { ButtonSecondaryProps } from "./ButtonSecondary.types.mjs";
+export declare const ButtonSecondary: ({ children, textProps, spinnerProps, startIconProps, endIconProps, isDanger, isInverse, isLoading, onPressIn, onPressOut, twClassName, style, ...props }: ButtonSecondaryProps) => React.JSX.Element;
+//# sourceMappingURL=ButtonSecondary.d.mts.map

package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonSecondary.d.mts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,cAAc;AAQxC,OAAO,KAAK,EAAE,oBAAoB,EAAE,oCAAgC;AAEpE,eAAO,MAAM,eAAe,6JAczB,oBAAoB,sBAwFtB,CAAC"}

package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.mjs

@@ -0,0 +1,82 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+import { useTailwind } from "@metamask-previews/design-system-twrnc-preset";
+import $React, { useState } from "react";
+const React = $importDefault($React);
+import { ButtonBase } from "../../../ButtonBase/index.mjs";
+import { IconSize } from "../../../Icon/index.mjs";
+import { TextVariant, FontWeight } from "../../../Text/index.mjs";
+export const ButtonSecondary = ({ children, textProps, spinnerProps, startIconProps, endIconProps, isDanger = false, isInverse = false, isLoading = false, onPressIn, onPressOut, twClassName = '', style, ...props }) => {
+    const [isPressed, setIsPressed] = useState(false);
+    const tw = useTailwind();
+    const twContainerClassNames = `
+    ${isInverse && isDanger
+        ? isPressed || isLoading
+            ? 'bg-default-pressed'
+            : 'bg-default'
+        : isDanger
+            ? isPressed || isLoading
+                ? 'bg-error-muted-pressed'
+                : 'bg-transparent'
+            : isPressed || isLoading
+                ? 'bg-pressed'
+                : 'bg-transparent'}
+    border-[1.5px]
+    ${isInverse && isDanger
+        ? isPressed || isLoading
+            ? 'border-background-default-pressed'
+            : 'border-background-default'
+        : isDanger
+            ? isPressed || isLoading
+                ? 'border-error-default-pressed'
+                : 'border-error-default'
+            : isInverse
+                ? 'border-primary-inverse'
+                : 'border-icon-default'}
+    ${twClassName}
+  `;
+    const twTextClassNames = isDanger
+        ? isPressed || isLoading
+            ? 'text-error-default-pressed'
+            : 'text-error-default'
+        : isInverse
+            ? 'text-primary-inverse'
+            : 'text-default';
+    const onPressInHandler = (event) => {
+        setIsPressed(true);
+        onPressIn?.(event);
+    };
+    const onPressOutHandler = (event) => {
+        setIsPressed(false);
+        onPressOut?.(event);
+    };
+    return (<ButtonBase textProps={{
+            variant: TextVariant.BodyMd,
+            fontWeight: FontWeight.Medium,
+            numberOfLines: 1,
+            ellipsizeMode: 'clip',
+            ...textProps,
+            twClassName: `${twTextClassNames} ${textProps?.twClassName ?? ''}`,
+        }} spinnerProps={{
+            color: twTextClassNames,
+            loadingTextProps: {
+                twClassName: twTextClassNames,
+            },
+            ...spinnerProps,
+        }} startIconProps={{
+            size: IconSize.Sm,
+            ...startIconProps,
+            twClassName: `${twTextClassNames} ${startIconProps?.twClassName ?? ''}`,
+        }} endIconProps={{
+            size: IconSize.Sm,
+            ...endIconProps,
+            twClassName: `${twTextClassNames} ${endIconProps?.twClassName ?? ''}`,
+        }} isLoading={isLoading} onPressIn={onPressInHandler} onPressOut={onPressOutHandler} style={[tw `${twContainerClassNames}`, style]} {...props}>
+      {children}
+    </ButtonBase>);
+};
+//# sourceMappingURL=ButtonSecondary.mjs.map

package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonSecondary.mjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,sDAAsD;AAC5E,OAAO,QAAO,EAAE,QAAQ,EAAE,cAAc;;AAGxC,OAAO,EAAE,UAAU,EAAE,sCAA4B;AAEjD,OAAO,EAAE,QAAQ,EAAE,gCAAsB;AACzC,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,gCAAsB;AAIxD,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,KAAK,EACjB,SAAS,GAAG,KAAK,EACjB,SAAS,EACT,UAAU,EACV,WAAW,GAAG,EAAE,EAChB,KAAK,EACL,GAAG,KAAK,EACa,EAAE,EAAE;IACzB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IACzB,MAAM,qBAAqB,GAAG;MAE1B,SAAS,IAAI,QAAQ;QACnB,CAAC,CAAC,SAAS,IAAI,SAAS;YACtB,CAAC,CAAC,oBAAoB;YACtB,CAAC,CAAC,YAAY;QAChB,CAAC,CAAC,QAAQ;YACR,CAAC,CAAC,SAAS,IAAI,SAAS;gBACtB,CAAC,CAAC,wBAAwB;gBAC1B,CAAC,CAAC,gBAAgB;YACpB,CAAC,CAAC,SAAS,IAAI,SAAS;gBACtB,CAAC,CAAC,YAAY;gBACd,CAAC,CAAC,gBACV;;MAGE,SAAS,IAAI,QAAQ;QACnB,CAAC,CAAC,SAAS,IAAI,SAAS;YACtB,CAAC,CAAC,mCAAmC;YACrC,CAAC,CAAC,2BAA2B;QAC/B,CAAC,CAAC,QAAQ;YACR,CAAC,CAAC,SAAS,IAAI,SAAS;gBACtB,CAAC,CAAC,8BAA8B;gBAChC,CAAC,CAAC,sBAAsB;YAC1B,CAAC,CAAC,SAAS;gBACT,CAAC,CAAC,wBAAwB;gBAC1B,CAAC,CAAC,qBACV;MACE,WAAW;GACd,CAAC;IAEF,MAAM,gBAAgB,GAAG,QAAQ;QAC/B,CAAC,CAAC,SAAS,IAAI,SAAS;YACtB,CAAC,CAAC,4BAA4B;YAC9B,CAAC,CAAC,oBAAoB;QACxB,CAAC,CAAC,SAAS;YACT,CAAC,CAAC,sBAAsB;YACxB,CAAC,CAAC,cAAc,CAAC;IAErB,MAAM,gBAAgB,GAAG,CAAC,KAA4B,EAAE,EAAE;QACxD,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,SAAS,EAAE,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,KAA4B,EAAE,EAAE;QACzD,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,UAAU,EAAE,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,UAAU,CACT,SAAS,CAAC,CAAC;YACT,OAAO,EAAE,WAAW,CAAC,MAAM;YAC3B,UAAU,EAAE,UAAU,CAAC,MAAM;YAC7B,aAAa,EAAE,CAAC;YAChB,aAAa,EAAE,MAAM;YACrB,GAAG,SAAS;YACZ,WAAW,EAAE,GAAG,gBAAgB,IAAI,SAAS,EAAE,WAAW,IAAI,EAAE,EAAE;SACnE,CAAC,CACF,YAAY,CAAC,CAAC;YACZ,KAAK,EAAE,gBAA6B;YACpC,gBAAgB,EAAE;gBAChB,WAAW,EAAE,gBAAgB;aAC9B;YACD,GAAG,YAAY;SAChB,CAAC,CACF,cAAc,CAAC,CAAC;YACd,IAAI,EAAE,QAAQ,CAAC,EAAE;YACjB,GAAG,cAAc;YACjB,WAAW,EAAE,GAAG,gBAAgB,IAAI,cAAc,EAAE,WAAW,IAAI,EAAE,EAAE;SACxE,CAAC,CACF,YAAY,CAAC,CAAC;YACZ,IAAI,EAAE,QAAQ,CAAC,EAAE;YACjB,GAAG,YAAY;YACf,WAAW,EAAE,GAAG,gBAAgB,IAAI,YAAY,EAAE,WAAW,IAAI,EAAE,EAAE;SACtE,CAAC,CACF,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,SAAS,CAAC,CAAC,gBAAgB,CAAC,CAC5B,UAAU,CAAC,CAAC,iBAAiB,CAAC,CAC9B,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA,GAAG,qBAAqB,EAAE,EAAE,KAAK,CAAC,CAAC,CAC7C,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useState } from 'react';\nimport type { GestureResponderEvent } from 'react-native';\n\nimport { ButtonBase } from '../../../ButtonBase';\nimport type { IconColor } from '../../../Icon';\nimport { IconSize } from '../../../Icon';\nimport { TextVariant, FontWeight } from '../../../Text';\n\nimport type { ButtonSecondaryProps } from './ButtonSecondary.types';\n\nexport const ButtonSecondary = ({\n  children,\n  textProps,\n  spinnerProps,\n  startIconProps,\n  endIconProps,\n  isDanger = false,\n  isInverse = false,\n  isLoading = false,\n  onPressIn,\n  onPressOut,\n  twClassName = '',\n  style,\n  ...props\n}: ButtonSecondaryProps) => {\n  const [isPressed, setIsPressed] = useState(false);\n  const tw = useTailwind();\n  const twContainerClassNames = `\n    ${\n      isInverse && isDanger\n        ? isPressed || isLoading\n          ? 'bg-default-pressed'\n          : 'bg-default'\n        : isDanger\n          ? isPressed || isLoading\n            ? 'bg-error-muted-pressed'\n            : 'bg-transparent'\n          : isPressed || isLoading\n            ? 'bg-pressed'\n            : 'bg-transparent'\n    }\n    border-[1.5px]\n    ${\n      isInverse && isDanger\n        ? isPressed || isLoading\n          ? 'border-background-default-pressed'\n          : 'border-background-default'\n        : isDanger\n          ? isPressed || isLoading\n            ? 'border-error-default-pressed'\n            : 'border-error-default'\n          : isInverse\n            ? 'border-primary-inverse'\n            : 'border-icon-default'\n    }\n    ${twClassName}\n  `;\n\n  const twTextClassNames = isDanger\n    ? isPressed || isLoading\n      ? 'text-error-default-pressed'\n      : 'text-error-default'\n    : isInverse\n      ? 'text-primary-inverse'\n      : 'text-default';\n\n  const onPressInHandler = (event: GestureResponderEvent) => {\n    setIsPressed(true);\n    onPressIn?.(event);\n  };\n\n  const onPressOutHandler = (event: GestureResponderEvent) => {\n    setIsPressed(false);\n    onPressOut?.(event);\n  };\n\n  return (\n    <ButtonBase\n      textProps={{\n        variant: TextVariant.BodyMd,\n        fontWeight: FontWeight.Medium,\n        numberOfLines: 1,\n        ellipsizeMode: 'clip',\n        ...textProps,\n        twClassName: `${twTextClassNames} ${textProps?.twClassName ?? ''}`,\n      }}\n      spinnerProps={{\n        color: twTextClassNames as IconColor,\n        loadingTextProps: {\n          twClassName: twTextClassNames,\n        },\n        ...spinnerProps,\n      }}\n      startIconProps={{\n        size: IconSize.Sm,\n        ...startIconProps,\n        twClassName: `${twTextClassNames} ${startIconProps?.twClassName ?? ''}`,\n      }}\n      endIconProps={{\n        size: IconSize.Sm,\n        ...endIconProps,\n        twClassName: `${twTextClassNames} ${endIconProps?.twClassName ?? ''}`,\n      }}\n      isLoading={isLoading}\n      onPressIn={onPressInHandler}\n      onPressOut={onPressOutHandler}\n      style={[tw`${twContainerClassNames}`, style]}\n      {...props}\n    >\n      {children}\n    </ButtonBase>\n  );\n};\n"]}

package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.types.cjs

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=ButtonSecondary.types.cjs.map

package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.types.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonSecondary.types.cjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonSecondary/ButtonSecondary.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonBaseProps } from '../../../ButtonBase';\n\n/**\n * ButtonSecondary component props.\n */\nexport type ButtonSecondaryProps = {\n  /**\n   * Optional prop to show the danger state of the button.\n   *\n   * @default false\n   */\n  isDanger?: boolean;\n  /**\n   * Optional prop to show the inverse state of the button, which is reserved for buttons on colored backgrounds.\n   *\n   * @default false\n   */\n  isInverse?: boolean;\n} & ButtonBaseProps;\n"]}