@sudobility/components-rn 1.0.1

package/src/ui/Card/Card.tsx

@@ -0,0 +1,133 @@
+import React from 'react';
+import { View, Text, Pressable, type ViewProps } from 'react-native';
+import { cn } from '../../lib/utils';
+import { textVariants, getCardVariantColors } from '@sudobility/design';
+
+export interface CardProps extends ViewProps {
+  variant?:
+    | 'default'
+    | 'bordered'
+    | 'elevated'
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'error'
+    | 'callout';
+  padding?: 'none' | 'sm' | 'md' | 'lg';
+  /** For callout variant: apply gradient background */
+  gradient?: boolean;
+  /** For info/callout variants: show icon */
+  icon?: React.ReactNode;
+  /** For info variants: show close button */
+  onClose?: () => void;
+}
+
+const calloutStyle =
+  'bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800';
+
+const paddingStyles = {
+  none: '',
+  sm: 'p-3',
+  md: 'p-6',
+  lg: 'p-8',
+};
+
+export const Card: React.FC<CardProps> = ({
+  variant = 'elevated',
+  padding = 'md',
+  icon,
+  onClose,
+  className,
+  children,
+  ...props
+}) => {
+  const isInfoVariant = ['info', 'success', 'warning', 'error'].includes(
+    variant
+  );
+  const showIconOrClose = isInfoVariant && (icon || onClose);
+
+  const variantClasses =
+    variant === 'callout'
+      ? calloutStyle
+      : getCardVariantColors(
+          variant as Parameters<typeof getCardVariantColors>[0]
+        );
+
+  return (
+    <View
+      className={cn(
+        'rounded-lg',
+        variantClasses,
+        paddingStyles[padding],
+        className
+      )}
+      {...props}
+    >
+      {showIconOrClose ? (
+        <View className='flex-row items-start gap-3'>
+          {icon && <View className='flex-shrink-0'>{icon}</View>}
+          <View className='flex-1'>{children}</View>
+          {onClose && (
+            <Pressable
+              onPress={onClose}
+              className='flex-shrink-0 opacity-70'
+              accessibilityLabel='Close'
+              accessibilityRole='button'
+            >
+              <Text className='text-lg'>×</Text>
+            </Pressable>
+          )}
+        </View>
+      ) : (
+        children
+      )}
+    </View>
+  );
+};
+
+interface CardHeaderProps extends ViewProps {
+  title?: string;
+  description?: string;
+}
+
+export const CardHeader: React.FC<CardHeaderProps> = ({
+  title,
+  description,
+  className,
+  children,
+  ...props
+}) => {
+  return (
+    <View className={cn('gap-1.5', className)} {...props}>
+      {title && <Text className={textVariants.heading.h4()}>{title}</Text>}
+      {description && (
+        <Text className={textVariants.body.sm()}>{description}</Text>
+      )}
+      {children}
+    </View>
+  );
+};
+
+export const CardContent: React.FC<ViewProps> = ({
+  className,
+  children,
+  ...props
+}) => {
+  return (
+    <View className={cn('', className)} {...props}>
+      {children}
+    </View>
+  );
+};
+
+export const CardFooter: React.FC<ViewProps> = ({
+  className,
+  children,
+  ...props
+}) => {
+  return (
+    <View className={cn('flex-row items-center pt-4', className)} {...props}>
+      {children}
+    </View>
+  );
+};

package/src/ui/Card/index.ts

@@ -0,0 +1,7 @@
+export {
+  Card,
+  CardHeader,
+  CardContent,
+  CardFooter,
+  type CardProps,
+} from './Card';

