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

package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.types.d.ts

@@ -0,0 +1,17 @@
+import type { ButtonBaseProps } from '../../../../primitives/ButtonBase';
+/**
+ * ButtonTertiary component props.
+ */
+export type ButtonTertiaryProps = {
+    /**
+     * 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=ButtonTertiary.types.d.ts.map

package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonTertiary.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/ButtonTertiary.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAEzE;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,eAAe,CAAC"}

package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.types.js

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

package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonTertiary.types.js","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/ButtonTertiary.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonBaseProps } from '../../../../primitives/ButtonBase';\n\n/**\n * ButtonTertiary component props.\n */\nexport type ButtonTertiaryProps = {\n  /**\n   * Optional prop to show the danger state of the button.\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   * @default false\n   */\n  isInverse?: boolean;\n} & ButtonBaseProps;\n"]}

package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.utilities.d.ts

@@ -0,0 +1,88 @@
+import type { ButtonTertiaryProps } from './ButtonTertiary.types';
+/**
+ * Generates Tailwind class names for a tertiary button's container based on its state.
+ *
+ * This function calculates the background, border color, and border width styles dynamically
+ * depending on the button's state (`isPressed`, `isDanger`, `isInverse`, `isLoading`). It also
+ * allows additional Tailwind classes to be appended using the `twClassName` parameter.
+ *
+ * @param isPressed - Indicates whether the button is currently being pressed.
+ * @param isDanger - Indicates whether the button is in a "danger" state.
+ * @param isInverse - Indicates whether the button is using an "inverse" theme.
+ * @param isLoading - Indicates whether the button is in a loading state.
+ * @param twClassName - Additional Tailwind class names for customization.
+ * @returns A string containing the combined Tailwind class names for the container's background,
+ * border styles, and any additional classes.
+ *
+ * Example:
+ * ```
+ * const classNames = generateButtonTertiaryContainerClassNames({
+ *   isPressed: true,
+ *   isDanger: true,
+ *   isInverse: false,
+ *   isLoading: false,
+ *   twClassName: 'rounded-full',
+ * });
+ *
+ * console.log(classNames);
+ * // Output: "bg-error-mutedPressed border-0 border-error-mutedPressed rounded-full"
+ *
+ * const inverseClassNames = generateButtonTertiaryContainerClassNames({
+ *   isInverse: true,
+ *   twClassName: 'rounded-lg',
+ * });
+ *
+ * console.log(inverseClassNames);
+ * // Output: "bg-transparent border-[1.5px] border-primary-inverse rounded-lg"
+ * ```
+ *
+ * State Priorities:
+ * 1. If `isInverse` and `isDanger` are true, styles are dynamically determined based on `isPressed` or `isLoading`.
+ * 2. If only `isDanger` is true, the styles reflect error-related colors with no borders.
+ * 3. If only `isInverse` is true, a border width is added along with inverse-specific styles.
+ * 4. If none of the above states are true, default styles are applied for a non-danger, non-inverse tertiary button.
+ */
+export declare const generateButtonTertiaryContainerClassNames: ({ isPressed, isDanger, isInverse, isLoading, twClassName, }: Partial<ButtonTertiaryProps> & {
+    isPressed?: boolean | undefined;
+}) => string;
+/**
+ * Generates Tailwind class names for a tertiary button's text styling based on its state.
+ *
+ * This function determines the appropriate text color class name for a tertiary button
+ * by evaluating the current states (`isPressed`, `isDanger`, `isInverse`, `isLoading`).
+ * The returned class name dynamically reflects the button's configuration.
+ *
+ * @param isPressed - Indicates whether the button is currently being pressed.
+ * @param isDanger - Indicates whether the button is in a "danger" state.
+ * @param isInverse - Indicates whether the button is using an "inverse" theme.
+ * @param isLoading - Indicates whether the button is in a loading state.
+ * @returns A string containing the Tailwind class name for the button's text color.
+ *
+ * Example:
+ * ```
+ * const classNames = generateButtonTertiaryTextClassNames({
+ *   isPressed: true,
+ *   isDanger: true,
+ *   isInverse: false,
+ *   isLoading: false,
+ * });
+ *
+ * console.log(classNames);
+ * // Output: "text-error-defaultPressed"
+ *
+ * const defaultClassNames = generateButtonTertiaryTextClassNames({});
+ *
+ * console.log(defaultClassNames);
+ * // Output: "text-primary-default"
+ * ```
+ *
+ * State Priorities:
+ * 1. If `isInverse` and `isDanger` are true, the text color is determined dynamically based on `isPressed` or `isLoading`.
+ * 2. If only `isDanger` is true, the text color defaults to `text-error-default` or `text-error-defaultPressed` depending on the state.
+ * 3. If only `isInverse` is true, the text color is `text-primary-inverse`.
+ * 4. If none of the above states are true, the text color defaults to `text-primary-default`.
+ */
+export declare const generateButtonTertiaryTextClassNames: ({ isPressed, isDanger, isInverse, isLoading, }: Partial<ButtonTertiaryProps> & {
+    isPressed?: boolean | undefined;
+}) => string;
+//# sourceMappingURL=ButtonTertiary.utilities.d.ts.map

package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.utilities.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonTertiary.utilities.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/ButtonTertiary.utilities.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAElE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,eAAO,MAAM,yCAAyC;;MAQlD,MAoCH,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,oCAAoC;;MAO7C,MAqBH,CAAC"}

package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.utilities.js

@@ -0,0 +1,147 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateButtonTertiaryTextClassNames = exports.generateButtonTertiaryContainerClassNames = void 0;
+/**
+ * Generates Tailwind class names for a tertiary button's container based on its state.
+ *
+ * This function calculates the background, border color, and border width styles dynamically
+ * depending on the button's state (`isPressed`, `isDanger`, `isInverse`, `isLoading`). It also
+ * allows additional Tailwind classes to be appended using the `twClassName` parameter.
+ *
+ * @param isPressed - Indicates whether the button is currently being pressed.
+ * @param isDanger - Indicates whether the button is in a "danger" state.
+ * @param isInverse - Indicates whether the button is using an "inverse" theme.
+ * @param isLoading - Indicates whether the button is in a loading state.
+ * @param twClassName - Additional Tailwind class names for customization.
+ * @returns A string containing the combined Tailwind class names for the container's background,
+ * border styles, and any additional classes.
+ *
+ * Example:
+ * ```
+ * const classNames = generateButtonTertiaryContainerClassNames({
+ *   isPressed: true,
+ *   isDanger: true,
+ *   isInverse: false,
+ *   isLoading: false,
+ *   twClassName: 'rounded-full',
+ * });
+ *
+ * console.log(classNames);
+ * // Output: "bg-error-mutedPressed border-0 border-error-mutedPressed rounded-full"
+ *
+ * const inverseClassNames = generateButtonTertiaryContainerClassNames({
+ *   isInverse: true,
+ *   twClassName: 'rounded-lg',
+ * });
+ *
+ * console.log(inverseClassNames);
+ * // Output: "bg-transparent border-[1.5px] border-primary-inverse rounded-lg"
+ * ```
+ *
+ * State Priorities:
+ * 1. If `isInverse` and `isDanger` are true, styles are dynamically determined based on `isPressed` or `isLoading`.
+ * 2. If only `isDanger` is true, the styles reflect error-related colors with no borders.
+ * 3. If only `isInverse` is true, a border width is added along with inverse-specific styles.
+ * 4. If none of the above states are true, default styles are applied for a non-danger, non-inverse tertiary button.
+ */
+const generateButtonTertiaryContainerClassNames = ({ isPressed = false, isDanger = false, isInverse = false, isLoading = false, twClassName = '', }) => {
+    let backgroundStyle, borderColorStyle;
+    let borderWidthStyle = 'border-0';
+    const isPressedOrLoading = isPressed || isLoading;
+    if (isInverse && isDanger) {
+        backgroundStyle = isPressedOrLoading
+            ? 'bg-background-defaultPressed'
+            : 'bg-background-default';
+        borderColorStyle = isPressedOrLoading
+            ? 'border-background-defaultPressed'
+            : 'border-background-default';
+    }
+    else if (isDanger) {
+        backgroundStyle = isPressedOrLoading
+            ? 'bg-error-mutedPressed'
+            : 'bg-transparent';
+        borderColorStyle = isPressedOrLoading
+            ? 'border-error-mutedPressed'
+            : 'border-transparent';
+    }
+    else if (isInverse) {
+        backgroundStyle = isPressedOrLoading
+            ? 'bg-background-pressed'
+            : 'bg-transparent';
+        borderColorStyle = 'border-primary-inverse';
+        borderWidthStyle = 'border-[1.5px]';
+    }
+    else {
+        backgroundStyle = isPressedOrLoading
+            ? 'bg-background-pressed'
+            : 'bg-transparent';
+        borderColorStyle = isPressedOrLoading
+            ? 'border-background-pressed'
+            : 'border-transparent';
+    }
+    return `${backgroundStyle} ${borderWidthStyle} ${borderColorStyle} ${twClassName}`;
+};
+exports.generateButtonTertiaryContainerClassNames = generateButtonTertiaryContainerClassNames;
+/**
+ * Generates Tailwind class names for a tertiary button's text styling based on its state.
+ *
+ * This function determines the appropriate text color class name for a tertiary button
+ * by evaluating the current states (`isPressed`, `isDanger`, `isInverse`, `isLoading`).
+ * The returned class name dynamically reflects the button's configuration.
+ *
+ * @param isPressed - Indicates whether the button is currently being pressed.
+ * @param isDanger - Indicates whether the button is in a "danger" state.
+ * @param isInverse - Indicates whether the button is using an "inverse" theme.
+ * @param isLoading - Indicates whether the button is in a loading state.
+ * @returns A string containing the Tailwind class name for the button's text color.
+ *
+ * Example:
+ * ```
+ * const classNames = generateButtonTertiaryTextClassNames({
+ *   isPressed: true,
+ *   isDanger: true,
+ *   isInverse: false,
+ *   isLoading: false,
+ * });
+ *
+ * console.log(classNames);
+ * // Output: "text-error-defaultPressed"
+ *
+ * const defaultClassNames = generateButtonTertiaryTextClassNames({});
+ *
+ * console.log(defaultClassNames);
+ * // Output: "text-primary-default"
+ * ```
+ *
+ * State Priorities:
+ * 1. If `isInverse` and `isDanger` are true, the text color is determined dynamically based on `isPressed` or `isLoading`.
+ * 2. If only `isDanger` is true, the text color defaults to `text-error-default` or `text-error-defaultPressed` depending on the state.
+ * 3. If only `isInverse` is true, the text color is `text-primary-inverse`.
+ * 4. If none of the above states are true, the text color defaults to `text-primary-default`.
+ */
+const generateButtonTertiaryTextClassNames = ({ isPressed = false, isDanger = false, isInverse = false, isLoading = false, }) => {
+    let textColor;
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+    const isPressedOrLoading = isPressed || isLoading;
+    if (isInverse && isDanger) {
+        textColor = isPressedOrLoading
+            ? 'text-error-defaultPressed'
+            : 'text-error-default';
+    }
+    else if (isDanger) {
+        textColor = isPressedOrLoading
+            ? 'text-error-defaultPressed'
+            : 'text-error-default';
+    }
+    else if (isInverse) {
+        textColor = 'text-primary-inverse';
+    }
+    else {
+        textColor = isPressedOrLoading
+            ? 'text-primary-defaultPressed'
+            : 'text-primary-default';
+    }
+    return `${textColor}`;
+};
+exports.generateButtonTertiaryTextClassNames = generateButtonTertiaryTextClassNames;
+//# sourceMappingURL=ButtonTertiary.utilities.js.map

package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.utilities.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonTertiary.utilities.js","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/ButtonTertiary.utilities.ts"],"names":[],"mappings":";;;AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACI,MAAM,yCAAyC,GAAG,CAAC,EACxD,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,KAAK,EACjB,SAAS,GAAG,KAAK,EACjB,WAAW,GAAG,EAAE,GAGjB,EAAU,EAAE;IACX,IAAI,eAAe,EAAE,gBAAgB,CAAC;IACtC,IAAI,gBAAgB,GAAG,UAAU,CAAC;IAElC,MAAM,kBAAkB,GAAG,SAAS,IAAI,SAAS,CAAC;IAElD,IAAI,SAAS,IAAI,QAAQ,EAAE;QACzB,eAAe,GAAG,kBAAkB;YAClC,CAAC,CAAC,8BAA8B;YAChC,CAAC,CAAC,uBAAuB,CAAC;QAC5B,gBAAgB,GAAG,kBAAkB;YACnC,CAAC,CAAC,kCAAkC;YACpC,CAAC,CAAC,2BAA2B,CAAC;KACjC;SAAM,IAAI,QAAQ,EAAE;QACnB,eAAe,GAAG,kBAAkB;YAClC,CAAC,CAAC,uBAAuB;YACzB,CAAC,CAAC,gBAAgB,CAAC;QACrB,gBAAgB,GAAG,kBAAkB;YACnC,CAAC,CAAC,2BAA2B;YAC7B,CAAC,CAAC,oBAAoB,CAAC;KAC1B;SAAM,IAAI,SAAS,EAAE;QACpB,eAAe,GAAG,kBAAkB;YAClC,CAAC,CAAC,uBAAuB;YACzB,CAAC,CAAC,gBAAgB,CAAC;QACrB,gBAAgB,GAAG,wBAAwB,CAAC;QAC5C,gBAAgB,GAAG,gBAAgB,CAAC;KACrC;SAAM;QACL,eAAe,GAAG,kBAAkB;YAClC,CAAC,CAAC,uBAAuB;YACzB,CAAC,CAAC,gBAAgB,CAAC;QACrB,gBAAgB,GAAG,kBAAkB;YACnC,CAAC,CAAC,2BAA2B;YAC7B,CAAC,CAAC,oBAAoB,CAAC;KAC1B;IAED,OAAO,GAAG,eAAe,IAAI,gBAAgB,IAAI,gBAAgB,IAAI,WAAW,EAAE,CAAC;AACrF,CAAC,CAAC;AA5CW,QAAA,yCAAyC,6CA4CpD;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACI,MAAM,oCAAoC,GAAG,CAAC,EACnD,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,KAAK,EACjB,SAAS,GAAG,KAAK,GAGlB,EAAU,EAAE;IACX,IAAI,SAAS,CAAC;IACd,wEAAwE;IACxE,MAAM,kBAAkB,GAAG,SAAS,IAAI,SAAS,CAAC;IAClD,IAAI,SAAS,IAAI,QAAQ,EAAE;QACzB,SAAS,GAAG,kBAAkB;YAC5B,CAAC,CAAC,2BAA2B;YAC7B,CAAC,CAAC,oBAAoB,CAAC;KAC1B;SAAM,IAAI,QAAQ,EAAE;QACnB,SAAS,GAAG,kBAAkB;YAC5B,CAAC,CAAC,2BAA2B;YAC7B,CAAC,CAAC,oBAAoB,CAAC;KAC1B;SAAM,IAAI,SAAS,EAAE;QACpB,SAAS,GAAG,sBAAsB,CAAC;KACpC;SAAM;QACL,SAAS,GAAG,kBAAkB;YAC5B,CAAC,CAAC,6BAA6B;YAC/B,CAAC,CAAC,sBAAsB,CAAC;KAC5B;IAED,OAAO,GAAG,SAAS,EAAE,CAAC;AACxB,CAAC,CAAC;AA5BW,QAAA,oCAAoC,wCA4B/C","sourcesContent":["/* eslint-disable jsdoc/check-param-names */\n/* eslint-disable jsdoc/require-param */\nimport type { ButtonTertiaryProps } from './ButtonTertiary.types';\n\n/**\n * Generates Tailwind class names for a tertiary button's container based on its state.\n *\n * This function calculates the background, border color, and border width styles dynamically\n * depending on the button's state (`isPressed`, `isDanger`, `isInverse`, `isLoading`). It also\n * allows additional Tailwind classes to be appended using the `twClassName` parameter.\n *\n * @param isPressed - Indicates whether the button is currently being pressed.\n * @param isDanger - Indicates whether the button is in a \"danger\" state.\n * @param isInverse - Indicates whether the button is using an \"inverse\" theme.\n * @param isLoading - Indicates whether the button is in a loading state.\n * @param twClassName - Additional Tailwind class names for customization.\n * @returns A string containing the combined Tailwind class names for the container's background,\n * border styles, and any additional classes.\n *\n * Example:\n * ```\n * const classNames = generateButtonTertiaryContainerClassNames({\n *   isPressed: true,\n *   isDanger: true,\n *   isInverse: false,\n *   isLoading: false,\n *   twClassName: 'rounded-full',\n * });\n *\n * console.log(classNames);\n * // Output: \"bg-error-mutedPressed border-0 border-error-mutedPressed rounded-full\"\n *\n * const inverseClassNames = generateButtonTertiaryContainerClassNames({\n *   isInverse: true,\n *   twClassName: 'rounded-lg',\n * });\n *\n * console.log(inverseClassNames);\n * // Output: \"bg-transparent border-[1.5px] border-primary-inverse rounded-lg\"\n * ```\n *\n * State Priorities:\n * 1. If `isInverse` and `isDanger` are true, styles are dynamically determined based on `isPressed` or `isLoading`.\n * 2. If only `isDanger` is true, the styles reflect error-related colors with no borders.\n * 3. If only `isInverse` is true, a border width is added along with inverse-specific styles.\n * 4. If none of the above states are true, default styles are applied for a non-danger, non-inverse tertiary button.\n */\nexport const generateButtonTertiaryContainerClassNames = ({\n  isPressed = false,\n  isDanger = false,\n  isInverse = false,\n  isLoading = false,\n  twClassName = '',\n}: Partial<ButtonTertiaryProps> & {\n  isPressed?: boolean;\n}): string => {\n  let backgroundStyle, borderColorStyle;\n  let borderWidthStyle = 'border-0';\n\n  const isPressedOrLoading = isPressed || isLoading;\n\n  if (isInverse && isDanger) {\n    backgroundStyle = isPressedOrLoading\n      ? 'bg-background-defaultPressed'\n      : 'bg-background-default';\n    borderColorStyle = isPressedOrLoading\n      ? 'border-background-defaultPressed'\n      : 'border-background-default';\n  } else if (isDanger) {\n    backgroundStyle = isPressedOrLoading\n      ? 'bg-error-mutedPressed'\n      : 'bg-transparent';\n    borderColorStyle = isPressedOrLoading\n      ? 'border-error-mutedPressed'\n      : 'border-transparent';\n  } else if (isInverse) {\n    backgroundStyle = isPressedOrLoading\n      ? 'bg-background-pressed'\n      : 'bg-transparent';\n    borderColorStyle = 'border-primary-inverse';\n    borderWidthStyle = 'border-[1.5px]';\n  } else {\n    backgroundStyle = isPressedOrLoading\n      ? 'bg-background-pressed'\n      : 'bg-transparent';\n    borderColorStyle = isPressedOrLoading\n      ? 'border-background-pressed'\n      : 'border-transparent';\n  }\n\n  return `${backgroundStyle} ${borderWidthStyle} ${borderColorStyle} ${twClassName}`;\n};\n\n/**\n * Generates Tailwind class names for a tertiary button's text styling based on its state.\n *\n * This function determines the appropriate text color class name for a tertiary button\n * by evaluating the current states (`isPressed`, `isDanger`, `isInverse`, `isLoading`).\n * The returned class name dynamically reflects the button's configuration.\n *\n * @param isPressed - Indicates whether the button is currently being pressed.\n * @param isDanger - Indicates whether the button is in a \"danger\" state.\n * @param isInverse - Indicates whether the button is using an \"inverse\" theme.\n * @param isLoading - Indicates whether the button is in a loading state.\n * @returns A string containing the Tailwind class name for the button's text color.\n *\n * Example:\n * ```\n * const classNames = generateButtonTertiaryTextClassNames({\n *   isPressed: true,\n *   isDanger: true,\n *   isInverse: false,\n *   isLoading: false,\n * });\n *\n * console.log(classNames);\n * // Output: \"text-error-defaultPressed\"\n *\n * const defaultClassNames = generateButtonTertiaryTextClassNames({});\n *\n * console.log(defaultClassNames);\n * // Output: \"text-primary-default\"\n * ```\n *\n * State Priorities:\n * 1. If `isInverse` and `isDanger` are true, the text color is determined dynamically based on `isPressed` or `isLoading`.\n * 2. If only `isDanger` is true, the text color defaults to `text-error-default` or `text-error-defaultPressed` depending on the state.\n * 3. If only `isInverse` is true, the text color is `text-primary-inverse`.\n * 4. If none of the above states are true, the text color defaults to `text-primary-default`.\n */\nexport const generateButtonTertiaryTextClassNames = ({\n  isPressed = false,\n  isDanger = false,\n  isInverse = false,\n  isLoading = false,\n}: Partial<ButtonTertiaryProps> & {\n  isPressed?: boolean;\n}): string => {\n  let textColor;\n  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing\n  const isPressedOrLoading = isPressed || isLoading;\n  if (isInverse && isDanger) {\n    textColor = isPressedOrLoading\n      ? 'text-error-defaultPressed'\n      : 'text-error-default';\n  } else if (isDanger) {\n    textColor = isPressedOrLoading\n      ? 'text-error-defaultPressed'\n      : 'text-error-default';\n  } else if (isInverse) {\n    textColor = 'text-primary-inverse';\n  } else {\n    textColor = isPressedOrLoading\n      ? 'text-primary-defaultPressed'\n      : 'text-primary-default';\n  }\n\n  return `${textColor}`;\n};\n"]}

package/dist/components/Button/variants/ButtonTertiary/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from './ButtonTertiary';
+export type { ButtonTertiaryProps } from './ButtonTertiary.types';
+export { ButtonBaseSize as ButtonTertiarySize } from '../../../../primitives/ButtonBase';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Button/variants/ButtonTertiary/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,YAAY,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,cAAc,IAAI,kBAAkB,EAAE,MAAM,mCAAmC,CAAC"}

package/dist/components/Button/variants/ButtonTertiary/index.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonTertiarySize = exports.default = void 0;
+var ButtonTertiary_1 = require("./ButtonTertiary");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ButtonTertiary_1).default; } });
+var ButtonBase_1 = require("../../../../primitives/ButtonBase");
+Object.defineProperty(exports, "ButtonTertiarySize", { enumerable: true, get: function () { return ButtonBase_1.ButtonBaseSize; } });
+//# sourceMappingURL=index.js.map

