@jobber/components 6.112.1 → 6.112.2

package/dist/Page/Page.d.ts

@@ -1,74 +1,74 @@
-import type { ReactNode } from "react";
+import type { ReactElement } from "react";
 import React from "react";
-import type { XOR } from "ts-xor";
+import type { ButtonActionProps, PageActionButtonProps, PageActionsProps, PageBodyProps, PageComposableProps, PageHeaderContentProps, PageHeaderProps, PageIntroProps, PageLegacyProps, PageMenuProps, PageSlotProps, PageSubtitleProps, PageTitleBarProps, PageTitleProps } from "./types";
 import { type ButtonProps } from "../Button";
-import { type SectionProps } from "../Menu";
-export type ButtonActionProps = ButtonProps & {
-    ref?: React.RefObject<HTMLDivElement | null>;
-};
-interface PageFoundationProps {
-    readonly children: ReactNode | ReactNode[];
-    /**
-     * Title of the page.
-     *
-     * Supports any React node. If a string is provided, it will be rendered as an H1 heading.
-     * Otherwise it will be rendered as is.
-     *
-     * **Important**: If you're passing a custom element, it must include an H1-level heading within it.
-     * Ideally <Heading level={1}> should be used here.
-     */
-    readonly title: ReactNode;
-    /**
-     * TitleMetaData component to be displayed
-     * next to the title. Only compatible with string titles.
-     */
-    readonly titleMetaData?: ReactNode;
-    /**
-     * Subtitle of the page.
-     */
-    readonly subtitle?: string;
-    /**
-     * Determines the width of the page.
-     *
-     * Fill makes the width grow to 100%.
-     *
-     * Standard caps out at 1280px.
-     *
-     * Narrow caps out at 1024px.
-     *
-     * @default standard
-     */
-    readonly width?: "fill" | "standard" | "narrow";
-    /**
-     * Page title primary action button settings.
-     */
-    readonly primaryAction?: ButtonActionProps;
-    /**
-     * Page title secondary action button settings.
-     */
-    readonly secondaryAction?: ButtonActionProps;
-    /**
-     * Page title Action menu.
-     */
-    readonly moreActionsMenu?: SectionProps[];
+export declare function Page(props: PageLegacyProps): ReactElement;
+export declare function Page(props: PageComposableProps): ReactElement;
+export declare namespace Page {
+    var Header: typeof PageHeader;
+    var HeaderContent: typeof PageHeaderContent;
+    var TitleBar: typeof PageTitleBar;
+    var Title: typeof PageTitle;
+    var Subtitle: typeof PageSubtitle;
+    var Intro: typeof PageIntro;
+    var Actions: typeof PageActions;
+    var ActionPrimary: typeof PageActionPrimary;
+    var ActionSecondary: typeof PageActionSecondary;
+    var ActionMenu: typeof PageActionMenu;
+    var PrimaryButton: typeof PagePrimaryButton;
+    var SecondaryButton: typeof PageSecondaryButton;
+    var Menu: typeof PageMenu;
+    var Body: typeof PageBody;
 }
-interface PageWithIntroProps extends PageFoundationProps {
-    /**
-     * Content of the page. This supports basic markdown node types
-     * such as `_italic_`, `**bold**`, and `[link name](url)`.
-     */
-    readonly intro: string;
-    /**
-     * Causes any markdown links in the `intro` prop to open in a new
-     * tab, i.e. with `target="_blank"`.
-     *
-     * Can only be used if `intro` prop is also specified.
-     *
-     * Defaults to `false`.
-     */
-    readonly externalIntroLinks?: boolean;
-}
-export type PageProps = XOR<PageFoundationProps, PageWithIntroProps>;
-export declare function Page({ title, titleMetaData, intro, externalIntroLinks, subtitle, children, width, primaryAction, secondaryAction, moreActionsMenu, }: PageProps): React.JSX.Element;
-export declare const getActionProps: (actionProps: ButtonActionProps) => ButtonProps;
+/**
+ * Groups the title area and actions into the page header layout.
+ * Place non-action content (title, subtitle) inside `Page.HeaderContent`
+ * and actions inside `Page.Actions`.
+ */
+declare function PageHeader({ children, ...rest }: PageHeaderProps): React.JSX.Element;
+/** Wraps the title area (title, subtitle) inside `Page.Header`. Use when the header contains more than one content element to keep them stacked vertically. */
+declare function PageHeaderContent({ children, ...rest }: PageHeaderContentProps): React.JSX.Element;
+/**
+ * Flex container for the page title and optional sibling elements such as
+ * status badges. Use when you need to display metadata alongside the heading.
+ *
+ * @example
+ * ```tsx
+ * <Page.TitleBar>
+ *   <Page.Title>Clients</Page.Title>
+ *   <StatusLabel label="Active" status="success" />
+ * </Page.TitleBar>
+ * ```
+ */
+declare function PageTitleBar({ children, ...rest }: PageTitleBarProps): React.JSX.Element;
+/**
+ * Renders the page heading as an H1. When metadata is present alongside the
+ * title, wrap both in `Page.TitleBar`.
+ */
+declare function PageTitle({ children, ...rest }: PageTitleProps): React.JSX.Element;
+/** Secondary text below the title. Always applies default Text/Emphasis styling. */
+declare function PageSubtitle({ children, ...rest }: PageSubtitleProps): React.JSX.Element;
+/** Introduction text between the header and body. Always applies default Text styling. */
+declare function PageIntro({ children }: PageIntroProps): React.JSX.Element;
+/** Container for action buttons and menu. Applies responsive actionGroup layout. */
+declare function PageActions({ children, ...rest }: PageActionsProps): React.JSX.Element;
+/** Positional container for the primary action. Should contain a Button element, e.g. <Page.PrimaryButton>. */
+declare function PageActionPrimary({ children, ref }: PageSlotProps): React.JSX.Element;
+/** Positional container for the secondary action. Should contain a Button element, e.g. <Page.SecondaryButton>. */
+declare function PageActionSecondary({ children, ref }: PageSlotProps): React.JSX.Element;
+/** Positional container for the menu action. Should contain Page.Menu or a custom Menu. */
+declare function PageActionMenu({ children, ref }: PageSlotProps): React.JSX.Element;
+/** Default primary Button with opinionated styling. Use inside Page.ActionPrimary. */
+declare function PagePrimaryButton({ ref, label, onClick, icon, disabled, loading, ariaLabel, ...rest }: PageActionButtonProps): React.JSX.Element;
+/** Default secondary Button with opinionated styling. Use inside Page.ActionSecondary. */
+declare function PageSecondaryButton({ ref, label, onClick, icon, disabled, loading, ariaLabel, ...rest }: PageActionButtonProps): React.JSX.Element;
+/**
+ * "More Actions" menu with a default trigger button.
+ * Consumers supply Menu.Item children (in case custom routing is needed,
+ * e.g. wrapping Menu.Item with createLink() from TanStack Router).
+ */
+declare function PageMenu({ children, triggerLabel, ...rest }: PageMenuProps): React.JSX.Element;
+/** Main content area of the page. */
+declare function PageBody({ children }: PageBodyProps): React.JSX.Element;
+export declare const getActionProps: (actionProps?: ButtonActionProps) => ButtonProps;
 export {};

package/dist/Page/index.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 var Page = require('../Page-cjs.js');
+require('../tslib.es6-cjs.js');
 require('react');
 require('classnames');
 require('@jobber/hooks');
@@ -14,7 +15,6 @@ require('react/jsx-runtime');
 require('../_commonjsHelpers-cjs.js');
 require('../Button-cjs.js');
 require('react-router-dom');
-require('../tslib.es6-cjs.js');
 require('../Icon-cjs.js');
 require('@jobber/design');
 require('../Menu-cjs.js');
@@ -25,6 +25,7 @@ require('../Tree-cjs.js');
 require('../clsx-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../maxHeight-cjs.js');
+require('../filterDataAttributes-cjs.js');
 
 
 

package/dist/Page/index.d.ts

@@ -1 +1,2 @@
-export { Page, type PageProps } from "./Page";
+export { Page } from "./Page";
+export type { ButtonActionProps, PageActionButtonProps, PageComposableProps, PageLegacyProps, PageMenuProps, PageProps, PageSlotProps, } from "./types";

package/dist/Page/index.mjs

@@ -1,4 +1,5 @@
 export { P as Page } from '../Page-es.js';
+import '../tslib.es6-es.js';
 import 'react';
 import 'classnames';
 import '@jobber/hooks';
@@ -12,7 +13,6 @@ import 'react/jsx-runtime';
 import '../_commonjsHelpers-es.js';
 import '../Button-es.js';
 import 'react-router-dom';
-import '../tslib.es6-es.js';
 import '../Icon-es.js';
 import '@jobber/design';
 import '../Menu-es.js';
@@ -23,3 +23,4 @@ import '../Tree-es.js';
 import '../clsx-es.js';
 import '../useFormFieldFocus-es.js';
 import '../maxHeight-es.js';
+import '../filterDataAttributes-es.js';

package/dist/Page/types.d.ts

@@ -0,0 +1,120 @@
+import type { ReactNode, RefObject } from "react";
+import { type ButtonProps } from "../Button";
+import { type SectionProps } from "../Menu";
+export type ButtonActionProps = ButtonProps & {
+    ref?: React.RefObject<HTMLDivElement | null>;
+};
+interface PageBaseProps {
+    readonly children: ReactNode | ReactNode[];
+    /**
+     * Title of the page.
+     *
+     * Supports any React node. If a string is provided, it will be rendered as an H1 heading.
+     * Otherwise it will be rendered as is.
+     *
+     * **Important**: If you're passing a custom element, it must include an H1-level heading within it.
+     * Ideally <Heading level={1}> should be used here.
+     */
+    readonly title: ReactNode;
+    /**
+     * TitleMetaData component to be displayed
+     * next to the title. Only compatible with string titles.
+     */
+    readonly titleMetaData?: ReactNode;
+    /**
+     * Subtitle of the page.
+     */
+    readonly subtitle?: string;
+    /**
+     * Determines the width of the page.
+     *
+     * Fill makes the width grow to 100%.
+     *
+     * Standard caps out at 1280px.
+     *
+     * Narrow caps out at 1024px.
+     *
+     * @default standard
+     */
+    readonly width?: "fill" | "standard" | "narrow";
+    /**
+     * Page title primary action button settings.
+     */
+    readonly primaryAction?: ButtonActionProps;
+    /**
+     * Page title secondary action button settings.
+     */
+    readonly secondaryAction?: ButtonActionProps;
+    /**
+     * Page title Action menu.
+     */
+    readonly moreActionsMenu?: SectionProps[];
+}
+interface PageWithIntroProps extends PageBaseProps {
+    /**
+     * Content of the page. This supports basic markdown node types
+     * such as `_italic_`, `**bold**`, and `[link name](url)`.
+     */
+    readonly intro: string;
+    /**
+     * Causes any markdown links in the `intro` prop to open in a new
+     * tab, i.e. with `target="_blank"`.
+     *
+     * Can only be used if `intro` prop is also specified.
+     *
+     * Defaults to `false`.
+     */
+    readonly externalIntroLinks?: boolean;
+}
+interface PageWithoutIntroProps extends PageBaseProps {
+    readonly intro?: never;
+    readonly externalIntroLinks?: never;
+}
+export type PageLegacyProps = PageWithIntroProps | PageWithoutIntroProps;
+export interface PageComposableProps {
+    readonly children: ReactNode;
+    readonly width?: "fill" | "standard" | "narrow";
+}
+export type PageProps = PageLegacyProps | PageComposableProps;
+export interface PageHeaderProps {
+    readonly children: ReactNode;
+}
+export interface PageHeaderContentProps {
+    readonly children: ReactNode;
+}
+export interface PageTitleBarProps {
+    readonly children: ReactNode;
+}
+export interface PageTitleProps {
+    readonly children: ReactNode;
+}
+export interface PageSubtitleProps {
+    readonly children: ReactNode;
+}
+export interface PageIntroProps {
+    readonly children: ReactNode;
+}
+export interface PageActionsProps {
+    readonly children: ReactNode;
+}
+export interface PageSlotProps {
+    readonly children: ReactNode;
+    readonly ref?: RefObject<HTMLDivElement | null>;
+}
+export interface PageActionButtonProps {
+    readonly ref?: RefObject<HTMLDivElement | null>;
+    readonly label: string;
+    readonly onClick?: () => void;
+    readonly icon?: ButtonProps["icon"];
+    readonly disabled?: boolean;
+    readonly loading?: boolean;
+    readonly ariaLabel?: string;
+}
+export interface PageMenuProps {
+    readonly children: ReactNode;
+    readonly triggerLabel?: string;
+}
+export interface PageBodyProps {
+    readonly children: ReactNode;
+}
+export {};

package/dist/Page-cjs.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var tslib_es6 = require('./tslib.es6-cjs.js');
 var React = require('react');
 var classnames = require('classnames');
 var jobberHooks = require('@jobber/hooks');
@@ -10,11 +11,27 @@ var Markdown = require('./Markdown-cjs.js');
 var Button = require('./Button-cjs.js');
 var Menu = require('./Menu-cjs.js');
 var Emphasis = require('./Emphasis-cjs.js');
+var filterDataAttributes = require('./filterDataAttributes-cjs.js');
 
 var styles = {"page":"BLYnKItuM3c-","fill":"n5WRRhMkoLs-","standard":"WziKEWW9nA8-","narrow":"qgGzgDyS2NY-","titleBar":"lbmoDvdtQO4-","titleRow":"k9y5NuqTcks-","actionGroup":"_7t53-bnzh98-","large":"SH0aNOLVhE8-","medium":"Lc7Z0FsBa6w-","small":"iF5IA1SYKoA-","primaryAction":"g-H7CKkX-LA-","actionButton":"RSP7jHjP-mw-","subtitle":"EqsNMrZVL-8-","spinning":"MJZVhEmx6h4-"};
 
-function Page({ title, titleMetaData, intro, externalIntroLinks, subtitle, children, width = "standard", primaryAction, secondaryAction, moreActionsMenu = [], }) {
-    const pageStyles = classnames(styles.page, styles[width]);
+/** Discriminates between the props-based API and the composable children API. */
+function isLegacy(props) {
+    return "title" in props;
+}
+function Page(props) {
+    var _a;
+    const pageStyles = classnames(styles.page, styles[(_a = props.width) !== null && _a !== void 0 ? _a : "standard"]);
+    if (isLegacy(props)) {
+        return React.createElement(PageLegacy, Object.assign({}, props, { pageStyles: pageStyles }));
+    }
+    return (React.createElement("div", { className: pageStyles },
+        React.createElement(Content.Content, null, props.children)));
+}
+/** Props-based renderer. Preserves the original Page behavior for existing consumers. */
+function PageLegacy(_a) {
+    var { title, titleMetaData, intro, externalIntroLinks, subtitle, children, primaryAction, secondaryAction, moreActionsMenu = [], pageStyles } = _a, rest = tslib_es6.__rest(_a, ["title", "titleMetaData", "intro", "externalIntroLinks", "subtitle", "children", "primaryAction", "secondaryAction", "moreActionsMenu", "pageStyles"]);
+    const dataAttrs = filterDataAttributes.filterDataAttributes(rest);
     const [titleBarRef, { width: titleBarWidth = jobberHooks.Breakpoints.large }] = jobberHooks.useResizeObserver();
     const titleBarClasses = classnames(styles.titleBar, {
         [styles.small]: titleBarWidth > jobberHooks.Breakpoints.smaller,
@@ -23,16 +40,7 @@ function Page({ title, titleMetaData, intro, externalIntroLinks, subtitle, child
     });
     const showMenu = moreActionsMenu.length > 0;
     const showActionGroup = showMenu || primaryAction || secondaryAction;
-    if (primaryAction != undefined) {
-        primaryAction = Object.assign({ fullWidth: true }, primaryAction);
-    }
-    if (secondaryAction != undefined) {
-        secondaryAction = Object.assign({ type: "secondary", fullWidth: true }, secondaryAction);
-    }
-    if (secondaryAction != undefined) {
-        secondaryAction = Object.assign({ type: "secondary", fullWidth: true }, secondaryAction);
-    }
-    return (React.createElement("div", { className: pageStyles },
+    return (React.createElement("div", Object.assign({ className: pageStyles }, dataAttrs),
         React.createElement(Content.Content, null,
             React.createElement(Content.Content, null,
                 React.createElement("div", { className: titleBarClasses, ref: titleBarRef },
@@ -46,20 +54,144 @@ function Page({ title, titleMetaData, intro, externalIntroLinks, subtitle, child
                                     React.createElement(Markdown.Markdown, { content: subtitle, basicUsage: true })))))),
                     showActionGroup && (React.createElement("div", { className: styles.actionGroup },
                         primaryAction && (React.createElement("div", { className: styles.primaryAction, ref: primaryAction.ref },
-                            React.createElement(Button.Button, Object.assign({}, getActionProps(primaryAction))))),
+                            React.createElement(Button.Button, Object.assign({}, getActionProps(primaryAction), { fullWidth: true })))),
                         secondaryAction && (React.createElement("div", { className: styles.actionButton, ref: secondaryAction.ref },
-                            React.createElement(Button.Button, Object.assign({}, getActionProps(secondaryAction))))),
+                            React.createElement(Button.Button, Object.assign({}, getActionProps(secondaryAction), { fullWidth: true, type: "secondary" })))),
                         showMenu && (React.createElement("div", { className: styles.actionButton },
                             React.createElement(Menu.Menu, { items: moreActionsMenu })))))),
                 intro && (React.createElement(Text.Text, { size: "large" },
                     React.createElement(Markdown.Markdown, { content: intro, basicUsage: true, externalLink: externalIntroLinks })))),
             React.createElement(Content.Content, null, children))));
 }
