@himakarinv/nativex 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 nativeX
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,105 @@
+# nativeX
+
+React Native / Expo UI component library with NativeWind design tokens.
+
+This repository is both:
+
+- a Storybook/Expo playground for developing components
+- a publishable npm package that exposes `src/` components and theme tokens
+
+## Install
+
+```bash
+npm install nativex
+npx expo install react-native-svg react-native-safe-area-context expo-linking
+npm install nativewind tailwindcss@3.4.17
+```
+
+The unscoped name `nativex` is already taken on the public npm registry (an unrelated Cordova plugin). Publish under a scoped name if needed:
+
+```bash
+npm install @YOUR_NPM_USERNAME/nativex
+```
+
+## Consumer setup
+
+NativeWind must see this package's source, and Metro must transform SVG icons.
+
+**`babel.config.js`**
+
+```js
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: [
+      ['babel-preset-expo', { jsxImportSource: 'nativewind' }],
+      'nativewind/babel',
+    ],
+  };
+};
+```
+
+**`tailwind.config.js`**
+
+```js
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './App.{js,jsx,ts,tsx}',
+    './app/**/*.{js,jsx,ts,tsx}',
+    './src/**/*.{js,jsx,ts,tsx}',
+    './node_modules/nativex/src/**/*.{js,jsx,ts,tsx}',
+  ],
+  presets: [
+    require('nativewind/preset'),
+    require('nativex/nativewind-preset'),
+  ],
+};
+```
+
+If you published a scoped package, replace `nativex` with `@YOUR_NPM_USERNAME/nativex` in both the `content` glob and the preset `require`.
+
+**`metro.config.js`**
+
+```js
+const { getDefaultConfig } = require('expo/metro-config');
+const { withNativeWind } = require('nativewind/metro');
+
+const config = getDefaultConfig(__dirname);
+
+config.transformer = {
+  ...config.transformer,
+  babelTransformerPath: require.resolve('react-native-svg-transformer/expo'),
+};
+
+config.resolver = {
+  ...config.resolver,
+  assetExts: config.resolver.assetExts.filter((ext) => ext !== 'svg'),
+  sourceExts: [...config.resolver.sourceExts, 'svg'],
+};
+
+module.exports = withNativeWind(config, { input: './global.css' });
+```
+
+Install `react-native-svg-transformer` in the consuming app, import `./global.css` once at the app root, and include:
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+## Usage
+
+```tsx
+import { Button, ButtonVariant, InputField, colors } from 'nativex';
+
+<Button label="Save" variant={ButtonVariant.Primary} onPress={() => {}} />
+```
+
+## Local Storybook
+
+```bash
+npm install
+npm run storybook
+```

package/images.d.ts

@@ -0,0 +1,14 @@
+declare module '*.png' {
+  const content: number;
+  export default content;
+}
+
+declare module '*.jpg' {
+  const content: number;
+  export default content;
+}
+
+declare module '*.jpeg' {
+  const content: number;
+  export default content;
+}

package/index.js

@@ -0,0 +1,8 @@
+import { registerRootComponent } from 'expo';
+
+if (process.env.EXPO_PUBLIC_STORYBOOK_ENABLED === 'true') {
+  const StorybookUIRoot = require('./.rnstorybook').default;
+  registerRootComponent(StorybookUIRoot);
+} else {
+  require('expo-router/entry');
+}

package/nativewind-preset.js

@@ -0,0 +1,18 @@
+const nativewindTheme = require('./src/theme/nativewind-theme');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    colors: nativewindTheme.colors,
+    extend: {
+      spacing: nativewindTheme.spacing,
+      borderRadius: nativewindTheme.borderRadius,
+      fontFamily: nativewindTheme.fontFamily,
+      fontSize: nativewindTheme.fontSize,
+      fontWeight: nativewindTheme.fontWeight,
+      borderWidth: nativewindTheme.borderWidth,
+      height: nativewindTheme.height,
+      width: nativewindTheme.width,
+    },
+  },
+};

package/package.json

