tempest-react-sdk 0.12.0 → 0.13.0

package/dist/tempest-react-sdk.d.ts

@@ -243,6 +243,66 @@ export declare interface ApiError {
     body?: unknown;
 }
 
+/**
+ * Mobile-first top app bar for PWAs — leading (back / brand) + title +
+ * trailing actions, sticky with safe-area padding out of the box.
+ *
+ * Consumers customise via tokens (`--tempest-*`) and slots; the SDK ships the
+ * layout, sticky/safe-area behaviour, and accessible back button so apps don't
+ * hand-roll one per screen. For a desktop three-slot nav use [[Navbar]].
+ *
+ * @example
+ * // Detail screen with back + a trailing action
+ * <AppBar
+ *     title="Profile"
+ *     showBack
+ *     onBack={() => navigate(-1)}
+ *     actions={<IconButton icon={<Settings />} onClick={openSettings} />}
+ * />
+ *
+ * @example
+ * // Home screen — brand left, centered title disabled
+ * <AppBar brand={<Logo />} actions={<UserMenu />} />
+ */
+export declare function AppBar({ title, leading, showBack, onBack, backLabel, backIcon, brand, actions, centered, sticky, tone, bordered, safeArea, className, ...props }: AppBarProps): JSX.Element;
+
+export declare interface AppBarProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    /** Page title — string or any node. Rendered as the bar's `<h1>`. */
+    title?: ReactNode;
+    /**
+     * Replace the whole left slot. When set, the auto back button and `brand`
+     * are ignored — you own the leading content.
+     */
+    leading?: ReactNode;
+    /** Show a back button in the left slot. Ignored when `leading` is set. */
+    showBack?: boolean;
+    /**
+     * Back-button handler. Defaults to `window.history.back()`. With a router,
+     * pass `onBack={() => navigate(-1)}`.
+     */
+    onBack?: () => void;
+    /** Accessible label for the back button. Default `"Go back"`. */
+    backLabel?: string;
+    /** Custom back icon. Default a left arrow. */
+    backIcon?: ReactNode;
+    /** Brand / logo node shown in the left slot (after the back button). */
+    brand?: ReactNode;
+    /** Right slot — action buttons / menu. One node or many. */
+    actions?: ReactNode;
+    /** Center the title (three-column grid). Default `false` (left-aligned). */
+    centered?: boolean;
+    /** Stick to the top of the scroll container. Default `true`. */
+    sticky?: boolean;
+    /** Visual tone. Default `"surface"`. */
+    tone?: AppBarTone;
+    /** Thin bottom border. Default `true`. */
+    bordered?: boolean;
+    /** Add `env(safe-area-inset-top)` padding (iOS notch / PWA). Default `true`. */
+    safeArea?: boolean;
+}
+
+export declare type AppBarTone = "surface" | "primary" | "transparent";
+
 /**
  * Compose the Tempest app-wide providers in one place: error boundary →
  * TanStack Query → theme → i18n. Query and theme are on by default; i18n and