@idealyst/datagrid 1.0.40

package/README.md

@@ -0,0 +1,217 @@
+# @idealyst/datagrid
+
+High-performance, cross-platform datagrid component for React and React Native, built on top of @idealyst/components.
+
+## Features
+
+- 🚀 **Virtualized Rendering** - Powered by react-window for web, native FlatList for mobile
+- 📱 **Cross-Platform** - Works seamlessly on React and React Native
+- 🎨 **Theme Integration** - Built with @idealyst/theme and Unistyles
+- 📊 **Rich Features** - Sorting, selection, custom rendering, and more
+- ⚡ **Performance** - Optimized for large datasets with virtualization
+- 🔧 **Customizable** - Flexible column configuration and styling
+
+## Installation
+
+```bash
+npm install @idealyst/datagrid
+# or
+yarn add @idealyst/datagrid
+```
+
+### Peer Dependencies
+
+This package requires the following peer dependencies:
+
+- `@idealyst/components` - Core component library
+- `@idealyst/theme` - Theme system
+- `react` >= 16.8.0
+- `react-window` (for web virtualization)
+- `react-native` >= 0.60.0 (for native)
+- `react-native-unistyles` - Styling system
+
+## Usage
+
+### Basic Example
+
+```tsx
+import { DataGrid } from '@idealyst/datagrid';
+
+const data = [
+  { id: 1, name: 'John Doe', email: 'john@example.com', age: 30 },
+  { id: 2, name: 'Jane Smith', email: 'jane@example.com', age: 25 },
+  // ... more data
+];
+
+const columns = [
+  { key: 'id', header: 'ID', width: 60 },
+  { key: 'name', header: 'Name', width: 150 },
+  { key: 'email', header: 'Email', width: 200 },
+  { key: 'age', header: 'Age', width: 80, sortable: true },
+];
+
+function MyDataGrid() {
+  return (
+    <DataGrid
+      data={data}
+      columns={columns}
+      height={400}
+      virtualized={true}
+    />
+  );
+}
+```
+
+### Advanced Features
+
+#### Custom Cell Rendering
+
+```tsx
+const columns = [
+  {
+    key: 'status',
+    header: 'Status',
+    render: (value) => (
+      <Badge variant="filled" intent={value === 'active' ? 'success' : 'neutral'}>
+        {value}
+      </Badge>
+    ),
+  },
+  {
+    key: 'actions',
+    header: 'Actions',
+    render: (value, row) => (
+      <Button size="small" onPress={() => handleEdit(row)}>
+        Edit
+      </Button>
+    ),
+  },
+];
+```
+
+#### Row Selection
+
+```tsx
+function SelectableDataGrid() {
+  const [selectedRows, setSelectedRows] = useState<number[]>([]);
+
+  return (
+    <DataGrid
+      data={data}
+      columns={columns}
+      selectedRows={selectedRows}
+      onSelectionChange={setSelectedRows}
+      multiSelect={true}
+      onRowClick={(row, index) => console.log('Clicked:', row)}
+    />
+  );
+}
+```
+
+#### Sorting
+
+```tsx
+function SortableDataGrid() {
+  const [sortedData, setSortedData] = useState(data);
+
+  const handleSort = (column, direction) => {
+    const sorted = [...data].sort((a, b) => {
+      const aVal = a[column.key];
+      const bVal = b[column.key];
+      return direction === 'asc' 
+        ? aVal > bVal ? 1 : -1
+        : aVal < bVal ? 1 : -1;
+    });
+    setSortedData(sorted);
+  };
+
+  return (
+    <DataGrid
+      data={sortedData}
+      columns={columns}
+      onSort={handleSort}
+    />
+  );
+}
+```
+
+#### Dynamic Styling
+
+```tsx
+<DataGrid
+  data={data}
+  columns={columns}
+  rowStyle={(row, index) => ({
+    backgroundColor: index % 2 === 0 ? '#f5f5f5' : 'white',
+  })}
+  headerStyle={{
+    backgroundColor: '#e0e0e0',
+    fontWeight: 'bold',
+  }}
+/>
+```
+
+## API Reference
+
+### DataGrid Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `data` | `T[]` | Required | Array of data objects |
+| `columns` | `Column<T>[]` | Required | Column configuration |
+| `height` | `number \| string` | `400` | Height of the grid |
+| `width` | `number \| string` | `'100%'` | Width of the grid |
+| `rowHeight` | `number` | `48` | Height of each row |
+| `headerHeight` | `number` | `56` | Height of the header |
+| `virtualized` | `boolean` | `true` | Enable virtualization for large datasets |
+| `stickyHeader` | `boolean` | `true` | Keep header visible when scrolling |
+| `selectedRows` | `number[]` | `[]` | Array of selected row indices |
+| `multiSelect` | `boolean` | `false` | Allow multiple row selection |
+| `onRowClick` | `(row: T, index: number) => void` | - | Row click handler |
+| `onSelectionChange` | `(rows: number[]) => void` | - | Selection change handler |
+| `onSort` | `(column: Column, direction: 'asc' \| 'desc') => void` | - | Sort handler |
+| `style` | `ViewStyle` | - | Container style |
+| `headerStyle` | `ViewStyle` | - | Header style |
+| `rowStyle` | `ViewStyle \| ((row: T, index: number) => ViewStyle)` | - | Row style |
+
+### Column Configuration
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `key` | `string` | Unique column identifier |
+| `header` | `string` | Column header text |
+| `width` | `number` | Fixed column width |
+| `minWidth` | `number` | Minimum column width |
+| `maxWidth` | `number` | Maximum column width |
+| `sortable` | `boolean` | Enable sorting for this column |
+| `resizable` | `boolean` | Enable resizing (coming soon) |
+| `accessor` | `(row: T) => any` | Custom value accessor |
+| `render` | `(value: any, row: T, index: number) => ReactNode` | Custom cell renderer |
+| `headerStyle` | `ViewStyle` | Header cell style |
+| `cellStyle` | `ViewStyle \| ((value: any, row: T) => ViewStyle)` | Cell style |
+
+## Architecture
+
+The DataGrid is built using a layered architecture:
+
+1. **Platform Primitives** - Low-level components that handle platform differences:
+   - `ScrollView` - Native scrolling for each platform
+   - `VirtualizedList` - react-window for web, FlatList for native
+
+2. **DataGrid Component** - Unified component that uses primitives:
+   - Single implementation works on all platforms
+   - Composes @idealyst/components for UI elements
+   - Uses Unistyles for theming
+
+This approach ensures maximum code reuse while optimizing for each platform's strengths.
+
+## Performance Tips
+
+1. **Use Virtualization** - Enable `virtualized={true}` for datasets > 100 rows
+2. **Set Fixed Heights** - Provide `rowHeight` for better performance
+3. **Optimize Renders** - Use `React.memo` for custom cell renderers
+4. **Limit Columns** - Consider horizontal scrolling for many columns
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@idealyst/datagrid",
+  "version": "1.0.40",
+  "description": "High-performance datagrid component for React and React Native",
+  "documentation": "https://github.com/your-username/idealyst-framework/tree/main/packages/datagrid#readme",
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
+  "react-native": "src/index.native.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/your-username/idealyst-framework.git",
+    "directory": "packages/datagrid"
+  },
+  "author": "Your Name <your.email@example.com>",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "react-native": "./src/index.native.ts",
+      "import": "./src/index.ts",
+      "require": "./src/index.ts",
+      "types": "./src/index.ts"
+    },
+    "./examples": {
+      "import": "./src/examples/index.ts",
+      "require": "./src/examples/index.ts",
+      "types": "./src/examples/index.ts"
+    }
+  },
+  "scripts": {
+    "prepublishOnly": "echo 'Publishing TypeScript source directly'",
+    "publish:npm": "npm publish"
+  },
+  "peerDependencies": {
+    "@idealyst/components": "^1.0.40",
+    "@idealyst/theme": "^1.0.40",
+    "react": ">=16.8.0",
+    "react-native": ">=0.60.0",
+    "react-native-unistyles": "^3.0.4",
+    "react-window": "^1.8.10"
+  },
+  "peerDependenciesMeta": {
+    "@idealyst/components": {
+      "optional": false
+    },
+    "@idealyst/theme": {
+      "optional": false
+    },
+    "react-native": {
+      "optional": true
+    },
+    "react-native-unistyles": {
+      "optional": true
+    },
+    "react-window": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.0",
+    "@types/react-window": "^1.8.8",
+    "typescript": "^5.0.0"
+  },
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "keywords": [
+    "react",
+    "react-native",
+    "datagrid",
+    "table",
+    "grid",
+    "cross-platform",
+    "react-window",
+    "virtualization"
+  ]
+}

