@gnome-ui/react-native 1.9.0 → 1.11.0

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

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

package/dist/components/SpinRow/SpinRow.d.ts

@@ -0,0 +1,64 @@
+import { ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export interface SpinRowProps {
+    /** Primary label. */
+    title: string;
+    /** Secondary line below the title. */
+    subtitle?: string;
+    /** Icon or image placed at the leading edge. */
+    leading?: ReactNode;
+    /** Current value (controlled). */
+    value?: number;
+    /** Initial value when uncontrolled. Defaults to `0`. */
+    defaultValue?: number;
+    /** Called when the value changes. */
+    onValueChange?: (value: number) => void;
+    /** Minimum allowed value. Defaults to `0`. */
+    min?: number;
+    /** Maximum allowed value. Defaults to `100`. */
+    max?: number;
+    /** Amount to increment/decrement per step. Defaults to `1`. */
+    step?: number;
+    /** Number of decimal places shown. Derived from `step` when omitted. */
+    decimals?: number;
+    /** Accessible name for the spin button. Defaults to `title`. */
+    accessibilityLabel?: string;
+    /** Disables the row and its spin button. */
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * Settings row with an integrated spin button for numeric values, mirroring
+ * `AdwSpinRow` and `@gnome-ui/react`'s own `SpinRow`. Use inside a
+ * `BoxedList` for settings with numeric ranges (volume, timeout duration,
+ * count limits, etc.).
+ *
+ * **This is a composition of `ActionRow` + `SpinButton`** — same reasoning
+ * as `ComboRow` (`ActionRow` + `Dropdown`): the row layout and the numeric
+ * stepper are each already shipped, verified components, so nothing here is
+ * rebuilt. `SpinButton` is controlled-only, so the uncontrolled `defaultValue`
+ * state lives here, one level up, the same shape `ComboRow` already
+ * established for `Dropdown`.
+ *
+ * The web version's keyboard interaction (↑/↓ one step, Page Up/Down ten
+ * steps, Home/End to bounds) drops as it does everywhere else in this
+ * package — `SpinButton` already provides the touch/screen-reader
+ * equivalents it was built with (tap the visible −/+ buttons, or the
+ * `accessibilityRole="adjustable"` increment/decrement actions).
+ *
+ * @example
+ * <BoxedList>
+ *   <SpinRow
+ *     title="Volume"
+ *     subtitle="Output level"
+ *     value={volume}
+ *     onValueChange={setVolume}
+ *     min={0}
+ *     max={100}
+ *   />
+ * </BoxedList>
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.SpinRow.html
+ */
+export declare const SpinRow: ({ title, subtitle, leading, value: controlledValue, defaultValue, onValueChange, min, max, step, decimals, accessibilityLabel, disabled, style, testID, }: SpinRowProps) => import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/SplitButton/SplitButton.d.ts

@@ -0,0 +1,46 @@
+import { ReactNode } from 'react';
+import { GestureResponderEvent, StyleProp, ViewStyle } from 'react-native';
+export type SplitButtonVariant = 'default' | 'suggested' | 'destructive';
+export interface SplitButtonProps {
+    /** Label shown in the primary button. */
+    label: string;
+    /** Visual style. Applies to both the primary and toggle halves. */
+    variant?: SplitButtonVariant;
+    /** Content rendered inside the popover panel when the arrow is pressed. */
+    dropdownContent: ReactNode;
+    /** Accessible label for the dropdown toggle button. Defaults to `"More options"`. */
+    dropdownLabel?: string;
+    /** Called when the primary (label) half is pressed. */
+    onPress?: (event: GestureResponderEvent) => void;
+    /** Disables both halves. */
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * Primary action button with an attached dropdown arrow, mirroring
+ * `AdwSplitButton` and `@gnome-ui/react`'s own `SplitButton`. Pressing the
+ * label half fires `onPress`; pressing the arrow half opens a floating
+ * panel with `dropdownContent` (menus, options, etc.).
+ *
+ * The primary half is a real `Button` — its resting/pressed/disabled colors
+ * come for free. The arrow half is a hand-rolled `Pressable` rather than a
+ * second `Button`: nesting `Popover` (whose `children` clones a prop-level
+ * `accessibilityState`/`onPress` onto its trigger) around a full `Button`
+ * would silently clobber `Button`'s own internal `accessibilityState={{
+ * disabled }}` — RN merges a spread prop object outright, it doesn't merge
+ * key-by-key — so the arrow half derives the exact same variant colors via
+ * `getVariantColors` above instead, and owns `accessibilityState` itself
+ * (only `{ disabled }`, letting `Popover`'s clone merge in `expanded`).
+ * The two halves are visually connected by zeroing the shared inner corner
+ * radii and painting a 1px separator between them, the RN equivalent of the
+ * web CSS's `border-radius` split + `.separator` span.
+ *
+ * `Popover` supplies the floating panel, `Modal`-based positioning,
+ * outside-tap dismissal, and Android back-button handling — no repositioning
+ * math of its own needed here, unlike the web version's manual
+ * `getBoundingClientRect`/scroll-and-resize-tracking `place()` effect.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.SplitButton.html
+ */
+export declare const SplitButton: ({ label, variant, dropdownContent, dropdownLabel, onPress, disabled, style, testID, }: SplitButtonProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export type { SplitButtonProps, SplitButtonVariant } from './SplitButton';
+export { SplitButton } from './SplitButton';

package/dist/components/StepIndicator/StepIndicator.d.ts

@@ -0,0 +1,56 @@
+import { StyleProp, ViewStyle } from 'react-native';
+export type StepIndicatorOrientation = 'horizontal' | 'vertical';
+export interface StepIndicatorProps {
+    /**
+     * Total number of steps, or an array of per-step labels rendered beside
+     * (vertical) or beneath (horizontal) each circle. Pass a plain number for
+     * an unlabelled sequence (only the "Step X of Y" caption is shown); pass
+     * an array of strings to label each step.
+     */
+    steps: number | string[];
+    /** Zero-based index of the current/active step. */
+    currentStep: number;
+    /** Layout direction. Default: `"horizontal"`. */
+    orientation?: StepIndicatorOrientation;
+    /**
+     * Called when a completed step's circle is pressed, letting the user jump
+     * back to a step they've already finished. Omit to make steps
+     * non-interactive. The current and upcoming steps are never pressable.
+     */
+    onStepClick?: (index: number) => void;
+    /** Accessible label for the indicator. Default: `"Progress"`. */
+    label?: string;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * Numbered "Step X of Y" progress indicator for onboarding/wizard flows —
+ * mirrors `@gnome-ui/react`'s `StepIndicator`. Directly portable per this
+ * package's own ROADMAP note: no web-only APIs are involved, just derived
+ * dot/number state from `currentStep`.
+ *
+ * The outer container sets `role="navigation"` **without** `accessible` —
+ * the corrected pattern `ToggleGroup` established over the earlier
+ * `BoxedList`/`ViewSwitcher` precedent: `accessible` on a *grouping*
+ * container with multiple independently-focusable children (each step
+ * circle here) collapses the whole subtree into one VoiceOver stop on iOS.
+ * The role still groups on Android, and every step stays individually
+ * reachable; assert `element.props.role` on a `testID` in tests instead of
+ * `getByRole('navigation')`.
+ *
+ * The connecting line between circles reuses the exact 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 supported for RN position/dimension
+ * props, unlike the `transform: translateX('50%')` trick this package has
+ * hit real bugs with elsewhere (that limitation is specific to `transform`).
+ *
+ * The web version's checkmark/number content swap and connector-line color
+ * change have no CSS `transition` at all (only `.circle`'s own
+ * `background-color`/`border-color` do), so only those two colors animate
+ * here — the content swap and connector recolor are instant, matching the
+ * source exactly rather than adding an unrequested fade.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.StepIndicator.html
+ */
+export declare const StepIndicator: ({ steps, currentStep, orientation, onStepClick, label, style, testID, }: StepIndicatorProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export type { StepIndicatorOrientation, StepIndicatorProps } from './StepIndicator';
+export { StepIndicator } from './StepIndicator';

package/dist/components/SwitchRow/SwitchRow.d.ts

@@ -0,0 +1,43 @@
+import { ReactNode } from 'react';
+import { PressableProps, StyleProp, View, ViewStyle } from 'react-native';
+export interface SwitchRowProps extends Omit<PressableProps, 'children' | 'style' | 'onPress'> {
+    /** Primary label. */
+    title: string;
+    /** Secondary line below the title. */
+    subtitle?: string;
+    /** Icon or image placed at the leading edge. */
+    leading?: ReactNode;
+    /** Controlled checked state. */
+    checked?: boolean;
+    /** Initial checked state when uncontrolled. Defaults to `false`. */
+    defaultChecked?: boolean;
+    /** Called with the next value when the row is pressed. */
+    onCheckedChange?: (checked: boolean) => void;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Activatable row with an integrated switch, mirroring `@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` (the ROADMAP's own guess): `AdwSwitchRow` makes the whole row the
+ * interactive element, the same shape `CheckRow` already established for
+ * its checkbox. Prefer this over `CheckRow` for a single on/off setting,
+ * and `CheckRow` for selecting/deselecting individual items in a list.
+ *
+ * The switch visual reuses `Switch`'s exact track/thumb `Animated.Value`
+ * interpolation, but as plain non-interactive `Animated.View`s rather than
+ * importing the real `Switch` component — `Switch` is itself a `Pressable`,
+ * and nesting one touchable inside another (the row's own `Pressable`)
+ * would create two overlapping tap targets, the same reasoning `CheckRow`
+ * already applied to `Checkbox`. `aria-labelledby` (pointing the web
+ * button's `role="switch"` at the title/subtitle content) has no RN
+ * equivalent — `accessibilityLabel` combining title and subtitle is the
+ * substitution, same as `CheckRow`.
+ *
+ * Supports both controlled (`checked`) and uncontrolled (`defaultChecked`)
+ * modes, the same `isControlled`/internal-state-fallback shape already
+ * established by `Expander`/`ComboRow`/`Popover`/`CheckRow`.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.SwitchRow.html
+ */
+export declare const SwitchRow: import('react').ForwardRefExoticComponent<SwitchRowProps & import('react').RefAttributes<View>>;

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

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

package/dist/components/TagInput/TagInput.d.ts

@@ -0,0 +1,59 @@
+import { StyleProp, ViewStyle } from 'react-native';
+export interface TagInputProps {
+    /** Current list of tags. */
+    value: string[];
+    /** Called when a tag is added or removed. */
+    onChange: (value: string[]) => void;
+    /** Visible label rendered above the input. */
+    label?: string;
+    /** Placeholder shown in the draft input while empty. */
+    placeholder?: 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 border.
+     */
+    error?: string;
+    /** Maximum number of tags allowed. Once reached, the draft input is hidden. */
+    maxTags?: number;
+    /** Reject a new tag that already exists (case-insensitive). Defaults to `true`. */
+    preventDuplicates?: boolean;
+    /** Disables the whole control. */
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * Type-to-add multi-value input rendering entries as removable `Chip`s in a
+ * `WrapBox`, mirroring `@gnome-ui/react`'s own `TagInput`.
+ *
+ * `WrapBox`/`Chip` alone only support static, pre-populated display —
+ * `TagInput` adds interactive entry: type and press Return, or type a `,`,
+ * to commit a tag; paste a comma/newline-separated list to add several at
+ * once; Backspace on an empty draft removes the last one.
+ *
+ * The web version wires typed-`,` and pasted-list handling as two separate
+ * handlers (`onKeyDown`'s `,` case, `onPaste`). RN's `TextInput` has no
+ * `paste` event to mirror — but a paste still flows through `onChangeText`
+ * with the full resulting text, exactly like a typed `,` does, so both
+ * collapse into one `handleChangeText`: whenever the text contains a `,` or
+ * newline, split on it and commit every non-empty part (typing "foo,"
+ * commits "foo" via the same path a paste of "foo,bar" commits both).
+ * Return is handled separately via `onSubmitEditing`, since RN has no
+ * `Enter` keystroke to catch on a single-line field the way the web version
+ * catches it in `onKeyDown`. Backspace-on-empty uses `onKeyPress`, the one
+ * RN `TextInput` event that still fires with the field already empty
+ * (`onChangeText` doesn't fire deleting from nothing).
+ *
+ * The tag box is a `Pressable` (mirrors the web version's
+ * `onClick={() => inputRef.current?.focus()}` on the container) with
+ * `accessible={false}` explicitly — `Pressable` defaults `accessible` to
+ * `true`, which would collapse every `Chip`'s remove button and the draft
+ * input into a single VoiceOver stop, the same container-swallows-subtree
+ * trap already documented for `ToggleGroup`/`Sidebar`'s bare-`View`-plus-role
+ * case, here hit via `Pressable`'s own default instead.
+ *
+ * @see https://developer.gnome.org/hig/patterns/controls/text-fields.html
+ */
+export declare const TagInput: ({ value, onChange, label, placeholder, helperText, error, maxTags, preventDuplicates, disabled, style, testID, }: TagInputProps) => import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/Timeline/Timeline.d.ts

@@ -0,0 +1,87 @@
+import { ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export type TimelineOrientation = 'vertical' | 'horizontal';
+export type TimelineVariant = 'default' | 'dotted' | 'none';
+export interface TimelineItem {
+    /** Icon rendered inside the timeline node. Sized/colored by the consumer — see the component doc. */
+    icon?: ReactNode;
+    /**
+     * Content at the leading edge of the node.
+     * - **Vertical:** rendered to the left of the connector track.
+     * - **Horizontal:** rendered above the node.
+     *
+     * Typical use: timestamp, badge, short label.
+     */
+    leading?: ReactNode;
+    /** Main event content rendered adjacent to the node (title, description…). */
+    content: ReactNode;
+}
+export interface TimelineProps {
+    /** Ordered list of timeline events. */
+    items: TimelineItem[];
+    /**
+     * Axis direction of the connector line.
+     * - `"vertical"` — events stack top-to-bottom (default).
+     * - `"horizontal"` — events flow left-to-right, in a horizontal `ScrollView`.
+     */
+    orientation?: TimelineOrientation;
+    /**
+     * Visual style of the connector between nodes.
+     * - `"default"` — solid thin line.
+     * - `"dotted"` — dotted line; useful for future or pending events.
+     * - `"none"` — no connector; each node stands alone.
+     */
+    variant?: TimelineVariant;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * 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: every item's `leading` cell (always rendered, even when
+ * empty, matching the web version's own "same 3 children" comment)
+ * reports its own rendered width (vertical) or height (horizontal), and
+ * every cell gets a `minWidth`/`minHeight` equal to the largest one
+ * measured so far, so the node column/row starts at the same position in
+ * every item. The node track itself additionally gets a *fixed*
+ * width (vertical, matching the source CSS's literal `24px` column) or
+ * height (horizontal, the larger of the dot/icon node sizes, since the
+ * source's row there is CSS `auto` with no fixed value to port) — without
+ * it, an item with an icon node (28 dp) and one with a plain dot (12 dp)
+ * would each size their own track differently, misaligning `content`'s
+ * start position between them.
+ *
+ * `orientation="horizontal"` wraps itself in a horizontal `ScrollView`,
+ * reimagining the web CSS's `overflow-x: auto` — the direct native
+ * equivalent for "scroll instead of overflow when items don't fit". 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, so there's no "leftover space" to distribute) — each item
+ * just gets a flat 72 dp `minWidth` instead, unconditionally scrollable
+ * like `overflow-x: auto`'s own fallback path.
+ *
+ * `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}` on their own `<Icon>`),
+ * since RN has no `currentColor` for this component to tint an arbitrary
+ * child with the way the web version's CSS `color: accent-fg-color`
+ * does via inheritance onto the icon's SVG.
+ *
+ * `role="list"`/`role="listitem"` are set **without** `accessible` — the
+ * `ToggleGroup`/`StepIndicator`-established pattern for a grouping role
+ * over children that may themselves contain focusable content (an
+ * item's `content` is arbitrary `ReactNode` and could include one), so
+ * nothing nested inside gets swallowed into a single VoiceOver stop.
+ * Assert `element.props.role` on a `testID` in tests instead of
+ * `getByRole('list'/'listitem')`.
+ */
+export declare const Timeline: ({ items, orientation, variant, style, testID, }: TimelineProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export type { TimelineItem, TimelineOrientation, TimelineProps, TimelineVariant } from './Timeline';
+export { Timeline } from './Timeline';

package/dist/components/Toolbar/Toolbar.d.ts

@@ -0,0 +1,25 @@
+import { StyleProp, View, ViewProps, ViewStyle } from 'react-native';
+export interface ToolbarProps extends Omit<ViewProps, 'style'> {
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Horizontal action bar following the libadwaita `.toolbar` pattern —
+ * mirrors `@gnome-ui/react`'s `Toolbar`. Directly portable: no web-only
+ * APIs, just a flex row with fixed padding/gap.
+ *
+ * Provides `theme.space1` (6 dp) padding and gap — the standard spacing
+ * for rows of flat buttons in header bars, action bars, and tool rows.
+ * Place a `Spacer` between leading and trailing groups to push trailing
+ * items to the end. 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`
+ * elements the way CSS `color` cascades, so a value here would reach
+ * nothing (every child, e.g. `Button`, already sets its own explicit
+ * text/icon colors).
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1-latest/style-classes.html#toolbar-style-class
+ */
+export declare const Toolbar: import('react').ForwardRefExoticComponent<ToolbarProps & import('react').RefAttributes<View>>;

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

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

