@blurrow/ui 0.2.0 → 0.2.1

package/dist/DatePicker.js

@@ -0,0 +1,391 @@
+"use client";
+
+// ../../components/ui/DatePicker.tsx
+import { useId, useMemo, useRef, useState } from "react";
+import { Portal } from "./Floating.js";
+import { FieldKey, FieldLabel, FieldMessage } from "./FieldMessage.js";
+import { useFloatingPanel } from "./useFloatingPanel.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
+var startOfMonth = (d) => new Date(d.getFullYear(), d.getMonth(), 1);
+var addDays = (d, n) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
+var addMonths = (d, n) => {
+  const target = new Date(d.getFullYear(), d.getMonth() + n, 1);
+  const last = new Date(target.getFullYear(), target.getMonth() + 1, 0).getDate();
+  return new Date(target.getFullYear(), target.getMonth(), Math.min(d.getDate(), last));
+};
+var monthIndex = (d) => d.getFullYear() * 12 + d.getMonth();
+var sameDay = (a, b) => !!a && !!b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+var toISODate = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+function Calendar({
+  value,
+  range,
+  onChange,
+  onDayHover,
+  defaultMonth,
+  months = 1,
+  min,
+  max,
+  isDateDisabled,
+  weekStartsOn = 0,
+  locale = "en-US",
+  autoFocus = false,
+  className = ""
+}) {
+  const uid = useId();
+  const [today] = useState(() => startOfDay(/* @__PURE__ */ new Date()));
+  const [focused, setFocused] = useState(() => startOfDay(value ?? range?.from ?? defaultMonth ?? today));
+  const [view, setView] = useState(() => startOfMonth(focused));
+  const [direction, setDirection] = useState("right");
+  const pendingFocus = useRef(autoFocus);
+  const anchor = value ?? range?.from ?? null;
+  const [seen, setSeen] = useState(anchor?.getTime());
+  if (anchor?.getTime() !== seen) {
+    setSeen(anchor?.getTime());
+    if (anchor) {
+      const d = startOfDay(anchor);
+      setFocused(d);
+      const shown = monthIndex(d) - monthIndex(view);
+      if (shown < 0 || shown >= months) setView(startOfMonth(d));
+    }
+  }
+  const minDay = min && startOfDay(min);
+  const maxDay = max && startOfDay(max);
+  const disabled = (d) => minDay && d < minDay || maxDay && d > maxDay || (isDateDisabled?.(d) ?? false);
+  const monthFmt = useMemo(() => new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }), [locale]);
+  const dayLabel = useMemo(
+    () => new Intl.DateTimeFormat(locale, { weekday: "long", month: "long", day: "numeric", year: "numeric" }),
+    [locale]
+  );
+  const weekdays = useMemo(() => {
+    const short = new Intl.DateTimeFormat(locale, { weekday: "short" });
+    const long = new Intl.DateTimeFormat(locale, { weekday: "long" });
+    return Array.from({ length: 7 }, (_, i) => {
+      const d = new Date(2023, 0, 1 + (i + weekStartsOn) % 7);
+      return { short: short.format(d).slice(0, 2), long: long.format(d) };
+    });
+  }, [locale, weekStartsOn]);
+  const move = (next, viaKeyboard) => {
+    pendingFocus.current = viaKeyboard;
+    const offset = monthIndex(next) - monthIndex(view);
+    if (offset < 0) {
+      setDirection("left");
+      setView(startOfMonth(next));
+    } else if (offset >= months) {
+      setDirection("right");
+      setView(startOfMonth(addMonths(next, -(months - 1))));
+    }
+    setFocused(next);
+    if (viaKeyboard) onDayHover?.(next);
+  };
+  const flip = (n) => {
+    pendingFocus.current = false;
+    setDirection(n > 0 ? "right" : "left");
+    setView(addMonths(view, n));
+    setFocused(addMonths(focused, n));
+  };
+  const onKeyDown = (e) => {
+    const dow = (focused.getDay() - weekStartsOn + 7) % 7;
+    const map = {
+      ArrowLeft: () => addDays(focused, -1),
+      ArrowRight: () => addDays(focused, 1),
+      ArrowUp: () => addDays(focused, -7),
+      ArrowDown: () => addDays(focused, 7),
+      PageUp: () => addMonths(focused, e.shiftKey ? -12 : -1),
+      PageDown: () => addMonths(focused, e.shiftKey ? 12 : 1),
+      Home: () => addDays(focused, -dow),
+      End: () => addDays(focused, 6 - dow)
+    };
+    if (map[e.key]) {
+      e.preventDefault();
+      move(map[e.key](), true);
+    }
+  };
+  const focusRef = (el) => {
+    if (!el || !pendingFocus.current) return;
+    pendingFocus.current = false;
+    el.focus({ preventScroll: true });
+  };
+  const prevDisabled = !!minDay && addDays(view, -1) < minDay;
+  const nextDisabled = !!maxDay && addMonths(view, months) > maxDay;
+  const from = range?.from ? startOfDay(range.from) : null;
+  const to = range?.to ? startOfDay(range.to) : null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: ["flex flex-wrap justify-center gap-x-6 gap-y-4 select-none", className].join(" "),
+      onKeyDown,
+      onMouseLeave: () => onDayHover?.(null),
+      children: Array.from({ length: months }, (_, m) => {
+        const month = addMonths(view, m);
+        const first = startOfMonth(month);
+        const gridStart = addDays(first, -((first.getDay() - weekStartsOn + 7) % 7));
+        const weeks = Array.from(
+          { length: 6 },
+          (_2, w) => Array.from({ length: 7 }, (_3, d) => addDays(gridStart, w * 7 + d))
+        );
+        const labelId = `${uid}-month-${m}`;
+        return /* @__PURE__ */ jsxs("div", { className: "w-[266px]", children: [
+          /* @__PURE__ */ jsxs("div", { className: "mb-2 flex h-7 items-center justify-between gap-2", children: [
+            m === 0 ? /* @__PURE__ */ jsx(FieldKey, { label: "previous month", disabled: prevDisabled, onClick: () => flip(-1), children: /* @__PURE__ */ jsx("path", { d: "M15 19l-7-7 7-7" }) }) : /* @__PURE__ */ jsx("span", { className: "w-7" }),
+            /* @__PURE__ */ jsx("span", { id: labelId, "aria-live": "polite", className: "text-[13.5px] font-semibold text-ink tracking-[-0.01em]", children: monthFmt.format(month) }),
+            m === months - 1 ? /* @__PURE__ */ jsx(FieldKey, { label: "next month", disabled: nextDisabled, onClick: () => flip(1), children: /* @__PURE__ */ jsx("path", { d: "M9 5l7 7-7 7" }) }) : /* @__PURE__ */ jsx("span", { className: "w-7" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { role: "grid", "aria-labelledby": labelId, children: [
+            /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7", children: weekdays.map((w) => /* @__PURE__ */ jsx(
+              "span",
+              {
+                role: "columnheader",
+                "aria-label": w.long,
+                className: "grid h-7 place-items-center text-[11px] font-medium text-ink-faint",
+                children: w.short
+              },
+              w.long
+            )) }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: direction === "right" ? "animate-tab-slide-right" : "animate-tab-slide-left",
+                children: weeks.map((week, wi) => /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7", children: week.map((d) => {
+                  const inMonth = d.getMonth() === month.getMonth();
+                  if (!inMonth && months > 1) {
+                    return /* @__PURE__ */ jsx("div", { role: "gridcell", className: "h-[38px]" }, d.getTime());
+                  }
+                  const isEndpoint = range ? sameDay(d, from) || sameDay(d, to) : sameDay(d, value);
+                  const inBand = !!(from && to && d > from && d < to);
+                  const bandLeft = !!(from && to && sameDay(d, to) && !sameDay(from, to));
+                  const bandRight = !!(from && to && sameDay(d, from) && !sameDay(from, to));
+                  const isToday = sameDay(d, today);
+                  const isOff = disabled(d);
+                  const isFocus = sameDay(d, focused) && inMonth;
+                  return /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      role: "gridcell",
+                      "aria-selected": isEndpoint || inBand,
+                      className: "relative grid h-[38px] place-items-center",
+                      children: [
+                        (inBand || bandLeft || bandRight) && /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            "aria-hidden": true,
+                            className: "absolute inset-y-[3px]",
+                            style: {
+                              left: bandLeft || inBand ? 0 : "50%",
+                              right: bandRight || inBand ? 0 : "50%",
+                              background: "var(--well)",
+                              boxShadow: "var(--well-shadow)"
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs(
+                          "button",
+                          {
+                            type: "button",
+                            ref: isFocus ? focusRef : void 0,
+                            tabIndex: isFocus ? 0 : -1,
+                            disabled: isOff,
+                            "aria-label": dayLabel.format(d),
+                            "aria-current": isToday ? "date" : void 0,
+                            onClick: () => {
+                              move(d, false);
+                              if (!isOff) onChange?.(d);
+                            },
+                            onMouseEnter: () => onDayHover?.(d),
+                            className: [
+                              "relative grid h-9 w-9 place-items-center rounded-[10px] text-[13px] tabular-nums",
+                              "transition-[background-color,color,box-shadow] duration-150",
+                              "focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ink",
+                              "disabled:cursor-not-allowed disabled:text-ink-ghost disabled:line-through",
+                              isEndpoint ? "font-semibold text-ink-inverse" : [
+                                "cursor-pointer hover:bg-surface-active",
+                                !inMonth ? "text-ink-ghost" : isToday ? "font-semibold text-ink-strong" : "text-ink-soft"
+                              ].join(" ")
+                            ].join(" "),
+                            style: isEndpoint ? {
+                              background: "var(--face-inverse)",
+                              boxShadow: "var(--face-inverse-shadow)",
+                              textShadow: "var(--emboss-inverse)"
+                            } : void 0,
+                            children: [
+                              d.getDate(),
+                              isToday && /* @__PURE__ */ jsx(
+                                "span",
+                                {
+                                  "aria-hidden": true,
+                                  className: [
+                                    "absolute bottom-[5px] left-1/2 h-[3px] w-[3px] -translate-x-1/2 rounded-full",
+                                    isEndpoint ? "bg-ink-inverse" : "bg-ink"
+                                  ].join(" ")
+                                }
+                              )
+                            ]
+                          }
+                        )
+                      ]
+                    },
+                    d.getTime()
+                  );
+                }) }, wi))
+              },
+              monthIndex(month)
+            )
+          ] })
+        ] }, m);
+      })
+    }
+  );
+}
+var CalendarIcon = ({ className = "" }) => /* @__PURE__ */ jsxs("svg", { "aria-hidden": true, width: "15", height: "15", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", className, children: [
+  /* @__PURE__ */ jsx("rect", { x: "3", y: "5", width: "18", height: "16", rx: "2.5" }),
+  /* @__PURE__ */ jsx("path", { strokeLinecap: "round", d: "M3 10h18M8 3v4M16 3v4" })
+] });
+function ClearKey({ label, onClear }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": label,
+      onClick: onClear,
+      className: "absolute right-2.5 top-1/2 z-10 grid h-6 w-6 -translate-y-1/2 cursor-pointer place-items-center rounded-full text-ink-faint transition-colors hover:bg-surface-active hover:text-ink-soft",
+      children: /* @__PURE__ */ jsx("svg", { "aria-hidden": true, width: "11", height: "11", fill: "none", stroke: "currentColor", strokeWidth: "2.5", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", d: "M6 6l12 12M18 6L6 18" }) })
+    }
+  );
+}
+var DEFAULT_FORMAT = { month: "short", day: "numeric", year: "numeric" };
+function DatePicker({
+  value,
+  defaultValue = null,
+  onChange,
+  label,
+  hint,
+  error,
+  placeholder = "pick a date",
+  min,
+  max,
+  isDateDisabled,
+  weekStartsOn,
+  locale = "en-US",
+  format = DEFAULT_FORMAT,
+  name,
+  clearable = false,
+  disabled = false,
+  fullWidth = false,
+  className = ""
+}) {
+  const uid = useId();
+  const ref = useRef(null);
+  const buttonRef = useRef(null);
+  const [internal, setInternal] = useState(defaultValue);
+  const selected = value !== void 0 ? value : internal;
+  const { open, mounted, toggle, show, close, setFloating, panelStyle } = useFloatingPanel(ref, {
+    onEscape: () => buttonRef.current?.focus()
+  });
+  const messageId = error || hint ? `${uid}-message` : void 0;
+  const text = selected ? new Intl.DateTimeFormat(locale, format).format(selected) : null;
+  const set = (d) => {
+    setInternal(d);
+    onChange?.(d);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: ["group/field flex flex-col gap-1.5", fullWidth ? "w-full" : ""].join(" "), children: [
+    label && /* @__PURE__ */ jsx(FieldLabel, { id: `${uid}-label`, children: label }),
+    /* @__PURE__ */ jsxs("div", { ref, className: ["relative", fullWidth ? "w-full" : "inline-block w-56", className].join(" "), children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref: buttonRef,
+          type: "button",
+          disabled,
+          onClick: toggle,
+          onKeyDown: (e) => {
+            if (!open && e.key === "ArrowDown") {
+              e.preventDefault();
+              show();
+            }
+          },
+          "aria-haspopup": "dialog",
+          "aria-expanded": open,
+          "aria-controls": open ? `${uid}-panel` : void 0,
+          "aria-labelledby": label ? `${uid}-label ${uid}-value` : void 0,
+          "aria-invalid": error ? true : void 0,
+          "aria-describedby": messageId,
+          "data-open": open || void 0,
+          className: [
+            "field group/date relative isolate flex w-full cursor-pointer items-center gap-2.5 rounded-xl py-3 pl-3.5 text-left text-[13.5px]",
+            clearable && selected ? "pr-10" : "pr-4",
+            "focus:outline-none disabled:opacity-40 disabled:pointer-events-none"
+          ].join(" "),
+          children: [
+            /* @__PURE__ */ jsx(
+              CalendarIcon,
+              {
+                className: [
+                  "shrink-0 transition-[color,transform] duration-300 ease-[var(--ease-spring)]",
+                  open ? "scale-110 text-ink-soft" : "text-ink-faint group-hover/date:text-ink-body"
+                ].join(" ")
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                id: `${uid}-value`,
+                className: ["truncate tabular-nums", text ? "font-medium text-ink" : "text-ink-faint"].join(" "),
+                children: text ?? placeholder
+              }
+            )
+          ]
+        }
+      ),
+      clearable && selected && !disabled && /* @__PURE__ */ jsx(
+        ClearKey,
+        {
+          label: "clear date",
+          onClear: () => {
+            set(null);
+            buttonRef.current?.focus();
+          }
+        }
+      ),
+      name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: selected ? toISODate(selected) : "" })
+    ] }),
+    mounted && /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: setFloating,
+        id: `${uid}-panel`,
+        role: "dialog",
+        "aria-label": label ? `choose ${label}` : "choose a date",
+        className: "rounded-[16px] p-1.5",
+        style: panelStyle,
+        children: /* @__PURE__ */ jsx("div", { className: "rounded-[11px] bg-panel-face p-2.5", style: { boxShadow: "var(--panel-face-shadow)" }, children: /* @__PURE__ */ jsx(
+          Calendar,
+          {
+            value: selected,
+            onChange: (d) => {
+              set(d);
+              close();
+              buttonRef.current?.focus();
+            },
+            min,
+            max,
+            isDateDisabled,
+            weekStartsOn,
+            locale,
+            autoFocus: true
+          }
+        ) })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(FieldMessage, { id: messageId, error, hint })
+  ] });
+}
+export {
+  Calendar,
+  CalendarIcon,
+  ClearKey,
+  DatePicker,
+  sameDay,
+  startOfDay,
+  toISODate
+};
+//# sourceMappingURL=DatePicker.js.map

