@automattic/jetpack-components 6.0.0 → 6.1.0

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 ### 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]
@@ -2036,6 +2048,7 @@
 ### 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

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

@@ -49,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, 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, { 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, 

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/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/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 {};

package/build/components/selectable-card/_selectable-card.scss

@@ -0,0 +1,57 @@
+@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
+
+// Shared by CheckboxCard and RadioCard, which differ only in their control.
+
+@mixin 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);
+	}
+}
+
+// $selected matches the card while its control is selected.
+@mixin card($selected) {
+
+	&#{$selected} {
+		border-color: var(--wpds-color-stroke-interactive-brand-active);
+	}
+
+	&:hover:not(#{$selected}) {
+		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;
+	}
+}
+
+@mixin surface {
+	position: relative;
+}
+
+@mixin 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%;
+	}
+}
+
+@mixin control {
+	position: absolute;
+	inset-block-start: var(--wpds-dimension-padding-md);
+	inset-inline-start: var(--wpds-dimension-padding-md);
+}

package/build/index.d.ts

@@ -11,6 +11,8 @@ export { default as Gravatar } from './components/gravatar/index.tsx';
 export type { GravatarProps } from './components/gravatar/index.tsx';
 export { default as CheckboxCard, CheckboxCardGrid } from './components/checkbox-card/index.tsx';
 export type { CheckboxCardProps, CheckboxCardGridProps } from './components/checkbox-card/types.ts';
+export { default as RadioCard, RadioCardGrid } from './components/radio-card/index.tsx';
+export type { RadioCardProps, RadioCardGridProps } from './components/radio-card/types.ts';
 export { default as IconTooltip } from './components/icon-tooltip/index.tsx';
 export { default as ActionButton } from './components/action-button/index.tsx';
 export { default as PricingCard } from './components/pricing-card/index.tsx';
@@ -45,6 +47,8 @@ export { default as ActionPopover } from './components/action-popover/index.tsx'
 export { default as UpsellBanner } from './components/upsell-banner/index.tsx';
 export { getUserLocale, cleanLocale } from './lib/locale/index.ts';
 export { default as StatCard } from './components/stat-card/index.tsx';
+export { default as PeriodSelector } from './components/period-selector/index.tsx';
+export type { PeriodPreset, PeriodSelectorProps } from './components/period-selector/types.ts';
 export { default as DiffViewer } from './components/diff-viewer/index.tsx';
 export { default as MarkedLines } from './components/marked-lines/index.tsx';
 export { default as DetailsViewer } from './components/details-viewer/index.tsx';

package/build/index.js

@@ -23,6 +23,7 @@ export { default as AutomatticForAgenciesLogo } from './components/automattic-fo
 export { default as JetpackFooter } from './components/jetpack-footer/index.js';
 export { default as Gravatar } from './components/gravatar/index.js';
 export { default as CheckboxCard, CheckboxCardGrid } from './components/checkbox-card/index.js';
+export { default as RadioCard, RadioCardGrid } from './components/radio-card/index.js';
 export { default as IconTooltip } from './components/icon-tooltip/index.js';
 export { default as ActionButton } from './components/action-button/index.js';
 export { default as PricingCard } from './components/pricing-card/index.js';
@@ -56,6 +57,7 @@ export { default as ActionPopover } from './components/action-popover/index.js';
 export { default as UpsellBanner } from './components/upsell-banner/index.js';
 export { getUserLocale, cleanLocale } from './lib/locale/index.js';
 export { default as StatCard } from './components/stat-card/index.js';
+export { default as PeriodSelector } from './components/period-selector/index.js';
 export { default as DiffViewer } from './components/diff-viewer/index.js';
 export { default as MarkedLines } from './components/marked-lines/index.js';
 export { default as DetailsViewer } from './components/details-viewer/index.js';

package/components/admin-page/index.tsx

