@campxdev/react-native-blueprint 0.1.0

package/src/components/ui/Collapsible.tsx

@@ -0,0 +1,40 @@
+import * as CollapsiblePrimitive from '@rn-primitives/collapsible';
+
+/**
+ * Root collapsible container
+ *
+ * An interactive component that can show and hide content. Unlike Accordion, it doesn't enforce
+ * any specific visual styling, making it more flexible for custom layouts.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+ *   <CollapsibleTrigger asChild>
+ *     <Button variant="ghost"><Text>Toggle</Text></Button>
+ *   </CollapsibleTrigger>
+ *   <CollapsibleContent>
+ *     <Text>This content can be shown or hidden</Text>
+ *   </CollapsibleContent>
+ * </Collapsible>
+ * ```
+ */
+const Collapsible = CollapsiblePrimitive.Root;
+
+/**
+ * Trigger button that toggles collapsible content visibility
+ *
+ * @component
+ */
+const CollapsibleTrigger = CollapsiblePrimitive.Trigger;
+
+/**
+ * Collapsible content container
+ *
+ * Automatically animates height when expanding or collapsing.
+ *
+ * @component
+ */
+const CollapsibleContent = CollapsiblePrimitive.Content;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

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

@@ -0,0 +1,407 @@
+import { Icon } from './Icon';
+import { NativeOnlyAnimatedView } from './Native-Only-Animated-View';
+import { TextClassContext } from './Text';
+import { cn } from '../../lib/utils';
+import * as ContextMenuPrimitive from '@rn-primitives/context-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 context menu component
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ContextMenu>
+ *   <ContextMenuTrigger>
+ *     <View><Text>Right-click me</Text></View>
+ *   </ContextMenuTrigger>
+ *   <ContextMenuContent>
+ *     <ContextMenuItem><Text>Edit</Text></ContextMenuItem>
+ *     <ContextMenuItem><Text>Delete</Text></ContextMenuItem>
+ *   </ContextMenuContent>
+ * </ContextMenu>
+ * ```
+ */
+const ContextMenu = ContextMenuPrimitive.Root;
+
+/**
+ * Trigger component that opens context menu on right-click or long-press
+ * @component
+ */
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+
+/**
+ * Groups related context menu items
+ * @component
+ */
+const ContextMenuGroup = ContextMenuPrimitive.Group;
+
+/**
+ * Root component for nested submenu
+ * @component
+ */
+const ContextMenuSub = ContextMenuPrimitive.Sub;
+
+/**
+ * Groups radio items for single selection
+ * @component
+ */
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+
+/**
+ * Trigger for opening a nested submenu
+ * @component
+ */
+function ContextMenuSubTrigger({
+  className: _className,
+  inset,
+  children,
+  iconClassName,
+  ...props
+}: ContextMenuPrimitive.SubTriggerProps &
+  React.RefAttributes<ContextMenuPrimitive.SubTriggerRef> & {
+    children?: React.ReactNode;
+    iconClassName?: string;
+    inset?: boolean;
+  }) {
+  const { open } = ContextMenuPrimitive.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'
+      )}
+    >
+      <ContextMenuPrimitive.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 && cn('bg-accent', Platform.select({ native: 'mb-1' })),
+          inset && 'pl-8'
+        )}
+        {...props}
+      >
+        <>{children}</>
+        <Icon
+          as={icon}
+          className={cn(
+            'text-foreground ml-auto size-4 shrink-0',
+            iconClassName
+          )}
+        />
+      </ContextMenuPrimitive.SubTrigger>
+    </TextClassContext.Provider>
+  );
+}
+
+/**
+ * Content container for nested submenu items
+ * @component
+ */
+function ContextMenuSubContent({
+  className,
+  ...props
+}: ContextMenuPrimitive.SubContentProps &
+  React.RefAttributes<ContextMenuPrimitive.SubContentRef>) {
+  return (
+    <NativeOnlyAnimatedView entering={FadeIn}>
+      <ContextMenuPrimitive.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
+ */
+const FullWindowOverlay =
+  Platform.OS === 'ios' ? RNFullWindowOverlay : React.Fragment;
+
+/**
+ * Main content container for context menu items
+ * @component
+ */
+function ContextMenuContent({
+  className,
+  overlayClassName,
+  overlayStyle,
+  portalHost,
+  ...props
+}: ContextMenuPrimitive.ContentProps &
+  React.RefAttributes<ContextMenuPrimitive.ContentRef> & {
+    overlayStyle?: StyleProp<ViewStyle>;
+    overlayClassName?: string;
+    portalHost?: string;
+  }) {
+  return (
+    <ContextMenuPrimitive.Portal hostName={portalHost}>
+      <FullWindowOverlay>
+        <ContextMenuPrimitive.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">
+              <ContextMenuPrimitive.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>
+        </ContextMenuPrimitive.Overlay>
+      </FullWindowOverlay>
+    </ContextMenuPrimitive.Portal>
+  );
+}
+
+/**
+ * Individual context menu item
+ * @component
+ */
+function ContextMenuItem({
+  className,
+  inset,
+  variant,
+  ...props
+}: ContextMenuPrimitive.ItemProps &
+  React.RefAttributes<ContextMenuPrimitive.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'
+      )}
+    >
+      <ContextMenuPrimitive.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 ContextMenuCheckboxItem({
+  className,
+  children,
+  ...props
+}: ContextMenuPrimitive.CheckboxItemProps &
+  React.RefAttributes<ContextMenuPrimitive.CheckboxItemRef> & {
+    children?: React.ReactNode;
+  }) {
+  return (
+    <TextClassContext.Provider value="text-sm text-popover-foreground select-none group-active:text-accent-foreground">
+      <ContextMenuPrimitive.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">
+          <ContextMenuPrimitive.ItemIndicator>
+            <Icon
+              as={Check}
+              className={cn(
+                'text-foreground size-4',
+                Platform.select({ web: 'pointer-events-none' })
+              )}
+            />
+          </ContextMenuPrimitive.ItemIndicator>
+        </View>
+        <>{children}</>
+      </ContextMenuPrimitive.CheckboxItem>
+    </TextClassContext.Provider>
+  );
+}
+
+/**
+ * Menu item with radio button for single selection
+ * @component
+ */
+function ContextMenuRadioItem({
+  className,
+  children,
+  ...props
+}: ContextMenuPrimitive.RadioItemProps &
+  React.RefAttributes<ContextMenuPrimitive.RadioItemRef> & {
+    children?: React.ReactNode;
+  }) {
+  return (
+    <TextClassContext.Provider value="text-sm text-popover-foreground select-none group-active:text-accent-foreground">
+      <ContextMenuPrimitive.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">
+          <ContextMenuPrimitive.ItemIndicator>
+            <View className="bg-foreground h-2 w-2 rounded-full" />
+          </ContextMenuPrimitive.ItemIndicator>
+        </View>
+        <>{children}</>
+      </ContextMenuPrimitive.RadioItem>
+    </TextClassContext.Provider>
+  );
+}
+
+/**
+ * Label for grouping context menu sections
+ * @component
+ */
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: ContextMenuPrimitive.LabelProps &
+  React.RefAttributes<ContextMenuPrimitive.LabelRef> & {
+    className?: string;
+    inset?: boolean;
+  }) {
+  return (
+    <ContextMenuPrimitive.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
+ * @component
+ */
+function ContextMenuSeparator({
+  className,
+  ...props
+}: ContextMenuPrimitive.SeparatorProps &
+  React.RefAttributes<ContextMenuPrimitive.SeparatorRef>) {
+  return (
+    <ContextMenuPrimitive.Separator
+      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Displays keyboard shortcut hint for menu items
+ * @component
+ */
+function ContextMenuShortcut({
+  className,
+  ...props
+}: TextProps & React.RefAttributes<Text>) {
+  return (
+    <Text
+      className={cn(
+        'text-muted-foreground ml-auto text-xs tracking-widest',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+};

package/src/components/ui/Custom-Card.tsx

@@ -0,0 +1,226 @@
+import * as Slot from '@rn-primitives/slot';
+import type { SlottableViewProps, ViewRef } from '@rn-primitives/types';
+import * as React from 'react';
+import { View, useColorScheme } from 'react-native';
+import { SquircleView } from 'react-native-figma-squircle';
+import { cn } from '../../lib/utils';
+import { TextClassContext } from './Text';
+
+/**
+ * CustomCard container component with squircle shape
+ *
+ * Provides elevated container with smooth squircle corners (iOS-like rounded corners),
+ * border, and shadow. Uses Figma's squircle algorithm for premium look.
+ * Use with CardHeader, CardTitle, CardDescription, CardContent, and CardFooter
+ * for a complete card structure.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <CustomCard>
+ *   <CardHeader>
+ *     <CardTitle><Text>Title</Text></CardTitle>
+ *     <CardDescription><Text>Description</Text></CardDescription>
+ *   </CardHeader>
+ *   <CardContent>
+ *     <Text>Card content goes here</Text>
+ *   </CardContent>
+ *   <CardFooter>
+ *     <Button>Action</Button>
+ *   </CardFooter>
+ * </CustomCard>
+ *
+ * // With custom corner smoothing
+ * <CustomCard cornerSmoothing={1}>
+ *   <Text>Extra smooth corners</Text>
+ * </CustomCard>
+ * ```
+ *
+ * @property {boolean} [asChild] - When true, merges props into immediate child
+ * @property {string} [className] - Additional Tailwind classes
+ * @property {number} [cornerRadius=16] - Corner radius in pixels
+ * @property {number} [cornerSmoothing=0.8] - Smoothing factor (0-1), higher = more iOS-like
+ */
+const CustomCard = React.forwardRef<
+  ViewRef,
+  SlottableViewProps & {
+    className?: string;
+    cornerRadius?: number;
+    cornerSmoothing?: number;
+  }
+>(
+  (
+    {
+      className: _className,
+      asChild = false,
+      cornerRadius = 16,
+      cornerSmoothing = 1.0,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const colorScheme = useColorScheme();
+    const isDark = colorScheme === 'dark';
+
+    if (asChild) {
+      const Component = Slot.View;
+      return (
+        <Component ref={ref as any} {...props}>
+          {children}
+        </Component>
+      );
+    }
+
+    // Use SquircleView directly as the container with inner View for content
+    return (
+      <SquircleView
+        squircleParams={{
+          cornerRadius,
+          cornerSmoothing,
+          fillColor: isDark ? 'hsl(224 71.4% 4.1%)' : 'hsl(0 0% 100%)',
+          strokeColor: isDark
+            ? 'hsl(215 27.9% 16.9%)'
+            : 'hsl(214.3 31.8% 91.4%)',
+          strokeWidth: 1,
+        }}
+        {...props}
+      >
+        <View ref={ref as any} className="px-4">
+          {children}
+        </View>
+      </SquircleView>
+    );
+  }
+);
+CustomCard.displayName = 'CustomCard';
+
+/**
+ * CustomCardHeader - Container for card title and description
+ *
+ * Provides proper spacing for title and description elements at the top of a card.
+ *
+ * @property {boolean} [asChild] - When true, merges props into immediate child
+ * @property {string} [className] - Additional Tailwind classes
+ */
+const CustomCardHeader = React.forwardRef<
+  ViewRef,
+  SlottableViewProps & { className?: string }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Component = asChild ? Slot.View : View;
+  return (
+    <Component
+      className={cn('flex flex-col gap-1.5 p-6', className)}
+      ref={ref as any}
+      {...props}
+    />
+  );
+});
+CustomCardHeader.displayName = 'CustomCardHeader';
+
+/**
+ * CustomCardTitle - Main title text for the card
+ *
+ * Automatically styles child Text components with large, semibold typography.
+ * Uses TextClassContext to apply consistent styling to nested Text elements.
+ *
+ * @property {boolean} [asChild] - When true, merges props into immediate child
+ * @property {string} [className] - Additional Tailwind classes for text styling
+ */
+const CustomCardTitle = React.forwardRef<
+  ViewRef,
+  SlottableViewProps & { className?: string }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Component = asChild ? Slot.View : View;
+  return (
+    <TextClassContext.Provider
+      value={cn(
+        'text-2xl font-semibold leading-none tracking-tight text-card-foreground dark:text-card-foreground',
+        className
+      )}
+    >
+      <Component ref={ref as any} {...props} />
+    </TextClassContext.Provider>
+  );
+});
+CustomCardTitle.displayName = 'CustomCardTitle';
+
+/**
+ * CustomCardDescription - Subtitle or description text for the card
+ *
+ * Automatically styles child Text components with muted, smaller typography.
+ * Uses TextClassContext to apply consistent styling to nested Text elements.
+ *
+ * @property {boolean} [asChild] - When true, merges props into immediate child
+ * @property {string} [className] - Additional Tailwind classes for text styling
+ */
+const CustomCardDescription = React.forwardRef<
+  ViewRef,
+  SlottableViewProps & { className?: string }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Component = asChild ? Slot.View : View;
+  return (
+    <TextClassContext.Provider
+      value={cn(
+        'text-sm text-muted-foreground dark:text-muted-foreground',
+        className
+      )}
+    >
+      <Component ref={ref as any} {...props} />
+    </TextClassContext.Provider>
+  );
+});
+CustomCardDescription.displayName = 'CustomCardDescription';
+
+/**
+ * CustomCardContent - Main content area of the card
+ *
+ * Container for the primary card content with appropriate padding.
+ * Top padding is removed to flow naturally after CustomCardHeader.
+ *
+ * @property {boolean} [asChild] - When true, merges props into immediate child
+ * @property {string} [className] - Additional Tailwind classes
+ */
+const CustomCardContent = React.forwardRef<
+  ViewRef,
+  SlottableViewProps & { className?: string }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Component = asChild ? Slot.View : View;
+  return (
+    <Component className={cn('p-6 pt-0', className)} ref={ref} {...props} />
+  );
+});
+CustomCardContent.displayName = 'CustomCardContent';
+
+/**
+ * CustomCardFooter - Footer area for actions or additional info
+ *
+ * Typically contains buttons or other interactive elements.
+ * Arranged as a row with centered items.
+ *
+ * @property {boolean} [asChild] - When true, merges props into immediate child
+ * @property {string} [className] - Additional Tailwind classes
+ */
+const CustomCardFooter = React.forwardRef<
+  ViewRef,
+  SlottableViewProps & { className?: string }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Component = asChild ? Slot.View : View;
+  return (
+    <Component
+      className={cn('flex flex-row items-center p-6 pt-0', className)}
+      ref={ref as any}
+      {...props}
+    />
+  );
+});
+CustomCardFooter.displayName = 'CustomCardFooter';
+
+export {
+  CustomCard,
+  CustomCardContent,
+  CustomCardDescription,
+  CustomCardFooter,
+  CustomCardHeader,
+  CustomCardTitle,
+};