@gnome-ui/react-native 1.5.0 → 1.6.0

package/dist/components/Clamp/Clamp.d.ts

@@ -0,0 +1,61 @@
+import { ReactNode } from 'react';
+import { StyleProp, View, ViewProps, ViewStyle } from 'react-native';
+export interface ClampProps extends Omit<ViewProps, 'style'> {
+    /**
+     * Maximum content width in density-independent pixels.
+     * The container shrinks freely below this value.
+     * Defaults to `600` — the Adwaita recommended narrow-content width.
+     */
+    maximumSize?: number;
+    /**
+     * Fractional width (`0`–`1`) of the available space to use while that
+     * space is narrower than `maximumSize` — useful for keeping a
+     * comfortable margin on medium-width screens. Defaults to `1` (always
+     * fill the width).
+     */
+    tighteningThreshold?: number;
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Constrains its children to a maximum width while letting them shrink
+ * freely, mirroring the Adwaita `AdwClamp` widget and `@gnome-ui/react`'s
+ * own `Clamp`.
+ *
+ * Use it on settings pages and forms so content never becomes too wide to
+ * read comfortably on a tablet or a landscape phone, while still filling
+ * the available width on a narrow one.
+ *
+ * The web version's `margin-inline: auto` centering becomes
+ * `alignSelf: 'center'` here rather than `marginHorizontal: 'auto'` —
+ * RN auto-margin support was left unverified for this Yoga version when
+ * `Drawer` needed the same trick, so this follows `Drawer`'s resolution of
+ * using flex alignment instead. The one consequence is that `Clamp`
+ * expects a column-direction parent (RN's default): `alignSelf` acts on
+ * the cross axis, so inside a `flexDirection: 'row'` parent it would
+ * centre vertically instead. Wrap it in a plain `View` there.
+ *
+ * `tighteningThreshold` is a real percentage width here, unlike in
+ * `@gnome-ui/react` where the prop is declared and documented but never
+ * reaches the DOM — implementing it exactly as that package documents it
+ * (a fraction of the available width, still capped by `maximumSize`)
+ * costs nothing on RN and avoids shipping a dead prop.
+ *
+ * Adds no padding of its own — wrap the content in its own padded
+ * container as needed.
+ *
+ * @example
+ * // Settings page — content never wider than 600 dp
+ * <Clamp>
+ *   <BoxedList>…</BoxedList>
+ * </Clamp>
+ *
+ * @example
+ * // Leave a 10% margin while the screen is narrower than 480 dp
+ * <Clamp maximumSize={480} tighteningThreshold={0.9}>
+ *   <Text>…</Text>
+ * </Clamp>
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Clamp.html
+ */
+export declare const Clamp: import('react').ForwardRefExoticComponent<ClampProps & import('react').RefAttributes<View>>;

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

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

package/dist/components/CoachMark/CoachMark.d.ts

@@ -0,0 +1,92 @@
+import { ReactNode, RefObject } from 'react';
+import { StyleProp, ViewStyle, View } from 'react-native';
+import { CoachMarkPlacement } from './coachMarkUtils';
+export interface CoachMarkAction {
+    label: string;
+    onPress: () => void;
+}
+export interface CoachMarkProps {
+    /** Whether the coach mark is shown. */
+    open: boolean;
+    /** The element to highlight and anchor to. */
+    targetRef: RefObject<View | null>;
+    /** Heading text. */
+    title?: ReactNode;
+    /** Body copy explaining the highlighted element. */
+    description?: ReactNode;
+    /** Preferred side of the target for the bubble. Flips to stay on-screen. Defaults to `'bottom'`. */
+    placement?: CoachMarkPlacement;
+    /** Dim the rest of the screen and cut a spotlight around the target. Defaults to `true`. */
+    spotlight?: boolean;
+    /** Extra px around the target inside the spotlight cutout. Defaults to `8`. */
+    spotlightPadding?: number;
+    /** Close when the dimmed backdrop is pressed. Defaults to `false` (guided). */
+    dismissOnBackdrop?: boolean;
+    /** 1-based index of this step within a tour, for the "X of N" counter. */
+    step?: number;
+    /** Total number of steps in the tour. */
+    stepCount?: number;
+    /** Primary (suggested) action, e.g. Next / Got it. */
+    primaryAction?: CoachMarkAction;
+    /** Secondary (flat) action, e.g. Back. */
+    secondaryAction?: CoachMarkAction;
+    /** Called when the Android back button is pressed, or the backdrop is dismissed. */
+    onDismiss?: () => void;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * A single onboarding coach mark: it spotlights a target element and
+ * anchors a callout bubble (title, description, step counter, actions)
+ * beside it, guiding a user to one feature. Compose several with
+ * `CoachMarkTour`, or drive one directly with `open`. Mirrors
+ * `@gnome-ui/react`'s `CoachMark` — not a GNOME HIG widget, a pragmatic
+ * feature-discovery pattern.
+ *
+ * Rebuilt on RN's own `Modal` rather than the web version's DOM `Portal` —
+ * no `container` prop, the same `Overlay`/`Drawer` precedent for "no RN
+ * portal-target concept." Positions with the same two-pass viewport-aware
+ * flip as the web version (`coachMarkUtils.ts`, duplicated verbatim — pure
+ * math, no DOM), resolved from `targetRef.current?.measureInWindow(...)`
+ * and the bubble's own `onLayout` size, combined once both arrive — the
+ * same "resolve two independent async things, then combine" shape
+ * `Tooltip`/`Popover`/`Dropdown` already established. No focus trap (no
+ * DOM `Tab` concept in RN) and no scroll/resize re-positioning (RN has no
+ * global scroll event, the same `Tooltip` precedent for a transient
+ * floating element).
+ *
+ * **The spotlight cutout has no CSS `box-shadow: 0 0 0 100vmax` port** —
+ * that trick paints an opaque scrim everywhere *except* inside a rounded
+ * rect by using a huge spread shadow, which RN's `shadow*` props (real OS
+ * shadows, not a scrim generator) can't reproduce. Rebuilt as four plain
+ * `View` bands (top/bottom/left/right of the padded target rect) filling
+ * the screen minus a rectangular hole, plus a separate rounded
+ * `accentColor`-bordered ring `View` drawn on top at the target rect —
+ * visually equivalent (dims everything but the target, with an accent
+ * ring around it), just assembled from ordinary rects instead of one
+ * masked shape. The whole overlay (bands + ring) sits inside a single
+ * full-screen `Pressable`, so — matching the web version exactly — a tap
+ * anywhere within it (including visually "in the hole," since the web
+ * version's backdrop is one full-bleed element with the spotlight only
+ * painted on top, `pointer-events: none`) triggers `dismissOnBackdrop`,
+ * never the real content underneath.
+ *
+ * **`dismissOnBackdrop` has no effect when `spotlight` is `false`** —
+ * ported faithfully, not fixed: the web source only renders a backdrop
+ * element at all when `spotlight` is true, so with `spotlight={false}`
+ * there is nothing to press to dismiss via backdrop either way, on both
+ * platforms.
+ *
+ * The arrow reuses `Popover`/`Tooltip`'s transparent-border-triangle trick
+ * rather than the web CSS's rotated-45°-square, the same established RN
+ * substitution for every floating-bubble arrow in this package — offset
+ * along the bubble's edge by `arrowOffset` (from `computeBubblePosition`,
+ * unlike `Tooltip`/`Popover`'s simpler always-centered arrow).
+ *
+ * `role="dialog"` + `accessibilityViewIsModal` port 1:1 from `Dialog`'s
+ * own precedent. `BackHandler`'s `hardwareBackPress` is the Android analog
+ * of the web version's Escape listener.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Window.html
+ */
+export declare const CoachMark: ({ open, targetRef, title, description, placement, spotlight, spotlightPadding, dismissOnBackdrop, step, stepCount, primaryAction, secondaryAction, onDismiss, style, testID, }: CoachMarkProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/CoachMark/CoachMarkTour.d.ts

@@ -0,0 +1,54 @@
+import { ReactNode, RefObject } from 'react';
+import { View } from 'react-native';
+import { CoachMarkPlacement } from './coachMarkUtils';
+export interface CoachMarkStep {
+    /** The element this step highlights. */
+    targetRef: RefObject<View | null>;
+    /** Heading for the step. */
+    title?: ReactNode;
+    /** Body copy for the step. */
+    description?: ReactNode;
+    /** Preferred bubble side for this step. Defaults to the tour's placement. */
+    placement?: CoachMarkPlacement;
+}
+export interface CoachMarkTourProps {
+    /** Ordered steps of the tour. */
+    steps: CoachMarkStep[];
+    /** Whether the tour is running. */
+    open: boolean;
+    /** Step to start on when the tour opens. Defaults to `0`. */
+    startIndex?: number;
+    /** Called after the primary action on the final step. */
+    onFinish?: () => void;
+    /** Called when the user skips (Skip button or Android back) before finishing. */
+    onSkip?: () => void;
+    /** Called with the new index whenever the active step changes. */
+    onStepChange?: (index: number) => void;
+    /** Default preferred bubble side for steps that don't set their own. Defaults to `'bottom'`. */
+    placement?: CoachMarkPlacement;
+    /** Spotlight the target. Defaults to `true`. */
+    spotlight?: boolean;
+    /** Close the tour when the dimmed backdrop is pressed. Defaults to `false`. */
+    dismissOnBackdrop?: boolean;
+    /** Override the action-button labels (for i18n). */
+    labels?: Partial<{
+        next: string;
+        back: string;
+        skip: string;
+        finish: string;
+    }>;
+    testID?: string;
+}
+/**
+ * Sequential onboarding tour built from `CoachMark` steps. Renders the
+ * mark for the active step, wires Next/Back/Skip/Done and the "X of N"
+ * counter, and advances through `steps` until finished or skipped.
+ * Mirrors `@gnome-ui/react`'s `CoachMarkTour` verbatim — pure state
+ * orchestration on top of `CoachMark`, nothing platform-specific to
+ * change.
+ *
+ * Uncontrolled step index: the tour tracks its own position and resets to
+ * `startIndex` each time it opens. Drive visibility with `open`; react to
+ * completion with `onFinish`/`onSkip`.
+ */
+export declare const CoachMarkTour: ({ steps, open, startIndex, onFinish, onSkip, onStepChange, placement, spotlight, dismissOnBackdrop, labels, testID, }: CoachMarkTourProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/CoachMark/coachMarkUtils.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Positioning helpers for `CoachMark`. Kept pure and measurement-free so
+ * they can be unit-tested directly; the component feeds them real rects
+ * (from `measureInWindow` instead of the web version's
+ * `getBoundingClientRect`, but the shape is identical either way).
+ *
+ * Duplicated verbatim from `@gnome-ui/react` rather than imported
+ * cross-package — the same `fileType.ts`/`Icon.tsx` precedent for
+ * DOM-free logic that isn't worth a shared package for one file's worth
+ * of code.
+ *
+ * The algorithm mirrors `Popover`'s viewport-aware flip: try the preferred
+ * side, then its opposite, then the rest, picking the first that fits;
+ * clamp the cross-axis and shift the arrow when nothing fits perfectly.
+ */
+export type CoachMarkPlacement = 'top' | 'bottom' | 'left' | 'right';
+export interface Rect {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
+export interface BubblePosition {
+    top: number;
+    left: number;
+    placement: CoachMarkPlacement;
+    /** Arrow centre offset in px from the near edge of the bubble. */
+    arrowOffset: number;
+}
+/** Grow a rect outward by `pad` on every side, e.g. the spotlight cutout. */
+export declare const padRect: (rect: Rect, pad: number) => Rect;
+/**
+ * Place the callout bubble around `target`, flipping to stay inside a
+ * `viewport` (width × height). `bubble` is the measured bubble size.
+ */
+export declare const computeBubblePosition: (target: Rect, bubble: {
+    width: number;
+    height: number;
+}, viewport: {
+    width: number;
+    height: number;
+}, preferred: CoachMarkPlacement) => BubblePosition;

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

@@ -0,0 +1,5 @@
+export type { CoachMarkAction, CoachMarkProps } from './CoachMark';
+export { CoachMark } from './CoachMark';
+export type { CoachMarkStep, CoachMarkTourProps } from './CoachMarkTour';
+export { CoachMarkTour } from './CoachMarkTour';
+export type { CoachMarkPlacement } from './coachMarkUtils';

package/dist/components/InlineViewSwitcher/InlineViewSwitcher.d.ts

@@ -0,0 +1,93 @@
+import { ReactNode } from 'react';
+import { StyleProp, View, ViewProps, ViewStyle } from 'react-native';
+import { InlineViewSwitcherVariant, VariantStyles } from './variants';
+export type { InlineViewSwitcherVariant } from './variants';
+export type InlineViewSwitcherOverflow = 'wrap' | 'scroll' | 'compact' | 'menu';
+/** Measured position of one item inside the switcher row. */
+export interface ItemLayout {
+    x: number;
+    width: number;
+}
+interface InlineViewSwitcherContextValue {
+    value: string;
+    onValueChange: (value: string) => void;
+    compact: boolean;
+    styles: VariantStyles;
+    onItemLayout: (name: string, layout: ItemLayout) => void;
+}
+export declare function useInlineViewSwitcher(): InlineViewSwitcherContextValue;
+export interface InlineViewSwitcherProps extends Omit<ViewProps, 'style'> {
+    /** Currently active view name. */
+    value: string;
+    /** Called with the new value when a view is selected. */
+    onValueChange: (value: string) => void;
+    /**
+     * Visual style of the switcher.
+     * - `default` — card background with border (same shape as `ToggleGroup`).
+     * - `flat`    — no background or border; active indicator only.
+     * - `round`   — pill-shaped container and items, solid accent indicator.
+     * - `pill`    — segmented-control style; active item appears lifted, no accent color.
+     */
+    variant?: InlineViewSwitcherVariant;
+    /**
+     * Overflow strategy when the container is too narrow for all items.
+     * - `wrap`    — default; items simply overflow.
+     * - `scroll`  — horizontal scroll, snapping each item to the start edge.
+     * - `compact` — collapses item labels to icons-only when overflowing (needs icons on all items).
+     * - `menu`    — shows the active item and a chevron; all items open in a `BottomSheet`.
+     */
+    overflow?: InlineViewSwitcherOverflow;
+    /** Accessible label for the group. */
+    accessibilityLabel?: string;
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Compact inline view switcher for content areas, cards, and toolbars —
+ * wherever `ViewSwitcher` (header-bar sized) would be too heavy. Mirrors
+ * `AdwInlineViewSwitcher` (libadwaita 1.7 / GNOME 48) and
+ * `@gnome-ui/react`'s own `InlineViewSwitcher`.
+ *
+ * All four variants and all four overflow strategies port, but almost none
+ * of the *mechanism* does — this is a rebuild, not a transliteration:
+ *
+ * - **The sliding indicator** is measured, not laid out. The web reads the
+ *   active button's `offsetLeft`/`offsetWidth` in a `useLayoutEffect`; here
+ *   each item reports its own `onLayout` up through the context, and the
+ *   indicator animates `translateX` + `width` to the active entry. Both run
+ *   on **one JS-driven animation** (`useNativeDriver: false`): `width` can't
+ *   be native-driven, and mixing a native and a JS value on one component
+ *   throws — the same trade-off `Expander` accepted for its own animated
+ *   height. `scaleX` would have been native-driveable but distorts the
+ *   indicator's corner radii, which is exactly what the variants shape.
+ *   `useReducedMotion()` snaps it into place instead, per this package's
+ *   per-component convention.
+ * - **Overflow detection** replaces `ResizeObserver` + `scrollWidth` vs
+ *   `clientWidth` with the item measurements already being collected: their
+ *   summed natural widths (RN defaults `flexShrink` to 0, so an overflowing
+ *   row reports each item's *natural* width rather than a squeezed one)
+ *   against the row's own `onLayout` width. The web's `naturalWidthRef`
+ *   capture and 30 px hysteresis port verbatim — without them, collapsing
+ *   the labels shrinks the content and would immediately re-expand it.
+ * - **`overflow="scroll"`** becomes a horizontal `ScrollView` with the
+ *   scrollbar hidden. `scroll-snap-align: start` has no RN style, but the
+ *   measured item offsets feed `snapToOffsets`, which reproduces it exactly.
+ * - **`overflow="menu"`** reuses the already-shipped `BottomSheet`, the same
+ *   component the web version reaches for.
+ *
+ * The ←/→/Home/End keyboard layer drops, as everywhere else in this package.
+ * As in `ToggleGroup`, the group takes `accessibilityRole="radiogroup"` but
+ * deliberately not `accessible`, which on iOS would collapse the items into
+ * a single unreachable element.
+ *
+ * @example
+ * const [view, setView] = useState('grid');
+ *
+ * <InlineViewSwitcher value={view} onValueChange={setView} variant="pill">
+ *   <InlineViewSwitcherItem name="grid" label="Grid" />
+ *   <InlineViewSwitcherItem name="list" label="List" />
+ * </InlineViewSwitcher>
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.InlineViewSwitcher.html
+ */
+export declare const InlineViewSwitcher: import('react').ForwardRefExoticComponent<InlineViewSwitcherProps & import('react').RefAttributes<View>>;

package/dist/components/InlineViewSwitcher/InlineViewSwitcherItem.d.ts

@@ -0,0 +1,25 @@
+import { IconDefinition } from '@gnome-ui/icons';
+import { PressableProps, View } from 'react-native';
+export interface InlineViewSwitcherItemProps extends Omit<PressableProps, 'children' | 'style' | 'disabled' | 'onPress'> {
+    /** String identifier — becomes the switcher's `value` when this item is active. */
+    name: string;
+    /** Visible label. */
+    label?: string;
+    /** Icon from `@gnome-ui/icons`. */
+    icon?: IconDefinition;
+    /** Accessible name. Required for icon-only items; defaults to `label`. */
+    accessibilityLabel?: string;
+    disabled?: boolean;
+}
+/**
+ * Individual view option inside an `InlineViewSwitcher`. Can be icon-only,
+ * label-only, or icon + label — for icon-only items always pass an
+ * `accessibilityLabel` so screen readers can identify the view.
+ *
+ * The item paints no background of its own for the active state: that's the
+ * parent's sliding indicator, which this component feeds by reporting its
+ * `onLayout` position and width up through the context. Only the label's
+ * color and weight change, exactly as in the web version — where the
+ * `.active` class also sets nothing but `color` and `font-weight`.
+ */
+export declare const InlineViewSwitcherItem: import('react').ForwardRefExoticComponent<InlineViewSwitcherItemProps & import('react').RefAttributes<View>>;

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

@@ -0,0 +1,4 @@
+export type { InlineViewSwitcherOverflow, InlineViewSwitcherProps, InlineViewSwitcherVariant, } from './InlineViewSwitcher';
+export { InlineViewSwitcher } from './InlineViewSwitcher';
+export type { InlineViewSwitcherItemProps } from './InlineViewSwitcherItem';
+export { InlineViewSwitcherItem } from './InlineViewSwitcherItem';

package/dist/components/InlineViewSwitcher/variants.d.ts

@@ -0,0 +1,30 @@
+import { TextStyle, ViewStyle } from 'react-native';
+import { GnomeThemeTokens } from '../../theme';
+export type InlineViewSwitcherVariant = 'default' | 'flat' | 'round' | 'pill';
+export interface VariantStyles {
+    container: ViewStyle;
+    /** Same values as `container.gap`/`container.padding`, kept as plain
+     *  numbers so the overflow math can add them up — `ViewStyle` types them
+     *  as `DimensionValue`, which may be a percentage string. */
+    gap: number;
+    padding: number;
+    item: ViewStyle;
+    iconOnlyItem: ViewStyle;
+    indicator: ViewStyle;
+    /** Inset of the indicator from the container's top/bottom edge. */
+    indicatorInset: number;
+    activeTextColor: string;
+    idleTextColor: string;
+}
+/**
+ * The four `.default`/`.flat`/`.round`/`.pill` CSS blocks, resolved against
+ * the theme. Every `color-mix(in srgb, accent N%, transparent)` becomes an
+ * 8-digit `#RRGGBBAA` hex off `theme.accentBgColor` (the `Chip`/`ToggleGroup`
+ * precedent, which keeps the tint following the app's configurable accent),
+ * and every `box-shadow` is dropped — the theme generator keeps shadow
+ * tokens in `raw` only and `Card` already settled that a border, or the
+ * surface contrast itself, carries the same separation on RN.
+ */
+export declare function getVariantStyles(theme: GnomeThemeTokens, variant: InlineViewSwitcherVariant, isDark: boolean): VariantStyles;
+/** Shared by the item label and the menu-sheet rows. */
+export declare function labelTextStyle(theme: GnomeThemeTokens, active: boolean, color: string): TextStyle;

package/dist/components/PreferencesGroup/PreferencesGroup.d.ts

@@ -0,0 +1,52 @@
+import { ReactNode } from 'react';
+import { StyleProp, View, ViewProps, ViewStyle } from 'react-native';
+export interface PreferencesGroupProps extends Omit<ViewProps, 'style'> {
+    /** Group heading. */
+    title?: string;
+    /** Optional description rendered below the title. */
+    description?: string;
+    /** Widget placed at the trailing edge of the title row (e.g. a reset `Button`). */
+    headerSuffix?: ReactNode;
+    /** `BoxedList` rows or any row-shaped content. */
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Titled section that wraps a `BoxedList` with an optional description,
+ * mirroring `AdwPreferencesGroup` and `@gnome-ui/react`'s own
+ * `PreferencesGroup`.
+ *
+ * Use it to group related settings under a named heading. The group is
+ * purely a layout and labelling wrapper — it doesn't render the `BoxedList`
+ * itself; pass one as `children`.
+ *
+ * The web's empty `.content` wrapper looks like dead markup but is
+ * load-bearing, so it's kept: the group is a 12 dp-gap flex column, and
+ * without that wrapper every child would become a flex item of the group and
+ * pick up a 12 dp gap between the rows themselves, instead of one gap
+ * between the header and the content as a whole.
+ *
+ * The title is `Text variant="body"` with an explicit semibold weight rather
+ * than `variant="heading"`, which is body-sized but **bold** and on the
+ * tighter heading line-height — the CSS `.title` is specifically semibold at
+ * the body line-height. It keeps the `header` accessibility role anyway
+ * (passed explicitly), since a settings-group heading is exactly the kind of
+ * landmark a screen reader rotor should list — the same call `StatusPage`
+ * makes for its own title.
+ *
+ * `min-width: 0` on the header text has no port and needs none: it's the
+ * classic CSS flexbox override for a min-content floor that Yoga doesn't
+ * apply in the first place.
+ *
+ * @example
+ * <PreferencesGroup
+ *   title="Appearance"
+ *   description="How the app looks on this device."
+ *   headerSuffix={<Button variant="flat" onPress={reset}>Reset</Button>}
+ * >
+ *   <BoxedList>{rows}</BoxedList>
+ * </PreferencesGroup>
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.PreferencesGroup.html
+ */
+export declare const PreferencesGroup: import('react').ForwardRefExoticComponent<PreferencesGroupProps & import('react').RefAttributes<View>>;

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

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

package/dist/components/StatusPage/StatusPage.d.ts

@@ -0,0 +1,79 @@
+import { IconDefinition } from '@gnome-ui/icons';
+import { ReactNode } from 'react';
+import { StyleProp, View, ViewProps, ViewStyle } from 'react-native';
+export interface StatusPageProps extends Omit<ViewProps, 'style'> {
+    /**
+     * Large icon displayed above the title.
+     * Use an icon from `@gnome-ui/icons` or omit for a text-only page.
+     */
+    icon?: IconDefinition;
+    /**
+     * Custom icon node. Use when you need an image, emoji, or a rendered
+     * SVG that is not part of `@gnome-ui/icons`.
+     * Ignored when `icon` is also provided.
+     */
+    iconNode?: ReactNode;
+    /** Main heading. Keep it short — one noun phrase. */
+    title: string;
+    /** Supporting description rendered below the title. */
+    description?: string;
+    /**
+     * Optional action area — typically one or two `Button`s.
+     * Rendered below the description, wrapping onto a second line if needed.
+     */
+    children?: ReactNode;
+    /**
+     * Reduces padding, icon size, and title scale for use in compact
+     * contexts such as sidebars, popovers, and small panels.
+     */
+    compact?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Empty-state / status page following the Adwaita `AdwStatusPage` pattern,
+ * mirroring `@gnome-ui/react`'s own `StatusPage`.
+ *
+ * Use to fill a view with no content yet, an error state, or a completion
+ * confirmation. Always explain *why* the view is empty and *what the user
+ * can do* about it — don't use it for loading states, where `Spinner` or
+ * `ProgressBar` belong instead.
+ *
+ * Centres its content on both axes, but — exactly as in the web version —
+ * the vertical centring only does anything once a parent gives it height:
+ * put it in a `flex: 1` container to fill the view.
+ *
+ * The title renders through this package's `Text` at `variant="title-1"`
+ * (`"title-4"` when `compact`), which means it also picks up `Text`'s
+ * automatic `header` accessibility role — a deliberate divergence from the
+ * web version's `<p class="title">`. That `<p>` exists because HTML forces
+ * you to pick a concrete `h1`–`h6` level for a component that has no idea
+ * where it sits in the document outline; RN's `header` role carries no
+ * level, so the dilemma disappears and the title can be what it actually
+ * is. On a touch device the rotor is the only structural navigation a
+ * screen reader user has, so this is worth having.
+ *
+ * The icon is dimmed by its wrapper's `opacity` (0.55 light / 0.45 dark,
+ * the two values the web version's own `@media (prefers-color-scheme)`
+ * block hardcodes) and hidden from assistive tech with the
+ * `accessibilityElementsHidden` + `importantForAccessibility="no"` pair
+ * this package already uses in place of `aria-hidden`. Its color needs no
+ * handling at all: `Icon` already defaults to the theme foreground, which
+ * is what `.iconWrap`'s `color` sets.
+ *
+ * The action area is a `WrapBox` rather than a hand-rolled row — `.actions`
+ * is `display: flex; flex-wrap: wrap; justify-content: center; gap` and
+ * nothing else, which is exactly what that component already is.
+ *
+ * @example
+ * <StatusPage
+ *   icon={StarOutline}
+ *   title="No favorites yet"
+ *   description="Packages you star will show up here."
+ * >
+ *   <Button variant="suggested" onPress={onAdd}>Add a package</Button>
+ * </StatusPage>
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.StatusPage.html
+ * @see https://developer.gnome.org/hig/patterns/feedback/empty-states.html
+ */
+export declare const StatusPage: import('react').ForwardRefExoticComponent<StatusPageProps & import('react').RefAttributes<View>>;

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

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

package/dist/components/ToggleGroup/ToggleGroup.d.ts

@@ -0,0 +1,70 @@
+import { ReactNode } from 'react';
+import { StyleProp, View, ViewProps, ViewStyle } from 'react-native';
+interface ToggleGroupContextValue {
+    value: string;
+    onValueChange: (value: string) => void;
+}
+/** Internal — `ToggleGroupItem` reads the selected value and setter from here. */
+export declare function useToggleGroup(): ToggleGroupContextValue;
+export interface ToggleGroupProps extends Omit<ViewProps, 'style'> {
+    /** Name of the currently active toggle. */
+    value: string;
+    /** Called with the new value when a toggle is selected. */
+    onValueChange: (value: string) => void;
+    /** Accessible label for the group. */
+    accessibilityLabel?: string;
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Mutually-exclusive group of toggle buttons for in-place option selection.
+ * Mirrors `AdwToggleGroup` (libadwaita 1.7 / GNOME 48) and
+ * `@gnome-ui/react`'s own `ToggleGroup`.
+ *
+ * Use for formatting controls, view-mode selectors, and toolbar options —
+ * wherever a `ViewSwitcher` would be too heavy or doesn't belong in a
+ * `HeaderBar`. Compose with `ToggleGroupItem`.
+ *
+ * The context and its `value`/`onValueChange` shape port 1:1 — pure React,
+ * no DOM involved. What doesn't port is the keyboard layer: the web version
+ * owns an `onKeyDown` handler implementing ← / → cycling and Home / End
+ * jumps over a roving `tabIndex`, none of which has a touch counterpart.
+ * That's this package's standing convention, already set by `ViewSwitcher`
+ * and `TabBar`; the `radiogroup`/`radio` + `checked` accessibility pairing
+ * that VoiceOver and TalkBack actually announce is what carries the
+ * semantics here instead.
+ *
+ * The group carries `accessibilityRole="radiogroup"` but deliberately
+ * **not** `accessible` — on iOS, `accessible` on a container collapses the
+ * whole subtree into one accessibility element, which would make the
+ * individual toggles unreachable for VoiceOver and defeat the point of the
+ * role. Without it the role still groups on Android while every item stays
+ * individually focusable. (`ViewSwitcher`, built earlier, does set
+ * `accessible` alongside the same role — see this package's ROADMAP note;
+ * worth revisiting there.) The visible trade-off is that the group won't
+ * match a `getByRole('radiogroup')` query, since Testing Library only
+ * matches roles on accessible elements — the items are what matter to a
+ * screen reader, and they each match `getByRole('radio')`.
+ *
+ * `display: inline-flex` becomes `alignSelf: 'flex-start'` (the same
+ * hug-your-content trick `ViewSwitcher` uses), and `box-shadow:
+ * var(--gnome-shadow-sm)` is dropped rather than approximated — the theme
+ * generator deliberately keeps the shadow tokens in `raw` only, and `Card`
+ * already established that a border carries the same separation on RN.
+ * The dark-mode border color is hardcoded per scheme (`rgba(255,255,255,
+ * 0.12)`) exactly as the source CSS hardcodes it, rather than read from
+ * `theme.light3`, which stays `#deddda` in every theme.
+ *
+ * @example
+ * const [align, setAlign] = useState('left');
+ *
+ * <ToggleGroup value={align} onValueChange={setAlign} accessibilityLabel="Alignment">
+ *   <ToggleGroupItem name="left" icon={FormatJustifyLeft} accessibilityLabel="Left" />
+ *   <ToggleGroupItem name="center" icon={FormatJustifyCenter} accessibilityLabel="Center" />
+ *   <ToggleGroupItem name="right" icon={FormatJustifyRight} accessibilityLabel="Right" />
+ * </ToggleGroup>
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ToggleGroup.html
+ */
+export declare const ToggleGroup: import('react').ForwardRefExoticComponent<ToggleGroupProps & import('react').RefAttributes<View>>;
+export {};