aport-tools 1.0.1 → 1.0.2

package/.babelrc

@@ -0,0 +1,8 @@
+{
+    "presets": [
+      "@babel/preset-env",
+      "@babel/preset-react",
+      "@babel/preset-typescript"
+    ]
+  }
+  

package/.expo/README.md

@@ -0,0 +1,15 @@
+> Why do I have a folder named ".expo" in my project?
+
+The ".expo" folder is created when an Expo project is started using "expo start" command.
+
+> What do the files contain?
+
+- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
+- "packager-info.json": contains port numbers and process PIDs that are used to serve the application to the mobile device/simulator.
+- "settings.json": contains the server configuration that is used to serve the application manifest.
+
+> Should I commit the ".expo" folder?
+
+No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
+
+Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

package/.expo/devices.json

@@ -0,0 +1,3 @@
+{
+  "devices": []
+}

package/.expo/settings.json

@@ -0,0 +1,8 @@
+{
+  "hostType": "lan",
+  "lanType": "ip",
+  "dev": true,
+  "minify": false,
+  "urlRandomness": null,
+  "https": false
+}

package/App.tsx

@@ -0,0 +1,41 @@
+// src/App.tsx
+
+import React from 'react';
+import { SafeAreaView, StatusBar, Text, StyleSheet, AppRegistry } from 'react-native';
+import { ThemeProvider, ThemeContext } from './src/Theme/ThemeContext';
+import ThemeToggle from './src/Theme/ThemeToggle'; // Import ThemeToggle
+import { name as appName } from './app.json'; // Ensure this path is correct
+
+const App: React.FC = () => {
+  return (
+    <ThemeProvider>
+      <ThemeContext.Consumer>
+        {({ theme }) => (
+          <SafeAreaView style={[styles.container, { backgroundColor: theme.colors.background.hex }]}>
+            <StatusBar barStyle={theme.colors.text.hex === '#FFFFFF' ? 'light-content' : 'dark-content'} />
+            <Text style={[styles.text, { color: theme.colors.text.hex }]}>
+              Current Theme: {theme.colors.primary.hex === '#1A73E8' ? 'Light' : 'Dark'}
+            </Text>
+            <ThemeToggle />
+          </SafeAreaView>
+        )}
+      </ThemeContext.Consumer>
+    </ThemeProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 20,
+  },
+  text: {
+    fontSize: 24,
+    marginBottom: 20,
+  },
+});
+
+
+export default App;

package/dist/Button.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface ButtonProps {
+    disabled?: boolean;
+    isFullWidth?: boolean;
+    children?: string;
+    onPress?: () => void;
+    rounded?: boolean;
+    borderRadius?: number;
+    type?: 'submit' | 'button' | 'cancel';
+}
+declare const Button: React.FC<ButtonProps>;
+export default Button;

package/dist/Theme/ThemeContext.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode } from 'react';
+import { Theme } from '../styles/theme';
+interface ThemeContextProps {
+    theme: Theme;
+    toggleTheme: () => void;
+}
+export declare const ThemeContext: React.Context<ThemeContextProps>;
+interface ThemeProviderProps {
+    children: ReactNode;
+    initialTheme?: 'light' | 'dark';
+}
+export declare const ThemeProvider: React.FC<ThemeProviderProps>;
+export {};

package/dist/Theme/ThemeToggle.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ThemeToggle: React.FC;
+export default ThemeToggle;

package/dist/Theme/index.d.ts

@@ -0,0 +1,2 @@
+export { ThemeProvider, ThemeContext } from './ThemeContext';
+export { default as ThemeToggle } from './ThemeToggle';

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './Theme';

package/dist/index.es.js

