aport-tools 4.1.28 → 4.1.31

package/README.md

@@ -12,6 +12,12 @@ To install the latest version of aport-tools, run the following command:
 npm i aport-tools
 ```
 
+requires:
+
+```bash
+npm i aport-themes
+```
+
 Happy to receive help and advice; siixsixer@gmail.com
 
 License

package/dist/fonts/Text.d.ts

@@ -1,6 +1,6 @@
+import { ThemeColors } from 'aport-themes';
 import React from 'react';
 import { TextProps, TextStyle } from 'react-native';
-import { ThemeColors } from '../styles/colors';
 interface CustomTextProps extends TextProps {
     /**
    * Content to be displayed inside the Text component.

package/dist/index.d.ts

@@ -1,4 +1,3 @@
-export * from './theme';
 export * from './buttons';
 export * from './cards';
 export * from './fonts';

package/dist/index.esm.js

@@ -1,7 +1,7 @@
-/*! aport-tools v4.1.28 | ISC */
-import React, { createContext, useState, useEffect, useContext, useMemo } from 'react';
-import { Appearance, StyleSheet, View, Text as Text$1, Switch, TextInput, TouchableOpacity, ActivityIndicator, Platform } from 'react-native';
-import { useAsyncStorage } from '@react-native-async-storage/async-storage';
+/*! aport-tools v4.1.31 | ISC */
+import React, { useContext, useState, createContext, useMemo } from 'react';
+import { StyleSheet, Text as Text$1, View, TextInput, TouchableOpacity, ActivityIndicator, Platform } from 'react-native';
+import { ThemeContext } from 'aport-themes';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -86,283 +86,6 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     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
-    }
-  },
-  textButton: {
-    hex: "#FFFFFF",
-    rgb: {
-      r: 255,
-      g: 255,
-      b: 255
-    }
-  },
-  error: {
-    hex: "#FF5252",
-    rgb: {
-      r: 255,
-      g: 82,
-      b: 82
-    }
-  },
-  success: {
-    hex: "#4CAF50",
-    rgb: {
-      r: 76,
-      g: 175,
-      b: 80
-    }
-  },
-  warning: {
-    hex: "#FFC107",
-    rgb: {
-      r: 255,
-      g: 193,
-      b: 7
-    }
-  },
-  body: {
-    // Body color is the same as background in the light theme
-    hex: '#FFFFFF',
-    rgb: {
-      r: 255,
-      g: 255,
-      b: 255
-    }
-  }
-};
-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
-    }
-  },
-  textButton: {
-    hex: "#FFFFFF",
-    rgb: {
-      r: 255,
-      g: 255,
-      b: 255
-    }
-  },
-  error: {
-    hex: "#CF6679",
-    rgb: {
-      r: 207,
-      g: 102,
-      b: 121
-    }
-  },
-  success: {
-    hex: "#03DAC6",
-    rgb: {
-      r: 3,
-      g: 218,
-      b: 198
-    }
-  },
-  warning: {
-    hex: "#FFB74D",
-    rgb: {
-      r: 255,
-      g: 183,
-      b: 77
-    }
-  },
-  body: {
-    hex: '#1C1C1E',
-    rgb: {
-      r: 28,
-      g: 28,
-      b: 30
-    }
-  }
-};
-
-/**
- * React context for managing theme-related data and functions.
- */
-var ThemeContext = /*#__PURE__*/createContext({
-  theme: {
-    colors: lightTheme
-  },
-  toggleTheme: function toggleTheme() {}
-});
-/**
- * ThemeProvider component that manages and provides theme data to its children.
- *
- * @param children - The child components that will consume the theme context.
- * @param initialTheme - Optional prop to set the initial theme.
- */
-var ThemeProvider = function ThemeProvider(_a) {
-  var children = _a.children,
-    initialTheme = _a.initialTheme;
-  var _b = useState(null),
-    colorScheme = _b[0],
-    setColorScheme = _b[1];
-  // Use useAsyncStorage hook for managing the theme storage
-  var _c = useAsyncStorage('theme'),
-    getItem = _c.getItem,
-    setItem = _c.setItem;
-  useEffect(function () {
-    var loadTheme = function loadTheme() {
-      return __awaiter(void 0, void 0, void 0, function () {
-        var systemTheme;
-        return __generator(this, function (_a) {
-          try {
-            // const storedTheme = await getItem();
-            // if (storedTheme === 'dark' || storedTheme === 'light') {
-            //   setColorScheme(storedTheme);
-            //} 
-            if (initialTheme) {
-              setColorScheme(initialTheme);
-            } else {
-              systemTheme = Appearance.getColorScheme();
-              setColorScheme(systemTheme);
-            }
-          } catch (error) {
-            console.error('Failed to load theme.', error);
-            setColorScheme(Appearance.getColorScheme());
-          }
-          return [2 /*return*/];
-        });
-      });
-    };
-    loadTheme();
-    var subscription = Appearance.addChangeListener(function (_a) {
-      var colorScheme = _a.colorScheme;
-      if (!colorScheme) return; // Prevent setting null
-      setColorScheme(colorScheme);
-    });
-    return function () {
-      return subscription.remove();
-    };
-  }, [initialTheme, getItem]);
-  var toggleTheme = function toggleTheme() {
-    return __awaiter(void 0, void 0, void 0, function () {
-      var newTheme, error_1;
-      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*/, setItem(newTheme)];
-          case 1:
-            _a.sent(); // Use setItem from useAsyncStorage
-            return [3 /*break*/, 3];
-          case 2:
-            error_1 = _a.sent();
-            console.error('Failed to toggle theme.', error_1);
-            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$6.container
-  }, /*#__PURE__*/React.createElement(Text$1, {
-    style: [styles$6.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$6 = StyleSheet.create({
-  container: {
-    marginTop: 20,
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  text: {
-    marginRight: 10,
-    fontSize: 16
-  }
-});
-
 // src/forms/FormContext.tsx
 var FormContext = /*#__PURE__*/createContext(undefined);
 var useFormContext = function useFormContext() {
@@ -596,7 +319,7 @@ var Input = function Input(_a) {
     value: formValues[name] || "",
     onChangeText: handleChange,
     placeholder: label,
-    placeholderTextColor: colors.text.hex
+    placeholderTextColor: colors.placeHolder.hex
   }, rest)), formErrors[name] && formErrors[name].length > 0 && (/*#__PURE__*/React.createElement(ErrorList, {
     errors: formErrors[name]
   })));
@@ -761,7 +484,9 @@ var Button = function Button(_a) {
     }, (disabled || loading) && styles$1.disabled]);
   }, [type, disabled, loading, rounded, borderRadius, isFullWidth, colors]);
   var textColor = useMemo(function () {
-    return {
+    return type === "cancel" ? {
+      color: colors.text.hex
+    } : {
       color: colors.textButton.hex
     };
   }, [type, colors]);
@@ -845,7 +570,7 @@ var Card = function Card(_a) {
   });
   var cardStyles = [styles.container, {
     borderRadius: borderRadius,
-    backgroundColor: colors.body.hex
+    backgroundColor: colors.background.hex
   }, defaultShadow,
   // Dynamic shadows based on platform
   style // External styles
@@ -866,5 +591,5 @@ var styles = StyleSheet.create({
   }
 });
 
-export { Button, Card, ErrorList, Form, Input, Label, Text, TextArea, ThemeContext, ThemeProvider, ThemeToggle, useFormContext };
+export { Button, Card, ErrorList, Form, Input, Label, Text, TextArea, useFormContext };
 //# sourceMappingURL=index.esm.js.map