aport-tools 4.4.1 → 4.4.3

package/dist/forms/FormContext.d.ts

@@ -8,11 +8,13 @@ interface FormContextProps {
 }
 export declare const useFormContext: () => FormContextProps;
 interface StepperProps {
-    steps: string[];
+    steps?: string[];
     presseable?: boolean;
     onPress?: (stepIndex: number) => void;
     step: number;
     totalSteps: number;
+    stepType?: "number" | "icon" | "empty";
+    icon?: React.ReactNode | React.ReactNode[];
 }
 interface FormProps {
     children: ReactNode;

package/dist/forms/Stepper.d.ts

@@ -6,6 +6,8 @@ interface StepperProps {
     onPress?: (stepIndex: number) => void;
     stepStyle?: "circular" | "square";
     totalSteps: number;
+    stepType?: "number" | "icon" | "empty";
+    icon?: React.ReactNode | React.ReactNode[];
 }
 declare const Stepper: React.FC<StepperProps>;
 export default Stepper;

package/dist/index.esm.js

@@ -1,6 +1,6 @@
-/*! aport-tools v4.4.1 | ISC */
+/*! aport-tools v4.4.3 | ISC */
 import React, { useContext, useState, createContext, useCallback, useMemo } from 'react';
-import { StyleSheet, Animated, View, TouchableOpacity, Text as Text$1, TextInput, Modal, Pressable, FlatList, Keyboard, Platform, Image, Alert, ActivityIndicator } from 'react-native';
+import { StyleSheet, Text as Text$1, Animated, View, TouchableOpacity, Image, TextInput, Modal, Pressable, FlatList, Keyboard, Platform, Alert, ActivityIndicator } from 'react-native';
 import { ThemeContext } from 'aport-themes';
 import * as ImagePicker from 'expo-image-picker';
 
@@ -97,6 +97,79 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
+// src/fonts/Text.tsx
+/**
+ * A dynamic Text component that supports HTML-like formatting.
+ * Integrates with the Theme system for consistent styling.
+ *
+ * @param children - The content to be displayed inside the Text component.
+ * @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.
+ * @param style - Additional styles to apply.
+ */
+var Text = function Text(_a) {
+  var _b;
+  var children = _a.children,
+    _c = _a.size,
+    size = _c === void 0 ? 14 : _c,
+    _d = _a.b,
+    b = _d === void 0 ? false : _d,
+    _e = _a.i,
+    i = _e === void 0 ? false : _e,
+    _f = _a.u,
+    u = _f === void 0 ? false : _f,
+    _g = _a.align,
+    align = _g === void 0 ? 'left' : _g,
+    _h = _a.type,
+    type = _h === void 0 ? 'text' : _h,
+    _j = _a.typeFont,
+    typeFont = _j === void 0 ? 'body' : _j,
+    _k = _a.h,
+    h = _k === void 0 ? 0 : _k,
+    style = _a.style;
+  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
+  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' : fontSettings.fontWeight || '400';
+  // Define font style based on italic prop
+  var fontStyle = i ? 'italic' : 'normal';
+  // Define text decoration based on underline prop
+  var textDecorationLine = u ? 'underline' : 'none';
+  // Define text alignment
+  var textAlign = align;
+  // Map the 'type' prop to the correct color from the theme
+  var textColor = ((_b = colors[type]) === null || _b === void 0 ? void 0 : _b.hex) || colors.text.hex;
+  // Combine all styles
+  var textStyles = {
+    fontSize: fontSize,
+    fontWeight: fontWeight,
+    fontFamily: fontFamily,
+    fontStyle: fontStyle,
+    textDecorationLine: textDecorationLine,
+    textAlign: textAlign,
+    color: textColor
+  };
+  return /*#__PURE__*/React.createElement(Text$1, {
+    style: [textStyles, style]
+  }, children);
+};
+StyleSheet.create({
+  // Define any default styles if needed
+});
+
 var Stepper = function Stepper(_a) {
   var steps = _a.steps,
     currentStep = _a.currentStep,
@@ -105,8 +178,13 @@ var Stepper = function Stepper(_a) {
     _onPress = _a.onPress,
     _c = _a.stepStyle,
     stepStyle = _c === void 0 ? "circular" : _c,
-    totalSteps = _a.totalSteps;
+    totalSteps = _a.totalSteps,
+    _d = _a.stepType,
+    stepType = _d === void 0 ? "number" : _d,
+    icon = _a.icon;
   var progressAnim = React.useRef(new Animated.Value(0)).current;
+  var theme = useContext(ThemeContext).theme;
+  var colors = theme.colors;
   React.useEffect(function () {
     Animated.timing(progressAnim, {
       toValue: currentStep,
@@ -114,6 +192,15 @@ var Stepper = function Stepper(_a) {
       useNativeDriver: false
     }).start();
   }, [currentStep]);
+  React.useEffect(function () {
+    if (stepType === "icon") {
+      if (!icon) {
+        console.error("Stepper: `icon` is required when stepType is 'icon'.");
+      } else if (Array.isArray(icon) && icon.length !== totalSteps) {
+        console.error("Stepper: Number of icons (".concat(icon.length, ") must match totalSteps (").concat(totalSteps, ")."));
+      }
+    }
+  }, [stepType, icon, totalSteps]);
   var getSeparatorWidth = function getSeparatorWidth(index) {
     if (currentStep > index && currentStep < index + 1) {
       // Return the fractional percentage for odd steps
@@ -121,6 +208,53 @@ var Stepper = function Stepper(_a) {
     }
     return currentStep > index ? "100%" : "0%";
   };
+  var renderStepContent = function renderStepContent(index) {
+    switch (stepType) {
+      case "icon":
+        if (Array.isArray(icon)) {
+          var stepIcon = icon[index];
+          if (typeof stepIcon === "string") {
+            return /*#__PURE__*/React.createElement(Image, {
+              source: {
+                uri: stepIcon
+              },
+              style: {
+                width: 24,
+                height: 24
+              },
+              resizeMode: "contain"
+            });
+          } else {
+            console.error("Invalid icon value for step ".concat(index, ". Expected a string URI."));
+            return null;
+          }
+        }
+        if (typeof icon === "string") {
+          return /*#__PURE__*/React.createElement(Image, {
+            source: {
+              uri: icon
+            },
+            style: {
+              width: 24,
+              height: 24
+            },
+            resizeMode: "contain"
+          });
+        }
+        console.error("Icon prop must be a string or an array of strings.");
+        return null;
+      case "empty":
+        return null;
+      case "number":
+      default:
+        return /*#__PURE__*/React.createElement(Text, {
+          style: {
+            fontSize: 16,
+            fontWeight: "bold"
+          }
+        }, index + 1);
+    }
+  };
   return /*#__PURE__*/React.createElement(View, {
     style: styles$9.container
   }, Array.from({
@@ -137,10 +271,12 @@ var Stepper = function Stepper(_a) {
         return _onPress && _onPress(index);
       }
     }, /*#__PURE__*/React.createElement(View, {
-      style: [styles$9.step, stepStyle === "square" && styles$9.squareStep, currentStep >= index && styles$9.activeStep]
-    }, /*#__PURE__*/React.createElement(Text$1, {
-      style: styles$9.stepLabel
-    }, index + 1)), steps && /*#__PURE__*/React.createElement(Text$1, {
+      style: [styles$9.step, stepStyle === "square" && styles$9.squareStep, currentStep >= index && {
+        backgroundColor: colors.primary.hex
+      }, {
+        backgroundColor: colors.body.hex
+      }]
+    }, renderStepContent(index)), steps && /*#__PURE__*/React.createElement(Text, {
       style: styles$9.stepText
     }, steps[index])), index < totalSteps - 1 && (/*#__PURE__*/React.createElement(View, {
       style: styles$9.separatorContainer
@@ -148,7 +284,8 @@ var Stepper = function Stepper(_a) {
       style: styles$9.separatorBackground
     }), /*#__PURE__*/React.createElement(Animated.View, {
       style: [styles$9.separatorProgress, {
-        width: getSeparatorWidth(index)
+        width: getSeparatorWidth(index),
+        backgroundColor: colors.primary.hex
       }]
     }))));
   }));
@@ -169,7 +306,6 @@ var styles$9 = StyleSheet.create({
     height: 30,
     borderRadius: 15,
     // Default to circular
-    backgroundColor: "#aaaaaa",
     alignItems: "center",
     justifyContent: "center",
     marginBottom: 4
@@ -177,9 +313,6 @@ var styles$9 = StyleSheet.create({
   squareStep: {
     borderRadius: 5 // Square shape
   },
-  activeStep: {
-    backgroundColor: "#3498db"
-  },
   stepLabel: {
     color: "#ffffff",
     fontWeight: "bold"
@@ -205,7 +338,6 @@ var styles$9 = StyleSheet.create({
   separatorProgress: {
     position: "absolute",
     height: "100%",
-    backgroundColor: "#3498db",
     borderRadius: 2
   }
 });
@@ -268,83 +400,12 @@ var Form = function Form(_a) {
     currentStep: stepper.step,
     presseable: stepper.presseable,
     onPress: stepper.onPress,
-    totalSteps: stepper.totalSteps
+    totalSteps: stepper.totalSteps,
+    stepType: stepper.stepType,
+    icon: stepper.icon
   })), children);
 };
 
-// src/fonts/Text.tsx
-/**
- * A dynamic Text component that supports HTML-like formatting.
- * Integrates with the Theme system for consistent styling.
- *
- * @param children - The content to be displayed inside the Text component.
- * @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.
- * @param style - Additional styles to apply.
- */
-var Text = function Text(_a) {
-  var _b;
-  var children = _a.children,
-    _c = _a.size,
-    size = _c === void 0 ? 14 : _c,
-    _d = _a.b,
-    b = _d === void 0 ? false : _d,
-    _e = _a.i,
-    i = _e === void 0 ? false : _e,
-    _f = _a.u,
-    u = _f === void 0 ? false : _f,
-    _g = _a.align,
-    align = _g === void 0 ? 'left' : _g,
-    _h = _a.type,
-    type = _h === void 0 ? 'text' : _h,
-    _j = _a.typeFont,
-    typeFont = _j === void 0 ? 'body' : _j,
-    _k = _a.h,
-    h = _k === void 0 ? 0 : _k,
-    style = _a.style;
-  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
-  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' : fontSettings.fontWeight || '400';
-  // Define font style based on italic prop
-  var fontStyle = i ? 'italic' : 'normal';
-  // Define text decoration based on underline prop
-  var textDecorationLine = u ? 'underline' : 'none';
-  // Define text alignment
-  var textAlign = align;
-  // Map the 'type' prop to the correct color from the theme
-  var textColor = ((_b = colors[type]) === null || _b === void 0 ? void 0 : _b.hex) || colors.text.hex;
-  // Combine all styles
-  var textStyles = {
-    fontSize: fontSize,
-    fontWeight: fontWeight,
-    fontFamily: fontFamily,
-    fontStyle: fontStyle,
-    textDecorationLine: textDecorationLine,
-    textAlign: textAlign,
-    color: textColor
-  };
-  return /*#__PURE__*/React.createElement(Text$1, {
-    style: [textStyles, style]
-  }, children);
-};
-StyleSheet.create({
-  // Define any default styles if needed
-});
-
 // src/forms/ErrorList.tsx
 var ErrorList = function ErrorList(_a) {
   var errors = _a.errors;