import React from 'react';
import { Button, Heading, Panel, Text, ZoraProvider, type ZoraTheme } from '@ankhorage/zora';

export function App({ appTheme }: { appTheme: ZoraTheme }) {
  return (
    <ZoraProvider theme={appTheme} initialMode="light">
      <Panel mode="dark">
        <Heading>Studio panel</Heading>
        <Text>Text inherits dark mode.</Text>
        <Button>Also scoped.</Button>
      </Panel>
    </ZoraProvider>
  );
}

<ZoraProvider
  theme={{
    id: 'studio',
    name: 'Studio',
    appCategory: 'developer_tools',
    primaryColor: '#0f766e',
    harmony: 'analogous',
  }}
>
  <App />
</ZoraProvider>

import React from 'react';
import { SidebarLayout, Text, ZoraProvider, ZoraThemeScope, type ZoraTheme } from '@ankhorage/zora';

export function App({ appTheme }: { appTheme: ZoraTheme }) {
  return (
    <ZoraProvider theme={appTheme} initialMode="light">
      <ZoraThemeScope mode="dark">
        <SidebarLayout sidebar={<Text>Sidebar</Text>}>
          <Text>Everything inside uses dark mode.</Text>
        </SidebarLayout>
      </ZoraThemeScope>
    </ZoraProvider>
  );
}

import { Box, Container, Grid, Heading, Stack, Text } from '@ankhorage/zora';

import { Tabs } from 'expo-router';
import { ZoraTabBar, type ZoraNavigationRouteMap } from '@ankhorage/zora';

const routeMap: ZoraNavigationRouteMap = {
  index: { label: 'Home', icon: { name: 'home-outline' } },
  settings: { label: 'Settings', icon: { name: 'settings-outline' }, badge: '3' },
};

export default function Layout() {
  return <Tabs tabBar={(props) => <ZoraTabBar {...props} routeMap={routeMap} />} />;
}

import { Drawer } from 'expo-router/drawer';
import { ZoraDrawerContent, type ZoraNavigationRouteMap } from '@ankhorage/zora';

const routeMap: ZoraNavigationRouteMap = {
  home: { label: 'Home', icon: { name: 'home-outline' } },
  account: { label: 'Account', icon: { name: 'person-outline' }, disabled: true },
};

export default function Layout() {
  return <Drawer drawerContent={(props) => <ZoraDrawerContent {...props} routeMap={routeMap} />} />;
}

<Heading level={1} size={{ base: 'h2', md: 'h1' }}>
  Build faster with ZORA
</Heading>

<Heading level={2} tone="primary">
  Create consistent screens
</Heading>

<Text variant="lead" tone="muted">
  Build product screens with structured, theme-aware copy.
</Text>

<Text variant={{ base: 'bodySmall', md: 'body' }} align={{ base: 'center', md: 'left' }}>
  Responsive text without raw styles.
</Text>

<Button leadingIcon={{ name: 'checkmark-circle-outline' }}>Save</Button>

<IconButton icon={{ name: 'trash-outline' }} label="Delete" tone="danger" />

<Avatar name="Zora Kit" />
<Avatar size="l" tone="primary" name="Fabio Gartenmann" />

<AvatarGroup
  items={[
    { id: '1', name: 'Ada Lovelace' },
    { id: '2', name: 'Grace Hopper', tone: 'success' },
  ]}
/>

<Badge tone="success">Active</Badge>

<Card actions={<Button>Open</Button>} description="A reusable product surface." title="Project" />

<MediaCard
  imageSource={require('./cover.png')}
  imageLabel="Cover image"
  title="MediaCard"
  description="Composes an image slot, header content, badges, actions, and footer metadata."
  badges={<Badge tone="primary">Featured</Badge>}
  footer={<Rating value={4.5} />}
  onPress={() => undefined}
/>

<Image
  alt="Example cover"
  aspectRatio={16 / 9}
  fit="cover"
  radius="l"
  source="https://example.com/cover.png"
/>

<MetricCard
  label="Monthly active users"
  value="14.2k"
  delta="+4.1%"
  deltaTone="success"
  description="Last 30 days"
/>

<Progress value={72} />
<Progress tone="success" value={38} />

<Rating value={4.5} />

<Input
  autoCapitalize="none"
  keyboardType="email-address"
  leadingIcon={{ name: 'mail-outline' }}
  placeholder="you@example.com"
/>

<SearchBar value={query} onValueChange={setQuery} onSubmit={(value) => console.log(value)} />

<FormField label="Navigator type">
  <RadioGroup
    value="tabs"
    onValueChange={(value) => console.log(value)}
    options={[
      { value: 'tabs', label: 'Tabs' },
      { value: 'drawer', label: 'Drawer' },
    ]}
  />
