@sudobility/components-rn 1.0.1

package/src/ui/Divider/Divider.tsx

@@ -0,0 +1,166 @@
+import * as React from 'react';
+import { View, Text, ViewProps } from 'react-native';
+import { cn } from '../../lib/utils';
+import { textVariants } from '@sudobility/design';
+
+export interface DividerProps extends ViewProps {
+  /** Optional text label */
+  label?: string;
+  /** Label position */
+  labelPosition?: 'left' | 'center' | 'right';
+  /** Orientation */
+  orientation?: 'horizontal' | 'vertical';
+  /** Spacing around the divider */
+  spacing?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+  /** Line thickness */
+  thickness?: 'thin' | 'medium' | 'thick';
+  /** Color variant */
+  variant?: 'light' | 'medium' | 'dark';
+  /** Additional className for the container */
+  className?: string;
+  /** Additional className for the line */
+  lineClassName?: string;
+}
+
+/**
+ * Divider Component
+ *
+ * A visual separator for content sections with optional label support.
+ * Can be used horizontally or vertically to divide content areas.
+ *
+ * @example
+ * ```tsx
+ * <Divider />
+ * <Divider label="OR" labelPosition="center" />
+ * <Divider spacing="lg" variant="medium" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Vertical divider
+ * <View className="flex flex-row gap-4">
+ *   <View><Text>Content 1</Text></View>
+ *   <Divider orientation="vertical" />
+ *   <View><Text>Content 2</Text></View>
+ * </View>
+ * ```
+ */
+export const Divider: React.FC<DividerProps> = ({
+  label,
+  labelPosition = 'center',
+  orientation = 'horizontal',
+  spacing = 'md',
+  thickness = 'thin',
+  variant = 'light',
+  className,
+  lineClassName,
+  ...viewProps
+}) => {
+  // Spacing configurations
+  const spacingClasses = {
+    horizontal: {
+      none: 'my-0',
+      sm: 'my-2',
+      md: 'my-4',
+      lg: 'my-6',
+      xl: 'my-8',
+    },
+    vertical: {
+      none: 'mx-0',
+      sm: 'mx-2',
+      md: 'mx-4',
+      lg: 'mx-6',
+      xl: 'mx-8',
+    },
+  };
+
+  // Thickness configurations (using border for horizontal, width for vertical)
+  const thicknessValues = {
+    thin: 1,
+    medium: 2,
+    thick: 4,
+  };
+
+  // Color variant configurations
+  const variantClasses = {
+    light: 'bg-gray-200 dark:bg-gray-700',
+    medium: 'bg-gray-300 dark:bg-gray-600',
+    dark: 'bg-gray-400 dark:bg-gray-500',
+  };
+
+  // Vertical divider
+  if (orientation === 'vertical') {
+    return (
+      <View
+        className={cn(
+          'self-stretch',
+          variantClasses[variant],
+          spacingClasses.vertical[spacing],
+          className
+        )}
+        style={{ width: thicknessValues[thickness] }}
+        accessibilityRole='none'
+        {...viewProps}
+      />
+    );
+  }
+
+  // Horizontal divider without label
+  if (!label) {
+    return (
+      <View
+        className={cn(
+          'w-full',
+          variantClasses[variant],
+          spacingClasses.horizontal[spacing],
+          lineClassName,
+          className
+        )}
+        style={{ height: thicknessValues[thickness] }}
+        accessibilityRole='none'
+        {...viewProps}
+      />
+    );
+  }
+
+  // Horizontal divider with label
+  const labelPositionClasses = {
+    left: 'justify-start',
+    center: 'justify-center',
+    right: 'justify-end',
+  };
+
+  return (
+    <View
+      className={cn(
+        'flex flex-row items-center',
+        spacingClasses.horizontal[spacing],
+        labelPositionClasses[labelPosition],
+        className
+      )}
+      accessibilityRole='none'
+      {...viewProps}
+    >
+      {labelPosition !== 'left' && (
+        <View
+          className={cn('flex-1', variantClasses[variant], lineClassName)}
+          style={{ height: thicknessValues[thickness] }}
+        />
+      )}
+      <Text
+        className={cn(
+          textVariants.body.sm(),
+          'px-3 text-gray-500 dark:text-gray-400'
+        )}
+      >
+        {label}
+      </Text>
+      {labelPosition !== 'right' && (
+        <View
+          className={cn('flex-1', variantClasses[variant], lineClassName)}
+          style={{ height: thicknessValues[thickness] }}
+        />
+      )}
+    </View>
+  );
+};

package/src/ui/Divider/index.ts

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

package/src/ui/Dropdown/Dropdown.tsx