package/dist/components/Button/variants/ButtonTertiary/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/index.ts"],"names":[],"mappings":";;;;;;AAAA,mDAA2C;AAAlC,0HAAA,OAAO,OAAA;AAEhB,gEAAyF;AAAhF,gHAAA,cAAc,OAAsB","sourcesContent":["export { default } from './ButtonTertiary';\nexport type { ButtonTertiaryProps } from './ButtonTertiary.types';\nexport { ButtonBaseSize as ButtonTertiarySize } from '../../../../primitives/ButtonBase';\n"]}

package/dist/components/ButtonIcon/ButtonIcon.constants.d.ts

@@ -0,0 +1,6 @@
+import { IconSize } from '../Icon';
+import { ButtonIconSize } from './ButtonIcon.types';
+import type { ButtonIconProps } from './ButtonIcon.types';
+export declare const MAPPING_BUTTONICONSIZE_ICONSIZE: Record<ButtonIconSize, IconSize>;
+export declare const DEFAULT_BUTTONICON_PROPS: Pick<ButtonIconProps, 'iconName' | 'size' | 'isDisabled' | 'isInverse' | 'isFloating'>;
+//# sourceMappingURL=ButtonIcon.constants.d.ts.map

package/dist/components/ButtonIcon/ButtonIcon.constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonIcon.constants.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAY,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAG1D,eAAO,MAAM,+BAA+B,EAAE,MAAM,CAAC,cAAc,EAAE,QAAQ,CAK1E,CAAC;AAGJ,eAAO,MAAM,wBAAwB,EAAE,IAAI,CACzC,eAAe,EACf,UAAU,GAAG,MAAM,GAAG,YAAY,GAAG,WAAW,GAAG,YAAY,CAOhE,CAAC"}

