aport-tools 4.4.0 → 4.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -1,4 +1,4 @@
1
- /*! aport-tools v4.4.0 | ISC */
1
+ /*! aport-tools v4.4.2 | ISC */
2
2
  'use strict';
3
3
 
4
4
  var React = require('react');
@@ -118,29 +118,166 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
118
118
  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
119
119
  };
120
120
 
121
+ // src/fonts/Text.tsx
122
+ /**
123
+ * A dynamic Text component that supports HTML-like formatting.
124
+ * Integrates with the Theme system for consistent styling.
125
+ *
126
+ * @param children - The content to be displayed inside the Text component.
127
+ * @param size - Size of the text. Defaults to 'medium'.
128
+ * @param b - If true, applies bold styling.
129
+ * @param i - If true, applies italic styling.
130
+ * @param type - Type of Text component. Defaults to 'text'.
131
+ * @param typeFont - Type of Font component. Defaults to 'body'.
132
+ * @param u - If true, applies underline styling.
133
+ * @param align - Paragraph alignment. Defaults to 'left'.
134
+ * @param h - Header level. Accepts 0 (none), 1, 2, or 3. Defaults to 0.
135
+ * @param style - Additional styles to apply.
136
+ */
137
+ var Text = function Text(_a) {
138
+ var _b;
139
+ var children = _a.children,
140
+ _c = _a.size,
141
+ size = _c === void 0 ? 14 : _c,
142
+ _d = _a.b,
143
+ b = _d === void 0 ? false : _d,
144
+ _e = _a.i,
145
+ i = _e === void 0 ? false : _e,
146
+ _f = _a.u,
147
+ u = _f === void 0 ? false : _f,
148
+ _g = _a.align,
149
+ align = _g === void 0 ? 'left' : _g,
150
+ _h = _a.type,
151
+ type = _h === void 0 ? 'text' : _h,
152
+ _j = _a.typeFont,
153
+ typeFont = _j === void 0 ? 'body' : _j,
154
+ _k = _a.h,
155
+ h = _k === void 0 ? 0 : _k,
156
+ style = _a.style;
157
+ var theme = React.useContext(aportThemes.ThemeContext).theme;
158
+ var colors = theme.colors,
159
+ fonts = theme.fonts;
160
+ // Determine font family and size based on 'typeFont'
161
+ var fontSettings = fonts[typeFont] || fonts.body;
162
+ var fontFamily = fontSettings.fontFamily;
163
+ var fontSize = fontSettings.fontSize || size;
164
+ // Calculate header size based on 'h' prop
165
+ if (h === 1) fontSize = 32;else if (h === 2) fontSize = 24;else if (h === 3) fontSize = 18;
166
+ // Define font weight based on bold prop
167
+ var fontWeight = b ? '700' : fontSettings.fontWeight || '400';
168
+ // Define font style based on italic prop
169
+ var fontStyle = i ? 'italic' : 'normal';
170
+ // Define text decoration based on underline prop
171
+ var textDecorationLine = u ? 'underline' : 'none';
172
+ // Define text alignment
173
+ var textAlign = align;
174
+ // Map the 'type' prop to the correct color from the theme
175
+ var textColor = ((_b = colors[type]) === null || _b === void 0 ? void 0 : _b.hex) || colors.text.hex;
176
+ // Combine all styles
177
+ var textStyles = {
178
+ fontSize: fontSize,
179
+ fontWeight: fontWeight,
180
+ fontFamily: fontFamily,
181
+ fontStyle: fontStyle,
182
+ textDecorationLine: textDecorationLine,
183
+ textAlign: textAlign,
184
+ color: textColor
185
+ };
186
+ return /*#__PURE__*/React.createElement(reactNative.Text, {
187
+ style: [textStyles, style]
188
+ }, children);
189
+ };
190
+ reactNative.StyleSheet.create({
191
+ // Define any default styles if needed
192
+ });
193
+
121
194
  var Stepper = function Stepper(_a) {
122
195
  var steps = _a.steps,
123
196
  currentStep = _a.currentStep,
124
197
  _b = _a.presseable,
125
198
  presseable = _b === void 0 ? false : _b,
126
- _onPress = _a.onPress;
199
+ _onPress = _a.onPress,
200
+ _c = _a.stepStyle,
201
+ stepStyle = _c === void 0 ? "circular" : _c,
202
+ totalSteps = _a.totalSteps,
203
+ _d = _a.stepType,
204
+ stepType = _d === void 0 ? "number" : _d,
205
+ icon = _a.icon;
206
+ var progressAnim = React.useRef(new reactNative.Animated.Value(0)).current;
207
+ var theme = React.useContext(aportThemes.ThemeContext).theme;
208
+ var colors = theme.colors;
209
+ React.useEffect(function () {
210
+ reactNative.Animated.timing(progressAnim, {
211
+ toValue: currentStep,
212
+ duration: 300,
213
+ useNativeDriver: false
214
+ }).start();
215
+ }, [currentStep]);
216
+ React.useEffect(function () {
217
+ if (stepType === "icon") {
218
+ if (!icon) {
219
+ console.error("Stepper: `icon` is required when stepType is 'icon'.");
220
+ } else if (Array.isArray(icon) && icon.length !== totalSteps) {
221
+ console.error("Stepper: Number of icons (".concat(icon.length, ") must match totalSteps (").concat(totalSteps, ")."));
222
+ }
223
+ }
224
+ }, [stepType, icon, totalSteps]);
225
+ var getSeparatorWidth = function getSeparatorWidth(index) {
226
+ if (currentStep > index && currentStep < index + 1) {
227
+ // Return the fractional percentage for odd steps
228
+ return "".concat(((currentStep - index) * 100).toFixed(0), "%");
229
+ }
230
+ return currentStep > index ? "100%" : "0%";
231
+ };
232
+ var renderStepContent = function renderStepContent(index) {
233
+ switch (stepType) {
234
+ case "icon":
235
+ if (Array.isArray(icon)) {
236
+ return icon[index]; // Render individual icon for each step
237
+ }
238
+ return icon;
239
+ // Render the same icon for all steps
240
+ case "empty":
241
+ return null;
242
+ // Render nothing inside the step circle
243
+ case "number":
244
+ default:
245
+ return index + 1;
246
+ // Default to rendering step numbers
247
+ }
248
+ };
127
249
  return /*#__PURE__*/React.createElement(reactNative.View, {
128
250
  style: styles$9.container
129
- }, steps.map(function (label, index) {
130
- return /*#__PURE__*/React.createElement(reactNative.TouchableOpacity, {
131
- key: index,
132
- style: [styles$9.stepContainer, index <= currentStep ? styles$9.activeStep : styles$9.inactiveStep],
251
+ }, Array.from({
252
+ length: totalSteps
253
+ }, function (_, index) {
254
+ return /*#__PURE__*/React.createElement(React.Fragment, {
255
+ key: index
256
+ }, /*#__PURE__*/React.createElement(reactNative.TouchableOpacity, {
257
+ style: [styles$9.stepContainer, presseable && {
258
+ cursor: "pointer"
259
+ }],
133
260
  disabled: !presseable,
134
261
  onPress: function onPress() {
135
262
  return _onPress && _onPress(index);
136
263
  }
137
264
  }, /*#__PURE__*/React.createElement(reactNative.View, {
138
- style: styles$9.stepCircle
139
- }, /*#__PURE__*/React.createElement(reactNative.Text, {
140
- style: styles$9.stepLabel
141
- }, index + 1)), /*#__PURE__*/React.createElement(reactNative.Text, {
265
+ style: [styles$9.step, stepStyle === "square" && styles$9.squareStep, currentStep >= index && {
266
+ backgroundColor: colors.primary.hex
267
+ }, {
268
+ backgroundColor: colors.body.hex
269
+ }]
270
+ }, renderStepContent(index)), steps && /*#__PURE__*/React.createElement(Text, {
142
271
  style: styles$9.stepText
143
- }, label));
272
+ }, steps[index])), index < totalSteps - 1 && (/*#__PURE__*/React.createElement(reactNative.View, {
273
+ style: styles$9.separatorContainer
274
+ }, /*#__PURE__*/React.createElement(reactNative.View, {
275
+ style: styles$9.separatorBackground
276
+ }), /*#__PURE__*/React.createElement(reactNative.Animated.View, {
277
+ style: [styles$9.separatorProgress, {
278
+ width: getSeparatorWidth(index)
279
+ }]
280
+ }))));
144
281
  }));
145
282
  };
