@gnome-ui/react-native 1.3.0 → 1.4.0

package/dist/components/Highlight/Highlight.d.ts

@@ -0,0 +1,42 @@
+import { TextProps } from '../Text';
+export interface HighlightProps extends Omit<TextProps, 'children'> {
+    /** Full text to render. */
+    text: string;
+    /**
+     * Term or terms to highlight within `text`. Pass an array to highlight
+     * multiple distinct terms at once (e.g. each word of a multi-word search
+     * query). Empty or whitespace-only terms are ignored.
+     */
+    query: string | string[];
+    /** Match case-sensitively. Defaults to `false`. */
+    caseSensitive?: boolean;
+}
+/**
+ * Wraps every occurrence of `query` within `text` in a highlighted inline
+ * run — mirrors `@gnome-ui/react`'s `Highlight`, which wraps matches in a
+ * `<mark>`. Pairs with `SearchBar`'s suggestion list and any filterable
+ * list to show users which part of a result matched what they typed.
+ *
+ * The outer span is the themed `Text` component (so callers get the same
+ * `variant`/`color` API as everywhere else), but each matched run is a
+ * plain, unthemed RN `Text` carrying only the highlight's own overrides —
+ * RN's `Text` is the one primitive that inherits ambient `fontSize`/
+ * `color`/`fontFamily` from a parent `Text` when nested, the same way the
+ * web version's `<mark>` inherits from its surrounding text and only
+ * overrides `background-color`/`font-weight`. Reaching for the themed
+ * `Text` for the marked runs too would reset them to its own default
+ * `variant="body"` sizing instead of inheriting whatever variant the
+ * caller chose for the whole string.
+ *
+ * The web version's translucent `color-mix(in srgb, accent 30%,
+ * transparent)` background has no RN equivalent (`color-mix` is CSS-only)
+ * — resolved to a literal 8-digit `#RRGGBBAA` hex instead, since
+ * `accentBgColor` is always a plain 6-digit hex across all four theme
+ * variants. `border-radius` on the `<mark>` has no reliable port either:
+ * RN only paints `backgroundColor` on an inline (nested) `Text` run, not
+ * `borderRadius` — a decorative nicety dropped here, not a behavior gap.
+ * `prefers-contrast: more`'s solid-background/white-text swap ports via
+ * `useResolvedContrast()`, the same hook `Button` already uses for its own
+ * high-contrast branching.
+ */
+export declare const Highlight: ({ text, query, caseSensitive, ...textProps }: HighlightProps) => import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/LevelBar/LevelBar.d.ts

