@agamagar/away-design-system

The Away design system for React Native (Expo + Unistyles v3):

• Theme tokens — color palettes, semantic tokens, and the light/indigo agent token layer.
• Base components — a variant-driven base layer (Box, Stack, Text, Button, Input, Card, Switch, …) built to be used as-is or extended; all colors/sizes route through one foundation.ts contract.
• uiKit primitives — UiText, UiButton, UiPressable.
• Agent Kit — the concierge + agent-search components (16 components + 6 screens) synced from the Figma "Figma Motion" file.

The active runtime theme is away — a dark, navy-tinted theme. See DESIGN.md for the full token + component contract.

Ships as TypeScript source — consumed and transpiled by your app's Metro/Babel pipeline (the standard for Expo libraries). No build step; types come straight from source.

Install

# npm
npm install @agamagar/away-design-system

# or from GitHub directly
npm install github:agamagar/away-design-system

Peer dependencies

Install the peers your app doesn't already have:

npx expo install react-native-unistyles react-native-reanimated react-native-gesture-handler \
  react-native-worklets react-native-svg expo-haptics expo-linear-gradient expo-image \
  @hugeicons/react-native @hugeicons/core-free-icons phosphor-react-native react-i18next

react-native-svg, expo-linear-gradient, expo-image, phosphor-react-native, and react-i18next are optional — only needed if you use the components that depend on them.

Base components (use as base, then modify)

Everything resolves through src/base/foundation.ts — the single modify-point: Tone (neutral | accent | success | warning | danger | info) × Variant (solid | soft | outline | ghost) × Size (sm | md | lg, md = 44pt). Re-accent or resize the whole system by editing the resolvers; components stay untouched.

import { Box, VStack, HStack, Text, Button, Input, Card, Chip, Switch } from '@agamagar/away-design-system';

<Card level={1} onPress={open}>
  <VStack gap="sm">
    <Text variant="heading">Trip to Goa</Text>
    <Text variant="caption" color="secondary">Dec 12 – Dec 16</Text>
    <HStack gap="sm">
      <Chip label="Non-stop" selected tone="accent" />
      <Chip label="Refundable" />
    </HStack>
    <Button label="Search flights" tone="accent" fullWidth onPress={search} />
  </VStack>
</Card>

| Layer | Components | |---|---| | Layout | Box (token-mapped props), Stack/HStack/VStack, Spacer, Divider | | Typography | Text (variant: display/title/heading/body/label/caption/overline) | | Behavior | BasePressable (scale/opacity feedback + haptics + debounce) — extend for custom tappables | | Controls | Button (loading/leading/trailing), IconButton, Chip, Badge | | Surfaces | Card (levels 1–3), ListRow (leading/title/subtitle/trailing), Avatar | | Forms | Input (label/helper/error/focus ring), Checkbox, Radio, Switch | | Feedback | Spinner, Skeleton |

To build a custom on-system component, import the contract:

import { resolveVariant, CONTROL_SIZES, type Tone } from '@agamagar/away-design-system';

Setup

Register the themes once at startup, before rendering anything:

// app/_layout.tsx (or your entry)
import { configureAwayUnistyles } from '@agamagar/away-design-system';

configureAwayUnistyles(); // initialTheme: 'away'

Make sure your app is wrapped in GestureHandlerRootView (required by UiButton, UiPressable, and the gesture-driven agent components).

Usage

import {
  UiText,
  AgentInputBar,
  AgentDestinationScreen,
  useAwayAgentTokens, // via theme
} from '@agamagar/away-design-system';
import { useUnistyles } from 'react-native-unistyles';

function Composer() {
  return <AgentInputBar contextLabel="DEL, BLR +2 others" onSend={(t) => console.log(t)} />;
}

Read tokens through Unistyles:

const { theme } = useUnistyles();
theme.colors.agent.accent;   // #6d5cf0
theme.colors.background;      // #0b0b14 (away)
theme.spacing.md;             // 12

What's exported

Theme: configureAwayUnistyles, themes, breakpoints, palette, lightTheme, darkTheme, awayTheme, agentColors, agentShadows.

uiKit: UiText, UiButton, UiPressable.

Agent Kit primitives: AgentRoundButton, AgentInputBar, AgentCard, AgentSuggestionCard, AgentSuggestionRow, AgentAttachmentThumb, AgentChatDock, AgentSearchSheet, AgentSegmented, AgentSearchField, AgentSelectRow, AgentStepper, AgentPriceBars, AgentCalendar, AgentTimeDial, plus AGENT / AGENT_HIT_SLOP.

Agent screens: AgentDestinationScreen, AgentDatesScreen, AgentPassengersScreen, AgentTravelClassScreen, AgentTimeScreen, AgentPreferencesScreen (faithful reproductions with sample data; not navigation-wired).

Publishing (maintainers)

npm login
npm publish   # publishConfig.access = "public"

Bump version first. To publish privately, set publishConfig.access to restricted (requires a paid npm plan) or keep distribution via GitHub install.

License

MIT