@nexub/mcp 1.9.0 → 2.1.0

package/README.md

@@ -35,6 +35,7 @@ claude plugin install nexub-ds@nexub
 | `list_components` | Every component and pattern, optionally filtered (`query: "table"`) |
 | `get_component` | Props, import, examples, when to use and accessibility for one component (`name: "DatePicker"`) |
 | `get_tokens` | Color roles, typography, spacing, shape, elevation, motion, with Tailwind utilities (`section: "Motion"`) |
+| `get_react_native` | Mobile apps: `@nexub/react-native` setup, components, screen patterns and mobile rules |
 
 ## Staying current
 

package/dist/skill/SKILL.md

@@ -13,6 +13,7 @@ Reference files (read only what the task needs):
 - [references/components.md](references/components.md): every component and pattern, grouped by category. Start here.
 - `references/components/<slug>.md`: props, examples, when to use and accessibility for one component. Read it before using a component you have not used yet in this session.
 - [references/tokens.md](references/tokens.md): color roles, type roles, spacing, shape, elevation, motion, z-index.
+- [references/react-native.md](references/react-native.md): **mobile apps** (Expo / React Native). Use `@nexub/react-native` and `@nexub/react-native/patterns` there, never `@nexub/react`.
 
 ## 1. Check the setup first
 

package/dist/skill/references/components.md

@@ -1,6 +1,6 @@
 # Component index
 
-Nexub DS v1.9.0. Open `components/<slug>.md` for props, examples and accessibility notes.
+Nexub DS v2.1.0. Open `components/<slug>.md` for props, examples and accessibility notes.
 Never use a component marked deprecated.
 
 ## Components — Actions

package/dist/skill/references/react-native.md

