@sudobility/components-rn 1.0.1

package/src/ui/CodeDisplay/CodeDisplay.tsx

@@ -0,0 +1,148 @@
+import * as React from 'react';
+import { View, Text, ScrollView } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface CodeDisplayProps {
+  /** Code or text to display */
+  children: React.ReactNode;
+  /** Visual variant */
+  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'neutral';
+  /** Size variant */
+  size?: 'xs' | 'sm' | 'md' | 'lg';
+  /** Display as inline or block */
+  inline?: boolean;
+  /** Text alignment (for block display) */
+  align?: 'left' | 'center' | 'right';
+  /** Whether to enable text wrapping */
+  wrap?: boolean;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * CodeDisplay Component
+ *
+ * Displays code, wallet addresses, or monospace text in a styled container.
+ * Commonly used for displaying blockchain addresses, code snippets, or
+ * technical identifiers.
+ *
+ * @example
+ * ```tsx
+ * <CodeDisplay variant="primary" size="lg" align="center">
+ *   wallet@example.com
+ * </CodeDisplay>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <CodeDisplay variant="success" inline>
+ *   0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb
+ * </CodeDisplay>
+ * ```
+ */
+export const CodeDisplay: React.FC<CodeDisplayProps> = ({
+  children,
+  variant = 'primary',
+  size = 'md',
+  inline = false,
+  align = 'left',
+  wrap = false,
+  className,
+}) => {
+  // Color variant configurations
+  const variantClasses = {
+    primary: 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30',
+    secondary:
+      'text-purple-600 dark:text-purple-400 bg-purple-50 dark:bg-purple-900/30',
+    success:
+      'text-green-600 dark:text-green-400 bg-green-50 dark:bg-green-900/30',
+    warning:
+      'text-yellow-700 dark:text-yellow-400 bg-yellow-50 dark:bg-yellow-900/30',
+    neutral: 'text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-800',
+  };
+
+  // Size configurations
+  const sizeClasses = {
+    xs: {
+      text: 'text-xs',
+      padding: inline ? 'px-1.5 py-0.5' : 'px-2 py-1',
+    },
+    sm: {
+      text: 'text-sm',
+      padding: inline ? 'px-2 py-0.5' : 'px-3 py-1.5',
+    },
+    md: {
+      text: 'text-base',
+      padding: inline ? 'px-2.5 py-1' : 'px-4 py-2',
+    },
+    lg: {
+      text: 'text-lg',
+      padding: inline ? 'px-3 py-1' : 'px-4 py-2',
+    },
+  };
+
+  // Text alignment classes
+  const alignClasses = {
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right',
+  };
+
+  const sizeConfig = sizeClasses[size];
+
+  // Extract background and text color classes
+  const [textColorClass, bgClass] = variantClasses[variant].split(' ');
+
+  if (inline) {
+    return (
+      <Text
+        className={cn(
+          'font-mono rounded-lg',
+          textColorClass,
+          bgClass,
+          sizeConfig.text,
+          sizeConfig.padding,
+          className
+        )}
+      >
+        {children}
+      </Text>
+    );
+  }
+
+  const content = (
+    <Text
+      className={cn(
+        'font-mono',
+        textColorClass,
+        sizeConfig.text,
+        !inline && alignClasses[align],
+        wrap ? 'flex-wrap' : ''
+      )}
+      numberOfLines={wrap ? undefined : 1}
+    >
+      {children}
+    </Text>
+  );
+
+  if (wrap) {
+    return (
+      <View
+        className={cn('rounded-lg', bgClass, sizeConfig.padding, className)}
+      >
+        {content}
+      </View>
+    );
+  }
+
+  return (
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      className={cn('rounded-lg', bgClass, className)}
+      contentContainerStyle={{ padding: 0 }}
+    >
+      <View className={sizeConfig.padding}>{content}</View>
+    </ScrollView>
+  );
+};

package/src/ui/CodeDisplay/index.ts

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

package/src/ui/CollapsibleSection/CollapsibleSection.tsx

@@ -0,0 +1,190 @@
+import * as React from 'react';
+import { useState, useRef, useEffect } from 'react';
+import {
+  View,
+  Text,
+  Pressable,
+  Animated,
+  LayoutAnimation,
+  Platform,
+  UIManager,
+} from 'react-native';
+import { cn } from '../../lib/utils';
+
+// Enable LayoutAnimation on Android
+if (
+  Platform.OS === 'android' &&
+  UIManager.setLayoutAnimationEnabledExperimental
+) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+export interface CollapsibleSectionItem {
+  /** Unique identifier */
+  id: string;
+  /** Item title */
+  title: string;
+  /** Item content */
+  content?: React.ReactNode;
+}
+
+export interface CollapsibleSectionProps {
+  /** Section ID */
+  id: string;
+  /** Section title */
+  title: string;
+  /** Section content (shown when no subsections) */
+  content?: React.ReactNode;
+  /** Subsections */
+  subsections?: CollapsibleSectionItem[];
+  /** Whether section is selected */
+  isSelected?: boolean;
+  /** Currently selected subsection ID */
+  selectedSubsection?: string | null;
+  /** Section select handler */
+  onSectionSelect?: (sectionId: string) => void;
+  /** Subsection select handler */
+  onSubsectionSelect?: (subsectionId: string, parentSectionId: string) => void;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * CollapsibleSection Component
+ *
+ * Collapsible section with optional subsections.
+ * Useful for documentation, FAQs, or navigation.
+ *
+ * @example
+ * ```tsx
+ * <CollapsibleSection
+ *   id="getting-started"
+ *   title="Getting Started"
+ *   subsections={[
+ *     { id: 'install', title: 'Installation' },
+ *     { id: 'setup', title: 'Setup' },
+ *   ]}
+ *   isSelected={selectedSection === 'getting-started'}
+ *   onSectionSelect={setSelectedSection}
+ *   onSubsectionSelect={handleSubsectionSelect}
+ * />
+ * ```
+ */
+export const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({
+  id,
+  title,
+  subsections,
+  isSelected = false,
+  selectedSubsection = null,
+  onSectionSelect,
+  onSubsectionSelect,
+  className,
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const rotateAnim = useRef(new Animated.Value(0)).current;
+
+  const hasSubsections = subsections && subsections.length > 0;
+
+  useEffect(() => {
+    Animated.timing(rotateAnim, {
+      toValue: isExpanded ? 1 : 0,
+      duration: 200,
+      useNativeDriver: true,
+    }).start();
+  }, [isExpanded, rotateAnim]);
+
+  const handleToggle = () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    setIsExpanded(!isExpanded);
+  };
+
+  const handleSectionPress = () => {
+    onSectionSelect?.(id);
+  };
+
+  const rotation = rotateAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '90deg'],
+  });
+
+  return (
+    <View className={className}>
+      {/* Section Header */}
+      <View className='flex-row items-center'>
+        {/* Selection overlay */}
+        {isSelected && !selectedSubsection && (
+          <View className='absolute top-1 bottom-1 left-1 right-10 bg-blue-500/20 dark:bg-blue-400/20 rounded-lg' />
+        )}
+
+        {/* Title button */}
+        <Pressable
+          onPress={handleSectionPress}
+          className='flex-1 py-4 pl-4 pr-2'
+          accessibilityRole='button'
+          accessibilityLabel={title}
+          accessibilityState={{ selected: isSelected && !selectedSubsection }}
+        >
+          <Text
+            className={cn(
+              'text-base font-medium',
+              isSelected && !selectedSubsection
+                ? 'text-blue-700 dark:text-blue-300'
+                : 'text-gray-700 dark:text-gray-300'
+            )}
+          >
+            {title}
+          </Text>
+        </Pressable>
+
+        {/* Expand/collapse button */}
+        {hasSubsections && (
+          <Pressable
+            onPress={handleToggle}
+            className='p-2 rounded-md'
+            accessibilityRole='button'
+            accessibilityLabel={isExpanded ? 'Collapse' : 'Expand'}
+          >
+            <Animated.View style={{ transform: [{ rotate: rotation }] }}>
+              <Text className='text-gray-500 text-lg'>›</Text>
+            </Animated.View>
+          </Pressable>
+        )}
+      </View>
+
+      {/* Subsections */}
+      {hasSubsections && isExpanded && (
+        <View className='ml-6 mb-2'>
+          {subsections.map(subsection => (
+            <View key={subsection.id} className='relative'>
+              {/* Selection overlay */}
+              {selectedSubsection === subsection.id && (
+                <View className='absolute top-0.5 bottom-0.5 left-0 right-8 bg-blue-500/20 dark:bg-blue-400/20 rounded-lg' />
+              )}
+
+              <Pressable
+                onPress={() => onSubsectionSelect?.(subsection.id, id)}
+                className='py-2 pl-4 pr-3'
+                accessibilityRole='button'
+                accessibilityLabel={subsection.title}
+                accessibilityState={{
+                  selected: selectedSubsection === subsection.id,
+                }}
+              >
+                <Text
+                  className={cn(
+                    'text-sm',
+                    selectedSubsection === subsection.id
+                      ? 'text-blue-700 dark:text-blue-300'
+                      : 'text-gray-600 dark:text-gray-400'
+                  )}
+                >
+                  {subsection.title}
+                </Text>
+              </Pressable>
+            </View>
+          ))}
+        </View>
+      )}
+    </View>
+  );
+};

