@campxdev/react-native-blueprint 0.1.4 → 0.1.7

package/lib/typescript/src/lib/cornerRadius.d.ts

@@ -0,0 +1,112 @@
+/**
+ * Corner Radius System
+ *
+ * Automatically calculates the appropriate corner radius based on element dimensions.
+ *
+ * Design Rule:
+ * - Elements < 80px height → 12px radius
+ * - Elements ≥ 80px height → 20px radius
+ * - All corners use 100% smoothing (Apple-style squircles)
+ *
+ * Examples:
+ * - Button (50px height) → 12px
+ * - Chip (24px height) → 12px
+ * - Checkbox (16px height) → 4px (special case for very small)
+ * - Small card (60px height) → 12px
+ * - Large card (200px height) → 20px
+ * - Dialog (400px height) → 20px
+ */
+/**
+ * Primitive radius values from your design system
+ * Your exact values: 0, 2, 4, 8, 12, 20, 24, 32, 48
+ */
+export declare const RADIUS: {
+    readonly R0: 0;
+    readonly R1: 2;
+    readonly R2: 4;
+    readonly R3: 8;
+    readonly R4: 12;
+    readonly R5: 20;
+    readonly R6: 24;
+    readonly R7: 32;
+    readonly R8: 48;
+};
+/**
+ * Calculate corner radius based on element height
+ *
+ * @param height - Element height in pixels
+ * @returns Corner radius in pixels
+ *
+ * @example
+ * ```tsx
+ * // Button (50px height)
+ * const radius = getRadiusForHeight(50); // Returns 12
+ *
+ * // Checkbox (16px height)
+ * const radius = getRadiusForHeight(16); // Returns 4
+ *
+ * // Card (160px height)
+ * const radius = getRadiusForHeight(160); // Returns 20
+ * ```
+ */
+export declare function getRadiusForHeight(height: number): number;
+/**
+ * Calculate corner radius based on smallest dimension (width or height)
+ * Useful for square or nearly-square elements
+ *
+ * @param width - Element width in pixels
+ * @param height - Element height in pixels
+ * @returns Corner radius in pixels
+ *
+ * @example
+ * ```tsx
+ * // Square checkbox (16×16)
+ * const radius = getRadiusForDimensions(16, 16); // Returns 4
+ *
+ * // Wide button (200×50)
+ * const radius = getRadiusForDimensions(200, 50); // Returns 12 (based on height)
+ *
+ * // Tall card (300×200)
+ * const radius = getRadiusForDimensions(300, 200); // Returns 20 (based on width)
+ * ```
+ */
+export declare function getRadiusForDimensions(width: number, height: number): number;
+/**
+ * Get corner radius with custom thresholds
+ * Advanced usage when you need different breakpoints
+ *
+ * @param height - Element height in pixels
+ * @param options - Custom threshold options
+ * @returns Corner radius in pixels
+ *
+ * @example
+ * ```tsx
+ * // Use 20px radius for elements ≥ 100px instead of 80px
+ * const radius = getCustomRadius(90, { largeThreshold: 100 });
+ * ```
+ */
+export declare function getCustomRadius(height: number, options?: {
+    tinyThreshold?: number;
+    smallThreshold?: number;
+    tinyRadius?: number;
+    smallRadius?: number;
+    largeRadius?: number;
+}): number;
+/**
+ * Corner smoothing value (0-1)
+ * 1.0 = 100% smoothing (Apple-style squircles)
+ */
+export declare const CORNER_SMOOTHING = 1;
+/**
+ * Preset radius values for common use cases
+ * Use these when you know the exact size you want
+ */
+export declare const RADIUS_PRESET: {
+    readonly none: 0;
+    readonly tiny: 4;
+    readonly small: 12;
+    readonly large: 20;
+    readonly pill: 24;
+    readonly circle: 9999;
+};
+//# sourceMappingURL=cornerRadius.d.ts.map

package/lib/typescript/src/lib/cornerRadius.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cornerRadius.d.ts","sourceRoot":"","sources":["../../../../src/lib/cornerRadius.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH;;;GAGG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;CAUT,CAAC;AAWX;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAUzD;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAG5E;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,eAAe,CAC7B,MAAM,EAAE,MAAM,EACd,OAAO,CAAC,EAAE;IACR,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GACA,MAAM,CAkBR;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,IAAM,CAAC;AAEpC;;;GAGG;AACH,eAAO,MAAM,aAAa;;;;;;;CAOhB,CAAC"}

