@gnome-ui/react-native 1.10.0 → 1.12.0

package/README.md

@@ -294,6 +294,43 @@ announces the same thing, mirroring the web version's `aria-label` on its
 icon span. Unlike the web `Link`, RN has no tab concept, so `external` is
 purely presentational — `href` always opens the same way regardless.
 
+### LinkedGroup
+
+```tsx
+import { Button, LinkedGroup } from '@gnome-ui/react-native';
+
+<LinkedGroup>
+  <Button>Cut</Button>
+  <Button>Copy</Button>
+  <Button>Paste</Button>
+</LinkedGroup>
+```
+
+Renders children as a single visually-connected unit with no gap and
+merged borders — the canonical GNOME pattern for button groups and
+segmented inputs. Mirrors `@gnome-ui/react`'s `LinkedGroup`, itself
+mirroring the libadwaita `.linked` style class.
+
+The web version reaches every child's border-radius via a CSS `> *`
+universal child selector — RN has no equivalent way for a parent `View`
+to reach into an arbitrary child's own internally-computed styles.
+Reimagined as the same `cloneElement`-onto-children technique
+`Popover`/`Tooltip` already use on their own trigger: each child gets a
+computed corner-radius/negative-margin override merged onto whatever
+`style` it already has, generalizing the "zero the shared inner corners,
+keep `theme.radiusMd` on the outer ones, overlap by 1 dp to collapse the
+shared border" recipe `SplitButton` already proved for its own fixed
+two-piece connected border. This only works because every component in
+this package already merges a passed-in `style` prop last — the same
+assumption `Popover`'s own trigger-cloning already depends on, so any
+custom child passed to `LinkedGroup` needs to follow that same
+convention.
+
+The web CSS also raises a hovered/focused child's `z-index` so its own
+border isn't visually covered by the next sibling's overlapping edge —
+dropped here: RN is touch-first (no `:hover`), and no component in this
+package currently renders an escaping focus ring that overlap could clip.
+
 ### TextField
 
 ```tsx
@@ -1464,6 +1501,41 @@ thin composition of those same three pieces. `label` is required since the
 button has no visible text. Built as a genuine prerequisite for `Drawer`'s
 `rail`, not scope creep — every piece it composes already existed.
 
+### CopyButton
+
+```tsx
+import { CopyButton } from '@gnome-ui/react-native';
+
+<CopyButton value="CVE-2024-3094" />
+<CopyButton value={installCommand} label="Copy install command" copiedLabel="Added to clipboard" />
+```
+
+Icon button that copies `value` to the clipboard, swapping to a checkmark
+and a "Copied!" tooltip for `resetDelay` ms (default 2000) as confirmation
+— mirrors `@gnome-ui/react`'s `CopyButton`. RN has no `navigator.clipboard`,
+so this is built on `@react-native-clipboard/clipboard` (a new peer
+dependency, deliberately chosen over `expo-clipboard` so this package
+works the same in bare RN and Expo, not just this repo's own Expo example
+app — the same "no new peer dependency without a deliberate decision"
+standard `AnimatedIcon`'s `react-native-svg` addition was held to).
+
+**Real environment finding**: `@react-native-clipboard/clipboard`'s native
+module isn't part of Expo Go's preinstalled module set, so any app using
+this component needs a custom dev client (`npx expo prebuild` +
+`expo run:ios`/`run:android`) rather than plain Expo Go — confirmed by
+hitting `TurboModuleRegistry.getEnforcing(...): 'RNCClipboard' could not
+be found` in Expo Go before building this repo's own example app a dev
+client to verify the component on-device.
+
+Its `setString` is synchronous and void — unlike the web version's
+`navigator.clipboard.writeText`, which returns a `Promise` that can
+reject, there's no error channel to observe under normal operation.
+`onCopyError` is kept for API parity (and wraps the native call in a
+`try`/`catch` defensively) but in practice won't fire the way it can on
+web. The live-region announcement uses `role="status"` directly — RN's
+newer `Role` union does include `"status"`, unlike the older
+`AccessibilityRole` enum `Toast` had to substitute `"alert"` for.
+
 ### Drawer
 
 ```tsx
@@ -1494,6 +1566,44 @@ no exit keyframes at all, so this follows `Dialog`'s simpler animation
 shape instead. `backdrop-filter: blur(4px)` has no port (no native blur
 dependency in this package).
 
