@gnome-ui/react-native 1.4.0 → 1.6.0

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/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/Chip/Chip.d.ts

@@ -0,0 +1,63 @@
+import { IconDefinition } from '@gnome-ui/icons';
+import { StyleProp, ViewStyle } from 'react-native';
+export interface ChipProps {
+    /** Text label displayed inside the chip. */
+    label: string;
+    /** Leading icon from `@gnome-ui/icons`. */
+    icon?: IconDefinition;
+    /**
+     * When provided, renders a remove (×) button and calls this handler.
+     * The chip root becomes a plain `View`; only the remove button is
+     * interactive.
+     */
+    onRemove?: () => void;
+    /**
+     * When true the chip renders as a toggle button.
+     * Use `selected` + `onToggle` to control its state.
+     */
+    selectable?: boolean;
+    /** Active/selected state. Only relevant when `selectable` is true. */
+    selected?: boolean;
+    /**
+     * Called when a selectable chip is pressed.
+     * Only relevant when `selectable` is true.
+     */
+    onToggle?: () => void;
+    /** Disabled state — applies to both selectable chips and the remove button. */
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * Compact pill-shaped label for tags, filters, and selection states.
+ * Mirrors `@gnome-ui/react`'s `Chip`.
+ *
+ * Three usage modes:
+ * - **Static** — just a visual label (no `onRemove`, no `selectable`).
+ * - **Removable** — add `onRemove` to show a × button.
+ * - **Selectable** — add `selectable` + `selected` + `onToggle` for toggle
+ *   behavior. Same `isInteractive = selectable && !onRemove` precedence as
+ *   the web version: passing both `selectable` and `onRemove` renders the
+ *   remove button, not a toggle.
+ *
+ * Pair with `WrapBox` for multi-chip layouts.
+ *
+ * Rebuilt with `Pressable`/`View`/`Text` rather than ported from
+ * `@gnome-ui/react`'s `<button>`/`<span>`: the selected background/border
+ * tint (`color-mix(in srgb, accent 15%/50%, transparent)`) has no RN
+ * equivalent, resolved to a literal 8-digit `#RRGGBBAA` hex instead — the
+ * same `Highlight` precedent, since `accentBgColor` is always a plain
+ * 6-digit hex. The `:hover`/`:active` background transitions collapse into
+ * a single pressed-state overlay tinted by `theme.activeOverlay` (the same
+ * `ActionRow`/`Card` recipe), since touch has no hover. The leading icon
+ * and remove (×) icon don't recolor to match the selected accent text
+ * (`color: inherit` on the web) — RN's `Icon` has no `currentColor`
+ * equivalent and only accepts a fixed named-swatch palette, none of which
+ * tracks the app's configurable accent color, so both icons stay in the
+ * default foreground color; a decorative nicety dropped, not a behavior
+ * gap. `accessibilityRole="checkbox"` on the selectable form ports 1:1
+ * (the same `Checkbox` precedent).
+ *
+ * @see https://developer.gnome.org/hig/patterns/selection.html
+ */
+export declare const Chip: ({ label, icon, onRemove, selectable, selected, onToggle, disabled, style, testID, }: ChipProps) => import("react/jsx-runtime").JSX.Element;

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

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

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/Drawer/Drawer.d.ts

@@ -0,0 +1,117 @@
+import { IconDefinition } from '@gnome-ui/icons';
+import { ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export type DrawerSide = 'left' | 'right';
+export type DrawerSize = 'classic' | 'wide';
+export interface DrawerRailItem {
+    /** Stable unique identifier. */
+    id: string;
+    /** Icon shown for this rail entry. */
+    icon: IconDefinition;
+    /** Accessible name, also used as the tooltip. */
+    label: string;
+    /** Whether this entry represents the currently visible drawer/panel. */
+    active?: boolean;
+    disabled?: boolean;
+    onPress: () => void;
+}
+export interface DrawerProps {
+    /** Whether the drawer is visible. */
+    open: boolean;
+    /** Edge that the drawer slides in from. Defaults to `"right"`. */
+    side?: DrawerSide;
+    /** Preset drawer width. Defaults to `"classic"`. */
+    size?: DrawerSize;
+    /** Optional drawer heading. */
+    title?: ReactNode;
+    /** Drawer content when a prop is preferred over `children`. */
+    content?: ReactNode;
+    /** Drawer content. Used when `content` is not provided. */
+    children?: ReactNode;
+    /** Called when the user dismisses the drawer with the Android back button or the backdrop. */
+    onClose?: () => void;
+    /** Whether pressing the backdrop closes the drawer. Defaults to `true`. */
+    closeOnBackdrop?: boolean;
+    /**
+     * Narrow icon rail rendered on the drawer's inner edge (the edge facing
+     * the backdrop), for switching between related drawers or panels without
+     * closing the drawer. Purely presentational — pressing an entry only
+     * calls its `onPress`; the caller decides what happens (swap `content`,
+     * open a different drawer, etc).
+     */
+    rail?: DrawerRailItem[];
+    style?: StyleProp<ViewStyle>;
+    /** Forwarded to the backdrop — useful for testing. */
+    testID?: string;
+}
+/**
+ * Slide-in panel for supplementary content, anchored to the left or right
+ * edge. Mirrors `@gnome-ui/react`'s `Drawer`.
+ *
+ * Rebuilt with `View`/`Modal` rather than ported from the web version's
+ * `createPortal(document.body)` + manual focus trap + Escape listener:
+ * `Modal` already floats above everything with no portal target needed,
+ * and `BackHandler`'s `hardwareBackPress` is the Android analog of the
+ * Escape listener (the same `Dialog`/`BottomSheet` precedent). Focus
+ * trapping has no port — no DOM `Tab`/`document.activeElement` concept in
+ * RN's touch-first model.
+ *
+ * **Floats with a margin on every side, all four corners rounded** — the
+ * backdrop `Pressable` carries `padding: theme.space3` (matching the
+ * `@gnome-ui/react` source's own recent update to the same floating-card
+ * look, not a divergence), and the drawer itself gets a uniform
+ * `borderRadius` instead of the flat-edge-on-the-anchored-side look a
+ * flush-to-the-screen-edge panel would need. Positioning within that
+ * padded backdrop uses `justifyContent: 'flex-end'`/`'flex-start'` on the
+ * backdrop (not the web CSS's `margin-left/right: auto` on the drawer
+ * itself) — confirmed empirically (a throwaway build with saturated debug
+ * colors standing in for the real theme colors, screenshotted on-device)
+ * that `justifyContent` renders correctly while auto-margins were, at
+ * best, unverified for this RN/Yoga version; `BottomSheet` already proves
+ * the same `justifyContent: 'flex-end'` mechanism works on this exact
+ * setup, just on the vertical axis instead of horizontal. On a phone-width
+ * screen the `classic`/`wide` presets (420/640, sized for wider viewports)
+ * get capped to fill essentially the entire available width after the
+ * margin either way, so the anchored side becomes visually obvious mainly
+ * on tablets — the same responsive behavior the web version would show at
+ * an equally narrow browser width, not an RN-specific gap.
+ *
+ * **No drag-to-dismiss, unlike `BottomSheet`**: the web source only
+ * defines entrance keyframes for both the backdrop and the panel, so this
+ * follows `Dialog`'s simpler shape (a single `progress` `Animated.Value`
+ * replayed via `useEffect` keyed on `open`, no separate exit animation or
+ * lagging `visible` state) rather than `BottomSheet`'s
+ * `PanResponder`-plus-timed-exit machinery.
+ *
+ * **The slide distance needs no `onLayout` measurement**, unlike
+ * `BottomSheet`'s content-driven height: the drawer's width is a value
+ * this component already computes in JS (`size`'s preset, scaled down by
+ * `DrawerDepthContext` depth, capped by the available space after the
+ * backdrop's margin) — RN's `transform` has no percentage-of-self units
+ * (the same `BottomSheet`/`Avatar`/`Slider` pitfall), but since the exact
+ * pixel width is already known synchronously, `translateX` can animate
+ * from that known offset to `0` immediately, with no first-frame
+ * imprecision to accept.
+ *
+ * **`DrawerDepthContext` (nested-drawer width auto-scaling) ports 1:1** —
+ * pure React Context state, no DOM dependency at all. A `Drawer` opened
+ * from within another drawer's `content`/`children` is detected via
+ * context and scales its own preset width down (`0.85^depth`, floored at
+ * `DRAWER_MIN_WIDTH`) so stacked drawers read as a drill-in hierarchy
+ * instead of identical overlapping panels.
+ *
+ * **`rail` reuses the newly-added `IconButton`** (itself just `Button` +
+ * `Icon` + optional `Tooltip`, the same composition `@gnome-ui/react`'s own
+ * `IconButton` already is) — `aria-pressed` becomes
+ * `accessibilityState={{ selected: item.active }}`, the closest RN
+ * equivalent for a toggleable icon button with no dedicated visual
+ * "pressed" style on either platform's source.
+ *
+ * `backdrop-filter: blur(4px)` has no port — no native blur view
+ * dependency exists in this package, the same gap already dropped from
+ * `Sidebar`'s blurred `variant`/`BottomSheet`'s backdrop. `role="dialog"` +
+ * `accessibilityViewIsModal` port 1:1 from `Dialog`'s own precedent.
+ *
+ * @see https://developer.gnome.org/hig/patterns/containers.html
+ */
+export declare const Drawer: ({ open, side, size, title, content, children, onClose, closeOnBackdrop, rail, style, testID, }: DrawerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export type { DrawerProps, DrawerRailItem, DrawerSide, DrawerSize } from './Drawer';
+export { Drawer } from './Drawer';

package/dist/components/FileTypeIcon/FileTypeIcon.d.ts

@@ -0,0 +1,45 @@
+import { StyleProp, ViewStyle } from 'react-native';
+import { IconSize } from '../Icon';
+export interface FileTypeIconProps {
+    /** File name (e.g. `"report.pdf"`) — resolves the icon from its extension. */
+    name?: string;
+    /**
+     * MIME type (e.g. `"application/pdf"`, `"inode/directory"`).
+     * Takes precedence over `name` when both are provided.
+     */
+    mimeType?: string;
+    /** Renders the folder icon regardless of `name`/`mimeType`. */
+    isFolder?: boolean;
+    /** Thumbnail image URL. When provided, renders the image instead of the resolved icon. */
+    thumbnail?: string;
+    /** Accessible label. Defaults to a generated description (e.g. `"PDF document"`). */
+    label?: string;
+    /** Icon size. Defaults to `"md"`. */
+    size?: IconSize;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * Small icon — optionally a thumbnail — resolved from a file's MIME type
+ * or name extension. Useful for file-manager-style listings. Mirrors
+ * `@gnome-ui/react`'s `FileTypeIcon`.
+ *
+ * Falls back to the generic file icon (mirrors freedesktop's
+ * `text-x-generic`) when the type can't be resolved.
+ *
+ * `fileType.ts`'s category-resolution logic (MIME type / extension → one of
+ * 13 categories, plus the freedesktop icon and generated label per
+ * category) is pure, DOM-free TS — duplicated verbatim from
+ * `@gnome-ui/react` rather than imported cross-package, the same
+ * `isIconDefinition`/`Icon.tsx` precedent already established for
+ * DOM-independent logic that still isn't worth a shared package for one
+ * function's worth of code.
+ *
+ * `role="img"` + `accessibilityLabel` ports 1:1 (the same `Avatar`/
+ * `LevelBar` precedent for RN's newer web-aligned `Role` union). The
+ * thumbnail reuses `Avatar`'s own `Image`/`resizeMode="cover"` recipe,
+ * sized from `Icon`'s own `ICON_SIZE_MAP` so swapping between the resolved
+ * icon and a thumbnail never shifts layout — the same reasoning the web
+ * version's `.sm`/`.md`/`.lg` classes document.
+ */
+export declare const FileTypeIcon: ({ name, mimeType, isFolder, thumbnail, label, size, style, testID, }: FileTypeIconProps) => import("react/jsx-runtime").JSX.Element;