@campxdev/react-native-blueprint 0.1.0

package/src/components/ui/Input.tsx

@@ -0,0 +1,90 @@
+import { cn } from '../../lib/utils';
+import { Platform, TextInput, type TextInputProps } from 'react-native';
+import { cssInterop } from 'nativewind';
+
+cssInterop(TextInput, { className: 'style' });
+
+/**
+ * Props for Input component
+ *
+ * @extends TextInputProps - All standard React Native TextInput props
+ * @property {string} [className] - Additional Tailwind classes for custom styling
+ * @property {boolean} [editable=true] - Whether the input is editable (disabled when false)
+ */
+interface InputProps extends TextInputProps {
+  className?: string;
+}
+
+/**
+ * A styled text input component with consistent design across platforms
+ *
+ * Features platform-specific behaviors:
+ * - Web: Focus ring, selection styling, aria-invalid support
+ * - Native: Optimized placeholder opacity and input styling
+ *
+ * Automatically adapts styling when disabled/non-editable.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic input
+ * <Input
+ *   placeholder="Enter your name"
+ *   value={name}
+ *   onChangeText={setName}
+ * />
+ *
+ * // Disabled input
+ * <Input
+ *   value="Read only"
+ *   editable={false}
+ * />
+ *
+ * // With custom styling
+ * <Input
+ *   className="border-primary"
+ *   placeholder="Search..."
+ * />
+ * ```
+ *
+ * @accessibility
+ * - Supports aria-invalid for form validation states (web)
+ * - Placeholder text uses appropriate contrast colors
+ * - Disabled state is visually indicated with opacity
+ */
+function Input({
+  className,
+  editable = true,
+  ...props
+}: InputProps & React.RefAttributes<TextInput>) {
+  return (
+    <TextInput
+      className={cn(
+        'bg-background dark:bg-background border-input dark:border-input text-foreground dark:text-foreground flex h-10 w-full min-w-0 flex-row items-center rounded-md border px-3 py-1 text-base leading-5 shadow-sm shadow-black/5 dark:shadow-white/5 sm:h-9',
+        !editable &&
+          cn(
+            'opacity-50',
+            Platform.select({
+              web: 'disabled:pointer-events-none disabled:cursor-not-allowed',
+            })
+          ),
+        Platform.select({
+          web: cn(
+            'placeholder:text-muted-foreground dark:placeholder:text-muted-foreground selection:bg-primary dark:selection:bg-primary selection:text-primary-foreground dark:selection:text-primary-foreground outline-none transition-[color,box-shadow] md:text-sm',
+            'focus-visible:border-ring dark:focus-visible:border-ring focus-visible:ring-ring/50 dark:focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+            'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive'
+          ),
+          native:
+            'placeholder:text-muted-foreground/50 dark:placeholder:text-muted-foreground/50',
+        }),
+        className
+      )}
+      placeholderTextColor={undefined}
+      editable={editable}
+      {...props}
+    />
+  );
+}
+
+export { Input };
+export type { InputProps };

package/src/components/ui/Label.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+import { Text } from './Text';
+import type { SlottableTextProps, TextRef } from '@rn-primitives/types';
+
+/**
+ * Accessible label component for form controls
+ *
+ * Provides semantic labeling for form inputs with proper styling and accessibility support.
+ * Automatically associates with form controls and respects disabled states.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Label with input
+ * <View className="gap-2">
+ *   <Label htmlFor="email">Email Address</Label>
+ *   <Input id="email" placeholder="Enter email" />
+ * </View>
+ *
+ * // Label for checkbox
+ * <View className="flex-row items-center gap-2">
+ *   <Checkbox id="terms" />
+ *   <Label htmlFor="terms">I agree to the terms and conditions</Label>
+ * </View>
+ * ```
+ *
+ * @accessibility
+ * - Properly associates with form controls via htmlFor/id
+ * - Reduced opacity when associated control is disabled
+ * - Screen reader compatible
+ */
+const Label = React.forwardRef<
+  TextRef,
+  SlottableTextProps & { className?: string }
+>(({ className, ...props }, ref) => (
+  <Text
+    className={cn(
+      'text-sm native:text-base font-medium leading-none text-foreground dark:text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+      className
+    )}
+    ref={ref}
+    {...props}
+  />
+));
+Label.displayName = 'Label';
+
+export { Label };

