@sudobility/components-rn 1.0.1

package/src/ui/Button/Button.shared.ts

@@ -0,0 +1,83 @@
+import { type ReactNode } from 'react';
+
+/**
+ * Base button props shared between web and React Native
+ */
+export interface ButtonBaseProps {
+  variant?:
+    | 'default'
+    | 'primary'
+    | 'secondary'
+    | 'outline'
+    | 'ghost'
+    | 'destructive'
+    | 'destructive-outline'
+    | 'success'
+    | 'link'
+    | 'gradient'
+    | 'gradient-secondary'
+    | 'gradient-success'
+    | 'wallet'
+    | 'connect'
+    | 'disconnect';
+  size?: 'default' | 'sm' | 'lg' | 'icon';
+  animation?:
+    | 'none'
+    | 'hover'
+    | 'lift'
+    | 'scale'
+    | 'glow'
+    | 'shimmer'
+    | 'tap'
+    | 'connect'
+    | 'transaction'
+    | 'disconnect';
+  disabled?: boolean;
+  loading?: boolean;
+  children: ReactNode;
+}
+
+/**
+ * Map size abbreviations to design system variant keys
+ */
+export const mapSizeToVariantKey = (size: string | undefined): string => {
+  if (!size) return 'default';
+  const sizeMap: Record<string, string> = {
+    sm: 'small',
+    lg: 'large',
+    default: 'default',
+  };
+  return sizeMap[size] || size;
+};
+
+/**
+ * Get button variant class from design system
+ */
+export const getButtonVariantClass = (
+  variantName: string,
+  sizeName: string | undefined,
+  v: any
+): string => {
+  if (variantName.startsWith('gradient')) {
+    const gradientType = variantName
+      .replace('gradient-', '')
+      .replace('gradient', 'primary');
+    return v.button.gradient[gradientType]?.() || v.button.primary.default();
+  } else if (['wallet', 'connect', 'disconnect'].includes(variantName)) {
+    return v.button.web3[variantName]?.() || v.button.primary.default();
+  } else {
+    const sizeType = mapSizeToVariantKey(sizeName);
+    return v.button[variantName]?.[sizeType]?.() || v.button.primary.default();
+  }
+};
+
+/**
+ * Shared button state logic
+ */
+export const useButtonState = (
+  loading: boolean | undefined,
+  disabled: boolean | undefined
+) => ({
+  isDisabled: loading || disabled || false,
+  showSpinner: loading || false,
+});

package/src/ui/Button/Button.tsx

