@metamask-previews/design-system-react-native 0.0.0-preview.019292f

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+[Unreleased]: https://github.com/MetaMask/metamask-design-system/

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2024 MetaMask
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE

package/README.md

@@ -0,0 +1,15 @@
+# `@metamask/design-system-react-native`
+
+Design System React Native
+
+## Installation
+
+`yarn add @metamask/design-system-react-native`
+
+or
+
+`npm install @metamask/design-system-react-native`
+
+## Contributing
+
+This package is part of a monorepo. Instructions for contributing can be found in the [monorepo README](https://github.com/MetaMask/metamask-design-system#readme).

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

@@ -0,0 +1,9 @@
+import type { TextProps } from './Text.types';
+import { FontWeight, TextColor, TextVariant } from './Text.types';
+export declare const DEFAULT_TEXT_VARIANT = TextVariant.BodyMd;
+export declare const DEFAULT_TEXT_COLOR = TextColor.TextDefault;
+export declare const MAPPING_FONTWEIGHT_TO_FONTFAMILYSTYLECLASSNAME: {
+    [key in FontWeight]: string;
+};
+export declare const SAMPLE_TEXT_PROPS: TextProps;
+//# sourceMappingURL=Text.constants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Text.constants.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.constants.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAGlE,eAAO,MAAM,oBAAoB,qBAAqB,CAAC;AACvD,eAAO,MAAM,kBAAkB,wBAAwB,CAAC;AAGxD,eAAO,MAAM,8CAA8C,EAAE;KAC1D,GAAG,IAAI,UAAU,GAAG,MAAM;CAK5B,CAAC;AAGF,eAAO,MAAM,iBAAiB,EAAE,SAI/B,CAAC"}

package/dist/components/Text/Text.constants.js

@@ -0,0 +1,21 @@
+"use strict";
+/* eslint-disable import/prefer-default-export */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SAMPLE_TEXT_PROPS = exports.MAPPING_FONTWEIGHT_TO_FONTFAMILYSTYLECLASSNAME = exports.DEFAULT_TEXT_COLOR = exports.DEFAULT_TEXT_VARIANT = void 0;
+const Text_types_1 = require("./Text.types");
+// Defaults
+exports.DEFAULT_TEXT_VARIANT = Text_types_1.TextVariant.BodyMd;
+exports.DEFAULT_TEXT_COLOR = Text_types_1.TextColor.TextDefault;
+// Mappings
+exports.MAPPING_FONTWEIGHT_TO_FONTFAMILYSTYLECLASSNAME = {
+    [Text_types_1.FontWeight.Normal]: '',
+    [Text_types_1.FontWeight.Medium]: '-medium',
+    [Text_types_1.FontWeight.Bold]: '-bold',
+};
+// Sample consts
+exports.SAMPLE_TEXT_PROPS = {
+    variant: exports.DEFAULT_TEXT_VARIANT,
+    children: 'Sample Text',
+    color: exports.DEFAULT_TEXT_COLOR,
+};
+//# sourceMappingURL=Text.constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Text.constants.js","sourceRoot":"","sources":["../../../src/components/Text/Text.constants.ts"],"names":[],"mappings":";AAAA,iDAAiD;;;AAGjD,6CAAkE;AAElE,WAAW;AACE,QAAA,oBAAoB,GAAG,wBAAW,CAAC,MAAM,CAAC;AAC1C,QAAA,kBAAkB,GAAG,sBAAS,CAAC,WAAW,CAAC;AAExD,WAAW;AACE,QAAA,8CAA8C,GAEvD;IACF,CAAC,uBAAU,CAAC,MAAM,CAAC,EAAE,EAAE;IACvB,CAAC,uBAAU,CAAC,MAAM,CAAC,EAAE,SAAS;IAC9B,CAAC,uBAAU,CAAC,IAAI,CAAC,EAAE,OAAO;CAC3B,CAAC;AAEF,gBAAgB;AACH,QAAA,iBAAiB,GAAc;IAC1C,OAAO,EAAE,4BAAoB;IAC7B,QAAQ,EAAE,aAAa;IACvB,KAAK,EAAE,0BAAkB;CAC1B,CAAC","sourcesContent":["/* eslint-disable import/prefer-default-export */\n\nimport type { TextProps } from './Text.types';\nimport { FontWeight, TextColor, TextVariant } from './Text.types';\n\n// Defaults\nexport const DEFAULT_TEXT_VARIANT = TextVariant.BodyMd;\nexport const DEFAULT_TEXT_COLOR = TextColor.TextDefault;\n\n// Mappings\nexport const MAPPING_FONTWEIGHT_TO_FONTFAMILYSTYLECLASSNAME: {\n  [key in FontWeight]: string;\n} = {\n  [FontWeight.Normal]: '',\n  [FontWeight.Medium]: '-medium',\n  [FontWeight.Bold]: '-bold',\n};\n\n// Sample consts\nexport const SAMPLE_TEXT_PROPS: TextProps = {\n  variant: DEFAULT_TEXT_VARIANT,\n  children: 'Sample Text',\n  color: DEFAULT_TEXT_COLOR,\n};\n"]}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { FontWeight, FontStyle } from './Text.types';
+declare const _default: React.ForwardRefExoticComponent<{
+    variant?: import("./Text.types").TextVariant | undefined;
+    children: React.ReactNode;
+    color?: import("./Text.types").TextColor | undefined;
+    fontWeight?: FontWeight | undefined;
+    fontStyle?: FontStyle | undefined;
+    twClassName?: string | undefined;
+} & import("react-native").TextProps & React.RefAttributes<any>>;
+export default _default;
+//# sourceMappingURL=Text.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;;;;;;;;;AAiCrD,wBAAuC"}

package/dist/components/Text/Text.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const design_system_twrnc_preset_1 = require("@metamask-previews/design-system-twrnc-preset");
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+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 tw = (0, design_system_twrnc_preset_1.useTailwind)();
+    const mergedClassnames = (0, Text_utilities_1.generateTextClassNames)({
+        variant,
+        color,
+        fontWeight,
+        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);
+//# sourceMappingURL=Text.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,100 @@
+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"
+}
+/**
+ * Text component props.
+ */
+export type TextProps = {
+    /**
+     * Optional enum to select between Typography variants.
+     * @default BodyMD
+     */
+    variant?: TextVariant;
+    /**
+     * Text to be displayed.
+     */
+    children: React.ReactNode;
+    /**
+     * Optional prop to add color to text.
+     */
+    color?: TextColor;
+    /**
+     * Optional prop to adjust the weight of the font.
+     */
+    fontWeight?: FontWeight;
+    /**
+     * Optional prop to adjust the style of the font.
+     */
+    fontStyle?: FontStyle;
+    /**
+     * Optional prop to add twrnc overriding classNames.
+     */
+    twClassName?: string;
+} & RNTextProps;
+//# sourceMappingURL=Text.types.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,79 @@
+"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

@@ -0,0 +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"]}

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

@@ -0,0 +1,30 @@
+import type { TextProps } from './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
+ * typography, color, font weight, and style classes, ensuring consistency with the
+ * design system.
+ *
+ * @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 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.
+ *
+ * Example:
+ * ```
+ * const classNames = generateClassNames({
+ *   variant: TextVariant.BodyMd,
+ *   color: TextColor.PrimaryDefault,
+ *   fontWeight: FontWeight.Bold,
+ *   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"
+ * ```
+ */
+export declare const generateTextClassNames: ({ variant, color, fontWeight, fontStyle, twClassName, }: Partial<TextProps>) => string;
+//# sourceMappingURL=Text.utilities.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateTextClassNames = void 0;
+/* eslint-disable jsdoc/check-param-names */
+/* eslint-disable jsdoc/require-param */
+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
+ * typography, color, font weight, and style classes, ensuring consistency with the
+ * design system.
+ *
+ * @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 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.
+ *
+ * Example:
+ * ```
+ * const classNames = generateClassNames({
+ *   variant: TextVariant.BodyMd,
+ *   color: TextColor.PrimaryDefault,
+ *   fontWeight: FontWeight.Bold,
+ *   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"
+ * ```
+ */
+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 textClassname = `text-${variant}`;
+    const fontFamilyClassname = `font-${variant}${fontWeightStyleClassname}${isItalic ? '-italic' : ''}`;
+    const textColorClassname = `text-${color}`;
+    const mergedClassnames = `${textClassname} ${fontFamilyClassname} ${textColorClassname} ${twClassName}`.trim();
+    return mergedClassnames;
+};
+exports.generateTextClassNames = generateTextClassNames;
+//# sourceMappingURL=Text.utilities.js.map

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

