@vertz/ui-primitives 0.2.15 → 0.2.17

package/dist/shared/chunk-0mcr52hc.js

@@ -0,0 +1,78 @@
+// src/utils/floating.ts
+import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
+function createFloatingPosition(reference, floating, options = {}) {
+  const {
+    placement = "bottom-start",
+    strategy = "fixed",
+    offset: offsetValue = 4,
+    flip: enableFlip = true,
+    shift: enableShift = true,
+    middleware: extraMiddleware = [],
+    matchReferenceWidth = false,
+    portal = false
+  } = options;
+  if (portal && floating.parentElement !== document.body) {
+    document.body.appendChild(floating);
+  }
+  const mw = [];
+  mw.push(offset(offsetValue));
+  if (enableFlip)
+    mw.push(flip());
+  if (enableShift)
+    mw.push(shift());
+  if (matchReferenceWidth) {
+    mw.push({
+      name: "matchReferenceWidth",
+      fn({ rects }) {
+        floating.style.minWidth = `${rects.reference.width}px`;
+        return {};
+      }
+    });
+  }
+  mw.push(...extraMiddleware);
+  function updatePosition() {
+    computePosition(reference, floating, {
+      placement,
+      strategy,
+      middleware: mw
+    }).then((result) => {
+      floating.style.position = result.strategy;
+      floating.style.left = `${result.x}px`;
+      floating.style.top = `${result.y}px`;
+      const [side = "bottom", align = "center"] = result.placement.split("-");
+      floating.setAttribute("data-side", side);
+      floating.setAttribute("data-align", align);
+    });
+  }
+  const cleanupAutoUpdate = autoUpdate(reference, floating, updatePosition, {
+    animationFrame: true
+  });
+  return {
+    cleanup: cleanupAutoUpdate,
+    update() {
+      updatePosition();
+      return Promise.resolve();
+    }
+  };
+}
+function virtualElement(x, y) {
+  return {
+    getBoundingClientRect() {
+      return {
+        x,
+        y,
+        top: y,
+        left: x,
+        bottom: y,
+        right: x,
+        width: 0,
+        height: 0,
+        toJSON() {
+          return this;
+        }
+      };
+    }
+  };
+}
+
+export { createFloatingPosition, virtualElement };

package/dist/shared/chunk-18y8gfk0.js

