# Gitapp Ui API reference

> Exports of @dev-bench/gitapp-ui.

Source: https://components.n.yatsyk.com/docs/gitapp-ui/jsdoc

## Functions

### mergeTheme

```ts
mergeTheme(base: Theme, override: PartialTheme): Theme
```

### ThemeProvider

```ts
ThemeProvider({ theme, themeOverride, children }: Props): ReactNode
```

### useTheme

```ts
useTheme(): Theme
```

### Banner

```ts
Banner({ kind, title, children, icon, trailing }: Props): import("/home/runner/work/components/components/node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/jsx-runtime").JSX.Element
```

### Button

```ts
Button({ label, onPress, variant, size, disabled, leading, trailing, block, accessibilityLabel, }: Props): import("/home/runner/work/components/components/node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/jsx-runtime").JSX.Element
```

### Chip

```ts
Chip({ label, tone, mono, leading, trailing, }: Props): import("/home/runner/work/components/components/node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/jsx-runtime").JSX.Element
```

### Dot

```ts
Dot({ tone, size }: Props): import("/home/runner/work/components/components/node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/jsx-runtime").JSX.Element
```

### Icon

```ts
Icon({ name, size, color, strokeWidth }: Props): import("/home/runner/work/components/components/node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/jsx-runtime").JSX.Element
```

### Skeleton

```ts
Skeleton({ width, height, radius, style, }: Props): import("/home/runner/work/components/components/node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/jsx-runtime").JSX.Element
```

### Spinner

```ts
Spinner({ size, thickness, tone, trackOpacity, }: Props): import("/home/runner/work/components/components/node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/jsx-runtime").JSX.Element
```

### ConnectionPanel

ConnectionPanel renders the full connection flow:
  1. Provider radio (GitHub / Gitea / GitLab)
  2. Auth sub-form (OAuth button or PAT input, per provider)
  3. Custom host input (Gitea / GitLab)
  4. Full Resource<T> shell on the auth attempt

```ts
ConnectionPanel({ model }: ConnectionPanelProps): import("/home/runner/work/components/components/node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/jsx-runtime").JSX.Element
```

### ProviderSelector

```ts
ProviderSelector({ model, }: ProviderSelectorProps): import("/home/runner/work/components/components/node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/jsx-runtime").JSX.Element
```

### RepoPickerSheet

RepoPickerSheet is a bottom-sheet style modal.

List surface is derived from a single pickListSurface() helper that takes
repos + filteredRepos + picked and returns one discriminated ListSurface.
The RepoRow sub-component is extracted so consumers can wrap it with
observer() to get per-row MobX reactivity.

```ts
RepoPickerSheet({ model }: RepoPickerSheetProps): import("/home/runner/work/components/components/node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/jsx-runtime").JSX.Element
```

### RepoRow

```ts
RepoRow({ repo, isPicking, onSelect, theme, }: { readonly repo: RepoInfo; readonly isPicking: boolean; readonly onSelect: () => void; readonly theme: Theme; }): import("/home/runner/work/components/components/node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/jsx-runtime").JSX.Element
```

## Types

### Resource

```ts
type Resource = Resource<T>
```

### Connectivity

```ts
type Connectivity = | { kind: "online" }
  | { kind: "offline" }
  | { kind: "uncertain" }
```

### Err

```ts
type Err = { readonly message: string; readonly cause?: unknown }
```

### ProviderId

```ts
type ProviderId = "github" | "gitea" | "gitlab"
```

### ResourceT

```ts
type ResourceT = Resource<T>
```

### StatusTone

```ts
type StatusTone = | "neutral"
  | "brand"
  | "success"
  | "warn"
  | "danger"
  | "info"
  | "mine"
  | "theirs"
  | "merged"
```

### IconName

```ts
type IconName = | "check" | "x" | "alert" | "alertTri" | "info"
  | "chevronRight" | "chevronDown" | "chevronLeft" | "chevronUp"
  | "arrowRight" | "arrowLeft"
  | "refresh" | "rotate" | "search" | "plus" | "more" | "menu"
  | "lock" | "unlock" | "key"
  | "cloud" | "cloudOff" | "git" | "branch"
  | "folder" | "file" | "fileText" | "image"
  | "user" | "users" | "eye" | "eyeOff"
  | "download" | "upload" | "bookmark" | "bolt" | "trash"
  | "settings" | "activity" | "shield" | "wrench"
  | "circle" | "dot"
```

### ConnectionErrorKind

Categorised connection error so recovery copy can be specific.

```ts
type ConnectionErrorKind = | { kind: "auth"; reason: string }   // bad token / OAuth failure
  | { kind: "network" }                // unreachable
  | { kind: "not-found" }
```

### RepoAccess

Access state for a single repo — checked against current auth token.

```ts
type RepoAccess = | { kind: "found" }
  | { kind: "forbidden"; currentLogin: string }
  | { kind: "missing" }
  | { kind: "checking" }
```

## Interfaces

### Theme

```ts
interface Theme
```

- `name: string`
- `colors: ThemeColors`
- `fonts: ThemeFonts`
- `radii: ThemeRadii`
- `spacing: ThemeSpacing`
- `shadows: ThemeShadows`
- `typography: ThemeTypography`

### ThemeColors

```ts
interface ThemeColors
```

