aport-tools 4.1.28 → 4.1.31

package/dist/index.js

@@ -1,9 +1,9 @@
-/*! aport-tools v4.1.28 | ISC */
+/*! aport-tools v4.1.31 | ISC */
 'use strict';
 
 var React = require('react');
 var reactNative = require('react-native');
-var asyncStorage = require('@react-native-async-storage/async-storage');
+var aportThemes = require('aport-themes');
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -88,283 +88,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__*/React.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.useState(null),
-    colorScheme = _b[0],
-    setColorScheme = _b[1];
-  // Use useAsyncStorage hook for managing the theme storage
-  var _c = asyncStorage.useAsyncStorage('theme'),
-    getItem = _c.getItem,
-    setItem = _c.setItem;
-  React.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 = reactNative.Appearance.getColorScheme();
-              setColorScheme(systemTheme);
-            }
-          } catch (error) {
-            console.error('Failed to load theme.', error);
-            setColorScheme(reactNative.Appearance.getColorScheme());
-          }
-          return [2 /*return*/];
-        });
-      });
-    };
-    loadTheme();
-    var subscription = reactNative.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 = React.useContext(ThemeContext),
-    theme = _a.theme,
-    toggleTheme = _a.toggleTheme;
-  var isDarkMode = theme.colors === darkTheme;
-  return /*#__PURE__*/React.createElement(reactNative.View, {
-    style: styles$6.container
-  }, /*#__PURE__*/React.createElement(reactNative.Text, {
-    style: [styles$6.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$6 = reactNative.StyleSheet.create({
-  container: {
-    marginTop: 20,
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  text: {
-    marginRight: 10,
-    fontSize: 16
-  }
-});
-
 // src/forms/FormContext.tsx
 var FormContext = /*#__PURE__*/React.createContext(undefined);
 var useFormContext = function useFormContext() {
@@ -452,7 +175,7 @@ var Text = function Text(_a) {
     _j = _a.h,
     h = _j === void 0 ? 0 : _j,
     style = _a.style;
-  var theme = React.useContext(ThemeContext).theme;
+  var theme = React.useContext(aportThemes.ThemeContext).theme;
   var colors = theme.colors;
   // Calculate header size based on 'h' prop
   var fontSize = size;
@@ -487,7 +210,7 @@ reactNative.StyleSheet.create({
 // src/forms/ErrorList.tsx
 var ErrorList = function ErrorList(_a) {
   var errors = _a.errors;
-  var theme = React.useContext(ThemeContext).theme;
+  var theme = React.useContext(aportThemes.ThemeContext).theme;
   var colors = theme.colors;
   return /*#__PURE__*/React.createElement(reactNative.View, {
     style: styles$5.container
@@ -550,7 +273,7 @@ var Input = function Input(_a) {
     formValues = _b.formValues,
     setFormValue = _b.setFormValue,
     formErrors = _b.errors;
-  var theme = React.useContext(ThemeContext).theme;
+  var theme = React.useContext(aportThemes.ThemeContext).theme;
   var colors = theme.colors;
   /**
    * Handles text changes in the input field, applying formatting based on the inputType.
@@ -598,7 +321,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]
   })));
@@ -677,7 +400,7 @@ var styles$3 = reactNative.StyleSheet.create({
 var Label = function Label(_a) {
   var text = _a.text,
     style = _a.style;
-  var theme = React.useContext(ThemeContext).theme;
+  var theme = React.useContext(aportThemes.ThemeContext).theme;
   var colors = theme.colors;
   return /*#__PURE__*/React.createElement(Text, {
     style: [styles$2.label, style, {
@@ -752,7 +475,7 @@ var Button = function Button(_a) {
     _g = _a.loading,
     loading = _g === void 0 ? false : _g,
     onPress = _a.onPress;
-  var theme = React.useContext(ThemeContext).theme;
+  var theme = React.useContext(aportThemes.ThemeContext).theme;
   var colors = theme.colors;
   var handleSubmit = useFormContext().handleSubmit;
   var computedStyles = React.useMemo(function () {
@@ -763,7 +486,9 @@ var Button = function Button(_a) {
     }, (disabled || loading) && styles$1.disabled]);
   }, [type, disabled, loading, rounded, borderRadius, isFullWidth, colors]);
   var textColor = React.useMemo(function () {
-    return {
+    return type === "cancel" ? {
+      color: colors.text.hex
+    } : {
       color: colors.textButton.hex
     };
   }, [type, colors]);
@@ -826,7 +551,7 @@ var Card = function Card(_a) {
     elevation = _d === void 0 ? 4 : _d,
     _e = _a.shadowProps,
     shadowProps = _e === void 0 ? {} : _e;
-  var theme = React.useContext(ThemeContext).theme;
+  var theme = React.useContext(aportThemes.ThemeContext).theme;
   var colors = theme.colors;
   // Animation state for pressable effect
   // Default shadow styles (improved platform-specific handling)
@@ -847,7 +572,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
@@ -876,8 +601,5 @@ exports.Input = Input;
 exports.Label = Label;
 exports.Text = Text;
 exports.TextArea = TextArea;
-exports.ThemeContext = ThemeContext;
-exports.ThemeProvider = ThemeProvider;
-exports.ThemeToggle = ThemeToggle;
 exports.useFormContext = useFormContext;
 //# sourceMappingURL=index.js.map