@vertz/ui-primitives 0.2.14 → 0.2.16

package/dist/shared/chunk-48v8j0vh.js

@@ -0,0 +1,267 @@
+// src/calendar/calendar.ts
+import { signal } from "@vertz/ui";
+var MONTH_NAMES = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+var DAY_NAMES = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+function getDaysInMonth(year, month) {
+  return new Date(year, month + 1, 0).getDate();
+}
+function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function addDays(date, days) {
+  const result = new Date(date);
+  result.setDate(result.getDate() + days);
+  return result;
+}
+function addMonths(date, months) {
+  const result = new Date(date);
+  result.setMonth(result.getMonth() + months);
+  return result;
+}
+var Calendar = {
+  Root(options = {}) {
+    const now = new Date;
+    const defaultMonth = options.defaultMonth ?? now;
+    const weekStartsOn = options.weekStartsOn ?? 0;
+    const mode = options.mode ?? "single";
+    const state = {
+      value: signal(options.defaultValue ?? null),
+      focusedDate: signal(defaultMonth),
+      displayMonth: signal(defaultMonth)
+    };
+    const root = document.createElement("div");
+    const header = document.createElement("div");
+    const title = document.createElement("div");
+    const prevButton = document.createElement("button");
+    prevButton.setAttribute("type", "button");
+    const nextButton = document.createElement("button");
+    nextButton.setAttribute("type", "button");
+    const grid = document.createElement("table");
+    grid.setAttribute("role", "grid");
+    function updateTitle() {
+      const month = state.displayMonth.peek();
+      title.textContent = `${MONTH_NAMES[month.getMonth()]} ${month.getFullYear()}`;
+    }
+    function isDateDisabled(date) {
+      if (options.disabled?.(date))
+        return true;
+      if (options.minDate && date < options.minDate && !isSameDay(date, options.minDate)) {
+        return true;
+      }
+      if (options.maxDate && date > options.maxDate && !isSameDay(date, options.maxDate)) {
+        return true;
+      }
+      return false;
+    }
+    function isSelected(date) {
+      const val = state.value.peek();
+      if (val === null)
+        return false;
+      if (val instanceof Date)
+        return isSameDay(val, date);
+      if (Array.isArray(val))
+        return val.some((d) => isSameDay(d, date));
+      if ("from" in val && "to" in val) {
+        return isSameDay(val.from, date) || isSameDay(val.to, date);
+      }
+      return false;
+    }
+    function isInRange(date) {
+      const val = state.value.peek();
+      if (val === null || !("from" in val))
+        return false;
+      const range = val;
+      return date > range.from && date < range.to;
+    }
+    function selectDate(date) {
+      if (isDateDisabled(date))
+        return;
+      if (mode === "single") {
+        state.value.value = date;
+      } else if (mode === "multiple") {
+        const current = state.value.peek() ?? [];
+        const existing = current.findIndex((d) => isSameDay(d, date));
+        if (existing >= 0) {
+          const next = [...current];
+          next.splice(existing, 1);
+          state.value.value = next;
+        } else {
+          state.value.value = [...current, date];
+        }
+      } else if (mode === "range") {
+        const current = state.value.peek();
+        if (!current || "to" in current && current.to) {
+          state.value.value = { from: date, to: date };
+        } else {
+          if (date < current.from) {
+            state.value.value = { from: date, to: current.from };
+          } else {
+            state.value.value = { from: current.from, to: date };
+          }
+        }
+      }
+      options.onValueChange?.(state.value.peek());
+    }
+    function buildGrid() {
+      grid.innerHTML = "";
+      const display = state.displayMonth.peek();
+      const year = display.getFullYear();
+      const month = display.getMonth();
+      const daysInMonth = getDaysInMonth(year, month);
+      const thead = document.createElement("thead");
+      const headerRow = document.createElement("tr");
+      for (let i = 0;i < 7; i++) {
+        const dayIndex = (weekStartsOn + i) % 7;
+        const th = document.createElement("th");
+        th.setAttribute("scope", "col");
+        th.textContent = DAY_NAMES[dayIndex] ?? "";
+        headerRow.appendChild(th);
+      }
+      thead.appendChild(headerRow);
+      grid.appendChild(thead);
+      const tbody = document.createElement("tbody");
+      const firstDay = new Date(year, month, 1);
+      const firstDayOfWeek = firstDay.getDay();
+      const offset = (firstDayOfWeek - weekStartsOn + 7) % 7;
+      const startDate = addDays(firstDay, -offset);
+      let currentDate = startDate;
+      const totalCells = offset + daysInMonth;
+      const totalRows = Math.ceil(totalCells / 7);
+      for (let row = 0;row < totalRows; row++) {
+        const tr = document.createElement("tr");
+        for (let col = 0;col < 7; col++) {
+          const td = document.createElement("td");
+          td.setAttribute("role", "gridcell");
+          const btn = document.createElement("button");
+          btn.setAttribute("type", "button");
+          const cellDate = new Date(currentDate);
+          btn.textContent = String(cellDate.getDate());
+          btn.setAttribute("data-date", cellDate.toISOString().split("T")[0] ?? "");
+          const isOutside = cellDate.getMonth() !== month;
+          if (isOutside) {
+            btn.setAttribute("data-outside-month", "true");
+          }
+          if (isSameDay(cellDate, now)) {
+            btn.setAttribute("data-today", "true");
+          }
+          if (isDateDisabled(cellDate)) {
+            btn.setAttribute("aria-disabled", "true");
+          }
+          if (isSelected(cellDate)) {
+            btn.setAttribute("aria-selected", "true");
+          }
+          if (mode === "range") {
+            const val = state.value.peek();
+            if (val && "from" in val) {
+              if (isSameDay(cellDate, val.from)) {
+                btn.setAttribute("data-range-start", "true");
+              }
+              if (isSameDay(cellDate, val.to)) {
+                btn.setAttribute("data-range-end", "true");
+              }
+              if (isInRange(cellDate)) {
+                btn.setAttribute("data-in-range", "true");
+              }
+            }
+          }
+          btn.addEventListener("click", () => {
+            selectDate(cellDate);
+            rebuildGrid();
+          });
+          td.appendChild(btn);
+          tr.appendChild(td);
+          currentDate = addDays(currentDate, 1);
+        }
+        tbody.appendChild(tr);
+      }
+      grid.appendChild(tbody);
+    }
+    function rebuildGrid() {
+      updateTitle();
+      buildGrid();
+    }
+    function navigateMonth(delta) {
+      state.displayMonth.value = addMonths(state.displayMonth.peek(), delta);
+      options.onMonthChange?.(state.displayMonth.peek());
+      rebuildGrid();
+    }
+    prevButton.addEventListener("click", () => navigateMonth(-1));
+    nextButton.addEventListener("click", () => navigateMonth(1));
+    grid.addEventListener("keydown", (event) => {
+      const active = document.activeElement;
+      if (!active || active.tagName !== "BUTTON")
+        return;
+      const dateStr = active.getAttribute("data-date");
+      if (!dateStr)
+        return;
+      const focused = new Date(dateStr + "T00:00:00");
+      let next = null;
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        next = addDays(focused, -1);
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault();
+        next = addDays(focused, 1);
+      } else if (event.key === "ArrowUp") {
+        event.preventDefault();
+        next = addDays(focused, -7);
+      } else if (event.key === "ArrowDown") {
+        event.preventDefault();
+        next = addDays(focused, 7);
+      } else if (event.key === "Home") {
+        event.preventDefault();
+        const dayOfWeek = (focused.getDay() - weekStartsOn + 7) % 7;
+        next = addDays(focused, -dayOfWeek);
+      } else if (event.key === "End") {
+        event.preventDefault();
+        const dayOfWeek = (focused.getDay() - weekStartsOn + 7) % 7;
+        next = addDays(focused, 6 - dayOfWeek);
+      } else if (event.key === "PageUp") {
+        event.preventDefault();
+        next = event.shiftKey ? addMonths(focused, -12) : addMonths(focused, -1);
+      } else if (event.key === "PageDown") {
+        event.preventDefault();
+        next = event.shiftKey ? addMonths(focused, 12) : addMonths(focused, 1);
+      } else if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        selectDate(focused);
+        rebuildGrid();
+        return;
+      }
+      if (next) {
+        state.focusedDate.value = next;
+        if (next.getMonth() !== state.displayMonth.peek().getMonth() || next.getFullYear() !== state.displayMonth.peek().getFullYear()) {
+          state.displayMonth.value = new Date(next.getFullYear(), next.getMonth(), 1);
+          options.onMonthChange?.(state.displayMonth.peek());
+          rebuildGrid();
+        }
+        const dateKey = next.toISOString().split("T")[0];
+        const btn = grid.querySelector(`button[data-date="${dateKey}"]`);
+        btn?.focus();
+      }
+    });
+    updateTitle();
+    buildGrid();
+    root.appendChild(header);
+    root.appendChild(grid);
+    header.appendChild(prevButton);
+    header.appendChild(title);
+    header.appendChild(nextButton);
+    return { root, header, title, prevButton, nextButton, grid, state };
+  }
+};
+
+export { Calendar };

