aport-tools 4.4.0 → 4.4.2

package/dist/forms/FormContext.d.ts

@@ -8,10 +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

@@ -1,9 +1,13 @@
 import React from "react";
 interface StepperProps {
-    steps: string[];
+    steps?: string[];
     currentStep: number;
     presseable?: boolean;
     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.0 | ISC */
+/*! aport-tools v4.4.2 | ISC */
 import React, { useContext, useState, createContext, useCallback, useMemo } from 'react';
-import { StyleSheet, 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, TextInput, Modal, Pressable, FlatList, Keyboard, Platform, Image, Alert, ActivityIndicator } from 'react-native';
 import { ThemeContext } from 'aport-themes';
 import * as ImagePicker from 'expo-image-picker';
 
@@ -97,29 +97,166 @@ 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,
     _b = _a.presseable,
     presseable = _b === void 0 ? false : _b,
-    _onPress = _a.onPress;
+    _onPress = _a.onPress,
+    _c = _a.stepStyle,
+    stepStyle = _c === void 0 ? "circular" : _c,
+    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,
+      duration: 300,
+      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
+      return "".concat(((currentStep - index) * 100).toFixed(0), "%");
+    }
+    return currentStep > index ? "100%" : "0%";
+  };
+  var renderStepContent = function renderStepContent(index) {
+    switch (stepType) {
+      case "icon":
+        if (Array.isArray(icon)) {
+          return icon[index]; // Render individual icon for each step
+        }
+        return icon;
+      // Render the same icon for all steps
+      case "empty":
+        return null;
+      // Render nothing inside the step circle
+      case "number":
+      default:
+        return index + 1;
+      // Default to rendering step numbers
+    }
+  };
   return /*#__PURE__*/React.createElement(View, {
     style: styles$9.container
-  }, steps.map(function (label, index) {
-    return /*#__PURE__*/React.createElement(TouchableOpacity, {
-      key: index,
-      style: [styles$9.stepContainer, index <= currentStep ? styles$9.activeStep : styles$9.inactiveStep],
+  }, Array.from({
+    length: totalSteps
+  }, function (_, index) {
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: index
+    }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+      style: [styles$9.stepContainer, presseable && {
+        cursor: "pointer"
+      }],
       disabled: !presseable,
       onPress: function onPress() {
         return _onPress && _onPress(index);
       }
     }, /*#__PURE__*/React.createElement(View, {
-      style: styles$9.stepCircle
-    }, /*#__PURE__*/React.createElement(Text$1, {
-      style: styles$9.stepLabel
-    }, index + 1)), /*#__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
-    }, label));
+    }, steps[index])), index < totalSteps - 1 && (/*#__PURE__*/React.createElement(View, {
+      style: styles$9.separatorContainer
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles$9.separatorBackground
+    }), /*#__PURE__*/React.createElement(Animated.View, {
+      style: [styles$9.separatorProgress, {
+        width: getSeparatorWidth(index)
+      }]
+    }))));
   }));
 };
 var styles$9 = StyleSheet.create({
@@ -133,19 +270,17 @@ var styles$9 = StyleSheet.create({
     alignItems: "center",
     flex: 1
   },
-  stepCircle: {
+  step: {
     width: 30,
     height: 30,
     borderRadius: 15,
+    // Default to circular
     alignItems: "center",
     justifyContent: "center",
     marginBottom: 4
   },
-  activeStep: {
-    backgroundColor: "#3498db"
-  },
-  inactiveStep: {
-    backgroundColor: "#aaaaaa"
+  squareStep: {
+    borderRadius: 5 // Square shape
   },
   stepLabel: {
     color: "#ffffff",
@@ -153,7 +288,27 @@ var styles$9 = StyleSheet.create({
   },
   stepText: {
     fontSize: 12,
-    textAlign: "center"
+    textAlign: "center",
+    marginTop: 4
+  },
+  separatorContainer: {
+    flex: 1,
+    height: 4,
+    marginHorizontal: 8,
+    position: "relative"
+  },
+  separatorBackground: {
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    backgroundColor: "#aaaaaa",
+    borderRadius: 2
+  },
+  separatorProgress: {
+    position: "absolute",
+    height: "100%",
+    backgroundColor: "#3498db",
+    borderRadius: 2
   }
 });
 
@@ -214,83 +369,13 @@ var Form = function Form(_a) {
     steps: stepper.steps,
     currentStep: stepper.step,
     presseable: stepper.presseable,
-    onPress: stepper.onPress
+    onPress: stepper.onPress,
+    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;