+/**
+ * Groups the title area and actions into the page header layout.
+ * Place non-action content (title, subtitle) inside `Page.HeaderContent`
+ * and actions inside `Page.Actions`.
+ */
+function PageHeader(_a) {
+    var { children } = _a, rest = tslib_es6.__rest(_a, ["children"]);
+    const dataAttrs = filterDataAttributes.filterDataAttributes(rest);
+    const [titleBarRef, { width: titleBarWidth = jobberHooks.Breakpoints.large }] = jobberHooks.useResizeObserver();
+    const titleBarClasses = classnames(styles.titleBar, {
+        [styles.small]: titleBarWidth > jobberHooks.Breakpoints.smaller,
+        [styles.medium]: titleBarWidth > jobberHooks.Breakpoints.small,
+        [styles.large]: titleBarWidth > jobberHooks.Breakpoints.base,
+    });
+    return (React.createElement("div", Object.assign({ className: titleBarClasses, ref: titleBarRef }, dataAttrs), children));
+}
+/** Wraps the title area (title, subtitle) inside `Page.Header`. Use when the header contains more than one content element to keep them stacked vertically. */
+function PageHeaderContent(_a) {
+    var { children } = _a, rest = tslib_es6.__rest(_a, ["children"]);
+    const dataAttrs = filterDataAttributes.filterDataAttributes(rest);
+    return React.createElement("div", Object.assign({}, dataAttrs), children);
+}
+/**
+ * Flex container for the page title and optional sibling elements such as
+ * status badges. Use when you need to display metadata alongside the heading.
+ *
+ * @example
+ * ```tsx
+ * <Page.TitleBar>
+ *   <Page.Title>Clients</Page.Title>
+ *   <StatusLabel label="Active" status="success" />
+ * </Page.TitleBar>
+ * ```
+ */
+function PageTitleBar(_a) {
+    var { children } = _a, rest = tslib_es6.__rest(_a, ["children"]);
+    const dataAttrs = filterDataAttributes.filterDataAttributes(rest);
+    return (React.createElement("div", Object.assign({ className: styles.titleRow }, dataAttrs), children));
+}
+/**
+ * Renders the page heading as an H1. When metadata is present alongside the
+ * title, wrap both in `Page.TitleBar`.
+ */
+function PageTitle(_a) {
+    var { children } = _a, rest = tslib_es6.__rest(_a, ["children"]);
+    const dataAttrs = filterDataAttributes.filterDataAttributes(rest);
+    return (React.createElement(Heading.Heading, Object.assign({ level: 1 }, dataAttrs), children));
+}
+/** Secondary text below the title. Always applies default Text/Emphasis styling. */
+function PageSubtitle(_a) {
+    var { children } = _a, rest = tslib_es6.__rest(_a, ["children"]);
+    const dataAttrs = filterDataAttributes.filterDataAttributes(rest);
+    return (React.createElement("div", Object.assign({ className: styles.subtitle }, dataAttrs),
+        React.createElement(Text.Text, { size: "large", variation: "subdued" },
+            React.createElement(Emphasis.Emphasis, { variation: "bold" }, children))));
+}
+/** Introduction text between the header and body. Always applies default Text styling. */
+function PageIntro({ children }) {
+    return React.createElement(Text.Text, { size: "large" }, children);
+}
+/** Container for action buttons and menu. Applies responsive actionGroup layout. */
+function PageActions(_a) {
+    var { children } = _a, rest = tslib_es6.__rest(_a, ["children"]);
+    const dataAttrs = filterDataAttributes.filterDataAttributes(rest);
+    return (React.createElement("div", Object.assign({ className: styles.actionGroup }, dataAttrs), children));
+}
+/** Positional container for the primary action. Should contain a Button element, e.g. <Page.PrimaryButton>. */
+function PageActionPrimary({ children, ref }) {
+    return (React.createElement("div", { className: styles.primaryAction, ref: ref }, children));
+}
+/** Positional container for the secondary action. Should contain a Button element, e.g. <Page.SecondaryButton>. */
+function PageActionSecondary({ children, ref }) {
+    return (React.createElement("div", { className: styles.actionButton, ref: ref }, children));
+}
+/** Positional container for the menu action. Should contain Page.Menu or a custom Menu. */
+function PageActionMenu({ children, ref }) {
+    return (React.createElement("div", { className: styles.actionButton, ref: ref }, children));
+}
+/** Default primary Button with opinionated styling. Use inside Page.ActionPrimary. */
+function PagePrimaryButton(_a) {
+    var { ref, label, onClick, icon, disabled, loading, ariaLabel } = _a, rest = tslib_es6.__rest(_a, ["ref", "label", "onClick", "icon", "disabled", "loading", "ariaLabel"]);
+    const dataAttrs = filterDataAttributes.filterDataAttributes(rest);
+    return (React.createElement("div", Object.assign({ ref: ref }, dataAttrs),
+        React.createElement(Button.Button, { label: label, onClick: onClick, icon: icon, disabled: disabled, loading: loading, ariaLabel: ariaLabel, fullWidth: true })));
+}
+/** Default secondary Button with opinionated styling. Use inside Page.ActionSecondary. */
+function PageSecondaryButton(_a) {
+    var { ref, label, onClick, icon, disabled, loading, ariaLabel } = _a, rest = tslib_es6.__rest(_a, ["ref", "label", "onClick", "icon", "disabled", "loading", "ariaLabel"]);
+    const dataAttrs = filterDataAttributes.filterDataAttributes(rest);
+    return (React.createElement("div", Object.assign({ ref: ref }, dataAttrs),
+        React.createElement(Button.Button, { label: label, onClick: onClick, icon: icon, disabled: disabled, loading: loading, ariaLabel: ariaLabel, fullWidth: true, type: "secondary" })));
+}
+/**
+ * "More Actions" menu with a default trigger button.
+ * Consumers supply Menu.Item children (in case custom routing is needed,
+ * e.g. wrapping Menu.Item with createLink() from TanStack Router).
+ */
+function PageMenu(_a) {
+    var { children, triggerLabel = "More Actions" } = _a, rest = tslib_es6.__rest(_a, ["children", "triggerLabel"]);
+    const dataAttrs = filterDataAttributes.filterDataAttributes(rest);
+    return (React.createElement("div", Object.assign({}, dataAttrs),
+        React.createElement(Menu.Menu, null,
+            React.createElement(Menu.Menu.Trigger, { UNSAFE_style: { display: "block" } },
+                React.createElement(Button.Button, { icon: "more", label: triggerLabel, type: "secondary", fullWidth: true })),
+            React.createElement(Menu.Menu.Content, null, children))));
+}
+/** Main content area of the page. */
+function PageBody({ children }) {
+    return React.createElement(Content.Content, null, children);
+}
 const getActionProps = (actionProps) => {
-    const buttonProps = Object.assign({}, actionProps);
-    if (actionProps.ref)
+    const buttonProps = (actionProps !== null && actionProps !== void 0 ? actionProps : {});
+    if (actionProps === null || actionProps === void 0 ? void 0 : actionProps.ref)
         delete buttonProps.ref;
     return buttonProps;
 };