@@ -0,0 +1,257 @@
+/*! aport-tools v1.0.2 | ISC */
+import React, { createContext, useState, useEffect, useContext } from 'react';
+import { Appearance, StyleSheet, View, Text, Switch } from 'react-native';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+function __generator(thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+// src/styles/colors.ts
+var lightTheme = {
+  primary: {
+    hex: '#1A73E8',
+    rgb: {
+      r: 26,
+      g: 115,
+      b: 232
+    }
+  },
+  secondary: {
+    hex: '#F0F6FF',
+    rgb: {
+      r: 240,
+      g: 246,
+      b: 255
+    }
+  },
+  background: {
+    hex: '#FFFFFF',
+    rgb: {
+      r: 255,
+      g: 255,
+      b: 255
+    }
+  },
+  text: {
+    hex: '#000000',
+    rgb: {
+      r: 0,
+      g: 0,
+      b: 0
+    }
+  }
+  // Add more categories as needed
+};
+var darkTheme = {
+  primary: {
+    hex: '#BB86FC',
+    rgb: {
+      r: 187,
+      g: 134,
+      b: 252
+    }
+  },
+  secondary: {
+    hex: '#03DAC6',
+    rgb: {
+      r: 3,
+      g: 218,
+      b: 198
+    }
+  },
+  background: {
+    hex: '#121212',
+    rgb: {
+      r: 18,
+      g: 18,
+      b: 18
+    }
+  },
+  text: {
+    hex: '#FFFFFF',
+    rgb: {
+      r: 255,
+      g: 255,
+      b: 255
+    }
+  }
+  // Add more categories as needed
+};
+
+var ThemeContext = /*#__PURE__*/createContext({
+  theme: {
+    colors: lightTheme
+  },
+  toggleTheme: function toggleTheme() {}
+});
+var ThemeProvider = function ThemeProvider(_a) {
+  var children = _a.children,
+    initialTheme = _a.initialTheme;
+  var _b = useState(null),
+    colorScheme = _b[0],
+    setColorScheme = _b[1];
+  useEffect(function () {
+    var loadTheme = function loadTheme() {
+      return __awaiter(void 0, void 0, void 0, function () {
+        var storedTheme, systemTheme, error_1;
+        return __generator(this, function (_a) {
+          switch (_a.label) {
+            case 0:
+              _a.trys.push([0, 2,, 3]);
+              return [4 /*yield*/, AsyncStorage.getItem('theme')];
+            case 1:
+              storedTheme = _a.sent();
+              if (storedTheme === 'dark' || storedTheme === 'light') {
+                setColorScheme(storedTheme);
+              } else if (initialTheme) {
+                setColorScheme(initialTheme); // Use initialTheme if provided
+              } else {
+                systemTheme = Appearance.getColorScheme();
+                setColorScheme(systemTheme);
+              }
+              return [3 /*break*/, 3];
+            case 2:
+              error_1 = _a.sent();
+              console.error('Failed to load theme.', error_1);
+              setColorScheme(Appearance.getColorScheme());
+              return [3 /*break*/, 3];
+            case 3:
+              return [2 /*return*/];
+          }
+        });
+      });
+    };
+    loadTheme();
+    var subscription = Appearance.addChangeListener(function (_a) {
+      var colorScheme = _a.colorScheme;
+      setColorScheme(colorScheme);
+    });
+    return function () {
+      return subscription.remove();
+    };
+  }, [initialTheme]);
+  var toggleTheme = function toggleTheme() {
+    return __awaiter(void 0, void 0, void 0, function () {
+      var newTheme, error_2;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            _a.trys.push([0, 2,, 3]);
+            newTheme = colorScheme === 'dark' ? 'light' : 'dark';
+            setColorScheme(newTheme);
+            return [4 /*yield*/, AsyncStorage.setItem('theme', newTheme)];
+          case 1:
+            _a.sent();
+            return [3 /*break*/, 3];
+          case 2:
+            error_2 = _a.sent();
+            console.error('Failed to toggle theme.', error_2);
+            return [3 /*break*/, 3];
+          case 3:
+            return [2 /*return*/];
+        }
+      });
+    });
+  };
+  var theme = {
+    colors: colorScheme === 'dark' ? darkTheme : lightTheme
+  };
+  return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+    value: {
+      theme: theme,
+      toggleTheme: toggleTheme
+    }
+  }, children);
+};
+
+var ThemeToggle = function ThemeToggle() {
+  var _a = useContext(ThemeContext),
+    theme = _a.theme,
+    toggleTheme = _a.toggleTheme;
+  var isDarkMode = theme.colors === darkTheme;
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.container
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [styles.text, {
+      color: theme.colors.text.hex
+    }]
+  }, "Dark Mode"), /*#__PURE__*/React.createElement(Switch, {
+    value: isDarkMode,
+    onValueChange: toggleTheme,
+    trackColor: {
+      "false": lightTheme.secondary.hex,
+      "true": darkTheme.primary.hex
+    },
+    thumbColor: isDarkMode ? darkTheme.secondary.hex : lightTheme.primary.hex
+  }));
+};
+var styles = StyleSheet.create({
+  container: {
+    marginTop: 20,
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  text: {
+    marginRight: 10,
+    fontSize: 16
+  }
+});
+
+export { ThemeContext, ThemeProvider, ThemeToggle };

package/dist/index.js

@@ -0,0 +1,261 @@
+/*! aport-tools v1.0.2 | ISC */
+'use strict';
+
+var React = require('react');
+var reactNative = require('react-native');
+var AsyncStorage = require('@react-native-async-storage/async-storage');
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+function __generator(thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+// src/styles/colors.ts
+var lightTheme = {
+  primary: {
+    hex: '#1A73E8',
+    rgb: {
+      r: 26,
+      g: 115,
+      b: 232
+    }
+  },
+  secondary: {
+    hex: '#F0F6FF',
+    rgb: {
+      r: 240,
+      g: 246,
+      b: 255
+    }
+  },
+  background: {
+    hex: '#FFFFFF',
+    rgb: {
+      r: 255,
+      g: 255,
+      b: 255
+    }
+  },
+  text: {
+    hex: '#000000',
+    rgb: {
+      r: 0,
+      g: 0,
+      b: 0
+    }
+  }
+  // Add more categories as needed
+};
+var darkTheme = {
+  primary: {
+    hex: '#BB86FC',
+    rgb: {
+      r: 187,
+      g: 134,
+      b: 252
+    }
+  },
+  secondary: {
+    hex: '#03DAC6',
+    rgb: {
+      r: 3,
+      g: 218,
+      b: 198
+    }
+  },
+  background: {
+    hex: '#121212',
+    rgb: {
+      r: 18,
+      g: 18,
+      b: 18
+    }
+  },
+  text: {
+    hex: '#FFFFFF',
+    rgb: {
+      r: 255,
+      g: 255,
+      b: 255
+    }
+  }
+  // Add more categories as needed
+};
+
+var ThemeContext = /*#__PURE__*/React.createContext({
+  theme: {
+    colors: lightTheme
+  },
+  toggleTheme: function toggleTheme() {}
+});
+var ThemeProvider = function ThemeProvider(_a) {
+  var children = _a.children,
+    initialTheme = _a.initialTheme;
+  var _b = React.useState(null),
+    colorScheme = _b[0],
+    setColorScheme = _b[1];
+  React.useEffect(function () {
+    var loadTheme = function loadTheme() {
+      return __awaiter(void 0, void 0, void 0, function () {
+        var storedTheme, systemTheme, error_1;
+        return __generator(this, function (_a) {
+          switch (_a.label) {
+            case 0:
+              _a.trys.push([0, 2,, 3]);
+              return [4 /*yield*/, AsyncStorage.getItem('theme')];
+            case 1:
+              storedTheme = _a.sent();
+              if (storedTheme === 'dark' || storedTheme === 'light') {
+                setColorScheme(storedTheme);
+              } else if (initialTheme) {
+                setColorScheme(initialTheme); // Use initialTheme if provided
+              } else {
+                systemTheme = reactNative.Appearance.getColorScheme();
+                setColorScheme(systemTheme);
+              }
+              return [3 /*break*/, 3];
+            case 2:
+              error_1 = _a.sent();
+              console.error('Failed to load theme.', error_1);
+              setColorScheme(reactNative.Appearance.getColorScheme());
+              return [3 /*break*/, 3];
+            case 3:
+              return [2 /*return*/];
+          }
+        });
+      });
+    };
+    loadTheme();
+    var subscription = reactNative.Appearance.addChangeListener(function (_a) {
+      var colorScheme = _a.colorScheme;
+      setColorScheme(colorScheme);
+    });
+    return function () {
+      return subscription.remove();
+    };
+  }, [initialTheme]);
+  var toggleTheme = function toggleTheme() {
+    return __awaiter(void 0, void 0, void 0, function () {
+      var newTheme, error_2;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            _a.trys.push([0, 2,, 3]);
+            newTheme = colorScheme === 'dark' ? 'light' : 'dark';
+            setColorScheme(newTheme);
+            return [4 /*yield*/, AsyncStorage.setItem('theme', newTheme)];
+          case 1:
+            _a.sent();
+            return [3 /*break*/, 3];
+          case 2:
+            error_2 = _a.sent();
+            console.error('Failed to toggle theme.', error_2);
+            return [3 /*break*/, 3];
+          case 3:
+            return [2 /*return*/];
+        }
+      });
+    });
+  };
+  var theme = {
+    colors: colorScheme === 'dark' ? darkTheme : lightTheme
+  };
+  return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+    value: {
+      theme: theme,
+      toggleTheme: toggleTheme
+    }
+  }, children);
+};
+
+var ThemeToggle = function ThemeToggle() {
+  var _a = React.useContext(ThemeContext),
+    theme = _a.theme,
+    toggleTheme = _a.toggleTheme;
+  var isDarkMode = theme.colors === darkTheme;
+  return /*#__PURE__*/React.createElement(reactNative.View, {
+    style: styles.container
+  }, /*#__PURE__*/React.createElement(reactNative.Text, {
+    style: [styles.text, {
+      color: theme.colors.text.hex
+    }]
+  }, "Dark Mode"), /*#__PURE__*/React.createElement(reactNative.Switch, {
+    value: isDarkMode,
+    onValueChange: toggleTheme,
+    trackColor: {
+      "false": lightTheme.secondary.hex,
+      "true": darkTheme.primary.hex
+    },
+    thumbColor: isDarkMode ? darkTheme.secondary.hex : lightTheme.primary.hex
+  }));
+};
+var styles = reactNative.StyleSheet.create({
+  container: {
+    marginTop: 20,
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  text: {
+    marginRight: 10,
+    fontSize: 16
+  }
+});
+
+exports.ThemeContext = ThemeContext;
+exports.ThemeProvider = ThemeProvider;
+exports.ThemeToggle = ThemeToggle;

package/dist/styles/colors.d.ts

@@ -0,0 +1,17 @@
+export interface RGB {
+    r: number;
+    g: number;
+    b: number;
+}
+export interface Color {
+    hex: string;
+    rgb: RGB;
+}
+export interface ThemeColors {
+    primary: Color;
+    secondary: Color;
+    background: Color;
+    text: Color;
+}
+export declare const lightTheme: ThemeColors;
+export declare const darkTheme: ThemeColors;

package/dist/styles/theme.d.ts

@@ -0,0 +1,4 @@
+import { ThemeColors } from './colors';
+export interface Theme {
+    colors: ThemeColors;
+}

package/index.ts

@@ -0,0 +1 @@
+export { default as ButtonComponent } from "./src/Button";

package/package.json

@@ -1,16 +1,36 @@
 {
   "name": "aport-tools",
-  "version": "1.0.1",
-  "description": "",
-
+  "version": "1.0.2",
+  "description": "Aport mobile Tools with modern and minimalistic design",
+  "main": "dist/index.js",
+  "type": "module",
+  "react-native": "dist/index.js",
+  "source": "src/index.ts",
+  "types": "dist/index.d.ts",
   "scripts": {
+   "build": "rollup -c rollup.config.mjs",
+    "prepare": "npm run build",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "keywords": [],
+  "keywords": [
+    "react-native",
+    "theme",
+    "provider",
+    "context",
+    "toggle",
+    "mobile",
+    "tools"
+  ],
   "author": "EvansGxz",
   "license": "ISC",
   "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.4",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-typescript": "^7.24.7",
+    "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.0",
+    "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-typescript": "^12.1.0",
     "@types/react": "^18.3.10",
@@ -20,11 +40,10 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "typescript": "^5.6.2"
   },
-  "dependencies": {
+  "peerDependencies": {
     "@react-native-async-storage/async-storage": "^2.0.0",
-    "expo": "^51.0.34",
-    "react": "^18.3.1",
-    "react-native": "^0.75.3",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-native": ">=0.60",
     "styled-components": "^6.1.13"
   }
 }

package/rollup.config.mjs

@@ -0,0 +1,55 @@
+// rollup.config.js
+
+import babel from '@rollup/plugin-babel';
+import typescript from '@rollup/plugin-typescript';
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import pkg from './package.json' assert { type: 'json' };
+
+export default {
+  input: 'src/index.ts', // Entry point
+  output: [
+    {
+      file: 'dist/index.js',
+      format: 'cjs',
+      name: pkg.name, // Use package name
+      banner: `/*! ${pkg.name} v${pkg.version} | ${pkg.license} */`, // Add banner comment with package info
+    },
+    {
+      file: 'dist/index.es.js',
+      format: 'es',
+      name: pkg.name,
+      banner: `/*! ${pkg.name} v${pkg.version} | ${pkg.license} */`,
+    },
+  ],
+  plugins: [
+    peerDepsExternal(),
+    resolve({
+      extensions: ['.js', '.jsx', '.ts', '.tsx'],
+    }),
+    commonjs(),
+    babel({
+      extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      include: ['src/**/*'],
+      babelHelpers: 'bundled',
+      presets: [
+        '@babel/preset-env',
+        '@babel/preset-react',
+        '@babel/preset-typescript',
+      ],
+    }),
+    typescript({
+      tsconfig: './tsconfig.json',
+      declaration: true,
+      declarationDir: 'dist',
+      emitDeclarationOnly: false, // Set to true if you want TypeScript to only emit declarations and let Babel handle the JS transpilation
+    }),
+  ],
+  external: [
+    'react',
+    'react-native',
+    '@react-native-async-storage/async-storage',
+    'styled-components',
+  ], // Dependencies not to bundle
+};

package/rollup.config.js

@@ -1,31 +0,0 @@
-// rollup.config.js
-
-import typescript from '@rollup/plugin-typescript';
-import resolve from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
-import peerDepsExternal from 'rollup-plugin-peer-deps-external';
-
-export default {
-  input: 'src/index.ts', // Entry point of your library
-  output: [
-    {
-      file: 'dist/index.js', // CommonJS format
-      format: 'cjs',
-      sourcemap: true,
-    },
-    {
-      file: 'dist/index.es.js', // ES Module format
-      format: 'esm',
-      sourcemap: true,
-    },
-  ],
-  plugins: [
-    peerDepsExternal(), // Automatically externalize peer dependencies
-    resolve({
-      extensions: ['.js', '.jsx', '.ts', '.tsx'],
-    }), // So Rollup can find node_modules
-    commonjs(), // So Rollup can convert commonjs to ES modules
-    typescript({ tsconfig: './tsconfig.json' }), // So Rollup can handle TypeScript
-  ],
-  external: ['react', 'react-native'], // Explicitly externalize dependencies
-};

package/src/Button.tsx

@@ -1,104 +0,0 @@
-// src/components/Button.tsx
-
-import React, { useMemo, useContext } from 'react';
-import { Text, ViewStyle, StyleSheet, TouchableOpacity } from 'react-native';
-import { ThemeContext } from './context/ThemeContext'; // Adjust path to your ThemeContext
-import { ThemeColors } from './styles/colors';
-
-// Define the interface for the props that the Button component will accept
-interface ButtonProps {
-  disabled?: boolean; // Optional: Disables the button if true
-  isFullWidth?: boolean; // Optional: Expands the button to full width if true
-  children?: string; // Optional: Text content of the button
-  onPress?: () => void; // Optional: Function to call when the button is pressed
-  rounded?: boolean; // Optional: Adds border radius if true
-  borderRadius?: number; // Optional: Custom border radius value
-  type?: 'submit' | 'button' | 'cancel'; // Optional: Specifies the button type for styling
-}
-
-// Function to determine the styles based on the button type and whether it is disabled
-function typeStyles(type?: string, disabled?: boolean, themeColors?: ThemeColors): ViewStyle {
-  switch (type) {
-    case 'submit':
-      return {
-        backgroundColor: `rgba(${themeColors?.primary.rgb.r}, ${themeColors?.primary.rgb.g}, ${themeColors?.primary.rgb.b}, ${
-          disabled ? 0.5 : 1
-        })`,
-        borderWidth: 2,
-        borderColor: themeColors?.primary.hex,
-      };
-    case 'button':
-      return {
-        backgroundColor: themeColors?.primary.hex,
-        borderColor: themeColors?.secondary.hex,
-        opacity: disabled ? 0.5 : 1,
-        borderWidth: 2,
-      };
-    case 'cancel':
-      return {
-        backgroundColor: themeColors?.background.hex,
-        borderWidth: 0,
-      };
-    default:
-      return {};
-  }
-}
-
-// Button component definition
-const Button: React.FC<ButtonProps> = ({
-  children,
-  disabled = false,
-  type = 'button',
-  rounded = true,
-  borderRadius = 30,
-  isFullWidth = false,
-  onPress,
-}) => {
-  // Access the current theme from ThemeContext
-  const { theme } = useContext(ThemeContext);
-  const { colors } = theme; // Extract colors from the theme
-
-  // Use useMemo to memoize the computed styles
-  const computedStyles = useMemo(() => {
-    return StyleSheet.flatten([
-      styles.button,
-      typeStyles(type, disabled, colors), // Use colors directly
-      rounded && { borderRadius },
-      isFullWidth && { width: '100%' },
-      disabled && styles.disabled,
-    ]);
-  }, [type, disabled, rounded, borderRadius, isFullWidth, colors]);
-
-  // Determine text color based on button type and theme
-  const textColor = useMemo(() => {
-    return { color: colors.text.hex }; // Access text color from the theme
-  }, [type, colors]);
-
-  return (
-    <TouchableOpacity
-      style={computedStyles as ViewStyle}
-      disabled={disabled}
-      onPress={onPress}
-      activeOpacity={0.7}
-    >
-      <Text style={textColor}>
-        {Array.isArray(children) ? children.join('').toUpperCase() : children?.toUpperCase()}
-      </Text>
-    </TouchableOpacity>
-  );
-};
-
-// Define basic styles for the button
-const styles = StyleSheet.create({
-  button: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingVertical: 10,
-    paddingHorizontal: 20,
-  },
-  disabled: {
-    opacity: 0.6,
-  },
-});
-
-export default Button;

package/src/components/ThemeToggle.tsx

@@ -1,39 +0,0 @@
-// src/components/ThemeToggle.tsx
-
-import React, { useContext } from 'react';
-import { Switch, View, Text, StyleSheet } from 'react-native';
-import { ThemeContext } from '../context/ThemeContext';
-import { darkTheme, lightTheme } from '../styles/colors';
-
-const ThemeToggle: React.FC = () => {
-  const { theme, toggleTheme } = useContext(ThemeContext);
-
-  // Determine if the current theme is dark by checking the colors property
-  const isDarkMode = theme.colors === darkTheme;
-
-  return (
-    <View style={styles.container}>
-      <Text style={[styles.text, { color: theme.colors.text.hex }]}>Dark Mode</Text>
-      <Switch
-        value={isDarkMode}
-        onValueChange={toggleTheme}
-        trackColor={{ false: lightTheme.secondary.hex, true: darkTheme.primary.hex }}
-        thumbColor={isDarkMode ? darkTheme.secondary.hex : lightTheme.primary.hex}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    marginTop: 20,
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  text: {
-    marginRight: 10,
-    fontSize: 16,
-  },
-});
-
-export default ThemeToggle;

package/src/context/ThemeContext.tsx

@@ -1,70 +0,0 @@
-// src/context/ThemeContext.tsx
-
-import React, { createContext, useState, useEffect, ReactNode } from 'react';
-import { Appearance, ColorSchemeName } from 'react-native';
-import AsyncStorage from '@react-native-async-storage/async-storage';
-import { lightTheme, darkTheme, ThemeColors } from '../styles/colors';
-import { Theme } from '../styles/theme';
-
-interface ThemeContextProps {
-  theme: Theme;
-  toggleTheme: () => void;
-}
-
-export const ThemeContext = createContext<ThemeContextProps>({
-  theme: { colors: lightTheme },
-  toggleTheme: () => {},
-});
-
-interface ThemeProviderProps {
-  children: ReactNode;
-}
-
-export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
-  const [colorScheme, setColorScheme] = useState<ColorSchemeName | null>(null);
-
-  useEffect(() => {
-    const loadTheme = async () => {
-      try {
-        const storedTheme = await AsyncStorage.getItem('theme');
-        if (storedTheme === 'dark' || storedTheme === 'light') {
-          setColorScheme(storedTheme);
-        } else {
-          const systemTheme = Appearance.getColorScheme();
-          setColorScheme(systemTheme);
-        }
-      } catch (error) {
-        console.error('Failed to load theme.', error);
-        setColorScheme(Appearance.getColorScheme());
-      }
-    };
-
-    loadTheme();
-
-    const subscription = Appearance.addChangeListener(({ colorScheme }) => {
-      setColorScheme(colorScheme);
-    });
-
-    return () => subscription.remove();
-  }, []);
-
-  const toggleTheme = async () => {
-    try {
-      const newTheme = colorScheme === 'dark' ? 'light' : 'dark';
-      setColorScheme(newTheme);
-      await AsyncStorage.setItem('theme', newTheme);
-    } catch (error) {
-      console.error('Failed to toggle theme.', error);
-    }
-  };
-
-  const theme: Theme = {
-    colors: colorScheme === 'dark' ? darkTheme : lightTheme,
-  };
-
-  return (
-    <ThemeContext.Provider value={{ theme, toggleTheme }}>
-      {children}
-    </ThemeContext.Provider>
-  );
-};