package/lib/typescript/src/lib/fonts.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Font configuration for CampX Design System
+ *
+ * Fonts:
+ * - Poppins: Used for headings, buttons, labels, subtitles
+ * - Heebo: Used for body text, inputs, captions
+ *
+ * Weights:
+ * - 400 (Regular): Body text, labels, captions
+ * - 600 (Semi Bold): Subtitles, buttons, emphasized body
+ * - 800 (Extra Bold): Headings
+ */
+export declare const fonts: {
+    Poppins_400Regular: number;
+    Poppins_600SemiBold: number;
+    Poppins_800ExtraBold: number;
+    Heebo_400Regular: number;
+    Heebo_600SemiBold: number;
+};
+export type FontName = keyof typeof fonts;
+//# sourceMappingURL=fonts.d.ts.map

package/lib/typescript/src/lib/fonts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fonts.d.ts","sourceRoot":"","sources":["../../../../src/lib/fonts.ts"],"names":[],"mappings":"AAOA;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,KAAK;;;;;;CAMjB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,KAAK,CAAC"}

package/lib/typescript/src/lib/slot-helpers.d.ts

@@ -0,0 +1,32 @@
+/**
+ * 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 type { PressableProps, ViewProps, TextProps, TextInputProps } from 'react-native';
+export declare const SlotView: React.ForwardRefExoticComponent<ViewProps & {
+    className?: string;
+    children?: React.ReactNode;
+    cssInterop?: boolean;
+}>;
+export declare const SlotPressable: React.ForwardRefExoticComponent<PressableProps & {
+    className?: string;
+    children?: React.ReactNode;
+    cssInterop?: boolean;
+}>;
+export declare const SlotText: React.ForwardRefExoticComponent<TextProps & {
+    className?: string;
+    children?: React.ReactNode;
+    cssInterop?: boolean;
+}>;
+export declare const SlotTextInput: React.ForwardRefExoticComponent<TextInputProps & {
+    className?: string;
+    children?: React.ReactNode;
+    cssInterop?: boolean;
+}>;
+export declare const Slot: React.ForwardRefExoticComponent<ViewProps & {
+    className?: string;
+    children?: React.ReactNode;
+}>;
+//# sourceMappingURL=slot-helpers.d.ts.map

package/lib/typescript/src/lib/slot-helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slot-helpers.d.ts","sourceRoot":"","sources":["../../../../src/lib/slot-helpers.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EACV,cAAc,EACd,SAAS,EACT,SAAS,EACT,cAAc,EACf,MAAM,cAAc,CAAC;AAGtB,eAAO,MAAM,QAAQ,EAAyB,KAAK,CAAC,yBAAyB,CAC3E,SAAS,GAAG;IACV,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CACF,CAAC;AAEF,eAAO,MAAM,aAAa,EACG,KAAK,CAAC,yBAAyB,CACxD,cAAc,GAAG;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CACF,CAAC;AAEJ,eAAO,MAAM,QAAQ,EAAyB,KAAK,CAAC,yBAAyB,CAC3E,SAAS,GAAG;IACV,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CACF,CAAC;AAEF,eAAO,MAAM,aAAa,EACG,KAAK,CAAC,yBAAyB,CACxD,cAAc,GAAG;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CACF,CAAC;AAGJ,eAAO,MAAM,IAAI,EAAyB,KAAK,CAAC,yBAAyB,CACvE,SAAS,GAAG;IACV,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CACF,CAAC"}

package/lib/typescript/src/lib/theme.d.ts

@@ -0,0 +1,87 @@
+import { type Theme } from '@react-navigation/native';
+/**
+ * Custom theme colors based on your Figma design tokens
+ * Using your categorized color system:
+ * 1. Surfaces - Page and card backgrounds
+ * 2. Text - All text colors with opacity variants
+ * 3. Primary - Main buttons and CTAs
+ * 4. Secondary - Secondary buttons
+ * 5. Tertiary/Accent - Highlights and selections
+ * 6. Borders - All borders and dividers
+ * 7. Highlights - Status/semantic colors
+ * 8. Brand - Brand accent colors (use sparingly)
+ */
+export declare const THEME: {
+    light: {
+        background: string;
+        card: string;
+        popover: string;
+        muted: string;
+        foreground: string;
+        cardForeground: string;
+        popoverForeground: string;
+        mutedForeground: string;
+        primary: string;
+        primaryForeground: string;
+        secondary: string;
+        secondaryForeground: string;
+        accent: string;
+        accentForeground: string;
+        border: string;
+        input: string;
+        ring: string;
+        destructive: string;
+        destructiveForeground: string;
+        success: string;
+        info: string;
+        warning: string;
+        brand1: string;
+        brand2: string;
+        brand3: string;
+        chart1: string;
+        chart2: string;
+        chart3: string;
+        chart4: string;
+        chart5: string;
+        radius: string;
+    };
+    dark: {
+        background: string;
+        card: string;
+        popover: string;
+        muted: string;
+        foreground: string;
+        cardForeground: string;
+        popoverForeground: string;
+        mutedForeground: string;
+        primary: string;
+        primaryForeground: string;
+        secondary: string;
+        secondaryForeground: string;
+        accent: string;
+        accentForeground: string;
+        border: string;
+        input: string;
+        ring: string;
+        destructive: string;
+        destructiveForeground: string;
+        success: string;
+        info: string;
+        warning: string;
+        brand1: string;
+        brand2: string;
+        brand3: string;
+        chart1: string;
+        chart2: string;
+        chart3: string;
+        chart4: string;
+        chart5: string;
+        radius: string;
+    };
+};
+/**
+ * React Navigation theme configuration
+ * Maps our custom theme to React Navigation's theme structure
+ */
+export declare const NAV_THEME: Record<'light' | 'dark', Theme>;
+//# sourceMappingURL=theme.d.ts.map