+Page.Header = PageHeader;
+Page.HeaderContent = PageHeaderContent;
+Page.TitleBar = PageTitleBar;
+Page.Title = PageTitle;
+Page.Subtitle = PageSubtitle;
+Page.Intro = PageIntro;
+Page.Actions = PageActions;
+Page.ActionPrimary = PageActionPrimary;
+Page.ActionSecondary = PageActionSecondary;
+Page.ActionMenu = PageActionMenu;
+Page.PrimaryButton = PagePrimaryButton;
+Page.SecondaryButton = PageSecondaryButton;
+Page.Menu = PageMenu;
+Page.Body = PageBody;
 
 exports.Page = Page;

package/dist/Page-es.js

@@ -1,3 +1,4 @@
+import { _ as __rest } from './tslib.es6-es.js';
 import React__default from 'react';
 import classnames from 'classnames';
 import { useResizeObserver, Breakpoints } from '@jobber/hooks';
@@ -8,11 +9,27 @@ import { M as Markdown } from './Markdown-es.js';
 import { B as Button } from './Button-es.js';
 import { M as Menu } from './Menu-es.js';
 import { E as Emphasis } from './Emphasis-es.js';
+import { f as filterDataAttributes } from './filterDataAttributes-es.js';
 
 var styles = {"page":"BLYnKItuM3c-","fill":"n5WRRhMkoLs-","standard":"WziKEWW9nA8-","narrow":"qgGzgDyS2NY-","titleBar":"lbmoDvdtQO4-","titleRow":"k9y5NuqTcks-","actionGroup":"_7t53-bnzh98-","large":"SH0aNOLVhE8-","medium":"Lc7Z0FsBa6w-","small":"iF5IA1SYKoA-","primaryAction":"g-H7CKkX-LA-","actionButton":"RSP7jHjP-mw-","subtitle":"EqsNMrZVL-8-","spinning":"MJZVhEmx6h4-"};
 
