@sudobility/components-rn 1.0.1

package/src/ui/Flex/Flex.tsx

@@ -0,0 +1,116 @@
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+import { Box, BoxProps } from '../Box';
+
+export interface FlexProps extends Omit<BoxProps, 'className'> {
+  /** Flex direction */
+  direction?: 'row' | 'row-reverse' | 'col' | 'col-reverse';
+  /** Align items */
+  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+  /** Justify content */
+  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+  /** Wrap items */
+  wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
+  /** Gap between items */
+  gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * Flex Component
+ *
+ * Flexbox layout component extending Box with flex-specific properties.
+ * Provides convenient props for common flexbox patterns.
+ *
+ * @example
+ * ```tsx
+ * <Flex justify="between" align="center" p="md">
+ *   <Text>Left</Text>
+ *   <Button>Right</Button>
+ * </Flex>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Flex direction="col" gap="md" p="lg">
+ *   <Card>Item 1</Card>
+ *   <Card>Item 2</Card>
+ * </Flex>
+ * ```
+ */
+export const Flex: React.FC<FlexProps> = ({
+  direction = 'row',
+  align,
+  justify,
+  wrap = 'nowrap',
+  gap,
+  className,
+  ...boxProps
+}) => {
+  // Direction configurations
+  const directionClasses: Record<string, string> = {
+    row: 'flex-row',
+    'row-reverse': 'flex-row-reverse',
+    col: 'flex-col',
+    'col-reverse': 'flex-col-reverse',
+  };
+
+  // Align items configurations
+  const alignClasses = align
+    ? {
+        start: 'items-start',
+        center: 'items-center',
+        end: 'items-end',
+        stretch: 'items-stretch',
+        baseline: 'items-baseline',
+      }[align]
+    : '';
+
+  // Justify content configurations
+  const justifyClasses = justify
+    ? {
+        start: 'justify-start',
+        center: 'justify-center',
+        end: 'justify-end',
+        between: 'justify-between',
+        around: 'justify-around',
+        evenly: 'justify-evenly',
+      }[justify]
+    : '';
+
+  // Wrap configurations
+  const wrapClasses: Record<string, string> = {
+    nowrap: 'flex-nowrap',
+    wrap: 'flex-wrap',
+    'wrap-reverse': 'flex-wrap-reverse',
+  };
+
+  // Gap configurations
+  const gapClasses = gap
+    ? {
+        none: 'gap-0',
+        xs: 'gap-1',
+        sm: 'gap-2',
+        md: 'gap-4',
+        lg: 'gap-6',
+        xl: 'gap-8',
+        '2xl': 'gap-12',
+      }[gap]
+    : '';
+
+  return (
+    <Box
+      {...boxProps}
+      className={cn(
+        'flex',
+        directionClasses[direction],
+        alignClasses,
+        justifyClasses,
+        wrapClasses[wrap],
+        gapClasses,
+        className
+      )}
+    />
+  );
+};

package/src/ui/Flex/index.ts

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

package/src/ui/FloatingPanel/FloatingPanel.tsx

@@ -0,0 +1,122 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { View, Text, Pressable, StyleSheet } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface FloatingPanelProps {
+  /** Panel content */
+  children: React.ReactNode;
+  /** Panel title */
+  title?: string;
+  /** Initial position */
+  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+  /** Collapsible */
+  collapsible?: boolean;
+  /** Initially collapsed */
+  defaultCollapsed?: boolean;
+  /** Close button */
+  closeable?: boolean;
+  /** Close handler */
+  onClose?: () => void;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * FloatingPanel Component
+ *
+ * Floating panel positioned at screen corners.
+ * Useful for chat widgets, help panels, or notifications.
+ *
+ * @example
+ * ```tsx
+ * <FloatingPanel
+ *   title="Help & Support"
+ *   position="bottom-right"
+ *   collapsible
+ * >
+ *   <ChatWidget />
+ * </FloatingPanel>
+ * ```
+ */
+export const FloatingPanel: React.FC<FloatingPanelProps> = ({
+  children,
+  title,
+  position = 'bottom-right',
+  collapsible = true,
+  defaultCollapsed = false,
+  closeable = false,
+  onClose,
+  className,
+}) => {
+  const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
+
+  const positionStyles = {
+    'bottom-right': { bottom: 16, right: 16 },
+    'bottom-left': { bottom: 16, left: 16 },
+    'top-right': { top: 16, right: 16 },
+    'top-left': { top: 16, left: 16 },
+  };
+
+  return (
+    <View
+      style={[styles.container, positionStyles[position]]}
+      className={cn(
+        'w-80 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg shadow-2xl',
+        className
+      )}
+    >
+      {/* Header */}
+      {(title || collapsible || closeable) && (
+        <View className='flex-row items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700'>
+          {title && (
+            <Text className='font-semibold text-gray-900 dark:text-white'>
+              {title}
+            </Text>
+          )}
+
+          <View className='flex-row items-center gap-2'>
+            {collapsible && (
+              <Pressable
+                onPress={() => setIsCollapsed(!isCollapsed)}
+                className='p-1 active:bg-gray-100 dark:active:bg-gray-800 rounded'
+                accessibilityRole='button'
+                accessibilityLabel={isCollapsed ? 'Expand' : 'Collapse'}
+              >
+                <Text
+                  className={cn(
+                    'text-gray-600 dark:text-gray-400',
+                    isCollapsed && 'rotate-180'
+                  )}
+                >
+                  ▼
+                </Text>
+              </Pressable>
+            )}
+
+            {closeable && (
+              <Pressable
+                onPress={onClose}
+                className='p-1 active:bg-gray-100 dark:active:bg-gray-800 rounded'
+                accessibilityRole='button'
+                accessibilityLabel='Close'
+              >
+                <Text className='text-gray-600 dark:text-gray-400'>✕</Text>
+              </Pressable>
+            )}
+          </View>
+        </View>
+      )}
+
+      {/* Content */}
+      {!isCollapsed && <View className='p-4'>{children}</View>}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    zIndex: 50,
+  },
+});

package/src/ui/FloatingPanel/index.ts

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

package/src/ui/FormAlerts/FormAlerts.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { useEffect } from 'react';
+import { View } from 'react-native';
+import { cn } from '../../lib/utils';
+import { Alert } from '../Alert';
+
+export interface FormAlertsProps {
+  /** Success message to display */
+  successMessage?: string;
+  /** Error message to display */
+  errorMessage?: string;
+  /** Title for success alert */
+  successTitle?: string;
+  /** Title for error alert */
+  errorTitle?: string;
+  /** Auto-dismiss success message after milliseconds (0 = no auto-dismiss) */
+  autoDismissDelay?: number;
+  /** Callback when success message should be cleared */
+  onSuccessDismiss?: () => void;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * FormAlerts Component
+ *
+ * Displays success and error alerts for form submissions.
+ * Success messages can auto-dismiss after a configured delay.
+ *
+ * @example
+ * ```tsx
+ * const [success, setSuccess] = useState('');
+ * const [error, setError] = useState('');
+ *
+ * <FormAlerts
+ *   successMessage={success}
+ *   errorMessage={error}
+ *   onSuccessDismiss={() => setSuccess('')}
+ *   autoDismissDelay={3000}
+ * />
+ * ```
+ */
+export const FormAlerts: React.FC<FormAlertsProps> = ({
+  successMessage,
+  errorMessage,
+  successTitle = 'Success',
+  errorTitle = 'Error',
+  autoDismissDelay = 0,
+  onSuccessDismiss,
+  className,
+}) => {
+  // Auto-dismiss success message
+  useEffect(() => {
+    if (successMessage && autoDismissDelay > 0 && onSuccessDismiss) {
+      const timer = setTimeout(() => {
+        onSuccessDismiss();
+      }, autoDismissDelay);
+
+      return () => clearTimeout(timer);
+    }
+  }, [successMessage, autoDismissDelay, onSuccessDismiss]);
+
+  if (!successMessage && !errorMessage) {
+    return null;
+  }
+
+  return (
+    <View className={cn('gap-3', className)}>
+      {errorMessage && (
+        <Alert variant='error' title={errorTitle} description={errorMessage} />
+      )}
+      {successMessage && (
+        <Alert
+          variant='success'
+          title={successTitle}
+          description={successMessage}
+        />
+      )}
+    </View>
+  );
+};

package/src/ui/FormAlerts/index.ts

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

package/src/ui/FormattedNumber/FormattedNumber.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { Text } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface FormattedNumberProps {
+  /** Number value to format */
+  value: number;
+  /** Number style */
+  style?: 'decimal' | 'currency' | 'percent';
+  /** Currency code (for currency style) */
+  currency?: string;
+  /** Minimum fraction digits */
+  minimumFractionDigits?: number;
+  /** Maximum fraction digits */
+  maximumFractionDigits?: number;
+  /** Locale */
+  locale?: string;
+  /** Notation (compact for abbreviations like 1.2K) */
+  notation?: 'standard' | 'compact';
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * FormattedNumber Component
+ *
+ * Formats numbers using Intl.NumberFormat with various styles and locales.
+ * Supports currencies, percentages, and compact notation.
+ *
+ * @example
+ * ```tsx
+ * <FormattedNumber value={1234.56} />
+ * <FormattedNumber value={1234.56} notation="compact" />
+ * <FormattedNumber
+ *   value={1234.56}
+ *   style="currency"
+ *   currency="USD"
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <FormattedNumber
+ *   value={0.1234}
+ *   style="percent"
+ *   minimumFractionDigits={2}
+ * />
+ * ```
+ */
+export const FormattedNumber: React.FC<FormattedNumberProps> = ({
+  value,
+  style = 'decimal',
+  currency = 'USD',
+  minimumFractionDigits,
+  maximumFractionDigits,
+  locale = 'en-US',
+  notation = 'standard',
+  className,
+}) => {
+  const formatNumber = (): string => {
+    try {
+      const options: Intl.NumberFormatOptions = {
+        style,
+        notation,
+        minimumFractionDigits,
+        maximumFractionDigits,
+      };
+
+      if (style === 'currency') {
+        options.currency = currency;
+      }
+
+      return new Intl.NumberFormat(locale, options).format(value);
+    } catch (error) {
+      // Fallback to basic formatting if Intl fails
+      console.error('Number formatting error:', error);
+      return value.toLocaleString(locale);
+    }
+  };
+
+  return <Text className={cn(className)}>{formatNumber()}</Text>;
+};

package/src/ui/FormattedNumber/index.ts

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

package/src/ui/GradientIconContainer/GradientIconContainer.tsx

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface GradientIconContainerProps {
+  /** Icon element */
+  children: React.ReactNode;
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  /** Shape variant */
+  shape?: 'square' | 'rounded' | 'circle';
+  /** Color variant */
+  variant?: 'blue' | 'purple' | 'green' | 'orange' | 'gray';
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * GradientIconContainer Component
+ *
+ * Container for icons with gradient-like background colors.
+ * Note: True gradients require expo-linear-gradient; this uses solid colors.
+ *
+ * @example
+ * ```tsx
+ * <GradientIconContainer size="lg" variant="blue" shape="rounded">
+ *   <ShieldIcon />
+ * </GradientIconContainer>
+ * ```
+ */
+export const GradientIconContainer: React.FC<GradientIconContainerProps> = ({
+  children,
+  size = 'md',
+  shape = 'rounded',
+  variant = 'blue',
+  className,
+}) => {
+  // Size configurations
+  const sizeConfig = {
+    sm: { container: 'w-10 h-10', icon: styles.iconSm },
+    md: { container: 'w-12 h-12', icon: styles.iconMd },
+    lg: { container: 'w-16 h-16', icon: styles.iconLg },
+    xl: { container: 'w-20 h-20', icon: styles.iconXl },
+  };
+
+  // Shape configurations
+  const shapeClasses = {
+    square: 'rounded-lg',
+    rounded: 'rounded-xl',
+    circle: 'rounded-full',
+  };
+
+  // Color variants (solid colors approximating gradients)
+  const variantClasses = {
+    blue: 'bg-blue-600',
+    purple: 'bg-purple-600',
+    green: 'bg-green-600',
+    orange: 'bg-orange-600',
+    gray: 'bg-gray-700 dark:bg-gray-600',
+  };
+
+  const config = sizeConfig[size];
+
+  return (
+    <View
+      className={cn(
+        'items-center justify-center',
+        config.container,
+        shapeClasses[shape],
+        variantClasses[variant],
+        className
+      )}
+    >
+      <View style={config.icon}>{children}</View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  iconSm: { width: 20, height: 20 },
+  iconMd: { width: 24, height: 24 },
+  iconLg: { width: 32, height: 32 },
+  iconXl: { width: 40, height: 40 },
+});

package/src/ui/GradientIconContainer/index.ts

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

package/src/ui/Grid/Grid.tsx

@@ -0,0 +1,144 @@
+import * as React from 'react';
+import { View, Dimensions } from 'react-native';
+import { cn } from '../../lib/utils';
+
+const { width: SCREEN_WIDTH } = Dimensions.get('window');
+
+export interface GridProps {
+  /** Grid content */
+  children: React.ReactNode;
+  /** Number of columns */
+  cols?: 1 | 2 | 3 | 4 | 5 | 6;
+  /** Gap between items */
+  gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  /** Align items */
+  alignItems?: 'start' | 'center' | 'end' | 'stretch';
+  /** Additional className */
+  className?: string;
+}
+
+export interface GridItemProps {
+  /** Grid item content */
+  children: React.ReactNode;
+  /** Column span */
+  colSpan?: 1 | 2 | 3 | 4 | 5 | 6;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * Grid Component
+ *
+ * Flexbox-based grid layout component for React Native.
+ * Uses flex-wrap to simulate CSS Grid behavior.
+ *
+ * @example
+ * ```tsx
+ * <Grid cols={3} gap="md">
+ *   <GridItem><Card>Item 1</Card></GridItem>
+ *   <GridItem><Card>Item 2</Card></GridItem>
+ *   <GridItem><Card>Item 3</Card></GridItem>
+ * </Grid>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Grid cols={2} gap="lg">
+ *   <GridItem colSpan={2}><Card>Full width</Card></GridItem>
+ *   <GridItem><Card>Half</Card></GridItem>
+ *   <GridItem><Card>Half</Card></GridItem>
+ * </Grid>
+ * ```
+ */
+export const Grid: React.FC<GridProps> = ({
+  children,
+  cols = 1,
+  gap = 'md',
+  alignItems = 'stretch',
+  className,
+}) => {
+  // Gap configurations (in pixels for calculation)
+  const gapValues = {
+    none: 0,
+    xs: 4,
+    sm: 8,
+    md: 16,
+    lg: 24,
+    xl: 32,
+    '2xl': 48,
+  };
+
+  // Gap class mapping
+  const gapClasses = {
+    none: '',
+    xs: 'gap-1',
+    sm: 'gap-2',
+    md: 'gap-4',
+    lg: 'gap-6',
+    xl: 'gap-8',
+    '2xl': 'gap-12',
+  };
+
+  // Align items configurations
+  const alignItemsClasses = {
+    start: 'items-start',
+    center: 'items-center',
+    end: 'items-end',
+    stretch: 'items-stretch',
+  };
+
+  const gapValue = gapValues[gap];
+
+  // Calculate item width based on columns and gap
+  // Note: In RN, we need to calculate this manually
+  const getItemWidth = (span: number = 1) => {
+    const totalGap = gapValue * (cols - 1);
+    const availableWidth = SCREEN_WIDTH - 32; // Account for container padding
+    const columnWidth = (availableWidth - totalGap) / cols;
+    return columnWidth * span + gapValue * (span - 1);
+  };
+
+  // Clone children with calculated width
+  const childrenWithWidth = React.Children.map(children, child => {
+    if (React.isValidElement(child)) {
+      const colSpan = (child.props as GridItemProps).colSpan || 1;
+      return React.cloneElement(child as React.ReactElement, {
+        style: {
+          width: getItemWidth(colSpan),
+          ...(child.props as { style?: object }).style,
+        },
+      });
+    }
+    return child;
+  });
+
+  return (
+    <View
+      className={cn(
+        'flex flex-row flex-wrap',
+        gapClasses[gap],
+        alignItemsClasses[alignItems],
+        className
+      )}
+    >
+      {childrenWithWidth}
+    </View>
+  );
+};
+
+/**
+ * GridItem Component
+ *
+ * Individual grid item that can span multiple columns.
+ */
+export const GridItem: React.FC<GridItemProps & { style?: object }> = ({
+  children,
+  className,
+  style,
+}) => {
+  return (
+    <View className={cn(className)} style={style}>
+      {children}
+    </View>
+  );
+};

package/src/ui/Grid/index.ts

@@ -0,0 +1,2 @@
+export { Grid, GridItem } from './Grid';
+export type { GridProps, GridItemProps } from './Grid';