146
283
  var styles$9 = reactNative.StyleSheet.create({
@@ -154,19 +291,17 @@ var styles$9 = reactNative.StyleSheet.create({
154
291
  alignItems: "center",
155
292
  flex: 1
156
293
  },
157
- stepCircle: {
294
+ step: {
158
295
  width: 30,
159
296
  height: 30,
160
297
  borderRadius: 15,
298
+ // Default to circular
161
299
  alignItems: "center",
162
300
  justifyContent: "center",
163
301
  marginBottom: 4
164
302
  },
165
- activeStep: {
166
- backgroundColor: "#3498db"
167
- },
168
- inactiveStep: {
169
- backgroundColor: "#aaaaaa"
303
+ squareStep: {
304
+ borderRadius: 5 // Square shape
170
305
  },
171
306
  stepLabel: {
172
307
  color: "#ffffff",
@@ -174,7 +309,27 @@ var styles$9 = reactNative.StyleSheet.create({
174
309
  },
175
310
  stepText: {
176
311
  fontSize: 12,
177
- textAlign: "center"
312
+ textAlign: "center",
313
+ marginTop: 4
314
+ },
315
+ separatorContainer: {
316
+ flex: 1,
317
+ height: 4,
318
+ marginHorizontal: 8,
319
+ position: "relative"
320
+ },
321
+ separatorBackground: {
322
+ position: "absolute",
323
+ width: "100%",
324
+ height: "100%",
325
+ backgroundColor: "#aaaaaa",
326
+ borderRadius: 2
327
+ },
328
+ separatorProgress: {
329
+ position: "absolute",
330
+ height: "100%",
331
+ backgroundColor: "#3498db",
332
+ borderRadius: 2
178
333
  }
179
334
  });
180
335
 
@@ -235,83 +390,13 @@ var Form = function Form(_a) {
235
390
  steps: stepper.steps,
236
391
  currentStep: stepper.step,
237
392
  presseable: stepper.presseable,
238
- onPress: stepper.onPress
393
+ onPress: stepper.onPress,
394
+ totalSteps: stepper.totalSteps,
395
+ stepType: stepper.stepType,
396
+ icon: stepper.icon
239
397
  })), children);
240
398
  };
241
399
 
242
- // src/fonts/Text.tsx
243
- /**
244
- * A dynamic Text component that supports HTML-like formatting.
245
- * Integrates with the Theme system for consistent styling.
246
- *
247
- * @param children - The content to be displayed inside the Text component.
248
- * @param size - Size of the text. Defaults to 'medium'.
249
- * @param b - If true, applies bold styling.
250
- * @param i - If true, applies italic styling.
251
- * @param type - Type of Text component. Defaults to 'text'.
252
- * @param typeFont - Type of Font component. Defaults to 'body'.
253
- * @param u - If true, applies underline styling.
254
- * @param align - Paragraph alignment. Defaults to 'left'.
255
- * @param h - Header level. Accepts 0 (none), 1, 2, or 3. Defaults to 0.
256
- * @param style - Additional styles to apply.
257
- */
258
- var Text = function Text(_a) {
259
- var _b;
260
- var children = _a.children,
261
- _c = _a.size,
262
- size = _c === void 0 ? 14 : _c,
263
- _d = _a.b,
264
- b = _d === void 0 ? false : _d,
265
- _e = _a.i,
266
- i = _e === void 0 ? false : _e,
267
- _f = _a.u,
268
- u = _f === void 0 ? false : _f,
269
- _g = _a.align,
270
- align = _g === void 0 ? 'left' : _g,
271
- _h = _a.type,
272
- type = _h === void 0 ? 'text' : _h,
273
- _j = _a.typeFont,
274
- typeFont = _j === void 0 ? 'body' : _j,
275
- _k = _a.h,
276
- h = _k === void 0 ? 0 : _k,
277
- style = _a.style;
278
- var theme = React.useContext(aportThemes.ThemeContext).theme;
279
- var colors = theme.colors,
280
- fonts = theme.fonts;
281
- // Determine font family and size based on 'typeFont'
282
- var fontSettings = fonts[typeFont] || fonts.body;
283
- var fontFamily = fontSettings.fontFamily;
284
- var fontSize = fontSettings.fontSize || size;
285
- // Calculate header size based on 'h' prop
286
- if (h === 1) fontSize = 32;else if (h === 2) fontSize = 24;else if (h === 3) fontSize = 18;
287
- // Define font weight based on bold prop
288
- var fontWeight = b ? '700' : fontSettings.fontWeight || '400';
289
- // Define font style based on italic prop
290
- var fontStyle = i ? 'italic' : 'normal';
291
- // Define text decoration based on underline prop
292
- var textDecorationLine = u ? 'underline' : 'none';
293
- // Define text alignment
294
- var textAlign = align;
295
- // Map the 'type' prop to the correct color from the theme
296
- var textColor = ((_b = colors[type]) === null || _b === void 0 ? void 0 : _b.hex) || colors.text.hex;
297
- // Combine all styles
298
- var textStyles = {
299
- fontSize: fontSize,
300
- fontWeight: fontWeight,
301
- fontFamily: fontFamily,
302
- fontStyle: fontStyle,
303
- textDecorationLine: textDecorationLine,
304
- textAlign: textAlign,
305
- color: textColor
306
- };
307
- return /*#__PURE__*/React.createElement(reactNative.Text, {
308
- style: [textStyles, style]
309
- }, children);
310
- };
311
- reactNative.StyleSheet.create({
312
- // Define any default styles if needed
313
- });
314
-
315
400
  // src/forms/ErrorList.tsx
316
401
  var ErrorList = function ErrorList(_a) {
317
402
  var errors = _a.errors;