@gnome-ui/react-native 1.0.0

package/dist/GnomeProvider/GnomeContext.d.ts

@@ -0,0 +1,36 @@
+import { GnomeResolvedColorScheme, GnomeResolvedContrast } from '../theme/resolveTheme';
+import { GnomeThemeTokens } from '../theme/tokens.generated';
+import { GnomeAccentColor, GnomeColorScheme, GnomeContrast, GnomeDir } from './resolveContext';
+export interface GnomeContextValue {
+    locale: string | undefined;
+    dir: GnomeDir;
+    numberFormat: Intl.NumberFormatOptions | undefined;
+    dateTimeFormat: Intl.DateTimeFormatOptions | undefined;
+    colorScheme: GnomeColorScheme;
+    resolvedColorScheme: GnomeResolvedColorScheme;
+    contrast: GnomeContrast;
+    resolvedContrast: GnomeResolvedContrast;
+    accentColor: GnomeAccentColor;
+    theme: GnomeThemeTokens;
+}
+export declare const GnomeContext: import('react').Context<GnomeContextValue>;
+/** Returns the locale set by the nearest `GnomeProvider`, or `undefined` to use the device locale. */
+export declare function useLocale(): string | undefined;
+/** Returns the text direction set by the nearest `GnomeProvider`. Defaults to the app's `I18nManager.isRTL` state. */
+export declare function useDir(): GnomeDir;
+/** Returns an `Intl.NumberFormat` configured from `GnomeProvider` defaults plus local overrides. */
+export declare function useNumberFormatter(options?: Intl.NumberFormatOptions): Intl.NumberFormat;
+/** Returns an `Intl.DateTimeFormat` configured from `GnomeProvider` defaults plus local overrides. */
+export declare function useDateTimeFormatter(options?: Intl.DateTimeFormatOptions): Intl.DateTimeFormat;
+/** Returns the color scheme preference set by the nearest `GnomeProvider`. Defaults to `"system"`. */
+export declare function useColorScheme(): GnomeColorScheme;
+/** Returns the resolved color scheme (`"light"` or `"dark"`), accounting for the OS preference when `colorScheme` is `"system"`. */
+export declare function useResolvedColorScheme(): GnomeResolvedColorScheme;
+/** Returns the contrast preference set by the nearest `GnomeProvider`. Defaults to `"system"`. */
+export declare function useContrast(): GnomeContrast;
+/** Returns the resolved contrast (`"normal"` or `"more"`), accounting for the OS accessibility setting when `contrast` is `"system"`. */
+export declare function useResolvedContrast(): GnomeResolvedContrast;
+/** Returns the accent color set by the nearest `GnomeProvider`. Defaults to `"blue"`. */
+export declare function useAccentColor(): GnomeAccentColor;
+/** Returns the fully-resolved theme tokens (colors, spacing, typography, …) for the nearest `GnomeProvider`, accent-adjusted. */
+export declare function useGnomeTheme(): GnomeThemeTokens;

package/dist/GnomeProvider/GnomeProvider.d.ts