</FormField>

<FormField label="Features">
  <CheckboxGroup
    value={['a']}
    onValueChange={(value) => console.log(value)}
    options={[
      { value: 'a', label: 'Feature A' },
      { value: 'b', label: 'Feature B' },
    ]}
  />
</FormField>

<Chip selected tone="primary" onPress={() => undefined}>
  Selected
</Chip>

<ChipGroup
  value="all"
  onValueChange={setValue}
  items={[
    { value: 'all', label: 'All' },
    { value: 'favorites', label: 'Favorites' },
  ]}
/>

<Textarea leadingIcon={{ name: 'document-text-outline' }} rows={5} />

<Tabs
  items={[
    { value: 'all', label: 'All' },
    { value: 'active', label: 'Active' },
  ]}
  onValueChange={setValue}
  value={value}
/>

<AppBar
  title="Inbox"
  subtitle="All conversations"
  leading={<IconButton icon={{ name: 'menu-outline' }} label="Open menu" onPress={openMenu} />}
  actions={<IconButton icon={{ name: 'search-outline' }} label="Search" onPress={openSearch} />}
  overflow={{ onPress: openOverflow, label: 'More actions' }}
/>

<AppBar
  appMode={{ type: 'selection', label: 'Selected', count: 3, onCancel: exitSelection }}
  actions={
    <IconButton icon={{ name: 'trash-outline' }} label="Delete" tone="danger" onPress={del} />
  }
/>

<Toolbar>
  <ToolbarAction icon={{ name: 'add-outline' }} label="Add" />
  <ToolbarAction icon={{ name: 'search-outline' }} label="Search" />
</Toolbar>

<Select
  onValueChange={setValue}
  options={[
    { value: '1', label: 'Option 1' },
    { value: '2', label: 'Option 2' },
  ]}
  value={value}
/>

<Modal footer={<Button>Done</Button>} onDismiss={close} title="Details" visible={visible} />

<Drawer onDismiss={close} title="Filters" visible={visible}>
  {content}
</Drawer>

<AppShell header={<Toolbar position="inline">{actions}</Toolbar>} footer={<BottomBar />}>
  <Screen>{content}</Screen>
</AppShell>

<AppShell footer={<BottomBar />} overlay={isOpen ? <MyDrawer onClose={close} /> : null}>
  {content}
</AppShell>

<Page header={<PageHeader title="Projects" />} width="wide">
  {content}
</Page>

<PageHeader actions={<Button>New</Button>} title="Projects" />

<ScreenSection actions={<Button>Refresh</Button>} title="Recent activity">
  {content}
</ScreenSection>

<SidebarLayout sidebar={navigation} aside={details}>
  {content}
</SidebarLayout>

<TopbarLayout topbar={topbar} sidebar={sidebar}>
  {content}
</TopbarLayout>

<SettingsLayout actions={<Button>Save</Button>} sidebar={nav} title="Settings">
  {content}
</SettingsLayout>

<AuthLayout description="Sign in to continue" title="Welcome back">
  {form}
</AuthLayout>

import { ChatListItem, Stack } from '@ankhorage/zora';

export function ChatsPreview() {
  return (
    <Stack gap="none">
      <ChatListItem
        accessibilityLabel="Ada Lovelace, unread, 3 new messages, Can you review the new PostCard API?, 2 minutes ago"
        avatar={{ name: 'Ada Lovelace', tone: 'primary' }}
        preview="Can you review the new PostCard API?"
        timestamp="2m"
        title="Ada Lovelace"
        unread
        unreadCount={3}
        onPress={() => undefined}
      />

      <ChatListItem
        avatar={{ name: 'Grace Hopper', tone: 'success' }}
        preview="The build is green."
        timestamp="1h"
        title="Grace Hopper"
        onPress={() => undefined}
      />

      <ChatListItem
        avatar={{ initials: 'CI', label: 'Build system', tone: 'neutral' }}
        compact
        meta="Release automation"
        preview="Version packages completed for @ankhorage/zora."
        timestamp="Today"
        title="Build system"
      />
    </Stack>
  );
}

import { ChatListItem } from '@ankhorage/zora';
import { FlatList } from 'react-native';

export function ThreadList({ threads }: { threads: Thread[] }) {
  return (
    <FlatList
      data={threads}
      keyExtractor={(thread) => thread.id}
      renderItem={({ item }) => (
        <ChatListItem
          avatar={{ name: item.title, source: item.avatar }}
          preview={item.preview}
          timestamp={item.timestamp}
          title={item.title}
          unread={item.unread}
          unreadCount={item.unreadCount}
          onPress={() => openThread(item.id)}
        />
      )}
    />
  );
}

