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

package/dist/components/Text/Text.js

@@ -1,26 +1,51 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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.Text = void 0;
 const design_system_twrnc_preset_1 = require("@metamask-previews/design-system-twrnc-preset");
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
+const types_1 = require("../../types");
 const Text_constants_1 = require("./Text.constants");
-const Text_types_1 = require("./Text.types");
 const Text_utilities_1 = require("./Text.utilities");
-const Text = ({ variant = Text_constants_1.DEFAULT_TEXT_VARIANT, color = Text_constants_1.DEFAULT_TEXT_COLOR, style, children, fontWeight = Text_types_1.FontWeight.Normal, fontStyle = Text_types_1.FontStyle.Normal, twClassName = '', ...props }) => {
+const Text = ({ variant = types_1.TextVariant.BodyMd, color = types_1.TextColor.TextDefault, style, children, fontWeight, fontFamily = types_1.FontFamily.Default, fontStyle = types_1.FontStyle.Normal, twClassName = '', ...props }) => {
     const tw = (0, design_system_twrnc_preset_1.useTailwind)();
-    const mergedClassnames = (0, Text_utilities_1.generateTextClassNames)({
-        variant,
-        color,
-        fontWeight,
-        fontStyle,
-        twClassName,
-    });
+    const finalFontWeight = fontWeight || Text_constants_1.MAP_TEXT_VARIANT_FONTWEIGHT[variant];
+    const mergedClassnames = (0, react_1.useMemo)(() => {
+        return (0, Text_utilities_1.generateTextClassNames)({
+            variant,
+            color,
+            fontWeight: finalFontWeight,
+            fontFamily,
+            fontStyle,
+            twClassName,
+        });
+    }, [variant, color, finalFontWeight, fontFamily, fontStyle, twClassName]);
     return (<react_native_1.Text accessibilityRole="text" {...props} style={[tw `${mergedClassnames}`, style]}>
       {children}
     </react_native_1.Text>);
 };
-exports.default = (0, design_system_twrnc_preset_1.withThemeProvider)(Text);
+exports.Text = Text;
 //# sourceMappingURL=Text.js.map

package/dist/components/Text/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":";;;;;AAAA,8FAGuD;AACvD,kDAA0B;AAC1B,+CAA8C;AAE9C,qDAA4E;AAE5E,6CAAqD;AACrD,qDAA0D;AAE1D,MAAM,IAAI,GAAwB,CAAC,EACjC,OAAO,GAAG,qCAAoB,EAC9B,KAAK,GAAG,mCAAkB,EAC1B,KAAK,EACL,QAAQ,EACR,UAAU,GAAG,uBAAU,CAAC,MAAM,EAC9B,SAAS,GAAG,sBAAS,CAAC,MAAM,EAC5B,WAAW,GAAG,EAAE,EAChB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IACzB,MAAM,gBAAgB,GAAG,IAAA,uCAAsB,EAAC;QAC9C,OAAO;QACP,KAAK;QACL,UAAU;QACV,SAAS;QACT,WAAW;KACZ,CAAC,CAAC;IAEH,OAAO,CACL,CAAC,mBAAM,CACL,iBAAiB,CAAC,MAAM,CACxB,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA,GAAG,gBAAgB,EAAE,EAAE,KAAK,CAAC,CAAC,CAExC;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,mBAAM,CAAC,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,IAAA,8CAAiB,EAAC,IAAI,CAAC,CAAC","sourcesContent":["import {\n  useTailwind,\n  withThemeProvider,\n} from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\nimport { Text as RNText } from 'react-native';\n\nimport { DEFAULT_TEXT_COLOR, DEFAULT_TEXT_VARIANT } from './Text.constants';\nimport type { TextProps } from './Text.types';\nimport { FontWeight, FontStyle } from './Text.types';\nimport { generateTextClassNames } from './Text.utilities';\n\nconst Text: React.FC<TextProps> = ({\n  variant = DEFAULT_TEXT_VARIANT,\n  color = DEFAULT_TEXT_COLOR,\n  style,\n  children,\n  fontWeight = FontWeight.Normal,\n  fontStyle = FontStyle.Normal,\n  twClassName = '',\n  ...props\n}) => {\n  const tw = useTailwind();\n  const mergedClassnames = generateTextClassNames({\n    variant,\n    color,\n    fontWeight,\n    fontStyle,\n    twClassName,\n  });\n\n  return (\n    <RNText\n      accessibilityRole=\"text\"\n      {...props}\n      style={[tw`${mergedClassnames}`, style]}\n    >\n      {children}\n    </RNText>\n  );\n};\n\nexport default withThemeProvider(Text);\n"]}
+{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,8FAA4E;AAC5E,+CAAuC;AACvC,+CAA8C;AAE9C,uCAA4E;AAE5E,qDAA+D;AAE/D,qDAA0D;AAEnD,MAAM,IAAI,GAAwB,CAAC,EACxC,OAAO,GAAG,mBAAW,CAAC,MAAM,EAC5B,KAAK,GAAG,iBAAS,CAAC,WAAW,EAC7B,KAAK,EACL,QAAQ,EACR,UAAU,EACV,UAAU,GAAG,kBAAU,CAAC,OAAO,EAC/B,SAAS,GAAG,iBAAS,CAAC,MAAM,EAC5B,WAAW,GAAG,EAAE,EAChB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IACzB,MAAM,eAAe,GAAG,UAAU,IAAI,4CAA2B,CAAC,OAAO,CAAC,CAAC;IAE3E,MAAM,gBAAgB,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACpC,OAAO,IAAA,uCAAsB,EAAC;YAC5B,OAAO;YACP,KAAK;YACL,UAAU,EAAE,eAAe;YAC3B,UAAU;YACV,SAAS;YACT,WAAW;SACZ,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC;IAE1E,OAAO,CACL,CAAC,mBAAM,CACL,iBAAiB,CAAC,MAAM,CACxB,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA,GAAG,gBAAgB,EAAE,EAAE,KAAK,CAAC,CAAC,CAExC;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,mBAAM,CAAC,CACV,CAAC;AACJ,CAAC,CAAC;AAlCW,QAAA,IAAI,QAkCf","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useMemo } from 'react';\nimport { Text as RNText } from 'react-native';\n\nimport { FontFamily, FontStyle, TextVariant, TextColor } from '../../types';\n\nimport { MAP_TEXT_VARIANT_FONTWEIGHT } from './Text.constants';\nimport type { TextProps } from './Text.types';\nimport { generateTextClassNames } from './Text.utilities';\n\nexport const Text: React.FC<TextProps> = ({\n  variant = TextVariant.BodyMd,\n  color = TextColor.TextDefault,\n  style,\n  children,\n  fontWeight,\n  fontFamily = FontFamily.Default,\n  fontStyle = FontStyle.Normal,\n  twClassName = '',\n  ...props\n}) => {\n  const tw = useTailwind();\n  const finalFontWeight = fontWeight || MAP_TEXT_VARIANT_FONTWEIGHT[variant];\n\n  const mergedClassnames = useMemo(() => {\n    return generateTextClassNames({\n      variant,\n      color,\n      fontWeight: finalFontWeight,\n      fontFamily,\n      fontStyle,\n      twClassName,\n    });\n  }, [variant, color, finalFontWeight, fontFamily, fontStyle, twClassName]);\n\n  return (\n    <RNText\n      accessibilityRole=\"text\"\n      {...props}\n      style={[tw`${mergedClassnames}`, style]}\n    >\n      {children}\n    </RNText>\n  );\n};\n"]}

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

@@ -1,78 +1,13 @@
+/// <reference types="react" />
 import type { TextProps as RNTextProps } from 'react-native';
-/**
- * Text component variants.
- */
-export declare enum TextVariant {
-    DisplayMd = "display-md",
-    HeadingLg = "heading-lg",
-    HeadingMd = "heading-md",
-    HeadingSm = "heading-sm",
-    BodyLg = "body-lg",
-    BodyMd = "body-md",
-    BodySm = "body-sm",
-    BodyXs = "body-xs"
-}
-/**
- * Text colors
- */
-export declare enum TextColor {
-    /** For default neutral text. */
-    TextDefault = "text-default",
-    /** For softer contrast neutral text */
-    TextAlternative = "text-alternative",
-    /** For the softest contrast neutral text (not accessible) */
-    TextMuted = "text-muted",
-    /** For elements used on top of overlay/alternative. Used for text, icon or border */
-    OverlayInverse = "overlay-inverse",
-    /** For interactive, active, and selected semantics. Used for text, background, icon or border */
-    PrimaryDefault = "primary-default",
-    /** For elements used on top of primary/default. Used for text, icon or border */
-    PrimaryInverse = "primary-inverse",
-    /** For the critical alert semantic elements. Used for text, background, icon or border */
-    ErrorDefault = "error-default",
-    /** For the stronger contrast error semantic elements. */
-    ErrorAlternative = "error-alternative",
-    /** For elements used on top of error/default. Used for text, icon or border */
-    ErrorInverse = "error-inverse",
-    /** For the positive semantic elements. Used for text, background, icon or border */
-    SuccessDefault = "success-default",
-    /** For elements used on top of success/default. Used for text, icon or border */
-    SuccessInverse = "success-inverse",
-    /** For the caution alert semantic elements. Used for text, background, icon or border */
-    WarningDefault = "warning-default",
-    /** For elements used on top of warning/default. Used for text, icon or border */
-    WarningInverse = "warning-inverse",
-    /** For informational read-only elements. Used for text, background, icon or border */
-    InfoDefault = "info-default",
-    /** For elements used on top of info/default. Used for text, icon or border */
-    InfoInverse = "info-inverse",
-    /** Make the text color transparent */
-    Transparent = "transparent"
-}
-export declare enum FontWeight {
-    /**
-     * Weight - 700
-     */
-    Bold = "700",
-    /**
-     * Weight - 500
-     */
-    Medium = "500",
-    /**
-     * Weight - 400
-     */
-    Normal = "400"
-}
-export declare enum FontStyle {
-    Italic = "italic",
-    Normal = "normal"
-}
+import type { TextVariant, TextColor, FontWeight, FontFamily, FontStyle } from '../../types';
 /**
  * Text component props.
  */
 export type TextProps = {
     /**
      * Optional enum to select between Typography variants.
+     *
      * @default BodyMD
      */
     variant?: TextVariant;
@@ -85,9 +20,19 @@ export type TextProps = {
      */
     color?: TextColor;
     /**
-     * Optional prop to adjust the weight of the font.
+     * Optional prop to control the font weight of the text.
+     * Normal: 400
+     * Medium: 500
+     * Bold: 700
      */
     fontWeight?: FontWeight;
+    /**
+     * Optional prop to adjust the font family.
+     * Default: CentraNo1
+     * Accent: MMSans
+     * Hero: MMPoly
+     */
+    fontFamily?: FontFamily;
     /**
      * Optional prop to adjust the style of the font.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"Text.types.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.types.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,cAAc,CAAC;AAE7D;;GAEG;AACH,oBAAY,WAAW;IAErB,SAAS,eAAe;IAGxB,SAAS,eAAe;IACxB,SAAS,eAAe;IACxB,SAAS,eAAe;IAGxB,MAAM,YAAY;IAClB,MAAM,YAAY;IAClB,MAAM,YAAY;IAClB,MAAM,YAAY;CACnB;AAED;;GAEG;AACH,oBAAY,SAAS;IACnB,gCAAgC;IAChC,WAAW,iBAAiB;IAC5B,uCAAuC;IACvC,eAAe,qBAAqB;IACpC,6DAA6D;IAC7D,SAAS,eAAe;IACxB,qFAAqF;IACrF,cAAc,oBAAoB;IAClC,iGAAiG;IACjG,cAAc,oBAAoB;IAClC,iFAAiF;IACjF,cAAc,oBAAoB;IAClC,0FAA0F;IAC1F,YAAY,kBAAkB;IAC9B,yDAAyD;IACzD,gBAAgB,sBAAsB;IACtC,+EAA+E;IAC/E,YAAY,kBAAkB;IAC9B,oFAAoF;IACpF,cAAc,oBAAoB;IAClC,iFAAiF;IACjF,cAAc,oBAAoB;IAClC,yFAAyF;IACzF,cAAc,oBAAoB;IAClC,iFAAiF;IACjF,cAAc,oBAAoB;IAClC,sFAAsF;IACtF,WAAW,iBAAiB;IAC5B,8EAA8E;IAC9E,WAAW,iBAAiB;IAC5B,sCAAsC;IACtC,WAAW,gBAAgB;CAC5B;AAED,oBAAY,UAAU;IACpB;;OAEG;IACH,IAAI,QAAQ;IACZ;;OAEG;IACH,MAAM,QAAQ;IACd;;OAEG;IACH,MAAM,QAAQ;CACf;AAED,oBAAY,SAAS;IACnB,MAAM,WAAW;IACjB,MAAM,WAAW;CAClB;AACD;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,WAAW,CAAC"}
+{"version":3,"file":"Text.types.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.types.ts"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,cAAc,CAAC;AAE7D,OAAO,KAAK,EACV,WAAW,EACX,SAAS,EACT,UAAU,EACV,UAAU,EACV,SAAS,EACV,MAAM,aAAa,CAAC;AAErB;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,WAAW,CAAC"}

package/dist/components/Text/Text.types.js

@@ -1,79 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FontStyle = exports.FontWeight = exports.TextColor = exports.TextVariant = void 0;
-/**
- * Text component variants.
- */
-var TextVariant;
-(function (TextVariant) {
-    // Display Sizes
-    TextVariant["DisplayMd"] = "display-md";
-    // Heading Sizes
-    TextVariant["HeadingLg"] = "heading-lg";
-    TextVariant["HeadingMd"] = "heading-md";
-    TextVariant["HeadingSm"] = "heading-sm";
-    // Body Sizes
-    TextVariant["BodyLg"] = "body-lg";
-    TextVariant["BodyMd"] = "body-md";
-    TextVariant["BodySm"] = "body-sm";
-    TextVariant["BodyXs"] = "body-xs";
-})(TextVariant || (exports.TextVariant = TextVariant = {}));
-/**
- * Text colors
- */
-var TextColor;
-(function (TextColor) {
-    /** For default neutral text. */
-    TextColor["TextDefault"] = "text-default";
-    /** For softer contrast neutral text */
-    TextColor["TextAlternative"] = "text-alternative";
-    /** For the softest contrast neutral text (not accessible) */
-    TextColor["TextMuted"] = "text-muted";
-    /** For elements used on top of overlay/alternative. Used for text, icon or border */
-    TextColor["OverlayInverse"] = "overlay-inverse";
-    /** For interactive, active, and selected semantics. Used for text, background, icon or border */
-    TextColor["PrimaryDefault"] = "primary-default";
-    /** For elements used on top of primary/default. Used for text, icon or border */
-    TextColor["PrimaryInverse"] = "primary-inverse";
-    /** For the critical alert semantic elements. Used for text, background, icon or border */
-    TextColor["ErrorDefault"] = "error-default";
-    /** For the stronger contrast error semantic elements. */
-    TextColor["ErrorAlternative"] = "error-alternative";
-    /** For elements used on top of error/default. Used for text, icon or border */
-    TextColor["ErrorInverse"] = "error-inverse";
-    /** For the positive semantic elements. Used for text, background, icon or border */
-    TextColor["SuccessDefault"] = "success-default";
-    /** For elements used on top of success/default. Used for text, icon or border */
-    TextColor["SuccessInverse"] = "success-inverse";
-    /** For the caution alert semantic elements. Used for text, background, icon or border */
-    TextColor["WarningDefault"] = "warning-default";
-    /** For elements used on top of warning/default. Used for text, icon or border */
-    TextColor["WarningInverse"] = "warning-inverse";
-    /** For informational read-only elements. Used for text, background, icon or border */
-    TextColor["InfoDefault"] = "info-default";
-    /** For elements used on top of info/default. Used for text, icon or border */
-    TextColor["InfoInverse"] = "info-inverse";
-    /** Make the text color transparent */
-    TextColor["Transparent"] = "transparent";
-})(TextColor || (exports.TextColor = TextColor = {}));
-var FontWeight;
-(function (FontWeight) {
-    /**
-     * Weight - 700
-     */
-    FontWeight["Bold"] = "700";
-    /**
-     * Weight - 500
-     */
-    FontWeight["Medium"] = "500";
-    /**
-     * Weight - 400
-     */
-    FontWeight["Normal"] = "400";
-})(FontWeight || (exports.FontWeight = FontWeight = {}));
-var FontStyle;
-(function (FontStyle) {
-    FontStyle["Italic"] = "italic";
-    FontStyle["Normal"] = "normal";
-})(FontStyle || (exports.FontStyle = FontStyle = {}));
 //# sourceMappingURL=Text.types.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Text.types.js","sourceRoot":"","sources":["../../../src/components/Text/Text.types.ts"],"names":[],"mappings":";;;AAIA;;GAEG;AACH,IAAY,WAcX;AAdD,WAAY,WAAW;IACrB,gBAAgB;IAChB,uCAAwB,CAAA;IAExB,gBAAgB;IAChB,uCAAwB,CAAA;IACxB,uCAAwB,CAAA;IACxB,uCAAwB,CAAA;IAExB,aAAa;IACb,iCAAkB,CAAA;IAClB,iCAAkB,CAAA;IAClB,iCAAkB,CAAA;IAClB,iCAAkB,CAAA;AACpB,CAAC,EAdW,WAAW,2BAAX,WAAW,QActB;AAED;;GAEG;AACH,IAAY,SAiCX;AAjCD,WAAY,SAAS;IACnB,gCAAgC;IAChC,yCAA4B,CAAA;IAC5B,uCAAuC;IACvC,iDAAoC,CAAA;IACpC,6DAA6D;IAC7D,qCAAwB,CAAA;IACxB,qFAAqF;IACrF,+CAAkC,CAAA;IAClC,iGAAiG;IACjG,+CAAkC,CAAA;IAClC,iFAAiF;IACjF,+CAAkC,CAAA;IAClC,0FAA0F;IAC1F,2CAA8B,CAAA;IAC9B,yDAAyD;IACzD,mDAAsC,CAAA;IACtC,+EAA+E;IAC/E,2CAA8B,CAAA;IAC9B,oFAAoF;IACpF,+CAAkC,CAAA;IAClC,iFAAiF;IACjF,+CAAkC,CAAA;IAClC,yFAAyF;IACzF,+CAAkC,CAAA;IAClC,iFAAiF;IACjF,+CAAkC,CAAA;IAClC,sFAAsF;IACtF,yCAA4B,CAAA;IAC5B,8EAA8E;IAC9E,yCAA4B,CAAA;IAC5B,sCAAsC;IACtC,wCAA2B,CAAA;AAC7B,CAAC,EAjCW,SAAS,yBAAT,SAAS,QAiCpB;AAED,IAAY,UAaX;AAbD,WAAY,UAAU;IACpB;;OAEG;IACH,0BAAY,CAAA;IACZ;;OAEG;IACH,4BAAc,CAAA;IACd;;OAEG;IACH,4BAAc,CAAA;AAChB,CAAC,EAbW,UAAU,0BAAV,UAAU,QAarB;AAED,IAAY,SAGX;AAHD,WAAY,SAAS;IACnB,8BAAiB,CAAA;IACjB,8BAAiB,CAAA;AACnB,CAAC,EAHW,SAAS,yBAAT,SAAS,QAGpB","sourcesContent":["/* eslint-disable @typescript-eslint/no-shadow */\n// Third party dependencies.\nimport type { TextProps as RNTextProps } from 'react-native';\n\n/**\n * Text component variants.\n */\nexport enum TextVariant {\n  // Display Sizes\n  DisplayMd = 'display-md',\n\n  // Heading Sizes\n  HeadingLg = 'heading-lg',\n  HeadingMd = 'heading-md',\n  HeadingSm = 'heading-sm',\n\n  // Body Sizes\n  BodyLg = 'body-lg',\n  BodyMd = 'body-md',\n  BodySm = 'body-sm',\n  BodyXs = 'body-xs',\n}\n\n/**\n * Text colors\n */\nexport enum TextColor {\n  /** For default neutral text. */\n  TextDefault = 'text-default',\n  /** For softer contrast neutral text */\n  TextAlternative = 'text-alternative',\n  /** For the softest contrast neutral text (not accessible) */\n  TextMuted = 'text-muted',\n  /** For elements used on top of overlay/alternative. Used for text, icon or border */\n  OverlayInverse = 'overlay-inverse',\n  /** For interactive, active, and selected semantics. Used for text, background, icon or border */\n  PrimaryDefault = 'primary-default',\n  /** For elements used on top of primary/default. Used for text, icon or border */\n  PrimaryInverse = 'primary-inverse',\n  /** For the critical alert semantic elements. Used for text, background, icon or border */\n  ErrorDefault = 'error-default',\n  /** For the stronger contrast error semantic elements. */\n  ErrorAlternative = 'error-alternative',\n  /** For elements used on top of error/default. Used for text, icon or border */\n  ErrorInverse = 'error-inverse',\n  /** For the positive semantic elements. Used for text, background, icon or border */\n  SuccessDefault = 'success-default',\n  /** For elements used on top of success/default. Used for text, icon or border */\n  SuccessInverse = 'success-inverse',\n  /** For the caution alert semantic elements. Used for text, background, icon or border */\n  WarningDefault = 'warning-default',\n  /** For elements used on top of warning/default. Used for text, icon or border */\n  WarningInverse = 'warning-inverse',\n  /** For informational read-only elements. Used for text, background, icon or border */\n  InfoDefault = 'info-default',\n  /** For elements used on top of info/default. Used for text, icon or border */\n  InfoInverse = 'info-inverse',\n  /** Make the text color transparent */\n  Transparent = 'transparent',\n}\n\nexport enum FontWeight {\n  /**\n   * Weight - 700\n   */\n  Bold = '700',\n  /**\n   * Weight - 500\n   */\n  Medium = '500',\n  /**\n   * Weight - 400\n   */\n  Normal = '400',\n}\n\nexport enum FontStyle {\n  Italic = 'italic',\n  Normal = 'normal',\n}\n/**\n * Text component props.\n */\nexport type TextProps = {\n  /**\n   * Optional enum to select between Typography variants.\n   * @default BodyMD\n   */\n  variant?: TextVariant;\n  /**\n   * Text to be displayed.\n   */\n  children: React.ReactNode;\n  /**\n   * Optional prop to add color to text.\n   */\n  color?: TextColor;\n  /**\n   * Optional prop to adjust the weight of the font.\n   */\n  fontWeight?: FontWeight;\n  /**\n   * Optional prop to adjust the style of the font.\n   */\n  fontStyle?: FontStyle;\n  /**\n   * Optional prop to add twrnc overriding classNames.\n   */\n  twClassName?: string;\n} & RNTextProps;\n"]}
+{"version":3,"file":"Text.types.js","sourceRoot":"","sources":["../../../src/components/Text/Text.types.ts"],"names":[],"mappings":"","sourcesContent":["// Third party dependencies.\nimport type { TextProps as RNTextProps } from 'react-native';\n\nimport type {\n  TextVariant,\n  TextColor,\n  FontWeight,\n  FontFamily,\n  FontStyle,\n} from '../../types';\n\n/**\n * Text component props.\n */\nexport type TextProps = {\n  /**\n   * Optional enum to select between Typography variants.\n   *\n   * @default BodyMD\n   */\n  variant?: TextVariant;\n  /**\n   * Text to be displayed.\n   */\n  children: React.ReactNode;\n  /**\n   * Optional prop to add color to text.\n   */\n  color?: TextColor;\n  /**\n   * Optional prop to control the font weight of the text.\n   * Normal: 400\n   * Medium: 500\n   * Bold: 700\n   */\n  fontWeight?: FontWeight;\n  /**\n   * Optional prop to adjust the font family.\n   * Default: CentraNo1\n   * Accent: MMSans\n   * Hero: MMPoly\n   */\n  fontFamily?: FontFamily;\n  /**\n   * Optional prop to adjust the style of the font.\n   */\n  fontStyle?: FontStyle;\n  /**\n   * Optional prop to add twrnc overriding classNames.\n   */\n  twClassName?: string;\n} & RNTextProps;\n"]}

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

@@ -8,6 +8,7 @@ import type { TextProps } from './Text.types';
  * @param variant - Specifies the typography variant (e.g., body, heading, display).
  * @param color - Specifies the text color based on the design system's color tokens.
  * @param fontWeight - Specifies the font weight (e.g., normal, bold).
+ * @param fontFamily - Specifies the font family ('e.g. default, hero, accent)
  * @param fontStyle - Specifies the font style (e.g., normal, italic).
  * @param twClassName - Additional custom Tailwind class names to be appended to the generated classes.
  * @returns A string of combined Tailwind CSS class names.
@@ -18,13 +19,14 @@ import type { TextProps } from './Text.types';
  *   variant: TextVariant.BodyMd,
  *   color: TextColor.PrimaryDefault,
  *   fontWeight: FontWeight.Bold,
+ *   fontFamily: FontFamily.Default,
  *   fontStyle: FontStyle.Italic,
  *   twClassName: 'text-center underline',
  * });
  *
  * console.log(classNames);
- * // Output: "text-body-md font-body-md-bold-italic text-primary-default text-center underline"
+ * // Output: "text-body-md font-default-bold-italic text-primary-default text-center underline"
  * ```
  */
-export declare const generateTextClassNames: ({ variant, color, fontWeight, fontStyle, twClassName, }: Partial<TextProps>) => string;
+export declare const generateTextClassNames: ({ variant, color, fontWeight, fontFamily, fontStyle, twClassName, }: Partial<TextProps>) => string;
 //# sourceMappingURL=Text.utilities.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Text.utilities.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.utilities.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9C;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,sBAAsB,4DAMhC,QAAQ,SAAS,CAAC,KAAG,MAavB,CAAC"}
+{"version":3,"file":"Text.utilities.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.utilities.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,sBAAsB,wEAOhC,QAAQ,SAAS,CAAC,KAAG,MAWvB,CAAC"}

package/dist/components/Text/Text.utilities.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateTextClassNames = void 0;
 /* eslint-disable jsdoc/check-param-names */
 /* eslint-disable jsdoc/require-param */
+const types_1 = require("../../types");
 const Text_constants_1 = require("./Text.constants");
-const Text_types_1 = require("./Text.types");
 /**
  * Generates a combined string of Tailwind CSS class names for the Text component
  * based on the provided props. This utility simplifies the process of combining
@@ -14,6 +14,7 @@ const Text_types_1 = require("./Text.types");
  * @param variant - Specifies the typography variant (e.g., body, heading, display).
  * @param color - Specifies the text color based on the design system's color tokens.
  * @param fontWeight - Specifies the font weight (e.g., normal, bold).
+ * @param fontFamily - Specifies the font family ('e.g. default, hero, accent)
  * @param fontStyle - Specifies the font style (e.g., normal, italic).
  * @param twClassName - Additional custom Tailwind class names to be appended to the generated classes.
  * @returns A string of combined Tailwind CSS class names.
@@ -24,20 +25,20 @@ const Text_types_1 = require("./Text.types");
  *   variant: TextVariant.BodyMd,
  *   color: TextColor.PrimaryDefault,
  *   fontWeight: FontWeight.Bold,
+ *   fontFamily: FontFamily.Default,
  *   fontStyle: FontStyle.Italic,
  *   twClassName: 'text-center underline',
  * });
  *
  * console.log(classNames);
- * // Output: "text-body-md font-body-md-bold-italic text-primary-default text-center underline"
+ * // Output: "text-body-md font-default-bold-italic text-primary-default text-center underline"
  * ```
  */
-const generateTextClassNames = ({ variant = Text_constants_1.DEFAULT_TEXT_VARIANT, color = Text_constants_1.DEFAULT_TEXT_COLOR, fontWeight = Text_types_1.FontWeight.Normal, fontStyle = Text_types_1.FontStyle.Normal, twClassName = '', }) => {
-    const fontWeightStyleClassname = Text_constants_1.MAPPING_FONTWEIGHT_TO_FONTFAMILYSTYLECLASSNAME[fontWeight];
-    const isItalic = fontStyle === Text_types_1.FontStyle.Italic;
+const generateTextClassNames = ({ variant = types_1.TextVariant.BodyMd, color = types_1.TextColor.TextDefault, fontWeight = types_1.FontWeight.Regular, fontFamily = types_1.FontFamily.Default, fontStyle = types_1.FontStyle.Normal, twClassName = '', }) => {
+    const isItalic = fontStyle === types_1.FontStyle.Italic;
     const textClassname = `text-${variant}`;
-    const fontFamilyClassname = `font-${variant}${fontWeightStyleClassname}${isItalic ? '-italic' : ''}`;
-    const textColorClassname = `text-${color}`;
+    const fontFamilyClassname = `font-${fontFamily}${Text_constants_1.TWCLASSMAP_TEXT_FONTWEIGHT[fontWeight]}${isItalic && fontFamily === types_1.FontFamily.Default ? '-italic' : ''}`;
+    const textColorClassname = `${color}`;
     const mergedClassnames = `${textClassname} ${fontFamilyClassname} ${textColorClassname} ${twClassName}`.trim();
     return mergedClassnames;
 };

package/dist/components/Text/Text.utilities.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.utilities.js","sourceRoot":"","sources":["../../../src/components/Text/Text.utilities.ts"],"names":[],"mappings":";;;AAAA,4CAA4C;AAC5C,wCAAwC;AACxC,qDAI0B;AAE1B,6CAAqD;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACI,MAAM,sBAAsB,GAAG,CAAC,EACrC,OAAO,GAAG,qCAAoB,EAC9B,KAAK,GAAG,mCAAkB,EAC1B,UAAU,GAAG,uBAAU,CAAC,MAAM,EAC9B,SAAS,GAAG,sBAAS,CAAC,MAAM,EAC5B,WAAW,GAAG,EAAE,GACG,EAAU,EAAE;IAC/B,MAAM,wBAAwB,GAC5B,+DAA8C,CAAC,UAAU,CAAC,CAAC;IAC7D,MAAM,QAAQ,GAAG,SAAS,KAAK,sBAAS,CAAC,MAAM,CAAC;IAChD,MAAM,aAAa,GAAG,QAAQ,OAAO,EAAE,CAAC;IACxC,MAAM,mBAAmB,GAAG,QAAQ,OAAO,GAAG,wBAAwB,GACpE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EACzB,EAAE,CAAC;IACH,MAAM,kBAAkB,GAAG,QAAQ,KAAK,EAAE,CAAC;IAC3C,MAAM,gBAAgB,GACpB,GAAG,aAAa,IAAI,mBAAmB,IAAI,kBAAkB,IAAI,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC;IAExF,OAAO,gBAAgB,CAAC;AAC1B,CAAC,CAAC;AAnBW,QAAA,sBAAsB,0BAmBjC","sourcesContent":["/* eslint-disable jsdoc/check-param-names */\n/* eslint-disable jsdoc/require-param */\nimport {\n  DEFAULT_TEXT_COLOR,\n  DEFAULT_TEXT_VARIANT,\n  MAPPING_FONTWEIGHT_TO_FONTFAMILYSTYLECLASSNAME,\n} from './Text.constants';\nimport type { TextProps } from './Text.types';\nimport { FontWeight, FontStyle } from './Text.types';\n\n/**\n * Generates a combined string of Tailwind CSS class names for the Text component\n * based on the provided props. This utility simplifies the process of combining\n * typography, color, font weight, and style classes, ensuring consistency with the\n * design system.\n *\n * @param variant - Specifies the typography variant (e.g., body, heading, display).\n * @param color - Specifies the text color based on the design system's color tokens.\n * @param fontWeight - Specifies the font weight (e.g., normal, bold).\n * @param fontStyle - Specifies the font style (e.g., normal, italic).\n * @param twClassName - Additional custom Tailwind class names to be appended to the generated classes.\n * @returns A string of combined Tailwind CSS class names.\n *\n * Example:\n * ```\n * const classNames = generateTextClassNames({\n *   variant: TextVariant.BodyMd,\n *   color: TextColor.PrimaryDefault,\n *   fontWeight: FontWeight.Bold,\n *   fontStyle: FontStyle.Italic,\n *   twClassName: 'text-center underline',\n * });\n *\n * console.log(classNames);\n * // Output: \"text-body-md font-body-md-bold-italic text-primary-default text-center underline\"\n * ```\n */\nexport const generateTextClassNames = ({\n  variant = DEFAULT_TEXT_VARIANT,\n  color = DEFAULT_TEXT_COLOR,\n  fontWeight = FontWeight.Normal,\n  fontStyle = FontStyle.Normal,\n  twClassName = '',\n}: Partial<TextProps>): string => {\n  const fontWeightStyleClassname =\n    MAPPING_FONTWEIGHT_TO_FONTFAMILYSTYLECLASSNAME[fontWeight];\n  const isItalic = fontStyle === FontStyle.Italic;\n  const textClassname = `text-${variant}`;\n  const fontFamilyClassname = `font-${variant}${fontWeightStyleClassname}${\n    isItalic ? '-italic' : ''\n  }`;\n  const textColorClassname = `text-${color}`;\n  const mergedClassnames =\n    `${textClassname} ${fontFamilyClassname} ${textColorClassname} ${twClassName}`.trim();\n\n  return mergedClassnames;\n};\n"]}
+{"version":3,"file":"Text.utilities.js","sourceRoot":"","sources":["../../../src/components/Text/Text.utilities.ts"],"names":[],"mappings":";;;AAAA,4CAA4C;AAC5C,wCAAwC;AACxC,uCAMqB;AAErB,qDAA8D;AAG9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACI,MAAM,sBAAsB,GAAG,CAAC,EACrC,OAAO,GAAG,mBAAW,CAAC,MAAM,EAC5B,KAAK,GAAG,iBAAS,CAAC,WAAW,EAC7B,UAAU,GAAG,kBAAU,CAAC,OAAO,EAC/B,UAAU,GAAG,kBAAU,CAAC,OAAO,EAC/B,SAAS,GAAG,iBAAS,CAAC,MAAM,EAC5B,WAAW,GAAG,EAAE,GACG,EAAU,EAAE;IAC/B,MAAM,QAAQ,GAAG,SAAS,KAAK,iBAAS,CAAC,MAAM,CAAC;IAChD,MAAM,aAAa,GAAG,QAAQ,OAAO,EAAE,CAAC;IACxC,MAAM,mBAAmB,GAAG,QAAQ,UAAU,GAAG,2CAA0B,CAAC,UAAU,CAAC,GACrF,QAAQ,IAAI,UAAU,KAAK,kBAAU,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAC9D,EAAE,CAAC;IACH,MAAM,kBAAkB,GAAG,GAAG,KAAK,EAAE,CAAC;IACtC,MAAM,gBAAgB,GACpB,GAAG,aAAa,IAAI,mBAAmB,IAAI,kBAAkB,IAAI,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC;IAExF,OAAO,gBAAgB,CAAC;AAC1B,CAAC,CAAC;AAlBW,QAAA,sBAAsB,0BAkBjC","sourcesContent":["/* eslint-disable jsdoc/check-param-names */\n/* eslint-disable jsdoc/require-param */\nimport {\n  FontWeight,\n  FontFamily,\n  FontStyle,\n  TextVariant,\n  TextColor,\n} from '../../types';\n\nimport { TWCLASSMAP_TEXT_FONTWEIGHT } from './Text.constants';\nimport type { TextProps } from './Text.types';\n\n/**\n * Generates a combined string of Tailwind CSS class names for the Text component\n * based on the provided props. This utility simplifies the process of combining\n * typography, color, font weight, and style classes, ensuring consistency with the\n * design system.\n *\n * @param variant - Specifies the typography variant (e.g., body, heading, display).\n * @param color - Specifies the text color based on the design system's color tokens.\n * @param fontWeight - Specifies the font weight (e.g., normal, bold).\n * @param fontFamily - Specifies the font family ('e.g. default, hero, accent)\n * @param fontStyle - Specifies the font style (e.g., normal, italic).\n * @param twClassName - Additional custom Tailwind class names to be appended to the generated classes.\n * @returns A string of combined Tailwind CSS class names.\n *\n * Example:\n * ```\n * const classNames = generateTextClassNames({\n *   variant: TextVariant.BodyMd,\n *   color: TextColor.PrimaryDefault,\n *   fontWeight: FontWeight.Bold,\n *   fontFamily: FontFamily.Default,\n *   fontStyle: FontStyle.Italic,\n *   twClassName: 'text-center underline',\n * });\n *\n * console.log(classNames);\n * // Output: \"text-body-md font-default-bold-italic text-primary-default text-center underline\"\n * ```\n */\nexport const generateTextClassNames = ({\n  variant = TextVariant.BodyMd,\n  color = TextColor.TextDefault,\n  fontWeight = FontWeight.Regular,\n  fontFamily = FontFamily.Default,\n  fontStyle = FontStyle.Normal,\n  twClassName = '',\n}: Partial<TextProps>): string => {\n  const isItalic = fontStyle === FontStyle.Italic;\n  const textClassname = `text-${variant}`;\n  const fontFamilyClassname = `font-${fontFamily}${TWCLASSMAP_TEXT_FONTWEIGHT[fontWeight]}${\n    isItalic && fontFamily === FontFamily.Default ? '-italic' : ''\n  }`;\n  const textColorClassname = `${color}`;\n  const mergedClassnames =\n    `${textClassname} ${fontFamilyClassname} ${textColorClassname} ${twClassName}`.trim();\n\n  return mergedClassnames;\n};\n"]}

package/dist/components/Text/index.d.ts

@@ -1,3 +1,4 @@
-export { default } from './Text';
-export { TextVariant, TextColor, FontWeight, FontStyle } from './Text.types';
+export { TextVariant, TextColor, FontWeight, FontFamily, FontStyle, } from '../../types';
+export { Text } from './Text';
+export type { TextProps } from './Text.types';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Text/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Text/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACjC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Text/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,SAAS,EACT,UAAU,EACV,UAAU,EACV,SAAS,GACV,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/Text/index.js

@@ -1,14 +1,12 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FontStyle = exports.FontWeight = exports.TextColor = exports.TextVariant = exports.default = void 0;
+exports.Text = exports.FontStyle = exports.FontFamily = exports.FontWeight = exports.TextColor = exports.TextVariant = void 0;
+var types_1 = require("../../types");
+Object.defineProperty(exports, "TextVariant", { enumerable: true, get: function () { return types_1.TextVariant; } });
+Object.defineProperty(exports, "TextColor", { enumerable: true, get: function () { return types_1.TextColor; } });
+Object.defineProperty(exports, "FontWeight", { enumerable: true, get: function () { return types_1.FontWeight; } });
+Object.defineProperty(exports, "FontFamily", { enumerable: true, get: function () { return types_1.FontFamily; } });
+Object.defineProperty(exports, "FontStyle", { enumerable: true, get: function () { return types_1.FontStyle; } });
 var Text_1 = require("./Text");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Text_1).default; } });
