(null);
+ const [search, setSearch] = useState("");
+ const customTimezone = search.trim();
+ const canUseCustomTimezone =
+ customTimezone !== "" &&
+ !options.some((option) => option.value === customTimezone) &&
+ isValidTimezone(customTimezone);
+
+ return (
+
+
+ items={options}
+ value={selectedOption}
+ disabled={disabled}
+ onValueChange={(option) => {
+ if (option) {
+ onValueChange(option.value);
+ setSearch("");
+ }
+ }}
+ inputValue={search}
+ onInputValueChange={(next) => setSearch(next ?? "")}
+ >
+
+
+ {selectedOption?.label ?? value}
+
+
+
+ }
+ />
+
+
+
+ {canUseCustomTimezone ? (
+
+ ) : (
+ "No timezones found."
+ )}
+
+
+ {(option: TimezoneOption) => (
+
+ {option.label}
+
+ )}
+
+
+
+
+ );
+}
diff --git a/packages/ui/src/primitives/TimezoneTimestamp.stories.tsx b/packages/ui/src/primitives/TimezoneTimestamp.stories.tsx
new file mode 100644
index 0000000000..a662b638a9
--- /dev/null
+++ b/packages/ui/src/primitives/TimezoneTimestamp.stories.tsx
@@ -0,0 +1,17 @@
+import { TimezoneTimestamp } from "@posthog/ui/primitives/TimezoneTimestamp";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+const meta: Meta = {
+ title: "Components/UI/TimezoneTimestamp",
+ component: TimezoneTimestamp,
+ parameters: { layout: "centered" },
+ args: {
+ timestamp: new Date("2026-07-23T01:00:00.000Z"),
+ timezone: "America/Toronto",
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/packages/ui/src/primitives/TimezoneTimestamp.tsx b/packages/ui/src/primitives/TimezoneTimestamp.tsx
new file mode 100644
index 0000000000..3b50713027
--- /dev/null
+++ b/packages/ui/src/primitives/TimezoneTimestamp.tsx
@@ -0,0 +1,34 @@
+import { TimezoneConversionTooltip } from "./TimezoneConversionTooltip";
+import { formatScheduleTimestamp } from "./timezone";
+
+interface TimezoneTimestampProps {
+ timestamp: string | number | Date;
+ timezone: string;
+ label?: string;
+ className?: string;
+}
+
+export function TimezoneTimestamp({
+ timestamp,
+ timezone,
+ label,
+ className,
+}: TimezoneTimestampProps) {
+ const date = timestamp instanceof Date ? timestamp : new Date(timestamp);
+ if (Number.isNaN(date.getTime())) return null;
+
+ let displayLabel = label;
+ if (!displayLabel) {
+ displayLabel = formatScheduleTimestamp(date, timezone);
+ }
+
+ return (
+
+
+ {displayLabel}
+
+
+ );
+}
diff --git a/packages/ui/src/primitives/nextRecurringRun.ts b/packages/ui/src/primitives/nextRecurringRun.ts
new file mode 100644
index 0000000000..a9277c6a90
--- /dev/null
+++ b/packages/ui/src/primitives/nextRecurringRun.ts
@@ -0,0 +1,70 @@
+export type RecurringScheduleFrequency =
+ | "hourly"
+ | "daily"
+ | "weekdays"
+ | "weekly";
+
+export interface RecurringSchedule {
+ frequency: RecurringScheduleFrequency;
+ time: string;
+ weekday: string;
+}
+
+export function nextRecurringRun(
+ schedule: RecurringSchedule,
+ timezone: string,
+ now = new Date(),
+): Date | null {
+ let formatter: Intl.DateTimeFormat;
+ try {
+ formatter = new Intl.DateTimeFormat("en-US", {
+ timeZone: timezone,
+ hourCycle: "h23",
+ hour: "2-digit",
+ minute: "2-digit",
+ weekday: "short",
+ });
+ } catch {
+ return null;
+ }
+
+ const weekdayNumbers: Record = {
+ Sun: "0",
+ Mon: "1",
+ Tue: "2",
+ Wed: "3",
+ Thu: "4",
+ Fri: "5",
+ Sat: "6",
+ };
+ const [targetHour, targetMinute] = schedule.time.split(":").map(Number);
+ let candidateMs = Math.floor(now.getTime() / 60_000) * 60_000 + 60_000;
+
+ for (let iteration = 0; iteration < 8 * 24 + 2; iteration += 1) {
+ const parts = Object.fromEntries(
+ formatter
+ .formatToParts(new Date(candidateMs))
+ .filter(({ type }) => type !== "literal")
+ .map(({ type, value }) => [type, value]),
+ );
+ const minuteAdjustment = (targetMinute - Number(parts.minute) + 60) % 60;
+ if (minuteAdjustment > 0) {
+ candidateMs += minuteAdjustment * 60_000;
+ continue;
+ }
+
+ const weekday = weekdayNumbers[parts.weekday];
+ const matchesHour =
+ schedule.frequency === "hourly" || Number(parts.hour) === targetHour;
+ const matchesWeekday =
+ schedule.frequency !== "weekdays" || (weekday !== "0" && weekday !== "6");
+ const matchesWeekly =
+ schedule.frequency !== "weekly" || weekday === schedule.weekday;
+ if (matchesHour && matchesWeekday && matchesWeekly) {
+ return new Date(candidateMs);
+ }
+ candidateMs += 60 * 60_000;
+ }
+
+ return null;
+}
diff --git a/packages/ui/src/primitives/timezone.test.ts b/packages/ui/src/primitives/timezone.test.ts
new file mode 100644
index 0000000000..f4d6cfe91a
--- /dev/null
+++ b/packages/ui/src/primitives/timezone.test.ts
@@ -0,0 +1,73 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+ formatTimestampInTimezone,
+ formatTimezoneAbbreviation,
+ formatTimezoneLabel,
+ isValidTimezone,
+ systemTimezone,
+ timezoneOptions,
+} from "./timezone";
+
+afterEach(() => vi.restoreAllMocks());
+
+describe("systemTimezone", () => {
+ it("returns the runtime IANA timezone", () => {
+ vi.spyOn(Intl, "DateTimeFormat").mockReturnValue({
+ resolvedOptions: () => ({ timeZone: "America/New_York" }),
+ } as Intl.DateTimeFormat);
+
+ expect(systemTimezone()).toBe("America/New_York");
+ });
+
+ it("falls back to UTC when timezone detection fails", () => {
+ vi.spyOn(Intl, "DateTimeFormat").mockImplementation(() => {
+ throw new Error("unavailable");
+ });
+
+ expect(systemTimezone()).toBe("UTC");
+ });
+});
+
+describe("timezone options", () => {
+ it("formats a timestamp in the requested timezone", () => {
+ const formatted = formatTimestampInTimezone(
+ new Date("2026-07-22T16:00:00.000Z"),
+ "America/Toronto",
+ );
+
+ expect(formatted).toContain("12:00 PM");
+ });
+
+ it("formats IANA names with their current UTC offset", () => {
+ expect(formatTimezoneLabel("America/Toronto")).toMatch(
+ /^America \/ Toronto \(UTC-0[45]:00\)$/,
+ );
+ });
+
+ it.each([
+ ["2026-07-22T12:00:00.000Z", "EDT"],
+ ["2026-01-22T12:00:00.000Z", "EST"],
+ ])("formats Toronto's abbreviation on %s", (date, expected) => {
+ expect(formatTimezoneAbbreviation("America/Toronto", new Date(date))).toBe(
+ expected,
+ );
+ });
+
+ it("includes the detected timezone and UTC", () => {
+ vi.spyOn(Intl, "DateTimeFormat").mockReturnValueOnce({
+ resolvedOptions: () => ({ timeZone: "America/New_York" }),
+ } as Intl.DateTimeFormat);
+
+ expect(timezoneOptions().map(({ value }) => value)).toEqual(
+ expect.arrayContaining(["America/New_York", "UTC"]),
+ );
+ });
+
+ it.each([
+ ["Europe/London", true],
+ ["America/Toronto", true],
+ ["Not/A_Timezone", false],
+ ])("validates %s", (timezone, expected) => {
+ expect(isValidTimezone(timezone)).toBe(expected);
+ });
+});
diff --git a/packages/ui/src/primitives/timezone.ts b/packages/ui/src/primitives/timezone.ts
new file mode 100644
index 0000000000..dcbd1f2fae
--- /dev/null
+++ b/packages/ui/src/primitives/timezone.ts
@@ -0,0 +1,124 @@
+export interface TimezoneOption {
+ value: string;
+ label: string;
+}
+
+let cachedTimezoneOptions: TimezoneOption[] | null = null;
+let timezoneOptionsExpireAt = 0;
+const scheduleTimestampFormatters = new Map();
+
+export function systemTimezone(): string {
+ try {
+ return Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
+ } catch {
+ return "UTC";
+ }
+}
+
+export function formatTimezoneLabel(timezone: string): string {
+ const name = timezone.replaceAll("_", " ").replaceAll("/", " / ");
+
+ try {
+ const offset = new Intl.DateTimeFormat("en-US", {
+ timeZone: timezone,
+ timeZoneName: "longOffset",
+ })
+ .formatToParts()
+ .find((part) => part.type === "timeZoneName")
+ ?.value.replace("GMT", "UTC");
+ return offset ? `${name} (${offset})` : name;
+ } catch {
+ return name;
+ }
+}
+
+export function formatTimezoneAbbreviation(
+ timezone: string,
+ date = new Date(),
+): string {
+ try {
+ return (
+ new Intl.DateTimeFormat("en-US", {
+ timeZone: timezone,
+ timeZoneName: "short",
+ })
+ .formatToParts(date)
+ .find((part) => part.type === "timeZoneName")?.value ?? timezone
+ );
+ } catch {
+ return timezone;
+ }
+}
+
+export function formatTimestampInTimezone(
+ date: Date,
+ timezone: string,
+): string {
+ try {
+ return new Intl.DateTimeFormat(undefined, {
+ timeZone: timezone,
+ weekday: "short",
+ month: "short",
+ day: "numeric",
+ year: "numeric",
+ hour: "numeric",
+ minute: "2-digit",
+ }).format(date);
+ } catch {
+ return date.toLocaleString();
+ }
+}
+
+export function formatScheduleTimestamp(date: Date, timezone: string): string {
+ try {
+ let formatter = scheduleTimestampFormatters.get(timezone);
+ if (!formatter) {
+ formatter = new Intl.DateTimeFormat(undefined, {
+ timeZone: timezone,
+ weekday: "short",
+ month: "short",
+ day: "numeric",
+ hour: "numeric",
+ minute: "2-digit",
+ timeZoneName: "short",
+ });
+ scheduleTimestampFormatters.set(timezone, formatter);
+ }
+ return formatter.format(date);
+ } catch {
+ return date.toLocaleString();
+ }
+}
+
+export function isValidTimezone(timezone: string): boolean {
+ try {
+ new Intl.DateTimeFormat("en-US", { timeZone: timezone }).format();
+ return true;
+ } catch {
+ return false;
+ }
+}
+
+export function timezoneOptions(): TimezoneOption[] {
+ if (cachedTimezoneOptions && Date.now() < timezoneOptionsExpireAt) {
+ return cachedTimezoneOptions;
+ }
+
+ const localTimezone = systemTimezone();
+ let timezones: string[];
+
+ try {
+ timezones = Intl.supportedValuesOf("timeZone");
+ } catch {
+ timezones = [];
+ }
+
+ cachedTimezoneOptions = [...new Set([localTimezone, "UTC", ...timezones])]
+ .sort((left, right) => left.localeCompare(right))
+ .map((timezone) => ({
+ value: timezone,
+ label: formatTimezoneLabel(timezone),
+ }));
+ timezoneOptionsExpireAt = Date.now() + 60 * 60 * 1000;
+ return cachedTimezoneOptions;
+}