@@ -0,0 +1,308 @@
+import {
+  applyAttrs
+} from "./chunk-dpsgb1xw.js";
+
+// src/calendar/calendar.tsx
+import { __element, __enterChildren, __exitChildren, __insert, __on } from "@vertz/ui/internals";
+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;
+}
+function CalendarRoot(options = {}) {
+  const {
+    mode: modeOpt,
+    defaultValue,
+    defaultMonth: defaultMonthOpt,
+    minDate,
+    maxDate,
+    disabled,
+    weekStartsOn: weekStartsOnOpt,
+    onValueChange,
+    onMonthChange,
+    ...attrs
+  } = options;
+  const now = new Date;
+  const defaultMonth = defaultMonthOpt ?? now;
+  const weekStartsOn = weekStartsOnOpt ?? 0;
+  const mode = modeOpt ?? "single";
+  const state = {
+    value: signal(defaultValue ?? null),
+    focusedDate: signal(defaultMonth),
+    displayMonth: signal(defaultMonth)
+  };
+  function updateTitle() {
+    const month = state.displayMonth.peek();
+    title.textContent = `${MONTH_NAMES[month.getMonth()]} ${month.getFullYear()}`;
+  }
+  function isDateDisabled(date) {
+    if (disabled?.(date))
+      return true;
+    if (minDate && date < minDate && !isSameDay(date, minDate)) {
+      return true;
+    }
+    if (maxDate && date > maxDate && !isSameDay(date, 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 };
+        }
+      }
+    }
+    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);
+    onMonthChange?.(state.displayMonth.peek());
+    rebuildGrid();
+  }
+  const title = (() => {
+    const __el0 = __element("div");
+    return __el0;
+  })();
+  const prevButton = (() => {
+    const __el1 = __element("button");
+    __el1.setAttribute("type", "button");
+    __on(__el1, "click", () => navigateMonth(-1));
+    return __el1;
+  })();
+  const nextButton = (() => {
+    const __el2 = __element("button");
+    __el2.setAttribute("type", "button");
+    __on(__el2, "click", () => navigateMonth(1));
+    return __el2;
+  })();
+  const header = (() => {
+    const __el3 = __element("div");
+    __enterChildren(__el3);
+    __insert(__el3, prevButton);
+    __insert(__el3, title);
+    __insert(__el3, nextButton);
+    __exitChildren();
+    return __el3;
+  })();
+  const grid = (() => {
+    const __el4 = __element("table");
+    __el4.setAttribute("role", "grid");
+    __on(__el4, "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);
+          onMonthChange?.(state.displayMonth.peek());
+          rebuildGrid();
+        }
+        const dateKey = next.toISOString().split("T")[0];
+        const btn = grid.querySelector(`button[data-date="${dateKey}"]`);
+        btn?.focus();
+      }
+    });
+    return __el4;
+  })();
+  updateTitle();
+  buildGrid();
+  const root = (() => {
+    const __el5 = __element("div");
+    __enterChildren(__el5);
+    __insert(__el5, header);
+    __insert(__el5, grid);
+    __exitChildren();
+    return __el5;
+  })();
+  applyAttrs(root, attrs);
+  return { root, header, title, prevButton, nextButton, grid, state };
+}
+var Calendar = {
+  Root: CalendarRoot
+};
+
+export { Calendar };

package/dist/shared/chunk-34yfm2b0.js