package/lib/typescript/src/lib/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../src/lib/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,KAAK,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAE/E;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyGjB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,OAAO,GAAG,MAAM,EAAE,KAAK,CAyBrD,CAAC"}

package/lib/typescript/src/lib/utils.d.ts

@@ -0,0 +1,111 @@
+import { type ClassValue } from 'clsx';
+/**
+ * Utility function to merge Tailwind CSS classes with proper precedence
+ *
+ * Combines clsx (for conditional classes) and tailwind-merge (for deduplication)
+ * to create a single, optimized class string. Later classes override earlier ones.
+ *
+ * @param {...ClassValue[]} inputs - Class values to merge (strings, objects, arrays)
+ * @returns {string} Merged and deduplicated class string
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * cn('px-2 py-1', 'px-4') // => 'py-1 px-4'
+ *
+ * // With conditionals
+ * cn('text-base', isDark && 'text-white', 'font-bold')
+ * // => 'text-base text-white font-bold' (if isDark is true)
+ *
+ * // With objects
+ * cn({
+ *   'bg-primary': isPrimary,
+ *   'bg-secondary': !isPrimary
+ * })
+ *
+ * // Common component pattern
+ * cn('base-classes', variant === 'large' && 'large-classes', className)
+ * ```
+ */
+export declare function cn(...inputs: ClassValue[]): string;
+/**
+ * Applies dark mode classes with optional runtime control
+ *
+ * Provides three modes of operation:
+ * 1. Static mode (darkMode undefined): Returns classes with `dark:` prefix for automatic switching
+ * 2. Dark mode (darkMode true): Strips `dark:` prefix and returns only dark classes
+ * 3. Light mode (darkMode false): Returns only base classes
+ *
+ * This function is useful when you need to programmatically control dark mode
+ * instead of relying on Tailwind's automatic dark mode detection.
+ *
+ * @param {string} baseClasses - Classes to apply in light mode
+ * @param {string} darkClasses - Classes to apply in dark mode (with or without `dark:` prefix)
+ * @param {boolean} [darkMode] - Optional dark mode override (true/false/undefined)
+ * @returns {string} Merged class string based on mode
+ *
+ * @example
+ * ```tsx
+ * // Static mode - use Tailwind's automatic detection
+ * cnWithDark('bg-white', 'dark:bg-black')
+ * // => 'bg-white dark:bg-black'
+ *
+ * // Programmatic dark mode
+ * const { isDark } = useTheme();
+ * cnWithDark('bg-white', 'dark:bg-black', isDark)
+ * // => 'bg-black' (if isDark is true)
+ * // => 'bg-white' (if isDark is false)
+ *
+ * // With multiple classes
+ * cnWithDark(
+ *   'bg-white text-black border-gray-200',
+ *   'dark:bg-black dark:text-white dark:border-gray-800',
+ *   isDark
+ * )
+ * ```
+ *
+ * @see {@link cn} for basic class merging
+ * @see {@link useTheme} for accessing theme state
+ */
+export declare function cnWithDark(baseClasses: string, darkClasses: string, darkMode?: boolean): string;
+/**
+ * Get color value based on theme mode
+ *
+ * Simple utility to select between light and dark color values based on the
+ * current theme. Primarily used for native platforms where Tailwind CSS
+ * classes don't work with inline styles.
+ *
+ * @param {string} lightColor - Color value for light mode (CSS color, HSL, RGB, hex)
+ * @param {string} darkColor - Color value for dark mode (CSS color, HSL, RGB, hex)
+ * @param {boolean} [darkMode] - Whether dark mode is active (defaults to light if undefined)
+ * @returns {string} The appropriate color value for the current mode
+ *
+ * @example
+ * ```tsx
+ * import { useTheme } from './ThemeProvider';
+ *
+ * function MyComponent() {
+ *   const { isDark } = useTheme();
+ *
+ *   // Get color for inline styles
+ *   const textColor = getThemeColor('#000000', '#ffffff', isDark);
+ *   const bgColor = getThemeColor('hsl(0, 0%, 100%)', 'hsl(0, 0%, 10%)', isDark);
+ *
+ *   return (
+ *     <View style={{ backgroundColor: bgColor }}>
+ *       <NativeText style={{ color: textColor }}>
+ *         Theme-aware text
+ *       </NativeText>
+ *     </View>
+ *   );
+ * }
+ *
+ * // Without theme context (defaults to light)
+ * const color = getThemeColor('#000', '#fff'); // => '#000'
+ * ```
+ *
+ * @see {@link useTheme} for accessing theme state
+ * @see {@link getThemeColorValue} from theme-config for more advanced usage
+ */
+export declare function getThemeColor(lightColor: string, darkColor: string, darkMode?: boolean): string;
+//# sourceMappingURL=utils.d.ts.map