package/src/index.ts

@@ -1 +0,0 @@
-export { default as ButtonComponent } from "./Button";

package/src/styles/colors.ts

@@ -1,60 +0,0 @@
-// src/styles/colors.ts
-
-export interface RGB {
-  r: number;
-  g: number;
-  b: number;
-}
-
-export interface Color {
-  hex: string;
-  rgb: RGB;
-}
-
-export interface ThemeColors {
-  primary: Color;
-  secondary: Color;
-  background: Color;
-  text: Color;
-  // Add more categories as needed
-}
-
-export const lightTheme: ThemeColors = {
-  primary: {
-    hex: '#1A73E8',
-    rgb: { r: 26, g: 115, b: 232 },
-  },
-  secondary: {
-    hex: '#F0F6FF',
-    rgb: { r: 240, g: 246, b: 255 },
-  },
-  background: {
-    hex: '#FFFFFF',
-    rgb: { r: 255, g: 255, b: 255 },
-  },
-  text: {
-    hex: '#000000',
-    rgb: { r: 0, g: 0, b: 0 },
-  },
-  // Add more categories as needed
-};
-
-export const darkTheme: ThemeColors = {
-  primary: {
-    hex: '#BB86FC',
-    rgb: { r: 187, g: 134, b: 252 },
-  },
-  secondary: {
-    hex: '#03DAC6',
-    rgb: { r: 3, g: 218, b: 198 },
-  },
-  background: {
-    hex: '#121212',
-    rgb: { r: 18, g: 18, b: 18 },
-  },
-  text: {
-    hex: '#FFFFFF',
-    rgb: { r: 255, g: 255, b: 255 },
-  },
-  // Add more categories as needed
-};

