aport-tools 4.1.23 → 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/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;
|