package/lib/typescript/src/lib/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAG7C;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,wBAAgB,UAAU,CACxB,WAAW,EAAE,MAAM,EACnB,WAAW,EAAE,MAAM,EACnB,QAAQ,CAAC,EAAE,OAAO,GACjB,MAAM,CAiBR;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,wBAAgB,aAAa,CAC3B,UAAU,EAAE,MAAM,EAClB,SAAS,EAAE,MAAM,EACjB,QAAQ,CAAC,EAAE,OAAO,GACjB,MAAM,CAKR"}

package/nativewind-env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="nativewind/types" />
+
+/**
+ * NativeWind type augmentations
+ * This file ensures className prop is available on all React Native components
+ * when using NativeWind with TypeScript
+ */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-native-blueprint",
-  "version": "0.1.4",
+  "version": "0.1.7",
   "description": "This is a react-native package for mobile apps",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -20,6 +20,7 @@
     "ios",
     "cpp",
     "*.podspec",
+    "nativewind-env.d.ts",
     "react-native.config.js",
     "!ios/build",
     "!android/build",
@@ -39,7 +40,10 @@
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "clean": "del-cli lib",
     "prepare": "bob build",
-    "release": "release-it --only-version"
+    "release": "release-it --only-version",
+    "publish-package": "./scripts/publish.sh",
+    "android": "expo run:android",
+    "ios": "expo run:ios"
   },
   "keywords": [
     "react-native",
@@ -146,6 +150,12 @@
         {
           "esm": true
         }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.json"
+        }
       ]
     ]
   },
@@ -188,9 +198,12 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "expo": "^54.0.12",
+    "expo-dev-client": "~6.0.15",
     "expo-font": "^14.0.9",
     "figma-squircle": "^1.1.0",
     "lucide-react-native": "^0.546.0",
+    "react": "19.1.0",
+    "react-native": "0.81.4",
     "react-native-figma-squircle": "^0.4.0",
     "react-native-floating-action": "^1.22.0",
     "react-native-gesture-handler": "^2.28.0",

package/src/components/ui/Accordion.tsx

@@ -122,7 +122,9 @@ function AccordionItem({
   );
 }
 
