aport-tools 4.1.29 → 4.2.0

package/dist/fonts/Text.d.ts

@@ -1,4 +1,4 @@
-import { ThemeColors } from 'aport-themes';
+import { ThemeColors, ThemeFonts } from 'aport-themes';
 import React from 'react';
 import { TextProps, TextStyle } from 'react-native';
 interface CustomTextProps extends TextProps {
@@ -31,6 +31,11 @@ interface CustomTextProps extends TextProps {
       * This restricts type to known color keys like 'primary', 'error', etc.
       */
     type?: keyof ThemeColors;
+    /**
+      * Text font type. Defaults to 'body'. Should match the keys in ThemeFonts.
+      * This restricts type to known fonts keys like 'primary', 'secundary', etc.
+      */
+    typeFont?: keyof ThemeFonts;
     /**
      * Header level. Accepts 0 (none), 1, 2, or 3. Defaults to 0.
      */
@@ -48,6 +53,8 @@ interface CustomTextProps extends TextProps {
  * @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.

package/dist/index.esm.js

@@ -1,6 +1,7 @@
-/*! aport-tools v4.1.29 | ISC */
+/*! aport-tools v4.2.0 | 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';
+import { StyleSheet, Text as Text$1, View, TextInput, TouchableOpacity, ActivityIndicator, Platform } from 'react-native';
+import { ThemeContext } from 'aport-themes';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -140,302 +141,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.
@@ -445,6 +150,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.
@@ -465,16 +172,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 = useContext(distExports.ThemeContext).theme;
-  var colors = theme.colors;
+  var theme = useContext(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
@@ -487,6 +200,7 @@ var Text = function Text(_a) {
   var textStyles = {
     fontSize: fontSize,
     fontWeight: fontWeight,
+    fontFamily: fontFamily,
     fontStyle: fontStyle,
     textDecorationLine: textDecorationLine,
     textAlign: textAlign,
@@ -503,7 +217,7 @@ StyleSheet.create({
 // src/forms/ErrorList.tsx
 var ErrorList = function ErrorList(_a) {
   var errors = _a.errors;
-  var theme = useContext(distExports.ThemeContext).theme;
+  var theme = useContext(ThemeContext).theme;
   var colors = theme.colors;
   return /*#__PURE__*/React.createElement(View, {
     style: styles$5.container
@@ -566,7 +280,7 @@ var Input = function Input(_a) {
     formValues = _b.formValues,
     setFormValue = _b.setFormValue,
     formErrors = _b.errors;
-  var theme = useContext(distExports.ThemeContext).theme;
+  var theme = useContext(ThemeContext).theme;
   var colors = theme.colors;
   /**
    * Handles text changes in the input field, applying formatting based on the inputType.
@@ -693,7 +407,7 @@ var styles$3 = StyleSheet.create({
 var Label = function Label(_a) {
   var text = _a.text,
     style = _a.style;
-  var theme = useContext(distExports.ThemeContext).theme;
+  var theme = useContext(ThemeContext).theme;
   var colors = theme.colors;
   return /*#__PURE__*/React.createElement(Text, {
     style: [styles$2.label, style, {
@@ -768,7 +482,7 @@ var Button = function Button(_a) {
     _g = _a.loading,
     loading = _g === void 0 ? false : _g,
     onPress = _a.onPress;
-  var theme = useContext(distExports.ThemeContext).theme;
+  var theme = useContext(ThemeContext).theme;
   var colors = theme.colors;
   var handleSubmit = useFormContext().handleSubmit;
   var computedStyles = useMemo(function () {
@@ -844,7 +558,7 @@ var Card = function Card(_a) {
     elevation = _d === void 0 ? 4 : _d,
     _e = _a.shadowProps,
     shadowProps = _e === void 0 ? {} : _e;
-  var theme = useContext(distExports.ThemeContext).theme;
+  var theme = useContext(ThemeContext).theme;
   var colors = theme.colors;
   // Animation state for pressable effect
   // Default shadow styles (improved platform-specific handling)