@vertz/ui-primitives 0.2.41 → 0.2.43

package/dist/shared/chunk-vfknb5ht.js

@@ -0,0 +1,183 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+import {
+  Keys,
+  handleListNavigation,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  setDataState,
+  setExpanded,
+  setHidden,
+  setHiddenAnimated
+} from "./chunk-vevfhpc9.js";
+
+// src/accordion/accordion-composed.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { createContext, ref, useContext } from "@vertz/ui";
+var AccordionContext = createContext(undefined, "@vertz/ui-primitives::AccordionContext");
+var AccordionItemContext = createContext(undefined, "@vertz/ui-primitives::AccordionItemContext");
+function useAccordionContext(componentName) {
+  const ctx = useContext(AccordionContext);
+  if (!ctx) {
+    throw new Error(`<Accordion.${componentName}> must be used inside <Accordion>. ` + "Ensure it is a direct or nested child of the Accordion root component.");
+  }
+  return ctx;
+}
+function AccordionItem({ value, children }) {
+  const ctx = useAccordionContext("Item");
+  const baseId = uniqueId("accordion");
+  const triggerId = `${baseId}-trigger`;
+  const contentId = `${baseId}-content`;
+  const contentRef = ref();
+  const triggerRef = ref();
+  const itemCtx = {
+    value,
+    triggerId,
+    contentId,
+    contentRef,
+    triggerRef,
+    classes: ctx.classes,
+    isOpen: () => ctx.isOpen(value),
+    toggle: () => {
+      const prevHeight = contentRef.current?.scrollHeight ?? 0;
+      ctx.toggle(value);
+      const nowOpen = ctx.isOpen(value);
+      const contentEl = contentRef.current;
+      if (contentEl) {
+        contentEl.removeAttribute("data-initial");
+        if (nowOpen) {
+          setHidden(contentEl, false);
+          const height = contentEl.scrollHeight;
+          contentEl.style.setProperty("--accordion-content-height", `${height}px`);
+          setDataState(contentEl, "open");
+        } else {
+          contentEl.style.display = "";
+          contentEl.setAttribute("aria-hidden", "false");
+          contentEl.setAttribute("data-state", "open");
+          contentEl.style.setProperty("--accordion-content-height", `${prevHeight}px`);
+          contentEl.offsetHeight;
+          setDataState(contentEl, "closed");
+          setHiddenAnimated(contentEl, true);
+        }
+      }
+      const triggerEl = triggerRef.current;
+      if (triggerEl) {
+        setExpanded(triggerEl, nowOpen);
+        setDataState(triggerEl, nowOpen ? "open" : "closed");
+      }
+    }
+  };
+  return jsxDEV_7x81h0kn(AccordionItemContext.Provider, {
+    value: itemCtx,
+    children: jsxDEV_7x81h0kn("div", {
+      "data-accordion-item": "",
+      "data-value": value,
+      class: cn(ctx.classes?.item),
+      children
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function AccordionTrigger({ children, className: cls, class: classProp }) {
+  const ctx = useContext(AccordionItemContext);
+  if (!ctx) {
+    throw new Error("<Accordion.Trigger> must be used inside <Accordion.Item>. " + "Ensure it is a direct or nested child of an Accordion Item component.");
+  }
+  const initiallyOpen = ctx.isOpen();
+  return jsxDEV_7x81h0kn("button", {
+    ref: ctx.triggerRef,
+    type: "button",
+    id: ctx.triggerId,
+    "data-accordion-trigger": "",
+    "aria-controls": ctx.contentId,
+    "data-value": ctx.value,
+    "aria-expanded": initiallyOpen ? "true" : "false",
+    "data-state": initiallyOpen ? "open" : "closed",
+    class: cn(ctx.classes?.trigger, cls ?? classProp),
+    onClick: () => ctx.toggle(),
+    children
+  }, undefined, false, undefined, this);
+}
+function AccordionContent({ children, className: cls, class: classProp }) {
+  const ctx = useContext(AccordionItemContext);
+  if (!ctx) {
+    throw new Error("<Accordion.Content> must be used inside <Accordion.Item>. " + "Ensure it is a direct or nested child of an Accordion Item component.");
+  }
+  const el = jsxDEV_7x81h0kn("div", {
+    ref: ctx.contentRef,
+    role: "region",
+    id: ctx.contentId,
+    "data-accordion-content": "",
+    "aria-labelledby": ctx.triggerId,
+    class: cn(ctx.classes?.content, cls ?? classProp),
+    children: jsxDEV_7x81h0kn("div", {
+      "data-part": "content-inner",
+      children
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+  const isOpen = ctx.isOpen();
+  el.setAttribute("aria-hidden", isOpen ? "false" : "true");
+  el.setAttribute("data-state", isOpen ? "open" : "closed");
+  if (isOpen) {
+    el.setAttribute("data-initial", "");
+  } else {
+    el.style.display = "none";
+  }
+  return el;
+}
+function ComposedAccordionRoot({
+  children,
+  classes,
+  type,
+  defaultValue = [],
+  onValueChange
+}) {
+  const multiple = type === "multiple";
+  let openValues = [...defaultValue];
+  const ctx = {
+    classes,
+    isOpen: (value) => openValues.includes(value),
+    toggle: (value) => {
+      const current = [...openValues];
+      const idx = current.indexOf(value);
+      if (idx >= 0) {
+        current.splice(idx, 1);
+      } else {
+        if (multiple) {
+          current.push(value);
+        } else {
+          current.length = 0;
+          current.push(value);
+        }
+      }
+      openValues = current;
+      onValueChange?.(current);
+    }
+  };
+  return jsxDEV_7x81h0kn(AccordionContext.Provider, {
+    value: ctx,
+    children: jsxDEV_7x81h0kn("div", {
+      "data-orientation": "vertical",
+      "data-accordion-root": "",
+      onKeydown: (event) => {
+        if (isKey(event, Keys.ArrowUp, Keys.ArrowDown, Keys.Home, Keys.End)) {
+          const root = event.currentTarget;
+          const triggers = [...root.querySelectorAll("[data-accordion-trigger]")];
+          handleListNavigation(event, triggers, { orientation: "vertical" });
+        }
+      },
+      children
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+var ComposedAccordion = Object.assign(ComposedAccordionRoot, {
+  Item: AccordionItem,
+  Trigger: AccordionTrigger,
+  Content: AccordionContent
+});
+
+export { ComposedAccordion };

package/dist/shared/chunk-vsc369w3.js

@@ -0,0 +1,185 @@
+import {
+  createDismiss
+} from "./chunk-a6wp8c32.js";
+import {
+  createFloatingPosition,
+  virtualElement
+} from "./chunk-vef3sepw.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+import {
+  Keys,
+  handleListNavigation,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  setDataState,
+  setHidden,
+  setHiddenAnimated
+} from "./chunk-vevfhpc9.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/context-menu/context-menu.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { signal } from "@vertz/ui";
+function ContextMenuRoot(options = {}) {
+  const { onSelect, positioning, ...attrs } = options;
+  const state = {
+    open: signal(false),
+    activeIndex: signal(-1)
+  };
+  const items = [];
+  let floatingCleanup = null;
+  let dismissCleanup = null;
+  function handleClickOutside(event) {
+    const target = event.target;
+    if (!trigger.contains(target) && !content.contains(target)) {
+      close();
+    }
+  }
+  function updateActiveItem(index) {
+    for (let i = 0;i < items.length; i++) {
+      items[i]?.setAttribute("tabindex", i === index ? "0" : "-1");
+    }
+  }
+  function openMenu(x, y) {
+    state.open.value = true;
+    setHidden(content, false);
+    setDataState(content, "open");
+    if (positioning) {
+      const result = createFloatingPosition(virtualElement(x, y), content, {
+        strategy: "fixed",
+        ...positioning
+      });
+      floatingCleanup = result.cleanup;
+      dismissCleanup = createDismiss({
+        onDismiss: close,
+        insideElements: [trigger, content],
+        escapeKey: false
+      });
+    } else {
+      content.style.left = `${x}px`;
+      content.style.top = `${y}px`;
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    state.activeIndex.value = 0;
+    updateActiveItem(0);
+    items[0]?.focus();
+  }
+  function close() {
+    state.open.value = false;
+    setDataState(content, "closed");
+    setHiddenAnimated(content, true);
+    if (positioning) {
+      floatingCleanup?.();
+      floatingCleanup = null;
+      dismissCleanup?.();
+      dismissCleanup = null;
+    } else {
+      document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }
+  const trigger = jsxDEV_7x81h0kn("div", {
+    onContextmenu: (event) => {
+      event.preventDefault();
+      if (state.open.peek()) {
+        close();
+      }
+      openMenu(event.clientX, event.clientY);
+    }
+  }, undefined, false, undefined, this);
+  const contentId = uniqueId("ctx-menu");
+  const content = jsxDEV_7x81h0kn("div", {
+    role: "menu",
+    id: contentId,
+    style: { position: "fixed", display: "none" },
+    "aria-hidden": "true",
+    "data-state": "closed",
+    onKeydown: (event) => {
+      if (isKey(event, Keys.Escape)) {
+        event.preventDefault();
+        close();
+        return;
+      }
+      if (isKey(event, Keys.Enter, Keys.Space)) {
+        event.preventDefault();
+        const active = items[state.activeIndex.peek()];
+        if (active) {
+          const val = active.getAttribute("data-value");
+          if (val !== null) {
+            onSelect?.(val);
+            close();
+          }
+        }
+        return;
+      }
+      const result = handleListNavigation(event, items, { orientation: "vertical" });
+      if (result) {
+        const idx = items.indexOf(result);
+        if (idx >= 0) {
+          state.activeIndex.value = idx;
+          updateActiveItem(idx);
+        }
+        return;
+      }
+      if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+        const char = event.key.toLowerCase();
+        const match = items.find((item) => item.textContent?.toLowerCase().startsWith(char));
+        if (match) {
+          const idx = items.indexOf(match);
+          state.activeIndex.value = idx;
+          updateActiveItem(idx);
+          match.focus();
+        }
+      }
+    }
+  }, undefined, false, undefined, this);
+  function createItem(value, label) {
+    const item = jsxDEV_7x81h0kn("div", {
+      role: "menuitem",
+      "data-value": value,
+      tabindex: "-1",
+      onClick: () => {
+        onSelect?.(value);
+        close();
+      },
+      children: label ?? value
+    }, undefined, false, undefined, this);
+    items.push(item);
+    return item;
+  }
+  function Item(value, label) {
+    return createItem(value, label);
+  }
+  function Group(label) {
+    const el = jsxDEV_7x81h0kn("div", {
+      role: "group",
+      "aria-label": label
+    }, undefined, false, undefined, this);
+    return {
+      el,
+      Item: (value, itemLabel) => createItem(value, itemLabel)
+    };
+  }
+  function Separator() {
+    return jsxDEV_7x81h0kn("hr", {
+      role: "separator"
+    }, undefined, false, undefined, this);
+  }
+  function Label(text) {
+    return jsxDEV_7x81h0kn("div", {
+      role: "none",
+      children: text
+    }, undefined, false, undefined, this);
+  }
+  applyAttrs(trigger, attrs);
+  return { trigger, content, state, Item, Group, Separator, Label };
+}
+var ContextMenu = {
+  Root: ContextMenuRoot
+};
+
+export { ContextMenu };

package/dist/shared/chunk-whq9s8v5.js

@@ -0,0 +1,301 @@
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/calendar/calendar.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+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() {
+  return jsxDEV_7x81h0kn("div", {}, undefined, false, undefined, this);
+}
+function CalendarNavButton(onClick) {
+  return jsxDEV_7x81h0kn("button", {
+    type: "button",
+    onClick
+  }, undefined, false, undefined, this);
+}
+function CalendarHeaderEl(prevButton, title, nextButton) {
+  return jsxDEV_7x81h0kn("div", {
+    children: [
+      prevButton,
+      title,
+      nextButton
+    ]
+  }, undefined, true, undefined, this);
+}
+function CalendarGridEl(onKeydown) {
+  return jsxDEV_7x81h0kn("table", {
+    role: "grid",
+    onKeydown
+  }, undefined, false, undefined, this);
+}
+function CalendarRootEl(header, grid) {
+  return jsxDEV_7x81h0kn("div", {
+    children: [
+      header,
+      grid
+    ]
+  }, undefined, true, undefined, this);
+}
+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 computeGridRows(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;
+  }
+  function buildDayButton(cellDate, month) {
+    const dateStr = cellDate.toISOString().split("T")[0] ?? "";
+    const isOutside = cellDate.getMonth() !== month;
+    const rangeVal = mode === "range" ? state.value.peek() : null;
+    return jsxDEV_7x81h0kn("button", {
+      type: "button",
+      "data-date": dateStr,
+      "data-outside-month": isOutside ? "true" : undefined,
+      "data-today": isSameDay(cellDate, now) ? "true" : undefined,
+      "aria-disabled": isDateDisabled(cellDate) ? "true" : undefined,
+      "aria-selected": isSelected(cellDate) ? "true" : undefined,
+      "data-range-start": rangeVal && "from" in rangeVal && isSameDay(cellDate, rangeVal.from) ? "true" : undefined,
+      "data-range-end": rangeVal && "to" in rangeVal && isSameDay(cellDate, rangeVal.to) ? "true" : undefined,
+      "data-in-range": rangeVal && isInRange(cellDate) ? "true" : undefined,
+      onClick: () => {
+        selectDate(cellDate);
+        rebuildGrid();
+      },
+      children: cellDate.getDate()
+    }, undefined, false, undefined, this);
+  }
+  function buildGrid() {
+    const display = state.displayMonth.peek();
+    const year = display.getFullYear();
+    const month = display.getMonth();
+    const rows = computeGridRows(year, month);
+    const thead = jsxDEV_7x81h0kn("thead", {
+      children: jsxDEV_7x81h0kn("tr", {
+        children: Array.from({ length: 7 }, (_, i) => {
+          const dayIndex = (weekStartsOn + i) % 7;
+          return jsxDEV_7x81h0kn("th", {
+            scope: "col",
+            children: DAY_NAMES[dayIndex] ?? ""
+          }, undefined, false, undefined, this);
+        })
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this);
+    const tbody = jsxDEV_7x81h0kn("tbody", {
+      children: rows.map((rowDates) => jsxDEV_7x81h0kn("tr", {
+        children: rowDates.map((cellDate) => jsxDEV_7x81h0kn("td", {
+          role: "gridcell",
+          children: buildDayButton(cellDate, month)
+        }, undefined, false, undefined, this))
+      }, undefined, false, undefined, this))
+    }, undefined, false, undefined, this);
+    grid.replaceChildren(thead, tbody);
+  }
+  function rebuildGrid() {
+    updateTitle();
+    buildGrid();
+  }
+  function navigateMonth(delta) {
+    state.displayMonth.value = addMonths(state.displayMonth.peek(), delta);
+    onMonthChange?.(state.displayMonth.peek());
+    rebuildGrid();
+  }
+  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);
+  function destroy() {}
+  applyAttrs(root, attrs);
+  return { root, header, title, prevButton, nextButton, grid, state, destroy };
+}
+var Calendar = {
+  Root: CalendarRoot
+};
+
+export { Calendar };

package/dist/shared/{chunk-hze1f32t.js → chunk-wrqddgaj.js}

@@ -1,6 +1,6 @@
 import {
   Menu
-} from "./chunk-s0xgd8vg.js";
+} from "./chunk-ennxcymj.js";
 
 // src/dropdown-menu/dropdown-menu.ts
 var DropdownMenu = {