@campxdev/react-native-blueprint 0.1.3 → 0.1.6

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

@@ -14,17 +14,21 @@ import {
   Platform,
   type StyleProp,
   StyleSheet,
-  Text,
+  Text as RNText,
   type TextProps,
-  View,
+  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';
 
-cssInterop(View, { className: 'style' });
-cssInterop(Text, { className: 'style' });
+const View = cssInterop(RNView, {
+  className: 'style',
+}) as React.ComponentType<any>;
+const Text = cssInterop(RNText, {
+  className: 'style',
+}) as React.ComponentType<any>;
 
 /**
  * Root context menu component
@@ -95,6 +99,7 @@ function ContextMenuSubTrigger({
         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',
@@ -130,6 +135,7 @@ function ContextMenuSubContent({
   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',
@@ -169,6 +175,7 @@ function ContextMenuContent({
   return (
     <ContextMenuPrimitive.Portal hostName={portalHost}>
       <FullWindowOverlay>
+        supported by NativeWind
         <ContextMenuPrimitive.Overlay
           style={Platform.select({
             web: overlayStyle ?? undefined,
@@ -183,6 +190,7 @@ function ContextMenuContent({
         >
           <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',
@@ -228,6 +236,7 @@ function ContextMenuItem({
           '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',
@@ -264,6 +273,7 @@ function ContextMenuCheckboxItem({
   }) {
   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',
@@ -306,6 +316,7 @@ function ContextMenuRadioItem({
   }) {
   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',

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

@@ -1,11 +1,16 @@
 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 { View as RNView, useColorScheme } from 'react-native';
 import { SquircleView } from 'react-native-figma-squircle';
+import { cssInterop } from 'nativewind';
 import { cn } from '../../lib/utils';
 import { TextClassContext } from './Text';
 
+const View = cssInterop(RNView, {
+  className: 'style',
+}) as React.ComponentType<any>;
+
 /**
  * CustomCard container component with squircle shape
  *

package/src/components/ui/Dialog.tsx

@@ -4,13 +4,22 @@ 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, View, type ViewProps } from 'react-native';
+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';
 
-cssInterop(View, { className: 'style' });
-cssInterop(Text, { className: 'style' });
+const View = cssInterop(RNView, {
+  className: 'style',
+}) as React.ComponentType<any>;
+const Text = cssInterop(RNText, {
+  className: 'style',
+}) as React.ComponentType<any>;
 
 /**
  * Root dialog container
@@ -132,6 +141,7 @@ function DialogContent({
           {...props}
         >
           <>{children}</>
+
           <DialogPrimitive.Close
             className={cn(
               'absolute right-4 top-4 rounded opacity-70 active:opacity-100',

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

@@ -14,17 +14,21 @@ import {
   Platform,
   type StyleProp,
   StyleSheet,
-  Text,
+  Text as RNText,
   type TextProps,
-  View,
+  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';
 
-cssInterop(View, { className: 'style' });
-cssInterop(Text, { className: 'style' });
+const View = cssInterop(RNView, {
+  className: 'style',
+}) as React.ComponentType<any>;
+const Text = cssInterop(RNText, {
+  className: 'style',
+}) as React.ComponentType<any>;
 
 /**
  * Root component for dropdown menu - provides context for all dropdown menu children

package/src/components/ui/Input.tsx

@@ -1,8 +1,15 @@
 import { cn } from '../../lib/utils';
-import { Platform, TextInput, type TextInputProps } from 'react-native';
+import * as React from 'react';
+import {
+  Platform,
+  TextInput as RNTextInput,
+  type TextInputProps,
+} from 'react-native';
 import { cssInterop } from 'nativewind';
 
-cssInterop(TextInput, { className: 'style' });
+const TextInput = cssInterop(RNTextInput, {
+  className: 'style',
+}) as React.ComponentType<any>;
 
 /**
  * Props for Input component
@@ -11,8 +18,9 @@ cssInterop(TextInput, { className: 'style' });
  * @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 {
+interface InputProps extends Omit<TextInputProps, 'editable'> {
   className?: string;
+  editable?: boolean;
 }
 
 /**
@@ -56,7 +64,7 @@ function Input({
   className,
   editable = true,
   ...props
-}: InputProps & React.RefAttributes<TextInput>) {
+}: InputProps & React.RefAttributes<RNTextInput>) {
   return (
     <TextInput
       className={cn(

package/src/components/ui/Menubar.tsx

@@ -13,21 +13,27 @@ import {
 import * as React from 'react';
 import {
   Platform,
-  Pressable,
+  Pressable as RNPressable,
   type StyleProp,
   StyleSheet,
-  Text,
+  Text as RNText,
   type TextProps,
-  View,
+  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';
 
-cssInterop(View, { className: 'style' });
-cssInterop(Text, { className: 'style' });
-cssInterop(Pressable, { className: 'style' });
+const View = cssInterop(RNView, {
+  className: 'style',
+}) as React.ComponentType<any>;
+const Text = cssInterop(RNText, {
+  className: 'style',
+}) as React.ComponentType<any>;
+const Pressable = cssInterop(RNPressable, {
+  className: 'style',
+}) as React.ComponentType<any>;
 
 /**
  * Individual menu within the menubar
@@ -124,6 +130,7 @@ function Menubar({
           <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',

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

@@ -30,7 +30,7 @@ function NativeOnlyAnimatedView(
   if (Platform.OS === 'web') {
     return <>{props.children as React.ReactNode}</>;
   } else {
-    return <Animated.View {...props} />;
+    return <Animated.View {...(props as any)} />;
   }
 }
 

package/src/components/ui/NavBar.tsx

@@ -8,9 +8,15 @@ import { Text, TextClassContext } from './Text';
 import type { ViewRef } from '@rn-primitives/types';
 
 // Enable NativeWind className support
-const View = cssInterop(RNView, { className: 'style' });
-const Pressable = cssInterop(RNPressable, { className: 'style' });
-const SafeAreaView = cssInterop(RNSafeAreaView, { className: 'style' });
+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

package/src/components/ui/Progress.tsx

@@ -1,6 +1,6 @@
 import { cn } from '../../lib/utils';
 import * as ProgressPrimitive from '@rn-primitives/progress';
-import { Platform, View } from 'react-native';
+import { Platform, View as RNView } from 'react-native';
 import { cssInterop } from 'nativewind';
 import Animated, {
   Extrapolation,
@@ -10,7 +10,9 @@ import Animated, {
   withSpring,
 } from 'react-native-reanimated';
 
-cssInterop(View, { className: 'style' });
+const View = cssInterop(RNView, {
+  className: 'style',
+}) as React.ComponentType<any>;
 
 /**
  * Progress bar component for displaying task completion

package/src/components/ui/Select.tsx

@@ -10,13 +10,22 @@ import {
   ChevronUpIcon,
 } from 'lucide-react-native';
 import * as React from 'react';
-import { Platform, ScrollView, StyleSheet, View } from 'react-native';
+import {
+  Platform,
+  ScrollView as RNScrollView,
+  StyleSheet,
+  View as RNView,
+} from 'react-native';
 import { cssInterop } from 'nativewind';
 import { FadeIn, FadeOut } from 'react-native-reanimated';
 import { FullWindowOverlay as RNFullWindowOverlay } from 'react-native-screens';
 
-cssInterop(View, { className: 'style' });
-cssInterop(ScrollView, { className: 'style' });
+const View = cssInterop(RNView, {
+  className: 'style',
+}) as React.ComponentType<any>;
+const ScrollView = cssInterop(RNScrollView, {
+  className: 'style',
+}) as React.ComponentType<any>;
 
 /**
  * Option type for select items
@@ -70,7 +79,7 @@ function SelectValue({
         !value && 'text-muted-foreground',
         className
       )}
-      {...props}
+      {...(props as any)}
     />
   );
 }
@@ -102,7 +111,7 @@ function SelectTrigger({
         size === 'sm' && 'h-8 py-2 sm:py-1.5',
         className
       )}
-      {...props}
+      {...(props as any)}
     >
       <>{children}</>
       <Icon
@@ -168,9 +177,10 @@ function SelectContent({
                   className
                 )}
                 position={position}
-                {...props}
+                {...(props as any)}
               >
                 <SelectScrollUpButton />
+
                 <SelectPrimitive.Viewport
                   className={cn(
                     'p-1',
@@ -240,6 +250,7 @@ function SelectItem({
           <Icon as={Check} className="text-muted-foreground size-4 shrink-0" />
         </SelectPrimitive.ItemIndicator>
       </View>
+
       <SelectPrimitive.ItemText className="text-foreground group-active:text-accent-foreground select-none text-sm" />
     </SelectPrimitive.Item>
   );
@@ -325,6 +336,7 @@ function NativeSelectScrollView({
   if (Platform.OS === 'web') {
     return <>{props.children}</>;
   }
+
   return <ScrollView className={cn('max-h-52', className)} {...props} />;
 }
 

package/src/components/ui/Separator.tsx

@@ -1,10 +1,12 @@
 import * as React from 'react';
-import { View } from 'react-native';
+import { View as RNView } from 'react-native';
 import { cssInterop } from 'nativewind';
 import { cn } from '../../lib/utils';
 import type { ViewRef, SlottableViewProps } from '@rn-primitives/types';
 
-cssInterop(View, { className: 'style' });
+const View = cssInterop(RNView, {
+  className: 'style',
+}) as React.ComponentType<any>;
 
 /**
  * Visual divider for separating content sections

package/src/components/ui/Skeleton.tsx

@@ -1,8 +1,10 @@
 import { cn } from '../../lib/utils';
-import { View } from 'react-native';
+import { View as RNView, type ViewProps } from 'react-native';
 import { cssInterop } from 'nativewind';
 
-cssInterop(View, { className: 'style' });
+const View = cssInterop(RNView, {
+  className: 'style',
+}) as React.ComponentType<any>;
 
 /**
  * Skeleton loading placeholder component
@@ -43,7 +45,7 @@ cssInterop(View, { className: 'style' });
 function Skeleton({
   className,
   ...props
-}: React.ComponentProps<typeof View> & React.RefAttributes<View>) {
+}: ViewProps & { className?: string } & React.RefAttributes<RNView>) {
   return (
     <View
       className={cn('bg-muted animate-pulse rounded-md', className)}

package/src/components/ui/Slider.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Platform, View, ViewProps } from 'react-native';
+import { Platform, View as RNView, type ViewProps } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
   runOnJS,
@@ -7,8 +7,13 @@ import Animated, {
   useSharedValue,
   withSpring,
 } from 'react-native-reanimated';
+import { cssInterop } from 'nativewind';
 import { cn } from '../../lib/utils';
 
+const View = cssInterop(RNView, {
+  className: 'style',
+}) as React.ComponentType<any>;
+
 /**
  * Props for the Slider component
  *
@@ -27,6 +32,7 @@ export interface SliderProps extends Omit<ViewProps, 'children'> {
   step?: number;
   disabled?: boolean;
   className?: string;
+  style?: any;
 }
 
 /**
@@ -191,7 +197,7 @@ const Slider = React.forwardRef<SliderRef, SliderProps>(
         <GestureDetector gesture={composed}>
           <View
             className="relative h-2 w-full overflow-hidden rounded-full bg-primary/20"
-            onLayout={(event) => {
+            onLayout={(event: any) => {
               const { width, x } = event.nativeEvent.layout;
               sliderWidth.value = width;
               setSliderDimensions({ width, x });

package/src/components/ui/Table.tsx

@@ -1,10 +1,12 @@
 import { cn } from '../../lib/utils';
 import { Text } from './Text';
-import { View } from 'react-native';
+import { View as RNView, type ViewProps } from 'react-native';
 import { cssInterop } from 'nativewind';
 import * as React from 'react';
 
-cssInterop(View, { className: 'style' });
+const View = cssInterop(RNView, {
+  className: 'style',
+}) as React.ComponentType<any>;
 
 /**
  * Root table container component
@@ -31,7 +33,7 @@ cssInterop(View, { className: 'style' });
 function Table({
   className,
   ...props
-}: React.ComponentProps<typeof View> & React.RefAttributes<View>) {
+}: ViewProps & { className?: string } & React.RefAttributes<RNView>) {
   return <View className={cn('w-full', className)} {...props} />;
 }
 
@@ -43,7 +45,7 @@ function Table({
 function TableHeader({
   className,
   ...props
-}: React.ComponentProps<typeof View> & React.RefAttributes<View>) {
+}: ViewProps & { className?: string } & React.RefAttributes<RNView>) {
   return (
     <View
       className={cn('border-border flex-row border-b', className)}
@@ -60,7 +62,7 @@ function TableHeader({
 function TableBody({
   className,
   ...props
-}: React.ComponentProps<typeof View> & React.RefAttributes<View>) {
+}: ViewProps & { className?: string } & React.RefAttributes<RNView>) {
   return <View className={cn('flex-col', className)} {...props} />;
 }
 
@@ -72,7 +74,7 @@ function TableBody({
 function TableFooter({
   className,
   ...props
-}: React.ComponentProps<typeof View> & React.RefAttributes<View>) {
+}: ViewProps & { className?: string } & React.RefAttributes<RNView>) {
   return (
     <View
       className={cn(
@@ -92,7 +94,7 @@ function TableFooter({
 function TableRow({
   className,
   ...props
-}: React.ComponentProps<typeof View> & React.RefAttributes<View>) {
+}: ViewProps & { className?: string } & React.RefAttributes<RNView>) {
   return (
     <View
       className={cn('border-border flex-row border-b', className)}

package/src/components/ui/Text.tsx

@@ -60,12 +60,7 @@ const Text = React.forwardRef<
     : cn('text-base text-foreground web:select-text', className);
 
   return (
-    <Component
-      className={finalClassName}
-      style={style}
-      ref={ref as any}
-      {...props}
-    />
+    <Component className={finalClassName} style={style} ref={ref} {...props} />
   );
 });
 Text.displayName = 'Text';

package/src/components/ui/Textarea.tsx

@@ -1,8 +1,15 @@
 import { cn } from '../../lib/utils';
-import { Platform, TextInput, type TextInputProps } from 'react-native';
+import * as React from 'react';
+import {
+  Platform,
+  TextInput as RNTextInput,
+  type TextInputProps,
+} from 'react-native';
 import { cssInterop } from 'nativewind';
 
-cssInterop(TextInput, { className: 'style' });
+const TextInput = cssInterop(RNTextInput, {
+  className: 'style',
+}) as React.ComponentType<any>;
 
 /**
  * Props for Textarea component
@@ -21,9 +28,13 @@ cssInterop(TextInput, { className: 'style' });
  * />
  * ```
  */
-interface TextareaProps extends TextInputProps {
+interface TextareaProps
+  extends Omit<TextInputProps, 'multiline' | 'numberOfLines' | 'editable'> {
   className?: string;
   placeholderClassName?: string;
+  multiline?: boolean;
+  numberOfLines?: number;
+  editable?: boolean;
 }
 
 /**
@@ -68,7 +79,7 @@ function Textarea({
   placeholderClassName,
   editable = true,
   ...props
-}: TextareaProps & React.RefAttributes<TextInput>) {
+}: TextareaProps & React.RefAttributes<RNTextInput>) {
   return (
     <TextInput
       className={cn(

package/src/components/ui/Theme-Toggle.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View, Pressable } from 'react-native';
+import { View as RNView, Pressable as RNPressable } from 'react-native';
 import { cssInterop } from 'nativewind';
 import { Moon, Sun, Monitor } from 'lucide-react-native';
 import { cn } from '../../lib/utils';
@@ -8,8 +8,12 @@ import { Icon } from './Icon';
 import { Text } from './Text';
 import type { SlottableViewProps, ViewRef } from '@rn-primitives/types';
 
-cssInterop(View, { className: 'style' });
-cssInterop(Pressable, { className: 'style' });
+const View = cssInterop(RNView, {
+  className: 'style',
+}) as React.ComponentType<any>;
+const Pressable = cssInterop(RNPressable, {
+  className: 'style',
+}) as React.ComponentType<any>;
 
 /**
  * Theme toggle button variants

package/src/components/ui/Toast.tsx

@@ -3,10 +3,12 @@ import { Text, TextClassContext } from './Text';
 import { Icon } from './Icon';
 import type { LucideIcon } from 'lucide-react-native';
 import * as React from 'react';
-import { View, type ViewProps } from 'react-native';
+import { View as RNView, type ViewProps } from 'react-native';
 import { cssInterop } from 'nativewind';
 
-cssInterop(View, { className: 'style' });
+const View = cssInterop(RNView, {
+  className: 'style',
+}) as React.ComponentType<any>;
 
 /**
  * Toast notification component
@@ -48,7 +50,8 @@ function Toast({
   iconClassName,
   ...props
 }: ViewProps &
-  React.RefAttributes<View> & {
+  React.RefAttributes<RNView> & {
+    children?: React.ReactNode;
     icon?: LucideIcon;
     variant?: 'default' | 'destructive';
     iconClassName?: string;

package/src/index.tsx

@@ -1,3 +1,7 @@
+// Type augmentations for NativeWind className support
+import './types/global';
+import './types/rn-primitives';
+
 // Export components
 export * from './components/ui';
 

package/src/lib/slot-helpers.ts

@@ -0,0 +1,57 @@
+/**
+ * Properly typed Slot component wrappers
+ *
+ * The @rn-primitives/slot package has complex type inference that doesn't
+ * properly expose className props. These wrappers provide correct typing.
+ */
+
+import * as SlotPrimitive from '@rn-primitives/slot';
+import type {
+  PressableProps,
+  ViewProps,
+  TextProps,
+  TextInputProps,
+} from 'react-native';
+
+// Create properly typed versions of Slot components
+export const SlotView = SlotPrimitive.View as React.ForwardRefExoticComponent<
+  ViewProps & {
+    className?: string;
+    children?: React.ReactNode;
+    cssInterop?: boolean;
+  }
+>;
+
+export const SlotPressable =
+  SlotPrimitive.Pressable as React.ForwardRefExoticComponent<
+    PressableProps & {
+      className?: string;
+      children?: React.ReactNode;
+      cssInterop?: boolean;
+    }
+  >;
+
+export const SlotText = SlotPrimitive.Text as React.ForwardRefExoticComponent<
+  TextProps & {
+    className?: string;
+    children?: React.ReactNode;
+    cssInterop?: boolean;
+  }
+>;
+
+export const SlotTextInput =
+  SlotPrimitive.TextInput as React.ForwardRefExoticComponent<
+    TextInputProps & {
+      className?: string;
+      children?: React.ReactNode;
+      cssInterop?: boolean;
+    }
+  >;
+
+// Re-export Slot for cases where it's used directly
+export const Slot = SlotPrimitive.Slot as React.ForwardRefExoticComponent<
+  ViewProps & {
+    className?: string;
+    children?: React.ReactNode;
+  }
+>;