package/dist/shared/chunk-6dmt4513.js

@@ -0,0 +1,78 @@
+import {
+  createFloatingPosition
+} from "./chunk-0mcr52hc.js";
+import {
+  Keys,
+  isKey
+} from "./chunk-jctqs9m4.js";
+import {
+  setDataState,
+  setDescribedBy,
+  setHidden,
+  setHiddenAnimated
+} from "./chunk-vvjyx7fe.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+
+// src/tooltip/tooltip.ts
+import { signal } from "@vertz/ui";
+var Tooltip = {
+  Root(options = {}) {
+    const { delay = 300, onOpenChange, positioning } = options;
+    const contentId = uniqueId("tooltip");
+    const state = { open: signal(false) };
+    let showTimeout = null;
+    let floatingCleanup = null;
+    const trigger = document.createElement("span");
+    setDescribedBy(trigger, contentId);
+    const content = document.createElement("div");
+    content.setAttribute("role", "tooltip");
+    content.id = contentId;
+    setHidden(content, true);
+    setDataState(content, "closed");
+    function show() {
+      if (showTimeout !== null)
+        return;
+      showTimeout = setTimeout(() => {
+        state.open.value = true;
+        setHidden(content, false);
+        setDataState(content, "open");
+        if (positioning) {
+          const effectivePlacement = positioning.placement ?? "top";
+          const result = createFloatingPosition(trigger, content, {
+            ...positioning,
+            placement: effectivePlacement
+          });
+          floatingCleanup = result.cleanup;
+        }
+        onOpenChange?.(true);
+        showTimeout = null;
+      }, delay);
+    }
+    function hide() {
+      if (showTimeout !== null) {
+        clearTimeout(showTimeout);
+        showTimeout = null;
+      }
+      state.open.value = false;
+      setDataState(content, "closed");
+      setHiddenAnimated(content, true);
+      floatingCleanup?.();
+      floatingCleanup = null;
+      onOpenChange?.(false);
+    }
+    trigger.addEventListener("mouseenter", show);
+    trigger.addEventListener("mouseleave", hide);
+    trigger.addEventListener("focus", show);
+    trigger.addEventListener("blur", hide);
+    trigger.addEventListener("keydown", (event) => {
+      if (isKey(event, Keys.Escape)) {
+        hide();
+      }
+    });
+    return { trigger, content, state };
+  }
+};
+
+export { Tooltip };