+### Toolbar
+
+```tsx
+import { Button, Spacer, Toolbar } from '@gnome-ui/react-native';
+
+<Toolbar>
+  <Button variant="flat">Cancel</Button>
+  <Spacer />
+  <Button variant="flat">Done</Button>
+</Toolbar>
+```
+
+Horizontal action bar following the libadwaita `.toolbar` pattern —
+mirrors `@gnome-ui/react`'s `Toolbar`. Directly portable, no web-only APIs
+— a flex row with `theme.space1` (6 dp) padding and gap, the standard
+spacing for rows of flat buttons in header bars, action bars, and tool
+rows. Use `Button variant="flat"` for buttons that blend into the bar, or
+`variant="raised"` for one that needs explicit elevation within a flat
+context. The web CSS's `color`/`font-family` on `.toolbar` are dropped —
+RN has no style inheritance from a parent `View` down to child `Text`
+the way CSS `color` cascades, so a value there would reach nothing (every
+child, e.g. `Button`, already sets its own explicit colors).
+
+### Spacer
+
+```tsx
+import { Spacer } from '@gnome-ui/react-native';
+```
+
+Invisible `flex: 1` filler for `Toolbar` and `HeaderBar` — mirrors
+`@gnome-ui/react`'s `Spacer`. Place between leading and trailing groups to
+push trailing items to the end. `accessible={false}` mirrors the web
+version's `aria-hidden="true"` — the same "purely decorative, exclude
+from the accessibility tree entirely" call `Separator` already made,
+rather than reaching for `role`'s newer `"separator"` value (which
+exists, but implies a divider a screen reader user might care about — a
+plain flex filler has no such meaning).
+
 ### AvatarGroup
 
 ```tsx
@@ -2330,6 +2440,36 @@ nesting one `Pressable` inside another would create two overlapping tap
 targets. `aria-labelledby` has no RN equivalent, so `accessibilityLabel`
 combines the title and subtitle instead.
 
+### SwitchRow
+
+```tsx
+import { BoxedList, SwitchRow } from '@gnome-ui/react-native';
+
+<BoxedList>
+  <SwitchRow
+    title="Wi-Fi"
+    subtitle="Home Network"
+    checked={wifi}
+    onCheckedChange={setWifi}
+  />
+</BoxedList>
+```
+
+Activatable row with an integrated switch, for use inside a `BoxedList`
+— mirrors `@gnome-ui/react`'s `SwitchRow`. The entire row is a single
+pressable; pressing anywhere toggles the switch, which is why this isn't
+`ActionRow` + a trailing `Switch` — `AdwSwitchRow` makes the whole row the
+interactive element, the same shape `CheckRow` already established for its
+checkbox. Use for a single on/off setting; prefer `CheckRow` for
+multi-select scenarios. Supports both controlled (`checked`) and
+uncontrolled (`defaultChecked`) modes, the same `isControlled`/internal-
+state-fallback shape already used by `Expander`/`ComboRow`/`Popover`/
+`CheckRow`. The switch visual reuses `Switch`'s exact track/thumb animation
+recipe, but as plain non-interactive `Animated.View`s rather than the real
+`Switch` component — nesting one `Pressable` inside another would create
+two overlapping tap targets. `aria-labelledby` has no RN equivalent, so
+`accessibilityLabel` combines the title and subtitle instead.
+
 ### ExpanderRow
 
 ```tsx
@@ -2407,6 +2547,40 @@ panel-height positioning almost verbatim, and gives each option row a
 leading checkbox-square visual instead of `Dropdown`'s single trailing
 checkmark.
 