@@ -111,7 +111,7 @@ const AdminPage: FC< AdminPageProps > = ( {
 					{ unwrapped ? (
 						children
 					) : (
-						<Container fluid horizontalSpacing={ 0 }>
+						<Container className="jp-admin-page__content" fluid horizontalSpacing={ 0 }>
 							<Col>{ children }</Col>
 						</Container>
 					) }

package/components/automattic-icon-logo/index.tsx

@@ -4,14 +4,16 @@ 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 = '#00A3E0',
-	outerColor = '#FFFFFF',
+	innerColor = '#000000',
+	outerColor = '#000000',
 }: {
 	innerColor: string;
 	outerColor: string;
@@ -22,20 +24,20 @@ export default function AutomatticIconLogo( {
 			fill="none"
 			fillRule="evenodd"
 			height="43"
-			viewBox="0 0 47 43"
+			viewBox="0 0 171 156"
 			width="47"
 			xmlns="http://www.w3.org/2000/svg"
 		>
 			<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"
+				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 }
 			/>
 			<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"
+				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 }
 			/>
 		</SVG>

package/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/components/period-selector/index.tsx

@@ -0,0 +1,84 @@
+import { __, isRTL, sprintf } from '@wordpress/i18n';
+import { calendar, chevronLeft, chevronRight } from '@wordpress/icons';
+import { Button, IconButton, Menu, Stack } from '@wordpress/ui';
+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 = false,
+	isNextDisabled = false,
+	disabled = false,
+	className,
+}: PeriodSelectorProps< Value > ): JSX.Element {
+	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 (
+		<Stack direction="row" align="center" gap="xs" className={ className }>
+			<Menu.Root>
+				<Menu.Trigger
+					render={ <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
+						)
+					}
+				>
+					<Button.Icon icon={ calendar } />
+					{ selectedLabel }
+				</Menu.Trigger>
+				<Menu.Popup positioner={ <Menu.Positioner align="end" /> } aria-label={ label }>
+					<Menu.RadioGroup value={ value } onValueChange={ onChange }>
+						{ presets.map( preset => (
+							<Menu.RadioItem key={ preset.value } value={ preset.value } closeOnClick>
+								<Menu.ItemLabel>{ preset.label }</Menu.ItemLabel>
+							</Menu.RadioItem>
+						) ) }
+					</Menu.RadioGroup>
+				</Menu.Popup>
+			</Menu.Root>
+			{ onPrevious && (
+				<IconButton
+					variant="outline"
+					tone="neutral"
+					size="compact"
+					icon={ previousIcon }
+					label={ __( 'Previous period', 'jetpack-components' ) }
+					onClick={ onPrevious }
+					disabled={ disabled || isPreviousDisabled }
+				/>
+			) }
+			{ onNext && (
+				<IconButton
+					variant="outline"
+					tone="neutral"
+					size="compact"
+					icon={ nextIcon }
+					label={ __( 'Next period', 'jetpack-components' ) }
+					onClick={ onNext }
+					disabled={ disabled || isNextDisabled }
+				/>
+			) }
+		</Stack>
+	);
+}

package/components/period-selector/types.ts

@@ -0,0 +1,29 @@
+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/components/radio-card/index.tsx

@@ -0,0 +1,72 @@
+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';
+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 function RadioCardGrid( { children, className }: RadioCardGridProps ): JSX.Element {
+	return <div className={ clsx( 'jp-radio-card-grid', className ) }>{ children }</div>;
+}
+
+/**
+ * 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 {
+	const titleId = `${ id }__title`;
+
+	const handlePreviewClick = useCallback( () => {
+		onPreviewClick?.( value );
+	}, [ value, onPreviewClick ] );
+
+	return (
+		<Field.Item disabled={ disabled }>
+			<Card.Root className="jp-radio-card">
+				<Card.Content>
+					<Card.FullBleed className="jp-radio-card__surface">
+						{ /* Only the illustration picks the card: the title and link sit outside the label. */ }
+						<Field.Label className="jp-radio-card__illustration">{ illustration }</Field.Label>
+						<Radio
+							id={ id }
+							className="jp-radio-card__radio"
+							value={ value }
+							disabled={ disabled }
+							aria-labelledby={ titleId }
+						/>
+					</Card.FullBleed>
+				</Card.Content>
+			</Card.Root>
+			<Stack gap="xs" direction="column">
+				<Text id={ titleId } variant="body-sm">
+					{ title }
+				</Text>
+				{ previewUrl && (
+					<Link href={ previewUrl } onClick={ handlePreviewClick }>
+						{ __( 'Preview and edit', 'jetpack-components' ) }
+					</Link>
+				) }
+			</Stack>
+		</Field.Item>
+	);
+}
+
+export { RadioCard };
+export type { RadioCardProps, RadioCardGridProps };