package/dist/shared/chunk-6pnjrst7.js

@@ -0,0 +1,108 @@
+import {
+  Calendar
+} from "./chunk-48v8j0vh.js";
+import {
+  Popover
+} from "./chunk-dkhst4wv.js";
+
+// src/date-picker/date-picker.ts
+import { signal } from "@vertz/ui";
+function defaultFormatDate(date) {
+  return date.toLocaleDateString();
+}
+function formatRangeDisplay(value, fmt) {
+  return `${fmt(value.from)} – ${fmt(value.to)}`;
+}
+var DatePicker = {
+  Root(options = {}) {
+    const {
+      mode = "single",
+      defaultValue = null,
+      minDate,
+      maxDate,
+      disabled,
+      formatDate = defaultFormatDate,
+      placeholder = "Pick a date",
+      onValueChange,
+      onOpenChange
+    } = options;
+    const defaultMonth = options.defaultMonth ?? (defaultValue instanceof Date ? defaultValue : defaultValue && ("from" in defaultValue) ? defaultValue.from : new Date);
+    const calendarMode = mode === "range" ? "range" : "single";
+    const calendarDefaultValue = defaultValue instanceof Date ? defaultValue : defaultValue && ("from" in defaultValue) ? defaultValue : undefined;
+    const popover = Popover.Root({
+      onOpenChange(open) {
+        state.open.value = open;
+        onOpenChange?.(open);
+      }
+    });
+    const calendarResult = Calendar.Root({
+      mode: calendarMode,
+      defaultValue: calendarDefaultValue,
+      defaultMonth,
+      minDate,
+      maxDate,
+      disabled,
+      onValueChange(value) {
+        if (mode === "single" && value instanceof Date) {
+          state.value.value = value;
+          updateTriggerText();
+          onValueChange?.(value);
+          hide();
+        } else if (mode === "range" && value && "from" in value) {
+          const range = value;
+          state.value.value = range;
+          updateTriggerText();
+          onValueChange?.(range);
+          if (range.from && range.to && range.from.getTime() !== range.to.getTime()) {
+            hide();
+          }
+        }
+      }
+    });
+    popover.content.appendChild(calendarResult.root);
+    const state = {
+      open: signal(false),
+      value: signal(defaultValue),
+      displayMonth: calendarResult.state.displayMonth
+    };
+    function updateTriggerText() {
+      const val = state.value.peek();
+      if (val === null) {
+        popover.trigger.textContent = placeholder;
+        popover.trigger.setAttribute("data-placeholder", "true");
+      } else if (val instanceof Date) {
+        popover.trigger.textContent = formatDate(val);
+        popover.trigger.removeAttribute("data-placeholder");
+      } else if ("from" in val) {
+        popover.trigger.textContent = formatRangeDisplay(val, formatDate);
+        popover.trigger.removeAttribute("data-placeholder");
+      }
+    }
+    function show() {
+      popover.trigger.click();
+    }
+    function hide() {
+      if (state.open.peek()) {
+        popover.trigger.click();
+      }
+    }
+    updateTriggerText();
+    return {
+      trigger: popover.trigger,
+      content: popover.content,
+      calendar: {
+        root: calendarResult.root,
+        header: calendarResult.header,
+        title: calendarResult.title,
+        prevButton: calendarResult.prevButton,
+        nextButton: calendarResult.nextButton,
+        grid: calendarResult.grid
+      },
+      state,
+      show,
+      hide
+    };
+  }
+};
+
+export { DatePicker };

