@campxdev/react-native-blueprint 0.1.0

package/lib/module/lib/utils.js

@@ -0,0 +1,137 @@
+"use strict";
+
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+/**
+ * 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 function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+/**
+ * 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 function cnWithDark(baseClasses, darkClasses, darkMode) {
+  if (darkMode === undefined) {
+    // No override provided, use standard dark: prefixed classes
+    return cn(baseClasses, darkClasses);
+  }
+  if (darkMode) {
+    // Dark mode enabled - apply dark classes without the dark: prefix
+    const processedDarkClasses = darkClasses.split(' ').map(cls => cls.replace(/^dark:/, '')).join(' ');
+    return cn(processedDarkClasses);
+  }
+
+  // Dark mode disabled - only use base classes
+  return cn(baseClasses);
+}
+
+/**
+ * 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 function getThemeColor(lightColor, darkColor, darkMode) {
+  if (darkMode === undefined) {
+    return lightColor; // Default to light if no preference
+  }
+  return darkMode ? darkColor : lightColor;
+}
+//# sourceMappingURL=utils.js.map

package/lib/module/lib/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["clsx","twMerge","cn","inputs","cnWithDark","baseClasses","darkClasses","darkMode","undefined","processedDarkClasses","split","map","cls","replace","join","getThemeColor","lightColor","darkColor"],"sourceRoot":"../../../src","sources":["lib/utils.ts"],"mappings":";;AAAA,SAASA,IAAI,QAAyB,MAAM;AAC5C,SAASC,OAAO,QAAQ,gBAAgB;;AAExC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,EAAEA,CAAC,GAAGC,MAAoB,EAAE;EAC1C,OAAOF,OAAO,CAACD,IAAI,CAACG,MAAM,CAAC,CAAC;AAC9B;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,UAAUA,CACxBC,WAAmB,EACnBC,WAAmB,EACnBC,QAAkB,EACV;EACR,IAAIA,QAAQ,KAAKC,SAAS,EAAE;IAC1B;IACA,OAAON,EAAE,CAACG,WAAW,EAAEC,WAAW,CAAC;EACrC;EAEA,IAAIC,QAAQ,EAAE;IACZ;IACA,MAAME,oBAAoB,GAAGH,WAAW,CACrCI,KAAK,CAAC,GAAG,CAAC,CACVC,GAAG,CAAEC,GAAG,IAAKA,GAAG,CAACC,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,CACvCC,IAAI,CAAC,GAAG,CAAC;IACZ,OAAOZ,EAAE,CAACO,oBAAoB,CAAC;EACjC;;EAEA;EACA,OAAOP,EAAE,CAACG,WAAW,CAAC;AACxB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASU,aAAaA,CAC3BC,UAAkB,EAClBC,SAAiB,EACjBV,QAAkB,EACV;EACR,IAAIA,QAAQ,KAAKC,SAAS,EAAE;IAC1B,OAAOQ,UAAU,CAAC,CAAC;EACrB;EACA,OAAOT,QAAQ,GAAGU,SAAS,GAAGD,UAAU;AAC1C","ignoreList":[]}

package/lib/module/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/package.json

@@ -0,0 +1,208 @@
+{
+  "name": "@campxdev/react-native-blueprint",
+  "version": "0.1.0",
+  "description": "This is a react-native package for mobile apps",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace react-native-blueprint-example",
+    "test": "jest",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "clean": "del-cli lib",
+    "prepare": "bob build --target module",
+    "build:full": "bob build",
+    "release": "release-it --only-version"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/campx-org/react-native-blueprint.git"
+  },
+  "author": "CAMPX <satya@campx.in> (https://github.com/Sri-Satya-M)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/campx-org/react-native-blueprint/issues"
+  },
+  "homepage": "https://github.com/campx-org/react-native-blueprint#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.28.4",
+    "@commitlint/config-conventional": "^19.8.1",
+    "@eslint/compat": "^1.3.2",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.35.0",
+    "@evilmartians/lefthook": "^1.12.3",
+    "@react-native-community/cli": "latest",
+    "@react-native/babel-preset": "0.81.1",
+    "@react-native/eslint-config": "^0.81.1",
+    "@release-it/conventional-changelog": "^10.0.1",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.1.12",
+    "commitlint": "^19.8.1",
+    "del-cli": "^6.0.0",
+    "eslint": "^9.35.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "jest": "^29.7.0",
+    "prettier": "^3.6.2",
+    "react": "19.1.0",
+    "react-native": "0.81.4",
+    "react-native-builder-bob": "^0.40.13",
+    "release-it": "^19.0.4",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.9.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@3.6.1",
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "create-react-native-library": {
+    "languages": "js",
+    "type": "library",
+    "version": "0.54.5"
+  },
+  "dependencies": {
+    "@expo-google-fonts/heebo": "^0.4.2",
+    "@expo-google-fonts/poppins": "^0.4.1",
+    "@gorhom/bottom-sheet": "^5",
+    "@react-navigation/native": "^7.1.18",
+    "@rn-primitives/accordion": "^1.2.0",
+    "@rn-primitives/alert-dialog": "^1.2.0",
+    "@rn-primitives/aspect-ratio": "^1.2.0",
+    "@rn-primitives/avatar": "^1.2.0",
+    "@rn-primitives/checkbox": "^1.2.0",
+    "@rn-primitives/collapsible": "^1.2.0",
+    "@rn-primitives/context-menu": "^1.2.0",
+    "@rn-primitives/dialog": "^1.2.0",
+    "@rn-primitives/dropdown-menu": "^1.2.0",
+    "@rn-primitives/hover-card": "^1.2.0",
+    "@rn-primitives/label": "^1.2.0",
+    "@rn-primitives/menubar": "^1.2.0",
+    "@rn-primitives/popover": "^1.2.0",
+    "@rn-primitives/portal": "^1.2.0",
+    "@rn-primitives/progress": "^1.2.0",
+    "@rn-primitives/radio-group": "^1.2.0",
+    "@rn-primitives/select": "^1.2.0",
+    "@rn-primitives/separator": "^1.2.0",
+    "@rn-primitives/slider": "^1.2.0",
+    "@rn-primitives/slot": "^1.2.0",
+    "@rn-primitives/switch": "^1.2.0",
+    "@rn-primitives/tabs": "^1.2.0",
+    "@rn-primitives/toggle": "^1.2.0",
+    "@rn-primitives/toggle-group": "^1.2.0",
+    "@rn-primitives/tooltip": "^1.2.0",
+    "@rn-primitives/types": "^1.2.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "expo": "^54.0.12",
+    "expo-font": "^14.0.9",
+    "figma-squircle": "^1.1.0",
+    "lucide-react-native": "^0.486.0",
+    "nativewind": "^4.2.1",
+    "react-native-figma-squircle": "^0.4.0",
+    "react-native-floating-action": "^1.22.0",
+    "react-native-gesture-handler": "^2.28.0",
+    "react-native-reanimated": "^4.1.2",
+    "react-native-safe-area-context": "^5.6.1",
+    "react-native-screens": "^4.7.1",
+    "react-native-svg": "^15.14.0",
+    "react-native-worklets": "0.5.1",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss-animate": "^1.0.7"
+  }
+}

package/src/app/_layout.tsx

@@ -0,0 +1,25 @@
+import '../../global.css';
+import { PortalHost } from '@rn-primitives/portal';
+import { StatusBar } from 'react-native';
+import { NAV_THEME } from '../lib/theme';
+import { ThemeProvider } from '@react-navigation/native';
+import { useColorScheme } from 'nativewind';
+import type { ReactNode } from 'react';
+
+interface RootLayoutProps {
+  children: ReactNode;
+}
+
+export default function RootLayout({ children }: RootLayoutProps) {
+  const { colorScheme } = useColorScheme();
+
+  return (
+    <ThemeProvider value={NAV_THEME[colorScheme ?? 'light']}>
+      <StatusBar
+        barStyle={colorScheme === 'dark' ? 'light-content' : 'dark-content'}
+      />
+      {children}
+      <PortalHost />
+    </ThemeProvider>
+  );
+}