-var Text_types_1 = require("./Text.types");
-Object.defineProperty(exports, "TextVariant", { enumerable: true, get: function () { return Text_types_1.TextVariant; } });
-Object.defineProperty(exports, "TextColor", { enumerable: true, get: function () { return Text_types_1.TextColor; } });
-Object.defineProperty(exports, "FontWeight", { enumerable: true, get: function () { return Text_types_1.FontWeight; } });
-Object.defineProperty(exports, "FontStyle", { enumerable: true, get: function () { return Text_types_1.FontStyle; } });
+Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return Text_1.Text; } });
 //# sourceMappingURL=index.js.map

package/dist/components/Text/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Text/index.ts"],"names":[],"mappings":";;;;;;AAAA,+BAAiC;AAAxB,gHAAA,OAAO,OAAA;AAChB,2CAA6E;AAApE,yGAAA,WAAW,OAAA;AAAE,uGAAA,SAAS,OAAA;AAAE,wGAAA,UAAU,OAAA;AAAE,uGAAA,SAAS,OAAA","sourcesContent":["export { default } from './Text';\nexport { TextVariant, TextColor, FontWeight, FontStyle } from './Text.types';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Text/index.ts"],"names":[],"mappings":";;;AAAA,qCAMqB;AALnB,oGAAA,WAAW,OAAA;AACX,kGAAA,SAAS,OAAA;AACT,mGAAA,UAAU,OAAA;AACV,mGAAA,UAAU,OAAA;AACV,kGAAA,SAAS,OAAA;AAEX,+BAA8B;AAArB,4FAAA,IAAI,OAAA","sourcesContent":["export {\n  TextVariant,\n  TextColor,\n  FontWeight,\n  FontFamily,\n  FontStyle,\n} from '../../types';\nexport { Text } from './Text';\nexport type { TextProps } from './Text.types';\n"]}

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

