@umituz/react-native-design-system 2.6.56 → 2.6.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.6.56",
+  "version": "2.6.58",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive and safe area utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/index.ts

@@ -287,6 +287,11 @@ export {
   type AvatarShape,
   type AvatarConfig,
   type AvatarType,
+  // Media Card
+  MediaCard,
+  type MediaCardProps,
+  type MediaCardSize,
+  type MediaCardOverlayPosition,
   // Bottom Sheet
   BottomSheet,
   BottomSheetModal,

package/src/molecules/index.ts

@@ -8,6 +8,14 @@ export * from './avatar';
 export * from './bottom-sheet';
 export { FormField, type FormFieldProps } from './FormField';
 export { ListItem, type ListItemProps } from './ListItem';
+
+// Media Card
+export { MediaCard } from './media-card';
+export type {
+  MediaCardProps,
+  MediaCardSize,
+  MediaCardOverlayPosition,
+} from './media-card';
 export { SearchBar, type SearchBarProps } from './SearchBar';
 export { IconContainer } from './IconContainer';
 export { BaseModal, type BaseModalProps } from './BaseModal';

package/src/molecules/media-card/MediaCard.tsx

@@ -0,0 +1,160 @@
+/**
+ * AtomicMediaCard - Reusable media card component
+ *
+ * Displays an image with optional overlay text, badge, and selection state.
+ * Used for grids of images, memes, templates, etc.
+ */
+
+import React from 'react';
+import {
+  View,
+  StyleSheet,
+  TouchableOpacity,
+  Image,
+  type ImageStyle,
+} from 'react-native';
+import { AtomicText, AtomicIcon } from '../../atoms';
+import { useAppDesignTokens } from '../../theme';
+
+import type { MediaCardProps } from './types';
+
+export const MediaCard: React.FC<MediaCardProps> = ({
+  uri,
+  title,
+  subtitle,
+  badge,
+  selected = false,
+  size = 'md',
+  aspectRatio = 0.8,
+  overlayPosition = 'bottom',
+  showOverlay = true,
+  onPress,
+  width,
+  testID,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const sizeConfig = {
+    sm: { width: width || 120, borderRadius: tokens.radius.sm },
+    md: { width: width || 144, borderRadius: tokens.radius.md },
+    lg: { width: width || 160, borderRadius: tokens.radius.lg },
+  };
+
+  const config = sizeConfig[size];
+  const height = config.width / aspectRatio;
+
+  const styles = StyleSheet.create({
+    container: {
+      width: config.width,
+      height,
+      borderRadius: config.borderRadius,
+      overflow: 'hidden',
+      backgroundColor: tokens.colors.surfaceVariant,
+      borderWidth: selected ? 2 : 1,
+      borderColor: selected ? tokens.colors.primary : 'rgba(255,255,255,0.1)',
+    },
+    image: {
+      width: '100%',
+      height: '100%',
+    } as ImageStyle,
+    badge: {
+      position: 'absolute',
+      top: tokens.spacing.sm,
+      right: tokens.spacing.sm,
+      backgroundColor: tokens.colors.primary,
+      paddingHorizontal: tokens.spacing.sm,
+      paddingVertical: 2,
+      borderRadius: 999,
+      zIndex: 10,
+    },
+    badgeText: {
+      color: tokens.colors.onPrimary,
+      fontSize: 10,
+      fontWeight: 'bold',
+    },
+    overlay: {
+      ...StyleSheet.absoluteFillObject,
+      backgroundColor: 'rgba(0,0,0,0.3)',
+      justifyContent:
+        overlayPosition === 'center' ? 'center' : 'flex-end',
+      alignItems: 'center',
+      paddingBottom:
+        overlayPosition === 'bottom' ? tokens.spacing.md : 0,
+    },
+    textContainer: {
+      paddingHorizontal: tokens.spacing.md,
+      width: '100%',
+    },
+    title: {
+      fontSize: 14,
+      fontWeight: 'bold',
+      color: tokens.colors.textInverse,
+      textShadowColor: 'rgba(0,0,0,0.75)',
+      textShadowOffset: { width: 0, height: 1 },
+      textShadowRadius: 3,
+      textAlign: 'center',
+    },
+    subtitle: {
+      fontSize: 12,
+      color: tokens.colors.textSecondary,
+      textShadowColor: 'rgba(0,0,0,0.75)',
+      textShadowOffset: { width: 0, height: 1 },
+      textShadowRadius: 3,
+      textAlign: 'center',
+    },
+    checkCircle: {
+      backgroundColor: 'rgba(0,0,0,0.6)',
+      borderRadius: 999,
+      padding: tokens.spacing.sm,
+    },
+  });
+
+  const CardWrapper = onPress ? TouchableOpacity : View;
+  const wrapperProps = onPress
+    ? {
+        onPress,
+        activeOpacity: 0.8,
+        testID,
+      }
+    : { testID };
+
+  return (
+    <CardWrapper style={styles.container} {...wrapperProps}>
+      {badge && (
+        <View style={styles.badge}>
+          <AtomicText style={styles.badgeText}>{badge}</AtomicText>
+        </View>
+      )}
+      <Image source={{ uri }} style={styles.image} resizeMode="cover" />
+
+      {showOverlay && (title || subtitle) && (
+        <View style={styles.overlay}>
+          <View style={styles.textContainer}>
+            {title && (
+              <AtomicText style={styles.title} numberOfLines={1}>
+                {title}
+              </AtomicText>
+            )}
+            {subtitle && (
+              <AtomicText style={styles.subtitle} numberOfLines={1}>
+                {subtitle}
+              </AtomicText>
+            )}
+          </View>
+        </View>
+      )}
+
+      {selected && (
+        <View
+          style={[
+            styles.overlay,
+          ]}
+        >
+          <View style={styles.checkCircle}>
+            <AtomicIcon name="checkmark-outline" size="md" color="primary" />
+          </View>
+        </View>
+      )}
+    </CardWrapper>
+  );
+};

package/src/molecules/media-card/index.ts

@@ -0,0 +1,2 @@
+export { MediaCard } from './MediaCard';
+export type { MediaCardProps, MediaCardSize, MediaCardOverlayPosition } from './types';

package/src/molecules/media-card/types.ts

@@ -0,0 +1,40 @@
+export type MediaCardSize = 'sm' | 'md' | 'lg';
+export type MediaCardOverlayPosition = 'bottom' | 'center';
+
+export interface MediaCardProps {
+  /** Image URI to display */
+  uri: string;
+
+  /** Optional title text */
+  title?: string;
+
+  /** Optional subtitle text (uses count, etc.) */
+  subtitle?: string;
+
+  /** Optional badge text (NEW, etc.) */
+  badge?: string;
+
+  /** Whether the card is selected */
+  selected?: boolean;
+
+  /** Card size */
+  size?: MediaCardSize;
+
+  /** Aspect ratio (width/height) */
+  aspectRatio?: number;
+
+  /** Overlay position */
+  overlayPosition?: MediaCardOverlayPosition;
+
+  /** Whether to show overlay */
+  showOverlay?: boolean;
+
+  /** Press handler */
+  onPress?: () => void;
+
+  /** Custom width */
+  width?: number;
+
+  /** Test ID */
+  testID?: string;
+}