-function Page({ title, titleMetaData, intro, externalIntroLinks, subtitle, children, width = "standard", primaryAction, secondaryAction, moreActionsMenu = [], }) {
-    const pageStyles = classnames(styles.page, styles[width]);
+/** Discriminates between the props-based API and the composable children API. */
+function isLegacy(props) {
+    return "title" in props;
+}
+function Page(props) {
+    var _a;
+    const pageStyles = classnames(styles.page, styles[(_a = props.width) !== null && _a !== void 0 ? _a : "standard"]);
+    if (isLegacy(props)) {
+        return React__default.createElement(PageLegacy, Object.assign({}, props, { pageStyles: pageStyles }));
+    }
+    return (React__default.createElement("div", { className: pageStyles },
+        React__default.createElement(Content, null, props.children)));
+}
+/** Props-based renderer. Preserves the original Page behavior for existing consumers. */
+function PageLegacy(_a) {
+    var { title, titleMetaData, intro, externalIntroLinks, subtitle, children, primaryAction, secondaryAction, moreActionsMenu = [], pageStyles } = _a, rest = __rest(_a, ["title", "titleMetaData", "intro", "externalIntroLinks", "subtitle", "children", "primaryAction", "secondaryAction", "moreActionsMenu", "pageStyles"]);
+    const dataAttrs = filterDataAttributes(rest);
     const [titleBarRef, { width: titleBarWidth = Breakpoints.large }] = useResizeObserver();
     const titleBarClasses = classnames(styles.titleBar, {
         [styles.small]: titleBarWidth > Breakpoints.smaller,
@@ -21,16 +38,7 @@ function Page({ title, titleMetaData, intro, externalIntroLinks, subtitle, child
     });
     const showMenu = moreActionsMenu.length > 0;
     const showActionGroup = showMenu || primaryAction || secondaryAction;
-    if (primaryAction != undefined) {
-        primaryAction = Object.assign({ fullWidth: true }, primaryAction);
-    }
-    if (secondaryAction != undefined) {
-        secondaryAction = Object.assign({ type: "secondary", fullWidth: true }, secondaryAction);
-    }
-    if (secondaryAction != undefined) {
-        secondaryAction = Object.assign({ type: "secondary", fullWidth: true }, secondaryAction);
-    }
-    return (React__default.createElement("div", { className: pageStyles },
+    return (React__default.createElement("div", Object.assign({ className: pageStyles }, dataAttrs),
         React__default.createElement(Content, null,
             React__default.createElement(Content, null,
                 React__default.createElement("div", { className: titleBarClasses, ref: titleBarRef },
@@ -44,20 +52,144 @@ function Page({ title, titleMetaData, intro, externalIntroLinks, subtitle, child
                                     React__default.createElement(Markdown, { content: subtitle, basicUsage: true })))))),
                     showActionGroup && (React__default.createElement("div", { className: styles.actionGroup },
                         primaryAction && (React__default.createElement("div", { className: styles.primaryAction, ref: primaryAction.ref },
-                            React__default.createElement(Button, Object.assign({}, getActionProps(primaryAction))))),
+                            React__default.createElement(Button, Object.assign({}, getActionProps(primaryAction), { fullWidth: true })))),
                         secondaryAction && (React__default.createElement("div", { className: styles.actionButton, ref: secondaryAction.ref },
-                            React__default.createElement(Button, Object.assign({}, getActionProps(secondaryAction))))),
+                            React__default.createElement(Button, Object.assign({}, getActionProps(secondaryAction), { fullWidth: true, type: "secondary" })))),
                         showMenu && (React__default.createElement("div", { className: styles.actionButton },
                             React__default.createElement(Menu, { items: moreActionsMenu })))))),
                 intro && (React__default.createElement(Text, { size: "large" },
                     React__default.createElement(Markdown, { content: intro, basicUsage: true, externalLink: externalIntroLinks })))),
             React__default.createElement(Content, null, children))));
 }
