@gnome-ui/react-native 1.7.0 → 1.8.0

package/dist/components/ExpanderRow/ExpanderRow.d.ts

@@ -0,0 +1,58 @@
+import { ReactNode } from 'react';
+import { StyleProp, View, ViewStyle } from 'react-native';
+export interface ExpanderRowProps {
+    /** Primary label. */
+    title: string;
+    /** Secondary line below the title. */
+    subtitle?: string;
+    /** Icon or image placed at the leading edge of the header row. */
+    leading?: ReactNode;
+    /**
+     * Widget placed at the trailing edge of the header row, before the
+     * chevron (e.g. a value label or a `Switch`). Stop event propagation
+     * inside it so the row's toggle isn't triggered.
+     */
+    trailing?: ReactNode;
+    /**
+     * Nested rows revealed when expanded. Use `ActionRow`, `ButtonRow`, or
+     * any row-shaped element — separators are inserted automatically.
+     */
+    children?: ReactNode;
+    /** Controlled expanded state. */
+    expanded?: boolean;
+    /** Initial expanded state when uncontrolled. Defaults to `false`. */
+    defaultExpanded?: boolean;
+    /** Called when the expanded state changes. */
+    onExpandedChange?: (expanded: boolean) => void;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * Collapsible `ActionRow` that reveals nested rows on activation, mirroring
+ * `@gnome-ui/react`'s `ExpanderRow`. The header row toggles a smooth reveal
+ * animation exposing child rows. Supports both controlled (`expanded`) and
+ * uncontrolled (`defaultExpanded`) modes.
+ *
+ * The reveal panel reuses the standalone `Expander`'s exact recipe — a
+ * single `Animated.View` with a directly-driven numeric `height` (RN has no
+ * CSS grid to lean on for the web version's `grid-template-rows: 0fr → 1fr`
+ * trick), content staying mounted while collapsed
+ * (`accessibilityElementsHidden`/`importantForAccessibility` standing in
+ * for the web's `inert`), and the "show natural height until first
+ * `onLayout` measurement lands, then hand control to `Animated`" guard for
+ * a `defaultExpanded` initial mount. The only difference from `Expander`
+ * itself: the chevron is `PanDown` (a straight down-arrow, matching the
+ * source CSS's hand-drawn `M4 6l4 4 4-4` path and rotating 0deg → 180deg)
+ * rather than `Expander`'s `PanEnd` triangle rotating 0deg → 90deg — the
+ * same icon/rotation pair `Dropdown`'s own chevron already established.
+ *
+ * Nested children get a `Separator` inserted before each one (including
+ * the first, directly under the header) via `Children.toArray(children)
+ * .filter(Boolean)`, the same falsy-child-filtering `ExpanderRow`'s web
+ * version already does. Unlike `CheckRow`/`ButtonRow`, this component has
+ * no `disabled` prop — the source `@gnome-ui/react` version doesn't expose
+ * one either, so none is added here.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ExpanderRow.html
+ */
+export declare const ExpanderRow: import('react').ForwardRefExoticComponent<ExpanderRowProps & import('react').RefAttributes<View>>;

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

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

package/dist/components/FieldGroup/FieldGroup.d.ts

@@ -0,0 +1,52 @@
+import { ReactNode } from 'react';
+import { StyleProp, ViewProps, ViewStyle } from 'react-native';
+export interface FieldGroupProps extends Omit<ViewProps, 'style'> {
+    /** Group heading, rendered above the grouped content. */
+    label: string;
+    /** Helper text shown below the label. Hidden when `error` is set. */
+    helperText?: string;
+    /**
+     * Error message shown below the label in place of `helperText`.
+     * Announced via `role="alert"` when it appears.
+     */
+    error?: string;
+    /**
+     * Visually dims the group. Unlike the web version's native
+     * `<fieldset disabled>`, this does not automatically disable descendant
+     * controls — RN has no equivalent of a fieldset's built-in
+     * disabled-propagates-to-descendants behavior, so each child control
+     * must still be disabled individually.
+     */
+    disabled?: boolean;
+    /** Arbitrary field content — checkboxes, radios, a custom composite field, etc. */
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Generic form-field grouping with a shared label, help text, and error
+ * message, for arbitrary fields outside a `BoxedList`. Mirrors
+ * `@gnome-ui/react`'s `FieldGroup`.
+ *
+ * `PreferencesGroup` is scoped specifically to wrapping settings rows
+ * inside a `BoxedList` — use `FieldGroup` for a plain labeled grouping
+ * around any set of related form controls (e.g. a `RadioButton` group or
+ * several `Checkbox`es sharing one label and error), independent of the
+ * settings-page layout.
+ *
+ * `<fieldset>`/`<legend>` have no RN element equivalent — this renders as
+ * a plain `View` with `role="group"` (the closest match to a fieldset's
+ * implicit ARIA role; RN's `Role` union has it natively, no substitution
+ * needed) and a themed `Text` label in place of the `<legend>`. The web
+ * version's `aria-describedby` (an id-relationship prop) has no RN
+ * equivalent and is dropped, the same "no relationship attribute" gap
+ * `ProgressBar`/`LevelBar`/`Expander` already established. The hint/error
+ * text reuses `TextField`'s exact recipe verbatim — `error ?? helperText`
+ * picks the message, `error ? theme.errorColor : theme.windowFgColor` plus
+ * `error ? 1 : theme.opacityDim` picks the color/opacity — rather than
+ * re-deriving the same dim-vs-error styling logic independently.
+ * `disabled` only dims the group visually (`theme.opacityDisabled`); see
+ * the prop doc for why it can't also disable descendants automatically.
+ *
+ * @see https://developer.gnome.org/hig/patterns/controls/
+ */
+export declare const FieldGroup: ({ label, helperText, error, disabled, children, style, ...viewProps }: FieldGroupProps) => import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/FilterableMultiSelectDropdown/FilterableMultiSelectDropdown.d.ts

@@ -0,0 +1,46 @@
+import { StyleProp, ViewStyle } from 'react-native';
+import { MultiSelectDropdownOption } from '../MultiSelectDropdown';
+export interface FilterableMultiSelectDropdownProps<V extends string = string> {
+    /** The list of selectable options. */
+    options: MultiSelectDropdownOption<V>[];
+    /** The currently selected values. */
+    value: V[];
+    /** Called with the full updated selection whenever an option is toggled. */
+    onChange: (value: V[]) => void;
+    /** Placeholder shown on the trigger when no option is selected. */
+    placeholder?: string;
+    /** Placeholder for the filter field shown once the list is open. */
+    filterPlaceholder?: string;
+    /** Accessible label for the control. */
+    accessibilityLabel?: string;
+    /** Disables the entire control. */
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * `MultiSelectDropdown` plus a filter field for narrowing long option
+ * lists, mirroring `@gnome-ui/react`'s `FilterableMultiSelectDropdown`.
+ *
+ * Same overall shape and positioning recipe as `MultiSelectDropdown` —
+ * duplicated rather than composed, matching how the web source itself
+ * relates to `MultiSelectDropdown` (a parallel implementation sharing only
+ * the `MultiSelectDropdownOption` type, not a wrapper around it) — with a
+ * filter `TextInput` pinned above the list, auto-focused on open via
+ * `autoFocus`. Typing narrows `options` to those whose label or
+ * description contains the query (case-insensitive); filtering only
+ * affects what's shown, never the underlying selection — values selected
+ * before a query hides their option stay selected. An empty filtered
+ * result renders a centered "No results" message instead of the list.
+ *
+ * The web version's filter-field keyboard handler (↑/↓ roving highlight,
+ * Home/End, Enter-to-toggle) has no RN port — same "RN's touch-first model
+ * has no keyboard focus to drive it" reasoning `Dropdown`/`TabBar` already
+ * established; RN's own `TextInput` still handles the actual typing (and
+ * its software keyboard) natively, only the roving-highlight navigation on
+ * top of it is dropped. Selection is by direct tap only, same as
+ * `MultiSelectDropdown`.
+ *
+ * @see https://developer.gnome.org/hig/patterns/controls/drop-down-lists.html
+ */
+export declare const FilterableMultiSelectDropdown: <V extends string = string>({ options, value, onChange, placeholder, filterPlaceholder, accessibilityLabel, disabled, style, testID, }: FilterableMultiSelectDropdownProps<V>) => import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/Icon/Icon.d.ts

@@ -25,6 +25,16 @@ export interface IconProps {
      * equivalent to inherit from a parent, unlike the web version.
      */
     color?: IconColor;
+    /**
+     * Arbitrary fill color, overriding `color`. Escape hatch for the rare
+     * case where a fixed named-palette swatch (e.g. `color="blue"` →
+     * `theme.blue3`) isn't good enough — most concretely, tinting an icon
+     * with the app's actual *configurable* accent (`theme.accentColor`),
+     * which `blue3` never tracks. Added for `BottomTabBar`'s active-tab
+     * icon, the same precedent as `style` being added specifically for
+     * `Dropdown`'s chevron rotation need.
+     */
+    tintColor?: string;
     /** Forwarded to the underlying `Svg` — useful for a `transform` (e.g. a rotated disclosure chevron) or `margin`. */
     style?: StyleProp<ViewStyle>;
 }
@@ -53,4 +63,4 @@ export interface IconProps {
  * import { siGithub } from "simple-icons";
  * <Icon icon={siGithub} label="GitHub" />
  */
-export declare const Icon: ({ icon, size, width, height, label, color, style }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Icon: ({ icon, size, width, height, label, color, tintColor, style, }: IconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/MultiSelectDropdown/MultiSelectDropdown.d.ts

@@ -0,0 +1,55 @@
+import { StyleProp, ViewStyle } from 'react-native';
+export interface MultiSelectDropdownOption<V extends string = string> {
+    /** The value included in `value` when this option is selected. */
+    value: V;
+    /** Display label shown in the list and (when only one is selected) the trigger. */
+    label: string;
+    /** Optional descriptive text shown below the label. */
+    description?: string;
+    /** Whether the option is selectable. */
+    disabled?: boolean;
+}
+export interface MultiSelectDropdownProps<V extends string = string> {
+    /** The list of selectable options. */
+    options: MultiSelectDropdownOption<V>[];
+    /** The currently selected values. */
+    value: V[];
+    /** Called with the full updated selection whenever an option is toggled. */
+    onChange: (value: V[]) => void;
+    /** Placeholder shown on the trigger when no option is selected. */
+    placeholder?: string;
+    /** Accessible label for the control. */
+    accessibilityLabel?: string;
+    /** Disables the entire control. */
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * Checkbox-list variant of `Dropdown` for selecting multiple values from a
+ * single trigger, mirroring `@gnome-ui/react`'s `MultiSelectDropdown`.
+ *
+ * `Dropdown`/`ComboRow` are single-select only — use `MultiSelectDropdown`
+ * when more than one value can be chosen at once. Toggling an option keeps
+ * the panel open so the user can pick several in a row (unlike `Dropdown`,
+ * whose `selectOption` closes the panel); close it via the backdrop tap.
+ *
+ * The `Modal` + backdrop + independently-measured-then-combined
+ * trigger-rect/panel-height positioning (`Rect`/`Position`/
+ * `computePosition`/`GAP`/`MARGIN`/`MAX_LIST_HEIGHT`) is duplicated
+ * verbatim from `Dropdown` rather than extracted to a shared hook — same
+ * "genuinely different, not save-able" judgment call already applied to
+ * `Tooltip`/`Dropdown`'s own position-code duplication, though this is now
+ * the third near-identical copy of the up/down-flip-clamp-to-width shape
+ * specifically (not `Tooltip`'s 4-directional cascade) — worth extracting
+ * into a shared hook in a future pass if a fourth caller needs it, since
+ * unlike `Tooltip` these two are not just similarly-shaped but identical.
+ *
+ * Each option row gets a leading checkbox-square visual (border/background
+ * only, no animation — `Dropdown`'s own per-option content has none
+ * either) instead of `Dropdown`'s single trailing checkmark-when-selected,
+ * since more than one row can be checked at once.
+ *
+ * @see https://developer.gnome.org/hig/patterns/controls/drop-down-lists.html
+ */
+export declare const MultiSelectDropdown: <V extends string = string>({ options, value, onChange, placeholder, accessibilityLabel, disabled, style, testID, }: MultiSelectDropdownProps<V>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export type { MultiSelectDropdownOption, MultiSelectDropdownProps } from './MultiSelectDropdown';
+export { MultiSelectDropdown } from './MultiSelectDropdown';

package/dist/components/PasswordField/PasswordField.d.ts

@@ -0,0 +1,48 @@
+import { StyleProp, TextInput, TextInputProps, TextStyle, ViewStyle } from 'react-native';
+export interface PasswordFieldProps extends Omit<TextInputProps, 'style' | 'secureTextEntry'> {
+    /** Visible label rendered above the input. */
+    label?: string;
+    /** Helper text rendered below the input. Hidden when `error` is set. */
+    helperText?: string;
+    /**
+     * Error message rendered below the input in place of `helperText`.
+     * Also applies the error visual state to the input border.
+     */
+    error?: string;
+    /**
+     * Show the peek toggle button that reveals the password as plain text.
+     * Mirrors `GtkPasswordEntry`'s `show-peek-icon` property. Defaults to `true`.
+     */
+    revealable?: boolean;
+    /** Accessible label for the toggle button while the password is hidden. */
+    revealLabel?: string;
+    /** Accessible label for the toggle button while the password is revealed. */
+    concealLabel?: string;
+    /** Style applied to the wrapping `View`. */
+    style?: StyleProp<ViewStyle>;
+    /** Style applied to the `TextInput` itself. */
+    inputStyle?: StyleProp<TextStyle>;
+}
+/**
+ * Single-line password input with a peek toggle to reveal the value as
+ * plain text, mirroring `@gnome-ui/react`'s `PasswordField`.
+ *
+ * `TextField` plus the exact reveal/conceal recipe `PasswordEntryRow`
+ * already established for this package: `secureTextEntry` (not `revealed
+ * ? 'text' : 'password'`, which has no RN equivalent), and the shipped
+ * `IconButton` for the toggle rather than a hand-rolled pressable — a
+ * circular icon button at `size="sm"` (28 dp) here, matching the web
+ * version's own `size="sm"` on this component specifically (as opposed to
+ * `PasswordEntryRow`'s default size, since that one sits inside a taller
+ * row). The toggle is positioned absolutely at the input's trailing edge,
+ * vertically centered — the RN port of the source CSS's `position:
+ * absolute; inset-block-start: 50%; transform: translateY(-50%)` — and the
+ * input gets extra trailing padding (`.hasToggle`'s `padding-inline-end`)
+ * so typed text never runs under the button.
+ *
+ * Use this over `TextField` with a manually-set `secureTextEntry` (which
+ * has no reveal affordance at all).
+ *
+ * @see https://docs.gtk.org/gtk4/class.PasswordEntry.html
+ */
+export declare const PasswordField: import('react').ForwardRefExoticComponent<PasswordFieldProps & import('react').RefAttributes<TextInput>>;

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

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

package/dist/components/RangeSlider/RangeSlider.d.ts

@@ -0,0 +1,73 @@
+import { StyleProp, ViewProps, ViewStyle } from 'react-native';
+export interface RangeSliderMark {
+    value: number;
+    label?: string;
+}
+export interface RangeSliderProps extends Omit<ViewProps, 'style'> {
+    /** Current `[lower, upper]` values. Both must be between `min` and `max`. */
+    value: [number, number];
+    /** Called when either thumb moves. */
+    onChange: (value: [number, number]) => void;
+    /** Minimum value. Defaults to `0`. */
+    min?: number;
+    /** Maximum value. Defaults to `100`. */
+    max?: number;
+    /**
+     * Granularity of each step.
+     * - The `adjustable` accessibility action (VoiceOver/TalkBack swipe up/down) moves by one step.
+     * Defaults to `1`.
+     */
+    step?: number;
+    /**
+     * Minimum allowed gap between the lower and upper thumb, in value units.
+     * Prevents the thumbs from crossing or overlapping. Defaults to `0`.
+     */
+    minDistance?: number;
+    /** Disables the control. */
+    disabled?: boolean;
+    /**
+     * Marks to display along the track.
+     * Each mark can have an optional label rendered below the track.
+     */
+    marks?: RangeSliderMark[];
+    /** Accessible label for the lower-bound thumb. Defaults to `"Minimum value"`. */
+    minLabel?: string;
+    /** Accessible label for the upper-bound thumb. Defaults to `"Maximum value"`. */
+    maxLabel?: string;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Dual-thumb slider for selecting a min/max range, following the Adwaita
+ * `GtkScale` pattern used by `Slider` — mirrors `@gnome-ui/react`'s
+ * `RangeSlider`. Distinct from `Slider` (single value) — use this for
+ * range filters (price, date range, etc.) where both bounds are
+ * adjustable.
+ *
+ * Reuses `Slider`'s exact `PanResponder`/`locationX` pixel-positioning
+ * technique (no `%`-of-self transform, since RN's `transform` only takes
+ * pixel offsets) rather than two separate per-thumb responders: a single
+ * `PanResponder` spans the whole track and, on `onPanResponderGrant`,
+ * picks whichever thumb is closer to the touch point — the same
+ * nearest-thumb logic the web version's `handleTrackPointerDown` uses —
+ * then that same thumb keeps following the touch for the rest of the
+ * gesture (`onPanResponderMove`), exactly matching the web behavior of
+ * "the thumb chosen at touch-down stays locked to the gesture even if the
+ * pointer drifts closer to the other thumb mid-drag." This single-
+ * responder shape also stands in for the web version's separate "drag the
+ * track itself" affordance — touching anywhere on the track immediately
+ * jumps the nearest thumb there, so no separate interaction is needed.
+ *
+ * The web's keyboard (← / → / Page Up/Down / Home/End) has no RN
+ * equivalent — same "no keyboard to drive it" reasoning `Slider` already
+ * established — replaced by two independent `accessibilityRole="adjustable"`
+ * elements (one per thumb, each with its own `accessibilityValue`/
+ * `onAccessibilityAction`), the native VoiceOver/TalkBack increment-
+ * decrement analog. Each thumb's own visual `View` stays
+ * `pointerEvents="none"` (dragging is the track responder's job, not a
+ * per-thumb touch target) — screen readers still reach it independently
+ * through the accessibility tree, which is separate from RN's touch hit-
+ * testing.
+ *
+ * @see https://developer.gnome.org/hig/patterns/controls/sliders.html
+ */
+export declare const RangeSlider: ({ value, onChange, min, max, step, minDistance, disabled, marks, minLabel, maxLabel, style, onLayout, testID, ...viewProps }: RangeSliderProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export type { RangeSliderMark, RangeSliderProps } from './RangeSlider';
+export { RangeSlider } from './RangeSlider';

package/dist/components/StatusBadge/StatusBadge.d.ts

@@ -0,0 +1,47 @@
+import { ReactNode } from 'react';
+import { StyleProp, ViewProps, ViewStyle } from 'react-native';
+export type StatusBadgeVariant = 'success' | 'warning' | 'error' | 'new' | 'accent' | 'neutral';
+export interface StatusBadgeProps extends Omit<ViewProps, 'style'> {
+    /**
+     * Visual style. Defaults to `"neutral"`.
+     * - `success` — green, for published / active states.
+     * - `warning` — yellow, for beta / pending states.
+     * - `error`   — red, for failed / rejected states.
+     * - `new`     — purple, for newly released / featured items.
+     * - `accent`  — blue, for highlighted / primary states.
+     * - `neutral` — muted overlay, for draft / archived / inactive states.
+     */
+    variant?: StatusBadgeVariant;
+    /** Short human-readable label. String/number render as a themed label; other nodes render as-is. */
+    children: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Pill-shaped text label for entity status — published, beta, new, etc.,
+ * mirroring `@gnome-ui/react`'s `StatusBadge`.
+ *
+ * Unlike `Badge` (numeric counts, optional anchor/dot mode), `StatusBadge`
+ * is a simpler sibling designed purely for short human-readable state
+ * labels — no anchor positioning, no dot mode, no counter. The variant
+ * color mapping reuses `Badge`'s exact `getVariantColors` shape (this
+ * component gets its own copy rather than importing `Badge`'s internal
+ * helper, since it isn't exported — same small-duplicated-helper precedent
+ * as `dimColor` across `TextField`/`SearchBar`/`PasswordField`), plus a
+ * `new` (purple) variant `Badge` doesn't have. `neutral`'s background is
+ * `theme.hoverOverlay` — a translucent overlay, matching the source CSS's
+ * `--gnome-hover-overlay` exactly — rather than `Badge`'s own flat
+ * `light4`/`dark2` neutral, since this component's source CSS genuinely
+ * differs from `Badge`'s on that one variant.
+ *
+ * `children` follows the same convention `Badge` already established:
+ * string/number renders as a themed `Text` label, any other node renders
+ * as-is.
+ *
+ * @example
+ * <StatusBadge variant="success">published</StatusBadge>
+ * <StatusBadge variant="warning">beta</StatusBadge>
+ * <StatusBadge variant="new">new</StatusBadge>
+ *
+ * @see https://developer.gnome.org/hig/patterns/feedback/badges.html
+ */
+export declare const StatusBadge: ({ variant, children, style, ...viewProps }: StatusBadgeProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export type { StatusBadgeProps, StatusBadgeVariant } from './StatusBadge';
+export { StatusBadge } from './StatusBadge';