package/dist/components/ButtonIcon/ButtonIcon.constants.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_BUTTONICON_PROPS = exports.MAPPING_BUTTONICONSIZE_ICONSIZE = void 0;
+const Icon_1 = require("../Icon");
+const ButtonIcon_types_1 = require("./ButtonIcon.types");
+// Mappings
+exports.MAPPING_BUTTONICONSIZE_ICONSIZE = {
+    [ButtonIcon_types_1.ButtonIconSize.Sm]: Icon_1.IconSize.Sm,
+    [ButtonIcon_types_1.ButtonIconSize.Md]: Icon_1.IconSize.Md,
+    [ButtonIcon_types_1.ButtonIconSize.Lg]: Icon_1.IconSize.Lg,
+};
+// Defaults
+exports.DEFAULT_BUTTONICON_PROPS = {
+    iconName: Icon_1.IconName.Close,
+    size: ButtonIcon_types_1.ButtonIconSize.Md,
+    isDisabled: false,
+    isInverse: false,
+    isFloating: false,
+};
+//# sourceMappingURL=ButtonIcon.constants.js.map

package/dist/components/ButtonIcon/ButtonIcon.constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonIcon.constants.js","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":";;;AAAA,kCAA6C;AAC7C,yDAAoD;AAGpD,WAAW;AACE,QAAA,+BAA+B,GAC1C;IACE,CAAC,iCAAc,CAAC,EAAE,CAAC,EAAE,eAAQ,CAAC,EAAE;IAChC,CAAC,iCAAc,CAAC,EAAE,CAAC,EAAE,eAAQ,CAAC,EAAE;IAChC,CAAC,iCAAc,CAAC,EAAE,CAAC,EAAE,eAAQ,CAAC,EAAE;CACjC,CAAC;AAEJ,WAAW;AACE,QAAA,wBAAwB,GAGjC;IACF,QAAQ,EAAE,eAAQ,CAAC,KAAK;IACxB,IAAI,EAAE,iCAAc,CAAC,EAAE;IACvB,UAAU,EAAE,KAAK;IACjB,SAAS,EAAE,KAAK;IAChB,UAAU,EAAE,KAAK;CAClB,CAAC","sourcesContent":["import { IconSize, IconName } from '../Icon';\nimport { ButtonIconSize } from './ButtonIcon.types';\nimport type { ButtonIconProps } from './ButtonIcon.types';\n\n// Mappings\nexport const MAPPING_BUTTONICONSIZE_ICONSIZE: Record<ButtonIconSize, IconSize> =\n  {\n    [ButtonIconSize.Sm]: IconSize.Sm,\n    [ButtonIconSize.Md]: IconSize.Md,\n    [ButtonIconSize.Lg]: IconSize.Lg,\n  };\n\n// Defaults\nexport const DEFAULT_BUTTONICON_PROPS: Pick<\n  ButtonIconProps,\n  'iconName' | 'size' | 'isDisabled' | 'isInverse' | 'isFloating'\n> = {\n  iconName: IconName.Close,\n  size: ButtonIconSize.Md,\n  isDisabled: false,\n  isInverse: false,\n  isFloating: false,\n};\n"]}

