aport-tools 4.1.27 → 4.1.29

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,6 @@
-/*! aport-tools v4.1.27 | 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.29 | ISC */
+import React, { useContext, useState, createContext, useMemo } from 'react';
+import require$$1, { StyleSheet, Text as Text$1, View, TextInput, TouchableOpacity, ActivityIndicator, Platform } from 'react-native';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -86,283 +85,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() {
@@ -418,6 +140,302 @@ var Form = function Form(_a) {
   }, children);
 };
 
+var dist = {};
+
+/*! aport-themes v1.0.1 | ISC */
+
+var hasRequiredDist;
+
+function requireDist () {
+	if (hasRequiredDist) return dist;
+	hasRequiredDist = 1;
+
+	var React$1 = React;
+	var reactNative = require$$1;
+
+	// 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: {
+	    hex: '#F5F5F5',
+	    rgb: {
+	      r: 245,
+	      g: 245,
+	      b: 245
+	    }
+	  },
+	  placeHolder: {
+	    hex: '#A8A8A8',
+	    rgb: {
+	      r: 168,
+	      g: 168,
+	      b: 168
+	    }
+	  }
+	};
+	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
+	    }
+	  },
+	  placeHolder: {
+	    hex: '#6C6C6E',
+	    rgb: {
+	      r: 108,
+	      g: 108,
+	      b: 110
+	    }
+	  }
+	};
+
+	// Utility to detect if running on React Native
+	var isReactNative = typeof navigator !== 'undefined' && navigator.product === 'ReactNative';
+	// Platform-specific imports
+	var Appearance = isReactNative ? require$$1.Appearance : null;
+	/**
+	 * React context for managing theme-related data and functions.
+	 */
+	var ThemeContext = /*#__PURE__*/React$1.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 = React$1.useState(initialTheme || null),
+	    colorScheme = _b[0],
+	    setColorScheme = _b[1];
+	  React$1.useEffect(function () {
+	    var loadTheme = function loadTheme() {
+	      if (initialTheme) {
+	        setColorScheme(initialTheme);
+	      } else {
+	        if (isReactNative) {
+	          var systemTheme = Appearance.getColorScheme();
+	          setColorScheme(systemTheme);
+	        } else {
+	          var systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+	          setColorScheme(systemTheme);
+	        }
+	      }
+	    };
+	    loadTheme();
+	    if (isReactNative) {
+	      var subscription_1 = Appearance.addChangeListener(function (_a) {
+	        var colorScheme = _a.colorScheme;
+	        setColorScheme(colorScheme);
+	      });
+	      return function () {
+	        return subscription_1.remove();
+	      };
+	    } else {
+	      var mediaQuery_1 = window.matchMedia('(prefers-color-scheme: dark)');
+	      var mediaChangeHandler_1 = function mediaChangeHandler_1(e) {
+	        setColorScheme(e.matches ? 'dark' : 'light');
+	      };
+	      mediaQuery_1.addEventListener('change', mediaChangeHandler_1);
+	      return function () {
+	        return mediaQuery_1.removeEventListener('change', mediaChangeHandler_1);
+	      };
+	    }
+	  }, [initialTheme]);
+	  var toggleTheme = function toggleTheme() {
+	    setColorScheme(function (prevScheme) {
+	      return prevScheme === 'dark' ? 'light' : 'dark';
+	    });
+	  };
+	  var theme = {
+	    colors: colorScheme === 'dark' ? darkTheme : lightTheme
+	  };
+	  return /*#__PURE__*/React$1.createElement(ThemeContext.Provider, {
+	    value: {
+	      theme: theme,
+	      toggleTheme: toggleTheme
+	    }
+	  }, children);
+	};
+
+	var ThemeToggle = function ThemeToggle() {
+	  var _a = React$1.useContext(ThemeContext),
+	    theme = _a.theme,
+	    toggleTheme = _a.toggleTheme;
+	  var isDarkMode = theme.colors === darkTheme;
+	  return /*#__PURE__*/React$1.createElement(reactNative.View, {
+	    style: styles.container
+	  }, /*#__PURE__*/React$1.createElement(reactNative.Text, {
+	    style: [styles.text, {
+	      color: theme.colors.text.hex
+	    }]
+	  }, "Dark Mode"), /*#__PURE__*/React$1.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
+	  }
+	});
+
+	dist.ThemeContext = ThemeContext;
+	dist.ThemeProvider = ThemeProvider;
+	dist.ThemeToggle = ThemeToggle;
+	
+	return dist;
+}
+
+var distExports = requireDist();
+
 // src/fonts/Text.tsx
 /**
  * A dynamic Text component that supports HTML-like formatting.
@@ -450,7 +468,7 @@ var Text = function Text(_a) {
     _j = _a.h,
     h = _j === void 0 ? 0 : _j,
     style = _a.style;
-  var theme = useContext(ThemeContext).theme;
+  var theme = useContext(distExports.ThemeContext).theme;
   var colors = theme.colors;
   // Calculate header size based on 'h' prop
   var fontSize = size;
@@ -485,7 +503,7 @@ StyleSheet.create({
 // src/forms/ErrorList.tsx
 var ErrorList = function ErrorList(_a) {
   var errors = _a.errors;
-  var theme = useContext(ThemeContext).theme;
+  var theme = useContext(distExports.ThemeContext).theme;
   var colors = theme.colors;
   return /*#__PURE__*/React.createElement(View, {
     style: styles$5.container
@@ -548,7 +566,7 @@ var Input = function Input(_a) {
     formValues = _b.formValues,
     setFormValue = _b.setFormValue,
     formErrors = _b.errors;
-  var theme = useContext(ThemeContext).theme;
+  var theme = useContext(distExports.ThemeContext).theme;
   var colors = theme.colors;
   /**
    * Handles text changes in the input field, applying formatting based on the inputType.
@@ -596,7 +614,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]
   })));
@@ -675,7 +693,7 @@ var styles$3 = StyleSheet.create({
 var Label = function Label(_a) {
   var text = _a.text,
     style = _a.style;
-  var theme = useContext(ThemeContext).theme;
+  var theme = useContext(distExports.ThemeContext).theme;
   var colors = theme.colors;
   return /*#__PURE__*/React.createElement(Text, {
     style: [styles$2.label, style, {
@@ -750,7 +768,7 @@ var Button = function Button(_a) {
     _g = _a.loading,
     loading = _g === void 0 ? false : _g,
     onPress = _a.onPress;
-  var theme = useContext(ThemeContext).theme;
+  var theme = useContext(distExports.ThemeContext).theme;
   var colors = theme.colors;
   var handleSubmit = useFormContext().handleSubmit;
   var computedStyles = useMemo(function () {
@@ -761,7 +779,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]);
@@ -824,7 +844,7 @@ var Card = function Card(_a) {
     elevation = _d === void 0 ? 4 : _d,
     _e = _a.shadowProps,
     shadowProps = _e === void 0 ? {} : _e;
-  var theme = useContext(ThemeContext).theme;
+  var theme = useContext(distExports.ThemeContext).theme;
   var colors = theme.colors;
   // Animation state for pressable effect
   // Default shadow styles (improved platform-specific handling)
@@ -845,7 +865,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 +886,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