@wireservers-ui/react-natives 1.0.1 → 2.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +71 -0
- package/README.md +416 -99
- package/bin/cli.js +376 -376
- package/bin/init.js +324 -0
- package/package.json +6 -2
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
All notable changes to `@wireservers-ui/react-natives` are documented here.
|
|
4
|
+
|
|
5
|
+
Format: [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
|
|
6
|
+
Versioning: [Semantic Versioning](https://semver.org/)
|
|
7
|
+
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
## [2.0.1] - 2026-03-16
|
|
11
|
+
|
|
12
|
+
### Added
|
|
13
|
+
- `bin/init.js` is now included in the published npm package (packaging parity with local source)
|
|
14
|
+
|
|
15
|
+
### Fixed
|
|
16
|
+
- Published `@wireservers-ui/react-natives@2.0.0` artifact missed `bin/init.js`; this patch release includes it so CLI initialization helpers are available in installed package contents
|
|
17
|
+
|
|
18
|
+
### Changed
|
|
19
|
+
- README now includes a release note section and direct changelog navigation guidance for npm/GitHub users
|
|
20
|
+
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
## [2.0.0] - 2026-03-15
|
|
24
|
+
|
|
25
|
+
### Added
|
|
26
|
+
- `.gitattributes` enforcing LF line endings for all source, script, and config files — prevents CRLF from breaking `npx` on Unix/macOS/Linux on Windows-developed repos
|
|
27
|
+
- `engines` field in `package.json` declaring Node.js `>=18.0.0` requirement
|
|
28
|
+
- Full `global.css` theme file in README manual setup (Step C) with complete light (`:root`) and dark (`.dark`) token sets for all color groups: `primary`, `secondary`, `tertiary`, `error`, `success`, `warning`, `info`, `typography`, `outline`, `background`, `indicator`
|
|
29
|
+
- Collapsible light/dark theme reference blocks in README
|
|
30
|
+
|
|
31
|
+
### Fixed
|
|
32
|
+
- **[Breaking on Unix/macOS/Linux]** `bin/cli.js` had CRLF line endings causing `env: 'bash\r': No such file or directory` and `node\r: No such file or directory` when consumers ran `npx @wireservers-ui/react-natives init` on non-Windows systems
|
|
33
|
+
|
|
34
|
+
### Changed
|
|
35
|
+
- README restructured: easy setup is now the primary path; manual setup is a detailed step-by-step with full file examples
|
|
36
|
+
- README `## Theming` section now points to the full `global.css` in manual Step C instead of repeating an abbreviated snippet
|
|
37
|
+
- README version badge updated to `v2.0.0`
|
|
38
|
+
|
|
39
|
+
---
|
|
40
|
+
|
|
41
|
+
## [1.0.1] - 2026-03-14
|
|
42
|
+
|
|
43
|
+
### Added
|
|
44
|
+
- `bin/cli.js` — CLI init command runnable via `npx @wireservers-ui/react-natives init`
|
|
45
|
+
- Automatic peer-dependency installation by `init` (`nativewind`, `tailwindcss`, `tailwind-variants`, `tailwind-merge`, `react-native-reanimated`, `react-native-worklets`, `react-native-svg`, `react-dom`, `react-native-web`)
|
|
46
|
+
- `react-dom` version is matched exactly to the consumer's installed `react` version to prevent React/DOM mismatch on web
|
|
47
|
+
- pnpm compatibility: `init` creates/updates `.npmrc` with `node-linker=hoisted` when pnpm is detected and triggers a reinstall pass
|
|
48
|
+
- Tailwind content path for library source added to generated `tailwind.config.js` (`node_modules/@wireservers-ui/react-natives/src/**`)
|
|
49
|
+
- Non-destructive init: all file creation follows skip-if-exists semantics — no consumer file is ever overwritten
|
|
50
|
+
|
|
51
|
+
### Fixed
|
|
52
|
+
- `nativewind/babel` placed in `presets` (not `plugins`) in generated `babel.config.js` — was causing Babel runtime errors and bundle failures
|
|
53
|
+
- Missing `react-native-worklets` dependency causing Metro bundler to fail
|
|
54
|
+
- Missing `react-native-svg` causing SVG component resolution failures
|
|
55
|
+
- Missing `tailwind-merge` causing variant merge errors at runtime
|
|
56
|
+
|
|
57
|
+
### Changed
|
|
58
|
+
- Tailwind class generation now works correctly for library components (colors, slider, etc.) because consumer Tailwind config scans library source
|
|
59
|
+
|
|
60
|
+
---
|
|
61
|
+
|
|
62
|
+
## [1.0.0] - 2026-03-01
|
|
63
|
+
|
|
64
|
+
### Added
|
|
65
|
+
- Initial release of `@wireservers-ui/react-natives`
|
|
66
|
+
- 70+ React Native components: Accordion, ActionSheet, Alert, AlertDialog, Avatar, Badge, Button, Calendar, Card, Carousel, Checkbox, CircularProgress, ColorPicker, Collapsible, DatePicker, Drawer, Empty, Fab, FormControl, Heading, Icon, IconButton, Image, Input, Kbd, Link, List, Menu, Modal, NumberInput, Overlay, Pagination, PasswordInput, PinInput, Popover, Portal, Pressable, Progress, Radio, Rating, SearchInput, SegmentedControl, Select, Skeleton, Slider, Snackbar, Spinner, Stack, Stat, Stepper, Switch, Table, Tabs, Tag, TagsInput, Text, Textarea, Timeline, Toast, Toggle, ToggleGroup, Tooltip, VisuallyHidden
|
|
67
|
+
- NativeWind v4 + Tailwind CSS 3 styling with `tailwind-variants` for type-safe variant APIs
|
|
68
|
+
- CSS variable token system for light/dark theming
|
|
69
|
+
- `tailwind-preset.js` Tailwind preset for consumers
|
|
70
|
+
- TypeScript source ships directly (no build step)
|
|
71
|
+
- MIT license
|
package/README.md
CHANGED
|
@@ -2,18 +2,33 @@
|
|
|
2
2
|
|
|
3
3
|
**A comprehensive React Native component library built with NativeWind and Tailwind Variants.**
|
|
4
4
|
|
|
5
|
-
> **Note:** This project is in
|
|
5
|
+
> **Note:** This project is in active development (v2.0.1). We're building out components, documentation, and tooling. Contributions and feedback are welcome!
|
|
6
6
|
|
|
7
7
|
[](LICENSE)
|
|
8
8
|
[](https://www.npmjs.com/package/@wireservers-ui/react-natives)
|
|
9
9
|
|
|
10
10
|
---
|
|
11
11
|
|
|
12
|
+
## Release Notes (v2.0.1)
|
|
13
|
+
|
|
14
|
+
### What was updated
|
|
15
|
+
|
|
16
|
+
- Published package contents now include `bin/init.js` (packaging parity fix)
|
|
17
|
+
- This ensures the installed npm artifact contains the same CLI helper file expected by local package contents
|
|
18
|
+
|
|
19
|
+
### Changelog
|
|
20
|
+
|
|
21
|
+
- Full changelog is included in the package at `CHANGELOG.md`
|
|
22
|
+
- GitHub: https://github.com/wireservers/wireservers-ui/blob/dev/packages/react-natives/CHANGELOG.md
|
|
23
|
+
- npm package page: open the `CHANGELOG.md` file from the package contents/files list
|
|
24
|
+
|
|
25
|
+
---
|
|
26
|
+
|
|
12
27
|
## What is React-Natives?
|
|
13
28
|
|
|
14
29
|
React-Natives is a collection of 70+ production-ready, accessible React Native components. Every component is TypeScript-first, themeable via CSS variables, and styled with NativeWind (Tailwind CSS for React Native).
|
|
15
30
|
|
|
16
|
-
**Live Demo:** [reactnatives.
|
|
31
|
+
**Live Demo:** [www.reactnatives.dev](https://www.reactnatives.dev)
|
|
17
32
|
|
|
18
33
|
### Key Features
|
|
19
34
|
|
|
@@ -34,118 +49,438 @@ React-Natives is a collection of 70+ production-ready, accessible React Native c
|
|
|
34
49
|
|
|
35
50
|
---
|
|
36
51
|
|
|
37
|
-
##
|
|
52
|
+
## Setup
|
|
38
53
|
|
|
39
|
-
###
|
|
54
|
+
### 1. Easy Setup (Recommended)
|
|
40
55
|
|
|
41
|
-
Use this
|
|
56
|
+
Use this for the fastest first-time setup in a new Expo app.
|
|
42
57
|
|
|
43
58
|
```bash
|
|
44
59
|
npx create-expo-app@latest wsui-init --template blank-typescript
|
|
45
60
|
cd wsui-init
|
|
46
|
-
npm install @wireservers-ui/react-natives@
|
|
47
|
-
npx @wireservers-ui/react-natives@
|
|
61
|
+
npm install @wireservers-ui/react-natives@2.0.0
|
|
62
|
+
npx @wireservers-ui/react-natives@2.0.1 init
|
|
48
63
|
npx expo start --clear --web
|
|
49
64
|
```
|
|
50
65
|
|
|
51
|
-
|
|
66
|
+
What `init` does for you:
|
|
67
|
+
|
|
68
|
+
- Installs required runtime dependencies
|
|
69
|
+
- Matches `react-dom` exactly to your installed `react` version
|
|
70
|
+
- Creates setup files only if missing
|
|
71
|
+
- Never overwrites existing files in your project
|
|
52
72
|
|
|
53
|
-
|
|
54
|
-
- Match `react-dom` to your installed `react` version exactly (prevents React/DOM mismatch)
|
|
55
|
-
- Create config files only when missing
|
|
56
|
-
- Never overwrite existing app/config files in your project
|
|
57
|
-
- Generate a working volume-slider demo in `App.tsx` only if `App.tsx` does not already exist
|
|
73
|
+
### 2. Manual Setup (Detailed)
|
|
58
74
|
|
|
59
|
-
|
|
75
|
+
Use this path if you want full control over every file.
|
|
60
76
|
|
|
61
|
-
|
|
77
|
+
#### Step A: Install packages
|
|
62
78
|
|
|
63
79
|
```bash
|
|
64
|
-
npm install @wireservers-ui/react-natives
|
|
80
|
+
npm install @wireservers-ui/react-natives@2.0.1
|
|
65
81
|
npm install nativewind tailwindcss tailwind-variants tailwind-merge react-native-reanimated react-native-worklets react-native-svg react-native-web react-dom
|
|
66
82
|
```
|
|
67
83
|
|
|
68
|
-
|
|
84
|
+
Important:
|
|
69
85
|
|
|
70
|
-
|
|
86
|
+
- Ensure `react-dom` matches your `react` version exactly.
|
|
87
|
+
- Example: if `react` is `19.2.0`, use `react-dom@19.2.0`.
|
|
71
88
|
|
|
72
|
-
|
|
89
|
+
#### Step B: Create or update `tailwind.config.js`
|
|
73
90
|
|
|
74
|
-
|
|
91
|
+
```js
|
|
92
|
+
/** @type {import('tailwindcss').Config} */
|
|
93
|
+
module.exports = {
|
|
94
|
+
content: [
|
|
95
|
+
"./App.{js,jsx,ts,tsx}",
|
|
96
|
+
"./app/**/*.{js,jsx,ts,tsx}",
|
|
97
|
+
"./components/**/*.{js,jsx,ts,tsx}",
|
|
98
|
+
"./node_modules/@wireservers-ui/react-natives/src/**/*.{js,jsx,ts,tsx}",
|
|
99
|
+
],
|
|
100
|
+
presets: [require("@wireservers-ui/react-natives/tailwind-preset")],
|
|
101
|
+
};
|
|
102
|
+
```
|
|
75
103
|
|
|
76
|
-
|
|
104
|
+
#### Step C: Create `global.css`
|
|
77
105
|
|
|
78
|
-
-
|
|
79
|
-
Added `bin/cli.js` and package `bin` mapping so consumers can run `npx @wireservers-ui/react-natives init`.
|
|
80
|
-
- How:
|
|
81
|
-
The CLI writes Tailwind, Babel, Metro, and theme files and installs missing runtime dependencies.
|
|
82
|
-
- Why:
|
|
83
|
-
Consumer setup was too error-prone and required manual multi-file configuration.
|
|
106
|
+
GitHub README does not support real tabs, so the sections below use collapsible blocks (tab-like) for Light and Dark theme tokens.
|
|
84
107
|
|
|
85
|
-
|
|
108
|
+
Use this full file content in `global.css`:
|
|
86
109
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
`presets: [["babel-preset-expo", { jsxImportSource: "nativewind" }], "nativewind/babel"]`.
|
|
92
|
-
- Why:
|
|
93
|
-
Wrong placement caused Babel runtime errors and failed bundling.
|
|
110
|
+
```css
|
|
111
|
+
@tailwind base;
|
|
112
|
+
@tailwind components;
|
|
113
|
+
@tailwind utilities;
|
|
94
114
|
|
|
95
|
-
|
|
115
|
+
:root {
|
|
116
|
+
--color-primary-0: 255 255 255;
|
|
117
|
+
--color-primary-50: 238 237 253;
|
|
118
|
+
--color-primary-100: 214 211 249;
|
|
119
|
+
--color-primary-200: 172 166 242;
|
|
120
|
+
--color-primary-300: 132 122 235;
|
|
121
|
+
--color-primary-400: 105 95 233;
|
|
122
|
+
--color-primary-500: 80 70 230;
|
|
123
|
+
--color-primary-600: 63 55 198;
|
|
124
|
+
--color-primary-700: 47 41 163;
|
|
125
|
+
--color-primary-800: 33 29 128;
|
|
126
|
+
--color-primary-900: 22 20 96;
|
|
127
|
+
--color-primary-950: 13 11 64;
|
|
128
|
+
|
|
129
|
+
--color-secondary-0: 255 255 255;
|
|
130
|
+
--color-secondary-50: 241 241 243;
|
|
131
|
+
--color-secondary-100: 220 220 224;
|
|
132
|
+
--color-secondary-200: 186 186 194;
|
|
133
|
+
--color-secondary-300: 152 152 163;
|
|
134
|
+
--color-secondary-400: 121 121 137;
|
|
135
|
+
--color-secondary-500: 92 92 112;
|
|
136
|
+
--color-secondary-600: 72 72 92;
|
|
137
|
+
--color-secondary-700: 54 54 72;
|
|
138
|
+
--color-secondary-800: 38 38 54;
|
|
139
|
+
--color-secondary-900: 24 24 38;
|
|
140
|
+
--color-secondary-950: 14 14 24;
|
|
141
|
+
|
|
142
|
+
--color-tertiary-50: 250 245 255;
|
|
143
|
+
--color-tertiary-100: 243 232 255;
|
|
144
|
+
--color-tertiary-200: 222 200 252;
|
|
145
|
+
--color-tertiary-300: 196 160 246;
|
|
146
|
+
--color-tertiary-400: 168 120 238;
|
|
147
|
+
--color-tertiary-500: 140 80 228;
|
|
148
|
+
--color-tertiary-600: 114 58 200;
|
|
149
|
+
--color-tertiary-700: 90 40 170;
|
|
150
|
+
--color-tertiary-800: 68 28 138;
|
|
151
|
+
--color-tertiary-900: 48 18 106;
|
|
152
|
+
--color-tertiary-950: 30 8 72;
|
|
153
|
+
|
|
154
|
+
--color-error-0: 255 255 255;
|
|
155
|
+
--color-error-50: 254 242 242;
|
|
156
|
+
--color-error-100: 254 226 226;
|
|
157
|
+
--color-error-200: 252 165 165;
|
|
158
|
+
--color-error-300: 248 113 113;
|
|
159
|
+
--color-error-400: 240 82 82;
|
|
160
|
+
--color-error-500: 230 53 53;
|
|
161
|
+
--color-error-600: 204 37 37;
|
|
162
|
+
--color-error-700: 178 24 24;
|
|
163
|
+
--color-error-800: 150 16 16;
|
|
164
|
+
--color-error-900: 122 10 10;
|
|
165
|
+
--color-error-950: 80 5 5;
|
|
166
|
+
|
|
167
|
+
--color-success-0: 255 255 255;
|
|
168
|
+
--color-success-50: 237 252 241;
|
|
169
|
+
--color-success-100: 210 245 221;
|
|
170
|
+
--color-success-200: 147 226 172;
|
|
171
|
+
--color-success-300: 96 207 128;
|
|
172
|
+
--color-success-400: 56 189 92;
|
|
173
|
+
--color-success-500: 34 168 66;
|
|
174
|
+
--color-success-600: 24 140 52;
|
|
175
|
+
--color-success-700: 18 112 40;
|
|
176
|
+
--color-success-800: 14 88 32;
|
|
177
|
+
--color-success-900: 10 64 22;
|
|
178
|
+
--color-success-950: 5 40 12;
|
|
179
|
+
|
|
180
|
+
--color-warning-0: 255 255 255;
|
|
181
|
+
--color-warning-50: 255 249 235;
|
|
182
|
+
--color-warning-100: 255 240 198;
|
|
183
|
+
--color-warning-200: 252 217 119;
|
|
184
|
+
--color-warning-300: 247 195 56;
|
|
185
|
+
--color-warning-400: 240 176 14;
|
|
186
|
+
--color-warning-500: 220 155 6;
|
|
187
|
+
--color-warning-600: 182 123 4;
|
|
188
|
+
--color-warning-700: 145 96 4;
|
|
189
|
+
--color-warning-800: 112 72 5;
|
|
190
|
+
--color-warning-900: 82 52 6;
|
|
191
|
+
--color-warning-950: 48 30 4;
|
|
192
|
+
|
|
193
|
+
--color-info-0: 255 255 255;
|
|
194
|
+
--color-info-50: 240 248 255;
|
|
195
|
+
--color-info-100: 224 240 253;
|
|
196
|
+
--color-info-200: 168 213 248;
|
|
197
|
+
--color-info-300: 110 184 240;
|
|
198
|
+
--color-info-400: 66 158 232;
|
|
199
|
+
--color-info-500: 34 134 220;
|
|
200
|
+
--color-info-600: 22 110 190;
|
|
201
|
+
--color-info-700: 14 88 158;
|
|
202
|
+
--color-info-800: 10 68 126;
|
|
203
|
+
--color-info-900: 6 50 96;
|
|
204
|
+
--color-info-950: 2 32 64;
|
|
205
|
+
|
|
206
|
+
--color-typography-0: 255 255 255;
|
|
207
|
+
--color-typography-50: 245 245 245;
|
|
208
|
+
--color-typography-100: 229 229 229;
|
|
209
|
+
--color-typography-200: 212 212 212;
|
|
210
|
+
--color-typography-300: 163 163 163;
|
|
211
|
+
--color-typography-400: 140 140 140;
|
|
212
|
+
--color-typography-500: 115 115 115;
|
|
213
|
+
--color-typography-600: 82 82 82;
|
|
214
|
+
--color-typography-700: 64 64 64;
|
|
215
|
+
--color-typography-800: 38 38 38;
|
|
216
|
+
--color-typography-900: 23 23 23;
|
|
217
|
+
--color-typography-950: 10 10 10;
|
|
218
|
+
|
|
219
|
+
--color-outline-0: 255 255 255;
|
|
220
|
+
--color-outline-50: 245 245 245;
|
|
221
|
+
--color-outline-100: 229 229 229;
|
|
222
|
+
--color-outline-200: 212 212 212;
|
|
223
|
+
--color-outline-300: 196 196 196;
|
|
224
|
+
--color-outline-400: 163 163 163;
|
|
225
|
+
--color-outline-500: 140 140 140;
|
|
226
|
+
--color-outline-600: 115 115 115;
|
|
227
|
+
--color-outline-700: 82 82 82;
|
|
228
|
+
--color-outline-800: 51 51 51;
|
|
229
|
+
--color-outline-900: 33 33 33;
|
|
230
|
+
--color-outline-950: 18 18 18;
|
|
96
231
|
|
|
97
|
-
-
|
|
98
|
-
|
|
99
|
-
-
|
|
100
|
-
|
|
101
|
-
-
|
|
102
|
-
|
|
232
|
+
--color-background-0: 255 255 255;
|
|
233
|
+
--color-background-50: 249 249 249;
|
|
234
|
+
--color-background-100: 242 242 242;
|
|
235
|
+
--color-background-200: 228 228 228;
|
|
236
|
+
--color-background-300: 212 212 212;
|
|
237
|
+
--color-background-400: 189 189 189;
|
|
238
|
+
--color-background-500: 163 163 163;
|
|
239
|
+
--color-background-600: 115 115 115;
|
|
240
|
+
--color-background-700: 82 82 82;
|
|
241
|
+
--color-background-800: 51 51 51;
|
|
242
|
+
--color-background-900: 33 33 33;
|
|
243
|
+
--color-background-950: 18 18 18;
|
|
244
|
+
--color-background-error: 254 226 226;
|
|
245
|
+
--color-background-warning: 255 243 224;
|
|
246
|
+
--color-background-muted: 245 245 245;
|
|
247
|
+
--color-background-success: 228 247 235;
|
|
248
|
+
--color-background-info: 224 240 253;
|
|
249
|
+
|
|
250
|
+
--color-indicator-primary: 80 70 230;
|
|
251
|
+
--color-indicator-info: 34 134 220;
|
|
252
|
+
--color-indicator-error: 230 53 53;
|
|
253
|
+
}
|
|
103
254
|
|
|
104
|
-
|
|
255
|
+
.dark {
|
|
256
|
+
--color-primary-0: 13 11 64;
|
|
257
|
+
--color-primary-50: 22 20 96;
|
|
258
|
+
--color-primary-100: 33 29 128;
|
|
259
|
+
--color-primary-200: 47 41 163;
|
|
260
|
+
--color-primary-300: 63 55 198;
|
|
261
|
+
--color-primary-400: 80 70 230;
|
|
262
|
+
--color-primary-500: 105 95 233;
|
|
263
|
+
--color-primary-600: 132 122 235;
|
|
264
|
+
--color-primary-700: 172 166 242;
|
|
265
|
+
--color-primary-800: 214 211 249;
|
|
266
|
+
--color-primary-900: 238 237 253;
|
|
267
|
+
--color-primary-950: 255 255 255;
|
|
268
|
+
|
|
269
|
+
--color-secondary-0: 14 14 24;
|
|
270
|
+
--color-secondary-50: 24 24 38;
|
|
271
|
+
--color-secondary-100: 38 38 54;
|
|
272
|
+
--color-secondary-200: 54 54 72;
|
|
273
|
+
--color-secondary-300: 72 72 92;
|
|
274
|
+
--color-secondary-400: 92 92 112;
|
|
275
|
+
--color-secondary-500: 121 121 137;
|
|
276
|
+
--color-secondary-600: 152 152 163;
|
|
277
|
+
--color-secondary-700: 186 186 194;
|
|
278
|
+
--color-secondary-800: 220 220 224;
|
|
279
|
+
--color-secondary-900: 241 241 243;
|
|
280
|
+
--color-secondary-950: 255 255 255;
|
|
281
|
+
|
|
282
|
+
--color-tertiary-50: 30 8 72;
|
|
283
|
+
--color-tertiary-100: 48 18 106;
|
|
284
|
+
--color-tertiary-200: 68 28 138;
|
|
285
|
+
--color-tertiary-300: 90 40 170;
|
|
286
|
+
--color-tertiary-400: 114 58 200;
|
|
287
|
+
--color-tertiary-500: 140 80 228;
|
|
288
|
+
--color-tertiary-600: 168 120 238;
|
|
289
|
+
--color-tertiary-700: 196 160 246;
|
|
290
|
+
--color-tertiary-800: 222 200 252;
|
|
291
|
+
--color-tertiary-900: 243 232 255;
|
|
292
|
+
--color-tertiary-950: 250 245 255;
|
|
293
|
+
|
|
294
|
+
--color-error-0: 80 5 5;
|
|
295
|
+
--color-error-50: 122 10 10;
|
|
296
|
+
--color-error-100: 150 16 16;
|
|
297
|
+
--color-error-200: 178 24 24;
|
|
298
|
+
--color-error-300: 204 37 37;
|
|
299
|
+
--color-error-400: 230 53 53;
|
|
300
|
+
--color-error-500: 240 82 82;
|
|
301
|
+
--color-error-600: 248 113 113;
|
|
302
|
+
--color-error-700: 252 165 165;
|
|
303
|
+
--color-error-800: 254 226 226;
|
|
304
|
+
--color-error-900: 254 242 242;
|
|
305
|
+
--color-error-950: 255 255 255;
|
|
306
|
+
|
|
307
|
+
--color-success-0: 5 40 12;
|
|
308
|
+
--color-success-50: 10 64 22;
|
|
309
|
+
--color-success-100: 14 88 32;
|
|
310
|
+
--color-success-200: 18 112 40;
|
|
311
|
+
--color-success-300: 24 140 52;
|
|
312
|
+
--color-success-400: 34 168 66;
|
|
313
|
+
--color-success-500: 56 189 92;
|
|
314
|
+
--color-success-600: 96 207 128;
|
|
315
|
+
--color-success-700: 147 226 172;
|
|
316
|
+
--color-success-800: 210 245 221;
|
|
317
|
+
--color-success-900: 237 252 241;
|
|
318
|
+
--color-success-950: 255 255 255;
|
|
319
|
+
|
|
320
|
+
--color-warning-0: 48 30 4;
|
|
321
|
+
--color-warning-50: 82 52 6;
|
|
322
|
+
--color-warning-100: 112 72 5;
|
|
323
|
+
--color-warning-200: 145 96 4;
|
|
324
|
+
--color-warning-300: 182 123 4;
|
|
325
|
+
--color-warning-400: 220 155 6;
|
|
326
|
+
--color-warning-500: 240 176 14;
|
|
327
|
+
--color-warning-600: 247 195 56;
|
|
328
|
+
--color-warning-700: 252 217 119;
|
|
329
|
+
--color-warning-800: 255 240 198;
|
|
330
|
+
--color-warning-900: 255 249 235;
|
|
331
|
+
--color-warning-950: 255 255 255;
|
|
332
|
+
|
|
333
|
+
--color-info-0: 2 32 64;
|
|
334
|
+
--color-info-50: 6 50 96;
|
|
335
|
+
--color-info-100: 10 68 126;
|
|
336
|
+
--color-info-200: 14 88 158;
|
|
337
|
+
--color-info-300: 22 110 190;
|
|
338
|
+
--color-info-400: 34 134 220;
|
|
339
|
+
--color-info-500: 66 158 232;
|
|
340
|
+
--color-info-600: 110 184 240;
|
|
341
|
+
--color-info-700: 168 213 248;
|
|
342
|
+
--color-info-800: 224 240 253;
|
|
343
|
+
--color-info-900: 240 248 255;
|
|
344
|
+
--color-info-950: 255 255 255;
|
|
345
|
+
|
|
346
|
+
--color-typography-0: 10 10 10;
|
|
347
|
+
--color-typography-50: 23 23 23;
|
|
348
|
+
--color-typography-100: 38 38 38;
|
|
349
|
+
--color-typography-200: 64 64 64;
|
|
350
|
+
--color-typography-300: 82 82 82;
|
|
351
|
+
--color-typography-400: 115 115 115;
|
|
352
|
+
--color-typography-500: 140 140 140;
|
|
353
|
+
--color-typography-600: 163 163 163;
|
|
354
|
+
--color-typography-700: 212 212 212;
|
|
355
|
+
--color-typography-800: 229 229 229;
|
|
356
|
+
--color-typography-900: 245 245 245;
|
|
357
|
+
--color-typography-950: 255 255 255;
|
|
358
|
+
|
|
359
|
+
--color-outline-0: 18 18 18;
|
|
360
|
+
--color-outline-50: 33 33 33;
|
|
361
|
+
--color-outline-100: 51 51 51;
|
|
362
|
+
--color-outline-200: 82 82 82;
|
|
363
|
+
--color-outline-300: 115 115 115;
|
|
364
|
+
--color-outline-400: 140 140 140;
|
|
365
|
+
--color-outline-500: 163 163 163;
|
|
366
|
+
--color-outline-600: 196 196 196;
|
|
367
|
+
--color-outline-700: 212 212 212;
|
|
368
|
+
--color-outline-800: 229 229 229;
|
|
369
|
+
--color-outline-900: 245 245 245;
|
|
370
|
+
--color-outline-950: 255 255 255;
|
|
371
|
+
|
|
372
|
+
--color-background-0: 24 23 25;
|
|
373
|
+
--color-background-50: 38 38 40;
|
|
374
|
+
--color-background-100: 51 51 53;
|
|
375
|
+
--color-background-200: 66 66 68;
|
|
376
|
+
--color-background-300: 82 82 85;
|
|
377
|
+
--color-background-400: 104 104 108;
|
|
378
|
+
--color-background-500: 130 130 135;
|
|
379
|
+
--color-background-600: 163 163 169;
|
|
380
|
+
--color-background-700: 196 196 201;
|
|
381
|
+
--color-background-800: 221 221 226;
|
|
382
|
+
--color-background-900: 240 240 245;
|
|
383
|
+
--color-background-950: 255 255 255;
|
|
384
|
+
--color-background-error: 80 5 5;
|
|
385
|
+
--color-background-warning: 48 30 4;
|
|
386
|
+
--color-background-muted: 38 38 40;
|
|
387
|
+
--color-background-success: 5 40 12;
|
|
388
|
+
--color-background-info: 2 32 64;
|
|
389
|
+
|
|
390
|
+
--color-indicator-primary: 132 122 235;
|
|
391
|
+
--color-indicator-info: 66 158 232;
|
|
392
|
+
--color-indicator-error: 240 82 82;
|
|
393
|
+
}
|
|
394
|
+
```
|
|
105
395
|
|
|
106
|
-
-
|
|
107
|
-
Init now reads the installed `react` version from consumer `node_modules` and installs `react-dom@<exact-react-version>`.
|
|
108
|
-
- How:
|
|
109
|
-
CLI helper resolves `node_modules/react/package.json` and builds a matching `react-dom` install target.
|
|
110
|
-
- Why:
|
|
111
|
-
React web requires exact version parity; mismatch causes immediate runtime failure.
|
|
396
|
+
Optional tab-like reference blocks (same values split by mode):
|
|
112
397
|
|
|
113
|
-
|
|
398
|
+
<details>
|
|
399
|
+
<summary>Light Theme Tokens (:root)</summary>
|
|
114
400
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
- Why:
|
|
121
|
-
Without this, many library utility classes are not generated in consumer CSS, causing missing colors and broken visual behavior.
|
|
401
|
+
```css
|
|
402
|
+
/* Use the :root block from the full file above */
|
|
403
|
+
```
|
|
404
|
+
|
|
405
|
+
</details>
|
|
122
406
|
|
|
123
|
-
|
|
407
|
+
<details>
|
|
408
|
+
<summary>Dark Theme Tokens (.dark)</summary>
|
|
124
409
|
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
CLI detects lockfile, applies hoisted linker, and runs a reinstall pass.
|
|
129
|
-
- Why:
|
|
130
|
-
Default pnpm linking can break Metro module resolution in Expo projects.
|
|
410
|
+
```css
|
|
411
|
+
/* Use the .dark block from the full file above */
|
|
412
|
+
```
|
|
131
413
|
|
|
132
|
-
|
|
414
|
+
</details>
|
|
133
415
|
|
|
134
|
-
|
|
135
|
-
Init no longer overwrites existing project files.
|
|
136
|
-
- How:
|
|
137
|
-
All file writes now follow create-if-missing semantics and print a skip message for existing files.
|
|
138
|
-
- Why:
|
|
139
|
-
Consumers must keep control of their app and config files; setup tooling should be safe by default.
|
|
416
|
+
#### Step D: Create or update `babel.config.js`
|
|
140
417
|
|
|
141
|
-
|
|
418
|
+
```js
|
|
419
|
+
module.exports = function (api) {
|
|
420
|
+
api.cache(true);
|
|
421
|
+
return {
|
|
422
|
+
presets: [
|
|
423
|
+
["babel-preset-expo", { jsxImportSource: "nativewind" }],
|
|
424
|
+
"nativewind/babel",
|
|
425
|
+
],
|
|
426
|
+
};
|
|
427
|
+
};
|
|
428
|
+
```
|
|
429
|
+
|
|
430
|
+
#### Step E: Create or update `metro.config.js`
|
|
431
|
+
|
|
432
|
+
```js
|
|
433
|
+
const { getDefaultConfig } = require("expo/metro-config");
|
|
434
|
+
const { withNativeWind } = require("nativewind/metro");
|
|
435
|
+
|
|
436
|
+
const config = getDefaultConfig(__dirname);
|
|
437
|
+
|
|
438
|
+
module.exports = withNativeWind(config, { input: "./global.css" });
|
|
439
|
+
```
|
|
440
|
+
|
|
441
|
+
#### Step F: Add NativeWind types file `nativewind-env.d.ts`
|
|
442
|
+
|
|
443
|
+
```ts
|
|
444
|
+
/// <reference types="nativewind/types" />
|
|
445
|
+
```
|
|
142
446
|
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
447
|
+
#### Step G: Import `global.css` in your app entry
|
|
448
|
+
|
|
449
|
+
Example `App.tsx`:
|
|
450
|
+
|
|
451
|
+
```tsx
|
|
452
|
+
import "./global.css";
|
|
453
|
+
import React from "react";
|
|
454
|
+
import { View, Text } from "react-native";
|
|
455
|
+
|
|
456
|
+
export default function App() {
|
|
457
|
+
return (
|
|
458
|
+
<View className="flex-1 items-center justify-center bg-background-0">
|
|
459
|
+
<Text className="text-typography-900">React-Natives ready</Text>
|
|
460
|
+
</View>
|
|
461
|
+
);
|
|
462
|
+
}
|
|
463
|
+
```
|
|
464
|
+
|
|
465
|
+
#### Step H: Optional pnpm compatibility (`.npmrc`)
|
|
466
|
+
|
|
467
|
+
If you use pnpm with Expo/Metro, add:
|
|
468
|
+
|
|
469
|
+
```ini
|
|
470
|
+
node-linker=hoisted
|
|
471
|
+
```
|
|
472
|
+
|
|
473
|
+
Then run:
|
|
474
|
+
|
|
475
|
+
```bash
|
|
476
|
+
pnpm install
|
|
477
|
+
```
|
|
478
|
+
|
|
479
|
+
#### Step I: Start the app
|
|
480
|
+
|
|
481
|
+
```bash
|
|
482
|
+
npx expo start --clear --web
|
|
483
|
+
```
|
|
149
484
|
|
|
150
485
|
---
|
|
151
486
|
|
|
@@ -206,29 +541,11 @@ Toggle, ToggleGroup, Collapsible, Calendar
|
|
|
206
541
|
|
|
207
542
|
## Theming
|
|
208
543
|
|
|
209
|
-
Components use CSS variables for theming.
|
|
210
|
-
|
|
211
|
-
```css
|
|
212
|
-
@tailwind base;
|
|
213
|
-
@tailwind components;
|
|
214
|
-
@tailwind utilities;
|
|
544
|
+
Components use CSS variables for theming.
|
|
215
545
|
|
|
216
|
-
|
|
217
|
-
--color-primary-500: 80 70 230;
|
|
218
|
-
--color-background-0: 255 255 255;
|
|
219
|
-
--color-typography-900: 23 23 23;
|
|
220
|
-
/* ... */
|
|
221
|
-
}
|
|
222
|
-
|
|
223
|
-
.dark {
|
|
224
|
-
--color-primary-500: 120 110 255;
|
|
225
|
-
--color-background-0: 24 23 25;
|
|
226
|
-
--color-typography-900: 245 245 245;
|
|
227
|
-
/* ... */
|
|
228
|
-
}
|
|
229
|
-
```
|
|
546
|
+
For the complete theming file (full `:root` + `.dark` token sets), use the manual setup instructions in **Step C: Create `global.css`** above.
|
|
230
547
|
|
|
231
|
-
|
|
548
|
+
Token groups include `primary`, `secondary`, `tertiary`, `error`, `success`, `warning`, `info`, `typography`, `outline`, `background`, and `indicator`.
|
|
232
549
|
|
|
233
550
|
---
|
|
234
551
|
|