@@ -0,0 +1,72 @@
+import { StyleProp, ViewStyle } from 'react-native';
+export type LevelBarVariant = 'accent' | 'success' | 'warning' | 'error';
+export interface LevelBarProps {
+    /** Current value, between `min` and `max`. */
+    value: number;
+    /** Minimum value. Defaults to `0`. */
+    min?: number;
+    /** Maximum value. Defaults to `1`. */
+    max?: number;
+    /** Threshold at or below which the bar renders in `lowVariant`. */
+    low?: number;
+    /** Color used when `value <= low`. Defaults to `"warning"`. */
+    lowVariant?: LevelBarVariant;
+    /** Threshold at or above which the bar renders in `highVariant`. */
+    high?: number;
+    /** Color used when `value >= high`. Defaults to `"error"`. */
+    highVariant?: LevelBarVariant;
+    /** Color used between `low` and `high`. Defaults to `"accent"`. */
+    variant?: LevelBarVariant;
+    /**
+     * Render as a row of discrete blocks instead of a continuous fill —
+     * mirrors `GtkLevelBar`'s discrete mode (e.g. signal-strength indicators).
+     */
+    discrete?: boolean;
+    /** Number of blocks when `discrete` is true. Defaults to `10`. */
+    numBlocks?: number;
+    /** Accessible label describing what the level represents. */
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * Discrete level indicator with color-coded low/high offset zones —
+ * mirrors `GtkLevelBar` and `@gnome-ui/react`'s `LevelBar`. Use for a
+ * gauge/measurement display (disk usage, battery, signal strength), not
+ * for task progress (see `ProgressBar`) or a proportional category
+ * breakdown (see `SegmentedBar`).
+ *
+ * The continuous fill reuses `ProgressBar`'s exact animation technique
+ * rather than animating `width` directly: a fixed `width: '100%'` fill
+ * with `transformOrigin: 'left'` and an animated `transform: [{ scaleX }]`,
+ * so the whole thing runs on `useNativeDriver: true` — a JS-driven
+ * (`useNativeDriver: false`) `width` animation schedules its next frame via
+ * a plain `setTimeout` that routinely fires after a test's `render()`
+ * returns but before unmount, producing a real "update not wrapped in
+ * act()" warning, the same reasoning `ProgressBar`'s own docstring
+ * documents. `useReducedMotion()` mirrors `ProgressBar`'s determinate
+ * behavior: the transition duration drops to `0` (an immediate jump)
+ * rather than the animation being skipped in some other way.
+ *
+ * Discrete mode's per-block `background-color` transition has no port —
+ * unlike the continuous fill's width change, a value change in discrete
+ * mode is a binary color swap per block with no established `Animated`
+ * color-interpolation precedent elsewhere in this package, so it's a
+ * plain, unanimated style swap; a decorative nicety, not a behavior gap.
+ * Discrete blocks are hidden from the accessibility tree
+ * (`accessibilityElementsHidden`/`importantForAccessibility="no"`,
+ * mirroring the web version's `aria-hidden`) since the meter's value is
+ * already exposed once via `accessibilityValue` on the container.
+ *
+ * `role="meter"` ports 1:1 from RN's newer web-aligned `Role` union (unlike
+ * `AccessibilityRole`, which has no `"meter"` value at all) — the same
+ * precedent `Dialog`/`Avatar`/`Badge` already established for reaching for
+ * `role` over `accessibilityRole` when only the newer union has the value
+ * needed. Web's `aria-labelledby` (an id-relationship prop) has no RN
+ * equivalent — RN has no DOM ids — so only `aria-label`
+ * (`accessibilityLabel`) is ported, the same `ProgressBar`/`Slider`
+ * precedent.
+ *
+ * @see https://developer.gnome.org/hig/patterns/feedback/progress.html
+ */
+export declare const LevelBar: ({ value, min, max, low, lowVariant, high, highVariant, variant, discrete, numBlocks, accessibilityLabel, style, testID, }: LevelBarProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export type { LevelBarProps, LevelBarVariant } from './LevelBar';
+export { LevelBar } from './LevelBar';

package/dist/components/Overlay/Overlay.d.ts

@@ -0,0 +1,41 @@
+import { ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export interface OverlayProps {
+    /** Whether the overlay is visible. */
+    open: boolean;
+    /** Called when the backdrop itself (not its content) is pressed. */
+    onDismiss?: () => void;
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * Standalone backdrop/scrim layer with a fade transition and
+ * press-to-dismiss — the shared building block behind `Dialog`,
+ * `Dropdown`, `Popover`, and `BottomSheet`'s backdrops, extracted here for
+ * building custom overlay UI, mirroring `@gnome-ui/react`'s `Overlay`.
+ *
+ * Deliberately minimal, same as the web version: no focus trap, no
+ * `BackHandler`/Escape handling, no `role`. Use `Dialog`/`Popover`/
+ * `BottomSheet` directly when you need those — this is only the fade +
+ * dismiss-on-backdrop-tap primitive underneath them.
+ *
+ * Built on `Modal` rather than the web version's `createPortal` — no
+ * `container` prop exists here, since RN's `Modal` has no equivalent
+ * mount-target concept (it always renders at the top of the native view
+ * hierarchy). Reuses `Dialog`'s exact backdrop recipe: an
+ * `AnimatedPressable` backdrop whose `onPress` fires `onDismiss`, wrapping
+ * `children` in a no-op `Pressable` so a tap on the content itself never
+ * bubbles to the backdrop and dismisses it — the RN analog of the web
+ * version's `e.target === e.currentTarget` check, which has no meaning in
+ * RN's touch-responder model.
+ *
+ * **Real, timed exit animation, same technique as `BottomSheet`**: a local
+ * `visible` state lags one animation behind the `open` prop, flipping to
+ * `false` only in the fade-out `Animated.timing`'s own completion callback
+ * — not a `setTimeout` racing a hardcoded duration like the web version,
+ * since `Animated`'s callback already fires exactly when the animation
+ * actually finishes. `useBodyScrollLock` has no RN equivalent needed —
+ * `Modal` already blocks all interaction with whatever's behind it.
+ */
+export declare const Overlay: ({ open, onDismiss, children, style, testID }: OverlayProps) => import("react/jsx-runtime").JSX.Element | null;

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

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

package/dist/components/Popover/Popover.d.ts

@@ -0,0 +1,91 @@
+import { ReactElement, ReactNode, Ref } from 'react';
+import { PressableProps, StyleProp, ViewStyle, View } from 'react-native';
+export type PopoverPlacement = 'top' | 'bottom' | 'left' | 'right';
+export interface PopoverProps {
+    /**
+     * The rich content rendered inside the popover panel.
+     * Can include interactive elements (buttons, links, forms).
+     */
+    content: ReactNode;
+    /**
+     * Preferred placement relative to the trigger.
+     * Flips automatically when there is not enough viewport space.
+     * Defaults to `"bottom"`.
+     */
+    placement?: PopoverPlacement;
+    /**
+     * Whether the popover is open (controlled mode).
+     * Omit to use uncontrolled mode where the trigger toggles it.
+     */
+    open?: boolean;
+    /** Called when open state should change. */
+    onOpenChange?: (open: boolean) => void;
+    /** Extra style on the popover panel itself. */
+    panelStyle?: StyleProp<ViewStyle>;
+    /**
+     * The trigger element. Must be a single element built on `Pressable`
+     * (e.g. `Button`, `Card`) that forwards its `ref` to the underlying `View`.
+     */
+    children: ReactElement<PressableProps & {
+        ref?: Ref<View>;
+    }>;
+}
+/**
+ * Floating panel anchored to a trigger element, following the Adwaita
+ * `GtkPopover` pattern. Unlike `Tooltip`, a popover can contain rich
+ * interactive content (buttons, links, forms).
+ *
+ * Rebuilt with `View`/`Pressable`/`Modal` rather than ported from
+ * `@gnome-ui/react`'s DOM `Portal` + manual focus trap, reusing this
+ * package's own established pieces rather than re-deriving them: `Tooltip`'s
+ * `cloneElement`-onto-an-arbitrary-trigger architecture and 4-placement
+ * fallback-cascade positioning (`computePosition`, same shape, no arrow-
+ * offset-shift-when-clamped complexity — same simplification `Tooltip`
+ * already accepted), and `Dropdown`'s toggle-on-press + full-screen backdrop
+ * `Pressable` that closes on an outside tap (the RN analog of the web
+ * version's document-level "click outside" listener) plus reduced-motion
+ * fade-in.
+ *
+ * **Deliberate divergence from `Dropdown`'s backdrop structure**: `Dropdown`
+ * nests its panel directly inside the backdrop `Pressable` and gets away
+ * with it because almost every pixel of its panel is itself a `Pressable`
+ * option row, which claims the touch responder before it can bubble to the
+ * backdrop. A popover's `content` is arbitrary — likely to have inert
+ * padding/whitespace/text with no `Pressable` of its own — so nesting the
+ * same way would let a tap on inert panel space fall through to the
+ * backdrop and close the popover, unlike the web version's `.contains()`
+ * check (which never closes on *any* tap inside the panel). Fixed with
+ * `onStartShouldSetResponder={() => true}` on the panel itself: it claims
+ * the touch responder for any touch RN's negotiation hasn't already given to
+ * a deeper `Pressable` inside `content`, without making the panel itself
+ * behave like a button.
+ *
+ * `BackHandler`'s `hardwareBackPress` (wired the same way `Dialog` already
+ * does) is the Android analog of the web version's document-level Escape
+ * listener — there is no keyboard `Escape` to catch on a touch-first device.
+ * Focus-trapping and focus-restore-on-close have no port: there is no DOM
+ * `document.activeElement`/`querySelector` equivalent in RN, the same gap
+ * that already left every other floating component in this package (
+ * `Dialog`, `Tooltip`, `Dropdown`) without them.
+ *
+ * The web version's rotated-square-with-matching-background arrow (relying
+ * on same-color blending across a straddled panel edge and CSS stacking
+ * order) is replaced with `Tooltip`'s simpler transparent-border-triangle
+ * technique — same visual affordance (a pointer toward the trigger), a much
+ * simpler RN-native primitive.
+ *
+ * `role="dialog"` on the panel ports 1:1 from RN's newer web-aligned `Role`
+ * union (the same one `Dialog`/`Tooltip` already use) — no substitution
+ * needed. `aria-haspopup`/`aria-controls` have no RN equivalent (no
+ * cross-platform relationship-attribute prop); only `accessibilityState.
+ * expanded` is wired on the trigger, the same subset `Dropdown`'s own
+ * trigger already exposes.
+ *
+ * @example
+ * <Popover content={<Text>Rich content here</Text>}>
+ *   <Button>Open</Button>
+ * </Popover>
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Popover.html
+ */
+export declare const Popover: ({ content, placement: preferredPlacement, open: controlledOpen, onOpenChange, panelStyle, children, }: PopoverProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export type { PopoverPlacement, PopoverProps } from './Popover';
+export { Popover } from './Popover';

package/dist/components/SpinButton/SpinButton.d.ts

@@ -0,0 +1,57 @@
+import { StyleProp, ViewStyle } from 'react-native';
+export interface SpinButtonProps {
+    /** Current value. */
+    value: number;
+    /** Called when the value changes. */
+    onChange: (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;
+    /**
+     * Wrap around instead of clamping at the edges — stepping past `max` returns
+     * to `min` and vice versa, and the −/+ buttons never disable. Mirrors
+     * `GtkSpinButton:wrap`; used for cyclic values like hours and minutes.
+     */
+    wrap?: boolean;
+    /**
+     * Custom display formatter for the current value (e.g. zero-padding, or
+     * mapping a numeric value to `AM`/`PM`). Defaults to fixed-decimal text. When
+     * provided, its result is also exposed as the accessibility value's `text`.
+     */
+    format?: (value: number) => string;
+    /** Disables the control. */
+    disabled?: boolean;
+    /** Accessible label. Required — RN has no visible-label association to fall back on. */
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Numeric input with − and + buttons following the Adwaita `GtkSpinButton` style.
+ *
+ * Rebuilt with `View`/`Pressable`/`Text` rather than ported from
+ * `@gnome-ui/react`'s DOM-based JSX, but mirrors its prop API and clamp/wrap/
+ * decimal math (pure JS, ported verbatim).
+ *
+ * The primary interaction is tapping the visible −/+ buttons, same as a
+ * sighted mouse user on the web version. The web version's keyboard
+ * interaction (↑/↓ one step, Page Up/Down ten steps, Home/End to bounds) has
+ * no RN equivalent — a touch-first device has no keyboard to drive it, the
+ * same reasoning `Slider` already applied. Rather than dropping value
+ * adjustment accessibility entirely, single-step increment/decrement is
+ * wired through `accessibilityRole="adjustable"` + `onAccessibilityAction`
+ * (VoiceOver's swipe-up/down, TalkBack's local-context menu), reusing the
+ * exact recipe `Slider` already proved works — the bigger Page Up/Down and
+ * Home/End jumps have no equivalent screen-reader gesture on either
+ * platform, so those alone are dropped, same as `Slider`. The visible
+ * buttons are hidden from the accessibility tree (mirrors the web version's
+ * `aria-hidden`/`tabIndex={-1}` on both `<button>`s) so a screen reader user
+ * gets one adjustable stop, not three.
+ *
+ * @see https://developer.gnome.org/hig/patterns/controls/spin-buttons.html
+ */
+export declare const SpinButton: ({ value, onChange, min, max, step, decimals, wrap, format, disabled, accessibilityLabel, style, }: SpinButtonProps) => import("react/jsx-runtime").JSX.Element;

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

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