@teja-app/ui 0.0.15 → 0.0.17

package/dist/theme/index.js

@@ -12438,7 +12438,7 @@ const MONTHS_SHORT = [
   "Nov",
   "Dec"
 ];
-const pad2 = (n2) => String(n2).padStart(2, "0");
+const pad2$1 = (n2) => String(n2).padStart(2, "0");
 function parseDate(value) {
   if (!value) return void 0;
   const [y3, m2, d2] = value.split("-").map(Number);
@@ -12450,13 +12450,13 @@ function parseDate(value) {
   return date;
 }
 function formatDate(date) {
-  return `${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())}`;
+  return `${date.getFullYear()}-${pad2$1(date.getMonth() + 1)}-${pad2$1(date.getDate())}`;
 }
 function isValidDateString(value) {
   return /^\d{4}-\d{2}-\d{2}$/.test(value) && parseDate(value) !== void 0;
 }
 function displayDate(date) {
-  return `${MONTHS_SHORT[date.getMonth()]} ${pad2(date.getDate())}, ${date.getFullYear()}`;
+  return `${MONTHS_SHORT[date.getMonth()]} ${pad2$1(date.getDate())}, ${date.getFullYear()}`;
 }
 function startOfDay(date) {
   return new Date(date.getFullYear(), date.getMonth(), date.getDate());
@@ -12513,6 +12513,8 @@ function DateInput({
   const selected = parseDate(value);
   const minDate = parseDate(min2 ?? null);
   const maxDate = parseDate(max2 ?? null);
+  const captionEnd = maxDate ?? /* @__PURE__ */ new Date();
+  const captionStart = minDate ?? new Date(captionEnd.getFullYear() - 120, 0, 1);
   const [month, setMonth2] = useState(() => parseDate(value) ?? /* @__PURE__ */ new Date());
   const [lastValue, setLastValue] = useState(value);
   if (value !== lastValue) {
@@ -12614,6 +12616,9 @@ function DateInput({
             onSelect: handleSelect,
             disabled: disabledMatcher,
             showOutsideDays: true,
+            captionLayout: "dropdown",
+            startMonth: captionStart,
+            endMonth: captionEnd,
             style: RDP_STYLE,
             components: {
               Chevron: ({ orientation }) => /* @__PURE__ */ jsx(
@@ -19122,6 +19127,464 @@ const AccordionItem = forwardRef(
     ] });
   }
 );
+const DOW = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+const MONTHS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+const pad2 = (n2) => String(n2).padStart(2, "0");
+function dateKeyOf(year, month0, day) {
+  return `${year}-${pad2(month0 + 1)}-${pad2(day)}`;
+}
+function realTodayKey() {
+  const d2 = /* @__PURE__ */ new Date();
+  return dateKeyOf(d2.getFullYear(), d2.getMonth(), d2.getDate());
+}
+function prettyDate(dateKey) {
+  if (!dateKey) return null;
+  const [y3, m2, d2] = dateKey.split("-").map(Number);
+  if (!y3 || !m2 || !d2) return null;
+  const dow = DOW[(new Date(y3, m2 - 1, d2).getDay() + 6) % 7];
+  return `${dow}, ${MONTHS[m2 - 1]} ${d2}`;
+}
+function monthGrid(year, month0, todayKey) {
+  const first = new Date(year, month0, 1);
+  const lead = (first.getDay() + 6) % 7;
+  const daysInMonth = new Date(year, month0 + 1, 0).getDate();
+  const cells = [];
+  for (let i2 = 0; i2 < lead; i2++) cells.push(null);
+  for (let d2 = 1; d2 <= daysInMonth; d2++) {
+    const key = dateKeyOf(year, month0, d2);
+    cells.push({ day: d2, key, past: key < todayKey, today: key === todayKey });
+  }
+  while (cells.length % 7 !== 0) cells.push(null);
+  return cells;
+}
+const PERIODS = [
+  { id: "morning", label: "Morning", sub: "Before noon" },
+  { id: "afternoon", label: "Afternoon", sub: "12:00 – 5:00 PM" },
+  { id: "evening", label: "Evening", sub: "After 5:00 PM" }
+];
+function NavButton({
+  icon,
+  disabled,
+  onClick,
+  ariaLabel
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      "aria-label": ariaLabel,
+      disabled,
+      type: "button",
+      onClick,
+      style: {
+        width: 26,
+        height: 26,
+        borderRadius: "var(--r-sm)",
+        border: "1px solid var(--border)",
+        background: "var(--surface-0)",
+        color: "var(--ink-2)",
+        boxShadow: "var(--shadow-xs)",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.4 : 1,
+        flexShrink: 0
+      },
+      children: /* @__PURE__ */ jsx(Icon, { color: "var(--ink-2)", name: icon, size: 13 })
+    }
+  );
+}
+function CalendarPane({
+  value,
+  todayKey,
+  isDateDisabled,
+  onPick,
+  note
+}) {
+  const initial = (value ?? todayKey).split("-").map(Number);
+  const [view, setView] = useState({
+    year: initial[0],
+    month0: (initial[1] ?? 1) - 1
+  });
+  const grid = useMemo(
+    () => monthGrid(view.year, view.month0, todayKey),
+    [view.year, view.month0, todayKey]
+  );
+  const [ty, tm] = todayKey.split("-").map(Number);
+  const canGoPrev = view.year > (ty ?? 0) || view.month0 > (tm ?? 1) - 1;
+  return /* @__PURE__ */ jsxs("div", { style: { width: "100%" }, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          marginBottom: 12,
+          padding: "2px 2px 0"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            NavButton,
+            {
+              ariaLabel: "Previous month",
+              disabled: !canGoPrev,
+              icon: "chevronLeft",
+              onClick: () => {
+                if (!canGoPrev) return;
+                setView((v2) => v2.month0 === 0 ? { year: v2.year - 1, month0: 11 } : { ...v2, month0: v2.month0 - 1 });
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { style: { fontSize: 13, fontWeight: 600, color: "var(--ink-1)" }, children: [
+            MONTHS[view.month0],
+            " ",
+            view.year
+          ] }),
+          /* @__PURE__ */ jsx(
+            NavButton,
+            {
+              ariaLabel: "Next month",
+              icon: "chevronRight",
+              onClick: () => {
+                setView((v2) => v2.month0 === 11 ? { year: v2.year + 1, month0: 0 } : { ...v2, month0: v2.month0 + 1 });
+              }
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 2, marginBottom: 4 }, children: DOW.map((d2, i2) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        style: {
+          textAlign: "center",
+          fontSize: 10,
+          fontWeight: 600,
+          color: "var(--ink-3)",
+          textTransform: "uppercase",
+          letterSpacing: "0.04em"
+        },
+        children: d2[0]
+      },
+      i2
+    )) }),
+    /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 2, justifyItems: "center" }, children: grid.map((c2, i2) => {
+      if (!c2) return /* @__PURE__ */ jsx("span", { style: { width: 34, height: 34 } }, `e${i2}`);
+      const disabled = c2.past || isDateDisabled(c2.key);
+      const selected = c2.key === value;
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          "data-testid": `dtp-day-${c2.key}`,
+          disabled,
+          type: "button",
+          onClick: () => onPick(c2.key),
+          style: {
+            width: 34,
+            height: 34,
+            borderRadius: 999,
+            border: 0,
+            fontSize: 12.5,
+            fontWeight: selected ? 700 : c2.today ? 600 : 500,
+            cursor: disabled ? "not-allowed" : "pointer",
+            background: selected ? "var(--primary)" : "transparent",
+            color: disabled ? "var(--ink-4)" : selected ? "white" : c2.today ? "var(--primary)" : "var(--ink-1)",
+            opacity: disabled ? 0.45 : 1,
+            textDecoration: disabled ? "line-through" : "none",
+            outline: c2.today && !selected ? "1px solid var(--primary-soft)" : "none",
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center"
+          },
+          children: c2.day
+        },
+        c2.key
+      );
+    }) }),
+    note ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          marginTop: 10,
+          fontSize: 10.5,
+          color: "var(--ink-3)",
+          display: "flex",
+          alignItems: "center",
+          gap: 5
+        },
+        children: [
+          /* @__PURE__ */ jsx(Icon, { color: "var(--ink-4)", name: "calendar", size: 11 }),
+          note
+        ]
+      }
+    ) : null
+  ] });
+}
+function SlotsPane({
+  state,
+  value,
+  hint,
+  onPick,
+  onRetry
+}) {
+  if (state.status === "loading") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-testid": "dtp-slots-loading",
+        style: { minHeight: 120, display: "flex", alignItems: "center", justifyContent: "center", color: "var(--ink-3)", fontSize: 12.5 },
+        children: "Loading times…"
+      }
+    );
+  }
+  if (state.status === "error") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-testid": "dtp-slots-error",
+        style: { minHeight: 120, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 8, color: "var(--ink-3)", textAlign: "center", padding: 16 },
+        children: [
+          /* @__PURE__ */ jsx(Icon, { color: "var(--danger)", name: "alert-circle", size: 18 }),
+          /* @__PURE__ */ jsx("div", { style: { fontSize: 12.5 }, children: "Couldn't load times." }),
+          /* @__PURE__ */ jsx(Button$1, { size: "sm", variant: "secondary", onClick: onRetry, children: "Try again" })
+        ]
+      }
+    );
+  }
+  const { slots } = state;
+  const anyAvailable = slots.some((s2) => s2.available !== false);
+  if (slots.length === 0 || !anyAvailable) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-testid": "dtp-slots-empty",
+        style: { minHeight: 120, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 8, color: "var(--ink-3)", textAlign: "center", padding: 16 },
+        children: [
+          /* @__PURE__ */ jsx(Icon, { color: "var(--ink-4)", name: "clock", size: 18 }),
+          /* @__PURE__ */ jsx("div", { style: { fontSize: 12.5, fontWeight: 500 }, children: "No times available" }),
+          /* @__PURE__ */ jsx("div", { style: { fontSize: 11, maxWidth: 200 }, children: "Try another day, or adjust the session length." })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { "data-testid": "dtp-slots", style: { display: "flex", flexDirection: "column", gap: 14 }, children: [
+    hint ? /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--ink-2)" }, children: hint }) : null,
+    PERIODS.map((p2) => {
+      const inPeriod = slots.filter((s2) => s2.period === p2.id);
+      if (inPeriod.length === 0) return null;
+      return /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: 8, marginBottom: 8 }, children: [
+          /* @__PURE__ */ jsx("span", { style: { fontSize: 11.5, fontWeight: 700, color: "var(--ink-1)" }, children: p2.label }),
+          /* @__PURE__ */ jsx("span", { style: { fontSize: 10.5, color: "var(--ink-3)" }, children: p2.sub })
+        ] }),
+        /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(84px, 1fr))", gap: 8 }, children: inPeriod.map((s2) => {
+          const blocked = s2.available === false;
+          const on = s2.id === value;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              "data-testid": `dtp-slot-${s2.id}`,
+              disabled: blocked,
+              title: blocked ? s2.reason : void 0,
+              type: "button",
+              onClick: () => onPick(s2.id),
+              style: {
+                height: 38,
+                borderRadius: "var(--r-md)",
+                border: `1px solid ${on ? "var(--primary)" : "var(--border-strong)"}`,
+                background: on ? "var(--primary)" : "var(--surface-0)",
+                color: blocked ? "var(--ink-4)" : on ? "white" : "var(--ink-1)",
+                fontSize: 12.5,
+                fontWeight: on ? 600 : 500,
+                cursor: blocked ? "not-allowed" : "pointer",
+                opacity: blocked ? 0.5 : 1,
+                textDecoration: blocked ? "line-through" : "none"
+              },
+              children: s2.label
+            },
+            s2.id
+          );
+        }) })
+      ] }, p2.id);
+    })
+  ] });
+}
+function DateTimePicker({
+  value,
+  onChange,
+  loadSlots,
+  isDateDisabled,
+  reloadKey,
+  slotsHint,
+  calendarNote,
+  initialStep = "date",
+  todayKey,
+  testId = "date-time-picker"
+}) {
+  const today = todayKey ?? realTodayKey();
+  const dateDisabled = useCallback(
+    (k2) => isDateDisabled ? isDateDisabled(k2) : k2 < today,
+    [isDateDisabled, today]
+  );
+  const [step, setStep] = useState(initialStep);
+  const [slotsState, setSlotsState] = useState(
+    value.dateKey ? { status: "loading" } : { status: "ready", slots: [] }
+  );
+  const reqIdRef = useRef(0);
+  const runLoad = useCallback(
+    (dateKey) => {
+      const id = ++reqIdRef.current;
+      setSlotsState({ status: "loading" });
+      loadSlots(dateKey).then(
+        (slots) => {
+          if (reqIdRef.current === id) setSlotsState({ status: "ready", slots });
+        },
+        () => {
+          if (reqIdRef.current === id) setSlotsState({ status: "error" });
+        }
+      );
+    },
+    [loadSlots]
+  );
+  const dateKeyRef = useRef(value.dateKey);
+  useEffect(() => {
+    dateKeyRef.current = value.dateKey;
+  }, [value.dateKey]);
+  useEffect(() => {
+    const dateKey = dateKeyRef.current;
+    if (dateKey) runLoad(dateKey);
+  }, [reloadKey, runLoad]);
+  const handlePickDate = (dateKey) => {
+    onChange({ dateKey, slotId: null });
+    setStep("time");
+    runLoad(dateKey);
+  };
+  const handlePickSlot = (slotId) => {
+    onChange({ ...value, slotId });
+  };
+  const pretty = prettyDate(value.dateKey);
+  const selectedLabel = slotsState.status === "ready" ? slotsState.slots.find((s2) => s2.id === value.slotId)?.label : void 0;
+  const note = calendarNote === void 0 ? "Past dates are off — sessions can't be created in the past." : calendarNote;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-testid": testId,
+      style: {
+        width: 340,
+        maxWidth: "calc(100vw - 32px)",
+        background: "var(--surface-0)",
+        borderRadius: "var(--r-lg)",
+        border: "1px solid var(--border-strong)",
+        boxShadow: "var(--shadow-lg)",
+        overflow: "hidden",
+        display: "flex",
+        flexDirection: "column",
+        maxHeight: "min(440px, 80vh)"
+      },
+      children: [
+        step === "date" ? /* @__PURE__ */ jsx("div", { style: { padding: 16 }, children: /* @__PURE__ */ jsx(
+          CalendarPane,
+          {
+            isDateDisabled: dateDisabled,
+            note,
+            todayKey: today,
+            value: value.dateKey,
+            onPick: handlePickDate
+          }
+        ) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              "data-testid": "dtp-back-to-date",
+              type: "button",
+              onClick: () => setStep("date"),
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                width: "100%",
+                padding: "12px 16px",
+                border: 0,
+                borderBottom: "1px solid var(--divider)",
+                background: "var(--surface-1)",
+                cursor: "pointer",
+                textAlign: "left"
+              },
+              children: [
+                /* @__PURE__ */ jsx(Icon, { color: "var(--ink-3)", name: "chevronLeft", size: 13 }),
+                /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--ink-3)" }, children: "Date" }),
+                /* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "var(--ink-1)", marginLeft: "auto" }, children: pretty })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { style: { padding: 16, overflowY: "auto", flex: 1 }, children: /* @__PURE__ */ jsx(
+            SlotsPane,
+            {
+              hint: slotsHint,
+              state: slotsState,
+              value: value.slotId,
+              onPick: handlePickSlot,
+              onRetry: () => {
+                if (value.dateKey) runLoad(value.dateKey);
+              }
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              padding: "10px 16px",
+              borderTop: "1px solid var(--divider)",
+              background: "var(--surface-1)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: 8,
+              flexShrink: 0
+            },
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  fontSize: 12,
+                  color: "var(--ink-2)",
+                  minWidth: 0,
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap"
+                },
+                children: value.slotId && selectedLabel ? /* @__PURE__ */ jsxs("span", { children: [
+                  /* @__PURE__ */ jsx("span", { style: { color: "var(--ink-3)" }, children: "Selected:" }),
+                  " ",
+                  /* @__PURE__ */ jsxs("b", { children: [
+                    pretty,
+                    " · ",
+                    selectedLabel
+                  ] })
+                ] }) : step === "date" ? "Pick a date" : "Pick a time"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
 export {
   AIBadge,
   AICard,
@@ -19155,6 +19618,7 @@ export {
   DISPLAY_OPTIONS,
   DarkScope,
   DateInput,
+  DateTimePicker,
   Divider,
   Drawer,
   DrawerFooter,