@vertz/ui-primitives 0.2.16 → 0.2.18

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-4085nbdq.js

@@ -0,0 +1,196 @@
+import {
+  Keys,
+  isKey
+} from "./chunk-jctqs9m4.js";
+import {
+  setDataState,
+  setExpanded,
+  setHidden,
+  setHiddenAnimated,
+  setSelected
+} from "./chunk-vvjyx7fe.js";
+import {
+  applyAttrs
+} from "./chunk-dpsgb1xw.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+
+// src/combobox/combobox.tsx
+import { __element, __enterChildren, __exitChildren, __insert, __on } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function ComboboxRoot(options = {}) {
+  const { defaultValue = "", onValueChange, onInputChange, ...attrs } = options;
+  const ids = linkedIds("combobox");
+  const state = {
+    open: signal(false),
+    value: signal(defaultValue),
+    inputValue: signal(defaultValue),
+    activeIndex: signal(-1)
+  };
+  const optionElements = [];
+  function open() {
+    state.open.value = true;
+    setExpanded(input, true);
+    setHidden(listbox, false);
+    setDataState(listbox, "open");
+  }
+  function close() {
+    state.open.value = false;
+    state.activeIndex.value = -1;
+    setExpanded(input, false);
+    setDataState(listbox, "closed");
+    setHiddenAnimated(listbox, true);
+    updateActiveDescendant(-1);
+  }
+  function selectOption(value) {
+    state.value.value = value;
+    state.inputValue.value = value;
+    input.value = value;
+    for (const opt of optionElements) {
+      const isActive = opt.getAttribute("data-value") === value;
+      setSelected(opt, isActive);
+      setDataState(opt, isActive ? "active" : "inactive");
+    }
+    onValueChange?.(value);
+    close();
+    input.focus();
+  }
+  function updateActiveDescendant(index) {
+    const opt = optionElements[index];
+    if (index >= 0 && opt) {
+      input.setAttribute("aria-activedescendant", opt.id);
+      for (let i = 0;i < optionElements.length; i++) {
+        const el = optionElements[i];
+        if (el)
+          setDataState(el, i === index ? "active" : "inactive");
+      }
+    } else {
+      input.removeAttribute("aria-activedescendant");
+    }
+  }
+  const input = (() => {
+    const __el0 = __element("input");
+    __el0.setAttribute("type", "text");
+    __el0.setAttribute("role", "combobox");
+    __el0.setAttribute("aria-autocomplete", "list");
+    {
+      const __v = ids.contentId;
+      if (__v != null && __v !== false)
+        __el0.setAttribute("aria-controls", __v === true ? "" : __v);
+    }
+    __el0.setAttribute("aria-haspopup", "listbox");
+    {
+      const __v = ids.triggerId;
+      if (__v != null && __v !== false)
+        __el0.setAttribute("id", __v === true ? "" : __v);
+    }
+    {
+      const __v = defaultValue;
+      if (__v != null && __v !== false)
+        __el0.setAttribute("value", __v === true ? "" : __v);
+    }
+    __el0.setAttribute("aria-expanded", "false");
+    __on(__el0, "input", () => {
+      state.inputValue.value = input.value;
+      onInputChange?.(input.value);
+      if (!state.open.peek())
+        open();
+    });
+    __on(__el0, "focus", () => {
+      if (!state.open.peek() && input.value.length > 0)
+        open();
+    });
+    __on(__el0, "keydown", (event) => {
+      if (isKey(event, Keys.Escape)) {
+        event.preventDefault();
+        close();
+        return;
+      }
+      if (isKey(event, Keys.ArrowDown)) {
+        event.preventDefault();
+        if (!state.open.peek()) {
+          open();
+        }
+        const next = Math.min(state.activeIndex.peek() + 1, optionElements.length - 1);
+        state.activeIndex.value = next;
+        updateActiveDescendant(next);
+        return;
+      }
+      if (isKey(event, Keys.ArrowUp)) {
+        event.preventDefault();
+        const prev = Math.max(state.activeIndex.peek() - 1, 0);
+        state.activeIndex.value = prev;
+        updateActiveDescendant(prev);
+        return;
+      }
+      if (isKey(event, Keys.Enter)) {
+        event.preventDefault();
+        const idx = state.activeIndex.peek();
+        if (idx >= 0 && idx < optionElements.length) {
+          const val = optionElements[idx]?.getAttribute("data-value");
+          if (val != null)
+            selectOption(val);
+        }
+        return;
+      }
+    });
+    return __el0;
+  })();
+  const listbox = (() => {
+    const __el1 = __element("div");
+    __el1.setAttribute("role", "listbox");
+    {
+      const __v = ids.contentId;
+      if (__v != null && __v !== false)
+        __el1.setAttribute("id", __v === true ? "" : __v);
+    }
+    __el1.setAttribute("aria-hidden", "true");
+    __el1.setAttribute("data-state", "closed");
+    __el1.setAttribute("style", "display: none");
+    return __el1;
+  })();
+  function Option(value, label) {
+    const optId = `${ids.contentId}-opt-${optionElements.length}`;
+    const isSelectedOpt = value === defaultValue;
+    const opt = (() => {
+      const __el2 = __element("div");
+      __el2.setAttribute("role", "option");
+      {
+        const __v = optId;
+        if (__v != null && __v !== false)
+          __el2.setAttribute("id", __v === true ? "" : __v);
+      }
+      {
+        const __v = value;
+        if (__v != null && __v !== false)
+          __el2.setAttribute("data-value", __v === true ? "" : __v);
+      }
+      {
+        const __v = isSelectedOpt ? "true" : "false";
+        if (__v != null && __v !== false)
+          __el2.setAttribute("aria-selected", __v === true ? "" : __v);
+      }
+      {
+        const __v = isSelectedOpt ? "active" : "inactive";
+        if (__v != null && __v !== false)
+          __el2.setAttribute("data-state", __v === true ? "" : __v);
+      }
+      __on(__el2, "click", () => selectOption(value));
+      __enterChildren(__el2);
+      __insert(__el2, label ?? value);
+      __exitChildren();
+      return __el2;
+    })();
+    optionElements.push(opt);
+    listbox.appendChild(opt);
+    return opt;
+  }
+  applyAttrs(input, attrs);
+  return { input, listbox, state, Option };
+}
+var Combobox = {
+  Root: ComboboxRoot
+};
+
+export { Combobox };