<FormField helperText="We only use this for sign-in." label="Email">
  <Input keyboardType="email-address" />
</FormField>

<Hero
  eyebrow="New release"
  title="Build product screens faster"
  description="Use a responsive hero pattern with strong defaults for landing pages, dashboards, and app sections."
  primaryAction={{ label: 'Get started', onPress: () => undefined }}
  secondaryAction={{ label: 'View docs', onPress: () => undefined }}
/>

<Hero
  eyebrow="ZORA Pattern"
  title="Compose responsive product introductions"
  description="Hero combines ZORA typography, actions, layout, and card surfaces into one app-facing pattern."
  layout="split"
  primaryAction={{ label: 'Start building', onPress: () => undefined }}
  secondaryAction={{ label: 'Browse patterns', onPress: () => undefined }}
  media={
    <Card title="Theme-aware by default" tone="outline">
      <Text tone="muted">
        Use the media slot for previews, screenshots, metrics, or illustration cards.
      </Text>
    </Card>
  }
/>

<ImagePreview asset={{ kind: 'url', url: 'https://example.com/photo.jpg', alt: 'Photo' }} />

const [asset, setAsset] = React.useState<ZoraImageAsset | null>(null);

<ImageUploadField
  label="Project image"
  accept="image/*"
  maxSizeBytes={5_000_000}
  value={asset}
  onChange={setAsset}
  onPick={pickImage}
  onUpload={uploadImage}
/>;

<Notice actions={<Button>Review</Button>} title="Publish pipeline ready" tone="success" />

<Panel description="Release details" title="Release Candidate">
  {content}
</Panel>

import { IconButton, PostCard, Stack } from '@ankhorage/zora';

export function PostsPreview() {
  return (
    <Stack gap="m">
      <PostCard
        author={{
          name: 'Ada Lovelace',
          subtitle: '@ada · 2h',
          avatar: { name: 'Ada Lovelace', tone: 'primary' },
        }}
        headerAction={
          <IconButton icon={{ name: 'ellipsis-horizontal-outline' }} label="More post options" />
        }
        text="Working on a reusable social pattern for ZORA."
        actions={[
          { id: 'like', label: 'Like', icon: { name: 'heart-outline' }, count: 24 },
          {
            id: 'comment',
            label: 'Comment',
            icon: { name: 'chatbubble-outline' },
            count: 5,
          },
          { id: 'share', label: 'Share', icon: { name: 'share-outline' } },
        ]}
        comments={[
          {
            id: 'comment-1',
            author: {
              name: 'Grace Hopper',
              subtitle: '1h',
              avatar: { name: 'Grace Hopper', tone: 'success' },
            },
            text: 'The card/list boundary feels right.',
          },
        ]}
      />

      <PostCard
        compact
        tone="subtle"
        author={{
          name: 'Build system',
          subtitle: 'Today · release notes',
          avatar: { initials: 'CI', label: 'Build system', tone: 'neutral' },
        }}
        text="Compact density works well for notification-style posts."
      />
    </Stack>
  );
}

<SectionHeader actions={<Badge>Live</Badge>} title="Activity" />

<FilterBar leading={<SearchBar value={query} onValueChange={setQuery} />}>
  <ChipGroup value="all" onValueChange={setFilter} items={[{ value: 'all', label: 'All' }]} />
</FilterBar>

function SelectionHeader() {
  const selection = useSelection();

  return (
    <AppBar
      title={selection.hasSelection ? undefined : 'Inbox'}
      appMode={
        selection.hasSelection
          ? {
              type: 'selection',
              label: 'Selected',
              count: selection.selectedCount,
              onCancel: selection.clear,
            }
          : undefined
      }
    />
  );
}

<SelectionProvider mode="single">
  <SelectionHeader />
  <SelectableItem id="message-1" trigger="press">
    {({ selected }) => <Card compact title={selected ? 'Selected' : 'Tap to select'} />}
  </SelectableItem>
</SelectionProvider>;

<List
  items={[
    { title: 'Account', description: 'Profile and security', onPress: () => undefined },
    { title: 'Notifications', trailing: <Badge>On</Badge> },
  ]}
/>

<ListRow title="Profile" description="Update your details" onPress={() => undefined} />

<ListSection title="Settings" items={[{ title: 'Account' }]} />

<Timeline
  items={[
    { id: '1', title: 'Order placed', meta: '09:15', status: 'success' },
    { id: '2', title: 'In transit', meta: '11:42', status: 'primary' },
    { id: '3', title: 'Requires attention', meta: 'Today', status: 'warning' },
  ]}
/>