@gnome-ui/react-native 1.3.0 → 1.5.0

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