+/**
+ * Groups the title area and actions into the page header layout.
+ * Place non-action content (title, subtitle) inside `Page.HeaderContent`
+ * and actions inside `Page.Actions`.
+ */
+function PageHeader(_a) {
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    const dataAttrs = filterDataAttributes(rest);
+    const [titleBarRef, { width: titleBarWidth = Breakpoints.large }] = useResizeObserver();
+    const titleBarClasses = classnames(styles.titleBar, {
+        [styles.small]: titleBarWidth > Breakpoints.smaller,
+        [styles.medium]: titleBarWidth > Breakpoints.small,
+        [styles.large]: titleBarWidth > Breakpoints.base,
+    });
+    return (React__default.createElement("div", Object.assign({ className: titleBarClasses, ref: titleBarRef }, dataAttrs), children));
+}
+/** Wraps the title area (title, subtitle) inside `Page.Header`. Use when the header contains more than one content element to keep them stacked vertically. */
+function PageHeaderContent(_a) {
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    const dataAttrs = filterDataAttributes(rest);
+    return React__default.createElement("div", Object.assign({}, dataAttrs), children);
+}
+/**
+ * Flex container for the page title and optional sibling elements such as
+ * status badges. Use when you need to display metadata alongside the heading.
+ *
+ * @example
+ * ```tsx
+ * <Page.TitleBar>
+ *   <Page.Title>Clients</Page.Title>
+ *   <StatusLabel label="Active" status="success" />
+ * </Page.TitleBar>
+ * ```
+ */
+function PageTitleBar(_a) {
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    const dataAttrs = filterDataAttributes(rest);
+    return (React__default.createElement("div", Object.assign({ className: styles.titleRow }, dataAttrs), children));
+}
+/**
+ * Renders the page heading as an H1. When metadata is present alongside the
+ * title, wrap both in `Page.TitleBar`.
+ */
+function PageTitle(_a) {
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    const dataAttrs = filterDataAttributes(rest);
+    return (React__default.createElement(Heading, Object.assign({ level: 1 }, dataAttrs), children));
+}
+/** Secondary text below the title. Always applies default Text/Emphasis styling. */
+function PageSubtitle(_a) {
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    const dataAttrs = filterDataAttributes(rest);
+    return (React__default.createElement("div", Object.assign({ className: styles.subtitle }, dataAttrs),
+        React__default.createElement(Text, { size: "large", variation: "subdued" },
+            React__default.createElement(Emphasis, { variation: "bold" }, children))));
+}
+/** Introduction text between the header and body. Always applies default Text styling. */
+function PageIntro({ children }) {
+    return React__default.createElement(Text, { size: "large" }, children);
+}
+/** Container for action buttons and menu. Applies responsive actionGroup layout. */
+function PageActions(_a) {
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    const dataAttrs = filterDataAttributes(rest);
+    return (React__default.createElement("div", Object.assign({ className: styles.actionGroup }, dataAttrs), children));
+}
+/** Positional container for the primary action. Should contain a Button element, e.g. <Page.PrimaryButton>. */
+function PageActionPrimary({ children, ref }) {
+    return (React__default.createElement("div", { className: styles.primaryAction, ref: ref }, children));
+}
+/** Positional container for the secondary action. Should contain a Button element, e.g. <Page.SecondaryButton>. */
+function PageActionSecondary({ children, ref }) {
+    return (React__default.createElement("div", { className: styles.actionButton, ref: ref }, children));
+}
+/** Positional container for the menu action. Should contain Page.Menu or a custom Menu. */
+function PageActionMenu({ children, ref }) {
+    return (React__default.createElement("div", { className: styles.actionButton, ref: ref }, children));
+}
+/** Default primary Button with opinionated styling. Use inside Page.ActionPrimary. */
+function PagePrimaryButton(_a) {
+    var { ref, label, onClick, icon, disabled, loading, ariaLabel } = _a, rest = __rest(_a, ["ref", "label", "onClick", "icon", "disabled", "loading", "ariaLabel"]);
+    const dataAttrs = filterDataAttributes(rest);
+    return (React__default.createElement("div", Object.assign({ ref: ref }, dataAttrs),
+        React__default.createElement(Button, { label: label, onClick: onClick, icon: icon, disabled: disabled, loading: loading, ariaLabel: ariaLabel, fullWidth: true })));
+}
+/** Default secondary Button with opinionated styling. Use inside Page.ActionSecondary. */
+function PageSecondaryButton(_a) {
+    var { ref, label, onClick, icon, disabled, loading, ariaLabel } = _a, rest = __rest(_a, ["ref", "label", "onClick", "icon", "disabled", "loading", "ariaLabel"]);
+    const dataAttrs = filterDataAttributes(rest);
+    return (React__default.createElement("div", Object.assign({ ref: ref }, dataAttrs),
+        React__default.createElement(Button, { label: label, onClick: onClick, icon: icon, disabled: disabled, loading: loading, ariaLabel: ariaLabel, fullWidth: true, type: "secondary" })));
+}
+/**
+ * "More Actions" menu with a default trigger button.
+ * Consumers supply Menu.Item children (in case custom routing is needed,
+ * e.g. wrapping Menu.Item with createLink() from TanStack Router).
+ */
+function PageMenu(_a) {
+    var { children, triggerLabel = "More Actions" } = _a, rest = __rest(_a, ["children", "triggerLabel"]);
+    const dataAttrs = filterDataAttributes(rest);
+    return (React__default.createElement("div", Object.assign({}, dataAttrs),
+        React__default.createElement(Menu, null,
+            React__default.createElement(Menu.Trigger, { UNSAFE_style: { display: "block" } },
+                React__default.createElement(Button, { icon: "more", label: triggerLabel, type: "secondary", fullWidth: true })),
+            React__default.createElement(Menu.Content, null, children))));
+}
+/** Main content area of the page. */
+function PageBody({ children }) {
+    return React__default.createElement(Content, null, children);
+}
 const getActionProps = (actionProps) => {
-    const buttonProps = Object.assign({}, actionProps);
-    if (actionProps.ref)
+    const buttonProps = (actionProps !== null && actionProps !== void 0 ? actionProps : {});
+    if (actionProps === null || actionProps === void 0 ? void 0 : actionProps.ref)
         delete buttonProps.ref;
     return buttonProps;
 };