@@ -0,0 +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 = generateClassNames({\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"]}

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

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

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

@@ -0,0 +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"}

package/dist/components/Text/index.js

@@ -0,0 +1,14 @@
+"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;
+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; } });
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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"]}

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export declare const Text: import("react").ForwardRefExoticComponent<Omit<{
+    variant?: import("./components/Text").TextVariant | undefined;
+    children: import("react").ReactNode;
+    color?: import("./components/Text").TextColor | undefined;
+    fontWeight?: import("./components/Text").FontWeight | undefined;
+    fontStyle?: import("./components/Text").FontStyle | undefined;
+    twClassName?: string | undefined;
+} & import("react-native").TextProps & import("react").RefAttributes<any>, "ref"> & import("react").RefAttributes<any>>;
+export { TextVariant, TextColor, FontWeight, FontStyle, } from './components/Text';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI;;;;;;;uHAAmC,CAAC;AACrD,OAAO,EACL,WAAW,EACX,SAAS,EACT,UAAU,EACV,SAAS,GACV,MAAM,mBAAmB,CAAC"}

package/dist/index.js

@@ -0,0 +1,15 @@
+"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.Text = void 0;
+const design_system_twrnc_preset_1 = require("@metamask-previews/design-system-twrnc-preset");
+const Text_1 = __importDefault(require("./components/Text"));
+exports.Text = (0, design_system_twrnc_preset_1.withThemeProvider)(Text_1.default);
+var Text_2 = require("./components/Text");
+Object.defineProperty(exports, "TextVariant", { enumerable: true, get: function () { return Text_2.TextVariant; } });
+Object.defineProperty(exports, "TextColor", { enumerable: true, get: function () { return Text_2.TextColor; } });
+Object.defineProperty(exports, "FontWeight", { enumerable: true, get: function () { return Text_2.FontWeight; } });
+Object.defineProperty(exports, "FontStyle", { enumerable: true, get: function () { return Text_2.FontStyle; } });
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,8FAAkF;AAElF,6DAA8C;AAEjC,QAAA,IAAI,GAAG,IAAA,8CAAiB,EAAC,cAAa,CAAC,CAAC;AACrD,0CAK2B;AAJzB,mGAAA,WAAW,OAAA;AACX,iGAAA,SAAS,OAAA;AACT,kGAAA,UAAU,OAAA;AACV,iGAAA,SAAS,OAAA","sourcesContent":["import { withThemeProvider } from '@metamask-previews/design-system-twrnc-preset';\n\nimport TextComponent from './components/Text';\n\nexport const Text = withThemeProvider(TextComponent);\nexport {\n  TextVariant,\n  TextColor,\n  FontWeight,\n  FontStyle,\n} from './components/Text';\n"]}

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@metamask-previews/design-system-react-native",
+  "version": "0.0.0-preview.019292f",
+  "description": "Design System React Native",
+  "keywords": [
+    "MetaMask",
+    "Ethereum"
+  ],
+  "homepage": "https://github.com/MetaMask/metamask-design-system/tree/main/packages/design-system-react-native#readme",
+  "bugs": {
+    "url": "https://github.com/MetaMask/metamask-design-system/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/MetaMask/metamask-design-system.git"
+  },
+  "license": "MIT",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/"
+  ],
+  "scripts": {
+    "build": "rm -rf tsconfig.build.tsbuildinfo dist && tsc --project tsconfig.build.json",
+    "changelog:update": "../../scripts/update-changelog.sh @metamask/design-system-react-native",
+    "changelog:validate": "../../scripts/validate-changelog.sh @metamask/design-system-react-native",
+    "publish:preview": "yarn npm publish --tag preview",
+    "since-latest-release": "../../scripts/since-latest-release.sh",
+    "test": "NODE_OPTIONS=--experimental-vm-modules jest --reporters=jest-silent-reporter",
+    "test:clean": "NODE_OPTIONS=--experimental-vm-modules jest --clearCache",
+    "test:verbose": "NODE_OPTIONS=--experimental-vm-modules jest --verbose",
+    "test:watch": "NODE_OPTIONS=--experimental-vm-modules jest --watch"
+  },
+  "dependencies": {
+    "@metamask-previews/design-system-twrnc-preset": "0.0.0-preview.019292f",
+    "react": "^18.2.0",
+    "react-native": "^0.72.15"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.23.5",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.25.9",
+    "@babel/preset-typescript": "^7.23.3",
+    "@metamask/auto-changelog": "^3.4.4",
+    "@storybook/react-native": "6.5",
+    "@testing-library/react-native": "^12.8.1",
+    "@types/babel__preset-env": "^7",
+    "@types/jest": "^27.4.1",
+    "@types/react": "^18.2.0",
+    "@types/react-test-renderer": "^18",
+    "babel-jest": "^29.7.0",
+    "deepmerge": "^4.2.2",
+    "jest": "^29.7.0",
+    "metro-react-native-babel-preset": "^0.77.0",
+    "react-test-renderer": "^18.3.1",
+    "ts-jest": "^29.2.5",
+    "typescript": "~5.2.2"
+  },
+  "engines": {
+    "node": "^18.18 || >=20"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}