@gnome-ui/react-native 1.10.0 → 1.11.0

package/dist/components/Timeline/Timeline.d.ts

@@ -0,0 +1,87 @@
+import { ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export type TimelineOrientation = 'vertical' | 'horizontal';
+export type TimelineVariant = 'default' | 'dotted' | 'none';
+export interface TimelineItem {
+    /** Icon rendered inside the timeline node. Sized/colored by the consumer — see the component doc. */
+    icon?: ReactNode;
+    /**
+     * Content at the leading edge of the node.
+     * - **Vertical:** rendered to the left of the connector track.
+     * - **Horizontal:** rendered above the node.
+     *
+     * Typical use: timestamp, badge, short label.
+     */
+    leading?: ReactNode;
+    /** Main event content rendered adjacent to the node (title, description…). */
+    content: ReactNode;
+}
+export interface TimelineProps {
+    /** Ordered list of timeline events. */
+    items: TimelineItem[];
+    /**
+     * Axis direction of the connector line.
+     * - `"vertical"` — events stack top-to-bottom (default).
+     * - `"horizontal"` — events flow left-to-right, in a horizontal `ScrollView`.
+     */
+    orientation?: TimelineOrientation;
+    /**
+     * Visual style of the connector between nodes.
+     * - `"default"` — solid thin line.
+     * - `"dotted"` — dotted line; useful for future or pending events.
+     * - `"none"` — no connector; each node stands alone.
+     */
+    variant?: TimelineVariant;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * Ordered sequence of events connected by a visual timeline — mirrors
+ * `@gnome-ui/react`'s `Timeline`. An original composition (no direct
+ * libadwaita widget), following GNOME HIG activity-feed/stepper patterns.
+ *
+ * The web version aligns every item's `leading` column (vertical) or row
+ * (horizontal) via CSS subgrid, so timestamps/labels line up across items
+ * regardless of how wide/tall any single one of them is. RN/Yoga has no
+ * grid or subgrid at all, so that alignment is reproduced by measurement
+ * instead — the same `onLayout` + `Record<index, size>` +
+ * "largest-so-far wins" technique `Slider`'s mark labels already
+ * established: every item's `leading` cell (always rendered, even when
+ * empty, matching the web version's own "same 3 children" comment)
+ * reports its own rendered width (vertical) or height (horizontal), and
+ * every cell gets a `minWidth`/`minHeight` equal to the largest one
+ * measured so far, so the node column/row starts at the same position in
+ * every item. The node track itself additionally gets a *fixed*
+ * width (vertical, matching the source CSS's literal `24px` column) or
+ * height (horizontal, the larger of the dot/icon node sizes, since the
+ * source's row there is CSS `auto` with no fixed value to port) — without
+ * it, an item with an icon node (28 dp) and one with a plain dot (12 dp)
+ * would each size their own track differently, misaligning `content`'s
+ * start position between them.
+ *
+ * `orientation="horizontal"` wraps itself in a horizontal `ScrollView`,
+ * reimagining the web CSS's `overflow-x: auto` — the direct native
+ * equivalent for "scroll instead of overflow when items don't fit". The
+ * web version's `grid-auto-columns: minmax(72px, 1fr)` also grows items
+ * to fill leftover space when the row *doesn't* overflow; that half
+ * doesn't port (a `ScrollView`'s content isn't bounded the way a CSS grid
+ * track is, so there's no "leftover space" to distribute) — each item
+ * just gets a flat 72 dp `minWidth` instead, unconditionally scrollable
+ * like `overflow-x: auto`'s own fallback path.
+ *
+ * `icon`/`leading`/`content` are plain `ReactNode`, the same as
+ * `PathBar`'s segment `icon` — the consumer sizes and colors their own
+ * icon (e.g. `tintColor={theme.accentFgColor}` on their own `<Icon>`),
+ * since RN has no `currentColor` for this component to tint an arbitrary
+ * child with the way the web version's CSS `color: accent-fg-color`
+ * does via inheritance onto the icon's SVG.
+ *
+ * `role="list"`/`role="listitem"` are set **without** `accessible` — the
+ * `ToggleGroup`/`StepIndicator`-established pattern for a grouping role
+ * over children that may themselves contain focusable content (an
+ * item's `content` is arbitrary `ReactNode` and could include one), so
+ * nothing nested inside gets swallowed into a single VoiceOver stop.
+ * Assert `element.props.role` on a `testID` in tests instead of
+ * `getByRole('list'/'listitem')`.
+ */
+export declare const Timeline: ({ items, orientation, variant, style, testID, }: TimelineProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export type { TimelineItem, TimelineOrientation, TimelineProps, TimelineVariant } from './Timeline';
+export { Timeline } from './Timeline';

package/dist/components/Toolbar/Toolbar.d.ts

@@ -0,0 +1,25 @@
+import { StyleProp, View, ViewProps, ViewStyle } from 'react-native';
+export interface ToolbarProps extends Omit<ViewProps, 'style'> {
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Horizontal action bar following the libadwaita `.toolbar` pattern —
+ * mirrors `@gnome-ui/react`'s `Toolbar`. Directly portable: no web-only
+ * APIs, just a flex row with fixed padding/gap.
+ *
+ * Provides `theme.space1` (6 dp) padding and gap — the standard spacing
+ * for rows of flat buttons in header bars, action bars, and tool rows.
+ * Place a `Spacer` between leading and trailing groups to push trailing
+ * items to the end. Use `Button variant="flat"` for buttons that blend
+ * into the bar, or `variant="raised"` for one that needs explicit
+ * elevation within a flat context.
+ *
+ * The web CSS's `color`/`font-family` on `.toolbar` are dropped — RN has
+ * no style inheritance from a parent `View` down to child `Text`
+ * elements the way CSS `color` cascades, so a value here would reach
+ * nothing (every child, e.g. `Button`, already sets its own explicit
+ * text/icon colors).
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1-latest/style-classes.html#toolbar-style-class
+ */
+export declare const Toolbar: import('react').ForwardRefExoticComponent<ToolbarProps & import('react').RefAttributes<View>>;

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

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