@@ -0,0 +1,176 @@
+import * as React from 'react';
+import { useState, useRef, useCallback } from 'react';
+import {
+  View,
+  Pressable,
+  Text,
+  Modal,
+  TouchableWithoutFeedback,
+} from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface DropdownItem {
+  /** Unique identifier */
+  id: string;
+  /** Display label */
+  label: string;
+  /** Icon component */
+  icon?: React.ReactNode;
+  /** Press handler */
+  onPress: () => void;
+  /** Whether item is disabled */
+  disabled?: boolean;
+  /** Whether to render as separator */
+  separator?: boolean;
+}
+
+export interface DropdownProps {
+  /** Trigger element */
+  trigger: React.ReactNode;
+  /** Menu items */
+  items: DropdownItem[];
+  /** Alignment relative to trigger */
+  align?: 'left' | 'right';
+  /** Additional className for container */
+  className?: string;
+  /** Variant style */
+  variant?: 'default' | 'bordered';
+}
+
+/**
+ * Dropdown Component
+ *
+ * A dropdown menu that displays a list of actions when triggered.
+ * Uses Modal for overlay behavior on React Native.
+ *
+ * @example
+ * ```tsx
+ * <Dropdown
+ *   trigger={<Button>Menu</Button>}
+ *   items={[
+ *     { id: '1', label: 'Edit', onPress: handleEdit },
+ *     { id: '2', label: 'Delete', onPress: handleDelete, variant: 'danger' },
+ *   ]}
+ * />
+ * ```
+ */
+export const Dropdown: React.FC<DropdownProps> = ({
+  trigger,
+  items,
+  align = 'right',
+  className,
+  variant = 'default',
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [triggerLayout, setTriggerLayout] = useState({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+  });
+  const triggerRef = useRef<View>(null);
+
+  const handleOpen = useCallback(() => {
+    triggerRef.current?.measureInWindow((x, y, width, height) => {
+      setTriggerLayout({ x, y, width, height });
+      setIsOpen(true);
+    });
+  }, []);
+
+  const handleClose = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+
+  const handleItemPress = useCallback((item: DropdownItem) => {
+    if (!item.disabled) {
+      item.onPress();
+      setIsOpen(false);
+    }
+  }, []);
+
+  // Calculate menu position
+  const menuStyle = {
+    position: 'absolute' as const,
+    top: triggerLayout.y + triggerLayout.height + 4,
+    ...(align === 'left'
+      ? { left: triggerLayout.x }
+      : {
+          right: triggerLayout.x > 0 ? undefined : 16,
+          left:
+            align === 'right'
+              ? triggerLayout.x + triggerLayout.width - 200
+              : triggerLayout.x,
+        }),
+    minWidth: 160,
+    maxWidth: 280,
+  };
+
+  return (
+    <View className={cn('relative', className)} ref={triggerRef}>
+      <Pressable
+        onPress={handleOpen}
+        className={cn(
+          variant === 'bordered' &&
+            'border border-gray-300 dark:border-gray-600 rounded-md px-3 py-2'
+        )}
+        accessibilityRole='button'
+        accessibilityLabel='Open menu'
+        accessibilityState={{ expanded: isOpen }}
+      >
+        {trigger}
+      </Pressable>
+
+      <Modal
+        visible={isOpen}
+        transparent
+        animationType='fade'
+        onRequestClose={handleClose}
+      >
+        <TouchableWithoutFeedback onPress={handleClose}>
+          <View className='flex-1'>
+            <View
+              style={menuStyle}
+              className='bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 py-1 overflow-hidden'
+            >
+              {items.map(item =>
+                item.separator ? (
+                  <View
+                    key={item.id}
+                    className='my-1 h-px bg-gray-200 dark:bg-gray-700'
+                    accessibilityRole='none'
+                  />
+                ) : (
+                  <Pressable
+                    key={item.id}
+                    onPress={() => handleItemPress(item)}
+                    disabled={item.disabled}
+                    className={cn(
+                      'flex-row items-center gap-2 px-4 py-2.5',
+                      item.disabled
+                        ? 'opacity-50'
+                        : 'active:bg-gray-100 dark:active:bg-gray-700'
+                    )}
+                    accessibilityRole='menuitem'
+                    accessibilityState={{ disabled: item.disabled }}
+                  >
+                    {item.icon && <View className='w-5 h-5'>{item.icon}</View>}
+                    <Text
+                      className={cn(
+                        'text-sm',
+                        item.disabled
+                          ? 'text-gray-400 dark:text-gray-500'
+                          : 'text-gray-700 dark:text-gray-200'
+                      )}
+                    >
+                      {item.label}
+                    </Text>
+                  </Pressable>
+                )
+              )}
+            </View>
+          </View>
+        </TouchableWithoutFeedback>
+      </Modal>
+    </View>
+  );
+};

package/src/ui/Dropdown/index.ts

@@ -0,0 +1,2 @@
+export { Dropdown } from './Dropdown';
+export type { DropdownProps, DropdownItem } from './Dropdown';

package/src/ui/EmptyState/EmptyState.tsx

@@ -0,0 +1,118 @@
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface EmptyStateProps {
+  /** Icon or illustration to display */
+  icon?: React.ReactNode;
+  /** Main title */
+  title: string;
+  /** Description text */
+  description?: string;
+  /** Action button(s) */
+  action?: React.ReactNode;
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg';
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * EmptyState Component
+ *
+ * Displays a placeholder for empty lists, search results, or content areas.
+ * Includes icon, title, description, and optional action button.
+ *
+ * @example
+ * ```tsx
+ * <EmptyState
+ *   icon={<InboxIcon className="w-12 h-12" />}
+ *   title="No messages"
+ *   description="You don't have any messages yet."
+ *   action={<Button onPress={handleCompose}>Compose</Button>}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <EmptyState
+ *   icon={<SearchIcon />}
+ *   title="No results found"
+ *   description="Try adjusting your search or filter to find what you're looking for."
+ *   size="sm"
+ * />
+ * ```
+ */
+export const EmptyState: React.FC<EmptyStateProps> = ({
+  icon,
+  title,
+  description,
+  action,
+  size = 'md',
+  className,
+}) => {
+  // Size configurations
+  const sizeConfig = {
+    sm: {
+      container: 'py-6 px-4',
+      iconContainer: 'w-10 h-10 mb-3',
+      title: 'text-base',
+      description: 'text-sm',
+    },
+    md: {
+      container: 'py-10 px-6',
+      iconContainer: 'w-14 h-14 mb-4',
+      title: 'text-lg',
+      description: 'text-base',
+    },
+    lg: {
+      container: 'py-16 px-8',
+      iconContainer: 'w-20 h-20 mb-6',
+      title: 'text-xl',
+      description: 'text-base',
+    },
+  };
+
+  const config = sizeConfig[size];
+
+  return (
+    <View
+      className={cn('items-center justify-center', config.container, className)}
+      accessibilityRole='none'
+    >
+      {icon && (
+        <View
+          className={cn(
+            'items-center justify-center',
+            config.iconContainer,
+            'text-gray-400 dark:text-gray-500'
+          )}
+        >
+          {icon}
+        </View>
+      )}
+
+      <Text
+        className={cn(
+          'font-semibold text-gray-900 dark:text-white text-center',
+          config.title
+        )}
+      >
+        {title}
+      </Text>
+
+      {description && (
+        <Text
+          className={cn(
+            'text-gray-500 dark:text-gray-400 text-center mt-2 max-w-xs',
+            config.description
+          )}
+        >
+          {description}
+        </Text>
+      )}
+
+      {action && <View className='mt-6'>{action}</View>}
+    </View>
+  );
+};

package/src/ui/EmptyState/index.ts

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

package/src/ui/ExternalLink/ExternalLink.tsx

@@ -0,0 +1,112 @@
+import * as React from 'react';
+import { useCallback } from 'react';
+import { Text, Pressable, Linking } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface ExternalLinkProps {
+  /** Link URL */
+  href: string;
+  /** Link text content */
+  children: React.ReactNode;
+  /** Show external icon */
+  showIcon?: boolean;
+  /** Icon position */
+  iconPosition?: 'left' | 'right';
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg';
+  /** Color variant */
+  variant?: 'default' | 'primary' | 'muted';
+  /** Additional className */
+  className?: string;
+  /** Press handler (called before navigation) */
+  onPress?: () => void;
+}
+
+/**
+ * ExternalLink Component
+ *
+ * Opens external URLs in the device browser.
+ * Includes optional external link icon indicator.
+ *
+ * @example
+ * ```tsx
+ * <ExternalLink href="https://example.com">
+ *   Visit Example
+ * </ExternalLink>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <ExternalLink
+ *   href="https://docs.example.com"
+ *   variant="primary"
+ *   iconPosition="left"
+ * >
+ *   Read Documentation
+ * </ExternalLink>
+ * ```
+ */
+export const ExternalLink: React.FC<ExternalLinkProps> = ({
+  href,
+  children,
+  showIcon = true,
+  iconPosition = 'right',
+  size = 'md',
+  variant = 'default',
+  className,
+  onPress,
+}) => {
+  // Size configurations
+  const sizeClasses = {
+    sm: 'text-xs',
+    md: 'text-sm',
+    lg: 'text-base',
+  };
+
+  // Color variant configurations
+  const variantClasses = {
+    default: 'text-blue-600 dark:text-blue-400',
+    primary: 'text-blue-700 dark:text-blue-300 font-semibold',
+    muted: 'text-gray-600 dark:text-gray-400',
+  };
+
+  const handlePress = useCallback(async () => {
+    onPress?.();
+    try {
+      const canOpen = await Linking.canOpenURL(href);
+      if (canOpen) {
+        await Linking.openURL(href);
+      }
+    } catch {
+      // Failed to open URL
+    }
+  }, [href, onPress]);
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      className={cn('flex-row items-center gap-1', className)}
+      accessibilityRole='link'
+      accessibilityLabel={
+        typeof children === 'string' ? children : 'External link'
+      }
+      accessibilityHint='Opens in external browser'
+    >
+      {showIcon && iconPosition === 'left' && (
+        <Text className={cn(sizeClasses[size], variantClasses[variant])}>
+          ↗
+        </Text>
+      )}
+      <Text
+        className={cn(sizeClasses[size], variantClasses[variant], 'underline')}
+      >
+        {children}
+      </Text>
+      {showIcon && iconPosition === 'right' && (
+        <Text className={cn(sizeClasses[size], variantClasses[variant])}>
+          ↗
+        </Text>
+      )}
+    </Pressable>
+  );
+};

package/src/ui/ExternalLink/index.ts

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