@umituz/react-native-design-system 2.6.102 → 2.6.104

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.6.102",
+  "version": "2.6.104",
   "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/exports/molecules.ts

@@ -181,5 +181,9 @@ export {
   // Hero Section
   HeroSection,
   type HeroSectionProps,
+  // Info Grid
+  InfoGrid,
+  type InfoGridProps,
+  type InfoGridItem,
 } from '../molecules';
 

package/src/molecules/filter-group/FilterGroup.tsx

@@ -9,6 +9,7 @@ export function FilterGroup<T = string>({
   items,
   selectedValue,
   onSelect,
+  multiSelect = false,
   style,
   contentContainerStyle,
   itemStyle,
@@ -37,7 +38,9 @@ export function FilterGroup<T = string>({
       contentContainerStyle={[styles.content, contentContainerStyle]}
     >
       {items.map((item) => {
-        const isSelected = item.value === selectedValue;
+        const isSelected = multiSelect
+          ? Array.isArray(selectedValue) && selectedValue.includes(item.value)
+          : item.value === selectedValue;
         return (
           <AtomicChip
             key={`${item.value}`}

package/src/molecules/filter-group/types.ts

@@ -7,8 +7,9 @@ export interface FilterGroupItem<T = string> {
 
 export interface FilterGroupProps<T = string> {
   items: FilterGroupItem<T>[];
-  selectedValue: T;
+  selectedValue: T | T[];
   onSelect: (value: T) => void;
+  multiSelect?: boolean;
   style?: any;
   contentContainerStyle?: any;
   itemStyle?: any;

package/src/molecules/index.ts

@@ -68,4 +68,6 @@ export * from './filter-group';
 export * from './action-footer';
 export * from './info-card';
 export * from './hero-section';
+export * from './info-grid';
+
 

package/src/molecules/info-grid/InfoGrid.tsx

@@ -0,0 +1,102 @@
+
+import React from 'react';
+import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
+import { AtomicText } from '../../atoms/AtomicText';
+import { AtomicIcon } from '../../atoms/AtomicIcon';
+import { useAppDesignTokens } from '../../theme';
+import type { InfoGridProps, InfoGridItem } from './types';
+
+export const InfoGrid: React.FC<InfoGridProps> = ({
+  title,
+  headerIcon,
+  items,
+  columns = 2,
+  style,
+  itemStyle,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const styles = StyleSheet.create({
+    container: {
+      gap: tokens.spacing.md,
+    },
+    header: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: tokens.spacing.xs,
+    },
+    headerIcon: {
+      width: 28,
+      height: 28,
+      borderRadius: tokens.borders.radius.sm,
+      backgroundColor: `${tokens.colors.primary}20`,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    headerTitle: {
+      ...tokens.typography.labelLarge,
+      fontWeight: '700',
+      color: tokens.colors.primary,
+    },
+    grid: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      gap: tokens.spacing.sm,
+    },
+    item: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: tokens.spacing.sm,
+      width: `${100 / columns - 2}%`, // Basic percentage calculation
+      backgroundColor: tokens.colors.surfaceVariant,
+      padding: tokens.spacing.md,
+      borderRadius: tokens.borders.radius.md,
+      borderWidth: 1,
+      borderColor: tokens.colors.outlineVariant,
+    },
+    iconContainer: {
+      width: 32,
+      height: 32,
+      borderRadius: tokens.borders.radius.sm,
+      backgroundColor: `${tokens.colors.primary}20`,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    itemText: {
+      flex: 1,
+      ...tokens.typography.bodySmall,
+      color: tokens.colors.textPrimary,
+      fontWeight: '500',
+    },
+  });
+
+  return (
+    <View style={[styles.container, style]}>
+      {(title || headerIcon) && (
+        <View style={styles.header}>
+          {headerIcon && (
+            <View style={styles.headerIcon}>
+              <AtomicIcon name={headerIcon} size="xs" color="primary" />
+            </View>
+          )}
+          {title && <AtomicText style={styles.headerTitle}>{title}</AtomicText>}
+        </View>
+      )}
+
+      <View style={styles.grid}>
+        {items.map((item, index) => (
+          <View key={index} style={[styles.item, itemStyle]}>
+            {item.icon && (
+              <View style={styles.iconContainer}>
+                <AtomicIcon name={item.icon} size="xs" color="primary" />
+              </View>
+            )}
+            <AtomicText style={styles.itemText} numberOfLines={2}>
+              {item.text}
+            </AtomicText>
+          </View>
+        ))}
+      </View>
+    </View>
+  );
+};

package/src/molecules/info-grid/index.ts

@@ -0,0 +1,3 @@
+
+export * from './InfoGrid';
+export * from './types';

package/src/molecules/info-grid/types.ts

@@ -0,0 +1,17 @@
+
+import { ViewStyle, StyleProp } from 'react-native';
+
+export interface InfoGridItem {
+  icon?: string;
+  text: string;
+  testID?: string;
+}
+
+export interface InfoGridProps {
+  title?: string;
+  headerIcon?: string;
+  items: InfoGridItem[];
+  columns?: number;
+  style?: StyleProp<ViewStyle>;
+  itemStyle?: StyleProp<ViewStyle>;
+}