package/src/styles/theme.ts

@@ -1,50 +0,0 @@
-// src/styles/theme.ts
-
-import { ThemeColors } from "./colors";
-
-// Define the light theme with full ThemeColors structure
-export const lightTheme: ThemeColors = {
-  primary: {
-    hex: "#1A73E8",
-    rgb: { r: 26, g: 115, b: 232 },
-  },
-  secondary: {
-    hex: "#F0F6FF",
-    rgb: { r: 240, g: 246, b: 255 },
-  },
-  background: {
-    hex: "#FFFFFF",
-    rgb: { r: 255, g: 255, b: 255 },
-  },
-  text: {
-    hex: "#000000",
-    rgb: { r: 0, g: 0, b: 0 },
-  },
-};
-
-// Define the dark theme with full ThemeColors structure
-export const darkTheme: ThemeColors = {
-  primary: {
-    hex: "#BB86FC",
-    rgb: { r: 187, g: 134, b: 252 },
-  },
-  secondary: {
-    hex: "#03DAC6",
-    rgb: { r: 3, g: 218, b: 198 },
-  },
-  background: {
-    hex: "#121212",
-    rgb: { r: 18, g: 18, b: 18 },
-  },
-  text: {
-    hex: "#FFFFFF",
-    rgb: { r: 255, g: 255, b: 255 },
-  },
-};
-
-// src/styles/theme.ts
-
-export interface Theme {
-    colors: ThemeColors;
-  }
-  

package/tsconfig.json

@@ -1,30 +0,0 @@
-{
-  "compilerOptions": {
-    "outDir": "dist",
-    "module": "ES6",
-    "target": "ES5",
-    "lib": [
-      "ES2015",
-      "DOM"
-    ],
-    "jsx": "react-native",
-    "declaration": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
-    "skipLibCheck": true,
-    "moduleResolution": "node",
-    "types": [
-      "react",
-      "react-native"
-    ]
-  },
-  "include": [
-    "src"  ],
-  "exclude": [
-    "node_modules",
-    "dist",
-    "App.tsx"
-  ],
-  "extends": "expo/tsconfig.base"
-}