@novahelm/ui-native

React Native component library for NovaHelm — inline-styled primitives, combined components, and pre-built auth screens for Expo 55 apps. Styling is plain RN StyleSheet + theme tokens from @novahelm/design-tokens; no NativeWind or Tailwind runtime.

Quick Start

pnpm add @novahelm/ui-native

import { Button, Text, Card, CardContent } from "@novahelm/ui-native";

export function WelcomeCard() {
  return (
    <Card>
      <CardContent>
        <Text variant="heading">Welcome</Text>
        <Button onPress={() => router.push("/dashboard")}>
          Get Started
        </Button>
      </CardContent>
    </Card>
  );
}

Theme

Light and dark themes driven by @novahelm/design-tokens:

import { lightTheme, darkTheme, useNativeTheme } from "@novahelm/ui-native";

function App() {
  const { theme, toggle } = useNativeTheme();
  // theme is lightTheme or darkTheme
}

Primitives

| Component | Description | |-----------|-------------| | Button | Pressable button with variants (default, destructive, outline, ghost) | | Text | Typography with variant presets (heading, body, caption, label) | | Input | Text input with label and error states | | Badge | Status badge with color variants | | Card | Card container with Header, Title, Description, Content, Footer | | StatCard | Metric display card (value, label, trend) | | StatusDot | Colored status indicator dot | | Skeleton | Loading placeholder with pulse animation |

Combined Components

| Component | Description | |-----------|-------------| | SegmentedControl | iOS-style segmented tab control | | ListItem | List row with icon, title, subtitle, chevron | | SearchBar | Search input with clear button | | EmptyState | Empty state illustration with action button | | PriorityBadge | Priority level indicator (critical, high, medium, low) | | FloatingActionButton | FAB positioned at bottom-right | | SwipeableCard | Card with swipe-to-reveal actions |

Dock Primitives (NovaPulse design language)

RN mirrors of the 10 web primitives in @novahelm/ui/components/dock. Matching prop API where form-factor allows; source of truth for visuals: docs/mockups/novapulse-redesign.html.

import {
  FloatingDock, TabPill, FAB,
  DockActionSheet,  // aliased at the root to avoid collision with combined/ActionSheet
  ActionRow, ActionTile,
  BreadcrumbChip, L3Strip,
  GlassSurface, PulseDot,
} from "@novahelm/ui-native";

// Or import directly from the subpath with the native names intact:
import { ActionSheet } from "@novahelm/ui-native/dock";

Notes:

• GlassSurface uses semi-transparent fill (no native backdrop-filter). For real blur wrap it in BlurView from expo-blur in the consuming app.
• PulseDot uses react-native-reanimated (optional peer) for the pulsing ring.
• FAB ships a solid brand color. Wrap with expo-linear-gradient in-app for the mint-cyan gradient from the mockup.
• BreadcrumbChip uses lucide-react-native (optional peer) for the chevron.
• Pair with the novapulse-dark / novapulse-light preset from theme/ for full language parity.

Auth Screens

Pre-built authentication screens for Expo Router:

import { LoginScreen, RegisterScreen, ForgotPasswordScreen, BiometricPrompt } from "@novahelm/ui-native";

<LoginScreen
  onSubmit={async (email, password) => { /* auth logic */ }}
  oauthProviders={["google", "apple"]}
  onOAuth={(provider) => { /* OAuth flow */ }}
/>

API Reference

| Export | Description | |--------|-------------| | cn(...classes) | Legacy class-merging utility kept for shared call sites; returns a joined string. NovaPulse components use inline StyleSheet objects — avoid cn in new code. | | lightTheme / darkTheme | Theme objects with colors, spacing, radius | | useNativeTheme() | Hook to access and toggle the active theme | | Button | Pressable button component | | Text | Typography component | | Input | Text input with labels | | Badge | Status badge | | Card (+ sub-components) | Card layout components | | StatCard | Metric display card | | StatusDot | Status indicator | | Skeleton | Loading placeholder | | SegmentedControl | Tab control | | ListItem | List row component | | SearchBar | Search input | | EmptyState | Empty state display | | PriorityBadge | Priority indicator | | FloatingActionButton | Floating action button | | SwipeableCard | Swipeable card | | LoginScreen | Login form screen | | RegisterScreen | Registration form screen | | ForgotPasswordScreen | Password reset screen | | BiometricPrompt | Biometric auth prompt |