@campxdev/react-native-blueprint 0.1.13 → 0.1.14

package/src/components/ui/Dialog.tsx

@@ -1,250 +0,0 @@
-import { Icon } from './Icon';
-import { NativeOnlyAnimatedView } from './Native-Only-Animated-View';
-import { cn } from '../../lib/utils';
-import * as DialogPrimitive from '@rn-primitives/dialog';
-import { X } from 'lucide-react-native';
-import * as React from 'react';
-import {
-  Platform,
-  Text as RNText,
-  View as RNView,
-  type ViewProps,
-} from 'react-native';
-import { cssInterop } from 'nativewind';
-import { FadeIn, FadeOut } from 'react-native-reanimated';
-import { FullWindowOverlay as RNFullWindowOverlay } from 'react-native-screens';
-
-const View = cssInterop(RNView, {
-  className: 'style',
-}) as React.ComponentType<any>;
-const Text = cssInterop(RNText, {
-  className: 'style',
-}) as React.ComponentType<any>;
-
-/**
- * Root dialog container
- *
- * A modal window that overlays the main content and requires user interaction.
- * Unlike AlertDialog, this is for non-critical content that doesn't require immediate action.
- *
- * @component
- * @example
- * ```tsx
- * <Dialog>
- *   <DialogTrigger asChild>
- *     <Button><Text>Open Dialog</Text></Button>
- *   </DialogTrigger>
- *   <DialogContent>
- *     <DialogHeader>
- *       <DialogTitle><Text>Edit Profile</Text></DialogTitle>
- *       <DialogDescription><Text>Make changes to your profile</Text></DialogDescription>
- *     </DialogHeader>
- *     <DialogFooter>
- *       <Button><Text>Save</Text></Button>
- *     </DialogFooter>
- *   </DialogContent>
- * </Dialog>
- * ```
- */
-const Dialog = DialogPrimitive.Root;
-
-/**
- * Trigger button that opens the dialog
- */
-const DialogTrigger = DialogPrimitive.Trigger;
-
-/**
- * Portal component for rendering dialog outside DOM hierarchy
- */
-const DialogPortal = DialogPrimitive.Portal;
-
-/**
- * Close button component for manually closing the dialog
- */
-const DialogClose = DialogPrimitive.Close;
-
-const FullWindowOverlay =
-  Platform.OS === 'ios' ? RNFullWindowOverlay : React.Fragment;
-
-/**
- * Semi-transparent overlay behind the dialog
- *
- * Provides backdrop that dims background content. Uses platform-specific
- * full window overlay on iOS for proper z-index layering.
- */
-function DialogOverlay({
-  className,
-  children,
-  ...props
-}: Omit<DialogPrimitive.OverlayProps, 'asChild'> &
-  React.RefAttributes<DialogPrimitive.OverlayRef> & {
-    children?: React.ReactNode;
-  }) {
-  return (
-    <FullWindowOverlay>
-      <DialogPrimitive.Overlay
-        className={cn(
-          'absolute bottom-0 left-0 right-0 top-0 z-50 flex items-center justify-center bg-black/50 p-2',
-          Platform.select({
-            web: 'animate-in fade-in-0 fixed cursor-default [&>*]:cursor-auto',
-          }),
-          className
-        )}
-        {...props}
-        asChild={Platform.OS !== 'web'}
-      >
-        <NativeOnlyAnimatedView
-          entering={FadeIn.duration(200)}
-          exiting={FadeOut.duration(150)}
-        >
-          <NativeOnlyAnimatedView
-            entering={FadeIn.delay(50)}
-            exiting={FadeOut.duration(150)}
-          >
-            <>{children}</>
-          </NativeOnlyAnimatedView>
-        </NativeOnlyAnimatedView>
-      </DialogPrimitive.Overlay>
-    </FullWindowOverlay>
-  );
-}
-
-/**
- * Main dialog content container
- *
- * Contains the actual dialog UI with automatic close button in top-right corner.
- * Includes smooth fade and zoom animations.
- *
- * @param {string} [portalHost] - Optional portal host name for custom rendering location
- * @param {string} [className] - Additional Tailwind classes
- */
-function DialogContent({
-  className,
-  portalHost,
-  children,
-  ...props
-}: DialogPrimitive.ContentProps &
-  React.RefAttributes<DialogPrimitive.ContentRef> & {
-    portalHost?: string;
-  }) {
-  return (
-    <DialogPortal hostName={portalHost}>
-      <DialogOverlay>
-        <DialogPrimitive.Content
-          className={cn(
-            'bg-background border-border z-50 mx-auto flex w-full max-w-[calc(100%-2rem)] flex-col gap-4 rounded-lg border p-6 shadow-lg shadow-black/5 sm:max-w-lg',
-            Platform.select({
-              web: 'animate-in fade-in-0 zoom-in-95 duration-200',
-            }),
-            className
-          )}
-          {...props}
-        >
-          <>{children}</>
-
-          <DialogPrimitive.Close
-            className={cn(
-              'absolute right-4 top-4 rounded opacity-70 active:opacity-100',
-              Platform.select({
-                web: 'ring-offset-background focus:ring-ring data-[state=open]:bg-accent transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2',
-              })
-            )}
-            hitSlop={12}
-          >
-            <Icon
-              as={X}
-              className={cn(
-                'text-accent-foreground web:pointer-events-none size-4 shrink-0'
-              )}
-            />
-            <Text className="sr-only">Close</Text>
-          </DialogPrimitive.Close>
-        </DialogPrimitive.Content>
-      </DialogOverlay>
-    </DialogPortal>
-  );
-}
-
-/**
- * Dialog header container
- *
- * Contains title and description with appropriate spacing and alignment.
- * Centered on mobile, left-aligned on larger screens.
- */
-function DialogHeader({ className, ...props }: ViewProps) {
-  return (
-    <View
-      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
-      {...props}
-    />
-  );
-}
-
-/**
- * Dialog footer container
- *
- * Contains action buttons. Stacked vertically on mobile (reverse order),
- * horizontal row on larger screens (right-aligned).
- */
-function DialogFooter({ className, ...props }: ViewProps) {
-  return (
-    <View
-      className={cn(
-        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-/**
- * Dialog title component
- *
- * Large, semibold heading for the dialog. Automatically announced by screen readers.
- */
-function DialogTitle({
-  className,
-  ...props
-}: DialogPrimitive.TitleProps & React.RefAttributes<DialogPrimitive.TitleRef>) {
-  return (
-    <DialogPrimitive.Title
-      className={cn(
-        'text-foreground text-lg font-semibold leading-none',
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-/**
- * Dialog description component
- *
- * Muted text providing additional context or instructions for the dialog.
- */
-function DialogDescription({
-  className,
-  ...props
-}: DialogPrimitive.DescriptionProps &
-  React.RefAttributes<DialogPrimitive.DescriptionRef>) {
-  return (
-    <DialogPrimitive.Description
-      className={cn('text-muted-foreground text-sm', className)}
-      {...props}
-    />
-  );
-}
-
-export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-};

package/src/components/ui/Floating-Action.tsx

@@ -1,54 +0,0 @@
-import React from 'react';
-import type { IFloatingActionProps as RNFloatingActionProps } from 'react-native-floating-action';
-import { FloatingAction as RNFloatingAction } from 'react-native-floating-action';
-
-export interface FloatingActionProps extends RNFloatingActionProps {
-  /**
-   * Custom className for styling (if using NativeWind)
-   */
-  className?: string;
-}
-
-/**
- * FloatingAction Component
- *
- * A customizable floating action button (FAB) component with support for multiple actions.
- * Based on react-native-floating-action with additional styling capabilities.
- *
- * @example
- * ```tsx
- * import { FloatingAction } from 'react-native-blueprint';
- *
- * const actions = [
- *   {
- *     text: 'Add',
- *     icon: require('./add-icon.png'),
- *     name: 'bt_add',
- *     position: 1
- *   },
- *   {
- *     text: 'Delete',
- *     icon: require('./delete-icon.png'),
- *     name: 'bt_delete',
- *     position: 2
- *   }
- * ];
- *
- * <FloatingAction
- *   actions={actions}
- *   onPressItem={(name) => {
- *     console.log(`Selected button: ${name}`);
- *   }}
- * />
- * ```
- */
-export const FloatingAction: React.FC<FloatingActionProps> = React.forwardRef<
-  RNFloatingAction,
-  FloatingActionProps
->(({ className: _className, ...props }, ref) => {
-  return <RNFloatingAction ref={ref} {...props} />;
-});
-
-FloatingAction.displayName = 'FloatingAction';
-
-export default FloatingAction;

package/src/components/ui/NavBar.tsx

@@ -1,403 +0,0 @@
-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',
-}) as React.ComponentType<any>;
-const Pressable = cssInterop(RNPressable, {
-  className: 'style',
-}) as React.ComponentType<any>;
-const SafeAreaView = cssInterop(RNSafeAreaView, {
-  className: 'style',
-}) as React.ComponentType<any>;
-
-/**
- * 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 };