package/dist/components/ButtonIcon/ButtonIcon.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { ButtonIconProps } from './ButtonIcon.types';
+declare const ButtonIcon: ({ size, iconName, iconProps, isDisabled, isInverse, isFloating, onPressIn, onPressOut, twClassName, style, ...props }: ButtonIconProps) => React.JSX.Element;
+export default ButtonIcon;
+//# sourceMappingURL=ButtonIcon.d.ts.map

package/dist/components/ButtonIcon/ButtonIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonIcon.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAUjD,OAAO,KAAK,EAAE,eAAe,EAAkB,MAAM,oBAAoB,CAAC;AAM1E,QAAA,MAAM,UAAU,0HAYb,eAAe,sBAgDjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/ButtonIcon/ButtonIcon.js

@@ -0,0 +1,72 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
+const design_system_twrnc_preset_1 = require("@metamask-previews/design-system-twrnc-preset");
+const react_1 = __importStar(require("react"));
+const ButtonAnimated_1 = __importDefault(require("../../primitives/ButtonAnimated"));
+const Icon_1 = __importDefault(require("../Icon"));
+const ButtonIcon_constants_1 = require("./ButtonIcon.constants");
+const ButtonIcon_utilities_1 = require("./ButtonIcon.utilities");
+const ButtonIcon = ({ size = ButtonIcon_constants_1.DEFAULT_BUTTONICON_PROPS.size, iconName, iconProps, isDisabled = ButtonIcon_constants_1.DEFAULT_BUTTONICON_PROPS.isDisabled, isInverse = ButtonIcon_constants_1.DEFAULT_BUTTONICON_PROPS.isInverse, isFloating = ButtonIcon_constants_1.DEFAULT_BUTTONICON_PROPS.isFloating, onPressIn, onPressOut, twClassName, style, ...props }) => {
+    const [isPressed, setIsPressed] = (0, react_1.useState)(false);
+    const tw = (0, design_system_twrnc_preset_1.useTailwind)();
+    const twContainerClassNames = (0, react_1.useMemo)(() => {
+        return (0, ButtonIcon_utilities_1.generateButtonIconContainerClassNames)({
+            isDisabled,
+            isPressed,
+            isFloating,
+            size,
+            twClassName,
+        });
+    }, [isDisabled, isPressed, isFloating, size, twClassName]);
+    const twIconColorClassNames = (0, react_1.useMemo)(() => {
+        return (0, ButtonIcon_utilities_1.generateButtonIconIconColorClassNames)({
+            isInverse,
+            isFloating,
+        });
+    }, [isInverse, isFloating]);
+    const finalIconProps = {
+        color: twIconColorClassNames,
+        size: ButtonIcon_constants_1.MAPPING_BUTTONICONSIZE_ICONSIZE[size],
+        ...iconProps,
+    };
+    const onPressInHandler = (event) => {
+        setIsPressed(true);
+        onPressIn?.(event);
+    };
+    const onPressOutHandler = (event) => {
+        setIsPressed(false);
+        onPressOut?.(event);
+    };
+    return (<ButtonAnimated_1.default disabled={isDisabled} onPressIn={onPressInHandler} onPressOut={onPressOutHandler} accessible style={[tw `${twContainerClassNames}`, style]} testID="button-icon" {...props}>
+      <Icon_1.default name={iconName} {...finalIconProps}/>
+    </ButtonAnimated_1.default>);
+};
+exports.default = ButtonIcon;
+//# sourceMappingURL=ButtonIcon.js.map

