@sudobility/components-rn 1.0.1

package/src/ui/Overlay/Overlay.tsx

@@ -0,0 +1,86 @@
+import * as React from 'react';
+import { View, Pressable, Modal, StyleSheet } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface OverlayProps {
+  /** Whether overlay is visible */
+  isOpen: boolean;
+  /** Click handler for overlay backdrop */
+  onClose?: () => void;
+  /** Overlay content */
+  children?: React.ReactNode;
+  /** Opacity level */
+  opacity?: 'light' | 'medium' | 'dark';
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * Overlay Component
+ *
+ * Full-screen backdrop overlay with optional content.
+ * Typically used with modals, drawers, and popups.
+ *
+ * @example
+ * ```tsx
+ * <Overlay isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
+ *   <Modal>Content</Modal>
+ * </Overlay>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Overlay isOpen={true} opacity="dark" />
+ * ```
+ */
+export const Overlay: React.FC<OverlayProps> = ({
+  isOpen,
+  onClose,
+  children,
+  opacity = 'medium',
+  className,
+}) => {
+  if (!isOpen) return null;
+
+  // Opacity configurations
+  const opacityClasses = {
+    light: 'bg-black/20',
+    medium: 'bg-black/50',
+    dark: 'bg-black/75',
+  };
+
+  return (
+    <Modal
+      visible={isOpen}
+      transparent
+      animationType='fade'
+      onRequestClose={onClose}
+    >
+      <View style={styles.container}>
+        <Pressable
+          style={StyleSheet.absoluteFill}
+          className={cn(opacityClasses[opacity], className)}
+          onPress={onClose}
+          accessibilityRole='button'
+          accessibilityLabel='Close overlay'
+        />
+        {children && (
+          <View style={styles.content} pointerEvents='box-none'>
+            {children}
+          </View>
+        )}
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/src/ui/Overlay/index.ts

@@ -0,0 +1,2 @@
+export { Overlay } from './Overlay';
+export type { OverlayProps } from './Overlay';

package/src/ui/PageContainer/PageContainer.tsx

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import { View, ScrollView, SafeAreaView } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface PageContainerProps {
+  /** Page content */
+  children: React.ReactNode;
+  /** Background variant */
+  background?: 'default' | 'surface' | 'transparent';
+  /** Enable scrolling */
+  scrollable?: boolean;
+  /** Use SafeAreaView */
+  safeArea?: boolean;
+  /** Padding variant */
+  padding?: 'none' | 'sm' | 'md' | 'lg';
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * PageContainer Component
+ *
+ * Full-screen page container with background and safe area handling.
+ * Provides consistent page layouts across the app.
+ *
+ * @example
+ * ```tsx
+ * <PageContainer>
+ *   <Header />
+ *   <Content />
+ * </PageContainer>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <PageContainer
+ *   background="surface"
+ *   scrollable
+ *   safeArea
+ *   padding="md"
+ * >
+ *   <FormContent />
+ * </PageContainer>
+ * ```
+ */
+export const PageContainer: React.FC<PageContainerProps> = ({
+  children,
+  background = 'default',
+  scrollable = false,
+  safeArea = true,
+  padding = 'none',
+  className,
+}) => {
+  const backgroundClasses = {
+    default: 'bg-gray-50 dark:bg-gray-900',
+    surface: 'bg-white dark:bg-gray-800',
+    transparent: 'bg-transparent',
+  };
+
+  const paddingClasses = {
+    none: '',
+    sm: 'p-2',
+    md: 'p-4',
+    lg: 'p-6',
+  };
+
+  const containerClasses = cn(
+    'flex-1',
+    backgroundClasses[background],
+    paddingClasses[padding],
+    className
+  );
+
+  const content = scrollable ? (
+    <ScrollView
+      className={containerClasses}
+      contentContainerStyle={{ flexGrow: 1 }}
+      showsVerticalScrollIndicator={false}
+    >
+      {children}
+    </ScrollView>
+  ) : (
+    <View className={containerClasses}>{children}</View>
+  );
+
+  if (safeArea) {
+    return (
+      <SafeAreaView className={cn('flex-1', backgroundClasses[background])}>
+        {content}
+      </SafeAreaView>
+    );
+  }
+
+  return content;
+};

package/src/ui/PageContainer/index.ts

@@ -0,0 +1,2 @@
+export { PageContainer } from './PageContainer';
+export type { PageContainerProps } from './PageContainer';

package/src/ui/PageHeader/PageHeader.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface PageHeaderProps {
+  /** Page title */
+  title?: string;
+  /** Page description */
+  description?: string;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * PageHeader Component
+ *
+ * Simple page header with title and description.
+ *
+ * @example
+ * ```tsx
+ * <PageHeader
+ *   title="Dashboard"
+ *   description="Welcome back! Here's your overview."
+ * />
+ * ```
+ */
+export const PageHeader: React.FC<PageHeaderProps> = ({
+  title,
+  description,
+  className,
+}) => {
+  return (
+    <View className={cn('mb-8', className)}>
+      {title && (
+        <Text className='text-3xl font-bold text-gray-900 dark:text-white'>
+          {title}
+        </Text>
+      )}
+      {description && (
+        <Text className='mt-2 text-gray-600 dark:text-gray-400'>
+          {description}
+        </Text>
+      )}
+    </View>
+  );
+};

package/src/ui/PageHeader/index.ts

@@ -0,0 +1 @@
+export * from './PageHeader';

package/src/ui/PageSectionHeader/PageSectionHeader.tsx

@@ -0,0 +1,138 @@
+import * as React from 'react';
+import { View, Text, ActivityIndicator } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface PageSectionHeaderProps {
+  /** Section title */
+  title: string;
+  /** Optional subtitle/description */
+  description?: string;
+  /** Item count to display */
+  count?: number;
+  /** Count label (e.g., "items", "templates") */
+  countLabel?: string;
+  /** Action button(s) */
+  action?: React.ReactNode;
+  /** Show loading indicator */
+  loading?: boolean;
+  /** Loading text */
+  loadingText?: string;
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg';
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * PageSectionHeader Component
+ *
+ * A flexible header for page sections with title, description, count, and actions.
+ * Commonly used at the top of content sections to provide context and actions.
+ *
+ * @example
+ * ```tsx
+ * <PageSectionHeader
+ *   title="Templates"
+ *   count={templates.length}
+ *   action={<Button onPress={handleAdd}>Add Template</Button>}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <PageSectionHeader
+ *   title="Email Filters"
+ *   description="Manage your email filtering rules"
+ *   count={12}
+ *   countLabel="filters"
+ *   loading={isRefreshing}
+ * />
+ * ```
+ */
+export const PageSectionHeader: React.FC<PageSectionHeaderProps> = ({
+  title,
+  description,
+  count,
+  countLabel,
+  action,
+  loading = false,
+  loadingText = 'Loading...',
+  size = 'md',
+  className,
+}) => {
+  // Size configurations
+  const sizeClasses = {
+    sm: {
+      title: 'text-lg font-semibold',
+      description: 'text-sm',
+      count: 'text-xs',
+    },
+    md: {
+      title: 'text-xl font-semibold',
+      description: 'text-base',
+      count: 'text-sm',
+    },
+    lg: {
+      title: 'text-2xl font-bold',
+      description: 'text-lg',
+      count: 'text-base',
+    },
+  };
+
+  const sizeConfig = sizeClasses[size];
+
+  return (
+    <View
+      className={cn('flex-row items-start justify-between gap-4', className)}
+    >
+      <View className='flex-1'>
+        <View className='flex-row items-center gap-3 flex-wrap'>
+          <Text
+            className={cn(sizeConfig.title, 'text-gray-900 dark:text-gray-100')}
+          >
+            {title}
+          </Text>
+
+          {count !== undefined && (
+            <Text
+              className={cn(
+                sizeConfig.count,
+                'text-gray-500 dark:text-gray-400'
+              )}
+            >
+              ({count}
+              {countLabel && ` ${countLabel}`})
+            </Text>
+          )}
+
+          {loading && (
+            <View className='flex-row items-center gap-2'>
+              <ActivityIndicator size='small' color='#3b82f6' />
+              <Text
+                className={cn(
+                  sizeConfig.count,
+                  'text-gray-500 dark:text-gray-400'
+                )}
+              >
+                {loadingText}
+              </Text>
+            </View>
+          )}
+        </View>
+
+        {description && (
+          <Text
+            className={cn(
+              sizeConfig.description,
+              'mt-1 text-gray-600 dark:text-gray-400'
+            )}
+          >
+            {description}
+          </Text>
+        )}
+      </View>
+
+      {action && <View>{action}</View>}
+    </View>
+  );
+};

package/src/ui/PageSectionHeader/index.ts

@@ -0,0 +1,2 @@
+export { PageSectionHeader } from './PageSectionHeader';
+export type { PageSectionHeaderProps } from './PageSectionHeader';

package/src/ui/Pagination/Pagination.tsx

@@ -0,0 +1,271 @@
+import * as React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface PaginationProps {
+  /** Current page number (1-indexed) */
+  currentPage: number;
+  /** Total number of pages */
+  totalPages: number;
+  /** Page change handler */
+  onPageChange: (page: number) => void;
+  /** Number of page buttons to show on each side */
+  siblingCount?: number;
+  /** Show first/last buttons */
+  showFirstLast?: boolean;
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg';
+  /** Previous icon */
+  prevIcon?: React.ReactNode;
+  /** Next icon */
+  nextIcon?: React.ReactNode;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * Pagination Component
+ *
+ * Flexible pagination controls with page numbers and navigation buttons.
+ * Automatically handles ellipsis for large page counts.
+ *
+ * @example
+ * ```tsx
+ * <Pagination
+ *   currentPage={3}
+ *   totalPages={10}
+ *   onPageChange={setPage}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Pagination
+ *   currentPage={currentPage}
+ *   totalPages={totalPages}
+ *   onPageChange={handlePageChange}
+ *   siblingCount={2}
+ *   showFirstLast
+ *   size="lg"
+ * />
+ * ```
+ */
+export const Pagination: React.FC<PaginationProps> = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+  siblingCount = 1,
+  showFirstLast = false,
+  size = 'md',
+  prevIcon,
+  nextIcon,
+  className,
+}) => {
+  // Size configurations
+  const sizeConfig = {
+    sm: {
+      button: 'h-8 w-8',
+      text: 'text-xs',
+      icon: 'text-xs',
+    },
+    md: {
+      button: 'h-10 w-10',
+      text: 'text-sm',
+      icon: 'text-sm',
+    },
+    lg: {
+      button: 'h-12 w-12',
+      text: 'text-base',
+      icon: 'text-base',
+    },
+  };
+
+  const config = sizeConfig[size];
+
+  // Generate page numbers to display
+  const generatePageNumbers = (): (number | 'ellipsis')[] => {
+    const pages: (number | 'ellipsis')[] = [];
+
+    // Always show first page
+    pages.push(1);
+
+    // Calculate range around current page
+    const leftSiblingIndex = Math.max(currentPage - siblingCount, 2);
+    const rightSiblingIndex = Math.min(
+      currentPage + siblingCount,
+      totalPages - 1
+    );
+
+    // Add left ellipsis if needed
+    if (leftSiblingIndex > 2) {
+      pages.push('ellipsis');
+    }
+
+    // Add pages around current page
+    for (let i = leftSiblingIndex; i <= rightSiblingIndex; i++) {
+      pages.push(i);
+    }
+
+    // Add right ellipsis if needed
+    if (rightSiblingIndex < totalPages - 1) {
+      pages.push('ellipsis');
+    }
+
+    // Always show last page (if more than 1 page)
+    if (totalPages > 1) {
+      pages.push(totalPages);
+    }
+
+    return pages;
+  };
+
+  const pages = generatePageNumbers();
+
+  const handlePrevious = () => {
+    if (currentPage > 1) {
+      onPageChange(currentPage - 1);
+    }
+  };
+
+  const handleNext = () => {
+    if (currentPage < totalPages) {
+      onPageChange(currentPage + 1);
+    }
+  };
+
+  const handleFirst = () => {
+    onPageChange(1);
+  };
+
+  const handleLast = () => {
+    onPageChange(totalPages);
+  };
+
+  const buttonBaseClasses = cn(
+    'items-center justify-center rounded-md border border-gray-300 dark:border-gray-600'
+  );
+
+  const pageButtonClasses = (isActive: boolean) =>
+    cn(
+      buttonBaseClasses,
+      config.button,
+      isActive
+        ? 'bg-blue-600 dark:bg-blue-500 border-blue-600 dark:border-blue-500'
+        : 'bg-white dark:bg-gray-800'
+    );
+
+  const navButtonClasses = (disabled: boolean) =>
+    cn(
+      buttonBaseClasses,
+      config.button,
+      'bg-white dark:bg-gray-800',
+      disabled && 'opacity-50'
+    );
+
+  return (
+    <View
+      className={cn('flex-row items-center gap-1', className)}
+      accessibilityRole='none'
+      accessibilityLabel='Pagination'
+    >
+      {/* First button */}
+      {showFirstLast && (
+        <Pressable
+          onPress={handleFirst}
+          disabled={currentPage === 1}
+          className={navButtonClasses(currentPage === 1)}
+          accessibilityRole='button'
+          accessibilityLabel='Go to first page'
+          accessibilityState={{ disabled: currentPage === 1 }}
+        >
+          <Text className={cn(config.text, 'text-gray-700 dark:text-gray-300')}>
+            First
+          </Text>
+        </Pressable>
+      )}
+
+      {/* Previous button */}
+      <Pressable
+        onPress={handlePrevious}
+        disabled={currentPage === 1}
+        className={navButtonClasses(currentPage === 1)}
+        accessibilityRole='button'
+        accessibilityLabel='Go to previous page'
+        accessibilityState={{ disabled: currentPage === 1 }}
+      >
+        {prevIcon || (
+          <Text className={cn(config.icon, 'text-gray-700 dark:text-gray-300')}>
+            ‹
+          </Text>
+        )}
+      </Pressable>
+
+      {/* Page numbers */}
+      {pages.map((page, index) => {
+        if (page === 'ellipsis') {
+          return (
+            <View
+              key={`ellipsis-${index}`}
+              className={cn('items-center justify-center', config.button)}
+            >
+              <Text className='text-gray-400 dark:text-gray-500'>...</Text>
+            </View>
+          );
+        }
+
+        const isActive = page === currentPage;
+        return (
+          <Pressable
+            key={page}
+            onPress={() => onPageChange(page)}
+            className={pageButtonClasses(isActive)}
+            accessibilityRole='button'
+            accessibilityLabel={`Go to page ${page}`}
+            accessibilityState={{ selected: isActive }}
+          >
+            <Text
+              className={cn(
+                config.text,
+                isActive ? 'text-white' : 'text-gray-700 dark:text-gray-300'
+              )}
+            >
+              {page}
+            </Text>
+          </Pressable>
+        );
+      })}
+
+      {/* Next button */}
+      <Pressable
+        onPress={handleNext}
+        disabled={currentPage === totalPages}
+        className={navButtonClasses(currentPage === totalPages)}
+        accessibilityRole='button'
+        accessibilityLabel='Go to next page'
+        accessibilityState={{ disabled: currentPage === totalPages }}
+      >
+        {nextIcon || (
+          <Text className={cn(config.icon, 'text-gray-700 dark:text-gray-300')}>
+            ›
+          </Text>
+        )}
+      </Pressable>
+
+      {/* Last button */}
+      {showFirstLast && (
+        <Pressable
+          onPress={handleLast}
+          disabled={currentPage === totalPages}
+          className={navButtonClasses(currentPage === totalPages)}
+          accessibilityRole='button'
+          accessibilityLabel='Go to last page'
+          accessibilityState={{ disabled: currentPage === totalPages }}
+        >
+          <Text className={cn(config.text, 'text-gray-700 dark:text-gray-300')}>
+            Last
+          </Text>
+        </Pressable>
+      )}
+    </View>
+  );
+};

package/src/ui/Pagination/index.ts

@@ -0,0 +1,2 @@
+export { Pagination } from './Pagination';
+export type { PaginationProps } from './Pagination';