-const Trigger = Platform.OS === 'web' ? View : Pressable;
+const Trigger = (
+  Platform.OS === 'web' ? View : Pressable
+) as React.ComponentType<any>;
 
 /**
  * Clickable trigger button that toggles accordion item expansion

package/src/components/ui/Alert-Dialog.tsx

@@ -4,12 +4,14 @@ import { TextClassContext } from './Text';
 import { cn } from '../../lib/utils';
 import * as AlertDialogPrimitive from '@rn-primitives/alert-dialog';
 import * as React from 'react';
-import { Platform, View, type ViewProps } from 'react-native';
+import { Platform, 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' });
+const View = cssInterop(RNView, { className: 'style' }) as React.ComponentType<
+  ViewProps & { className?: string; children?: React.ReactNode }
+>;
 
 /**
  * Root alert dialog container
@@ -153,7 +155,7 @@ function AlertDialogContent({
             }),
             className
           )}
-          {...props}
+          {...(props as any)}
         />
       </AlertDialogOverlay>
     </AlertDialogPortal>

package/src/components/ui/Alert.tsx

@@ -3,10 +3,12 @@ import { Text, TextClassContext } from './Text';
 import { cn } from '../../lib/utils';
 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<
+  ViewProps & { className?: string; children?: React.ReactNode }
+>;
 
 /**
  * Alert component for displaying important messages or notifications
@@ -48,7 +50,8 @@ function Alert({
   iconClassName,
   ...props
 }: ViewProps &
-  React.RefAttributes<View> & {
+  React.RefAttributes<RNView> & {
+    children?: React.ReactNode;
     icon: LucideIcon;
     variant?: 'default' | 'destructive';
     iconClassName?: string;
@@ -67,7 +70,7 @@ function Alert({
           'bg-card dark:bg-card border-border dark:border-border relative w-full rounded-lg border px-4 pb-2 pt-3.5',
           className
         )}
-        {...props}
+        {...(props as any)}
       >
         <View className="absolute left-3.5 top-3">
           <Icon

package/src/components/ui/AppBar.tsx

@@ -13,8 +13,12 @@ import { cn } from '../../lib/utils';
 import { Icon } from './Icon';
 import { Text } from './Text';
 
-const View = cssInterop(RNView, { className: 'style' });
-const Pressable = cssInterop(RNPressable, { className: 'style' });
+const View = cssInterop(RNView, {
+  className: 'style',
+}) as React.ComponentType<any>;
+const Pressable = cssInterop(RNPressable, {
+  className: 'style',
+}) as React.ComponentType<any>;
 
 /**
  * Configuration for an action item in the AppBar

package/src/components/ui/Avatar.tsx

@@ -1,13 +1,17 @@
 import * as React from 'react';
-import { Image, View } from 'react-native';
+import { Image as RNImage, View as RNView } from 'react-native';
 import { cssInterop } from 'nativewind';
 import { cn } from '../../lib/utils';
 import type { ViewRef, SlottableViewProps } from '@rn-primitives/types';
 import * as Slot from '@rn-primitives/slot';
 
-cssInterop(View, { className: 'style' });
+const View = cssInterop(RNView, {
+  className: 'style',
+}) as React.ComponentType<any>;
 cssInterop(Slot.View, { className: 'style' });
-cssInterop(Image, { className: 'style' });
+const Image = cssInterop(RNImage, {
+  className: 'style',
+}) as React.ComponentType<any>;
 
 /**
  * Avatar container component
@@ -57,8 +61,8 @@ Avatar.displayName = 'Avatar';
  * @property {string} [className] - Additional Tailwind classes
  */
 const AvatarImage = React.forwardRef<
-  React.ElementRef<typeof Image>,
-  React.ComponentPropsWithoutRef<typeof Image> & {
+  React.ElementRef<typeof RNImage>,
+  React.ComponentPropsWithoutRef<typeof RNImage> & {
     className?: string;
     alt?: string;
   }
@@ -66,7 +70,7 @@ const AvatarImage = React.forwardRef<
   return (
     <Image
       className={cn('aspect-square h-full w-full', className)}
-      ref={ref}
+      ref={ref as any}
       {...props}
     />
   );

package/src/components/ui/Bottom-Sheet.tsx

@@ -5,16 +5,24 @@ import React, {
   useMemo,
   useRef,
 } from 'react';
-import { StyleSheet, View, ViewStyle } from 'react-native';
+import { StyleSheet, View as RNView, ViewStyle } from 'react-native';
 import BottomSheetPrimitive, {
   BottomSheetBackdrop,
   BottomSheetBackdropProps,
-  BottomSheetView,
+  BottomSheetView as BSView,
 } from '@gorhom/bottom-sheet';
+import { cssInterop } from 'nativewind';
 import { cn } from '../../lib/utils';
 import { useTheme } from '../../lib/ThemeProvider';
 import { hslToRgb } from '../theme-config';
 
+const View = cssInterop(RNView, {
+  className: 'style',
+}) as React.ComponentType<any>;
+const BottomSheetView = cssInterop(BSView, {
+  className: 'style',
+}) as React.ComponentType<any>;
+
 type BottomSheetRef = {
   open: () => void;
   close: () => void;