@gnome-ui/react-native 1.0.0 → 1.2.0

package/README.md

@@ -14,9 +14,12 @@ React Native component library following the [GNOME Human Interface Guidelines](
 > `Link`, `TextField`, `Switch`, `Checkbox`, `RadioButton`), Tier 2 Layout &
 > Containers (`Separator`, `Card`, `BoxedList`, `ActionRow`, `HeaderBar`),
 > and Tier 3 Navigation (`Tabs`, `ViewSwitcher`, `Sidebar`, `SearchBar`,
-> `PathBar`) fully ported. Tier 4 Feedback in progress: `Spinner`,
-> `ProgressBar`, `Skeleton`, and `Toast`/`Toaster` shipped — `Banner`,
-> `Dialog`, `Tooltip`, `Status Page`, and `AnimatedIcon` remain. Component
+> `PathBar`) fully ported. Tier 4 Feedback: `Spinner`, `ProgressBar`,
+> `Skeleton`, `Toast`/`Toaster`, `Banner`, `Dialog`, `Tooltip`, and
+> `AnimatedIcon` (which brought a new `Icon` component along with it, as its
+> own public component) shipped — `Status Page` skipped for now. Tier 5
+> Advanced Controls in progress: `Dropdown` shipped — `Slider`,
+> `Spin Button`, `Avatar`, `Badge`, and `Popover` remain. Component
 > ports from `@gnome-ui/react` continue tier by tier. See
 > [ROADMAP.md](../../ROADMAP.md) Priority 3.
 
