@sudobility/components-rn 1.0.1

package/src/ui/ScrollSpy/ScrollSpy.tsx

@@ -0,0 +1,313 @@
+import * as React from 'react';
+import {
+  View,
+  Text,
+  Pressable,
+  ScrollView,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+} from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface ScrollSpySection {
+  /** Section ID */
+  id: string;
+  /** Section label */
+  label: string;
+  /** Subsections */
+  subsections?: ScrollSpySection[];
+}
+
+export interface ScrollSpyProps {
+  /** Sections to track */
+  sections: ScrollSpySection[];
+  /** Active section ID */
+  activeId?: string;
+  /** Active section change handler */
+  onActiveChange?: (id: string) => void;
+  /** Section press handler - called when user taps a section link */
+  onSectionPress?: (id: string) => void;
+  /** Show subsections */
+  showSubsections?: boolean;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * ScrollSpy Component
+ *
+ * Navigation that highlights the active section.
+ * Pairs with ScrollSpyContainer for automatic scroll tracking.
+ *
+ * @example
+ * ```tsx
+ * <ScrollSpy
+ *   sections={[
+ *     { id: 'intro', label: 'Introduction' },
+ *     { id: 'features', label: 'Features' },
+ *     { id: 'pricing', label: 'Pricing' }
+ *   ]}
+ *   activeId={activeSection}
+ *   onSectionPress={(id) => scrollToSection(id)}
+ * />
+ * ```
+ */
+export const ScrollSpy: React.FC<ScrollSpyProps> = ({
+  sections,
+  activeId,
+  onActiveChange,
+  onSectionPress,
+  showSubsections = true,
+  className,
+}) => {
+  const handlePress = (id: string) => {
+    if (onActiveChange) {
+      onActiveChange(id);
+    }
+    if (onSectionPress) {
+      onSectionPress(id);
+    }
+  };
+
+  // Render section
+  const renderSection = (section: ScrollSpySection, level: number = 0) => {
+    const isActive = activeId === section.id;
+    const hasActiveChild =
+      section.subsections?.some(sub => activeId === sub.id) || false;
+
+    return (
+      <View key={section.id}>
+        <Pressable
+          onPress={() => handlePress(section.id)}
+          className={cn(
+            'py-2 px-3 rounded-lg',
+            isActive
+              ? 'bg-blue-50 dark:bg-blue-900/30'
+              : 'active:bg-gray-100 dark:active:bg-gray-800'
+          )}
+          style={{ paddingLeft: level * 12 + 12 }}
+          accessibilityRole='button'
+          accessibilityLabel={section.label}
+          accessibilityState={{ selected: isActive }}
+        >
+          <Text
+            className={cn(
+              'text-sm',
+              level === 0 ? 'font-medium' : 'font-normal',
+              isActive
+                ? 'text-blue-700 dark:text-blue-300'
+                : hasActiveChild
+                  ? 'text-gray-700 dark:text-gray-300'
+                  : 'text-gray-600 dark:text-gray-400'
+            )}
+          >
+            {section.label}
+          </Text>
+        </Pressable>
+
+        {/* Subsections */}
+        {showSubsections &&
+          section.subsections &&
+          section.subsections.length > 0 && (
+            <View className='ml-3 border-l-2 border-gray-200 dark:border-gray-700'>
+              {section.subsections.map(subsection =>
+                renderSection(subsection, level + 1)
+              )}
+            </View>
+          )}
+      </View>
+    );
+  };
+
+  return (
+    <View className={cn('gap-1', className)}>
+      {sections.map(section => renderSection(section, 0))}
+    </View>
+  );
+};
+
+export interface SectionPosition {
+  id: string;
+  y: number;
+  height: number;
+}
+
+export interface ScrollSpyContainerProps {
+  /** Children content with sections */
+  children: React.ReactNode;
+  /** Sections configuration for tracking */
+  sections: ScrollSpySection[];
+  /** Active section change handler */
+  onActiveChange?: (id: string) => void;
+  /** Offset from top for determining active section */
+  offset?: number;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * ScrollSpyContainer Component
+ *
+ * Scrollable container that tracks section visibility.
+ * Use with ScrollSpySection to mark sections for tracking.
+ *
+ * @example
+ * ```tsx
+ * <ScrollSpyContainer
+ *   sections={tocSections}
+ *   onActiveChange={setActiveSection}
+ * >
+ *   <ScrollSpySection id="intro">
+ *     <Introduction />
+ *   </ScrollSpySection>
+ *   <ScrollSpySection id="features">
+ *     <Features />
+ *   </ScrollSpySection>
+ * </ScrollSpyContainer>
+ * ```
+ */
+export const ScrollSpyContainer: React.FC<ScrollSpyContainerProps> = ({
+  children,
+  sections,
+  onActiveChange,
+  offset = 80,
+  className,
+}) => {
+  const scrollViewRef = React.useRef<ScrollView>(null);
+  const sectionPositions = React.useRef<Map<string, SectionPosition>>(
+    new Map()
+  );
+
+  // Handle scroll event
+  const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const y = event.nativeEvent.contentOffset.y;
+
+    // Find active section based on scroll position
+    const getAllIds = (secs: ScrollSpySection[]): string[] => {
+      return secs.flatMap(section => [
+        section.id,
+        ...(section.subsections ? getAllIds(section.subsections) : []),
+      ]);
+    };
+
+    const allIds = getAllIds(sections);
+    let activeId = allIds[0];
+
+    for (const id of allIds) {
+      const position = sectionPositions.current.get(id);
+      if (position && position.y <= y + offset) {
+        activeId = id;
+      }
+    }
+
+    if (onActiveChange) {
+      onActiveChange(activeId);
+    }
+  };
+
+  // Scroll to section
+  const scrollToSection = React.useCallback(
+    (id: string) => {
+      const position = sectionPositions.current.get(id);
+      if (position && scrollViewRef.current) {
+        scrollViewRef.current.scrollTo({
+          y: Math.max(0, position.y - offset + 1),
+          animated: true,
+        });
+      }
+    },
+    [offset]
+  );
+
+  // Context for child sections to register positions
+  const contextValue = React.useMemo(
+    () => ({
+      registerSection: (id: string, y: number, height: number) => {
+        sectionPositions.current.set(id, { id, y, height });
+      },
+      unregisterSection: (id: string) => {
+        sectionPositions.current.delete(id);
+      },
+      scrollToSection,
+    }),
+    [scrollToSection]
+  );
+
+  return (
+    <ScrollSpyContext.Provider value={contextValue}>
+      <ScrollView
+        ref={scrollViewRef}
+        onScroll={handleScroll}
+        scrollEventThrottle={16}
+        className={cn('flex-1', className)}
+      >
+        {children}
+      </ScrollView>
+    </ScrollSpyContext.Provider>
+  );
+};
+
+// Context for section registration
+interface ScrollSpyContextType {
+  registerSection: (id: string, y: number, height: number) => void;
+  unregisterSection: (id: string) => void;
+  scrollToSection: (id: string) => void;
+}
+
+const ScrollSpyContext = React.createContext<ScrollSpyContextType | null>(null);
+
+export const useScrollSpy = () => {
+  const context = React.useContext(ScrollSpyContext);
+  return context;
+};
+
+export interface ScrollSpySectionWrapperProps {
+  /** Section ID - must match an ID in ScrollSpy sections */
+  id: string;
+  /** Section content */
+  children: React.ReactNode;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * ScrollSpySectionWrapper Component
+ *
+ * Wrapper for content sections that should be tracked by ScrollSpy.
+ *
+ * @example
+ * ```tsx
+ * <ScrollSpySectionWrapper id="features">
+ *   <FeaturesList />
+ * </ScrollSpySectionWrapper>
+ * ```
+ */
+export const ScrollSpySectionWrapper: React.FC<
+  ScrollSpySectionWrapperProps
+> = ({ id, children, className }) => {
+  const context = React.useContext(ScrollSpyContext);
+
+  const handleLayout = React.useCallback(
+    (event: { nativeEvent: { layout: { y: number; height: number } } }) => {
+      if (context) {
+        const { y, height } = event.nativeEvent.layout;
+        context.registerSection(id, y, height);
+      }
+    },
+    [context, id]
+  );
+
+  React.useEffect(() => {
+    return () => {
+      if (context) {
+        context.unregisterSection(id);
+      }
+    };
+  }, [context, id]);
+
+  return (
+    <View onLayout={handleLayout} className={className}>
+      {children}
+    </View>
+  );
+};

package/src/ui/ScrollSpy/index.ts

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

package/src/ui/SearchInput/SearchInput.tsx

@@ -0,0 +1,167 @@
+import * as React from 'react';
+import { useState, useCallback } from 'react';
+import {
+  View,
+  TextInput,
+  Pressable,
+  Text,
+  ActivityIndicator,
+  TextInputProps,
+} from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface SearchInputProps extends Omit<TextInputProps, 'onChange'> {
+  /** Current search query */
+  value?: string;
+  /** Callback when query changes */
+  onChangeText?: (query: string) => void;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Auto-focus on mount */
+  autoFocus?: boolean;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg';
+  /** Show search icon */
+  showIcon?: boolean;
+  /** Show clear button when has value */
+  showClear?: boolean;
+  /** Loading state */
+  loading?: boolean;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * SearchInput Component
+ *
+ * Search input field with icon, clear button, and loading state.
+ *
+ * @example
+ * ```tsx
+ * <SearchInput
+ *   placeholder="Search emails..."
+ *   onChangeText={query => setSearchQuery(query)}
+ * />
+ * ```
+ */
+export const SearchInput: React.FC<SearchInputProps> = ({
+  value: controlledValue,
+  onChangeText,
+  placeholder = 'Search...',
+  autoFocus = false,
+  disabled = false,
+  size = 'md',
+  showIcon = true,
+  showClear = true,
+  loading = false,
+  className,
+  ...textInputProps
+}) => {
+  const [internalValue, setInternalValue] = useState('');
+
+  // Use controlled value if provided, otherwise use internal state
+  const value = controlledValue !== undefined ? controlledValue : internalValue;
+  const isControlled = controlledValue !== undefined;
+
+  // Size configurations
+  const sizeClasses = {
+    sm: {
+      input: 'py-1.5 text-sm',
+      icon: 'text-base',
+      paddingLeft: showIcon ? 'pl-8' : 'pl-3',
+      paddingRight: 'pr-8',
+    },
+    md: {
+      input: 'py-2 text-base',
+      icon: 'text-lg',
+      paddingLeft: showIcon ? 'pl-10' : 'pl-3',
+      paddingRight: 'pr-10',
+    },
+    lg: {
+      input: 'py-3 text-lg',
+      icon: 'text-xl',
+      paddingLeft: showIcon ? 'pl-12' : 'pl-4',
+      paddingRight: 'pr-12',
+    },
+  };
+
+  const sizeConfig = sizeClasses[size];
+
+  const handleChange = useCallback(
+    (newValue: string) => {
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+      onChangeText?.(newValue);
+    },
+    [onChangeText, isControlled]
+  );
+
+  const handleClear = useCallback(() => {
+    if (!isControlled) {
+      setInternalValue('');
+    }
+    onChangeText?.('');
+  }, [onChangeText, isControlled]);
+
+  return (
+    <View className={cn('relative w-full', className)}>
+      {/* Search Icon */}
+      {showIcon && (
+        <View className='absolute inset-y-0 left-0 flex items-center justify-center pl-3 z-10'>
+          <Text
+            className={cn(sizeConfig.icon, 'text-gray-400 dark:text-gray-500')}
+          >
+            🔍
+          </Text>
+        </View>
+      )}
+
+      {/* Input */}
+      <TextInput
+        value={value}
+        onChangeText={handleChange}
+        placeholder={placeholder}
+        autoFocus={autoFocus}
+        editable={!disabled && !loading}
+        className={cn(
+          'w-full rounded-lg border',
+          'bg-white dark:bg-gray-800',
+          'text-gray-900 dark:text-gray-100',
+          'border-gray-300 dark:border-gray-600',
+          sizeConfig.input,
+          sizeConfig.paddingLeft,
+          sizeConfig.paddingRight,
+          disabled && 'opacity-50',
+          loading && 'opacity-60'
+        )}
+        placeholderTextColor='#9CA3AF'
+        accessibilityRole='search'
+        accessibilityState={{ disabled }}
+        {...textInputProps}
+      />
+
+      {/* Clear Button or Loading Spinner */}
+      {showClear && value && !loading && (
+        <Pressable
+          onPress={handleClear}
+          disabled={disabled}
+          className='absolute inset-y-0 right-0 flex items-center justify-center pr-3'
+          accessibilityRole='button'
+          accessibilityLabel='Clear search'
+        >
+          <Text className={cn(sizeConfig.icon, 'text-gray-400')}>✕</Text>
+        </Pressable>
+      )}
+
+      {/* Loading Spinner */}
+      {loading && (
+        <View className='absolute inset-y-0 right-0 flex items-center justify-center pr-3'>
+          <ActivityIndicator size='small' color='#9CA3AF' />
+        </View>
+      )}
+    </View>
+  );
+};

package/src/ui/SearchInput/index.ts

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

package/src/ui/SectionBadge/SectionBadge.tsx

@@ -0,0 +1,105 @@
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface SectionBadgeProps {
+  /** Icon element */
+  icon: React.ReactNode;
+  /** Badge text */
+  text: string;
+  /** Visual variant */
+  variant?: 'default' | 'premium' | 'primary' | 'light';
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg';
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * SectionBadge Component
+ *
+ * Badge with icon for section headers and feature highlights.
+ * Commonly used for premium features, new features, or category labels.
+ *
+ * @example
+ * ```tsx
+ * <SectionBadge
+ *   icon={<StarIcon />}
+ *   text="Premium Feature"
+ *   variant="premium"
+ * />
+ * ```
+ */
+export const SectionBadge: React.FC<SectionBadgeProps> = ({
+  icon,
+  text,
+  variant = 'default',
+  size = 'md',
+  className,
+}) => {
+  // Variant color configurations
+  const variantClasses = {
+    default: 'bg-gray-100 dark:bg-gray-800',
+    premium: 'bg-amber-100 dark:bg-amber-900/30',
+    primary: 'bg-blue-100 dark:bg-blue-900/30',
+    light:
+      'bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700',
+  };
+
+  const iconColorClasses = {
+    default: 'text-gray-600 dark:text-gray-400',
+    premium: 'text-amber-600 dark:text-amber-400',
+    primary: 'text-blue-600 dark:text-blue-400',
+    light: 'text-gray-600 dark:text-gray-400',
+  };
+
+  const textColorClasses = {
+    default: 'text-gray-900 dark:text-white',
+    premium: 'text-amber-900 dark:text-amber-100',
+    primary: 'text-blue-900 dark:text-blue-100',
+    light: 'text-gray-900 dark:text-white',
+  };
+
+  // Size configurations
+  const sizeClasses = {
+    sm: {
+      container: 'px-4 py-2',
+      iconSize: 'w-4 h-4',
+      text: 'text-xs',
+    },
+    md: {
+      container: 'px-6 py-3',
+      iconSize: 'w-5 h-5',
+      text: 'text-sm',
+    },
+    lg: {
+      container: 'px-8 py-4',
+      iconSize: 'w-6 h-6',
+      text: 'text-base',
+    },
+  };
+
+  const sizeConfig = sizeClasses[size];
+
+  return (
+    <View
+      className={cn(
+        'flex-row items-center rounded-full mb-6',
+        variantClasses[variant],
+        sizeConfig.container,
+        className
+      )}
+    >
+      <View className={cn('mr-2', iconColorClasses[variant])}>{icon}</View>
+      <Text
+        className={cn(
+          'font-semibold',
+          sizeConfig.text,
+          textColorClasses[variant]
+        )}
+      >
+        {text}
+      </Text>
+    </View>
+  );
+};

package/src/ui/SectionBadge/index.ts

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

package/src/ui/SectionHeader/SectionHeader.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { View, Text, Pressable, ActivityIndicator } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface SectionHeaderProps {
+  /** The header text/title */
+  title: string;
+  /** Optional callback for the "+" button */
+  onAdd?: () => void;
+  /** Optional tooltip/title for the add button */
+  addButtonLabel?: string;
+  /** Optional loading indicator */
+  loading?: boolean;
+  /** Right side actions/buttons */
+  actions?: React.ReactNode;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * SectionHeader Component
+ *
+ * A reusable header component for sections with consistent styling.
+ * Displays a title and an optional "+" action button.
+ *
+ * @example
+ * ```tsx
+ * <SectionHeader title="Emails" />
+ * <SectionHeader
+ *   title="Email Accounts"
+ *   onAdd={handleAdd}
+ *   addButtonLabel="Add account"
+ * />
+ * ```
+ */
+export const SectionHeader: React.FC<SectionHeaderProps> = ({
+  title,
+  onAdd,
+  addButtonLabel = 'Add',
+  loading,
+  actions,
+  className,
+}) => {
+  return (
+    <View
+      className={cn(
+        'p-4 border-b border-gray-200 dark:border-gray-700',
+        className
+      )}
+    >
+      <View className='flex-row items-center justify-between'>
+        <Text className='text-lg font-semibold text-gray-900 dark:text-gray-100'>
+          {title}
+        </Text>
+        <View className='flex-row items-center gap-2'>
+          {loading && <ActivityIndicator size='small' color='#2563eb' />}
+          {actions}
+          {onAdd && (
+            <Pressable
+              onPress={onAdd}
+              className='p-2 rounded active:bg-gray-200 dark:active:bg-gray-700'
+              accessibilityRole='button'
+              accessibilityLabel={addButtonLabel}
+            >
+              <Text className='text-xl text-gray-600 dark:text-gray-400'>
+                +
+              </Text>
+            </Pressable>
+          )}
+        </View>
+      </View>
+    </View>
+  );
+};

package/src/ui/SectionHeader/index.ts

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