@campxdev/react-native-blueprint 0.1.13 → 0.1.15

package/src/components/ui/Checkbox.tsx

@@ -1,81 +0,0 @@
-import { Icon } from './Icon';
-import { cn } from '../../lib/utils';
-import * as CheckboxPrimitive from '@rn-primitives/checkbox';
-import { Check } from 'lucide-react-native';
-import { Platform } from 'react-native';
-
-const DEFAULT_HIT_SLOP = 24;
-
-/**
- * Interactive checkbox for boolean selections
- *
- * A control that allows users to toggle between checked and unchecked states.
- * Features a checkmark indicator, configurable styling, and accessible touch targets.
- *
- * @component
- * @example
- * ```tsx
- * // Basic checkbox
- * <Checkbox checked={isChecked} onCheckedChange={setIsChecked} />
- *
- * // Checkbox with label
- * <View className="flex-row items-center gap-2">
- *   <Checkbox id="terms" checked={accepted} onCheckedChange={setAccepted} />
- *   <Label htmlFor="terms">Accept terms and conditions</Label>
- * </View>
- *
- * // Disabled checkbox
- * <Checkbox checked={true} disabled />
- * ```
- *
- * @accessibility
- * - Uses 24px hit slop for easier touch interaction
- * - Supports keyboard navigation on web
- * - Proper ARIA attributes for screen readers
- * - Visual focus indicators on web
- */
-function Checkbox({
-  className,
-  checkedClassName,
-  indicatorClassName,
-  iconClassName,
-  ...props
-}: CheckboxPrimitive.RootProps &
-  React.RefAttributes<CheckboxPrimitive.RootRef> & {
-    checkedClassName?: string;
-    indicatorClassName?: string;
-    iconClassName?: string;
-  }) {
-  return (
-    <CheckboxPrimitive.Root
-      className={cn(
-        'border-input dark:bg-input/30 size-4 shrink-0 rounded-[4px] border shadow-sm shadow-black/5',
-        Platform.select({
-          web: 'focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive peer cursor-default outline-none transition-shadow focus-visible:ring-[3px] disabled:cursor-not-allowed',
-          native: 'overflow-hidden',
-        }),
-        props.checked && cn('border-primary', checkedClassName),
-        props.disabled && 'opacity-50',
-        className
-      )}
-      hitSlop={DEFAULT_HIT_SLOP}
-      {...props}
-    >
-      <CheckboxPrimitive.Indicator
-        className={cn(
-          'bg-primary h-full w-full items-center justify-center',
-          indicatorClassName
-        )}
-      >
-        <Icon
-          as={Check}
-          size={12}
-          strokeWidth={Platform.OS === 'web' ? 2.5 : 3.5}
-          className={cn('text-primary-foreground', iconClassName)}
-        />
-      </CheckboxPrimitive.Indicator>
-    </CheckboxPrimitive.Root>
-  );
-}
-
-export { Checkbox };

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

@@ -1,418 +0,0 @@
-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 as RNText,
-  type TextProps,
-  View as RNView,
-  type ViewStyle,
-} from 'react-native';
-import { cssInterop } from 'nativewind';
-import { FadeIn } 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 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'
-      )}
-    >
-      supported by NativeWind
-      <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}>
-      supported by NativeWind
-      <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>
-        supported by NativeWind
-        <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">
-              is supported by NativeWind
-              <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'
-      )}
-    >
-      supported by NativeWind
-      <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 as any)}
-      />
-    </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">
-      supported by NativeWind
-      <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">
-      supported by NativeWind
-      <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,
-};