package/dist/shared/chunk-4da5zksy.js

@@ -0,0 +1,46 @@
+import {
+  handleActivation
+} from "./chunk-jctqs9m4.js";
+import {
+  applyAttrs
+} from "./chunk-dpsgb1xw.js";
+
+// src/button/button.tsx
+import { __element, __on } from "@vertz/ui/internals";
+function ButtonRoot(options = {}) {
+  const { disabled = false, onClick, ...attrs } = options;
+  const el = (() => {
+    const __el0 = __element("button");
+    __el0.setAttribute("type", "button");
+    {
+      const __v = disabled;
+      if (__v != null && __v !== false)
+        __el0.setAttribute("disabled", __v === true ? "" : __v);
+    }
+    {
+      const __v = disabled ? "true" : undefined;
+      if (__v != null && __v !== false)
+        __el0.setAttribute("aria-disabled", __v === true ? "" : __v);
+    }
+    __on(__el0, "click", () => {
+      if (disabled)
+        return;
+      onClick?.();
+    });
+    __on(__el0, "keydown", (event) => {
+      if (disabled)
+        return;
+      handleActivation(event, () => {
+        event.target.click();
+      });
+    });
+    return __el0;
+  })();
+  applyAttrs(el, attrs);
+  return el;
+}
+var Button = {
+  Root: ButtonRoot
+};
+
+export { Button };