aport-tools 4.1.23 → 4.1.24
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/forms/FormContext.d.ts +2 -1
- package/dist/index.esm.js +244 -233
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +243 -232
- 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,83 +486,29 @@ reactNative.StyleSheet.create({
|
|
597
486
|
// Define any default styles if needed
|
598
487
|
});
|
599
488
|
|
600
|
-
var FormContext = /*#__PURE__*/React.createContext(undefined);
|
601
|
-
var useFormContext = function useFormContext() {
|
602
|
-
var context = React.useContext(FormContext);
|
603
|
-
if (!context) {
|
604
|
-
throw new Error("useFormContext must be used within a Form");
|
605
|
-
}
|
606
|
-
return context;
|
607
|
-
};
|
608
|
-
var Form = function Form(_a) {
|
609
|
-
var children = _a.children,
|
610
|
-
onSubmit = _a.onSubmit;
|
611
|
-
var _b = React.useState({}),
|
612
|
-
formValues = _b[0],
|
613
|
-
setFormValues = _b[1];
|
614
|
-
var _c = React.useState({}),
|
615
|
-
errors = _c[0],
|
616
|
-
setErrors = _c[1];
|
617
|
-
var setFormValue = function setFormValue(name, value) {
|
618
|
-
setFormValues(function (prev) {
|
619
|
-
var _a;
|
620
|
-
return __assign(__assign({}, prev), (_a = {}, _a[name] = value, _a));
|
621
|
-
});
|
622
|
-
};
|
623
|
-
var handleSubmit = function handleSubmit(event) {
|
624
|
-
return __awaiter(void 0, void 0, void 0, function () {
|
625
|
-
var validationErrors;
|
626
|
-
return __generator(this, function (_a) {
|
627
|
-
switch (_a.label) {
|
628
|
-
case 0:
|
629
|
-
event.preventDefault(); // Prevent native submission
|
630
|
-
return [4 /*yield*/, onSubmit(formValues)];
|
631
|
-
case 1:
|
632
|
-
validationErrors = _a.sent();
|
633
|
-
setErrors(validationErrors);
|
634
|
-
if (Object.keys(validationErrors).length > 0) {
|
635
|
-
return [2 /*return*/]; // Do not proceed if there are validation errors
|
636
|
-
}
|
637
|
-
return [2 /*return*/];
|
638
|
-
}
|
639
|
-
});
|
640
|
-
});
|
641
|
-
};
|
642
|
-
return /*#__PURE__*/React.createElement(FormContext.Provider, {
|
643
|
-
value: {
|
644
|
-
formValues: formValues,
|
645
|
-
setFormValue: setFormValue,
|
646
|
-
errors: errors,
|
647
|
-
handleSubmit: handleSubmit
|
648
|
-
}
|
649
|
-
}, /*#__PURE__*/React.createElement("form", {
|
650
|
-
onSubmit: handleSubmit
|
651
|
-
}, children));
|
652
|
-
};
|
653
|
-
|
654
489
|
// src/forms/ErrorList.tsx
|
655
490
|
var ErrorList = function ErrorList(_a) {
|
656
491
|
var errors = _a.errors;
|
657
492
|
var theme = React.useContext(ThemeContext).theme;
|
658
493
|
var colors = theme.colors;
|
659
494
|
return /*#__PURE__*/React.createElement(reactNative.View, {
|
660
|
-
style: styles$
|
495
|
+
style: styles$5.container
|
661
496
|
}, errors.map(function (error, index) {
|
662
497
|
return /*#__PURE__*/React.createElement(reactNative.View, {
|
663
498
|
key: index,
|
664
|
-
style: styles$
|
499
|
+
style: styles$5.errorItem
|
665
500
|
}, /*#__PURE__*/React.createElement(Text, {
|
666
|
-
style: [styles$
|
501
|
+
style: [styles$5.bullet, {
|
667
502
|
color: colors.error.hex
|
668
503
|
}]
|
669
504
|
}, "\u2022"), /*#__PURE__*/React.createElement(Text, {
|
670
|
-
style: [styles$
|
505
|
+
style: [styles$5.errorText, {
|
671
506
|
color: colors.error.hex
|
672
507
|
}]
|
673
508
|
}, error));
|
674
509
|
}));
|
675
510
|
};
|
676
|
-
var styles$
|
511
|
+
var styles$5 = reactNative.StyleSheet.create({
|
677
512
|
container: {
|
678
513
|
marginTop: 4
|
679
514
|
},
|
@@ -708,13 +543,13 @@ var Input = function Input(_a) {
|
|
708
543
|
setFormValue(name, text);
|
709
544
|
};
|
710
545
|
return /*#__PURE__*/React.createElement(reactNative.View, {
|
711
|
-
style: styles$
|
546
|
+
style: styles$4.container
|
712
547
|
}, /*#__PURE__*/React.createElement(Text, {
|
713
|
-
style: [styles$
|
548
|
+
style: [styles$4.label, {
|
714
549
|
color: colors.text.hex
|
715
550
|
}]
|
716
551
|
}, label), /*#__PURE__*/React.createElement(reactNative.TextInput, __assign({
|
717
|
-
style: [styles$
|
552
|
+
style: [styles$4.input, {
|
718
553
|
backgroundColor: colors.body.hex,
|
719
554
|
borderColor: formErrors[name] ? colors.error.hex : '#CCC',
|
720
555
|
color: colors.text.hex
|
@@ -727,7 +562,7 @@ var Input = function Input(_a) {
|
|
727
562
|
errors: formErrors[name]
|
728
563
|
})));
|
729
564
|
};
|
730
|
-
var styles$
|
565
|
+
var styles$4 = reactNative.StyleSheet.create({
|
731
566
|
container: {
|
732
567
|
marginBottom: 16
|
733
568
|
},
|
@@ -758,11 +593,11 @@ var TextArea = function TextArea(_a) {
|
|
758
593
|
setFormValue(name, text);
|
759
594
|
};
|
760
595
|
return /*#__PURE__*/React.createElement(reactNative.View, {
|
761
|
-
style: styles$
|
596
|
+
style: styles$3.container
|
762
597
|
}, /*#__PURE__*/React.createElement(Text, {
|
763
|
-
style: styles$
|
598
|
+
style: styles$3.label
|
764
599
|
}, label), /*#__PURE__*/React.createElement(reactNative.TextInput, __assign({
|
765
|
-
style: [styles$
|
600
|
+
style: [styles$3.textArea, style],
|
766
601
|
value: formValues[name] || '',
|
767
602
|
onChangeText: handleChange,
|
768
603
|
placeholder: label,
|
@@ -775,7 +610,7 @@ var TextArea = function TextArea(_a) {
|
|
775
610
|
errors: formErrors[name]
|
776
611
|
})));
|
777
612
|
};
|
778
|
-
var styles$
|
613
|
+
var styles$3 = reactNative.StyleSheet.create({
|
779
614
|
container: {
|
780
615
|
marginBottom: 16
|
781
616
|
},
|
@@ -804,18 +639,194 @@ var Label = function Label(_a) {
|
|
804
639
|
var theme = React.useContext(ThemeContext).theme;
|
805
640
|
var colors = theme.colors;
|
806
641
|
return /*#__PURE__*/React.createElement(Text, {
|
807
|
-
style: [styles.label, style, {
|
642
|
+
style: [styles$2.label, style, {
|
808
643
|
color: colors.text.hex
|
809
644
|
}]
|
810
645
|
}, text);
|
811
646
|
};
|
812
|
-
var styles = reactNative.StyleSheet.create({
|
647
|
+
var styles$2 = reactNative.StyleSheet.create({
|
813
648
|
label: {
|
814
649
|
marginBottom: 4,
|
815
650
|
fontWeight: '500'
|
816
651
|
}
|
817
652
|
});
|
818
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
|
+
|
819
830
|
exports.Button = Button;
|
820
831
|
exports.Card = Card;
|
821
832
|
exports.ErrorList = ErrorList;
|