@umituz/react-native-design-system 2.6.93 → 2.6.95

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/exports/theme.ts +0 -1
  21. package/src/molecules/BaseModal/README.md +356 -0
  22. package/src/molecules/BaseModal.README.md +324 -200
  23. package/src/molecules/ConfirmationModal.README.md +349 -302
  24. package/src/molecules/Divider/README.md +293 -376
  25. package/src/molecules/FormField.README.md +321 -534
  26. package/src/molecules/GlowingCard/GlowingCard.tsx +1 -1
  27. package/src/molecules/GlowingCard/README.md +230 -372
  28. package/src/molecules/IconContainer.tsx +1 -1
  29. package/src/molecules/List/README.md +281 -488
  30. package/src/molecules/ListItem.README.md +320 -315
  31. package/src/molecules/SearchBar/README.md +332 -430
  32. package/src/molecules/StepHeader/README.md +311 -411
  33. package/src/molecules/StepProgress/README.md +281 -448
  34. package/src/molecules/alerts/README.md +272 -355
  35. package/src/molecules/avatar/README.md +295 -356
  36. package/src/molecules/bottom-sheet/README.md +303 -340
  37. package/src/molecules/calendar/README.md +301 -265
  38. package/src/molecules/countdown/README.md +347 -456
  39. package/src/molecules/emoji/README.md +281 -514
  40. package/src/molecules/listitem/README.md +307 -399
  41. package/src/molecules/media-card/MediaCard.tsx +31 -34
  42. package/src/molecules/media-card/README.md +217 -319
  43. package/src/molecules/navigation/README.md +263 -284
  44. package/src/molecules/splash/README.md +76 -92
  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>