package/dist/DatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/DatePicker.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useId, useMemo, useRef, useState } from \"react\";\nimport { Portal } from \"./Floating\";\nimport { FieldKey, FieldLabel, FieldMessage } from \"./FieldMessage\";\nimport { useFloatingPanel } from \"./useFloatingPanel\";\n\n/* ── Date helpers ─────────────────────────────────────────────────── */\n/* Everything works on local calendar days at midnight, so a date never\n   drifts across a time zone boundary on its way through the picker.  */\nexport const startOfDay = (d: Date) => new Date(d.getFullYear(), d.getMonth(), d.getDate());\nconst startOfMonth = (d: Date) => new Date(d.getFullYear(), d.getMonth(), 1);\nconst addDays = (d: Date, n: number) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);\nconst addMonths = (d: Date, n: number) => {\n  const target = new Date(d.getFullYear(), d.getMonth() + n, 1);\n  const last = new Date(target.getFullYear(), target.getMonth() + 1, 0).getDate();\n  return new Date(target.getFullYear(), target.getMonth(), Math.min(d.getDate(), last));\n};\nconst monthIndex = (d: Date) => d.getFullYear() * 12 + d.getMonth();\nexport const sameDay = (a?: Date | null, b?: Date | null) =>\n  !!a && !!b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();\nexport const toISODate = (d: Date) =>\n  `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, \"0\")}-${String(d.getDate()).padStart(2, \"0\")}`;\n\nexport interface DateRange {\n  from: Date | null;\n  to: Date | null;\n}\n\n/* ── Calendar ─────────────────────────────────────────────────────── */\ninterface CalendarProps {\n  value?: Date | null;\n  /** Shade a span of days instead of marking one (see DateRangePicker) */\n  range?: DateRange;\n  onChange?: (date: Date) => void;\n  /** The day under the pointer or keyboard, for previewing a range */\n  onDayHover?: (date: Date | null) => void;\n  /** The month shown first; defaults to the selected date, or today */\n  defaultMonth?: Date;\n  /** How many months sit side by side */\n  months?: 1 | 2;\n  min?: Date;\n  max?: Date;\n  /** Grey out and skip particular days, like weekends */\n  isDateDisabled?: (date: Date) => boolean;\n  /** 0 is Sunday, 1 is Monday */\n  weekStartsOn?: 0 | 1;\n  locale?: string;\n  /** Move focus onto the grid as soon as it mounts */\n  autoFocus?: boolean;\n  className?: string;\n}\n\n/* A month of days on the panel's face. The chosen day is a raised key in\n   the inverse material, today wears a small dot, and the grid follows\n   the ARIA date-grid pattern: arrows move by day and week, page keys by\n   month (shift for a year), home and end to the edges of the week.  */\nexport function Calendar({\n  value,\n  range,\n  onChange,\n  onDayHover,\n  defaultMonth,\n  months = 1,\n  min,\n  max,\n  isDateDisabled,\n  weekStartsOn = 0,\n  locale = \"en-US\",\n  autoFocus = false,\n  className = \"\",\n}: CalendarProps) {\n  const uid = useId();\n  const [today] = useState(() => startOfDay(new Date()));\n  const [focused, setFocused] = useState<Date>(() => startOfDay(value ?? range?.from ?? defaultMonth ?? today));\n  const [view, setView] = useState<Date>(() => startOfMonth(focused));\n  const [direction, setDirection] = useState<\"left\" | \"right\">(\"right\");\n  // Set by keyboard moves, spent by the next day button that mounts focused\n  const pendingFocus = useRef(autoFocus);\n\n  // A value set from outside brings its month into view\n  const anchor = value ?? range?.from ?? null;\n  const [seen, setSeen] = useState(anchor?.getTime());\n  if (anchor?.getTime() !== seen) {\n    setSeen(anchor?.getTime());\n    if (anchor) {\n      const d = startOfDay(anchor);\n      setFocused(d);\n      const shown = monthIndex(d) - monthIndex(view);\n      if (shown < 0 || shown >= months) setView(startOfMonth(d));\n    }\n  }\n\n  const minDay = min && startOfDay(min);\n  const maxDay = max && startOfDay(max);\n  const disabled = (d: Date) =>\n    (minDay && d < minDay) || (maxDay && d > maxDay) || (isDateDisabled?.(d) ?? false);\n\n  const monthFmt = useMemo(() => new Intl.DateTimeFormat(locale, { month: \"long\", year: \"numeric\" }), [locale]);\n  const dayLabel = useMemo(\n    () => new Intl.DateTimeFormat(locale, { weekday: \"long\", month: \"long\", day: \"numeric\", year: \"numeric\" }),\n    [locale],\n  );\n  const weekdays = useMemo(() => {\n    const short = new Intl.DateTimeFormat(locale, { weekday: \"short\" });\n    const long = new Intl.DateTimeFormat(locale, { weekday: \"long\" });\n    // 2023-01-01 was a Sunday\n    return Array.from({ length: 7 }, (_, i) => {\n      const d = new Date(2023, 0, 1 + ((i + weekStartsOn) % 7));\n      return { short: short.format(d).slice(0, 2), long: long.format(d) };\n    });\n  }, [locale, weekStartsOn]);\n\n  /* Moves the roving focus, scrolling the view when the day is off it */\n  const move = (next: Date, viaKeyboard: boolean) => {\n    pendingFocus.current = viaKeyboard;\n    const offset = monthIndex(next) - monthIndex(view);\n    if (offset < 0) {\n      setDirection(\"left\");\n      setView(startOfMonth(next));\n    } else if (offset >= months) {\n      setDirection(\"right\");\n      setView(startOfMonth(addMonths(next, -(months - 1))));\n    }\n    setFocused(next);\n    if (viaKeyboard) onDayHover?.(next);\n  };\n\n  const flip = (n: number) => {\n    pendingFocus.current = false;\n    setDirection(n > 0 ? \"right\" : \"left\");\n    setView(addMonths(view, n));\n    setFocused(addMonths(focused, n));\n  };\n\n  const onKeyDown = (e: React.KeyboardEvent) => {\n    const dow = (focused.getDay() - weekStartsOn + 7) % 7;\n    const map: Record<string, () => Date> = {\n      ArrowLeft: () => addDays(focused, -1),\n      ArrowRight: () => addDays(focused, 1),\n      ArrowUp: () => addDays(focused, -7),\n      ArrowDown: () => addDays(focused, 7),\n      PageUp: () => addMonths(focused, e.shiftKey ? -12 : -1),\n      PageDown: () => addMonths(focused, e.shiftKey ? 12 : 1),\n      Home: () => addDays(focused, -dow),\n      End: () => addDays(focused, 6 - dow),\n    };\n    if (map[e.key]) {\n      e.preventDefault();\n      move(map[e.key](), true);\n    }\n  };\n\n  /* The focused day takes focus after it renders, but only when the\n     keyboard moved it: a click shouldn't yank focus around.         */\n  const focusRef = (el: HTMLButtonElement | null) => {\n    if (!el || !pendingFocus.current) return;\n    pendingFocus.current = false;\n    el.focus({ preventScroll: true });\n  };\n\n  const prevDisabled = !!minDay && addDays(view, -1) < minDay;\n  const nextDisabled = !!maxDay && addMonths(view, months) > maxDay;\n\n  const from = range?.from ? startOfDay(range.from) : null;\n  const to = range?.to ? startOfDay(range.to) : null;\n\n  return (\n    <div\n      className={[\"flex flex-wrap justify-center gap-x-6 gap-y-4 select-none\", className].join(\" \")}\n      onKeyDown={onKeyDown}\n      onMouseLeave={() => onDayHover?.(null)}\n    >\n      {Array.from({ length: months }, (_, m) => {\n        const month = addMonths(view, m);\n        const first = startOfMonth(month);\n        const gridStart = addDays(first, -((first.getDay() - weekStartsOn + 7) % 7));\n        // Always six weeks, so the panel keeps its height from month to month\n        const weeks = Array.from({ length: 6 }, (_, w) =>\n          Array.from({ length: 7 }, (_, d) => addDays(gridStart, w * 7 + d)),\n        );\n        const labelId = `${uid}-month-${m}`;\n        return (\n          <div key={m} className=\"w-[266px]\">\n            <div className=\"mb-2 flex h-7 items-center justify-between gap-2\">\n              {m === 0 ? (\n                <FieldKey label=\"previous month\" disabled={prevDisabled} onClick={() => flip(-1)}>\n                  <path d=\"M15 19l-7-7 7-7\" />\n                </FieldKey>\n              ) : (\n                <span className=\"w-7\" />\n              )}\n              <span id={labelId} aria-live=\"polite\" className=\"text-[13.5px] font-semibold text-ink tracking-[-0.01em]\">\n                {monthFmt.format(month)}\n              </span>\n              {m === months - 1 ? (\n                <FieldKey label=\"next month\" disabled={nextDisabled} onClick={() => flip(1)}>\n                  <path d=\"M9 5l7 7-7 7\" />\n                </FieldKey>\n              ) : (\n                <span className=\"w-7\" />\n              )}\n            </div>\n\n            <div role=\"grid\" aria-labelledby={labelId}>\n              <div role=\"row\" className=\"grid grid-cols-7\">\n                {weekdays.map((w) => (\n                  <span\n                    key={w.long}\n                    role=\"columnheader\"\n                    aria-label={w.long}\n                    className=\"grid h-7 place-items-center text-[11px] font-medium text-ink-faint\"\n                  >\n                    {w.short}\n                  </span>\n                ))}\n              </div>\n              <div\n                key={monthIndex(month)}\n                className={direction === \"right\" ? \"animate-tab-slide-right\" : \"animate-tab-slide-left\"}\n              >\n                {weeks.map((week, wi) => (\n                  <div role=\"row\" key={wi} className=\"grid grid-cols-7\">\n                    {week.map((d) => {\n                      const inMonth = d.getMonth() === month.getMonth();\n                      // With two months the spill-over days would show twice\n                      if (!inMonth && months > 1) {\n                        return <div role=\"gridcell\" key={d.getTime()} className=\"h-[38px]\" />;\n                      }\n                      const isEndpoint = range ? sameDay(d, from) || sameDay(d, to) : sameDay(d, value);\n                      const inBand = !!(from && to && d > from && d < to);\n                      const bandLeft = !!(from && to && sameDay(d, to) && !sameDay(from, to));\n                      const bandRight = !!(from && to && sameDay(d, from) && !sameDay(from, to));\n                      const isToday = sameDay(d, today);\n                      const isOff = disabled(d);\n                      const isFocus = sameDay(d, focused) && inMonth;\n                      return (\n                        <div\n                          role=\"gridcell\"\n                          key={d.getTime()}\n                          aria-selected={isEndpoint || inBand}\n                          className=\"relative grid h-[38px] place-items-center\"\n                        >\n                          {/* The span of a range, cut into the face like a well */}\n                          {(inBand || bandLeft || bandRight) && (\n                            <span\n                              aria-hidden\n                              className=\"absolute inset-y-[3px]\"\n                              style={{\n                                left: bandLeft || inBand ? 0 : \"50%\",\n                                right: bandRight || inBand ? 0 : \"50%\",\n                                background: \"var(--well)\",\n                                boxShadow: \"var(--well-shadow)\",\n                              }}\n                            />\n                          )}\n                          <button\n                            type=\"button\"\n                            ref={isFocus ? focusRef : undefined}\n                            tabIndex={isFocus ? 0 : -1}\n                            disabled={isOff}\n                            aria-label={dayLabel.format(d)}\n                            aria-current={isToday ? \"date\" : undefined}\n                            onClick={() => {\n                              move(d, false);\n                              if (!isOff) onChange?.(d);\n                            }}\n                            onMouseEnter={() => onDayHover?.(d)}\n                            className={[\n                              \"relative grid h-9 w-9 place-items-center rounded-[10px] text-[13px] tabular-nums\",\n                              \"transition-[background-color,color,box-shadow] duration-150\",\n                              \"focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ink\",\n                              \"disabled:cursor-not-allowed disabled:text-ink-ghost disabled:line-through\",\n                              isEndpoint\n                                ? \"font-semibold text-ink-inverse\"\n                                : [\n                                    \"cursor-pointer hover:bg-surface-active\",\n                                    !inMonth ? \"text-ink-ghost\" : isToday ? \"font-semibold text-ink-strong\" : \"text-ink-soft\",\n                                  ].join(\" \"),\n                            ].join(\" \")}\n                            style={\n                              isEndpoint\n                                ? {\n                                    background: \"var(--face-inverse)\",\n                                    boxShadow: \"var(--face-inverse-shadow)\",\n                                    textShadow: \"var(--emboss-inverse)\",\n                                  }\n                                : undefined\n                            }\n                          >\n                            {d.getDate()}\n                            {isToday && (\n                              <span\n                                aria-hidden\n                                className={[\n                                  \"absolute bottom-[5px] left-1/2 h-[3px] w-[3px] -translate-x-1/2 rounded-full\",\n                                  isEndpoint ? \"bg-ink-inverse\" : \"bg-ink\",\n                                ].join(\" \")}\n                              />\n                            )}\n                          </button>\n                        </div>\n                      );\n                    })}\n                  </div>\n                ))}\n              </div>\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\n/* ── Pieces both pickers share ────────────────────────────────────── */\nexport const CalendarIcon = ({ className = \"\" }: { className?: string }) => (\n  <svg aria-hidden width=\"15\" height=\"15\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" viewBox=\"0 0 24 24\" className={className}>\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"2.5\" />\n    <path strokeLinecap=\"round\" d=\"M3 10h18M8 3v4M16 3v4\" />\n  </svg>\n);\n\nexport function ClearKey({ label, onClear }: { label: string; onClear: () => void }) {\n  return (\n    <button\n      type=\"button\"\n      aria-label={label}\n      onClick={onClear}\n      className=\"absolute right-2.5 top-1/2 z-10 grid h-6 w-6 -translate-y-1/2 cursor-pointer place-items-center rounded-full text-ink-faint transition-colors hover:bg-surface-active hover:text-ink-soft\"\n    >\n      <svg aria-hidden width=\"11\" height=\"11\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" viewBox=\"0 0 24 24\">\n        <path strokeLinecap=\"round\" d=\"M6 6l12 12M18 6L6 18\" />\n      </svg>\n    </button>\n  );\n}\n\n/* ── DatePicker ───────────────────────────────────────────────────── */\ninterface DatePickerProps {\n  value?: Date | null;\n  defaultValue?: Date | null;\n  onChange?: (date: Date | null) => void;\n  label?: string;\n  hint?: string;\n  error?: string;\n  placeholder?: string;\n  min?: Date;\n  max?: Date;\n  isDateDisabled?: (date: Date) => boolean;\n  weekStartsOn?: 0 | 1;\n  locale?: string;\n  /** How the chosen date reads in the field */\n  format?: Intl.DateTimeFormatOptions;\n  /** Submit the date with a form, as yyyy-mm-dd */\n  name?: string;\n  /** Show a small key in the field that empties it */\n  clearable?: boolean;\n  disabled?: boolean;\n  fullWidth?: boolean;\n  className?: string;\n}\n\nconst DEFAULT_FORMAT: Intl.DateTimeFormatOptions = { month: \"short\", day: \"numeric\", year: \"numeric\" };\n\n/* The closed picker is a sunken field like Select; the calendar opens\n   under it on a floating panel. Picking a day closes it and hands\n   focus back to the field.                                         */\nexport function DatePicker({\n  value,\n  defaultValue = null,\n  onChange,\n  label,\n  hint,\n  error,\n  placeholder = \"pick a date\",\n  min,\n  max,\n  isDateDisabled,\n  weekStartsOn,\n  locale = \"en-US\",\n  format = DEFAULT_FORMAT,\n  name,\n  clearable = false,\n  disabled = false,\n  fullWidth = false,\n  className = \"\",\n}: DatePickerProps) {\n  const uid = useId();\n  const ref = useRef<HTMLDivElement>(null);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const [internal, setInternal] = useState<Date | null>(defaultValue);\n  const selected = value !== undefined ? value : internal;\n  const { open, mounted, toggle, show, close, setFloating, panelStyle } = useFloatingPanel(ref, {\n    onEscape: () => buttonRef.current?.focus(),\n  });\n  const messageId = error || hint ? `${uid}-message` : undefined;\n  const text = selected ? new Intl.DateTimeFormat(locale, format).format(selected) : null;\n\n  const set = (d: Date | null) => {\n    setInternal(d);\n    onChange?.(d);\n  };\n\n  return (\n    <div className={[\"group/field flex flex-col gap-1.5\", fullWidth ? \"w-full\" : \"\"].join(\" \")}>\n      {label && <FieldLabel id={`${uid}-label`}>{label}</FieldLabel>}\n      <div ref={ref} className={[\"relative\", fullWidth ? \"w-full\" : \"inline-block w-56\", className].join(\" \")}>\n        {/* The field's error styling keys off aria-invalid, as Input's does */}\n        {/* eslint-disable-next-line jsx-a11y/role-supports-aria-props */}\n        <button\n          ref={buttonRef}\n          type=\"button\"\n          disabled={disabled}\n          onClick={toggle}\n          onKeyDown={(e) => {\n            if (!open && e.key === \"ArrowDown\") {\n              e.preventDefault();\n              show();\n            }\n          }}\n          aria-haspopup=\"dialog\"\n          aria-expanded={open}\n          aria-controls={open ? `${uid}-panel` : undefined}\n          aria-labelledby={label ? `${uid}-label ${uid}-value` : undefined}\n          aria-invalid={error ? true : undefined}\n          aria-describedby={messageId}\n          data-open={open || undefined}\n          className={[\n            \"field group/date relative isolate flex w-full cursor-pointer items-center gap-2.5 rounded-xl py-3 pl-3.5 text-left text-[13.5px]\",\n            clearable && selected ? \"pr-10\" : \"pr-4\",\n            \"focus:outline-none disabled:opacity-40 disabled:pointer-events-none\",\n          ].join(\" \")}\n        >\n          <CalendarIcon\n            className={[\n              \"shrink-0 transition-[color,transform] duration-300 ease-[var(--ease-spring)]\",\n              open ? \"scale-110 text-ink-soft\" : \"text-ink-faint group-hover/date:text-ink-body\",\n            ].join(\" \")}\n          />\n          <span\n            id={`${uid}-value`}\n            className={[\"truncate tabular-nums\", text ? \"font-medium text-ink\" : \"text-ink-faint\"].join(\" \")}\n          >\n            {text ?? placeholder}\n          </span>\n        </button>\n\n        {clearable && selected && !disabled && (\n          <ClearKey\n            label=\"clear date\"\n            onClear={() => {\n              set(null);\n              buttonRef.current?.focus();\n            }}\n          />\n        )}\n\n        {name && <input type=\"hidden\" name={name} value={selected ? toISODate(selected) : \"\"} />}\n      </div>\n\n      {mounted && (\n        <Portal>\n          <div\n            ref={setFloating}\n            id={`${uid}-panel`}\n            role=\"dialog\"\n            aria-label={label ? `choose ${label}` : \"choose a date\"}\n            className=\"rounded-[16px] p-1.5\"\n            style={panelStyle}\n          >\n            <div className=\"rounded-[11px] bg-panel-face p-2.5\" style={{ boxShadow: \"var(--panel-face-shadow)\" }}>\n              <Calendar\n                value={selected}\n                onChange={(d) => {\n                  set(d);\n                  close();\n                  buttonRef.current?.focus();\n                }}\n                min={min}\n                max={max}\n                isDateDisabled={isDateDisabled}\n                weekStartsOn={weekStartsOn}\n                locale={locale}\n                autoFocus\n              />\n            </div>\n          </div>\n        </Portal>\n      )}\n      <FieldMessage id={messageId} error={error} hint={hint} />\n    </div>\n  );\n}\n"],"mappings":"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","names":["_"]}

