aport-tools 4.1.29 → 4.2.0

package/dist/index.js

@@ -1,8 +1,9 @@
-/*! aport-tools v4.1.29 | ISC */
+/*! aport-tools v4.2.0 | ISC */
 'use strict';
 
 var React = require('react');
-var require$$1 = require('react-native');
+var reactNative = require('react-native');
+var aportThemes = require('aport-themes');
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -142,302 +143,6 @@ 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.
@@ -447,6 +152,8 @@ var distExports = requireDist();
  * @param size - Size of the text. Defaults to 'medium'.
  * @param b - If true, applies bold styling.
  * @param i - If true, applies italic styling.
+ * @param type - Type of Text component. Defaults to 'text'.
+ * @param typeFont - Type of Font component. Defaults to 'body'.
  * @param u - If true, applies underline styling.
  * @param align - Paragraph alignment. Defaults to 'left'.
  * @param h - Header level. Accepts 0 (none), 1, 2, or 3. Defaults to 0.
@@ -467,16 +174,22 @@ var Text = function Text(_a) {
     align = _g === void 0 ? 'left' : _g,
     _h = _a.type,
     type = _h === void 0 ? 'text' : _h,
-    _j = _a.h,
-    h = _j === void 0 ? 0 : _j,
+    _j = _a.typeFont,
+    typeFont = _j === void 0 ? 'body' : _j,
+    _k = _a.h,
+    h = _k === void 0 ? 0 : _k,
     style = _a.style;
-  var theme = React.useContext(distExports.ThemeContext).theme;
-  var colors = theme.colors;
+  var theme = React.useContext(aportThemes.ThemeContext).theme;
+  var colors = theme.colors,
+    fonts = theme.fonts;
+  // Determine font family and size based on 'typeFont'
+  var fontSettings = fonts[typeFont] || fonts.body;
+  var fontFamily = fontSettings.fontFamily;
+  var fontSize = fontSettings.fontSize || size;
   // Calculate header size based on 'h' prop
-  var fontSize = size;
   if (h === 1) fontSize = 32;else if (h === 2) fontSize = 24;else if (h === 3) fontSize = 18;
   // Define font weight based on bold prop
-  var fontWeight = b ? '700' : '400';
+  var fontWeight = b ? '700' : fontSettings.fontWeight || '400';
   // Define font style based on italic prop
   var fontStyle = i ? 'italic' : 'normal';
   // Define text decoration based on underline prop
@@ -489,28 +202,29 @@ var Text = function Text(_a) {
   var textStyles = {
     fontSize: fontSize,
     fontWeight: fontWeight,
+    fontFamily: fontFamily,
     fontStyle: fontStyle,
     textDecorationLine: textDecorationLine,
     textAlign: textAlign,
     color: textColor
   };
-  return /*#__PURE__*/React.createElement(require$$1.Text, {
+  return /*#__PURE__*/React.createElement(reactNative.Text, {
     style: [textStyles, style]
   }, children);
 };
-require$$1.StyleSheet.create({
+reactNative.StyleSheet.create({
   // Define any default styles if needed
 });
 
 // src/forms/ErrorList.tsx
 var ErrorList = function ErrorList(_a) {
   var errors = _a.errors;
-  var theme = React.useContext(distExports.ThemeContext).theme;
+  var theme = React.useContext(aportThemes.ThemeContext).theme;
   var colors = theme.colors;
-  return /*#__PURE__*/React.createElement(require$$1.View, {
+  return /*#__PURE__*/React.createElement(reactNative.View, {
     style: styles$5.container
   }, errors.map(function (error, index) {
-    return /*#__PURE__*/React.createElement(require$$1.View, {
+    return /*#__PURE__*/React.createElement(reactNative.View, {
       key: index,
       style: styles$5.errorItem
     }, /*#__PURE__*/React.createElement(Text, {
@@ -524,7 +238,7 @@ var ErrorList = function ErrorList(_a) {
     }, error));
   }));
 };
-var styles$5 = require$$1.StyleSheet.create({
+var styles$5 = reactNative.StyleSheet.create({
   container: {
     marginTop: 4
   },
@@ -568,7 +282,7 @@ var Input = function Input(_a) {
     formValues = _b.formValues,
     setFormValue = _b.setFormValue,
     formErrors = _b.errors;
-  var theme = React.useContext(distExports.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.
@@ -601,13 +315,13 @@ var Input = function Input(_a) {
     }
     setFormValue(name, formattedText);
   };
-  return /*#__PURE__*/React.createElement(require$$1.View, {
+  return /*#__PURE__*/React.createElement(reactNative.View, {
     style: styles$4.container
   }, /*#__PURE__*/React.createElement(Text, {
     style: [styles$4.label, {
       color: colors.text.hex
     }]
-  }, label), /*#__PURE__*/React.createElement(require$$1.TextInput, __assign({
+  }, label), /*#__PURE__*/React.createElement(reactNative.TextInput, __assign({
     style: [styles$4.input, {
       backgroundColor: colors.body.hex,
       borderColor: formErrors[name] ? colors.error.hex : "#CCC",
@@ -621,7 +335,7 @@ var Input = function Input(_a) {
     errors: formErrors[name]
   })));
 };
-var styles$4 = require$$1.StyleSheet.create({
+var styles$4 = reactNative.StyleSheet.create({
   container: {
     marginBottom: 16
   },
@@ -651,11 +365,11 @@ var TextArea = function TextArea(_a) {
   var handleChange = function handleChange(text) {
     setFormValue(name, text);
   };
-  return /*#__PURE__*/React.createElement(require$$1.View, {
+  return /*#__PURE__*/React.createElement(reactNative.View, {
     style: styles$3.container
   }, /*#__PURE__*/React.createElement(Text, {
     style: styles$3.label
-  }, label), /*#__PURE__*/React.createElement(require$$1.TextInput, __assign({
+  }, label), /*#__PURE__*/React.createElement(reactNative.TextInput, __assign({
     style: [styles$3.textArea, style],
     value: formValues[name] || '',
     onChangeText: handleChange,
@@ -669,7 +383,7 @@ var TextArea = function TextArea(_a) {
     errors: formErrors[name]
   })));
 };
-var styles$3 = require$$1.StyleSheet.create({
+var styles$3 = reactNative.StyleSheet.create({
   container: {
     marginBottom: 16
   },
@@ -695,7 +409,7 @@ var styles$3 = require$$1.StyleSheet.create({
 var Label = function Label(_a) {
   var text = _a.text,
     style = _a.style;
-  var theme = React.useContext(distExports.ThemeContext).theme;
+  var theme = React.useContext(aportThemes.ThemeContext).theme;
   var colors = theme.colors;
   return /*#__PURE__*/React.createElement(Text, {
     style: [styles$2.label, style, {
@@ -703,7 +417,7 @@ var Label = function Label(_a) {
     }]
   }, text);
 };
-var styles$2 = require$$1.StyleSheet.create({
+var styles$2 = reactNative.StyleSheet.create({
   label: {
     marginBottom: 4,
     fontWeight: '500'
@@ -770,11 +484,11 @@ var Button = function Button(_a) {
     _g = _a.loading,
     loading = _g === void 0 ? false : _g,
     onPress = _a.onPress;
-  var theme = React.useContext(distExports.ThemeContext).theme;
+  var theme = React.useContext(aportThemes.ThemeContext).theme;
   var colors = theme.colors;
   var handleSubmit = useFormContext().handleSubmit;
   var computedStyles = React.useMemo(function () {
-    return require$$1.StyleSheet.flatten([styles$1.button, typeStyles(type, disabled, colors), rounded && {
+    return reactNative.StyleSheet.flatten([styles$1.button, typeStyles(type, disabled, colors), rounded && {
       borderRadius: borderRadius
     }, isFullWidth && {
       width: '100%'
@@ -794,7 +508,7 @@ var Button = function Button(_a) {
       onPress(); // Call a custom handler if needed
     }
   };
-  return /*#__PURE__*/React.createElement(require$$1.TouchableOpacity, {
+  return /*#__PURE__*/React.createElement(reactNative.TouchableOpacity, {
     style: computedStyles,
     disabled: disabled || loading,
     onPress: handlePress,
@@ -802,14 +516,14 @@ var Button = function Button(_a) {
   }, loading ? (
   /*#__PURE__*/
   // Show loading spinner if loading
-  React.createElement(require$$1.ActivityIndicator, {
+  React.createElement(reactNative.ActivityIndicator, {
     size: "small",
     color: colors.textButton.hex
-  })) : (/*#__PURE__*/React.createElement(require$$1.Text, {
+  })) : (/*#__PURE__*/React.createElement(reactNative.Text, {
     style: textColor
   }, Array.isArray(children) ? children.join('').toUpperCase() : children === null || children === void 0 ? void 0 : children.toUpperCase())));
 };
-var styles$1 = require$$1.StyleSheet.create({
+var styles$1 = reactNative.StyleSheet.create({
   button: {
     justifyContent: 'center',
     alignItems: 'center',
@@ -846,11 +560,11 @@ var Card = function Card(_a) {
     elevation = _d === void 0 ? 4 : _d,
     _e = _a.shadowProps,
     shadowProps = _e === void 0 ? {} : _e;
-  var theme = React.useContext(distExports.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)
-  var defaultShadow = require$$1.Platform.select({
+  var defaultShadow = reactNative.Platform.select({
     ios: {
       shadowColor: (shadowProps === null || shadowProps === void 0 ? void 0 : shadowProps.shadowColor) || colors.text.hex,
       // Defaulting to theme text color
@@ -872,15 +586,15 @@ var Card = function Card(_a) {
   // Dynamic shadows based on platform
   style // External styles
   ];
-  return pressable ? (/*#__PURE__*/React.createElement(require$$1.TouchableOpacity, {
+  return pressable ? (/*#__PURE__*/React.createElement(reactNative.TouchableOpacity, {
     activeOpacity: 0.8,
     onPress: onPress,
     style: cardStyles
-  }, children)) : (/*#__PURE__*/React.createElement(require$$1.View, {
+  }, children)) : (/*#__PURE__*/React.createElement(reactNative.View, {
     style: cardStyles
   }, children));
 };
-var styles = require$$1.StyleSheet.create({
+var styles = reactNative.StyleSheet.create({
   container: {
     padding: 16,
     borderRadius: 12