feat(ui): migrate packages/ui off @packrat-ai/nativewindui to @expo/ui

.gitignore

@@ -89,3 +89,10 @@ apps/swift/Generated/
 
 # portless (local-dev proxy; state lives in ~/.portless, this is defensive)
 .portless/
+
+# Defensive: `bun expo <subcommand>` (e.g. `bun expo prebuild`) resolves to the expo binary
+# directly instead of the root "expo" script when extra args are passed, running from repo
+# root instead of apps/expo — generates a stray Xcode project here. Always cd into apps/expo
+# (or use `bun ios`/`bun android`) instead of `bun expo <subcommand>`.
+/ios/
+/android/

CLAUDE.md

@@ -14,7 +14,7 @@ Bun workspace monorepo with three apps and two packages:
 | `apps/guides` | Next.js 15 / React 19 / Radix UI / Shadcn | Content/guides site |
 | `apps/landing` | Next.js 15 / React 19 / Framer Motion | Marketing site |
 | `packages/api` | Elysia on Cloudflare Workers / Drizzle ORM / Neon PostgreSQL | Backend API |
-| `packages/ui` | Re-exports from `@packrat-ai/nativewindui` | Shared UI components |
+| `packages/ui` | `@expo/ui` wrappers + plain RN components | Shared UI components |
 
 ### Infrastructure
 
