@vertz/ui-primitives 0.2.23 → 0.2.24

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-brk0drrk.js

@@ -0,0 +1,202 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  createDismiss
+} from "./chunk-a6wp8c32.js";
+import {
+  createFloatingPosition
+} from "./chunk-vef3sepw.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+
+// src/popover/popover-composed.tsx
+import { signal } from "@vertz/ui";
+import { __append, __attr, __child, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __on, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
+import { createContext, ref, useContext } from "@vertz/ui";
+var PopoverContext = createContext(undefined, "@vertz/ui-primitives::PopoverContext");
+function usePopoverContext(componentName) {
+  const ctx = useContext(PopoverContext);
+  if (!ctx) {
+    throw new Error(`<Popover.${componentName}> must be used inside <Popover>. ` + "Ensure it is a direct or nested child of the Popover root component.");
+  }
+  return ctx;
+}
+function PopoverTrigger(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = usePopoverContext("Trigger");
+    const __mfResult0 = (() => {
+      const __el0 = __element("span");
+      {
+        const __v = { display: "contents" };
+        if (__v != null && __v !== false)
+          __el0.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      __el0.setAttribute("data-popover-trigger", "");
+      __el0.setAttribute("aria-haspopup", "dialog");
+      {
+        const __v = ctx.contentId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-controls", __v === true ? "" : __v);
+      }
+      __el0.setAttribute("aria-expanded", "false");
+      __el0.setAttribute("data-state", "closed");
+      __on(__el0, "click", () => {
+        ctx.toggle();
+        const nowOpen = ctx.isOpen();
+        const el = document.querySelector(`[data-popover-trigger][aria-controls="${ctx.contentId}"]`);
+        if (el) {
+          el.setAttribute("aria-expanded", nowOpen ? "true" : "false");
+          el.setAttribute("data-state", nowOpen ? "open" : "closed");
+        }
+      });
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function PopoverContent(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = usePopoverContext("Content");
+    const instanceIndex = ctx._contentCount.value++;
+    if (instanceIndex > 0) {
+      console.warn("Duplicate <Popover.Content> detected – only the first is used");
+    }
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      ctx.contentRef.current = __el0;
+      __el0.setAttribute("role", "dialog");
+      {
+        const __v = ctx.contentId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      __el0.setAttribute("data-popover-content", "");
+      __el0.setAttribute("aria-hidden", "true");
+      __el0.setAttribute("data-state", "closed");
+      {
+        const __v = { display: "none" };
+        if (__v != null && __v !== false)
+          __el0.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      __attr(__el0, "class", () => cn(ctx.classes?.content, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function ComposedPopoverRoot(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let getElements = function() {
+      const content = contentRef.current ?? null;
+      let trigger = content ? content.parentElement?.querySelector("[data-popover-trigger]") : null;
+      while (trigger && getComputedStyle(trigger).display === "contents") {
+        trigger = trigger.firstElementChild;
+      }
+      return { trigger, content };
+    }, syncContentAttrs = function(nowOpen) {
+      const content = contentRef.current;
+      if (!content)
+        return;
+      content.setAttribute("data-state", nowOpen ? "open" : "closed");
+      content.setAttribute("aria-hidden", nowOpen ? "false" : "true");
+      content.style.display = nowOpen ? "" : "none";
+    }, open = function() {
+      isOpen.value = true;
+      syncContentAttrs(true);
+      const { trigger, content } = getElements();
+      if (trigger && content) {
+        content.style.position = "fixed";
+        const floatingOpts = __props.positioning ?? {};
+        const result = createFloatingPosition(trigger, content, floatingOpts);
+        cleanup.floating = result.cleanup;
+        cleanup.dismiss = createDismiss({
+          onDismiss: close,
+          insideElements: [trigger, content],
+          escapeKey: true
+        });
+      }
+      __props.onOpenChange?.(true);
+    }, close = function() {
+      isOpen.value = false;
+      syncContentAttrs(false);
+      const content = contentRef.current;
+      if (content) {
+        content.style.position = "";
+        content.style.left = "";
+        content.style.top = "";
+      }
+      cleanup.floating?.();
+      cleanup.floating = null;
+      cleanup.dismiss?.();
+      cleanup.dismiss = null;
+      __props.onOpenChange?.(false);
+    }, toggle = function() {
+      if (isOpen.value)
+        close();
+      else
+        open();
+    };
+    const ids = linkedIds("popover");
+    const contentRef = ref();
+    const isOpen = signal(false, "isOpen");
+    const cleanup = {
+      floating: null,
+      dismiss: null
+    };
+    const ctx = {
+      isOpen: () => isOpen.value,
+      contentId: ids.contentId,
+      contentRef,
+      classes: __props.classes,
+      open,
+      close,
+      toggle,
+      _contentCount: { value: 0 }
+    };
+    const __mfResult0 = PopoverContext.Provider({ get value() {
+      return ctx;
+    }, children: () => (() => {
+      const __el0 = __element("span");
+      {
+        const __v = { display: "contents" };
+        if (__v != null && __v !== false)
+          __el0.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      __el0.setAttribute("data-popover-root", "");
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })() });
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ComposedPopover = Object.assign(ComposedPopoverRoot, {
+  Trigger: PopoverTrigger,
+  Content: PopoverContent
+});
+
+export { ComposedPopover };