@@ -0,0 +1,69 @@
+import { ReactNode } from 'react';
+import { GnomeAccentColor, GnomeColorScheme, GnomeContrast, GnomeDir } from './resolveContext';
+export interface GnomeProviderProps {
+    /** BCP 47 locale tag (e.g. `"es-ES"`, `"de-DE"`). When omitted, components fall back to the device locale. */
+    locale?: string;
+    /**
+     * Text direction exposed via context for consumers to branch on (e.g.
+     * mirroring icons or flipping a row's layout). Defaults to the app's
+     * actual `I18nManager.isRTL` state.
+     *
+     * Unlike the web `GnomeProvider`, this does **not** call
+     * `I18nManager.forceRTL()` — RN's layout direction is a single global
+     * flag that requires an app reload to take effect and is normally set
+     * once at app bootstrap, not scoped per provider tree.
+     */
+    dir?: GnomeDir;
+    /**
+     * Global defaults for number formatting.
+     *
+     * Use `{ notation: "compact", compactDisplay: "short" }` for compact
+     * values such as `1K`; omit it or set `{ notation: "standard" }` for
+     * full values such as `1,000`.
+     */
+    numberFormat?: Intl.NumberFormatOptions;
+    /** Global defaults for date/time formatting. */
+    dateTimeFormat?: Intl.DateTimeFormatOptions;
+    /**
+     * Color scheme preference. `"system"` (default) follows
+     * `Appearance`/`useColorScheme()`. `"light"`/`"dark"` force that scheme
+     * regardless of the OS setting.
+     * @default 'system'
+     */
+    colorScheme?: GnomeColorScheme;
+    /**
+     * High-contrast preference. `"system"` (default) follows the OS
+     * accessibility setting where one exists — Android's "High text
+     * contrast" (`AccessibilityInfo.isHighTextContrastEnabled`) or iOS's
+     * "Increase Contrast" (`AccessibilityInfo.isDarkerSystemColorsEnabled`)
+     * — and falls back to `"normal"` where neither is available (e.g. web).
+     * @default 'system'
+     */
+    contrast?: GnomeContrast;
+    /**
+     * Accent color. Accepts a named GNOME palette color (`"blue"`, `"green"`,
+     * `"yellow"`, `"orange"`, `"red"`, `"purple"`, `"brown"`) or any RN color
+     * string (e.g. `"#ff0000"`, `"rgba(0, 0, 0, 0.5)"`). Named colors are
+     * theme-aware and use the correct shade for light/dark mode
+     * automatically. Defaults to `"blue"`.
+     */
+    accentColor?: GnomeAccentColor;
+    children: ReactNode;
+}
+/**
+ * Returns `true` when the OS "Reduce Motion" accessibility setting is on
+ * (iOS Settings > Accessibility > Motion, Android Settings >
+ * Accessibility > Remove animations), for components with a continuously
+ * looping `Animated` value (e.g. `Spinner`) to slow down or skip that
+ * animation. Unlike `contrast`/`colorScheme`, the web `GnomeProvider` has
+ * no corresponding override prop — `prefers-reduced-motion` is a pure CSS
+ * media query there, always OS-driven — so this hook mirrors that: it
+ * reads `AccessibilityInfo` directly and isn't scoped to `GnomeProvider`'s
+ * context, unlike every other hook in this package. `isReduceMotionEnabled`
+ * / `reduceMotionChanged` are supported on both iOS and Android (unlike
+ * the high-contrast APIs above, which are platform-specific), so no
+ * `Platform.OS` branch is needed.
+ */
+export declare function useReducedMotion(): boolean;
+/** Provides locale, text direction, color scheme, contrast, accent color, and resolved theme tokens to all descendant gnome-ui components. */
+export declare const GnomeProvider: ({ locale, dir, numberFormat, dateTimeFormat, colorScheme, contrast, accentColor, children, }: GnomeProviderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/GnomeProvider/index.d.ts

@@ -0,0 +1,6 @@
+export type { GnomeContextValue } from './GnomeContext';
+export { GnomeContext, useAccentColor, useColorScheme, useContrast, useDateTimeFormatter, useDir, useGnomeTheme, useLocale, useNumberFormatter, useResolvedColorScheme, useResolvedContrast, } from './GnomeContext';
+export type { GnomeProviderProps } from './GnomeProvider';
+export { GnomeProvider, useReducedMotion } from './GnomeProvider';
+export type { GnomeAccentColor, GnomeColorScheme, GnomeContrast, GnomeDir, GnomeNamedAccentColor, } from './resolveContext';
+export { applyAccentColor, NAMED_ACCENT_COLORS, resolveColorScheme, resolveContrast, } from './resolveContext';

package/dist/GnomeProvider/resolveContext.d.ts

@@ -0,0 +1,30 @@
+import { GnomeResolvedColorScheme, GnomeResolvedContrast } from '../theme/resolveTheme';
+import { GnomeThemeTokens } from '../theme/tokens.generated';
+export type GnomeColorScheme = GnomeResolvedColorScheme | 'system';
+export type GnomeContrast = GnomeResolvedContrast | 'system';
+export type GnomeDir = 'ltr' | 'rtl';
+export type GnomeNamedAccentColor = 'blue' | 'green' | 'yellow' | 'orange' | 'red' | 'purple' | 'brown';
+export type GnomeAccentColor = GnomeNamedAccentColor | (string & {});
+export declare const NAMED_ACCENT_COLORS: Set<GnomeNamedAccentColor>;
+/**
+ * Resolves a `'light' | 'dark' | 'system'` preference against the OS color
+ * scheme. `systemColorScheme` is typed loosely (rather than as
+ * `GnomeResolvedColorScheme`) so RN's `useColorScheme()` — which can also
+ * report `'unspecified'` on Android, besides `null`/`undefined` — can be
+ * passed straight through; anything other than `'dark'` resolves to light.
+ */
+export declare function resolveColorScheme(preference: GnomeColorScheme, systemColorScheme: string | null | undefined): GnomeResolvedColorScheme;
+/** Resolves a `'normal' | 'more' | 'system'` preference against the OS high-contrast setting. */
+export declare function resolveContrast(preference: GnomeContrast, systemHighContrast: boolean): GnomeResolvedContrast;
+/**
+ * Returns `theme` with `accentColor`/`accentBgColor` (and, outside
+ * high-contrast, `focusRingColor`) overridden for a non-default accent.
+ *
+ * Named palette colors (`"green"`, `"red"`, …) resolve to the matching
+ * Adwaita shade for the current color scheme, mirroring
+ * `@gnome-ui/react`'s `GnomeProvider`. High-contrast variants keep their
+ * own fixed, maximum-contrast focus ring regardless of accent — the same
+ * behavior `tokens.css` encodes by not deriving it from `--gnome-accent-color`
+ * under `prefers-contrast: more`.
+ */
+export declare function applyAccentColor(theme: GnomeThemeTokens, accentColor: GnomeAccentColor, resolvedColorScheme: GnomeResolvedColorScheme, resolvedContrast: GnomeResolvedContrast): GnomeThemeTokens;

package/dist/components/ActionRow/ActionRow.d.ts

@@ -0,0 +1,51 @@
+import { ReactNode } from 'react';
+import { PressableProps, StyleProp, View, ViewStyle } from 'react-native';
+export type ActionRowVariant = 'default' | 'property';
+export interface ActionRowProps extends Omit<PressableProps, 'children' | 'style'> {
+    /** Primary label. */
+    title: string;
+    /** Secondary line below the title. */
+    subtitle?: string;
+    /** Icon or image placed at the leading edge. Rendered as-is — size/color it yourself. */
+    leading?: ReactNode;
+    /**
+     * Widget placed at the trailing edge (`Switch`, `Button`, `Text`…).
+     * For interactive end widgets prefer a controlled component and stop
+     * event propagation inside it so the row's own `onPress` isn't triggered.
+     */
+    trailing?: ReactNode;
+    /**
+     * When true the entire row becomes pressable (renders as `Pressable`
+     * with `accessibilityRole="button"`). Use for rows that navigate or
+     * trigger an action.
+     */
+    interactive?: boolean;
+    /**
+     * `"property"` flips the visual hierarchy: the subtitle becomes the
+     * prominent value and the title shrinks to a dim label above it.
+     * Use for read-only property display (e.g. "OS Version / GNOME 50").
+     * Mirrors the `.property` style class.
+     */
+    variant?: ActionRowVariant;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Standard settings row with title, optional subtitle, and end widget.
+ *
+ * Mirrors the Adwaita `AdwActionRow` pattern — the fundamental building
+ * block inside a `BoxedList`.
+ *
+ * Rebuilt with `Pressable`/`View`/`Text` rather than ported from
+ * `@gnome-ui/react`'s `<button>`/`<div>` — same `interactive` split as
+ * `Card`: a pressed-state overlay tinted by `theme.activeOverlay` stands in
+ * for the web's `:hover`/`:active` `background-color` transitions, since RN
+ * has no hover state on touch devices and no `color-mix()`. `title`/
+ * `subtitle` reuse the library's own `Text` component (`variant="body"`/
+ * `"caption"`, `color="dim"`) instead of hand-rolled styles, with
+ * `numberOfLines={1}` standing in for the web's CSS
+ * `text-overflow: ellipsis` truncation.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ActionRow.html
+ * @see https://developer.gnome.org/hig/patterns/containers.html
+ */
+export declare const ActionRow: import('react').ForwardRefExoticComponent<ActionRowProps & import('react').RefAttributes<View>>;

package/dist/components/ActionRow/index.d.ts

@@ -0,0 +1,2 @@
+export type { ActionRowProps, ActionRowVariant } from './ActionRow';
+export { ActionRow } from './ActionRow';

package/dist/components/BoxedList/BoxedList.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+import { StyleProp, View, ViewProps, ViewStyle } from 'react-native';
+export type BoxedListVariant = 'default' | 'separate';
+export interface BoxedListProps extends Omit<ViewProps, 'style'> {
+    children?: ReactNode;
+    /**
+     * `"separate"` renders each child as its own standalone rounded card
+     * instead of a single joined list — mirrors `.boxed-list-separate`.
+     * Use when rows are independent items rather than a continuous group.
+     */
+    variant?: BoxedListVariant;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Rounded bordered list — the most common container pattern in GNOME apps.
+ *
+ * Mirrors the Adwaita `.boxed-list` style applied to a `GtkListBox`.
+ * Separators between rows are inserted automatically. Pair with `ActionRow`
+ * or any row-shaped element.
+ *
+ * Rebuilt with `View` rather than ported from `@gnome-ui/react`'s
+ * `<ul>`/`<li>` — RN has no list-semantics elements, so the outer `View`
+ * gets `accessibilityRole="list"` (there's no RN equivalent of `listitem`
+ * for rows), paired with `accessible` — a plain `View` isn't an
+ * accessibility element by default, so without it screen readers (and
+ * `@testing-library/react-native`'s `getByRole`) would skip over the role
+ * entirely. The web version applies `border-radius` directly to each
+ * first/last child via a `:first-child > *` CSS selector, since its `<ul>`
+ * has no `overflow: hidden` of its own; RN's `overflow: 'hidden'` on the
+ * outer `View` clips every row to the container's rounded corners
+ * uniformly, so that per-child trick isn't needed here.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/style-classes.html#boxed-lists-cards
+ * @see https://developer.gnome.org/hig/patterns/containers.html
+ */
+export declare const BoxedList: import('react').ForwardRefExoticComponent<BoxedListProps & import('react').RefAttributes<View>>;

package/dist/components/BoxedList/index.d.ts

@@ -0,0 +1,2 @@
+export type { BoxedListProps, BoxedListVariant } from './BoxedList';
+export { BoxedList } from './BoxedList';

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,47 @@
+import { ReactNode } from 'react';
+import { PressableProps, StyleProp, TextStyle, View, ViewStyle } from 'react-native';
+export type ButtonVariant = 'default' | 'suggested' | 'destructive' | 'flat' | 'raised';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+export type ButtonShape = 'default' | 'pill' | 'circular';
+export interface ButtonProps extends Omit<PressableProps, 'children' | 'style'> {
+    /** Visual style of the button. Follows GNOME HIG button types. */
+    variant?: ButtonVariant;
+    /** Size of the button. */
+    size?: ButtonSize;
+    /** Shape of the button. "pill" for primary actions in open space, "circular" for icon-only buttons. */
+    shape?: ButtonShape;
+    /**
+     * Dark semi-transparent overlay style for buttons placed on top of media
+     * or images — mirrors `@gnome-ui/react`'s `osd` prop.
+     */
+    osd?: boolean;
+    /**
+     * Icon placed before the label. Rendered as-is — RN has no CSS
+     * `currentColor` equivalent, so size and color it yourself (`theme.*FgColor`
+     * from `useGnomeTheme()` matches the resolved label color for each variant).
+     */
+    leadingIcon?: ReactNode;
+    /** Icon placed after the label. See `leadingIcon` for color/size notes. */
+    trailingIcon?: ReactNode;
+    /** String children render as a themed `Text` label; other nodes render as-is. */
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+    /** Style applied to the label `Text` when `children` is a string. */
+    textStyle?: StyleProp<TextStyle>;
+}
+/**
+ * Button component following GNOME Human Interface Guidelines.
+ *
+ * Variants:
+ * - `default`     — Standard action, flat appearance with subtle border.
+ * - `suggested`   — Affirmative/primary action (accent color). Use at most once per view.
+ * - `destructive` — Dangerous or irreversible action (red). Use sparingly.
+ * - `flat`        — No border or background; ideal for header bars and toolbars.
+ * - `raised`      — Explicit raised look inside flat/toolbar contexts.
+ *
+ * Rebuilt with `Pressable`/`View`/`Text` rather than ported from
+ * `@gnome-ui/react`'s DOM-based JSX, but mirrors its prop API.
+ *
+ * @see https://developer.gnome.org/hig/patterns/controls/buttons.html
+ */
+export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<View>>;

package/dist/components/Button/index.d.ts

@@ -0,0 +1,2 @@
+export type { ButtonProps, ButtonShape, ButtonSize, ButtonVariant } from './Button';
+export { Button } from './Button';

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+import { PressableProps, StyleProp, View, ViewStyle } from 'react-native';
+export type CardPadding = 'none' | 'sm' | 'md' | 'lg';
+export interface CardProps extends Omit<PressableProps, 'style' | 'children'> {
+    /**
+     * When true the card becomes pressable (Adwaita `.activatable`).
+     * Renders as `Pressable` with `accessibilityRole="button"`; a plain
+     * `View` otherwise. `onPress`/`onLongPress`/etc. only take effect when
+     * `interactive` is true — RN's `View` has no touch handling of its own,
+     * unlike a DOM `<div>`'s `onClick`.
+     */
+    interactive?: boolean;
+    /** Internal spacing. Defaults to `"md"`. */
+    padding?: CardPadding;
+    style?: StyleProp<ViewStyle>;
+    children?: ReactNode;
+}
+/**
+ * Card component following the GNOME HIG and Adwaita `.card` style class.
+ *
+ * Use for grouping related content on an elevated surface. Set
+ * `interactive` for clickable cards (e.g. grid item, settings shortcut).
+ *
+ * Rebuilt with `Pressable`/`View` rather than ported from `@gnome-ui/react`'s
+ * DOM-based `<button>`/`<div>` + `as` prop — RN has no polymorphic-element
+ * equivalent, so `as` is dropped. The web version's `:hover`/`:active`
+ * `color-mix()` darken/lighten is reproduced with an absolutely-positioned
+ * overlay `View` tinted by `theme.activeOverlay` while pressed, since RN
+ * has no `color-mix()` to blend two flat colors directly.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/style-classes.html
+ * @see https://developer.gnome.org/hig/patterns/containers.html
+ */
+export declare const Card: import('react').ForwardRefExoticComponent<CardProps & import('react').RefAttributes<View>>;

package/dist/components/Card/index.d.ts

@@ -0,0 +1,2 @@
+export type { CardPadding, CardProps } from './Card';
+export { Card } from './Card';

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,44 @@
+import { PressableProps, StyleProp, View, ViewStyle } from 'react-native';
+export interface CheckboxProps extends Omit<PressableProps, 'children' | 'style' | 'onPress'> {
+    /** Whether the checkbox is checked. */
+    value: boolean;
+    /**
+     * Indeterminate state — shown when only some items in a group are
+     * checked. Takes visual precedence over `value`.
+     */
+    indeterminate?: boolean;
+    /** Called with the next value when the checkbox is pressed. */
+    onValueChange?: (value: boolean) => void;
+    /** Accessible label. Required when no visible label is associated. */
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Checkbox for multi-selection, following the GNOME HIG and Adwaita style.
+ *
+ * Supports three states: unchecked, checked, and indeterminate (mixed).
+ * Use `indeterminate` for "select all" controls when only some items are
+ * selected.
+ *
+ * Rebuilt on `Pressable`/`Animated.View` rather than ported from
+ * `@gnome-ui/react`'s `<input type="checkbox">`: RN has no `indeterminate`
+ * DOM property to set imperatively (the web version's whole reason for a
+ * ref + effect), so it's just a rendering branch here — `indeterminate`
+ * draws a short bar, otherwise a checkmark, both fading in via the same
+ * `Animated.Value` used for the border/background transition. The
+ * checkmark itself is a `✓` glyph in a plain (non-themed) `Text` rather
+ * than the web version's `clip-path` polygon — this package has no SVG
+ * dependency to draw one exactly, and `Link`'s external-link indicator
+ * already established a Unicode glyph as this codebase's fallback for a
+ * small decorative mark with no icon library available.
+ *
+ * `value`/`onValueChange` mirror the same convention as `Switch`, RN's own
+ * toggle-control shape, rather than the web version's `checked`/`onChange`.
+ * The idle border color is another `Switch`-style case where the source
+ * CSS hardcodes a palette swatch per color scheme instead of a token that
+ * already resolves per theme, so it branches on `useResolvedColorScheme()`
+ * the same way.
+ *
+ * @see https://developer.gnome.org/hig/patterns/controls/checkboxes.html
+ */
+export declare const Checkbox: import('react').ForwardRefExoticComponent<CheckboxProps & import('react').RefAttributes<View>>;

package/dist/components/Checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export type { CheckboxProps } from './Checkbox';
+export { Checkbox } from './Checkbox';

package/dist/components/HeaderBar/HeaderBar.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+import { StyleProp, View, ViewProps, ViewStyle } from 'react-native';
+export interface HeaderBarProps extends Omit<ViewProps, 'style'> {
+    /** Centered title. Pass a string or a custom element. */
+    title?: ReactNode;
+    /** Controls placed at the leading (left) edge — back button, menu, etc. */
+    start?: ReactNode;
+    /** Controls placed at the trailing (right) edge — actions, overflow menu, etc. */
+    end?: ReactNode;
+    /**
+     * When true the header bar blends into the window chrome (no bottom
+     * border). Use for the topmost bar of a full-window layout.
+     */
+    flat?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Title bar with centered title and leading/trailing action slots.
+ *
+ * Mirrors the Adwaita `AdwHeaderBar` pattern. Use `flat` buttons
+ * (`<Button variant="flat">`) inside the header bar per GNOME HIG.
+ *
+ * Rebuilt with flexbox rather than ported from `@gnome-ui/react`'s CSS
+ * Grid (`1fr auto 1fr`) — RN has no grid layout, but the same true-centering
+ * effect (the title stays centered in the full width regardless of how
+ * wide `start`/`end` are, rather than centering only in the leftover gap
+ * between them) comes from giving both side slots `flex: 1` with the title
+ * left unflexed in between, since both sides then always claim equal
+ * leftover space. The web version's `<header>` element has no RN
+ * equivalent; `accessibilityRole="header"` is deliberately *not* applied to
+ * the outer `View` since that role means "text heading" in RN's
+ * accessibility tree (see `Text`'s heading variants), not "landmark
+ * container" the way HTML's `<header>` does.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.HeaderBar.html
+ * @see https://developer.gnome.org/hig/patterns/containers/header-bars.html
+ */
+export declare const HeaderBar: import('react').ForwardRefExoticComponent<HeaderBarProps & import('react').RefAttributes<View>>;

package/dist/components/HeaderBar/index.d.ts

@@ -0,0 +1,2 @@
+export type { HeaderBarProps } from './HeaderBar';
+export { HeaderBar } from './HeaderBar';

package/dist/components/Link/Link.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { PressableProps, StyleProp, TextStyle, View, ViewStyle } from 'react-native';
+export interface LinkProps extends Omit<PressableProps, 'children' | 'style'> {
+    /**
+     * Target URL. Passed to `Linking.openURL` when pressed, unless a custom
+     * `onPress` is supplied (e.g. to hand internal links to a router like
+     * React Navigation instead of the device browser).
+     */
+    href: string;
+    /**
+     * When true the link is treated as external: appends a trailing ↗
+     * indicator and an "Opens in browser" accessibility hint. RN has no tab
+     * concept, so unlike the web `Link` this doesn't change navigation
+     * behaviour — `href` always opens via `Linking.openURL` regardless.
+     */
+    external?: boolean;
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+    /** Style applied to the label `Text`. */
+    textStyle?: StyleProp<TextStyle>;
+}
+/**
+ * Inline hyperlink following GNOME HIG.
+ *
+ * Rebuilt on `Pressable`/themed `Text` rather than ported from
+ * `@gnome-ui/react`'s `<a>`: touch devices have no `:hover`, so the
+ * underline that the web version reveals on hover instead reveals on
+ * press — the closest native equivalent — alongside the same `0.7`
+ * press-opacity dip as `@gnome-ui/react`'s `:active` state.
+ *
+ * @see https://developer.gnome.org/hig/patterns/controls/links.html
+ */
+export declare const Link: import('react').ForwardRefExoticComponent<LinkProps & import('react').RefAttributes<View>>;

package/dist/components/Link/index.d.ts

@@ -0,0 +1,2 @@
+export type { LinkProps } from './Link';
+export { Link } from './Link';

package/dist/components/PathBar/PathBar.d.ts

@@ -0,0 +1,43 @@
+import { ReactNode } from 'react';
+import { StyleProp, ViewProps, ViewStyle } from 'react-native';
+export interface PathBarSegment {
+    /** Display label for this path segment. */
+    label: string;
+    /** Opaque path value passed to `onNavigate` when the segment is pressed. */
+    path: string;
+    /** Optional icon placed before the label (e.g. a folder icon). Rendered as-is. */
+    icon?: ReactNode;
+}
+export interface PathBarProps extends Omit<ViewProps, 'style'> {
+    /**
+     * Ordered path segments from root to current location. The last segment
+     * is the current folder and is rendered non-interactive.
+     */
+    segments: PathBarSegment[];
+    /**
+     * Called when the user presses a non-current segment. Receives the
+     * `path` and zero-based `index` of the pressed segment.
+     */
+    onNavigate?: (path: string, index: number) => void;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Breadcrumb path bar for navigating a hierarchical location.
+ *
+ * Mirrors the location bar in GNOME Files (Nautilus). Segments are
+ * separated by chevron dividers. All segments except the last are
+ * interactive — pressing them calls `onNavigate`. The last segment
+ * represents the current location and renders as a static, bold label.
+ *
+ * Rebuilt with `Pressable`/`View`/`Text` rather than ported from
+ * `@gnome-ui/react`'s `<nav><ol><li>`: RN's `AccessibilityRole` union has
+ * neither a "navigation" landmark nor a breadcrumb-list role (the same gap
+ * that dropped `Sidebar`'s `<nav>` role), so those are dropped rather than
+ * faked — each interactive segment still gets its own
+ * `accessibilityRole="button"` and `accessibilityLabel`. The separator
+ * chevron is a Unicode `›` glyph instead of the web version's inline SVG
+ * path, matching this package's established no-SVG-dependency convention.
+ *
+ * @see https://developer.gnome.org/hig/patterns/nav/search.html
+ */
+export declare const PathBar: ({ segments, onNavigate, style, ...viewProps }: PathBarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/PathBar/index.d.ts

@@ -0,0 +1,2 @@
+export type { PathBarProps, PathBarSegment } from './PathBar';
+export { PathBar } from './PathBar';

package/dist/components/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,72 @@
+import { StyleProp, ViewProps, ViewStyle } from 'react-native';
+export type ProgressBarVariant = 'accent' | 'success' | 'warning' | 'error';
+export interface ProgressBarProps extends Omit<ViewProps, 'style'> {
+    /**
+     * Current progress value between `0` and `1` (e.g. `0.6` = 60%). Omit
+     * or set to `undefined` for the indeterminate (pulsing) state.
+     */
+    value?: number;
+    /**
+     * Fill color of the progress indicator.
+     * - `"accent"` (default) — blue, general-purpose progress.
+     * - `"success"` — green, completed or healthy state.
+     * - `"warning"` — yellow, approaching a limit.
+     * - `"error"` — red, failed or critical state.
+     */
+    variant?: ProgressBarVariant;
+    /** Accessible label describing what is loading. */
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Determinate and indeterminate progress bar following the Adwaita style.
+ *
+ * - **Determinate** — pass `value` (0–1) to show exact progress; the fill
+ *   width animates on every change, matching the web version's
+ *   `transition: width`.
+ * - **Indeterminate** — omit `value` for a 40%-wide bar that slides left
+ *   to right on an `Animated.loop`, matching the web version's CSS
+ *   `@keyframes pulse`.
+ *
+ * `useReducedMotion()` is honored per the *source CSS's own* per-state
+ * behavior rather than one uniform rule: determinate width changes simply
+ * skip the transition (duration `0`, still an immediate jump like the CSS
+ * `transition: none`), while the indeterminate pulse stops entirely and
+ * freezes as a static, full-width, 50%-opacity bar — exactly what
+ * `@media (prefers-reduced-motion: reduce) { .indeterminate { animation:
+ * none; left: 0; width: 100%; opacity: 0.5 } }` does. This differs from
+ * `Spinner`, whose reduced-motion behavior *slows* its animation instead
+ * of stopping it — each component mirrors its own source CSS rather than
+ * applying a single reduced-motion policy across the package.
+ *
+ * Both animated states are driven entirely by `transform` rather than by
+ * layout properties (`width`/`left`), so both can run
+ * `useNativeDriver: true`: RN's native animation driver can only animate
+ * transforms, and a JS-driven (`useNativeDriver: false`) `Animated.timing`
+ * or `Animated.loop` schedules its next frame via a plain `setTimeout` —
+ * one that routinely fires a tick after a test's `render()` returns but
+ * before unmount, outside any `act()` boundary, producing a real (if
+ * harmless) "update not wrapped in act()" warning under
+ * `@testing-library/react-native` on every render of this component. The
+ * determinate fill stays a constant `width: '100%'` and instead animates
+ * `transform: [{ scaleX }]` with `transformOrigin: 'left'` (so it grows
+ * from the left edge, not from center); the indeterminate pulse similarly
+ * animates `transform: [{ translateX }]` from `-0.4 * trackWidth` to
+ * `trackWidth` (measured via `onLayout`, since a transform's `translateX`
+ * needs a pixel offset, not a percentage) rather than animating `left`.
+ * Both reproduce the exact same visual motion as the source CSS's
+ * `width`/`left` transitions while running fully off the JS thread, which
+ * eliminates the warning at its root rather than suppressing it.
+ *
+ * `role="progressbar"` maps directly to RN's own `accessibilityRole`
+ * (unlike `Spinner`, which had to substitute for the web's `role="status"`
+ * — `ProgressBar`'s web role already has a 1:1 RN equivalent).
+ * `accessibilityValue` carries `now`/`min`/`max` for the determinate case;
+ * the indeterminate case omits all three, RN's equivalent of the web
+ * version omitting `aria-valuenow`/`aria-valuemin`/`aria-valuemax`. Web's
+ * `aria-labelledby` (an id-relationship prop) has no RN equivalent — RN
+ * has no DOM ids — so only `aria-label` (`accessibilityLabel`) is ported.
+ *
+ * @see https://developer.gnome.org/hig/patterns/feedback/progress.html
+ */
+export declare const ProgressBar: ({ value, variant, accessibilityLabel, style, onLayout, ...viewProps }: ProgressBarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ProgressBar/index.d.ts

@@ -0,0 +1,2 @@
+export type { ProgressBarProps, ProgressBarVariant } from './ProgressBar';
+export { ProgressBar } from './ProgressBar';

package/dist/components/RadioButton/RadioButton.d.ts

@@ -0,0 +1,36 @@
+import { PressableProps, StyleProp, View, ViewStyle } from 'react-native';
+export interface RadioButtonProps extends Omit<PressableProps, 'children' | 'style' | 'onPress'> {
+    /** Whether this radio button is the selected one in its group. */
+    value: boolean;
+    /**
+     * Called when pressed while unselected. RN has no `name`-attribute
+     * grouping like the web `<input type="radio">`, so mutual exclusivity
+     * within a group is the consumer's responsibility — render one
+     * `RadioButton` per option and drive `value` from shared selection
+     * state, flipping it in `onSelect`.
+     */
+    onSelect?: () => void;
+    /** Accessible label. Required when no visible label is associated. */
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Single-selection radio button following the GNOME HIG and Adwaita style.
+ *
+ * Rebuilt on `Pressable`/`Animated.View` rather than ported from
+ * `@gnome-ui/react`'s `<input type="radio">`: reuses `Checkbox`'s exact
+ * border/background transition technique (same `Animated.Value`, same
+ * mount-skip guard so it never animates before the user touches it, same
+ * `useResolvedColorScheme()`/`useResolvedContrast()` branching for the
+ * idle border color, since the source CSS hardcodes those the same way
+ * `Checkbox.module.css` does) — just circular, with a filled dot instead
+ * of a checkmark, and no indeterminate state.
+ *
+ * The web version's `name`-attribute grouping has no RN equivalent, so
+ * grouping is fully manual here: render one `RadioButton` per option and
+ * manage the selected option in the parent, same as any other controlled
+ * list of options.
+ *
+ * @see https://developer.gnome.org/hig/patterns/controls/radio-buttons.html
+ */
+export declare const RadioButton: import('react').ForwardRefExoticComponent<RadioButtonProps & import('react').RefAttributes<View>>;

package/dist/components/RadioButton/index.d.ts

@@ -0,0 +1,2 @@
+export type { RadioButtonProps } from './RadioButton';
+export { RadioButton } from './RadioButton';