@gnome-ui/react-native 1.4.0 → 1.6.0

package/dist/components/FileTypeIcon/fileType.d.ts

@@ -0,0 +1,8 @@
+import { IconDefinition } from '@gnome-ui/icons';
+export type FileTypeCategory = 'folder' | 'image' | 'audio' | 'video' | 'text' | 'pdf' | 'archive' | 'document' | 'spreadsheet' | 'presentation' | 'font' | 'executable' | 'unknown';
+/** Resolves a file-type category from a MIME type (e.g. `"image/png"`). */
+export declare function categoryFromMimeType(mimeType: string): FileTypeCategory | null;
+/** Resolves a file-type category from a file name's extension (e.g. `"report.pdf"`). */
+export declare function categoryFromName(name: string): FileTypeCategory | null;
+export declare function getFileTypeIcon(category: FileTypeCategory): IconDefinition;
+export declare function getFileTypeLabel(category: FileTypeCategory): string;

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

@@ -0,0 +1,3 @@
+export type { FileTypeIconProps } from './FileTypeIcon';
+export { FileTypeIcon } from './FileTypeIcon';
+export type { FileTypeCategory } from './fileType';

package/dist/components/IconButton/IconButton.d.ts

@@ -0,0 +1,34 @@
+import { IconDefinition } from '@gnome-ui/icons';
+import { View } from 'react-native';
+import { ButtonProps, ButtonSize, ButtonVariant } from '../Button';
+import { IconSize } from '../Icon';
+import { TooltipPlacement } from '../Tooltip';
+export type IconButtonVariant = ButtonVariant | 'osd';
+export type IconButtonSize = ButtonSize;
+export interface IconButtonProps extends Omit<ButtonProps, 'accessibilityLabel' | 'children' | 'leadingIcon' | 'osd' | 'shape' | 'trailingIcon' | 'variant'> {
+    /** Icon definition imported from `@gnome-ui/icons`. */
+    icon: IconDefinition;
+    /** Accessible name for the icon-only button. */
+    label: string;
+    /** Visual style of the button. Use `"osd"` for media overlay controls. */
+    variant?: IconButtonVariant;
+    /** Size of the button. */
+    size?: IconButtonSize;
+    /** Override the rendered icon size. Defaults to a size matched to `size`. */
+    iconSize?: IconSize;
+    /** Optional tooltip label shown on long-press/hover/focus. */
+    tooltip?: string;
+    /** Preferred tooltip placement. */
+    tooltipPlacement?: TooltipPlacement;
+    /** Tooltip delay in milliseconds. */
+    tooltipDelay?: number;
+}
+/**
+ * Icon-only action button composed from `Button`, `Icon`, and optionally
+ * `Tooltip` — mirrors `@gnome-ui/react`'s `IconButton`, itself already just
+ * a thin composition of those same three pieces (its own JSDoc example
+ * shows the identical `<Tooltip><Button><Icon /></Button></Tooltip>`
+ * nesting `IconButton` here just formalizes into a named, reusable export).
+ * `label` is required since the button has no visible text.
+ */
+export declare const IconButton: import('react').ForwardRefExoticComponent<IconButtonProps & import('react').RefAttributes<View>>;

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

@@ -0,0 +1,2 @@
+export type { IconButtonProps, IconButtonSize, IconButtonVariant } from './IconButton';
+export { IconButton } from './IconButton';

package/dist/components/InlineViewSwitcher/InlineViewSwitcher.d.ts

