@sudobility/components-rn 1.0.1

package/src/ui/Switch/Switch.tsx

@@ -0,0 +1,139 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { View, Pressable, Animated, PressableProps } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface SwitchProps extends Omit<PressableProps, 'onPress'> {
+  /** Whether the switch is on (controlled mode) */
+  checked?: boolean;
+  /** Default checked state (uncontrolled mode) */
+  defaultChecked?: boolean;
+  /** Change handler */
+  onCheckedChange?: (checked: boolean) => void;
+  /** Whether the switch is disabled */
+  disabled?: boolean;
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg';
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * Switch Component
+ *
+ * Toggle switch for binary on/off states with smooth animation.
+ * Supports both controlled and uncontrolled modes.
+ *
+ * @example
+ * ```tsx
+ * // Controlled
+ * <Switch
+ *   checked={isEnabled}
+ *   onCheckedChange={setIsEnabled}
+ * />
+ *
+ * // Uncontrolled
+ * <Switch defaultChecked={true} />
+ * ```
+ */
+export const Switch = React.forwardRef<View, SwitchProps>(
+  (
+    {
+      checked: controlledChecked,
+      defaultChecked = false,
+      onCheckedChange,
+      disabled = false,
+      size = 'md',
+      className,
+      ...pressableProps
+    },
+    ref
+  ) => {
+    // Support both controlled and uncontrolled modes
+    const [uncontrolledChecked, setUncontrolledChecked] =
+      useState(defaultChecked);
+    const isControlled = controlledChecked !== undefined;
+    const checked = isControlled ? controlledChecked : uncontrolledChecked;
+
+    // Animation value for thumb position
+    const animatedValue = React.useRef(
+      new Animated.Value(checked ? 1 : 0)
+    ).current;
+
+    React.useEffect(() => {
+      Animated.timing(animatedValue, {
+        toValue: checked ? 1 : 0,
+        duration: 200,
+        useNativeDriver: true,
+      }).start();
+    }, [checked, animatedValue]);
+
+    // Size configurations
+    const sizeConfig = {
+      sm: {
+        track: 'w-8 h-4',
+        thumb: 'w-3 h-3',
+        translateX: 16,
+      },
+      md: {
+        track: 'w-11 h-6',
+        thumb: 'w-5 h-5',
+        translateX: 20,
+      },
+      lg: {
+        track: 'w-14 h-8',
+        thumb: 'w-7 h-7',
+        translateX: 24,
+      },
+    };
+
+    const config = sizeConfig[size];
+
+    const handlePress = () => {
+      if (disabled) return;
+
+      const newChecked = !checked;
+
+      if (!isControlled) {
+        setUncontrolledChecked(newChecked);
+      }
+
+      onCheckedChange?.(newChecked);
+    };
+
+    const thumbTranslateX = animatedValue.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, config.translateX],
+    });
+
+    return (
+      <Pressable
+        ref={ref}
+        onPress={handlePress}
+        disabled={disabled}
+        className={cn(
+          'rounded-full items-center justify-start flex-row',
+          config.track,
+          checked
+            ? 'bg-blue-600 dark:bg-blue-500'
+            : 'bg-gray-200 dark:bg-gray-700',
+          disabled && 'opacity-50',
+          className
+        )}
+        accessibilityRole='switch'
+        accessibilityState={{ checked, disabled }}
+        {...pressableProps}
+      >
+        <Animated.View
+          className={cn('rounded-full bg-white shadow-lg', config.thumb)}
+          style={{
+            transform: [{ translateX: thumbTranslateX }],
+            marginLeft: 2,
+          }}
+        />
+      </Pressable>
+    );
+  }
+);
+
+Switch.displayName = 'Switch';

package/src/ui/Switch/index.ts

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

package/src/ui/Table/Table.tsx

