@gnome-ui/react-native 1.6.0 → 1.8.0

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

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

@@ -0,0 +1,58 @@
+import { ReactNode } from 'react';
+import { StyleProp, View, ViewStyle } from 'react-native';
+export interface ExpanderRowProps {
+    /** Primary label. */
+    title: string;
+    /** Secondary line below the title. */
+    subtitle?: string;
+    /** Icon or image placed at the leading edge of the header row. */
+    leading?: ReactNode;
+    /**
+     * Widget placed at the trailing edge of the header row, before the
+     * chevron (e.g. a value label or a `Switch`). Stop event propagation
+     * inside it so the row's toggle isn't triggered.
+     */
+    trailing?: ReactNode;
+    /**
+     * Nested rows revealed when expanded. Use `ActionRow`, `ButtonRow`, or
+     * any row-shaped element — separators are inserted automatically.
+     */
+    children?: ReactNode;
+    /** Controlled expanded state. */
+    expanded?: boolean;
+    /** Initial expanded state when uncontrolled. Defaults to `false`. */
+    defaultExpanded?: boolean;
+    /** Called when the expanded state changes. */
+    onExpandedChange?: (expanded: boolean) => void;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * Collapsible `ActionRow` that reveals nested rows on activation, mirroring
+ * `@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 recipe — a
+ * single `Animated.View` with a directly-driven numeric `height` (RN has no
+ * CSS grid to lean on for the web version's `grid-template-rows: 0fr → 1fr`
+ * trick), content staying mounted while collapsed
+ * (`accessibilityElementsHidden`/`importantForAccessibility` standing in
+ * for the web's `inert`), and the "show natural height until first
+ * `onLayout` measurement lands, then hand control to `Animated`" guard for
+ * a `defaultExpanded` initial mount. The only difference from `Expander`
+ * itself: the chevron is `PanDown` (a straight down-arrow, matching the
+ * source CSS's hand-drawn `M4 6l4 4 4-4` path and rotating 0deg → 180deg)
+ * rather than `Expander`'s `PanEnd` triangle rotating 0deg → 90deg — the
+ * same icon/rotation pair `Dropdown`'s own chevron already established.
+ *
+ * Nested children get a `Separator` inserted before each one (including
+ * the first, directly under the header) via `Children.toArray(children)
+ * .filter(Boolean)`, the same falsy-child-filtering `ExpanderRow`'s web
+ * version already does. Unlike `CheckRow`/`ButtonRow`, this component has
+ * no `disabled` prop — the source `@gnome-ui/react` version doesn't expose
+ * one either, so none is added here.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ExpanderRow.html
+ */
+export declare const ExpanderRow: import('react').ForwardRefExoticComponent<ExpanderRowProps & import('react').RefAttributes<View>>;

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

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