@automattic/date-range-picker 1.0.0

package/dist/types/button-stack.d.ts

@@ -0,0 +1,8 @@
+import { __experimentalHStack as HStack } from '@wordpress/components';
+import type { ComponentProps, ReactNode } from 'react';
+type ButtonStackProps = {
+    children: ReactNode;
+};
+export declare function ButtonStack({ children, ...hStackProps }: ButtonStackProps & Omit<ComponentProps<typeof HStack>, 'spacing'>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=button-stack.d.ts.map

package/dist/types/button-stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-stack.d.ts","sourceRoot":"","sources":["../../src/button-stack.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,IAAI,MAAM,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,KAAK,gBAAgB,GAAG;IACvB,QAAQ,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,wBAAgB,WAAW,CAAE,EAC5B,QAAQ,EACR,GAAG,WAAW,EACd,EAAE,gBAAgB,GAAG,IAAI,CAAE,cAAc,CAAE,OAAO,MAAM,CAAE,EAAE,SAAS,CAAE,2CAMvE"}

package/dist/types/date-inputs.d.ts

@@ -0,0 +1,21 @@
+import type { FocusEvent } from 'react';
+type DateInputsProps = {
+    fromStr: string;
+    toStr: string;
+    onFromChange: (v: string) => void;
+    onToChange: (v: string) => void;
+    todayStr: string;
+    minStr?: string;
+    fromStyle?: React.CSSProperties;
+    toStyle?: React.CSSProperties;
+    stack?: boolean;
+    justify?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
+    containerStyle?: React.CSSProperties;
+    onFromFocus?: (e: FocusEvent<HTMLInputElement>) => void;
+    onToFocus?: (e: FocusEvent<HTMLInputElement>) => void;
+    onFromBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+    onToBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+};
+export declare function DateInputs({ fromStr, toStr, onFromChange, onToChange, todayStr, minStr, fromStyle, toStyle, stack, justify, containerStyle, onFromFocus, onToFocus, onFromBlur, onToBlur, }: DateInputsProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=date-inputs.d.ts.map

package/dist/types/date-inputs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-inputs.d.ts","sourceRoot":"","sources":["../../src/date-inputs.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAExC,KAAK,eAAe,GAAG;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,CAAE,CAAC,EAAE,MAAM,KAAM,IAAI,CAAC;IACpC,UAAU,EAAE,CAAE,CAAC,EAAE,MAAM,KAAM,IAAI,CAAC;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAChC,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC9B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EACL,YAAY,GACZ,UAAU,GACV,QAAQ,GACR,eAAe,GACf,cAAc,GACd,cAAc,CAAC;IAClB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,WAAW,CAAC,EAAE,CAAE,CAAC,EAAE,UAAU,CAAE,gBAAgB,CAAE,KAAM,IAAI,CAAC;IAC5D,SAAS,CAAC,EAAE,CAAE,CAAC,EAAE,UAAU,CAAE,gBAAgB,CAAE,KAAM,IAAI,CAAC;IAC1D,UAAU,CAAC,EAAE,CAAE,CAAC,EAAE,UAAU,CAAE,gBAAgB,CAAE,KAAM,IAAI,CAAC;IAC3D,QAAQ,CAAC,EAAE,CAAE,CAAC,EAAE,UAAU,CAAE,gBAAgB,CAAE,KAAM,IAAI,CAAC;CACzD,CAAC;AAEF,wBAAgB,UAAU,CAAE,EAC3B,OAAO,EACP,KAAK,EACL,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,MAAM,EACN,SAAS,EACT,OAAO,EACP,KAAa,EACb,OAAsB,EACtB,cAAc,EACd,WAAW,EACX,SAAS,EACT,UAAU,EACV,QAAQ,GACR,EAAE,eAAe,2CA6FjB"}

package/dist/types/date-range-content.d.ts

@@ -0,0 +1,39 @@
+import { PresetId } from './utils';
+type DateRangeContentProps = {
+    isSmall: boolean;
+    showTwoMonths?: boolean;
+    fromDraft?: Date;
+    toDraft?: Date;
+    fromStr: string;
+    toStr: string;
+    setFromDraft: (date?: Date) => void;
+    setToDraft: (date?: Date) => void;
+    setFromStr: (string: string) => void;
+    setToStr: (string: string) => void;
+    timezoneString?: string;
+    gmtOffset?: number;
+    onChange: (next: {
+        start: Date;
+        end: Date;
+    }) => void;
+    onClose?: () => void;
+    compositeActiveId: string | null;
+    setCompositeActiveId: (id: string | null) => void;
+    today: Date;
+    todayStr: string;
+    mobileLabelId: string;
+    desktopLabelId: string;
+    disableFuture?: boolean;
+    disabledBefore?: Date;
+    defaultFallbackPreset?: PresetId;
+    hiddenPresets?: PresetId[];
+    inputsProps?: {
+        onStartFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+        onEndFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+        onStartBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+        onEndBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    };
+};
+export declare function DateRangeContent(props: DateRangeContentProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=date-range-content.d.ts.map

package/dist/types/date-range-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-range-content.d.ts","sourceRoot":"","sources":["../../src/date-range-content.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAyC,QAAQ,EAAc,MAAM,SAAS,CAAC;AAEtF,KAAK,qBAAqB,GAAG;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,CAAE,IAAI,CAAC,EAAE,IAAI,KAAM,IAAI,CAAC;IACtC,UAAU,EAAE,CAAE,IAAI,CAAC,EAAE,IAAI,KAAM,IAAI,CAAC;IACpC,UAAU,EAAE,CAAE,MAAM,EAAE,MAAM,KAAM,IAAI,CAAC;IACvC,QAAQ,EAAE,CAAE,MAAM,EAAE,MAAM,KAAM,IAAI,CAAC;IACrC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,CAAE,IAAI,EAAE;QAAE,KAAK,EAAE,IAAI,CAAC;QAAC,GAAG,EAAE,IAAI,CAAA;KAAE,KAAM,IAAI,CAAC;IACvD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,oBAAoB,EAAE,CAAE,EAAE,EAAE,MAAM,GAAG,IAAI,KAAM,IAAI,CAAC;IACpD,KAAK,EAAE,IAAI,CAAC;IACZ,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,IAAI,CAAC;IACtB,qBAAqB,CAAC,EAAE,QAAQ,CAAC;IACjC,aAAa,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE;QACb,YAAY,CAAC,EAAE,CAAE,CAAC,EAAE,KAAK,CAAC,UAAU,CAAE,gBAAgB,CAAE,KAAM,IAAI,CAAC;QACnE,UAAU,CAAC,EAAE,CAAE,CAAC,EAAE,KAAK,CAAC,UAAU,CAAE,gBAAgB,CAAE,KAAM,IAAI,CAAC;QACjE,WAAW,CAAC,EAAE,CAAE,CAAC,EAAE,KAAK,CAAC,UAAU,CAAE,gBAAgB,CAAE,KAAM,IAAI,CAAC;QAClE,SAAS,CAAC,EAAE,CAAE,CAAC,EAAE,KAAK,CAAC,UAAU,CAAE,gBAAgB,CAAE,KAAM,IAAI,CAAC;KAChE,CAAC;CACF,CAAC;AAEF,wBAAgB,gBAAgB,CAAE,KAAK,EAAE,qBAAqB,2CAyU7D"}

package/dist/types/date-range-picker.d.ts

@@ -0,0 +1,25 @@
+import type { PresetId } from './utils';
+import './style.scss';
+export type DateRangePickerProps = {
+    start: Date;
+    end: Date;
+    onChange: (next: {
+        start: Date;
+        end: Date;
+    }) => void;
+    timezoneString?: string;
+    gmtOffset?: number;
+    locale: string;
+    disableFuture?: boolean;
+    disabledBefore?: Date;
+    defaultFallbackPreset?: PresetId;
+    hiddenPresets?: PresetId[];
+    inputsProps?: {
+        onStartFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+        onEndFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+        onStartBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+        onEndBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    };
+};
+export declare function DateRangePicker({ start, end, onChange, gmtOffset, timezoneString, locale, disableFuture, disabledBefore, defaultFallbackPreset, hiddenPresets, inputsProps, }: DateRangePickerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=date-range-picker.d.ts.map

package/dist/types/date-range-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-range-picker.d.ts","sourceRoot":"","sources":["../../src/date-range-picker.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,cAAc,CAAC;AAEtB,MAAM,MAAM,oBAAoB,GAAG;IAClC,KAAK,EAAE,IAAI,CAAC;IACZ,GAAG,EAAE,IAAI,CAAC;IACV,QAAQ,EAAE,CAAE,IAAI,EAAE;QAAE,KAAK,EAAE,IAAI,CAAC;QAAC,GAAG,EAAE,IAAI,CAAA;KAAE,KAAM,IAAI,CAAC;IACvD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,IAAI,CAAC;IACtB,qBAAqB,CAAC,EAAE,QAAQ,CAAC;IACjC,aAAa,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE;QACb,YAAY,CAAC,EAAE,CAAE,CAAC,EAAE,KAAK,CAAC,UAAU,CAAE,gBAAgB,CAAE,KAAM,IAAI,CAAC;QACnE,UAAU,CAAC,EAAE,CAAE,CAAC,EAAE,KAAK,CAAC,UAAU,CAAE,gBAAgB,CAAE,KAAM,IAAI,CAAC;QACjE,WAAW,CAAC,EAAE,CAAE,CAAC,EAAE,KAAK,CAAC,UAAU,CAAE,gBAAgB,CAAE,KAAM,IAAI,CAAC;QAClE,SAAS,CAAC,EAAE,CAAE,CAAC,EAAE,KAAK,CAAC,UAAU,CAAE,gBAAgB,CAAE,KAAM,IAAI,CAAC;KAChE,CAAC;CACF,CAAC;AAEF,wBAAgB,eAAe,CAAE,EAChC,KAAK,EACL,GAAG,EACH,QAAQ,EACR,SAAS,EACT,cAAc,EACd,MAAM,EACN,aAAoB,EACpB,cAAc,EACd,qBAAqC,EACrC,aAAa,EACb,WAAW,GACX,EAAE,oBAAoB,2CAoEtB"}

package/dist/types/datetime.d.ts

@@ -0,0 +1,15 @@
+export declare function formatDate(date: Date, locale: string, formatOptions?: Intl.DateTimeFormatOptions): string;
+/**
+ * Parse a date string in the format "YYYY-MM-DD" (local time).
+ */
+export declare function parseYmdLocal(value: string): Date | null;
+/**
+ * Format a date as a site calendar day (YYYY-MM-DD).
+ */
+export declare function formatYmd(date: Date, timezoneString?: string, gmtOffset?: number): string;
+/**
+ * Format a Date that already represents a site calendar day.
+ * This avoids reapplying timezone math to dates coming from the picker or URL.
+ */
+export declare function formatSiteYmd(date: Date): string;
+//# sourceMappingURL=datetime.d.ts.map

package/dist/types/datetime.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"datetime.d.ts","sourceRoot":"","sources":["../../src/datetime.ts"],"names":[],"mappings":"AAKA,wBAAgB,UAAU,CACzB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,aAAa,GAAE,IAAI,CAAC,qBAA+C,UAMnE;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAE,KAAK,EAAE,MAAM,GAAI,IAAI,GAAG,IAAI,CAU1D;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAE,IAAI,EAAE,IAAI,EAAE,cAAc,CAAC,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,UAYjF;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAE,IAAI,EAAE,IAAI,UAKxC"}

package/dist/types/index.d.ts

@@ -0,0 +1,6 @@
+export { DateRangePicker } from './date-range-picker';
+export type { DateRangePickerProps } from './date-range-picker';
+export { computePresetRange, formatLabel, getActivePresetId, isLast7Days, presetDefs, } from './utils';
+export type { PresetId } from './utils';
+export { formatYmd, formatSiteYmd, parseYmdLocal } from './datetime';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,YAAY,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,EACN,kBAAkB,EAClB,WAAW,EACX,iBAAiB,EACjB,WAAW,EACX,UAAU,GACV,MAAM,SAAS,CAAC;AACjB,YAAY,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}

package/dist/types/presets-listbox.d.ts

@@ -0,0 +1,12 @@
+import type { PresetId } from './utils';
+type PresetsListboxProps = {
+    labelId: string;
+    activePresetId?: PresetId;
+    onSelect: (id: PresetId) => void;
+    compositeActiveId: string | null;
+    setCompositeActiveId: (id: string | null) => void;
+    hiddenPresets?: PresetId[];
+};
+export declare function PresetsListbox({ labelId, activePresetId, onSelect, compositeActiveId, setCompositeActiveId, hiddenPresets, }: PresetsListboxProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=presets-listbox.d.ts.map

package/dist/types/presets-listbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"presets-listbox.d.ts","sourceRoot":"","sources":["../../src/presets-listbox.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAExC,KAAK,mBAAmB,GAAG;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1B,QAAQ,EAAE,CAAE,EAAE,EAAE,QAAQ,KAAM,IAAI,CAAC;IACnC,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,oBAAoB,EAAE,CAAE,EAAE,EAAE,MAAM,GAAG,IAAI,KAAM,IAAI,CAAC;IACpD,aAAa,CAAC,EAAE,QAAQ,EAAE,CAAC;CAC3B,CAAC;AAEF,wBAAgB,cAAc,CAAE,EAC/B,OAAO,EACP,cAAc,EACd,QAAQ,EACR,iBAAiB,EACjB,oBAAoB,EACpB,aAAa,GACb,EAAE,mBAAmB,2CAsCrB"}

package/dist/types/utils.d.ts

@@ -0,0 +1,40 @@
+export type PresetId = 'today' | 'yesterday' | 'last-7-days' | 'last-30-days' | 'last-90-days' | 'month-to-date' | 'last-12-months' | 'year-to-date' | 'last-3-years' | 'custom';
+export declare const presetDefs: readonly [{
+    readonly id: "today";
+    readonly label: string;
+}, {
+    readonly id: "yesterday";
+    readonly label: string;
+}, {
+    readonly id: "last-7-days";
+    readonly label: string;
+}, {
+    readonly id: "last-30-days";
+    readonly label: string;
+}, {
+    readonly id: "last-90-days";
+    readonly label: string;
+}, {
+    readonly id: "month-to-date";
+    readonly label: string;
+}, {
+    readonly id: "last-12-months";
+    readonly label: string;
+}, {
+    readonly id: "year-to-date";
+    readonly label: string;
+}, {
+    readonly id: "last-3-years";
+    readonly label: string;
+}];
+export declare function computePresetRange(preset: PresetId, baseDate: Date): {
+    from: Date;
+    to: Date;
+} | undefined;
+export declare function getActivePresetId(from?: Date, to?: Date, baseDate?: Date): PresetId | undefined;
+export declare function formatLabel(start: Date, end: Date, locale: string): string;
+export declare function isLast7Days(range: {
+    start: Date;
+    end: Date;
+}, timezoneString?: string, gmtOffset?: number): boolean;
+//# sourceMappingURL=utils.d.ts.map

package/dist/types/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAkCA,MAAM,MAAM,QAAQ,GACjB,OAAO,GACP,WAAW,GACX,aAAa,GACb,cAAc,GACd,cAAc,GACd,eAAe,GACf,gBAAgB,GAChB,cAAc,GACd,cAAc,GACd,QAAQ,CAAC;AAEZ,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;EAUmE,CAAC;AAE3F,wBAAgB,kBAAkB,CAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI;;;cA0BnE;AAED,wBAAgB,iBAAiB,CAAE,IAAI,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAE,IAAI,GAAI,QAAQ,GAAG,SAAS,CAiEjG;AAGD,wBAAgB,WAAW,CAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,UAOlE;AAGD,wBAAgB,WAAW,CAC1B,KAAK,EAAE;IAAE,KAAK,EAAE,IAAI,CAAC;IAAC,GAAG,EAAE,IAAI,CAAA;CAAE,EACjC,cAAc,CAAC,EAAE,MAAM,EACvB,SAAS,CAAC,EAAE,MAAM,GAChB,OAAO,CAKT"}

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@automattic/date-range-picker",
+  "version": "1.0.0",
+  "description": "A date-range picker built on top of @automattic/ui's DateRangeCalendar, with timezone-aware site-day handling, preset shortcuts, and accessible inputs.",
+  "homepage": "https://github.com/Automattic/wp-calypso",
+  "license": "GPL-2.0-or-later",
+  "author": "Automattic Inc.",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "calypso:src": "src/index.ts",
+  "exports": {
+    ".": {
+      "calypso:src": "./src/index.ts",
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./src/*": {
+      "calypso:src": "./src/*"
+    }
+  },
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Automattic/wp-calypso.git",
+    "directory": "packages/date-range-picker"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bugs": "https://github.com/Automattic/wp-calypso/issues",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "types": "dist/types",
+  "scripts": {
+    "clean": "tsc --build ./tsconfig.json ./tsconfig-cjs.json --clean && rm -rf dist",
+    "build": "tsc --build ./tsconfig.json ./tsconfig-cjs.json",
+    "prepack": "yarn run clean && yarn run build"
+  },
+  "dependencies": {
+    "@automattic/ui": "^1.0.2",
+    "@wordpress/base-styles": "^5.23.0",
+    "@wordpress/components": "^32.1.0",
+    "@wordpress/compose": "7.23.0",
+    "@wordpress/date": "5.23.0",
+    "@wordpress/i18n": "^5.23.0",
+    "@wordpress/icons": "^10.23.0",
+    "date-fns": "^4.1.0",
+    "tslib": "^2.8.1"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@automattic/calypso-typescript-config": "^1.0.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^18.3.18",
+    "jest": "^29.7.0",
+    "mockdate": "^2.0.5",
+    "typescript": "^5.8.3"
+  }
+}

package/src/button-stack.tsx

@@ -0,0 +1,17 @@
+import { __experimentalHStack as HStack } from '@wordpress/components';
+import type { ComponentProps, ReactNode } from 'react';
+
+type ButtonStackProps = {
+	children: ReactNode;
+};
+
+export function ButtonStack( {
+	children,
+	...hStackProps
+}: ButtonStackProps & Omit< ComponentProps< typeof HStack >, 'spacing' > ) {
+	return (
+		<HStack { ...hStackProps } spacing={ 3 }>
+			{ children }
+		</HStack>
+	);
+}

package/src/date-inputs.tsx

@@ -0,0 +1,142 @@
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalInputControl as InputControl,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import type { FocusEvent } from 'react';
+
+type DateInputsProps = {
+	fromStr: string;
+	toStr: string;
+	onFromChange: ( v: string ) => void;
+	onToChange: ( v: string ) => void;
+	todayStr: string;
+	minStr?: string;
+	fromStyle?: React.CSSProperties;
+	toStyle?: React.CSSProperties;
+	stack?: boolean;
+	justify?:
+		| 'flex-start'
+		| 'flex-end'
+		| 'center'
+		| 'space-between'
+		| 'space-around'
+		| 'space-evenly';
+	containerStyle?: React.CSSProperties;
+	onFromFocus?: ( e: FocusEvent< HTMLInputElement > ) => void;
+	onToFocus?: ( e: FocusEvent< HTMLInputElement > ) => void;
+	onFromBlur?: ( e: FocusEvent< HTMLInputElement > ) => void;
+	onToBlur?: ( e: FocusEvent< HTMLInputElement > ) => void;
+};
+
+export function DateInputs( {
+	fromStr,
+	toStr,
+	onFromChange,
+	onToChange,
+	todayStr,
+	minStr,
+	fromStyle,
+	toStyle,
+	stack = false,
+	justify = 'flex-start',
+	containerStyle,
+	onFromFocus,
+	onToFocus,
+	onFromBlur,
+	onToBlur,
+}: DateInputsProps ) {
+	if ( stack ) {
+		return (
+			<VStack as="div" spacing={ 2 } className="daterange-inputs" style={ containerStyle }>
+				<InputControl
+					type="date"
+					label={ __( 'Start date' ) }
+					value={ fromStr }
+					onFocus={ ( e: FocusEvent< HTMLInputElement > ) => {
+						onFromFocus?.( e );
+					} }
+					onBlur={ ( e: FocusEvent< HTMLInputElement > ) => {
+						onFromBlur?.( e );
+					} }
+					onChange={ ( value?: string ) => {
+						onFromChange( value ?? '' );
+					} }
+					autoComplete="off"
+					min={ minStr }
+					max={ toStr || todayStr }
+					style={ { width: '100%', ...( fromStyle || {} ) } }
+					__next40pxDefaultSize
+				/>
+				<InputControl
+					type="date"
+					label={ __( 'End date' ) }
+					value={ toStr }
+					onFocus={ ( e: FocusEvent< HTMLInputElement > ) => {
+						onToFocus?.( e );
+					} }
+					onBlur={ ( e: FocusEvent< HTMLInputElement > ) => {
+						onToBlur?.( e );
+					} }
+					onChange={ ( value?: string ) => {
+						onToChange( value ?? '' );
+					} }
+					autoComplete="off"
+					min={ fromStr || minStr }
+					style={ { width: '100%', ...( toStyle || {} ) } }
+					__next40pxDefaultSize
+				/>
+			</VStack>
+		);
+	}
+
+	return (
+		<HStack
+			as="div"
+			spacing={ 8 }
+			justify={ justify }
+			className="daterange-inputs"
+			wrap={ false }
+			style={ containerStyle }
+		>
+			<InputControl
+				type="date"
+				label={ __( 'Start date' ) }
+				value={ fromStr }
+				onFocus={ ( e: FocusEvent< HTMLInputElement > ) => {
+					onFromFocus?.( e );
+				} }
+				onBlur={ ( e: FocusEvent< HTMLInputElement > ) => {
+					onFromBlur?.( e );
+				} }
+				onChange={ ( value?: string ) => {
+					onFromChange( value ?? '' );
+				} }
+				autoComplete="off"
+				min={ minStr }
+				max={ toStr || todayStr }
+				style={ fromStyle }
+				__next40pxDefaultSize
+			/>
+			<InputControl
+				type="date"
+				label={ __( 'End date' ) }
+				value={ toStr }
+				onFocus={ ( e: FocusEvent< HTMLInputElement > ) => {
+					onToFocus?.( e );
+				} }
+				onBlur={ ( e: FocusEvent< HTMLInputElement > ) => {
+					onToBlur?.( e );
+				} }
+				onChange={ ( value?: string ) => {
+					onToChange( value ?? '' );
+				} }
+				autoComplete="off"
+				min={ fromStr || minStr }
+				style={ toStyle }
+				__next40pxDefaultSize
+			/>
+		</HStack>
+	);
+}