@campxdev/react-native-blueprint 0.1.0

package/src/components/ui/Dropdown-Menu.tsx

@@ -0,0 +1,544 @@
+import { Icon } from './Icon';
+import { NativeOnlyAnimatedView } from './Native-Only-Animated-View';
+import { TextClassContext } from './Text';
+import { cn } from '../../lib/utils';
+import * as DropdownMenuPrimitive from '@rn-primitives/dropdown-menu';
+import {
+  Check,
+  ChevronDown,
+  ChevronRight,
+  ChevronUp,
+} from 'lucide-react-native';
+import * as React from 'react';
+import {
+  Platform,
+  type StyleProp,
+  StyleSheet,
+  Text,
+  type TextProps,
+  View,
+  type ViewStyle,
+} from 'react-native';
+import { cssInterop } from 'nativewind';
+import { FadeIn } from 'react-native-reanimated';
+import { FullWindowOverlay as RNFullWindowOverlay } from 'react-native-screens';
+
+cssInterop(View, { className: 'style' });
+cssInterop(Text, { className: 'style' });
+
+/**
+ * Root component for dropdown menu - provides context for all dropdown menu children
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <DropdownMenu>
+ *   <DropdownMenuTrigger>
+ *     <Button variant="outline">
+ *       <Text>Open Menu</Text>
+ *     </Button>
+ *   </DropdownMenuTrigger>
+ *   <DropdownMenuContent>
+ *     <DropdownMenuItem>
+ *       <Text>Profile</Text>
+ *     </DropdownMenuItem>
+ *   </DropdownMenuContent>
+ * </DropdownMenu>
+ * ```
+ */
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+/**
+ * Trigger component that opens the dropdown menu when pressed
+ *
+ * @component
+ */
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+/**
+ * Groups related menu items together
+ *
+ * @component
+ */
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+/**
+ * Portal component to render menu content outside the DOM hierarchy
+ *
+ * @component
+ */
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+/**
+ * Root component for nested submenu
+ *
+ * @component
+ */
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+/**
+ * Groups radio items together with single selection
+ *
+ * @component
+ */
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+/**
+ * Trigger for opening a nested submenu
+ *
+ * Displays a chevron icon that indicates expandable content. The icon direction
+ * changes based on platform and submenu state.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <DropdownMenuSub>
+ *   <DropdownMenuSubTrigger>
+ *     <Text>More Options</Text>
+ *   </DropdownMenuSubTrigger>
+ *   <DropdownMenuSubContent>
+ *     <DropdownMenuItem>
+ *       <Text>Nested Item</Text>
+ *     </DropdownMenuItem>
+ *   </DropdownMenuSubContent>
+ * </DropdownMenuSub>
+ * ```
+ */
+function DropdownMenuSubTrigger({
+  className: _className,
+  inset,
+  children,
+  iconClassName,
+  ...props
+}: DropdownMenuPrimitive.SubTriggerProps &
+  React.RefAttributes<DropdownMenuPrimitive.SubTriggerRef> & {
+    children?: React.ReactNode;
+    iconClassName?: string;
+    inset?: boolean;
+  }) {
+  const { open } = DropdownMenuPrimitive.useSubContext();
+  const icon =
+    Platform.OS === 'web' ? ChevronRight : open ? ChevronUp : ChevronDown;
+  return (
+    <TextClassContext.Provider
+      value={cn(
+        'text-sm select-none group-active:text-accent-foreground',
+        open && 'text-accent-foreground'
+      )}
+    >
+      <DropdownMenuPrimitive.SubTrigger
+        className={cn(
+          'active:bg-accent group flex flex-row items-center rounded-sm px-2 py-2 sm:py-1.5',
+          Platform.select({
+            web: 'focus:bg-accent focus:text-accent-foreground cursor-default outline-none [&_svg]:pointer-events-none',
+          }),
+          open && 'bg-accent',
+          inset && 'pl-8'
+        )}
+        {...props}
+      >
+        <>{children}</>
+        <Icon
+          as={icon}
+          className={cn(
+            'text-foreground ml-auto size-4 shrink-0',
+            iconClassName
+          )}
+        />
+      </DropdownMenuPrimitive.SubTrigger>
+    </TextClassContext.Provider>
+  );
+}
+
+/**
+ * Content container for nested submenu items
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <DropdownMenuSubContent>
+ *   <DropdownMenuItem>
+ *     <Text>Submenu Item</Text>
+ *   </DropdownMenuItem>
+ * </DropdownMenuSubContent>
+ * ```
+ */
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: DropdownMenuPrimitive.SubContentProps &
+  React.RefAttributes<DropdownMenuPrimitive.SubContentRef>) {
+  return (
+    <NativeOnlyAnimatedView entering={FadeIn}>
+      <DropdownMenuPrimitive.SubContent
+        className={cn(
+          'bg-popover border-border overflow-hidden rounded-md border p-1 shadow-lg shadow-black/5',
+          Platform.select({
+            web: 'animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fade-in-0 data-[state=closed]:zoom-out-95 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-context-menu-content-transform-origin) z-50 min-w-[8rem]',
+          }),
+          className
+        )}
+        {...props}
+      />
+    </NativeOnlyAnimatedView>
+  );
+}
+
+/**
+ * Full window overlay wrapper for iOS, Fragment for other platforms
+ */
+const FullWindowOverlay =
+  Platform.OS === 'ios' ? RNFullWindowOverlay : React.Fragment;
+
+/**
+ * Main content container for dropdown menu items
+ *
+ * Renders menu items in a popover with proper positioning, animations,
+ * and overlay handling. Uses a portal to render outside the parent hierarchy.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <DropdownMenuContent>
+ *   <DropdownMenuItem>
+ *     <Text>Profile</Text>
+ *   </DropdownMenuItem>
+ *   <DropdownMenuSeparator />
+ *   <DropdownMenuItem>
+ *     <Text>Settings</Text>
+ *   </DropdownMenuItem>
+ * </DropdownMenuContent>
+ * ```
+ *
+ * @accessibility
+ * - Properly handles focus management
+ * - Supports keyboard navigation
+ * - Screen reader friendly menu structure
+ */
+function DropdownMenuContent({
+  className,
+  overlayClassName,
+  overlayStyle,
+  portalHost,
+  ...props
+}: DropdownMenuPrimitive.ContentProps &
+  React.RefAttributes<DropdownMenuPrimitive.ContentRef> & {
+    overlayStyle?: StyleProp<ViewStyle>;
+    overlayClassName?: string;
+    portalHost?: string;
+  }) {
+  return (
+    <DropdownMenuPrimitive.Portal hostName={portalHost}>
+      <FullWindowOverlay>
+        <DropdownMenuPrimitive.Overlay
+          style={Platform.select({
+            web: overlayStyle ?? undefined,
+            native: overlayStyle
+              ? StyleSheet.flatten([
+                  StyleSheet.absoluteFill,
+                  overlayStyle as typeof StyleSheet.absoluteFill,
+                ])
+              : StyleSheet.absoluteFill,
+          })}
+          className={overlayClassName}
+        >
+          <NativeOnlyAnimatedView entering={FadeIn}>
+            <TextClassContext.Provider value="text-popover-foreground">
+              <DropdownMenuPrimitive.Content
+                className={cn(
+                  'bg-popover border-border min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg shadow-black/5',
+                  Platform.select({
+                    web: cn(
+                      'animate-in fade-in-0 zoom-in-95 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) z-50 cursor-default',
+                      props.side === 'bottom' && 'slide-in-from-top-2',
+                      props.side === 'top' && 'slide-in-from-bottom-2'
+                    ),
+                  }),
+                  className
+                )}
+                {...props}
+              />
+            </TextClassContext.Provider>
+          </NativeOnlyAnimatedView>
+        </DropdownMenuPrimitive.Overlay>
+      </FullWindowOverlay>
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+
+/**
+ * Individual menu item component
+ *
+ * Supports both default and destructive variants for different actions.
+ * Includes proper hover, active, and focus states.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <DropdownMenuItem onSelect={() => console.log('Selected')}>
+ *   <Text>Edit Profile</Text>
+ * </DropdownMenuItem>
+ *
+ * <DropdownMenuItem variant="destructive">
+ *   <Text>Delete Account</Text>
+ * </DropdownMenuItem>
+ * ```
+ *
+ * @accessibility
+ * - Disabled items cannot be interacted with
+ * - Proper focus indicators on web
+ */
+function DropdownMenuItem({
+  className,
+  inset,
+  variant,
+  ...props
+}: DropdownMenuPrimitive.ItemProps &
+  React.RefAttributes<DropdownMenuPrimitive.ItemRef> & {
+    className?: string;
+    inset?: boolean;
+    variant?: 'default' | 'destructive';
+  }) {
+  return (
+    <TextClassContext.Provider
+      value={cn(
+        'select-none text-sm text-popover-foreground group-active:text-popover-foreground',
+        variant === 'destructive' &&
+          'text-destructive group-active:text-destructive'
+      )}
+    >
+      <DropdownMenuPrimitive.Item
+        className={cn(
+          'active:bg-accent group relative flex flex-row items-center gap-2 rounded-sm px-2 py-2 sm:py-1.5',
+          Platform.select({
+            web: cn(
+              'focus:bg-accent focus:text-accent-foreground cursor-default outline-none data-[disabled]:pointer-events-none',
+              variant === 'destructive' &&
+                'focus:bg-destructive/10 dark:focus:bg-destructive/20'
+            ),
+          }),
+          variant === 'destructive' &&
+            'active:bg-destructive/10 dark:active:bg-destructive/20',
+          props.disabled && 'opacity-50',
+          inset && 'pl-8',
+          className
+        )}
+        {...props}
+      />
+    </TextClassContext.Provider>
+  );
+}
+
+/**
+ * Menu item with checkbox for multi-selection
+ *
+ * Shows a checkmark when selected. Useful for toggling multiple options.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <DropdownMenuCheckboxItem
+ *   checked={showPanel}
+ *   onCheckedChange={setShowPanel}
+ * >
+ *   <Text>Show Side Panel</Text>
+ * </DropdownMenuCheckboxItem>
+ * ```
+ */
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  ...props
+}: DropdownMenuPrimitive.CheckboxItemProps &
+  React.RefAttributes<DropdownMenuPrimitive.CheckboxItemRef> & {
+    children?: React.ReactNode;
+  }) {
+  return (
+    <TextClassContext.Provider value="text-sm text-popover-foreground select-none group-active:text-accent-foreground">
+      <DropdownMenuPrimitive.CheckboxItem
+        className={cn(
+          'active:bg-accent group relative flex flex-row items-center gap-2 rounded-sm py-2 pl-8 pr-2 sm:py-1.5',
+          Platform.select({
+            web: 'focus:bg-accent focus:text-accent-foreground cursor-default outline-none data-[disabled]:pointer-events-none',
+          }),
+          props.disabled && 'opacity-50',
+          className
+        )}
+        {...props}
+      >
+        <View className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+          <DropdownMenuPrimitive.ItemIndicator>
+            <Icon
+              as={Check}
+              className={cn(
+                'text-foreground size-4',
+                Platform.select({ web: 'pointer-events-none' })
+              )}
+            />
+          </DropdownMenuPrimitive.ItemIndicator>
+        </View>
+        <>{children}</>
+      </DropdownMenuPrimitive.CheckboxItem>
+    </TextClassContext.Provider>
+  );
+}
+
+/**
+ * Menu item with radio button for single selection within a group
+ *
+ * Shows a filled circle when selected. Use within DropdownMenuRadioGroup.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <DropdownMenuRadioGroup value={sortBy} onValueChange={setSortBy}>
+ *   <DropdownMenuRadioItem value="name">
+ *     <Text>Sort by Name</Text>
+ *   </DropdownMenuRadioItem>
+ *   <DropdownMenuRadioItem value="date">
+ *     <Text>Sort by Date</Text>
+ *   </DropdownMenuRadioItem>
+ * </DropdownMenuRadioGroup>
+ * ```
+ */
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: DropdownMenuPrimitive.RadioItemProps &
+  React.RefAttributes<DropdownMenuPrimitive.RadioItemRef> & {
+    children?: React.ReactNode;
+  }) {
+  return (
+    <TextClassContext.Provider value="text-sm text-popover-foreground select-none group-active:text-accent-foreground">
+      <DropdownMenuPrimitive.RadioItem
+        className={cn(
+          'active:bg-accent group relative flex flex-row items-center gap-2 rounded-sm py-2 pl-8 pr-2 sm:py-1.5',
+          Platform.select({
+            web: 'focus:bg-accent focus:text-accent-foreground cursor-default outline-none data-[disabled]:pointer-events-none',
+          }),
+          props.disabled && 'opacity-50',
+          className
+        )}
+        {...props}
+      >
+        <View className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+          <DropdownMenuPrimitive.ItemIndicator>
+            <View className="bg-foreground h-2 w-2 rounded-full" />
+          </DropdownMenuPrimitive.ItemIndicator>
+        </View>
+        <>{children}</>
+      </DropdownMenuPrimitive.RadioItem>
+    </TextClassContext.Provider>
+  );
+}
+
+/**
+ * Label component for grouping and describing menu sections
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <DropdownMenuLabel>
+ *   <Text>Account</Text>
+ * </DropdownMenuLabel>
+ * <DropdownMenuItem>
+ *   <Text>Profile</Text>
+ * </DropdownMenuItem>
+ * ```
+ */
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: DropdownMenuPrimitive.LabelProps &
+  React.RefAttributes<DropdownMenuPrimitive.LabelRef> & {
+    className?: string;
+    inset?: boolean;
+  }) {
+  return (
+    <DropdownMenuPrimitive.Label
+      className={cn(
+        'text-foreground px-2 py-2 text-sm font-medium sm:py-1.5',
+        inset && 'pl-8',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Visual separator between menu items or sections
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <DropdownMenuItem>
+ *   <Text>Edit</Text>
+ * </DropdownMenuItem>
+ * <DropdownMenuSeparator />
+ * <DropdownMenuItem variant="destructive">
+ *   <Text>Delete</Text>
+ * </DropdownMenuItem>
+ * ```
+ */
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: DropdownMenuPrimitive.SeparatorProps &
+  React.RefAttributes<DropdownMenuPrimitive.SeparatorRef>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Displays keyboard shortcut hint for menu items
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <DropdownMenuItem>
+ *   <Text>Save</Text>
+ *   <DropdownMenuShortcut>
+ *     <Text>⌘S</Text>
+ *   </DropdownMenuShortcut>
+ * </DropdownMenuItem>
+ * ```
+ */
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: TextProps & React.RefAttributes<Text>) {
+  return (
+    <Text
+      className={cn(
+        'text-muted-foreground ml-auto text-xs tracking-widest',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+};

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

@@ -0,0 +1,54 @@
+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;