@@ -680,12 +683,257 @@ skips straight to the settled state. RN's `AccessibilityRole` union has no
 closest available role, paired with `accessibilityLiveRegion="polite"`
 (Android's live-region API) as the nearest match to `aria-live="polite"`.
 
+### Banner
+
+```tsx
+import { Banner } from '@gnome-ui/react-native';
+
+<Banner variant="info">A new version is available.</Banner>;
+<Banner variant="error" actionLabel="Retry" onAction={() => {}}>
+  Sync failed
+</Banner>;
+<Banner variant="success" dismissible onDismiss={() => {}}>
+  Changes saved successfully.
+</Banner>;
+```
+
+Persistent message strip for the top of a view. `variant` is `"info"`
+(default) | `"warning"` | `"error"` | `"success"`, each mapping to the
+matching `theme.<variant>BgColor`/`<variant>FgColor` token pair. Unlike
+`Toast`, it never auto-dismisses — it stays until the user acts or presses
+the optional dismiss button, so there's no `duration` prop at all.
+
+Same accessibility substitution as `Toast`: RN's `AccessibilityRole` union
+has no "status" value (the web version's `role="status"`), so `"alert"` +
+`accessibilityLiveRegion="polite"` stands in for it. The banner itself is a
+plain `View`, not `Pressable` (only its action/dismiss buttons are
+interactive), so — per the `BoxedList` lesson that a bare `View` isn't an
+accessibility element by default — `accessible` is set explicitly alongside
+`accessibilityRole`.
+
+The web version's per-variant `:hover`/`:active` background tint on the
+action/dismiss buttons (a light overlay on the darker info/error/success
+backgrounds, a dark one on the light warning background) collapses to a
+single `Pressable`-pressed-state overlay, the same simplification `Toast`
+and `Card` already made for their own press states.
+
+### Dialog
+
+```tsx
+import { Dialog } from '@gnome-ui/react-native';
+
+// Standard
+<Dialog open={open} title="About Sync" onClose={() => setOpen(false)}>
+  Files are synced automatically every 15 minutes.
+</Dialog>;
+
+// With buttons
+<Dialog
+  open={open}
+  title="Discard changes?"
+  onClose={() => setOpen(false)}
+  buttons={[
+    { label: 'Keep editing', onPress: () => setOpen(false) },
+    { label: 'Discard', variant: 'destructive', onPress: () => setOpen(false) },
+  ]}
+>
+  Your changes have not been saved.
+</Dialog>;
+
+// Alert — role="alertdialog" + responses/onResponse
+<Dialog
+  open={open}
+  role="alertdialog"
+  title="Delete file?"
+  responses={[
+    { id: 'cancel', label: 'Cancel' },
+    { id: 'delete', label: 'Delete', variant: 'destructive' },
+  ]}
+  onResponse={(id) => setOpen(false)}
+>
+  This action cannot be undone.
+</Dialog>;
+```
+
+Blocking modal dialog. **Standard** takes `title` + `children` + `buttons[]`
+with per-button `onPress`; **Alert** (`role="alertdialog"`) takes
+`responses[]` + a single `onResponse(id)` instead — the same two-API shape
+as `@gnome-ui/react`'s `Dialog`, since `AlertDialog` there is a mode of the
+same component rather than a separate one. `AboutDialog` (a distinct
+`@gnome-ui/react` component, not a `Dialog` variant) has no RN port yet.
+
+Built on RN's own `Modal` (`transparent`, `animationType="none"` — the
+entrance is a custom `Animated.timing`) rather than the web version's DOM
+`Portal` + manual focus trap: `Modal` already floats above everything with
+no portal target needed, and already blocks interaction with the screen
+behind it, so there's no `useBodyScrollLock` port. Its `onRequestClose`
+fires on the **Android hardware back button** — the direct analog of the
+web version's document-level Escape listener (iOS has no back button, so
+this is Android-only, matching the platform's own convention). Focus
+trapping (`Tab`/`Shift+Tab` cycling between focusable elements) has no
+port at all — there's no keyboard `Tab` concept in RN's touch-first model,
+the same reasoning that already dropped `TabBar`'s roving-tabindex arrow
+keys.
+
+`role` is set via RN's newer, web-aligned `role` prop (not
+`accessibilityRole`) — its `Role` union has real `"dialog"`/`"alertdialog"`
+values, unlike the older `AccessibilityRole` enum `Toast`/`Banner` had to
+substitute `"alert"` into for the web's `role="status"`.
+`accessibilityViewIsModal` (iOS-only) is the closest match to
+`aria-modal="true"`, restricting VoiceOver to the dialog's subtree. The
+dialog card sets `accessible` explicitly (a bare `View` with `role` isn't
+an accessibility element by default — the same `BoxedList` lesson) —
+**this shares the same open, unverified-on-a-real-device accessibility
+question already flagged for `BoxedList`/`TabBar`/`ViewSwitcher`'s
+container-role pattern**: `accessible={true}` on a container may collapse
+its subtree into one opaque VoiceOver stop, which for `Dialog` specifically
+would mean its footer buttons become unreachable via VoiceOver even though
+they're independently `Pressable`. Kept for `getByRole` testability and
+consistency with the established pattern, but this is the component where
+that tradeoff matters most — worth prioritizing for real-device screen
+reader verification before it's treated as settled.
+
+### Tooltip
+
+```tsx
+import { Button, Tooltip } from '@gnome-ui/react-native';
+
+<Tooltip label="Save file" placement="top">
+  <Button accessibilityLabel="Save">Save</Button>
+</Tooltip>;
+```
+
+Floating informational label. Positioned automatically and flips to the
+opposite side (then to whichever side actually fits) when the preferred
+placement has no room — the same algorithm as `@gnome-ui/react`'s
+`Tooltip`, measured with `measureInWindow()` instead of
+`getBoundingClientRect()`.
+
+**Trigger differs from the web version by necessity**: the web `Tooltip`
+only shows on mouse hover / keyboard focus — touch has no hover state, so
+it explicitly never shows on touch. RN is touch-first, so the primary
+trigger here is **long-press** (`delayLongPress={delay}`, released via
+`onPressOut`) — the standard mobile "peek" idiom. `onHoverIn`/`onHoverOut`
+are also wired for hover-capable input (trackpad/mouse on iPad, or a
+pointer-driven RN target) and `onFocus`/`onBlur` for external-keyboard
+accessibility, both delayed the same way the web version delays hover.
+
+Built on RN's own `Modal` (transparent, `pointerEvents="box-none"`), the
+same portal-substitute `Dialog` uses. `role="tooltip"` ports 1:1 — RN's
+`Role` union already has a `"tooltip"` value. `aria-describedby` has no RN
+equivalent, so the label is set as the trigger's `accessibilityHint`
+instead (unless the trigger already provides its own). The bubble's arrow
+reuses the same zero-size / transparent-border-on-three-sides triangle
+trick as the web CSS — RN `View`s support per-side `border*Color` too, the
+same technique `Spinner`'s ring already relies on.
+
+Not ported: repositioning on scroll/resize while visible (RN has no global
+scroll event, and a long-press is naturally cancelled by a scroll gesture
+starting). `tooltipBgColor`/`tooltipFgColor` aren't real `@gnome-ui/core`
+tokens (only CSS var fallbacks), so the RN port hardcodes the same literal
+light/dark values, the same workaround `Spinner`'s track color established.
+
+### Icon
+
+```tsx
+import { Search } from '@gnome-ui/icons';
+import { Icon } from '@gnome-ui/react-native';
+
+<Icon icon={Search} label="Search" size="lg" color="blue" />;
+```
+
+Renders an icon as an inline SVG via `react-native-svg` (a new peer
+dependency — this package's first). Accepts the same `AnyIconDefinition`
+union as `@gnome-ui/react`'s `Icon`: a structured `paths`-based
+`IconDefinition` from `@gnome-ui/icons`, a `simple-icons` `SimpleIcon`, or a
+plain `{ path }` object. `color` picks a named GNOME palette hue
+(`theme.blue3`, `theme.red3`, …) — RN has no `currentColor` to inherit from
+a parent the way the web version does, so omitting `color` resolves to the
+theme's default foreground color explicitly instead.
+
+`animated` icons (`Syncing`, `Recording`, `Downloading`, `Connecting`) carry
+raw `svg` markup instead of `paths` — rendered here through `react-native-
+svg`'s `SvgXml`. It parses the structural elements (`<g>`/`<path>`/
+`<circle>`) but has no CSS engine, so the markup's embedded `<style>`/
+`@keyframes` block is silently dropped and the shapes render at their
+authored rest position — which happens to be exactly the desired inert,
+static-frame behavior for a plain `<Icon>`, no special-casing needed. Wrap
+in `<AnimatedIcon>` to actually play the motion.
+
+### AnimatedIcon
+
+```tsx
+import { Syncing } from '@gnome-ui/icons';
+import { AnimatedIcon } from '@gnome-ui/react-native';
+
+<AnimatedIcon icon={Syncing} playing={isSyncing} label="Syncing" />;
+```
+
+Plays the motion for a known `animated` icon (`Syncing`, `Recording`,
+`Downloading`, `Connecting`) — rendered through plain `<Icon>`, these show a
+static frame instead, same as `@gnome-ui/react`'s `AnimatedIcon`.
+
+Unlike the web version (which plays a CSS animation embedded in the icon's
+raw `svg` markup via a `--gnome-icon-play-state` custom property), RN has
+no CSS engine to interpret `@keyframes` at all. Each of the 4 known icons'
+motion is instead hand-built with `Animated`, matched by referential
+identity against `@gnome-ui/icons`' own exports (`Syncing` → full-turn
+rotation, `Recording` → opacity pulse, `Downloading` → a translate+opacity
+"drop" on the arrow over a static tray, `Connecting` → three signal dots
+pulsing in a staggered sweep) — an icon `AnimatedIcon` doesn't recognize
+(a future 5th animated icon, or a consumer-authored one) falls back to the
+static `<Icon>` frame rather than throwing. Regardless of `playing`, the
+animation is always paused when the OS reduced-motion setting is on.
+
+### Dropdown
+
+```tsx
+import { Dropdown } from '@gnome-ui/react-native';
+
+<Dropdown
+  options={[
+    { value: 'blue', label: 'Blue' },
+    { value: 'green', label: 'Green', description: 'A calm accent' },
+  ]}
+  value={accentColor}
+  onChange={setAccentColor}
+  placeholder="Accent color"
+/>;
+```
+
+Expandable option list following the Adwaita combo-row pattern, mirroring
+`@gnome-ui/react`'s `Dropdown`.
+
+Built on RN's own `Modal` (transparent) — the same portal-substitute
+`Dialog`/`Tooltip` already use — with a full-screen backdrop `Pressable`
+that closes the list on an outside tap (the RN analog of the web version's
+document-level "click outside" listener; unlike `Tooltip`'s backdrop, this
+one isn't `pointerEvents="box-none"`, since it's meant to catch that tap
+rather than pass it through). `open` flips synchronously on trigger press;
+the trigger's on-screen rect and the panel's own rendered height each
+resolve independently into state, combined by a separate effect into the
+final position and flip-up/flip-down direction — the same two-independent-
+async-measurements pattern `Tooltip` established.
+
+Keyboard navigation (↑/↓ roving highlight, Home/End, type-ahead) has no
+port — RN's touch-first model has no keyboard focus to drive it, the same
+reasoning that already dropped `TabBar`'s roving-tabindex arrow keys.
+Selection is by direct tap only. `role="combobox"` on the trigger ports
+1:1; RN's `Role` union has no `"listbox"` value, so the panel uses
+`role="list"` instead — the same closest-available substitution `BoxedList`
+already established for a plain list container.
+
 ## Installation
 
 ```bash
-npm install @gnome-ui/react-native react-native
+npm install @gnome-ui/react-native react-native react-native-svg
 ```
 
