@vertz/ui-primitives 0.2.23 → 0.2.25

package/dist/shared/chunk-b4zzg457.js

@@ -0,0 +1,410 @@
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/calendar/calendar.tsx
+import { __append, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __insert, __list, __on, __pushMountFrame } 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 CalendarTitleEl() {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function CalendarNavButton(onClick) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const __mfResult0 = (() => {
+      const __el0 = __element("button");
+      __el0.setAttribute("type", "button");
+      __on(__el0, "click", onClick);
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function CalendarHeaderEl(prevButton, title, nextButton) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __enterChildren(__el0);
+      __insert(__el0, prevButton);
+      __insert(__el0, title);
+      __insert(__el0, nextButton);
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function CalendarGridEl(onKeydown) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const __mfResult0 = (() => {
+      const __el0 = __element("table");
+      __el0.setAttribute("role", "grid");
+      __on(__el0, "keydown", onKeydown);
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function CalendarRootEl(header, grid) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __enterChildren(__el0);
+      __insert(__el0, header);
+      __insert(__el0, grid);
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function CalendarRoot(options = {}) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let updateTitle = function() {
+      const month = state.displayMonth.peek();
+      title.textContent = `${MONTH_NAMES[month.getMonth()]} ${month.getFullYear()}`;
+    }, isDateDisabled = function(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;
+    }, isSelected = function(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;
+    }, isInRange = function(date) {
+      const val = state.value.peek();
+      if (val === null || !("from" in val))
+        return false;
+      const range = val;
+      return date > range.from && date < range.to;
+    }, selectDate = function(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());
+    }, computeGridRows = function(year, month) {
+      const daysInMonth = getDaysInMonth(year, month);
+      const firstDay = new Date(year, month, 1);
+      const firstDayOfWeek = firstDay.getDay();
+      const offset = (firstDayOfWeek - weekStartsOn + 7) % 7;
+      const startDate = addDays(firstDay, -offset);
+      const totalCells = offset + daysInMonth;
+      const totalRows = Math.ceil(totalCells / 7);
+      const rows = [];
+      let current = startDate;
+      for (let row = 0;row < totalRows; row++) {
+        const rowDates = [];
+        for (let col = 0;col < 7; col++) {
+          rowDates.push(new Date(current));
+          current = addDays(current, 1);
+        }
+        rows.push(rowDates);
+      }
+      return rows;
+    }, buildDayButton = function(cellDate, month) {
+      const dateStr = cellDate.toISOString().split("T")[0] ?? "";
+      const isOutside = cellDate.getMonth() !== month;
+      const rangeVal = mode === "range" ? state.value.peek() : null;
+      return (() => {
+        const __el0 = __element("button");
+        __el0.setAttribute("type", "button");
+        {
+          const __v = dateStr;
+          if (__v != null && __v !== false)
+            __el0.setAttribute("data-date", __v === true ? "" : __v);
+        }
+        {
+          const __v = isOutside ? "true" : undefined;
+          if (__v != null && __v !== false)
+            __el0.setAttribute("data-outside-month", __v === true ? "" : __v);
+        }
+        {
+          const __v = isSameDay(cellDate, now) ? "true" : undefined;
+          if (__v != null && __v !== false)
+            __el0.setAttribute("data-today", __v === true ? "" : __v);
+        }
+        {
+          const __v = isDateDisabled(cellDate) ? "true" : undefined;
+          if (__v != null && __v !== false)
+            __el0.setAttribute("aria-disabled", __v === true ? "" : __v);
+        }
+        {
+          const __v = isSelected(cellDate) ? "true" : undefined;
+          if (__v != null && __v !== false)
+            __el0.setAttribute("aria-selected", __v === true ? "" : __v);
+        }
+        {
+          const __v = rangeVal && "from" in rangeVal && isSameDay(cellDate, rangeVal.from) ? "true" : undefined;
+          if (__v != null && __v !== false)
+            __el0.setAttribute("data-range-start", __v === true ? "" : __v);
+        }
+        {
+          const __v = rangeVal && "to" in rangeVal && isSameDay(cellDate, rangeVal.to) ? "true" : undefined;
+          if (__v != null && __v !== false)
+            __el0.setAttribute("data-range-end", __v === true ? "" : __v);
+        }
+        {
+          const __v = rangeVal && isInRange(cellDate) ? "true" : undefined;
+          if (__v != null && __v !== false)
+            __el0.setAttribute("data-in-range", __v === true ? "" : __v);
+        }
+        __on(__el0, "click", () => {
+          selectDate(cellDate);
+          rebuildGrid();
+        });
+        __enterChildren(__el0);
+        __insert(__el0, cellDate.getDate());
+        __exitChildren();
+        return __el0;
+      })();
+    }, buildGrid = function() {
+      const display = state.displayMonth.peek();
+      const year = display.getFullYear();
+      const month = display.getMonth();
+      const rows = computeGridRows(year, month);
+      const thead = (() => {
+        const __el1 = __element("thead");
+        __enterChildren(__el1);
+        __append(__el1, (() => {
+          const __el2 = __element("tr");
+          __enterChildren(__el2);
+          __insert(__el2, Array.from({ length: 7 }, (_, i) => {
+            const dayIndex = (weekStartsOn + i) % 7;
+            return (() => {
+              const __el3 = __element("th");
+              __el3.setAttribute("scope", "col");
+              __enterChildren(__el3);
+              __insert(__el3, DAY_NAMES[dayIndex] ?? "");
+              __exitChildren();
+              return __el3;
+            })();
+          }));
+          __exitChildren();
+          return __el2;
+        })());
+        __exitChildren();
+        return __el1;
+      })();
+      const tbody = (() => {
+        const __el4 = __element("tbody");
+        __enterChildren(__el4);
+        __list(__el4, () => rows, null, (rowDates) => (() => {
+          const __el5 = __element("tr");
+          __enterChildren(__el5);
+          __list(__el5, () => rowDates, null, (cellDate) => (() => {
+            const __el6 = __element("td");
+            __el6.setAttribute("role", "gridcell");
+            __enterChildren(__el6);
+            __insert(__el6, buildDayButton(cellDate, month));
+            __exitChildren();
+            return __el6;
+          })());
+          __exitChildren();
+          return __el5;
+        })());
+        __exitChildren();
+        return __el4;
+      })();
+      grid.replaceChildren(thead, tbody);
+    }, rebuildGrid = function() {
+      updateTitle();
+      buildGrid();
+    }, navigateMonth = function(delta) {
+      state.displayMonth.value = addMonths(state.displayMonth.peek(), delta);
+      onMonthChange?.(state.displayMonth.peek());
+      rebuildGrid();
+    }, destroy = function() {};
+    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)
+    };
+    const title = CalendarTitleEl();
+    const prevButton = CalendarNavButton(() => navigateMonth(-1));
+    const nextButton = CalendarNavButton(() => navigateMonth(1));
+    const header = CalendarHeaderEl(prevButton, title, nextButton);
+    const grid = CalendarGridEl((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();
+      }
+    });
+    updateTitle();
+    buildGrid();
+    const root = CalendarRootEl(header, grid);
+    applyAttrs(root, attrs);
+    const __mfResult0 = { root, header, title, prevButton, nextButton, grid, state, destroy };
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var Calendar = {
+  Root: CalendarRoot
+};
+
+export { Calendar };

package/dist/shared/chunk-bc2qqkhr.js

@@ -0,0 +1,194 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+
+// src/pagination/pagination-composed.tsx
+import { computed } from "@vertz/ui";
+import { __append, __attr, __child, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __insert, __on, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
+function generatePaginationRange(current, total, siblings) {
+  const range = [];
+  const left = Math.max(2, current - siblings);
+  const right = Math.min(total - 1, current + siblings);
+  range.push(1);
+  if (left > 2) {
+    range.push("...");
+  }
+  for (let idx = left;idx <= right; idx++) {
+    if (idx !== 1 && idx !== total) {
+      range.push(idx);
+    }
+  }
+  if (right < total - 1) {
+    range.push("...");
+  }
+  if (total > 1) {
+    range.push(total);
+  }
+  return range;
+}
+function PageButton(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    if (__props.page === __props.currentPage) {
+      const __mfResult0 = (() => {
+        const __el0 = __element("button");
+        __el0.setAttribute("type", "button");
+        __attr(__el0, "class", () => cn(__props.classes?.linkActive));
+        __el0.setAttribute("aria-current", "page");
+        __enterChildren(__el0);
+        __append(__el0, __child(() => String(__props.page)));
+        __exitChildren();
+        return __el0;
+      })();
+      __flushMountFrame();
+      return __mfResult0;
+    }
+    const __mfResult1 = (() => {
+      const __el1 = __element("button");
+      __el1.setAttribute("type", "button");
+      __attr(__el1, "class", () => cn(__props.classes?.link));
+      __on(__el1, "click", () => __props.onPageChange(__props.page));
+      __enterChildren(__el1);
+      __append(__el1, __child(() => String(__props.page)));
+      __exitChildren();
+      return __el1;
+    })();
+    __flushMountFrame();
+    return __mfResult1;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function buildPageItems(range, classes, currentPage, onPageChange, ellipsisContent) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const __mfResult0 = range.map((page) => page === "..." ? (() => {
+      const __el0 = __element("li");
+      {
+        const __v = cn(classes?.item);
+        if (__v != null && __v !== false)
+          __el0.setAttribute("class", __v === true ? "" : __v);
+      }
+      __enterChildren(__el0);
+      __append(__el0, (() => {
+        const __el1 = __element("span");
+        __el1.setAttribute("aria-hidden", "true");
+        {
+          const __v = cn(classes?.ellipsis);
+          if (__v != null && __v !== false)
+            __el1.setAttribute("class", __v === true ? "" : __v);
+        }
+        __enterChildren(__el1);
+        __insert(__el1, ellipsisContent);
+        __exitChildren();
+        return __el1;
+      })());
+      __exitChildren();
+      return __el0;
+    })() : (() => {
+      const __el2 = __element("li");
+      {
+        const __v = cn(classes?.item);
+        if (__v != null && __v !== false)
+          __el2.setAttribute("class", __v === true ? "" : __v);
+      }
+      __enterChildren(__el2);
+      __append(__el2, PageButton({ get page() {
+        return page;
+      }, get currentPage() {
+        return currentPage;
+      }, get onPageChange() {
+        return onPageChange;
+      }, get classes() {
+        return classes;
+      } }));
+      __exitChildren();
+      return __el2;
+    })());
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function ComposedPaginationRoot(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const range = computed(() => generatePaginationRange(__props.currentPage, __props.totalPages, __props.siblingCount ?? 1));
+    const pageItems = () => buildPageItems(range.value, __props.classes, __props.currentPage, __props.onPageChange, __props.ellipsisContent ?? "...");
+    const __mfResult0 = (() => {
+      const __el0 = __element("nav");
+      __el0.setAttribute("aria-label", "Pagination");
+      __attr(__el0, "class", () => cn(__props.classes?.nav, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, (() => {
+        const __el1 = __element("ul");
+        __attr(__el1, "class", () => cn(__props.classes?.list));
+        __enterChildren(__el1);
+        __append(__el1, (() => {
+          const __el2 = __element("li");
+          __attr(__el2, "class", () => cn(__props.classes?.item));
+          __enterChildren(__el2);
+          __append(__el2, (() => {
+            const __el3 = __element("button");
+            __el3.setAttribute("type", "button");
+            __attr(__el3, "class", () => cn(__props.classes?.navButton));
+            {
+              const __v = { paddingLeft: "0.375rem", paddingRight: "0.625rem" };
+              if (__v != null && __v !== false)
+                __el3.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+            }
+            __el3.setAttribute("aria-label", "Previous page");
+            __attr(__el3, "disabled", () => __props.currentPage <= 1);
+            __on(__el3, "click", () => __props.onPageChange(__props.currentPage - 1));
+            __enterChildren(__el3);
+            __append(__el3, __child(() => __props.prevContent ?? "Previous"));
+            __exitChildren();
+            return __el3;
+          })());
+          __exitChildren();
+          return __el2;
+        })());
+        __insert(__el1, pageItems);
+        __append(__el1, (() => {
+          const __el4 = __element("li");
+          __attr(__el4, "class", () => cn(__props.classes?.item));
+          __enterChildren(__el4);
+          __append(__el4, (() => {
+            const __el5 = __element("button");
+            __el5.setAttribute("type", "button");
+            __attr(__el5, "class", () => cn(__props.classes?.navButton));
+            {
+              const __v = { paddingLeft: "0.625rem", paddingRight: "0.375rem" };
+              if (__v != null && __v !== false)
+                __el5.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+            }
+            __el5.setAttribute("aria-label", "Next page");
+            __attr(__el5, "disabled", () => __props.currentPage >= __props.totalPages);
+            __on(__el5, "click", () => __props.onPageChange(__props.currentPage + 1));
+            __enterChildren(__el5);
+            __append(__el5, __child(() => __props.nextContent ?? "Next"));
+            __exitChildren();
+            return __el5;
+          })());
+          __exitChildren();
+          return __el4;
+        })());
+        __exitChildren();
+        return __el1;
+      })());
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ComposedPagination = ComposedPaginationRoot;
+
+export { ComposedPagination };