@teja-app/ui 0.0.14 → 0.0.16

package/dist/theme/index.cjs

@@ -795,6 +795,61 @@ function Badge({
     children
   ] });
 }
+const TONE_COLORS = {
+  waiting: { bg: "var(--ai-soft)", fg: "var(--ai)", dot: "var(--ai)" },
+  soon: { bg: "var(--warning-soft)", fg: "var(--warning)", dot: "var(--warning)" },
+  ready: { bg: "var(--success-soft)", fg: "var(--success)", dot: "var(--success)" }
+};
+function CountdownPill({
+  tone,
+  label,
+  icon = "clock",
+  dot,
+  testId,
+  "data-testid": dataTestId
+}) {
+  const showDot = dot ?? tone !== "ready";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Badge,
+    {
+      tone: "neutral",
+      colors: TONE_COLORS[tone],
+      dot: showDot,
+      testId,
+      "data-testid": dataTestId,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon, size: 12 }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontFamily: "var(--font-mono)", fontWeight: 600 }, children: label })
+      ]
+    }
+  );
+}
+const DAY_S = 86400;
+const HOUR_S = 3600;
+const MIN_S = 60;
+function countdownParts(startMs, nowMs, soonThresholdSeconds = 120) {
+  const deltaMs = startMs - nowMs;
+  if (deltaMs <= 0) {
+    return {
+      tone: "ready",
+      days: 0,
+      hours: 0,
+      minutes: 0,
+      seconds: 0,
+      unit: "now",
+      clock: "00:00"
+    };
+  }
+  const total = Math.floor(deltaMs / 1e3);
+  const days = Math.floor(total / DAY_S);
+  const hours = Math.floor(total % DAY_S / HOUR_S);
+  const minutes = Math.floor(total % HOUR_S / MIN_S);
+  const seconds = total % MIN_S;
+  const unit = days > 0 ? "days" : hours > 0 ? "hours" : "minutes";
+  const clock = `${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+  const tone = total <= soonThresholdSeconds ? "soon" : "waiting";
+  return { tone, days, hours, minutes, seconds, unit, clock };
+}
 const Card = React.forwardRef(function Card2({
   padding = 20,
   children,
@@ -12401,7 +12456,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);
@@ -12413,13 +12468,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());
@@ -19085,6 +19140,464 @@ const AccordionItem = React.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__ */ jsxRuntime.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__ */ jsxRuntime.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] = React.useState({
+    year: initial[0],
+    month0: (initial[1] ?? 1) - 1
+  });
+  const grid = React.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__ */ jsxRuntime.jsxs("div", { style: { width: "100%" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          marginBottom: 12,
+          padding: "2px 2px 0"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { style: { fontSize: 13, fontWeight: 600, color: "var(--ink-1)" }, children: [
+            MONTHS[view.month0],
+            " ",
+            view.year
+          ] }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 2, marginBottom: 4 }, children: DOW.map((d2, i2) => /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        style: {
+          textAlign: "center",
+          fontSize: 10,
+          fontWeight: 600,
+          color: "var(--ink-3)",
+          textTransform: "uppercase",
+          letterSpacing: "0.04em"
+        },
+        children: d2[0]
+      },
+      i2
+    )) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 2, justifyItems: "center" }, children: grid.map((c2, i2) => {
+      if (!c2) return /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 34, height: 34 } }, `e${i2}`);
+      const disabled = c2.past || isDateDisabled(c2.key);
+      const selected = c2.key === value;
+      return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          marginTop: 10,
+          fontSize: 10.5,
+          color: "var(--ink-3)",
+          display: "flex",
+          alignItems: "center",
+          gap: 5
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon, { color: "var(--danger)", name: "alert-circle", size: 18 }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 12.5 }, children: "Couldn't load times." }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon, { color: "var(--ink-4)", name: "clock", size: 18 }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 12.5, fontWeight: 500 }, children: "No times available" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 11, maxWidth: 200 }, children: "Try another day, or adjust the session length." })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-testid": "dtp-slots", style: { display: "flex", flexDirection: "column", gap: 14 }, children: [
+    hint ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: 8, marginBottom: 8 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 11.5, fontWeight: 700, color: "var(--ink-1)" }, children: p2.label }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 10.5, color: "var(--ink-3)" }, children: p2.sub })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 = React.useCallback(
+    (k2) => isDateDisabled ? isDateDisabled(k2) : k2 < today,
+    [isDateDisabled, today]
+  );
+  const [step, setStep] = React.useState(initialStep);
+  const [slotsState, setSlotsState] = React.useState(
+    value.dateKey ? { status: "loading" } : { status: "ready", slots: [] }
+  );
+  const reqIdRef = React.useRef(0);
+  const runLoad = React.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 = React.useRef(value.dateKey);
+  React.useEffect(() => {
+    dateKeyRef.current = value.dateKey;
+  }, [value.dateKey]);
+  React.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { style: { padding: 16 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          CalendarPane,
+          {
+            isDateDisabled: dateDisabled,
+            note,
+            todayKey: today,
+            value: value.dateKey,
+            onPick: handlePickDate
+          }
+        ) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon, { color: "var(--ink-3)", name: "chevronLeft", size: 13 }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: "var(--ink-3)" }, children: "Date" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "var(--ink-1)", marginLeft: "auto" }, children: pretty })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: 16, overflowY: "auto", flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+            SlotsPane,
+            {
+              hint: slotsHint,
+              state: slotsState,
+              value: value.slotId,
+              onPick: handlePickSlot,
+              onRetry: () => {
+                if (value.dateKey) runLoad(value.dateKey);
+              }
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+              "span",
+              {
+                style: {
+                  fontSize: 12,
+                  color: "var(--ink-2)",
+                  minWidth: 0,
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap"
+                },
+                children: value.slotId && selectedLabel ? /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--ink-3)" }, children: "Selected:" }),
+                  " ",
+                  /* @__PURE__ */ jsxRuntime.jsxs("b", { children: [
+                    pretty,
+                    " · ",
+                    selectedLabel
+                  ] })
+                ] }) : step === "date" ? "Pick a date" : "Pick a time"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
 exports.AIBadge = AIBadge;
 exports.AICard = AICard;
 exports.AIChip = AIChip;
@@ -19110,12 +19623,14 @@ exports.Checkbox = Checkbox;
 exports.Chip = Chip;
 exports.Combobox = Combobox;
 exports.ConfirmDialog = ConfirmDialog;
+exports.CountdownPill = CountdownPill;
 exports.CountryPicker = CountryPicker;
 exports.DEFAULT_LANG_OPTIONS = DEFAULT_LANG_OPTIONS;
 exports.DENSITY_OPTIONS = DENSITY_OPTIONS;
 exports.DISPLAY_OPTIONS = DISPLAY_OPTIONS;
 exports.DarkScope = DarkScope;
 exports.DateInput = DateInput;
+exports.DateTimePicker = DateTimePicker;
 exports.Divider = Divider;
 exports.Drawer = Drawer;
 exports.DrawerFooter = DrawerFooter;
@@ -19202,6 +19717,7 @@ exports.US_STATES = US_STATES;
 exports.ViewToggle = ViewToggle;
 exports.applyTheme = applyTheme;
 exports.controlBoxStyle = controlBoxStyle;
+exports.countdownParts = countdownParts;
 exports.ensureAIStyles = ensureAIStyles;
 exports.ensureSidebarNavStyles = ensureSidebarNavStyles;
 exports.ensureSkeletonStyles = ensureSkeletonStyles;