cupertino-datetime-picker 0.1.0

package/src/calendar-panel.tsx

@@ -0,0 +1,321 @@
+import * as React from "react";
+
+import {
+  addDays,
+  addMonths,
+  isDayDisabled,
+  isSameDay,
+  monthDiff,
+  monthGrid,
+  shiftMonth,
+  startOfDay,
+  weekStartFor,
+  withDay,
+  yearMonthOf,
+  type YearMonth,
+} from "./calendar";
+import { formatFullDate, formatMonthYear, monthNames, weekdayNames } from "./time";
+import { cn } from "./utils";
+import { Wheel, WheelHighlight } from "./wheel";
+
+export type CalendarPanelLabels = {
+  previousMonth: string;
+  nextMonth: string;
+  month: string;
+  year: string;
+};
+
+export const CALENDAR_LABELS: CalendarPanelLabels = {
+  previousMonth: "Previous month",
+  nextMonth: "Next month",
+  month: "Month",
+  year: "Year",
+};
+
+export type CalendarPanelProps = {
+  value: Date | null;
+  onChange: (date: Date) => void;
+  locale?: string;
+  min?: Date;
+  max?: Date;
+  /** Accessible names; visible text comes from `Intl`. */
+  labels?: Partial<CalendarPanelLabels>;
+  /** Injected for tests and stories. */
+  today?: Date;
+  className?: string;
+};
+
+const YEAR_SPAN = 100;
+const SWIPE_PX = 40;
+
+function Chevron({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 20 20" className={cn("size-5", className)} aria-hidden fill="none">
+      <path
+        d="M7.5 4.5 13 10l-5.5 5.5"
+        stroke="currentColor"
+        strokeWidth="2.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+/**
+ * The iOS inline calendar: month title that opens month/year wheels, next
+ * and previous month, a grid of circles. Months slide, the wheels cross-fade
+ * in over the grid, a horizontal swipe changes month, and the keyboard walks
+ * the grid (arrows, Home/End, PageUp/PageDown, Enter).
+ */
+export function CalendarPanel({
+  value,
+  onChange,
+  locale = navigator.language,
+  min,
+  max,
+  labels: labelsProp,
+  today: todayProp,
+  className,
+}: CalendarPanelProps) {
+  const labels = { ...CALENDAR_LABELS, ...labelsProp };
+  const today = todayProp ?? startOfDay(new Date());
+  const weekStart = weekStartFor(locale);
+  const [view, setView] = React.useState<YearMonth>(() => yearMonthOf(value ?? today));
+  const [dir, setDir] = React.useState<-1 | 0 | 1>(0);
+  const [picking, setPicking] = React.useState(false);
+  const [focusDate, setFocusDate] = React.useState<Date>(value ?? today);
+  const wantFocus = React.useRef(false);
+  const grid = React.useRef<HTMLDivElement>(null);
+  const swipe = React.useRef<{ x: number; y: number } | null>(null);
+
+  // A value set from outside moves the view to its month.
+  const [seen, setSeen] = React.useState(value);
+  if (value !== seen) {
+    setSeen(value);
+    if (value && monthDiff(view, yearMonthOf(value)) !== 0) {
+      setDir(0);
+      setView(yearMonthOf(value));
+      setFocusDate(value);
+    }
+  }
+
+  const show = (next: YearMonth, direction: -1 | 0 | 1) => {
+    setDir(direction);
+    setView(next);
+  };
+  const shift = (by: number) => show(shiftMonth(view, by), by > 0 ? 1 : -1);
+
+  const canShift = (by: number) => {
+    const target = shiftMonth(view, by);
+    if (by < 0 && min && monthDiff(yearMonthOf(min), target) < 0) return false;
+    if (by > 0 && max && monthDiff(target, yearMonthOf(max)) < 0) return false;
+    return true;
+  };
+
+  const pick = (date: Date) => {
+    setFocusDate(date);
+    onChange(withDay(value ?? today, date.getFullYear(), date.getMonth(), date.getDate()));
+  };
+
+  const moveFocus = (next: Date) => {
+    if (isDayDisabled(next, min, max)) return;
+    wantFocus.current = true;
+    setFocusDate(next);
+    const diff = monthDiff(view, yearMonthOf(next));
+    if (diff !== 0) show(yearMonthOf(next), diff > 0 ? 1 : -1);
+  };
+
+  React.useEffect(() => {
+    if (!wantFocus.current) return;
+    wantFocus.current = false;
+    grid.current
+      ?.querySelector<HTMLButtonElement>(`[data-date="${startOfDay(focusDate).getTime()}"]`)
+      ?.focus();
+  }, [focusDate]);
+
+  const onGridKeyDown = (e: React.KeyboardEvent) => {
+    const f = focusDate;
+    const jump = new Map<string, () => Date>([
+      ["ArrowLeft", () => addDays(f, -1)],
+      ["ArrowRight", () => addDays(f, 1)],
+      ["ArrowUp", () => addDays(f, -7)],
+      ["ArrowDown", () => addDays(f, 7)],
+      ["Home", () => addDays(f, -((f.getDay() - weekStart + 7) % 7))],
+      ["End", () => addDays(f, 6 - ((f.getDay() - weekStart + 7) % 7))],
+      ["PageUp", () => addMonths(f, e.shiftKey ? -12 : -1)],
+      ["PageDown", () => addMonths(f, e.shiftKey ? 12 : 1)],
+    ]);
+    const to = jump.get(e.key);
+    if (!to) return;
+    e.preventDefault();
+    moveFocus(to());
+  };
+
+  const onPointerDown = (e: React.PointerEvent) => {
+    if (e.pointerType === "mouse") return;
+    swipe.current = { x: e.clientX, y: e.clientY };
+  };
+  const onPointerUp = (e: React.PointerEvent) => {
+    const s = swipe.current;
+    swipe.current = null;
+    if (!s) return;
+    const dx = e.clientX - s.x;
+    if (Math.abs(dx) < SWIPE_PX || Math.abs(dx) < Math.abs(e.clientY - s.y)) return;
+    const by = dx < 0 ? 1 : -1;
+    if (canShift(by)) shift(by);
+  };
+
+  const rows = monthGrid(view.year, view.month, weekStart);
+  const viewDate = new Date(view.year, view.month, 1);
+  const months = monthNames(locale).map((label, month) => ({ value: month, label }));
+  const years = Array.from({ length: YEAR_SPAN * 2 + 1 }, (_, i) => {
+    const year = today.getFullYear() - YEAR_SPAN + i;
+    return { value: year, label: String(year) };
+  });
+
+  return (
+    <div className={cn("cdp flex w-[312px] flex-col select-none", className)} data-slot="calendar">
+      <div className="flex h-11 items-center justify-between pr-1 pl-2.5">
+        <button
+          type="button"
+          aria-expanded={picking}
+          onClick={() => setPicking((p) => !p)}
+          className="flex h-9 items-center gap-1 rounded-lg px-1.5 text-[17px] font-semibold tracking-[-0.01em] text-[var(--cdp-label)] transition-opacity outline-none active:opacity-50 focus-visible:ring-2 focus-visible:ring-[var(--cdp-tint)]"
+        >
+          <span>{formatMonthYear(viewDate, locale)}</span>
+          <Chevron
+            className={cn(
+              "size-4 text-[var(--cdp-tint)] transition-transform duration-200",
+              picking && "rotate-90",
+            )}
+          />
+        </button>
+        <div
+          className={cn(
+            "flex items-center transition-opacity duration-150",
+            picking && "pointer-events-none opacity-0",
+          )}
+        >
+          <button
+            type="button"
+            aria-label={labels.previousMonth}
+            disabled={!canShift(-1)}
+            onClick={() => shift(-1)}
+            className="flex size-11 items-center justify-center rounded-full text-[var(--cdp-tint)] transition-opacity outline-none active:opacity-40 disabled:opacity-30 focus-visible:ring-2 focus-visible:ring-[var(--cdp-tint)]"
+          >
+            <Chevron className="rotate-180" />
+          </button>
+          <button
+            type="button"
+            aria-label={labels.nextMonth}
+            disabled={!canShift(1)}
+            onClick={() => shift(1)}
+            className="flex size-11 items-center justify-center rounded-full text-[var(--cdp-tint)] transition-opacity outline-none active:opacity-40 disabled:opacity-30 focus-visible:ring-2 focus-visible:ring-[var(--cdp-tint)]"
+          >
+            <Chevron />
+          </button>
+        </div>
+      </div>
+
+      <div className="relative grid px-1.5 pb-1.5">
+        {/* Day grid and the month/year wheels share the cell; one fades out as the other fades in. */}
+        <div
+          className={cn(
+            "col-start-1 row-start-1 transition-[opacity,transform] duration-200",
+            picking && "pointer-events-none scale-95 opacity-0",
+          )}
+          aria-hidden={picking}
+        >
+          <div className="grid grid-cols-7" aria-hidden>
+            {weekdayNames(locale, weekStart).map((name, i) => (
+              <div
+                key={i}
+                className="flex h-8 items-center justify-center text-[13px] font-semibold text-[var(--cdp-tertiary)]"
+              >
+                {name}
+              </div>
+            ))}
+          </div>
+          <div
+            ref={grid}
+            role="grid"
+            tabIndex={-1}
+            aria-label={formatMonthYear(viewDate, locale)}
+            key={`${view.year}-${view.month}`}
+            data-dir={dir}
+            onKeyDown={onGridKeyDown}
+            onPointerDown={onPointerDown}
+            onPointerUp={onPointerUp}
+            className="grid grid-cols-7 gap-y-0.5 data-[dir=-1]:animate-[cdp-slide-from-left_240ms_cubic-bezier(0.2,0.9,0.3,1)] data-[dir=1]:animate-[cdp-slide-from-right_240ms_cubic-bezier(0.2,0.9,0.3,1)]"
+            style={{ touchAction: "pan-y" }}
+          >
+            {rows.flat().map(({ date, inMonth }, i) => {
+              if (!inMonth) return <div key={i} role="gridcell" aria-hidden />;
+              const selected = isSameDay(date, value);
+              const isToday = isSameDay(date, today);
+              const disabled = isDayDisabled(date, min, max);
+              return (
+                <button
+                  key={i}
+                  type="button"
+                  role="gridcell"
+                  aria-selected={selected}
+                  aria-label={formatFullDate(date, locale)}
+                  aria-current={isToday ? "date" : undefined}
+                  data-date={startOfDay(date).getTime()}
+                  data-today={isToday || undefined}
+                  data-selected={selected || undefined}
+                  tabIndex={isSameDay(date, focusDate) ? 0 : -1}
+                  disabled={disabled}
+                  onClick={() => pick(date)}
+                  onFocus={() => setFocusDate(date)}
+                  className={cn(
+                    "mx-auto flex size-10 items-center justify-center rounded-full text-[20px] leading-none tabular-nums transition-transform duration-150 outline-none active:scale-90 focus-visible:ring-2 focus-visible:ring-[var(--cdp-tint)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--cdp-bg)] disabled:opacity-30",
+                    selected
+                      ? isToday
+                        ? "bg-[var(--cdp-tint)] font-semibold text-[var(--cdp-on-tint)]"
+                        : "bg-[var(--cdp-tint-fill)] font-semibold text-[var(--cdp-tint)]"
+                      : isToday
+                        ? "text-[var(--cdp-tint)] hover:bg-[var(--cdp-fill)]"
+                        : "text-[var(--cdp-label)] hover:bg-[var(--cdp-fill)]",
+                  )}
+                >
+                  {date.getDate()}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+
+        <div
+          className={cn(
+            "cdp-wheel-mask relative col-start-1 row-start-1 flex items-center justify-center gap-2 px-2 transition-[opacity,transform] duration-200",
+            !picking && "pointer-events-none scale-95 opacity-0",
+          )}
+          aria-hidden={!picking}
+          data-slot="month-year"
+        >
+          <WheelHighlight className="inset-x-2" />
+          <Wheel
+            aria-label={labels.month}
+            options={months}
+            value={view.month}
+            loop
+            visibleRows={7}
+            onChange={(month) => show({ year: view.year, month }, 0)}
+            className="w-40"
+          />
+          <Wheel
+            aria-label={labels.year}
+            options={years}
+            value={view.year}
+            visibleRows={7}
+            onChange={(year) => show({ year, month: view.month }, 0)}
+            className="w-24"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/calendar.ts

@@ -0,0 +1,118 @@
+/**
+ * Calendar arithmetic on local `Date`s, with no library. A picker only ever
+ * needs the month grid, day-level comparisons, and "same clock, other day".
+ */
+export type YearMonth = { year: number; month: number };
+
+export function startOfDay(date: Date): Date {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+
+export function isSameDay(a: Date | null | undefined, b: Date | null | undefined): boolean {
+  return (
+    !!a &&
+    !!b &&
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
+  );
+}
+
+export function daysInMonth(year: number, month: number): number {
+  return new Date(year, month + 1, 0).getDate();
+}
+
+export function yearMonthOf(date: Date): YearMonth {
+  return { year: date.getFullYear(), month: date.getMonth() };
+}
+
+/** Months between `a` and `b`; negative when `b` is earlier. */
+export function monthDiff(a: YearMonth, b: YearMonth): number {
+  return (b.year - a.year) * 12 + (b.month - a.month);
+}
+
+export function shiftMonth(ym: YearMonth, by: number): YearMonth {
+  const total = ym.month + by;
+  return { year: ym.year + Math.floor(total / 12), month: ((total % 12) + 12) % 12 };
+}
+
+/** The same clock on another calendar day; the day is clamped into the month. */
+export function withDay(base: Date, year: number, month: number, day: number): Date {
+  const next = new Date(base);
+  next.setFullYear(year, month, Math.min(day, daysInMonth(year, month)));
+  return next;
+}
+
+export function withTime(base: Date, hours: number, minutes: number): Date {
+  const next = new Date(base);
+  next.setHours(hours, minutes, 0, 0);
+  return next;
+}
+
+export function addDays(date: Date, days: number): Date {
+  const next = new Date(date);
+  next.setDate(next.getDate() + days);
+  return next;
+}
+
+export function addMonths(date: Date, months: number): Date {
+  const ym = shiftMonth(yearMonthOf(date), months);
+  return withDay(date, ym.year, ym.month, date.getDate());
+}
+
+/** Whether the whole day lies outside [min, max]. */
+export function isDayDisabled(date: Date, min?: Date, max?: Date): boolean {
+  const day = startOfDay(date).getTime();
+  if (min && day < startOfDay(min).getTime()) return true;
+  if (max && day > startOfDay(max).getTime()) return true;
+  return false;
+}
+
+export type DayCell = { date: Date; inMonth: boolean };
+
+/**
+ * Rows of seven for one month, starting on `weekStart` (0 = Sunday). Only as
+ * many rows as the month needs, like the iOS inline calendar.
+ */
+export function monthGrid(year: number, month: number, weekStart: number): DayCell[][] {
+  const lead = (new Date(year, month, 1).getDay() - weekStart + 7) % 7;
+  const rows = Math.ceil((lead + daysInMonth(year, month)) / 7);
+  return Array.from({ length: rows }, (_row, r) =>
+    Array.from({ length: 7 }, (_cell, c) => {
+      const date = new Date(year, month, r * 7 + c - lead + 1);
+      return { date, inMonth: date.getMonth() === month };
+    }),
+  );
+}
+
+/** First day of the week for a locale, 0 = Sunday … 6 = Saturday. */
+export function weekStartFor(locale: string): number {
+  const firstDay = readFirstDay(locale);
+  if (firstDay !== undefined) return firstDay % 7;
+  return /^(en-(US|CA|AU)|ja|ko|zh-(TW|HK)|he|pt-BR|es-(MX|US))\b/i.test(locale) ? 0 : 1;
+}
+
+/**
+ * `Intl.Locale#getWeekInfo` (or the older `weekInfo` getter) where the engine
+ * has it, read without assuming either exists in the type library.
+ */
+function readFirstDay(locale: string): number | undefined {
+  let l: object;
+  try {
+    l = new Intl.Locale(locale);
+  } catch {
+    return undefined;
+  }
+  const info: unknown =
+    "getWeekInfo" in l && typeof l.getWeekInfo === "function"
+      ? l.getWeekInfo()
+      : "weekInfo" in l
+        ? l.weekInfo
+        : undefined;
+  return typeof info === "object" &&
+    info !== null &&
+    "firstDay" in info &&
+    typeof info.firstDay === "number"
+    ? info.firstDay
+    : undefined;
+}

package/src/date-time-picker.tsx

@@ -0,0 +1,138 @@
+import { Popover } from "@base-ui/react/popover";
+
+import { CalendarPanel } from "./calendar-panel";
+import { useControlled } from "./hooks";
+import { formatClock, formatDay, hourCycleFor, type HourCycle } from "./time";
+import { TimePanel } from "./time-panel";
+import { cn } from "./utils";
+
+export type DateTimePickerProps = {
+  value?: Date | null;
+  defaultValue?: Date | null;
+  onChange?: (date: Date | null) => void;
+  /** Which parts are editable — `UIDatePicker.Mode`. */
+  mode?: "date" | "time" | "dateTime";
+  /** Pills that open popovers (`.compact`), or the panels laid out in place (`.inline`). */
+  display?: "compact" | "inline";
+  locale?: string;
+  hourCycle?: HourCycle;
+  minuteInterval?: number;
+  min?: Date;
+  max?: Date;
+  disabled?: boolean;
+  className?: string;
+  /** Placeholder labels when there is no value. */
+  labels?: { date?: string; time?: string };
+};
+
+/** The compact pill and its popover, for composing your own rows. */
+export const pillClass =
+  "inline-flex h-[34px] items-center rounded-lg bg-[var(--cdp-fill)] px-3 text-[17px] leading-none text-[var(--cdp-label)] transition-[background-color,color] outline-none hover:bg-[var(--cdp-fill-hover)] focus-visible:ring-2 focus-visible:ring-[var(--cdp-tint)] active:opacity-60 disabled:opacity-40 data-popup-open:text-[var(--cdp-tint)]";
+
+export const popupClass =
+  "cdp origin-(--transform-origin) rounded-[13px] bg-[var(--cdp-bg)] shadow-[var(--cdp-shadow)] outline-none data-open:animate-[cdp-pop-in_260ms_cubic-bezier(0.18,0.9,0.32,1.15)] data-closed:animate-[cdp-pop-out_140ms_ease-in]";
+
+/**
+ * The iOS 14+ date picker for the web. Compact display shows the date and
+ * time as pills; each opens a popover — the calendar or the time panel —
+ * anchored to it. Inline display lays the panels out in place.
+ */
+export function DateTimePicker({
+  value: valueProp,
+  defaultValue = null,
+  onChange,
+  mode = "dateTime",
+  display = "compact",
+  locale = navigator.language,
+  hourCycle: hourCycleProp,
+  minuteInterval = 1,
+  min,
+  max,
+  disabled = false,
+  className,
+  labels,
+}: DateTimePickerProps) {
+  const [value, setValue] = useControlled(valueProp, defaultValue, onChange);
+  const hourCycle = hourCycleProp ?? hourCycleFor(locale);
+  const showDate = mode !== "time";
+  const showTime = mode !== "date";
+  // Panels always have something to edit; a picked day or time starts from now.
+  const draft = value ?? new Date();
+
+  const calendar = (
+    <CalendarPanel value={value} onChange={setValue} locale={locale} min={min} max={max} />
+  );
+  const time = (
+    <TimePanel
+      value={draft}
+      onChange={setValue}
+      locale={locale}
+      hourCycle={hourCycle}
+      minuteInterval={minuteInterval}
+    />
+  );
+
+  const timePopover = (
+    <Popover.Root>
+      <Popover.Trigger className={pillClass} disabled={disabled} data-slot="time-trigger">
+        {value ? formatClock(value, locale, hourCycle) : (labels?.time ?? "Time")}
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Positioner sideOffset={8} align="center" className="isolate z-50">
+          <Popover.Popup className={popupClass} data-slot="time-popup">
+            {time}
+          </Popover.Popup>
+        </Popover.Positioner>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+
+  if (display === "inline") {
+    return (
+      <div
+        className={cn(
+          "cdp inline-flex flex-col items-stretch rounded-[13px] bg-[var(--cdp-bg)]",
+          className,
+        )}
+        data-slot="date-time-picker"
+        data-display="inline"
+      >
+        {showDate && calendar}
+        {/* As on iOS: the time sits on a "Time" row under the calendar and opens the wheels. */}
+        {showTime &&
+          (showDate ? (
+            <div className="mx-3 flex h-[52px] items-center justify-between border-t border-[var(--cdp-fill)]">
+              <span className="text-[17px] text-[var(--cdp-label)]">{labels?.time ?? "Time"}</span>
+              {timePopover}
+            </div>
+          ) : (
+            time
+          ))}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn("cdp inline-flex items-center gap-2", className)}
+      data-slot="date-time-picker"
+      data-display="compact"
+    >
+      {showDate && (
+        <Popover.Root>
+          <Popover.Trigger className={pillClass} disabled={disabled} data-slot="date-trigger">
+            {value ? formatDay(value, locale) : (labels?.date ?? "Date")}
+          </Popover.Trigger>
+          <Popover.Portal>
+            <Popover.Positioner sideOffset={8} align="center" className="isolate z-50">
+              <Popover.Popup className={popupClass} data-slot="date-popup">
+                {calendar}
+              </Popover.Popup>
+            </Popover.Positioner>
+          </Popover.Portal>
+        </Popover.Root>
+      )}
+      {showTime && timePopover}
+    </div>
+  );
+}

package/src/hooks.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+
+/** Controlled when `value` is given, otherwise owned here. */
+export function useControlled<T>(
+  value: T | undefined,
+  defaultValue: T,
+  onChange: ((next: T) => void) | undefined,
+): [T, (next: T) => void] {
+  const [inner, setInner] = React.useState(defaultValue);
+  const current = value === undefined ? inner : value;
+  const set = (next: T) => {
+    if (value === undefined) setInner(next);
+    onChange?.(next);
+  };
+  return [current, set];
+}
+
+export function usePrefersReducedMotion(): boolean {
+  return React.useSyncExternalStore(
+    (notify) => {
+      const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+      query.addEventListener("change", notify);
+      return () => query.removeEventListener("change", notify);
+    },
+    () => window.matchMedia("(prefers-reduced-motion: reduce)").matches,
+    () => false,
+  );
+}

package/src/index.ts

@@ -0,0 +1,18 @@
+export {
+  DateTimePicker,
+  pillClass,
+  popupClass,
+  type DateTimePickerProps,
+} from "./date-time-picker";
+export {
+  CalendarPanel,
+  CALENDAR_LABELS,
+  type CalendarPanelLabels,
+  type CalendarPanelProps,
+} from "./calendar-panel";
+export { TimePanel, TIME_LABELS, type TimePanelLabels, type TimePanelProps } from "./time-panel";
+export { Wheel, WheelHighlight, type WheelOption, type WheelProps } from "./wheel";
+export { SegmentedControl, type SegmentedOption } from "./segmented-control";
+export * from "./calendar";
+export * from "./time";
+export { typeDigit, stepValue, type DigitStep } from "./segments";

package/src/segmented-control.tsx

@@ -0,0 +1,72 @@
+import * as React from "react";
+
+import { cn } from "./utils";
+
+export type SegmentedOption<T> = { value: T; label: string };
+
+/**
+ * The iOS segmented control: a translucent track with a white thumb that
+ * slides to the chosen segment. Underneath it is a native radio group, so
+ * arrow keys, focus and form semantics come from the browser.
+ */
+export function SegmentedControl<T extends string | number | boolean>({
+  options,
+  value,
+  onChange,
+  "aria-label": ariaLabel,
+  className,
+}: {
+  options: SegmentedOption<T>[];
+  value: T;
+  onChange: (value: T) => void;
+  "aria-label": string;
+  className?: string;
+}) {
+  const name = React.useId();
+  const index = Math.max(
+    0,
+    options.findIndex((o) => o.value === value),
+  );
+  return (
+    <div
+      role="radiogroup"
+      aria-label={ariaLabel}
+      data-slot="segmented-control"
+      className={cn(
+        "relative inline-grid h-8 auto-cols-fr grid-flow-col rounded-[9px] bg-[var(--cdp-fill)] p-0.5",
+        className,
+      )}
+    >
+      <div
+        aria-hidden
+        className="pointer-events-none absolute inset-y-0.5 left-0.5 rounded-[7px] bg-[var(--cdp-thumb)] shadow-[0_3px_8px_rgba(0,0,0,0.12),0_3px_1px_rgba(0,0,0,0.04)] transition-transform duration-200 ease-[cubic-bezier(0.2,0,0,1)]"
+        style={{
+          width: `calc((100% - 4px) / ${options.length})`,
+          transform: `translateX(${index * 100}%)`,
+        }}
+      />
+      {options.map((option) => {
+        const checked = option.value === value;
+        return (
+          <label
+            key={String(option.value)}
+            className={cn(
+              "relative z-10 flex min-w-12 cursor-pointer items-center justify-center rounded-[7px] px-3 text-[13px] font-semibold transition-colors select-none has-focus-visible:ring-2 has-focus-visible:ring-[var(--cdp-tint)]",
+              checked ? "text-[var(--cdp-label)]" : "text-[var(--cdp-label)]/80 active:opacity-60",
+            )}
+          >
+            <input
+              type="radio"
+              name={name}
+              checked={checked}
+              onChange={() => onChange(option.value)}
+              // Covers the label so the radio itself is the hit target.
+              className="absolute inset-0 cursor-pointer appearance-none opacity-0"
+            />
+            {option.label}
+          </label>
+        );
+      })}
+    </div>
+  );
+}