aport-tools 4.1.22 → 4.1.24
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.esm.js +254 -240
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +253 -239
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
/*! aport-tools v4.1.
|
1
|
+
/*! aport-tools v4.1.24 | ISC */
|
2
2
|
'use strict';
|
3
3
|
|
4
4
|
var React = require('react');
|
@@ -365,173 +365,62 @@ var styles$6 = reactNative.StyleSheet.create({
|
|
365
365
|
}
|
366
366
|
});
|
367
367
|
|
368
|
-
// src/
|
369
|
-
|
370
|
-
|
371
|
-
|
372
|
-
|
373
|
-
|
374
|
-
* @param themeColors - The theme colors.
|
375
|
-
* @returns The computed style for the button.
|
376
|
-
*/
|
377
|
-
function typeStyles(type, disabled, themeColors) {
|
378
|
-
switch (type) {
|
379
|
-
case 'submit':
|
380
|
-
return {
|
381
|
-
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, ")"),
|
382
|
-
borderWidth: 2,
|
383
|
-
borderColor: themeColors === null || themeColors === void 0 ? void 0 : themeColors.primary.hex
|
384
|
-
};
|
385
|
-
case 'button':
|
386
|
-
return {
|
387
|
-
backgroundColor: themeColors === null || themeColors === void 0 ? void 0 : themeColors.primary.hex,
|
388
|
-
borderColor: themeColors === null || themeColors === void 0 ? void 0 : themeColors.secondary.hex,
|
389
|
-
opacity: disabled ? 0.5 : 1,
|
390
|
-
borderWidth: 2
|
391
|
-
};
|
392
|
-
case 'cancel':
|
393
|
-
return {
|
394
|
-
backgroundColor: themeColors === null || themeColors === void 0 ? void 0 : themeColors.background.hex,
|
395
|
-
borderWidth: 0
|
396
|
-
};
|
397
|
-
default:
|
398
|
-
return {};
|
368
|
+
// src/forms/FormContext.tsx
|
369
|
+
var FormContext = /*#__PURE__*/React.createContext(undefined);
|
370
|
+
var useFormContext = function useFormContext() {
|
371
|
+
var context = React.useContext(FormContext);
|
372
|
+
if (!context) {
|
373
|
+
throw new Error("useFormContext must be used within a Form");
|
399
374
|
}
|
400
|
-
|
401
|
-
/**
|
402
|
-
* Button component that adapts its styles based on the current theme.
|
403
|
-
* Supports dynamic styling, full-width option, rounded corners, and different types.
|
404
|
-
*
|
405
|
-
* @param disabled - If true, the button is disabled and not pressable.
|
406
|
-
* @param isFullWidth - If true, the button expands to full width of its container.
|
407
|
-
* @param children - Text content of the button.
|
408
|
-
* @param onPress - Function to call when the button is pressed.
|
409
|
-
* @param rounded - If true, the button has rounded corners.
|
410
|
-
* @param borderRadius - Custom border radius value. Overrides the `rounded` prop if provided.
|
411
|
-
* @param type - Specifies the button type for styling ('submit', 'button', 'cancel').
|
412
|
-
*/
|
413
|
-
var Button = function Button(_a) {
|
414
|
-
var children = _a.children,
|
415
|
-
_b = _a.disabled,
|
416
|
-
disabled = _b === void 0 ? false : _b,
|
417
|
-
_c = _a.type,
|
418
|
-
type = _c === void 0 ? 'button' : _c,
|
419
|
-
_d = _a.rounded,
|
420
|
-
rounded = _d === void 0 ? true : _d,
|
421
|
-
_e = _a.borderRadius,
|
422
|
-
borderRadius = _e === void 0 ? 30 : _e,
|
423
|
-
_f = _a.isFullWidth,
|
424
|
-
isFullWidth = _f === void 0 ? false : _f,
|
425
|
-
_g = _a.loading,
|
426
|
-
loading = _g === void 0 ? false : _g,
|
427
|
-
onPress = _a.onPress;
|
428
|
-
var theme = React.useContext(ThemeContext).theme;
|
429
|
-
var colors = theme.colors;
|
430
|
-
var computedStyles = React.useMemo(function () {
|
431
|
-
return reactNative.StyleSheet.flatten([styles$5.button, typeStyles(type, disabled, colors), rounded && {
|
432
|
-
borderRadius: borderRadius
|
433
|
-
}, isFullWidth && {
|
434
|
-
width: '100%'
|
435
|
-
}, (disabled || loading) && styles$5.disabled]);
|
436
|
-
}, [type, disabled, loading, rounded, borderRadius, isFullWidth, colors]);
|
437
|
-
var textColor = React.useMemo(function () {
|
438
|
-
return {
|
439
|
-
color: colors.textButton.hex
|
440
|
-
};
|
441
|
-
}, [type, colors]);
|
442
|
-
return /*#__PURE__*/React.createElement(reactNative.TouchableOpacity, {
|
443
|
-
style: computedStyles,
|
444
|
-
disabled: disabled || loading,
|
445
|
-
onPress: onPress,
|
446
|
-
activeOpacity: 0.7
|
447
|
-
}, loading ? (
|
448
|
-
/*#__PURE__*/
|
449
|
-
// Show loading spinner if loading
|
450
|
-
React.createElement(reactNative.ActivityIndicator, {
|
451
|
-
size: "small",
|
452
|
-
color: colors.textButton.hex
|
453
|
-
})) : (/*#__PURE__*/React.createElement(reactNative.Text, {
|
454
|
-
style: textColor
|
455
|
-
}, Array.isArray(children) ? children.join('').toUpperCase() : children === null || children === void 0 ? void 0 : children.toUpperCase())));
|
375
|
+
return context;
|
456
376
|
};
|
457
|
-
var
|
458
|
-
button: {
|
459
|
-
justifyContent: 'center',
|
460
|
-
alignItems: 'center',
|
461
|
-
paddingVertical: 10,
|
462
|
-
paddingHorizontal: 20
|
463
|
-
},
|
464
|
-
disabled: {
|
465
|
-
opacity: 0.6
|
466
|
-
}
|
467
|
-
});
|
468
|
-
|
469
|
-
// src/cards/Card.tsx
|
470
|
-
/**
|
471
|
-
* Card component that adapts its styles based on the current theme.
|
472
|
-
* Supports dynamic styling, shadows, and press animations.
|
473
|
-
*
|
474
|
-
* @param children - The content to be displayed inside the Card.
|
475
|
-
* @param style - Additional styles to apply to the Card.
|
476
|
-
* @param onPress - Function to execute when the Card is pressed.
|
477
|
-
* @param pressable - Determines if the Card is pressable. Defaults to false.
|
478
|
-
* @param borderRadius - Border radius of the Card. Defaults to 12.
|
479
|
-
* @param elevation - Elevation for Android shadow. Overrides default.
|
480
|
-
* @param shadowProps - Custom shadow properties for iOS. Overrides defaults.
|
481
|
-
*/
|
482
|
-
var Card = function Card(_a) {
|
377
|
+
var Form = function Form(_a) {
|
483
378
|
var children = _a.children,
|
484
|
-
|
485
|
-
|
486
|
-
|
487
|
-
|
488
|
-
|
489
|
-
|
490
|
-
|
491
|
-
|
492
|
-
|
493
|
-
|
494
|
-
|
495
|
-
|
496
|
-
|
497
|
-
|
498
|
-
|
499
|
-
|
500
|
-
|
501
|
-
|
502
|
-
|
503
|
-
|
504
|
-
|
505
|
-
|
506
|
-
|
507
|
-
|
508
|
-
|
509
|
-
|
510
|
-
|
379
|
+
onSubmit = _a.onSubmit;
|
380
|
+
var _b = React.useState({}),
|
381
|
+
formValues = _b[0],
|
382
|
+
setFormValues = _b[1];
|
383
|
+
var _c = React.useState({}),
|
384
|
+
errors = _c[0],
|
385
|
+
setErrors = _c[1];
|
386
|
+
var setFormValue = function setFormValue(name, value) {
|
387
|
+
setFormValues(function (prev) {
|
388
|
+
var _a;
|
389
|
+
return __assign(__assign({}, prev), (_a = {}, _a[name] = value, _a));
|
390
|
+
});
|
391
|
+
};
|
392
|
+
var handleSubmit = function handleSubmit() {
|
393
|
+
return __awaiter(void 0, void 0, void 0, function () {
|
394
|
+
var validationErrors;
|
395
|
+
return __generator(this, function (_a) {
|
396
|
+
switch (_a.label) {
|
397
|
+
case 0:
|
398
|
+
return [4 /*yield*/, onSubmit(formValues)];
|
399
|
+
case 1:
|
400
|
+
validationErrors = _a.sent();
|
401
|
+
// Set the validation errors in state
|
402
|
+
setErrors(validationErrors);
|
403
|
+
// Prevent submission if there are any errors
|
404
|
+
if (Object.keys(validationErrors).length > 0) {
|
405
|
+
return [2 /*return*/]; // Prevent submission
|
406
|
+
}
|
407
|
+
// If no errors, continue submission process (e.g., calling an API, navigating, etc.)
|
408
|
+
console.log('Form submitted successfully:', formValues);
|
409
|
+
return [2 /*return*/];
|
410
|
+
}
|
411
|
+
});
|
412
|
+
});
|
413
|
+
};
|
414
|
+
return /*#__PURE__*/React.createElement(FormContext.Provider, {
|
415
|
+
value: {
|
416
|
+
formValues: formValues,
|
417
|
+
setFormValue: setFormValue,
|
418
|
+
errors: errors,
|
419
|
+
setErrors: setErrors,
|
420
|
+
handleSubmit: handleSubmit
|
511
421
|
}
|
512
|
-
});
|
513
|
-
var cardStyles = [styles$4.container, {
|
514
|
-
borderRadius: borderRadius,
|
515
|
-
backgroundColor: colors.body.hex
|
516
|
-
}, defaultShadow,
|
517
|
-
// Dynamic shadows based on platform
|
518
|
-
style // External styles
|
519
|
-
];
|
520
|
-
return pressable ? (/*#__PURE__*/React.createElement(reactNative.TouchableOpacity, {
|
521
|
-
activeOpacity: 0.8,
|
522
|
-
onPress: onPress,
|
523
|
-
style: cardStyles
|
524
|
-
}, children)) : (/*#__PURE__*/React.createElement(reactNative.View, {
|
525
|
-
style: cardStyles
|
526
|
-
}, children));
|
422
|
+
}, children);
|
527
423
|
};
|
528
|
-
var styles$4 = reactNative.StyleSheet.create({
|
529
|
-
container: {
|
530
|
-
padding: 16,
|
531
|
-
borderRadius: 12
|
532
|
-
// Shadows handled dynamically with platform logic
|
533
|
-
}
|
534
|
-
});
|
535
424
|
|
536
425
|
// src/fonts/Text.tsx
|
537
426
|
/**
|
@@ -597,78 +486,29 @@ reactNative.StyleSheet.create({
|
|
597
486
|
// Define any default styles if needed
|
598
487
|
});
|
599
488
|
|
600
|
-
// src/forms/FormContext.tsx
|
601
|
-
var FormContext = /*#__PURE__*/React.createContext(undefined);
|
602
|
-
var useFormContext = function useFormContext() {
|
603
|
-
var context = React.useContext(FormContext);
|
604
|
-
if (!context) {
|
605
|
-
throw new Error("useFormContext must be used within a Form");
|
606
|
-
}
|
607
|
-
return context;
|
608
|
-
};
|
609
|
-
var Form = function Form(_a) {
|
610
|
-
var children = _a.children,
|
611
|
-
onSubmit = _a.onSubmit;
|
612
|
-
var _b = React.useState({}),
|
613
|
-
formValues = _b[0],
|
614
|
-
setFormValues = _b[1];
|
615
|
-
var _c = React.useState({}),
|
616
|
-
errors = _c[0],
|
617
|
-
setErrors = _c[1];
|
618
|
-
var setFormValue = function setFormValue(name, value) {
|
619
|
-
setFormValues(function (prev) {
|
620
|
-
var _a;
|
621
|
-
return __assign(__assign({}, prev), (_a = {}, _a[name] = value, _a));
|
622
|
-
});
|
623
|
-
};
|
624
|
-
var handleSubmit = function handleSubmit() {
|
625
|
-
return __awaiter(void 0, void 0, void 0, function () {
|
626
|
-
var validationErrors;
|
627
|
-
return __generator(this, function (_a) {
|
628
|
-
switch (_a.label) {
|
629
|
-
case 0:
|
630
|
-
return [4 /*yield*/, onSubmit(formValues)];
|
631
|
-
case 1:
|
632
|
-
validationErrors = _a.sent();
|
633
|
-
// Set the validation errors in state
|
634
|
-
setErrors(validationErrors);
|
635
|
-
// Prevent submission if there are any errors
|
636
|
-
if (Object.keys(validationErrors).length > 0) {
|
637
|
-
return [2 /*return*/]; // Prevent submission
|
638
|
-
}
|
639
|
-
return [2 /*return*/];
|
640
|
-
}
|
641
|
-
});
|
642
|
-
});
|
643
|
-
};
|
644
|
-
return /*#__PURE__*/React.createElement(FormContext.Provider, {
|
645
|
-
value: {
|
646
|
-
formValues: formValues,
|
647
|
-
setFormValue: setFormValue,
|
648
|
-
errors: errors,
|
649
|
-
setErrors: setErrors,
|
650
|
-
handleSubmit: handleSubmit
|
651
|
-
}
|
652
|
-
}, children);
|
653
|
-
};
|
654
|
-
|
655
489
|
// src/forms/ErrorList.tsx
|
656
490
|
var ErrorList = function ErrorList(_a) {
|
657
491
|
var errors = _a.errors;
|
492
|
+
var theme = React.useContext(ThemeContext).theme;
|
493
|
+
var colors = theme.colors;
|
658
494
|
return /*#__PURE__*/React.createElement(reactNative.View, {
|
659
|
-
style: styles$
|
495
|
+
style: styles$5.container
|
660
496
|
}, errors.map(function (error, index) {
|
661
497
|
return /*#__PURE__*/React.createElement(reactNative.View, {
|
662
498
|
key: index,
|
663
|
-
style: styles$
|
499
|
+
style: styles$5.errorItem
|
664
500
|
}, /*#__PURE__*/React.createElement(Text, {
|
665
|
-
style: styles$
|
501
|
+
style: [styles$5.bullet, {
|
502
|
+
color: colors.error.hex
|
503
|
+
}]
|
666
504
|
}, "\u2022"), /*#__PURE__*/React.createElement(Text, {
|
667
|
-
style: styles$
|
505
|
+
style: [styles$5.errorText, {
|
506
|
+
color: colors.error.hex
|
507
|
+
}]
|
668
508
|
}, error));
|
669
509
|
}));
|
670
510
|
};
|
671
|
-
var styles$
|
511
|
+
var styles$5 = reactNative.StyleSheet.create({
|
672
512
|
container: {
|
673
513
|
marginTop: 4
|
674
514
|
},
|
@@ -679,14 +519,10 @@ var styles$3 = reactNative.StyleSheet.create({
|
|
679
519
|
},
|
680
520
|
bullet: {
|
681
521
|
marginRight: 4,
|
682
|
-
color: '#FF5252',
|
683
|
-
// Should use 'error' color from theme
|
684
522
|
fontSize: 12
|
685
523
|
},
|
686
524
|
errorText: {
|
687
525
|
flex: 1,
|
688
|
-
color: '#FF5252',
|
689
|
-
// Should use 'error' color from theme
|
690
526
|
fontSize: 12
|
691
527
|
}
|
692
528
|
});
|
@@ -707,13 +543,13 @@ var Input = function Input(_a) {
|
|
707
543
|
setFormValue(name, text);
|
708
544
|
};
|
709
545
|
return /*#__PURE__*/React.createElement(reactNative.View, {
|
710
|
-
style: styles$
|
546
|
+
style: styles$4.container
|
711
547
|
}, /*#__PURE__*/React.createElement(Text, {
|
712
|
-
style: [styles$
|
548
|
+
style: [styles$4.label, {
|
713
549
|
color: colors.text.hex
|
714
550
|
}]
|
715
551
|
}, label), /*#__PURE__*/React.createElement(reactNative.TextInput, __assign({
|
716
|
-
style: [styles$
|
552
|
+
style: [styles$4.input, {
|
717
553
|
backgroundColor: colors.body.hex,
|
718
554
|
borderColor: formErrors[name] ? colors.error.hex : '#CCC',
|
719
555
|
color: colors.text.hex
|
@@ -726,7 +562,7 @@ var Input = function Input(_a) {
|
|
726
562
|
errors: formErrors[name]
|
727
563
|
})));
|
728
564
|
};
|
729
|
-
var styles$
|
565
|
+
var styles$4 = reactNative.StyleSheet.create({
|
730
566
|
container: {
|
731
567
|
marginBottom: 16
|
732
568
|
},
|
@@ -757,11 +593,11 @@ var TextArea = function TextArea(_a) {
|
|
757
593
|
setFormValue(name, text);
|
758
594
|
};
|
759
595
|
return /*#__PURE__*/React.createElement(reactNative.View, {
|
760
|
-
style: styles$
|
596
|
+
style: styles$3.container
|
761
597
|
}, /*#__PURE__*/React.createElement(Text, {
|
762
|
-
style: styles$
|
598
|
+
style: styles$3.label
|
763
599
|
}, label), /*#__PURE__*/React.createElement(reactNative.TextInput, __assign({
|
764
|
-
style: [styles$
|
600
|
+
style: [styles$3.textArea, style],
|
765
601
|
value: formValues[name] || '',
|
766
602
|
onChangeText: handleChange,
|
767
603
|
placeholder: label,
|
@@ -774,7 +610,7 @@ var TextArea = function TextArea(_a) {
|
|
774
610
|
errors: formErrors[name]
|
775
611
|
})));
|
776
612
|
};
|
777
|
-
var styles$
|
613
|
+
var styles$3 = reactNative.StyleSheet.create({
|
778
614
|
container: {
|
779
615
|
marginBottom: 16
|
780
616
|
},
|
@@ -800,19 +636,197 @@ var styles$1 = reactNative.StyleSheet.create({
|
|
800
636
|
var Label = function Label(_a) {
|
801
637
|
var text = _a.text,
|
802
638
|
style = _a.style;
|
639
|
+
var theme = React.useContext(ThemeContext).theme;
|
640
|
+
var colors = theme.colors;
|
803
641
|
return /*#__PURE__*/React.createElement(Text, {
|
804
|
-
style: [styles.label, style
|
642
|
+
style: [styles$2.label, style, {
|
643
|
+
color: colors.text.hex
|
644
|
+
}]
|
805
645
|
}, text);
|
806
646
|
};
|
807
|
-
var styles = reactNative.StyleSheet.create({
|
647
|
+
var styles$2 = reactNative.StyleSheet.create({
|
808
648
|
label: {
|
809
649
|
marginBottom: 4,
|
810
|
-
color: '#000',
|
811
|
-
// Should be themed
|
812
650
|
fontWeight: '500'
|
813
651
|
}
|
814
652
|
});
|
815
653
|
|
654
|
+
// src/components/Button.tsx
|
655
|
+
/**
|
656
|
+
* Determines the styles based on the button type and whether it is disabled.
|
657
|
+
*
|
658
|
+
* @param type - The type of the button ('submit', 'button', 'cancel').
|
659
|
+
* @param disabled - Whether the button is disabled.
|
660
|
+
* @param themeColors - The theme colors.
|
661
|
+
* @returns The computed style for the button.
|
662
|
+
*/
|
663
|
+
function typeStyles(type, disabled, themeColors) {
|
664
|
+
switch (type) {
|
665
|
+
case 'submit':
|
666
|
+
return {
|
667
|
+
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, ")"),
|
668
|
+
borderWidth: 2,
|
669
|
+
borderColor: themeColors === null || themeColors === void 0 ? void 0 : themeColors.primary.hex
|
670
|
+
};
|
671
|
+
case 'button':
|
672
|
+
return {
|
673
|
+
backgroundColor: themeColors === null || themeColors === void 0 ? void 0 : themeColors.primary.hex,
|
674
|
+
borderColor: themeColors === null || themeColors === void 0 ? void 0 : themeColors.secondary.hex,
|
675
|
+
opacity: disabled ? 0.5 : 1,
|
676
|
+
borderWidth: 2
|
677
|
+
};
|
678
|
+
case 'cancel':
|
679
|
+
return {
|
680
|
+
backgroundColor: themeColors === null || themeColors === void 0 ? void 0 : themeColors.background.hex,
|
681
|
+
borderWidth: 0
|
682
|
+
};
|
683
|
+
default:
|
684
|
+
return {};
|
685
|
+
}
|
686
|
+
}
|
687
|
+
/**
|
688
|
+
* Button component that adapts its styles based on the current theme.
|
689
|
+
* Supports dynamic styling, full-width option, rounded corners, and different types.
|
690
|
+
*
|
691
|
+
* @param disabled - If true, the button is disabled and not pressable.
|
692
|
+
* @param isFullWidth - If true, the button expands to full width of its container.
|
693
|
+
* @param children - Text content of the button.
|
694
|
+
* @param onPress - Function to call when the button is pressed.
|
695
|
+
* @param rounded - If true, the button has rounded corners.
|
696
|
+
* @param borderRadius - Custom border radius value. Overrides the `rounded` prop if provided.
|
697
|
+
* @param type - Specifies the button type for styling ('submit', 'button', 'cancel').
|
698
|
+
*/
|
699
|
+
var Button = function Button(_a) {
|
700
|
+
var children = _a.children,
|
701
|
+
_b = _a.disabled,
|
702
|
+
disabled = _b === void 0 ? false : _b,
|
703
|
+
_c = _a.type,
|
704
|
+
type = _c === void 0 ? 'button' : _c,
|
705
|
+
_d = _a.rounded,
|
706
|
+
rounded = _d === void 0 ? true : _d,
|
707
|
+
_e = _a.borderRadius,
|
708
|
+
borderRadius = _e === void 0 ? 30 : _e,
|
709
|
+
_f = _a.isFullWidth,
|
710
|
+
isFullWidth = _f === void 0 ? false : _f,
|
711
|
+
_g = _a.loading,
|
712
|
+
loading = _g === void 0 ? false : _g,
|
713
|
+
onPress = _a.onPress;
|
714
|
+
var theme = React.useContext(ThemeContext).theme;
|
715
|
+
var colors = theme.colors;
|
716
|
+
var handleSubmit = useFormContext().handleSubmit;
|
717
|
+
var computedStyles = React.useMemo(function () {
|
718
|
+
return reactNative.StyleSheet.flatten([styles$1.button, typeStyles(type, disabled, colors), rounded && {
|
719
|
+
borderRadius: borderRadius
|
720
|
+
}, isFullWidth && {
|
721
|
+
width: '100%'
|
722
|
+
}, (disabled || loading) && styles$1.disabled]);
|
723
|
+
}, [type, disabled, loading, rounded, borderRadius, isFullWidth, colors]);
|
724
|
+
var textColor = React.useMemo(function () {
|
725
|
+
return {
|
726
|
+
color: colors.textButton.hex
|
727
|
+
};
|
728
|
+
}, [type, colors]);
|
729
|
+
var handlePress = function handlePress() {
|
730
|
+
if (type === 'submit') {
|
731
|
+
handleSubmit(); // Call the form's submit handler
|
732
|
+
} else if (onPress) {
|
733
|
+
onPress(); // Call a custom handler if needed
|
734
|
+
}
|
735
|
+
};
|
736
|
+
return /*#__PURE__*/React.createElement(reactNative.TouchableOpacity, {
|
737
|
+
style: computedStyles,
|
738
|
+
disabled: disabled || loading,
|
739
|
+
onPress: handlePress,
|
740
|
+
activeOpacity: 0.7
|
741
|
+
}, loading ? (
|
742
|
+
/*#__PURE__*/
|
743
|
+
// Show loading spinner if loading
|
744
|
+
React.createElement(reactNative.ActivityIndicator, {
|
745
|
+
size: "small",
|
746
|
+
color: colors.textButton.hex
|
747
|
+
})) : (/*#__PURE__*/React.createElement(reactNative.Text, {
|
748
|
+
style: textColor
|
749
|
+
}, Array.isArray(children) ? children.join('').toUpperCase() : children === null || children === void 0 ? void 0 : children.toUpperCase())));
|
750
|
+
};
|
751
|
+
var styles$1 = reactNative.StyleSheet.create({
|
752
|
+
button: {
|
753
|
+
justifyContent: 'center',
|
754
|
+
alignItems: 'center',
|
755
|
+
paddingVertical: 10,
|
756
|
+
paddingHorizontal: 20
|
757
|
+
},
|
758
|
+
disabled: {
|
759
|
+
opacity: 0.6
|
760
|
+
}
|
761
|
+
});
|
762
|
+
|
763
|
+
// src/cards/Card.tsx
|
764
|
+
/**
|
765
|
+
* Card component that adapts its styles based on the current theme.
|
766
|
+
* Supports dynamic styling, shadows, and press animations.
|
767
|
+
*
|
768
|
+
* @param children - The content to be displayed inside the Card.
|
769
|
+
* @param style - Additional styles to apply to the Card.
|
770
|
+
* @param onPress - Function to execute when the Card is pressed.
|
771
|
+
* @param pressable - Determines if the Card is pressable. Defaults to false.
|
772
|
+
* @param borderRadius - Border radius of the Card. Defaults to 12.
|
773
|
+
* @param elevation - Elevation for Android shadow. Overrides default.
|
774
|
+
* @param shadowProps - Custom shadow properties for iOS. Overrides defaults.
|
775
|
+
*/
|
776
|
+
var Card = function Card(_a) {
|
777
|
+
var children = _a.children,
|
778
|
+
style = _a.style,
|
779
|
+
onPress = _a.onPress,
|
780
|
+
_b = _a.pressable,
|
781
|
+
pressable = _b === void 0 ? false : _b,
|
782
|
+
_c = _a.borderRadius,
|
783
|
+
borderRadius = _c === void 0 ? 12 : _c,
|
784
|
+
_d = _a.elevation,
|
785
|
+
elevation = _d === void 0 ? 4 : _d,
|
786
|
+
_e = _a.shadowProps,
|
787
|
+
shadowProps = _e === void 0 ? {} : _e;
|
788
|
+
var theme = React.useContext(ThemeContext).theme;
|
789
|
+
var colors = theme.colors;
|
790
|
+
// Animation state for pressable effect
|
791
|
+
// Default shadow styles (improved platform-specific handling)
|
792
|
+
var defaultShadow = reactNative.Platform.select({
|
793
|
+
ios: {
|
794
|
+
shadowColor: (shadowProps === null || shadowProps === void 0 ? void 0 : shadowProps.shadowColor) || colors.text.hex,
|
795
|
+
// Defaulting to theme text color
|
796
|
+
shadowOffset: (shadowProps === null || shadowProps === void 0 ? void 0 : shadowProps.shadowOffset) || {
|
797
|
+
width: 0,
|
798
|
+
height: 2
|
799
|
+
},
|
800
|
+
shadowOpacity: (shadowProps === null || shadowProps === void 0 ? void 0 : shadowProps.shadowOpacity) || 0.1,
|
801
|
+
shadowRadius: (shadowProps === null || shadowProps === void 0 ? void 0 : shadowProps.shadowRadius) || 4
|
802
|
+
},
|
803
|
+
android: {
|
804
|
+
elevation: elevation // Only applies to Android
|
805
|
+
}
|
806
|
+
});
|
807
|
+
var cardStyles = [styles.container, {
|
808
|
+
borderRadius: borderRadius,
|
809
|
+
backgroundColor: colors.body.hex
|
810
|
+
}, defaultShadow,
|
811
|
+
// Dynamic shadows based on platform
|
812
|
+
style // External styles
|
813
|
+
];
|
814
|
+
return pressable ? (/*#__PURE__*/React.createElement(reactNative.TouchableOpacity, {
|
815
|
+
activeOpacity: 0.8,
|
816
|
+
onPress: onPress,
|
817
|
+
style: cardStyles
|
818
|
+
}, children)) : (/*#__PURE__*/React.createElement(reactNative.View, {
|
819
|
+
style: cardStyles
|
820
|
+
}, children));
|
821
|
+
};
|
822
|
+
var styles = reactNative.StyleSheet.create({
|
823
|
+
container: {
|
824
|
+
padding: 16,
|
825
|
+
borderRadius: 12
|
826
|
+
// Shadows handled dynamically with platform logic
|
827
|
+
}
|
828
|
+
});
|
829
|
+
|
816
830
|
exports.Button = Button;
|
817
831
|
exports.Card = Card;
|
818
832
|
exports.ErrorList = ErrorList;
|