package/dist/components/ButtonIcon/ButtonIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonIcon.js","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,iEAAiE;AACjE,8FAA4E;AAC5E,+CAAiD;AAGjD,qFAA6D;AAE7D,mDAA2B;AAC3B,iEAGgC;AAEhC,iEAGgC;AAEhC,MAAM,UAAU,GAAG,CAAC,EAClB,IAAI,GAAG,+CAAwB,CAAC,IAAI,EACpC,QAAQ,EACR,SAAS,EACT,UAAU,GAAG,+CAAwB,CAAC,UAAU,EAChD,SAAS,GAAG,+CAAwB,CAAC,SAAS,EAC9C,UAAU,GAAG,+CAAwB,CAAC,UAAU,EAChD,SAAS,EACT,UAAU,EACV,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACQ,EAAE,EAAE;IACpB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAClD,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IACzB,MAAM,qBAAqB,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACzC,OAAO,IAAA,4DAAqC,EAAC;YAC3C,UAAU;YACV,SAAS;YACT,UAAU;YACV,IAAI;YACJ,WAAW;SACZ,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC;IAE3D,MAAM,qBAAqB,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACzC,OAAO,IAAA,4DAAqC,EAAC;YAC3C,SAAS;YACT,UAAU;SACX,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;IAE5B,MAAM,cAAc,GAAuB;QACzC,KAAK,EAAE,qBAAqB;QAC5B,IAAI,EAAE,sDAA+B,CAAC,IAAsB,CAAC;QAC7D,GAAG,SAAS;KACb,CAAC;IACF,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,wBAAc,CACb,QAAQ,CAAC,CAAC,UAAU,CAAC,CACrB,SAAS,CAAC,CAAC,gBAAgB,CAAC,CAC5B,UAAU,CAAC,CAAC,iBAAiB,CAAC,CAC9B,UAAU,CACV,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA,GAAG,qBAAqB,EAAE,EAAE,KAAK,CAAC,CAAC,CAC7C,MAAM,CAAC,aAAa,CACpB,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,cAAI,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,IAAI,cAAc,CAAC,EAC3C;IAAA,EAAE,wBAAc,CAAC,CAClB,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,UAAU,CAAC","sourcesContent":["/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useMemo, useState } from 'react';\nimport type { GestureResponderEvent } from 'react-native';\n\nimport ButtonAnimated from '../../primitives/ButtonAnimated';\nimport type { IconProps } from '../Icon';\nimport Icon from '../Icon';\nimport {\n  DEFAULT_BUTTONICON_PROPS,\n  MAPPING_BUTTONICONSIZE_ICONSIZE,\n} from './ButtonIcon.constants';\nimport type { ButtonIconProps, ButtonIconSize } from './ButtonIcon.types';\nimport {\n  generateButtonIconContainerClassNames,\n  generateButtonIconIconColorClassNames,\n} from './ButtonIcon.utilities';\n\nconst ButtonIcon = ({\n  size = DEFAULT_BUTTONICON_PROPS.size,\n  iconName,\n  iconProps,\n  isDisabled = DEFAULT_BUTTONICON_PROPS.isDisabled,\n  isInverse = DEFAULT_BUTTONICON_PROPS.isInverse,\n  isFloating = DEFAULT_BUTTONICON_PROPS.isFloating,\n  onPressIn,\n  onPressOut,\n  twClassName,\n  style,\n  ...props\n}: ButtonIconProps) => {\n  const [isPressed, setIsPressed] = useState(false);\n  const tw = useTailwind();\n  const twContainerClassNames = useMemo(() => {\n    return generateButtonIconContainerClassNames({\n      isDisabled,\n      isPressed,\n      isFloating,\n      size,\n      twClassName,\n    });\n  }, [isDisabled, isPressed, isFloating, size, twClassName]);\n\n  const twIconColorClassNames = useMemo(() => {\n    return generateButtonIconIconColorClassNames({\n      isInverse,\n      isFloating,\n    });\n  }, [isInverse, isFloating]);\n\n  const finalIconProps: Partial<IconProps> = {\n    color: twIconColorClassNames,\n    size: MAPPING_BUTTONICONSIZE_ICONSIZE[size as ButtonIconSize],\n    ...iconProps,\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    <ButtonAnimated\n      disabled={isDisabled}\n      onPressIn={onPressInHandler}\n      onPressOut={onPressOutHandler}\n      accessible\n      style={[tw`${twContainerClassNames}`, style]}\n      testID=\"button-icon\"\n      {...props}\n    >\n      <Icon name={iconName} {...finalIconProps} />\n    </ButtonAnimated>\n  );\n};\n\nexport default ButtonIcon;\n"]}