@@ -0,0 +1,4 @@
+import { TextButtonSize } from '../../types';
+import { TextVariant } from '../Text';
+export declare const MAP_TEXTBUTTON_SIZE_TEXTVARIANT: Record<TextButtonSize, TextVariant>;
+//# sourceMappingURL=TextButton.constants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextButton.constants.d.ts","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,eAAO,MAAM,+BAA+B,EAAE,MAAM,CAClD,cAAc,EACd,WAAW,CAMZ,CAAC"}

package/dist/components/TextButton/TextButton.constants.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MAP_TEXTBUTTON_SIZE_TEXTVARIANT = void 0;
+const types_1 = require("../../types");
+const Text_1 = require("../Text");
+exports.MAP_TEXTBUTTON_SIZE_TEXTVARIANT = {
+    [types_1.TextButtonSize.BodyXs]: Text_1.TextVariant.BodyXs,
+    [types_1.TextButtonSize.BodySm]: Text_1.TextVariant.BodySm,
+    [types_1.TextButtonSize.BodyMd]: Text_1.TextVariant.BodyMd,
+    [types_1.TextButtonSize.BodyLg]: Text_1.TextVariant.BodyLg,
+};
+//# sourceMappingURL=TextButton.constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextButton.constants.js","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.constants.ts"],"names":[],"mappings":";;;AAAA,uCAA6C;AAC7C,kCAAsC;AAEzB,QAAA,+BAA+B,GAGxC;IACF,CAAC,sBAAc,CAAC,MAAM,CAAC,EAAE,kBAAW,CAAC,MAAM;IAC3C,CAAC,sBAAc,CAAC,MAAM,CAAC,EAAE,kBAAW,CAAC,MAAM;IAC3C,CAAC,sBAAc,CAAC,MAAM,CAAC,EAAE,kBAAW,CAAC,MAAM;IAC3C,CAAC,sBAAc,CAAC,MAAM,CAAC,EAAE,kBAAW,CAAC,MAAM;CAC5C,CAAC","sourcesContent":["import { TextButtonSize } from '../../types';\nimport { TextVariant } from '../Text';\n\nexport const MAP_TEXTBUTTON_SIZE_TEXTVARIANT: Record<\n  TextButtonSize,\n  TextVariant\n> = {\n  [TextButtonSize.BodyXs]: TextVariant.BodyXs,\n  [TextButtonSize.BodySm]: TextVariant.BodySm,\n  [TextButtonSize.BodyMd]: TextVariant.BodyMd,\n  [TextButtonSize.BodyLg]: TextVariant.BodyLg,\n};\n"]}

