@umituz/react-native-design-system 2.6.94 → 2.6.96

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.
Files changed (45) hide show
  1. package/package.json +1 -1
  2. package/src/atoms/AtomicAvatar.README.md +284 -397
  3. package/src/atoms/AtomicBadge.README.md +123 -358
  4. package/src/atoms/AtomicCard.README.md +358 -247
  5. package/src/atoms/AtomicDatePicker.README.md +127 -332
  6. package/src/atoms/AtomicFab.README.md +194 -352
  7. package/src/atoms/AtomicIcon.README.md +241 -274
  8. package/src/atoms/AtomicProgress.README.md +100 -338
  9. package/src/atoms/AtomicSpinner.README.md +304 -337
  10. package/src/atoms/AtomicText.README.md +153 -389
  11. package/src/atoms/AtomicTextArea.README.md +267 -268
  12. package/src/atoms/EmptyState.README.md +247 -292
  13. package/src/atoms/GlassView/README.md +313 -444
  14. package/src/atoms/button/README.md +186 -297
  15. package/src/atoms/button/STRATEGY.md +252 -0
  16. package/src/atoms/chip/README.md +242 -290
  17. package/src/atoms/input/README.md +296 -290
  18. package/src/atoms/picker/README.md +278 -309
  19. package/src/atoms/skeleton/AtomicSkeleton.README.md +394 -252
  20. package/src/molecules/BaseModal/README.md +356 -0
  21. package/src/molecules/BaseModal.README.md +324 -200
  22. package/src/molecules/ConfirmationModal.README.md +349 -302
  23. package/src/molecules/Divider/README.md +293 -376
  24. package/src/molecules/FormField.README.md +321 -534
  25. package/src/molecules/GlowingCard/GlowingCard.tsx +1 -1
  26. package/src/molecules/GlowingCard/README.md +230 -372
  27. package/src/molecules/List/README.md +281 -488
  28. package/src/molecules/ListItem.README.md +320 -315
  29. package/src/molecules/SearchBar/README.md +332 -430
  30. package/src/molecules/StepHeader/README.md +311 -411
  31. package/src/molecules/StepProgress/README.md +281 -448
  32. package/src/molecules/alerts/README.md +272 -355
  33. package/src/molecules/avatar/README.md +295 -356
  34. package/src/molecules/bottom-sheet/README.md +303 -340
  35. package/src/molecules/calendar/README.md +301 -265
  36. package/src/molecules/countdown/README.md +347 -456
  37. package/src/molecules/emoji/README.md +281 -514
  38. package/src/molecules/listitem/README.md +307 -399
  39. package/src/molecules/media-card/MediaCard.tsx +31 -34
  40. package/src/molecules/media-card/README.md +217 -319
  41. package/src/molecules/navigation/README.md +263 -284
  42. package/src/molecules/navigation/components/NavigationHeader.tsx +77 -0
  43. package/src/molecules/navigation/index.ts +1 -0
  44. package/src/molecules/splash/README.md +76 -80
  45. package/src/molecules/swipe-actions/README.md +376 -588
package/src/molecules/media-card/MediaCard.tsx CHANGED
@@ -50,8 +50,8 @@ export const MediaCard: React.FC<MediaCardProps> = ({
50
50
  borderRadius: config.borderRadius,
51
51
  overflow: 'hidden',
52
52
  backgroundColor: tokens.colors.surfaceVariant,
53
- borderWidth: selected ? 2 : 1,
54
- borderColor: selected ? tokens.colors.primary : 'rgba(255,255,255,0.1)',
53
+ borderWidth: selected ? tokens.borders.width.medium : tokens.borders.width.thin,
54
+ borderColor: selected ? tokens.colors.primary : tokens.colors.outline,
55
55
  },
56
56
  image: {
57
57
  width: '100%',
@@ -63,49 +63,52 @@ export const MediaCard: React.FC<MediaCardProps> = ({
63
63
  right: tokens.spacing.sm,
64
64
  backgroundColor: tokens.colors.primary,
65
65
  paddingHorizontal: tokens.spacing.sm,
66
- paddingVertical: 2,
67
- borderRadius: 999,
66
+ paddingVertical: tokens.spacing.xs,
67
+ borderRadius: tokens.borders.radius.full,
68
68
  zIndex: 10,
69
69
  },
70
70
  badgeText: {
71
71
  color: tokens.colors.onPrimary,
72
- fontSize: 10,
72
+ fontSize: tokens.typography.labelSmall.fontSize,
73
73
  fontWeight: 'bold',
74
74
  },
75
75
  overlay: {
76
- ...StyleSheet.absoluteFillObject,
77
- backgroundColor: 'rgba(0,0,0,0.3)',
78
- justifyContent:
79
- overlayPosition === 'center' ? 'center' : 'flex-end',
80
- alignItems: 'center',
81
- paddingBottom:
82
- overlayPosition === 'bottom' ? tokens.spacing.md : 0,
76
+ position: 'absolute',
77
+ bottom: 0,
78
+ left: 0,
79
+ right: 0,
80
+ backgroundColor: tokens.colors.surfaceVariant,
81
+ opacity: 0.95,
82
+ justifyContent: 'flex-end',
83
+ paddingVertical: tokens.spacing.md,
84
+ paddingHorizontal: tokens.spacing.sm,
83
85
  },
84
86
  textContainer: {
85
- paddingHorizontal: tokens.spacing.md,
86
87
  width: '100%',
87
88
  },
88
89
  title: {
89
- fontSize: 14,
90
+ fontSize: tokens.typography.bodyMedium.fontSize,
90
91
  fontWeight: 'bold',
91
92
  color: tokens.colors.textInverse,
92
- textShadowColor: 'rgba(0,0,0,0.75)',
93
- textShadowOffset: { width: 0, height: 1 },
94
- textShadowRadius: 3,
95
- textAlign: 'center',
93
+ textAlign: 'left',
94
+ marginBottom: tokens.spacing.xs,
96
95
  },
97
96
  subtitle: {
98
- fontSize: 12,
97
+ fontSize: tokens.typography.bodySmall.fontSize,
99
98
  color: tokens.colors.textSecondary,
100
- textShadowColor: 'rgba(0,0,0,0.75)',
101
- textShadowOffset: { width: 0, height: 1 },
102
- textShadowRadius: 3,
103
- textAlign: 'center',
99
+ opacity: 0.9,
100
+ textAlign: 'left',
104
101
  },
105
102
  checkCircle: {
106
- backgroundColor: 'rgba(0,0,0,0.6)',
107
- borderRadius: 999,
108
- padding: tokens.spacing.sm,
103
+ position: 'absolute',
104
+ top: tokens.spacing.sm,
105
+ right: tokens.spacing.sm,
106
+ backgroundColor: tokens.colors.primary,
107
+ borderRadius: tokens.borders.radius.full,
108
+ width: tokens.spacing.lg,
109
+ height: tokens.spacing.lg,
110
+ alignItems: 'center',
111
+ justifyContent: 'center',
109
112
  },
110
113
  });
111
114
 
@@ -145,14 +148,8 @@ export const MediaCard: React.FC<MediaCardProps> = ({
145
148
  )}
146
149
 
147
150
  {selected && (
148
- <View
149
- style={[
150
- styles.overlay,
151
- ]}
152
- >
153
- <View style={styles.checkCircle}>
154
- <AtomicIcon name="checkmark-outline" size="md" color="primary" />
155
- </View>
151
+ <View style={styles.checkCircle}>
152
+ <AtomicIcon name="checkmark-outline" size="sm" color="onPrimary" />
156
153
  </View>
157
154
  )}
158
155
  </CardWrapper>