@@ -0,0 +1,120 @@
+{
+  "name": "@himakarinv/nativex",
+  "version": "1.0.0",
+  "private": false,
+  "description": "React Native / Expo UI component library with NativeWind design tokens",
+  "license": "MIT",
+  "main": "index.js",
+  "types": "./src/index.ts",
+  "react-native": "./src/index.ts",
+  "source": "./src/index.ts",
+  "sideEffects": false,
+  "keywords": [
+    "react-native",
+    "expo",
+    "nativewind",
+    "ui",
+    "components"
+  ],
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "react-native": "./src/index.ts",
+      "source": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./nativewind-preset": "./nativewind-preset.js",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "!src/**/*.stories.tsx",
+    "!src/**/TokenTable.tsx",
+    "!src/**/pageStoryCanvas.tsx",
+    "!src/**/token-catalog.ts",
+    "!src/**/ColorsShowcase.tsx",
+    "!src/**/color-deploy.ts",
+    "!src/**/color-overrides.ts",
+    "!src/**/color-previews.tsx",
+    "!src/**/.npmignore",
+    "nativewind-preset.js",
+    "svg.d.ts",
+    "images.d.ts",
+    "README.md",
+    "LICENSE"
+  ],
+  "peerDependencies": {
+    "expo-linking": ">=7.0.0",
+    "nativewind": ">=4.1.0",
+    "react": ">=18.2.0",
+    "react-native": ">=0.76.0",
+    "react-native-safe-area-context": ">=4.8.0",
+    "react-native-svg": ">=15.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "start": "expo start",
+    "reset-project": "node ./scripts/reset-project.js",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "lint": "expo lint",
+    "typecheck": "tsc --noEmit",
+    "pack:check": "npm pack --dry-run",
+    "storybook": "npm run storybook-generate && cross-env EXPO_PUBLIC_STORYBOOK_ENABLED=true expo start",
+    "storybook:ios": "npm run storybook-generate && cross-env EXPO_PUBLIC_STORYBOOK_ENABLED=true expo start --ios",
+    "storybook:android": "npm run storybook-generate && cross-env EXPO_PUBLIC_STORYBOOK_ENABLED=true expo start --android",
+    "storybook:web": "npm run storybook-generate && cross-env EXPO_PUBLIC_STORYBOOK_ENABLED=true expo start --web",
+    "storybook-generate": "sb-rn-get-stories"
+  },
+  "dependencies": {
+    "@expo/vector-icons": "^15.0.3",
+    "@gorhom/bottom-sheet": "latest",
+    "@react-native-async-storage/async-storage": "2.2.0",
+    "@react-native-community/datetimepicker": "8.4.4",
+    "@react-native-community/slider": "5.0.1",
+    "@react-navigation/bottom-tabs": "^7.4.0",
+    "@react-navigation/elements": "^2.6.3",
+    "@react-navigation/native": "^7.1.8",
+    "babel-preset-expo": "~54.0.10",
+    "cross-env": "latest",
+    "expo": "~54.0.35",
+    "expo-constants": "~18.0.13",
+    "expo-font": "~14.0.12",
+    "expo-haptics": "~15.0.8",
+    "expo-image": "~3.0.11",
+    "expo-linking": "~8.0.12",
+    "expo-router": "~6.0.24",
+    "expo-splash-screen": "~31.0.13",
+    "expo-status-bar": "~3.0.9",
+    "expo-symbols": "~1.0.8",
+    "expo-system-ui": "~6.0.9",
+    "expo-web-browser": "~15.0.11",
+    "nativewind": "^4.2.1",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-gesture-handler": "~2.28.0",
+    "react-native-reanimated": "~4.1.1",
+    "react-native-safe-area-context": "~5.6.0",
+    "react-native-screens": "~4.16.0",
+    "react-native-svg": "15.12.1",
+    "react-native-web": "~0.21.0",
+    "react-native-worklets": "0.5.1"
+  },
+  "devDependencies": {
+    "@storybook/addon-ondevice-actions": "9.1.4",
+    "@storybook/addon-ondevice-controls": "9.1.4",
+    "@storybook/react": "9.1.20",
+    "@storybook/react-native": "9.1.4",
+    "@types/react": "~19.1.0",
+    "eslint": "^9.25.0",
+    "eslint-config-expo": "~10.0.0",
+    "react-native-svg-transformer": "^1.5.3",
+    "storybook": "9.1.20",
+    "tailwindcss": "^3.4.17",
+    "typescript": "~5.9.2"
+  }
+}

package/src/assets/icons/2-layers.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.33203 9.66667L7.9987 13L14.6654 9.66667M7.9987 3L1.33203 6.33333L7.9987 9.66667L14.6654 6.33333L7.9987 3Z" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>