package/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/components/radio-card/types.ts

@@ -0,0 +1,43 @@
+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/components/selectable-card/_selectable-card.scss

@@ -0,0 +1,57 @@
+@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
+
+// Shared by CheckboxCard and RadioCard, which differ only in their control.
+
+@mixin 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);
+	}
+}
+
+// $selected matches the card while its control is selected.
+@mixin card($selected) {
+
+	&#{$selected} {
+		border-color: var(--wpds-color-stroke-interactive-brand-active);
+	}
+
+	&:hover:not(#{$selected}) {
+		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;
+	}
+}
+
+@mixin surface {
+	position: relative;
+}
+
+@mixin 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%;
+	}
+}
+
+@mixin control {
+	position: absolute;
+	inset-block-start: var(--wpds-dimension-padding-md);
+	inset-inline-start: var(--wpds-dimension-padding-md);
+}

package/index.ts

@@ -26,6 +26,8 @@ export { default as Gravatar } from './components/gravatar/index.tsx';
 export type { GravatarProps } from './components/gravatar/index.tsx';
 export { default as CheckboxCard, CheckboxCardGrid } from './components/checkbox-card/index.tsx';
 export type { CheckboxCardProps, CheckboxCardGridProps } from './components/checkbox-card/types.ts';
+export { default as RadioCard, RadioCardGrid } from './components/radio-card/index.tsx';
+export type { RadioCardProps, RadioCardGridProps } from './components/radio-card/types.ts';
 export { default as IconTooltip } from './components/icon-tooltip/index.tsx';
 export { default as ActionButton } from './components/action-button/index.tsx';
 export { default as PricingCard } from './components/pricing-card/index.tsx';
@@ -65,6 +67,8 @@ export { default as ActionPopover } from './components/action-popover/index.tsx'
 export { default as UpsellBanner } from './components/upsell-banner/index.tsx';
 export { getUserLocale, cleanLocale } from './lib/locale/index.ts';
 export { default as StatCard } from './components/stat-card/index.tsx';
+export { default as PeriodSelector } from './components/period-selector/index.tsx';
+export type { PeriodPreset, PeriodSelectorProps } from './components/period-selector/types.ts';
 export { default as DiffViewer } from './components/diff-viewer/index.tsx';
 export { default as MarkedLines } from './components/marked-lines/index.tsx';
 export { default as DetailsViewer } from './components/details-viewer/index.tsx';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "6.0.0",
+	"version": "6.1.0",
 	"description": "Jetpack Components Package",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/components/#readme",
 	"bugs": {
@@ -67,6 +67,10 @@
 			"types": "./build/components/product-price/index.d.ts",
 			"default": "./build/components/product-price/index.js"
 		},
+		"./radio-card": {
+			"types": "./build/components/radio-card/index.d.ts",
+			"default": "./build/components/radio-card/index.js"
+		},
 		"./tools/jp-redirect": {
 			"types": "./build/tools/jp-redirect/index.d.ts",
 			"default": "./build/tools/jp-redirect/index.js"
@@ -114,7 +118,7 @@
 		"uplot-react": "1.1.4"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^1.2.19",
+		"@automattic/jetpack-base-styles": "^1.2.20",
 		"@babel/core": "7.29.7",
 		"@jest/globals": "30.5.2",
 		"@storybook/addon-docs": "10.6.3",
@@ -133,7 +137,7 @@
 		"storybook": "10.6.3",
 		"ts-dedent": "2.2.0",
 		"typescript": "6.0.3",
-		"webpack": "5.111.1",
+		"webpack": "5.112.2",
 		"webpack-cli": "7.2.1"
 	},
 	"peerDependencies": {