package/src/ui/Center/Center.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface CenterProps {
+  /** Content to center */
+  children: React.ReactNode;
+  /** Axis to center on */
+  axis?: 'horizontal' | 'vertical' | 'both';
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * Center Component
+ *
+ * Centers content horizontally, vertically, or both using flexbox.
+ * Useful for centering loading states, empty states, and modal content.
+ *
+ * @example
+ * ```tsx
+ * <Center>
+ *   <Spinner />
+ * </Center>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Center axis="horizontal">
+ *   <Button>Centered Button</Button>
+ * </Center>
+ * ```
+ */
+export const Center: React.FC<CenterProps> = ({
+  children,
+  axis = 'both',
+  className,
+}) => {
+  const getFlexClasses = () => {
+    switch (axis) {
+      case 'horizontal':
+        return 'justify-center';
+      case 'vertical':
+        return 'items-center';
+      case 'both':
+      default:
+        return 'justify-center items-center';
+    }
+  };
+
+  return (
+    <View className={cn('flex', getFlexClasses(), className)}>{children}</View>
+  );
+};

package/src/ui/Center/index.ts

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

package/src/ui/ChainBadge.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { View, Text, type ViewProps } from 'react-native';
+import { cn } from '../lib/utils';
+
+export type ChainType = 'evm' | 'solana' | 'bitcoin' | 'cosmos';
+
+export interface ChainBadgeProps extends ViewProps {
+  chainType: ChainType;
+  size?: 'sm' | 'md' | 'lg';
+  showLabel?: boolean;
+}
+
+const chainConfig: Record<
+  ChainType,
+  { label: string; emoji: string; bgColor: string; textColor: string }
+> = {
+  evm: {
+    label: 'EVM',
+    emoji: '⟠',
+    bgColor:
+      'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800',
+    textColor: 'text-blue-700 dark:text-blue-300',
+  },
+  solana: {
+    label: 'SOL',
+    emoji: '◎',
+    bgColor:
+      'bg-purple-50 dark:bg-purple-900/20 border-purple-200 dark:border-purple-800',
+    textColor: 'text-purple-700 dark:text-purple-300',
+  },
+  bitcoin: {
+    label: 'BTC',
+    emoji: '₿',
+    bgColor:
+      'bg-orange-50 dark:bg-orange-900/20 border-orange-200 dark:border-orange-800',
+    textColor: 'text-orange-700 dark:text-orange-300',
+  },
+  cosmos: {
+    label: 'ATOM',
+    emoji: '⚛',
+    bgColor:
+      'bg-indigo-50 dark:bg-indigo-900/20 border-indigo-200 dark:border-indigo-800',
+    textColor: 'text-indigo-700 dark:text-indigo-300',
+  },
+};
+
+const sizeConfig = {
+  sm: { padding: 'px-1.5 py-0.5', text: 'text-xs', gap: 'gap-0.5' },
+  md: { padding: 'px-2 py-1', text: 'text-sm', gap: 'gap-1' },
+  lg: { padding: 'px-2.5 py-1.5', text: 'text-base', gap: 'gap-1.5' },
+};
+
+export const ChainBadge: React.FC<ChainBadgeProps> = ({
+  chainType,
+  size = 'md',
+  showLabel = true,
+  className,
+  ...props
+}) => {
+  const chain = chainConfig[chainType];
+  const sizeStyles = sizeConfig[size];
+
+  return (
+    <View
+      className={cn(
+        'flex-row items-center rounded-md border',
+        chain.bgColor,
+        sizeStyles.padding,
+        sizeStyles.gap,
+        className
+      )}
+      accessibilityLabel={`${chain.label} chain`}
+      {...props}
+    >
+      <Text className={cn(sizeStyles.text, chain.textColor)}>
+        {chain.emoji}
+      </Text>
+      {showLabel && (
+        <Text className={cn('font-medium', sizeStyles.text, chain.textColor)}>
+          {chain.label}
+        </Text>
+      )}
+    </View>
+  );
+};

package/src/ui/Checkbox/Checkbox.tsx

@@ -0,0 +1,200 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { View, Text, Pressable, PressableProps } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface CheckboxProps extends Omit<PressableProps, 'onPress'> {
+  /** Whether the checkbox is checked (controlled mode) */
+  checked?: boolean;
+  /** Default checked state (uncontrolled mode) */
+  defaultChecked?: boolean;
+  /** Change handler */
+  onChange?: (checked: boolean) => void;
+  /** Label text */
+  label?: string;
+  /** Description text below label */
+  description?: string;
+  /** Whether the checkbox is disabled */
+  disabled?: boolean;
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg';
+  /** Color variant */
+  variant?: 'primary' | 'success' | 'warning' | 'error';
+  /** Additional className for the container */
+  className?: string;
+  /** Whether the checkbox is required */
+  required?: boolean;
+  /** Indeterminate state */
+  indeterminate?: boolean;
+  /** Error state */
+  error?: boolean;
+  /** Error message to display */
+  errorMessage?: string;
+}
+
+/**
+ * Checkbox Component
+ *
+ * Custom styled checkbox with proper accessibility and visual feedback.
+ * Supports both controlled and uncontrolled modes.
+ *
+ * @example
+ * ```tsx
+ * // Controlled
+ * <Checkbox
+ *   checked={isEnabled}
+ *   onChange={setIsEnabled}
+ *   label="Enable notifications"
+ * />
+ *
+ * // Uncontrolled
+ * <Checkbox
+ *   defaultChecked={true}
+ *   label="Remember me"
+ * />
+ * ```
+ */
+export const Checkbox: React.FC<CheckboxProps> = ({
+  checked: controlledChecked,
+  defaultChecked = false,
+  onChange,
+  label,
+  description,
+  disabled = false,
+  size = 'md',
+  variant = 'primary',
+  className,
+  required = false,
+  indeterminate = false,
+  error = false,
+  errorMessage,
+  ...pressableProps
+}) => {
+  // Support both controlled and uncontrolled modes
+  const [uncontrolledChecked, setUncontrolledChecked] =
+    useState(defaultChecked);
+  const isControlled = controlledChecked !== undefined;
+  const checked = isControlled ? controlledChecked : uncontrolledChecked;
+
+  const sizeClasses = {
+    sm: {
+      box: 'w-4 h-4',
+      check: 'w-2 h-2',
+      text: 'text-sm',
+      desc: 'text-xs',
+    },
+    md: {
+      box: 'w-5 h-5',
+      check: 'w-3 h-3',
+      text: 'text-base',
+      desc: 'text-sm',
+    },
+    lg: {
+      box: 'w-6 h-6',
+      check: 'w-4 h-4',
+      text: 'text-lg',
+      desc: 'text-base',
+    },
+  };
+
+  const getVariantClasses = () => {
+    if (error) {
+      return checked
+        ? 'bg-red-600 border-red-600'
+        : 'border-red-600 dark:border-red-500';
+    }
+
+    const variantClasses = {
+      primary: checked
+        ? 'bg-blue-600 border-blue-600'
+        : 'border-gray-300 dark:border-gray-600',
+      success: checked
+        ? 'bg-green-600 border-green-600'
+        : 'border-gray-300 dark:border-gray-600',
+      warning: checked
+        ? 'bg-yellow-600 border-yellow-600'
+        : 'border-gray-300 dark:border-gray-600',
+      error: checked
+        ? 'bg-red-600 border-red-600'
+        : 'border-gray-300 dark:border-gray-600',
+    };
+
+    return variantClasses[variant];
+  };
+
+  const handlePress = () => {
+    if (disabled) return;
+
+    const newChecked = !checked;
+
+    if (!isControlled) {
+      setUncontrolledChecked(newChecked);
+    }
+
+    onChange?.(newChecked);
+  };
+
+  const config = sizeClasses[size];
+
+  return (
+    <View className={cn('flex flex-col', className)}>
+      <Pressable
+        onPress={handlePress}
+        disabled={disabled}
+        className={cn(
+          'flex flex-row items-start gap-2',
+          disabled && 'opacity-50'
+        )}
+        accessibilityRole='checkbox'
+        accessibilityState={{
+          checked: indeterminate ? 'mixed' : checked,
+          disabled,
+        }}
+        accessibilityLabel={label}
+        {...pressableProps}
+      >
+        <View className='relative flex items-center justify-center'>
+          <View
+            className={cn(
+              'rounded border-2 flex items-center justify-center bg-white dark:bg-gray-900',
+              config.box,
+              getVariantClasses()
+            )}
+          >
+            {indeterminate ? (
+              <View
+                className={cn('bg-white rounded-sm', config.check, 'h-0.5')}
+              />
+            ) : checked ? (
+              <View className={cn('bg-white rounded-sm', config.check)} />
+            ) : null}
+          </View>
+        </View>
+        {(label || description) && (
+          <View className='flex flex-col flex-1'>
+            {label && (
+              <Text
+                className={cn('text-gray-900 dark:text-white', config.text)}
+              >
+                {label}
+                {required && <Text className='text-red-500 ml-1'>*</Text>}
+              </Text>
+            )}
+            {description && (
+              <Text
+                className={cn('text-gray-600 dark:text-gray-400', config.desc)}
+              >
+                {description}
+              </Text>
+            )}
+          </View>
+        )}
+      </Pressable>
+      {errorMessage && (
+        <Text className='mt-1 text-sm text-red-600 dark:text-red-400'>
+          {errorMessage}
+        </Text>
+      )}
+    </View>
+  );
+};

package/src/ui/Checkbox/index.ts

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

package/src/ui/Code/Code.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { Text, View } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface CodeProps {
+  /** Code content */
+  children: React.ReactNode;
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg';
+  /** Color variant */
+  variant?: 'default' | 'primary' | 'success' | 'warning' | 'danger';
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * Code Component
+ *
+ * Displays inline code snippets with monospace font and consistent styling.
+ *
+ * @example
+ * ```tsx
+ * <Text>Use the <Code>useState</Code> hook</Text>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Code variant="primary" size="lg">
+ *   npm install
+ * </Code>
+ * ```
+ */
+export const Code: React.FC<CodeProps> = ({
+  children,
+  size = 'md',
+  variant = 'default',
+  className,
+}) => {
+  // Size configurations
+  const sizeClasses = {
+    sm: 'text-xs px-1 py-0.5',
+    md: 'text-sm px-1.5 py-0.5',
+    lg: 'text-base px-2 py-1',
+  };
+
+  // Variant configurations - background
+  const variantBgClasses = {
+    default: 'bg-gray-100 dark:bg-gray-800',
+    primary: 'bg-blue-50 dark:bg-blue-900/30',
+    success: 'bg-green-50 dark:bg-green-900/30',
+    warning: 'bg-yellow-50 dark:bg-yellow-900/30',
+    danger: 'bg-red-50 dark:bg-red-900/30',
+  };
+
+  // Variant configurations - text
+  const variantTextClasses = {
+    default: 'text-gray-900 dark:text-gray-100',
+    primary: 'text-blue-700 dark:text-blue-300',
+    success: 'text-green-700 dark:text-green-300',
+    warning: 'text-yellow-700 dark:text-yellow-300',
+    danger: 'text-red-700 dark:text-red-300',
+  };
+
+  return (
+    <View
+      className={cn(
+        'rounded',
+        variantBgClasses[variant],
+        sizeClasses[size],
+        className
+      )}
+    >
+      <Text
+        className={cn('font-mono font-medium', variantTextClasses[variant])}
+        style={{ fontFamily: 'monospace' }}
+      >
+        {children}
+      </Text>
+    </View>
+  );
+};

package/src/ui/Code/index.ts

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