@metamask/design-system-twrnc-preset 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,22 @@
+# 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]
+
+## [0.1.0]
+
+### Added
+
+- **Initial release** - MetaMask Design System TWRNC preset
+- **ThemeProvider**: Context provider for theme management
+- **Hooks**: useTailwind, useTheme
+- **Theme Types**: TypeScript definitions for theme configuration
+- MetaMask design token integration for React Native
+- TWRNC preset configuration with MetaMask styling utilities
+
+[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-twrnc-preset@0.1.0...HEAD
+[0.1.0]: https://github.com/MetaMask/metamask-design-system/releases/tag/@metamask/design-system-twrnc-preset@0.1.0

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,31 @@
+# `@metamask/design-system-twrnc-preset`
+
+Design System twrnc preset
+
+## Installation
+
+First, install the package:
+
+`yarn add @metamask/design-system-twrnc-preset`
+
+or
+
+`npm install @metamask/design-system-twrnc-preset`
+
+### Peer Dependencies
+
+This package requires the following peer dependencies to be installed in your project:
+
+```bash
+yarn add react@^18.2.0 react-native@0.72.15 twrnc@^4.5.1
+```
+
+or
+
+```bash
+npm install react@^18.2.0 react-native@0.72.15 twrnc@^4.5.1
+```
+
+## 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/Theme.types.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Theme = void 0;
+/**
+ * Theme enum for light and dark mode support
+ */
+var Theme;
+(function (Theme) {
+    Theme["Light"] = "light";
+    Theme["Dark"] = "dark";
+})(Theme || (exports.Theme = Theme = {}));
+//# sourceMappingURL=Theme.types.cjs.map

package/dist/Theme.types.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Theme.types.cjs","sourceRoot":"","sources":["../src/Theme.types.ts"],"names":[],"mappings":";;;AAAA;;GAEG;AACH,IAAY,KAGX;AAHD,WAAY,KAAK;IACf,wBAAe,CAAA;IACf,sBAAa,CAAA;AACf,CAAC,EAHW,KAAK,qBAAL,KAAK,QAGhB","sourcesContent":["/**\n * Theme enum for light and dark mode support\n */\nexport enum Theme {\n  Light = 'light',\n  Dark = 'dark',\n}\n"]}

package/dist/Theme.types.d.cts

@@ -0,0 +1,8 @@
+/**
+ * Theme enum for light and dark mode support
+ */
+export declare enum Theme {
+    Light = "light",
+    Dark = "dark"
+}
+//# sourceMappingURL=Theme.types.d.cts.map

package/dist/Theme.types.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Theme.types.d.cts","sourceRoot":"","sources":["../src/Theme.types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,oBAAY,KAAK;IACf,KAAK,UAAU;IACf,IAAI,SAAS;CACd"}

package/dist/Theme.types.d.mts

@@ -0,0 +1,8 @@
+/**
+ * Theme enum for light and dark mode support
+ */
+export declare enum Theme {
+    Light = "light",
+    Dark = "dark"
+}
+//# sourceMappingURL=Theme.types.d.mts.map

package/dist/Theme.types.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Theme.types.d.mts","sourceRoot":"","sources":["../src/Theme.types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,oBAAY,KAAK;IACf,KAAK,UAAU;IACf,IAAI,SAAS;CACd"}

package/dist/Theme.types.mjs

@@ -0,0 +1,9 @@
+/**
+ * Theme enum for light and dark mode support
+ */
+export var Theme;
+(function (Theme) {
+    Theme["Light"] = "light";
+    Theme["Dark"] = "dark";
+})(Theme || (Theme = {}));
+//# sourceMappingURL=Theme.types.mjs.map

package/dist/Theme.types.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Theme.types.mjs","sourceRoot":"","sources":["../src/Theme.types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAN,IAAY,KAGX;AAHD,WAAY,KAAK;IACf,wBAAe,CAAA;IACf,sBAAa,CAAA;AACf,CAAC,EAHW,KAAK,KAAL,KAAK,QAGhB","sourcesContent":["/**\n * Theme enum for light and dark mode support\n */\nexport enum Theme {\n  Light = 'light',\n  Dark = 'dark',\n}\n"]}

package/dist/ThemeContext.cjs

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeContext = exports.defaultThemeContextValue = void 0;
+const react_1 = require("react");
+const twrnc_1 = require("twrnc");
+const tailwind_config_1 = require("./tailwind.config.cjs");
+const Theme_types_1 = require("./Theme.types.cjs");
+exports.defaultThemeContextValue = {
+    tw: (0, twrnc_1.create)((0, tailwind_config_1.generateTailwindConfig)(Theme_types_1.Theme.Light)),
+    theme: Theme_types_1.Theme.Light,
+};
+exports.ThemeContext = (0, react_1.createContext)(exports.defaultThemeContextValue);
+//# sourceMappingURL=ThemeContext.cjs.map

package/dist/ThemeContext.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeContext.cjs","sourceRoot":"","sources":["../src/ThemeContext.ts"],"names":[],"mappings":";;;AAAA,iCAAsC;AACtC,iCAA+B;AAE/B,2DAA2D;AAC3D,mDAAsC;AAUzB,QAAA,wBAAwB,GAAG;IACtC,EAAE,EAAE,IAAA,cAAM,EAAC,IAAA,wCAAsB,EAAC,mBAAK,CAAC,KAAK,CAAC,CAAC;IAC/C,KAAK,EAAE,mBAAK,CAAC,KAAK;CACnB,CAAC;AAEW,QAAA,YAAY,GAAG,IAAA,qBAAa,EACvC,gCAAwB,CACzB,CAAC","sourcesContent":["import { createContext } from 'react';\nimport { create } from 'twrnc';\n\nimport { generateTailwindConfig } from './tailwind.config';\nimport { Theme } from './Theme.types';\n\n/**\n * Theme context properties\n */\nexport type ThemeContextProps = {\n  tw: ReturnType<typeof create>;\n  theme: Theme;\n};\n\nexport const defaultThemeContextValue = {\n  tw: create(generateTailwindConfig(Theme.Light)),\n  theme: Theme.Light,\n};\n\nexport const ThemeContext = createContext<ThemeContextProps>(\n  defaultThemeContextValue,\n);\n"]}

package/dist/ThemeContext.d.cts

@@ -0,0 +1,15 @@
+import { create } from "twrnc";
+import { Theme } from "./Theme.types.cjs";
+/**
+ * Theme context properties
+ */
+export type ThemeContextProps = {
+    tw: ReturnType<typeof create>;
+    theme: Theme;
+};
+export declare const defaultThemeContextValue: {
+    tw: import("twrnc").TailwindFn;
+    theme: Theme;
+};
+export declare const ThemeContext: import("react").Context<ThemeContextProps>;
+//# sourceMappingURL=ThemeContext.d.cts.map

package/dist/ThemeContext.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeContext.d.cts","sourceRoot":"","sources":["../src/ThemeContext.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,cAAc;AAG/B,OAAO,EAAE,KAAK,EAAE,0BAAsB;AAEtC;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;IAC9B,KAAK,EAAE,KAAK,CAAC;CACd,CAAC;AAEF,eAAO,MAAM,wBAAwB;;;CAGpC,CAAC;AAEF,eAAO,MAAM,YAAY,4CAExB,CAAC"}

package/dist/ThemeContext.d.mts

@@ -0,0 +1,15 @@
+import { create } from "twrnc";
+import { Theme } from "./Theme.types.mjs";
+/**
+ * Theme context properties
+ */
+export type ThemeContextProps = {
+    tw: ReturnType<typeof create>;
+    theme: Theme;
+};
+export declare const defaultThemeContextValue: {
+    tw: import("twrnc").TailwindFn;
+    theme: Theme;
+};
+export declare const ThemeContext: import("react").Context<ThemeContextProps>;
+//# sourceMappingURL=ThemeContext.d.mts.map

package/dist/ThemeContext.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeContext.d.mts","sourceRoot":"","sources":["../src/ThemeContext.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,cAAc;AAG/B,OAAO,EAAE,KAAK,EAAE,0BAAsB;AAEtC;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;IAC9B,KAAK,EAAE,KAAK,CAAC;CACd,CAAC;AAEF,eAAO,MAAM,wBAAwB;;;CAGpC,CAAC;AAEF,eAAO,MAAM,YAAY,4CAExB,CAAC"}

package/dist/ThemeContext.mjs

@@ -0,0 +1,10 @@
+import { createContext } from "react";
+import { create } from "twrnc";
+import { generateTailwindConfig } from "./tailwind.config.mjs";
+import { Theme } from "./Theme.types.mjs";
+export const defaultThemeContextValue = {
+    tw: create(generateTailwindConfig(Theme.Light)),
+    theme: Theme.Light,
+};
+export const ThemeContext = createContext(defaultThemeContextValue);
+//# sourceMappingURL=ThemeContext.mjs.map

package/dist/ThemeContext.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeContext.mjs","sourceRoot":"","sources":["../src/ThemeContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,cAAc;AACtC,OAAO,EAAE,MAAM,EAAE,cAAc;AAE/B,OAAO,EAAE,sBAAsB,EAAE,8BAA0B;AAC3D,OAAO,EAAE,KAAK,EAAE,0BAAsB;AAUtC,MAAM,CAAC,MAAM,wBAAwB,GAAG;IACtC,EAAE,EAAE,MAAM,CAAC,sBAAsB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAC/C,KAAK,EAAE,KAAK,CAAC,KAAK;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CACvC,wBAAwB,CACzB,CAAC","sourcesContent":["import { createContext } from 'react';\nimport { create } from 'twrnc';\n\nimport { generateTailwindConfig } from './tailwind.config';\nimport { Theme } from './Theme.types';\n\n/**\n * Theme context properties\n */\nexport type ThemeContextProps = {\n  tw: ReturnType<typeof create>;\n  theme: Theme;\n};\n\nexport const defaultThemeContextValue = {\n  tw: create(generateTailwindConfig(Theme.Light)),\n  theme: Theme.Light,\n};\n\nexport const ThemeContext = createContext<ThemeContextProps>(\n  defaultThemeContextValue,\n);\n"]}

package/dist/ThemeProvider.cjs

@@ -0,0 +1,53 @@
+"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.ThemeProvider = void 0;
+const react_1 = __importStar(require("react"));
+const twrnc_1 = require("twrnc");
+const tailwind_config_1 = require("./tailwind.config.cjs");
+const ThemeContext_1 = require("./ThemeContext.cjs");
+/**
+ * Theme provider component that wraps child components with theme context
+ *
+ * @param options - Component props
+ * @param options.children - Child components to render
+ * @param options.theme - Theme to apply (light or dark)
+ * @returns React component that provides theme context to children
+ */
+const ThemeProvider = ({ children, theme, }) => {
+    const contextValue = (0, react_1.useMemo)(() => {
+        const tailwindConfig = (0, tailwind_config_1.generateTailwindConfig)(theme);
+        const tw = (0, twrnc_1.create)(tailwindConfig);
+        return {
+            tw,
+            theme,
+        };
+    }, [theme]);
+    return (<ThemeContext_1.ThemeContext.Provider value={contextValue}>
+      {children}
+    </ThemeContext_1.ThemeContext.Provider>);
+};
+exports.ThemeProvider = ThemeProvider;
+//# sourceMappingURL=ThemeProvider.cjs.map

package/dist/ThemeProvider.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.cjs","sourceRoot":"","sources":["../src/ThemeProvider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAuC;AACvC,iCAA+B;AAE/B,2DAA2D;AAG3D,qDAA8C;AAE9C;;;;;;;GAOG;AACI,MAAM,aAAa,GAAG,CAAC,EAC5B,QAAQ,EACR,KAAK,GAIN,EAAE,EAAE;IACH,MAAM,YAAY,GAAsB,IAAA,eAAO,EAAC,GAAG,EAAE;QACnD,MAAM,cAAc,GAAG,IAAA,wCAAsB,EAAC,KAAK,CAAC,CAAC;QACrD,MAAM,EAAE,GAAG,IAAA,cAAM,EAAC,cAAc,CAAC,CAAC;QAClC,OAAO;YACL,EAAE;YACF,KAAK;SACN,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACL,CAAC,2BAAY,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CACzC;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,2BAAY,CAAC,QAAQ,CAAC,CACzB,CAAC;AACJ,CAAC,CAAC;AArBW,QAAA,aAAa,iBAqBxB","sourcesContent":["import React, { useMemo } from 'react';\nimport { create } from 'twrnc';\n\nimport { generateTailwindConfig } from './tailwind.config';\nimport type { Theme } from './Theme.types';\nimport type { ThemeContextProps } from './ThemeContext';\nimport { ThemeContext } from './ThemeContext';\n\n/**\n * Theme provider component that wraps child components with theme context\n *\n * @param options - Component props\n * @param options.children - Child components to render\n * @param options.theme - Theme to apply (light or dark)\n * @returns React component that provides theme context to children\n */\nexport const ThemeProvider = ({\n  children,\n  theme,\n}: {\n  children: React.ReactNode;\n  theme: Theme;\n}) => {\n  const contextValue: ThemeContextProps = useMemo(() => {\n    const tailwindConfig = generateTailwindConfig(theme);\n    const tw = create(tailwindConfig);\n    return {\n      tw,\n      theme,\n    };\n  }, [theme]);\n\n  return (\n    <ThemeContext.Provider value={contextValue}>\n      {children}\n    </ThemeContext.Provider>\n  );\n};\n"]}

package/dist/ThemeProvider.d.cts

@@ -0,0 +1,15 @@
+import React from "react";
+import type { Theme } from "./Theme.types.cjs";
+/**
+ * Theme provider component that wraps child components with theme context
+ *
+ * @param options - Component props
+ * @param options.children - Child components to render
+ * @param options.theme - Theme to apply (light or dark)
+ * @returns React component that provides theme context to children
+ */
+export declare const ThemeProvider: ({ children, theme, }: {
+    children: React.ReactNode;
+    theme: Theme;
+}) => React.JSX.Element;
+//# sourceMappingURL=ThemeProvider.d.cts.map

package/dist/ThemeProvider.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.d.cts","sourceRoot":"","sources":["../src/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,cAAc;AAIvC,OAAO,KAAK,EAAE,KAAK,EAAE,0BAAsB;AAI3C;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa;cAId,MAAM,SAAS;WAClB,KAAK;uBAgBb,CAAC"}

package/dist/ThemeProvider.d.mts

@@ -0,0 +1,15 @@
+import React from "react";
+import type { Theme } from "./Theme.types.mjs";
+/**
+ * Theme provider component that wraps child components with theme context
+ *
+ * @param options - Component props
+ * @param options.children - Child components to render
+ * @param options.theme - Theme to apply (light or dark)
+ * @returns React component that provides theme context to children
+ */
+export declare const ThemeProvider: ({ children, theme, }: {
+    children: React.ReactNode;
+    theme: Theme;
+}) => React.JSX.Element;
+//# sourceMappingURL=ThemeProvider.d.mts.map

package/dist/ThemeProvider.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.d.mts","sourceRoot":"","sources":["../src/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,cAAc;AAIvC,OAAO,KAAK,EAAE,KAAK,EAAE,0BAAsB;AAI3C;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa;cAId,MAAM,SAAS;WAClB,KAAK;uBAgBb,CAAC"}

package/dist/ThemeProvider.mjs

@@ -0,0 +1,33 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+import $React, { useMemo } from "react";
+const React = $importDefault($React);
+import { create } from "twrnc";
+import { generateTailwindConfig } from "./tailwind.config.mjs";
+import { ThemeContext } from "./ThemeContext.mjs";
+/**
+ * Theme provider component that wraps child components with theme context
+ *
+ * @param options - Component props
+ * @param options.children - Child components to render
+ * @param options.theme - Theme to apply (light or dark)
+ * @returns React component that provides theme context to children
+ */
+export const ThemeProvider = ({ children, theme, }) => {
+    const contextValue = useMemo(() => {
+        const tailwindConfig = generateTailwindConfig(theme);
+        const tw = create(tailwindConfig);
+        return {
+            tw,
+            theme,
+        };
+    }, [theme]);
+    return (<ThemeContext.Provider value={contextValue}>
+      {children}
+    </ThemeContext.Provider>);
+};
+//# sourceMappingURL=ThemeProvider.mjs.map

package/dist/ThemeProvider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.mjs","sourceRoot":"","sources":["../src/ThemeProvider.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAO,EAAE,OAAO,EAAE,cAAc;;AACvC,OAAO,EAAE,MAAM,EAAE,cAAc;AAE/B,OAAO,EAAE,sBAAsB,EAAE,8BAA0B;AAG3D,OAAO,EAAE,YAAY,EAAE,2BAAuB;AAE9C;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,QAAQ,EACR,KAAK,GAIN,EAAE,EAAE;IACH,MAAM,YAAY,GAAsB,OAAO,CAAC,GAAG,EAAE;QACnD,MAAM,cAAc,GAAG,sBAAsB,CAAC,KAAK,CAAC,CAAC;QACrD,MAAM,EAAE,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;QAClC,OAAO;YACL,EAAE;YACF,KAAK;SACN,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACL,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CACzC;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,YAAY,CAAC,QAAQ,CAAC,CACzB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React, { useMemo } from 'react';\nimport { create } from 'twrnc';\n\nimport { generateTailwindConfig } from './tailwind.config';\nimport type { Theme } from './Theme.types';\nimport type { ThemeContextProps } from './ThemeContext';\nimport { ThemeContext } from './ThemeContext';\n\n/**\n * Theme provider component that wraps child components with theme context\n *\n * @param options - Component props\n * @param options.children - Child components to render\n * @param options.theme - Theme to apply (light or dark)\n * @returns React component that provides theme context to children\n */\nexport const ThemeProvider = ({\n  children,\n  theme,\n}: {\n  children: React.ReactNode;\n  theme: Theme;\n}) => {\n  const contextValue: ThemeContextProps = useMemo(() => {\n    const tailwindConfig = generateTailwindConfig(theme);\n    const tw = create(tailwindConfig);\n    return {\n      tw,\n      theme,\n    };\n  }, [theme]);\n\n  return (\n    <ThemeContext.Provider value={contextValue}>\n      {children}\n    </ThemeContext.Provider>\n  );\n};\n"]}

package/dist/colors.cjs

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.themeColors = void 0;
+const design_tokens_1 = require("@metamask/design-tokens");
+const Theme_types_1 = require("./Theme.types.cjs");
+/**
+ * Helper function to convert a camelCase / PascalCase string to kebab-case.
+ *
+ * It inserts a hyphen ("-") before every capital letter (while also handling
+ * consecutive capitals), then lower-cases the entire result.
+ *
+ * @param str - The original camelCase or PascalCase string.
+ * @returns The kebab-case representation of the input.
+ *
+ * @example
+ * toKebab('defaultHover');  // → 'default-hover'
+ * toKebab('RGBValue');      // → 'r-g-b-value'
+ */
+const toKebab = (str) => str
+    // place a dash between lower/number → upper transitions
+    .replace(/([a-z0-9])([A-Z])/gu, '$1-$2')
+    // place a dash between upper → upper+lower transitions (e.g. "RGBValue")
+    .replace(/([A-Z])([A-Z][a-z])/gu, '$1-$2')
+    .toLowerCase();
+/**
+ * Recursively flattens a nested object of colors into a flat object with kebab-case keys.
+ *
+ * This function is specifically designed to handle MetaMask design token color objects,
+ * which can be deeply nested. It converts the structure into a flat object suitable
+ * for Tailwind CSS configuration.
+ *
+ * @param obj - The nested color object to flatten.
+ * @param prefix - The current prefix for the keys (used during recursion).
+ * @returns A flattened object with kebab-case keys and color values.
+ *
+ * @example
+ * const colors = {
+ *   background: {
+ *     default: '#FFFFFF',
+ *     alternative: '#F2F4F6'
+ *   }
+ * };
+ *
+ * flattenColors(colors);
+ * // Returns: {
+ * //   'background-default': '#FFFFFF',
+ * //   'background-alternative': '#F2F4F6'
+ * // }
+ */
+const flattenColors = (obj, prefix = '') => {
+    const result = {};
+    for (const [key, value] of Object.entries(obj)) {
+        const newKey = prefix ? `${prefix}-${toKebab(key)}` : toKebab(key);
+        if (typeof value === 'string') {
+            result[newKey] = value;
+        }
+        else if (typeof value === 'object' && value !== null) {
+            Object.assign(result, flattenColors(value, newKey));
+        }
+    }
+    return result;
+};
+exports.themeColors = {
+    [Theme_types_1.Theme.Light]: flattenColors(design_tokens_1.lightTheme.colors),
+    [Theme_types_1.Theme.Dark]: flattenColors(design_tokens_1.darkTheme.colors),
+};
+//# sourceMappingURL=colors.cjs.map

package/dist/colors.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.cjs","sourceRoot":"","sources":["../src/colors.ts"],"names":[],"mappings":";;;AAAA,2DAAgE;AAEhE,mDAAsC;AAEtC;;;;;;;;;;;;GAYG;AACH,MAAM,OAAO,GAAG,CAAC,GAAW,EAAU,EAAE,CACtC,GAAG;IACD,wDAAwD;KACvD,OAAO,CAAC,qBAAqB,EAAE,OAAO,CAAC;IACxC,yEAAyE;KACxE,OAAO,CAAC,uBAAuB,EAAE,OAAO,CAAC;KACzC,WAAW,EAAE,CAAC;AAEnB;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,aAAa,GAAG,CACpB,GAA4B,EAC5B,MAAM,GAAG,EAAE,EACa,EAAE;IAC1B,MAAM,MAAM,GAA2B,EAAE,CAAC;IAE1C,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;QAC9C,MAAM,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;QAEnE,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;YAC7B,MAAM,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC;SACxB;aAAM,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,EAAE;YACtD,MAAM,CAAC,MAAM,CACX,MAAM,EACN,aAAa,CAAC,KAAgC,EAAE,MAAM,CAAC,CACxD,CAAC;SACH;KACF;IAED,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAEW,QAAA,WAAW,GAA0C;IAChE,CAAC,mBAAK,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC,0BAAU,CAAC,MAAM,CAAC;IAC/C,CAAC,mBAAK,CAAC,IAAI,CAAC,EAAE,aAAa,CAAC,yBAAS,CAAC,MAAM,CAAC;CAC9C,CAAC","sourcesContent":["import { lightTheme, darkTheme } from '@metamask/design-tokens';\n\nimport { Theme } from './Theme.types';\n\n/**\n * Helper function to convert a camelCase / PascalCase string to kebab-case.\n *\n * It inserts a hyphen (\"-\") before every capital letter (while also handling\n * consecutive capitals), then lower-cases the entire result.\n *\n * @param str - The original camelCase or PascalCase string.\n * @returns The kebab-case representation of the input.\n *\n * @example\n * toKebab('defaultHover');  // → 'default-hover'\n * toKebab('RGBValue');      // → 'r-g-b-value'\n */\nconst toKebab = (str: string): string =>\n  str\n    // place a dash between lower/number → upper transitions\n    .replace(/([a-z0-9])([A-Z])/gu, '$1-$2')\n    // place a dash between upper → upper+lower transitions (e.g. \"RGBValue\")\n    .replace(/([A-Z])([A-Z][a-z])/gu, '$1-$2')\n    .toLowerCase();\n\n/**\n * Recursively flattens a nested object of colors into a flat object with kebab-case keys.\n *\n * This function is specifically designed to handle MetaMask design token color objects,\n * which can be deeply nested. It converts the structure into a flat object suitable\n * for Tailwind CSS configuration.\n *\n * @param obj - The nested color object to flatten.\n * @param prefix - The current prefix for the keys (used during recursion).\n * @returns A flattened object with kebab-case keys and color values.\n *\n * @example\n * const colors = {\n *   background: {\n *     default: '#FFFFFF',\n *     alternative: '#F2F4F6'\n *   }\n * };\n *\n * flattenColors(colors);\n * // Returns: {\n * //   'background-default': '#FFFFFF',\n * //   'background-alternative': '#F2F4F6'\n * // }\n */\nconst flattenColors = (\n  obj: Record<string, unknown>,\n  prefix = '',\n): Record<string, string> => {\n  const result: Record<string, string> = {};\n\n  for (const [key, value] of Object.entries(obj)) {\n    const newKey = prefix ? `${prefix}-${toKebab(key)}` : toKebab(key);\n\n    if (typeof value === 'string') {\n      result[newKey] = value;\n    } else if (typeof value === 'object' && value !== null) {\n      Object.assign(\n        result,\n        flattenColors(value as Record<string, unknown>, newKey),\n      );\n    }\n  }\n\n  return result;\n};\n\nexport const themeColors: Record<Theme, Record<string, string>> = {\n  [Theme.Light]: flattenColors(lightTheme.colors),\n  [Theme.Dark]: flattenColors(darkTheme.colors),\n};\n"]}

package/dist/colors.d.cts

@@ -0,0 +1,3 @@
+import { Theme } from "./Theme.types.cjs";
+export declare const themeColors: Record<Theme, Record<string, string>>;
+//# sourceMappingURL=colors.d.cts.map

package/dist/colors.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.cts","sourceRoot":"","sources":["../src/colors.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,0BAAsB;AAsEtC,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAG7D,CAAC"}

package/dist/colors.d.mts

@@ -0,0 +1,3 @@
+import { Theme } from "./Theme.types.mjs";
+export declare const themeColors: Record<Theme, Record<string, string>>;
+//# sourceMappingURL=colors.d.mts.map

package/dist/colors.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.mts","sourceRoot":"","sources":["../src/colors.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,0BAAsB;AAsEtC,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAG7D,CAAC"}

package/dist/colors.mjs

@@ -0,0 +1,64 @@
+import { lightTheme, darkTheme } from "@metamask/design-tokens";
+import { Theme } from "./Theme.types.mjs";
+/**
+ * Helper function to convert a camelCase / PascalCase string to kebab-case.
+ *
+ * It inserts a hyphen ("-") before every capital letter (while also handling
+ * consecutive capitals), then lower-cases the entire result.
+ *
+ * @param str - The original camelCase or PascalCase string.
+ * @returns The kebab-case representation of the input.
+ *
+ * @example
+ * toKebab('defaultHover');  // → 'default-hover'
+ * toKebab('RGBValue');      // → 'r-g-b-value'
+ */
+const toKebab = (str) => str
+    // place a dash between lower/number → upper transitions
+    .replace(/([a-z0-9])([A-Z])/gu, '$1-$2')
+    // place a dash between upper → upper+lower transitions (e.g. "RGBValue")
+    .replace(/([A-Z])([A-Z][a-z])/gu, '$1-$2')
+    .toLowerCase();
+/**
+ * Recursively flattens a nested object of colors into a flat object with kebab-case keys.
+ *
+ * This function is specifically designed to handle MetaMask design token color objects,
+ * which can be deeply nested. It converts the structure into a flat object suitable
+ * for Tailwind CSS configuration.
+ *
+ * @param obj - The nested color object to flatten.
+ * @param prefix - The current prefix for the keys (used during recursion).
+ * @returns A flattened object with kebab-case keys and color values.
+ *
+ * @example
+ * const colors = {
+ *   background: {
+ *     default: '#FFFFFF',
+ *     alternative: '#F2F4F6'
+ *   }
+ * };
+ *
+ * flattenColors(colors);
+ * // Returns: {
+ * //   'background-default': '#FFFFFF',
+ * //   'background-alternative': '#F2F4F6'
+ * // }
+ */
+const flattenColors = (obj, prefix = '') => {
+    const result = {};
+    for (const [key, value] of Object.entries(obj)) {
+        const newKey = prefix ? `${prefix}-${toKebab(key)}` : toKebab(key);
+        if (typeof value === 'string') {
+            result[newKey] = value;
+        }
+        else if (typeof value === 'object' && value !== null) {
+            Object.assign(result, flattenColors(value, newKey));
+        }
+    }
+    return result;
+};
+export const themeColors = {
+    [Theme.Light]: flattenColors(lightTheme.colors),
+    [Theme.Dark]: flattenColors(darkTheme.colors),
+};
+//# sourceMappingURL=colors.mjs.map

package/dist/colors.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.mjs","sourceRoot":"","sources":["../src/colors.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,gCAAgC;AAEhE,OAAO,EAAE,KAAK,EAAE,0BAAsB;AAEtC;;;;;;;;;;;;GAYG;AACH,MAAM,OAAO,GAAG,CAAC,GAAW,EAAU,EAAE,CACtC,GAAG;IACD,wDAAwD;KACvD,OAAO,CAAC,qBAAqB,EAAE,OAAO,CAAC;IACxC,yEAAyE;KACxE,OAAO,CAAC,uBAAuB,EAAE,OAAO,CAAC;KACzC,WAAW,EAAE,CAAC;AAEnB;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,aAAa,GAAG,CACpB,GAA4B,EAC5B,MAAM,GAAG,EAAE,EACa,EAAE;IAC1B,MAAM,MAAM,GAA2B,EAAE,CAAC;IAE1C,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;QAC9C,MAAM,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;QAEnE,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;YAC7B,MAAM,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC;SACxB;aAAM,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,EAAE;YACtD,MAAM,CAAC,MAAM,CACX,MAAM,EACN,aAAa,CAAC,KAAgC,EAAE,MAAM,CAAC,CACxD,CAAC;SACH;KACF;IAED,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAA0C;IAChE,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,MAAM,CAAC;IAC/C,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,MAAM,CAAC;CAC9C,CAAC","sourcesContent":["import { lightTheme, darkTheme } from '@metamask/design-tokens';\n\nimport { Theme } from './Theme.types';\n\n/**\n * Helper function to convert a camelCase / PascalCase string to kebab-case.\n *\n * It inserts a hyphen (\"-\") before every capital letter (while also handling\n * consecutive capitals), then lower-cases the entire result.\n *\n * @param str - The original camelCase or PascalCase string.\n * @returns The kebab-case representation of the input.\n *\n * @example\n * toKebab('defaultHover');  // → 'default-hover'\n * toKebab('RGBValue');      // → 'r-g-b-value'\n */\nconst toKebab = (str: string): string =>\n  str\n    // place a dash between lower/number → upper transitions\n    .replace(/([a-z0-9])([A-Z])/gu, '$1-$2')\n    // place a dash between upper → upper+lower transitions (e.g. \"RGBValue\")\n    .replace(/([A-Z])([A-Z][a-z])/gu, '$1-$2')\n    .toLowerCase();\n\n/**\n * Recursively flattens a nested object of colors into a flat object with kebab-case keys.\n *\n * This function is specifically designed to handle MetaMask design token color objects,\n * which can be deeply nested. It converts the structure into a flat object suitable\n * for Tailwind CSS configuration.\n *\n * @param obj - The nested color object to flatten.\n * @param prefix - The current prefix for the keys (used during recursion).\n * @returns A flattened object with kebab-case keys and color values.\n *\n * @example\n * const colors = {\n *   background: {\n *     default: '#FFFFFF',\n *     alternative: '#F2F4F6'\n *   }\n * };\n *\n * flattenColors(colors);\n * // Returns: {\n * //   'background-default': '#FFFFFF',\n * //   'background-alternative': '#F2F4F6'\n * // }\n */\nconst flattenColors = (\n  obj: Record<string, unknown>,\n  prefix = '',\n): Record<string, string> => {\n  const result: Record<string, string> = {};\n\n  for (const [key, value] of Object.entries(obj)) {\n    const newKey = prefix ? `${prefix}-${toKebab(key)}` : toKebab(key);\n\n    if (typeof value === 'string') {\n      result[newKey] = value;\n    } else if (typeof value === 'object' && value !== null) {\n      Object.assign(\n        result,\n        flattenColors(value as Record<string, unknown>, newKey),\n      );\n    }\n  }\n\n  return result;\n};\n\nexport const themeColors: Record<Theme, Record<string, string>> = {\n  [Theme.Light]: flattenColors(lightTheme.colors),\n  [Theme.Dark]: flattenColors(darkTheme.colors),\n};\n"]}

package/dist/hooks.cjs

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTailwind = exports.useTheme = void 0;
+const react_1 = require("react");
+const ThemeContext_1 = require("./ThemeContext.cjs");
+/**
+ * Hook that provides access to the current theme.
+ * Use this when you need to conditionally render content based on theme.
+ *
+ * @returns The current theme ('light' or 'dark')
+ *
+ * @example
+ * const theme = useTheme();
+ * const inverseTheme = theme === Theme.Light ? Theme.Dark : Theme.Light;
+ * return (
+ *   <ThemeProvider theme={inverseTheme}>
+ *     <View style={tw`bg-default`}>
+ *       <Text style={tw`text-default`}>Toast message</Text>
+ *     </View>
+ *   </ThemeProvider>
+ * );
+ */
+const useTheme = () => {
+    const { theme } = (0, react_1.useContext)(ThemeContext_1.ThemeContext);
+    return theme;
+};
+exports.useTheme = useTheme;
+/**
+ * Hook that provides access to the tailwind utility function.
+ * Use this when you only need styling capabilities.
+ *
+ * @returns Tailwind utility function for styling
+ *
+ * @example
+ * const tw = useTailwind();
+ * return (
+ *   <View style={tw`p-4 bg-primary`}>
+ *     <Text>Styled content</Text>
+ *   </View>
+ * );
+ */
+const useTailwind = () => {
+    const { tw } = (0, react_1.useContext)(ThemeContext_1.ThemeContext);
+    return tw;
+};
+exports.useTailwind = useTailwind;
+//# sourceMappingURL=hooks.cjs.map

package/dist/hooks.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.cjs","sourceRoot":"","sources":["../src/hooks.ts"],"names":[],"mappings":";;;AAAA,iCAAmC;AAGnC,qDAA8C;AAE9C;;;;;;;;;;;;;;;;GAgBG;AACI,MAAM,QAAQ,GAAG,GAAU,EAAE;IAClC,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,kBAAU,EAAC,2BAAY,CAAC,CAAC;IAC3C,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAHW,QAAA,QAAQ,YAGnB;AAEF;;;;;;;;;;;;;GAaG;AACI,MAAM,WAAW,GAAG,GAAG,EAAE;IAC9B,MAAM,EAAE,EAAE,EAAE,GAAG,IAAA,kBAAU,EAAC,2BAAY,CAAC,CAAC;IACxC,OAAO,EAAE,CAAC;AACZ,CAAC,CAAC;AAHW,QAAA,WAAW,eAGtB","sourcesContent":["import { useContext } from 'react';\n\nimport type { Theme } from './Theme.types';\nimport { ThemeContext } from './ThemeContext';\n\n/**\n * Hook that provides access to the current theme.\n * Use this when you need to conditionally render content based on theme.\n *\n * @returns The current theme ('light' or 'dark')\n *\n * @example\n * const theme = useTheme();\n * const inverseTheme = theme === Theme.Light ? Theme.Dark : Theme.Light;\n * return (\n *   <ThemeProvider theme={inverseTheme}>\n *     <View style={tw`bg-default`}>\n *       <Text style={tw`text-default`}>Toast message</Text>\n *     </View>\n *   </ThemeProvider>\n * );\n */\nexport const useTheme = (): Theme => {\n  const { theme } = useContext(ThemeContext);\n  return theme;\n};\n\n/**\n * Hook that provides access to the tailwind utility function.\n * Use this when you only need styling capabilities.\n *\n * @returns Tailwind utility function for styling\n *\n * @example\n * const tw = useTailwind();\n * return (\n *   <View style={tw`p-4 bg-primary`}>\n *     <Text>Styled content</Text>\n *   </View>\n * );\n */\nexport const useTailwind = () => {\n  const { tw } = useContext(ThemeContext);\n  return tw;\n};\n"]}

package/dist/hooks.d.cts

@@ -0,0 +1,35 @@
+import type { Theme } from "./Theme.types.cjs";
+/**
+ * Hook that provides access to the current theme.
+ * Use this when you need to conditionally render content based on theme.
+ *
+ * @returns The current theme ('light' or 'dark')
+ *
+ * @example
+ * const theme = useTheme();
+ * const inverseTheme = theme === Theme.Light ? Theme.Dark : Theme.Light;
+ * return (
+ *   <ThemeProvider theme={inverseTheme}>
+ *     <View style={tw`bg-default`}>
+ *       <Text style={tw`text-default`}>Toast message</Text>
+ *     </View>
+ *   </ThemeProvider>
+ * );
+ */
+export declare const useTheme: () => Theme;
+/**
+ * Hook that provides access to the tailwind utility function.
+ * Use this when you only need styling capabilities.
+ *
+ * @returns Tailwind utility function for styling
+ *
+ * @example
+ * const tw = useTailwind();
+ * return (
+ *   <View style={tw`p-4 bg-primary`}>
+ *     <Text>Styled content</Text>
+ *   </View>
+ * );
+ */
+export declare const useTailwind: () => import("twrnc").TailwindFn;
+//# sourceMappingURL=hooks.d.cts.map

package/dist/hooks.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.cts","sourceRoot":"","sources":["../src/hooks.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,0BAAsB;AAG3C;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,QAAQ,QAAO,KAG3B,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,WAAW,kCAGvB,CAAC"}