package/dist/components/WidgetManager/WidgetManager.d.ts

@@ -0,0 +1,92 @@
+import { IconDefinition } from '@gnome-ui/icons';
+import { ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export interface WidgetDefinition {
+    /** Stable unique identifier. Also the value stored in `value`. */
+    id: string;
+    /** Row label shown in the picker catalog and above the widget once added. */
+    label: string;
+    /** Optional secondary line shown below `label` in the picker row. */
+    description?: string;
+    /** Icon shown in the picker row and in the widget's own header once added. */
+    icon?: IconDefinition;
+    /** Renders the widget's body once it has been added to the manager. */
+    render: () => ReactNode;
+}
+/**
+ * `@gnome-ui/react`'s `pickerSurface` calls this option `"modal"`, naming it
+ * after its own `Modal` component. This package's `Modal` counterpart is
+ * `Dialog` (RN's own `Modal` primitive is a different, lower-level thing —
+ * see the main `ROADMAP.md`'s note on that exact naming trap), so the option
+ * is named after what it actually renders here instead of ported verbatim.
+ */
+export type WidgetManagerPickerSurface = 'dialog' | 'bottomSheet' | 'drawer';
+export interface WidgetManagerProps {
+    /** Full catalog of widgets available to add. */
+    catalog: WidgetDefinition[];
+    /** Controlled list of added widget ids, in display order. */
+    value: string[];
+    /** Called with the new id list when the user confirms the picker. */
+    onChange: (value: string[]) => void;
+    /** Header title. */
+    title: string;
+    /** Icon shown at the leading edge of the header. */
+    icon?: IconDefinition;
+    /** Which overlay renders the catalog picker. Defaults to `"dialog"`. */
+    pickerSurface?: WidgetManagerPickerSurface;
+    /** Label for the dashed "add widget" trigger. Defaults to `"Add Widget"`. */
+    addTriggerLabel?: string;
+    /** Message shown when there are no widgets and not in edit mode. Defaults to `"No widgets added"`. */
+    emptyStateLabel?: string;
+    /** Heading of the picker overlay. Defaults to `"Widgets"`. */
+    pickerTitle?: string;
+    /** Label for a catalog row's add action. Defaults to `"Add"`. */
+    addLabel?: string;
+    /** Label for a catalog row's remove action (already staged). Defaults to `"Remove"`. */
+    removeLabel?: string;
+    /** Label for the picker's confirm action. Defaults to `"Accept"`. */
+    confirmLabel?: string;
+    /** Label for the picker's cancel action. Defaults to `"Cancel"`. */
+    cancelLabel?: string;
+    /** Accessible name of the header's edit-mode toggle button. Defaults to `"Edit widgets"`. */
+    editLabel?: string;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * Card that manages a controlled collection of "widgets" — pick which ones
+ * are visible from a catalog, each rendering its own arbitrary content.
+ * Mirrors `@gnome-ui/react`'s own `WidgetManager`.
+ *
+ * The header's edit button toggles a local `editing` state: in view mode
+ * only the added widgets (or an empty-state message) are shown; in edit
+ * mode a dashed "add widget" trigger also appears, opening a catalog picker
+ * (`pickerSurface`: `"dialog"`, `"bottomSheet"`, or `"drawer"`, each backed
+ * by the already-shipped `Dialog`/`BottomSheet`/`Drawer`). Adding/removing
+ * is staged inside the picker and only applied — via `onChange` — when the
+ * user confirms; canceling or dismissing the picker discards the staging.
+ * Widgets can only be removed through the picker, never inline in the card.
+ *
+ * The catalog list is wrapped in its own `ScrollView` (capped at 360dp)
+ * before being handed to whichever picker surface renders it — unlike the
+ * web version's `overflow-y: auto` on the `Modal`/`BottomSheet`/`Drawer`
+ * body, none of this package's three overlay components scroll their
+ * `children` for you, so a long catalog needs that scroll container built
+ * in here rather than assumed.
+ *
+ * `Dialog` already renders its own confirm/cancel action row from a
+ * `buttons` array, so only `bottomSheet`/`drawer` need the hand-rolled
+ * footer row the web version calls `pickerFooter` — the exact same split
+ * the web source itself documents ("Modal uses its own actions").
+ *
+ * Not ported: `aria-pressed` on the edit toggle — `Button`/`IconButton` set
+ * their own internal `accessibilityState={{ disabled }}` on the underlying
+ * `Pressable`, and RN merges a spread prop object outright rather than
+ * key-by-key, so passing a second `accessibilityState` here would silently
+ * replace rather than merge with it (the same `Popover`-trigger clobber
+ * `SplitButton` already worked around) — dropped rather than routed around
+ * for one decorative toggle-state announcement.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.WidgetManager.html
+ */
+export declare const WidgetManager: ({ catalog, value, onChange, title, icon, pickerSurface, addTriggerLabel, emptyStateLabel, pickerTitle, addLabel, removeLabel, confirmLabel, cancelLabel, editLabel, style, testID, }: WidgetManagerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export type { WidgetDefinition, WidgetManagerPickerSurface, WidgetManagerProps, } from './WidgetManager';
+export { WidgetManager } from './WidgetManager';