@gnome-ui/react-native 1.7.0 → 1.9.0

package/README.md

@@ -26,9 +26,24 @@ 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.
+> `useBreakpoint` and `BreakpointBin` (both Tier 6) also shipped — the
+> package's first adaptive-layout primitives, built on `useWindowDimensions`
+> and `onLayout` respectively since there's no CSS media query/container
+> query to lean on. `ButtonContent` (Tier 15) also shipped — an icon+label
+> layout helper mostly redundant with `Button`'s own `leadingIcon`/
+> `trailingIcon`, kept for composing the same spacing outside `Button`
+> itself. 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.
@@ -488,6 +503,10 @@ button is the RN-idiomatic stand-in. The clear (×) button appears whenever
 glyphs (`🔍`/`×`) rather than `@gnome-ui/icons`, matching every other
 no-SVG-dependency component in this package.
 
+`inline` drops the header-bar background/border so the bar blends into any
+surface — a card, a plain content area, a custom container — instead of
+looking like it belongs to a `HeaderBar`.
+
 Dropped relative to `@gnome-ui/react`'s `SearchBar`: the `suggestions` /
 `onSuggestionSelect` / `loadingSuggestions` / `renderSuggestion` /
 `suggestionsLabel` autocomplete popover — it depends on a portal +
@@ -2074,6 +2093,407 @@ 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.
+
+### ButtonContent
+
+```tsx
+import { ButtonContent, Icon } from '@gnome-ui/react-native';
+import { Save } from '@gnome-ui/icons';
+
+<Pressable onPress={save}>
+  <ButtonContent icon={<Icon icon={Save} size="sm" />} label="Save" color="accent" />
+</Pressable>;
+```
+
+Icon + label layout helper mirroring `AdwButtonContent` — the same 6 dp
+gap, vertically-centered row every button in this package already
+produces internally via `leadingIcon`/`trailingIcon`. **Mostly redundant
+with `Button`'s own `leadingIcon`/`trailingIcon` props** for anything that
+actually is a `Button` — those already lay the icon and a themed,
+variant-colored label out identically, with no separate color prop
+needed. Reach for `ButtonContent` when composing icon+label content for
+something that *isn't* this package's `Button` instead: a bespoke
+`Pressable`, a custom card action, anywhere the same Adwaita spacing
+convention is wanted outside `Button` itself.
+
+Unlike the web version, there's no `currentColor` to inherit the
+surrounding button's text color from, so a `color` prop (the same
+`TextColor` union `Text`/`ButtonRow` already use) needs to be passed
+explicitly to match — e.g. `color="accent"` beside a `suggested`-style
+action, `color="destructive"` beside a destructive one. The icon slot is
+marked `accessibilityElementsHidden`/`importantForAccessibility="no-hide-
+descendants"`, the RN equivalent of the web version's `aria-hidden="true"`
+on its icon `<span>`.
+
+### 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.
+
+### useBreakpoint
+
+```tsx
+import { useBreakpoint } from '@gnome-ui/react-native';
+
+const { isNarrow, isMedium, width } = useBreakpoint();
+
+return isNarrow ? <CompactLayout /> : <RegularLayout />;
+```
+
+Tracks the window width against the same GNOME/libadwaita canonical
+breakpoints as `@gnome-ui/react`'s hook of the same name — `narrow` (≤ 400
+dp, split views collapse), `medium` (≤ 550 dp, `ViewSwitcher` moves to a
+bottom bar), `wide` (≤ 860 dp, outer pane of a nested split view
+collapses). Built on `useWindowDimensions` rather than `Dimensions.get` +
+a manual listener, since it already re-renders subscribers on every
+rotation/resize — there's no CSS media query to lean on here, unlike the
+web version's `window.innerWidth` + `resize` listener.
+
+Also exports `bucketForWidth`/`resolveResponsive`/`ResponsiveValue` — the
+same small pure-function toolkit the web hook exports, for picking a
+value that varies by breakpoint (`{ base: 3, wide: 2, narrow: 1 }`-shaped
+maps). These aren't wired into any component's props yet; they're
+exported now so a future adaptive component (`Sidebar`'s `mode` prop,
+`NavigationSplitView`, …) doesn't have to redefine the bucket-fallback
+logic from scratch.
+
+### BreakpointBin
+
+```tsx
+import { BreakpointBin } from '@gnome-ui/react-native';
+
+<BreakpointBin breakpoints={[{ name: 'compact', maxWidth: 400 }]}>
+  {({ activeBreakpoint }) =>
+    activeBreakpoint === 'compact' ? <CompactCard /> : <WideCard />
+  }
+</BreakpointBin>;
+```
+
+The per-*component* (container-query) sibling of `useBreakpoint` — reacts
+to **its own width**, not the window, so the same component can render
+differently depending on how much space its parent gives it, regardless
+of device size. Two `BreakpointBin`s with identical `breakpoints` can be
+in different states side by side.
+
+`@gnome-ui/react`'s version watches itself with `ResizeObserver`; RN has
+no such API, so this measures via `onLayout` instead — fired on mount and
+again on every subsequent resize of the wrapping `View` (a parent's flex
+layout reflowing, a device rotation, an ancestor `BreakpointBin` flipping
+column↔row). The active breakpoint is the smallest `maxWidth` ≥ the
+current width, declaration order doesn't matter (sorted internally), and
+`activeBreakpoint` is `null` when the container is wider than every
+threshold. Unlike the web version there's no `data-breakpoint` attribute
+to expose for CSS targeting (RN has no attribute selectors) — branch on
+`activeBreakpoint` directly inside the render prop instead.
+
 ## 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/BreakpointBin/BreakpointBin.d.ts