package/src/DataGrid/DataGrid.tsx

@@ -0,0 +1,196 @@
+import React, { useState, useMemo, useCallback } from 'react';
+import { View, Text, Button } from '@idealyst/components';
+import { createStyleSheet, useStyles } from 'react-native-unistyles';
+import { ScrollView } from '../primitives/ScrollView';
+import { VirtualizedList } from '../primitives/VirtualizedList';
+import type { DataGridProps, Column } from './types';
+
+export function DataGrid<T extends Record<string, any>>({
+  data,
+  columns,
+  rowHeight = 48,
+  headerHeight = 56,
+  onRowClick,
+  onSort,
+  virtualized = true,
+  height = 400,
+  width = '100%',
+  style,
+  headerStyle,
+  rowStyle,
+  selectedRows = [],
+  onSelectionChange,
+  multiSelect = false,
+  stickyHeader = true,
+}: DataGridProps<T>) {
+  const { styles } = useStyles(stylesheet);
+  const [sortColumn, setSortColumn] = useState<string | null>(null);
+  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
+
+  const handleSort = useCallback((column: Column<T>) => {
+    if (!column.sortable) return;
+    
+    const newDirection = sortColumn === column.key && sortDirection === 'asc' ? 'desc' : 'asc';
+    setSortColumn(column.key);
+    setSortDirection(newDirection);
+    onSort?.(column, newDirection);
+  }, [sortColumn, sortDirection, onSort]);
+
+  const handleRowClick = useCallback((row: T, index: number) => {
+    if (onSelectionChange) {
+      let newSelection: number[];
+      if (multiSelect) {
+        if (selectedRows.includes(index)) {
+          newSelection = selectedRows.filter(i => i !== index);
+        } else {
+          newSelection = [...selectedRows, index];
+        }
+      } else {
+        newSelection = selectedRows.includes(index) ? [] : [index];
+      }
+      onSelectionChange(newSelection);
+    }
+    onRowClick?.(row, index);
+  }, [selectedRows, onSelectionChange, multiSelect, onRowClick]);
+
+  const renderHeader = () => (
+    <View style={[styles.header, headerStyle]}>
+      {columns.map((column) => (
+        <View
+          key={column.key}
+          style={[
+            styles.headerCell,
+            { width: column.width || 'auto', minWidth: column.minWidth, maxWidth: column.maxWidth },
+            column.headerStyle,
+          ]}
+        >
+          <Text weight="bold" style={styles.headerText}>
+            {column.header}
+          </Text>
+          {column.sortable && (
+            <Text style={styles.sortIndicator}>
+              {sortColumn === column.key ? (sortDirection === 'asc' ? '▲' : '▼') : ''}
+            </Text>
+          )}
+        </View>
+      ))}
+    </View>
+  );
+
+  const renderRow = ({ item, index }: { item: T; index: number }) => {
+    const isSelected = selectedRows.includes(index);
+    const computedRowStyle = typeof rowStyle === 'function' ? rowStyle(item, index) : rowStyle;
+    
+    return (
+      <View
+        style={[
+          styles.row,
+          isSelected && styles.selectedRow,
+          computedRowStyle,
+        ]}
+        onPress={() => handleRowClick(item, index)}
+      >
+        {columns.map((column) => {
+          const value = column.accessor ? column.accessor(item) : item[column.key];
+          const cellContent = column.render ? column.render(value, item, index) : value;
+          const computedCellStyle = typeof column.cellStyle === 'function' 
+            ? column.cellStyle(value, item) 
+            : column.cellStyle;
+          
+          return (
+            <View
+              key={column.key}
+              style={[
+                styles.cell,
+                { width: column.width || 'auto', minWidth: column.minWidth, maxWidth: column.maxWidth },
+                computedCellStyle,
+              ]}
+            >
+              {typeof cellContent === 'string' || typeof cellContent === 'number' ? (
+                <Text>{cellContent}</Text>
+              ) : (
+                cellContent
+              )}
+            </View>
+          );
+        })}
+      </View>
+    );
+  };
+
+  const containerHeight = typeof height === 'number' ? height : undefined;
+
+  return (
+    <View style={[styles.container, { width, height }, style]}>
+      {stickyHeader && renderHeader()}
+      {virtualized && containerHeight ? (
+        <VirtualizedList
+          data={data}
+          renderItem={renderRow}
+          itemHeight={rowHeight}
+          height={containerHeight - (stickyHeader ? headerHeight : 0)}
+          width={width}
+        />
+      ) : (
+        <ScrollView
+          style={styles.scrollView}
+          showsVerticalScrollIndicator={true}
+        >
+          {!stickyHeader && renderHeader()}
+          {data.map((item, index) => renderRow({ item, index }))}
+        </ScrollView>
+      )}
+    </View>
+  );
+}
+
+const stylesheet = createStyleSheet((theme) => ({
+  container: {
+    backgroundColor: theme.colors.background,
+    borderWidth: 1,
+    borderColor: theme.colors.neutral[200],
+    borderRadius: theme.radius.md,
+    overflow: 'hidden',
+  },
+  header: {
+    flexDirection: 'row',
+    backgroundColor: theme.colors.neutral[50],
+    borderBottomWidth: 2,
+    borderBottomColor: theme.colors.neutral[200],
+  },
+  headerCell: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: theme.spacing.sm,
+    borderRightWidth: 1,
+    borderRightColor: theme.colors.neutral[200],
+  },
+  headerText: {
+    fontSize: 14,
+    color: theme.colors.neutral[700],
+  },
+  sortIndicator: {
+    fontSize: 10,
+    marginLeft: theme.spacing.xs,
+    color: theme.colors.primary[500],
+  },
+  row: {
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+    borderBottomColor: theme.colors.neutral[100],
+    backgroundColor: theme.colors.background,
+  },
+  selectedRow: {
+    backgroundColor: theme.colors.primary[50],
+  },
+  cell: {
+    padding: theme.spacing.sm,
+    borderRightWidth: 1,
+    borderRightColor: theme.colors.neutral[100],
+    justifyContent: 'center',
+  },
+  scrollView: {
+    flex: 1,
+  },
+}));