package/dist/components/TextButton/TextButton.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { TextButtonProps } from './TextButton.types';
+export declare const TextButton: React.FC<TextButtonProps>;
+//# sourceMappingURL=TextButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextButton.d.ts","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAQ3C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAmGhD,CAAC"}

package/dist/components/TextButton/TextButton.js

@@ -0,0 +1,68 @@
+"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.TextButton = void 0;
+const design_system_twrnc_preset_1 = require("@metamask-previews/design-system-twrnc-preset");
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const types_1 = require("../../types");
+const Icon_1 = require("../Icon");
+const Text_1 = require("../Text");
+const TextButton_constants_1 = require("./TextButton.constants");
+const TextButton = ({ children, size = types_1.TextButtonSize.BodyMd, textProps, startIconName, startIconProps, startAccessory, endIconName, endIconProps, endAccessory, isDisabled = false, isInverse = false, twClassName = '', accessibilityRole, accessibilityLabel, style, ...props }) => {
+    const tw = (0, design_system_twrnc_preset_1.useTailwind)();
+    /**
+     * Calculating the baselineOffset. This baselineOffset is needed to make sure
+     * the TextButton aligns perfectly when placed within Text elements
+     */
+    const { fontSize, lineHeight } = tw `text-${TextButton_constants_1.MAP_TEXTBUTTON_SIZE_TEXTVARIANT[size]}`;
+    const baselineOffset = (lineHeight - fontSize) / 2;
+    const getTextColor = (0, react_1.useCallback)((pressed) => {
+        if (isInverse) {
+            return 'text-primary-inverse';
+        }
+        return pressed ? 'text-primary-defaultPressed' : 'text-primary-default';
+    }, [isInverse]);
+    const getTextDecoration = (0, react_1.useCallback)((pressed) => isInverse || pressed ? 'underline' : 'no-underline', [isInverse]);
+    return (<Text_1.Text>
+      <react_native_1.Pressable accessibilityRole={accessibilityRole ?? 'button'} accessibilityLabel={accessibilityLabel} disabled={isDisabled} style={({ pressed }) => [
+            { transform: [{ translateY: baselineOffset }] },
+            tw `flex-row items-center ${pressed ? 'bg-background-pressed' : 'bg-transparent'} ${isDisabled ? 'opacity-50' : 'opacity-100'} ${twClassName}`,
+            style,
+        ]} {...props}>
+        {({ pressed }) => (<>
+            {startIconName ? (<Icon_1.Icon name={startIconName} size={Icon_1.IconSize.Sm} testID="start-icon" twClassName={`${getTextColor(pressed)} mr-1`} {...startIconProps}/>) : (startAccessory)}
+
+            <Text_1.Text variant={TextButton_constants_1.MAP_TEXTBUTTON_SIZE_TEXTVARIANT[size]} fontWeight={Text_1.FontWeight.Medium} {...textProps} twClassName={` ${getTextColor(pressed)} ${getTextDecoration(pressed)} ${textProps?.twClassName ?? ''} `}>
+              {children}
+            </Text_1.Text>
+
+            {endIconName ? (<Icon_1.Icon name={endIconName} size={Icon_1.IconSize.Sm} testID="end-icon" twClassName={`${getTextColor(pressed)} ml-1`} {...endIconProps}/>) : (endAccessory)}
+          </>)}
+      </react_native_1.Pressable>
+    </Text_1.Text>);
+};
+exports.TextButton = TextButton;
+//# sourceMappingURL=TextButton.js.map