package/dist/shared/chunk-6sqwjfg8.js

@@ -0,0 +1,169 @@
+import {
+  focusFirst,
+  setRovingTabindex
+} from "./chunk-e2v1c9ex.js";
+import {
+  Keys,
+  handleListNavigation,
+  isKey
+} from "./chunk-jctqs9m4.js";
+import {
+  setDataState,
+  setExpanded,
+  setHidden,
+  setHiddenAnimated
+} from "./chunk-vvjyx7fe.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+
+// src/navigation-menu/navigation-menu.ts
+import { signal } from "@vertz/ui";
+var NavigationMenu = {
+  Root(options = {}) {
+    const { orientation = "horizontal", delayOpen = 200, delayClose = 300 } = options;
+    const state = { activeItem: signal(null) };
+    const triggers = [];
+    const items = new Map;
+    let openTimeout = null;
+    let closeTimeout = null;
+    const root = document.createElement("nav");
+    const list = document.createElement("div");
+    const viewport = document.createElement("div");
+    function cancelTimers() {
+      if (openTimeout) {
+        clearTimeout(openTimeout);
+        openTimeout = null;
+      }
+      if (closeTimeout) {
+        clearTimeout(closeTimeout);
+        closeTimeout = null;
+      }
+    }
+    function openItem(value) {
+      cancelTimers();
+      const current = state.activeItem.peek();
+      if (current && current !== value) {
+        const prev = items.get(current);
+        if (prev) {
+          setExpanded(prev.trigger, false);
+          setDataState(prev.trigger, "closed");
+          setDataState(prev.content, "closed");
+          setHiddenAnimated(prev.content, true);
+        }
+      }
+      const item = items.get(value);
+      if (!item)
+        return;
+      state.activeItem.value = value;
+      setExpanded(item.trigger, true);
+      setHidden(item.content, false);
+      setDataState(item.trigger, "open");
+      setDataState(item.content, "open");
+    }
+    function closeAll() {
+      cancelTimers();
+      const current = state.activeItem.peek();
+      if (current) {
+        const item = items.get(current);
+        if (item) {
+          setExpanded(item.trigger, false);
+          setDataState(item.trigger, "closed");
+          setDataState(item.content, "closed");
+          setHiddenAnimated(item.content, true);
+        }
+      }
+      state.activeItem.value = null;
+    }
+    function Item(value, label) {
+      const ids = linkedIds("nav-menu");
+      const trigger = document.createElement("button");
+      trigger.setAttribute("type", "button");
+      trigger.id = ids.triggerId;
+      trigger.setAttribute("aria-controls", ids.contentId);
+      trigger.setAttribute("data-value", value);
+      trigger.textContent = label ?? value;
+      setExpanded(trigger, false);
+      setDataState(trigger, "closed");
+      const content = document.createElement("div");
+      content.id = ids.contentId;
+      setHidden(content, true);
+      setDataState(content, "closed");
+      trigger.addEventListener("click", () => {
+        if (state.activeItem.peek() === value) {
+          closeAll();
+        } else {
+          openItem(value);
+        }
+      });
+      trigger.addEventListener("mouseenter", () => {
+        cancelTimers();
+        openTimeout = setTimeout(() => {
+          openItem(value);
+          openTimeout = null;
+        }, delayOpen);
+      });
+      trigger.addEventListener("mouseleave", () => {
+        cancelTimers();
+        closeTimeout = setTimeout(() => {
+          closeAll();
+          closeTimeout = null;
+        }, delayClose);
+      });
+      content.addEventListener("mouseenter", () => {
+        cancelTimers();
+      });
+      content.addEventListener("mouseleave", () => {
+        cancelTimers();
+        closeTimeout = setTimeout(() => {
+          closeAll();
+          closeTimeout = null;
+        }, delayClose);
+      });
+      trigger.addEventListener("keydown", (event) => {
+        if (isKey(event, Keys.Enter, Keys.Space)) {
+          event.preventDefault();
+          openItem(value);
+          queueMicrotask(() => focusFirst(content));
+        }
+        if (isKey(event, Keys.Escape)) {
+          event.preventDefault();
+          closeAll();
+        }
+      });
+      content.addEventListener("keydown", (event) => {
+        if (isKey(event, Keys.Escape)) {
+          event.preventDefault();
+          event.stopPropagation();
+          closeAll();
+          trigger.focus();
+        }
+      });
+      triggers.push(trigger);
+      setRovingTabindex(triggers, 0);
+      items.set(value, { trigger, content });
+      list.appendChild(trigger);
+      viewport.appendChild(content);
+      return { trigger, content };
+    }
+    function Link(href, label) {
+      const a = document.createElement("a");
+      a.href = href;
+      a.textContent = label;
+      list.appendChild(a);
+      return a;
+    }
+    list.addEventListener("keydown", (event) => {
+      if (isKey(event, Keys.ArrowLeft, Keys.ArrowRight, Keys.Home, Keys.End)) {
+        handleListNavigation(event, triggers, {
+          orientation: orientation === "horizontal" ? "horizontal" : "vertical"
+        });
+      }
+    });
+    root.appendChild(list);
+    root.appendChild(viewport);
+    return { root, list, viewport, state, Item, Link };
+  }
+};
+
+export { NavigationMenu };