@gnome-ui/react-native 1.0.0

package/dist/components/SearchBar/SearchBar.d.ts

@@ -0,0 +1,51 @@
+import { ReactNode } from 'react';
+import { StyleProp, TextInput, TextInputProps, TextStyle, ViewStyle } from 'react-native';
+export interface SearchBarProps extends Omit<TextInputProps, 'style'> {
+    /** Whether the search bar is rendered. `false` renders nothing. */
+    open: boolean;
+    /**
+     * Renders a trailing "Cancel" button (the RN-idiomatic stand-in for the
+     * web version's Escape-to-close — touch keyboards have no reliable
+     * Escape key) and calls this when it's pressed.
+     */
+    onClose?: () => void;
+    /** Called when the clear (×) button is pressed. Also clears the input value. */
+    onClear?: () => void;
+    /**
+     * Content rendered below the bar (e.g. filter chips). Only rendered
+     * while `open` is true.
+     */
+    children?: ReactNode;
+    /** Removes the header-bar background so the bar blends into any surface. */
+    inline?: boolean;
+    /** Accessible label for the close button. Defaults to `"Cancel"`. */
+    closeLabel?: string;
+    /** Style applied to the wrapping `View`. */
+    style?: StyleProp<ViewStyle>;
+    /** Style applied to the `TextInput` itself. */
+    inputStyle?: StyleProp<TextStyle>;
+}
+/**
+ * Collapsible search input following the Adwaita `AdwSearchBar` pattern.
+ *
+ * Rebuilt on RN's `TextInput` rather than ported from `@gnome-ui/react`'s
+ * `<input type="search">`: `open` no longer drives a CSS height/opacity
+ * transition (no established animated-height pattern exists yet in this
+ * package — same trade-off `SidebarSection` made for its collapsible body)
+ * — `open={false}` renders nothing at all, and mounting on `open={true}`
+ * auto-focuses the input, standing in for the web version's
+ * `requestAnimationFrame`-on-open focus effect.
+ *
+ * Dropped relative to `@gnome-ui/react`'s `SearchBar`: the `suggestions` /
+ * `onSuggestionSelect` / `loadingSuggestions` / `renderSuggestion` /
+ * `suggestionsLabel` autocomplete popover — it depends on a portal +
+ * viewport-anchored positioning primitive (`createPortal` +
+ * `getBoundingClientRect`) this package doesn't have yet, the same gap
+ * that dropped `SidebarItem`'s `menuItems` context menu — and a `Spinner`
+ * component, not yet ported. The search/clear icons are Unicode glyphs
+ * (`🔍`/`×`) rather than `@gnome-ui/icons`, matching every other
+ * no-SVG-dependency component in this package.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.SearchBar.html
+ */
+export declare const SearchBar: import('react').ForwardRefExoticComponent<SearchBarProps & import('react').RefAttributes<TextInput>>;

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

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

package/dist/components/Separator/Separator.d.ts