package/dist/DateRangePicker.d.ts

@@ -0,0 +1,34 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { DateRange } from './DatePicker.js';
+
+interface DateRangePreset {
+    label: string;
+    range: () => DateRange;
+}
+interface DateRangePickerProps {
+    value?: DateRange;
+    defaultValue?: DateRange;
+    onChange?: (range: DateRange) => void;
+    label?: string;
+    hint?: string;
+    error?: string;
+    placeholder?: string;
+    min?: Date;
+    max?: Date;
+    isDateDisabled?: (date: Date) => boolean;
+    weekStartsOn?: 0 | 1;
+    locale?: string;
+    /** Shortcuts down the side, like "last 7 days" */
+    presets?: DateRangePreset[];
+    /** One month instead of two side by side */
+    singleMonth?: boolean;
+    clearable?: boolean;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    /** Submits name[from] and name[to] as yyyy-mm-dd */
+    name?: string;
+    className?: string;
+}
+declare function DateRangePicker({ value, defaultValue, onChange, label, hint, error, placeholder, min, max, isDateDisabled, weekStartsOn, locale, presets, singleMonth, clearable, disabled, fullWidth, name, className, }: DateRangePickerProps): react_jsx_runtime.JSX.Element;
+
+export { DateRange, DateRangePicker, type DateRangePreset };