@sudobility/components-rn 1.0.1

package/src/ui/Heading/Heading.tsx

@@ -0,0 +1,112 @@
+import * as React from 'react';
+import { Text } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface HeadingProps {
+  /** Heading content */
+  children: React.ReactNode;
+  /** Heading level (for semantic/accessibility purposes) */
+  level?: 1 | 2 | 3 | 4 | 5 | 6;
+  /** Size (independent of level for visual flexibility) */
+  size?: '4xl' | '3xl' | '2xl' | 'xl' | 'lg' | 'base';
+  /** Weight variant */
+  weight?: 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold';
+  /** Color variant */
+  color?: 'default' | 'muted' | 'primary';
+  /** Text alignment */
+  align?: 'left' | 'center' | 'right';
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * Heading Component
+ *
+ * Semantic heading component with flexible sizing and styling.
+ * Level is used for accessibility, size controls visual appearance.
+ *
+ * @example
+ * ```tsx
+ * <Heading level={1} size="4xl">
+ *   Page Title
+ * </Heading>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Heading level={2} size="xl" color="primary">
+ *   Section Title
+ * </Heading>
+ * ```
+ */
+export const Heading: React.FC<HeadingProps> = ({
+  children,
+  level = 2,
+  size,
+  weight = 'bold',
+  color = 'default',
+  align,
+  className,
+}) => {
+  // Default sizes based on level if not explicitly provided
+  const defaultSizes = {
+    1: '4xl',
+    2: '3xl',
+    3: '2xl',
+    4: 'xl',
+    5: 'lg',
+    6: 'base',
+  } as const;
+
+  const actualSize = size || defaultSizes[level];
+
+  // Size configurations
+  const sizeClasses = {
+    '4xl': 'text-4xl',
+    '3xl': 'text-3xl',
+    '2xl': 'text-2xl',
+    xl: 'text-xl',
+    lg: 'text-lg',
+    base: 'text-base',
+  };
+
+  // Weight configurations
+  const weightClasses = {
+    normal: 'font-normal',
+    medium: 'font-medium',
+    semibold: 'font-semibold',
+    bold: 'font-bold',
+    extrabold: 'font-extrabold',
+  };
+
+  // Color configurations
+  const colorClasses = {
+    default: 'text-gray-900 dark:text-gray-100',
+    muted: 'text-gray-700 dark:text-gray-300',
+    primary: 'text-blue-600 dark:text-blue-400',
+  };
+
+  // Alignment configurations
+  const alignClasses = align
+    ? {
+        left: 'text-left',
+        center: 'text-center',
+        right: 'text-right',
+      }[align]
+    : '';
+
+  return (
+    <Text
+      className={cn(
+        sizeClasses[actualSize],
+        weightClasses[weight],
+        colorClasses[color],
+        alignClasses,
+        className
+      )}
+      accessibilityRole='header'
+    >
+      {children}
+    </Text>
+  );
+};

package/src/ui/Heading/index.ts

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

package/src/ui/HelperText/HelperText.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import { View, Text, TextProps } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface HelperTextProps extends TextProps {
+  /** Helper text content */
+  children: React.ReactNode;
+  /** Variant (affects color and icon) */
+  variant?: 'default' | 'error' | 'success' | 'warning';
+  /** Show icon indicator */
+  showIcon?: boolean;
+  /** Size */
+  size?: 'sm' | 'base';
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * HelperText Component
+ *
+ * Text component for form field descriptions, error messages, and hints.
+ * Supports different variants with optional icon indicators.
+ *
+ * @example
+ * ```tsx
+ * <HelperText>
+ *   Enter your email address
+ * </HelperText>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <HelperText variant="error" showIcon>
+ *   This field is required
+ * </HelperText>
+ * ```
+ */
+export const HelperText: React.FC<HelperTextProps> = ({
+  children,
+  variant = 'default',
+  showIcon = false,
+  size = 'sm',
+  className,
+  ...textProps
+}) => {
+  // Size configurations
+  const sizeClasses = {
+    sm: 'text-sm',
+    base: 'text-base',
+  };
+
+  const iconSize = {
+    sm: 'w-4 h-4',
+    base: 'w-5 h-5',
+  };
+
+  // Variant configurations
+  const variantConfig = {
+    default: {
+      text: 'text-gray-600 dark:text-gray-400',
+      icon: 'ℹ',
+    },
+    error: {
+      text: 'text-red-600 dark:text-red-400',
+      icon: '⚠',
+    },
+    success: {
+      text: 'text-green-600 dark:text-green-400',
+      icon: '✓',
+    },
+    warning: {
+      text: 'text-yellow-600 dark:text-yellow-400',
+      icon: '⚠',
+    },
+  };
+
+  const config = variantConfig[variant];
+
+  return (
+    <View className={cn('flex flex-row items-start gap-1.5', className)}>
+      {showIcon && (
+        <Text className={cn(iconSize[size], config.text, 'mt-0.5')}>
+          {config.icon}
+        </Text>
+      )}
+      <Text className={cn(sizeClasses[size], config.text)} {...textProps}>
+        {children}
+      </Text>
+    </View>
+  );
+};

package/src/ui/HelperText/index.ts

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

package/src/ui/IconContainer/IconContainer.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface IconContainerProps {
+  /** Icon element */
+  children: React.ReactNode;
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  /** Color variant */
+  variant?:
+    | 'primary'
+    | 'secondary'
+    | 'success'
+    | 'warning'
+    | 'error'
+    | 'neutral';
+  /** Shape variant */
+  shape?: 'square' | 'rounded' | 'circle';
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * IconContainer Component
+ *
+ * Styled container for displaying icons with consistent sizing and colors.
+ * Commonly used in feature lists, settings, and navigation.
+ *
+ * @example
+ * ```tsx
+ * <IconContainer size="lg" variant="primary" shape="rounded">
+ *   <SettingsIcon />
+ * </IconContainer>
+ * ```
+ */
+export const IconContainer: React.FC<IconContainerProps> = ({
+  children,
+  size = 'md',
+  variant = 'primary',
+  shape = 'rounded',
+  className,
+}) => {
+  // Size configurations
+  const sizeClasses = {
+    sm: 'w-10 h-10',
+    md: 'w-12 h-12',
+    lg: 'w-16 h-16',
+    xl: 'w-20 h-20',
+  };
+
+  // Variant configurations
+  const variantClasses = {
+    primary: 'bg-blue-100 dark:bg-blue-900/30',
+    secondary: 'bg-purple-100 dark:bg-purple-900/30',
+    success: 'bg-green-100 dark:bg-green-900/30',
+    warning: 'bg-yellow-100 dark:bg-yellow-900/30',
+    error: 'bg-red-100 dark:bg-red-900/30',
+    neutral: 'bg-gray-100 dark:bg-gray-800',
+  };
+
+  // Shape configurations
+  const shapeClasses = {
+    square: 'rounded-lg',
+    rounded: 'rounded-2xl',
+    circle: 'rounded-full',
+  };
+
+  return (
+    <View
+      className={cn(
+        'items-center justify-center',
+        sizeClasses[size],
+        variantClasses[variant],
+        shapeClasses[shape],
+        className
+      )}
+    >
+      {children}
+    </View>
+  );
+};

package/src/ui/IconContainer/index.ts

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

package/src/ui/IconText/IconText.tsx

@@ -0,0 +1,120 @@
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface IconTextProps {
+  /** Icon element to display */
+  icon: React.ReactNode;
+  /** Text content */
+  children: React.ReactNode;
+  /** Icon position */
+  iconPosition?: 'left' | 'right' | 'top';
+  /** Gap between icon and text */
+  gap?: 'xs' | 'sm' | 'md' | 'lg';
+  /** Text alignment (for top icon position) */
+  align?: 'left' | 'center' | 'right';
+  /** Color variant */
+  variant?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'muted';
+  /** Additional className for the container */
+  className?: string;
+  /** Additional className for the text */
+  textClassName?: string;
+}
+
+/**
+ * IconText Component
+ *
+ * Displays an icon alongside text content with flexible positioning and styling.
+ * Commonly used for buttons, labels, list items, and feature highlights.
+ *
+ * @example
+ * ```tsx
+ * <IconText icon={<CheckIcon />}>
+ *   Feature enabled
+ * </IconText>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <IconText
+ *   icon={<StarIcon />}
+ *   iconPosition="top"
+ *   align="center"
+ *   variant="primary"
+ * >
+ *   Premium Feature
+ * </IconText>
+ * ```
+ */
+export const IconText: React.FC<IconTextProps> = ({
+  icon,
+  children,
+  iconPosition = 'left',
+  gap = 'md',
+  align = 'left',
+  variant = 'default',
+  className,
+  textClassName,
+}) => {
+  // Gap configurations
+  const gapClasses = {
+    xs: 'gap-1',
+    sm: 'gap-2',
+    md: 'gap-3',
+    lg: 'gap-4',
+  };
+
+  // Alignment classes (for top icon position)
+  const alignClasses = {
+    left: 'items-start',
+    center: 'items-center',
+    right: 'items-end',
+  };
+
+  // Text alignment classes
+  const textAlignClasses = {
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right',
+  };
+
+  // Color variant configurations
+  const variantClasses = {
+    default: 'text-gray-700 dark:text-gray-300',
+    primary: 'text-blue-600 dark:text-blue-400',
+    success: 'text-green-600 dark:text-green-400',
+    warning: 'text-yellow-600 dark:text-yellow-400',
+    danger: 'text-red-600 dark:text-red-400',
+    muted: 'text-gray-500 dark:text-gray-400',
+  };
+
+  // Layout based on icon position
+  const layoutClasses = {
+    left: 'flex-row items-center',
+    right: 'flex-row-reverse items-center',
+    top: 'flex-col',
+  };
+
+  return (
+    <View
+      className={cn(
+        'flex',
+        layoutClasses[iconPosition],
+        gapClasses[gap],
+        iconPosition === 'top' && alignClasses[align],
+        className
+      )}
+    >
+      {icon}
+      <Text
+        className={cn(
+          variantClasses[variant],
+          iconPosition === 'top' && textAlignClasses[align],
+          textClassName
+        )}
+      >
+        {children}
+      </Text>
+    </View>
+  );
+};

package/src/ui/IconText/index.ts

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

package/src/ui/InfiniteScroll/InfiniteScroll.tsx

@@ -0,0 +1,192 @@
+import * as React from 'react';
+import { useCallback } from 'react';
+import {
+  View,
+  Text,
+  FlatList,
+  ActivityIndicator,
+  Pressable,
+  RefreshControl,
+} from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface InfiniteScrollProps<T> {
+  /** Data items to render */
+  data: T[];
+  /** Render function for each item */
+  renderItem: (item: T, index: number) => React.ReactNode;
+  /** Key extractor for list items */
+  keyExtractor: (item: T, index: number) => string;
+  /** Load more callback */
+  onLoadMore: () => void | Promise<void>;
+  /** Loading state */
+  loading?: boolean;
+  /** Has more data */
+  hasMore?: boolean;
+  /** Pull to refresh handler */
+  onRefresh?: () => void | Promise<void>;
+  /** Refreshing state */
+  refreshing?: boolean;
+  /** Loading component */
+  loader?: React.ReactNode;
+  /** End message component */
+  endMessage?: React.ReactNode;
+  /** Empty state component */
+  emptyComponent?: React.ReactNode;
+  /** List header component */
+  headerComponent?: React.ReactNode;
+  /** Threshold to trigger load more (0-1) */
+  threshold?: number;
+  /** Horizontal scroll */
+  horizontal?: boolean;
+  /** Show scroll to top button */
+  showScrollTop?: boolean;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * InfiniteScroll Component
+ *
+ * FlatList wrapper with infinite scrolling support.
+ * Automatically loads more data when approaching the end.
+ *
+ * @example
+ * ```tsx
+ * <InfiniteScroll
+ *   data={items}
+ *   renderItem={(item) => <ItemCard {...item} />}
+ *   keyExtractor={(item) => item.id}
+ *   onLoadMore={loadMoreItems}
+ *   loading={isLoading}
+ *   hasMore={hasNextPage}
+ * />
+ * ```
+ */
+export function InfiniteScroll<T>({
+  data,
+  renderItem,
+  keyExtractor,
+  onLoadMore,
+  loading = false,
+  hasMore = true,
+  onRefresh,
+  refreshing = false,
+  loader,
+  endMessage,
+  emptyComponent,
+  headerComponent,
+  threshold = 0.5,
+  horizontal = false,
+  showScrollTop = false,
+  className,
+}: InfiniteScrollProps<T>) {
+  const flatListRef = React.useRef<FlatList>(null);
+  const [showScrollTopButton, setShowScrollTopButton] = React.useState(false);
+
+  // Handle end reached
+  const handleEndReached = useCallback(() => {
+    if (!loading && hasMore) {
+      onLoadMore();
+    }
+  }, [loading, hasMore, onLoadMore]);
+
+  // Handle scroll for scroll-to-top button
+  const handleScroll = useCallback(
+    (event: { nativeEvent: { contentOffset: { y: number } } }) => {
+      if (showScrollTop && !horizontal) {
+        setShowScrollTopButton(event.nativeEvent.contentOffset.y > 300);
+      }
+    },
+    [showScrollTop, horizontal]
+  );
+
+  // Scroll to top
+  const scrollToTop = useCallback(() => {
+    flatListRef.current?.scrollToOffset({ offset: 0, animated: true });
+  }, []);
+
+  // Default empty component
+  const defaultEmptyComponent = (
+    <View className='flex-1 justify-center items-center py-8'>
+      <Text className='text-gray-500 dark:text-gray-400'>No items found</Text>
+    </View>
+  );
+
+  // Footer component
+  const ListFooterComponent = useCallback(() => {
+    const footerLoader = (
+      <View className='flex-row justify-center items-center py-4'>
+        <ActivityIndicator size='small' color='#3b82f6' />
+        <Text className='ml-2 text-sm text-gray-600 dark:text-gray-400'>
+          Loading...
+        </Text>
+      </View>
+    );
+
+    const footerEndMessage = (
+      <View className='flex-row justify-center items-center py-4'>
+        <Text className='text-sm text-gray-600 dark:text-gray-400'>
+          No more items to load
+        </Text>
+      </View>
+    );
+
+    if (loading) {
+      return <>{loader || footerLoader}</>;
+    }
+    if (!hasMore && data.length > 0) {
+      return <>{endMessage || footerEndMessage}</>;
+    }
+    return null;
+  }, [loading, hasMore, data.length, loader, endMessage]);
+
+  return (
+    <View className={cn('flex-1', className)}>
+      <FlatList
+        ref={flatListRef}
+        data={data}
+        renderItem={({ item, index }: { item: T; index: number }) => (
+          <>{renderItem(item, index)}</>
+        )}
+        keyExtractor={keyExtractor}
+        onEndReached={handleEndReached}
+        onEndReachedThreshold={threshold}
+        horizontal={horizontal}
+        showsVerticalScrollIndicator={!horizontal}
+        showsHorizontalScrollIndicator={horizontal}
+        ListHeaderComponent={headerComponent ? <>{headerComponent}</> : null}
+        ListFooterComponent={ListFooterComponent}
+        ListEmptyComponent={
+          !loading ? <>{emptyComponent || defaultEmptyComponent}</> : null
+        }
+        onScroll={showScrollTop ? handleScroll : undefined}
+        scrollEventThrottle={showScrollTop ? 16 : undefined}
+        refreshControl={
+          onRefresh ? (
+            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+          ) : undefined
+        }
+      />
+
+      {/* Scroll to top button */}
+      {showScrollTop && showScrollTopButton && (
+        <Pressable
+          onPress={scrollToTop}
+          className={cn(
+            'absolute bottom-4 right-4',
+            'w-12 h-12 rounded-full',
+            'bg-blue-600 dark:bg-blue-500',
+            'items-center justify-center',
+            'shadow-lg',
+            'active:bg-blue-700 dark:active:bg-blue-600'
+          )}
+          accessibilityRole='button'
+          accessibilityLabel='Scroll to top'
+        >
+          <Text className='text-white text-lg'>↑</Text>
+        </Pressable>
+      )}
+    </View>
+  );
+}

package/src/ui/InfiniteScroll/index.ts

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