@@ -0,0 +1,26 @@
+import { StyleProp, View, ViewProps, ViewStyle } from 'react-native';
+export type SeparatorOrientation = 'horizontal' | 'vertical';
+export interface SeparatorProps extends Omit<ViewProps, 'style'> {
+    /** Direction of the dividing line. Defaults to `"horizontal"`. */
+    orientation?: SeparatorOrientation;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Thin dividing line that separates groups of content.
+ *
+ * Color is driven entirely by `theme.cardShadeColor`, which already
+ * resolves correctly per color scheme, so — unlike `Switch`/`Checkbox`/
+ * `RadioButton` — there's no `useResolvedColorScheme()` branching needed
+ * here.
+ *
+ * Rebuilt as a plain `View` rather than ported from `@gnome-ui/react`'s
+ * `<hr>`/`<div role="separator">`: RN's `AccessibilityRole` union has no
+ * `"separator"` value, so — since a divider carries no information a
+ * screen reader user needs — it's excluded from the accessibility tree
+ * entirely with `accessible={false}`, the RN-idiomatic way to mark a
+ * purely decorative element, rather than reaching for a role that doesn't
+ * exist.
+ *
+ * @see https://developer.gnome.org/hig/patterns/containers.html
+ */
+export declare const Separator: import('react').ForwardRefExoticComponent<SeparatorProps & import('react').RefAttributes<View>>;

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

@@ -0,0 +1,2 @@
+export type { SeparatorOrientation, SeparatorProps } from './Separator';
+export { Separator } from './Separator';

package/dist/components/Sidebar/Sidebar.d.ts

@@ -0,0 +1,45 @@
+import { ReactNode } from 'react';
+import { StyleProp, View, ViewProps, ViewStyle } from 'react-native';
+/** Provides the collapsed state to all descendant `SidebarSection`/`SidebarItem`. */
+export declare const SidebarCollapsedContext: import('react').Context<boolean>;
+/** Returns `true` when the nearest `Sidebar` is in collapsed (icon-only/rail) mode. */
+export declare function useSidebarCollapsed(): boolean;
+/** Provides the active filter string to all descendant `SidebarItem`/`SidebarSection`. */
+export declare const SidebarFilterContext: import('react').Context<string>;
+export interface SidebarProps extends Omit<ViewProps, 'style'> {
+    children?: ReactNode;
+    /**
+     * When `true`, collapses the sidebar to icon-only (rail) mode. Labels and
+     * section titles are hidden.
+     */
+    collapsed?: boolean;
+    /**
+     * Controlled filter string. `SidebarItem`s whose `label` does not match
+     * (case-insensitive substring) are hidden, and empty `SidebarSection`s are
+     * hidden entirely. Unlike the web version this never renders a search
+     * input itself — pair it with your own `TextField` (or the future
+     * `SearchBar` port) and drive this prop from its value.
+     */
+    filter?: string;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Lateral navigation panel following the Adwaita `.navigation-sidebar` style.
+ *
+ * Compose with `SidebarSection` (named groups) and `SidebarItem` (rows).
+ * Consecutive top-level children get a `Separator` inserted between them —
+ * same divider-on-index-boundary technique `BoxedList` uses for its rows —
+ * standing in for the web version's `.section + .section` adjacent-sibling
+ * CSS rule, which RN has no equivalent of.
+ *
+ * Dropped relative to `@gnome-ui/react`'s `Sidebar`: `searchable` (would
+ * pull in a `SearchBar`, not yet ported to this package — use `filter` with
+ * your own input instead), `mode`/auto page-layout switch (depends on the
+ * web-only `useBreakpoint` hook), `variant` (tinted/blurred backgrounds —
+ * the blurred variant needs a native blur view this package doesn't depend
+ * on), and the `<nav>` landmark role (RN's `AccessibilityRole` union has no
+ * "navigation" value).
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Sidebar.html
+ */
+export declare const Sidebar: import('react').ForwardRefExoticComponent<SidebarProps & import('react').RefAttributes<View>>;

package/dist/components/Sidebar/SidebarItem.d.ts

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+import { PressableProps, StyleProp, View, ViewStyle } from 'react-native';
+export interface SidebarItemProps extends Omit<PressableProps, 'children' | 'style' | 'disabled'> {
+    /** Primary label. */
+    label: string;
+    /**
+     * Icon placed at the leading edge. Rendered as-is — size/color it
+     * yourself. Web's `icon` takes an `@gnome-ui/icons` `IconDefinition`;
+     * this package has no SVG icon system, so it's a plain `ReactNode` here,
+     * same as `ActionRow`'s `leading` and `TabItem`'s `icon`.
+     */
+    icon?: ReactNode;
+    /** Marks this item as the currently active view. */
+    active?: boolean;
+    /** Trailing widget — badge, count, button, icon… */
+    suffix?: ReactNode;
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Individual navigation row inside a `Sidebar` or `SidebarSection`.
+ *
+ * Automatically hidden (renders nothing) when the nearest `Sidebar`'s
+ * `filter` is active and `label` doesn't match. In collapsed (rail) mode
+ * the label and suffix are hidden and the icon centers — `label` still
+ * reaches screen readers via `accessibilityLabel`.
+ *
+ * Dropped relative to `@gnome-ui/react`'s `SidebarItem`: `tooltip` (no
+ * `Tooltip` port yet, and RN's touch-first model has no hover to trigger
+ * one from), `menuItems` (context menu — no portal/positioning primitive
+ * exists in this package yet), and `onDrop`/`acceptTypes` (HTML5
+ * drag-and-drop has no RN equivalent without a gesture-handler dependency
+ * this package doesn't have).
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Sidebar.html
+ */
+export declare const SidebarItem: import('react').ForwardRefExoticComponent<SidebarItemProps & import('react').RefAttributes<View>>;

package/dist/components/Sidebar/SidebarSection.d.ts

@@ -0,0 +1,42 @@
+import { ReactNode } from 'react';
+import { StyleProp, ViewProps, ViewStyle } from 'react-native';
+export interface SidebarSectionHandle {
+    expand: () => void;
+    collapse: () => void;
+    toggle: () => void;
+}
+export interface SidebarSectionProps extends Omit<ViewProps, 'style'> {
+    /** Section heading. Omit for an untitled section (e.g. the first group in a sidebar). */
+    title?: string;
+    /** Icon rendered left of the title. Rendered as-is — size/color it yourself. */
+    icon?: ReactNode;
+    /** Whether the section body can be toggled open/closed. Defaults to `false`. */
+    collapsible?: boolean;
+    /** Initial open state when `collapsible` is true. Defaults to `true`. */
+    defaultOpen?: boolean;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Called when open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Named group of `SidebarItem` entries inside a `Sidebar`.
+ *
+ * When `collapsible`, the body toggles via the header `Pressable` or
+ * imperatively via a `ref` (`expand`/`collapse`/`toggle`) — same
+ * `useImperativeHandle` shape as the web version's `SidebarSectionHandle`.
+ * The body stays mounted and toggles `display: 'none'` rather than
+ * unmounting, the same "stays mounted but hidden" approach `TabPanel` uses,
+ * instead of porting the web version's animated CSS-grid collapse (no
+ * established animated-height pattern exists yet in this package).
+ *
+ * In rail (`collapsed`) mode the header — and with it the collapse toggle —
+ * is hidden and the body is always shown, matching the web version's rail
+ * behavior. When a `Sidebar` filter is active and no descendant matches,
+ * the whole section renders nothing.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Sidebar.html
+ */
+export declare const SidebarSection: import('react').ForwardRefExoticComponent<SidebarSectionProps & import('react').RefAttributes<SidebarSectionHandle>>;

package/dist/components/Sidebar/filterUtils.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+/** Recursively count items whose `label` prop matches `filter` (case-insensitive). */
+export declare function countMatchingItems(children: ReactNode, filter: string): number;
+/**
+ * Whether a single top-level `Sidebar` child would render something under
+ * `filter` — a bare `SidebarItem` if its own `label` matches, a
+ * `SidebarSection` (or anything else with `children`) if any descendant
+ * matches. Used to decide which children get a `Separator` between them, so
+ * a filtered-out (null-rendering) item doesn't still claim a divider slot.
+ */
+export declare function isChildVisible(child: ReactNode, filter: string): boolean;

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

@@ -0,0 +1,6 @@
+export type { SidebarProps } from './Sidebar';
+export { Sidebar, SidebarCollapsedContext, SidebarFilterContext, useSidebarCollapsed, } from './Sidebar';
+export type { SidebarItemProps } from './SidebarItem';
+export { SidebarItem } from './SidebarItem';
+export type { SidebarSectionHandle, SidebarSectionProps } from './SidebarSection';
+export { SidebarSection } from './SidebarSection';

package/dist/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,51 @@
+import { DimensionValue, StyleProp, ViewProps, ViewStyle } from 'react-native';
+export type SkeletonVariant = 'rect' | 'circle' | 'text';
+export interface SkeletonProps extends Omit<ViewProps, 'style'> {
+    /** Shape of the placeholder. Defaults to `"rect"`. */
+    variant?: SkeletonVariant;
+    /** Width for rectangular placeholders. Defaults to `"100%"`. */
+    width?: DimensionValue;
+    /** Height for rectangular placeholders. Defaults to `16`. */
+    height?: DimensionValue;
+    /** Diameter for circular placeholders. Defaults to `40`. */
+    size?: number;
+    /** Number of rows for text placeholders. Defaults to `3`. */
+    lines?: number;
+    /** Enables the pulse animation. Respects `useReducedMotion()`. Defaults to `true`. */
+    animated?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Loading placeholder for content-shaped skeleton screens.
+ *
+ * GNOME HIG recommends `Spinner` or `ProgressBar` for loading states; this
+ * is a pragmatic web-style extension for layouts that benefit from
+ * placeholder shape, ported as-is from `@gnome-ui/react`.
+ *
+ * The web version's shimmer is a `linear-gradient` swept across the shape
+ * via `transform: translateX()`; this package has no gradient dependency
+ * (no `expo-linear-gradient`/`react-native-linear-gradient` in its
+ * dependency tree, and adding one for a single component would be scope
+ * creep), so the animation is a plain opacity pulse instead — animating
+ * `theme.skeletonBaseColor`'s own opacity between `1` and `0.5` on a
+ * 1.4s round trip, the same cycle length as the web shimmer. This is a
+ * common RN-idiomatic substitute for a CSS shimmer (compare Tailwind's own
+ * `animate-pulse` utility, which uses the identical technique). Unlike
+ * `Spinner` (slows) and `ProgressBar` (stops one state, slows the other),
+ * `useReducedMotion()` here fully disables the pulse and shows a static
+ * base color — mirroring the source CSS's own
+ * `@media (prefers-reduced-motion: reduce) { animation: none }`, which has
+ * no partial-motion in-between state to preserve.
+ *
+ * `theme.skeletonBaseColor` already resolves correctly per color scheme
+ * (unlike `Spinner`'s track color, which the source CSS never actually
+ * tokenizes), so no `useResolvedColorScheme()` branching is needed here.
+ *
+ * `accessible={false}` mirrors the web version's `aria-hidden="true"` — a
+ * loading placeholder carries no information a screen reader user needs,
+ * same reasoning `Separator` already established for a purely decorative
+ * element.
+ *
+ * @see https://developer.gnome.org/hig/patterns/feedback/progress.html
+ */
+export declare const Skeleton: ({ variant, width, height, size, lines, animated, style, ...viewProps }: SkeletonProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export type { SkeletonProps, SkeletonVariant } from './Skeleton';
+export { Skeleton } from './Skeleton';

package/dist/components/Spinner/Spinner.d.ts

@@ -0,0 +1,44 @@
+import { StyleProp, ViewProps, ViewStyle } from 'react-native';
+export type SpinnerSize = 'sm' | 'md' | 'lg';
+export interface SpinnerProps extends Omit<ViewProps, 'style'> {
+    /** Size of the spinner. Defaults to `"md"`. */
+    size?: SpinnerSize;
+    /**
+     * Accessible label announced by screen readers. Defaults to
+     * `"Loading…"`. Set to `""` to silence if a sibling label is present.
+     */
+    label?: string;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Indeterminate loading indicator following the Adwaita spinner style.
+ *
+ * Rebuilt on `Animated.View` rather than ported from `@gnome-ui/react`'s
+ * pure-CSS `@keyframes spin` animation: the ring itself reuses the same
+ * per-side-border trick the CSS does (`borderColor` for the track,
+ * `borderTopColor` for the accent-colored "head" of the spinner, on a
+ * `borderRadius: 50%` circle) — that part translates directly, since RN's
+ * `View` supports independent per-side border colors too. The rotation
+ * itself is an `Animated.loop`d `Animated.timing` driving a `rotate`
+ * transform, `useNativeDriver: true` since only a transform is animated.
+ *
+ * `useReducedMotion()` mirrors the source CSS's own
+ * `@media (prefers-reduced-motion: reduce) { animation-duration: 2s }` —
+ * slowed to 2s, not stopped outright, exactly matching the web behavior
+ * rather than dropping the animation entirely.
+ *
+ * RN's `AccessibilityRole` union has no "status" value (the web version's
+ * `role="status"`); `"progressbar"` is the closest match for an
+ * indeterminate loading indicator and is what's used here — omitting
+ * `accessibilityValue` is RN's equivalent of omitting `aria-valuenow` for
+ * an indeterminate progress bar. `@gnome-ui/react`'s two hardcoded
+ * per-color-scheme track colors (the `--gnome-spinner-track-color` CSS
+ * variable is referenced but never actually defined in `@gnome-ui/core`'s
+ * tokens, so the CSS fallback value is always what renders) are ported as
+ * the same hardcoded `rgba()` pair, branched on `useResolvedColorScheme()`
+ * — the same pattern `Switch`/`Checkbox`/`RadioButton` already use for
+ * colors the source CSS hardcodes rather than tokenizes.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/style-classes.html
+ */
+export declare const Spinner: ({ size, label, style, ...viewProps }: SpinnerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export type { SpinnerProps, SpinnerSize } from './Spinner';
+export { Spinner } from './Spinner';

package/dist/components/Switch/Switch.d.ts

@@ -0,0 +1,34 @@
+import { PressableProps, StyleProp, View, ViewStyle } from 'react-native';
+export interface SwitchProps extends Omit<PressableProps, 'children' | 'style' | 'onPress'> {
+    /** Whether the switch is on. */
+    value: boolean;
+    /** Called with the next value when the switch is pressed. */
+    onValueChange?: (value: boolean) => void;
+    /** Accessible label. Required when no visible label is associated. */
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * On/off toggle following the Adwaita switch style.
+ *
+ * Rebuilt on `Pressable`/`Animated.View` rather than ported from
+ * `@gnome-ui/react`'s `<input type="checkbox" role="switch">`: RN has no
+ * checkbox primitive to style, and the platform-supplied `Switch` can't be
+ * skinned to match Adwaita, so the track and thumb are drawn by hand.
+ * `value`/`onValueChange` (not `checked`/`onChange`) mirror RN's own
+ * `Switch` API, which is the ecosystem convention this component overlaps
+ * with — it's fully controlled, with no `defaultValue` escape hatch.
+ *
+ * Two of `Switch.module.css`'s colors are hardcoded per color scheme
+ * inside a component-level `@media (prefers-color-scheme: dark)` block
+ * rather than driven by a semantic token, so — unlike `Button`/`Link`/
+ * `TextField`, which read a single token that already resolves correctly
+ * per theme — the unchecked track/thumb colors here branch explicitly on
+ * `useResolvedColorScheme()` to match. Track background/border color
+ * animate (mirroring the CSS `transition` on `.switch`); the thumb's own
+ * fill color does not, since the source CSS only transitions its
+ * `transform`, not its `background-color`.
+ *
+ * @see https://developer.gnome.org/hig/patterns/controls/switches.html
+ */
+export declare const Switch: import('react').ForwardRefExoticComponent<SwitchProps & import('react').RefAttributes<View>>;

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

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

package/dist/components/Tabs/TabBar.d.ts

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+import { ScrollView, ScrollViewProps, StyleProp, ViewStyle } from 'react-native';
+export interface TabBarProps extends Omit<ScrollViewProps, 'style' | 'horizontal' | 'children'> {
+    children?: ReactNode;
+    /** Accessible label for the tab list. */
+    accessibilityLabel?: string;
+    /**
+     * Removes the header-bar background so the tab bar blends into any surface.
+     * Use when placing the bar inside a card, content area, or custom container.
+     * Mirrors the `.inline` style class.
+     */
+    inline?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Horizontal, horizontally-scrollable tab bar that holds `TabItem` elements.
+ *
+ * Rebuilt on a horizontal `ScrollView` rather than ported from
+ * `@gnome-ui/react`'s `overflow-x: auto` `<div role="tablist">` — RN's
+ * `AccessibilityRole` union does include `"tablist"`, so that semantic
+ * carries over directly, but the web version's roving-tabindex ← → / Home /
+ * End keyboard navigation doesn't: RN's touch-first focus model has no
+ * per-app arrow-key convention to port, so it's dropped here rather than
+ * faking it.
+ *
+ * `style={{ flexGrow: 0 }}` on the `ScrollView` is deliberate, not
+ * decorative — a horizontal `ScrollView` with no explicit `flexGrow` can
+ * stretch to fill the cross-axis of whatever flex column it's placed in
+ * (confirmed the hard way debugging the example app's own tab-like
+ * `ControlsBar`), so it's baked in here once rather than left for every
+ * consumer to rediscover.
+ *
+ * @see https://developer.gnome.org/hig/patterns/nav/tabs.html
+ */
+export declare const TabBar: import('react').ForwardRefExoticComponent<TabBarProps & import('react').RefAttributes<ScrollView>>;

package/dist/components/Tabs/TabItem.d.ts

@@ -0,0 +1,54 @@
+import { ReactNode } from 'react';
+import { PressableProps, View } from 'react-native';
+export interface TabItemProps extends Omit<PressableProps, 'children' | 'style' | 'disabled'> {
+    /** Tab label. */
+    label: string;
+    /**
+     * Icon placed before the label. Rendered as-is — size/color it yourself.
+     * Web's `icon` takes an `@gnome-ui/icons` `IconDefinition`; this package
+     * has no SVG icon system (see [[react-native-port-status]]), so it's a
+     * plain `ReactNode` here instead, same as `ActionRow`'s `leading`.
+     */
+    icon?: ReactNode;
+    /** Marks this tab as the currently selected one. */
+    active?: boolean;
+    /**
+     * When provided, a close (×) button is rendered at the trailing edge.
+     * Called when the user taps the close button.
+     */
+    onClose?: () => void;
+    /** Accessible label for the close button. Defaults to `"Close tab"`. */
+    closeLabel?: string;
+    /** Optional count shown as a small badge next to the label. Values above 99 render as "99+". */
+    count?: number;
+    disabled?: boolean;
+}
+/**
+ * Individual tab button inside a `TabBar`.
+ *
+ * Web's `panelId` (which sets `aria-controls`) is dropped — RN has no ARIA
+ * relationship attributes, so there's nothing for it to wire up; keep the
+ * tab ↔ panel link in your own state instead. The count badge is a small
+ * inline pill rather than the web version's separate `Badge` component,
+ * since `Badge` hasn't been ported to this package yet and pulling in a
+ * whole new component just for this one pill would be scope creep.
+ *
+ * The close button is a nested `Pressable` inside the tab's own
+ * `Pressable` — unlike the web version, no explicit "stop propagation" is
+ * needed: RN's touch responder system grants an in-progress touch to the
+ * innermost view that claims it, so pressing the close button never also
+ * fires the outer tab's `onPress`. It also gets a `hitSlop` the web
+ * version has no equivalent of, since its 18×18 visual size is well under
+ * the ~44pt touch target guidance both major mobile platforms recommend.
+ *
+ * The label `Text` deliberately has no `flex: 1` (unlike the web version's
+ * `.tabLabel`) — the outer `Pressable`'s width here is content-driven
+ * (`minWidth`/`maxWidth`, not a definite width), and giving a `flex: 1`
+ * child to a row whose own width isn't definite collapses that child to a
+ * near-zero width in Yoga (confirmed visually: every label truncated to
+ * 3-4 characters despite ample room). CSS flexbox resolves this fine
+ * because browsers can grow a flex child within an intrinsically-sized
+ * container; Yoga can't. `numberOfLines`/`ellipsizeMode` alone are enough
+ * to truncate genuinely-too-long labels against `maxWidth`.
+ */
+export declare const TabItem: import('react').ForwardRefExoticComponent<TabItemProps & import('react').RefAttributes<View>>;

package/dist/components/Tabs/TabPanel.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import { StyleProp, View, ViewProps, ViewStyle } from 'react-native';
+export interface TabPanelProps extends Omit<ViewProps, 'style'> {
+    /** Controls whether this panel is visible. */
+    active?: boolean;
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Content panel associated with a `TabItem`.
+ *
+ * Web's `id` (paired with `TabItem`'s `panelId`, together wiring up
+ * `aria-controls`) is dropped on both sides here — RN has no ARIA
+ * relationship attributes for it to drive, so track which tab is active in
+ * your own state (index, key, whatever) and pass the matching panel
+ * `active={true}` directly, rather than reaching for an id-matching
+ * convention with nothing underneath it.
+ *
+ * Hidden panels stay mounted with `display: 'none'` rather than being
+ * conditionally unmounted — same as the web version keeping them in the
+ * DOM via the `hidden` attribute — so a panel's internal state (scroll
+ * position, form input, etc.) survives switching tabs away and back. RN
+ * has no `"tabpanel"` value in its `AccessibilityRole` union (unlike
+ * `TabBar`'s `"tablist"` and `TabItem`'s `"tab"`, both of which do exist),
+ * so no role is set here — same reasoning as `Separator` dropping a role
+ * RN doesn't have rather than reaching for an inaccurate substitute.
+ */
+export declare const TabPanel: import('react').ForwardRefExoticComponent<TabPanelProps & import('react').RefAttributes<View>>;

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

@@ -0,0 +1,6 @@
+export type { TabBarProps } from './TabBar';
+export { TabBar } from './TabBar';
+export type { TabItemProps } from './TabItem';
+export { TabItem } from './TabItem';
+export type { TabPanelProps } from './TabPanel';
+export { TabPanel } from './TabPanel';

package/dist/components/Text/Text.d.ts

@@ -0,0 +1,26 @@
+import { TextProps as RNTextProps, Text as RNText } from 'react-native';
+export type TextVariant = 'large-title' | 'title-1' | 'title-2' | 'title-3' | 'title-4' | 'heading' | 'body' | 'document' | 'caption' | 'caption-heading' | 'monospace' | 'numeric';
+export type TextColor = 'default' | 'dim' | 'accent' | 'destructive' | 'success' | 'warning' | 'error';
+export interface TextProps extends RNTextProps {
+    /** Typography style. Mirrors Adwaita / GNOME HIG text styles. */
+    variant?: TextVariant;
+    /** Semantic color. */
+    color?: TextColor;
+    children?: RNTextProps['children'];
+}
+/**
+ * Text component following GNOME Human Interface Guidelines typography styles.
+ *
+ * Variants map directly to Adwaita style classes:
+ * `large-title`, `title-1`–`title-4`, `heading`, `body`, `document`,
+ * `caption`, `caption-heading`, `monospace`, `numeric`.
+ *
+ * Rebuilt on RN's `Text` rather than ported from `@gnome-ui/react`'s DOM-based
+ * JSX: there is no element to pick, so `@gnome-ui/react`'s `as` prop is
+ * replaced by `accessibilityRole`, which the heading variants default to
+ * `"header"`.
+ *
+ * @see https://developer.gnome.org/hig/guidelines/typography.html
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/style-classes.html
+ */
+export declare const Text: import('react').ForwardRefExoticComponent<TextProps & import('react').RefAttributes<RNText>>;

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

@@ -0,0 +1,2 @@
+export type { TextColor, TextProps, TextVariant } from './Text';
+export { Text } from './Text';

package/dist/components/TextField/TextField.d.ts

@@ -0,0 +1,37 @@
+import { StyleProp, TextInput, TextInputProps, TextStyle, ViewStyle } from 'react-native';
+export interface TextFieldProps extends Omit<TextInputProps, 'style'> {
+    /** Visible label rendered above the input. */
+    label?: 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 input border.
+     */
+    error?: string;
+    /** Style applied to the wrapping `View`. */
+    style?: StyleProp<ViewStyle>;
+    /** Style applied to the `TextInput` itself. */
+    inputStyle?: StyleProp<TextStyle>;
+}
+/**
+ * Single-line text input with label, helper text, and error state.
+ *
+ * Follows the Adwaita `GtkEntry` / `.entry` style class.
+ *
+ * Rebuilt on RN's `TextInput` rather than ported from `@gnome-ui/react`'s
+ * `<input>`: there's no `<label htmlFor>`/`aria-describedby` pairing on RN,
+ * so `label` doubles as `accessibilityLabel` and `error`/`helperText`
+ * double as `accessibilityHint` — announced together with the input the
+ * same way `aria-describedby` reads them on the web. `:focus-visible`'s
+ * accent border becomes plain `onFocus`/`onBlur` state — RN has no
+ * hover/keyboard-vs-pointer focus distinction to mirror, and no outer
+ * `box-shadow` ring, so focus is just a border-color change rather than a
+ * grown ring. The web version's `disabled` prop is RN's own
+ * `editable={false}` — mirrored here as a dimmed wrapper the same way
+ * `@gnome-ui/react`'s `.disabled` class dims the label and hint alongside
+ * the input.
+ *
+ * @see https://developer.gnome.org/hig/patterns/controls/text-fields.html
+ */
+export declare const TextField: import('react').ForwardRefExoticComponent<TextFieldProps & import('react').RefAttributes<TextInput>>;

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

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

package/dist/components/Toast/Toast.d.ts

@@ -0,0 +1,58 @@
+import { ReactNode } from 'react';
+import { StyleProp, ViewProps, ViewStyle } from 'react-native';
+export interface ToastProps extends Omit<ViewProps, 'style'> {
+    /** The notification message. Keep it short — one sentence. */
+    title: ReactNode;
+    /**
+     * Auto-dismiss timeout in milliseconds.
+     * - Set to `0` to disable auto-dismiss (user must press action or dismiss).
+     * - Defaults to `3000`.
+     */
+    duration?: number;
+    /** Called when the toast should be removed — after timeout or user action. */
+    onDismiss?: () => void;
+    /** Label for the optional action button. */
+    actionLabel?: string;
+    /** Called when the user presses the action button. */
+    onAction?: () => void;
+    /** Whether to show a manual dismiss (×) button. */
+    dismissible?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Non-blocking temporary notification following the Adwaita `AdwToast`
+ * pattern. Auto-dismisses after `duration` ms (default 3s, `0` disables
+ * it); the timer pauses while the toast is pressed and held. Use inside
+ * `Toaster` for correct positioning and stacking.
+ *
+ * The auto-dismiss/pause timer logic (`timerRef`/`remainingRef`/
+ * `startedAtRef`) is ported verbatim from `@gnome-ui/react` — it's plain
+ * `setTimeout`/`Date.now()` bookkeeping, no DOM API involved, so nothing
+ * platform-specific to change. The pause trigger is: RN has no hover, so
+ * `onPressIn`/`onPressOut` (touch-down/touch-up) stand in for the web
+ * version's `onMouseEnter`/`onMouseLeave` — pausing while the user is
+ * actively touching the toast, the closest RN analog to "giving the user
+ * time to read it." `onFocus`/`onBlur`-triggered pausing (keyboard
+ * accessibility on web) has no port here — the outer card itself isn't a
+ * focusable element in RN's touch-first model, only its action/dismiss
+ * buttons are, and RN has no "focus-within" primitive to detect that
+ * without an extra dependency.
+ *
+ * The entrance is an `Animated.timing` fading + sliding + scaling in
+ * (`opacity`/`translateY`/`scale`, all transform-safe for
+ * `useNativeDriver: true`), matching the web version's `@keyframes
+ * toast-in`; `useReducedMotion()` skips straight to the settled state,
+ * matching the source CSS's `animation: none`. There's no exit animation
+ * to port either — the web version doesn't define one, removal is
+ * immediate once the consumer drops the `Toast` from its list.
+ *
+ * RN's `AccessibilityRole` union has no "status" value (the web version's
+ * `role="status"`); `"alert"` is the closest available role for content
+ * that should interrupt and be announced, paired with
+ * `accessibilityLiveRegion="polite"` (Android's live-region API) as the
+ * nearest match to the web's `aria-live="polite"` — deliberately not
+ * `"assertive"`, matching the same politeness level the source chose.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Toast.html
+ */
+export declare const Toast: ({ title, duration, onDismiss, actionLabel, onAction, dismissible, style, ...viewProps }: ToastProps) => import("react/jsx-runtime").JSX.Element;