@gnome-ui/react-native 1.7.0 → 1.8.0

package/README.md

@@ -26,9 +26,18 @@ React Native component library following the [GNOME Human Interface Guidelines](
 > `Clamp` (Tier 6), `Box` (Tier 20), `WrapBox`/`ToggleGroup` (Tier 7), and
 > `InlineViewSwitcher` (Tier 8), `PreferencesGroup` (Tier 13), and
 > `EntryRow`/`PasswordEntryRow`/`ComboRow` (Tier 12), `ColorPicker`
-> (Tier 20), and `Bin` (Tier 15) also shipped. Component ports from
-> `@gnome-ui/react` continue tier by tier — see this package's own
-> [ROADMAP.md](./ROADMAP.md) for full
+> (Tier 20), `Bin` (Tier 15), `Blockquote` (Tier 20), `ButtonRow`
+> (Tier 8), `Callout` (Tier 20), `CheckRow` (Tier 12), `ExpanderRow`
+> (Tier 8), `FieldGroup` (Tier 20), and `MultiSelectDropdown` (Tier 20)
+> also shipped, along with `FilterableMultiSelectDropdown` — an original
+> `@gnome-ui/react`-only component (not a GNOME HIG port) built once its
+> prerequisite `MultiSelectDropdown` landed — and `PasswordField`/
+> `RangeSlider`/`StatusBadge` (all Tier 20). `BottomTabBar` also shipped —
+> a React Native-only original with no `@gnome-ui/react` source at all
+> (desktop apps don't have a bottom tab bar pattern to mirror), built on
+> explicit request for the iOS/Android fixed bottom-navigation shape.
+> Component ports from `@gnome-ui/react` continue tier by tier — see this
+> package's own [ROADMAP.md](./ROADMAP.md) for full
 > per-tier status against all 130 `@gnome-ui/react` components, and the
 > main [ROADMAP.md](../../ROADMAP.md) Priority 3 for the framework
 > expansion this package belongs to.
@@ -2074,6 +2083,320 @@ already has no default visual styling — no background, no border — so
 unlike the web port there's no CSS reset to strip; this is a pure
 passthrough.
 
+### Blockquote
+
+```tsx
+import { Blockquote } from '@gnome-ui/react-native';
+
+<Blockquote variant="info" cite="Ada Lovelace, 1842">
+  The Analytical Engine has no pretensions to originate anything.
+</Blockquote>
+```
+
+Pull-quote with a colored left border, mirroring `@gnome-ui/react`'s
+`Blockquote`. Five visual variants (`default`/`info`/`warning`/`error`/
+`success`) share the same severity scale as `Banner`/`Chip`, with an
+optional leading `icon` and a `cite` attribution line rendered below the
+quote. The web version's `color-mix(in srgb, <color> 8%/14%, transparent)`
+tinted backgrounds have no RN equivalent — resolved as an 8-digit
+`#RRGGBBAA` alpha suffix on the variant's own hex token instead, the same
+substitution `Chip`'s selected-state tint already established. `<blockquote>`/
+`<footer>`/`<cite>` have no RN element equivalent, so this renders as a
+plain `View` with no semantic role.
+
+### ButtonRow
+
+```tsx
+import { BoxedList, ButtonRow } from '@gnome-ui/react-native';
+
+<BoxedList>
+  <ButtonRow title="Save changes" variant="suggested" onPress={handleSave} />
+  <ButtonRow title="Delete account" variant="destructive" onPress={handleDelete} />
+</BoxedList>
+```
+
+Full-width activatable row styled as a button, for use inside a `BoxedList`
+— mirrors `AdwButtonRow` and `@gnome-ui/react`'s own `ButtonRow`. Use when
+an entire list row should trigger a single action with a centered label;
+prefer `ActionRow` with `interactive` when the row also needs a
+title/subtitle layout. Rebuilt with `Pressable` rather than ported from the
+web `<button>` — the same pressed-state-overlay recipe `ActionRow`/`Card`
+already established (`theme.activeOverlay` stands in for the web's
+`:hover`/`:active` background transition). The title's color reuses `Text`'s
+own `TextColor` union (`"accent"`/`"destructive"` resolve to the exact same
+tokens the source CSS's `suggested`/`destructive` variants reference), and
+gets `flex: 1` + `textAlign: 'center'` — ported straight from the source
+CSS's `.title` — so the label stays centered even when only one of
+`leading`/`trailing` is present. The variant color does not propagate to
+`leading`/`trailing` icons (no `currentColor` equivalent in RN), the same
+dropped nicety `Chip` already accepted for its own icons.
+
+### Callout
+
+```tsx
+import { Callout } from '@gnome-ui/react-native';
+
+<Callout variant="tip" dismissible onDismiss={() => setVisible(false)}>
+  Press and hold a row to reveal more actions.
+</Callout>
+```
+
+Inline, dismissible admonition box for contextual help text within forms
+and cards — mirrors `@gnome-ui/react`'s `Callout`. Unlike `Banner` (a
+persistent, edge-to-edge strip at the top of a view) and `Toast` (a
+temporary notification), `Callout` is a contained, tinted box meant to sit
+inline alongside the content it annotates. Three variants (`info`/
+`warning`/`tip`) each pair a tinted background/border with a leading icon;
+`Icon`'s fixed named palette (`blue`/`yellow`/`green`) stands in for the
+web's arbitrary `color-mix()` icon tint — `blue3`/`green4` happen to match
+`accentBgColor`/`successBgColor` exactly in every theme this package
+ships, so it's not an approximation for `info`/`tip`. `role="note"` ports
+1:1 from RN's web-aligned `Role` union (same as `Dialog`/`Tooltip`).
+
+### CheckRow
+
+```tsx
+import { BoxedList, CheckRow } from '@gnome-ui/react-native';
+
+<BoxedList>
+  <CheckRow
+    title="Wi-Fi"
+    subtitle="Home Network"
+    checked={wifi}
+    onCheckedChange={setWifi}
+  />
+</BoxedList>
+```
+
+Activatable row with an integrated checkbox, for use inside a `BoxedList`
+— mirrors `@gnome-ui/react`'s `CheckRow`. The entire row is a single
+pressable; pressing anywhere toggles the checked state. Use for multi-select
+scenarios; prefer a single `Switch` row for a standalone on/off setting.
+Supports both controlled (`checked`) and uncontrolled (`defaultChecked`)
+modes, the same `isControlled`/internal-state-fallback shape already used
+by `Expander`/`ComboRow`/`Popover`. The checkbox visual reuses `Checkbox`'s
+exact border/background animation and checkmark-fade-in recipe, but as a
+plain non-interactive `View` rather than the real `Checkbox` component —
+nesting one `Pressable` inside another would create two overlapping tap
+targets. `aria-labelledby` has no RN equivalent, so `accessibilityLabel`
+combines the title and subtitle instead.
+
+### ExpanderRow
+
+```tsx
+import { ActionRow, BoxedList, ExpanderRow } from '@gnome-ui/react-native';
+
+<BoxedList>
+  <ExpanderRow title="Advanced" subtitle="Proxy, DNS, and MTU settings">
+    <ActionRow title="Proxy" subtitle="Automatic" />
+    <ActionRow title="DNS" subtitle="Automatic" />
+  </ExpanderRow>
+</BoxedList>
+```
+
+Collapsible `ActionRow` that reveals nested rows on activation — mirrors
+`@gnome-ui/react`'s `ExpanderRow`. The header row toggles a smooth reveal
+animation exposing child rows; supports both controlled (`expanded`) and
+uncontrolled (`defaultExpanded`) modes. The reveal panel reuses the
+standalone `Expander`'s exact `Animated.View` height-driven recipe almost
+verbatim — only the chevron differs, using `PanDown` (rotating 0deg →
+180deg, matching the source CSS's straight down-arrow) instead of
+`Expander`'s own `PanEnd` triangle. Nested children get a real `Separator`
+inserted before each one automatically. Use `trailing` for a value label
+or a `Switch`; stop event propagation inside interactive trailing widgets
+so the row's own toggle isn't triggered. Unlike `CheckRow`/`ButtonRow`,
+there is no `disabled` prop — the source component doesn't expose one.
+
+### FieldGroup
+
+```tsx
+import { FieldGroup, RadioButton } from '@gnome-ui/react-native';
+
+<FieldGroup label="Notification method" helperText="Choose how you want to be notified.">
+  <LabeledRadio label="Email" selected={method === 'email'} onSelect={() => setMethod('email')} />
+  <LabeledRadio label="SMS" selected={method === 'sms'} onSelect={() => setMethod('sms')} />
+</FieldGroup>
+```
+
+Generic form-field grouping with a shared label, help text, and error
+message, for arbitrary fields outside a `BoxedList` — mirrors
+`@gnome-ui/react`'s `FieldGroup`. `PreferencesGroup` is scoped specifically
+to wrapping settings rows inside a `BoxedList`; use `FieldGroup` for a
+plain labeled grouping around any set of related form controls (e.g. a
+`RadioButton` group or several `Checkbox`es sharing one label and error),
+independent of the settings-page layout. `<fieldset>`/`<legend>` have no
+RN element equivalent — this renders as a `View` with `role="group"` and a
+themed `Text` label. The hint/error text reuses `TextField`'s exact
+`error ?? helperText` recipe. Unlike the web version's native
+`<fieldset disabled>`, `disabled` here only dims the group visually — RN
+has no equivalent of a fieldset automatically disabling every descendant
+control, so each child still needs disabling individually.
+
+### MultiSelectDropdown
+
+```tsx
+import { MultiSelectDropdown } from '@gnome-ui/react-native';
+
+<MultiSelectDropdown
+  options={[
+    { value: 'wifi', label: 'Wi-Fi' },
+    { value: 'bluetooth', label: 'Bluetooth' },
+  ]}
+  value={permissions}
+  onChange={setPermissions}
+  placeholder="Select permissions"
+/>
+```
+
+Checkbox-list variant of `Dropdown` for selecting multiple values from a
+single trigger — mirrors `@gnome-ui/react`'s `MultiSelectDropdown`. Use it
+over `Dropdown`/`ComboRow` (single-select only) whenever more than one
+value can be chosen at once. Toggling an option keeps the panel open, so
+the user can pick several in a row; close it via a backdrop tap. Reuses
+`Dropdown`'s `Modal` + backdrop + independently-measured trigger-rect/
+panel-height positioning almost verbatim, and gives each option row a
+leading checkbox-square visual instead of `Dropdown`'s single trailing
+checkmark.
+
+### FilterableMultiSelectDropdown
+
+```tsx
+import { FilterableMultiSelectDropdown } from '@gnome-ui/react-native';
+
+<FilterableMultiSelectDropdown
+  options={languages}
+  value={selected}
+  onChange={setSelected}
+  filterPlaceholder="Search languages…"
+/>
+```
+
+`MultiSelectDropdown` plus a filter field for narrowing long option lists
+— mirrors `@gnome-ui/react`'s `FilterableMultiSelectDropdown`, an original
+component specific to that package (not a GNOME HIG port). Opening the
+panel auto-focuses a filter `TextInput` pinned above the list; typing
+narrows the options to those whose label or description contains the
+query (case-insensitive) — filtering only affects what's shown, values
+selected before a query hides their option stay selected. An empty
+filtered result shows a centered "No results" message. The web version's
+filter-field keyboard navigation (↑/↓ roving highlight, Home/End,
+Enter-to-toggle) has no RN port, the same "no keyboard focus to drive it"
+reasoning `Dropdown` already established — the `TextInput` and its
+software keyboard still work natively, only the roving-highlight layer on
+top is dropped.
+
+### PasswordField
+
+```tsx
+import { PasswordField } from '@gnome-ui/react-native';
+
+<PasswordField
+  label="Password"
+  value={password}
+  onChangeText={setPassword}
+  helperText="At least 8 characters"
+  autoComplete="new-password"
+/>
+```
+
+Single-line password input with a peek toggle to reveal the value as plain
+text — mirrors `@gnome-ui/react`'s `PasswordField`. `TextField` plus the
+exact `secureTextEntry`/`IconButton` reveal recipe `PasswordEntryRow`
+already established, at `size="sm"` (28 dp circular), positioned
+absolutely at the input's trailing edge and vertically centered — the
+input gets extra trailing padding so typed text never runs under the
+button. Use this over `TextField` with a manually-set `secureTextEntry`
+(which has no reveal affordance). Pass `revealable={false}` to hide the
+toggle entirely (e.g. for a PIN field).
+
+### RangeSlider
+
+```tsx
+import { RangeSlider } from '@gnome-ui/react-native';
+
+<RangeSlider
+  value={priceRange}
+  onChange={setPriceRange}
+  minLabel="Minimum price"
+  maxLabel="Maximum price"
+/>
+```
+
+Dual-thumb slider for selecting a min/max range — mirrors
+`@gnome-ui/react`'s `RangeSlider`. Distinct from `Slider` (a single value)
+— use this for range filters (price, date range, age, etc.) where both
+bounds are adjustable. Reuses `Slider`'s exact `PanResponder`/`locationX`
+pixel-positioning technique: a single responder spans the whole track and,
+on touch-down, picks whichever thumb is nearer — that thumb then stays
+locked to the gesture for the rest of the drag, even if the touch drifts
+closer to the other thumb. Touching anywhere on the track immediately
+jumps the nearest thumb there, so there's no separate "drag the track"
+affordance to port. `minDistance` keeps the two thumbs from crossing or
+overlapping. The web's keyboard navigation has no RN port — replaced by
+two independent `accessibilityRole="adjustable"` elements (one per thumb),
+the same VoiceOver/TalkBack increment/decrement analog `Slider` already
+established.
+
+### StatusBadge
+
+```tsx
+import { StatusBadge } from '@gnome-ui/react-native';
+
+<StatusBadge variant="success">published</StatusBadge>
+<StatusBadge variant="warning">beta</StatusBadge>
+<StatusBadge variant="new">new</StatusBadge>
+```
+
+Pill-shaped text label for entity status — published, beta, new, etc. —
+mirrors `@gnome-ui/react`'s `StatusBadge`. Unlike `Badge` (numeric counts,
+optional anchor/dot mode), this is a simpler sibling designed purely for
+short human-readable state labels: no anchor positioning, no dot mode, no
+counter. Six variants (`success`/`warning`/`error`/`new`/`accent`/
+`neutral`) reuse `Badge`'s exact color-mapping shape, plus a `new` (purple)
+variant `Badge` doesn't have.
+
+### BottomTabBar
+
+```tsx
+import { BottomTabBar } from '@gnome-ui/react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+const insets = useSafeAreaInsets();
+
+<BottomTabBar
+  items={[
+    { value: 'home', label: 'Home', icon: HomeOutline, activeIcon: HomeFilled },
+    { value: 'search', label: 'Search', icon: Search },
+    { value: 'profile', label: 'Profile', icon: Person, badge: true },
+  ]}
+  value={tab}
+  onChange={setTab}
+  bottomInset={insets.bottom}
+/>
+```
+
+Fixed bottom navigation bar — the iOS/Android "tab bar" pattern (Music,
+Instagram, most system apps): a small, fixed set of top-level
+destinations, each an icon + label, always visible at the foot of the
+screen. No GNOME/libadwaita widget mirrors this, so it's an original
+component for this package, not a port.
+
+Distinct from the existing `TabBar`/`TabItem` (an in-page, horizontally
+scrollable content switcher) — that one signals "active" purely via a
+background pill + bold weight + accent underline, never by tinting the
+icon/label themselves. A bottom tab bar's whole visual signature is the
+opposite: the active icon+label *are* the app's accent color, so this is
+the first consumer of `Icon`'s new `tintColor` prop (an arbitrary-fill
+override, since `color="blue"` always means a fixed swatch, never
+whatever accent the app actually configured via `GnomeProvider
+accentColor`). Pass `activeIcon` for the filled-vs-outline convention iOS/
+Android system tab bars both use; omit it to reuse `icon` for both states,
+tinted differently. `badge` reuses the real `Badge` component's `anchor`
+mode — `true` for a dot, a number for a count (capped at `"99+"`).
+`bottomInset` lets you thread in your own `useSafeAreaInsets().bottom` —
+this package takes no dependency on `react-native-safe-area-context`
+itself.
+
 ## Installation
 
 ```bash

package/dist/components/Blockquote/Blockquote.d.ts

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+import { StyleProp, ViewProps, ViewStyle } from 'react-native';
+export type BlockquoteVariant = 'default' | 'info' | 'warning' | 'error' | 'success';
+export interface BlockquoteProps extends Omit<ViewProps, 'style'> {
+    /**
+     * Visual emphasis style.
+     * - `"default"` (default) — neutral left border; use for general quotations.
+     * - `"info"`    — accent blue; use for tips and noteworthy passages.
+     * - `"warning"` — yellow; use for cautionary content.
+     * - `"error"`   — red; use for critical or deprecated content.
+     * - `"success"` — green; use for positive or approved content.
+     */
+    variant?: BlockquoteVariant;
+    /** Optional icon rendered to the left of the quoted text, e.g. an `<Icon>`. */
+    icon?: ReactNode;
+    /** Attribution rendered below the quote — author name, source title, etc. */
+    cite?: ReactNode;
+    /** The quoted content. */
+    children: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Styled pull-quote with a colored left border, mirroring `@gnome-ui/react`'s
+ * `Blockquote`. Five visual variants share the same severity scale as
+ * `Banner`/`Chip`.
+ *
+ * `<blockquote>`/`<footer>`/`<cite>` have no RN element equivalent — this
+ * renders as a plain `View` with no semantic role, the same "no landmark
+ * role available" gap `PathBar`'s dropped `<nav>` and `HeaderBar`'s dropped
+ * `<header>` already established; the quoted text and citation are plain
+ * `Text` reads with no assistive-tech grouping to port.
+ *
+ * @example
+ * <Blockquote variant="info" cite="Ada Lovelace, 1842">
+ *   The Analytical Engine has no pretensions to originate anything.
+ * </Blockquote>
+ *
+ * @see https://developer.gnome.org/hig/
+ */
+export declare const Blockquote: ({ variant, icon, cite, children, style, ...viewProps }: BlockquoteProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export type { BlockquoteProps, BlockquoteVariant } from './Blockquote';
+export { Blockquote } from './Blockquote';

package/dist/components/BottomTabBar/BottomTabBar.d.ts

@@ -0,0 +1,106 @@
+import { AnyIconDefinition } from '@gnome-ui/icons';
+import { StyleProp, ViewStyle } from 'react-native';
+export interface BottomTabBarItem<V extends string = string> {
+    /** The value reported to `onChange` when this tab is pressed. */
+    value: V;
+    /** Label shown below the icon. */
+    label: string;
+    /** Icon shown while this tab is not the selected one. */
+    icon: AnyIconDefinition;
+    /**
+     * Icon shown while this tab *is* selected — the filled-vs-outline
+     * convention iOS/Android system tab bars both use (e.g. a hollow heart
+     * outline that becomes solid when active). Optional: omit to reuse
+     * `icon` for both states, tinted differently.
+     */
+    activeIcon?: AnyIconDefinition;
+    /**
+     * Notification indicator. `true` renders a small dot (unread/pending,
+     * no count); a `number` renders a counted badge (values above 99 render
+     * as `"99+"`, matching `TabItem`'s own count-badge convention).
+     */
+    badge?: number | boolean;
+    /** Disables this one tab. */
+    disabled?: boolean;
+}
+export interface BottomTabBarProps<V extends string = string> {
+    /** The tabs to render, in order. */
+    items: BottomTabBarItem<V>[];
+    /** The currently selected tab's value. */
+    value: V;
+    /** Called when the user presses a tab. */
+    onChange: (value: V) => void;
+    /**
+     * Extra bottom padding, in addition to the bar's own vertical padding —
+     * pass your own `useSafeAreaInsets().bottom` here so the bar clears the
+     * home indicator / gesture area on notched devices. This package takes
+     * no dependency on `react-native-safe-area-context` itself (the same
+     * "no new peer dependency without a deliberate decision" standard
+     * `AnimatedIcon`'s `react-native-svg` addition was held to) — the
+     * consumer's own app almost certainly already has it for its root
+     * layout, so threading the value in here is cheaper than this package
+     * depending on it too. Defaults to `0`.
+     */
+    bottomInset?: number;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * Fixed bottom navigation bar — the iOS/Android "tab bar" pattern (Music,
+ * Instagram, most system apps): a small, fixed set of top-level
+ * destinations, each an icon + label, always visible at the foot of the
+ * screen. No GNOME/libadwaita widget mirrors this (desktop apps don't use
+ * bottom navigation), so this is an original component for this package,
+ * not a port — built to fill a real gap once mobile "modern app shell"
+ * navigation was requested.
+ *
+ * Distinct from the existing `TabBar`/`TabItem` (an in-page, horizontally
+ * scrollable content switcher mirroring `@gnome-ui/react`'s `Tabs`) — that
+ * one reuses `headerbarFgColor` for every tab's label regardless of
+ * selection state, signaling "active" purely via a background pill +
+ * bold weight + accent underline, never by tinting the icon/label
+ * themselves. A bottom tab bar's whole visual signature is the opposite:
+ * the active icon+label *are* the app's accent color. `Icon`'s `color`
+ * prop can't express that on its own — it only resolves to a fixed
+ * named-palette swatch (`color="blue"` always means `theme.blue3`, never
+ * whatever accent the app actually configured via `GnomeProvider
+ * accentColor`) — so this is the first consumer of `Icon`'s new
+ * `tintColor` prop, passing `theme.accentColor` directly for the selected
+ * tab and leaving it unset (dimmed default) for the rest.
+ *
+ * The optional notification indicator reuses the real `Badge` component
+ * for the dot/pill itself, but positions it manually rather than through
+ * `Badge`'s own `anchor` mode — `anchor` wraps `[anchor, badge]` in a
+ * `View` with a hardcoded `alignSelf: 'flex-start'`, which is fine for
+ * `Badge`'s usual context (a row where the anchor is meant to hug the
+ * start) but silently broke centering here: a bare icon (no badge) is a
+ * direct child of this component's centered column, while a badged icon's
+ * extra `anchor`-mode wrapper overrode that centering and pinned itself to
+ * the left edge — the two looked visibly misaligned side by side. Every
+ * tab now gets the identical `position: 'relative'` wrapper shape
+ * regardless of whether it has a badge, so centering behaves identically
+ * across all of them; the badge itself is a plain (non-`anchor`) `Badge`,
+ * absolutely positioned and re-sized for this icon's actual scale (`size="lg"`
+ * is only 20px — `Badge`'s own default dot/offset sizing assumes a much
+ * larger anchor like an avatar or `IconButton`, and would otherwise nearly
+ * cover the icon rather than sit as a small corner accent). Press feedback
+ * is the same `pressed ? theme.activeOverlay : 'transparent'` recipe every
+ * other `Pressable` in this package already uses.
+ *
+ * `bottomInset` stands in for real safe-area awareness without this
+ * package taking on `react-native-safe-area-context` as a dependency —
+ * see its own doc comment.
+ *
+ * @example
+ * <BottomTabBar
+ *   items={[
+ *     { value: 'home', label: 'Home', icon: HomeOutline, activeIcon: HomeFilled },
+ *     { value: 'search', label: 'Search', icon: Search },
+ *     { value: 'profile', label: 'Profile', icon: Person, badge: true },
+ *   ]}
+ *   value={tab}
+ *   onChange={setTab}
+ *   bottomInset={insets.bottom}
+ * />
+ */
+export declare const BottomTabBar: <V extends string = string>({ items, value, onChange, bottomInset, style, testID, }: BottomTabBarProps<V>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export type { BottomTabBarItem, BottomTabBarProps } from './BottomTabBar';
+export { BottomTabBar } from './BottomTabBar';

package/dist/components/ButtonRow/ButtonRow.d.ts

@@ -0,0 +1,41 @@
+import { ReactNode } from 'react';
+import { PressableProps, StyleProp, View, ViewStyle } from 'react-native';
+export type ButtonRowVariant = 'default' | 'suggested' | 'destructive';
+export interface ButtonRowProps extends Omit<PressableProps, 'children' | 'style'> {
+    /** Label displayed centered in the row. */
+    title: string;
+    /** Visual style that colours the title text. */
+    variant?: ButtonRowVariant;
+    /** Icon placed at the leading edge. Rendered as-is — size/color it yourself. */
+    leading?: ReactNode;
+    /** Icon placed at the trailing edge. Rendered as-is — size/color it yourself. */
+    trailing?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Full-width activatable row styled as a button, for use inside a
+ * `BoxedList`. Mirrors `AdwButtonRow` and `@gnome-ui/react`'s own
+ * `ButtonRow` — use when an entire list row should trigger a single action
+ * with a centered label; prefer `ActionRow` with `interactive` when the row
+ * also needs a title/subtitle layout.
+ *
+ * Rebuilt with `Pressable` rather than ported from the web `<button>` —
+ * same pressed-state-overlay recipe `ActionRow`/`Card` already established
+ * (`theme.activeOverlay` stands in for the web's `:hover`/`:active`
+ * `background-color` transition, since RN has no hover state). The title's
+ * color reuses `Text`'s own `TextColor` union (`"accent"`/`"destructive"`
+ * already resolve to the exact same `theme.accentColor`/`destructiveColor`
+ * tokens the source CSS's `suggested`/`destructive` variants reference) —
+ * no separate color-resolution logic needed. Unlike the web version, the
+ * variant color does *not* propagate to `leading`/`trailing` — RN's `Icon`
+ * has no `currentColor` equivalent and only accepts a fixed named-swatch
+ * palette, the same dropped nicety `Chip` already accepted for its own
+ * leading/remove icons. The title gets `flex: 1` + `textAlign: 'center'`
+ * (the source CSS's own `.title { flex: 1; text-align: center }`) rather
+ * than centering the row via `justifyContent` — that keeps the label
+ * centered in the row's full width even when only one of `leading`/
+ * `trailing` is present, matching the web behavior exactly.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ButtonRow.html
+ */
+export declare const ButtonRow: import('react').ForwardRefExoticComponent<ButtonRowProps & import('react').RefAttributes<View>>;

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

@@ -0,0 +1,2 @@
+export type { ButtonRowProps, ButtonRowVariant } from './ButtonRow';
+export { ButtonRow } from './ButtonRow';

package/dist/components/Callout/Callout.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+import { StyleProp, ViewProps, ViewStyle } from 'react-native';
+export type CalloutVariant = 'info' | 'warning' | 'tip';
+export interface CalloutProps extends Omit<ViewProps, 'style'> {
+    /**
+     * Visual emphasis level.
+     * - `info` (default) — neutral, accent-colored. General contextual notes.
+     * - `warning` — yellow. Recoverable problems or things to double-check.
+     * - `tip` — green. Optional suggestions or shortcuts.
+     */
+    variant?: CalloutVariant;
+    /** The message content. */
+    children: ReactNode;
+    /** When true a dismiss (×) button is shown at the trailing edge. */
+    dismissible?: boolean;
+    /** Called when the user presses the dismiss button. */
+    onDismiss?: () => void;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Inline, dismissible admonition box for contextual help text within forms
+ * and cards. Mirrors `@gnome-ui/react`'s `Callout`.
+ *
+ * Unlike `Banner` (a persistent, edge-to-edge strip at the top of a view)
+ * and `Toast` (a temporary notification), `Callout` is a contained, tinted
+ * box meant to sit inline alongside the content it annotates.
+ *
+ * `role="note"` ports 1:1 from RN's newer web-aligned `Role` union (the
+ * same one `Dialog`/`Tooltip` already use) — `accessible` is set alongside
+ * it, per the `BoxedList` lesson that a bare `View` isn't an accessibility
+ * element by default. The leading icon is decorative, hidden from
+ * assistive tech the same way `Blockquote`'s own icon is.
+ *
+ * @see https://developer.gnome.org/hig/patterns/feedback/
+ */
+export declare const Callout: ({ variant, children, dismissible, onDismiss, style, ...viewProps }: CalloutProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export type { CalloutProps, CalloutVariant } from './Callout';
+export { Callout } from './Callout';

package/dist/components/CheckRow/CheckRow.d.ts

@@ -0,0 +1,47 @@
+import { ReactNode } from 'react';
+import { PressableProps, StyleProp, View, ViewStyle } from 'react-native';
+export interface CheckRowProps extends Omit<PressableProps, 'children' | 'style' | 'onPress'> {
+    /** Primary label. */
+    title: string;
+    /** Secondary line below the title. */
+    subtitle?: string;
+    /** Icon or image placed at the leading edge, after the checkbox. */
+    leading?: ReactNode;
+    /** Controlled checked state. */
+    checked?: boolean;
+    /** Initial checked state when uncontrolled. Defaults to `false`. */
+    defaultChecked?: boolean;
+    /** Called with the next value when the row is pressed. */
+    onCheckedChange?: (checked: boolean) => void;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Activatable row with an integrated checkbox, mirroring
+ * `@gnome-ui/react`'s `CheckRow`. The entire row is a single pressable —
+ * pressing anywhere toggles the checked state. Use inside a `BoxedList`
+ * when a user must select or deselect individual items in a list; prefer a
+ * `SwitchRow` (once ported) for a single on/off setting.
+ *
+ * Supports both controlled (`checked`) and uncontrolled (`defaultChecked`)
+ * modes, the same `isControlled`/internal-state-fallback shape already
+ * established by `Expander`/`ComboRow`/`Popover`.
+ *
+ * The checkbox visual reuses `Checkbox`'s exact border/background
+ * `Animated.Value` interpolation and checkmark-fade-in recipe — but as a
+ * plain, non-interactive `View` rather than importing the real `Checkbox`
+ * component, since `Checkbox` is itself a `Pressable` and nesting one
+ * touchable inside another (the row's own `Pressable`) would create two
+ * overlapping tap targets. `aria-labelledby` (pointing the web button's
+ * `role="checkbox"` at the title/subtitle content) has no RN equivalent —
+ * `accessibilityLabel` combining title and subtitle is the substitution,
+ * the same "no relationship attribute" gap `Tooltip`'s dropped
+ * `aria-describedby` already established. The title reads `theme.cardFgColor`
+ * directly (not `Text`'s own `"default"`, which resolves to
+ * `windowFgColor`) to match the source CSS's `--gnome-card-fg-color`
+ * ambient row color exactly — the two tokens happen to share the same
+ * value in every theme this package ships, but the source CSS's intent is
+ * specifically "card foreground," so the port keeps that distinction.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.CheckButton.html
+ */
+export declare const CheckRow: import('react').ForwardRefExoticComponent<CheckRowProps & import('react').RefAttributes<View>>;

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

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