aport-tools 4.1.23 → 4.1.24

package/dist/forms/FormContext.d.ts

@@ -3,7 +3,8 @@ interface FormContextProps {
     formValues: Record<string, any>;
     setFormValue: (name: string, value: any) => void;
     errors: Record<string, string[]>;
-    handleSubmit: (event: React.FormEvent<HTMLFormElement>) => Promise<void>;
+    setErrors: (errors: Record<string, string[]>) => void;
+    handleSubmit: () => void;
 }
 export declare const useFormContext: () => FormContextProps;
 interface FormProps {

package/dist/index.esm.js

@@ -1,6 +1,6 @@
-/*! aport-tools v4.1.23 | ISC */
+/*! aport-tools v4.1.24 | ISC */
 import React, { createContext, useState, useEffect, useContext, useMemo } from 'react';
-import { Appearance, StyleSheet, View, Text as Text$1, Switch, TouchableOpacity, ActivityIndicator, Platform, TextInput } from 'react-native';
+import { Appearance, StyleSheet, View, Text as Text$1, Switch, TextInput, TouchableOpacity, ActivityIndicator, Platform } from 'react-native';
 import { useAsyncStorage } from '@react-native-async-storage/async-storage';
 
 /******************************************************************************
@@ -363,173 +363,62 @@ var styles$6 = StyleSheet.create({
   }
 });
 
-// src/components/Button.tsx
-/**
- * Determines the styles based on the button type and whether it is disabled.
- *
- * @param type - The type of the button ('submit', 'button', 'cancel').
- * @param disabled - Whether the button is disabled.
- * @param themeColors - The theme colors.
- * @returns The computed style for the button.
- */
-function typeStyles(type, disabled, themeColors) {
-  switch (type) {
-    case 'submit':
-      return {
-        backgroundColor: "rgba(".concat(themeColors === null || themeColors === void 0 ? void 0 : themeColors.primary.rgb.r, ", ").concat(themeColors === null || themeColors === void 0 ? void 0 : themeColors.primary.rgb.g, ", ").concat(themeColors === null || themeColors === void 0 ? void 0 : themeColors.primary.rgb.b, ", ").concat(disabled ? 0.5 : 1, ")"),
-        borderWidth: 2,
-        borderColor: themeColors === null || themeColors === void 0 ? void 0 : themeColors.primary.hex
-      };
-    case 'button':
-      return {
-        backgroundColor: themeColors === null || themeColors === void 0 ? void 0 : themeColors.primary.hex,
-        borderColor: themeColors === null || themeColors === void 0 ? void 0 : themeColors.secondary.hex,
-        opacity: disabled ? 0.5 : 1,
-        borderWidth: 2
-      };
-    case 'cancel':
-      return {
-        backgroundColor: themeColors === null || themeColors === void 0 ? void 0 : themeColors.background.hex,
-        borderWidth: 0
-      };
-    default:
-      return {};
+// src/forms/FormContext.tsx
+var FormContext = /*#__PURE__*/createContext(undefined);
+var useFormContext = function useFormContext() {
+  var context = useContext(FormContext);
+  if (!context) {
+    throw new Error("useFormContext must be used within a Form");
   }
-}
-/**
- * Button component that adapts its styles based on the current theme.
- * Supports dynamic styling, full-width option, rounded corners, and different types.
- *
- * @param disabled - If true, the button is disabled and not pressable.
- * @param isFullWidth - If true, the button expands to full width of its container.
- * @param children - Text content of the button.
- * @param onPress - Function to call when the button is pressed.
- * @param rounded - If true, the button has rounded corners.
- * @param borderRadius - Custom border radius value. Overrides the `rounded` prop if provided.
- * @param type - Specifies the button type for styling ('submit', 'button', 'cancel').
- */
-var Button = function Button(_a) {
-  var children = _a.children,
-    _b = _a.disabled,
-    disabled = _b === void 0 ? false : _b,
-    _c = _a.type,
-    type = _c === void 0 ? 'button' : _c,
-    _d = _a.rounded,
-    rounded = _d === void 0 ? true : _d,
-    _e = _a.borderRadius,
-    borderRadius = _e === void 0 ? 30 : _e,
-    _f = _a.isFullWidth,
-    isFullWidth = _f === void 0 ? false : _f,
-    _g = _a.loading,
-    loading = _g === void 0 ? false : _g,
-    onPress = _a.onPress;
-  var theme = useContext(ThemeContext).theme;
-  var colors = theme.colors;
-  var computedStyles = useMemo(function () {
-    return StyleSheet.flatten([styles$5.button, typeStyles(type, disabled, colors), rounded && {
-      borderRadius: borderRadius
-    }, isFullWidth && {
-      width: '100%'
-    }, (disabled || loading) && styles$5.disabled]);
-  }, [type, disabled, loading, rounded, borderRadius, isFullWidth, colors]);
-  var textColor = useMemo(function () {
-    return {
-      color: colors.textButton.hex
-    };
-  }, [type, colors]);
-  return /*#__PURE__*/React.createElement(TouchableOpacity, {
-    style: computedStyles,
-    disabled: disabled || loading,
-    onPress: onPress,
-    activeOpacity: 0.7
-  }, loading ? (
-  /*#__PURE__*/
-  // Show loading spinner if loading
-  React.createElement(ActivityIndicator, {
-    size: "small",
-    color: colors.textButton.hex
-  })) : (/*#__PURE__*/React.createElement(Text$1, {
-    style: textColor
-  }, Array.isArray(children) ? children.join('').toUpperCase() : children === null || children === void 0 ? void 0 : children.toUpperCase())));
+  return context;
 };
-var styles$5 = StyleSheet.create({
-  button: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingVertical: 10,
-    paddingHorizontal: 20
-  },
-  disabled: {
-    opacity: 0.6
-  }
-});
-
-// src/cards/Card.tsx
-/**
- * Card component that adapts its styles based on the current theme.
- * Supports dynamic styling, shadows, and press animations.
- *
- * @param children - The content to be displayed inside the Card.
- * @param style - Additional styles to apply to the Card.
- * @param onPress - Function to execute when the Card is pressed.
- * @param pressable - Determines if the Card is pressable. Defaults to false.
- * @param borderRadius - Border radius of the Card. Defaults to 12.
- * @param elevation - Elevation for Android shadow. Overrides default.
- * @param shadowProps - Custom shadow properties for iOS. Overrides defaults.
- */
-var Card = function Card(_a) {
+var Form = function Form(_a) {
   var children = _a.children,
-    style = _a.style,
-    onPress = _a.onPress,
-    _b = _a.pressable,
-    pressable = _b === void 0 ? false : _b,
-    _c = _a.borderRadius,
-    borderRadius = _c === void 0 ? 12 : _c,
-    _d = _a.elevation,
-    elevation = _d === void 0 ? 4 : _d,
-    _e = _a.shadowProps,
-    shadowProps = _e === void 0 ? {} : _e;
-  var theme = useContext(ThemeContext).theme;
-  var colors = theme.colors;
-  // Animation state for pressable effect
-  // Default shadow styles (improved platform-specific handling)
-  var defaultShadow = Platform.select({
-    ios: {
-      shadowColor: (shadowProps === null || shadowProps === void 0 ? void 0 : shadowProps.shadowColor) || colors.text.hex,
-      // Defaulting to theme text color
-      shadowOffset: (shadowProps === null || shadowProps === void 0 ? void 0 : shadowProps.shadowOffset) || {
-        width: 0,
-        height: 2
-      },
-      shadowOpacity: (shadowProps === null || shadowProps === void 0 ? void 0 : shadowProps.shadowOpacity) || 0.1,
-      shadowRadius: (shadowProps === null || shadowProps === void 0 ? void 0 : shadowProps.shadowRadius) || 4
-    },
-    android: {
-      elevation: elevation // Only applies to Android
+    onSubmit = _a.onSubmit;
+  var _b = useState({}),
+    formValues = _b[0],
+    setFormValues = _b[1];
+  var _c = useState({}),
+    errors = _c[0],
+    setErrors = _c[1];
+  var setFormValue = function setFormValue(name, value) {
+    setFormValues(function (prev) {
+      var _a;
+      return __assign(__assign({}, prev), (_a = {}, _a[name] = value, _a));
+    });
+  };
+  var handleSubmit = function handleSubmit() {
+    return __awaiter(void 0, void 0, void 0, function () {
+      var validationErrors;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            return [4 /*yield*/, onSubmit(formValues)];
+          case 1:
+            validationErrors = _a.sent();
+            // Set the validation errors in state
+            setErrors(validationErrors);
+            // Prevent submission if there are any errors
+            if (Object.keys(validationErrors).length > 0) {
+              return [2 /*return*/]; // Prevent submission
+            }
+            // If no errors, continue submission process (e.g., calling an API, navigating, etc.)
+            console.log('Form submitted successfully:', formValues);
+            return [2 /*return*/];
+        }
+      });
+    });
+  };
+  return /*#__PURE__*/React.createElement(FormContext.Provider, {
+    value: {
+      formValues: formValues,
+      setFormValue: setFormValue,
+      errors: errors,
+      setErrors: setErrors,
+      handleSubmit: handleSubmit
     }
-  });
-  var cardStyles = [styles$4.container, {
-    borderRadius: borderRadius,
-    backgroundColor: colors.body.hex
-  }, defaultShadow,
-  // Dynamic shadows based on platform
-  style // External styles
-  ];
-  return pressable ? (/*#__PURE__*/React.createElement(TouchableOpacity, {
-    activeOpacity: 0.8,
-    onPress: onPress,
-    style: cardStyles
-  }, children)) : (/*#__PURE__*/React.createElement(View, {
-    style: cardStyles
-  }, children));
+  }, children);
 };
-var styles$4 = StyleSheet.create({
-  container: {
-    padding: 16,
-    borderRadius: 12
-    // Shadows handled dynamically with platform logic
-  }
-});
 
 // src/fonts/Text.tsx
 /**
@@ -595,83 +484,29 @@ StyleSheet.create({
   // Define any default styles if needed
 });
 
-var FormContext = /*#__PURE__*/createContext(undefined);
-var useFormContext = function useFormContext() {
-  var context = useContext(FormContext);
-  if (!context) {
-    throw new Error("useFormContext must be used within a Form");
-  }
-  return context;
-};
-var Form = function Form(_a) {
-  var children = _a.children,
-    onSubmit = _a.onSubmit;
-  var _b = useState({}),
-    formValues = _b[0],
-    setFormValues = _b[1];
-  var _c = useState({}),
-    errors = _c[0],
-    setErrors = _c[1];
-  var setFormValue = function setFormValue(name, value) {
-    setFormValues(function (prev) {
-      var _a;
-      return __assign(__assign({}, prev), (_a = {}, _a[name] = value, _a));
-    });
-  };
-  var handleSubmit = function handleSubmit(event) {
-    return __awaiter(void 0, void 0, void 0, function () {
-      var validationErrors;
-      return __generator(this, function (_a) {
-        switch (_a.label) {
-          case 0:
-            event.preventDefault(); // Prevent native submission
-            return [4 /*yield*/, onSubmit(formValues)];
-          case 1:
-            validationErrors = _a.sent();
-            setErrors(validationErrors);
-            if (Object.keys(validationErrors).length > 0) {
-              return [2 /*return*/]; // Do not proceed if there are validation errors
-            }
-            return [2 /*return*/];
-        }
-      });
-    });
-  };
-  return /*#__PURE__*/React.createElement(FormContext.Provider, {
-    value: {
-      formValues: formValues,
-      setFormValue: setFormValue,
-      errors: errors,
-      handleSubmit: handleSubmit
-    }
-  }, /*#__PURE__*/React.createElement("form", {
-    onSubmit: handleSubmit
-  }, children));
-};
-
 // src/forms/ErrorList.tsx
 var ErrorList = function ErrorList(_a) {
   var errors = _a.errors;
   var theme = useContext(ThemeContext).theme;
   var colors = theme.colors;
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$3.container
+    style: styles$5.container
   }, errors.map(function (error, index) {
     return /*#__PURE__*/React.createElement(View, {
       key: index,
-      style: styles$3.errorItem
+      style: styles$5.errorItem
     }, /*#__PURE__*/React.createElement(Text, {
-      style: [styles$3.bullet, {
+      style: [styles$5.bullet, {
         color: colors.error.hex
       }]
     }, "\u2022"), /*#__PURE__*/React.createElement(Text, {
-      style: [styles$3.errorText, {
+      style: [styles$5.errorText, {
         color: colors.error.hex
       }]
     }, error));
   }));
 };
-var styles$3 = StyleSheet.create({
+var styles$5 = StyleSheet.create({
   container: {
     marginTop: 4
   },
@@ -706,13 +541,13 @@ var Input = function Input(_a) {
     setFormValue(name, text);
   };
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$2.container
+    style: styles$4.container
   }, /*#__PURE__*/React.createElement(Text, {
-    style: [styles$2.label, {
+    style: [styles$4.label, {
       color: colors.text.hex
     }]
   }, label), /*#__PURE__*/React.createElement(TextInput, __assign({
-    style: [styles$2.input, {
+    style: [styles$4.input, {
       backgroundColor: colors.body.hex,
       borderColor: formErrors[name] ? colors.error.hex : '#CCC',
       color: colors.text.hex
@@ -725,7 +560,7 @@ var Input = function Input(_a) {
     errors: formErrors[name]
   })));
 };
-var styles$2 = StyleSheet.create({
+var styles$4 = StyleSheet.create({
   container: {
     marginBottom: 16
   },
@@ -756,11 +591,11 @@ var TextArea = function TextArea(_a) {
     setFormValue(name, text);
   };
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$1.container
+    style: styles$3.container
   }, /*#__PURE__*/React.createElement(Text, {
-    style: styles$1.label
+    style: styles$3.label
   }, label), /*#__PURE__*/React.createElement(TextInput, __assign({
-    style: [styles$1.textArea, style],
+    style: [styles$3.textArea, style],
     value: formValues[name] || '',
     onChangeText: handleChange,
     placeholder: label,
@@ -773,7 +608,7 @@ var TextArea = function TextArea(_a) {
     errors: formErrors[name]
   })));
 };
-var styles$1 = StyleSheet.create({
+var styles$3 = StyleSheet.create({
   container: {
     marginBottom: 16
   },
@@ -802,17 +637,193 @@ var Label = function Label(_a) {
   var theme = useContext(ThemeContext).theme;
   var colors = theme.colors;
   return /*#__PURE__*/React.createElement(Text, {
-    style: [styles.label, style, {
+    style: [styles$2.label, style, {
       color: colors.text.hex
     }]
   }, text);
 };
-var styles = StyleSheet.create({
+var styles$2 = StyleSheet.create({
   label: {
     marginBottom: 4,
     fontWeight: '500'
   }
 });
 
+// src/components/Button.tsx
+/**
+ * Determines the styles based on the button type and whether it is disabled.
+ *
+ * @param type - The type of the button ('submit', 'button', 'cancel').
+ * @param disabled - Whether the button is disabled.
+ * @param themeColors - The theme colors.
+ * @returns The computed style for the button.
+ */
+function typeStyles(type, disabled, themeColors) {
+  switch (type) {
+    case 'submit':
+      return {
+        backgroundColor: "rgba(".concat(themeColors === null || themeColors === void 0 ? void 0 : themeColors.primary.rgb.r, ", ").concat(themeColors === null || themeColors === void 0 ? void 0 : themeColors.primary.rgb.g, ", ").concat(themeColors === null || themeColors === void 0 ? void 0 : themeColors.primary.rgb.b, ", ").concat(disabled ? 0.5 : 1, ")"),
+        borderWidth: 2,
+        borderColor: themeColors === null || themeColors === void 0 ? void 0 : themeColors.primary.hex
+      };
+    case 'button':
+      return {
+        backgroundColor: themeColors === null || themeColors === void 0 ? void 0 : themeColors.primary.hex,
+        borderColor: themeColors === null || themeColors === void 0 ? void 0 : themeColors.secondary.hex,
+        opacity: disabled ? 0.5 : 1,
+        borderWidth: 2
+      };
+    case 'cancel':
+      return {
+        backgroundColor: themeColors === null || themeColors === void 0 ? void 0 : themeColors.background.hex,
+        borderWidth: 0
+      };
+    default:
+      return {};
+  }
+}
+/**
+ * Button component that adapts its styles based on the current theme.
+ * Supports dynamic styling, full-width option, rounded corners, and different types.
+ *
+ * @param disabled - If true, the button is disabled and not pressable.
+ * @param isFullWidth - If true, the button expands to full width of its container.
+ * @param children - Text content of the button.
+ * @param onPress - Function to call when the button is pressed.
+ * @param rounded - If true, the button has rounded corners.
+ * @param borderRadius - Custom border radius value. Overrides the `rounded` prop if provided.
+ * @param type - Specifies the button type for styling ('submit', 'button', 'cancel').
+ */
+var Button = function Button(_a) {
+  var children = _a.children,
+    _b = _a.disabled,
+    disabled = _b === void 0 ? false : _b,
+    _c = _a.type,
+    type = _c === void 0 ? 'button' : _c,
+    _d = _a.rounded,
+    rounded = _d === void 0 ? true : _d,
+    _e = _a.borderRadius,
+    borderRadius = _e === void 0 ? 30 : _e,
+    _f = _a.isFullWidth,
+    isFullWidth = _f === void 0 ? false : _f,
+    _g = _a.loading,
+    loading = _g === void 0 ? false : _g,
+    onPress = _a.onPress;
+  var theme = useContext(ThemeContext).theme;
+  var colors = theme.colors;
+  var handleSubmit = useFormContext().handleSubmit;
+  var computedStyles = useMemo(function () {
+    return StyleSheet.flatten([styles$1.button, typeStyles(type, disabled, colors), rounded && {
+      borderRadius: borderRadius
+    }, isFullWidth && {
+      width: '100%'
+    }, (disabled || loading) && styles$1.disabled]);
+  }, [type, disabled, loading, rounded, borderRadius, isFullWidth, colors]);
+  var textColor = useMemo(function () {
+    return {
+      color: colors.textButton.hex
+    };
+  }, [type, colors]);
+  var handlePress = function handlePress() {
+    if (type === 'submit') {
+      handleSubmit(); // Call the form's submit handler
+    } else if (onPress) {
+      onPress(); // Call a custom handler if needed
+    }
+  };
+  return /*#__PURE__*/React.createElement(TouchableOpacity, {
+    style: computedStyles,
+    disabled: disabled || loading,
+    onPress: handlePress,
+    activeOpacity: 0.7
+  }, loading ? (
+  /*#__PURE__*/
+  // Show loading spinner if loading
+  React.createElement(ActivityIndicator, {
+    size: "small",
+    color: colors.textButton.hex
+  })) : (/*#__PURE__*/React.createElement(Text$1, {
+    style: textColor
+  }, Array.isArray(children) ? children.join('').toUpperCase() : children === null || children === void 0 ? void 0 : children.toUpperCase())));
+};
+var styles$1 = StyleSheet.create({
+  button: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: 10,
+    paddingHorizontal: 20
+  },
+  disabled: {
+    opacity: 0.6
+  }
+});
+
+// src/cards/Card.tsx
+/**
+ * Card component that adapts its styles based on the current theme.
+ * Supports dynamic styling, shadows, and press animations.
+ *
+ * @param children - The content to be displayed inside the Card.
+ * @param style - Additional styles to apply to the Card.
+ * @param onPress - Function to execute when the Card is pressed.
+ * @param pressable - Determines if the Card is pressable. Defaults to false.
+ * @param borderRadius - Border radius of the Card. Defaults to 12.
+ * @param elevation - Elevation for Android shadow. Overrides default.
+ * @param shadowProps - Custom shadow properties for iOS. Overrides defaults.
+ */
+var Card = function Card(_a) {
+  var children = _a.children,
+    style = _a.style,
+    onPress = _a.onPress,
+    _b = _a.pressable,
+    pressable = _b === void 0 ? false : _b,
+    _c = _a.borderRadius,
+    borderRadius = _c === void 0 ? 12 : _c,
+    _d = _a.elevation,
+    elevation = _d === void 0 ? 4 : _d,
+    _e = _a.shadowProps,
+    shadowProps = _e === void 0 ? {} : _e;
+  var theme = useContext(ThemeContext).theme;
+  var colors = theme.colors;
+  // Animation state for pressable effect
+  // Default shadow styles (improved platform-specific handling)
+  var defaultShadow = Platform.select({
+    ios: {
+      shadowColor: (shadowProps === null || shadowProps === void 0 ? void 0 : shadowProps.shadowColor) || colors.text.hex,
+      // Defaulting to theme text color
+      shadowOffset: (shadowProps === null || shadowProps === void 0 ? void 0 : shadowProps.shadowOffset) || {
+        width: 0,
+        height: 2
+      },
+      shadowOpacity: (shadowProps === null || shadowProps === void 0 ? void 0 : shadowProps.shadowOpacity) || 0.1,
+      shadowRadius: (shadowProps === null || shadowProps === void 0 ? void 0 : shadowProps.shadowRadius) || 4
+    },
+    android: {
+      elevation: elevation // Only applies to Android
+    }
+  });
+  var cardStyles = [styles.container, {
+    borderRadius: borderRadius,
+    backgroundColor: colors.body.hex
+  }, defaultShadow,
+  // Dynamic shadows based on platform
+  style // External styles
+  ];
+  return pressable ? (/*#__PURE__*/React.createElement(TouchableOpacity, {
+    activeOpacity: 0.8,
+    onPress: onPress,
+    style: cardStyles
+  }, children)) : (/*#__PURE__*/React.createElement(View, {
+    style: cardStyles
+  }, children));
+};
+var styles = StyleSheet.create({
+  container: {
+    padding: 16,
+    borderRadius: 12
+    // Shadows handled dynamically with platform logic
+  }
+});
+
 export { Button, Card, ErrorList, Form, Input, Label, Text, TextArea, ThemeContext, ThemeProvider, ThemeToggle, useFormContext };
 //# sourceMappingURL=index.esm.js.map