+`react-native-svg` is a peer dependency, only needed for `Icon`/
+`AnimatedIcon` — it ships as one of Expo Go's included native modules, so
+Expo projects on `npx expo install react-native-svg` need no extra native
+build step; bare RN projects need it linked as usual for a native module.
+
 ## Example app
 
 [`apps/react-native-example`](../../apps/react-native-example) is a

package/dist/components/AnimatedIcon/AnimatedIcon.d.ts

@@ -0,0 +1,38 @@
+import { IconDefinition } from '@gnome-ui/icons';
+import { IconProps } from '../Icon';
+export interface AnimatedIconProps extends Omit<IconProps, 'icon'> {
+    /** Animated icon from `@gnome-ui/icons` (`animated: true` — `Syncing`, `Recording`, `Downloading`, `Connecting`). */
+    icon: IconDefinition;
+    /**
+     * Whether the animation plays. Defaults to `true`.
+     *
+     * Regardless of this prop, the animation is always paused when the OS
+     * reduced-motion setting is on — callers don't need to check
+     * `useReducedMotion()` themselves.
+     */
+    playing?: boolean;
+}
+/**
+ * Plays the motion for a known `animated` icon from `@gnome-ui/icons`
+ * (`Syncing`, `Recording`, `Downloading`, `Connecting`) — rendered through
+ * plain `<Icon>`, these show a static frame instead.
+ *
+ * Unlike `@gnome-ui/react`'s `AnimatedIcon` (which plays a CSS animation
+ * embedded in the icon's raw `svg` markup via a `--gnome-icon-play-state`
+ * custom property), RN has no CSS engine to interpret `@keyframes` at all —
+ * `<Icon>` already drops the `<style>` block silently (see its own doc
+ * comment), and this component instead hand-builds each of the 4 known
+ * icons' exact motion with `Animated`, matched against `RECIPES` by
+ * reference. When playing and reduced motion is off, it renders its own
+ * `<Svg>` with the matching `*Motion` recipe as children; otherwise (not
+ * playing, reduced motion on, or an icon `RECIPES` doesn't recognize) it
+ * defers straight to `<Icon>`.
+ *
+ * Useful for progress, sync, recording, download, and connection states, or
+ * cross-fading between icons by swapping `icon` while `playing` stays true.
+ *
+ * @example
+ * import { Syncing } from "@gnome-ui/icons";
+ * <AnimatedIcon icon={Syncing} playing={isSyncing} label="Syncing" />
+ */
+export declare const AnimatedIcon: ({ icon, playing, size, width, height, label, color, }: AnimatedIconProps) => import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/Banner/Banner.d.ts