package/dist/components/TextButton/TextButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextButton.js","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useCallback } from 'react';\nimport { Pressable } from 'react-native';\n\nimport { TextButtonSize } from '../../types';\nimport { Icon, IconSize } from '../Icon';\nimport { Text, FontWeight } from '../Text';\n\nimport { MAP_TEXTBUTTON_SIZE_TEXTVARIANT } from './TextButton.constants';\nimport type { TextButtonProps } from './TextButton.types';\n\nexport const TextButton: React.FC<TextButtonProps> = ({\n  children,\n  size = TextButtonSize.BodyMd,\n  textProps,\n  startIconName,\n  startIconProps,\n  startAccessory,\n  endIconName,\n  endIconProps,\n  endAccessory,\n  isDisabled = false,\n  isInverse = false,\n  twClassName = '',\n  accessibilityRole,\n  accessibilityLabel,\n  style,\n  ...props\n}) => {\n  const tw = useTailwind();\n  /**\n   * Calculating the baselineOffset. This baselineOffset is needed to make sure\n   * the TextButton aligns perfectly when placed within Text elements\n   */\n  const { fontSize, lineHeight } = tw`text-${\n    MAP_TEXTBUTTON_SIZE_TEXTVARIANT[size] as string\n  }` as {\n    fontSize: number;\n    lineHeight: number;\n  };\n  const baselineOffset = (lineHeight - fontSize) / 2;\n\n  const getTextColor = useCallback(\n    (pressed: boolean): string => {\n      if (isInverse) {\n        return 'text-primary-inverse';\n      }\n      return pressed ? 'text-primary-defaultPressed' : 'text-primary-default';\n    },\n    [isInverse],\n  );\n\n  const getTextDecoration = useCallback(\n    (pressed: boolean): string =>\n      isInverse || pressed ? 'underline' : 'no-underline',\n    [isInverse],\n  );\n\n  return (\n    <Text>\n      <Pressable\n        accessibilityRole={accessibilityRole ?? 'button'}\n        accessibilityLabel={accessibilityLabel}\n        disabled={isDisabled}\n        style={({ pressed }) => [\n          { transform: [{ translateY: baselineOffset }] },\n          tw`flex-row items-center ${pressed ? 'bg-background-pressed' : 'bg-transparent'} ${isDisabled ? 'opacity-50' : 'opacity-100'} ${twClassName}`,\n          style,\n        ]}\n        {...props}\n      >\n        {({ pressed }) => (\n          <>\n            {startIconName ? (\n              <Icon\n                name={startIconName}\n                size={IconSize.Sm}\n                testID=\"start-icon\"\n                twClassName={`${getTextColor(pressed)} mr-1`}\n                {...startIconProps}\n              />\n            ) : (\n              startAccessory\n            )}\n\n            <Text\n              variant={MAP_TEXTBUTTON_SIZE_TEXTVARIANT[size]}\n              fontWeight={FontWeight.Medium}\n              {...textProps}\n              twClassName={` ${getTextColor(pressed)} ${getTextDecoration(pressed)} ${textProps?.twClassName ?? ''} `}\n            >\n              {children}\n            </Text>\n\n            {endIconName ? (\n              <Icon\n                name={endIconName}\n                size={IconSize.Sm}\n                testID=\"end-icon\"\n                twClassName={`${getTextColor(pressed)} ml-1`}\n                {...endIconProps}\n              />\n            ) : (\n              endAccessory\n            )}\n          </>\n        )}\n      </Pressable>\n    </Text>\n  );\n};\n"]}

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

@@ -0,0 +1,69 @@
+/// <reference types="react" />
+import type { PressableProps, StyleProp, ViewStyle } from 'react-native';
+import type { TextButtonSize } from '../../types';
+import type { IconProps, IconName } from '../Icon';
+import type { TextProps } from '../Text';
+/**
+ * TextButton component props.
+ */
+export type TextButtonProps = {
+    /**
+     * Required prop for the content to be rendered within the TextButton
+     */
+    children: string;
+    /**
+     * Optional prop to control the size of the TextButton
+     *
+     * @default TextButtonSize.BodyMd
+     */
+    size?: TextButtonSize;
+    /**
+     * Optional props to be passed to the Text component when children is a string
+     */
+    textProps?: Omit<Partial<TextProps>, 'children'>;
+    /**
+     * Optional prop to specify an icon to show at the start of the button
+     */
+    startIconName?: IconName;
+    /**
+     * Optional prop to pass additional properties to the start icon
+     */
+    startIconProps?: Partial<IconProps>;
+    /**
+     * Optional prop for a custom element to show at the start of the button
+     */
+    startAccessory?: React.ReactNode;
+    /**
+     * Optional prop to specify an icon to show at the end of the button
+     */
+    endIconName?: IconName;
+    /**
+     * Optional prop to pass additional properties to the end icon
+     */
+    endIconProps?: Partial<IconProps>;
+    /**
+     * Optional prop for a custom element to show at the end of the button
+     */
+    endAccessory?: React.ReactNode;
+    /**
+     * 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 add twrnc overriding classNames.
+     */
+    twClassName?: string;
+    /**
+     * Optional prop to control the style.
+     */
+    style?: StyleProp<ViewStyle>;
+} & Omit<PressableProps, 'disabled'>;
+//# sourceMappingURL=TextButton.types.d.ts.map