package/dist/components/ButtonIcon/ButtonIcon.types.d.ts

@@ -0,0 +1,60 @@
+import type { PressableProps, StyleProp, ViewStyle } from 'react-native';
+import type { IconProps, IconName } from '../Icon';
+export declare enum ButtonIconSize {
+    /**
+     * Represents a small button size (24px).
+     */
+    Sm = "24",
+    /**
+     * Represents a medium button size (32px).
+     */
+    Md = "32",
+    /**
+     * Represents a large button size (40px).
+     */
+    Lg = "40"
+}
+/**
+ * ButtonIcon component props.
+ */
+export type ButtonIconProps = {
+    /**
+     * Optional prop to control the size of the icon
+     * Different sizes map to specific pixel dimensions
+     * @default IconSize.Md
+     */
+    size?: ButtonIconSize;
+    /**
+     * Optional prop to specify an icon to show
+     */
+    iconName: IconName;
+    /**
+     * 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 to show the inverse state of the button, which is reserved for buttons on colored backgrounds.
+     * @default false
+     */
+    isInverse?: boolean;
+    /**
+     * Optional prop to show the floating/contained state of the button, which is reserved for floating buttons.
+     * Note: This prop provides styling only. There is no positioning logic.
+     * @default false
+     */
+    isFloating?: boolean;
+    /**
+     * Optional prop to add twrnc overriding classNames.
+     */
+    twClassName?: string;
+    /**
+     * Optional prop to control the style.
+     */
+    style?: StyleProp<ViewStyle>;
+} & Omit<PressableProps, 'children'>;
+//# sourceMappingURL=ButtonIcon.types.d.ts.map