@@ -0,0 +1,50 @@
+import { ReactNode } from 'react';
+import { StyleProp, ViewProps, ViewStyle } from 'react-native';
+export type BannerVariant = 'info' | 'warning' | 'error' | 'success';
+export interface BannerProps extends Omit<ViewProps, 'style'> {
+    /**
+     * Visual emphasis level.
+     * - `info` (default) — neutral, accent-colored. Use for tips and notices.
+     * - `warning` — yellow. Use for recoverable problems.
+     * - `error` — red. Use for failures that need attention.
+     * - `success` — green. Use for confirmations.
+     */
+    variant?: BannerVariant;
+    /** The message text. Keep it short — one or two sentences. */
+    children: ReactNode;
+    /**
+     * Label for the optional action button placed at the trailing end.
+     * When provided, `onAction` should also be supplied.
+     */
+    actionLabel?: string;
+    /** Called when the user presses the action button. */
+    onAction?: () => void;
+    /**
+     * When true a dismiss (×) button is shown at the trailing edge.
+     * Provide `onDismiss` to handle removal from the list.
+     */
+    dismissible?: boolean;
+    /** Called when the user presses the dismiss button. */
+    onDismiss?: () => void;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Persistent message strip displayed at the top of a view, following the
+ * Adwaita `AdwBanner` pattern. Use for important information that persists
+ * until the user acts or explicitly dismisses it — unlike `Toast`, it never
+ * auto-dismisses.
+ *
+ * RN's `AccessibilityRole` union has no "status" value (the web version's
+ * `role="status"`); `"alert"` is the closest available role, paired with
+ * `accessibilityLiveRegion="polite"` (Android's live-region API) as the
+ * nearest match to `aria-live="polite"` — the same substitution `Toast`
+ * already established for the identical web role pair. Since the banner
+ * itself is a plain `View` (not `Pressable` — only its buttons are
+ * interactive), `accessible` is set explicitly alongside `accessibilityRole`,
+ * per the `BoxedList` lesson that a bare `View` isn't an accessibility
+ * element by default.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Banner.html
+ * @see https://developer.gnome.org/hig/patterns/feedback/banners.html
+ */
+export declare const Banner: ({ variant, children, actionLabel, onAction, dismissible, onDismiss, style, ...viewProps }: BannerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export type { BannerProps, BannerVariant } from './Banner';
+export { Banner } from './Banner';

package/dist/components/Dialog/Dialog.d.ts

@@ -0,0 +1,105 @@
+import { ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export type DialogButtonVariant = 'default' | 'suggested' | 'destructive';
+export interface DialogButton {
+    /** Button label. */
+    label: string;
+    /** Visual variant. Defaults to `"default"`. */
+    variant?: DialogButtonVariant;
+    /** Called when the button is pressed. */
+    onPress: () => void;
+    /** Whether the button is disabled. */
+    disabled?: boolean;
+}
+export type AlertDialogResponseVariant = DialogButtonVariant;
+export interface AlertDialogResponse {
+    /**
+     * Unique identifier returned via `onResponse`.
+     * Use `"cancel"` by convention for the dismissive action.
+     */
+    id: string;
+    /** Button label. */
+    label: string;
+    /** Visual emphasis. Defaults to `"default"`. */
+    variant?: AlertDialogResponseVariant;
+    /** Disables the button. */
+    disabled?: boolean;
+}
+export interface DialogProps {
+    /** Whether the dialog is visible. */
+    open: boolean;
+    /** Dialog heading. */
+    title?: ReactNode;
+    /** Body content. */
+    children?: ReactNode;
+    /** Action buttons (standard dialog API). */
+    buttons?: DialogButton[];
+    /** Called on Android back button / backdrop press. */
+    onClose?: () => void;
+    /** Whether pressing the backdrop closes the dialog. Defaults to `true`. */
+    closeOnBackdrop?: boolean;
+    /**
+     * Use `"alertdialog"` for confirmations and destructive warnings — screen
+     * readers announce it immediately. Defaults to `"dialog"`.
+     *
+     * When using `role="alertdialog"`, prefer the `responses`/`onResponse` API
+     * over `buttons`/`onPress` for semantic clarity.
+     */
+    role?: 'dialog' | 'alertdialog';
+    /**
+     * Response buttons (AlertDialog API). Alternative to `buttons` — each
+     * response has a semantic `id` returned via `onResponse`. The Android back
+     * button and backdrop press fire the first non-destructive response.
+     */
+    responses?: AlertDialogResponse[];
+    /**
+     * Called with the `id` of the response button pressed.
+     * Required when `responses` is provided.
+     */
+    onResponse?: (id: string) => void;
+    style?: StyleProp<ViewStyle>;
+    /** Forwarded to the backdrop — useful for testing. */
+    testID?: string;
+}
+/**
+ * Blocking modal dialog following the Adwaita pattern.
+ *
+ * **Standard** — `title` + `children` + `buttons[]`.
+ *
+ * **Alert** — add `role="alertdialog"` + `responses[]` + `onResponse`.
+ * Uses a semantic response id instead of per-button `onPress`. The Android
+ * back button / backdrop press fire the first non-destructive response.
+ * Mirrors `AdwAlertDialog`.
+ *
+ * Built on RN's own `Modal` rather than `@gnome-ui/react`'s DOM `Portal` +
+ * manual focus trap: `Modal` already floats above everything with no portal
+ * target needed, already blocks interaction with the screen behind it (no
+ * `useBodyScrollLock` equivalent needed), and its `onRequestClose` fires on
+ * the Android hardware back button — the direct analog of the web version's
+ * document-level Escape listener. Focus-trapping (`Tab`/`Shift+Tab` cycling)
+ * has no port: there is no keyboard `Tab` concept in RN's touch-first model,
+ * the same reasoning that already dropped `TabBar`'s roving-tabindex arrow
+ * keys.
+ *
+ * `role` is passed straight through as RN's own `role` prop (not
+ * `accessibilityRole`) — RN's newer, web-aligned `Role` union has real
+ * `"dialog"`/`"alertdialog"` values, unlike the older `AccessibilityRole`
+ * enum `Toast`/`Banner` had to substitute `"alert"` into for the web's
+ * `role="status"`. `accessibilityViewIsModal` (iOS) is the closest match to
+ * `aria-modal="true"`, restricting VoiceOver to the dialog's subtree.
+ *
+ * There is no exit animation on either platform — the source CSS only
+ * defines entrance keyframes, and `Modal`'s `visible={false}` unmounts
+ * immediately, matching the web version returning `null` outright when
+ * `!open`. Entrance is an `Animated.timing` fading + scaling + sliding the
+ * card in (mirrors `@keyframes dialog-in`) alongside a plain backdrop fade
+ * (`@keyframes backdrop-in`), replayed via a `useEffect` keyed on `open`
+ * since — unlike `Toast`, which mounts once per instance — the same
+ * `Dialog` element toggles `open` repeatedly while `Modal` itself
+ * mounts/unmounts internally. `useReducedMotion()` skips straight to the
+ * settled state.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Dialog.html
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.AlertDialog.html
+ */
+export declare const Dialog: ({ open, title, children, buttons, onClose, closeOnBackdrop, role, responses, onResponse, style, testID, }: DialogProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export type { AlertDialogResponse, AlertDialogResponseVariant, DialogButton, DialogButtonVariant, DialogProps, } from './Dialog';
+export { Dialog } from './Dialog';

package/dist/components/Dropdown/Dropdown.d.ts

@@ -0,0 +1,56 @@
+import { StyleProp, ViewStyle } from 'react-native';
+export interface DropdownOption<V extends string = string> {
+    /** The value submitted / returned on selection. */
+    value: V;
+    /** Display label shown in the list and trigger. */
+    label: string;
+    /** Optional descriptive text shown below the label. */
+    description?: string;
+    /** Whether the option is selectable. */
+    disabled?: boolean;
+}
+export interface DropdownProps<V extends string = string> {
+    /** The list of selectable options. */
+    options: DropdownOption<V>[];
+    /** The currently selected value. */
+    value?: V;
+    /** Called when the user selects an option. */
+    onChange?: (value: V) => void;
+    /** Placeholder shown when no option is selected. */
+    placeholder?: string;
+    /** Accessible label for the control. */
+    accessibilityLabel?: string;
+    /** Disables the entire control. */
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * Expandable option list following the Adwaita combo-row / drop-down
+ * pattern, mirroring `@gnome-ui/react`'s `Dropdown`.
+ *
+ * Built on RN's own `Modal` (transparent) — the same portal-substitute
+ * `Dialog`/`Tooltip` already use — with a full-screen backdrop `Pressable`
+ * (not `pointerEvents="box-none"` like `Tooltip`'s: unlike a tooltip, this
+ * panel is meant to catch and close on an outside tap, the RN analog of the
+ * web version's document-level "click outside" listener). `open` flips
+ * synchronously on trigger press; the trigger's on-screen rect
+ * (`measureInWindow`) and the panel's own rendered height (`onLayout`) each
+ * resolve independently into state, combined by a separate effect into the
+ * final `top`/`left`/`width`/`flipUp` — the same two-independent-
+ * async-measurements pattern `Tooltip` established (and for the same
+ * reason: gating `open` itself on the native measurement callback would
+ * make the component untestable in this package's Jest environment, where
+ * `measureInWindow` never calls back).
+ *
+ * Keyboard navigation (↑/↓ roving highlight, Home/End, type-ahead) has no
+ * port — RN's touch-first model has no keyboard focus to drive it, the
+ * same reasoning that already dropped `TabBar`'s roving-tabindex arrow
+ * keys. Selection is by direct tap only.
+ *
+ * `role="combobox"` on the trigger ports 1:1. RN's `Role` union has no
+ * `"listbox"` value (unlike `"option"`, which does exist) — the panel uses
+ * `role="list"` instead, the same closest-available substitution `BoxedList`
+ * already established for a plain list container.
+ */
+export declare const Dropdown: <V extends string = string>({ options, value, onChange, placeholder, accessibilityLabel, disabled, style, testID, }: DropdownProps<V>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export type { DropdownOption, DropdownProps } from './Dropdown';
+export { Dropdown } from './Dropdown';

package/dist/components/Icon/Icon.d.ts

@@ -0,0 +1,56 @@
+import { AnyIconDefinition } from '@gnome-ui/icons';
+import { StyleProp, ViewStyle } from 'react-native';
+export type IconSize = 'sm' | 'md' | 'lg';
+/** Named GNOME palette color for the icon. `"default"` (or omitting the prop) resolves to the theme's default foreground color. */
+export type IconColor = 'default' | 'blue' | 'green' | 'yellow' | 'orange' | 'red' | 'purple' | 'brown';
+export interface IconProps {
+    /** Icon from `@gnome-ui/icons`, a `simple-icons` icon, or a raw `{ path }` object. */
+    icon: AnyIconDefinition;
+    /**
+     * Rendered size.
+     * - `sm` — 12 px
+     * - `md` — 16 px (default)
+     * - `lg` — 20 px
+     *
+     * Override with `width`/`height` for non-standard sizes.
+     */
+    size?: IconSize;
+    width?: number;
+    height?: number;
+    /** Accessible label. Omit for decorative icons — they are hidden from screen readers. */
+    label?: string;
+    /**
+     * Named GNOME palette color. Omit (or pass `"default"`) to use the
+     * theme's default foreground color — RN has no `currentColor`
+     * equivalent to inherit from a parent, unlike the web version.
+     */
+    color?: IconColor;
+    /** Forwarded to the underlying `Svg` — useful for a `transform` (e.g. a rotated disclosure chevron) or `margin`. */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Renders an icon as an inline SVG, via `react-native-svg`.
+ *
+ * Accepts icons from `@gnome-ui/icons`, any `simple-icons` icon, or a plain
+ * `{ path }` object — same `AnyIconDefinition` union as `@gnome-ui/react`'s
+ * `Icon`. Pass `label` only when the icon conveys meaning on its own.
+ *
+ * `animated` icons (`Syncing`, `Recording`, …) carry raw `svg` markup
+ * instead of `paths` — rendered here through `SvgXml`, which parses the
+ * structural elements (`<g>`/`<path>`/`<circle>`) but has no CSS engine, so
+ * the embedded `<style>`/`@keyframes` block is silently dropped and the
+ * shapes render at their authored rest position. That happens to be exactly
+ * the desired "inert, static frame" behavior for a plain `<Icon>` — no
+ * special-casing needed here; wrap in `<AnimatedIcon>` to actually play the
+ * motion (RN has to hand-build that with `Animated`, since there is no CSS
+ * animation engine to interpret the markup's keyframes).
+ *
+ * @example
+ * import { Search } from "@gnome-ui/icons";
+ * <Icon icon={Search} label="Search" />
+ *
+ * @example
+ * import { siGithub } from "simple-icons";
+ * <Icon icon={siGithub} label="GitHub" />
+ */
+export declare const Icon: ({ icon, size, width, height, label, color, style }: IconProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export type { IconColor, IconProps, IconSize } from './Icon';
+export { Icon } from './Icon';

package/dist/components/Icon/shared.d.ts

@@ -0,0 +1,19 @@
+import { useGnomeTheme } from '../../GnomeProvider';
+import { IconColor, IconSize } from './Icon';
+/**
+ * Non-component helpers shared between `Icon` and `AnimatedIcon` — kept in
+ * their own module (not exported from `Icon.tsx` itself) so both files stay
+ * component-only for Fast Refresh, per the project's `react-refresh/
+ * only-export-components` lint rule.
+ */
+export declare const ICON_SIZE_MAP: Record<IconSize, number>;
+export declare function resolveIconColor(theme: ReturnType<typeof useGnomeTheme>, color: IconColor | undefined): string;
+export declare function iconAccessibilityProps(label: string | undefined): {
+    accessible: true;
+    accessibilityLabel: string;
+    accessibilityRole: "image";
+} | {
+    accessible: false;
+    accessibilityRole: "none";
+    accessibilityLabel?: undefined;
+};