@gnome-ui/react-native 1.11.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
@@ -2510,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
@@ -2589,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

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