+### NavigationSplitView
+
+```tsx
+import { NavigationSplitView } from '@gnome-ui/react-native';
+
+const [showContent, setShowContent] = useState(false);
+
+<NavigationSplitView
+  showContent={showContent}
+  sidebar={<MailList onSelect={() => setShowContent(true)} />}
+  content={<MailDetail onBack={() => setShowContent(false)} />}
+/>;
+```
+
+Two-pane sidebar + content layout following the Adwaita
+`AdwNavigationSplitView` pattern — mirrors `@gnome-ui/react`'s
+`NavigationSplitView`. On wide screens (`useBreakpoint().isNarrow ===
+false`, > 400 dp) both panes render side by side, separated by a
+`Separator`. On narrow screens only one pane shows at a time; `showContent`
+switches between the sidebar list and the detail view.
+
+The web version's `clamp(min, fraction * 100%, max)` sidebar width has no
+RN equivalent, so the container measures its own width via `onLayout` and
+the same clamp is computed in JS. Narrow-mode pane switching is animated
+(`translateX`) rather than an instant `display: 'none'` swap like
+`TabPanel` — both panes stay laid out and absolutely positioned, sliding
+via one shared `Animated.Value`, since RN `transform` has no
+percentage-of-self units to use a bare `-100%`/`100%` the way the web CSS
+does. The web's `inert` attribute (removes the hidden pane from the a11y
+tree and tab order while it stays mounted off-screen) has no single RN
+equivalent — reproduced with `accessibilityElementsHidden` +
+`importantForAccessibility="no-hide-descendants"` plus `pointerEvents="none"`
+so the off-screen pane can't intercept touches meant for the visible one.
+
 ### FilterableMultiSelectDropdown
 
 ```tsx
@@ -2486,6 +2660,35 @@ two independent `accessibilityRole="adjustable"` elements (one per thumb),
 the same VoiceOver/TalkBack increment/decrement analog `Slider` already
 established.
 
+### RatingStars
+
+```tsx
+import { RatingStars } from '@gnome-ui/react-native';
+
+// Read-only — omit onChange
+<RatingStars value={4.2} accessibilityLabel="Average rating: 4.2 out of 5" />
+
+// Interactive — pass onChange
+<RatingStars value={rating} onChange={setRating} />
+```
+
+Star rating display and input — mirrors `@gnome-ui/react`'s `RatingStars`.
+Renders `role="radiogroup"` of `role="radio"` stars when `onChange` is
+provided, or a static `role="img"` when it isn't (e.g. showing an
+average/read-only rating); passing `disabled` always falls back to the
+read-only display even with `onChange` provided. The web version's
+`radiogroup` layer also owns an `onKeyDown` handler for arrow-key
+roving-tabindex navigation and a mouse-hover preview that doesn't commit
+until clicked — neither has a touch counterpart, so both drop, the same
+standing convention `ToggleGroup` already established for this package.
+What's left, tapping a star to commit that rating, is a strict subset of
+the web interaction rather than an approximation of it. Each star's fill
+uses `tintColor={theme.warningBgColor}` rather than `Icon`'s fixed
+`color="yellow"` — the source CSS reads `var(--gnome-warning-bg-color)`
+directly with no `color-mix()` darkening step, so the semantic warning
+token (already tracking dark mode and every contrast level) is the exact
+match, not an approximation through the fixed palette.
+
 ### StatusBadge
 
 ```tsx
@@ -2504,6 +2707,112 @@ 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.
 