@@ -0,0 +1,93 @@
+import { ReactNode } from 'react';
+import { StyleProp, View, ViewProps, ViewStyle } from 'react-native';
+import { InlineViewSwitcherVariant, VariantStyles } from './variants';
+export type { InlineViewSwitcherVariant } from './variants';
+export type InlineViewSwitcherOverflow = 'wrap' | 'scroll' | 'compact' | 'menu';
+/** Measured position of one item inside the switcher row. */
+export interface ItemLayout {
+    x: number;
+    width: number;
+}
+interface InlineViewSwitcherContextValue {
+    value: string;
+    onValueChange: (value: string) => void;
+    compact: boolean;
+    styles: VariantStyles;
+    onItemLayout: (name: string, layout: ItemLayout) => void;
+}
+export declare function useInlineViewSwitcher(): InlineViewSwitcherContextValue;
+export interface InlineViewSwitcherProps extends Omit<ViewProps, 'style'> {
+    /** Currently active view name. */
+    value: string;
+    /** Called with the new value when a view is selected. */
+    onValueChange: (value: string) => void;
+    /**
+     * Visual style of the switcher.
+     * - `default` — card background with border (same shape as `ToggleGroup`).
+     * - `flat`    — no background or border; active indicator only.
+     * - `round`   — pill-shaped container and items, solid accent indicator.
+     * - `pill`    — segmented-control style; active item appears lifted, no accent color.
+     */
+    variant?: InlineViewSwitcherVariant;
+    /**
+     * Overflow strategy when the container is too narrow for all items.
+     * - `wrap`    — default; items simply overflow.
+     * - `scroll`  — horizontal scroll, snapping each item to the start edge.
+     * - `compact` — collapses item labels to icons-only when overflowing (needs icons on all items).
+     * - `menu`    — shows the active item and a chevron; all items open in a `BottomSheet`.
+     */
+    overflow?: InlineViewSwitcherOverflow;
+    /** Accessible label for the group. */
+    accessibilityLabel?: string;
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Compact inline view switcher for content areas, cards, and toolbars —
+ * wherever `ViewSwitcher` (header-bar sized) would be too heavy. Mirrors
+ * `AdwInlineViewSwitcher` (libadwaita 1.7 / GNOME 48) and
+ * `@gnome-ui/react`'s own `InlineViewSwitcher`.
+ *
+ * All four variants and all four overflow strategies port, but almost none
+ * of the *mechanism* does — this is a rebuild, not a transliteration:
+ *
+ * - **The sliding indicator** is measured, not laid out. The web reads the
+ *   active button's `offsetLeft`/`offsetWidth` in a `useLayoutEffect`; here
+ *   each item reports its own `onLayout` up through the context, and the
+ *   indicator animates `translateX` + `width` to the active entry. Both run
+ *   on **one JS-driven animation** (`useNativeDriver: false`): `width` can't
+ *   be native-driven, and mixing a native and a JS value on one component
+ *   throws — the same trade-off `Expander` accepted for its own animated
+ *   height. `scaleX` would have been native-driveable but distorts the
+ *   indicator's corner radii, which is exactly what the variants shape.
+ *   `useReducedMotion()` snaps it into place instead, per this package's
+ *   per-component convention.
+ * - **Overflow detection** replaces `ResizeObserver` + `scrollWidth` vs
+ *   `clientWidth` with the item measurements already being collected: their
+ *   summed natural widths (RN defaults `flexShrink` to 0, so an overflowing
+ *   row reports each item's *natural* width rather than a squeezed one)
+ *   against the row's own `onLayout` width. The web's `naturalWidthRef`
+ *   capture and 30 px hysteresis port verbatim — without them, collapsing
+ *   the labels shrinks the content and would immediately re-expand it.
+ * - **`overflow="scroll"`** becomes a horizontal `ScrollView` with the
+ *   scrollbar hidden. `scroll-snap-align: start` has no RN style, but the
+ *   measured item offsets feed `snapToOffsets`, which reproduces it exactly.
+ * - **`overflow="menu"`** reuses the already-shipped `BottomSheet`, the same
+ *   component the web version reaches for.
+ *
+ * The ←/→/Home/End keyboard layer drops, as everywhere else in this package.
+ * As in `ToggleGroup`, the group takes `accessibilityRole="radiogroup"` but
+ * deliberately not `accessible`, which on iOS would collapse the items into
+ * a single unreachable element.
+ *
+ * @example
+ * const [view, setView] = useState('grid');
+ *
+ * <InlineViewSwitcher value={view} onValueChange={setView} variant="pill">
+ *   <InlineViewSwitcherItem name="grid" label="Grid" />
+ *   <InlineViewSwitcherItem name="list" label="List" />
+ * </InlineViewSwitcher>
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.InlineViewSwitcher.html
+ */
+export declare const InlineViewSwitcher: import('react').ForwardRefExoticComponent<InlineViewSwitcherProps & import('react').RefAttributes<View>>;

package/dist/components/InlineViewSwitcher/InlineViewSwitcherItem.d.ts

@@ -0,0 +1,25 @@
+import { IconDefinition } from '@gnome-ui/icons';
+import { PressableProps, View } from 'react-native';
+export interface InlineViewSwitcherItemProps extends Omit<PressableProps, 'children' | 'style' | 'disabled' | 'onPress'> {
+    /** String identifier — becomes the switcher's `value` when this item is active. */
+    name: string;
+    /** Visible label. */
+    label?: string;
+    /** Icon from `@gnome-ui/icons`. */
+    icon?: IconDefinition;
+    /** Accessible name. Required for icon-only items; defaults to `label`. */
+    accessibilityLabel?: string;
+    disabled?: boolean;
+}
+/**
+ * Individual view option inside an `InlineViewSwitcher`. Can be icon-only,
+ * label-only, or icon + label — for icon-only items always pass an
+ * `accessibilityLabel` so screen readers can identify the view.
+ *
+ * The item paints no background of its own for the active state: that's the
+ * parent's sliding indicator, which this component feeds by reporting its
+ * `onLayout` position and width up through the context. Only the label's
+ * color and weight change, exactly as in the web version — where the
+ * `.active` class also sets nothing but `color` and `font-weight`.
+ */
+export declare const InlineViewSwitcherItem: import('react').ForwardRefExoticComponent<InlineViewSwitcherItemProps & import('react').RefAttributes<View>>;

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

@@ -0,0 +1,4 @@
+export type { InlineViewSwitcherOverflow, InlineViewSwitcherProps, InlineViewSwitcherVariant, } from './InlineViewSwitcher';
+export { InlineViewSwitcher } from './InlineViewSwitcher';
+export type { InlineViewSwitcherItemProps } from './InlineViewSwitcherItem';
+export { InlineViewSwitcherItem } from './InlineViewSwitcherItem';

package/dist/components/InlineViewSwitcher/variants.d.ts

@@ -0,0 +1,30 @@
+import { TextStyle, ViewStyle } from 'react-native';
+import { GnomeThemeTokens } from '../../theme';
+export type InlineViewSwitcherVariant = 'default' | 'flat' | 'round' | 'pill';
+export interface VariantStyles {
+    container: ViewStyle;
+    /** Same values as `container.gap`/`container.padding`, kept as plain
+     *  numbers so the overflow math can add them up — `ViewStyle` types them
+     *  as `DimensionValue`, which may be a percentage string. */
+    gap: number;
+    padding: number;
+    item: ViewStyle;
+    iconOnlyItem: ViewStyle;
+    indicator: ViewStyle;
+    /** Inset of the indicator from the container's top/bottom edge. */
+    indicatorInset: number;
+    activeTextColor: string;
+    idleTextColor: string;
+}
+/**
+ * The four `.default`/`.flat`/`.round`/`.pill` CSS blocks, resolved against
+ * the theme. Every `color-mix(in srgb, accent N%, transparent)` becomes an
+ * 8-digit `#RRGGBBAA` hex off `theme.accentBgColor` (the `Chip`/`ToggleGroup`
+ * precedent, which keeps the tint following the app's configurable accent),
+ * and every `box-shadow` is dropped — the theme generator keeps shadow
+ * tokens in `raw` only and `Card` already settled that a border, or the
+ * surface contrast itself, carries the same separation on RN.
+ */
+export declare function getVariantStyles(theme: GnomeThemeTokens, variant: InlineViewSwitcherVariant, isDark: boolean): VariantStyles;
+/** Shared by the item label and the menu-sheet rows. */
+export declare function labelTextStyle(theme: GnomeThemeTokens, active: boolean, color: string): TextStyle;

package/dist/components/PreferencesGroup/PreferencesGroup.d.ts

@@ -0,0 +1,52 @@
+import { ReactNode } from 'react';
+import { StyleProp, View, ViewProps, ViewStyle } from 'react-native';
+export interface PreferencesGroupProps extends Omit<ViewProps, 'style'> {
+    /** Group heading. */
+    title?: string;
+    /** Optional description rendered below the title. */
+    description?: string;
+    /** Widget placed at the trailing edge of the title row (e.g. a reset `Button`). */
+    headerSuffix?: ReactNode;
+    /** `BoxedList` rows or any row-shaped content. */
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Titled section that wraps a `BoxedList` with an optional description,
+ * mirroring `AdwPreferencesGroup` and `@gnome-ui/react`'s own
+ * `PreferencesGroup`.
+ *
+ * Use it to group related settings under a named heading. The group is
+ * purely a layout and labelling wrapper — it doesn't render the `BoxedList`
+ * itself; pass one as `children`.
+ *
+ * The web's empty `.content` wrapper looks like dead markup but is
+ * load-bearing, so it's kept: the group is a 12 dp-gap flex column, and
+ * without that wrapper every child would become a flex item of the group and
+ * pick up a 12 dp gap between the rows themselves, instead of one gap
+ * between the header and the content as a whole.
+ *
+ * The title is `Text variant="body"` with an explicit semibold weight rather
+ * than `variant="heading"`, which is body-sized but **bold** and on the
+ * tighter heading line-height — the CSS `.title` is specifically semibold at
+ * the body line-height. It keeps the `header` accessibility role anyway
+ * (passed explicitly), since a settings-group heading is exactly the kind of
+ * landmark a screen reader rotor should list — the same call `StatusPage`
+ * makes for its own title.
+ *
+ * `min-width: 0` on the header text has no port and needs none: it's the
+ * classic CSS flexbox override for a min-content floor that Yoga doesn't
+ * apply in the first place.
+ *
+ * @example
+ * <PreferencesGroup
+ *   title="Appearance"
+ *   description="How the app looks on this device."
+ *   headerSuffix={<Button variant="flat" onPress={reset}>Reset</Button>}
+ * >
+ *   <BoxedList>{rows}</BoxedList>
+ * </PreferencesGroup>
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.PreferencesGroup.html
+ */
+export declare const PreferencesGroup: import('react').ForwardRefExoticComponent<PreferencesGroupProps & import('react').RefAttributes<View>>;

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

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

package/dist/components/SegmentedBar/SegmentedBar.d.ts

@@ -0,0 +1,64 @@
+import { StyleProp, ViewStyle } from 'react-native';
+export interface SegmentedBarSegment {
+    /** Category name shown in the tooltip. */
+    label: string;
+    /**
+     * Percentage value 0–100.
+     * The sum of all segments should equal 100.
+     * If it does not, values are redistributed proportionally.
+     */
+    value: number;
+    /**
+     * Color for this segment.
+     * When omitted, a cycling palette of GNOME design tokens is used.
+     */
+    color?: string;
+}
+export interface SegmentedBarProps {
+    /** Segments to display. Each segment contributes its share of the full bar width. */
+    values: SegmentedBarSegment[];
+    /**
+     * Accessible label for the bar as a whole.
+     * Auto-generated from `values` when omitted (e.g. "TypeScript 60%, JavaScript 30%").
+     */
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * Horizontal bar split into proportional segments, one per category.
+ * Mirrors `@gnome-ui/react`'s `SegmentedBar`. Typical use case: repository
+ * language distribution.
+ *
+ * ```tsx
+ * <SegmentedBar
+ *   values={[
+ *     { label: 'TypeScript', value: 60, color: '#3178c6' },
+ *     { label: 'JavaScript', value: 30, color: '#f7df1e' },
+ *     { label: 'CSS',        value: 10, color: '#563d7c' },
+ *   ]}
+ * />
+ * ```
+ *
+ * The web version's hover interaction (dim every segment but the one under
+ * the pointer, brighten that one via `filter: brightness()`) is rebuilt for
+ * touch rather than dropped: each segment is a `Pressable`, and touching
+ * one dims the rest immediately via `onPressIn`/`onPressOut` — deliberately
+ * not gated behind `Tooltip`'s own long-press delay, since this feedback is
+ * the RN analog of a `Pressable`'s own instant `pressed` state, not the
+ * "peek" affordance a tooltip reveal is. Each segment is also wrapped in
+ * `Tooltip` (`label`/`placement="top"`/`delay={200}`, ported 1:1 from the
+ * web version's own tooltip) for the actual label/percentage readout,
+ * composing cleanly with the dim/highlight `onPressIn`/`onPressOut` since
+ * `Tooltip` clones its own handlers onto the child *and* still calls the
+ * child's original ones. `filter: brightness(1.15)` on the actively-touched
+ * segment has no RN equivalent (no `filter` support) — dropped as a
+ * decorative nicety, since the touched segment already reads as
+ * highlighted by contrast once every other segment dims to 35% opacity.
+ *
+ * `role="img"` + `accessibilityLabel` ports 1:1 from RN's newer web-aligned
+ * `Role` union (the same `Avatar`/`LevelBar` precedent).
+ *
+ * @see https://developer.gnome.org/hig/patterns/feedback/progress.html
+ */
+export declare const SegmentedBar: ({ values, accessibilityLabel, style, testID }: SegmentedBarProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export type { SegmentedBarProps, SegmentedBarSegment } from './SegmentedBar';
+export { SegmentedBar } from './SegmentedBar';

package/dist/components/StatusPage/StatusPage.d.ts

@@ -0,0 +1,79 @@
+import { IconDefinition } from '@gnome-ui/icons';
+import { ReactNode } from 'react';
+import { StyleProp, View, ViewProps, ViewStyle } from 'react-native';
+export interface StatusPageProps extends Omit<ViewProps, 'style'> {
+    /**
+     * Large icon displayed above the title.
+     * Use an icon from `@gnome-ui/icons` or omit for a text-only page.
+     */
+    icon?: IconDefinition;
+    /**
+     * Custom icon node. Use when you need an image, emoji, or a rendered
+     * SVG that is not part of `@gnome-ui/icons`.
+     * Ignored when `icon` is also provided.
+     */
+    iconNode?: ReactNode;
+    /** Main heading. Keep it short — one noun phrase. */
+    title: string;
+    /** Supporting description rendered below the title. */
+    description?: string;
+    /**
+     * Optional action area — typically one or two `Button`s.
+     * Rendered below the description, wrapping onto a second line if needed.
+     */
+    children?: ReactNode;
+    /**
+     * Reduces padding, icon size, and title scale for use in compact
+     * contexts such as sidebars, popovers, and small panels.
+     */
+    compact?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Empty-state / status page following the Adwaita `AdwStatusPage` pattern,
+ * mirroring `@gnome-ui/react`'s own `StatusPage`.
+ *
+ * Use to fill a view with no content yet, an error state, or a completion
+ * confirmation. Always explain *why* the view is empty and *what the user
+ * can do* about it — don't use it for loading states, where `Spinner` or
+ * `ProgressBar` belong instead.
+ *
+ * Centres its content on both axes, but — exactly as in the web version —
+ * the vertical centring only does anything once a parent gives it height:
+ * put it in a `flex: 1` container to fill the view.
+ *
+ * The title renders through this package's `Text` at `variant="title-1"`
+ * (`"title-4"` when `compact`), which means it also picks up `Text`'s
+ * automatic `header` accessibility role — a deliberate divergence from the
+ * web version's `<p class="title">`. That `<p>` exists because HTML forces
+ * you to pick a concrete `h1`–`h6` level for a component that has no idea
+ * where it sits in the document outline; RN's `header` role carries no
+ * level, so the dilemma disappears and the title can be what it actually
+ * is. On a touch device the rotor is the only structural navigation a
+ * screen reader user has, so this is worth having.
+ *
+ * The icon is dimmed by its wrapper's `opacity` (0.55 light / 0.45 dark,
+ * the two values the web version's own `@media (prefers-color-scheme)`
+ * block hardcodes) and hidden from assistive tech with the
+ * `accessibilityElementsHidden` + `importantForAccessibility="no"` pair
+ * this package already uses in place of `aria-hidden`. Its color needs no
+ * handling at all: `Icon` already defaults to the theme foreground, which
+ * is what `.iconWrap`'s `color` sets.
+ *
+ * The action area is a `WrapBox` rather than a hand-rolled row — `.actions`
+ * is `display: flex; flex-wrap: wrap; justify-content: center; gap` and
+ * nothing else, which is exactly what that component already is.
+ *
+ * @example
+ * <StatusPage
+ *   icon={StarOutline}
+ *   title="No favorites yet"
+ *   description="Packages you star will show up here."
+ * >
+ *   <Button variant="suggested" onPress={onAdd}>Add a package</Button>
+ * </StatusPage>
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.StatusPage.html
+ * @see https://developer.gnome.org/hig/patterns/feedback/empty-states.html
+ */
+export declare const StatusPage: import('react').ForwardRefExoticComponent<StatusPageProps & import('react').RefAttributes<View>>;

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

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

package/dist/components/ToggleGroup/ToggleGroup.d.ts

@@ -0,0 +1,70 @@
+import { ReactNode } from 'react';
+import { StyleProp, View, ViewProps, ViewStyle } from 'react-native';
+interface ToggleGroupContextValue {
+    value: string;
+    onValueChange: (value: string) => void;
+}
+/** Internal — `ToggleGroupItem` reads the selected value and setter from here. */
+export declare function useToggleGroup(): ToggleGroupContextValue;
+export interface ToggleGroupProps extends Omit<ViewProps, 'style'> {
+    /** Name of the currently active toggle. */
+    value: string;
+    /** Called with the new value when a toggle is selected. */
+    onValueChange: (value: string) => void;
+    /** Accessible label for the group. */
+    accessibilityLabel?: string;
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Mutually-exclusive group of toggle buttons for in-place option selection.
+ * Mirrors `AdwToggleGroup` (libadwaita 1.7 / GNOME 48) and
+ * `@gnome-ui/react`'s own `ToggleGroup`.
+ *
+ * Use for formatting controls, view-mode selectors, and toolbar options —
+ * wherever a `ViewSwitcher` would be too heavy or doesn't belong in a
+ * `HeaderBar`. Compose with `ToggleGroupItem`.
+ *
+ * The context and its `value`/`onValueChange` shape port 1:1 — pure React,
+ * no DOM involved. What doesn't port is the keyboard layer: the web version
+ * owns an `onKeyDown` handler implementing ← / → cycling and Home / End
+ * jumps over a roving `tabIndex`, none of which has a touch counterpart.
+ * That's this package's standing convention, already set by `ViewSwitcher`
+ * and `TabBar`; the `radiogroup`/`radio` + `checked` accessibility pairing
+ * that VoiceOver and TalkBack actually announce is what carries the
+ * semantics here instead.
+ *
+ * The group carries `accessibilityRole="radiogroup"` but deliberately
+ * **not** `accessible` — on iOS, `accessible` on a container collapses the
+ * whole subtree into one accessibility element, which would make the
+ * individual toggles unreachable for VoiceOver and defeat the point of the
+ * role. Without it the role still groups on Android while every item stays
+ * individually focusable. (`ViewSwitcher`, built earlier, does set
+ * `accessible` alongside the same role — see this package's ROADMAP note;
+ * worth revisiting there.) The visible trade-off is that the group won't
+ * match a `getByRole('radiogroup')` query, since Testing Library only
+ * matches roles on accessible elements — the items are what matter to a
+ * screen reader, and they each match `getByRole('radio')`.
+ *
+ * `display: inline-flex` becomes `alignSelf: 'flex-start'` (the same
+ * hug-your-content trick `ViewSwitcher` uses), and `box-shadow:
+ * var(--gnome-shadow-sm)` is dropped rather than approximated — the theme
+ * generator deliberately keeps the shadow tokens in `raw` only, and `Card`
+ * already established that a border carries the same separation on RN.
+ * The dark-mode border color is hardcoded per scheme (`rgba(255,255,255,
+ * 0.12)`) exactly as the source CSS hardcodes it, rather than read from
+ * `theme.light3`, which stays `#deddda` in every theme.
+ *
+ * @example
+ * const [align, setAlign] = useState('left');
+ *
+ * <ToggleGroup value={align} onValueChange={setAlign} accessibilityLabel="Alignment">
+ *   <ToggleGroupItem name="left" icon={FormatJustifyLeft} accessibilityLabel="Left" />
+ *   <ToggleGroupItem name="center" icon={FormatJustifyCenter} accessibilityLabel="Center" />
+ *   <ToggleGroupItem name="right" icon={FormatJustifyRight} accessibilityLabel="Right" />
+ * </ToggleGroup>
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ToggleGroup.html
+ */
+export declare const ToggleGroup: import('react').ForwardRefExoticComponent<ToggleGroupProps & import('react').RefAttributes<View>>;
+export {};

package/dist/components/ToggleGroup/ToggleGroupItem.d.ts

@@ -0,0 +1,49 @@
+import { IconDefinition } from '@gnome-ui/icons';
+import { PressableProps, View } from 'react-native';
+export interface ToggleGroupItemProps extends Omit<PressableProps, 'children' | 'style' | 'disabled' | 'onPress'> {
+    /** String identifier — becomes the group's `value` when this item is selected. */
+    name: string;
+    /** Visible label. Omit for icon-only items (pass `accessibilityLabel` instead). */
+    label?: string;
+    /** Icon from `@gnome-ui/icons`. */
+    icon?: IconDefinition;
+    /** Accessible name. Required for icon-only items; defaults to `label`. */
+    accessibilityLabel?: string;
+    disabled?: boolean;
+}
+/**
+ * Individual toggle inside a `ToggleGroup`. Can be icon-only, label-only, or
+ * icon + label — for icon-only items always pass an `accessibilityLabel` so
+ * screen readers can identify the option.
+ *
+ * The active state's three `color-mix(in srgb, accent N%, transparent)`
+ * values resolve to 8-digit `#RRGGBBAA` hexes off `theme.accentBgColor`
+ * (always a plain 6-digit hex), the technique `Chip` already established for
+ * exactly this selected-tint problem — `26` for 15% and `66` for 40% in
+ * light, `40` for 25% and `80` for 50% in dark. The CSS paints its active
+ * ring as an `inset 0 0 0 1px` box-shadow, which RN has no equivalent for;
+ * it becomes a real `borderWidth: 1` that every item carries at all times
+ * (transparent when inactive) so selecting one never shifts the row's
+ * layout — the same substitution `AvatarGroup` made for its own ring.
+ *
+ * `:hover` has no touch counterpart and collapses away; `:active` maps to
+ * `Pressable`'s `pressed` state using `theme.activeOverlay`, whose light
+ * (`rgba(0, 0, 0, 0.12)`) and dark (`rgba(255, 255, 255, 0.14)`) values are
+ * character-for-character the CSS's own `:active` colors — the same
+ * coincidence `ViewSwitcherItem` documented and reused. The
+ * `background-color`/`box-shadow` transition is dropped rather than
+ * rebuilt on `Animated`: `ViewSwitcherItem`, the closest sibling, doesn't
+ * animate its own selection either, so there is no reduced-motion handling
+ * to wire up here.
+ *
+ * The icon keeps the default foreground color instead of tracking the
+ * active accent text: `Icon` has no `currentColor` equivalent, and its
+ * `color` prop is a fixed GNOME palette (`blue`, `green`, …) with no
+ * `accent` member — which couldn't follow the app's configurable accent
+ * anyway. Same call, same reason, as `Chip`.
+ *
+ * `icon` is an `IconDefinition` rather than the `ReactNode` the older
+ * `ViewSwitcherItem` takes; that component predates `Icon` shipping in this
+ * package, while `Chip` and the web version both type it this way.
+ */
+export declare const ToggleGroupItem: import('react').ForwardRefExoticComponent<ToggleGroupItemProps & import('react').RefAttributes<View>>;

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

@@ -0,0 +1,4 @@
+export type { ToggleGroupProps } from './ToggleGroup';
+export { ToggleGroup } from './ToggleGroup';
+export type { ToggleGroupItemProps } from './ToggleGroupItem';
+export { ToggleGroupItem } from './ToggleGroupItem';

package/dist/components/WrapBox/WrapBox.d.ts

@@ -0,0 +1,67 @@
+import { ReactNode } from 'react';
+import { StyleProp, View, ViewProps, ViewStyle } from 'react-native';
+export type WrapBoxJustify = 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
+export type WrapBoxAlign = 'start' | 'center' | 'end' | 'stretch';
+export interface WrapBoxProps extends Omit<ViewProps, 'style'> {
+    /** Gap between children on the same line, in dp. Default: `6`. */
+    childSpacing?: number;
+    /** Gap between lines, in dp. Defaults to `childSpacing`. */
+    lineSpacing?: number;
+    /** Horizontal distribution of children within each line. Default: `"start"`. */
+    justify?: WrapBoxJustify;
+    /** Cross-axis alignment of children within each line. Default: `"center"`. */
+    align?: WrapBoxAlign;
+    /** When true children wrap in the reverse direction (bottom to top). */
+    wrapReverse?: boolean;
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Flexible wrapping layout container — children flow horizontally and wrap
+ * to new lines when they don't fit, like words in a paragraph, without
+ * locking them into a grid. Mirrors `AdwWrapBox` (libadwaita 1.7 / GNOME
+ * 48) and `@gnome-ui/react`'s own `WrapBox`.
+ *
+ * Pair with `Chip` for tag lists and filter rows, or use standalone for any
+ * collection of variable-width items.
+ *
+ * The web version ships its values as CSS custom properties consumed by a
+ * stylesheet (`--wrapbox-gap`, `--wrapbox-justify`, …) because a CSS module
+ * can't take runtime values any other way; RN has no such indirection, so
+ * they're written straight onto the style object here. Everything else is a
+ * direct translation: `flex-flow: row wrap` becomes
+ * `flexDirection: 'row'` + `flexWrap`, and the shorthand
+ * `gap: <row> <column>` splits into RN's separate `rowGap`/`columnGap`
+ * (the single `gap` property would set both, which is exactly what this
+ * component must be able to avoid).
+ *
+ * As in `Box`, `childSpacing`/`lineSpacing` are numbers only — RN's gap
+ * properties take dp, not CSS strings — and `align`/`justify` keep the
+ * web's bare `start`/`end` keywords in the public API while mapping
+ * internally onto Yoga's `flex-start`/`flex-end`.
+ *
+ * `alignContent: 'stretch'` is set explicitly even though neither package
+ * exposes an `alignContent` prop — **CSS defaults it to `stretch`, Yoga
+ * defaults it to `flex-start`**, so without this line `align="stretch"`
+ * silently does nothing on RN whenever the children have no cross-size of
+ * their own: the line collapses to zero height before `alignItems` ever
+ * gets to stretch anything into it. Caught on-device (the stretch row of
+ * the example app's demo screen rendered empty); this restores the web
+ * version's behaviour exactly. It's a no-op in the ordinary case where the
+ * container hugs its content rather than having a fixed height.
+ *
+ * @example
+ * // Tag list
+ * <WrapBox childSpacing={6}>
+ *   {tags.map((tag) => <Chip key={tag}>{tag}</Chip>)}
+ * </WrapBox>
+ *
+ * @example
+ * // Looser gap between lines than between items
+ * <WrapBox childSpacing={6} lineSpacing={12} justify="center">
+ *   {filters.map((filter) => <Chip key={filter}>{filter}</Chip>)}
+ * </WrapBox>
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.WrapBox.html
+ */
+export declare const WrapBox: import('react').ForwardRefExoticComponent<WrapBoxProps & import('react').RefAttributes<View>>;

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

@@ -0,0 +1,2 @@
+export type { WrapBoxAlign, WrapBoxJustify, WrapBoxProps } from './WrapBox';
+export { WrapBox } from './WrapBox';