@@ -0,0 +1,139 @@
+import * as React from 'react';
+import {
+  Pressable,
+  Text,
+  ActivityIndicator,
+  type PressableProps,
+  type GestureResponderEvent,
+} from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+import { variants as v } from '@sudobility/design';
+import {
+  ButtonBaseProps,
+  getButtonVariantClass,
+  useButtonState,
+} from './Button.shared';
+
+const buttonVariants = cva(
+  'min-h-[44px] items-center justify-center flex-row',
+  {
+    variants: {
+      variant: {
+        default: '',
+        primary: '',
+        secondary: '',
+        outline: '',
+        ghost: '',
+        destructive: '',
+        'destructive-outline': '',
+        success: '',
+        link: '',
+        gradient: '',
+        'gradient-secondary': '',
+        'gradient-success': '',
+        wallet: '',
+        connect: '',
+        disconnect: '',
+      },
+      size: {
+        default: '',
+        sm: 'h-8 px-3',
+        lg: 'h-12 px-6',
+        icon: 'h-10 w-10 p-0',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export interface ButtonProps
+  extends ButtonBaseProps,
+    Omit<PressableProps, 'children' | 'disabled'>,
+    Omit<VariantProps<typeof buttonVariants>, 'variant' | 'size'> {
+  /** Callback when button is pressed */
+  onPress?: (event: GestureResponderEvent) => void;
+  /** Accessibility label for screen readers */
+  accessibilityLabel?: string;
+  /** Additional text styles for the button text */
+  textClassName?: string;
+}
+
+/**
+ * Button component for React Native
+ *
+ * @example
+ * ```tsx
+ * <Button variant="primary" onPress={() => console.log('pressed')}>
+ *   Press me
+ * </Button>
+ * ```
+ */
+export const Button = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  ButtonProps
+>(
+  (
+    {
+      className,
+      textClassName,
+      variant = 'default',
+      size = 'default',
+      disabled,
+      loading,
+      onPress,
+      accessibilityLabel,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const { isDisabled, showSpinner } = useButtonState(loading, disabled);
+
+    const variantName = variant || 'default';
+    const sizeName =
+      size && size !== 'default' && size !== 'icon' ? size : undefined;
+
+    const designSystemClass = getButtonVariantClass(variantName, sizeName, v);
+
+    return (
+      <Pressable
+        ref={ref}
+        className={cn(
+          buttonVariants({ variant, size }),
+          designSystemClass,
+          isDisabled && 'opacity-50',
+          className
+        )}
+        disabled={isDisabled}
+        onPress={onPress}
+        accessibilityRole='button'
+        accessibilityLabel={accessibilityLabel}
+        accessibilityState={{ disabled: isDisabled }}
+        {...props}
+      >
+        {showSpinner && (
+          <ActivityIndicator
+            size='small'
+            color='currentColor'
+            className='mr-2'
+          />
+        )}
+        {typeof children === 'string' ? (
+          <Text className={cn('text-center font-medium', textClassName)}>
+            {children}
+          </Text>
+        ) : (
+          children
+        )}
+      </Pressable>
+    );
+  }
+);
+
+Button.displayName = 'Button';
+
+export { buttonVariants };

package/src/ui/Button/index.ts

@@ -0,0 +1,2 @@
+export { Button, buttonVariants, type ButtonProps } from './Button';
+export * from './Button.shared';

package/src/ui/CTASection/CTASection.tsx

@@ -0,0 +1,146 @@
+import * as React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface CTAButton {
+  /** Button label */
+  label: string;
+  /** Press handler */
+  onPress: () => void;
+  /** Button variant */
+  variant?: 'primary' | 'secondary' | 'outline';
+}
+
+export interface CTASectionProps {
+  /** Section title */
+  title: string;
+  /** Section description */
+  description: string;
+  /** Primary CTA button */
+  primaryButton: CTAButton;
+  /** Secondary CTA button */
+  secondaryButton?: CTAButton;
+  /** Gradient preset */
+  gradient?: 'blue-purple' | 'green-blue' | 'orange-red' | 'purple-pink';
+  /** Text color theme */
+  textColor?: 'light' | 'dark';
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg';
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * CTASection Component
+ *
+ * Call-to-action section with gradient background and buttons.
+ *
+ * @example
+ * ```tsx
+ * <CTASection
+ *   title="Ready to get started?"
+ *   description="Join thousands of users today."
+ *   primaryButton={{ label: 'Sign Up', onPress: handleSignUp }}
+ *   secondaryButton={{ label: 'Learn More', onPress: handleLearnMore }}
+ * />
+ * ```
+ */
+export const CTASection: React.FC<CTASectionProps> = ({
+  title,
+  description,
+  primaryButton,
+  secondaryButton,
+  gradient = 'blue-purple',
+  textColor = 'light',
+  size = 'lg',
+  className,
+}) => {
+  const gradientClasses = {
+    'blue-purple': 'bg-blue-600 dark:bg-blue-700',
+    'green-blue': 'bg-green-600 dark:bg-green-700',
+    'orange-red': 'bg-orange-600 dark:bg-orange-700',
+    'purple-pink': 'bg-purple-600 dark:bg-purple-700',
+  };
+
+  const sizeClasses = {
+    sm: 'py-8 px-4',
+    md: 'py-12 px-6',
+    lg: 'py-16 px-8',
+  };
+
+  const titleSizeClasses = {
+    sm: 'text-2xl',
+    md: 'text-3xl',
+    lg: 'text-4xl',
+  };
+
+  const descriptionSizeClasses = {
+    sm: 'text-base',
+    md: 'text-lg',
+    lg: 'text-xl',
+  };
+
+  const textColorClass = textColor === 'light' ? 'text-white' : 'text-gray-900';
+
+  const renderButton = (button: CTAButton, isPrimary: boolean) => (
+    <Pressable
+      onPress={button.onPress}
+      className={cn(
+        'px-6 py-3 rounded-lg',
+        isPrimary ? 'bg-white' : 'bg-white/20 border border-white/30'
+      )}
+      accessibilityRole='button'
+      accessibilityLabel={button.label}
+    >
+      <Text
+        className={cn(
+          'text-base font-semibold text-center',
+          isPrimary ? 'text-blue-600' : 'text-white'
+        )}
+      >
+        {button.label}
+      </Text>
+    </Pressable>
+  );
+
+  return (
+    <View
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        gradientClasses[gradient],
+        sizeClasses[size],
+        className
+      )}
+    >
+      <View className='items-center'>
+        {/* Title */}
+        <Text
+          className={cn(
+            'font-bold mb-4 text-center',
+            titleSizeClasses[size],
+            textColorClass
+          )}
+        >
+          {title}
+        </Text>
+
+        {/* Description */}
+        <Text
+          className={cn(
+            'mb-8 text-center opacity-90 max-w-lg',
+            descriptionSizeClasses[size],
+            textColorClass
+          )}
+        >
+          {description}
+        </Text>
+
+        {/* Buttons */}
+        <View className='flex-row gap-4'>
+          {renderButton(primaryButton, true)}
+          {secondaryButton && renderButton(secondaryButton, false)}
+        </View>
+      </View>
+    </View>
+  );
+};

package/src/ui/CTASection/index.ts

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

package/src/ui/Calendar/Calendar.tsx

@@ -0,0 +1,242 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface CalendarProps {
+  /** Selected date */
+  value?: Date;
+  /** Change handler */
+  onChange: (date: Date) => void;
+  /** Minimum selectable date */
+  minDate?: Date;
+  /** Maximum selectable date */
+  maxDate?: Date;
+  /** Disabled dates */
+  disabledDates?: Date[];
+  /** Show outside days */
+  showOutsideDays?: boolean;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * Calendar Component
+ *
+ * Interactive calendar for date selection.
+ * Supports min/max dates and disabled dates.
+ *
+ * @example
+ * ```tsx
+ * <Calendar
+ *   value={selectedDate}
+ *   onChange={setSelectedDate}
+ *   minDate={new Date()}
+ * />
+ * ```
+ */
+export const Calendar: React.FC<CalendarProps> = ({
+  value,
+  onChange,
+  minDate,
+  maxDate,
+  disabledDates = [],
+  showOutsideDays = true,
+  className,
+}) => {
+  const [currentMonth, setCurrentMonth] = useState(value || new Date());
+
+  // Get days in month
+  const getDaysInMonth = (date: Date) => {
+    const year = date.getFullYear();
+    const month = date.getMonth();
+    return new Date(year, month + 1, 0).getDate();
+  };
+
+  // Get first day of month (0 = Sunday, 6 = Saturday)
+  const getFirstDayOfMonth = (date: Date) => {
+    const year = date.getFullYear();
+    const month = date.getMonth();
+    return new Date(year, month, 1).getDay();
+  };
+
+  // Check if date is same day
+  const isSameDay = (date1: Date, date2: Date) => {
+    return (
+      date1.getFullYear() === date2.getFullYear() &&
+      date1.getMonth() === date2.getMonth() &&
+      date1.getDate() === date2.getDate()
+    );
+  };
+
+  // Check if date is disabled
+  const isDateDisabled = (date: Date) => {
+    if (minDate && date < minDate) return true;
+    if (maxDate && date > maxDate) return true;
+    return disabledDates.some(disabledDate => isSameDay(date, disabledDate));
+  };
+
+  // Navigate months
+  const goToPreviousMonth = () => {
+    setCurrentMonth(
+      new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1)
+    );
+  };
+
+  const goToNextMonth = () => {
+    setCurrentMonth(
+      new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1)
+    );
+  };
+
+  // Generate calendar days
+  const generateCalendarDays = () => {
+    const year = currentMonth.getFullYear();
+    const month = currentMonth.getMonth();
+    const daysInMonth = getDaysInMonth(currentMonth);
+    const firstDay = getFirstDayOfMonth(currentMonth);
+    const days: (Date | null)[] = [];
+
+    // Add previous month days
+    if (showOutsideDays) {
+      const prevMonthDays = getDaysInMonth(new Date(year, month - 1));
+      for (let i = firstDay - 1; i >= 0; i--) {
+        days.push(new Date(year, month - 1, prevMonthDays - i));
+      }
+    } else {
+      for (let i = 0; i < firstDay; i++) {
+        days.push(null);
+      }
+    }
+
+    // Add current month days
+    for (let day = 1; day <= daysInMonth; day++) {
+      days.push(new Date(year, month, day));
+    }
+
+    // Add next month days to fill grid
+    if (showOutsideDays) {
+      const remainingDays = 42 - days.length; // 6 rows * 7 days
+      for (let day = 1; day <= remainingDays; day++) {
+        days.push(new Date(year, month + 1, day));
+      }
+    }
+
+    return days;
+  };
+
+  const calendarDays = generateCalendarDays();
+  const weekDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+
+  const handleDayPress = (date: Date | null) => {
+    if (!date || isDateDisabled(date)) return;
+    onChange(date);
+  };
+
+  const monthYear = currentMonth.toLocaleDateString('en-US', {
+    month: 'long',
+    year: 'numeric',
+  });
+
+  // Split days into weeks for grid layout
+  const weeks: (Date | null)[][] = [];
+  for (let i = 0; i < calendarDays.length; i += 7) {
+    weeks.push(calendarDays.slice(i, i + 7));
+  }
+
+  return (
+    <View className={cn('bg-white dark:bg-gray-900 rounded-lg p-4', className)}>
+      {/* Header */}
+      <View className='flex-row items-center justify-between mb-4'>
+        <Pressable
+          onPress={goToPreviousMonth}
+          className='p-2 active:bg-gray-100 dark:active:bg-gray-800 rounded-md'
+          accessibilityRole='button'
+          accessibilityLabel='Previous month'
+        >
+          <Text className='text-lg text-gray-700 dark:text-gray-300'>‹</Text>
+        </Pressable>
+
+        <Text className='text-base font-semibold text-gray-900 dark:text-white'>
+          {monthYear}
+        </Text>
+
+        <Pressable
+          onPress={goToNextMonth}
+          className='p-2 active:bg-gray-100 dark:active:bg-gray-800 rounded-md'
+          accessibilityRole='button'
+          accessibilityLabel='Next month'
+        >
+          <Text className='text-lg text-gray-700 dark:text-gray-300'>›</Text>
+        </Pressable>
+      </View>
+
+      {/* Week days header */}
+      <View className='flex-row mb-2'>
+        {weekDays.map(day => (
+          <View key={day} className='flex-1 items-center py-2'>
+            <Text className='text-xs font-medium text-gray-600 dark:text-gray-400'>
+              {day}
+            </Text>
+          </View>
+        ))}
+      </View>
+
+      {/* Calendar grid */}
+      {weeks.map((week, weekIndex) => (
+        <View key={weekIndex} className='flex-row'>
+          {week.map((date, dayIndex) => {
+            if (!date) {
+              return (
+                <View
+                  key={`empty-${dayIndex}`}
+                  className='flex-1 aspect-square'
+                />
+              );
+            }
+
+            const isCurrentMonth = date.getMonth() === currentMonth.getMonth();
+            const isSelected = value && isSameDay(date, value);
+            const isToday = isSameDay(date, new Date());
+            const isDisabled = isDateDisabled(date);
+
+            return (
+              <Pressable
+                key={`${date.getTime()}-${dayIndex}`}
+                onPress={() => handleDayPress(date)}
+                disabled={isDisabled}
+                className={cn(
+                  'flex-1 aspect-square items-center justify-center rounded-md m-0.5',
+                  !isDisabled && 'active:bg-gray-100 dark:active:bg-gray-800',
+                  isDisabled && 'opacity-40',
+                  isSelected && 'bg-blue-600 dark:bg-blue-500',
+                  isToday &&
+                    !isSelected &&
+                    'border-2 border-blue-600 dark:border-blue-400'
+                )}
+                accessibilityRole='button'
+                accessibilityLabel={date.toLocaleDateString()}
+                accessibilityState={{
+                  selected: isSelected,
+                  disabled: isDisabled,
+                }}
+              >
+                <Text
+                  className={cn(
+                    'text-sm',
+                    isCurrentMonth
+                      ? 'text-gray-900 dark:text-white'
+                      : 'text-gray-400 dark:text-gray-600',
+                    isSelected && 'text-white font-semibold'
+                  )}
+                >
+                  {date.getDate()}
+                </Text>
+              </Pressable>
+            );
+          })}
+        </View>
+      ))}
+    </View>
+  );
+};

package/src/ui/Calendar/index.ts

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