@sudobility/components-rn 1.0.1

package/src/ui/InfoBox/InfoBox.tsx

@@ -0,0 +1,120 @@
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface InfoBoxProps {
+  /** Content to display in the info box */
+  children: React.ReactNode;
+  /** Title/heading for the info box */
+  title?: string;
+  /** Color variant */
+  variant?: 'info' | 'success' | 'warning' | 'danger' | 'neutral';
+  /** Size/padding variant */
+  size?: 'sm' | 'md' | 'lg';
+  /** Icon element to display */
+  icon?: React.ReactNode;
+  /** Show border */
+  bordered?: boolean;
+  /** Additional className for the container */
+  className?: string;
+}
+
+/**
+ * InfoBox Component
+ *
+ * A versatile callout/info box component for highlighting important information,
+ * tips, warnings, or notes. Commonly used in documentation, settings pages,
+ * and forms.
+ *
+ * @example
+ * ```tsx
+ * <InfoBox variant="info" title="Quick Start">
+ *   <Text>Connect your wallet to get started</Text>
+ * </InfoBox>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <InfoBox variant="warning" icon={<WarningIcon />}>
+ *   <Text>Each wallet creates a unique email address.</Text>
+ * </InfoBox>
+ * ```
+ */
+export const InfoBox: React.FC<InfoBoxProps> = ({
+  children,
+  title,
+  variant = 'info',
+  size = 'md',
+  icon,
+  bordered = true,
+  className,
+}) => {
+  // Color variant configurations
+  const variantClasses = {
+    info: {
+      bg: 'bg-blue-50 dark:bg-blue-900/20',
+      border: 'border-blue-200 dark:border-blue-800',
+      title: 'text-blue-900 dark:text-blue-300',
+      text: 'text-blue-800 dark:text-blue-400',
+    },
+    success: {
+      bg: 'bg-green-50 dark:bg-green-900/20',
+      border: 'border-green-200 dark:border-green-800',
+      title: 'text-green-900 dark:text-green-300',
+      text: 'text-green-800 dark:text-green-400',
+    },
+    warning: {
+      bg: 'bg-yellow-50 dark:bg-yellow-900/20',
+      border: 'border-yellow-200 dark:border-yellow-800',
+      title: 'text-yellow-900 dark:text-yellow-300',
+      text: 'text-yellow-800 dark:text-yellow-400',
+    },
+    danger: {
+      bg: 'bg-red-50 dark:bg-red-900/20',
+      border: 'border-red-200 dark:border-red-800',
+      title: 'text-red-900 dark:text-red-300',
+      text: 'text-red-800 dark:text-red-400',
+    },
+    neutral: {
+      bg: 'bg-gray-50 dark:bg-gray-800',
+      border: 'border-gray-200 dark:border-gray-700',
+      title: 'text-gray-900 dark:text-gray-100',
+      text: 'text-gray-700 dark:text-gray-300',
+    },
+  };
+
+  // Size/padding configurations
+  const sizeClasses = {
+    sm: 'p-3',
+    md: 'p-4',
+    lg: 'p-6',
+  };
+
+  const variantConfig = variantClasses[variant];
+
+  return (
+    <View
+      className={cn(
+        'rounded-lg',
+        variantConfig.bg,
+        bordered && `border ${variantConfig.border}`,
+        sizeClasses[size],
+        className
+      )}
+    >
+      {(title || icon) && (
+        <View className='flex flex-row items-start gap-3 mb-2'>
+          {icon}
+          {title && (
+            <Text className={cn('font-semibold', variantConfig.title)}>
+              {title}
+            </Text>
+          )}
+        </View>
+      )}
+      <View className={cn(!title && !icon && variantConfig.text)}>
+        {children}
+      </View>
+    </View>
+  );
+};

package/src/ui/InfoBox/index.ts

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

package/src/ui/Input/Input.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import {
+  TextInput,
+  type TextInputProps,
+  type NativeSyntheticEvent,
+  type TextInputFocusEventData,
+} from 'react-native';
+import { cn } from '../../lib/utils';
+import { variants as v } from '@sudobility/design';
+
+export interface InputProps extends Omit<TextInputProps, 'style'> {
+  /** Additional class names for styling */
+  className?: string;
+  /** Error state */
+  error?: boolean;
+  /** Disabled state */
+  disabled?: boolean;
+}
+
+/**
+ * Input component for React Native
+ *
+ * @example
+ * ```tsx
+ * <Input
+ *   placeholder="Enter your email"
+ *   value={email}
+ *   onChangeText={setEmail}
+ *   keyboardType="email-address"
+ * />
+ * ```
+ */
+export const Input = React.forwardRef<TextInput, InputProps>(
+  (
+    { className, error, disabled, editable, onFocus, onBlur, ...props },
+    ref
+  ) => {
+    const [isFocused, setIsFocused] = React.useState(false);
+
+    const handleFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      setIsFocused(true);
+      onFocus?.(e);
+    };
+
+    const handleBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      setIsFocused(false);
+      onBlur?.(e);
+    };
+
+    const isEditable = editable !== false && !disabled;
+
+    return (
+      <TextInput
+        ref={ref}
+        className={cn(
+          v.input.default(),
+          isFocused && 'border-blue-500 dark:border-blue-400',
+          error && 'border-red-500 dark:border-red-400',
+          disabled && 'opacity-50 bg-gray-100 dark:bg-gray-800',
+          className
+        )}
+        editable={isEditable}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        accessibilityState={{
+          disabled: !isEditable,
+        }}
+        {...props}
+      />
+    );
+  }
+);
+
+Input.displayName = 'Input';