+### StepIndicator
+
+```tsx
+import { StepIndicator } from '@gnome-ui/react-native';
+
+<StepIndicator steps={5} currentStep={1} />
+
+<StepIndicator
+  steps={['Account', 'Profile', 'Payment', 'Confirm']}
+  currentStep={2}
+  onStepClick={setCurrentStep}
+/>
+
+<StepIndicator steps={4} currentStep={2} orientation="vertical" />
+```
+
+Numbered "Step X of Y" progress indicator for onboarding/wizard flows —
+mirrors `@gnome-ui/react`'s `StepIndicator`. Directly portable, no web-only
+APIs involved: each step's circle derives its state (upcoming/current/
+completed) purely from `currentStep`. Each circle animates its own
+border/background color (an independent pair of 0/1 `Animated.Value`s,
+one for "accented border" and one for "filled background", since they
+flip on different transitions) — the content swap between number and
+checkmark and the connector-line recolor are instant, matching the source
+CSS exactly (only `background-color`/`border-color` transition there).
+
+The connecting line between circles reuses the CSS trick verbatim —
+`position: absolute; left: '50%'; width: '100%'` inside each equal-width
+flex item, so the line runs from one circle's center to the next's;
+`left`/`width` percentages are valid RN position/dimension values, unlike
+the `transform: translateX('50%')` trick this package avoids elsewhere.
+The checkmark uses `tintColor` rather than `color`, since RN icons have no
+`currentColor` to inherit — the same call `BottomTabBar`'s active-tab icon
+already made for tracking the *configurable* accent.
+
+The outer container sets `role="navigation"` **without** `accessible` —
+the `ToggleGroup`-established pattern for a grouping role over multiple
+independently-focusable children (each step circle): `accessible` here
+would collapse the whole indicator into one VoiceOver stop on iOS. Assert
+`element.props.role` on a `testID` in tests instead of
+`getByRole('navigation')`. A completed step's circle becomes a `Pressable`
+only when `onStepClick` is provided — the current and upcoming steps are
+never pressable, matching the web version.
+
+### Timeline
+
+```tsx
+import { Timeline } from '@gnome-ui/react-native';
+
+<Timeline
+  items={[
+    { leading: <Text color="dim">10:00</Text>, icon: <Icon icon={Check} tintColor={theme.accentFgColor} />, content: <Text>Approved</Text> },
+    { content: <Text>Pending review</Text> },
+  ]}
+/>
+
+<Timeline orientation="horizontal" variant="dotted" items={steps} />
+```
+
+Ordered sequence of events connected by a visual timeline — mirrors
+`@gnome-ui/react`'s `Timeline`. An original composition (no direct
+libadwaita widget), following GNOME HIG activity-feed/stepper patterns.
+
+The web version aligns every item's `leading` column (vertical) or row
+(horizontal) via CSS subgrid, so timestamps/labels line up across items
+regardless of how wide/tall any single one of them is. RN/Yoga has no
+grid or subgrid at all, so that alignment is reproduced by measurement
+instead — the same `onLayout` + `Record<index, size>` +
+"largest-so-far wins" technique `Slider`'s mark labels already
+established. The node track itself additionally gets a fixed width
+(vertical, 24 dp, matching the source CSS's literal grid column) or
+height (horizontal, 28 dp, the larger of the dot/icon node sizes) so
+`content` starts at the same position across items even when dot and
+icon nodes are mixed in the same list.
+
+`orientation="horizontal"` wraps itself in a horizontal `ScrollView`,
+reimagining the web CSS's `overflow-x: auto`. The web version's
+`grid-auto-columns: minmax(72px, 1fr)` also grows items to fill leftover
+space when the row doesn't overflow; that half doesn't port (a
+`ScrollView`'s content isn't bounded the way a CSS grid track is) — each
+item gets a flat 72 dp `minWidth` instead, unconditionally scrollable.
+
+**Real, on-device-confirmed platform bug found while building `variant="dotted"`**:
+RN's `borderStyle: 'dotted'` renders nothing at all — no error, just
+invisible — unless *every* side shares the same width and color; the
+direct 1:1 port of the web CSS's single-side `border-left`/`border-top`
+dotted line (one bordered side, the other three left unset) silently
+produced no line whatsoever. Confirmed via the iOS Simulator with
+saturated debug colors: a uniform four-side `borderWidth`/`borderColor`
+renders the dotted pattern correctly, but reintroducing even three
+`transparent` sides (uniform width, per-side color) suppresses it again.
+Fixed by drawing the dotted connector as a narrow (6 dp) box with a
+uniform dotted border on all four sides instead of a single bordered
+edge — visually indistinguishable from a single dotted line at this
+thickness. **Any future dotted/dashed RN border needs all sides
+width-and-color-uniform — a single-side border in that style silently
+renders invisible.**
+
+`icon`/`leading`/`content` are plain `ReactNode`, the same as `PathBar`'s
+segment `icon` — the consumer sizes and colors their own icon (e.g.
+`tintColor={theme.accentFgColor}`), since RN has no `currentColor` for
+this component to tint an arbitrary child with. `role="list"`/
+`role="listitem"` are set without `accessible`, the same
+`ToggleGroup`/`StepIndicator`-established pattern for a grouping role
+over children that may themselves contain focusable content.
+
 ### WidgetManager
 
 ```tsx
@@ -2647,6 +2956,55 @@ 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.
 
+### ScrollToTop
+
+```tsx
+import { ScrollToTop } from '@gnome-ui/react-native';
+
+const scrollRef = useRef<ScrollView>(null);
+const [scrollY, setScrollY] = useState(0);
+
+<View style={{ flex: 1 }}>
+  <ScrollView
+    ref={scrollRef}
+    onScroll={(e) => setScrollY(e.nativeEvent.contentOffset.y)}
+    scrollEventThrottle={16}
+  >
+    {/* ... */}
+  </ScrollView>
+  <ScrollToTop
+    scrollY={scrollY}
+    onPress={() => scrollRef.current?.scrollTo({ y: 0, animated: true })}
+  />
+</View>;
+```
+
+Absolutely-positioned OSD button that scrolls a `ScrollView`/`FlatList`
+back to the top — mirrors `@gnome-ui/react`'s `ScrollToTop`, reimagined
+rather than ported 1:1: RN has no page-level scroll event to observe
+internally, so the web version's `useScrollToTopVisibility` (a `window`/
+element `scroll` listener) doesn't port at all. `visible="auto"` (the
+default) is instead a pure function of a `scrollY` number prop the
+consumer feeds from their own `ScrollView`'s `onScroll` — no internal
+state or listener needed. There's likewise no way for this component to
+scroll a `ScrollView`/`FlatList` on the consumer's behalf the way the web
+version calls `scrollTarget.scrollTo(...)` itself, so pressing the button
+calls the required `onPress` instead — typically
+`scrollRef.current?.scrollTo({ y: 0, animated: true })`.
+
+Same "no `document.body`/portal target" gap `Toaster` already documents —
+mount this yourself as the last child of the `View` wrapping your
+scrollable content so it paints on top; `pointerEvents="box-none"` (the
+same technique `Toaster` uses) keeps the empty space around the button
+from intercepting touches meant for the content underneath. The web
+version's resting `opacity: 0.5`-until-hover/focus is dropped, the same
+call `PasswordEntryRow`'s reveal button already made — that effect exists
+purely so the control can brighten on hover, and touch has no hover.
+`topInset`/`bottomInset` let you thread in your own
+`useSafeAreaInsets()` values for a `"top-*"`/`"bottom-*"` position, same
+as `BottomTabBar`'s `bottomInset` — this package takes no dependency on
+`react-native-safe-area-context` itself.
+
 ## Installation
 
 ```bash

package/dist/components/CopyButton/CopyButton.d.ts

@@ -0,0 +1,44 @@
+import { IconButtonProps } from '../IconButton';
+export interface CopyButtonProps extends Omit<IconButtonProps, 'icon' | 'label' | 'onPress' | 'tooltip'> {
+    /** The text copied to the clipboard when the button is activated. */
+    value: string;
+    /** Accessible label and tooltip shown before copying. Defaults to `"Copy"`. */
+    label?: string;
+    /** Accessible label and tooltip shown briefly after a successful copy. Defaults to `"Copied!"`. */
+    copiedLabel?: string;
+    /** How long the "copied" confirmation state is shown, in milliseconds. Defaults to `2000`. */
+    resetDelay?: number;
+    /**
+     * Called after `value` is written to the clipboard.
+     * Named `onCopied` (not `onCopy`), mirroring the web version's own naming.
+     */
+    onCopied?: (value: string) => void;
+    /**
+     * Called if the copy attempt throws. Kept for API parity with the web
+     * version's `onCopyError` (whose `navigator.clipboard.writeText` can
+     * reject, e.g. on permission denial) — but `@react-native-clipboard/
+     * clipboard`'s `setString` is a synchronous, void-returning native call
+     * with no error channel at all, so in normal operation this won't fire
+     * the way it can on web. Kept as a defensive catch around the native
+     * call (a real, if unlikely, synchronous throw) rather than removed.
+     */
+    onCopyError?: (error: unknown) => void;
+}
+/**
+ * Icon button that copies `value` to the clipboard, swapping to a checkmark
+ * and a "Copied!" tooltip for `resetDelay` ms as confirmation — mirrors
+ * `@gnome-ui/react`'s `CopyButton`.
+ *
+ * RN has no `navigator.clipboard`, so this is built on
+ * `@react-native-clipboard/clipboard` (the community-standard clipboard
+ * module, not `expo-clipboard` — chosen so this package works the same in
+ * bare RN and Expo, not just this repo's own Expo example app). Its
+ * `setString` is synchronous and void — see `onCopyError`'s doc for what
+ * that means for error handling.
+ *
+ * The live-region announcement uses `role="status"` directly (RN's newer
+ * `Role` union does include `"status"`, unlike the older
+ * `AccessibilityRole` enum `Toast` had to substitute `"alert"` for) plus
+ * `accessibilityLiveRegion="polite"` for Android's announcement mechanism.
+ */
+export declare const CopyButton: ({ value, label, copiedLabel, resetDelay, onCopied, onCopyError, ...props }: CopyButtonProps) => import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/LinkedGroup/LinkedGroup.d.ts

@@ -0,0 +1,50 @@
+import { ReactNode } from 'react';
+import { StyleProp, View, ViewStyle } from 'react-native';
+export interface LinkedGroupProps {
+    /**
+     * Each child must accept and merge a `style` prop the way every
+     * `@gnome-ui/react-native` component already does (`style` last in its
+     * own internal style array) — see the component doc for why.
+     */
+    children: ReactNode;
+    /** Stack children vertically instead of horizontally. */
+    vertical?: boolean;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * Renders children as a single visually-connected unit with no gap and
+ * merged borders — the canonical GNOME pattern for button groups and
+ * segmented inputs. Mirrors `@gnome-ui/react`'s `LinkedGroup`, itself
+ * mirroring the libadwaita `.linked` style class.
+ *
+ * The web version reaches every child's border-radius via a CSS
+ * `> *` universal child selector — RN has no equivalent way for a parent
+ * `View` to reach into an arbitrary child's own internally-computed
+ * styles. Reimagined instead as the same `cloneElement`-onto-children
+ * technique `Popover`/`Tooltip` already use on their own trigger:
+ * each child gets a computed corner-radius/negative-margin override
+ * merged onto whatever `style` it already has, using the same
+ * "zero the shared inner corners, keep `theme.radiusMd` on the outer
+ * ones, overlap by 1 dp to collapse the shared border" recipe
+ * `SplitButton` already proved for its own two-piece connected border —
+ * generalized here from a fixed two children to an arbitrary list. This
+ * only works because every component in this package already merges a
+ * passed-in `style` prop last, the same assumption `Popover`'s own
+ * trigger-cloning already depends on.
+ *
+ * The web CSS also raises a hovered/focused child's `z-index` so its own
+ * border isn't visually covered by the next sibling's overlapping edge —
+ * dropped here: RN is touch-first (no `:hover`), and no component in this
+ * package currently renders an escaping focus ring that overlap could
+ * clip, so there's nothing yet for the z-index bump to protect.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1-latest/style-classes.html#linked-style-class
+ *
+ * @example
+ * <LinkedGroup>
+ *   <Button variant="flat">Bold</Button>
+ *   <Button variant="flat">Italic</Button>
+ * </LinkedGroup>
+ */
+export declare const LinkedGroup: import('react').ForwardRefExoticComponent<LinkedGroupProps & import('react').RefAttributes<View>>;

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

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

package/dist/components/NavigationSplitView/NavigationSplitView.d.ts

@@ -0,0 +1,69 @@
+import { ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export interface NavigationSplitViewProps {
+    /**
+     * The sidebar / list pane (left side on wide screens).
+     * On narrow screens this is the "list" view shown when `showContent` is false.
+     */
+    sidebar: ReactNode;
+    /**
+     * The detail / content pane (right side on wide screens).
+     * On narrow screens this is the "detail" view shown when `showContent` is true.
+     */
+    content: ReactNode;
+    /**
+     * Controls which pane is visible on narrow screens (≤ 400 dp).
+     * - `false` (default) — show the sidebar list.
+     * - `true` — show the content detail.
+     *
+     * Has no effect on wide screens where both panes are visible simultaneously.
+     */
+    showContent?: boolean;
+    /** Minimum sidebar width in dp. Defaults to `180`. */
+    minSidebarWidth?: number;
+    /** Maximum sidebar width in dp. Defaults to `280`. */
+    maxSidebarWidth?: number;
+    /** Fraction of total width given to the sidebar (0–1). Defaults to `0.25`. */
+    sidebarWidthFraction?: number;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * Two-pane sidebar + content layout following the Adwaita
+ * `AdwNavigationSplitView` pattern — mirrors `@gnome-ui/react`'s
+ * `NavigationSplitView`.
+ *
+ * On **wide** screens (`useBreakpoint().isNarrow === false`, > 400 dp) both
+ * panes are visible side-by-side, separated by a `Separator`. On **narrow**
+ * screens only one pane is shown at a time; `showContent` switches between
+ * the sidebar list and the detail view.
+ *
+ * The web version's `clamp(min, fraction * 100%, max)` sidebar width has no
+ * RN equivalent (`StyleSheet` values aren't CSS `calc`/`clamp` expressions),
+ * so the container measures its own width via `onLayout` and the same clamp
+ * is computed in JS — `0` until the first layout pass resolves, the same
+ * one-frame imprecision this package already accepts elsewhere (e.g.
+ * `ProgressBar`'s `trackWidth`-dependent math).
+ *
+ * Narrow-mode pane switching is animated (`translateX`, matching the web
+ * CSS's own `transition: transform`), so — unlike `TabPanel`'s simpler
+ * `display: 'none'` swap — both panes stay laid out and absolutely
+ * positioned rather than being removed from flow, using the same measured
+ * container width for the slide distance (RN `transform` has no
+ * percentage-of-self units, so this can't be a bare `-100%`/`100%` the way
+ * the web version's CSS is). One shared `Animated.Value` drives both
+ * panes' opposite-direction translation, the same "skip the animation on
+ * initial mount, only animate subsequent prop changes" guard `Switch`/
+ * `StepIndicator` already established for a controlled boolean prop.
+ *
+ * The web's `inert` attribute (removes the hidden pane from both the a11y
+ * tree and the tab order while it stays mounted off-screen) has no single
+ * RN equivalent — reproduced with `accessibilityElementsHidden` +
+ * `importantForAccessibility="no-hide-descendants"` (the whole-subtree a11y
+ * exclusion, not just the single-element `"no"` `PathBar`'s decorative
+ * separator uses) plus `pointerEvents="none"` so the off-screen pane can't
+ * intercept touches meant for the visible one.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.NavigationSplitView.html
+ */
+export declare const NavigationSplitView: ({ sidebar, content, showContent, minSidebarWidth, maxSidebarWidth, sidebarWidthFraction, style, testID, }: NavigationSplitViewProps) => import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/RatingStars/RatingStars.d.ts

@@ -0,0 +1,48 @@
+import { StyleProp, ViewStyle } from 'react-native';
+import { IconSize } from '../Icon';
+export interface RatingStarsProps {
+    /** Current rating, between `0` and `max`. */
+    value: number;
+    /** Number of stars. Defaults to `5`. */
+    max?: number;
+    /**
+     * Called when the user picks a rating. Omit to render a read-only
+     * display (e.g. an average rating) instead of an interactive input.
+     */
+    onChange?: (value: number) => void;
+    /** Star size. Defaults to `"md"`. */
+    size?: IconSize;
+    /** Renders as read-only even when `onChange` is provided. */
+    disabled?: boolean;
+    /** Accessible label. Defaults to `"Rating"` (interactive) or a generated `"N out of M stars"` (read-only). */
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * Star rating display and input. Mirrors `@gnome-ui/react`'s `RatingStars`.
+ *
+ * Renders `role="radiogroup"` of `role="radio"` stars when `onChange` is
+ * provided, or a static `role="img"` when it isn't — e.g. for showing an
+ * average/read-only rating.
+ *
+ * The web version's `role="radiogroup"` layer also owns an `onKeyDown`
+ * handler for arrow-key roving-tabindex navigation and a mouse-hover
+ * preview that doesn't commit until clicked; neither has a touch
+ * counterpart, so both drop — same standing convention `ToggleGroup`
+ * already established for this package (its own doc comment covers the
+ * reasoning). What's left, tapping a star to commit that rating, is a
+ * strict subset of the web interaction, not an approximation of it.
+ *
+ * Each star's fill color is `tintColor={theme.warningBgColor}` rather than
+ * `Icon`'s own fixed `color="yellow"` (→ `theme.yellow4`, a different hex):
+ * the source CSS reads `var(--gnome-warning-bg-color, #f6d32d)` directly
+ * with no `color-mix()` darkening step, so the semantic warning token
+ * itself — already tracking dark mode and every contrast level — is the
+ * exact match, not an approximation through the fixed palette. Stars carry
+ * no `label` on `Icon` (decorative — `iconAccessibilityProps` already hides
+ * an unlabeled icon from the tree); the accessible name lives on the
+ * container (read-only) or each `Pressable` (interactive) instead, mirroring
+ * `ToggleGroupItem`'s icon-only items.
+ */
+export declare const RatingStars: ({ value, max, onChange, size, disabled, accessibilityLabel, style, testID, }: RatingStarsProps) => import("react/jsx-runtime").JSX.Element;

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

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