@gnome-ui/react-native 1.8.0 → 1.10.0

package/README.md

@@ -25,19 +25,30 @@ React Native component library following the [GNOME Human Interface Guidelines](
 > (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), `PreferencesGroup` (Tier 13), and
-> `EntryRow`/`PasswordEntryRow`/`ComboRow` (Tier 12), `ColorPicker`
+> `EntryRow`/`PasswordEntryRow`/`ComboRow`/`SpinRow` (Tier 12), `SplitButton`
+> (Tier 8), `ColorPicker`
 > (Tier 20), `Bin` (Tier 15), `Blockquote` (Tier 20), `ButtonRow`
 > (Tier 8), `Callout` (Tier 20), `CheckRow` (Tier 12), `ExpanderRow`
 > (Tier 8), `FieldGroup` (Tier 20), and `MultiSelectDropdown` (Tier 20)
 > also shipped, along with `FilterableMultiSelectDropdown` — an original
 > `@gnome-ui/react`-only component (not a GNOME HIG port) built once its
 > prerequisite `MultiSelectDropdown` landed — and `PasswordField`/
-> `RangeSlider`/`StatusBadge` (all Tier 20). `BottomTabBar` also shipped —
+> `RangeSlider`/`StatusBadge`/`WidgetManager` (all Tier 20) — `WidgetManager`
+> was previously deferred as low-priority, built once named directly since
+> every piece it composes had already shipped. `BottomTabBar` also shipped —
 > a React Native-only original with no `@gnome-ui/react` source at all
 > (desktop apps don't have a bottom tab bar pattern to mirror), built on
 > explicit request for the iOS/Android fixed bottom-navigation shape.
-> Component ports from `@gnome-ui/react` continue tier by tier — see this
-> package's own [ROADMAP.md](./ROADMAP.md) for full
+> `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. `TagInput` (Tier 20) also shipped — a `WrapBox` + `Chip`
+> composition, unblocked once both had 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
 > main [ROADMAP.md](../../ROADMAP.md) Priority 3 for the framework
 > expansion this package belongs to.
@@ -176,6 +187,42 @@ yourself, matching the resolved label color (`theme.accentFgColor`,
 `theme.destructiveFgColor`, `theme.windowFgColor`, …) if you want them to
 match.
 
+### SplitButton
+
+```tsx
+import { SplitButton, Button } from '@gnome-ui/react-native';
+
+<SplitButton
+  label="Save"
+  onPress={() => save()}
+  dropdownContent={
+    <Button variant="flat" size="sm" onPress={() => saveAs()}>
+      Save as Template
+    </Button>
+  }
+/>;
+```
+
+Primary action button with an attached dropdown arrow, mirroring
+`AdwSplitButton` and `@gnome-ui/react`'s own `SplitButton`. Pressing the
+label half fires `onPress`; pressing the arrow half opens a floating panel
+with `dropdownContent` (menus, options, etc.). Supports the same
+`default`/`suggested`/`destructive` variants as `Button`.
+
+The label half is a real `Button` — its resting/pressed/disabled colors
+come for free. The arrow half is a hand-rolled `Pressable`, not a second
+`Button`: `Popover` (which supplies the floating panel) clones a prop-level
+`accessibilityState` onto its trigger, and RN merges a spread prop object
+outright rather than key-by-key — nesting a full `Button` there would
+silently clobber `Button`'s own internal `accessibilityState={{ disabled
+}}`. The hand-rolled `Pressable` owns `accessibilityState={{ disabled }}`
+itself instead, letting `Popover`'s clone merge in `expanded` alongside it.
+Its resting colors are derived from a small local color formula mirroring
+`Button`'s own (unexported) one, so the two halves render pixel-identical
+colors; they read as one connected control via zeroed shared inner corner
+radii plus a 1px separator, the RN equivalent of the web CSS's split
+`border-radius` and `.separator` span.
+
 ### Text
 
 ```tsx
@@ -497,6 +544,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 +
@@ -1675,6 +1726,41 @@ zero height before `alignItems` gets to stretch anything into it. Caught
 on-device; it's a no-op in the ordinary case where the container hugs its
 content rather than having a fixed height.
 
+### TagInput
+
+```tsx
+import { TagInput } from '@gnome-ui/react-native';
+
+const [tags, setTags] = useState(['react', 'gnome']);
+
+<TagInput label="Tags" value={tags} onChange={setTags} placeholder="Add a tag…" />;
+```
+
+Type-to-add multi-value input rendering entries as removable `Chip`s in a
+`WrapBox`, mirroring `@gnome-ui/react`'s own `TagInput`. Type and press
+Return, or type a `,`, to commit the draft as a tag; paste a comma or
+newline-separated list to add several at once; Backspace with an empty
+draft removes the last tag; tap a chip's `×` to remove that one.
+
+The web version wires typed-`,` and pasted-list handling as two separate
+handlers (`onKeyDown`'s `,` case, `onPaste`). RN's `TextInput` has no
+`paste` event to mirror — but a paste still flows through `onChangeText`
+with the full resulting text, exactly like a typed `,` does, so both
+collapse into one handler here: whenever the text contains a `,` or
+newline, split on it and commit every non-empty part. Return is handled via
+`onSubmitEditing` (no `Enter` keystroke to catch on a touch keyboard), and
+Backspace-on-empty uses `onKeyPress` — the one `TextInput` event that still
+fires with the field already empty (`onChangeText` doesn't fire deleting
+from nothing).
+
+The tag box is a `Pressable` (mirrors the web version's
+`onClick={() => inputRef.current?.focus()}` on the container) with
+`accessible={false}` set explicitly: `Pressable` defaults `accessible` to
+`true`, which would otherwise collapse every `Chip`'s remove button and the
+draft input into a single VoiceOver stop — the same container-swallows-
+subtree trap documented for a bare `View` plus `accessibilityRole`, hit
+here via `Pressable`'s own default instead.
+
 ### StatusPage
 
 ```tsx
@@ -2012,6 +2098,38 @@ components means the flip-to-fit placement, the tap-outside dismissal and the
 — same behaviour as the web version, one level up. The keyboard layer drops
 as it does everywhere else here.
 
+### SpinRow
+
+```tsx
+import { SpinRow } from '@gnome-ui/react-native';
+
+<BoxedList>
+  <SpinRow
+    title="Volume"
+    subtitle="Output level"
+    value={volume}
+    onValueChange={setVolume}
+    min={0}
+    max={100}
+  />
+</BoxedList>
+```
+
+Settings row with an integrated spin button for numeric values — mirrors
+`AdwSpinRow` and `@gnome-ui/react`'s own `SpinRow`. Use it inside a
+`BoxedList` for settings with numeric ranges (volume, timeout duration,
+count limits, etc.). Controlled (`value`) and uncontrolled (`defaultValue`)
+modes both work.
+
+**This is a composition of `ActionRow` + `SpinButton`, the same shape as
+`ComboRow`'s `ActionRow` + `Dropdown` composition above.** `SpinButton` is
+controlled-only, so the uncontrolled `defaultValue` state lives in `SpinRow`,
+one level up. The web version's keyboard interaction (↑/↓ one step, Page
+Up/Down ten steps, Home/End to bounds) drops as it does everywhere else in
+this package — `SpinButton` already provides the touch/screen-reader
+equivalents it was built with (tap the visible −/+ buttons, or the
+`accessibilityRole="adjustable"` increment/decrement actions).
+
 ### ColorPicker / ColorSwatch
 
 ```tsx
@@ -2104,6 +2222,37 @@ 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
@@ -2355,6 +2504,51 @@ 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.
 
+### WidgetManager
+
+```tsx
+import { WidgetManager, type WidgetDefinition } from '@gnome-ui/react-native';
+
+const catalog: WidgetDefinition[] = [
+  { id: 'clock', label: 'Clock', description: 'Shows the current time', render: () => <ClockWidget /> },
+  { id: 'weather', label: 'Weather', render: () => <WeatherWidget /> },
+];
+
+<WidgetManager title="My Dashboard" catalog={catalog} value={widgetIds} onChange={setWidgetIds} />;
+```
+
+Card that manages a controlled collection of "widgets" — pick which ones
+are visible from a `catalog`, each rendering its own arbitrary content via
+`render()` — mirrors `@gnome-ui/react`'s own `WidgetManager`. The header's
+edit button toggles a local `editing` state: in view mode only the added
+widgets (or an empty-state message) show; in edit mode a dashed "add
+widget" trigger also appears, opening a catalog picker (`pickerSurface`:
+`"dialog"`, `"bottomSheet"`, or `"drawer"`). Adding/removing is staged
+inside the picker and only applied — via `onChange` — when the user
+confirms; canceling or dismissing discards the staging. Widgets can only be
+removed through the picker, never inline in the card.
+
+Every piece this composes already existed: `ActionRow`+`BoxedList` for the
+catalog rows, `Button`/`IconButton`/`Icon`/`StatusPage` for the rest of the
+chrome, and `Dialog`/`BottomSheet`/`Drawer` for the three `pickerSurface`
+options. The web version's option is called `"modal"`, after its own
+`Modal` component — this package's `Modal` counterpart is `Dialog` (RN's
+own `Modal` primitive is a different, lower-level thing), so the option is
+named after what it actually renders here instead of ported verbatim. None
+of those three overlay components scroll their `children` for you, unlike
+the web version's `overflow-y: auto` body, so the catalog list gets its own
+capped `ScrollView` before being handed to whichever surface renders it.
+`Dialog` already renders its own confirm/cancel row from a `buttons` array;
+only `bottomSheet`/`drawer` need the hand-rolled footer row the web source
+itself calls out ("Modal uses its own actions").
+
+Not ported: `aria-pressed` on the edit toggle — `Button`/`IconButton` set
+their own internal `accessibilityState` on the underlying `Pressable`, and
+a second `accessibilityState` prop passed in here would silently replace
+rather than merge with it (the same `Popover`-trigger clobber `SplitButton`
+already worked around) — dropped rather than routed around for one
+decorative toggle-state announcement.
+
 ### BottomTabBar
 
 ```tsx
@@ -2397,6 +2591,62 @@ mode — `true` for a dot, a number for a count (capped at `"99+"`).
 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/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';

package/dist/components/ButtonContent/ButtonContent.d.ts

@@ -0,0 +1,47 @@
+import { ReactNode } from 'react';
+import { StyleProp, ViewProps, ViewStyle } from 'react-native';
+import { TextColor } from '../Text';
+export type ButtonContentIconPosition = 'start' | 'end';
+export interface ButtonContentProps extends Omit<ViewProps, 'style'> {
+    /** Icon placed next to the label. Rendered as-is — size/color it yourself. */
+    icon?: ReactNode;
+    /** Text label. */
+    label: string;
+    /**
+     * Position of the icon relative to the label.
+     * @default 'start'
+     */
+    iconPosition?: ButtonContentIconPosition;
+    /**
+     * Label color. RN has no `currentColor` equivalent, so unlike the web
+     * version (which inherits the parent button's text color via CSS), this
+     * needs to be told explicitly which color to match — e.g. `"accent"`
+     * when placed inside a `suggested` `Button`. Defaults to `"default"`.
+     */
+    color?: TextColor;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Icon + label layout helper for buttons that contain both an icon and
+ * text — the same 6 dp gap / vertically-centered row every button in this
+ * package already produces internally. Mirrors `AdwButtonContent`.
+ *
+ * **Mostly redundant with `Button`'s own `leadingIcon`/`trailingIcon`
+ * props** — pass those instead for anything that's actually a `Button`,
+ * they already lay the icon and (themed, variant-colored) label out
+ * identically and need no separate color prop. Reach for `ButtonContent`
+ * when composing icon+label content for something that *isn't* this
+ * package's `Button` — a bespoke `Pressable`, a `ButtonRow` title slot, a
+ * `Chip`'s custom content — anywhere the exact same Adwaita icon/label
+ * spacing convention is wanted outside `Button` itself.
+ *
+ * @example
+ * ```tsx
+ * <Pressable onPress={save}>
+ *   <ButtonContent icon={<Icon icon={DocumentSave} />} label="Save" />
+ * </Pressable>
+ * ```
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ButtonContent.html
+ */
+export declare const ButtonContent: ({ icon, label, iconPosition, color, style, ...viewProps }: ButtonContentProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export type { ButtonContentIconPosition, ButtonContentProps } from './ButtonContent';
+export { ButtonContent } from './ButtonContent';

package/dist/components/SpinRow/SpinRow.d.ts

@@ -0,0 +1,64 @@
+import { ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export interface SpinRowProps {
+    /** Primary label. */
+    title: string;
+    /** Secondary line below the title. */
+    subtitle?: string;
+    /** Icon or image placed at the leading edge. */
+    leading?: ReactNode;
+    /** Current value (controlled). */
+    value?: number;
+    /** Initial value when uncontrolled. Defaults to `0`. */
+    defaultValue?: number;
+    /** Called when the value changes. */
+    onValueChange?: (value: number) => void;
+    /** Minimum allowed value. Defaults to `0`. */
+    min?: number;
+    /** Maximum allowed value. Defaults to `100`. */
+    max?: number;
+    /** Amount to increment/decrement per step. Defaults to `1`. */
+    step?: number;
+    /** Number of decimal places shown. Derived from `step` when omitted. */
+    decimals?: number;
+    /** Accessible name for the spin button. Defaults to `title`. */
+    accessibilityLabel?: string;
+    /** Disables the row and its spin button. */
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * Settings row with an integrated spin button for numeric values, mirroring
+ * `AdwSpinRow` and `@gnome-ui/react`'s own `SpinRow`. Use inside a
+ * `BoxedList` for settings with numeric ranges (volume, timeout duration,
+ * count limits, etc.).
+ *
+ * **This is a composition of `ActionRow` + `SpinButton`** — same reasoning
+ * as `ComboRow` (`ActionRow` + `Dropdown`): the row layout and the numeric
+ * stepper are each already shipped, verified components, so nothing here is
+ * rebuilt. `SpinButton` is controlled-only, so the uncontrolled `defaultValue`
+ * state lives here, one level up, the same shape `ComboRow` already
+ * established for `Dropdown`.
+ *
+ * The web version's keyboard interaction (↑/↓ one step, Page Up/Down ten
+ * steps, Home/End to bounds) drops as it does everywhere else in this
+ * package — `SpinButton` already provides the touch/screen-reader
+ * equivalents it was built with (tap the visible −/+ buttons, or the
+ * `accessibilityRole="adjustable"` increment/decrement actions).
+ *
+ * @example
+ * <BoxedList>
+ *   <SpinRow
+ *     title="Volume"
+ *     subtitle="Output level"
+ *     value={volume}
+ *     onValueChange={setVolume}
+ *     min={0}
+ *     max={100}
+ *   />
+ * </BoxedList>
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.SpinRow.html
+ */
+export declare const SpinRow: ({ title, subtitle, leading, value: controlledValue, defaultValue, onValueChange, min, max, step, decimals, accessibilityLabel, disabled, style, testID, }: SpinRowProps) => import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/SplitButton/SplitButton.d.ts

@@ -0,0 +1,46 @@
+import { ReactNode } from 'react';
+import { GestureResponderEvent, StyleProp, ViewStyle } from 'react-native';
+export type SplitButtonVariant = 'default' | 'suggested' | 'destructive';
+export interface SplitButtonProps {
+    /** Label shown in the primary button. */
+    label: string;
+    /** Visual style. Applies to both the primary and toggle halves. */
+    variant?: SplitButtonVariant;
+    /** Content rendered inside the popover panel when the arrow is pressed. */
+    dropdownContent: ReactNode;
+    /** Accessible label for the dropdown toggle button. Defaults to `"More options"`. */
+    dropdownLabel?: string;
+    /** Called when the primary (label) half is pressed. */
+    onPress?: (event: GestureResponderEvent) => void;
+    /** Disables both halves. */
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * Primary action button with an attached dropdown arrow, mirroring
+ * `AdwSplitButton` and `@gnome-ui/react`'s own `SplitButton`. Pressing the
+ * label half fires `onPress`; pressing the arrow half opens a floating
+ * panel with `dropdownContent` (menus, options, etc.).
+ *
+ * The primary half is a real `Button` — its resting/pressed/disabled colors
+ * come for free. The arrow half is a hand-rolled `Pressable` rather than a
+ * second `Button`: nesting `Popover` (whose `children` clones a prop-level
+ * `accessibilityState`/`onPress` onto its trigger) around a full `Button`
+ * would silently clobber `Button`'s own internal `accessibilityState={{
+ * disabled }}` — RN merges a spread prop object outright, it doesn't merge
+ * key-by-key — so the arrow half derives the exact same variant colors via
+ * `getVariantColors` above instead, and owns `accessibilityState` itself
+ * (only `{ disabled }`, letting `Popover`'s clone merge in `expanded`).
+ * The two halves are visually connected by zeroing the shared inner corner
+ * radii and painting a 1px separator between them, the RN equivalent of the
+ * web CSS's `border-radius` split + `.separator` span.
+ *
+ * `Popover` supplies the floating panel, `Modal`-based positioning,
+ * outside-tap dismissal, and Android back-button handling — no repositioning
+ * math of its own needed here, unlike the web version's manual
+ * `getBoundingClientRect`/scroll-and-resize-tracking `place()` effect.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.SplitButton.html
+ */
+export declare const SplitButton: ({ label, variant, dropdownContent, dropdownLabel, onPress, disabled, style, testID, }: SplitButtonProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export type { SplitButtonProps, SplitButtonVariant } from './SplitButton';
+export { SplitButton } from './SplitButton';

package/dist/components/TagInput/TagInput.d.ts

@@ -0,0 +1,59 @@
+import { StyleProp, ViewStyle } from 'react-native';
+export interface TagInputProps {
+    /** Current list of tags. */
+    value: string[];
+    /** Called when a tag is added or removed. */
+    onChange: (value: string[]) => void;
+    /** Visible label rendered above the input. */
+    label?: string;
+    /** Placeholder shown in the draft input while empty. */
+    placeholder?: string;
+    /** Helper text rendered below the input. Hidden when `error` is set. */
+    helperText?: string;
+    /**
+     * Error message rendered below the input in place of `helperText`.
+     * Also applies the error visual state to the border.
+     */
+    error?: string;
+    /** Maximum number of tags allowed. Once reached, the draft input is hidden. */
+    maxTags?: number;
+    /** Reject a new tag that already exists (case-insensitive). Defaults to `true`. */
+    preventDuplicates?: boolean;
+    /** Disables the whole control. */
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * Type-to-add multi-value input rendering entries as removable `Chip`s in a
+ * `WrapBox`, mirroring `@gnome-ui/react`'s own `TagInput`.
+ *
+ * `WrapBox`/`Chip` alone only support static, pre-populated display —
+ * `TagInput` adds interactive entry: type and press Return, or type a `,`,
+ * to commit a tag; paste a comma/newline-separated list to add several at
+ * once; Backspace on an empty draft removes the last one.
+ *
+ * The web version wires typed-`,` and pasted-list handling as two separate
+ * handlers (`onKeyDown`'s `,` case, `onPaste`). RN's `TextInput` has no
+ * `paste` event to mirror — but a paste still flows through `onChangeText`
+ * with the full resulting text, exactly like a typed `,` does, so both
+ * collapse into one `handleChangeText`: whenever the text contains a `,` or
+ * newline, split on it and commit every non-empty part (typing "foo,"
+ * commits "foo" via the same path a paste of "foo,bar" commits both).
+ * Return is handled separately via `onSubmitEditing`, since RN has no
+ * `Enter` keystroke to catch on a single-line field the way the web version
+ * catches it in `onKeyDown`. Backspace-on-empty uses `onKeyPress`, the one
+ * RN `TextInput` event that still fires with the field already empty
+ * (`onChangeText` doesn't fire deleting from nothing).
+ *
+ * The tag box is a `Pressable` (mirrors the web version's
+ * `onClick={() => inputRef.current?.focus()}` on the container) with
+ * `accessible={false}` explicitly — `Pressable` defaults `accessible` to
+ * `true`, which would collapse every `Chip`'s remove button and the draft
+ * input into a single VoiceOver stop, the same container-swallows-subtree
+ * trap already documented for `ToggleGroup`/`Sidebar`'s bare-`View`-plus-role
+ * case, here hit via `Pressable`'s own default instead.
+ *
+ * @see https://developer.gnome.org/hig/patterns/controls/text-fields.html
+ */
+export declare const TagInput: ({ value, onChange, label, placeholder, helperText, error, maxTags, preventDuplicates, disabled, style, testID, }: TagInputProps) => import("react/jsx-runtime").JSX.Element;

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

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