package/src/ui/CollapsibleSection/index.ts

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

package/src/ui/Combobox/Combobox.tsx

@@ -0,0 +1,216 @@
+import * as React from 'react';
+import { useState, useCallback } from 'react';
+import {
+  View,
+  Text,
+  TextInput,
+  Pressable,
+  Modal,
+  ScrollView,
+  TouchableWithoutFeedback,
+} from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface ComboboxOption {
+  /** Option value */
+  value: string;
+  /** Option label */
+  label: string;
+  /** Disabled state */
+  disabled?: boolean;
+}
+
+export interface ComboboxProps {
+  /** Available options */
+  options: ComboboxOption[];
+  /** Selected value */
+  value?: string;
+  /** Change handler */
+  onChange: (value: string) => void;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Search placeholder */
+  searchPlaceholder?: string;
+  /** Empty state message */
+  emptyMessage?: string;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * Combobox Component
+ *
+ * Searchable select dropdown.
+ * Combines input and select functionality.
+ *
+ * @example
+ * ```tsx
+ * <Combobox
+ *   options={[
+ *     { value: 'apple', label: 'Apple' },
+ *     { value: 'banana', label: 'Banana' },
+ *     { value: 'orange', label: 'Orange' }
+ *   ]}
+ *   value={selectedFruit}
+ *   onChange={setSelectedFruit}
+ *   placeholder="Select a fruit..."
+ * />
+ * ```
+ */
+export const Combobox: React.FC<ComboboxProps> = ({
+  options,
+  value,
+  onChange,
+  placeholder = 'Select option...',
+  searchPlaceholder = 'Search...',
+  emptyMessage = 'No results found.',
+  disabled = false,
+  className,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+
+  // Filter options based on search query
+  const filteredOptions = options.filter(option =>
+    option.label.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  // Get selected option label
+  const selectedOption = options.find(opt => opt.value === value);
+
+  const handleSelect = useCallback(
+    (optionValue: string, optionDisabled?: boolean) => {
+      if (optionDisabled) return;
+      onChange(optionValue);
+      setIsOpen(false);
+      setSearchQuery('');
+    },
+    [onChange]
+  );
+
+  const handleClose = useCallback(() => {
+    setIsOpen(false);
+    setSearchQuery('');
+  }, []);
+
+  return (
+    <View className={cn('w-full', className)}>
+      {/* Trigger Button */}
+      <Pressable
+        onPress={() => !disabled && setIsOpen(true)}
+        disabled={disabled}
+        className={cn(
+          'flex-row items-center justify-between px-3 py-2',
+          'bg-white dark:bg-gray-900',
+          'border border-gray-300 dark:border-gray-700',
+          'rounded-md',
+          disabled && 'opacity-50'
+        )}
+        accessibilityRole='button'
+        accessibilityLabel={placeholder}
+        accessibilityState={{ disabled, expanded: isOpen }}
+      >
+        <Text
+          className={cn(
+            'flex-1 text-sm',
+            selectedOption
+              ? 'text-gray-900 dark:text-white'
+              : 'text-gray-500 dark:text-gray-400'
+          )}
+          numberOfLines={1}
+        >
+          {selectedOption ? selectedOption.label : placeholder}
+        </Text>
+        <Text className='text-gray-600 dark:text-gray-400 ml-2'>▼</Text>
+      </Pressable>
+
+      {/* Dropdown Modal */}
+      <Modal
+        visible={isOpen}
+        transparent
+        animationType='fade'
+        onRequestClose={handleClose}
+      >
+        <TouchableWithoutFeedback onPress={handleClose}>
+          <View className='flex-1 justify-center px-4 bg-black/50'>
+            <TouchableWithoutFeedback>
+              <View className='bg-white dark:bg-gray-900 rounded-lg max-h-[70%] shadow-xl'>
+                {/* Search Input */}
+                <View className='p-3 border-b border-gray-200 dark:border-gray-700'>
+                  <TextInput
+                    value={searchQuery}
+                    onChangeText={setSearchQuery}
+                    placeholder={searchPlaceholder}
+                    placeholderTextColor='#9ca3af'
+                    autoFocus
+                    className='px-3 py-2 text-sm bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white rounded-md'
+                  />
+                </View>
+
+                {/* Options List */}
+                <ScrollView className='max-h-80'>
+                  {filteredOptions.length === 0 ? (
+                    <View className='px-3 py-4 items-center'>
+                      <Text className='text-sm text-gray-500 dark:text-gray-400'>
+                        {emptyMessage}
+                      </Text>
+                    </View>
+                  ) : (
+                    filteredOptions.map(option => (
+                      <Pressable
+                        key={option.value}
+                        onPress={() =>
+                          handleSelect(option.value, option.disabled)
+                        }
+                        disabled={option.disabled}
+                        className={cn(
+                          'px-4 py-3',
+                          'active:bg-gray-100 dark:active:bg-gray-800',
+                          option.disabled && 'opacity-50',
+                          option.value === value &&
+                            'bg-blue-50 dark:bg-blue-900/30'
+                        )}
+                        accessibilityRole='button'
+                        accessibilityState={{
+                          selected: option.value === value,
+                          disabled: option.disabled,
+                        }}
+                      >
+                        <Text
+                          className={cn(
+                            'text-sm',
+                            option.value === value
+                              ? 'text-blue-700 dark:text-blue-300 font-medium'
+                              : 'text-gray-900 dark:text-white'
+                          )}
+                        >
+                          {option.label}
+                        </Text>
+                      </Pressable>
+                    ))
+                  )}
+                </ScrollView>
+
+                {/* Close button */}
+                <View className='p-3 border-t border-gray-200 dark:border-gray-700'>
+                  <Pressable
+                    onPress={handleClose}
+                    className='items-center py-2'
+                    accessibilityRole='button'
+                    accessibilityLabel='Close'
+                  >
+                    <Text className='text-sm font-medium text-gray-600 dark:text-gray-400'>
+                      Cancel
+                    </Text>
+                  </Pressable>
+                </View>
+              </View>
+            </TouchableWithoutFeedback>
+          </View>
+        </TouchableWithoutFeedback>
+      </Modal>
+    </View>
+  );
+};

package/src/ui/Combobox/index.ts

@@ -0,0 +1,2 @@
+export { Combobox } from './Combobox';
+export type { ComboboxProps, ComboboxOption } from './Combobox';