cupertino-datetime-picker 0.1.0

package/src/segments.ts

@@ -0,0 +1,26 @@
+/**
+ * Typing into a two-digit clock segment. The person types digits; the segment
+ * shows what has been typed, commits as soon as the digits name a value, and
+ * says when it is done so focus can move on (the second digit arrived, or no
+ * further digit could still fit under `max`).
+ */
+export type DigitStep = { buffer: string; value: number | null; done: boolean };
+
+export function typeDigit(buffer: string, digit: string, min: number, max: number): DigitStep {
+  const next = buffer.length >= 2 ? digit : buffer + digit;
+  const n = Number(next);
+  if (n > max) {
+    // The pair cannot be a value: start over with just this digit.
+    const d = Number(digit);
+    return d > max || d < min
+      ? { buffer: "", value: null, done: false }
+      : { buffer: digit, value: d, done: d * 10 > max };
+  }
+  return { buffer: next, value: n >= min ? n : null, done: next.length === 2 || n * 10 > max };
+}
+
+/** Step within [min, max], wrapping at both ends. */
+export function stepValue(value: number, by: number, min: number, max: number): number {
+  const span = max - min + 1;
+  return min + ((((value - min + by) % span) + span) % span);
+}

package/src/styles.css

@@ -0,0 +1,91 @@
+/*
+ * Tokens follow the iOS system palette: tint, the translucent fills, and
+ * the label hierarchy. Override `--cdp-tint` to re-tint; add `.dark` (or
+ * `data-theme="dark"`) on an ancestor for dark mode.
+ */
+:root {
+  --cdp-tint: #007aff;
+  --cdp-tint-fill: color-mix(in srgb, var(--cdp-tint) 14%, transparent);
+  --cdp-on-tint: #fff;
+  --cdp-fill: rgba(120, 120, 128, 0.12);
+  --cdp-fill-hover: rgba(120, 120, 128, 0.2);
+  --cdp-label: #000;
+  --cdp-secondary: rgba(60, 60, 67, 0.6);
+  --cdp-tertiary: rgba(60, 60, 67, 0.3);
+  --cdp-bg: #fff;
+  --cdp-thumb: #fff;
+  --cdp-shadow:
+    0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.06), 0 16px 48px rgba(0, 0, 0, 0.18);
+}
+
+.dark,
+[data-theme="dark"] {
+  --cdp-tint: #0a84ff;
+  --cdp-fill: rgba(120, 120, 128, 0.24);
+  --cdp-fill-hover: rgba(120, 120, 128, 0.32);
+  --cdp-label: #fff;
+  --cdp-secondary: rgba(235, 235, 245, 0.6);
+  --cdp-tertiary: rgba(235, 235, 245, 0.3);
+  --cdp-bg: #1c1c1e;
+  --cdp-thumb: #636366;
+  --cdp-shadow:
+    0 0 0 0.5px rgba(255, 255, 255, 0.12), 0 4px 12px rgba(0, 0, 0, 0.3),
+    0 16px 48px rgba(0, 0, 0, 0.6);
+}
+
+.cdp {
+  font-family:
+    -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", system-ui,
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: transparent;
+  color: var(--cdp-label);
+}
+
+.cdp-wheel::-webkit-scrollbar {
+  display: none;
+}
+
+.cdp-wheel-mask {
+  mask-image: linear-gradient(to bottom, transparent, black 22%, black 78%, transparent);
+}
+
+@keyframes cdp-pop-in {
+  from {
+    opacity: 0;
+    transform: scale(0.86);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes cdp-pop-out {
+  to {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}
+
+@keyframes cdp-slide-from-right {
+  from {
+    opacity: 0;
+    transform: translateX(28px);
+  }
+}
+
+@keyframes cdp-slide-from-left {
+  from {
+    opacity: 0;
+    transform: translateX(-28px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cdp *,
+  .cdp {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/src/time-panel.tsx

@@ -0,0 +1,262 @@
+import * as React from "react";
+
+import { withTime } from "./calendar";
+import { SegmentedControl } from "./segmented-control";
+import { stepValue, typeDigit } from "./segments";
+import { dayPeriodLabels, hourCycleFor, to12, to24, type HourCycle } from "./time";
+import { cn, pad2 } from "./utils";
+import { Wheel, WheelHighlight } from "./wheel";
+
+export type TimePanelLabels = {
+  time: string;
+  hour: string;
+  minute: string;
+  dayPeriod: string;
+};
+
+export const TIME_LABELS: TimePanelLabels = {
+  time: "Time",
+  hour: "Hour",
+  minute: "Minute",
+  dayPeriod: "Day period",
+};
+
+export type TimePanelProps = {
+  value: Date;
+  onChange: (date: Date) => void;
+  locale?: string;
+  hourCycle?: HourCycle;
+  /** Accessible names; visible text comes from `Intl`. */
+  labels?: Partial<TimePanelLabels>;
+  /** Minute wheel granularity, like `UIDatePicker.minuteInterval`. */
+  minuteInterval?: number;
+  /** Hide the wheels and keep only the typed field. */
+  wheels?: boolean;
+  className?: string;
+};
+
+type Segment = "hour" | "minute";
+
+/**
+ * Time entry the way iOS 14+ does it, both halves at once: a field of
+ * segments that takes digits from a keyboard or keypad and steps with the
+ * arrows, and the hour / minute / period wheels underneath. Either side
+ * moves the other — type "930" and the wheels spin there; fling a wheel and
+ * the digits follow.
+ */
+export function TimePanel({
+  value,
+  onChange,
+  locale = navigator.language,
+  hourCycle: hourCycleProp,
+  minuteInterval = 1,
+  wheels = true,
+  labels: labelsProp,
+  className,
+}: TimePanelProps) {
+  const labels = { ...TIME_LABELS, ...labelsProp };
+  const hourCycle = hourCycleProp ?? hourCycleFor(locale);
+  const twelve = hourCycle === "h12";
+  const hours24 = value.getHours();
+  const minutes = value.getMinutes();
+  const { hour: hour12, pm } = to12(hours24);
+  const hourShown = twelve ? hour12 : hours24;
+  const hourMin = twelve ? 1 : 0;
+  const hourMax = twelve ? 12 : 23;
+  const periods = dayPeriodLabels(locale);
+
+  const [typing, setTyping] = React.useState<{ segment: Segment; buffer: string } | null>(null);
+  const hourRef = React.useRef<HTMLInputElement>(null);
+  const minuteRef = React.useRef<HTMLInputElement>(null);
+
+  const setHour = (shown: number) =>
+    onChange(withTime(value, twelve ? to24(shown, pm) : shown, minutes));
+  const setMinute = (m: number) => onChange(withTime(value, hours24, m));
+  const setPm = (next: boolean) => onChange(withTime(value, to24(hour12, next), minutes));
+
+  const focusSegment = (segment: Segment) => {
+    const el = segment === "hour" ? hourRef.current : minuteRef.current;
+    el?.focus();
+    el?.select();
+  };
+
+  const typeInto = (segment: Segment, digit: string) => {
+    const buffer = typing?.segment === segment ? typing.buffer : "";
+    const step =
+      segment === "hour"
+        ? typeDigit(buffer, digit, hourMin, hourMax)
+        : typeDigit(buffer, digit, 0, 59);
+    if (step.value !== null) (segment === "hour" ? setHour : setMinute)(step.value);
+    if (step.done) {
+      setTyping(null);
+      if (segment === "hour") focusSegment("minute");
+    } else {
+      setTyping({ segment, buffer: step.buffer });
+    }
+  };
+
+  const onSegmentKeyDown = (segment: Segment) => (e: React.KeyboardEvent<HTMLInputElement>) => {
+    const key = e.key;
+    if (/^\d$/.test(key)) {
+      e.preventDefault();
+      typeInto(segment, key);
+      return;
+    }
+    const by = key === "ArrowUp" ? 1 : key === "ArrowDown" ? -1 : 0;
+    if (by) {
+      e.preventDefault();
+      setTyping(null);
+      if (segment === "hour") setHour(stepValue(hourShown, by, hourMin, hourMax));
+      else setMinute(stepValue(minutes, by * minuteInterval, 0, 59));
+      return;
+    }
+    if (key === "ArrowLeft" && segment === "minute") {
+      e.preventDefault();
+      focusSegment("hour");
+    } else if (key === "ArrowRight" && segment === "hour") {
+      e.preventDefault();
+      focusSegment("minute");
+    } else if (key === "Backspace" || key === "Delete") {
+      e.preventDefault();
+      setTyping({ segment, buffer: "" });
+    } else if (twelve && (key === "a" || key === "A" || key === "p" || key === "P")) {
+      e.preventDefault();
+      setPm(key === "p" || key === "P");
+    } else if (key === "Enter") {
+      e.currentTarget.blur();
+    } else if (key.length === 1 && !e.metaKey && !e.ctrlKey) {
+      e.preventDefault();
+    }
+  };
+
+  // Mobile keypads and IMEs insert text without a key name; `beforeinput`
+  // carries the digit either way.
+  const onBeforeInput = (segment: Segment) => (e: React.FormEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    const data = (e.nativeEvent as InputEvent).data ?? "";
+    for (const ch of data) if (/\d/.test(ch)) typeInto(segment, ch);
+  };
+
+  // An engine that skipped `beforeinput` still changes the input: whatever
+  // was added to the shown text is what was typed.
+  const onInput = (segment: Segment) => (e: React.ChangeEvent<HTMLInputElement>) => {
+    const added = e.target.value.replace(shownText(segment), "");
+    for (const ch of added) if (/\d/.test(ch)) typeInto(segment, ch);
+  };
+
+  const shownText = (segment: Segment) => {
+    if (typing?.segment === segment) return typing.buffer;
+    if (segment === "hour") return twelve ? String(hourShown) : pad2(hourShown);
+    return pad2(minutes);
+  };
+
+  const segmentClass =
+    "box-content h-10 rounded-md bg-transparent px-1 text-center text-[32px] leading-none font-light tabular-nums text-[var(--cdp-label)] caret-transparent outline-none selection:bg-transparent focus:bg-[var(--cdp-tint-fill)] focus:text-[var(--cdp-tint)]";
+
+  const hourOptions = Array.from({ length: hourMax - hourMin + 1 }, (_, i) => {
+    const h = hourMin + i;
+    return { value: h, label: twelve ? String(h) : pad2(h) };
+  });
+  const minuteOptions = Array.from({ length: Math.ceil(60 / minuteInterval) }, (_, i) => ({
+    value: i * minuteInterval,
+    label: pad2(i * minuteInterval),
+  }));
+
+  return (
+    <div
+      className={cn("cdp flex w-[280px] flex-col gap-2 p-3 select-none", className)}
+      data-slot="time"
+    >
+      <div className="flex items-center justify-between gap-3">
+        <div
+          role="group"
+          aria-label={labels.time}
+          className="flex h-11 items-center rounded-lg bg-[var(--cdp-fill)] px-1.5"
+          data-slot="time-field"
+        >
+          <input
+            ref={hourRef}
+            aria-label={labels.hour}
+            inputMode="numeric"
+            autoComplete="off"
+            value={shownText("hour")}
+            onChange={onInput("hour")}
+            onBeforeInput={onBeforeInput("hour")}
+            onKeyDown={onSegmentKeyDown("hour")}
+            onFocus={(e) => e.currentTarget.select()}
+            onBlur={() => setTyping(null)}
+            className={segmentClass}
+            style={{ width: `${Math.max(1, shownText("hour").length || 1)}ch` }}
+            data-segment="hour"
+          />
+          <span
+            className="-mx-0.5 text-[32px] leading-none font-light text-[var(--cdp-label)]"
+            aria-hidden
+          >
+            :
+          </span>
+          <input
+            ref={minuteRef}
+            aria-label={labels.minute}
+            inputMode="numeric"
+            autoComplete="off"
+            value={shownText("minute")}
+            onChange={onInput("minute")}
+            onBeforeInput={onBeforeInput("minute")}
+            onKeyDown={onSegmentKeyDown("minute")}
+            onFocus={(e) => e.currentTarget.select()}
+            onBlur={() => setTyping(null)}
+            className={segmentClass}
+            style={{ width: "2ch" }}
+            data-segment="minute"
+          />
+        </div>
+        {twelve && (
+          <SegmentedControl
+            aria-label={labels.dayPeriod}
+            options={[
+              { value: false, label: periods.am },
+              { value: true, label: periods.pm },
+            ]}
+            value={pm}
+            onChange={setPm}
+          />
+        )}
+      </div>
+
+      {wheels && (
+        <div className="cdp-wheel-mask relative flex justify-center" data-slot="time-wheels">
+          <WheelHighlight />
+          <Wheel
+            aria-label={labels.hour}
+            options={hourOptions}
+            value={hourShown}
+            loop
+            onChange={setHour}
+            className="w-16"
+          />
+          <Wheel
+            aria-label={labels.minute}
+            options={minuteOptions}
+            value={minutes - (minutes % minuteInterval)}
+            loop
+            onChange={setMinute}
+            className="w-16"
+          />
+          {twelve && (
+            <Wheel
+              aria-label={labels.dayPeriod}
+              options={[
+                { value: 0, label: periods.am },
+                { value: 1, label: periods.pm },
+              ]}
+              value={pm ? 1 : 0}
+              onChange={(v) => setPm(v === 1)}
+              className="w-16"
+            />
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/time.ts

@@ -0,0 +1,71 @@
+/**
+ * Clock helpers on top of `Intl`, so 12/24-hour, day-period labels, and month
+ * and weekday names all follow the locale instead of a hard-coded table.
+ */
+export type HourCycle = "h12" | "h23";
+
+export function hourCycleFor(locale: string): HourCycle {
+  const cycle = new Intl.DateTimeFormat(locale, { hour: "numeric" }).resolvedOptions().hourCycle;
+  return cycle === "h11" || cycle === "h12" ? "h12" : "h23";
+}
+
+export function to12(hour24: number): { hour: number; pm: boolean } {
+  return { hour: hour24 % 12 === 0 ? 12 : hour24 % 12, pm: hour24 >= 12 };
+}
+
+export function to24(hour12: number, pm: boolean): number {
+  return (hour12 % 12) + (pm ? 12 : 0);
+}
+
+export function dayPeriodLabels(locale: string): { am: string; pm: string } {
+  const f = new Intl.DateTimeFormat(locale, { hour: "numeric", hourCycle: "h12" });
+  const label = (hour: number) =>
+    f.formatToParts(new Date(2000, 0, 1, hour)).find((p) => p.type === "dayPeriod")?.value ??
+    (hour < 12 ? "AM" : "PM");
+  return { am: label(1), pm: label(13) };
+}
+
+export function monthNames(locale: string, style: "long" | "short" = "long"): string[] {
+  const f = new Intl.DateTimeFormat(locale, { month: style });
+  return Array.from({ length: 12 }, (_, m) => f.format(new Date(2000, m, 1)));
+}
+
+/** Seven names starting on `weekStart` (0 = Sunday). */
+export function weekdayNames(
+  locale: string,
+  weekStart: number,
+  style: "narrow" | "short" = "narrow",
+): string[] {
+  const f = new Intl.DateTimeFormat(locale, { weekday: style });
+  // 2023-01-01 is a Sunday.
+  return Array.from({ length: 7 }, (_, i) =>
+    f.format(new Date(2023, 0, 1 + ((weekStart + i) % 7))),
+  );
+}
+
+/** The locale's medium date, as the iOS pill shows it: "Sep 5, 2026", "05.09.2026", "2026年9月5日". */
+export function formatDay(date: Date, locale: string): string {
+  return new Intl.DateTimeFormat(locale, { dateStyle: "medium" }).format(date);
+}
+
+/** "6:30 PM" on a 12-hour clock, "06:30" on a 24-hour one. */
+export function formatClock(date: Date, locale: string, hourCycle: HourCycle): string {
+  return new Intl.DateTimeFormat(locale, {
+    hour: hourCycle === "h12" ? "numeric" : "2-digit",
+    minute: "2-digit",
+    hourCycle,
+  }).format(date);
+}
+
+export function formatMonthYear(date: Date, locale: string): string {
+  return new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(date);
+}
+
+export function formatFullDate(date: Date, locale: string): string {
+  return new Intl.DateTimeFormat(locale, {
+    weekday: "long",
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  }).format(date);
+}

package/src/utils.ts

@@ -0,0 +1,19 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function clamp(n: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, n));
+}
+
+/** Wrap `n` into [0, len). */
+export function mod(n: number, len: number) {
+  return ((n % len) + len) % len;
+}
+
+export function pad2(n: number) {
+  return n < 10 ? `0${n}` : String(n);
+}

package/src/wheel-math.ts

@@ -0,0 +1,35 @@
+import { clamp } from "./utils";
+
+/** The row a scroll offset rests on. */
+export function snapIndex(scrollTop: number, itemHeight: number): number {
+  return Math.round(scrollTop / itemHeight);
+}
+
+/**
+ * Where a released drag comes to rest. `velocity` is d(scrollTop)/dt in
+ * px/ms; the projection mirrors UIScrollView's normal deceleration, then
+ * lands on a row.
+ */
+export function flingTarget(
+  scrollTop: number,
+  velocity: number,
+  itemHeight: number,
+  maxIndex: number,
+): number {
+  const projected = scrollTop + velocity * 380;
+  return clamp(snapIndex(projected, itemHeight), 0, maxIndex);
+}
+
+/** Of the copies of `logical` in a looped wheel, the one nearest `from`. */
+export function nearestCopy(logical: number, from: number, len: number, copies: number): number {
+  let best = logical;
+  for (let c = 0; c < copies; c++) {
+    const candidate = c * len + logical;
+    if (Math.abs(candidate - from) < Math.abs(best - from)) best = candidate;
+  }
+  return best;
+}
+
+export function easeOutCubic(t: number): number {
+  return 1 - (1 - t) ** 3;
+}