@automattic/jetpack-components 5.0.1 → 6.1.0

package/CHANGELOG.md

@@ -2,6 +2,35 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [6.1.0] - 2026-10-28
+### Added
+- Add a PeriodSelector component: a dropdown of period presets with optional previous and next buttons. [#54149]
+- Add a RadioCard component. [#54212]
+- AdminPage: Add a `jp-admin-page__content` class to the content container. [#54105]
+- PeriodSelector: Add a disabled prop. [#54202]
+- Period Selector: Add a label that screen readers announce with the selected period. [#54209]
+
+### Changed
+- AutomatticIconLogo: Use the black Automattic symbol by default, without blue. [#54208]
+- Update package dependencies. [#54118]
+
+## [6.0.0] - 2026-10-26
+### Added
+- AdminPage: Add an ariaLabel prop that names the page region when the header shows breadcrumbs instead of a title. [#54055]
+- AdminPage: Add a page action button that shows only its icon on screens 480px wide or narrower. [#53921]
+- JetpackFooter: Add an entry without the stylesheet, and export the stylesheet on its own, so script-module builds can bundle the footer. [#53971]
+- Support React 19. [#53882]
+
+### Changed
+- TermsOfService: Render with Text from @wordpress/ui. The `variant` prop now takes a @wordpress/ui Text variant, and the legacy Text spacing and `component` props are removed. [#53892]
+- Update package dependencies. [#53951]
+
+### Removed
+- Remove the `NumberControl` component. Use `InputControl` from `@wordpress/ui` instead. [#54046]
+
+### Fixed
+- AdminPage: Stop clearing the shared REST API nonce and root when a page doesn't pass them. [#53397]
+
 ## [5.0.1] - 2026-10-20
 ### Changed
 - Internal updates.
@@ -2019,6 +2048,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[6.1.0]: https://github.com/Automattic/jetpack-components/compare/6.0.0...6.1.0
+[6.0.0]: https://github.com/Automattic/jetpack-components/compare/5.0.1...6.0.0
 [5.0.1]: https://github.com/Automattic/jetpack-components/compare/5.0.0...5.0.1
 [5.0.0]: https://github.com/Automattic/jetpack-components/compare/4.0.4...5.0.0
 [4.0.4]: https://github.com/Automattic/jetpack-components/compare/4.0.3...4.0.4

package/build/components/admin-page/index.d.ts

@@ -10,3 +10,4 @@ import type { FC } from 'react';
  */
 declare const AdminPage: FC<AdminPageProps>;
 export default AdminPage;
+export { default as PageActionButton } from './page-action-button.tsx';

package/build/components/admin-page/index.js

@@ -17,10 +17,15 @@ import styles from './style.module.scss';
  * @param {AdminPageProps} props - Component properties.
  * @return {ReactNode} AdminPage component.
  */
-const AdminPage = ({ children, className, showHeader = true, showFooter = true, showBackground = true, sandboxedDomain = '', apiRoot = '', apiNonce = '', optionalMenuItems, header, title, subTitle, logo, actions, globalControls, breadcrumbs, tabs, showBottomBorder = true, unwrapped = false, }) => {
+const AdminPage = ({ children, className, showHeader = true, showFooter = true, showBackground = true, sandboxedDomain = '', apiRoot = '', apiNonce = '', optionalMenuItems, header, title, subTitle, logo, actions, globalControls, breadcrumbs, ariaLabel, tabs, showBottomBorder = true, unwrapped = false, }) => {
+    // Only set what was passed: the client is shared, so an empty default would wipe what the page set.
     useEffect(() => {
-        restApi.setApiRoot(apiRoot);
-        restApi.setApiNonce(apiNonce);
+        if (apiRoot) {
+            restApi.setApiRoot(apiRoot);
+        }
+        if (apiNonce) {
+            restApi.setApiNonce(apiNonce);
+        }
     }, [apiRoot, apiNonce]);
     // `jp-admin-page` is a stable, non-hashed hook for global stylesheets and
     // shared SCSS mixins (notably `jetpack-admin-page-layout` in
@@ -44,7 +49,7 @@ const AdminPage = ({ children, className, showHeader = true, showFooter = true,
     }, []);
     // When title or breadcrumbs are provided, use admin-ui Page for the full page layout.
     if (showHeader && (title || breadcrumbs)) {
-        return (_jsx("div", { className: rootClassName, children: _jsxs(Page, { className: "jp-admin-page__page", visual: logo || _jsx(JetpackLogo, { showText: false, height: 20 }), breadcrumbs: breadcrumbs, title: title, subTitle: subTitle, actions: globalControls ? (_jsxs(_Fragment, { children: [actions, actions && (_jsx("span", { role: "separator", "aria-orientation": "vertical", className: styles['global-controls-separator'] })), globalControls] })) : (actions), showSidebarToggle: false, children: [tabs, unwrapped ? (children) : (_jsx(Container, { fluid: true, horizontalSpacing: 0, children: _jsx(Col, { children: children }) })), showFooter && _jsx(JetpackFooter, { menu: optionalMenuItems })] }) }));
+        return (_jsx("div", { className: rootClassName, children: _jsxs(Page, { className: "jp-admin-page__page", visual: logo || _jsx(JetpackLogo, { showText: false, height: 20 }), breadcrumbs: breadcrumbs, title: title, ariaLabel: ariaLabel, subTitle: subTitle, actions: globalControls ? (_jsxs(_Fragment, { children: [actions, actions && (_jsx("span", { role: "separator", "aria-orientation": "vertical", className: styles['global-controls-separator'] })), globalControls] })) : (actions), showSidebarToggle: false, children: [tabs, unwrapped ? (children) : (_jsx(Container, { className: "jp-admin-page__content", fluid: true, horizontalSpacing: 0, children: _jsx(Col, { children: children }) })), showFooter && _jsx(JetpackFooter, { menu: optionalMenuItems })] }) }));
     }
     // Legacy path: no title provided, render the classic header.
     return (_jsxs("div", { className: rootClassName, children: [showHeader && (_jsx(Container, { horizontalSpacing: 5, children: _jsxs(Col, { className: clsx(styles['admin-page-header'], 'jp-admin-page-header'), children: [header ? header : _jsx(JetpackLogo, {}), sandboxedDomain && (_jsx("code", { className: styles['sandbox-domain-badge'], onClick: testConnection, onKeyDown: testConnection, 
@@ -52,3 +57,4 @@ const AdminPage = ({ children, className, showHeader = true, showFooter = true,
                             role: "button", tabIndex: 0, title: `Sandboxing via ${sandboxedDomain}. Click to test connection.`, children: "API Sandboxed" }))] }) })), _jsx(Container, { fluid: true, horizontalSpacing: 0, children: _jsx(Col, { children: children }) }), showFooter && _jsx(JetpackFooter, { menu: optionalMenuItems })] }));
 };
 export default AdminPage;
+export { default as PageActionButton } from './page-action-button.js';

package/build/components/admin-page/page-action-button.d.ts

@@ -0,0 +1,5 @@
+import { IconButton } from '@wordpress/ui';
+import type { ComponentProps, ForwardRefExoticComponent, RefAttributes } from 'react';
+type PageActionButtonProps = ComponentProps<typeof IconButton>;
+declare const ForwardedPageActionButton: ForwardRefExoticComponent<PageActionButtonProps & RefAttributes<HTMLButtonElement>>;
+export default ForwardedPageActionButton;

package/build/components/admin-page/page-action-button.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMergeRefs, useViewportMatch } from '@wordpress/compose';
+import { Button, IconButton } from '@wordpress/ui';
+import { forwardRef, useCallback, useRef } from 'react';
+/**
+ * A page action for `AdminPage`'s `actions`: a labelled button, or an icon button on narrow screens.
+ *
+ * The label stays the button's accessible name, and becomes its tooltip when only the icon shows.
+ *
+ * @param props            - Any `Button` prop, passed to whichever button renders, plus the ones below.
+ * @param props.label      - The button's text, or its tooltip when only the icon shows.
+ * @param props.icon       - The icon shown on narrow screens.
+ * @param props.shortcut   - Shown in the icon button's tooltip, so on narrow screens only.
+ * @param props.positioner - Positions the icon button's tooltip, so on narrow screens only.
+ * @param ref              - Forwarded to the rendered button.
+ * @return The button.
+ */
+function PageActionButton({ label, icon, shortcut, positioner, ...buttonProps }, ref) {
+    // On phones, page actions show only their icon so the header's title keeps its room.
+    const isNarrowScreen = useViewportMatch('mobile', '<');
+    // Crossing the breakpoint swaps in a new button: move focus to it if the old one had it.
+    const button = useRef(null);
+    const hadFocus = useRef(false);
+    const keepFocus = useCallback((node) => {
+        const previous = button.current;
+        if (node) {
+            if (hadFocus.current) {
+                node.focus();
+            }
+            hadFocus.current = false;
+        }
+        else {
+            hadFocus.current = previous?.ownerDocument.activeElement === previous;
+        }
+        button.current = node;
+    }, []);
+    const mergedRef = useMergeRefs([ref, keepFocus]);
+    if (isNarrowScreen) {
+        return (_jsx(IconButton, { ref: mergedRef, label: label, icon: icon, shortcut: shortcut, positioner: positioner, ...buttonProps }));
+    }
+    return (_jsx(Button, { ref: mergedRef, ...buttonProps, children: label }));
+}
+const ForwardedPageActionButton = forwardRef(PageActionButton);
+export default ForwardedPageActionButton;

package/build/components/admin-page/types.d.ts

@@ -41,6 +41,10 @@ export type AdminPageProps = {
      * Breadcrumb navigation displayed next to the title in the unified header.
      */
     breadcrumbs?: ReactNode;
+    /**
+     * Accessible name of the page region. Defaults to `title`, so pass it when the header shows `breadcrumbs` instead.
+     */
+    ariaLabel?: string;
     /**
      * Tab navigation displayed below the title/tagline in the unified header.
      */

package/build/components/automattic-icon-logo/index.d.ts

@@ -2,9 +2,11 @@ import type { ReactElement } from 'react';
 /**
  * Automattic Icon Logo component
  *
+ * The Automattic logo is black or white only: pass white for both colors on dark backgrounds.
+ *
  * @param {object} props            - Component props
- * @param {string} props.innerColor - Color code for the line in the middle of the logo.
- * @param {string} props.outerColor - Color code for the logo's outer
+ * @param {string} props.innerColor - Color code for the logo's ring.
+ * @param {string} props.outerColor - Color code for the slash inside the ring.
  * @return {ReactElement} Component template
  */
 export default function AutomatticIconLogo({ innerColor, outerColor, }: {

package/build/components/automattic-icon-logo/index.js

@@ -3,11 +3,13 @@ import { Path, SVG } from '@wordpress/components';
 /**
  * Automattic Icon Logo component
  *
+ * The Automattic logo is black or white only: pass white for both colors on dark backgrounds.
+ *
  * @param {object} props            - Component props
- * @param {string} props.innerColor - Color code for the line in the middle of the logo.
- * @param {string} props.outerColor - Color code for the logo's outer
+ * @param {string} props.innerColor - Color code for the logo's ring.
+ * @param {string} props.outerColor - Color code for the slash inside the ring.
  * @return {ReactElement} Component template
  */
-export default function AutomatticIconLogo({ innerColor = '#00A3E0', outerColor = '#FFFFFF', }) {
-    return (_jsxs(SVG, { clipRule: "evenodd", fill: "none", fillRule: "evenodd", height: "43", viewBox: "0 0 47 43", width: "47", xmlns: "http://www.w3.org/2000/svg", children: [_jsx(Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M39.3164 20.9589C39.3164 13.2129 33.656 6.30469 23.4214 6.30469C13.1867 6.30469 7.58624 13.2129 7.58624 20.9589V21.9206C7.58624 29.6677 13.1867 36.6942 23.4214 36.6942C33.656 36.6942 39.3164 29.6677 39.3164 21.9206V20.9589ZM23.4214 43C9.21187 43 0 32.7913 0 22.1604V20.8407C0 10.0285 9.21187 0 23.4214 0C37.6919 0 46.9038 10.0285 46.9038 20.8407V22.1604C46.9038 32.7913 37.6919 43 23.4214 43Z", fill: innerColor }), _jsx(Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M28.4548 14.1897C29.752 15.0401 30.1158 16.8077 29.2739 18.1343L22.712 28.4682C21.8691 29.7959 20.1348 30.1799 18.8397 29.3295C17.5446 28.477 17.1765 26.7137 18.0205 25.386L24.5824 15.0522C25.4253 13.7256 27.1597 13.3404 28.4548 14.1897Z", fill: outerColor })] }));
+export default function AutomatticIconLogo({ innerColor = '#000000', outerColor = '#000000', }) {
+    return (_jsxs(SVG, { clipRule: "evenodd", fill: "none", fillRule: "evenodd", height: "43", viewBox: "0 0 171 156", width: "47", xmlns: "http://www.w3.org/2000/svg", children: [_jsx(Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M85.398 155.632C34.1992 155.632 1.01562 118.788 1.01562 80.3993V75.6007C1.01562 36.5611 34.1992 0.368164 85.398 0.368164C136.597 0.368164 169.984 36.5611 169.984 75.6007V80.3993C169.984 118.666 136.8 155.632 85.398 155.632ZM145.191 76.048C145.191 48.0696 122.323 23.1819 85.398 23.1819C48.4731 23.1819 25.9304 48.1103 25.9304 76.048V79.5047C25.9304 107.483 48.7984 132.859 85.398 132.859C121.998 132.859 145.191 107.483 145.191 79.5047V76.048Z", fill: innerColor }), _jsx(Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M62.7978 91.4965L87.6364 53.0284C91.1593 47.5724 98.4381 46.0054 103.894 49.5283L103.928 49.5504C109.384 53.0732 110.951 60.352 107.428 65.808L82.5899 104.276C79.067 109.732 71.7882 111.299 66.3322 107.776L66.298 107.754C60.842 104.231 59.275 96.9525 62.7978 91.4965Z", fill: outerColor })] }));
 }

package/build/components/boost-score-bar/index.js

@@ -1,8 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getScoreTier } from '@automattic/jetpack-boost-score-api';
 import { __ } from '@wordpress/i18n';
 import { Icon, desktop, mobile } from '@wordpress/icons';
 import clsx from 'clsx';
 import './style.scss';
+const TIER_FILLS = {
+    good: 'fill-good',
+    medium: 'fill-mediocre',
+    poor: 'fill-bad',
+};
 export const BoostScoreBar = ({ score, isLoading, showPrevScores, active, prevScore = 0, scoreBarType, noBoostScoreTooltip, }) => {
     if (!active) {
         return null;
@@ -22,13 +28,7 @@ export const BoostScoreBar = ({ score, isLoading, showPrevScores, active, prevSc
         if (isLoading && !score) {
             return 'fill-loading';
         }
-        if (score > 70) {
-            return 'fill-good';
-        }
-        if (score > 50) {
-            return 'fill-mediocre';
-        }
-        return 'fill-bad';
+        return TIER_FILLS[getScoreTier(score)];
     };
     return (_jsxs("div", { className: clsx('jb-score-bar', `jb-score-bar--${scoreBarType}`), children: [_jsxs("div", { className: "jb-score-bar__label", children: [getIcon(), _jsx("div", { children: scoreBarType === 'desktop' ? desktopIconLabel : mobileIconLabel })] }), _jsx("div", { className: "jb-score-bar__bounds", children: _jsxs("div", { className: clsx('jb-score-bar__filler', getFillColor()), style: { width: `${score}%` }, children: [isLoading ? (_jsx("div", { className: "jb-score-bar__loading", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 128 128", children: _jsxs("g", { children: [_jsx("path", { d: "M64 0a7 7 0 11-7 7 7 7 0 017-7zm29.86 12.2a2.8 2.8 0 11-3.83 1.02 2.8 2.8 0 013.83-1.02zm22.16 21.68a3.15 3.15 0 11-4.3-1.15 3.15 3.15 0 014.3 1.15zm.87 60.53a4.2 4.2 0 11-1.57-5.7 4.2 4.2 0 011.54 5.73zm7.8-30.5a3.85 3.85 0 11-3.85-3.85 3.85 3.85 0 013.85 3.84zm-30 53.2a4.55 4.55 0 111.66-6.23 4.55 4.55 0 01-1.67 6.22zM64 125.9a4.9 4.9 0 114.9-4.9 4.9 4.9 0 01-4.9 4.9zm-31.06-8.22a5.25 5.25 0 117.17-1.93 5.25 5.25 0 01-7.14 1.93zM9.9 95.1a5.6 5.6 0 117.65 2.06A5.6 5.6 0 019.9 95.1zM1.18 63.9a5.95 5.95 0 115.95 5.94 5.95 5.95 0 01-5.96-5.94zm8.1-31.6a6.3 6.3 0 112.32 8.6 6.3 6.3 0 01-2.3-8.6zM32.25 8.87a6.65 6.65 0 11-2.44 9.1 6.65 6.65 0 012.46-9.1z" }), _jsx("animateTransform", { attributeName: "transform", type: "rotate", values: "0 64 64;30 64 64;60 64 64;90 64 64;120 64 64;150 64 64;180 64 64;210 64 64;240 64 64;270 64 64;300 64 64;330 64 64", calcMode: "discrete", dur: "1080ms", repeatCount: "indefinite" })] }) }) })) : (_jsx("div", { className: "jb-score-bar__score", children: score })), showPrevScores && !!prevScore && prevScore < score && (_jsxs("div", { className: "jb-score-bar__no_boost_score", style: { left: `min(${prevScoreOffset}%, calc( 100% - var(--clearance-space))` }, children: [prevScore, noBoostScoreTooltip && (_jsx("div", { role: "tooltip", className: "jb-score-bar__no_boost_score_tooltip", children: noBoostScoreTooltip }))] }))] }) })] }));
 };

package/build/components/checkbox-card/style.scss

@@ -1,54 +1,26 @@
-@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
+@use "../selectable-card/selectable-card";
 
 .jp-checkbox-card-grid {
-	display: grid;
-	grid-template-columns: repeat(2, minmax(0, 1fr));
-	column-gap: var(--wpds-dimension-gap-md);
-	row-gap: var(--wpds-dimension-gap-2xl);
-
-	@media (max-width: 720px) {
-		grid-template-columns: minmax(0, 1fr);
-	}
+
+	@include selectable-card.grid;
 }
 
 .jp-checkbox-card {
 
-	&[data-checked="true"] {
-		border-color: var(--wpds-color-stroke-interactive-brand-active);
-	}
-
-	&:hover:not([data-checked="true"]) {
-		border-color: var(--wpds-color-stroke-surface-neutral-strong);
-	}
-
-	&:has(:focus-visible) {
-
-		@include gb.outset-ring__focus();
-	}
-
-	@media (prefers-reduced-motion: no-preference) {
-		transition: border-color 0.15s ease-out;
-	}
+	@include selectable-card.card('[data-checked="true"]');
 }
 
 .jp-checkbox-card__surface {
-	position: relative;
+
+	@include selectable-card.surface;
 }
 
 .jp-checkbox-card__illustration {
-	display: flex;
-	aspect-ratio: 294 / 192;
-	background: var(--wpds-color-background-surface-neutral-weak);
-	cursor: var(--wpds-cursor-control);
-
-	> svg {
-		inline-size: 100%;
-		block-size: 100%;
-	}
+
+	@include selectable-card.illustration;
 }
 
 .jp-checkbox-card__checkbox {
-	position: absolute;
-	inset-block-start: var(--wpds-dimension-padding-md);
-	inset-inline-start: var(--wpds-dimension-padding-md);
+
+	@include selectable-card.control;
 }

package/build/components/jetpack-footer/index.d.ts

@@ -1,19 +1,2 @@
 import './style.scss';
-import type { JetpackFooterProps } from './types.ts';
-import type { FC } from 'react';
-declare global {
-    interface Window {
-        JetpackNetworkAdminData?: {
-            sitesUrl: string;
-            settingsUrl: string;
-        };
-    }
-}
-/**
- * JetpackFooter component displays a tiny Jetpack logo with the product name on the left and the Automattic Airline "by line" on the right.
- *
- * @param {JetpackFooterProps} props - Component properties.
- * @return {ReactNode} JetpackFooter component.
- */
-declare const JetpackFooter: FC<JetpackFooterProps>;
-export default JetpackFooter;
+export { default } from './jetpack-footer.tsx';

package/build/components/jetpack-footer/index.js

@@ -1,40 +1,2 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { isWpcomPlatformSite, getAdminUrl, getScriptData } from '@automattic/jetpack-script-data';
-import { __ } from '@wordpress/i18n';
-import { Stack, Text, Link } from '@wordpress/ui';
-import clsx from 'clsx';
-import { getRedirectUrl } from '../../index.js';
-import AutomatticBylineLogo from '../automattic-byline-logo/index.js';
 import './style.scss';
-import JetpackLogo from '../jetpack-logo/index.js';
-/**
- * JetpackFooter component displays a tiny Jetpack logo with the product name on the left and the Automattic Airline "by line" on the right.
- *
- * @param {JetpackFooterProps} props - Component properties.
- * @return {ReactNode} JetpackFooter component.
- */
-const JetpackFooter = ({ className, menu, ...otherProps }) => {
-    let items = [];
-    if (getScriptData()?.myJetpack?.isAvailable === true &&
-        !isWpcomPlatformSite() &&
-        !window?.JetpackNetworkAdminData) {
-        items = [
-            {
-                label: __('Features', 'jetpack-components'),
-                href: getAdminUrl('admin.php?page=my-jetpack#/features'),
-            },
-            {
-                label: __('Help', 'jetpack-components'),
-                href: getAdminUrl('admin.php?page=my-jetpack#/help'),
-            },
-            ...items,
-        ];
-    }
-    if (menu) {
-        items = [...items, ...menu];
-    }
-    return (_jsxs(Stack, { render: _jsx("footer", {}), className: clsx('jetpack-footer', className), "aria-label": __('Jetpack', 'jetpack-components'), role: "contentinfo", direction: "row", justify: "flex-start", align: "center", wrap: "wrap", gap: "xl", ...otherProps, children: [_jsxs(Stack, { className: "jetpack-footer__logo", direction: "row", gap: "sm", align: "center", children: [_jsx(JetpackLogo, { showText: false, height: 16, "aria-hidden": "true" }), _jsx(Text, { variant: "body-md", children: "Jetpack" })] }), _jsx(Stack, { render: _jsx("ul", {}), direction: "row", gap: "lg", wrap: "wrap", children: items.map(item => {
-                    return (_jsx("li", { children: _jsx(Text, { variant: "body-md", className: "jetpack-footer__menu-item", render: !item.href ? (_jsx(Link, { render: _jsx("span", {}), tabIndex: 0, title: item.title || '', onClick: item.onClick || undefined, onKeyDown: item.onKeyDown || undefined, role: "button" })) : (_jsx(Link, { href: item.href, title: item.title || '', onClick: item.onClick || undefined, onKeyDown: item.onKeyDown || undefined })), children: item.label }) }, item.label));
-                }) }), _jsx("a", { className: "jetpack-footer__a8c", href: getRedirectUrl('a8c-about'), rel: "noopener noreferrer", target: "_blank", children: _jsx(AutomatticBylineLogo, { height: 8 }) })] }));
-};
-export default JetpackFooter;
+export { default } from './jetpack-footer.js';

package/build/components/jetpack-footer/jetpack-footer.d.ts

@@ -0,0 +1,18 @@
+import type { JetpackFooterProps } from './types.ts';
+import type { FC } from 'react';
+declare global {
+    interface Window {
+        JetpackNetworkAdminData?: {
+            sitesUrl: string;
+            settingsUrl: string;
+        };
+    }
+}
+/**
+ * JetpackFooter component displays a tiny Jetpack logo with the product name on the left and the Automattic Airline "by line" on the right.
+ *
+ * @param {JetpackFooterProps} props - Component properties.
+ * @return {ReactNode} JetpackFooter component.
+ */
+declare const JetpackFooter: FC<JetpackFooterProps>;
+export default JetpackFooter;

package/build/components/jetpack-footer/jetpack-footer.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isWpcomPlatformSite, getAdminUrl, getScriptData } from '@automattic/jetpack-script-data';
+import { __ } from '@wordpress/i18n';
+import { Stack, Text, Link } from '@wordpress/ui';
+import clsx from 'clsx';
+import getRedirectUrl from '../../tools/jp-redirect/index.js';
+import AutomatticBylineLogo from '../automattic-byline-logo/index.js';
+import JetpackLogo from '../jetpack-logo/index.js';
+/**
+ * JetpackFooter component displays a tiny Jetpack logo with the product name on the left and the Automattic Airline "by line" on the right.
+ *
+ * @param {JetpackFooterProps} props - Component properties.
+ * @return {ReactNode} JetpackFooter component.
+ */
+const JetpackFooter = ({ className, menu, ...otherProps }) => {
+    let items = [];
+    if (getScriptData()?.myJetpack?.isAvailable === true &&
+        !isWpcomPlatformSite() &&
+        !window?.JetpackNetworkAdminData) {
+        items = [
+            {
+                label: __('Features', 'jetpack-components'),
+                href: getAdminUrl('admin.php?page=my-jetpack#/features'),
+            },
+            {
+                label: __('Help', 'jetpack-components'),
+                href: getAdminUrl('admin.php?page=my-jetpack#/help'),
+            },
+            ...items,
+        ];
+    }
+    if (menu) {
+        items = [...items, ...menu];
+    }
+    return (_jsxs(Stack, { render: _jsx("footer", {}), className: clsx('jetpack-footer', className), "aria-label": __('Jetpack', 'jetpack-components'), role: "contentinfo", direction: "row", justify: "flex-start", align: "center", wrap: "wrap", gap: "xl", ...otherProps, children: [_jsxs(Stack, { className: "jetpack-footer__logo", direction: "row", gap: "sm", align: "center", children: [_jsx(JetpackLogo, { showText: false, height: 16, "aria-hidden": "true" }), _jsx(Text, { variant: "body-md", children: "Jetpack" })] }), _jsx(Stack, { render: _jsx("ul", {}), direction: "row", gap: "lg", wrap: "wrap", children: items.map(item => {
+                    return (_jsx("li", { children: _jsx(Text, { variant: "body-md", className: "jetpack-footer__menu-item", render: !item.href ? (_jsx(Link, { render: _jsx("span", {}), tabIndex: 0, title: item.title || '', onClick: item.onClick || undefined, onKeyDown: item.onKeyDown || undefined, role: "button" })) : (_jsx(Link, { href: item.href, title: item.title || '', onClick: item.onClick || undefined, onKeyDown: item.onKeyDown || undefined })), children: item.label }) }, item.label));
+                }) }), _jsx("a", { className: "jetpack-footer__a8c", href: getRedirectUrl('a8c-about'), rel: "noopener noreferrer", target: "_blank", children: _jsx(AutomatticBylineLogo, { height: 8 }) })] }));
+};
+export default JetpackFooter;

package/build/components/period-selector/index.d.ts

@@ -0,0 +1,9 @@
+import type { PeriodSelectorProps } from './types.ts';
+import type { JSX } from 'react';
+/**
+ * A dropdown of period presets, with optional buttons to step to the previous or next period.
+ *
+ * @param {PeriodSelectorProps} props - Component props.
+ * @return {JSX.Element} The selector.
+ */
+export default function PeriodSelector<Value extends string>({ presets, value, label, onChange, onPrevious, onNext, isPreviousDisabled, isNextDisabled, disabled, className, }: PeriodSelectorProps<Value>): JSX.Element;

package/build/components/period-selector/index.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { __, isRTL, sprintf } from '@wordpress/i18n';
+import { calendar, chevronLeft, chevronRight } from '@wordpress/icons';
+import { Button, IconButton, Menu, Stack } from '@wordpress/ui';
+/**
+ * A dropdown of period presets, with optional buttons to step to the previous or next period.
+ *
+ * @param {PeriodSelectorProps} props - Component props.
+ * @return {JSX.Element} The selector.
+ */
+export default function PeriodSelector({ presets, value, label, onChange, onPrevious, onNext, isPreviousDisabled = false, isNextDisabled = false, disabled = false, className, }) {
+    const selected = presets.find(preset => preset.value === value);
+    const selectedLabel = selected?.label ?? __('Select period', 'jetpack-components');
+    const [previousIcon, nextIcon] = isRTL()
+        ? [chevronRight, chevronLeft]
+        : [chevronLeft, chevronRight];
+    return (_jsxs(Stack, { direction: "row", align: "center", gap: "xs", className: className, children: [_jsxs(Menu.Root, { children: [_jsxs(Menu.Trigger, { render: _jsx(Button, { variant: "outline", tone: "neutral", size: "compact" }), disabled: disabled, "aria-label": label &&
+                            sprintf(
+                            /* translators: %1$s: What the control picks, such as "Date range". %2$s: The selected period, such as "Last 30 days". */
+                            __('%1$s: %2$s', 'jetpack-components'), label, selectedLabel), children: [_jsx(Button.Icon, { icon: calendar }), selectedLabel] }), _jsx(Menu.Popup, { positioner: _jsx(Menu.Positioner, { align: "end" }), "aria-label": label, children: _jsx(Menu.RadioGroup, { value: value, onValueChange: onChange, children: presets.map(preset => (_jsx(Menu.RadioItem, { value: preset.value, closeOnClick: true, children: _jsx(Menu.ItemLabel, { children: preset.label }) }, preset.value))) }) })] }), onPrevious && (_jsx(IconButton, { variant: "outline", tone: "neutral", size: "compact", icon: previousIcon, label: __('Previous period', 'jetpack-components'), onClick: onPrevious, disabled: disabled || isPreviousDisabled })), onNext && (_jsx(IconButton, { variant: "outline", tone: "neutral", size: "compact", icon: nextIcon, label: __('Next period', 'jetpack-components'), onClick: onNext, disabled: disabled || isNextDisabled }))] }));
+}

package/build/components/period-selector/types.d.ts

@@ -0,0 +1,28 @@
+export type PeriodPreset<Value extends string = string> = {
+    /** Identifies the preset; passed to `onChange`. */
+    value: Value;
+    /** The preset's name, such as "Last 7 days". */
+    label: string;
+};
+export type PeriodSelectorProps<Value extends string = string> = {
+    /** The presets the dropdown offers, in order. */
+    presets: PeriodPreset<Value>[];
+    /** Names what the control picks, such as "Date range"; screen readers hear it before the selected period. */
+    label?: string;
+    /** The selected preset's value. */
+    value: Value;
+    /** Called with the chosen preset's value. */
+    onChange: (value: Value) => void;
+    /** Steps to the previous period; the button shows only when set. */
+    onPrevious?: () => void;
+    /** Steps to the next period; the button shows only when set. */
+    onNext?: () => void;
+    /** Whether there is no previous period to step to. */
+    isPreviousDisabled?: boolean;
+    /** Whether there is no next period to step to, such as on the latest one. */
+    isNextDisabled?: boolean;
+    /** Whether the dropdown and both step buttons are disabled. */
+    disabled?: boolean;
+    /** Class name for the wrapper. */
+    className?: string;
+};

package/build/components/period-selector/types.js

@@ -0,0 +1 @@
+export {};

package/build/components/radio-card/index.d.ts

@@ -0,0 +1,19 @@
+import './style.scss';
+import type { RadioCardGridProps, RadioCardProps } from './types.ts';
+import type { JSX } from 'react';
+/**
+ * Lays out radio cards in two columns, or one on narrow screens.
+ *
+ * @param {RadioCardGridProps} props - Component props.
+ * @return {JSX.Element} The grid.
+ */
+export declare function RadioCardGrid({ children, className }: RadioCardGridProps): JSX.Element;
+/**
+ * A card with a radio, picked by a click on its illustration. Render it in a `RadioGroup` inside a `Field.Root`.
+ *
+ * @param {RadioCardProps} props - Component props.
+ * @return {JSX.Element} The card.
+ */
+export default function RadioCard({ id, value, title, illustration, previewUrl, onPreviewClick, disabled, }: RadioCardProps): JSX.Element;
+export { RadioCard };
+export type { RadioCardProps, RadioCardGridProps };

package/build/components/radio-card/index.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Card, Field, Link, Radio, Stack, Text } from '@wordpress/ui';
+import clsx from 'clsx';
+import './style.scss';
+/**
+ * Lays out radio cards in two columns, or one on narrow screens.
+ *
+ * @param {RadioCardGridProps} props - Component props.
+ * @return {JSX.Element} The grid.
+ */
+export function RadioCardGrid({ children, className }) {
+    return _jsx("div", { className: clsx('jp-radio-card-grid', className), children: children });
+}
+/**
+ * A card with a radio, picked by a click on its illustration. Render it in a `RadioGroup` inside a `Field.Root`.
+ *
+ * @param {RadioCardProps} props - Component props.
+ * @return {JSX.Element} The card.
+ */
+export default function RadioCard({ id, value, title, illustration, previewUrl, onPreviewClick, disabled, }) {
+    const titleId = `${id}__title`;
+    const handlePreviewClick = useCallback(() => {
+        onPreviewClick?.(value);
+    }, [value, onPreviewClick]);
+    return (_jsxs(Field.Item, { disabled: disabled, children: [_jsx(Card.Root, { className: "jp-radio-card", children: _jsx(Card.Content, { children: _jsxs(Card.FullBleed, { className: "jp-radio-card__surface", children: [_jsx(Field.Label, { className: "jp-radio-card__illustration", children: illustration }), _jsx(Radio, { id: id, className: "jp-radio-card__radio", value: value, disabled: disabled, "aria-labelledby": titleId })] }) }) }), _jsxs(Stack, { gap: "xs", direction: "column", children: [_jsx(Text, { id: titleId, variant: "body-sm", children: title }), previewUrl && (_jsx(Link, { href: previewUrl, onClick: handlePreviewClick, children: __('Preview and edit', 'jetpack-components') }))] })] }));
+}
+export { RadioCard };

package/build/components/radio-card/style.scss

@@ -0,0 +1,26 @@
+@use "../selectable-card/selectable-card";
+
+.jp-radio-card-grid {
+
+	@include selectable-card.grid;
+}
+
+.jp-radio-card {
+
+	@include selectable-card.card( ":has(.jp-radio-card__radio[data-checked])" );
+}
+
+.jp-radio-card__surface {
+
+	@include selectable-card.surface;
+}
+
+.jp-radio-card__illustration {
+
+	@include selectable-card.illustration;
+}
+
+.jp-radio-card__radio {
+
+	@include selectable-card.control;
+}

package/build/components/radio-card/types.d.ts

@@ -0,0 +1,41 @@
+import type { ReactNode } from 'react';
+export type RadioCardProps = {
+    /**
+     * Id of the radio; the title's id is built from it.
+     */
+    id: string;
+    /**
+     * The value the surrounding `RadioGroup` takes when this card is picked. Also passed to `onPreviewClick`.
+     */
+    value: string;
+    /**
+     * Caption under the card, and the radio's accessible name.
+     */
+    title: string;
+    /**
+     * Picture filling the card, drawn at a 294×192 aspect ratio.
+     */
+    illustration?: ReactNode;
+    /**
+     * Shows a "Preview and edit" link to this URL under the title.
+     */
+    previewUrl?: string;
+    /**
+     * Called with the card's `value` when the "Preview and edit" link is clicked.
+     */
+    onPreviewClick?: (value: string) => void;
+    /**
+     * Disables the radio.
+     */
+    disabled?: boolean;
+};
+export type RadioCardGridProps = {
+    /**
+     * The `RadioCard`s to lay out.
+     */
+    children: ReactNode;
+    /**
+     * Extra class for the grid.
+     */
+    className?: string;
+};

package/build/components/radio-card/types.js

@@ -0,0 +1 @@
+export {};