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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.6.96",
+  "version": "2.6.98",
   "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

@@ -98,8 +98,10 @@ export {
   NavigationCleanupManager,
   AppNavigation,
   TabLabel,
+  NavigationHeader, // Added
   useTabBarStyles,
   useTabConfig,
+  type NavigationHeaderProps, // Added
   type TabsNavigatorProps,
   type StackNavigatorProps,
   type FabButtonProps,
@@ -166,4 +168,9 @@ export {
   // GlowingCard
   GlowingCard,
   type GlowingCardProps,
+  // Filter Group
+  FilterGroup,
+  type FilterGroupProps,
+  type FilterItem,
 } from '../molecules';
+

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

@@ -0,0 +1,58 @@
+
+import React from 'react';
+import { ScrollView, StyleSheet, ViewStyle } from 'react-native';
+import { AtomicChip } from '../../atoms/chip';
+import { useAppDesignTokens } from '../../theme';
+import type { FilterGroupProps } from './types';
+
+export function FilterGroup<T = string>({
+  items,
+  selectedValue,
+  onSelect,
+  style,
+  contentContainerStyle,
+  itemStyle,
+}: FilterGroupProps<T>) {
+  const tokens = useAppDesignTokens();
+
+  const styles = StyleSheet.create({
+    container: {
+      flexGrow: 0,
+    },
+    content: {
+      paddingHorizontal: tokens.spacing.md,
+      gap: tokens.spacing.sm,
+      alignItems: 'center',
+    },
+    item: {
+      // Default styles if needed, though AtomicChip handles most
+    },
+  });
+
+  return (
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      style={[styles.container, style]}
+      contentContainerStyle={[styles.content, contentContainerStyle]}
+    >
+      {items.map((item) => {
+        const isSelected = item.value === selectedValue;
+        return (
+          <AtomicChip
+            key={`${item.value}`}
+            variant={isSelected ? 'filled' : 'outlined'}
+            color={isSelected ? 'primary' : 'surface'}
+            selected={isSelected}
+            onPress={() => onSelect(item.value)}
+            clickable
+            style={[styles.item, itemStyle]}
+            testID={item.testID}
+          >
+            {item.label}
+          </AtomicChip>
+        );
+      })}
+    </ScrollView>
+  );
+}

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

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

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

@@ -0,0 +1,15 @@
+
+export interface FilterItem<T = string> {
+  label: string;
+  value: T;
+  testID?: string;
+}
+
+export interface FilterGroupProps<T = string> {
+  items: FilterItem<T>[];
+  selectedValue: T;
+  onSelect: (value: T) => void;
+  style?: any;
+  contentContainerStyle?: any;
+  itemStyle?: any;
+}

package/src/molecules/index.ts

@@ -64,3 +64,5 @@ export * from './splash';
 
 // GlowingCard
 export { GlowingCard, type GlowingCardProps } from './GlowingCard';
+export * from './filter-group';
+