@gnome-ui/react-native 1.5.0 → 1.7.0

package/dist/components/AvatarGroup/AvatarGroup.d.ts

@@ -0,0 +1,47 @@
+import { StyleProp, ViewStyle } from 'react-native';
+import { AvatarColor, AvatarSize } from '../Avatar';
+export interface AvatarGroupItem {
+    name?: string;
+    src?: string;
+    alt?: string;
+    color?: AvatarColor;
+}
+export interface AvatarGroupProps {
+    avatars: AvatarGroupItem[];
+    /** Max visible avatars before showing the overflow chip. Defaults to `5`. */
+    max?: number;
+    /** Size applied to all avatars and the overflow chip. Defaults to `"md"`. */
+    size?: AvatarSize;
+    /** Accessible label for the group. Auto-generated from names when omitted. */
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * Overlapping stack of `Avatar`s with a "+N" overflow indicator. Mirrors
+ * `@gnome-ui/react`'s `AvatarGroup`.
+ *
+ * The web version's separating ring around each overlapping avatar is two
+ * layered `box-shadow`s (an inset 1px dark/light border plus an outset 2px
+ * window-colored ring) — RN can only give a `View` one border, so this
+ * keeps just the outer window-colored ring (`borderWidth: 2,
+ * borderColor: theme.windowBgColor`, overriding `Avatar`'s own subtle 1px
+ * ring via its `style` prop), since that's the ring doing the actual
+ * "stay visually distinct from the avatar behind you" work — the inner
+ * hairline is a decorative nicety, not a behavior gap. The overflow chip
+ * reuses `Avatar`'s own per-size box dimensions (`sm`/`md`/`lg`/`xl` →
+ * 24/32/48/64) so it lines up exactly with the avatars beside it.
+ *
+ * `role="group"` + `accessibilityLabel` ports 1:1 from RN's newer
+ * web-aligned `Role` union (the same `Avatar`/`Badge`/`LevelBar`
+ * precedent) — the label is auto-generated from `avatars[].name` (joined,
+ * plus "and N more" when overflowing) exactly like the web version, unless
+ * overridden. The overflow chip's `+N` text is hidden from the
+ * accessibility tree (`accessibilityElementsHidden`/
+ * `importantForAccessibility="no"`) in favor of the chip's own
+ * `accessibilityLabel="+N more"` — the same one-stop-not-two reasoning
+ * `SpinButton`/`Avatar` already established for a decorative inner glyph.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Avatar.html
+ */
+export declare const AvatarGroup: ({ avatars, max, size, accessibilityLabel, style, testID, }: AvatarGroupProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export type { AvatarGroupItem, AvatarGroupProps } from './AvatarGroup';
+export { AvatarGroup } from './AvatarGroup';

package/dist/components/AvatarRotator/AvatarRotator.d.ts

@@ -0,0 +1,65 @@
+import { StyleProp, ViewStyle } from 'react-native';
+import { AvatarColor, AvatarSize } from '../Avatar';
+export interface AvatarRotatorProps {
+    /** Full name used for the accessible label and initials fallback. */
+    name?: string;
+    /** Image URLs to rotate through. */
+    avatars?: string[];
+    /** Accessible label. Defaults to `name`. */
+    alt?: string;
+    /** Size of the avatar. Defaults to `"md"`. */
+    size?: AvatarSize;
+    /** Fallback initials color when no avatar image is available. */
+    color?: AvatarColor;
+    /** Time between avatar changes in milliseconds. Defaults to `3000`. */
+    interval?: number;
+    /** Crossfade duration in milliseconds. Defaults to `240`. */
+    transitionDuration?: number;
+    /** Pause automatic rotation while pressed and held. Defaults to `true`. */
+    pauseOnPress?: boolean;
+    /**
+     * Controlled active avatar index.
+     * When omitted the rotator manages index state internally.
+     */
+    activeIndex?: number;
+    /** Initial active avatar index for uncontrolled usage. Defaults to `0`. */
+    defaultActiveIndex?: number;
+    /** Called when the active avatar changes. */
+    onIndexChange?: (index: number) => void;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * Single avatar surface that crossfades through multiple image sources.
+ * Mirrors `@gnome-ui/react`'s `AvatarRotator`. Keeps `Avatar` focused on
+ * rendering one identity, while this component owns timing, crossfade
+ * animation, and pause behavior.
+ *
+ * Each source renders as its own absolutely-positioned `Avatar`, layered
+ * via `StyleSheet.absoluteFill` and crossfaded with `Animated.timing` on
+ * `useNativeDriver: true` — an exact reproduction of the web version's
+ * stacked-`.layer`-elements-with-opacity-transition technique, just with
+ * `RotatorLayer` (see above) owning each layer's own `Animated.Value`
+ * instead of a single shared CSS custom property driving them all.
+ *
+ * **`prefers-reduced-motion` stops the rotation outright, not just the
+ * fade** — ported exactly: the web source's own auto-advance `useEffect`
+ * bails out early when reduced motion is on, the same as when paused, so
+ * this isn't merely an instant-swap-instead-of-crossfade case like
+ * `ProgressBar`'s determinate transitions.
+ *
+ * The web version's `pauseOnHover` (mouseEnter/mouseLeave, focus/blur)
+ * becomes `pauseOnPress` (`onPressIn`/`onPressOut`) — the same touch
+ * substitution `Toast`'s own press-and-hold pause already established,
+ * kept as a real toggleable prop here (unlike `Toast`, where the web
+ * source bakes the behavior in without an escape hatch).
+ * `usePrefersReducedMotion` (the web version's `@gnome-ui/hooks` import)
+ * has no bearing here — this package's own `useReducedMotion()` from
+ * `GnomeProvider` is the correct, already-established source for this.
+ *
+ * `role="img"` + `accessibilityLabel` ports 1:1 from RN's newer
+ * web-aligned `Role` union (the same `Avatar`/`AvatarGroup` precedent).
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Avatar.html
+ */
+export declare const AvatarRotator: ({ name, avatars, alt, size, color, interval, transitionDuration, pauseOnPress, activeIndex, defaultActiveIndex, onIndexChange, style, testID, }: AvatarRotatorProps) => import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/Bin/Bin.d.ts

@@ -0,0 +1,18 @@
+import { View, ViewProps } from 'react-native';
+export type BinProps = ViewProps;
+/**
+ * Single-child container with no visual styling.
+ *
+ * A transparent wrapper that forwards all `View` props (and a ref to the
+ * underlying `View`) straight through — useful as a neutral base for custom
+ * components that need to apply layout or size constraints without
+ * introducing any chrome of their own.
+ *
+ * Mirrors `AdwBin` and `@gnome-ui/react`'s own `Bin`. A plain RN `View`
+ * already has no default visual styling (no background, no border), so
+ * unlike the web port there's no CSS reset to strip — this is a pure
+ * passthrough.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Bin.html
+ */
+export declare const Bin: import('react').ForwardRefExoticComponent<ViewProps & import('react').RefAttributes<View>>;

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

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

package/dist/components/Box/Box.d.ts

@@ -0,0 +1,87 @@
+import { ReactNode } from 'react';
+import { StyleProp, View, ViewProps, ViewStyle } from 'react-native';
+/** GNOME HIG standard spacing values (matches `GtkBox` spacing tokens). */
+export type BoxSpacing = 3 | 6 | 12 | 18 | 24 | 32 | 48;
+/** Alias of `BoxSpacing` for use as a padding scale. */
+export type BoxPadding = BoxSpacing;
+export type BoxOrientation = 'horizontal' | 'vertical';
+export type BoxAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+export type BoxJustify = 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
+export interface BoxProps extends Omit<ViewProps, 'style'> {
+    /**
+     * Direction children are arranged.
+     * `"vertical"` → `flexDirection: 'column'` (default).
+     * `"horizontal"` → `flexDirection: 'row'`.
+     */
+    orientation?: BoxOrientation;
+    /**
+     * Gap between children, in density-independent pixels.
+     * Accepts any of the GNOME HIG standard spacing values or any number.
+     * Defaults to `6` (the HIG "standard" inner spacing).
+     */
+    spacing?: BoxSpacing | number;
+    /**
+     * Cross-axis alignment (`alignItems`).
+     * Defaults to `"stretch"` for vertical, `"center"` for horizontal.
+     */
+    align?: BoxAlign;
+    /**
+     * Main-axis distribution (`justifyContent`).
+     * Defaults to `"start"`.
+     */
+    justify?: BoxJustify;
+    /** Inner padding applied to all sides, in density-independent pixels. */
+    padding?: BoxPadding | number;
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Fundamental flex layout primitive — the RN equivalent of `GtkBox`, and a
+ * 1:1 mirror of `@gnome-ui/react`'s own `Box`.
+ *
+ * Arranges children in a single row or column with consistent spacing
+ * following the GNOME Human Interface Guidelines spacing scale:
+ *
+ * | Token | dp | Use |
+ * |-------|----|-----|
+ * | tight | 3  | Dense UI, icon + label pairs |
+ * | standard | 6 | Default inner spacing |
+ * | medium | 12 | Between related groups |
+ * | large | 18 | Between loosely related sections |
+ * | section | 24 | Page-level section gaps |
+ * | loose | 32 | Large content separation |
+ * | jumbo | 48 | Hero / splash spacing |
+ *
+ * `BoxSpacing` keeps the web package's exact seven values rather than being
+ * remapped onto this package's own `theme.space1`–`space6` scale — the two
+ * overlap at 6/12/18/24/48 but not at 3 or 32/36, and `BoxSpacing` is a
+ * published type consumers may already be importing, so it ports verbatim.
+ *
+ * Two things the web version accepts don't survive the platform: `spacing`
+ * and `padding` are numbers only (RN's `gap`/`padding` take dp, not CSS
+ * strings like `"1rem"`), and `align`/`justify` — which the web passes
+ * straight through to CSS — are mapped from their bare `start`/`end`
+ * keywords onto Yoga's `flex-start`/`flex-end`. The prop values stay the
+ * web ones so the API reads identically across both packages; only the
+ * internal translation differs.
+ *
+ * `display: 'flex'` has no port and needs none — every RN `View` is already
+ * a flex container.
+ *
+ * @example
+ * // Vertical section (heading + content)
+ * <Box spacing={12}>
+ *   <Text variant="caption-heading" color="dim">Devices</Text>
+ *   <BoxedList>…</BoxedList>
+ * </Box>
+ *
+ * @example
+ * // Horizontal icon + label
+ * <Box orientation="horizontal" spacing={6} align="center">
+ *   <Icon icon={Folder} />
+ *   <Text>Documents</Text>
+ * </Box>
+ *
+ * @see https://developer.gnome.org/hig/guidelines/spacing.html
+ */
+export declare const Box: import('react').ForwardRefExoticComponent<BoxProps & import('react').RefAttributes<View>>;

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

@@ -0,0 +1,2 @@
+export type { BoxAlign, BoxJustify, BoxOrientation, BoxPadding, BoxProps, BoxSpacing, } from './Box';
+export { Box } from './Box';

package/dist/components/Clamp/Clamp.d.ts

@@ -0,0 +1,61 @@
+import { ReactNode } from 'react';
+import { StyleProp, View, ViewProps, ViewStyle } from 'react-native';
+export interface ClampProps extends Omit<ViewProps, 'style'> {
+    /**
+     * Maximum content width in density-independent pixels.
+     * The container shrinks freely below this value.
+     * Defaults to `600` — the Adwaita recommended narrow-content width.
+     */
+    maximumSize?: number;
+    /**
+     * Fractional width (`0`–`1`) of the available space to use while that
+     * space is narrower than `maximumSize` — useful for keeping a
+     * comfortable margin on medium-width screens. Defaults to `1` (always
+     * fill the width).
+     */
+    tighteningThreshold?: number;
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Constrains its children to a maximum width while letting them shrink
+ * freely, mirroring the Adwaita `AdwClamp` widget and `@gnome-ui/react`'s
+ * own `Clamp`.
+ *
+ * Use it on settings pages and forms so content never becomes too wide to
+ * read comfortably on a tablet or a landscape phone, while still filling
+ * the available width on a narrow one.
+ *
+ * The web version's `margin-inline: auto` centering becomes
+ * `alignSelf: 'center'` here rather than `marginHorizontal: 'auto'` —
+ * RN auto-margin support was left unverified for this Yoga version when
+ * `Drawer` needed the same trick, so this follows `Drawer`'s resolution of
+ * using flex alignment instead. The one consequence is that `Clamp`
+ * expects a column-direction parent (RN's default): `alignSelf` acts on
+ * the cross axis, so inside a `flexDirection: 'row'` parent it would
+ * centre vertically instead. Wrap it in a plain `View` there.
+ *
+ * `tighteningThreshold` is a real percentage width here, unlike in
+ * `@gnome-ui/react` where the prop is declared and documented but never
+ * reaches the DOM — implementing it exactly as that package documents it
+ * (a fraction of the available width, still capped by `maximumSize`)
+ * costs nothing on RN and avoids shipping a dead prop.
+ *
+ * Adds no padding of its own — wrap the content in its own padded
+ * container as needed.
+ *
+ * @example
+ * // Settings page — content never wider than 600 dp
+ * <Clamp>
+ *   <BoxedList>…</BoxedList>
+ * </Clamp>
+ *
+ * @example
+ * // Leave a 10% margin while the screen is narrower than 480 dp
+ * <Clamp maximumSize={480} tighteningThreshold={0.9}>
+ *   <Text>…</Text>
+ * </Clamp>
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Clamp.html
+ */
+export declare const Clamp: import('react').ForwardRefExoticComponent<ClampProps & import('react').RefAttributes<View>>;

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

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

package/dist/components/CoachMark/CoachMark.d.ts

@@ -0,0 +1,92 @@
+import { ReactNode, RefObject } from 'react';
+import { StyleProp, ViewStyle, View } from 'react-native';
+import { CoachMarkPlacement } from './coachMarkUtils';
+export interface CoachMarkAction {
+    label: string;
+    onPress: () => void;
+}
+export interface CoachMarkProps {
+    /** Whether the coach mark is shown. */
+    open: boolean;
+    /** The element to highlight and anchor to. */
+    targetRef: RefObject<View | null>;
+    /** Heading text. */
+    title?: ReactNode;
+    /** Body copy explaining the highlighted element. */
+    description?: ReactNode;
+    /** Preferred side of the target for the bubble. Flips to stay on-screen. Defaults to `'bottom'`. */
+    placement?: CoachMarkPlacement;
+    /** Dim the rest of the screen and cut a spotlight around the target. Defaults to `true`. */
+    spotlight?: boolean;
+    /** Extra px around the target inside the spotlight cutout. Defaults to `8`. */
+    spotlightPadding?: number;
+    /** Close when the dimmed backdrop is pressed. Defaults to `false` (guided). */
+    dismissOnBackdrop?: boolean;
+    /** 1-based index of this step within a tour, for the "X of N" counter. */
+    step?: number;
+    /** Total number of steps in the tour. */
+    stepCount?: number;
+    /** Primary (suggested) action, e.g. Next / Got it. */
+    primaryAction?: CoachMarkAction;
+    /** Secondary (flat) action, e.g. Back. */
+    secondaryAction?: CoachMarkAction;
+    /** Called when the Android back button is pressed, or the backdrop is dismissed. */
+    onDismiss?: () => void;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * A single onboarding coach mark: it spotlights a target element and
+ * anchors a callout bubble (title, description, step counter, actions)
+ * beside it, guiding a user to one feature. Compose several with
+ * `CoachMarkTour`, or drive one directly with `open`. Mirrors
+ * `@gnome-ui/react`'s `CoachMark` — not a GNOME HIG widget, a pragmatic
+ * feature-discovery pattern.
+ *
+ * Rebuilt on RN's own `Modal` rather than the web version's DOM `Portal` —
+ * no `container` prop, the same `Overlay`/`Drawer` precedent for "no RN
+ * portal-target concept." Positions with the same two-pass viewport-aware
+ * flip as the web version (`coachMarkUtils.ts`, duplicated verbatim — pure
+ * math, no DOM), resolved from `targetRef.current?.measureInWindow(...)`
+ * and the bubble's own `onLayout` size, combined once both arrive — the
+ * same "resolve two independent async things, then combine" shape
+ * `Tooltip`/`Popover`/`Dropdown` already established. No focus trap (no
+ * DOM `Tab` concept in RN) and no scroll/resize re-positioning (RN has no
+ * global scroll event, the same `Tooltip` precedent for a transient
+ * floating element).
+ *
+ * **The spotlight cutout has no CSS `box-shadow: 0 0 0 100vmax` port** —
+ * that trick paints an opaque scrim everywhere *except* inside a rounded
+ * rect by using a huge spread shadow, which RN's `shadow*` props (real OS
+ * shadows, not a scrim generator) can't reproduce. Rebuilt as four plain
+ * `View` bands (top/bottom/left/right of the padded target rect) filling
+ * the screen minus a rectangular hole, plus a separate rounded
+ * `accentColor`-bordered ring `View` drawn on top at the target rect —
+ * visually equivalent (dims everything but the target, with an accent
+ * ring around it), just assembled from ordinary rects instead of one
+ * masked shape. The whole overlay (bands + ring) sits inside a single
+ * full-screen `Pressable`, so — matching the web version exactly — a tap
+ * anywhere within it (including visually "in the hole," since the web
+ * version's backdrop is one full-bleed element with the spotlight only
+ * painted on top, `pointer-events: none`) triggers `dismissOnBackdrop`,
+ * never the real content underneath.
+ *
+ * **`dismissOnBackdrop` has no effect when `spotlight` is `false`** —
+ * ported faithfully, not fixed: the web source only renders a backdrop
+ * element at all when `spotlight` is true, so with `spotlight={false}`
+ * there is nothing to press to dismiss via backdrop either way, on both
+ * platforms.
+ *
+ * The arrow reuses `Popover`/`Tooltip`'s transparent-border-triangle trick
+ * rather than the web CSS's rotated-45°-square, the same established RN
+ * substitution for every floating-bubble arrow in this package — offset
+ * along the bubble's edge by `arrowOffset` (from `computeBubblePosition`,
+ * unlike `Tooltip`/`Popover`'s simpler always-centered arrow).
+ *
+ * `role="dialog"` + `accessibilityViewIsModal` port 1:1 from `Dialog`'s
+ * own precedent. `BackHandler`'s `hardwareBackPress` is the Android analog
+ * of the web version's Escape listener.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Window.html
+ */
+export declare const CoachMark: ({ open, targetRef, title, description, placement, spotlight, spotlightPadding, dismissOnBackdrop, step, stepCount, primaryAction, secondaryAction, onDismiss, style, testID, }: CoachMarkProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/CoachMark/CoachMarkTour.d.ts

@@ -0,0 +1,54 @@
+import { ReactNode, RefObject } from 'react';
+import { View } from 'react-native';
+import { CoachMarkPlacement } from './coachMarkUtils';
+export interface CoachMarkStep {
+    /** The element this step highlights. */
+    targetRef: RefObject<View | null>;
+    /** Heading for the step. */
+    title?: ReactNode;
+    /** Body copy for the step. */
+    description?: ReactNode;
+    /** Preferred bubble side for this step. Defaults to the tour's placement. */
+    placement?: CoachMarkPlacement;
+}
+export interface CoachMarkTourProps {
+    /** Ordered steps of the tour. */
+    steps: CoachMarkStep[];
+    /** Whether the tour is running. */
+    open: boolean;
+    /** Step to start on when the tour opens. Defaults to `0`. */
+    startIndex?: number;
+    /** Called after the primary action on the final step. */
+    onFinish?: () => void;
+    /** Called when the user skips (Skip button or Android back) before finishing. */
+    onSkip?: () => void;
+    /** Called with the new index whenever the active step changes. */
+    onStepChange?: (index: number) => void;
+    /** Default preferred bubble side for steps that don't set their own. Defaults to `'bottom'`. */
+    placement?: CoachMarkPlacement;
+    /** Spotlight the target. Defaults to `true`. */
+    spotlight?: boolean;
+    /** Close the tour when the dimmed backdrop is pressed. Defaults to `false`. */
+    dismissOnBackdrop?: boolean;
+    /** Override the action-button labels (for i18n). */
+    labels?: Partial<{
+        next: string;
+        back: string;
+        skip: string;
+        finish: string;
+    }>;
+    testID?: string;
+}
+/**
+ * Sequential onboarding tour built from `CoachMark` steps. Renders the
+ * mark for the active step, wires Next/Back/Skip/Done and the "X of N"
+ * counter, and advances through `steps` until finished or skipped.
+ * Mirrors `@gnome-ui/react`'s `CoachMarkTour` verbatim — pure state
+ * orchestration on top of `CoachMark`, nothing platform-specific to
+ * change.
+ *
+ * Uncontrolled step index: the tour tracks its own position and resets to
+ * `startIndex` each time it opens. Drive visibility with `open`; react to
+ * completion with `onFinish`/`onSkip`.
+ */
+export declare const CoachMarkTour: ({ steps, open, startIndex, onFinish, onSkip, onStepChange, placement, spotlight, dismissOnBackdrop, labels, testID, }: CoachMarkTourProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/CoachMark/coachMarkUtils.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Positioning helpers for `CoachMark`. Kept pure and measurement-free so
+ * they can be unit-tested directly; the component feeds them real rects
+ * (from `measureInWindow` instead of the web version's
+ * `getBoundingClientRect`, but the shape is identical either way).
+ *
+ * Duplicated verbatim from `@gnome-ui/react` rather than imported
+ * cross-package — the same `fileType.ts`/`Icon.tsx` precedent for
+ * DOM-free logic that isn't worth a shared package for one file's worth
+ * of code.
+ *
+ * The algorithm mirrors `Popover`'s viewport-aware flip: try the preferred
+ * side, then its opposite, then the rest, picking the first that fits;
+ * clamp the cross-axis and shift the arrow when nothing fits perfectly.
+ */
+export type CoachMarkPlacement = 'top' | 'bottom' | 'left' | 'right';
+export interface Rect {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
+export interface BubblePosition {
+    top: number;
+    left: number;
+    placement: CoachMarkPlacement;
+    /** Arrow centre offset in px from the near edge of the bubble. */
+    arrowOffset: number;
+}
+/** Grow a rect outward by `pad` on every side, e.g. the spotlight cutout. */
+export declare const padRect: (rect: Rect, pad: number) => Rect;
+/**
+ * Place the callout bubble around `target`, flipping to stay inside a
+ * `viewport` (width × height). `bubble` is the measured bubble size.
+ */
+export declare const computeBubblePosition: (target: Rect, bubble: {
+    width: number;
+    height: number;
+}, viewport: {
+    width: number;
+    height: number;
+}, preferred: CoachMarkPlacement) => BubblePosition;

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

@@ -0,0 +1,5 @@
+export type { CoachMarkAction, CoachMarkProps } from './CoachMark';
+export { CoachMark } from './CoachMark';
+export type { CoachMarkStep, CoachMarkTourProps } from './CoachMarkTour';
+export { CoachMarkTour } from './CoachMarkTour';
+export type { CoachMarkPlacement } from './coachMarkUtils';

package/dist/components/ColorPicker/ColorPicker.d.ts

@@ -0,0 +1,81 @@
+import { StyleProp, ViewStyle } from 'react-native';
+import { ColorSwatchSize } from './ColorSwatch';
+export interface ColorPickerColor {
+    /** Color value (hex recommended). */
+    value: string;
+    /** Human-readable name, used as the swatch's accessible label. */
+    label?: string;
+}
+/** Default Adwaita-named palette (matches the `Avatar` color set). */
+export declare const GNOME_PALETTE: ColorPickerColor[];
+export interface ColorPickerProps {
+    /** Currently selected color value. */
+    value?: string;
+    /** Called when the user selects a color. */
+    onChange?: (value: string) => void;
+    /** Palette to display. Defaults to `GNOME_PALETTE` (the 9 Adwaita colors). */
+    colors?: ColorPickerColor[];
+    /**
+     * Show a "+" button after the palette, and render any `value` outside the
+     * palette as its own selected swatch. Pressing either calls
+     * `onRequestCustom` — RN has no `<input type="color">`, so the picker UI
+     * itself is the consuming app's to provide. Defaults to `false`.
+     */
+    allowCustom?: boolean;
+    /**
+     * Called when the "+" button (or the current custom swatch) is pressed.
+     * Open your own color picker here and feed the result back through
+     * `value`/`onChange`.
+     */
+    onRequestCustom?: () => void;
+    /** Swatch size. Defaults to `"md"`. */
+    size?: ColorSwatchSize;
+    /** Accessible name for the group. Defaults to `"Color"`. */
+    accessibilityLabel?: string;
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * Color palette picker following the Adwaita `GtkColorButton` + swatch
+ * pattern, mirroring `@gnome-ui/react`'s own `ColorPicker`. Renders a
+ * wrapping row of circular `ColorSwatch` items backed by a radio group.
+ *
+ * **`allowCustom` is the one prop that changes meaning.** On the web it
+ * wires a hidden `<input type="color">` and the browser supplies the whole
+ * picker UI; RN has no such control, and building an HSV picker would be a
+ * component in its own right rather than a detail of this one. So the prop
+ * keeps its *visible* behaviour — the "+" button, and a `value` outside the
+ * palette shown as its own selected swatch — while the press is handed to
+ * `onRequestCustom` for the app to answer with whatever picker it has. Round
+ * trips through `value`/`onChange` exactly as before.
+ *
+ * The container is a `WrapBox` (`display: flex; flex-wrap: wrap; gap: 8`
+ * with nothing else in `.picker`), and the "+" button's `border: 1.5px
+ * dashed` ports directly — `borderStyle: 'dashed'` is one of the few CSS
+ * border tricks RN does support. Its plus glyph comes from `@gnome-ui/icons`
+ * rather than the web's hand-drawn path, since `Add` is the same mark and
+ * already resolves to the foreground color `.customButton` asks for.
+ *
+ * As in `ToggleGroup`, the group takes `accessibilityRole="radiogroup"` but
+ * deliberately not `accessible`, which on iOS would collapse the swatches
+ * into one unreachable element. Arrow-key navigation and the roving
+ * `tabIndex` drop, as everywhere else here.
+ *
+ * @example
+ * const [color, setColor] = useState('#3584e4');
+ *
+ * <ColorPicker value={color} onChange={setColor} />
+ *
+ * @example
+ * // Custom colors, with your own picker behind the "+"
+ * <ColorPicker
+ *   value={color}
+ *   onChange={setColor}
+ *   allowCustom
+ *   onRequestCustom={() => setPickerOpen(true)}
+ * />
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ColorButton.html
+ */
+export declare const ColorPicker: ({ value, onChange, colors, allowCustom, onRequestCustom, size, accessibilityLabel, disabled, style, testID, }: ColorPickerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ColorPicker/ColorSwatch.d.ts

@@ -0,0 +1,50 @@
+import { PressableProps, StyleProp, View, ViewStyle } from 'react-native';
+export type ColorSwatchSize = 'sm' | 'md' | 'lg';
+/** `.swatch-sm` / `-md` / `-lg`. */
+export declare const SWATCH_DIAMETER: Record<ColorSwatchSize, number>;
+/**
+ * Width of the selected state's outer ring. Reserved as padding on every
+ * swatch, selected or not, so selecting one never reflows the row — the web
+ * gets this for free because `box-shadow` rings don't take up space.
+ */
+export declare const RING_WIDTH = 2;
+export interface ColorSwatchProps extends Omit<PressableProps, 'children' | 'style' | 'onPress' | 'disabled'> {
+    /** Color value displayed as the swatch background. */
+    color: string;
+    /** Whether this swatch is the currently selected color. */
+    selected?: boolean;
+    /** Swatch diameter. Defaults to `"md"`. */
+    size?: ColorSwatchSize;
+    /** Called with `color` when the swatch is pressed. */
+    onSelect?: (color: string) => void;
+    /** Accessible name. Defaults to the color value. */
+    accessibilityLabel?: string;
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Single circular color swatch. Usable standalone or composed inside
+ * `ColorPicker`, and shows a white checkmark when `selected`.
+ *
+ * The web's three `box-shadow` rings collapse into real box-model pieces,
+ * since RN gives a `View` exactly one border: the resting
+ * `inset 0 0 0 1px` hairline becomes `borderWidth: 1`, the selected state's
+ * `inset 0 0 0 2px rgb(255 255 255 / .9)` becomes a 2 dp white border, and
+ * the outer `0 0 0 2px var(--swatch-color)` becomes a wrapper painted in the
+ * swatch color. That wrapper is always rendered with the same 2 dp padding
+ * and only changes color, because a `box-shadow` ring costs no layout space
+ * on the web while a real padded wrapper does — reserving it unconditionally
+ * is what keeps the row from reflowing as the selection moves.
+ *
+ * The checkmark is hand-drawn with `react-native-svg` rather than taken from
+ * `@gnome-ui/icons`, mirroring the web version, which also hand-draws it:
+ * it's a stroked path, and `Icon`'s palette has no white to give it anyway.
+ * `filter: drop-shadow(...)` has no RN counterpart, so the path is drawn
+ * twice — a translucent black copy offset 1 dp down, then the white one on
+ * top — which is what that filter renders and is why it exists: without it
+ * the check disappears on a yellow swatch.
+ *
+ * `:hover { transform: scale(1.12) }` drops with hover; the selected
+ * `scale(1.05)` ports as-is.
+ */
+export declare const ColorSwatch: import('react').ForwardRefExoticComponent<ColorSwatchProps & import('react').RefAttributes<View>>;

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

@@ -0,0 +1,4 @@
+export type { ColorPickerColor, ColorPickerProps } from './ColorPicker';
+export { ColorPicker, GNOME_PALETTE } from './ColorPicker';
+export type { ColorSwatchProps, ColorSwatchSize } from './ColorSwatch';
+export { ColorSwatch } from './ColorSwatch';