@@ -213,55 +213,6 @@ export const apiClient = createApiClient({
 - Call via Treaty path syntax: `apiClient.auth.login.post(...)`, `apiClient.trails.search.get({ query: { q } })`
 - Responses are `{ data, error, status }` — check `if (error || !data)` before using `data`
 
-## Private Package Auth
-
-`@packrat-ai/nativewindui` is hosted on GitHub Packages. `bunfig.toml` resolves the scope using `$PACKRAT_NATIVEWIND_UI_GITHUB_TOKEN`. Bun auto-loads `.env.local` before running `install`, so the simplest setup is to put the token there alongside your other secrets.
-
-### One-time GitHub CLI setup
-
-```bash
-gh auth login
-gh auth refresh -h github.com -s read:packages   # write:packages also works
-```
-
-### Preferred: add the token to `.env.local`
-
-Append to the repo-root `.env.local` (gitignored):
-
-```bash
-PACKRAT_NATIVEWIND_UI_GITHUB_TOKEN=<token from `gh auth token`>
-```
-
-Then `bun install` just works — Bun picks it up automatically.
-
-### Alternative: export in shell
-
-Useful in ephemeral shells or when you don't keep a `.env.local`:
-
-```bash
-# Inline
-export PACKRAT_NATIVEWIND_UI_GITHUB_TOKEN=$(gh auth token)
-bun install
-
-# One-liner
-PACKRAT_NATIVEWIND_UI_GITHUB_TOKEN=$(gh auth token) bun install
-```
-
-The `preinstall` hook cannot inject env vars into the parent `bun install` process (Bun has already parsed `bunfig.toml`), so if neither `.env.local` nor a shell export has the token, install will 401.
-
-### CI / environments without `gh`
-
-Set the env var directly from secrets:
-
-```bash
-PACKRAT_NATIVEWIND_UI_GITHUB_TOKEN=<personal access token with read:packages>
-```
-
-### Troubleshooting
-
-- **401 on `@packrat-ai/nativewindui`**: Token is missing from both `.env.local` and your shell, or lacks `read:packages`. Check `.env.local` first.
-- The `preinstall` hook (`bun run configure:deps`) only *validates* that the token is visible to the install process — it doesn't inject it.
-
 ## Path Aliases
 
 Defined in root `tsconfig.json`:
@@ -305,9 +256,7 @@ If you find a migration in the repo that was hand-written (no `drizzle-kit` prov
 
 ## Common Issues
 
-- **401 on `bun install`**: Missing `PACKRAT_NATIVEWIND_UI_GITHUB_TOKEN` — see Private Package Auth above
 - **Next.js build failures**: `apps/guides` and `apps/landing` may fail without internet (fetches remote data)
-- **Type errors after NativeWindUI update**: Check for renamed refs — v2.0.0 renamed `AlertRef` → `AlertMethods`, `LargeTitleSearchBarRef` → `LargeTitleSearchBarMethods`
 - **Bun install hangs**: Normal — takes 120+ seconds. Never cancel mid-install.
 
 ## Documented Solutions

apps/expo/app.config.ts

@@ -187,7 +187,6 @@ export default (): ExpoConfig =>
             'react-native-maps',
             { iosGoogleMapsApiKey: process.env.EXPO_PUBLIC_GOOGLE_MAPS_API_KEY },
           ],
-          '@react-native-community/datetimepicker',
           '@sentry/react-native',
           'expo-status-bar',
           ['expo-splash-screen', { image: './assets/splash.png' }],

apps/expo/app/(app)/(tabs)/(home)/index.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import type { BottomSheetModal } from '@gorhom/bottom-sheet';
+import type { BottomSheetModal } from '@expo/ui/community/bottom-sheet';
 import { arrayIncludes, assertIsString, objectKeys } from '@packrat/guards';
-import type { ListDataItem } from '@packrat/ui/nativewindui';
-import { List, type ListRenderItemInfo, ListSectionHeader } from '@packrat/ui/nativewindui';
 import { getAppBarOptions } from '@packrat/ui/src/app-bar';
+import type { ListDataItem } from '@packrat/ui/src/list';
+import { List, type ListRenderItemInfo, ListSectionHeader } from '@packrat/ui/src/list';
 import { SearchOverlay } from '@packrat/ui/src/search-overlay';
 import { AndroidTabBarInsetFix } from 'expo-app/components/AndroidTabBarInsetFix';
 import { Icon } from 'expo-app/components/Icon';

apps/expo/app/(app)/(tabs)/profile/index.tsx

@@ -1,17 +1,11 @@
 import { clientEnvs } from '@packrat/env/expo-client';
 import { isRemoteUrl, isString } from '@packrat/guards';
-import {
-  ActivityIndicator,
-  Avatar,
-  AvatarFallback,
-  Button,
-  List,
-  ListItem,
-  type ListRenderItemInfo,
-  ListSectionHeader,
-  Text,
-} from '@packrat/ui/nativewindui';
 import { getAppBarOptions } from '@packrat/ui/src/app-bar';
+import { Avatar, AvatarFallback } from '@packrat/ui/src/avatar';
+import { Button } from '@packrat/ui/src/button';
+import { List, ListItem, type ListRenderItemInfo, ListSectionHeader } from '@packrat/ui/src/list';
+import { ActivityIndicator } from '@packrat/ui/src/loading-indicator';
+import { Text } from '@packrat/ui/src/text';
 import * as Sentry from '@sentry/react-native';
 import { AndroidTabBarInsetFix } from 'expo-app/components/AndroidTabBarInsetFix';
 import { Icon } from 'expo-app/components/Icon';
@@ -49,7 +43,7 @@ function SettingsIcon() {
   const { colors } = useColorScheme();
   return (
     <Link href="/settings" asChild>
-      <Pressable className="opacity-80">
+      <Pressable testID={testIds.profile.settingsBtn} className="opacity-80">
         {({ pressed }) => (
           <View className={cn(pressed ? 'opacity-50' : 'opacity-90')}>
             <Icon name="cog-outline" color={colors.foreground} />

apps/expo/app/(app)/(tabs)/profile/name.tsx

@@ -1,5 +1,8 @@
-import { Button, Form, FormItem, FormSection, Text, TextField } from '@packrat/ui/nativewindui';
+import { Button } from '@packrat/ui/src/button';
+import { Form, FormItem, FormSection } from '@packrat/ui/src/form';
 import { IosTransparentHeaderOverlapFix } from '@packrat/ui/src/ios-transparent-header-overlap-fix';
+import { Text } from '@packrat/ui/src/text';
+import { TextField } from '@packrat/ui/src/text-field';
 import { useUser } from 'expo-app/features/auth/hooks/useUser';
 import { useUpdateProfile } from 'expo-app/features/profile/hooks/useUpdateProfile';
 import { cn } from 'expo-app/lib/cn';

apps/expo/app/(app)/(tabs)/profile/notifications.tsx

@@ -1,4 +1,7 @@
-import { Button, Form, FormItem, FormSection, Text, Toggle } from '@packrat/ui/nativewindui';
+import { Button } from '@packrat/ui/src/button';
+import { Form, FormItem, FormSection } from '@packrat/ui/src/form';
+import { Text } from '@packrat/ui/src/text';
+import { Toggle } from '@packrat/ui/src/toggle';
 import { Icon } from 'expo-app/components/Icon';
 import { cn } from 'expo-app/lib/cn';
 import { useTranslation } from 'expo-app/lib/hooks/useTranslation';
@@ -79,7 +82,7 @@ export default function NotificationsScreen() {
                 </View>
                 <View className="flex-1">
                   <Text className="font-medium">{t('profile.weatherAlerts')}</Text>
-                  <Text variant="caption1" className="text-muted-foreground">
+                  <Text variant="caption1" className="text-muted-foreground" wrap>
                     {t('profile.weatherAlertsNotif')}
                   </Text>
                 </View>

apps/expo/app/(app)/(tabs)/profile/username.tsx

@@ -1,4 +1,7 @@
-import { Button, Form, FormItem, FormSection, Text, TextField } from '@packrat/ui/nativewindui';
+import { Button } from '@packrat/ui/src/button';
+import { Form, FormItem, FormSection } from '@packrat/ui/src/form';
+import { Text } from '@packrat/ui/src/text';
+import { TextField } from '@packrat/ui/src/text-field';
 import { cn } from 'expo-app/lib/cn';
 import { useTranslation } from 'expo-app/lib/hooks/useTranslation';
 import { router, Stack } from 'expo-router';

apps/expo/app/(app)/_layout.tsx

@@ -1,5 +1,5 @@
 import { use$ } from '@legendapp/state/react';
-import { ActivityIndicator } from '@packrat/ui/nativewindui';
+import { ActivityIndicator } from '@packrat/ui/src/loading-indicator';
 import { ThemeToggle } from 'expo-app/components/ThemeToggle';
 import {
   isLoadingAtom,

apps/expo/app/(app)/ai-chat.tsx

@@ -1,6 +1,8 @@
 import { type UIMessage, useChat } from '@ai-sdk/react';
 import { clientEnvs } from '@packrat/env/expo-client';
-import { ActivityIndicator, Button, Text } from '@packrat/ui/nativewindui';
+import { Button } from '@packrat/ui/src/button';
+import { ActivityIndicator } from '@packrat/ui/src/loading-indicator';
+import { Text } from '@packrat/ui/src/text';
 import {
   DefaultChatTransport,
   lastAssistantMessageIsCompleteWithToolCalls,

apps/expo/app/(app)/current-pack/[id].tsx

@@ -1,5 +1,6 @@
-import { Avatar, AvatarFallback, AvatarImage, Text } from '@packrat/ui/nativewindui';
 import { getAppBarOptions } from '@packrat/ui/src/app-bar';
+import { Avatar, AvatarFallback, AvatarImage } from '@packrat/ui/src/avatar';
+import { Text } from '@packrat/ui/src/text';
 import { parseWeightUnit } from '@packrat/units';
 import { useWeightUnit } from 'expo-app/features/auth/hooks/useWeightUnit';
 import { usePackDetailsFromStore } from 'expo-app/features/packs/hooks/usePackDetailsFromStore';
@@ -76,7 +77,7 @@ function CategoryItem({ category, index }: { category: CategorySummary; index: n
         className="h-6 w-6 items-center justify-center rounded-full"
         style={{ backgroundColor: colors.grey4 }}
       >
-        <Text variant="caption2" style={{ color: colors.grey }}>
+        <Text variant="caption2" textColor={colors.grey}>
           {category.items}
         </Text>
       </View>

apps/expo/app/(app)/demo/index.tsx

@@ -1,5 +1,7 @@
-import { Button, Text } from '@packrat/ui/nativewindui';
 import { getAppBarOptions } from '@packrat/ui/src/app-bar';
+import { Button } from '@packrat/ui/src/button';
+import { SelectableText } from '@packrat/ui/src/selectable-text';
+import { Text } from '@packrat/ui/src/text';
 import { FlashList } from '@shopify/flash-list';
 import { Card } from 'expo-app/components/Card';
 import { Icon } from 'expo-app/components/Icon';
@@ -11,7 +13,7 @@ import { useHeaderHeight } from 'expo-router/react-navigation';
 import { cssInterop } from 'nativewind';
 import type * as React from 'react';
 import { useState } from 'react';
-import { Linking, useWindowDimensions, View } from 'react-native';
+import { Linking, Pressable, useWindowDimensions, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 cssInterop(FlashList, {
@@ -74,17 +76,14 @@ function ListEmptyComponent() {
       <Text variant="title3" className="pb-1 text-center font-semibold">
         No Components Installed
       </Text>
-      <Text color="tertiary" variant="subhead" className="pb-4 text-center">
-        You can install any of the free components from the{' '}
-        <Text
-          onPress={() => Linking.openURL('https://nativewindui.com')}
-          variant="subhead"
-          className="text-primary"
-        >
-          NativeWindUI
-        </Text>
-        {' website.'}
+      <Text color="tertiary" variant="subhead" className="pb-1 text-center" wrap>
+        You can install any of the free components from the NativeWindUI website.
       </Text>
+      <Pressable onPress={() => Linking.openURL('https://nativewindui.com')}>
+        <Text variant="subhead" className="text-primary pb-4 text-center">
+          nativewindui.com
+        </Text>
+      </Pressable>
     </View>
   );
 }
@@ -213,9 +212,9 @@ const COMPONENTS: ComponentItem[] = [
     name: 'Selectable Text',
     component: function SelectableTextExample() {
       return (
-        <Text uiTextView selectable>
+        <SelectableText uiTextView selectable>
           Long press or double press this text
-        </Text>
+        </SelectableText>
       );
     },
   },

apps/expo/app/(app)/dev/paywall-state.tsx

@@ -1,5 +1,5 @@
 import { isInEarlyAccess, PACKRAT_PRO_ENTITLEMENT } from '@packrat/config';
-import { Text } from '@packrat/ui/nativewindui';
+import { Text } from '@packrat/ui/src/text';
 import { useConnectivity } from 'expo-app/features/purchases/hooks/useConnectivity';
 import { useCustomerInfo } from 'expo-app/features/purchases/hooks/useCustomerInfo';
 import { useFeatureAccessConfig } from 'expo-app/features/purchases/hooks/useFeatureAccess';

apps/expo/app/(app)/feed/[id].tsx

@@ -1,4 +1,4 @@
-import { Text } from '@packrat/ui/nativewindui';
+import { Text } from '@packrat/ui/src/text';
 import { useQuery } from '@tanstack/react-query';
 import { userStore } from 'expo-app/features/auth/store';
 import { PostDetailScreen } from 'expo-app/features/feed';

apps/expo/app/(app)/gear-inventory.tsx

@@ -1,6 +1,6 @@
 import { assertDefined } from '@packrat/guards';
-import { Text } from '@packrat/ui/nativewindui';
 import { getAppBarOptions } from '@packrat/ui/src/app-bar';
+import { Text } from '@packrat/ui/src/text';
 import { PackItemCard } from 'expo-app/features/packs/components/PackItemCard';
 import { useUserPackItems } from 'expo-app/features/packs/hooks/useUserPackItems';
 import type { PackItem } from 'expo-app/features/packs/types';

apps/expo/app/(app)/messages/chat.android.tsx

@@ -1,13 +1,9 @@
 import { isString } from '@packrat/guards';
-import {
-  Avatar,
-  AvatarFallback,
-  Button,
-  ContextMenu,
-  createDropdownItem,
-  DropdownMenu,
-  Text,
-} from '@packrat/ui/nativewindui';
+import { Avatar, AvatarFallback } from '@packrat/ui/src/avatar';
+import { Button } from '@packrat/ui/src/button';
+import { ContextMenu } from '@packrat/ui/src/context-menu';
+import { createDropdownItem, DropdownMenu } from '@packrat/ui/src/dropdown-menu';
+import { Text } from '@packrat/ui/src/text';
 import { Portal } from '@rn-primitives/portal';
 import { FlashList } from '@shopify/flash-list';
 import { Icon } from 'expo-app/components/Icon';