package/src/components/ui/Menubar.tsx

@@ -0,0 +1,509 @@
+import { Icon } from './Icon';
+import { NativeOnlyAnimatedView } from './Native-Only-Animated-View';
+import { TextClassContext } from './Text';
+import { cn } from '../../lib/utils';
+import * as MenubarPrimitive from '@rn-primitives/menubar';
+import { Portal } from '@rn-primitives/portal';
+import {
+  Check,
+  ChevronDown,
+  ChevronRight,
+  ChevronUp,
+} from 'lucide-react-native';
+import * as React from 'react';
+import {
+  Platform,
+  Pressable,
+  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' });
+cssInterop(Pressable, { className: 'style' });
+
+/**
+ * Individual menu within the menubar
+ *
+ * @component
+ */
+const MenubarMenu = MenubarPrimitive.Menu;
+
+/**
+ * Groups related menu items together
+ *
+ * @component
+ */
+const MenubarGroup = MenubarPrimitive.Group;
+
+/**
+ * Portal component to render menu content outside the DOM hierarchy
+ *
+ * @component
+ */
+const MenubarPortal = MenubarPrimitive.Portal;
+
+/**
+ * Root component for nested submenu
+ *
+ * @component
+ */
+const MenubarSub = MenubarPrimitive.Sub;
+
+/**
+ * Groups radio items together with single selection
+ *
+ * @component
+ */
+const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
+
+/**
+ * Full window overlay wrapper for iOS, Fragment for other platforms
+ */
+const FullWindowOverlay =
+  Platform.OS === 'ios' ? RNFullWindowOverlay : React.Fragment;
+
+/**
+ * Root menubar component for application-level menu navigation
+ *
+ * Provides horizontal menu bar similar to desktop applications, with support
+ * for nested menus and automatic close on outside press.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Menubar>
+ *   <MenubarMenu>
+ *     <MenubarTrigger>
+ *       <Text>File</Text>
+ *     </MenubarTrigger>
+ *     <MenubarContent>
+ *       <MenubarItem>
+ *         <Text>New File</Text>
+ *       </MenubarItem>
+ *       <MenubarItem>
+ *         <Text>Open</Text>
+ *       </MenubarItem>
+ *     </MenubarContent>
+ *   </MenubarMenu>
+ * </Menubar>
+ * ```
+ *
+ * @accessibility
+ * - Keyboard navigation support
+ * - Proper ARIA attributes for menu structure
+ */
+function Menubar({
+  className,
+  value: valueProp,
+  onValueChange: onValueChangeProp,
+  ...props
+}: MenubarPrimitive.RootProps & React.RefAttributes<MenubarPrimitive.RootRef>) {
+  const id = React.useId();
+  const [value, setValue] = React.useState<string | undefined>(undefined);
+
+  function closeMenu() {
+    if (onValueChangeProp) {
+      onValueChangeProp(undefined);
+      return;
+    }
+    setValue(undefined);
+  }
+
+  return (
+    <>
+      {Platform.OS !== 'web' && (value || valueProp) ? (
+        <Portal name={`menubar-overlay-${id}`}>
+          <Pressable onPress={closeMenu} style={StyleSheet.absoluteFill} />
+        </Portal>
+      ) : null}
+      <MenubarPrimitive.Root
+        className={cn(
+          'bg-background border-border flex h-10 flex-row items-center gap-1 rounded-md border p-1 shadow-sm shadow-black/5 sm:h-9',
+          className
+        )}
+        value={value ?? valueProp}
+        onValueChange={onValueChangeProp ?? setValue}
+        {...props}
+      />
+    </>
+  );
+}
+
+/**
+ * Trigger button for a menubar menu
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <MenubarTrigger>
+ *   <Text>Edit</Text>
+ * </MenubarTrigger>
+ * ```
+ */
+function MenubarTrigger({
+  className,
+  ...props
+}: MenubarPrimitive.TriggerProps &
+  React.RefAttributes<MenubarPrimitive.TriggerRef>) {
+  const { value } = MenubarPrimitive.useRootContext();
+  const { value: itemValue } = MenubarPrimitive.useMenuContext();
+
+  return (
+    <TextClassContext.Provider
+      value={cn(
+        'text-sm font-medium select-none group-active:text-accent-foreground',
+        value === itemValue && 'text-accent-foreground'
+      )}
+    >
+      <MenubarPrimitive.Trigger
+        className={cn(
+          'group flex items-center rounded-md px-2 py-1.5 sm:py-1',
+          Platform.select({
+            web: 'focus:bg-accent focus:text-accent-foreground cursor-default outline-none',
+          }),
+          value === itemValue && 'bg-accent',
+          className
+        )}
+        {...props}
+      />
+    </TextClassContext.Provider>
+  );
+}
+
+/**
+ * Trigger for opening a nested submenu
+ * @component
+ */
+function MenubarSubTrigger({
+  className: _className,
+  inset,
+  children,
+  iconClassName,
+  ...props
+}: MenubarPrimitive.SubTriggerProps &
+  React.RefAttributes<MenubarPrimitive.SubTriggerRef> & {
+    children?: React.ReactNode;
+    iconClassName?: string;
+    inset?: boolean;
+  }) {
+  const { open } = MenubarPrimitive.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'
+      )}
+    >
+      <MenubarPrimitive.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
+          )}
+        />
+      </MenubarPrimitive.SubTrigger>
+    </TextClassContext.Provider>
+  );
+}
+
+/**
+ * Content container for nested submenu items
+ * @component
+ */
+function MenubarSubContent({
+  className,
+  ...props
+}: MenubarPrimitive.SubContentProps &
+  React.RefAttributes<MenubarPrimitive.SubContentRef>) {
+  return (
+    <NativeOnlyAnimatedView entering={FadeIn}>
+      <MenubarPrimitive.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>
+  );
+}
+
+/**
+ * Main content container for menu items
+ * @component
+ */
+function MenubarContent({
+  className,
+  overlayClassName: _overlayClassName,
+  overlayStyle: _overlayStyle,
+  portalHost,
+  align = 'start',
+  alignOffset = -4,
+  sideOffset = 8,
+  ...props
+}: MenubarPrimitive.ContentProps &
+  React.RefAttributes<MenubarPrimitive.ContentRef> & {
+    overlayStyle?: StyleProp<ViewStyle>;
+    overlayClassName?: string;
+    portalHost?: string;
+  }) {
+  return (
+    <MenubarPrimitive.Portal hostName={portalHost}>
+      <FullWindowOverlay>
+        <NativeOnlyAnimatedView
+          entering={FadeIn}
+          style={StyleSheet.absoluteFill}
+          pointerEvents="box-none"
+        >
+          <TextClassContext.Provider value="text-popover-foreground">
+            <MenubarPrimitive.Content
+              className={cn(
+                'bg-popover border-border min-w-[12rem] 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
+              )}
+              align={align}
+              alignOffset={alignOffset}
+              sideOffset={sideOffset}
+              {...props}
+            />
+          </TextClassContext.Provider>
+        </NativeOnlyAnimatedView>
+      </FullWindowOverlay>
+    </MenubarPrimitive.Portal>
+  );
+}
+
+/**
+ * Individual menu item component
+ * @component
+ */
+function MenubarItem({
+  className,
+  inset,
+  variant,
+  ...props
+}: MenubarPrimitive.ItemProps &
+  React.RefAttributes<MenubarPrimitive.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'
+      )}
+    >
+      <MenubarPrimitive.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
+ * @component
+ */
+function MenubarCheckboxItem({
+  className,
+  children,
+  ...props
+}: MenubarPrimitive.CheckboxItemProps &
+  React.RefAttributes<MenubarPrimitive.CheckboxItemRef> & {
+    children?: React.ReactNode;
+  }) {
+  return (
+    <TextClassContext.Provider value="text-sm text-popover-foreground select-none group-active:text-accent-foreground">
+      <MenubarPrimitive.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">
+          <MenubarPrimitive.ItemIndicator>
+            <Icon
+              as={Check}
+              className={cn(
+                'text-foreground size-4',
+                Platform.select({ web: 'pointer-events-none' })
+              )}
+            />
+          </MenubarPrimitive.ItemIndicator>
+        </View>
+        <>{children}</>
+      </MenubarPrimitive.CheckboxItem>
+    </TextClassContext.Provider>
+  );
+}
+
+/**
+ * Menu item with radio button for single selection within a group
+ * @component
+ */
+function MenubarRadioItem({
+  className,
+  children,
+  ...props
+}: MenubarPrimitive.RadioItemProps &
+  React.RefAttributes<MenubarPrimitive.RadioItemRef> & {
+    children?: React.ReactNode;
+  }) {
+  return (
+    <TextClassContext.Provider value="text-sm text-popover-foreground select-none group-active:text-accent-foreground">
+      <MenubarPrimitive.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">
+          <MenubarPrimitive.ItemIndicator>
+            <View className="bg-foreground h-2 w-2 rounded-full" />
+          </MenubarPrimitive.ItemIndicator>
+        </View>
+        <>{children}</>
+      </MenubarPrimitive.RadioItem>
+    </TextClassContext.Provider>
+  );
+}
+
+/**
+ * Label component for grouping and describing menu sections
+ * @component
+ */
+function MenubarLabel({
+  className,
+  inset,
+  ...props
+}: MenubarPrimitive.LabelProps &
+  React.RefAttributes<MenubarPrimitive.LabelRef> & {
+    className?: string;
+    inset?: boolean;
+  }) {
+  return (
+    <MenubarPrimitive.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
+ */
+function MenubarSeparator({
+  className,
+  ...props
+}: MenubarPrimitive.SeparatorProps &
+  React.RefAttributes<MenubarPrimitive.SeparatorRef>) {
+  return (
+    <MenubarPrimitive.Separator
+      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Displays keyboard shortcut hint for menu items
+ * @component
+ */
+function MenubarShortcut({
+  className,
+  ...props
+}: TextProps & React.RefAttributes<Text>) {
+  return (
+    <Text
+      className={cn(
+        'text-muted-foreground ml-auto text-xs tracking-widest',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarGroup,
+  MenubarItem,
+  MenubarLabel,
+  MenubarMenu,
+  MenubarPortal,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+};

package/src/components/ui/Native-Only-Animated-View.tsx

@@ -0,0 +1,37 @@
+import { Platform } from 'react-native';
+import Animated from 'react-native-reanimated';
+
+/**
+ * Platform-conditional animated view component
+ *
+ * Renders an Animated.View on native platforms (iOS/Android) and a React Fragment
+ * on web. This utility helps maintain consistent animation APIs across platforms
+ * while avoiding web-incompatible animations.
+ *
+ * Used internally by other components like Dialog, Popover, Tooltip, etc. to provide
+ * smooth entrance/exit animations on native while gracefully degrading to no animation
+ * on web where certain Reanimated features are not supported.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <NativeOnlyAnimatedView entering={FadeIn} exiting={FadeOut}>
+ *   <View><Text>Animated content on native, static on web</Text></View>
+ * </NativeOnlyAnimatedView>
+ * ```
+ *
+ * @platform iOS, Android - Full animation support
+ * @platform web - Renders as Fragment without animations
+ */
+function NativeOnlyAnimatedView(
+  props: React.ComponentProps<typeof Animated.View> &
+    React.RefAttributes<Animated.View>
+) {
+  if (Platform.OS === 'web') {
+    return <>{props.children as React.ReactNode}</>;
+  } else {
+    return <Animated.View {...props} />;
+  }
+}
+
+export { NativeOnlyAnimatedView };