@sudobility/components-rn 1.0.1

package/src/ui/SideNav/SideNav.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface NavItem {
+  /** Unique identifier */
+  id: string;
+  /** Display label */
+  label: string;
+  /** Icon component or element */
+  icon?: React.ReactNode;
+  /** Press handler */
+  onPress?: () => void;
+  /** Active/selected state */
+  active?: boolean;
+  /** Badge content */
+  badge?: string | number;
+}
+
+export interface SideNavProps {
+  /** Navigation items */
+  items: NavItem[];
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * SideNav Component
+ *
+ * Side navigation for drawer menus or sidebar layouts.
+ * Displays items with icons, labels, and badges.
+ *
+ * @example
+ * ```tsx
+ * <SideNav
+ *   items={[
+ *     { id: 'home', label: 'Home', icon: <HomeIcon />, active: true },
+ *     { id: 'settings', label: 'Settings', icon: <CogIcon />, badge: 3 },
+ *   ]}
+ * />
+ * ```
+ */
+export const SideNav: React.FC<SideNavProps> = ({ items, className }) => {
+  return (
+    <View className={cn('gap-1', className)} accessibilityRole='list'>
+      {items.map(item => (
+        <Pressable
+          key={item.id}
+          onPress={item.onPress}
+          className={cn(
+            'flex-row items-center gap-3 px-4 py-3 rounded-lg',
+            item.active
+              ? 'bg-blue-50 dark:bg-blue-900/20'
+              : 'active:bg-gray-100 dark:active:bg-gray-800'
+          )}
+          accessibilityRole='button'
+          accessibilityState={{ selected: item.active }}
+          accessibilityLabel={item.label}
+        >
+          {item.icon && <View className='w-5 h-5'>{item.icon}</View>}
+          <Text
+            className={cn(
+              'flex-1 font-medium',
+              item.active
+                ? 'text-blue-600 dark:text-blue-400'
+                : 'text-gray-700 dark:text-gray-300'
+            )}
+          >
+            {item.label}
+          </Text>
+          {item.badge !== undefined && (
+            <View className='px-2 py-0.5 bg-gray-200 dark:bg-gray-700 rounded'>
+              <Text className='text-xs text-gray-700 dark:text-gray-300'>
+                {item.badge}
+              </Text>
+            </View>
+          )}
+        </Pressable>
+      ))}
+    </View>
+  );
+};

package/src/ui/SideNav/index.ts

@@ -0,0 +1,2 @@
+export { SideNav } from './SideNav';
+export type { SideNavProps, NavItem } from './SideNav';

package/src/ui/Skeleton/Skeleton.tsx

@@ -0,0 +1,153 @@
+import * as React from 'react';
+import { useEffect, useRef } from 'react';
+import { View, Animated, ViewProps, DimensionValue } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface SkeletonProps extends ViewProps {
+  /** Shape/type of skeleton */
+  variant?: 'text' | 'circle' | 'rectangle' | 'avatar' | 'button';
+  /** Width of the skeleton */
+  width?: DimensionValue;
+  /** Height of the skeleton */
+  height?: DimensionValue;
+  /** Number of skeleton elements to render */
+  count?: number;
+  /** Number of lines (for text variant) */
+  lines?: number;
+  /** Enable/disable animation */
+  animate?: boolean;
+  /** Gap between lines */
+  gap?: 'sm' | 'md' | 'lg';
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * Skeleton Component
+ *
+ * A loading placeholder component that displays a pulsing skeleton.
+ *
+ * @example
+ * ```tsx
+ * // Loading text
+ * <Skeleton variant="text" width={200} />
+ * <Skeleton variant="text" count={3} />
+ *
+ * // Loading avatar
+ * <Skeleton variant="circle" width={40} height={40} />
+ *
+ * // Loading button
+ * <Skeleton variant="button" width={120} />
+ * ```
+ */
+export const Skeleton: React.FC<SkeletonProps> = ({
+  variant = 'text',
+  width,
+  height,
+  count,
+  lines = 1,
+  animate = true,
+  gap = 'md',
+  className,
+  ...viewProps
+}) => {
+  const animatedValue = useRef(new Animated.Value(0.3)).current;
+
+  useEffect(() => {
+    if (animate) {
+      Animated.loop(
+        Animated.sequence([
+          Animated.timing(animatedValue, {
+            toValue: 1,
+            duration: 750,
+            useNativeDriver: true,
+          }),
+          Animated.timing(animatedValue, {
+            toValue: 0.3,
+            duration: 750,
+            useNativeDriver: true,
+          }),
+        ])
+      ).start();
+    }
+  }, [animate, animatedValue]);
+
+  // Variant-specific styles
+  const variantClasses = {
+    text: 'h-4 rounded',
+    circle: 'rounded-full',
+    rectangle: 'rounded-lg',
+    avatar: 'w-10 h-10 rounded-full',
+    button: 'h-10 rounded-lg',
+  };
+
+  // Gap between lines
+  const gapClasses = {
+    sm: 'gap-1',
+    md: 'gap-2',
+    lg: 'gap-3',
+  };
+
+  // Determine number of elements to render
+  const elementCount = count ?? lines;
+
+  // Single skeleton element
+  const renderSkeleton = (key?: number) => {
+    const style: Record<string, DimensionValue | undefined> = {};
+
+    if (width !== undefined) {
+      style.width = width;
+    }
+
+    if (height !== undefined) {
+      style.height = height;
+    }
+
+    return (
+      <Animated.View
+        key={key}
+        className={cn(
+          'bg-gray-200 dark:bg-gray-700',
+          variantClasses[variant],
+          className
+        )}
+        style={[style, animate ? { opacity: animatedValue } : undefined]}
+        {...viewProps}
+      />
+    );
+  };
+
+  // Multiple skeletons
+  if (elementCount > 1) {
+    return (
+      <View className={cn('flex flex-col', gapClasses[gap])}>
+        {Array.from({ length: elementCount }).map((_, i) => renderSkeleton(i))}
+      </View>
+    );
+  }
+
+  return renderSkeleton();
+};
+
+/**
+ * SkeletonText - Pre-configured text skeleton
+ */
+export const SkeletonText: React.FC<
+  Omit<SkeletonProps, 'variant'> & { lines?: number }
+> = ({ lines = 3, ...props }) => (
+  <Skeleton variant='text' lines={lines} {...props} />
+);
+
+/**
+ * SkeletonAvatar - Pre-configured avatar skeleton
+ */
+export const SkeletonAvatar: React.FC<
+  Omit<SkeletonProps, 'variant'>
+> = props => <Skeleton variant='avatar' {...props} />;
+
+/**
+ * SkeletonButton - Pre-configured button skeleton
+ */
+export const SkeletonButton: React.FC<
+  Omit<SkeletonProps, 'variant'>
+> = props => <Skeleton variant='button' width={100} {...props} />;

package/src/ui/Skeleton/index.ts

@@ -0,0 +1,7 @@
+export {
+  Skeleton,
+  SkeletonText,
+  SkeletonAvatar,
+  SkeletonButton,
+} from './Skeleton';
+export type { SkeletonProps } from './Skeleton';

package/src/ui/SmartLink/SmartLink.tsx

@@ -0,0 +1,248 @@
+import * as React from 'react';
+import { Text, Pressable, Linking, Alert } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface SmartLinkProps {
+  /** Link destination - URL or internal path */
+  to?: string;
+  /** Alternative prop name for destination */
+  href?: string;
+  /** Force external link behavior */
+  external?: boolean;
+  /** Link text/content */
+  children: React.ReactNode;
+  /** Link variant */
+  variant?: 'subtle' | 'default' | 'muted' | 'external' | 'inherit';
+  /** Text size */
+  size?: 'sm' | 'default' | 'lg';
+  /** Navigation handler for internal links */
+  onNavigate?: (path: string) => void;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * SmartLink Component
+ *
+ * Intelligent link component that handles both internal and external links.
+ * External links open in browser, internal links use the onNavigate callback.
+ *
+ * @example
+ * ```tsx
+ * <SmartLink to="/profile" onNavigate={navigate}>
+ *   View Profile
+ * </SmartLink>
+ * <SmartLink href="https://example.com" external>
+ *   Visit Website
+ * </SmartLink>
+ * ```
+ */
+export const SmartLink: React.FC<SmartLinkProps> = ({
+  to,
+  href,
+  external,
+  children,
+  variant = 'subtle',
+  size = 'default',
+  onNavigate,
+  disabled = false,
+  className,
+}) => {
+  const destination = to || href;
+
+  const variantClasses = {
+    subtle: 'text-gray-700 dark:text-gray-300',
+    default: 'text-blue-600 dark:text-blue-400 underline',
+    muted: 'text-gray-500 dark:text-gray-500',
+    external: 'text-blue-600 dark:text-blue-400 underline',
+    inherit: 'text-inherit',
+  };
+
+  const sizeClasses = {
+    sm: 'text-sm',
+    default: 'text-base',
+    lg: 'text-lg',
+  };
+
+  const handlePress = async () => {
+    if (disabled || !destination) return;
+
+    // Check if external
+    const isExternal =
+      external ||
+      destination.startsWith('http') ||
+      destination.startsWith('mailto:') ||
+      destination.startsWith('tel:');
+
+    if (isExternal) {
+      // Open in browser
+      try {
+        const canOpen = await Linking.canOpenURL(destination);
+        if (canOpen) {
+          await Linking.openURL(destination);
+        } else {
+          Alert.alert('Error', 'Cannot open this link');
+        }
+      } catch {
+        Alert.alert('Error', 'Failed to open link');
+      }
+    } else {
+      // Internal navigation
+      if (onNavigate) {
+        onNavigate(destination);
+      }
+    }
+  };
+
+  // If no destination, render as plain text
+  if (!destination) {
+    return (
+      <Text
+        className={cn(
+          variantClasses[variant],
+          sizeClasses[size],
+          disabled && 'opacity-50',
+          className
+        )}
+      >
+        {children}
+      </Text>
+    );
+  }
+
+  // Determine if external for styling
+  const isExternal =
+    external ||
+    destination.startsWith('http') ||
+    destination.startsWith('mailto:') ||
+    destination.startsWith('tel:');
+
+  const appliedVariant =
+    isExternal && variant === 'subtle' ? 'external' : variant;
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      disabled={disabled}
+      accessibilityRole='link'
+      accessibilityLabel={typeof children === 'string' ? children : undefined}
+      accessibilityState={{ disabled }}
+    >
+      {({ pressed }) => (
+        <Text
+          className={cn(
+            variantClasses[appliedVariant],
+            sizeClasses[size],
+            pressed && 'opacity-70',
+            disabled && 'opacity-50',
+            className
+          )}
+        >
+          {children}
+          {isExternal && appliedVariant === 'external' && ' ↗'}
+        </Text>
+      )}
+    </Pressable>
+  );
+};
+
+export interface SmartContentProps {
+  /** Content with potential links */
+  children: string;
+  /** Link mappings from text to paths */
+  mappings?: Record<string, string>;
+  /** Navigation handler for internal links */
+  onNavigate?: (path: string) => void;
+  /** Link variant */
+  variant?: SmartLinkProps['variant'];
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * SmartContent Component
+ *
+ * Automatically converts text matches to links based on mappings.
+ *
+ * @example
+ * ```tsx
+ * <SmartContent
+ *   mappings={{ 'privacy policy': '/privacy', 'contact us': '/contact' }}
+ *   onNavigate={navigate}
+ * >
+ *   Please read our privacy policy or contact us for help.
+ * </SmartContent>
+ * ```
+ */
+export const SmartContent: React.FC<SmartContentProps> = ({
+  children,
+  mappings = {},
+  onNavigate,
+  variant = 'subtle',
+  className,
+}) => {
+  const processedContent = React.useMemo(() => {
+    if (!children || typeof children !== 'string') {
+      return {
+        parts: [children || ''],
+        links: [] as { text: string; path: string; index: number }[],
+      };
+    }
+
+    let content = children;
+    const links: { text: string; path: string; index: number }[] = [];
+
+    // Sort by length (longest first) to avoid partial replacements
+    const sortedMappings = Object.entries(mappings).sort(
+      ([a], [b]) => b.length - a.length
+    );
+
+    let placeholderIndex = 0;
+    sortedMappings.forEach(([text, path]) => {
+      if (text && path) {
+        const regex = new RegExp(
+          `\\b${text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\b`,
+          'gi'
+        );
+        content = content.replace(regex, match => {
+          links.push({ text: match, path, index: placeholderIndex });
+          return `__LINK_${placeholderIndex++}__`;
+        });
+      }
+    });
+
+    // Split content by placeholders
+    const parts = content.split(/(__LINK_\d+__)/);
+
+    return { parts, links };
+  }, [children, mappings]);
+
+  const { parts, links } = processedContent;
+
+  return (
+    <Text className={cn('text-gray-900 dark:text-gray-100', className)}>
+      {parts.map((part, index) => {
+        const linkMatch = part.match(/__LINK_(\d+)__/);
+        if (linkMatch) {
+          const linkIndex = parseInt(linkMatch[1], 10);
+          const link = links.find(l => l.index === linkIndex);
+          if (link) {
+            return (
+              <SmartLink
+                key={index}
+                to={link.path}
+                variant={variant}
+                onNavigate={onNavigate}
+              >
+                {link.text}
+              </SmartLink>
+            );
+          }
+        }
+        return <Text key={index}>{part}</Text>;
+      })}
+    </Text>
+  );
+};

package/src/ui/SmartLink/index.ts

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

package/src/ui/Spacer/Spacer.tsx

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface SpacerProps {
+  /** Size of the spacer */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | number;
+  /** Direction of spacing */
+  axis?: 'horizontal' | 'vertical';
+  /** Flex grow to fill available space */
+  flex?: boolean;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * Spacer Component
+ *
+ * Creates empty space between elements. Can be a fixed size or flexible.
+ * Useful for creating consistent spacing in layouts.
+ *
+ * @example
+ * ```tsx
+ * <HStack>
+ *   <Button>Cancel</Button>
+ *   <Spacer flex />
+ *   <Button>Save</Button>
+ * </HStack>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <VStack>
+ *   <Text>Title</Text>
+ *   <Spacer size="lg" />
+ *   <Text>Content</Text>
+ * </VStack>
+ * ```
+ */
+export const Spacer: React.FC<SpacerProps> = ({
+  size = 'md',
+  axis = 'vertical',
+  flex = false,
+  className,
+}) => {
+  // Size configurations
+  const sizeClasses = {
+    vertical: {
+      xs: 'h-1',
+      sm: 'h-2',
+      md: 'h-4',
+      lg: 'h-6',
+      xl: 'h-8',
+      '2xl': 'h-12',
+    },
+    horizontal: {
+      xs: 'w-1',
+      sm: 'w-2',
+      md: 'w-4',
+      lg: 'w-6',
+      xl: 'w-8',
+      '2xl': 'w-12',
+    },
+  };
+
+  // Custom size (number)
+  const customSizeStyle =
+    typeof size === 'number'
+      ? axis === 'vertical'
+        ? { height: size }
+        : { width: size }
+      : undefined;
+
+  const sizeClass = typeof size === 'string' ? sizeClasses[axis][size] : '';
+
+  return (
+    <View
+      className={cn(flex && 'flex-1', !flex && sizeClass, className)}
+      style={customSizeStyle}
+      accessibilityElementsHidden
+    />
+  );
+};

package/src/ui/Spacer/index.ts

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

package/src/ui/Spinner/Spinner.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { View, ActivityIndicator, Text, type ViewProps } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface SpinnerProps extends ViewProps {
+  size?: 'small' | 'default' | 'large' | 'extraLarge';
+  variant?: 'default' | 'white' | 'success' | 'warning' | 'error';
+  accessibilityLabel?: string;
+  loadingText?: string;
+  showText?: boolean;
+}
+
+const sizeMap = {
+  small: 'small' as const,
+  default: 'small' as const,
+  large: 'large' as const,
+  extraLarge: 'large' as const,
+};
+
+const colorMap = {
+  default: '#2563eb', // blue-600
+  white: '#ffffff',
+  success: '#16a34a', // green-600
+  warning: '#ea580c', // orange-600
+  error: '#dc2626', // red-600
+};
+
+/**
+ * Spinner component for React Native
+ *
+ * @example
+ * ```tsx
+ * <Spinner size="large" variant="default" />
+ * ```
+ */
+export const Spinner: React.FC<SpinnerProps> = ({
+  size = 'default',
+  variant = 'default',
+  className,
+  accessibilityLabel = 'Loading',
+  loadingText = 'Loading...',
+  showText = false,
+  ...props
+}) => {
+  const activitySize = sizeMap[size];
+  const color = colorMap[variant];
+
+  return (
+    <View
+      className={cn('items-center justify-center', className)}
+      accessibilityRole='progressbar'
+      accessibilityLabel={accessibilityLabel}
+      {...props}
+    >
+      <ActivityIndicator size={activitySize} color={color} />
+      {showText && (
+        <Text className='mt-2 text-gray-600 dark:text-gray-400 text-sm'>
+          {loadingText}
+        </Text>
+      )}
+    </View>
+  );
+};

package/src/ui/Spinner/index.ts

@@ -0,0 +1 @@
+export { Spinner, type SpinnerProps } from './Spinner';