package/src/DataGrid/index.ts

@@ -0,0 +1,2 @@
+export { DataGrid } from './DataGrid';
+export type { DataGridProps, Column, CellProps, RowProps, HeaderCellProps } from './types';

package/src/DataGrid/types.ts

@@ -0,0 +1,59 @@
+import { ViewStyle, TextStyle } from 'react-native';
+
+export interface Column<T = any> {
+  key: string;
+  header: string;
+  width?: number;
+  minWidth?: number;
+  maxWidth?: number;
+  resizable?: boolean;
+  sortable?: boolean;
+  accessor?: (row: T) => any;
+  render?: (value: any, row: T, index: number) => React.ReactNode;
+  headerStyle?: ViewStyle;
+  cellStyle?: ViewStyle | ((value: any, row: T) => ViewStyle);
+}
+
+export interface DataGridProps<T = any> {
+  data: T[];
+  columns: Column<T>[];
+  rowHeight?: number;
+  headerHeight?: number;
+  onRowClick?: (row: T, index: number) => void;
+  onSort?: (column: Column<T>, direction: 'asc' | 'desc') => void;
+  virtualized?: boolean;
+  height?: number | string;
+  width?: number | string;
+  style?: ViewStyle;
+  headerStyle?: ViewStyle;
+  rowStyle?: ViewStyle | ((row: T, index: number) => ViewStyle);
+  selectedRows?: number[];
+  onSelectionChange?: (selectedRows: number[]) => void;
+  multiSelect?: boolean;
+  stickyHeader?: boolean;
+}
+
+export interface CellProps {
+  children: React.ReactNode;
+  style?: ViewStyle;
+  width?: number;
+  onPress?: () => void;
+}
+
+export interface RowProps {
+  children: React.ReactNode;
+  style?: ViewStyle;
+  onPress?: () => void;
+  selected?: boolean;
+}
+
+export interface HeaderCellProps {
+  children: React.ReactNode;
+  style?: ViewStyle;
+  width?: number;
+  sortable?: boolean;
+  sortDirection?: 'asc' | 'desc' | null;
+  onSort?: () => void;
+  resizable?: boolean;
+  onResize?: (width: number) => void;
+}

