@campxdev/react-native-blueprint 0.1.0

package/src/components/ui/NavBar.tsx

@@ -0,0 +1,397 @@
+import * as React from 'react';
+import { View as RNView, Pressable as RNPressable, Image } from 'react-native';
+import type { ImageSourcePropType } from 'react-native';
+import { SafeAreaView as RNSafeAreaView } from 'react-native-safe-area-context';
+import { cssInterop } from 'nativewind';
+import { cn } from '../../lib/utils';
+import { Text, TextClassContext } from './Text';
+import type { ViewRef } from '@rn-primitives/types';
+
+// Enable NativeWind className support
+const View = cssInterop(RNView, { className: 'style' });
+const Pressable = cssInterop(RNPressable, { className: 'style' });
+const SafeAreaView = cssInterop(RNSafeAreaView, { className: 'style' });
+
+/**
+ * Props for individual navigation bar items
+ *
+ * Defines the structure for each item displayed in the NavBar component.
+ * Each item can have both active and inactive states with different icons.
+ *
+ * @interface NavBarItem
+ *
+ * @property {ImageSourcePropType | React.ReactElement} icon - Icon displayed when item is inactive
+ *   - Can be an image source from require() or { uri: 'url' }
+ *   - Can be a React element like lucide-react-native icons
+ * @property {ImageSourcePropType | React.ReactElement} activeIcon - Icon displayed when item is active
+ *   - Same types as icon property
+ *   - Typically a different color or style variant
+ * @property {string} label - Text label displayed below the icon
+ * @property {() => void} onPress - Callback function invoked when item is pressed
+ * @property {boolean} [disabled] - Optional flag to disable the item interaction
+ *
+ * @example
+ * ```tsx
+ * // Using image sources
+ * const homeItem: NavBarItem = {
+ *   icon: require('./assets/home-inactive.png'),
+ *   activeIcon: require('./assets/home-active.png'),
+ *   label: 'Home',
+ *   onPress: () => console.log('Home pressed'),
+ * };
+ *
+ * // Using React elements (lucide icons)
+ * import { Home } from 'lucide-react-native';
+ * const homeItem: NavBarItem = {
+ *   icon: <Icon as={Home} color="#666" />,
+ *   activeIcon: <Icon as={Home} color="#000" />,
+ *   label: 'Home',
+ *   onPress: () => navigation.navigate('Home'),
+ * };
+ * ```
+ */
+export interface NavBarItem {
+  icon: ImageSourcePropType | React.ReactElement;
+  activeIcon: ImageSourcePropType | React.ReactElement;
+  label: string;
+  onPress: () => void;
+  disabled?: boolean;
+}
+
+/**
+ * Props for NavBar component
+ *
+ * Configuration options for customizing the NavBar appearance and behavior.
+ * Provides fine-grained control over styling for different states and elements.
+ *
+ * @interface NavBarProps
+ *
+ * @property {NavBarItem[]} items - Array of navigation items to display in the bar
+ * @property {number} activeIndex - Zero-based index of the currently active item
+ *
+ * @property {string} [className] - Additional Tailwind classes for the main container
+ * @property {string} [itemClassName] - Additional Tailwind classes applied to all items
+ * @property {string} [activeItemClassName] - Additional Tailwind classes for the active item only
+ * @property {string} [labelClassName] - Additional Tailwind classes for all labels
+ * @property {string} [activeLabelClassName] - Additional Tailwind classes for the active label only
+ * @property {string} [backgroundColor] - Custom background color classes (overrides default)
+ * @property {number} [iconSize] - Size of icons in pixels (default: 24)
+ *
+ * @example
+ * ```tsx
+ * const navBarProps: NavBarProps = {
+ *   items: navigationItems,
+ *   activeIndex: 0,
+ *   iconSize: 28,
+ *   className: 'px-4',
+ *   activeItemClassName: 'scale-110',
+ *   backgroundColor: 'bg-white dark:bg-gray-900',
+ * };
+ * ```
+ */
+export interface NavBarProps {
+  items: NavBarItem[];
+  activeIndex: number;
+  className?: string;
+  itemClassName?: string;
+  activeItemClassName?: string;
+  labelClassName?: string;
+  activeLabelClassName?: string;
+  backgroundColor?: string;
+  iconSize?: number;
+}
+
+/**
+ * NavBar - Bottom navigation bar component
+ *
+ * A navigation component designed for mobile applications that displays at the bottom
+ * of the screen with proper safe area handling. Similar to Flutter's BottomNavigationBar,
+ * it provides an intuitive way to switch between different sections of your app.
+ *
+ * Features:
+ * - Automatic safe area handling for devices with notches/home indicators
+ * - Support for both image and React element icons
+ * - Active/inactive state management with visual feedback
+ * - Customizable styling through Tailwind classes
+ * - Full dark mode support
+ * - Accessibility features built-in
+ * - Disabled state support for items
+ *
+ * @component
+ *
+ * @example
+ * // Basic usage with state management
+ * ```tsx
+ * import { useState } from 'react';
+ * import { NavBar, NavBarItem } from 'react-native-blueprint';
+ *
+ * function App() {
+ *   const [activeIndex, setActiveIndex] = useState(0);
+ *
+ *   const navItems: NavBarItem[] = [
+ *     {
+ *       icon: require('./assets/home-inactive.png'),
+ *       activeIcon: require('./assets/home-active.png'),
+ *       label: 'Home',
+ *       onPress: () => setActiveIndex(0),
+ *     },
+ *     {
+ *       icon: require('./assets/browse-inactive.png'),
+ *       activeIcon: require('./assets/browse-active.png'),
+ *       label: 'Browse',
+ *       onPress: () => setActiveIndex(1),
+ *     },
+ *     {
+ *       icon: require('./assets/feed-inactive.png'),
+ *       activeIcon: require('./assets/feed-active.png'),
+ *       label: 'Feed',
+ *       onPress: () => setActiveIndex(2),
+ *     },
+ *     {
+ *       icon: require('./assets/chat-inactive.png'),
+ *       activeIcon: require('./assets/chat-active.png'),
+ *       label: 'Chat',
+ *       onPress: () => setActiveIndex(3),
+ *     },
+ *   ];
+ *
+ *   return (
+ *     <View style={{ flex: 1 }}>
+ *       <View style={{ flex: 1 }}>
+ *         {renderScreen(activeIndex)}
+ *       </View>
+ *       <NavBar items={navItems} activeIndex={activeIndex} />
+ *     </View>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * // With React Navigation
+ * ```tsx
+ * import { useNavigation, useRoute } from '@react-navigation/native';
+ * import { Home, Search, Bell, MessageCircle } from 'lucide-react-native';
+ * import { Icon } from 'react-native-blueprint';
+ *
+ * function BottomTabBar() {
+ *   const navigation = useNavigation();
+ *   const route = useRoute();
+ *   const [activeIndex, setActiveIndex] = useState(0);
+ *
+ *   const navItems: NavBarItem[] = [
+ *     {
+ *       icon: <Icon as={Home} size={24} color="#666" />,
+ *       activeIcon: <Icon as={Home} size={24} color="#000" />,
+ *       label: 'Home',
+ *       onPress: () => {
+ *         setActiveIndex(0);
+ *         navigation.navigate('Home');
+ *       },
+ *     },
+ *     {
+ *       icon: <Icon as={Search} size={24} color="#666" />,
+ *       activeIcon: <Icon as={Search} size={24} color="#000" />,
+ *       label: 'Browse',
+ *       onPress: () => {
+ *         setActiveIndex(1);
+ *         navigation.navigate('Browse');
+ *       },
+ *     },
+ *     {
+ *       icon: <Icon as={Bell} size={24} color="#666" />,
+ *       activeIcon: <Icon as={Bell} size={24} color="#000" />,
+ *       label: 'Feed',
+ *       onPress: () => {
+ *         setActiveIndex(2);
+ *         navigation.navigate('Feed');
+ *       },
+ *     },
+ *     {
+ *       icon: <Icon as={MessageCircle} size={24} color="#666" />,
+ *       activeIcon: <Icon as={MessageCircle} size={24} color="#000" />,
+ *       label: 'Chat',
+ *       onPress: () => {
+ *         setActiveIndex(3);
+ *         navigation.navigate('Chat');
+ *       },
+ *     },
+ *   ];
+ *
+ *   return <NavBar items={navItems} activeIndex={activeIndex} />;
+ * }
+ * ```
+ *
+ * @example
+ * // With custom styling and theming
+ * ```tsx
+ * import { useTheme } from 'react-native-blueprint';
+ *
+ * function ThemedNavBar() {
+ *   const { isDark } = useTheme();
+ *   const [activeIndex, setActiveIndex] = useState(0);
+ *
+ *   return (
+ *     <NavBar
+ *       items={navItems}
+ *       activeIndex={activeIndex}
+ *       backgroundColor="bg-gray-100 dark:bg-gray-900"
+ *       iconSize={28}
+ *       className="py-2 px-4"
+ *       activeItemClassName="scale-110 transition-transform"
+ *       activeLabelClassName="text-blue-600 dark:text-blue-400 font-bold"
+ *       labelClassName="text-gray-500 dark:text-gray-400"
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * // With disabled items
+ * ```tsx
+ * const navItems: NavBarItem[] = [
+ *   {
+ *     icon: require('./assets/home-inactive.png'),
+ *     activeIcon: require('./assets/home-active.png'),
+ *     label: 'Home',
+ *     onPress: () => setActiveIndex(0),
+ *   },
+ *   {
+ *     icon: require('./assets/premium-inactive.png'),
+ *     activeIcon: require('./assets/premium-active.png'),
+ *     label: 'Premium',
+ *     onPress: () => showUpgradeModal(),
+ *     disabled: !user.isPremium, // Disable if user is not premium
+ *   },
+ * ];
+ * ```
+ *
+ * @param {NavBarProps} props - Component props
+ * @param {React.Ref<ViewRef>} ref - Forwarded ref to the container View
+ *
+ * @returns {React.ReactElement} The rendered NavBar component
+ *
+ * @accessibility
+ * - Sets role="navigation" on the container for proper semantic structure
+ * - Each item has role="button" with appropriate labels
+ * - Uses aria-label for screen reader support
+ * - Indicates selected state with aria-selected
+ * - Respects and communicates disabled state
+ * - Provides accessibilityRole and accessibilityLabel for React Native
+ * - Includes accessibilityState for selected and disabled states
+ *
+ * @see {@link NavBarItem} for item configuration
+ * @see {@link NavBarProps} for all available props
+ */
+const NavBar = React.forwardRef<ViewRef, NavBarProps>(
+  (
+    {
+      items,
+      activeIndex,
+      className,
+      itemClassName,
+      activeItemClassName,
+      labelClassName,
+      activeLabelClassName,
+      backgroundColor,
+      iconSize = 24,
+    },
+    ref
+  ) => {
+    /**
+     * Renders an icon based on its type (image source or React element)
+     *
+     * @param {NavBarItem} item - The navigation item containing the icon
+     * @param {boolean} isActive - Whether this item is currently active
+     * @returns {React.ReactElement} The rendered icon
+     */
+    const renderIcon = (
+      item: NavBarItem,
+      isActive: boolean
+    ): React.ReactElement => {
+      const iconSource = isActive ? item.activeIcon : item.icon;
+
+      // Check if it's a React element (like lucide icon)
+      if (React.isValidElement(iconSource)) {
+        return iconSource;
+      }
+
+      // It's an image source
+      return (
+        <Image
+          source={iconSource as ImageSourcePropType}
+          style={{ width: iconSize, height: iconSize }}
+          resizeMode="contain"
+          accessibilityIgnoresInvertColors
+        />
+      );
+    };
+
+    // Default background color with dark mode support
+    const defaultBgColor = 'bg-background';
+
+    return (
+      <SafeAreaView
+        edges={['bottom']}
+        className={cn(
+          'border-t border-border',
+          backgroundColor || defaultBgColor
+        )}
+        ref={ref as any}
+      >
+        <View
+          className={cn(
+            'flex-row items-center justify-around px-2 py-1',
+            className
+          )}
+          role="navigation"
+        >
+          {items.map((item, index) => {
+            const isActive = index === activeIndex;
+            const isDisabled = item.disabled;
+
+            return (
+              <Pressable
+                key={`nav-item-${index}-${item.label}`}
+                onPress={item.onPress}
+                disabled={isDisabled}
+                className={cn(
+                  'flex-1 items-center justify-center py-2 px-1 active:opacity-70',
+                  isDisabled && 'opacity-40',
+                  itemClassName,
+                  isActive && activeItemClassName
+                )}
+                role="button"
+                aria-label={item.label}
+                aria-selected={isActive}
+                accessibilityRole="button"
+                accessibilityLabel={item.label}
+                accessibilityState={{
+                  selected: isActive,
+                  disabled: isDisabled,
+                }}
+              >
+                <View className="mb-1.5 mt-2.5">
+                  {renderIcon(item, isActive)}
+                </View>
+                <TextClassContext.Provider
+                  value={cn(
+                    'text-xs font-medium text-center',
+                    isActive
+                      ? activeLabelClassName || 'text-foreground'
+                      : labelClassName || 'text-muted-foreground'
+                  )}
+                >
+                  <Text>{item.label}</Text>
+                </TextClassContext.Provider>
+              </Pressable>
+            );
+          })}
+        </View>
+      </SafeAreaView>
+    );
+  }
+);
+
+NavBar.displayName = 'NavBar';
+
+export { NavBar };

