@gnome-ui/react-native 1.5.0 → 1.7.0

package/dist/components/ComboRow/ComboRow.d.ts

@@ -0,0 +1,77 @@
+import { ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { DropdownOption } from '../Dropdown';
+/** Same shape as `Dropdown`'s own option — re-exported so `ComboRow` reads self-contained. */
+export type ComboRowOption<V extends string = string> = DropdownOption<V>;
+export interface ComboRowProps<V extends string = string> {
+    /** Primary label. */
+    title: string;
+    /** Secondary line below the title. */
+    subtitle?: string;
+    /** Icon or image placed at the leading edge. */
+    leading?: ReactNode;
+    /** The list of selectable options. */
+    options: ComboRowOption<V>[];
+    /** The currently selected value (controlled). */
+    value?: V;
+    /** Initial value when uncontrolled. */
+    defaultValue?: V;
+    /** Called when the user selects an option. */
+    onValueChange?: (value: V) => void;
+    /** Shown in the trigger while nothing is selected. Defaults to `"—"`. */
+    placeholder?: string;
+    /** Accessible name for the selector. Defaults to `title`. */
+    accessibilityLabel?: string;
+    /** Disables the row and its selector. */
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * Settings row with an inline combo selector at the trailing edge, mirroring
+ * `AdwComboRow` and `@gnome-ui/react`'s own `ComboRow`. Use inside a
+ * `BoxedList` for a setting that picks one of a set of options.
+ *
+ * **This is a composition of `ActionRow` + `Dropdown`, where the web version
+ * hand-rolls its own listbox inline** — around 200 lines re-implementing the
+ * trigger, the flip-up placement, outside-click dismissal, roving
+ * `aria-activedescendant` and the whole keyboard layer, none of which is
+ * meaningfully different from that package's own `Dropdown`. Nothing forced
+ * the duplication visually either: `.row` is `ActionRow`'s exact metrics
+ * (12/24 dp padding, 52 dp min-height) and `.trigger` is `Dropdown`'s exact
+ * trigger (card background, 1 px shade border turning accent when open,
+ * `radius-md`, chevron). So this port composes the two already-shipped,
+ * already-verified components instead — which also means the flip-to-fit
+ * placement, the tap-outside dismissal and the `Modal`-based list all come
+ * along for free rather than being rebuilt and re-debugged.
+ *
+ * The web keeps its own `useState` for the uncontrolled case; `Dropdown` is
+ * controlled-only, so that state lives here — same behaviour, one level up.
+ *
+ * The keyboard layer (`↑`/`↓`/`Home`/`End`/`Enter`/`Escape`) drops as it
+ * does everywhere else in this package, and `Dropdown` already provides the
+ * touch equivalents it was built with.
+ *
+ * The dimming for `disabled` is applied here rather than left to
+ * `ActionRow`, which only dims in its `interactive` branch — on a plain
+ * (non-pressable) row its `disabled` prop currently reaches a `View` that
+ * does nothing with it. Making this row `interactive` isn't the answer: the
+ * `Dropdown` is the control, and the row itself has nothing to press.
+ *
+ * @example
+ * <BoxedList>
+ *   <ComboRow
+ *     title="Language"
+ *     subtitle="Used across the whole app"
+ *     value={language}
+ *     onValueChange={setLanguage}
+ *     options={[
+ *       { value: 'en', label: 'English' },
+ *       { value: 'es', label: 'Español' },
+ *     ]}
+ *   />
+ * </BoxedList>
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ComboRow.html
+ */
+export declare const ComboRow: <V extends string = string>({ title, subtitle, leading, options, value: controlledValue, defaultValue, onValueChange, placeholder, accessibilityLabel, disabled, style, testID, }: ComboRowProps<V>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export type { ComboRowOption, ComboRowProps } from './ComboRow';
+export { ComboRow } from './ComboRow';

package/dist/components/EntryRow/EntryRow.d.ts

@@ -0,0 +1,77 @@
+import { ReactNode } from 'react';
+import { TextInput as RNTextInput, StyleProp, TextInputProps, ViewStyle } from 'react-native';
+export interface EntryRowProps extends Omit<TextInputProps, 'style' | 'value' | 'defaultValue' | 'editable' | 'testID'> {
+    /**
+     * Acts as a floating label: shown small above the input once the field has
+     * content or focus, and as the placeholder while it's empty and unfocused.
+     */
+    title: string;
+    /** Controlled value. Omit for an uncontrolled field. */
+    value?: string;
+    /** Initial value when uncontrolled. */
+    defaultValue?: string;
+    /** Called when the input value changes. */
+    onValueChange?: (value: string) => void;
+    /** Icon or widget placed at the leading edge. */
+    leading?: ReactNode;
+    /** Icon or widget placed at the trailing edge (e.g. a clear or reveal button). */
+    trailing?: ReactNode;
+    disabled?: boolean;
+    /**
+     * Applied to the row, not the input — the convention every other component
+     * in this package follows. Reach the field itself with the accessible name
+     * (`getByLabelText(title)`).
+     */
+    testID?: string;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Row with an inline text entry field, mirroring `AdwEntryRow` and
+ * `@gnome-ui/react`'s own `EntryRow`. The `title` rises above the input as a
+ * small label once the field is focused or has content, and stands in for
+ * the placeholder until then. Use inside a `BoxedList` for settings that
+ * take free-form text.
+ *
+ * The float is one JS-driven `Animated.Value` (`useNativeDriver: false`):
+ * `fontSize` is part of the transition and can't be native-driven, and
+ * mixing a native with a JS value on one component throws — the same
+ * trade-off `Expander` and `InlineViewSwitcher` already accepted.
+ * `useReducedMotion()` snaps between the two states instead.
+ *
+ * **The label's travel is measured, not hardcoded.** The web can express its
+ * resting position as `top: 50%; transform: translateY(-50%)` and its
+ * floated one as `top: 6px`, but RN can't interpolate between a percentage
+ * and a fixed offset, so the row reports its own height through `onLayout`
+ * and the distance is derived from it. That also keeps the label centred if
+ * a consumer makes the row taller than the 56 dp minimum.
+ *
+ * The `:focus` inset ring is dropped rather than approximated. `TextField`'s
+ * own precedent — recolor the border on focus — doesn't transfer, because an
+ * `EntryRow` has no border of its own to recolor: it's a row inside a
+ * `BoxedList`, and adding one would shift the list's geometry. On a touch
+ * device the state is already unmistakable anyway: the label floats up, the
+ * text fades in, and the keyboard opens. The `prefers-contrast: more` block
+ * is a variation on that same ring, so it goes with it.
+ *
+ * Tapping anywhere on the row focuses the field, the same affordance the web
+ * version's row-level `onClick` provides.
+ *
+ * The visible label is hidden from assistive tech and the `title` becomes
+ * the input's `accessibilityLabel` instead. On the web the two are bound by
+ * `<label htmlFor>`, which RN has no equivalent for — left as-is, the label
+ * would be announced as loose text next to an unnamed field. `testID` lands
+ * on the row rather than the input (unlike the web version, which spreads
+ * every remaining prop onto the `<input>`), matching what every other
+ * component in this package does; reach the field itself by its accessible
+ * name.
+ *
+ * @example
+ * const [name, setName] = useState('');
+ *
+ * <BoxedList>
+ *   <EntryRow title="Display name" value={name} onValueChange={setName} />
+ * </BoxedList>
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.EntryRow.html
+ */
+export declare const EntryRow: import('react').ForwardRefExoticComponent<EntryRowProps & import('react').RefAttributes<RNTextInput>>;

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

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

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/PasswordEntryRow/PasswordEntryRow.d.ts

@@ -0,0 +1,45 @@
+import { ReactNode } from 'react';
+import { TextInput } from 'react-native';
+import { EntryRowProps } from '../EntryRow';
+export interface PasswordEntryRowProps extends Omit<EntryRowProps, 'secureTextEntry' | 'trailing'> {
+    /** Additional trailing widgets placed before the reveal button. */
+    trailing?: ReactNode;
+}
+/**
+ * Password entry row with a built-in reveal/conceal toggle, mirroring
+ * `AdwPasswordEntryRow` and `@gnome-ui/react`'s own `PasswordEntryRow`. It's
+ * an `EntryRow` that masks its input and always carries a trailing button to
+ * show or hide what's been typed. Use inside a `BoxedList` for password
+ * settings fields — and don't add your own reveal button through `trailing`,
+ * which is for anything that should sit *before* this one.
+ *
+ * `type={revealed ? 'text' : 'password'}` becomes RN's own
+ * `secureTextEntry`, and `autoComplete="current-password"` ports as-is —
+ * RN's `autoComplete` accepts the same value and is what lets password
+ * managers and the platform keyboard offer a saved credential. Pass
+ * `"new-password"` on registration or change-password forms.
+ *
+ * The reveal control is the already-shipped `IconButton` rather than a
+ * hand-rolled pressable, which costs one visual detail: `IconButton` is
+ * circular (it's `Button` at `shape="circular"`), where the web's
+ * `.revealButton` is a 32 dp square with a 6 dp radius. A circular flat icon
+ * button is the idiomatic touch control and keeps this row consistent with
+ * every other icon action in the package, so it's the better trade than
+ * introducing a fifth flat-pressable implementation. The CSS's resting
+ * `opacity: 0.55` is dropped too: it exists so the button can brighten on
+ * hover, and with no hover on a touch device a permanently dimmed control is
+ * just harder to see — the same reasoning that collapses `:hover` everywhere
+ * else here.
+ *
+ * The web needs `e.stopPropagation()` so pressing the button doesn't also
+ * trigger the row's focus-the-input click. RN's responder system routes a
+ * touch to the innermost pressable, so there's nothing to stop.
+ *
+ * @example
+ * <BoxedList>
+ *   <PasswordEntryRow title="Password" value={password} onValueChange={setPassword} />
+ * </BoxedList>
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.PasswordEntryRow.html
+ */
+export declare const PasswordEntryRow: import('react').ForwardRefExoticComponent<PasswordEntryRowProps & import('react').RefAttributes<TextInput>>;

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

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

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 {};

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

@@ -0,0 +1,49 @@
+import { IconDefinition } from '@gnome-ui/icons';
+import { PressableProps, View } from 'react-native';
+export interface ToggleGroupItemProps extends Omit<PressableProps, 'children' | 'style' | 'disabled' | 'onPress'> {
+    /** String identifier — becomes the group's `value` when this item is selected. */
+    name: string;
+    /** Visible label. Omit for icon-only items (pass `accessibilityLabel` instead). */
+    label?: string;
+    /** Icon from `@gnome-ui/icons`. */
+    icon?: IconDefinition;
+    /** Accessible name. Required for icon-only items; defaults to `label`. */
+    accessibilityLabel?: string;
+    disabled?: boolean;
+}
+/**
+ * Individual toggle inside a `ToggleGroup`. Can be icon-only, label-only, or
+ * icon + label — for icon-only items always pass an `accessibilityLabel` so
+ * screen readers can identify the option.
+ *
+ * The active state's three `color-mix(in srgb, accent N%, transparent)`
+ * values resolve to 8-digit `#RRGGBBAA` hexes off `theme.accentBgColor`
+ * (always a plain 6-digit hex), the technique `Chip` already established for
+ * exactly this selected-tint problem — `26` for 15% and `66` for 40% in
+ * light, `40` for 25% and `80` for 50% in dark. The CSS paints its active
+ * ring as an `inset 0 0 0 1px` box-shadow, which RN has no equivalent for;
+ * it becomes a real `borderWidth: 1` that every item carries at all times
+ * (transparent when inactive) so selecting one never shifts the row's
+ * layout — the same substitution `AvatarGroup` made for its own ring.
+ *
+ * `:hover` has no touch counterpart and collapses away; `:active` maps to
+ * `Pressable`'s `pressed` state using `theme.activeOverlay`, whose light
+ * (`rgba(0, 0, 0, 0.12)`) and dark (`rgba(255, 255, 255, 0.14)`) values are
+ * character-for-character the CSS's own `:active` colors — the same
+ * coincidence `ViewSwitcherItem` documented and reused. The
+ * `background-color`/`box-shadow` transition is dropped rather than
+ * rebuilt on `Animated`: `ViewSwitcherItem`, the closest sibling, doesn't
+ * animate its own selection either, so there is no reduced-motion handling
+ * to wire up here.
+ *
+ * The icon keeps the default foreground color instead of tracking the
+ * active accent text: `Icon` has no `currentColor` equivalent, and its
+ * `color` prop is a fixed GNOME palette (`blue`, `green`, …) with no
+ * `accent` member — which couldn't follow the app's configurable accent
+ * anyway. Same call, same reason, as `Chip`.
+ *
+ * `icon` is an `IconDefinition` rather than the `ReactNode` the older
+ * `ViewSwitcherItem` takes; that component predates `Icon` shipping in this
+ * package, while `Chip` and the web version both type it this way.
+ */
+export declare const ToggleGroupItem: import('react').ForwardRefExoticComponent<ToggleGroupItemProps & import('react').RefAttributes<View>>;

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

@@ -0,0 +1,4 @@
+export type { ToggleGroupProps } from './ToggleGroup';
+export { ToggleGroup } from './ToggleGroup';
+export type { ToggleGroupItemProps } from './ToggleGroupItem';
+export { ToggleGroupItem } from './ToggleGroupItem';