@seekbuddy/dsh-ui 0.0.0-stage → 0.2.0-beta.1

package/dist/chunks/chunk-XL33IPCV.js

@@ -0,0 +1,261 @@
+import {
+  addDays,
+  addMonths,
+  addMonthsToDate,
+  compareIso,
+  isInRange,
+  isOutsideBounds,
+  monthGrid,
+  monthOf,
+  monthTitle,
+  normalizeRange,
+  todayIso,
+  weekOffset,
+  weekdayNames
+} from "./chunk-RZOP2PFC.js";
+
+// src/seekbuddy/date/Calendar.tsx
+import clsx from "clsx";
+import { Button } from "@seekbuddy/dsh-ui";
+import { IconChevronLeftOutlineRegular, IconChevronRightOutlineRegular } from "@seekbuddy/dsh-ui/icons";
+import { useEffect, useId, useRef, useState } from "react";
+
+// .build/css/seekbuddy/date/Calendar.module.mjs
+var id = "@seekbuddy/dsh-ui/seekbuddy/date/Calendar.module.css";
+if (typeof document !== "undefined" && !document.querySelector('style[data-dsh-ui-primitives="' + id + '"]')) {
+  const element = document.createElement("style");
+  element.setAttribute("data-dsh-ui-primitives", id);
+  element.textContent = "._2W6iWW_calendar{--calendar-cell:32px;--calendar-gap:2px;color:var(--dsw-alias-label-primary);gap:24px;display:inline-grid}._2W6iWW_twoMonths{grid-auto-flow:column}._2W6iWW_month{gap:8px;display:grid}._2W6iWW_header{justify-content:space-between;align-items:center;gap:4px;min-height:28px;display:flex}._2W6iWW_navGroup{gap:2px;display:inline-flex}._2W6iWW_nav{width:28px;color:var(--dsw-alias-label-secondary);padding:0}._2W6iWW_nav:hover:not(:disabled){color:var(--dsw-alias-label-primary)}._2W6iWW_nav:focus-visible{outline-offset:1px;outline-style:solid}._2W6iWW_double{align-items:center;display:inline-flex}._2W6iWW_double>:last-child{margin-left:-8px}._2W6iWW_title{text-align:center;font:var(--dsw-font-s-strong-14);flex:1}._2W6iWW_grid{border-collapse:separate;border-spacing:var(--calendar-gap);margin:calc(var(--calendar-gap) * -1)}._2W6iWW_weekday{width:var(--calendar-cell);height:24px;color:var(--dsw-alias-label-tertiary);font:var(--dsw-font-xxs-12);text-align:center;padding:0;font-weight:400}._2W6iWW_cell{padding:0}._2W6iWW_day{width:var(--calendar-cell);height:var(--calendar-cell);border-radius:var(--dsw-radius-sm);color:inherit;cursor:pointer;font:var(--dsw-font-xs-13);font-variant-numeric:tabular-nums;background:0 0;border:0;justify-content:center;align-items:center;padding:0;display:inline-flex}._2W6iWW_day:hover:not(._2W6iWW_disabled):not(._2W6iWW_selected){background:var(--dsw-alias-interactive-bg-hover)}._2W6iWW_day:active:not(._2W6iWW_disabled):not(._2W6iWW_selected){background:var(--dsw-alias-interactive-bg-active)}._2W6iWW_day:focus-visible{outline-offset:1px;outline-style:solid}._2W6iWW_outside{color:var(--dsw-alias-label-dimmed)}._2W6iWW_today{box-shadow:inset 0 0 0 1px var(--dsw-alias-state-business-primary)}._2W6iWW_selected{color:var(--dsw-alias-label-primary-foreground);background:var(--dsw-alias-button-primary-fill)}._2W6iWW_selected:hover{background:var(--dsw-alias-button-primary-hover)}._2W6iWW_disabled{color:var(--dsw-alias-label-dimmed);cursor:not-allowed;text-decoration:line-through}._2W6iWW_range ._2W6iWW_grid{border-spacing:0 var(--calendar-gap)}._2W6iWW_range ._2W6iWW_day{border-radius:0}._2W6iWW_range ._2W6iWW_day:not([data-range]):not([data-range-preview]){border-radius:var(--dsw-radius-sm)}._2W6iWW_day[data-range=middle]{background:var(--dsw-alias-interactive-bg-hover)}._2W6iWW_day[data-range=start],._2W6iWW_day[data-range-preview=start]{border-radius:var(--dsw-radius-sm) 0 0 var(--dsw-radius-sm)}._2W6iWW_day[data-range=end],._2W6iWW_day[data-range-preview=end]{border-radius:0 var(--dsw-radius-sm) var(--dsw-radius-sm) 0}._2W6iWW_day[data-range=single],._2W6iWW_day[data-range-preview=single]{border-radius:var(--dsw-radius-sm)}._2W6iWW_day[data-range-preview]{background:var(--dsw-alias-interactive-bg-hover)}._2W6iWW_range ._2W6iWW_selected:hover{background:var(--dsw-alias-button-primary-hover)}";
+  document.head.appendChild(element);
+}
+var Calendar_module_default = { "month": "_2W6iWW_month", "title": "_2W6iWW_title", "nav": "_2W6iWW_nav", "header": "_2W6iWW_header", "cell": "_2W6iWW_cell", "grid": "_2W6iWW_grid", "outside": "_2W6iWW_outside", "day": "_2W6iWW_day", "today": "_2W6iWW_today", "double": "_2W6iWW_double", "range": "_2W6iWW_range", "disabled": "_2W6iWW_disabled", "selected": "_2W6iWW_selected", "weekday": "_2W6iWW_weekday", "twoMonths": "_2W6iWW_twoMonths", "navGroup": "_2W6iWW_navGroup", "calendar": "_2W6iWW_calendar" };
+
+// src/seekbuddy/date/Calendar.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var DAY_KEYS = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 };
+function rangePosition(date, range) {
+  if (!isInRange(date, range)) return void 0;
+  if (range.start === range.end) return "single";
+  if (date === range.start) return "start";
+  if (date === range.end) return "end";
+  return "middle";
+}
+function Calendar(props) {
+  const {
+    month,
+    onMonthChange,
+    numberOfMonths = props.mode === "range" ? 2 : 1,
+    min,
+    max,
+    isDateDisabled,
+    locale,
+    weekStart = 1,
+    today: todayProp,
+    labels,
+    autoFocus = false,
+    className
+  } = props;
+  const idBase = useId();
+  const [today] = useState(() => todayProp ?? todayIso());
+  const resolvedToday = todayProp ?? today;
+  const single = props.mode === "single" ? props.value : null;
+  const rangeStart = props.mode === "range" ? props.value?.start ?? null : null;
+  const rangeEnd = props.mode === "range" ? props.value?.end ?? null : null;
+  const committed = rangeStart !== null && rangeEnd !== null ? { start: rangeStart, end: rangeEnd } : null;
+  const drafting = props.mode === "range" && rangeStart !== null && rangeEnd === null;
+  const anchor = props.mode === "single" ? single : rangeStart;
+  const [monthState, setMonthState] = useState(() => monthOf(anchor ?? resolvedToday));
+  const [seenAnchor, setSeenAnchor] = useState(anchor);
+  if (anchor !== seenAnchor) {
+    setSeenAnchor(anchor);
+    if (anchor !== null) {
+      const anchorMonth = monthOf(anchor);
+      const visibleUntil = addMonths(monthState, numberOfMonths - 1);
+      if (compareIso(anchorMonth, monthState) < 0 || compareIso(anchorMonth, visibleUntil) > 0) {
+        setMonthState(anchorMonth);
+      }
+    }
+  }
+  const firstMonth = month ?? monthState;
+  const lastMonth = addMonths(firstMonth, numberOfMonths - 1);
+  const showMonth = (next) => {
+    if (month === void 0) setMonthState(next);
+    onMonthChange?.(next);
+  };
+  const [focused, setFocused] = useState(null);
+  const pendingFocus = useRef(null);
+  const pendingAutoFocus = useRef(autoFocus);
+  const cellRefs = useRef(/* @__PURE__ */ new Map());
+  const [hovered, setHovered] = useState(null);
+  const [focusedCell, setFocusedCell] = useState(null);
+  const previewTarget = drafting ? hovered ?? focusedCell : null;
+  const preview = previewTarget !== null && rangeStart !== null && previewTarget !== rangeStart ? normalizeRange(rangeStart, previewTarget) : null;
+  const isDisabled = (date) => isOutsideBounds(date, min, max) || (isDateDisabled?.(date) ?? false);
+  const inView = (date) => {
+    const m = monthOf(date);
+    return compareIso(m, firstMonth) >= 0 && compareIso(m, lastMonth) <= 0;
+  };
+  const months = [];
+  for (let index = 0; index < numberOfMonths; index += 1) {
+    const current2 = addMonths(firstMonth, index);
+    months.push({
+      month: current2,
+      title: monthTitle(locale, current2),
+      titleId: `${idBase}-title-${index}`,
+      cells: monthGrid(current2, weekStart)
+    });
+  }
+  let tabStop = null;
+  if (focused !== null && inView(focused)) tabStop = focused;
+  else if (anchor !== null && inView(anchor)) tabStop = anchor;
+  else if (inView(resolvedToday)) tabStop = resolvedToday;
+  else {
+    outer: for (const visible of months) {
+      for (const date of visible.cells) {
+        if (monthOf(date) === visible.month && !isDisabled(date)) {
+          tabStop = date;
+          break outer;
+        }
+      }
+    }
+  }
+  useEffect(() => {
+    const target = pendingAutoFocus.current ? tabStop : pendingFocus.current;
+    pendingAutoFocus.current = false;
+    pendingFocus.current = null;
+    if (target !== null) cellRefs.current.get(target)?.focus();
+  });
+  const moveFocus = (next) => {
+    setFocused(next);
+    pendingFocus.current = next;
+    if (compareIso(monthOf(next), firstMonth) < 0) showMonth(monthOf(next));
+    else if (compareIso(monthOf(next), lastMonth) > 0) showMonth(addMonths(monthOf(next), -(numberOfMonths - 1)));
+  };
+  const onGridKeyDown = (event) => {
+    const origin = event.target.dataset["date"];
+    if (origin === void 0) return;
+    let next;
+    const days = DAY_KEYS[event.key];
+    if (days !== void 0) next = addDays(origin, days);
+    else if (event.key === "Home") next = addDays(origin, -weekOffset(origin, weekStart));
+    else if (event.key === "End") next = addDays(origin, 6 - weekOffset(origin, weekStart));
+    else if (event.key === "PageUp") next = addMonthsToDate(origin, event.shiftKey ? -12 : -1);
+    else if (event.key === "PageDown") next = addMonthsToDate(origin, event.shiftKey ? 12 : 1);
+    else return;
+    event.preventDefault();
+    moveFocus(next);
+  };
+  const current = props;
+  const pick = (date) => {
+    if (isDisabled(date)) return;
+    setFocused(date);
+    if (!inView(date)) {
+      pendingFocus.current = date;
+      showMonth(monthOf(date));
+    }
+    if (current.mode === "single") current.onChange(date);
+    else if (drafting && rangeStart !== null) {
+      setHovered(null);
+      current.onChange(normalizeRange(rangeStart, date));
+    } else current.onChange({ start: date, end: null });
+  };
+  const weekdaysShort = weekdayNames(locale, weekStart, "short");
+  const weekdaysLong = weekdayNames(locale, weekStart, "long");
+  const twoMonths = numberOfMonths === 2;
+  const nav = (label, onClick, icon, double) => {
+    const Chevron = icon === "prev" ? IconChevronLeftOutlineRegular : IconChevronRightOutlineRegular;
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        className: Calendar_module_default.nav,
+        "aria-label": label,
+        onClick,
+        icon: double ? /* @__PURE__ */ jsxs("span", { className: Calendar_module_default.double, "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx(Chevron, {}),
+          /* @__PURE__ */ jsx(Chevron, {})
+        ] }) : /* @__PURE__ */ jsx(Chevron, {})
+      }
+    );
+  };
+  const renderMonth = (visible, index) => /* @__PURE__ */ jsxs("div", { className: Calendar_module_default.month, children: [
+    /* @__PURE__ */ jsxs("div", { className: Calendar_module_default.header, children: [
+      twoMonths ? index === 0 && nav(labels.previousMonth, () => showMonth(addMonths(firstMonth, -1)), "prev", false) : /* @__PURE__ */ jsxs("span", { className: Calendar_module_default.navGroup, children: [
+        nav(labels.previousYear, () => showMonth(addMonths(firstMonth, -12)), "prev", true),
+        nav(labels.previousMonth, () => showMonth(addMonths(firstMonth, -1)), "prev", false)
+      ] }),
+      /* @__PURE__ */ jsx("span", { id: visible.titleId, className: Calendar_module_default.title, "aria-live": "polite", children: visible.title }),
+      twoMonths ? index === numberOfMonths - 1 && nav(labels.nextMonth, () => showMonth(addMonths(firstMonth, 1)), "next", false) : /* @__PURE__ */ jsxs("span", { className: Calendar_module_default.navGroup, children: [
+        nav(labels.nextMonth, () => showMonth(addMonths(firstMonth, 1)), "next", false),
+        nav(labels.nextYear, () => showMonth(addMonths(firstMonth, 12)), "next", true)
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("table", { role: "grid", "aria-labelledby": visible.titleId, className: Calendar_module_default.grid, onKeyDown: onGridKeyDown, children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: weekdaysShort.map((name, column) => /* @__PURE__ */ jsx("th", { scope: "col", abbr: weekdaysLong[column], className: Calendar_module_default.weekday, children: name }, name)) }) }),
+      /* @__PURE__ */ jsx("tbody", { children: Array.from({ length: 6 }, (_, row) => /* @__PURE__ */ jsx("tr", { children: visible.cells.slice(row * 7, row * 7 + 7).map((date) => {
+        const outside = monthOf(date) !== visible.month;
+        const state = {
+          selected: props.mode === "single" ? single === date : date === rangeStart || date === rangeEnd,
+          today: date === resolvedToday,
+          disabled: isDisabled(date),
+          inRange: committed !== null && isInRange(date, committed)
+        };
+        const position = !outside && committed !== null ? rangePosition(date, committed) : void 0;
+        const previewPosition = !outside && preview !== null && date !== rangeStart ? rangePosition(date, preview) : void 0;
+        return /* @__PURE__ */ jsx(
+          "td",
+          {
+            role: "gridcell",
+            "aria-selected": state.selected,
+            "aria-disabled": state.disabled || void 0,
+            className: Calendar_module_default.cell,
+            children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                ref: (node) => {
+                  if (outside) return;
+                  if (node === null) cellRefs.current.delete(date);
+                  else cellRefs.current.set(date, node);
+                },
+                tabIndex: !outside && date === tabStop ? 0 : -1,
+                "aria-label": labels.dayLabel(date, state),
+                "aria-disabled": state.disabled || void 0,
+                "data-date": date,
+                "data-outside": outside || void 0,
+                "data-range": position,
+                "data-range-preview": previewPosition,
+                className: clsx(
+                  Calendar_module_default.day,
+                  state.selected && !outside && Calendar_module_default.selected,
+                  state.today && Calendar_module_default.today,
+                  outside && Calendar_module_default.outside,
+                  state.disabled && Calendar_module_default.disabled
+                ),
+                onClick: () => pick(date),
+                onPointerEnter: drafting ? () => setHovered(date) : void 0,
+                onFocus: props.mode === "range" ? () => setFocusedCell(date) : void 0,
+                onBlur: props.mode === "range" ? () => setFocusedCell(null) : void 0,
+                children: Number(date.slice(-2))
+              }
+            )
+          },
+          date
+        );
+      }) }, row)) })
+    ] })
+  ] }, index);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(Calendar_module_default.calendar, twoMonths && Calendar_module_default.twoMonths, props.mode === "range" && Calendar_module_default.range, className),
+      onPointerLeave: drafting ? () => setHovered(null) : void 0,
+      children: months.map(renderMonth)
+    }
+  );
+}
+
+export {
+  Calendar
+};