package/src/components/ui/Popover.tsx

@@ -0,0 +1,110 @@
+import { NativeOnlyAnimatedView } from './Native-Only-Animated-View';
+import { TextClassContext } from './Text';
+import { cn } from '../../lib/utils';
+import * as PopoverPrimitive from '@rn-primitives/popover';
+import * as React from 'react';
+import { Platform, StyleSheet } from 'react-native';
+import { FadeIn, FadeOut } from 'react-native-reanimated';
+import { FullWindowOverlay as RNFullWindowOverlay } from 'react-native-screens';
+
+/**
+ * Root component for popover - provides context for trigger and content
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Popover>
+ *   <PopoverTrigger>
+ *     <Button variant="outline">
+ *       <Text>Open Popover</Text>
+ *     </Button>
+ *   </PopoverTrigger>
+ *   <PopoverContent>
+ *     <Text>Popover content goes here</Text>
+ *   </PopoverContent>
+ * </Popover>
+ * ```
+ */
+const Popover = PopoverPrimitive.Root;
+
+/**
+ * Trigger component that opens the popover when pressed
+ *
+ * @component
+ */
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+/**
+ * Full window overlay wrapper for iOS, Fragment for other platforms
+ */
+const FullWindowOverlay =
+  Platform.OS === 'ios' ? RNFullWindowOverlay : React.Fragment;
+
+/**
+ * Content container for popover
+ *
+ * Displays content in a floating panel anchored to the trigger.
+ * Includes smooth animations and proper positioning.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <PopoverContent align="start" sideOffset={8}>
+ *   <View className="gap-2">
+ *     <Text className="font-semibold">Dimensions</Text>
+ *     <Text className="text-sm">Set the dimensions for the layer</Text>
+ *   </View>
+ * </PopoverContent>
+ * ```
+ *
+ * @accessibility
+ * - Content is announced by screen readers
+ * - Dismissible with escape key on web
+ * - Proper focus management
+ */
+function PopoverContent({
+  className,
+  align = 'center',
+  sideOffset = 4,
+  portalHost,
+  ...props
+}: PopoverPrimitive.ContentProps &
+  React.RefAttributes<PopoverPrimitive.ContentRef> & {
+    portalHost?: string;
+  }) {
+  return (
+    <PopoverPrimitive.Portal hostName={portalHost}>
+      <FullWindowOverlay>
+        <PopoverPrimitive.Overlay
+          style={Platform.select({ native: StyleSheet.absoluteFill })}
+        >
+          <NativeOnlyAnimatedView
+            entering={FadeIn.duration(200)}
+            exiting={FadeOut}
+          >
+            <TextClassContext.Provider value="text-popover-foreground">
+              <PopoverPrimitive.Content
+                align={align}
+                sideOffset={sideOffset}
+                className={cn(
+                  'bg-popover border-border outline-hidden z-50 w-72 rounded-md border p-4 shadow-md shadow-black/5',
+                  Platform.select({
+                    web: cn(
+                      'animate-in fade-in-0 zoom-in-95 origin-(--radix-popover-content-transform-origin) cursor-auto',
+                      props.side === 'bottom' && 'slide-in-from-top-2',
+                      props.side === 'top' && 'slide-in-from-bottom-2'
+                    ),
+                  }),
+                  className
+                )}
+                {...props}
+              />
+            </TextClassContext.Provider>
+          </NativeOnlyAnimatedView>
+        </PopoverPrimitive.Overlay>
+      </FullWindowOverlay>
+    </PopoverPrimitive.Portal>
+  );
+}
+
+export { Popover, PopoverContent, PopoverTrigger };