@@ -0,0 +1,182 @@
+import {
+  saveFocus,
+  trapFocus
+} from "./chunk-e2v1c9ex.js";
+import {
+  setDataState,
+  setExpanded,
+  setHidden,
+  setHiddenAnimated
+} from "./chunk-vvjyx7fe.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+
+// src/alert-dialog/alert-dialog.tsx
+import { __element, __on } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function AlertDialogRoot(options = {}) {
+  const { defaultOpen = false, onOpenChange, onAction } = options;
+  const ids = linkedIds("alertdialog");
+  const titleId = `${ids.contentId}-title`;
+  const descriptionId = `${ids.contentId}-description`;
+  const state = { open: signal(defaultOpen) };
+  let restoreFocus = null;
+  let removeTrap = null;
+  function show() {
+    state.open.value = true;
+    setExpanded(trigger, true);
+    setHidden(overlay, false);
+    setHidden(content, false);
+    setDataState(trigger, "open");
+    setDataState(overlay, "open");
+    setDataState(content, "open");
+    restoreFocus = saveFocus();
+    removeTrap = trapFocus(content);
+    queueMicrotask(() => cancel.focus());
+    onOpenChange?.(true);
+  }
+  function hide() {
+    state.open.value = false;
+    setExpanded(trigger, false);
+    setDataState(trigger, "closed");
+    setDataState(overlay, "closed");
+    setDataState(content, "closed");
+    setHiddenAnimated(overlay, true);
+    setHiddenAnimated(content, true);
+    removeTrap?.();
+    removeTrap = null;
+    restoreFocus?.();
+    restoreFocus = null;
+    onOpenChange?.(false);
+  }
+  const trigger = (() => {
+    const __el0 = __element("button");
+    __el0.setAttribute("type", "button");
+    {
+      const __v = ids.triggerId;
+      if (__v != null && __v !== false)
+        __el0.setAttribute("id", __v === true ? "" : __v);
+    }
+    {
+      const __v = ids.contentId;
+      if (__v != null && __v !== false)
+        __el0.setAttribute("aria-controls", __v === true ? "" : __v);
+    }
+    {
+      const __v = defaultOpen ? "true" : "false";
+      if (__v != null && __v !== false)
+        __el0.setAttribute("aria-expanded", __v === true ? "" : __v);
+    }
+    {
+      const __v = defaultOpen ? "open" : "closed";
+      if (__v != null && __v !== false)
+        __el0.setAttribute("data-state", __v === true ? "" : __v);
+    }
+    __on(__el0, "click", () => {
+      if (!state.open.peek())
+        show();
+    });
+    return __el0;
+  })();
+  const overlay = (() => {
+    const __el1 = __element("div");
+    __el1.setAttribute("data-alertdialog-overlay", "");
+    {
+      const __v = defaultOpen ? "false" : "true";
+      if (__v != null && __v !== false)
+        __el1.setAttribute("aria-hidden", __v === true ? "" : __v);
+    }
+    {
+      const __v = defaultOpen ? "open" : "closed";
+      if (__v != null && __v !== false)
+        __el1.setAttribute("data-state", __v === true ? "" : __v);
+    }
+    {
+      const __v = defaultOpen ? "" : "display: none";
+      if (__v != null && __v !== false)
+        __el1.setAttribute("style", __v === true ? "" : __v);
+    }
+    return __el1;
+  })();
+  const content = (() => {
+    const __el2 = __element("div");
+    __el2.setAttribute("role", "alertdialog");
+    {
+      const __v = ids.contentId;
+      if (__v != null && __v !== false)
+        __el2.setAttribute("id", __v === true ? "" : __v);
+    }
+    __el2.setAttribute("aria-modal", "true");
+    {
+      const __v = titleId;
+      if (__v != null && __v !== false)
+        __el2.setAttribute("aria-labelledby", __v === true ? "" : __v);
+    }
+    {
+      const __v = descriptionId;
+      if (__v != null && __v !== false)
+        __el2.setAttribute("aria-describedby", __v === true ? "" : __v);
+    }
+    {
+      const __v = defaultOpen ? "false" : "true";
+      if (__v != null && __v !== false)
+        __el2.setAttribute("aria-hidden", __v === true ? "" : __v);
+    }
+    {
+      const __v = defaultOpen ? "open" : "closed";
+      if (__v != null && __v !== false)
+        __el2.setAttribute("data-state", __v === true ? "" : __v);
+    }
+    {
+      const __v = defaultOpen ? "" : "display: none";
+      if (__v != null && __v !== false)
+        __el2.setAttribute("style", __v === true ? "" : __v);
+    }
+    return __el2;
+  })();
+  const title = (() => {
+    const __el3 = __element("h2");
+    {
+      const __v = titleId;
+      if (__v != null && __v !== false)
+        __el3.setAttribute("id", __v === true ? "" : __v);
+    }
+    return __el3;
+  })();
+  const description = (() => {
+    const __el4 = __element("p");
+    {
+      const __v = descriptionId;
+      if (__v != null && __v !== false)
+        __el4.setAttribute("id", __v === true ? "" : __v);
+    }
+    return __el4;
+  })();
+  const cancel = (() => {
+    const __el5 = __element("button");
+    __el5.setAttribute("type", "button");
+    __on(__el5, "click", () => hide());
+    return __el5;
+  })();
+  const action = (() => {
+    const __el6 = __element("button");
+    __el6.setAttribute("type", "button");
+    __on(__el6, "click", () => {
+      onAction?.();
+      hide();
+    });
+    return __el6;
+  })();
+  if (defaultOpen) {
+    restoreFocus = saveFocus();
+    removeTrap = trapFocus(content);
+    queueMicrotask(() => cancel.focus());
+  }
+  return { trigger, overlay, content, title, description, cancel, action, state, show, hide };
+}
+var AlertDialog = {
+  Root: AlertDialogRoot
+};
+
+export { AlertDialog };