@@ -0,0 +1,192 @@
+import * as React from 'react';
+import { View, Text, ScrollView, Pressable } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface TableColumn<T> {
+  /** Column key */
+  key: string;
+  /** Column label */
+  label: React.ReactNode;
+  /** Render cell content */
+  render?: (row: T, index: number) => React.ReactNode;
+  /** Column width */
+  width?: number;
+  /** Sortable column */
+  sortable?: boolean;
+  /** Align content */
+  align?: 'left' | 'center' | 'right';
+}
+
+export interface TableProps<T> {
+  /** Table columns */
+  columns: TableColumn<T>[];
+  /** Table data */
+  data: T[];
+  /** Row key extractor */
+  keyExtractor: (row: T, index: number) => string;
+  /** Sort configuration */
+  sort?: {
+    column: string;
+    direction: 'asc' | 'desc';
+  };
+  /** Sort handler */
+  onSort?: (column: string) => void;
+  /** Row click handler */
+  onRowPress?: (row: T, index: number) => void;
+  /** Striped rows */
+  striped?: boolean;
+  /** Compact mode */
+  compact?: boolean;
+  /** Show border */
+  bordered?: boolean;
+  /** Empty state message */
+  emptyMessage?: string;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * Table Component
+ *
+ * Data table with sorting and customization for React Native.
+ * Generic component supporting any data type.
+ *
+ * @example
+ * ```tsx
+ * <Table
+ *   columns={[
+ *     { key: 'name', label: 'Name', sortable: true },
+ *     { key: 'email', label: 'Email' },
+ *     { key: 'role', label: 'Role', align: 'center' }
+ *   ]}
+ *   data={users}
+ *   keyExtractor={(user) => user.id}
+ *   sort={sort}
+ *   onSort={handleSort}
+ *   onRowPress={handleRowPress}
+ * />
+ * ```
+ */
+export function Table<T extends Record<string, unknown>>({
+  columns,
+  data,
+  keyExtractor,
+  sort,
+  onSort,
+  onRowPress,
+  striped = false,
+  compact = false,
+  bordered = false,
+  emptyMessage = 'No data available',
+  className,
+}: TableProps<T>) {
+  const handleSort = (column: TableColumn<T>) => {
+    if (column.sortable && onSort) {
+      onSort(column.key);
+    }
+  };
+
+  const alignClasses = {
+    left: 'items-start',
+    center: 'items-center',
+    right: 'items-end',
+  };
+
+  return (
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={true}
+      className={cn('w-full', className)}
+    >
+      <View className='flex-1'>
+        {/* Header */}
+        <View
+          className={cn(
+            'flex-row bg-gray-50 dark:bg-gray-800',
+            'border-b border-gray-200 dark:border-gray-700'
+          )}
+        >
+          {columns.map(column => (
+            <Pressable
+              key={column.key}
+              onPress={() => column.sortable && handleSort(column)}
+              disabled={!column.sortable}
+              className={cn(
+                compact ? 'px-3 py-2' : 'px-4 py-3',
+                bordered &&
+                  'border-r border-gray-200 dark:border-gray-700 last:border-r-0'
+              )}
+              style={{ width: column.width }}
+              accessibilityRole='button'
+              accessibilityLabel={`Sort by ${column.label}`}
+            >
+              <View
+                className={cn(
+                  'flex-row items-center gap-2',
+                  alignClasses[column.align || 'left']
+                )}
+              >
+                <Text className='text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider'>
+                  {column.label}
+                </Text>
+                {column.sortable && sort?.column === column.key && (
+                  <Text className='text-xs text-gray-500'>
+                    {sort.direction === 'asc' ? '↑' : '↓'}
+                  </Text>
+                )}
+              </View>
+            </Pressable>
+          ))}
+        </View>
+
+        {/* Body */}
+        <View className='bg-white dark:bg-gray-900'>
+          {data.length === 0 ? (
+            <View className='px-4 py-8'>
+              <Text className='text-center text-sm text-gray-500 dark:text-gray-400'>
+                {emptyMessage}
+              </Text>
+            </View>
+          ) : (
+            data.map((row, rowIndex) => (
+              <Pressable
+                key={keyExtractor(row, rowIndex)}
+                onPress={() => onRowPress?.(row, rowIndex)}
+                disabled={!onRowPress}
+                className={cn(
+                  'flex-row',
+                  'border-b border-gray-200 dark:border-gray-700',
+                  striped &&
+                    rowIndex % 2 === 1 &&
+                    'bg-gray-50 dark:bg-gray-800/50'
+                )}
+                accessibilityRole='button'
+              >
+                {columns.map(column => (
+                  <View
+                    key={column.key}
+                    className={cn(
+                      compact ? 'px-3 py-2' : 'px-4 py-3',
+                      alignClasses[column.align || 'left'],
+                      bordered &&
+                        'border-r border-gray-200 dark:border-gray-700 last:border-r-0'
+                    )}
+                    style={{ width: column.width }}
+                  >
+                    {column.render ? (
+                      column.render(row, rowIndex)
+                    ) : (
+                      <Text className='text-sm text-gray-900 dark:text-white'>
+                        {String(row[column.key] ?? '')}
+                      </Text>
+                    )}
+                  </View>
+                ))}
+              </Pressable>
+            ))
+          )}
+        </View>
+      </View>
+    </ScrollView>
+  );
+}

package/src/ui/Table/index.ts

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

package/src/ui/Tabs/Tabs.tsx

@@ -0,0 +1,196 @@
+import * as React from 'react';
+import { useState, useCallback, createContext, useContext } from 'react';
+import { View, Text, Pressable, ScrollView, ViewProps } from 'react-native';
+import { cn } from '../../lib/utils';
+
+// Context for tabs state
+interface TabsContextValue {
+  value: string;
+  onValueChange: (value: string) => void;
+}
+
+const TabsContext = createContext<TabsContextValue | undefined>(undefined);
+
+const useTabsContext = () => {
+  const context = useContext(TabsContext);
+  if (!context) {
+    throw new Error('Tabs components must be used within a Tabs provider');
+  }
+  return context;
+};
+
+export interface TabsProps extends ViewProps {
+  /** Currently selected tab value */
+  value?: string;
+  /** Default selected tab (uncontrolled) */
+  defaultValue?: string;
+  /** Callback when tab changes */
+  onValueChange?: (value: string) => void;
+  /** Children (TabsList and TabsContent) */
+  children: React.ReactNode;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * Tabs Component
+ *
+ * Tab navigation component for switching between content panels.
+ *
+ * @example
+ * ```tsx
+ * <Tabs defaultValue="tab1">
+ *   <TabsList>
+ *     <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+ *     <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="tab1">
+ *     <Text>Content for Tab 1</Text>
+ *   </TabsContent>
+ *   <TabsContent value="tab2">
+ *     <Text>Content for Tab 2</Text>
+ *   </TabsContent>
+ * </Tabs>
+ * ```
+ */
+export const Tabs: React.FC<TabsProps> = ({
+  value: controlledValue,
+  defaultValue = '',
+  onValueChange,
+  children,
+  className,
+  ...viewProps
+}) => {
+  const [internalValue, setInternalValue] = useState(defaultValue);
+
+  const isControlled = controlledValue !== undefined;
+  const value = isControlled ? controlledValue : internalValue;
+
+  const handleValueChange = useCallback(
+    (newValue: string) => {
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+      onValueChange?.(newValue);
+    },
+    [isControlled, onValueChange]
+  );
+
+  return (
+    <TabsContext.Provider value={{ value, onValueChange: handleValueChange }}>
+      <View className={cn('w-full', className)} {...viewProps}>
+        {children}
+      </View>
+    </TabsContext.Provider>
+  );
+};
+
+export interface TabsListProps extends ViewProps {
+  /** Tab triggers */
+  children: React.ReactNode;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * TabsList - Container for tab triggers
+ */
+export const TabsList: React.FC<TabsListProps> = ({
+  children,
+  className,
+  ...viewProps
+}) => (
+  <ScrollView
+    horizontal
+    showsHorizontalScrollIndicator={false}
+    className={cn(
+      'flex-row bg-gray-100 dark:bg-gray-800 rounded-lg p-1',
+      className
+    )}
+    contentContainerStyle={{ flexGrow: 1 }}
+    {...viewProps}
+  >
+    {children}
+  </ScrollView>
+);
+
+export interface TabsTriggerProps {
+  /** Tab value */
+  value: string;
+  /** Tab label */
+  children: React.ReactNode;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * TabsTrigger - Individual tab button
+ */
+export const TabsTrigger: React.FC<TabsTriggerProps> = ({
+  value,
+  children,
+  disabled = false,
+  className,
+}) => {
+  const { value: selectedValue, onValueChange } = useTabsContext();
+  const isSelected = selectedValue === value;
+
+  return (
+    <Pressable
+      onPress={() => !disabled && onValueChange(value)}
+      disabled={disabled}
+      className={cn(
+        'flex-1 px-4 py-2 rounded-md items-center justify-center',
+        isSelected ? 'bg-white dark:bg-gray-700 shadow-sm' : 'bg-transparent',
+        disabled && 'opacity-50',
+        className
+      )}
+      accessibilityRole='tab'
+      accessibilityState={{ selected: isSelected, disabled }}
+    >
+      <Text
+        className={cn(
+          'text-sm font-medium text-center',
+          isSelected
+            ? 'text-gray-900 dark:text-white'
+            : 'text-gray-600 dark:text-gray-400'
+        )}
+      >
+        {children}
+      </Text>
+    </Pressable>
+  );
+};
+
+export interface TabsContentProps extends ViewProps {
+  /** Tab value this content belongs to */
+  value: string;
+  /** Content to display */
+  children: React.ReactNode;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * TabsContent - Content panel for a tab
+ */
+export const TabsContent: React.FC<TabsContentProps> = ({
+  value,
+  children,
+  className,
+  ...viewProps
+}) => {
+  const { value: selectedValue } = useTabsContext();
+
+  if (selectedValue !== value) {
+    return null;
+  }
+
+  return (
+    <View className={cn('mt-2', className)} {...viewProps}>
+      {children}
+    </View>
+  );
+};

package/src/ui/Tabs/index.ts

@@ -0,0 +1,7 @@
+export { Tabs, TabsList, TabsTrigger, TabsContent } from './Tabs';
+export type {
+  TabsProps,
+  TabsListProps,
+  TabsTriggerProps,
+  TabsContentProps,
+} from './Tabs';

package/src/ui/Text/Text.tsx

@@ -0,0 +1,117 @@
+import * as React from 'react';
+import { Text as RNText } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface TextProps {
+  /** Text content */
+  children: React.ReactNode;
+  /** Size variant */
+  size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+  /** Weight variant */
+  weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
+  /** Color variant */
+  color?: 'default' | 'muted' | 'primary' | 'success' | 'warning' | 'danger';
+  /** Text alignment */
+  align?: 'left' | 'center' | 'right';
+  /** Text transform */
+  transform?: 'none' | 'uppercase' | 'lowercase' | 'capitalize';
+  /** Number of lines (for truncation) */
+  numberOfLines?: number;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * Text Component
+ *
+ * Versatile text component with consistent styling.
+ * Supports various sizes, weights, colors, and formatting options.
+ *
+ * @example
+ * ```tsx
+ * <Text size="lg" weight="semibold">
+ *   Large semibold text
+ * </Text>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Text color="muted" size="sm">
+ *   Muted small text
+ * </Text>
+ * ```
+ */
+export const Text: React.FC<TextProps> = ({
+  children,
+  size = 'base',
+  weight = 'normal',
+  color = 'default',
+  align,
+  transform = 'none',
+  numberOfLines,
+  className,
+}) => {
+  // Size configurations
+  const sizeClasses = {
+    xs: 'text-xs',
+    sm: 'text-sm',
+    base: 'text-base',
+    lg: 'text-lg',
+    xl: 'text-xl',
+    '2xl': 'text-2xl',
+    '3xl': 'text-3xl',
+    '4xl': 'text-4xl',
+  };
+
+  // Weight configurations
+  const weightClasses = {
+    light: 'font-light',
+    normal: 'font-normal',
+    medium: 'font-medium',
+    semibold: 'font-semibold',
+    bold: 'font-bold',
+  };
+
+  // Color configurations
+  const colorClasses = {
+    default: 'text-gray-900 dark:text-gray-100',
+    muted: 'text-gray-600 dark:text-gray-400',
+    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',
+  };
+
+  // Alignment configurations
+  const alignClasses = align
+    ? {
+        left: 'text-left',
+        center: 'text-center',
+        right: 'text-right',
+      }[align]
+    : '';
+
+  // Transform configurations
+  const transformClasses = {
+    none: '',
+    uppercase: 'uppercase',
+    lowercase: 'lowercase',
+    capitalize: 'capitalize',
+  };
+
+  return (
+    <RNText
+      className={cn(
+        sizeClasses[size],
+        weightClasses[weight],
+        colorClasses[color],
+        alignClasses,
+        transformClasses[transform],
+        className
+      )}
+      numberOfLines={numberOfLines}
+    >
+      {children}
+    </RNText>
+  );
+};

package/src/ui/Text/index.ts

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