@@ -0,0 +1,112 @@
+# @nexub/react-native
+
+React Native components and screen patterns for Nexub Design System. They use the same tokens, brands and prop names as `@nexub/react` on the web.
+
+**Native chrome, Nexub content.** The system draws the tab bar, stack header, back gesture, action sheets, pickers and iOS 26 Liquid Glass; Nexub themes them. Everything inside a screen (lists, cards, buttons, inputs, money) is drawn by Nexub, so it looks the same on iOS, Android and the web.
+
+Status: **alpha**. Built for Expo SDK 57+ / React Native 0.86+ (New Architecture). Works in Expo apps and bare React Native apps.
+
+## Install
+
+```bash
+npx expo install @nexub/react-native react-native-reanimated react-native-worklets react-native-svg react-native-safe-area-context expo-font
+```
+
+Optional peers. Add only what you use; without them the feature is a no-op or the component tells you what to install:
+
+| Package | Used by |
+|---|---|
+| `expo-haptics` | Semantic haptics on every control |
+| `expo-glass-effect` | Native Liquid Glass (`Surface material="glass"`) on iOS 26+ |
+| `expo-screen-capture` | `PrivacyShield preventCapture` |
+| `@react-native-community/datetimepicker` | `DateTimeField` |
+
+`@nexub/tokens`, `@nexub/core`, `@nexub/icons` and the fonts (Inter, Plus Jakarta Sans, Geist Mono; OFL) come with the package.
+
+## Set up
+
+```tsx
+import { useFonts } from 'expo-font';
+import { Stack } from 'expo-router';
+import { NexubNativeProvider, ToastProvider, nexubFonts, useNexubNavigation } from '@nexub/react-native';
+
+function Screens() {
+  const nav = useNexubNavigation(); // native stack in Nexub colours and type
+  return <Stack screenOptions={nav.stack} />;
+}
+
+export default function RootLayout() {
+  const [ready] = useFonts(nexubFonts);
+  if (!ready) return null;
+  return (
+    <NexubNativeProvider product="payub">
+      <ToastProvider>
+        <Screens />
+      </ToastProvider>
+    </NexubNativeProvider>
+  );
+}
+```
+
+`NexubNativeProvider` props:
+
+| Prop | Default | |
+|---|---|---|
+| `scheme` | `'system'` | `'light'`, `'dark'` or follow the OS |
+| `contrast` | `'system'` | follows iOS Increase Contrast / Android high-contrast text (re-read on foreground) |
+| `product` | none | `'leap' \| 'bookub' \| 'payub' \| 'founderub'`: remaps the tertiary family |
+| `seed`, `seedTarget` | none | white-label colour: regenerates the primary (or tertiary) family with contrast-safe tones |
+| `glass` | `'balanced'` | the user's glass dial; forced `'off'` under Reduce Transparency |
+| `haptics` | `true` | the user's haptics setting |
+| `fonts` | `'nexub'` | `'system'` to use the platform font |
+| `locale`, `dir`, `messages` | `'en'` | Intl locale, RTL (derived from the locale) and translated strings, same as web `NexubProvider` |
+
+Hooks: `useTheme()`, `useRoles()`, `useHaptics()`, `useNexubMessages()`, `useNexubNavigation()`.
+
+## Components
+
+Names and props match `@nexub/react` where a web twin exists.
+
+- **Primitives:** `Text`, `Heading`, `Pressable` (state layer, 0.97 press spring, haptic), `Surface` (tonal tiers, elevation, glass), `Box`, `Stack`, `Inline`, `Icon`, `ScreenContainer`.
+- **Actions:** `Button`, `IconButton`, `ButtonGroup`, `Link`.
+- **Data:** `Amount`, `Badge`, `Avatar`, `AvatarGroup`, `Divider`.
+- **Inputs:** `TextField`, `PasswordInput`, `SearchField`, `MoneyInput`, `Stepper`, `Checkbox`, `RadioGroup` / `Radio`, `Switch` (the platform switch), `SegmentedControl`, `Slider`, `Chip`, `FilterChip`, `Select`, `DateTimeField`, `OTPInput`, `NumericKeypad`, `ExpressiveMoneyInput`.
+- **Containers:** `Card`, `ListItem` (navigation, switch, checkbox, radio, button and value rows), `ListSection`, `Accordion`.
+- **Overlays:** `BottomSheet` (detents), `ActionSheet` (system sheet on iOS), `ContextMenu`, `Dialog`.
+- **Feedback:** `Banner`, `ToastProvider` / `useToast`, `Progress`, `LoadingIndicator`, `Skeleton`, `EmptyState`, `ErrorState`, `OfflineBanner`, `Coachmark`.
+- **Mobile:** `SwipeableRow`, `RefreshControl`, `Carousel`, `PageIndicator`, `StickyFooter`, `SensitiveValue`, `PrivacyShield`, `FAB` (Android only by default).
+- **Navigation helpers:** `nexubStackOptions`, `nexubNavigationTheme`, `nexubTabsOptions`.
+
+Icons: `import { Search } from '@nexub/icons/native'`. These are the same names as `@nexub/icons`. Colour them with `<Icon icon={Search} color="primary" />`.
+
+## Patterns
+
+`import { SignInScreen, AmountStep, ActivityList } from '@nexub/react-native/patterns'`. Each pattern is a screen template that takes data and callbacks, so it works with any router.
+
+- **Auth:** `AuthScreen`, `SignInScreen`, `VerifyCodeScreen`, `LockScreen`.
+- **Money:** `FlowStep`, `AmountStep`, `ReviewStep`, `ActivityList`, `TransactionDetail`, `ResultScreen`.
+- **App:** `OnboardingScreen`, `PermissionPrimer`, `SettingsScreen`, `ProfileHeader`, `AppearanceSection`, `NotificationsInbox`, `SearchScreen`, `ChatScreen`, `PaywallScreen`, `AppSwitcherSheet`.
+
+## Rules the components follow
+
+- **Touch targets:** every control reaches 44pt (`hitSlop` on smaller visuals). Primary actions use `size="lg"` (48).
+- **Text scaling:** every role scales with the system text size. iOS follows Apple's Dynamic Type curve per role, and display and headline roles are capped so they don't push content off screen.
+- **Screen readers:**
+  - A list row is one element ("Amazon, −$42.50, today").
+  - Swipe and long-press actions are also accessibility actions.
+  - Masked values read as "hidden".
+  - Toasts are announced.
+- **Haptics are semantic** (`selection`, `toggleOn`/`toggleOff`, `confirm`, `reject`, `warning`, `snap`), never on plain taps, and never the only feedback.
+- **Motion:** M3 springs (no overshoot by default), off under Reduce Motion.
+- **Glass:** for the control layer only, never content. It is native Liquid Glass on iOS 26+, solid elsewhere and whenever the user turns transparency down.
+- **Security:** `OTPInput` uses one field, so SMS autofill works. `PasswordInput` sets the platform autofill hints. `SensitiveValue` re-masks when the app backgrounds. `PrivacyShield` covers the app-switcher snapshot. The library makes no network calls and stores nothing.
+
+## Testing your app
+
+The library's own tests use Jest (jest-expo) and React Native Testing Library. In your Jest setup, stub `react-native-reanimated`'s APIs and use `react-native-safe-area-context/jest/mock`; `packages/react-native/jest.setup.js` in the repo shows the pattern.
+
+## Links
+
+- Docs: https://nexub-ds-docs.pages.dev/getting-started/react-native
+- Plan and decisions: [MOBILE_PLAN.md](https://github.com/Nexub-AI/nexub-ds/blob/development/MOBILE_PLAN.md)
+- Web components: `@nexub/react`

package/dist/skill/references/tokens.md

@@ -1,6 +1,6 @@
 # Tokens
 
-Nexub DS v1.9.0. Every token is a CSS custom property from `@nexub/tokens/css` (loaded by `@nexub/themes/base`).
+Nexub DS v2.1.0. Every token is a CSS custom property from `@nexub/tokens/css` (loaded by `@nexub/themes/base`).
 The Tailwind preset (`@nexub/tokens/tailwind`) maps them to utilities. Never hardcode a hex, px spacing or shadow that a token covers.
 
 ## Color roles

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexub/mcp",
-  "version": "1.9.0",
+  "version": "2.1.0",
   "description": "MCP server for Nexub Design System: gives Claude, Cursor and any MCP client the components, patterns, tokens and design rules of the installed release.",
   "type": "module",
   "license": "MIT",

package/src/server.js

@@ -92,6 +92,16 @@ export function createServer() {
     },
   );
 
+  server.registerTool(
+    'get_react_native',
+    {
+      title: 'Nexub for React Native',
+      description:
+        'Mobile apps (Expo / React Native): install, NexubNativeProvider, every @nexub/react-native component and @nexub/react-native/patterns screen, and the mobile rules. Call this instead of the web references when building a mobile app.',
+    },
+    async () => text(read('references/react-native.md')),
+  );
+
   return server;
 }