package/src/components/ui/Progress.tsx

@@ -0,0 +1,138 @@
+import { cn } from '../../lib/utils';
+import * as ProgressPrimitive from '@rn-primitives/progress';
+import { Platform, View } from 'react-native';
+import { cssInterop } from 'nativewind';
+import Animated, {
+  Extrapolation,
+  interpolate,
+  useAnimatedStyle,
+  useDerivedValue,
+  withSpring,
+} from 'react-native-reanimated';
+
+cssInterop(View, { className: 'style' });
+
+/**
+ * Progress bar component for displaying task completion
+ *
+ * Displays an animated progress indicator with customizable styles.
+ * Uses spring animations on native platforms for smooth transitions.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Progress value={60} className="w-full" />
+ *
+ * <Progress
+ *   value={progress}
+ *   indicatorClassName="bg-green-500"
+ * />
+ * ```
+ *
+ * @accessibility
+ * - Uses proper ARIA attributes for progress indication
+ * - Value changes are announced by screen readers
+ */
+function Progress({
+  className,
+  value,
+  indicatorClassName,
+  ...props
+}: ProgressPrimitive.RootProps &
+  React.RefAttributes<ProgressPrimitive.RootRef> & {
+    indicatorClassName?: string;
+  }) {
+  return (
+    <ProgressPrimitive.Root
+      className={cn(
+        'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',
+        className
+      )}
+      {...props}
+    >
+      <Indicator value={value} className={indicatorClassName} />
+    </ProgressPrimitive.Root>
+  );
+}
+
+export { Progress };
+
+/**
+ * Platform-specific indicator component selector
+ */
+const Indicator = Platform.select({
+  web: WebIndicator,
+  native: NativeIndicator,
+  default: NullIndicator,
+});
+
+/**
+ * Props for progress indicator components
+ */
+type IndicatorProps = {
+  value: number | undefined | null;
+  className?: string;
+};
+
+/**
+ * Web-specific progress indicator using CSS transforms
+ *
+ * @platform web
+ */
+function WebIndicator({ value, className }: IndicatorProps) {
+  if (Platform.OS !== 'web') {
+    return null;
+  }
+
+  return (
+    <View
+      className={cn(
+        'bg-primary h-full w-full flex-1 transition-all',
+        className
+      )}
+      style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }}
+    >
+      <ProgressPrimitive.Indicator className={cn('h-full w-full', className)} />
+    </View>
+  );
+}
+
+/**
+ * Native-specific progress indicator using Reanimated
+ *
+ * Provides smooth spring animations for progress changes.
+ *
+ * @platform native
+ */
+function NativeIndicator({ value, className }: IndicatorProps) {
+  const progress = useDerivedValue(() => value ?? 0);
+
+  const indicator = useAnimatedStyle(() => {
+    return {
+      width: withSpring(
+        `${interpolate(progress.value, [0, 100], [1, 100], Extrapolation.CLAMP)}%`,
+        { overshootClamping: true }
+      ),
+    };
+  }, [value]);
+
+  if (Platform.OS === 'web') {
+    return null;
+  }
+
+  return (
+    <ProgressPrimitive.Indicator asChild>
+      <Animated.View
+        style={indicator}
+        className={cn('bg-foreground h-full', className)}
+      />
+    </ProgressPrimitive.Indicator>
+  );
+}
+
+/**
+ * Null indicator fallback for unsupported platforms
+ */
+function NullIndicator(_props: IndicatorProps) {
+  return null;
+}