@sudobility/components-rn 1.0.1

package/src/ui/ProgressCircle/ProgressCircle.tsx

@@ -0,0 +1,136 @@
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface ProgressCircleProps {
+  /** Progress value (0-100) */
+  value: number;
+  /** Circle size in pixels */
+  size?: number;
+  /** Stroke width */
+  strokeWidth?: number;
+  /** Show percentage text */
+  showValue?: boolean;
+  /** Custom label */
+  label?: string;
+  /** Color variant */
+  variant?: 'primary' | 'success' | 'warning' | 'danger';
+  /** Custom color (hex) */
+  color?: string;
+  /** Background track color (hex) */
+  trackColor?: string;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * ProgressCircle Component
+ *
+ * Circular progress indicator with customizable size and colors.
+ * Displays percentage or custom label in the center.
+ * Uses View-based approach for React Native compatibility.
+ *
+ * @example
+ * ```tsx
+ * <ProgressCircle
+ *   value={75}
+ *   size={120}
+ *   showValue
+ *   variant="success"
+ * />
+ * ```
+ */
+export const ProgressCircle: React.FC<ProgressCircleProps> = ({
+  value,
+  size = 100,
+  strokeWidth = 8,
+  showValue = true,
+  label,
+  variant = 'primary',
+  color,
+  trackColor = '#e5e7eb',
+  className,
+}) => {
+  // Clamp value between 0 and 100
+  const progress = Math.min(100, Math.max(0, value));
+
+  // Color variants
+  const variantColors = {
+    primary: '#2563eb',
+    success: '#16a34a',
+    warning: '#ca8a04',
+    danger: '#dc2626',
+  };
+
+  const progressColor = color || variantColors[variant];
+  const innerSize = size - strokeWidth * 2;
+
+  return (
+    <View
+      className={cn('items-center justify-center', className)}
+      style={{ width: size, height: size }}
+    >
+      {/* Background circle */}
+      <View
+        style={{
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          borderWidth: strokeWidth,
+          borderColor: trackColor,
+          position: 'absolute',
+        }}
+      />
+
+      {/* Progress indicator - simplified arc */}
+      <View
+        style={{
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          borderWidth: strokeWidth,
+          borderColor: 'transparent',
+          borderTopColor: progressColor,
+          borderRightColor: progress > 25 ? progressColor : 'transparent',
+          borderBottomColor: progress > 50 ? progressColor : 'transparent',
+          borderLeftColor: progress > 75 ? progressColor : 'transparent',
+          position: 'absolute',
+          transform: [{ rotate: '-90deg' }],
+        }}
+      />
+
+      {/* Center content */}
+      <View
+        style={{
+          width: innerSize,
+          height: innerSize,
+          borderRadius: innerSize / 2,
+          backgroundColor: 'transparent',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        {(showValue || label) && (
+          <View className='items-center justify-center'>
+            {showValue && !label && (
+              <Text
+                className='font-bold text-gray-900 dark:text-white'
+                style={{ fontSize: size * 0.2 }}
+              >
+                {Math.round(progress)}%
+              </Text>
+            )}
+            {label && (
+              <Text
+                className='font-medium text-gray-900 dark:text-white text-center px-2'
+                style={{ fontSize: size * 0.15 }}
+              >
+                {label}
+              </Text>
+            )}
+          </View>
+        )}
+      </View>
+    </View>
+  );
+};

package/src/ui/ProgressCircle/index.ts

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

package/src/ui/PromotionalBanner/PromotionalBanner.tsx

@@ -0,0 +1,113 @@
+import * as React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface PromotionalBannerProps {
+  /** Banner title */
+  title: string;
+  /** Optional subtitle */
+  subtitle?: string;
+  /** Button text */
+  buttonText: string;
+  /** Button press handler */
+  onButtonPress: () => void;
+  /** Visual variant */
+  variant?: 'default' | 'prominent';
+  /** Badge text */
+  badgeText?: string;
+  /** Icon element (optional) */
+  icon?: React.ReactNode;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * PromotionalBanner Component
+ *
+ * Banner for promotions, announcements, or CTAs.
+ *
+ * @example
+ * ```tsx
+ * <PromotionalBanner
+ *   title="Get Started Free"
+ *   subtitle="No credit card required"
+ *   buttonText="Sign Up"
+ *   onButtonPress={handleSignUp}
+ *   badgeText="FREE"
+ * />
+ * ```
+ */
+export const PromotionalBanner: React.FC<PromotionalBannerProps> = ({
+  title,
+  subtitle,
+  buttonText,
+  onButtonPress,
+  variant = 'default',
+  badgeText = 'FREE',
+  icon,
+  className,
+}) => {
+  const isProminent = variant === 'prominent';
+
+  return (
+    <View
+      className={cn(
+        'bg-green-50 dark:bg-green-900/20',
+        'border-b border-green-200 dark:border-green-700',
+        isProminent && 'border-b-2',
+        className
+      )}
+    >
+      <View className='px-4 py-4'>
+        <View className='flex-row items-center justify-between gap-4 flex-wrap'>
+          {/* Left side: Badge + Title */}
+          <View className='flex-row items-center flex-1'>
+            {/* Badge */}
+            <View className='bg-green-500 px-3 py-1 rounded-full mr-3'>
+              <Text className='text-white text-xs font-bold'>{badgeText}</Text>
+            </View>
+
+            {/* Title & Subtitle */}
+            <View className='flex-1'>
+              <Text
+                className={cn(
+                  'text-green-800 dark:text-green-200 font-semibold',
+                  isProminent && 'text-lg'
+                )}
+              >
+                {title}
+              </Text>
+              {subtitle && (
+                <Text className='text-green-700 dark:text-green-300 text-sm'>
+                  {subtitle}
+                </Text>
+              )}
+            </View>
+          </View>
+
+          {/* CTA Button */}
+          <Pressable
+            onPress={onButtonPress}
+            className={cn(
+              'bg-green-600 dark:bg-green-700 rounded-lg',
+              'flex-row items-center',
+              isProminent ? 'px-6 py-3' : 'px-4 py-2'
+            )}
+            accessibilityRole='button'
+            accessibilityLabel={buttonText}
+          >
+            {icon && <View className='mr-2'>{icon}</View>}
+            <Text
+              className={cn(
+                'text-white font-bold',
+                isProminent ? 'text-base' : 'text-sm'
+              )}
+            >
+              {buttonText}
+            </Text>
+          </Pressable>
+        </View>
+      </View>
+    </View>
+  );
+};

package/src/ui/PromotionalBanner/index.ts

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

package/src/ui/QuickActions/QuickActions.tsx

@@ -0,0 +1,132 @@
+import * as React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface QuickAction {
+  /** Unique identifier */
+  id: string;
+  /** Button label */
+  label: string;
+  /** Icon component or element */
+  icon?: React.ReactNode;
+  /** Press handler */
+  onPress: () => void;
+  /** Button variant */
+  variant?: 'default' | 'primary' | 'success' | 'warning' | 'danger';
+  /** Whether button is disabled */
+  disabled?: boolean;
+}
+
+export interface QuickActionsProps {
+  /** Actions to display */
+  actions: QuickAction[];
+  /** Layout orientation */
+  orientation?: 'horizontal' | 'vertical' | 'grid';
+  /** Grid columns (when orientation is grid) */
+  columns?: number;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * QuickActions Component
+ *
+ * Quick action buttons for dashboard.
+ * Supports multiple layouts and variants.
+ *
+ * @example
+ * ```tsx
+ * <QuickActions
+ *   actions={[
+ *     { id: '1', label: 'New Project', icon: <PlusIcon />, onPress: () => {}, variant: 'primary' },
+ *     { id: '2', label: 'Upload File', icon: <UploadIcon />, onPress: () => {} },
+ *     { id: '3', label: 'Export Data', icon: <DownloadIcon />, onPress: () => {} }
+ *   ]}
+ *   orientation="grid"
+ *   columns={3}
+ * />
+ * ```
+ */
+export const QuickActions: React.FC<QuickActionsProps> = ({
+  actions,
+  orientation = 'horizontal',
+  columns = 3,
+  className,
+}) => {
+  const variantStyles = {
+    default: {
+      bg: 'bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700',
+      bgActive: 'active:bg-gray-50 dark:active:bg-gray-800',
+      text: 'text-gray-900 dark:text-white',
+    },
+    primary: {
+      bg: 'bg-blue-500 border-blue-500',
+      bgActive: 'active:bg-blue-600',
+      text: 'text-white',
+    },
+    success: {
+      bg: 'bg-green-500 border-green-500',
+      bgActive: 'active:bg-green-600',
+      text: 'text-white',
+    },
+    warning: {
+      bg: 'bg-yellow-500 border-yellow-500',
+      bgActive: 'active:bg-yellow-600',
+      text: 'text-white',
+    },
+    danger: {
+      bg: 'bg-red-500 border-red-500',
+      bgActive: 'active:bg-red-600',
+      text: 'text-white',
+    },
+  };
+
+  const layoutClasses = {
+    horizontal: 'flex-row flex-wrap gap-2',
+    vertical: 'flex-col gap-2',
+    grid: 'flex-row flex-wrap gap-2',
+  };
+
+  // Calculate item flex for grid layout
+  const getGridFlex = () => {
+    if (orientation !== 'grid') return undefined;
+    return 1 / columns;
+  };
+
+  return (
+    <View className={cn(layoutClasses[orientation], className)}>
+      {actions.map(action => {
+        const variant = action.variant || 'default';
+        const styles = variantStyles[variant];
+
+        return (
+          <Pressable
+            key={action.id}
+            onPress={action.onPress}
+            disabled={action.disabled}
+            className={cn(
+              'flex-row items-center justify-center gap-2 px-4 py-3 rounded-lg border',
+              styles.bg,
+              !action.disabled && styles.bgActive,
+              action.disabled && 'opacity-50',
+              orientation === 'vertical' && 'w-full'
+            )}
+            style={
+              orientation === 'grid'
+                ? { flex: getGridFlex(), minWidth: 100 }
+                : undefined
+            }
+            accessibilityRole='button'
+            accessibilityLabel={action.label}
+            accessibilityState={{ disabled: action.disabled }}
+          >
+            {action.icon && <View className='w-5 h-5'>{action.icon}</View>}
+            <Text className={cn('font-medium', styles.text)}>
+              {action.label}
+            </Text>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+};

package/src/ui/QuickActions/index.ts

@@ -0,0 +1,2 @@
+export { QuickActions } from './QuickActions';
+export type { QuickActionsProps, QuickAction } from './QuickActions';

package/src/ui/ScrollArea/ScrollArea.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { ScrollView, View } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface ScrollAreaProps {
+  /** Scrollable content */
+  children: React.ReactNode;
+  /** Maximum height */
+  maxHeight?: number;
+  /** Hide scrollbar */
+  hideScrollbar?: boolean;
+  /** Scroll direction */
+  direction?: 'vertical' | 'horizontal' | 'both';
+  /** Show scroll indicators */
+  showsIndicator?: boolean;
+  /** Additional className */
+  className?: string;
+  /** Content container className */
+  contentClassName?: string;
+}
+
+/**
+ * ScrollArea Component
+ *
+ * Container with scrollable content and optional scroll indicators.
+ * Provides consistent scrollable areas across the application.
+ *
+ * @example
+ * ```tsx
+ * <ScrollArea maxHeight={400}>
+ *   <View>Long content...</View>
+ * </ScrollArea>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <ScrollArea direction="horizontal" hideScrollbar>
+ *   <View className="w-[2000px]">Wide content</View>
+ * </ScrollArea>
+ * ```
+ */
+export const ScrollArea: React.FC<ScrollAreaProps> = ({
+  children,
+  maxHeight,
+  hideScrollbar = false,
+  direction = 'vertical',
+  showsIndicator = true,
+  className,
+  contentClassName,
+}) => {
+  const isVertical = direction === 'vertical' || direction === 'both';
+  const isHorizontal = direction === 'horizontal' || direction === 'both';
+
+  return (
+    <View
+      className={cn('relative', className)}
+      style={maxHeight ? { maxHeight } : undefined}
+    >
+      <ScrollView
+        horizontal={direction === 'horizontal'}
+        showsVerticalScrollIndicator={
+          isVertical && showsIndicator && !hideScrollbar
+        }
+        showsHorizontalScrollIndicator={
+          isHorizontal && showsIndicator && !hideScrollbar
+        }
+        scrollEnabled
+        nestedScrollEnabled
+        contentContainerStyle={
+          direction === 'horizontal' ? { flexDirection: 'row' } : undefined
+        }
+      >
+        <View className={contentClassName}>{children}</View>
+      </ScrollView>
+    </View>
+  );
+};

package/src/ui/ScrollArea/index.ts

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