@gnome-ui/react-native 1.6.0 → 1.7.0

package/README.md

@@ -24,8 +24,9 @@ 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
+> `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
 > per-tier status against all 130 `@gnome-ui/react` components, and the
@@ -1868,6 +1869,211 @@ 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.
+
 ## 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/ColorPicker/ColorPicker.d.ts

@@ -0,0 +1,81 @@
+import { StyleProp, ViewStyle } from 'react-native';
+import { ColorSwatchSize } from './ColorSwatch';
+export interface ColorPickerColor {
+    /** Color value (hex recommended). */
+    value: string;
+    /** Human-readable name, used as the swatch's accessible label. */
+    label?: string;
+}
+/** Default Adwaita-named palette (matches the `Avatar` color set). */
+export declare const GNOME_PALETTE: ColorPickerColor[];
+export interface ColorPickerProps {
+    /** Currently selected color value. */
+    value?: string;
+    /** Called when the user selects a color. */
+    onChange?: (value: string) => void;
+    /** Palette to display. Defaults to `GNOME_PALETTE` (the 9 Adwaita colors). */
+    colors?: ColorPickerColor[];
+    /**
+     * Show a "+" button after the palette, and render any `value` outside the
+     * palette as its own selected swatch. Pressing either calls
+     * `onRequestCustom` — RN has no `<input type="color">`, so the picker UI
+     * itself is the consuming app's to provide. Defaults to `false`.
+     */
+    allowCustom?: boolean;
+    /**
+     * Called when the "+" button (or the current custom swatch) is pressed.
+     * Open your own color picker here and feed the result back through
+     * `value`/`onChange`.
+     */
+    onRequestCustom?: () => void;
+    /** Swatch size. Defaults to `"md"`. */
+    size?: ColorSwatchSize;
+    /** Accessible name for the group. Defaults to `"Color"`. */
+    accessibilityLabel?: string;
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * Color palette picker following the Adwaita `GtkColorButton` + swatch
+ * pattern, mirroring `@gnome-ui/react`'s own `ColorPicker`. Renders a
+ * wrapping row of circular `ColorSwatch` items backed by a radio group.
+ *
+ * **`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 building an HSV picker would be 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
+ * `onRequestCustom` for the app to answer with whatever picker it has. Round
+ * trips through `value`/`onChange` exactly as before.
+ *
+ * The container is a `WrapBox` (`display: flex; flex-wrap: wrap; gap: 8`
+ * with nothing else in `.picker`), and the "+" button's `border: 1.5px
+ * dashed` ports directly — `borderStyle: 'dashed'` is one of the few CSS
+ * border tricks RN does support. Its plus glyph comes from `@gnome-ui/icons`
+ * rather than the web's hand-drawn path, since `Add` is the same mark and
+ * already resolves to the foreground color `.customButton` asks for.
+ *
+ * As in `ToggleGroup`, the group takes `accessibilityRole="radiogroup"` but
+ * deliberately not `accessible`, which on iOS would collapse the swatches
+ * into one unreachable element. Arrow-key navigation and the roving
+ * `tabIndex` drop, as everywhere else here.
+ *
+ * @example
+ * const [color, setColor] = useState('#3584e4');
+ *
+ * <ColorPicker value={color} onChange={setColor} />
+ *
+ * @example
+ * // Custom colors, with your own picker behind the "+"
+ * <ColorPicker
+ *   value={color}
+ *   onChange={setColor}
+ *   allowCustom
+ *   onRequestCustom={() => setPickerOpen(true)}
+ * />
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ColorButton.html
+ */
+export declare const ColorPicker: ({ value, onChange, colors, allowCustom, onRequestCustom, size, accessibilityLabel, disabled, style, testID, }: ColorPickerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ColorPicker/ColorSwatch.d.ts

@@ -0,0 +1,50 @@
+import { PressableProps, StyleProp, View, ViewStyle } from 'react-native';
+export type ColorSwatchSize = 'sm' | 'md' | 'lg';
+/** `.swatch-sm` / `-md` / `-lg`. */
+export declare const SWATCH_DIAMETER: Record<ColorSwatchSize, number>;
+/**
+ * Width of the selected state's outer ring. Reserved as padding on every
+ * swatch, selected or not, so selecting one never reflows the row — the web
+ * gets this for free because `box-shadow` rings don't take up space.
+ */
+export declare const RING_WIDTH = 2;
+export interface ColorSwatchProps extends Omit<PressableProps, 'children' | 'style' | 'onPress' | 'disabled'> {
+    /** Color value displayed as the swatch background. */
+    color: string;
+    /** Whether this swatch is the currently selected color. */
+    selected?: boolean;
+    /** Swatch diameter. Defaults to `"md"`. */
+    size?: ColorSwatchSize;
+    /** Called with `color` when the swatch is pressed. */
+    onSelect?: (color: string) => void;
+    /** Accessible name. Defaults to the color value. */
+    accessibilityLabel?: string;
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Single circular color swatch. Usable standalone or composed inside
+ * `ColorPicker`, and shows a white checkmark when `selected`.
+ *
+ * The web's three `box-shadow` rings collapse into real box-model pieces,
+ * since RN gives a `View` exactly one border: the resting
+ * `inset 0 0 0 1px` hairline becomes `borderWidth: 1`, the selected state's
+ * `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, because a `box-shadow` ring costs no layout space
+ * on the web while a real padded wrapper does — reserving it unconditionally
+ * is what keeps the row from reflowing as the selection moves.
+ *
+ * The checkmark is hand-drawn with `react-native-svg` rather than taken from
+ * `@gnome-ui/icons`, mirroring the web version, which also hand-draws it:
+ * it's a stroked path, and `Icon`'s palette has no white to give it anyway.
+ * `filter: drop-shadow(...)` has no RN counterpart, so the path is drawn
+ * twice — a translucent black copy offset 1 dp down, then the white one on
+ * top — which is what that filter renders and is why it exists: without it
+ * the check disappears on a yellow swatch.
+ *
+ * `:hover { transform: scale(1.12) }` drops with hover; the selected
+ * `scale(1.05)` ports as-is.
+ */
+export declare const ColorSwatch: import('react').ForwardRefExoticComponent<ColorSwatchProps & import('react').RefAttributes<View>>;

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

@@ -0,0 +1,4 @@
+export type { ColorPickerColor, ColorPickerProps } from './ColorPicker';
+export { ColorPicker, GNOME_PALETTE } from './ColorPicker';
+export type { ColorSwatchProps, ColorSwatchSize } from './ColorSwatch';
+export { ColorSwatch } from './ColorSwatch';

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