package/src/examples/BasicExample.tsx

@@ -0,0 +1,136 @@
+import React, { useState } from 'react';
+import { View, Text, Button } from '@idealyst/components';
+import { DataGrid } from '../DataGrid';
+import type { Column } from '../DataGrid/types';
+
+interface User {
+  id: number;
+  name: string;
+  email: string;
+  role: string;
+  status: 'active' | 'inactive';
+  joinDate: string;
+}
+
+const sampleData: User[] = [
+  { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin', status: 'active', joinDate: '2023-01-15' },
+  { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User', status: 'active', joinDate: '2023-02-20' },
+  { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'Moderator', status: 'inactive', joinDate: '2023-03-10' },
+  { id: 4, name: 'Alice Brown', email: 'alice@example.com', role: 'User', status: 'active', joinDate: '2023-04-05' },
+  { id: 5, name: 'Charlie Wilson', email: 'charlie@example.com', role: 'User', status: 'active', joinDate: '2023-05-12' },
+  // Add more sample data for testing virtualization
+  ...Array.from({ length: 95 }, (_, i) => ({
+    id: i + 6,
+    name: `User ${i + 6}`,
+    email: `user${i + 6}@example.com`,
+    role: 'User',
+    status: (i % 2 === 0 ? 'active' : 'inactive') as 'active' | 'inactive',
+    joinDate: `2023-${String((i % 12) + 1).padStart(2, '0')}-${String((i % 28) + 1).padStart(2, '0')}`,
+  })),
+];
+
+export function BasicExample() {
+  const [selectedRows, setSelectedRows] = useState<number[]>([]);
+  const [data, setData] = useState(sampleData);
+
+  const columns: Column<User>[] = [
+    { 
+      key: 'id', 
+      header: 'ID', 
+      width: 60,
+      sortable: true,
+    },
+    { 
+      key: 'name', 
+      header: 'Name', 
+      width: 150,
+      sortable: true,
+    },
+    { 
+      key: 'email', 
+      header: 'Email', 
+      width: 200,
+    },
+    { 
+      key: 'role', 
+      header: 'Role', 
+      width: 100,
+      render: (value) => (
+        <View style={{ paddingHorizontal: 8, paddingVertical: 4, backgroundColor: '#f0f0f0', borderRadius: 4 }}>
+          <Text size="small">{value}</Text>
+        </View>
+      ),
+    },
+    { 
+      key: 'status', 
+      header: 'Status', 
+      width: 100,
+      render: (value) => (
+        <Text 
+          size="small" 
+          weight="medium"
+          style={{ color: value === 'active' ? '#22c55e' : '#ef4444' }}
+        >
+          {value}
+        </Text>
+      ),
+    },
+    { 
+      key: 'joinDate', 
+      header: 'Join Date', 
+      width: 120,
+      sortable: true,
+    },
+  ];
+
+  const handleSort = (column: Column<User>, direction: 'asc' | 'desc') => {
+    const sorted = [...data].sort((a, b) => {
+      const aVal = a[column.key as keyof User];
+      const bVal = b[column.key as keyof User];
+      
+      if (typeof aVal === 'number' && typeof bVal === 'number') {
+        return direction === 'asc' ? aVal - bVal : bVal - aVal;
+      }
+      
+      const aStr = String(aVal);
+      const bStr = String(bVal);
+      return direction === 'asc' 
+        ? aStr.localeCompare(bStr)
+        : bStr.localeCompare(aStr);
+    });
+    setData(sorted);
+  };
+
+  return (
+    <View spacing="lg" style={{ padding: 20 }}>
+      <Text size="xlarge" weight="bold">DataGrid Example</Text>
+      
+      <View spacing="sm">
+        <Text>Selected rows: {selectedRows.length}</Text>
+        {selectedRows.length > 0 && (
+          <Button 
+            size="small" 
+            variant="outlined"
+            onPress={() => setSelectedRows([])}
+          >
+            Clear Selection
+          </Button>
+        )}
+      </View>
+
+      <DataGrid
+        data={data}
+        columns={columns}
+        height={500}
+        virtualized={true}
+        selectedRows={selectedRows}
+        onSelectionChange={setSelectedRows}
+        multiSelect={true}
+        onSort={handleSort}
+        rowStyle={(row, index) => ({
+          backgroundColor: index % 2 === 0 ? '#fafafa' : '#ffffff',
+        })}
+      />
+    </View>
+  );
+}

package/src/examples/index.ts

@@ -0,0 +1 @@
+export { BasicExample } from './BasicExample';

package/src/index.native.ts

@@ -0,0 +1,2 @@
+export { DataGrid } from './DataGrid';
+export type { DataGridProps, Column, CellProps, RowProps, HeaderCellProps } from './DataGrid/types';

package/src/index.ts

@@ -0,0 +1,2 @@
+export { DataGrid } from './DataGrid';
+export type { DataGridProps, Column, CellProps, RowProps, HeaderCellProps } from './DataGrid/types';

package/src/primitives/ScrollView/ScrollView.native.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ScrollView as RNScrollView, ScrollViewProps as RNScrollViewProps } from 'react-native';
+
+interface ScrollViewProps extends RNScrollViewProps {
+  children: React.ReactNode;
+}
+
+export const ScrollView: React.FC<ScrollViewProps> = (props) => {
+  return <RNScrollView {...props} />;
+};

package/src/primitives/ScrollView/ScrollView.web.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { View } from '@idealyst/components';
+
+interface ScrollViewProps {
+  children: React.ReactNode;
+  horizontal?: boolean;
+  style?: any;
+  contentContainerStyle?: any;
+  onScroll?: (event: any) => void;
+  scrollEventThrottle?: number;
+  showsHorizontalScrollIndicator?: boolean;
+  showsVerticalScrollIndicator?: boolean;
+}
+
+export const ScrollView: React.FC<ScrollViewProps> = ({
+  children,
+  horizontal = false,
+  style,
+  contentContainerStyle,
+  onScroll,
+  showsHorizontalScrollIndicator = true,
+  showsVerticalScrollIndicator = true,
+  ...props
+}) => {
+  const scrollStyle = {
+    ...style,
+    overflow: 'auto',
+    WebkitOverflowScrolling: 'touch',
+    ...(horizontal && { overflowY: 'hidden', overflowX: 'auto' }),
+    ...(!showsHorizontalScrollIndicator && { scrollbarWidth: 'none', msOverflowStyle: 'none' }),
+    ...(!showsVerticalScrollIndicator && { scrollbarWidth: 'none', msOverflowStyle: 'none' }),
+  };
+
+  return (
+    <div 
+      style={scrollStyle} 
+      onScroll={onScroll}
+      {...props}
+    >
+      <View style={contentContainerStyle}>
+        {children}
+      </View>
+    </div>
+  );
+};

package/src/primitives/ScrollView/index.native.ts

@@ -0,0 +1 @@
+export { ScrollView } from './ScrollView.native';

package/src/primitives/ScrollView/index.ts

@@ -0,0 +1 @@
+export { ScrollView } from './ScrollView.web';

package/src/primitives/VirtualizedList/VirtualizedList.native.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { FlatList, VirtualizedList as RNVirtualizedList } from 'react-native';
+
+interface VirtualizedListProps {
+  data: any[];
+  renderItem: ({ item, index }: { item: any; index: number }) => React.ReactElement;
+  itemHeight: number | ((index: number) => number);
+  height: number;
+  width?: number | string;
+  horizontal?: boolean;
+  onScroll?: (event: any) => void;
+}
+
+export const VirtualizedList: React.FC<VirtualizedListProps> = ({
+  data,
+  renderItem,
+  itemHeight,
+  height,
+  horizontal = false,
+  onScroll,
+}) => {
+  const getItemLayout = typeof itemHeight === 'number' 
+    ? (data: any, index: number) => ({
+        length: itemHeight,
+        offset: itemHeight * index,
+        index,
+      })
+    : undefined;
+
+  return (
+    <FlatList
+      data={data}
+      renderItem={renderItem}
+      getItemLayout={getItemLayout}
+      horizontal={horizontal}
+      onScroll={onScroll}
+      style={{ height, width }}
+      showsHorizontalScrollIndicator={false}
+      showsVerticalScrollIndicator={false}
+    />
+  );
+};

package/src/primitives/VirtualizedList/VirtualizedList.web.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { VariableSizeList, FixedSizeList } from 'react-window';
+
+interface VirtualizedListProps {
+  data: any[];
+  renderItem: ({ item, index }: { item: any; index: number }) => React.ReactElement;
+  itemHeight: number | ((index: number) => number);
+  height: number;
+  width?: number | string;
+  horizontal?: boolean;
+  onScroll?: (event: any) => void;
+}
+
+export const VirtualizedList: React.FC<VirtualizedListProps> = ({
+  data,
+  renderItem,
+  itemHeight,
+  height,
+  width = '100%',
+  horizontal = false,
+  onScroll,
+}) => {
+  const isVariableSize = typeof itemHeight === 'function';
+  const List = isVariableSize ? VariableSizeList : FixedSizeList;
+  
+  const listProps = {
+    height: horizontal ? '100%' : height,
+    width: horizontal ? height : width,
+    itemCount: data.length,
+    itemSize: itemHeight,
+    layout: horizontal ? 'horizontal' : 'vertical',
+    onScroll,
+  };
+
+  return (
+    <List {...listProps}>
+      {({ index, style }) => (
+        <div style={style}>
+          {renderItem({ item: data[index], index })}
+        </div>
+      )}
+    </List>
+  );
+};

package/src/primitives/VirtualizedList/index.native.ts

@@ -0,0 +1 @@
+export { VirtualizedList } from './VirtualizedList.native';

package/src/primitives/VirtualizedList/index.ts

@@ -0,0 +1 @@
+export { VirtualizedList } from './VirtualizedList.web';