@stackone/malachite 0.50.1 → 0.52.0

package/COMPONENTS.md

@@ -10,7 +10,8 @@ The catalog of components exported from `@stackone/malachite`. **Reach for one o
 - **`SurfaceRow`** — A full-bleed row inside a Surface (used as `Surface.Row`). Owns hover highlight, colour transition and an optional bottom divider. Pass `onClick`/`href` to make the whole row clickable (renders as a real button/anchor, so keyboard nav works). For a selectable row use `role="radio"` + `selected` and put a presentational `<Radio>` inside as the indicator. _Key props:_ `divider`, `disabled`, `onClick`, `href`, `selected`, `role`, `className`, `style`.
 - **`Card`** — Generic content card.
 - **`SplitScreenLayout`** — Two-pane full-screen layout (content + preview/aside) with an optional dismiss button.
-- **`WizardLayout`** — Full-screen wizard scaffold: top bar (back button, right-aligned stepper, trailing slot), centered content column, pinned footer. _Key props:_ `showBack`, `onBack`, `stepper`, `trailing`, `footer`, `center`, `contentWidth`, `minWidth`.
+- **`WizardLayout`** — Full-screen wizard scaffold: top bar (back button, right-aligned stepper, trailing slot), pinned `header` slot, centered scrolling content column, and a pinned footer (above sticky body content). `footerGlass` gives the footer a frosted translucent + backdrop-blur treatment. _Key props:_ `showBack`, `onBack`, `stepper`, `trailing`, `header`, `footer`, `footerGlass`, `center`, `contentWidth`, `minWidth`.
+- **`Toolbar`** — Flat, opaque horizontal bar for a sub-header / filter row (e.g. a Search). Owns its chrome — opaque `card-background` (so it can pin over scrolling content) + optional bottom `divider` — so consumers don’t hand-roll background/border tokens. Positioning (incl. sticky) is left to the consumer. _Key props:_ `divider`, `padding`, `className`, `style`.
 - **`Flex`** — Flexbox layout helper with semantic direction/align/justify/gap props. _Key props:_ `FlexDirection`, `FlexAlign`, `FlexJustify`, `FlexGapSize`.
 - **`Padded`** — Padding wrapper applying consistent design-system spacing.
 - **`Spacer`** — Empty element that adds fixed spacing between siblings.

package/dist/index.d.ts

@@ -1703,6 +1703,25 @@ declare type ToggleSize = 'small' | 'medium';
  */
 export declare function toggleTheme(): 'light' | 'dark';
 
+/**
+ * A flat, opaque horizontal bar — e.g. a toolbar/sub-header holding a Search or
+ * filters. Owns its chrome (opaque `card-background` so scrolling content doesn't
+ * bleed through when it's pinned, plus an optional bottom `divider`), so consumers
+ * don't hand-roll `--malachite-*` backgrounds/borders. Positioning (incl.
+ * `position: sticky`) is left to the consumer via `className`/`style`.
+ */
+export declare const Toolbar: default_2.FC<ToolbarProps>;
+
+export declare interface ToolbarProps {
+    children?: default_2.ReactNode;
+    /** Draw a bottom divider — for a bar that sits above scrolling/list content. */
+    divider?: boolean;
+    /** Padding preset (applies to both axes). */
+    padding?: 'compact' | 'default';
+    className?: string;
+    style?: default_2.CSSProperties;
+}
+
 export declare const Tooltip: default_2.FC<TooltipProps>;
 
 declare interface TooltipProps {
@@ -1757,7 +1776,9 @@ export declare interface WizardLayoutProps {
     showBack?: boolean;
     onBack?: () => void;
     backDisabled?: boolean;
-    /** Right top-bar slot (sits just before `trailing`) — typically a <Stepper />. */
+    /** Top-left slot beside the back button — e.g. a user avatar menu. */
+    leading?: default_2.ReactNode;
+    /** Right top-bar slot (sits just before `stepper`) — e.g. a theme toggle. */
     stepper?: default_2.ReactNode;
     /** Far-right top-bar slot — e.g. a theme toggle. */
     trailing?: default_2.ReactNode;
@@ -1767,8 +1788,14 @@ export declare interface WizardLayoutProps {
      * as the content (`contentWidth`).
      */
     header?: default_2.ReactNode;
-    /** Pinned to the bottom of the screen — typically a <FooterNav />. */
+    /** Pinned to the bottom of the screen — typically a <FooterNav /> or a primary CTA. */
     footer?: default_2.ReactNode;
+    /**
+     * Give the pinned footer a frosted-glass treatment (translucent background +
+     * backdrop blur) so scrolling content shows through it. The footer already sits
+     * above sticky body content, so it reads as glass over the scrolling list.
+     */
+    footerGlass?: boolean;
     /** Vertically centre the content (used for terminal/success screens). */
     center?: boolean;
     /** Max width of the centered content column. */