+Page.Header = PageHeader;
+Page.HeaderContent = PageHeaderContent;
+Page.TitleBar = PageTitleBar;
+Page.Title = PageTitle;
+Page.Subtitle = PageSubtitle;
+Page.Intro = PageIntro;
+Page.Actions = PageActions;
+Page.ActionPrimary = PageActionPrimary;
+Page.ActionSecondary = PageActionSecondary;
+Page.ActionMenu = PageActionMenu;
+Page.PrimaryButton = PagePrimaryButton;
+Page.SecondaryButton = PageSecondaryButton;
+Page.Menu = PageMenu;
+Page.Body = PageBody;
 
 export { Page as P };

package/dist/utils/meta/meta.json

@@ -158,6 +158,20 @@
     "MultiSelect",
     "Option",
     "Page",
+    "Page.ActionMenu",
+    "Page.ActionPrimary",
+    "Page.ActionSecondary",
+    "Page.Actions",
+    "Page.Body",
+    "Page.Header",
+    "Page.HeaderContent",
+    "Page.Intro",
+    "Page.Menu",
+    "Page.PrimaryButton",
+    "Page.SecondaryButton",
+    "Page.Subtitle",
+    "Page.Title",
+    "Page.TitleBar",
     "Popover",
     "Popover.Arrow",
     "Popover.DismissButton",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.112.1",
+  "version": "6.112.2",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -538,5 +538,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "6a70e6fdb7ebd0925285306df14b17ba21d78679"
+  "gitHead": "5c6d2a8ba2313768db2fd1147c74de0b4e8c3710"
 }