@sudobility/components-rn 1.0.1

package/src/ui/Badge/Badge.tsx

@@ -0,0 +1,198 @@
+import * as React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface BadgeProps {
+  /** Badge content */
+  children?: React.ReactNode;
+  /** Color variant */
+  variant?:
+    | 'default'
+    | 'primary'
+    | 'success'
+    | 'warning'
+    | 'danger'
+    | 'info'
+    | 'purple';
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg';
+  /** Icon to display */
+  icon?: React.ReactNode;
+  /** Show dot indicator */
+  dot?: boolean;
+  /** Render as pill (rounded-full) */
+  pill?: boolean;
+  /** Render as outline style */
+  outline?: boolean;
+  /** Press handler */
+  onPress?: () => void;
+  /** Dismissible badge with close button */
+  dismissible?: boolean;
+  /** Dismiss handler */
+  onDismiss?: () => void;
+  /** Count to display */
+  count?: number;
+  /** Max count before showing "+" */
+  maxCount?: number;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * Badge Component
+ *
+ * Small status or label component for displaying metadata, status, or categories.
+ * Commonly used for tags, statuses, counts, and labels.
+ *
+ * @example
+ * ```tsx
+ * <Badge variant="success">Active</Badge>
+ * <Badge variant="primary" size="sm">New</Badge>
+ * <Badge variant="warning" dot>Pending</Badge>
+ * ```
+ */
+export const Badge: React.FC<BadgeProps> = ({
+  children,
+  variant = 'default',
+  size = 'sm',
+  icon,
+  dot = false,
+  pill = false,
+  outline = false,
+  onPress,
+  dismissible = false,
+  onDismiss,
+  count,
+  maxCount,
+  className,
+}) => {
+  // Color variant configurations for filled style
+  const variantClasses = {
+    default: 'bg-gray-100 dark:bg-gray-700',
+    primary: 'bg-blue-100 dark:bg-blue-900/30',
+    success: 'bg-green-100 dark:bg-green-900/30',
+    warning: 'bg-yellow-100 dark:bg-yellow-900/30',
+    danger: 'bg-red-100 dark:bg-red-900/30',
+    info: 'bg-blue-100 dark:bg-blue-900/30',
+    purple: 'bg-purple-100 dark:bg-purple-900/30',
+  };
+
+  const variantTextClasses = {
+    default: 'text-gray-800 dark:text-gray-300',
+    primary: 'text-blue-800 dark:text-blue-400',
+    success: 'text-green-800 dark:text-green-400',
+    warning: 'text-yellow-800 dark:text-yellow-400',
+    danger: 'text-red-800 dark:text-red-400',
+    info: 'text-blue-800 dark:text-blue-400',
+    purple: 'text-purple-800 dark:text-purple-400',
+  };
+
+  // Color variant configurations for outline style
+  const outlineClasses = {
+    default: 'border border-gray-300 dark:border-gray-600',
+    primary: 'border border-blue-600 dark:border-blue-400',
+    success: 'border border-green-600 dark:border-green-400',
+    warning: 'border border-yellow-600 dark:border-yellow-400',
+    danger: 'border border-red-600 dark:border-red-400',
+    info: 'border border-blue-600 dark:border-blue-400',
+    purple: 'border border-purple-600 dark:border-purple-400',
+  };
+
+  const outlineTextClasses = {
+    default: 'text-gray-700 dark:text-gray-300',
+    primary: 'text-blue-600 dark:text-blue-400',
+    success: 'text-green-600 dark:text-green-400',
+    warning: 'text-yellow-600 dark:text-yellow-400',
+    danger: 'text-red-600 dark:text-red-400',
+    info: 'text-blue-600 dark:text-blue-400',
+    purple: 'text-purple-600 dark:text-purple-400',
+  };
+
+  // Size configurations
+  const sizeClasses = {
+    sm: 'px-2 py-0.5',
+    md: 'px-2.5 py-1',
+    lg: 'px-3 py-1.5',
+  };
+
+  const textSizeClasses = {
+    sm: 'text-xs',
+    md: 'text-sm',
+    lg: 'text-base',
+  };
+
+  // Dot color configurations
+  const dotColorClasses = {
+    default: 'bg-gray-600 dark:bg-gray-400',
+    primary: 'bg-blue-600 dark:bg-blue-400',
+    success: 'bg-green-600 dark:bg-green-400',
+    warning: 'bg-yellow-600 dark:bg-yellow-400',
+    danger: 'bg-red-600 dark:bg-red-400',
+    info: 'bg-blue-600 dark:bg-blue-400',
+    purple: 'bg-purple-600 dark:bg-purple-400',
+  };
+
+  // Format count display
+  const displayCount =
+    count !== undefined
+      ? maxCount !== undefined && count > maxCount
+        ? `${maxCount}+`
+        : count.toString()
+      : null;
+
+  const containerClasses = cn(
+    'flex flex-row items-center',
+    outline ? outlineClasses[variant] : variantClasses[variant],
+    sizeClasses[size],
+    pill ? 'rounded-full' : 'rounded',
+    className
+  );
+
+  const textClasses = cn(
+    textSizeClasses[size],
+    'font-medium',
+    outline ? outlineTextClasses[variant] : variantTextClasses[variant]
+  );
+
+  const content = (
+    <>
+      {dot && (
+        <View
+          className={cn(
+            'w-2 h-2 rounded-full mr-1.5',
+            dotColorClasses[variant]
+          )}
+        />
+      )}
+      {icon && <View className='mr-1'>{icon}</View>}
+      {children && <Text className={textClasses}>{children}</Text>}
+      {displayCount && (
+        <Text className={cn(textClasses, 'ml-1')}>{displayCount}</Text>
+      )}
+      {dismissible && onDismiss && (
+        <Pressable
+          onPress={onDismiss}
+          className='ml-1 p-0.5'
+          accessibilityRole='button'
+          accessibilityLabel='Dismiss'
+        >
+          <Text className={textClasses}>×</Text>
+        </Pressable>
+      )}
+    </>
+  );
+
+  if (onPress) {
+    return (
+      <Pressable
+        onPress={onPress}
+        className={containerClasses}
+        accessibilityRole='button'
+      >
+        {content}
+      </Pressable>
+    );
+  }
+
+  return <View className={containerClasses}>{content}</View>;
+};

package/src/ui/Badge/index.ts

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

package/src/ui/Box/Box.tsx

@@ -0,0 +1,167 @@
+import * as React from 'react';
+import { View, ViewProps } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface BoxProps extends ViewProps {
+  /** Box content */
+  children?: React.ReactNode;
+  /** Padding */
+  p?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  /** Padding X-axis */
+  px?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  /** Padding Y-axis */
+  py?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  /** Margin */
+  m?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'auto';
+  /** Margin X-axis */
+  mx?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'auto';
+  /** Margin Y-axis */
+  my?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'auto';
+  /** Background color */
+  bg?:
+    | 'transparent'
+    | 'white'
+    | 'gray'
+    | 'primary'
+    | 'success'
+    | 'warning'
+    | 'danger';
+  /** Border */
+  border?: boolean;
+  /** Border radius */
+  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+  /** Shadow */
+  shadow?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+  /** Width */
+  w?: 'auto' | 'full';
+  /** Height */
+  h?: 'auto' | 'full';
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * Box Component
+ *
+ * Fundamental layout primitive with spacing, sizing, and styling props.
+ * Acts as a building block for creating layouts and containers.
+ *
+ * @example
+ * ```tsx
+ * <Box p="md" bg="white" rounded="lg" shadow="md">
+ *   <Text>Card Content</Text>
+ * </Box>
+ * ```
+ */
+export const Box: React.FC<BoxProps> = ({
+  children,
+  p,
+  px,
+  py,
+  m,
+  mx,
+  my,
+  bg,
+  border = false,
+  rounded,
+  shadow,
+  w,
+  h,
+  className,
+  ...viewProps
+}) => {
+  // Spacing configurations
+  const spacingClasses: Record<string, string> = {
+    none: '0',
+    xs: '1',
+    sm: '2',
+    md: '4',
+    lg: '6',
+    xl: '8',
+    '2xl': '12',
+    auto: 'auto',
+  };
+
+  // Background configurations
+  const bgClasses = bg
+    ? {
+        transparent: 'bg-transparent',
+        white: 'bg-white dark:bg-gray-900',
+        gray: 'bg-gray-100 dark:bg-gray-800',
+        primary: 'bg-blue-50 dark:bg-blue-900/20',
+        success: 'bg-green-50 dark:bg-green-900/20',
+        warning: 'bg-yellow-50 dark:bg-yellow-900/20',
+        danger: 'bg-red-50 dark:bg-red-900/20',
+      }[bg]
+    : '';
+
+  // Border radius configurations
+  const roundedClasses = rounded
+    ? {
+        none: 'rounded-none',
+        sm: 'rounded-sm',
+        md: 'rounded-md',
+        lg: 'rounded-lg',
+        xl: 'rounded-xl',
+        full: 'rounded-full',
+      }[rounded]
+    : '';
+
+  // Shadow configurations
+  const shadowClasses = shadow
+    ? {
+        none: 'shadow-none',
+        sm: 'shadow-sm',
+        md: 'shadow-md',
+        lg: 'shadow-lg',
+        xl: 'shadow-xl',
+      }[shadow]
+    : '';
+
+  // Width configurations
+  const wClasses = w
+    ? {
+        auto: '',
+        full: 'w-full',
+      }[w]
+    : '';
+
+  // Height configurations
+  const hClasses = h
+    ? {
+        auto: '',
+        full: 'h-full',
+      }[h]
+    : '';
+
+  // Build padding classes
+  const paddingClasses: string[] = [];
+  if (p) paddingClasses.push('p-' + spacingClasses[p]);
+  if (px) paddingClasses.push('px-' + spacingClasses[px]);
+  if (py) paddingClasses.push('py-' + spacingClasses[py]);
+
+  // Build margin classes
+  const marginClasses: string[] = [];
+  if (m) marginClasses.push('m-' + spacingClasses[m]);
+  if (mx) marginClasses.push('mx-' + spacingClasses[mx]);
+  if (my) marginClasses.push('my-' + spacingClasses[my]);
+
+  return (
+    <View
+      className={cn(
+        ...paddingClasses,
+        ...marginClasses,
+        bgClasses,
+        border && 'border border-gray-200 dark:border-gray-700',
+        roundedClasses,
+        shadowClasses,
+        wClasses,
+        hClasses,
+        className
+      )}
+      {...viewProps}
+    >
+      {children}
+    </View>
+  );
+};

package/src/ui/Box/index.ts

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

package/src/ui/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,199 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { View, Text, Pressable, ScrollView } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface BreadcrumbItem {
+  /** Item label */
+  label: string;
+  /** Press handler (for navigation) */
+  onPress?: () => void;
+  /** Icon to display before label */
+  icon?: React.ReactNode;
+  /** Whether item is current page */
+  isCurrent?: boolean;
+}
+
+export interface BreadcrumbProps {
+  /** Breadcrumb items */
+  items: BreadcrumbItem[];
+  /** Separator between items */
+  separator?: React.ReactNode;
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg';
+  /** Maximum items to display before collapsing */
+  maxItems?: number;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * Breadcrumb Component
+ *
+ * Navigation breadcrumb trail showing current page hierarchy.
+ * Supports press handlers, custom separators, and collapsing.
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumb
+ *   items={[
+ *     { label: 'Home', onPress: () => navigate('/') },
+ *     { label: 'Products', onPress: () => navigate('/products') },
+ *     { label: 'Item', isCurrent: true }
+ *   ]}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumb
+ *   items={breadcrumbs}
+ *   separator={<ChevronRightIcon />}
+ *   maxItems={4}
+ * />
+ * ```
+ */
+export const Breadcrumb: React.FC<BreadcrumbProps> = ({
+  items,
+  separator = '/',
+  size = 'md',
+  maxItems,
+  className,
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  // Size configurations
+  const sizeClasses = {
+    sm: 'text-sm',
+    md: 'text-base',
+    lg: 'text-lg',
+  };
+
+  // Determine which items to display
+  const getDisplayItems = (): (BreadcrumbItem | { type: 'ellipsis' })[] => {
+    if (!maxItems || items.length <= maxItems || isExpanded) {
+      return items;
+    }
+
+    // Show first item, ellipsis, and last (maxItems - 2) items
+    const firstItems = items.slice(0, 1);
+    const lastItems = items.slice(-(maxItems - 2));
+    return [...firstItems, { type: 'ellipsis' as const }, ...lastItems];
+  };
+
+  const displayItems = getDisplayItems();
+
+  const renderBreadcrumbItem = (
+    item: BreadcrumbItem,
+    _index: number,
+    isLast: boolean
+  ) => {
+    const isCurrent = item.isCurrent || isLast;
+
+    // Last item should NEVER be pressable
+    if (isLast) {
+      return (
+        <View className='flex-row items-center gap-1.5'>
+          {item.icon && <View className='flex-shrink-0'>{item.icon}</View>}
+          <Text
+            className={cn(
+              sizeClasses[size],
+              'text-gray-900 dark:text-white font-medium'
+            )}
+            accessibilityRole='text'
+          >
+            {item.label}
+          </Text>
+        </View>
+      );
+    }
+
+    // Render pressable item
+    if (item.onPress) {
+      return (
+        <Pressable
+          onPress={item.onPress}
+          className='flex-row items-center gap-1.5 active:opacity-70'
+          accessibilityRole='link'
+        >
+          {item.icon && <View className='flex-shrink-0'>{item.icon}</View>}
+          <Text
+            className={cn(
+              sizeClasses[size],
+              'text-gray-600 dark:text-gray-400'
+            )}
+          >
+            {item.label}
+          </Text>
+        </Pressable>
+      );
+    }
+
+    return (
+      <View className='flex-row items-center gap-1.5'>
+        {item.icon && <View className='flex-shrink-0'>{item.icon}</View>}
+        <Text
+          className={cn(
+            sizeClasses[size],
+            isCurrent
+              ? 'text-gray-900 dark:text-white font-medium'
+              : 'text-gray-600 dark:text-gray-400'
+          )}
+        >
+          {item.label}
+        </Text>
+      </View>
+    );
+  };
+
+  const renderSeparator = () => {
+    if (typeof separator === 'string') {
+      return (
+        <Text className='text-gray-400 dark:text-gray-600 mx-2'>
+          {separator}
+        </Text>
+      );
+    }
+    return <View className='mx-2'>{separator}</View>;
+  };
+
+  return (
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      className={cn('flex-row', className)}
+      contentContainerStyle={{ alignItems: 'center' }}
+      accessibilityRole='none'
+      accessibilityLabel='Breadcrumb'
+    >
+      {displayItems.map((item, index) => {
+        // Handle ellipsis
+        if ('type' in item && item.type === 'ellipsis') {
+          return (
+            <View key='ellipsis' className='flex-row items-center'>
+              <Pressable
+                onPress={() => setIsExpanded(true)}
+                className='px-1 active:opacity-70'
+                accessibilityRole='button'
+                accessibilityLabel='Show all breadcrumb items'
+              >
+                <Text className='text-gray-600 dark:text-gray-400'>...</Text>
+              </Pressable>
+              {renderSeparator()}
+            </View>
+          );
+        }
+
+        const isLast = index === displayItems.length - 1;
+        const breadcrumbItem = item as BreadcrumbItem;
+
+        return (
+          <View key={index} className='flex-row items-center'>
+            {renderBreadcrumbItem(breadcrumbItem, index, isLast)}
+            {!isLast && renderSeparator()}
+          </View>
+        );
+      })}
+    </ScrollView>
+  );
+};

package/src/ui/Breadcrumb/index.ts

@@ -0,0 +1,2 @@
+export { Breadcrumb } from './Breadcrumb';
+export type { BreadcrumbProps, BreadcrumbItem } from './Breadcrumb';

package/src/ui/BreadcrumbNav/BreadcrumbNav.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface BreadcrumbNavItem {
+  /** Item label */
+  label: string;
+  /** Navigation handler */
+  onPress?: () => void;
+}
+
+export interface BreadcrumbNavProps {
+  /** Breadcrumb items */
+  items: BreadcrumbNavItem[];
+  /** Custom separator */
+  separator?: React.ReactNode;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * BreadcrumbNav Component
+ *
+ * Simple breadcrumb navigation for React Native.
+ * Shows a trail of navigational links.
+ *
+ * @example
+ * ```tsx
+ * <BreadcrumbNav
+ *   items={[
+ *     { label: 'Home', onPress: () => navigate('home') },
+ *     { label: 'Products', onPress: () => navigate('products') },
+ *     { label: 'Electronics' }
+ *   ]}
+ * />
+ * ```
+ */
+export const BreadcrumbNav: React.FC<BreadcrumbNavProps> = ({
+  items,
+  separator = '/',
+  className,
+}) => {
+  return (
+    <View
+      className={cn('flex-row items-center gap-2', className)}
+      accessibilityRole='none'
+      accessibilityLabel='Breadcrumb navigation'
+    >
+      {items.map((item, index) => (
+        <React.Fragment key={index}>
+          {index > 0 && (
+            <Text className='text-gray-400 dark:text-gray-600 text-sm'>
+              {typeof separator === 'string' ? separator : separator}
+            </Text>
+          )}
+          {index === items.length - 1 ? (
+            <Text className='text-gray-900 dark:text-white font-medium text-sm'>
+              {item.label}
+            </Text>
+          ) : (
+            <Pressable
+              onPress={item.onPress}
+              accessibilityRole='link'
+              accessibilityLabel={item.label}
+            >
+              <Text className='text-blue-600 dark:text-blue-400 text-sm'>
+                {item.label}
+              </Text>
+            </Pressable>
+          )}
+        </React.Fragment>
+      ))}
+    </View>
+  );
+};

package/src/ui/BreadcrumbNav/index.ts

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