@@ -0,0 +1,65 @@
+import { ReactNode } from 'react';
+import { StyleProp, ViewProps, ViewStyle } from 'react-native';
+export interface BreakpointDefinition {
+    /** Identifier for this breakpoint, e.g. `"compact"` or `"narrow"`. */
+    name: string;
+    /**
+     * Container width threshold in dp.
+     * This breakpoint becomes active when the container width is ≤ this value.
+     */
+    maxWidth: number;
+}
+export interface BreakpointBinState {
+    /**
+     * Name of the currently active breakpoint, or `null` when the container
+     * is wider than all defined breakpoints.
+     */
+    activeBreakpoint: string | null;
+    /** Current container width in dp (from `onLayout`). */
+    width: number;
+}
+export interface BreakpointBinProps extends Omit<ViewProps, 'children' | 'style'> {
+    /**
+     * Breakpoint definitions. The active breakpoint is the smallest
+     * `maxWidth` ≥ the container's current width — declaration order doesn't
+     * matter, they're sorted internally.
+     */
+    breakpoints: BreakpointDefinition[];
+    /**
+     * Render prop that receives the current breakpoint state.
+     *
+     * @example
+     * ```tsx
+     * <BreakpointBin breakpoints={[{ name: "compact", maxWidth: 400 }]}>
+     *   {({ activeBreakpoint }) =>
+     *     activeBreakpoint === "compact" ? <CompactLayout /> : <WideLayout />
+     *   }
+     * </BreakpointBin>
+     * ```
+     */
+    children: (state: BreakpointBinState) => ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Container that fires layout changes when **its own width** crosses
+ * defined thresholds — the CSS container-query equivalent of
+ * `AdwBreakpointBin` (libadwaita 1.9 / GNOME 50), and the per-*component*
+ * sibling of `useBreakpoint` (which watches the window instead).
+ *
+ * `@gnome-ui/react`'s version watches its own width via `ResizeObserver`;
+ * RN has no such API, so this measures the same thing via `onLayout` —
+ * fired on mount and again on every subsequent resize of the `View` itself
+ * (e.g. the parent's flex layout reflowing, or a device rotation changing
+ * how much space this container is given). Composable the same way: the
+ * same component can render differently depending on how much space its
+ * parent gives it, regardless of the window size — two `BreakpointBin`s
+ * side by side with identical `breakpoints` can be in different states.
+ *
+ * Unlike the web version, there's no `data-breakpoint` attribute to expose
+ * for CSS targeting (RN has no attribute selectors) — branch on
+ * `activeBreakpoint` directly inside the render prop instead, exactly like
+ * every story below already does.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.BreakpointBin.html
+ */
+export declare const BreakpointBin: ({ breakpoints, children, style, onLayout, ...viewProps }: BreakpointBinProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export type { BreakpointBinProps, BreakpointBinState, BreakpointDefinition, } from './BreakpointBin';
+export { BreakpointBin } from './BreakpointBin';