@umituz/react-native-design-system 2.0.0 → 2.0.1

package/package.json

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

package/src/atoms/AtomicCard.tsx

@@ -0,0 +1,84 @@
+/**
+ * AtomicCard Component
+ * 
+ * A simple, styled card container component
+ */
+
+import React from 'react';
+import { View, StyleSheet, type ViewStyle, type StyleProp } from 'react-native';
+import { useAppDesignTokens } from '../theme';
+
+export type AtomicCardVariant = 'elevated' | 'outlined' | 'filled';
+export type AtomicCardPadding = 'none' | 'sm' | 'md' | 'lg';
+
+export interface AtomicCardProps {
+    children: React.ReactNode;
+    variant?: AtomicCardVariant;
+    padding?: AtomicCardPadding;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+
+export const AtomicCard: React.FC<AtomicCardProps> = ({
+    children,
+    variant = 'elevated',
+    padding = 'md',
+    style,
+    testID,
+}) => {
+    const tokens = useAppDesignTokens();
+
+    const paddingValues: Record<AtomicCardPadding, number> = {
+        none: 0,
+        sm: tokens.spacing.sm,
+        md: tokens.spacing.md,
+        lg: tokens.spacing.lg,
+    };
+
+    const getVariantStyle = (): ViewStyle => {
+        switch (variant) {
+            case 'elevated':
+                return {
+                    backgroundColor: tokens.colors.surface,
+                    shadowColor: '#000',
+                    shadowOffset: { width: 0, height: 2 },
+                    shadowOpacity: 0.1,
+                    shadowRadius: 4,
+                    elevation: 2,
+                };
+            case 'outlined':
+                return {
+                    backgroundColor: tokens.colors.surface,
+                    borderWidth: 1,
+                    borderColor: tokens.colors.outline,
+                };
+            case 'filled':
+                return {
+                    backgroundColor: tokens.colors.surfaceVariant,
+                };
+            default:
+                return {};
+        }
+    };
+
+    return (
+        <View
+            style={[
+                styles.card,
+                { borderRadius: tokens.borders.radius.md },
+                { padding: paddingValues[padding] },
+                getVariantStyle(),
+                style,
+            ]}
+            testID={testID}
+        >
+            {children}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    card: {
+        overflow: 'hidden',
+    },
+});

package/src/atoms/index.ts

@@ -5,39 +5,39 @@
 
 // Button
 export {
-  AtomicButton,
-  type AtomicButtonProps,
-  type ButtonVariant,
-  type ButtonSize,
+    AtomicButton,
+    type AtomicButtonProps,
+    type ButtonVariant,
+    type ButtonSize,
 } from './AtomicButton';
 
 // Text
 export { AtomicText, type AtomicTextProps } from './AtomicText';
 
-// Card - Note: Card may not exist, check later
-// export {
-//   AtomicCard,
-//   type AtomicCardProps,
-//   type AtomicCardVariant,
-//   type AtomicCardPadding,
-// } from './AtomicCard';
+// Card
+export {
+    AtomicCard,
+    type AtomicCardProps,
+    type AtomicCardVariant,
+    type AtomicCardPadding,
+} from './AtomicCard';
 
 // Input
 export {
-  AtomicInput,
-  type AtomicInputProps,
-  type AtomicInputVariant,
-  type AtomicInputState,
-  type AtomicInputSize,
+    AtomicInput,
+    type AtomicInputProps,
+    type AtomicInputVariant,
+    type AtomicInputState,
+    type AtomicInputSize,
 } from './AtomicInput';
 
 // Icon
 export {
-  AtomicIcon,
-  type AtomicIconProps,
-  type IconSize,
-  type IconColor,
-  type IconName,
+    AtomicIcon,
+    type AtomicIconProps,
+    type IconSize,
+    type IconColor,
+    type IconName,
 } from './AtomicIcon';
 
 // Avatar
@@ -51,19 +51,19 @@ export { AtomicProgress, type AtomicProgressProps } from './AtomicProgress';
 
 // Fab
 export {
-  AtomicFab,
-  type AtomicFabProps,
-  type FabSize,
-  type FabVariant,
-  getFabVariants,
+    AtomicFab,
+    type AtomicFabProps,
+    type FabSize,
+    type FabVariant,
+    getFabVariants,
 } from './AtomicFab';
 
 // Picker
 export {
-  AtomicPicker,
-  type AtomicPickerProps,
-  type PickerOption,
-  type PickerSize,
+    AtomicPicker,
+    type AtomicPickerProps,
+    type PickerOption,
+    type PickerSize,
 } from './AtomicPicker';
 
 // DatePicker

package/src/index.ts

@@ -116,6 +116,7 @@ export {
   AtomicIcon,
   AtomicButton,
   AtomicInput,
+  AtomicCard,
   AtomicFab,
   AtomicAvatar,
   AtomicChip,
@@ -134,6 +135,9 @@ export {
   type AtomicInputVariant,
   type AtomicInputState,
   type AtomicInputSize,
+  type AtomicCardProps,
+  type AtomicCardVariant,
+  type AtomicCardPadding,
   type AtomicFabProps,
   type FabSize,
   type FabVariant,