package/dist/components/ButtonIcon/ButtonIcon.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonIcon.types.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzE,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEnD,oBAAY,cAAc;IACxB;;OAEG;IACH,EAAE,OAAO;IACT;;OAEG;IACH,EAAE,OAAO;IACT;;OAEG;IACH,EAAE,OAAO;CACV;AAED;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B;;;;OAIG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;OAEG;IACH,QAAQ,EAAE,QAAQ,CAAC;IACnB;;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;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC"}

package/dist/components/ButtonIcon/ButtonIcon.types.js

@@ -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"] = "24";
+    /**
+     * Represents a medium button size (32px).
+     */
+    ButtonIconSize["Md"] = "32";
+    /**
+     * Represents a large button size (40px).
+     */
+    ButtonIconSize["Lg"] = "40";
+})(ButtonIconSize || (exports.ButtonIconSize = ButtonIconSize = {}));
+//# sourceMappingURL=ButtonIcon.types.js.map

package/dist/components/ButtonIcon/ButtonIcon.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonIcon.types.js","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.types.ts"],"names":[],"mappings":";;;AAIA,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 { PressableProps, StyleProp, ViewStyle } from 'react-native';\n\nimport type { IconProps, IconName } from '../Icon';\n\nexport enum ButtonIconSize {\n  /**\n   * Represents a small button size (24px).\n   */\n  Sm = '24',\n  /**\n   * Represents a medium button size (32px).\n   */\n  Md = '32',\n  /**\n   * Represents a large button size (40px).\n   */\n  Lg = '40',\n}\n\n/**\n * ButtonIcon component props.\n */\nexport type ButtonIconProps = {\n  /**\n   * Optional prop to control the size of the icon\n   * Different sizes map to specific pixel dimensions\n   * @default IconSize.Md\n   */\n  size?: ButtonIconSize;\n  /**\n   * Optional prop to specify an icon to show\n   */\n  iconName: IconName;\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 to show the inverse state of the button, which is reserved for buttons on colored backgrounds.\n   * @default false\n   */\n  isInverse?: boolean;\n  /**\n   * Optional prop to show the floating/contained state of the button, which is reserved for floating buttons.\n   * Note: This prop provides styling only. There is no positioning logic.\n   * @default false\n   */\n  isFloating?: boolean;\n  /**\n   * Optional prop to add twrnc overriding classNames.\n   */\n  twClassName?: string;\n  /**\n   * Optional prop to control the style.\n   */\n  style?: StyleProp<ViewStyle>;\n} & Omit<PressableProps, 'children'>;\n"]}