- `bg: string`
- `surface: string`
- `surface2: string`
- `surface3: string`
- `border: string`
- `border2: string`
- `text: string`
- `text2: string`
- `text3: string`
- `text4: string`
- `brand: string`
- `brand2: string`
- `brandFg: string`
- `brandBg: string`
- `success: string`
- `successBg: string`
- `successBorder: string`
- `warn: string`
- `warnBg: string`
- `warnBorder: string`
- `danger: string`
- `dangerBg: string`
- `dangerBorder: string`
- `info: string`
- `infoBg: string`
- `infoBorder: string`
- `mine: string`
- `mineBg: string`
- `mineBorder: string`
- `theirs: string`
- `theirsBg: string`
- `theirsBorder: string`
- `merged: string`
- `mergedBg: string`
- `mergedBorder: string`

### ThemeFonts

```ts
interface ThemeFonts
```

- `ui: string`
- `mono: string`

### ThemeRadii

```ts
interface ThemeRadii
```

- `sm: number`
- `md: number`
- `lg: number`

### ThemeShadow

```ts
interface ThemeShadow
```

- `color: string`
- `opacity: number`
- `offsetX: number`
- `offsetY: number`
- `radius: number`
- `elevation: number`

### ThemeShadows

```ts
interface ThemeShadows
```

- `s1: ThemeShadow`
- `s2: ThemeShadow`
- `modal: ThemeShadow`

### ThemeSpacing

```ts
interface ThemeSpacing
```

- `xs: number`
- `sm: number`
- `md: number`
- `lg: number`
- `xl: number`

### ThemeTypography

```ts
interface ThemeTypography
```

- `t12: { size: number; lineHeight: number; weight: "400" | "500" | "600" | "700"; }`
- `t13: { size: number; lineHeight: number; weight: "400" | "500" | "600" | "700"; }`
- `t14: { size: number; lineHeight: number; weight: "400" | "500" | "600" | "700"; }`
- `t15: { size: number; lineHeight: number; weight: "400" | "500" | "600" | "700"; }`
- `t16: { size: number; lineHeight: number; weight: "400" | "500" | "600" | "700"; }`
- `t18: { size: number; lineHeight: number; weight: "400" | "500" | "600" | "700"; }`
- `t22: { size: number; lineHeight: number; weight: "400" | "500" | "600" | "700"; }`

### ConnectionPanelProps

```ts
interface ConnectionPanelProps
```

- `model: IConnectionModel`

### ConnectionSuccess

Connection success payload.

```ts
interface ConnectionSuccess
```

- `login: string`
- `provider: ProviderId`

### IConnectionModel

```ts
interface IConnectionModel
```

- `provider: ProviderId` — Current selected provider.
- `authMethod: { kind: "oauth"; } | { kind: "pat"; token: string; }` — OAuth or PAT — GitHub supports both; Gitea/GitLab require PAT.
- `host: { kind: "default"; } | { kind: "custom"; url: string; }` — Default = the provider's public cloud; custom = self-hosted URL.
- `connection: Resource<ConnectionSuccess>` — Four-state Resource for the current authentication attempt.
- `errorKind: { kind: "none"; } | { kind: "some"; value: ConnectionErrorKind; }` — Categorised error when connection.kind === "error".
- `onProviderChange(p: ProviderId): void`
- `onAuthMethodChange(m: { kind: "oauth"; } | { kind: "pat"; token: string; }): void`
- `onHostChange(h: { kind: "default"; } | { kind: "custom"; url: string; }): void`
- `onConnect(): Promise<void>`
- `onDisconnect(): Promise<void>`

### IProviderSelectorModel

```ts
interface IProviderSelectorModel
```

- `current: { provider: ProviderId; host: string; }` — Current provider and host (read-only display).
- `state: Resource<void>` — Selection lifecycle state.
- `isOpen: boolean` — Whether the selector is open (controls sheet visibility).
- `onSelectProvider(provider: ProviderId): void`
- `onCustomHostChange(host: string): void`
- `onConfirm(): Promise<void>`
- `onDismiss(): void`

### ProviderSelectorProps

```ts
interface ProviderSelectorProps
```

- `model: IProviderSelectorModel`

### IRepoPickerModel

```ts
interface IRepoPickerModel
```

- `repos: Resource<readonly RepoInfo[]>` — Full repo list — all 4 Resource states.
- `filter: string` — Current filter text (controlled).
- `picked: { kind: "none"; } | { kind: "picking"; repo: RepoInfo; } | { kind: "picked"; repo: RepoInfo; }` — Selection state — discriminated union, no nullable.
- `currentLogin: { kind: "anonymous"; } | { kind: "loggedIn"; login: string; }` — Who we are authed as (shown in forbidden chip copy).
- `filteredRepos: readonly RepoInfo[]` — Filtered + sorted subset — computed by the model, not this component.
- `canCreate: boolean` — Whether the current auth token has repo-create scope.
- `onFilterChange(v: string): void`
- `onSelect(repo: RepoInfo): Promise<void>`
- `onRefresh(): Promise<void>`
- `onOpenCreate(): void`
- `onDismiss(): void`

### RepoInfo

Repo metadata returned from the provider's list-repos API.

```ts
interface RepoInfo
```

- `owner: string`
- `name: string`
- `isPrivate: boolean`
- `defaultBranch: string`
- `pushedAt: string`
- `access: RepoAccess`

### RepoPickerSheetProps

```ts
interface RepoPickerSheetProps
```

- `model: IRepoPickerModel`

## Constants

### defaultLightTheme

```ts
const defaultLightTheme: Theme
```

### PLACEHOLDER_HOST_EXAMPLES

```ts
const PLACEHOLDER_HOST_EXAMPLES: { readonly GITHUB_ENTERPRISE: "git.company.com"; readonly GITEA_INSTANCE: "https://gitea.company.com"; readonly GITLAB_INSTANCE: "https://gitlab.company.com"; readonly GENERIC_INSTANCE: "https://your-instance.example.com"; }
```