@campxdev/react-native-blueprint 0.1.1 → 0.1.2

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

@@ -1,9 +1,87 @@
-export const THEME: {
-  light: Record<string, string>;
-  dark: Record<string, string>;
-};
-
-export const NAV_THEME: {
-  light: Record<string, string>;
-  dark: Record<string, string>;
+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/utils.d.ts

@@ -1 +1,111 @@
-export function cn(...inputs: any[]): string;
+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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-native-blueprint",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "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 @@
     "cpp",
     "*.podspec",
     "react-native.config.js",
+    "global.css",
     "!ios/build",
     "!android/build",
     "!android/gradle",
@@ -37,8 +38,7 @@
     "typecheck": "tsc",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "clean": "del-cli lib",
-    "prepare": "bob build --target module",
-    "build:full": "bob build",
+    "prepare": "bob build",
     "release": "release-it --only-version"
   },
   "keywords": [
@@ -141,12 +141,6 @@
         {
           "esm": true
         }
-      ],
-      [
-        "typescript",
-        {
-          "project": "tsconfig.build.json"
-        }
       ]
     ]
   },

package/src/components/ui/index.ts

@@ -21,6 +21,7 @@ export * from './Icon';
 export * from './Input';
 export * from './Label';
 export * from './Menubar';
+export * from './Native-Only-Animated-View';
 export * from './NavBar';
 export * from './Popover';
 export * from './Progress';

package/src/types/global.d.ts

@@ -0,0 +1,44 @@
+import 'react-native';
+import 'react-native-reanimated';
+
+declare module 'react-native' {
+  interface ViewProps {
+    className?: string;
+  }
+
+  interface TextProps {
+    className?: string;
+  }
+
+  interface ImageProps {
+    className?: string;
+  }
+
+  interface ScrollViewProps {
+    className?: string;
+  }
+
+  interface PressableProps {
+    className?: string;
+  }
+}
+
+declare module 'react-native-reanimated' {
+  namespace Animated {
+    interface AnimatedProps {
+      children?: React.ReactNode;
+      className?: string;
+    }
+  }
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicAttributes {
+      children?: React.ReactNode;
+      className?: string;
+    }
+  }
+}
+
+export {};

package/src/types/rn-primitives.d.ts

@@ -0,0 +1,70 @@
+declare module '@rn-primitives/*' {
+  import type { ReactNode } from 'react';
+  import type { ViewProps } from 'react-native';
+
+  export interface PrimitiveProps extends ViewProps {
+    children?: ReactNode;
+    className?: string;
+    asChild?: boolean;
+  }
+
+  export interface PrimitiveComponentProps {
+    children?: ReactNode;
+    className?: string;
+  }
+}
+
+// Augment specific primitive modules
+declare module '@rn-primitives/accordion' {
+  import type { ReactNode } from 'react';
+  export namespace Accordion {
+    interface RootProps {
+      children?: ReactNode;
+      className?: string;
+    }
+    interface ItemProps {
+      children?: ReactNode;
+      className?: string;
+    }
+    interface HeaderProps {
+      children?: ReactNode;
+      className?: string;
+    }
+    interface TriggerProps {
+      children?: ReactNode;
+      className?: string;
+    }
+    interface ContentProps {
+      children?: ReactNode;
+      className?: string;
+    }
+  }
+}
+
+declare module '@rn-primitives/dialog' {
+  import type { ReactNode } from 'react';
+  export namespace Dialog {
+    interface OverlayProps {
+      children?: ReactNode;
+      className?: string;
+    }
+    interface ContentProps {
+      children?: ReactNode;
+      className?: string;
+    }
+    interface TitleProps {
+      children?: ReactNode;
+      className?: string;
+    }
+    interface DescriptionProps {
+      children?: ReactNode;
+      className?: string;
+    }
+    interface CloseProps {
+      children?: ReactNode;
+      className?: string;
+    }
+  }
+}
+
+export {};

package/lib/typescript/babel.config.d.ts

@@ -1,13 +0,0 @@
-export let presets: (string | {
-    jsxImportSource: string;
-})[][];
-export let overrides: ({
-    exclude: RegExp;
-    presets: string[];
-    include?: undefined;
-} | {
-    include: RegExp;
-    presets: string[];
-    exclude?: undefined;
-})[];
-//# sourceMappingURL=babel.config.d.ts.map

package/lib/typescript/babel.config.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"babel.config.d.ts","sourceRoot":"","sources":["../../babel.config.js"],"names":[],"mappings":""}

package/lib/typescript/metro.config.d.ts

@@ -1,3 +0,0 @@
-declare const _exports: import("metro-config").InputConfigT;
-export = _exports;
-//# sourceMappingURL=metro.config.d.ts.map

package/lib/typescript/metro.config.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"metro.config.d.ts","sourceRoot":"","sources":["../../metro.config.js"],"names":[],"mappings":""}

package/lib/typescript/src/components/ui/Floating-Action-Button.d.ts

@@ -1,11 +0,0 @@
-import * as React from 'react';
-import { ViewProps } from 'react-native';
-
-export interface Floating-Action-ButtonProps extends ViewProps {
-  className?: string;
-  children?: React.ReactNode;
-  [key: string]: any;
-}
-
-export const Floating-Action-Button: React.ComponentType<Floating-Action-ButtonProps>;
-export default Floating-Action-Button;

package/lib/typescript/src/components/ui.d.ts

@@ -1,49 +0,0 @@
-// UI Components type declarations
-import * as React from 'react';
-import { ViewProps, TextProps, TouchableOpacityProps, ScrollViewProps } from 'react-native';
-
-// Generic component props
-export interface ComponentProps extends ViewProps {
-  className?: string;
-  children?: React.ReactNode;
-}
-
-// Export all UI components
-export * from './ui/Accordion';
-export * from './ui/Alert';
-export * from './ui/Alert-Dialog';
-export * from './ui/Avatar';
-export * from './ui/Badge';
-export * from './ui/Bottom-Sheet';
-export * from './ui/Button';
-export * from './ui/Card';
-export * from './ui/Checkbox';
-export * from './ui/Context-Menu';
-export * from './ui/Custom-Card';
-export * from './ui/Dialog';
-export * from './ui/Dropdown-Menu';
-export * from './ui/Floating-Action-Button';
-export * from './ui/Greeting-Card';
-export * from './ui/Hover-Card';
-export * from './ui/Icon';
-export * from './ui/Input';
-export * from './ui/Label';
-export * from './ui/Menubar';
-export * from './ui/NavBar';
-export * from './ui/Popover';
-export * from './ui/Progress';
-export * from './ui/Radio-Group';
-export * from './ui/Select';
-export * from './ui/Separator';
-export * from './ui/Skeleton';
-export * from './ui/Slider';
-export * from './ui/Switch';
-export * from './ui/Table';
-export * from './ui/Tabs';
-export * from './ui/Text';
-export * from './ui/Textarea';
-export * from './ui/Theme-Toggle';
-export * from './ui/Toast';
-export * from './ui/Toggle';
-export * from './ui/Toggle-Group';
-export * from './ui/Tooltip';

package/lib/typescript/tailwind.config.d.ts

@@ -1,3 +0,0 @@
-declare const _exports: import("tailwindcss").Config;
-export = _exports;
-//# sourceMappingURL=tailwind.config.d.ts.map

package/lib/typescript/tailwind.config.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tailwind.config.d.ts","sourceRoot":"","sources":["../../tailwind.config.js"],"names":[],"mappings":"wBAEW,OAAO,aAAa,EAAE,MAAM"}