package/dist/components/ButtonIcon/ButtonIcon.utilities.d.ts

@@ -0,0 +1,55 @@
+import type { IconColor } from '../Icon';
+import type { ButtonIconProps } from './ButtonIcon.types';
+/**
+ * Generates a Tailwind class name string for the icon button container.
+ *
+ * This function constructs a class name string based on the button icon's `size`,
+ * `isDisabled`, `isPressed`, `isFloating`, and optional additional Tailwind class names.
+ *
+ * @param isDisabled - Determines whether the button is disabled, affecting opacity.
+ * @param isPressed - Determines whether the button is pressed, affecting background color.
+ * @param isFloating - Determines whether the button should have a floating, rounded appearance.
+ * @param size - The size of the button in pixels.
+ * @param twClassName - Additional Tailwind class names for customization.
+ * @returns A string of Tailwind class names representing the button icon's container styles.
+ *
+ * Example:
+ * ```
+ * const classNames = generateButtonIconContainerClassNames({
+ *   isDisabled: true,
+ *   isPressed: false,
+ *   isFloating: true,
+ *   size: 48,
+ *   twClassName: 'border border-blue-500',
+ * });
+ *
+ * console.log(classNames);
+ * // Output: "items-center justify-center rounded-full h-[48px] w-[48px] bg-icon-default opacity-50 border border-blue-500"
+ * ```
+ */
+export declare const generateButtonIconContainerClassNames: ({ isDisabled, isPressed, isFloating, size, twClassName, }: Partial<ButtonIconProps> & {
+    isPressed?: boolean | undefined;
+}) => string;
+/**
+ * Generates a Tailwind class name string for the icon color of a button icon.
+ *
+ * This function determines the appropriate icon color class based on whether
+ * the button icon is using an inverse theme or is floating.
+ *
+ * @param isInverse - Determines if the button icon should use an inverse theme, affecting text color.
+ * @param isFloating - Determines if the button icon is floating, affecting text color.
+ * @returns A string representing the Tailwind class name for the button icon color.
+ *
+ * Example:
+ * ```
+ * const classNames = generateButtonIconIconColorClassNames({
+ *   isInverse: true,
+ *   isFloating: false,
+ * });
+ *
+ * console.log(classNames);
+ * // Output: "text-primary-inverse"
+ * ```
+ */
+export declare const generateButtonIconIconColorClassNames: ({ isInverse, isFloating, }: Partial<ButtonIconProps>) => IconColor;
+//# sourceMappingURL=ButtonIcon.utilities.d.ts.map

package/dist/components/ButtonIcon/ButtonIcon.utilities.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonIcon.utilities.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.utilities.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,qCAAqC;;MAQ9C,MAgBH,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,qCAAqC,+BAG/C,QAAQ,eAAe,CAAC,KAAG,SAK7B,CAAC"}