@metamask-previews/design-system-twrnc-preset 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-twrnc-preset`
+
+Design System twrnc preset
+
+## Installation
+
+`yarn add @metamask/design-system-twrnc-preset`
+
+or
+
+`npm install @metamask/design-system-twrnc-preset`
+
+## 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/Theme.hooks.d.ts

@@ -0,0 +1,2 @@
+export declare const useTailwind: () => import("twrnc").TailwindFn;
+//# sourceMappingURL=Theme.hooks.d.ts.map

package/dist/Theme/Theme.hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Theme.hooks.d.ts","sourceRoot":"","sources":["../../src/Theme/Theme.hooks.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,WAAW,kCAGvB,CAAC"}

package/dist/Theme/Theme.hooks.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTailwind = void 0;
+const react_1 = require("react");
+const Theme_providers_1 = require("./Theme.providers");
+const useTailwind = () => {
+    const { tw } = (0, react_1.useContext)(Theme_providers_1.ThemeContext);
+    return tw;
+};
+exports.useTailwind = useTailwind;
+//# sourceMappingURL=Theme.hooks.js.map

package/dist/Theme/Theme.hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Theme.hooks.js","sourceRoot":"","sources":["../../src/Theme/Theme.hooks.ts"],"names":[],"mappings":";;;AAAA,iCAAmC;AAEnC,uDAAiD;AAE1C,MAAM,WAAW,GAAG,GAAG,EAAE;IAC9B,MAAM,EAAE,EAAE,EAAE,GAAG,IAAA,kBAAU,EAAC,8BAAY,CAAC,CAAC;IACxC,OAAO,EAAE,CAAC;AACZ,CAAC,CAAC;AAHW,QAAA,WAAW,eAGtB","sourcesContent":["import { useContext } from 'react';\n\nimport { ThemeContext } from './Theme.providers';\n\nexport const useTailwind = () => {\n  const { tw } = useContext(ThemeContext);\n  return tw;\n};\n"]}

package/dist/Theme/Theme.providers.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { ThemeContextProps, ThemeProviderProps } from './Theme.types';
+export declare const defaultThemeContextValue: ThemeContextProps;
+export declare const ThemeContext: React.Context<ThemeContextProps>;
+export declare const ThemeProvider: React.FC<ThemeProviderProps>;
+//# sourceMappingURL=Theme.providers.d.ts.map

package/dist/Theme/Theme.providers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Theme.providers.d.ts","sourceRoot":"","sources":["../../src/Theme/Theme.providers.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAKhE,OAAO,KAAK,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAI3E,eAAO,MAAM,wBAAwB,EAAE,iBAMtC,CAAC;AAEF,eAAO,MAAM,YAAY,kCAExB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA6CtD,CAAC"}

package/dist/Theme/Theme.providers.js

@@ -0,0 +1,75 @@
+"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 = exports.ThemeContext = exports.defaultThemeContextValue = void 0;
+/* eslint-disable @typescript-eslint/no-empty-function */
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const twrnc_1 = require("twrnc");
+const twrnc_settings_1 = require("../twrnc-settings");
+const Theme_types_1 = require("./Theme.types");
+const Theme_utilities_1 = require("./Theme.utilities");
+exports.defaultThemeContextValue = {
+    tw: (0, twrnc_1.create)((0, Theme_utilities_1.generateTailwindConfig)(twrnc_settings_1.ColorSet.Brand, twrnc_settings_1.ColorScheme.Light)),
+    colorSet: twrnc_settings_1.ColorSet.Brand,
+    theme: Theme_types_1.Theme.Light,
+    setColorSet: () => { },
+    setTheme: () => { },
+};
+exports.ThemeContext = (0, react_1.createContext)(exports.defaultThemeContextValue);
+const ThemeProvider = ({ children, colorSet = twrnc_settings_1.ColorSet.Brand, theme = Theme_types_1.Theme.Default, }) => {
+    const [currentColorSet, setCurrentColorSet] = (0, react_1.useState)(colorSet);
+    const [currentTheme, setCurrentTheme] = (0, react_1.useState)(theme);
+    const systemColorScheme = (0, react_native_1.useColorScheme)(); // 'light' | 'dark' | null
+    const activeColorScheme = (0, react_1.useMemo)(() => {
+        if (currentTheme === Theme_types_1.Theme.Default) {
+            return systemColorScheme === 'dark'
+                ? twrnc_settings_1.ColorScheme.Dark
+                : twrnc_settings_1.ColorScheme.Light;
+        }
+        if (currentTheme === Theme_types_1.Theme.Light) {
+            return twrnc_settings_1.ColorScheme.Light;
+        }
+        if (currentTheme === Theme_types_1.Theme.Dark) {
+            return twrnc_settings_1.ColorScheme.Dark;
+        }
+        throw new Error('Invalid theme value');
+    }, [currentTheme, systemColorScheme]);
+    const tw = (0, react_1.useMemo)(() => {
+        const tailwindConfig = (0, Theme_utilities_1.generateTailwindConfig)(currentColorSet, activeColorScheme);
+        return (0, twrnc_1.create)(tailwindConfig);
+    }, [currentColorSet, activeColorScheme]);
+    return (<exports.ThemeContext.Provider value={{
+            tw,
+            colorSet: currentColorSet,
+            theme: currentTheme,
+            setColorSet: setCurrentColorSet,
+            setTheme: setCurrentTheme,
+        }}>
+      {children}
+    </exports.ThemeContext.Provider>);
+};
+exports.ThemeProvider = ThemeProvider;
+//# sourceMappingURL=Theme.providers.js.map

package/dist/Theme/Theme.providers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Theme.providers.js","sourceRoot":"","sources":["../../src/Theme/Theme.providers.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yDAAyD;AACzD,+CAAgE;AAChE,+CAA8C;AAC9C,iCAA+B;AAE/B,sDAA0D;AAE1D,+CAAsC;AACtC,uDAA2D;AAE9C,QAAA,wBAAwB,GAAsB;IACzD,EAAE,EAAE,IAAA,cAAM,EAAC,IAAA,wCAAsB,EAAC,yBAAQ,CAAC,KAAK,EAAE,4BAAW,CAAC,KAAK,CAAC,CAAC;IACrE,QAAQ,EAAE,yBAAQ,CAAC,KAAK;IACxB,KAAK,EAAE,mBAAK,CAAC,KAAK;IAClB,WAAW,EAAE,GAAG,EAAE,GAAE,CAAC;IACrB,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;CACnB,CAAC;AAEW,QAAA,YAAY,GAAG,IAAA,qBAAa,EACvC,gCAAwB,CACzB,CAAC;AAEK,MAAM,aAAa,GAAiC,CAAC,EAC1D,QAAQ,EACR,QAAQ,GAAG,yBAAQ,CAAC,KAAK,EACzB,KAAK,GAAG,mBAAK,CAAC,OAAO,GACtB,EAAE,EAAE;IACH,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,IAAA,gBAAQ,EAAW,QAAQ,CAAC,CAAC;IAC3E,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAQ,KAAK,CAAC,CAAC;IAC/D,MAAM,iBAAiB,GAAG,IAAA,6BAAc,GAAE,CAAC,CAAC,0BAA0B;IAEtE,MAAM,iBAAiB,GAAgB,IAAA,eAAO,EAAC,GAAG,EAAE;QAClD,IAAI,YAAY,KAAK,mBAAK,CAAC,OAAO,EAAE;YAClC,OAAO,iBAAiB,KAAK,MAAM;gBACjC,CAAC,CAAC,4BAAW,CAAC,IAAI;gBAClB,CAAC,CAAC,4BAAW,CAAC,KAAK,CAAC;SACvB;QACD,IAAI,YAAY,KAAK,mBAAK,CAAC,KAAK,EAAE;YAChC,OAAO,4BAAW,CAAC,KAAK,CAAC;SAC1B;QACD,IAAI,YAAY,KAAK,mBAAK,CAAC,IAAI,EAAE;YAC/B,OAAO,4BAAW,CAAC,IAAI,CAAC;SACzB;QACD,MAAM,IAAI,KAAK,CAAC,qBAAqB,CAAC,CAAC;IACzC,CAAC,EAAE,CAAC,YAAY,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAEtC,MAAM,EAAE,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACtB,MAAM,cAAc,GAAG,IAAA,wCAAsB,EAC3C,eAAe,EACf,iBAAiB,CAClB,CAAC;QACF,OAAO,IAAA,cAAM,EAAC,cAAc,CAAC,CAAC;IAChC,CAAC,EAAE,CAAC,eAAe,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAEzC,OAAO,CACL,CAAC,oBAAY,CAAC,QAAQ,CACpB,KAAK,CAAC,CAAC;YACL,EAAE;YACF,QAAQ,EAAE,eAAe;YACzB,KAAK,EAAE,YAAY;YACnB,WAAW,EAAE,kBAAkB;YAC/B,QAAQ,EAAE,eAAe;SAC1B,CAAC,CAEF;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,oBAAY,CAAC,QAAQ,CAAC,CACzB,CAAC;AACJ,CAAC,CAAC;AA7CW,QAAA,aAAa,iBA6CxB","sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function */\nimport React, { createContext, useState, useMemo } from 'react';\nimport { useColorScheme } from 'react-native';\nimport { create } from 'twrnc';\n\nimport { ColorSet, ColorScheme } from '../twrnc-settings';\nimport type { ThemeContextProps, ThemeProviderProps } from './Theme.types';\nimport { Theme } from './Theme.types';\nimport { generateTailwindConfig } from './Theme.utilities';\n\nexport const defaultThemeContextValue: ThemeContextProps = {\n  tw: create(generateTailwindConfig(ColorSet.Brand, ColorScheme.Light)),\n  colorSet: ColorSet.Brand,\n  theme: Theme.Light,\n  setColorSet: () => {},\n  setTheme: () => {},\n};\n\nexport const ThemeContext = createContext<ThemeContextProps>(\n  defaultThemeContextValue,\n);\n\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({\n  children,\n  colorSet = ColorSet.Brand,\n  theme = Theme.Default,\n}) => {\n  const [currentColorSet, setCurrentColorSet] = useState<ColorSet>(colorSet);\n  const [currentTheme, setCurrentTheme] = useState<Theme>(theme);\n  const systemColorScheme = useColorScheme(); // 'light' | 'dark' | null\n\n  const activeColorScheme: ColorScheme = useMemo(() => {\n    if (currentTheme === Theme.Default) {\n      return systemColorScheme === 'dark'\n        ? ColorScheme.Dark\n        : ColorScheme.Light;\n    }\n    if (currentTheme === Theme.Light) {\n      return ColorScheme.Light;\n    }\n    if (currentTheme === Theme.Dark) {\n      return ColorScheme.Dark;\n    }\n    throw new Error('Invalid theme value');\n  }, [currentTheme, systemColorScheme]);\n\n  const tw = useMemo(() => {\n    const tailwindConfig = generateTailwindConfig(\n      currentColorSet,\n      activeColorScheme,\n    );\n    return create(tailwindConfig);\n  }, [currentColorSet, activeColorScheme]);\n\n  return (\n    <ThemeContext.Provider\n      value={{\n        tw,\n        colorSet: currentColorSet,\n        theme: currentTheme,\n        setColorSet: setCurrentColorSet,\n        setTheme: setCurrentTheme,\n      }}\n    >\n      {children}\n    </ThemeContext.Provider>\n  );\n};\n"]}

package/dist/Theme/Theme.types.d.ts

@@ -0,0 +1,20 @@
+import type { create } from 'twrnc';
+import type { ColorSet } from '../twrnc-settings';
+export declare enum Theme {
+    Default = "default",
+    Light = "light",
+    Dark = "dark"
+}
+export type ThemeContextProps = {
+    tw: ReturnType<typeof create>;
+    colorSet: ColorSet;
+    theme: Theme;
+    setColorSet: (theme: ColorSet) => void;
+    setTheme: (scheme: Theme) => void;
+};
+export type ThemeProviderProps = {
+    children: React.ReactNode;
+    colorSet?: ColorSet;
+    theme?: Theme;
+};
+//# sourceMappingURL=Theme.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Theme.types.d.ts","sourceRoot":"","sources":["../../src/Theme/Theme.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAGpC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAElD,oBAAY,KAAK;IACf,OAAO,YAAY;IACnB,KAAK,UAAoB;IACzB,IAAI,SAAmB;CACxB;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;IAC9B,QAAQ,EAAE,QAAQ,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvC,QAAQ,EAAE,CAAC,MAAM,EAAE,KAAK,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CAAC"}

package/dist/Theme/Theme.types.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Theme = void 0;
+var Theme;
+(function (Theme) {
+    Theme["Default"] = "default";
+    Theme["Light"] = "light";
+    Theme["Dark"] = "dark";
+})(Theme || (exports.Theme = Theme = {}));
+//# sourceMappingURL=Theme.types.js.map

package/dist/Theme/Theme.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Theme.types.js","sourceRoot":"","sources":["../../src/Theme/Theme.types.ts"],"names":[],"mappings":";;;AAKA,IAAY,KAIX;AAJD,WAAY,KAAK;IACf,4BAAmB,CAAA;IACnB,wBAAyB,CAAA;IACzB,sBAAuB,CAAA;AACzB,CAAC,EAJW,KAAK,qBAAL,KAAK,QAIhB","sourcesContent":["import type { create } from 'twrnc';\n\nimport { ColorScheme } from '../twrnc-settings';\nimport type { ColorSet } from '../twrnc-settings';\n\nexport enum Theme {\n  Default = 'default',\n  Light = ColorScheme.Light,\n  Dark = ColorScheme.Dark,\n}\n\nexport type ThemeContextProps = {\n  tw: ReturnType<typeof create>;\n  colorSet: ColorSet;\n  theme: Theme;\n  setColorSet: (theme: ColorSet) => void;\n  setTheme: (scheme: Theme) => void;\n};\n\nexport type ThemeProviderProps = {\n  children: React.ReactNode;\n  colorSet?: ColorSet;\n  theme?: Theme;\n};\n"]}

package/dist/Theme/Theme.utilities.d.ts

@@ -0,0 +1,49 @@
+import type { ColorSet, ColorScheme } from '../twrnc-settings';
+/**
+ * Generates a Tailwind CSS configuration object based on the specified color set and color scheme.
+ * This configuration extends the base Tailwind settings with custom theme colors, typography settings,
+ * and other style properties for use in React Native with `twrnc`.
+ *
+ * @param colorSet - The color set to use (e.g., 'Brand', 'Neutral'). Determines the base palette for the theme.
+ * @param colorScheme - The current color scheme ('light' or 'dark'). Specifies whether to use light or dark mode styles.
+ * @returns A Tailwind CSS configuration object with extended theme properties and plugins.
+ * @example
+ * const colorSet = 'Brand';
+ * const colorScheme = 'dark';
+ *
+ * const tailwindConfig = generateTailwindConfig(colorSet, colorScheme);
+ * console.log(tailwindConfig);
+ *
+ * // Output:
+ * // {
+ * //   theme: {
+ * //     extend: {
+ * //       colors: {
+ * //         primary: '#1a202c',
+ * //         secondary: '#2d3748',
+ * //         // ...additional flattened colors
+ * //       },
+ * //       fontSize: {
+ * //         'display-md': [32, { lineHeight: '40', letterSpacing: '0', fontWeight: '700' }],
+ * //         // ...other font sizes
+ * //       },
+ * //       fontFamily: {
+ * //         sans: ['Euclid Circular B', 'Helvetica Neue', 'Arial', 'sans-serif'],
+ * //         // ...other font families
+ * //       },
+ * //       letterSpacing: {
+ * //         'display-md': '0',
+ * //         // ...other letter spacings
+ * //       },
+ * //       lineHeight: {
+ * //         'display-md': '40',
+ * //         // ...other line heights
+ * //       },
+ * //     },
+ * //   },
+ * //   plugins: [],
+ * // }
+ * @throws Will log an error and return an empty object if theme colors are not found for the specified color set and color scheme.
+ */
+export declare const generateTailwindConfig: (colorSet: ColorSet, colorScheme: ColorScheme) => {};
+//# sourceMappingURL=Theme.utilities.d.ts.map

package/dist/Theme/Theme.utilities.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Theme.utilities.d.ts","sourceRoot":"","sources":["../../src/Theme/Theme.utilities.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAG/D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,eAAO,MAAM,sBAAsB,aACvB,QAAQ,eACL,WAAW,OAmCzB,CAAC"}

package/dist/Theme/Theme.utilities.js

@@ -0,0 +1,90 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateTailwindConfig = void 0;
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const tailwind_config_1 = __importDefault(require("../../tailwind.config"));
+const twrnc_settings_1 = require("../twrnc-settings");
+/**
+ * Generates a Tailwind CSS configuration object based on the specified color set and color scheme.
+ * This configuration extends the base Tailwind settings with custom theme colors, typography settings,
+ * and other style properties for use in React Native with `twrnc`.
+ *
+ * @param colorSet - The color set to use (e.g., 'Brand', 'Neutral'). Determines the base palette for the theme.
+ * @param colorScheme - The current color scheme ('light' or 'dark'). Specifies whether to use light or dark mode styles.
+ * @returns A Tailwind CSS configuration object with extended theme properties and plugins.
+ * @example
+ * const colorSet = 'Brand';
+ * const colorScheme = 'dark';
+ *
+ * const tailwindConfig = generateTailwindConfig(colorSet, colorScheme);
+ * console.log(tailwindConfig);
+ *
+ * // Output:
+ * // {
+ * //   theme: {
+ * //     extend: {
+ * //       colors: {
+ * //         primary: '#1a202c',
+ * //         secondary: '#2d3748',
+ * //         // ...additional flattened colors
+ * //       },
+ * //       fontSize: {
+ * //         'display-md': [32, { lineHeight: '40', letterSpacing: '0', fontWeight: '700' }],
+ * //         // ...other font sizes
+ * //       },
+ * //       fontFamily: {
+ * //         sans: ['Euclid Circular B', 'Helvetica Neue', 'Arial', 'sans-serif'],
+ * //         // ...other font families
+ * //       },
+ * //       letterSpacing: {
+ * //         'display-md': '0',
+ * //         // ...other letter spacings
+ * //       },
+ * //       lineHeight: {
+ * //         'display-md': '40',
+ * //         // ...other line heights
+ * //       },
+ * //     },
+ * //   },
+ * //   plugins: [],
+ * // }
+ * @throws Will log an error and return an empty object if theme colors are not found for the specified color set and color scheme.
+ */
+const generateTailwindConfig = (colorSet, colorScheme) => {
+    const themeColors = twrnc_settings_1.colorSetList[colorSet][colorScheme];
+    if (!themeColors) {
+        console.error('Theme colors not found.');
+        return {};
+    }
+    return {
+        ...tailwind_config_1.default,
+        theme: {
+            ...tailwind_config_1.default.theme,
+            extend: {
+                ...tailwind_config_1.default.theme?.extend,
+                colors: {
+                    ...tailwind_config_1.default.theme?.extend?.colors,
+                    ...themeColors,
+                },
+                fontSize: {
+                    ...twrnc_settings_1.typographyTailwindConfig.fontSize,
+                },
+                fontFamily: {
+                    ...twrnc_settings_1.typographyTailwindConfig.fontFamily,
+                },
+                letterSpacing: {
+                    ...twrnc_settings_1.typographyTailwindConfig.letterSpacing,
+                },
+                lineHeight: {
+                    ...twrnc_settings_1.typographyTailwindConfig.lineHeight,
+                },
+            },
+        },
+        plugins: tailwind_config_1.default.plugins || [],
+    };
+};
+exports.generateTailwindConfig = generateTailwindConfig;
+//# sourceMappingURL=Theme.utilities.js.map

package/dist/Theme/Theme.utilities.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Theme.utilities.js","sourceRoot":"","sources":["../../src/Theme/Theme.utilities.ts"],"names":[],"mappings":";;;;;;AAAA,uDAAuD;AACvD,4EAA+C;AAE/C,sDAA2E;AAE3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACI,MAAM,sBAAsB,GAAG,CACpC,QAAkB,EAClB,WAAwB,EACxB,EAAE;IACF,MAAM,WAAW,GAAG,6BAAY,CAAC,QAAQ,CAAC,CAAC,WAAW,CAAC,CAAC;IAExD,IAAI,CAAC,WAAW,EAAE;QAChB,OAAO,CAAC,KAAK,CAAC,yBAAyB,CAAC,CAAC;QACzC,OAAO,EAAE,CAAC;KACX;IAED,OAAO;QACL,GAAG,yBAAU;QACb,KAAK,EAAE;YACL,GAAG,yBAAU,CAAC,KAAK;YACnB,MAAM,EAAE;gBACN,GAAG,yBAAU,CAAC,KAAK,EAAE,MAAM;gBAC3B,MAAM,EAAE;oBACN,GAAG,yBAAU,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM;oBACnC,GAAG,WAAW;iBACf;gBACD,QAAQ,EAAE;oBACR,GAAG,yCAAwB,CAAC,QAAQ;iBACrC;gBACD,UAAU,EAAE;oBACV,GAAG,yCAAwB,CAAC,UAAU;iBACvC;gBACD,aAAa,EAAE;oBACb,GAAG,yCAAwB,CAAC,aAAa;iBAC1C;gBACD,UAAU,EAAE;oBACV,GAAG,yCAAwB,CAAC,UAAU;iBACvC;aACF;SACF;QACD,OAAO,EAAE,yBAAU,CAAC,OAAO,IAAI,EAAE;KAClC,CAAC;AACJ,CAAC,CAAC;AArCW,QAAA,sBAAsB,0BAqCjC","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport baseConfig from '../../tailwind.config';\nimport type { ColorSet, ColorScheme } from '../twrnc-settings';\nimport { colorSetList, typographyTailwindConfig } from '../twrnc-settings';\n\n/**\n * Generates a Tailwind CSS configuration object based on the specified color set and color scheme.\n * This configuration extends the base Tailwind settings with custom theme colors, typography settings,\n * and other style properties for use in React Native with `twrnc`.\n *\n * @param colorSet - The color set to use (e.g., 'Brand', 'Neutral'). Determines the base palette for the theme.\n * @param colorScheme - The current color scheme ('light' or 'dark'). Specifies whether to use light or dark mode styles.\n * @returns A Tailwind CSS configuration object with extended theme properties and plugins.\n * @example\n * const colorSet = 'Brand';\n * const colorScheme = 'dark';\n *\n * const tailwindConfig = generateTailwindConfig(colorSet, colorScheme);\n * console.log(tailwindConfig);\n *\n * // Output:\n * // {\n * //   theme: {\n * //     extend: {\n * //       colors: {\n * //         primary: '#1a202c',\n * //         secondary: '#2d3748',\n * //         // ...additional flattened colors\n * //       },\n * //       fontSize: {\n * //         'display-md': [32, { lineHeight: '40', letterSpacing: '0', fontWeight: '700' }],\n * //         // ...other font sizes\n * //       },\n * //       fontFamily: {\n * //         sans: ['Euclid Circular B', 'Helvetica Neue', 'Arial', 'sans-serif'],\n * //         // ...other font families\n * //       },\n * //       letterSpacing: {\n * //         'display-md': '0',\n * //         // ...other letter spacings\n * //       },\n * //       lineHeight: {\n * //         'display-md': '40',\n * //         // ...other line heights\n * //       },\n * //     },\n * //   },\n * //   plugins: [],\n * // }\n * @throws Will log an error and return an empty object if theme colors are not found for the specified color set and color scheme.\n */\nexport const generateTailwindConfig = (\n  colorSet: ColorSet,\n  colorScheme: ColorScheme,\n) => {\n  const themeColors = colorSetList[colorSet][colorScheme];\n\n  if (!themeColors) {\n    console.error('Theme colors not found.');\n    return {};\n  }\n\n  return {\n    ...baseConfig,\n    theme: {\n      ...baseConfig.theme,\n      extend: {\n        ...baseConfig.theme?.extend,\n        colors: {\n          ...baseConfig.theme?.extend?.colors,\n          ...themeColors,\n        },\n        fontSize: {\n          ...typographyTailwindConfig.fontSize,\n        },\n        fontFamily: {\n          ...typographyTailwindConfig.fontFamily,\n        },\n        letterSpacing: {\n          ...typographyTailwindConfig.letterSpacing,\n        },\n        lineHeight: {\n          ...typographyTailwindConfig.lineHeight,\n        },\n      },\n    },\n    plugins: baseConfig.plugins || [],\n  };\n};\n"]}

package/dist/Theme/index.d.ts

@@ -0,0 +1,5 @@
+export { useTailwind } from './Theme.hooks';
+export { ThemeContext, ThemeProvider, defaultThemeContextValue, } from './Theme.providers';
+export { Theme } from './Theme.types';
+export type { ThemeContextProps, ThemeProviderProps } from './Theme.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/Theme/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EACL,YAAY,EACZ,aAAa,EACb,wBAAwB,GACzB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,YAAY,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC"}

package/dist/Theme/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Theme = exports.defaultThemeContextValue = exports.ThemeProvider = exports.ThemeContext = exports.useTailwind = void 0;
+var Theme_hooks_1 = require("./Theme.hooks");
+Object.defineProperty(exports, "useTailwind", { enumerable: true, get: function () { return Theme_hooks_1.useTailwind; } });
+var Theme_providers_1 = require("./Theme.providers");
+Object.defineProperty(exports, "ThemeContext", { enumerable: true, get: function () { return Theme_providers_1.ThemeContext; } });
+Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: function () { return Theme_providers_1.ThemeProvider; } });
+Object.defineProperty(exports, "defaultThemeContextValue", { enumerable: true, get: function () { return Theme_providers_1.defaultThemeContextValue; } });
+var Theme_types_1 = require("./Theme.types");
+Object.defineProperty(exports, "Theme", { enumerable: true, get: function () { return Theme_types_1.Theme; } });
+//# sourceMappingURL=index.js.map

package/dist/Theme/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Theme/index.ts"],"names":[],"mappings":";;;AAAA,6CAA4C;AAAnC,0GAAA,WAAW,OAAA;AACpB,qDAI2B;AAHzB,+GAAA,YAAY,OAAA;AACZ,gHAAA,aAAa,OAAA;AACb,2HAAA,wBAAwB,OAAA;AAE1B,6CAAsC;AAA7B,oGAAA,KAAK,OAAA","sourcesContent":["export { useTailwind } from './Theme.hooks';\nexport {\n  ThemeContext,\n  ThemeProvider,\n  defaultThemeContextValue,\n} from './Theme.providers';\nexport { Theme } from './Theme.types';\nexport type { ThemeContextProps, ThemeProviderProps } from './Theme.types';\n"]}

package/dist/hocs/index.d.ts

@@ -0,0 +1,2 @@
+export { withThemeProvider } from './withThemeProvider';
+//# sourceMappingURL=index.d.ts.map

package/dist/hocs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hocs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/hocs/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withThemeProvider = void 0;
+var withThemeProvider_1 = require("./withThemeProvider");
+Object.defineProperty(exports, "withThemeProvider", { enumerable: true, get: function () { return withThemeProvider_1.withThemeProvider; } });
+//# sourceMappingURL=index.js.map

package/dist/hocs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hocs/index.ts"],"names":[],"mappings":";;;AAAA,yDAAwD;AAA/C,sHAAA,iBAAiB,OAAA","sourcesContent":["export { withThemeProvider } from './withThemeProvider';\n"]}

package/dist/hocs/withThemeProvider.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * HOC to wrap components with ThemeProvider if none is present.
+ * @param Component - The component to wrap with ThemeProvider.
+ */
+export declare function withThemeProvider<Props extends object>(Component: React.ComponentType<Props>): React.ForwardRefExoticComponent<React.PropsWithoutRef<Props> & React.RefAttributes<any>>;
+//# sourceMappingURL=withThemeProvider.d.ts.map

package/dist/hocs/withThemeProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"withThemeProvider.d.ts","sourceRoot":"","sources":["../../src/hocs/withThemeProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAiC,MAAM,OAAO,CAAC;AAUtD;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,SAAS,MAAM,EACpD,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,4FAoBtC"}

package/dist/hocs/withThemeProvider.js

@@ -0,0 +1,53 @@
+"use strict";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable jsdoc/require-returns */
+// src/hocs/withThemeProvider.tsx
+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.withThemeProvider = void 0;
+const react_1 = __importStar(require("react"));
+const Theme_1 = require("../Theme");
+const twrnc_settings_1 = require("../twrnc-settings");
+/**
+ * HOC to wrap components with ThemeProvider if none is present.
+ * @param Component - The component to wrap with ThemeProvider.
+ */
+function withThemeProvider(Component) {
+    const WrappedComponent = (0, react_1.forwardRef)((props, ref) => {
+        // Check if a ThemeProvider is already present
+        const themeContext = (0, react_1.useContext)(Theme_1.ThemeContext);
+        // If ThemeProvider exists, use the component as is
+        if (themeContext !== Theme_1.defaultThemeContextValue) {
+            return <Component {...props} ref={ref}/>;
+        }
+        // Otherwise, wrap with ThemeProvider
+        return (<Theme_1.ThemeProvider colorSet={twrnc_settings_1.ColorSet.Brand} theme={Theme_1.Theme.Default}>
+        <Component {...props} ref={ref}/>
+      </Theme_1.ThemeProvider>);
+    });
+    return WrappedComponent;
+}
+exports.withThemeProvider = withThemeProvider;
+//# sourceMappingURL=withThemeProvider.js.map

package/dist/hocs/withThemeProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"withThemeProvider.js","sourceRoot":"","sources":["../../src/hocs/withThemeProvider.tsx"],"names":[],"mappings":";AAAA,uDAAuD;AACvD,0CAA0C;AAC1C,iCAAiC;;;;;;;;;;;;;;;;;;;;;;;;;;AAEjC,+CAAsD;AAEtD,oCAKkB;AAClB,sDAA6C;AAE7C;;;GAGG;AACH,SAAgB,iBAAiB,CAC/B,SAAqC;IAErC,MAAM,gBAAgB,GAAG,IAAA,kBAAU,EAAa,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;QAC7D,8CAA8C;QAC9C,MAAM,YAAY,GAAG,IAAA,kBAAU,EAAC,oBAAY,CAAC,CAAC;QAE9C,mDAAmD;QACnD,IAAI,YAAY,KAAK,gCAAwB,EAAE;YAC7C,OAAO,CAAC,SAAS,CAAC,IAAK,KAAe,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAG,CAAC;SACtD;QAED,qCAAqC;QACrC,OAAO,CACL,CAAC,qBAAa,CAAC,QAAQ,CAAC,CAAC,yBAAQ,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,aAAK,CAAC,OAAO,CAAC,CAC5D;QAAA,CAAC,SAAS,CAAC,IAAK,KAAe,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAC5C;MAAA,EAAE,qBAAa,CAAC,CACjB,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,OAAO,gBAAgB,CAAC;AAC1B,CAAC;AArBD,8CAqBC","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable jsdoc/require-returns */\n// src/hocs/withThemeProvider.tsx\n\nimport React, { forwardRef, useContext } from 'react';\n\nimport {\n  ThemeProvider,\n  ThemeContext,\n  Theme,\n  defaultThemeContextValue,\n} from '../Theme';\nimport { ColorSet } from '../twrnc-settings';\n\n/**\n * HOC to wrap components with ThemeProvider if none is present.\n * @param Component - The component to wrap with ThemeProvider.\n */\nexport function withThemeProvider<Props extends object>(\n  Component: React.ComponentType<Props>,\n) {\n  const WrappedComponent = forwardRef<any, Props>((props, ref) => {\n    // Check if a ThemeProvider is already present\n    const themeContext = useContext(ThemeContext);\n\n    // If ThemeProvider exists, use the component as is\n    if (themeContext !== defaultThemeContextValue) {\n      return <Component {...(props as Props)} ref={ref} />;\n    }\n\n    // Otherwise, wrap with ThemeProvider\n    return (\n      <ThemeProvider colorSet={ColorSet.Brand} theme={Theme.Default}>\n        <Component {...(props as Props)} ref={ref} />\n      </ThemeProvider>\n    );\n  });\n\n  return WrappedComponent;\n}\n"]}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export type { ThemeContextProps, ThemeProviderProps } from './Theme';
+export { useTailwind, ThemeContext, ThemeProvider, Theme } from './Theme';
+export { ColorSet } from './twrnc-settings';
+export { withThemeProvider } from './hocs';
+//# 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":"AAAA,YAAY,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAE1E,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC"}

package/dist/index.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withThemeProvider = exports.ColorSet = exports.Theme = exports.ThemeProvider = exports.ThemeContext = exports.useTailwind = void 0;
+var Theme_1 = require("./Theme");
+Object.defineProperty(exports, "useTailwind", { enumerable: true, get: function () { return Theme_1.useTailwind; } });
+Object.defineProperty(exports, "ThemeContext", { enumerable: true, get: function () { return Theme_1.ThemeContext; } });
+Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: function () { return Theme_1.ThemeProvider; } });
+Object.defineProperty(exports, "Theme", { enumerable: true, get: function () { return Theme_1.Theme; } });
+var twrnc_settings_1 = require("./twrnc-settings");
+Object.defineProperty(exports, "ColorSet", { enumerable: true, get: function () { return twrnc_settings_1.ColorSet; } });
+var hocs_1 = require("./hocs");
+Object.defineProperty(exports, "withThemeProvider", { enumerable: true, get: function () { return hocs_1.withThemeProvider; } });
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AACA,iCAA0E;AAAjE,oGAAA,WAAW,OAAA;AAAE,qGAAA,YAAY,OAAA;AAAE,sGAAA,aAAa,OAAA;AAAE,8FAAA,KAAK,OAAA;AAExD,mDAA4C;AAAnC,0GAAA,QAAQ,OAAA;AAEjB,+BAA2C;AAAlC,yGAAA,iBAAiB,OAAA","sourcesContent":["export type { ThemeContextProps, ThemeProviderProps } from './Theme';\nexport { useTailwind, ThemeContext, ThemeProvider, Theme } from './Theme';\n\nexport { ColorSet } from './twrnc-settings';\n\nexport { withThemeProvider } from './hocs';\n"]}

package/dist/twrnc-settings/colors.d.ts

@@ -0,0 +1,3 @@
+import type { ColorSetListProps } from './colors.types';
+export declare const colorSetList: ColorSetListProps;
+//# sourceMappingURL=colors.d.ts.map

package/dist/twrnc-settings/colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/twrnc-settings/colors.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAIxD,eAAO,MAAM,YAAY,EAAE,iBAK1B,CAAC"}

package/dist/twrnc-settings/colors.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.colorSetList = void 0;
+const design_tokens_1 = require("@metamask-previews/design-tokens");
+const colors_types_1 = require("./colors.types");
+const colors_utilities_1 = require("./colors.utilities");
+exports.colorSetList = {
+    [colors_types_1.ColorSet.Brand]: {
+        [colors_types_1.ColorScheme.Light]: (0, colors_utilities_1.flattenColors)(design_tokens_1.lightTheme.colors),
+        [colors_types_1.ColorScheme.Dark]: (0, colors_utilities_1.flattenColors)(design_tokens_1.darkTheme.colors),
+    },
+};
+//# sourceMappingURL=colors.js.map

package/dist/twrnc-settings/colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../src/twrnc-settings/colors.ts"],"names":[],"mappings":";;;AAAA,oEAAyE;AAGzE,iDAAuD;AACvD,yDAAmD;AAEtC,QAAA,YAAY,GAAsB;IAC7C,CAAC,uBAAQ,CAAC,KAAK,CAAC,EAAE;QAChB,CAAC,0BAAW,CAAC,KAAK,CAAC,EAAE,IAAA,gCAAa,EAAC,0BAAU,CAAC,MAAM,CAAC;QACrD,CAAC,0BAAW,CAAC,IAAI,CAAC,EAAE,IAAA,gCAAa,EAAC,yBAAS,CAAC,MAAM,CAAC;KACpD;CACF,CAAC","sourcesContent":["import { lightTheme, darkTheme } from '@metamask-previews/design-tokens';\n\nimport type { ColorSetListProps } from './colors.types';\nimport { ColorSet, ColorScheme } from './colors.types';\nimport { flattenColors } from './colors.utilities';\n\nexport const colorSetList: ColorSetListProps = {\n  [ColorSet.Brand]: {\n    [ColorScheme.Light]: flattenColors(lightTheme.colors),\n    [ColorScheme.Dark]: flattenColors(darkTheme.colors),\n  },\n};\n"]}

package/dist/twrnc-settings/colors.types.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Enum for different color set options.
+ */
+export declare enum ColorSet {
+    Brand = "brand"
+}
+/**
+ * Enum for different color scheme options.
+ */
+export declare enum ColorScheme {
+    Light = "light",
+    Dark = "dark"
+}
+/**
+ * Props for ColorSet. Each color set - color scheme should contain
+ * an object with twrnc-className string as key and color string as value.
+ * @example
+ * // {
+ * //   'primary-default': '#abc',
+ * //   'primary-alternative ': '#123',
+ * //   'secondary': '#456'
+ * // }
+ */
+export type ColorSetListProps = {
+    brand: {
+        [ColorScheme.Light]: Record<string, string>;
+        [ColorScheme.Dark]: Record<string, string>;
+    };
+};
+//# sourceMappingURL=colors.types.d.ts.map

package/dist/twrnc-settings/colors.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.types.d.ts","sourceRoot":"","sources":["../../src/twrnc-settings/colors.types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,oBAAY,QAAQ;IAClB,KAAK,UAAU;CAChB;AAED;;GAEG;AACH,oBAAY,WAAW;IACrB,KAAK,UAAU;IACf,IAAI,SAAS;CACd;AAED;;;;;;;;;GASG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE;QACL,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAC5C,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;KAC5C,CAAC;CACH,CAAC"}

package/dist/twrnc-settings/colors.types.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorScheme = exports.ColorSet = void 0;
+/**
+ * Enum for different color set options.
+ */
+var ColorSet;
+(function (ColorSet) {
+    ColorSet["Brand"] = "brand";
+})(ColorSet || (exports.ColorSet = ColorSet = {}));
+/**
+ * Enum for different color scheme options.
+ */
+var ColorScheme;
+(function (ColorScheme) {
+    ColorScheme["Light"] = "light";
+    ColorScheme["Dark"] = "dark";
+})(ColorScheme || (exports.ColorScheme = ColorScheme = {}));
+//# sourceMappingURL=colors.types.js.map

package/dist/twrnc-settings/colors.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.types.js","sourceRoot":"","sources":["../../src/twrnc-settings/colors.types.ts"],"names":[],"mappings":";;;AAAA;;GAEG;AACH,IAAY,QAEX;AAFD,WAAY,QAAQ;IAClB,2BAAe,CAAA;AACjB,CAAC,EAFW,QAAQ,wBAAR,QAAQ,QAEnB;AAED;;GAEG;AACH,IAAY,WAGX;AAHD,WAAY,WAAW;IACrB,8BAAe,CAAA;IACf,4BAAa,CAAA;AACf,CAAC,EAHW,WAAW,2BAAX,WAAW,QAGtB","sourcesContent":["/**\n * Enum for different color set options.\n */\nexport enum ColorSet {\n  Brand = 'brand',\n}\n\n/**\n * Enum for different color scheme options.\n */\nexport enum ColorScheme {\n  Light = 'light',\n  Dark = 'dark',\n}\n\n/**\n * Props for ColorSet. Each color set - color scheme should contain\n * an object with twrnc-className string as key and color string as value.\n * @example\n * // {\n * //   'primary-default': '#abc',\n * //   'primary-alternative ': '#123',\n * //   'secondary': '#456'\n * // }\n */\nexport type ColorSetListProps = {\n  brand: {\n    [ColorScheme.Light]: Record<string, string>;\n    [ColorScheme.Dark]: Record<string, string>;\n  };\n};\n"]}