package/src/ui/Input/index.ts

@@ -0,0 +1 @@
+export { Input, type InputProps } from './Input';

package/src/ui/Kbd/Kbd.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface KbdProps {
+  /** Keyboard key(s) to display */
+  children: React.ReactNode;
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg';
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * Kbd Component
+ *
+ * Displays keyboard shortcuts with consistent styling.
+ * Used to represent user input from keyboard.
+ *
+ * @example
+ * ```tsx
+ * <View className="flex-row items-center gap-1">
+ *   <Kbd>Ctrl</Kbd>
+ *   <Text>+</Text>
+ *   <Kbd>C</Kbd>
+ * </View>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Text>Press <Kbd size="sm">Enter</Kbd> to submit</Text>
+ * ```
+ */
+export const Kbd: React.FC<KbdProps> = ({
+  children,
+  size = 'md',
+  className,
+}) => {
+  // Size configurations
+  const sizeClasses = {
+    sm: 'text-xs px-1.5 py-0.5',
+    md: 'text-sm px-2 py-1',
+    lg: 'text-base px-2.5 py-1.5',
+  };
+
+  return (
+    <View
+      className={cn(
+        'items-center justify-center',
+        'bg-gray-100 dark:bg-gray-800',
+        'border border-gray-300 dark:border-gray-600',
+        'rounded',
+        sizeClasses[size],
+        className
+      )}
+      accessibilityRole='text'
+    >
+      <Text
+        className={cn(
+          'font-mono font-semibold',
+          'text-gray-900 dark:text-gray-100',
+          size === 'sm' && 'text-xs',
+          size === 'md' && 'text-sm',
+          size === 'lg' && 'text-base'
+        )}
+      >
+        {children}
+      </Text>
+    </View>
+  );
+};

package/src/ui/Kbd/index.ts

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

package/src/ui/KeyValuePair/KeyValuePair.tsx

@@ -0,0 +1,128 @@
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface KeyValuePairProps {
+  /** Label/key text */
+  label: string;
+  /** Value content */
+  value: React.ReactNode;
+  /** Layout orientation */
+  orientation?: 'horizontal' | 'vertical';
+  /** Alignment for horizontal layout */
+  align?: 'start' | 'center' | 'between';
+  /** Label width (for horizontal layout) */
+  labelWidth?: 'auto' | 'sm' | 'md' | 'lg';
+  /** Text size */
+  size?: 'sm' | 'md' | 'lg';
+  /** Show separator */
+  separator?: boolean;
+  /** Label color variant */
+  labelVariant?: 'default' | 'muted' | 'strong';
+  /** Value color variant */
+  valueVariant?: 'default' | 'muted' | 'strong' | 'primary';
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * KeyValuePair Component
+ *
+ * Displays a label-value pair with flexible layout options.
+ * Commonly used in forms, details pages, and data displays.
+ *
+ * @example
+ * ```tsx
+ * <KeyValuePair label="Email" value="user@example.com" />
+ * <KeyValuePair
+ *   label="Status"
+ *   value="Active"
+ *   orientation="horizontal"
+ *   align="between"
+ * />
+ * ```
+ */
+export const KeyValuePair: React.FC<KeyValuePairProps> = ({
+  label,
+  value,
+  orientation = 'vertical',
+  align = 'start',
+  labelWidth = 'auto',
+  size = 'md',
+  separator = false,
+  labelVariant = 'muted',
+  valueVariant = 'default',
+  className,
+}) => {
+  const sizeClasses = {
+    sm: { label: 'text-sm', value: 'text-sm', gap: 'gap-1' },
+    md: { label: 'text-base', value: 'text-base', gap: 'gap-2' },
+    lg: { label: 'text-lg', value: 'text-lg', gap: 'gap-3' },
+  };
+
+  const labelWidthStyles = {
+    auto: undefined,
+    sm: 96,
+    md: 128,
+    lg: 160,
+  };
+
+  const alignClasses = {
+    start: 'justify-start',
+    center: 'justify-center',
+    between: 'justify-between',
+  };
+
+  const labelVariantClasses = {
+    default: 'text-gray-700 dark:text-gray-300',
+    muted: 'text-gray-600 dark:text-gray-400',
+    strong: 'text-gray-900 dark:text-gray-100 font-semibold',
+  };
+
+  const valueVariantClasses = {
+    default: 'text-gray-900 dark:text-gray-100',
+    muted: 'text-gray-600 dark:text-gray-400',
+    strong: 'text-gray-900 dark:text-gray-100 font-semibold',
+    primary: 'text-blue-600 dark:text-blue-400',
+  };
+
+  const sizeConfig = sizeClasses[size];
+
+  return (
+    <View
+      className={cn(
+        orientation === 'horizontal' ? 'flex-row items-center' : 'flex-col',
+        orientation === 'horizontal' && alignClasses[align],
+        sizeConfig.gap,
+        separator && 'pb-3 mb-3 border-b border-gray-200 dark:border-gray-700',
+        className
+      )}
+    >
+      <Text
+        className={cn(sizeConfig.label, labelVariantClasses[labelVariant])}
+        style={
+          orientation === 'horizontal' && labelWidth !== 'auto'
+            ? { width: labelWidthStyles[labelWidth] }
+            : undefined
+        }
+      >
+        {label}
+      </Text>
+      {typeof value === 'string' || typeof value === 'number' ? (
+        <Text
+          className={cn(
+            sizeConfig.value,
+            valueVariantClasses[valueVariant],
+            orientation === 'horizontal' && 'flex-1'
+          )}
+        >
+          {value}
+        </Text>
+      ) : (
+        <View className={cn(orientation === 'horizontal' && 'flex-1')}>
+          {value}
+        </View>
+      )}
+    </View>
+  );
+};

package/src/ui/KeyValuePair/index.ts

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

package/src/ui/Label/Label.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { Text, TextProps } from 'react-native';
+import { cn } from '../../lib/utils';
+import { textVariants } from '@sudobility/design';
+
+export interface LabelProps extends TextProps {
+  /** Label content */
+  children: React.ReactNode;
+  /** Whether the associated input is required */
+  required?: boolean;
+  /** Whether the label is disabled */
+  disabled?: boolean;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * Label Component
+ *
+ * Text label for form inputs with proper styling.
+ *
+ * @example
+ * ```tsx
+ * <Label>Email Address</Label>
+ * <Input placeholder="Enter your email" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Label required>Password</Label>
+ * <Input secureTextEntry />
+ * ```
+ */
+export const Label = React.forwardRef<Text, LabelProps>(
+  ({ children, required, disabled, className, ...props }, ref) => {
+    return (
+      <Text
+        ref={ref}
+        className={cn(
+          textVariants.label.default(),
+          disabled && 'opacity-70',
+          className
+        )}
+        accessibilityRole='text'
+        {...props}
+      >
+        {children}
+        {required && <Text className='text-red-500 ml-1'>*</Text>}
+      </Text>
+    );
+  }
+);
+
+Label.displayName = 'Label';

package/src/ui/Label/index.ts

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

package/src/ui/Link/Link.tsx

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import { Text, Pressable, Linking } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface LinkProps {
+  /** Link URL */
+  href: string;
+  /** Link content */
+  children: React.ReactNode;
+  /** Variant style */
+  variant?: 'default' | 'primary' | 'secondary' | 'muted' | 'underline';
+  /** Show external icon indicator */
+  showExternalIcon?: boolean;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Additional className */
+  className?: string;
+  /** Press handler (if provided, href is not automatically opened) */
+  onPress?: () => void;
+}
+
+/**
+ * Link Component
+ *
+ * Versatile link component for React Native with external link handling.
+ * Opens URLs using Linking API.
+ *
+ * @example
+ * ```tsx
+ * <Link href="https://example.com">External Site</Link>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Link
+ *   href="https://docs.example.com"
+ *   variant="primary"
+ *   showExternalIcon
+ * >
+ *   Documentation
+ * </Link>
+ * ```
+ */
+export const Link: React.FC<LinkProps> = ({
+  href,
+  children,
+  variant = 'default',
+  showExternalIcon = false,
+  disabled = false,
+  className,
+  onPress,
+}) => {
+  // Auto-detect external links
+  const isExternal = href.startsWith('http://') || href.startsWith('https://');
+
+  // Variant configurations
+  const variantClasses = {
+    default: 'text-blue-600 dark:text-blue-400',
+    primary: 'text-blue-600 dark:text-blue-400 font-medium',
+    secondary: 'text-gray-600 dark:text-gray-400',
+    muted: 'text-gray-500 dark:text-gray-500',
+    underline: 'text-blue-600 dark:text-blue-400 underline',
+  };
+
+  const handlePress = async () => {
+    if (disabled) return;
+
+    if (onPress) {
+      onPress();
+      return;
+    }
+
+    try {
+      const supported = await Linking.canOpenURL(href);
+      if (supported) {
+        await Linking.openURL(href);
+      }
+    } catch (error) {
+      console.error('Failed to open URL:', error);
+    }
+  };
+
+  if (disabled) {
+    return (
+      <Text className={cn('opacity-50', variantClasses[variant], className)}>
+        {children}
+        {showExternalIcon && isExternal && <Text className='text-xs'> ↗</Text>}
+      </Text>
+    );
+  }
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      accessibilityRole='link'
+      accessibilityLabel={typeof children === 'string' ? children : href}
+    >
+      <Text className={cn(variantClasses[variant], className)}>
+        {children}
+        {showExternalIcon && isExternal && <Text className='text-xs'> ↗</Text>}
+      </Text>
+    </Pressable>
+  );
+};

package/src/ui/Link/index.ts

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