@gnome-ui/react-native 1.3.0 → 1.5.0

package/dist/components/BottomSheet/BottomSheet.d.ts

@@ -0,0 +1,82 @@
+import { ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export interface BottomSheetProps {
+    /** Whether the sheet is visible. */
+    open: boolean;
+    /** Optional heading shown below the drag handle. */
+    title?: ReactNode;
+    children?: ReactNode;
+    /** Called when the user dismisses the sheet (backdrop press, Android back button, or drag down). */
+    onClose?: () => void;
+    /** Whether pressing the backdrop closes the sheet. Defaults to `true`. */
+    closeOnBackdrop?: boolean;
+    style?: StyleProp<ViewStyle>;
+    /** Applied to the backdrop, mirroring `Dialog`'s own `testID`. */
+    testID?: string;
+}
+/**
+ * Slide-up panel that overlays content from the bottom edge, mirroring
+ * `AdwBottomSheet` (libadwaita 1.6+) and `@gnome-ui/react`'s `BottomSheet`.
+ *
+ * Rebuilt with `View`/`Modal`/`PanResponder` rather than ported from the web
+ * version's DOM `Portal` + manual focus trap + raw pointer events —
+ * reusing this package's own established pieces: `Dialog`'s backdrop-
+ * opacity-on-an-`AnimatedPressable` + no-op-`Pressable`-around-the-card
+ * (so a tap on the card never bubbles to the backdrop) recipe, and
+ * `BackHandler`'s `hardwareBackPress` as the Android analog of the web
+ * version's Escape listener (same pattern `Dialog`/`Popover` already use).
+ * Focus-trapping and focus-restore-on-close have no port — no DOM
+ * `document.activeElement`/`querySelector` equivalent exists in RN, the
+ * same gap already present in every other floating component here.
+ *
+ * **Real drag-to-dismiss, not a fixed-panel simplification**: unlike the
+ * web version's raw `PointerEvent` handlers directly mutating
+ * `style.transform`, this uses `PanResponder` (the same core RN API
+ * `Slider` already proved handles a threshold-based drag gesture) driving
+ * a single `Animated.Value` — the *same* value used for the slide-in/
+ * slide-out entrance animation. `PanResponder`'s `gestureState.dy` is the
+ * cumulative vertical delta since the gesture started, so a plain
+ * `translateY.setValue(Math.max(0, gestureState.dy))` during
+ * `onPanResponderMove` reproduces the web version's own
+ * `Math.max(0, e.clientY - dragStartY.current)` clamp exactly, and a
+ * release past `DRAG_CLOSE_THRESHOLD` (150 px, same constant as the web
+ * version) animates the rest of the way down before calling `onClose`,
+ * otherwise it springs back to `0`. The gesture responder is attached only
+ * to the handle bar `View`, not the whole sheet, mirroring the web
+ * version's `onPointerDown` being scoped to `.handle` alone.
+ *
+ * **A real slide-up needs the sheet's own height first** — RN's
+ * `transform` has no percentage-of-self units (the same `Slider`/`Avatar`
+ * pitfall), unlike the web version's `translateY(100%)`. The sheet renders
+ * once off-screen (measured via `onLayout`, starting `translateY` at that
+ * measured height) before animating to `0` — the same "resolve own
+ * rendered size, then animate" two-step every other sized-on-open
+ * component in this package (`Dialog`, `Dropdown`, `Popover`) already
+ * needs, just for a transform offset instead of a floating position.
+ *
+ * **Real, timed exit animation, unlike `Dialog`**: `Dialog`'s web source
+ * has no exit keyframes at all (`Modal`'s `visible={false}` unmounts
+ * immediately, matching the web version's plain `return null`) — but
+ * `BottomSheet`'s web source explicitly animates both the backdrop fade
+ * and the sheet's slide-out before removing it. Ported with a local
+ * `visible` state that lags one animation behind the `open` prop: closing
+ * starts the exit `Animated.timing`s and only flips `visible` to `false`
+ * (unmounting the `Modal`'s content) in the animation'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.
+ *
+ * The web version's `backdrop-filter: blur(4px)` has no port — this
+ * package has no native blur view dependency, the same reasoning that
+ * already dropped `Sidebar`'s blurred `variant`. `useBodyScrollLock` has no
+ * RN equivalent needed: `Modal` already blocks all interaction with
+ * whatever's behind it, there is no scrollable "body" to lock separately.
+ *
+ * `role="dialog"` + `accessibilityViewIsModal` port 1:1 from `Dialog`'s own
+ * precedent. `children`, when a plain string, must be wrapped in `Text`
+ * before rendering — RN throws if a raw string is a `View`'s child, unlike
+ * the web version's `<div>{children}</div>`, which needed no such check.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.BottomSheet.html
+ */
+export declare const BottomSheet: ({ open, title, children, onClose, closeOnBackdrop, style, testID, }: BottomSheetProps) => import("react/jsx-runtime").JSX.Element | null;

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

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

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

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export interface DividerProps {
+    /** Optional centered label (e.g. `"OR"`, `"Continue with"`). */
+    children?: ReactNode;
+    /** Accessible name. Defaults to `children` when it's a string. */
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * Horizontal rule with an optional centered label — common auth/login-form
+ * pattern ("Sign in" / **OR** / "Continue with Google"). Mirrors
+ * `@gnome-ui/react`'s `Divider`.
+ *
+ * For a bare dividing line with no label, use `Separator` instead — it also
+ * supports a vertical orientation, which `Divider` does not.
+ *
+ * `role="separator"` ports 1:1 from RN's newer web-aligned `Role` union
+ * (the same one `Avatar`/`Badge`/`LevelBar` already reach for), unlike
+ * `Separator`'s own choice to render as `accessible={false}` — that
+ * component is purely decorative with nothing for a screen reader to
+ * announce, while a labelled `Divider` ("OR") is exactly the kind of
+ * content a screen reader user needs read aloud, so it stays in the
+ * accessibility tree instead. The label reuses `Text`'s `variant="caption"
+ * color="dim"` verbatim rather than hand-rolled styles, since that
+ * combination already resolves to the same font-size/weight/dim-opacity
+ * the web version's `.label` class hard-codes.
+ *
+ * The web version's `aria-orientation="horizontal"` has no port — `Divider`
+ * has no `orientation` prop at all (unlike `Separator`), so there is only
+ * ever one orientation to announce.
+ *
+ * @see https://developer.gnome.org/hig/patterns/containers.html
+ */
+export declare const Divider: ({ children, accessibilityLabel, style, testID }: DividerProps) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,64 @@
+import { ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export interface ExpanderProps {
+    /** Clickable header label. String children render as a themed `Text` label; other nodes render as-is. */
+    label: ReactNode;
+    /** Content revealed when expanded. */
+    children?: ReactNode;
+    /** Controlled expanded state. */
+    expanded?: boolean;
+    /** Initial expanded state when uncontrolled. Defaults to `false`. */
+    defaultExpanded?: boolean;
+    /** Called when the expanded state changes. */
+    onExpandedChange?: (expanded: boolean) => void;
+    /** Disables the toggle. */
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * Standalone disclosure triangle + collapsible content — mirrors
+ * `GtkExpander` and `@gnome-ui/react`'s `Expander`.
+ *
+ * A bare, unstyled counterpart to `ExpanderRow`. Use `Expander` outside a
+ * settings-row context, e.g. "Show advanced options" in a form, or "Show
+ * details" under an error message.
+ *
+ * The web version clips the panel with a CSS grid-height animation and
+ * rides the content's `padding-top` on a second, separate transition (so a
+ * collapsed expander doesn't reserve blank space for padding that belongs
+ * to hidden content). RN has no CSS grid to lean on, so the panel is a
+ * single `Animated.View` whose numeric `height` is driven directly —
+ * `useNativeDriver: false`, the same accepted (and documented) trade-off
+ * `Checkbox`/`RadioButton`/`Switch`/`AnimatedIcon` already make for
+ * non-transform properties. Because the inner content `View`'s `onLayout`
+ * measurement already includes its own `paddingTop`, animating that single
+ * height value reproduces the web version's two-transition result with one
+ * `Animated.Value` instead of two. Content stays mounted while collapsed
+ * (matching the web version's `inert`, unmounted-from-the-tab-order-only
+ * behavior) — `accessibilityElementsHidden` / `importantForAccessibility`
+ * is RN's closest equivalent, applied to the panel wrapper.
+ *
+ * On first mount with `defaultExpanded`, the panel briefly renders at its
+ * natural (unmeasured) height instead of the animated value, so the initial
+ * reveal doesn't start from a wrong, pre-measurement `0` and pop once
+ * `onLayout` resolves — the same "let layout report the truth once, then
+ * hand control to `Animated`" shape `Dropdown`/`Tooltip` use for their own
+ * `onLayout`-measured dimensions.
+ *
+ * The chevron is `PanEnd` (GNOME's own `pan-end-symbolic` disclosure
+ * triangle) rather than a chevron glyph, matching the web version's
+ * hand-drawn arrow shape. It rotates 0deg → 90deg on an `Animated.Value`
+ * (the same `interpolate`-to-`rotate` recipe `Spinner` uses for its own
+ * indeterminate spin), unlike `Dropdown`'s chevron, which snaps instantly
+ * since that panel's own reveal has no comparable "settle" affordance.
+ *
+ * `role="region"` on the panel and `accessibilityState={{ expanded }}` on
+ * the header port 1:1 from the web version's `aria-controls`/`aria-expanded`
+ * pair — RN has no DOM ids, so the id-based `aria-labelledby`/`aria-controls`
+ * relationship itself has no port, the same `ProgressBar`/`LevelBar`
+ * precedent for dropping id-relationship-only ARIA props.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Expander.html
+ */
+export declare const Expander: ({ label, children, expanded: controlledExpanded, defaultExpanded, onExpandedChange, disabled, style, testID, }: ExpanderProps) => import("react/jsx-runtime").JSX.Element;

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

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

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;

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

@@ -0,0 +1,8 @@
+import { IconDefinition } from '@gnome-ui/icons';
+export type FileTypeCategory = 'folder' | 'image' | 'audio' | 'video' | 'text' | 'pdf' | 'archive' | 'document' | 'spreadsheet' | 'presentation' | 'font' | 'executable' | 'unknown';
+/** Resolves a file-type category from a MIME type (e.g. `"image/png"`). */
+export declare function categoryFromMimeType(mimeType: string): FileTypeCategory | null;
+/** Resolves a file-type category from a file name's extension (e.g. `"report.pdf"`). */
+export declare function categoryFromName(name: string): FileTypeCategory | null;
+export declare function getFileTypeIcon(category: FileTypeCategory): IconDefinition;
+export declare function getFileTypeLabel(category: FileTypeCategory): string;

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

@@ -0,0 +1,3 @@
+export type { FileTypeIconProps } from './FileTypeIcon';
+export { FileTypeIcon } from './FileTypeIcon';
+export type { FileTypeCategory } from './fileType';

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

@@ -0,0 +1,34 @@
+import { IconDefinition } from '@gnome-ui/icons';
+import { View } from 'react-native';
+import { ButtonProps, ButtonSize, ButtonVariant } from '../Button';
+import { IconSize } from '../Icon';
+import { TooltipPlacement } from '../Tooltip';
+export type IconButtonVariant = ButtonVariant | 'osd';
+export type IconButtonSize = ButtonSize;
+export interface IconButtonProps extends Omit<ButtonProps, 'accessibilityLabel' | 'children' | 'leadingIcon' | 'osd' | 'shape' | 'trailingIcon' | 'variant'> {
+    /** Icon definition imported from `@gnome-ui/icons`. */
+    icon: IconDefinition;
+    /** Accessible name for the icon-only button. */
+    label: string;
+    /** Visual style of the button. Use `"osd"` for media overlay controls. */
+    variant?: IconButtonVariant;
+    /** Size of the button. */
+    size?: IconButtonSize;
+    /** Override the rendered icon size. Defaults to a size matched to `size`. */
+    iconSize?: IconSize;
+    /** Optional tooltip label shown on long-press/hover/focus. */
+    tooltip?: string;
+    /** Preferred tooltip placement. */
+    tooltipPlacement?: TooltipPlacement;
+    /** Tooltip delay in milliseconds. */
+    tooltipDelay?: number;
+}
+/**
+ * Icon-only action button composed from `Button`, `Icon`, and optionally
+ * `Tooltip` — mirrors `@gnome-ui/react`'s `IconButton`, itself already just
+ * a thin composition of those same three pieces (its own JSDoc example
+ * shows the identical `<Tooltip><Button><Icon /></Button></Tooltip>`
+ * nesting `IconButton` here just formalizes into a named, reusable export).
+ * `label` is required since the button has no visible text.
+ */
+export declare const IconButton: import('react').ForwardRefExoticComponent<IconButtonProps & import('react').RefAttributes<View>>;

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

@@ -0,0 +1,2 @@
+export type { IconButtonProps, IconButtonSize, IconButtonVariant } from './IconButton';
+export { IconButton } from './IconButton';

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