@gnome-ui/react-native 1.6.0 → 1.8.0

package/README.md

@@ -24,10 +24,20 @@ React Native component library following the [GNOME Human Interface Guidelines](
 > `SegmentedBar`/`AvatarGroup`/`AvatarRotator`/`CoachMark`/`CoachMarkTour`
 > (Tier 20), `Chip` (Tier 7), `IconButton`/`Drawer` (Tier 8/Tier 20), and
 > `Clamp` (Tier 6), `Box` (Tier 20), `WrapBox`/`ToggleGroup` (Tier 7), and
-> `InlineViewSwitcher` (Tier 8), and `PreferencesGroup` (Tier 13) also
-> shipped. Component ports from
-> `@gnome-ui/react` continue tier by tier — see this package's own
-> [ROADMAP.md](./ROADMAP.md) for full
+> `InlineViewSwitcher` (Tier 8), `PreferencesGroup` (Tier 13), and
+> `EntryRow`/`PasswordEntryRow`/`ComboRow` (Tier 12), `ColorPicker`
+> (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.
@@ -1868,6 +1878,525 @@ 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 Yoga doesn't apply
 in the first place.
 
+### EntryRow
+
+```tsx
+import { EntryRow } from '@gnome-ui/react-native';
+
+const [name, setName] = useState('');
+
+<BoxedList>
+  <EntryRow title="Display name" value={name} onValueChange={setName} />
+  <EntryRow
+    title="Email"
+    value={email}
+    onValueChange={setEmail}
+    keyboardType="email-address"
+    leading={<Icon icon={MailRead} />}
+    trailing={<IconButton icon={Delete} label="Clear" onPress={() => setEmail('')} />}
+  />
+</BoxedList>
+```
+
+Row with an inline text entry field — mirrors `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 it inside a `BoxedList` for settings that take
+free-form text. Controlled (`value`) and uncontrolled (`defaultValue`) modes
+both work, and every remaining `TextInput` prop passes through.
+
+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 expresses the
+resting position as `top: 50%; transform: translateY(-50%)` and the floated
+one as `top: 6px`, but RN can't interpolate between a percentage and a fixed
+offset — so the field reports its own height through `onLayout` and the
+distance is derived from it, which also keeps the label centred if you make
+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: 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: the label floats up, the text fades in, and the
+keyboard opens.
+
+Two deliberate divergences from the web version. The visible label is hidden
+from assistive tech and the `title` becomes the input's `accessibilityLabel`
+— RN has no `<label htmlFor>`, so otherwise the label would be announced as
+loose text next to an unnamed field (pass `accessibilityLabel` to override).
+And `testID` lands on the row rather than the input, matching every other
+component in this package; reach the field itself by its accessible name.
+
+### PasswordEntryRow
+
+```tsx
+import { PasswordEntryRow } from '@gnome-ui/react-native';
+
+<BoxedList>
+  <PasswordEntryRow title="Password" value={password} onValueChange={setPassword} />
+
+  {/* Registration and change-password forms */}
+  <PasswordEntryRow
+    title="New password"
+    value={next}
+    onValueChange={setNext}
+    autoComplete="new-password"
+  />
+</BoxedList>
+```
+
+Password entry row with a built-in reveal/conceal toggle — mirrors
+`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, so don't add your own through `trailing` — that
+slot is for anything that should sit *before* the reveal button.
+
+`type={revealed ? 'text' : 'password'}` becomes RN's `secureTextEntry`, and
+`autoComplete` defaults to `"current-password"`, which is what lets password
+managers and the platform keyboard offer a saved credential.
+
+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 the row consistent with every
+other icon action here. 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 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.
+
+### ComboRow
+
+```tsx
+import { ComboRow } from '@gnome-ui/react-native';
+
+<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>
+```
+
+Settings row with an inline combo selector at the trailing edge — mirrors
+`AdwComboRow` and `@gnome-ui/react`'s own `ComboRow`. Use it inside a
+`BoxedList` for a setting that picks one of a set of options. Controlled
+(`value`) and uncontrolled (`defaultValue`) modes both work; the trigger
+falls back to `"—"` when nothing is selected.
+
+**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 and
+`.trigger` is `Dropdown`'s exact trigger. Composing the two already-shipped
+components means the flip-to-fit placement, the tap-outside dismissal and the
+`Modal`-based list all come along for free rather than being rebuilt.
+
+`Dropdown` is controlled-only, so the uncontrolled state lives in `ComboRow`
+— same behaviour as the web version, one level up. The keyboard layer drops
+as it does everywhere else here.
+
+### ColorPicker / ColorSwatch
+
+```tsx
+import { ColorPicker, ColorSwatch, GNOME_PALETTE } from '@gnome-ui/react-native';
+
+const [color, setColor] = useState('#3584e4');
+
+<ColorPicker value={color} onChange={setColor} />
+
+// Custom colors, with your own picker behind the "+"
+<ColorPicker
+  value={color}
+  onChange={setColor}
+  allowCustom
+  onRequestCustom={() => setPickerOpen(true)}
+/>
+```
+
+Color palette picker following the Adwaita `GtkColorButton` + swatch pattern
+— mirrors `@gnome-ui/react`'s own `ColorPicker`. Renders a wrapping row of
+circular `ColorSwatch` items backed by a radio group, defaulting to
+`GNOME_PALETTE` (the 9 Adwaita named colors, the same set `Avatar` uses).
+`ColorSwatch` is exported for standalone use; sizes are **22 / 30 / 38 dp**.
+
+**`allowCustom` is the one prop that changes meaning.** On the web it wires a
+hidden `<input type="color">` and the browser supplies the whole picker UI;
+RN has no such control, and an HSV picker is a component in its own right
+rather than a detail of this one. So the prop keeps its *visible* behaviour —
+the "+" button, and a `value` outside the palette shown as its own selected
+swatch — while the press is handed to a new **`onRequestCustom`** callback
+for your app to answer with whatever picker it has. The result round-trips
+through `value`/`onChange` exactly as before.
+
+The web's three `box-shadow` rings collapse into real box-model pieces, since
+RN gives a `View` one border: the resting `inset 0 0 0 1px` hairline becomes
+`borderWidth: 1`, the selected `inset 0 0 0 2px rgb(255 255 255 / .9)`
+becomes a 2 dp white border, and the outer `0 0 0 2px var(--swatch-color)`
+becomes a wrapper painted in the swatch color. That wrapper is **always**
+rendered with the same 2 dp padding and only changes color: a box-shadow ring
+costs no layout space on the web while a real padded wrapper does, so
+reserving it unconditionally is what keeps the row from reflowing as the
+selection moves.
+
+`filter: drop-shadow(...)` on the checkmark has no RN counterpart, so the
+path is drawn twice — a translucent black copy offset 1 dp down, then the
+white one on top. That's what the filter renders, and it's why it exists:
+without it the check disappears on the yellow swatch. The checkmark is
+hand-drawn with `react-native-svg` rather than taken from `@gnome-ui/icons`,
+mirroring the web version, which hand-draws it too — it's a stroked path, and
+`Icon`'s palette has no white to give it. The container is a `WrapBox`, and
+the "+" button's `border: 1.5px dashed` ports directly.
+
+### Bin
+
+```tsx
+import { Bin } from '@gnome-ui/react-native';
+
+<Bin style={{ maxWidth: 480 }}>
+  <ExpensiveChart data={series} />
+</Bin>
+```
+
+Single-child container with no visual styling — mirrors `AdwBin` and
+`@gnome-ui/react`'s own `Bin`. A transparent passthrough `View` forwarding
+every prop (and a ref to the underlying `View`) straight through, useful as
+a neutral base for custom components that need to apply layout or size
+constraints without introducing any chrome of their own. A plain RN `View`
+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/Bin/Bin.d.ts

@@ -0,0 +1,18 @@
+import { View, ViewProps } from 'react-native';
+export type BinProps = ViewProps;
+/**
+ * Single-child container with no visual styling.
+ *
+ * A transparent wrapper that forwards all `View` props (and a ref to the
+ * underlying `View`) straight through — useful as a neutral base for custom
+ * components that need to apply layout or size constraints without
+ * introducing any chrome of their own.
+ *
+ * Mirrors `AdwBin` and `@gnome-ui/react`'s own `Bin`. A plain RN `View`
+ * 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.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Bin.html
+ */
+export declare const Bin: import('react').ForwardRefExoticComponent<ViewProps & import('react').RefAttributes<View>>;

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

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

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';