@sudobility/components-rn 1.0.1

package/src/ui/SplitPane/SplitPane.tsx

@@ -0,0 +1,204 @@
+import * as React from 'react';
+import {
+  View,
+  PanResponder,
+  GestureResponderEvent,
+  PanResponderGestureState,
+  LayoutChangeEvent,
+} from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface SplitPaneProps {
+  /** Left/Top panel content */
+  left: React.ReactNode;
+  /** Right/Bottom panel content */
+  right: React.ReactNode;
+  /** Split direction */
+  direction?: 'horizontal' | 'vertical';
+  /** Initial split position (0-1) */
+  initialSplit?: number;
+  /** Controlled split position */
+  split?: number;
+  /** Split change handler */
+  onSplitChange?: (split: number) => void;
+  /** Minimum left/top panel size (pixels) */
+  minLeftSize?: number;
+  /** Minimum right/bottom panel size (pixels) */
+  minRightSize?: number;
+  /** Divider size in pixels */
+  dividerSize?: number;
+  /** Allow resize */
+  resizable?: boolean;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * SplitPane Component
+ *
+ * Resizable split panel layout with draggable divider.
+ * Supports horizontal and vertical splits.
+ *
+ * @example
+ * ```tsx
+ * <SplitPane
+ *   left={<Sidebar />}
+ *   right={<MainContent />}
+ *   direction="horizontal"
+ *   initialSplit={0.3}
+ *   minLeftSize={200}
+ *   minRightSize={400}
+ * />
+ * ```
+ */
+export const SplitPane: React.FC<SplitPaneProps> = ({
+  left,
+  right,
+  direction = 'horizontal',
+  initialSplit = 0.5,
+  split: controlledSplit,
+  onSplitChange,
+  minLeftSize = 100,
+  minRightSize = 100,
+  dividerSize = 12,
+  resizable = true,
+  className,
+}) => {
+  const [internalSplit, setInternalSplit] = React.useState(initialSplit);
+  const [isDragging, setIsDragging] = React.useState(false);
+  const [containerSize, setContainerSize] = React.useState({
+    width: 0,
+    height: 0,
+  });
+
+  const split = controlledSplit !== undefined ? controlledSplit : internalSplit;
+  const isHorizontal = direction === 'horizontal';
+
+  // Handle layout change to get container dimensions
+  const handleLayout = (event: LayoutChangeEvent) => {
+    const { width, height } = event.nativeEvent.layout;
+    setContainerSize({ width, height });
+  };
+
+  // Calculate new split value from gesture
+  const calculateSplit = React.useCallback(
+    (gestureState: PanResponderGestureState): number => {
+      const totalSize = isHorizontal
+        ? containerSize.width
+        : containerSize.height;
+      if (totalSize === 0) return split;
+
+      const delta = isHorizontal ? gestureState.dx : gestureState.dy;
+      const currentPosition = split * totalSize + delta;
+      let newSplit = currentPosition / totalSize;
+
+      // Clamp between 0 and 1
+      newSplit = Math.max(0, Math.min(1, newSplit));
+
+      // Apply min sizes
+      const minLeftRatio = minLeftSize / totalSize;
+      const maxLeftRatio = 1 - minRightSize / totalSize;
+
+      newSplit = Math.max(minLeftRatio, Math.min(maxLeftRatio, newSplit));
+
+      return newSplit;
+    },
+    [isHorizontal, containerSize, split, minLeftSize, minRightSize]
+  );
+
+  // Create PanResponder for gesture handling
+  const panResponder = React.useMemo(
+    () =>
+      PanResponder.create({
+        onStartShouldSetPanResponder: () => resizable,
+        onMoveShouldSetPanResponder: () => resizable,
+        onPanResponderGrant: () => {
+          setIsDragging(true);
+        },
+        onPanResponderMove: (
+          _event: GestureResponderEvent,
+          gestureState: PanResponderGestureState
+        ) => {
+          const newSplit = calculateSplit(gestureState);
+
+          if (controlledSplit !== undefined && onSplitChange) {
+            onSplitChange(newSplit);
+          } else {
+            setInternalSplit(newSplit);
+          }
+        },
+        onPanResponderRelease: () => {
+          setIsDragging(false);
+        },
+        onPanResponderTerminate: () => {
+          setIsDragging(false);
+        },
+      }),
+    [resizable, controlledSplit, onSplitChange, calculateSplit]
+  );
+
+  // Calculate panel sizes
+  const totalSize = isHorizontal ? containerSize.width : containerSize.height;
+  const leftSize = Math.max(0, split * totalSize - dividerSize / 2);
+  const rightSize = Math.max(0, (1 - split) * totalSize - dividerSize / 2);
+
+  return (
+    <View
+      onLayout={handleLayout}
+      className={cn(
+        'flex-1',
+        isHorizontal ? 'flex-row' : 'flex-col',
+        className
+      )}
+    >
+      {/* Left/Top panel */}
+      <View
+        className='overflow-hidden'
+        style={{
+          [isHorizontal ? 'width' : 'height']: leftSize,
+        }}
+      >
+        {left}
+      </View>
+
+      {/* Divider */}
+      <View
+        {...(resizable ? panResponder.panHandlers : {})}
+        className={cn(
+          'items-center justify-center',
+          'bg-gray-200 dark:bg-gray-700',
+          isDragging && 'bg-blue-500 dark:bg-blue-400',
+          resizable && 'active:bg-blue-500 dark:active:bg-blue-400'
+        )}
+        style={{
+          [isHorizontal ? 'width' : 'height']: dividerSize,
+        }}
+      >
+        {/* Divider handle indicator */}
+        {resizable && (
+          <View
+            className={cn(
+              'rounded-full',
+              'bg-gray-400 dark:bg-gray-500',
+              isDragging && 'bg-white'
+            )}
+            style={{
+              [isHorizontal ? 'width' : 'height']: 4,
+              [isHorizontal ? 'height' : 'width']: 40,
+            }}
+          />
+        )}
+      </View>
+
+      {/* Right/Bottom panel */}
+      <View
+        className='overflow-hidden flex-1'
+        style={{
+          [isHorizontal ? 'width' : 'height']: rightSize,
+        }}
+      >
+        {right}
+      </View>
+    </View>
+  );
+};

package/src/ui/SplitPane/index.ts

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

package/src/ui/Stack/Stack.tsx

@@ -0,0 +1,154 @@
+import * as React from 'react';
+import { View, ViewProps } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface StackProps extends ViewProps {
+  /** Stack content */
+  children: React.ReactNode;
+  /** Stack direction */
+  direction?: 'vertical' | 'horizontal';
+  /** Spacing between items */
+  spacing?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  /** Align items */
+  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+  /** Justify content */
+  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+  /** Wrap items */
+  wrap?: boolean;
+  /** Full width/height */
+  full?: boolean;
+  /** Divider between items */
+  divider?: boolean;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * Stack Component
+ *
+ * Flexbox-based layout component for arranging children vertically or horizontally
+ * with consistent spacing. Supports alignment, wrapping, and dividers.
+ *
+ * @example
+ * ```tsx
+ * <Stack spacing="md">
+ *   <View><Text>Item 1</Text></View>
+ *   <View><Text>Item 2</Text></View>
+ *   <View><Text>Item 3</Text></View>
+ * </Stack>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Stack
+ *   direction="horizontal"
+ *   spacing="lg"
+ *   align="center"
+ *   justify="between"
+ * >
+ *   <Button>Cancel</Button>
+ *   <Button>Save</Button>
+ * </Stack>
+ * ```
+ */
+export const Stack: React.FC<StackProps> = ({
+  children,
+  direction = 'vertical',
+  spacing = 'md',
+  align = 'stretch',
+  justify = 'start',
+  wrap = false,
+  full = false,
+  divider = false,
+  className,
+  ...viewProps
+}) => {
+  const isVertical = direction === 'vertical';
+
+  // Gap classes (NativeWind supports gap)
+  const gapClasses: Record<string, Record<string, string>> = {
+    vertical: {
+      none: '',
+      xs: 'gap-1',
+      sm: 'gap-2',
+      md: 'gap-4',
+      lg: 'gap-6',
+      xl: 'gap-8',
+      '2xl': 'gap-12',
+    },
+    horizontal: {
+      none: '',
+      xs: 'gap-1',
+      sm: 'gap-2',
+      md: 'gap-4',
+      lg: 'gap-6',
+      xl: 'gap-8',
+      '2xl': 'gap-12',
+    },
+  };
+
+  // Align items configurations
+  const alignClasses: Record<string, string> = {
+    start: 'items-start',
+    center: 'items-center',
+    end: 'items-end',
+    stretch: 'items-stretch',
+    baseline: 'items-baseline',
+  };
+
+  // Justify content configurations
+  const justifyClasses: Record<string, string> = {
+    start: 'justify-start',
+    center: 'justify-center',
+    end: 'justify-end',
+    between: 'justify-between',
+    around: 'justify-around',
+    evenly: 'justify-evenly',
+  };
+
+  return (
+    <View
+      className={cn(
+        'flex',
+        isVertical ? 'flex-col' : 'flex-row',
+        gapClasses[direction][spacing],
+        alignClasses[align],
+        justifyClasses[justify],
+        wrap && 'flex-wrap',
+        full && (isVertical ? 'h-full' : 'w-full'),
+        className
+      )}
+      {...viewProps}
+    >
+      {divider
+        ? React.Children.map(children, (child, index) => (
+            <React.Fragment key={index}>
+              {child}
+              {index < React.Children.count(children) - 1 && (
+                <View
+                  className={cn(
+                    'bg-gray-200 dark:bg-gray-700',
+                    isVertical ? 'h-px w-full' : 'w-px h-full'
+                  )}
+                />
+              )}
+            </React.Fragment>
+          ))
+        : children}
+    </View>
+  );
+};
+
+/**
+ * VStack - Vertical Stack (alias for Stack with direction="vertical")
+ */
+export const VStack: React.FC<Omit<StackProps, 'direction'>> = props => (
+  <Stack direction='vertical' {...props} />
+);
+
+/**
+ * HStack - Horizontal Stack (alias for Stack with direction="horizontal")
+ */
+export const HStack: React.FC<Omit<StackProps, 'direction'>> = props => (
+  <Stack direction='horizontal' {...props} />
+);

package/src/ui/Stack/index.ts

@@ -0,0 +1,2 @@
+export { Stack, VStack, HStack } from './Stack';
+export type { StackProps } from './Stack';

package/src/ui/StandardPageLayout/StandardPageLayout.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface StandardPageLayoutProps {
+  /** Page content */
+  children: React.ReactNode;
+  /** Background className */
+  backgroundClassName?: string;
+  /** Content className */
+  contentClassName?: string;
+}
+
+/**
+ * StandardPageLayout Component
+ *
+ * A simple page layout wrapper that applies consistent background
+ * and content styling.
+ *
+ * @example
+ * ```tsx
+ * <StandardPageLayout
+ *   backgroundClassName="bg-gray-100 dark:bg-gray-900"
+ *   contentClassName="p-4"
+ * >
+ *   <YourPageContent />
+ * </StandardPageLayout>
+ * ```
+ */
+export const StandardPageLayout: React.FC<StandardPageLayoutProps> = ({
+  children,
+  backgroundClassName,
+  contentClassName,
+}) => {
+  return (
+    <View className={cn('flex-1', backgroundClassName)}>
+      <View className={cn('flex-1', contentClassName)}>{children}</View>
+    </View>
+  );
+};

package/src/ui/StandardPageLayout/index.ts

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

package/src/ui/StatDisplay/StatDisplay.tsx

@@ -0,0 +1,124 @@
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface StatDisplayProps {
+  /** The main value/number to display */
+  value: string | number;
+  /** Label/description for the stat */
+  label: string;
+  /** Color variant */
+  variant?: 'primary' | 'success' | 'warning' | 'danger' | 'neutral' | 'white';
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  /** Text alignment */
+  align?: 'left' | 'center' | 'right';
+  /** Icon element */
+  icon?: React.ReactNode;
+  /** Icon position */
+  iconPosition?: 'top' | 'left';
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * StatDisplay Component
+ *
+ * Displays a statistic or metric with a value and label.
+ * Commonly used in dashboards, hero sections, and analytics.
+ *
+ * @example
+ * ```tsx
+ * <StatDisplay value="5K" label="Gas Overhead" variant="primary" />
+ * <StatDisplay value="42" label="Active Users" variant="success" size="lg" />
+ * ```
+ */
+export const StatDisplay: React.FC<StatDisplayProps> = ({
+  value,
+  label,
+  variant = 'neutral',
+  size = 'md',
+  align = 'center',
+  icon,
+  iconPosition = 'top',
+  className,
+}) => {
+  const variantClasses = {
+    primary: {
+      value: 'text-blue-600 dark:text-blue-400',
+      label: 'text-blue-600/70 dark:text-blue-400/70',
+    },
+    success: {
+      value: 'text-green-600 dark:text-green-400',
+      label: 'text-green-600/70 dark:text-green-400/70',
+    },
+    warning: {
+      value: 'text-yellow-600 dark:text-yellow-400',
+      label: 'text-yellow-600/70 dark:text-yellow-400/70',
+    },
+    danger: {
+      value: 'text-red-600 dark:text-red-400',
+      label: 'text-red-600/70 dark:text-red-400/70',
+    },
+    neutral: {
+      value: 'text-gray-900 dark:text-gray-100',
+      label: 'text-gray-600 dark:text-gray-400',
+    },
+    white: {
+      value: 'text-white',
+      label: 'text-white/70',
+    },
+  };
+
+  const sizeClasses = {
+    sm: { value: 'text-xl', label: 'text-xs' },
+    md: { value: 'text-2xl', label: 'text-sm' },
+    lg: { value: 'text-3xl', label: 'text-base' },
+    xl: { value: 'text-4xl', label: 'text-lg' },
+  };
+
+  const alignClasses = {
+    left: 'items-start',
+    center: 'items-center',
+    right: 'items-end',
+  };
+
+  const variantConfig = variantClasses[variant];
+  const sizeConfig = sizeClasses[size];
+
+  if (iconPosition === 'left' && icon) {
+    return (
+      <View
+        className={cn(
+          'flex-row items-center gap-3',
+          align === 'center' && 'justify-center',
+          className
+        )}
+      >
+        <View className={variantConfig.value}>{icon}</View>
+        <View>
+          <Text
+            className={cn('font-bold', sizeConfig.value, variantConfig.value)}
+          >
+            {value}
+          </Text>
+          <Text className={cn(sizeConfig.label, variantConfig.label)}>
+            {label}
+          </Text>
+        </View>
+      </View>
+    );
+  }
+
+  return (
+    <View className={cn(alignClasses[align], className)}>
+      {icon && iconPosition === 'top' && (
+        <View className={cn('mb-2', variantConfig.value)}>{icon}</View>
+      )}
+      <Text className={cn('font-bold', sizeConfig.value, variantConfig.value)}>
+        {value}
+      </Text>
+      <Text className={cn(sizeConfig.label, variantConfig.label)}>{label}</Text>
+    </View>
+  );
+};

package/src/ui/StatDisplay/index.ts

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

package/src/ui/StepList/StepList.tsx

@@ -0,0 +1,151 @@
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface StepListItem {
+  /** Step content */
+  content: React.ReactNode;
+  /** Sub-items under this step */
+  subItems?: React.ReactNode[];
+}
+
+export interface StepListProps {
+  /** List items (string or StepListItem) */
+  items: (string | StepListItem)[];
+  /** List type */
+  type?: 'ordered' | 'unordered';
+  /** Visual variant */
+  variant?: 'default' | 'enhanced' | 'minimal';
+  /** Additional className */
+  className?: string;
+  /** Item className */
+  itemClassName?: string;
+}
+
+/**
+ * StepList Component
+ *
+ * Displays a list of steps with optional numbering and sub-items.
+ * Supports ordered/unordered lists with different visual styles.
+ *
+ * @example
+ * ```tsx
+ * <StepList
+ *   items={[
+ *     'First step',
+ *     'Second step',
+ *     { content: 'Third step', subItems: ['Sub-item A', 'Sub-item B'] }
+ *   ]}
+ *   type="ordered"
+ *   variant="enhanced"
+ * />
+ * ```
+ */
+export const StepList: React.FC<StepListProps> = ({
+  items,
+  type = 'ordered',
+  variant = 'default',
+  className,
+  itemClassName,
+}) => {
+  const renderStepNumber = (index: number) => {
+    if (type === 'ordered') {
+      if (variant === 'enhanced') {
+        return (
+          <View className='w-6 h-6 bg-blue-600 rounded-full items-center justify-center mr-3'>
+            <Text className='text-white text-sm font-medium'>{index + 1}</Text>
+          </View>
+        );
+      }
+      if (variant === 'minimal') {
+        return (
+          <View className='w-6 h-6 bg-blue-100 dark:bg-blue-900/20 rounded-full items-center justify-center mr-3'>
+            <Text className='text-blue-600 dark:text-blue-400 text-sm font-medium'>
+              {index + 1}
+            </Text>
+          </View>
+        );
+      }
+      return (
+        <Text className='text-gray-600 dark:text-gray-400 mr-2'>
+          {index + 1}.
+        </Text>
+      );
+    }
+
+    // Unordered
+    if (variant === 'minimal') {
+      return <View className='w-2 h-2 bg-blue-600 rounded-full mr-3 mt-2' />;
+    }
+    return <Text className='text-gray-600 dark:text-gray-400 mr-2'>•</Text>;
+  };
+
+  const renderItem = (item: string | StepListItem, index: number) => {
+    const isStepItem = typeof item === 'object';
+    const content = isStepItem ? item.content : item;
+    const subItems = isStepItem ? item.subItems : undefined;
+
+    return (
+      <View
+        key={index}
+        className={cn(
+          'flex-row',
+          variant === 'enhanced' && 'pb-4',
+          variant === 'enhanced' &&
+            index < items.length - 1 &&
+            'border-l-2 border-gray-200 dark:border-gray-700 ml-3 pl-6',
+          itemClassName
+        )}
+      >
+        {/* Step indicator */}
+        {variant !== 'enhanced' || type === 'unordered' ? (
+          renderStepNumber(index)
+        ) : (
+          <View className='absolute -left-3'>{renderStepNumber(index)}</View>
+        )}
+
+        {/* Content */}
+        <View className='flex-1'>
+          {typeof content === 'string' ? (
+            <Text className='text-gray-600 dark:text-gray-400'>{content}</Text>
+          ) : (
+            content
+          )}
+
+          {/* Sub-items */}
+          {subItems && subItems.length > 0 && (
+            <View className='mt-2 ml-4 gap-1'>
+              {subItems.map((subItem, subIndex) => (
+                <View key={subIndex} className='flex-row'>
+                  <Text className='text-gray-500 dark:text-gray-500 mr-2'>
+                    •
+                  </Text>
+                  {typeof subItem === 'string' ? (
+                    <Text className='text-sm text-gray-500 dark:text-gray-500 flex-1'>
+                      {subItem}
+                    </Text>
+                  ) : (
+                    subItem
+                  )}
+                </View>
+              ))}
+            </View>
+          )}
+        </View>
+      </View>
+    );
+  };
+
+  return (
+    <View
+      className={cn(
+        variant === 'default' && 'gap-2',
+        variant === 'enhanced' && 'gap-0',
+        variant === 'minimal' && 'gap-3',
+        className
+      )}
+    >
+      {items.map(renderItem)}
+    </View>
+  );
+};

package/src/ui/StepList/index.ts

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