@vvedantb/native-ui 0.1.0 → 0.2.1

package/README.md

@@ -1,13 +1,13 @@
 # `@vvedantb/native-ui`
 
-React Native + Expo primitives extracted from Velth. Floating pill chrome, Android-safe shadows, forms, list rows, and settings sections.
+React Native + Expo primitives extracted from a React Native app. Floating pill chrome, Android-safe shadows, forms, list rows, and settings sections.
 
 Web apps should keep using `@vvedantb/ui`. This package is native-only.
 
 ## Install
 
 ```sh
-npm install @vvedantb/native-ui @vvedantb/tokens
+npm install @vvedantb/native-ui
 ```
 
 Peers the app must already have (Expo SDK 57 / RN 0.76+):
@@ -66,20 +66,25 @@ import { NativeUiProvider, Button, Card } from "@vvedantb/native-ui";
 </NativeUiProvider>
 ```
 
-`useLargerText()` steps type and tap targets up. `accentColor` tints FABs and card icons. Surfaces use `@vvedantb/tokens/native` for fill, radius (card 24, row 20, pill 999) and spacing (16).
+`useLargerText()` steps type and tap targets up. `accentColor` tints FABs and card icons. Surfaces use the tokens in `src/tokens.ts` for fill, radius (card 24, row 20, pill 999) and spacing (16).
 
 ## Floating UI / Android shadows
 
 Do not put `elevation` or NativeWind `shadow-*` on nested or translucent chrome. `floatingShadow` is iOS `shadow*` and Android/web `boxShadow`. `FloatingSurface` paints an opaque fill on Android and clips on an inner view. Blur is iOS-only.
 
+## Tokens
+
+The JS tokens (colours, radii, spacing) live in `src/tokens.ts`. It is a copy of `@vvedantb/ui/tokens/native`, kept inside this package so React Native apps do not install `@vvedantb/ui` (Radix, react-dom and the rest of the web stack) for colour values. A test in `@vvedantb/ui` fails when the two files differ, so change both together.
+
+Apps that already depend on `@vvedantb/ui` can import the same values from `@vvedantb/ui/tokens/native`.
+
 ## Publish
 
 There is no CI publish workflow. From a machine with npm access:
 
 ```sh
 export NPM_CONFIG_USERCONFIG="$HOME/.npmrc"   # if you keep the token there
-cd packages/tokens && npm publish --access public
-cd ../native-ui && npm publish --access public
+cd packages/native-ui && npm publish --access public
 ```
 
-`@vvedantb/tokens` must be `0.1.1+` first (`./native` export).
+`@vvedantb/native-ui` `0.2.0` has no `@vvedantb/tokens` peer. See `MIGRATION.md` at the repository root.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/native-ui",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "license": "MIT",
   "description": "Shared React Native / Expo UI primitives. Floating surfaces, forms, settings chrome, and tab bar.",
   "type": "module",
@@ -16,7 +16,8 @@
     ".": {
       "types": "./src/index.ts",
       "default": "./src/index.ts"
-    }
+    },
+    "./package.json": "./package.json"
   },
   "types": "./src/index.ts",
   "files": [
@@ -37,7 +38,6 @@
     "@rn-primitives/slot": "*",
     "@rn-primitives/switch": "*",
     "@tabler/icons-react-native": "*",
-    "@vvedantb/tokens": ">=0.1.1",
     "class-variance-authority": ">=0.7.0",
     "clsx": ">=2.0.0",
     "dayjs": ">=1.11.0",
@@ -55,14 +55,21 @@
     "tailwind-merge": ">=2.0.0"
   },
   "peerDependenciesMeta": {
-    "@gorhom/bottom-sheet": { "optional": true },
-    "@react-native-community/datetimepicker": { "optional": true },
-    "dayjs": { "optional": true },
-    "expo-router": { "optional": true }
+    "@gorhom/bottom-sheet": {
+      "optional": true
+    },
+    "@react-native-community/datetimepicker": {
+      "optional": true
+    },
+    "dayjs": {
+      "optional": true
+    },
+    "expo-router": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@types/react": "^19.1.0",
-    "@vvedantb/tokens": "workspace:*",
     "react": "^19.1.0",
     "typescript": "^5.9.0",
     "vitest": "^3.2.0"

package/src/colors.ts

@@ -1,4 +1,4 @@
-import { tokens } from "@vvedantb/tokens/native";
+import { tokens } from "./tokens";
 
 export const NEUTRAL_100 = "#f5f5f5";
 export const NEUTRAL_500 = tokens.color.muted.light;

package/src/floating.ts

@@ -1,5 +1,5 @@
 import { Platform, type ViewStyle } from "react-native";
-import { tokens } from "@vvedantb/tokens/native";
+import { tokens } from "./tokens";
 
 export const FLOATING_INSET = tokens.spacing.unit;
 export const FLOATING_TAB_BAR_HEIGHT = 64;

package/src/theme.tsx

@@ -1,5 +1,5 @@
 import { createContext, useContext, type ReactNode } from "react";
-import { tokens } from "@vvedantb/tokens/native";
+import { tokens } from "./tokens";
 
 export const DEFAULT_ACCENT = "#db2777";
 

package/src/tokens.ts

@@ -0,0 +1,43 @@
+/**
+ * JS tokens for React Native. Values match `tokens.css`
+ * (oklch neutrals → hex, 1rem = 16).
+ *
+ * Copy of `packages/ui/tokens/src/native.ts`, kept here so native-ui has no
+ * dependency on the web package. A test in `@vvedantb/ui` fails when the two
+ * differ below this header: change both together.
+ */
+export const tokens = {
+  color: {
+    background: { light: "#f6f6f6", dark: "#1f1f1f" },
+    foreground: { light: "#242426", dark: "#fafafa" },
+    muted: { light: "#737373", dark: "#b3b3b3" },
+    border: { light: "#e5e5e5", dark: "#474747" },
+    surface: { light: "#ffffff", dark: "#242426" },
+    surfaceSecondary: { light: "#f2f2f2", dark: "#2a2a2c" },
+    surfaceCard: { light: "#fafafa", dark: "#2a2a2c" },
+    separator: { light: "#ebebeb", dark: "#404040" },
+    white: "#ffffff",
+    black: "#000000",
+    hairline: {
+      light: "rgba(255, 255, 255, 0.7)",
+      dark: "rgba(255, 255, 255, 0.12)",
+    },
+    fill: {
+      light: "rgba(255, 255, 255, 0.86)",
+      dark: "rgba(28, 28, 30, 0.88)",
+    },
+  },
+  radius: {
+    lg: 16,
+    field: 20,
+    md: 14,
+    sm: 12,
+    card: 24,
+    pill: 999,
+  },
+  spacing: {
+    unit: 16,
+  },
+} as const;
+
+export type Tokens = typeof tokens;