@vertz/ui-primitives 0.2.41 → 0.2.43

package/dist/shared/chunk-caba5bhd.js

@@ -0,0 +1,427 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+
+// src/calendar/calendar-composed.tsx
+import { jsxDEV as jsxDEV_7x81h0kn, Fragment as Fragment_8vg9x3sq } from "@vertz/ui/jsx-dev-runtime";
+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"];
+var MONTH_OPTIONS = MONTH_NAMES.map((name, index) => ({ name, index }));
+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 formatDate(date) {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  return `${y}-${m}-${d}`;
+}
+function isSelectedDate(date, val) {
+  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 isInRangeDate(date, val) {
+  if (val === null || !("from" in val))
+    return false;
+  const range = val;
+  return date > range.from && date < range.to;
+}
+function isDateDisabledCheck(date, minDate, maxDate, disabled) {
+  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 computeYearRange(now, minDate, maxDate) {
+  const minYear = minDate ? minDate.getFullYear() : now.getFullYear() - 100;
+  const maxYear = maxDate ? maxDate.getFullYear() : now.getFullYear() + 10;
+  const years = [];
+  for (let y = minYear;y <= maxYear; y++) {
+    years.push(y);
+  }
+  return years;
+}
+function isMonthDisabled(month, year, minDate, maxDate) {
+  if (minDate && year === minDate.getFullYear() && month < minDate.getMonth())
+    return true;
+  if (maxDate && year === maxDate.getFullYear() && month > maxDate.getMonth())
+    return true;
+  return false;
+}
+function computeGridRows(display, weekStartsOn) {
+  const year = display.getFullYear();
+  const month = display.getMonth();
+  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 DayCell({
+  cellDate,
+  displayMonth,
+  now,
+  mode,
+  value,
+  minDate,
+  maxDate,
+  disabled,
+  classes,
+  onSelect
+}) {
+  const dateStr = formatDate(cellDate);
+  const isOutside = cellDate.getMonth() !== displayMonth.getMonth();
+  const isToday = isSameDay(cellDate, now);
+  const isDisabled = isDateDisabledCheck(cellDate, minDate, maxDate, disabled);
+  const selected = isSelectedDate(cellDate, value);
+  const rangeVal = value;
+  const isRangeStart = mode === "range" && rangeVal && "from" in rangeVal && isSameDay(cellDate, rangeVal.from);
+  const isRangeEnd = mode === "range" && rangeVal && "to" in rangeVal && isSameDay(cellDate, rangeVal.to);
+  const inRange = mode === "range" && isInRangeDate(cellDate, value);
+  return jsxDEV_7x81h0kn("button", {
+    type: "button",
+    class: cn(classes?.dayButton),
+    "data-date": dateStr,
+    "data-outside-month": isOutside ? "true" : undefined,
+    "data-today": isToday ? "true" : undefined,
+    "aria-disabled": isDisabled ? "true" : undefined,
+    "aria-selected": selected ? "true" : undefined,
+    "data-range-start": isRangeStart ? "true" : undefined,
+    "data-range-end": isRangeEnd ? "true" : undefined,
+    "data-in-range": inRange ? "true" : undefined,
+    onClick: () => onSelect(cellDate),
+    children: cellDate.getDate()
+  }, undefined, false, undefined, this);
+}
+function ComposedCalendarRoot({
+  classes,
+  mode: modeProp = "single",
+  defaultValue,
+  defaultMonth: defaultMonthProp,
+  minDate,
+  maxDate,
+  disabled,
+  weekStartsOn = 0,
+  onValueChange,
+  onMonthChange,
+  captionLayout = "buttons"
+}) {
+  const now = new Date;
+  const mode = modeProp;
+  let displayMonth = defaultMonthProp ?? now;
+  let value = defaultValue ?? null;
+  const dayHeaders = Array.from({ length: 7 }, (_, i) => DAY_NAMES[(weekStartsOn + i) % 7] ?? "");
+  function selectDate(date) {
+    if (isDateDisabledCheck(date, minDate, maxDate, disabled))
+      return;
+    if (mode === "single") {
+      value = date;
+    } else if (mode === "multiple") {
+      const current = value ?? [];
+      const existing = current.findIndex((d) => isSameDay(d, date));
+      if (existing >= 0) {
+        const next = [...current];
+        next.splice(existing, 1);
+        value = next;
+      } else {
+        value = [...current, date];
+      }
+    } else if (mode === "range") {
+      const current = value;
+      if (!current || "to" in current && current.to) {
+        value = { from: date, to: date };
+      } else {
+        if (date < current.from) {
+          value = { from: date, to: current.from };
+        } else {
+          value = { from: current.from, to: date };
+        }
+      }
+    }
+    onValueChange?.(value);
+  }
+  function navigateMonth(delta) {
+    displayMonth = addMonths(displayMonth, delta);
+    onMonthChange?.(displayMonth);
+  }
+  function handleGridKeydown(event) {
+    const gridEl = event.currentTarget;
+    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);
+      return;
+    }
+    if (next) {
+      if (showDropdowns) {
+        const minYear = yearRange[0] ?? now.getFullYear();
+        const maxYear = yearRange[yearRange.length - 1] ?? now.getFullYear();
+        const minMo = minDate && next.getFullYear() === minDate.getFullYear() ? minDate.getMonth() : 0;
+        const maxMo = maxDate && next.getFullYear() === maxDate.getFullYear() ? maxDate.getMonth() : 11;
+        if (next.getFullYear() < minYear || next.getFullYear() > maxYear || next.getFullYear() === minYear && next.getMonth() < minMo || next.getFullYear() === maxYear && next.getMonth() > maxMo) {
+          return;
+        }
+      }
+      const needsMonthChange = next.getMonth() !== displayMonth.getMonth() || next.getFullYear() !== displayMonth.getFullYear();
+      if (needsMonthChange) {
+        displayMonth = new Date(next.getFullYear(), next.getMonth(), 1);
+        onMonthChange?.(displayMonth);
+      }
+      const dateKey = formatDate(next);
+      const focusBtn = () => {
+        const btn = gridEl.querySelector(`button[data-date="${dateKey}"]`);
+        btn?.focus();
+      };
+      if (needsMonthChange) {
+        queueMicrotask(focusBtn);
+      } else {
+        focusBtn();
+      }
+    }
+  }
+  const titleText = `${MONTH_NAMES[displayMonth.getMonth()]} ${displayMonth.getFullYear()}`;
+  const showDropdowns = captionLayout === "dropdown" || captionLayout === "dropdown-buttons";
+  const showButtons = captionLayout === "buttons" || captionLayout === "dropdown-buttons";
+  const yearRange = showDropdowns ? computeYearRange(now, minDate, maxDate) : [];
+  function handleMonthSelect(event) {
+    const target = event.target;
+    const newMonth = Number(target.value);
+    if (isMonthDisabled(newMonth, displayMonth.getFullYear(), minDate, maxDate))
+      return;
+    displayMonth = new Date(displayMonth.getFullYear(), newMonth, 1);
+    onMonthChange?.(displayMonth);
+  }
+  function handleYearSelect(event) {
+    const target = event.target;
+    const newYear = Number(target.value);
+    let month = displayMonth.getMonth();
+    if (isMonthDisabled(month, newYear, minDate, maxDate)) {
+      if (minDate && newYear === minDate.getFullYear())
+        month = minDate.getMonth();
+      else if (maxDate && newYear === maxDate.getFullYear())
+        month = maxDate.getMonth();
+    }
+    displayMonth = new Date(newYear, month, 1);
+    onMonthChange?.(displayMonth);
+  }
+  const effectiveMinYear = showDropdowns ? yearRange[0] ?? now.getFullYear() : 0;
+  const effectiveMaxYear = showDropdowns ? yearRange[yearRange.length - 1] ?? now.getFullYear() : 9999;
+  const effectiveMinMonth = minDate && effectiveMinYear === minDate.getFullYear() ? minDate.getMonth() : 0;
+  const effectiveMaxMonth = maxDate && effectiveMaxYear === maxDate.getFullYear() ? maxDate.getMonth() : 11;
+  const isAtMinBoundary = showDropdowns && displayMonth.getFullYear() === effectiveMinYear && displayMonth.getMonth() === effectiveMinMonth;
+  const isAtMaxBoundary = showDropdowns && displayMonth.getFullYear() === effectiveMaxYear && displayMonth.getMonth() === effectiveMaxMonth;
+  const rows = computeGridRows(displayMonth, weekStartsOn);
+  const prevChevron = jsxDEV_7x81h0kn("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": "2",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    "aria-hidden": "true",
+    children: jsxDEV_7x81h0kn("path", {
+      d: "m15 18-6-6 6-6"
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+  const nextChevron = jsxDEV_7x81h0kn("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": "2",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    "aria-hidden": "true",
+    children: jsxDEV_7x81h0kn("path", {
+      d: "m9 18 6-6-6-6"
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+  return jsxDEV_7x81h0kn("div", {
+    class: cn(classes?.root),
+    children: [
+      jsxDEV_7x81h0kn("div", {
+        class: cn(classes?.header),
+        "data-caption-layout": captionLayout,
+        children: [
+          showButtons && jsxDEV_7x81h0kn("button", {
+            type: "button",
+            class: cn(classes?.navButton),
+            "aria-label": "Previous month",
+            "aria-disabled": isAtMinBoundary ? "true" : undefined,
+            onClick: () => {
+              if (!isAtMinBoundary)
+                navigateMonth(-1);
+            },
+            children: prevChevron
+          }, undefined, false, undefined, this),
+          showDropdowns ? jsxDEV_7x81h0kn(Fragment_8vg9x3sq, {
+            children: [
+              jsxDEV_7x81h0kn("select", {
+                "aria-label": "Select month",
+                class: cn(classes?.monthSelect),
+                value: String(displayMonth.getMonth()),
+                onChange: handleMonthSelect,
+                children: MONTH_OPTIONS.map((mo) => jsxDEV_7x81h0kn("option", {
+                  value: String(mo.index),
+                  disabled: isMonthDisabled(mo.index, displayMonth.getFullYear(), minDate, maxDate),
+                  children: mo.name
+                }, undefined, false, undefined, this))
+              }, undefined, false, undefined, this),
+              jsxDEV_7x81h0kn("select", {
+                "aria-label": "Select year",
+                class: cn(classes?.yearSelect),
+                value: String(displayMonth.getFullYear()),
+                onChange: handleYearSelect,
+                children: yearRange.map((yr) => jsxDEV_7x81h0kn("option", {
+                  value: String(yr),
+                  children: yr
+                }, undefined, false, undefined, this))
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this) : jsxDEV_7x81h0kn("div", {
+            class: cn(classes?.title),
+            children: titleText
+          }, undefined, false, undefined, this),
+          showButtons && jsxDEV_7x81h0kn("button", {
+            type: "button",
+            class: cn(classes?.navButton),
+            "aria-label": "Next month",
+            "aria-disabled": isAtMaxBoundary ? "true" : undefined,
+            onClick: () => {
+              if (!isAtMaxBoundary)
+                navigateMonth(1);
+            },
+            children: nextChevron
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      jsxDEV_7x81h0kn("table", {
+        role: "grid",
+        class: cn(classes?.grid),
+        onKeydown: handleGridKeydown,
+        children: [
+          jsxDEV_7x81h0kn("thead", {
+            children: jsxDEV_7x81h0kn("tr", {
+              children: dayHeaders.map((day) => jsxDEV_7x81h0kn("th", {
+                scope: "col",
+                class: cn(classes?.headCell),
+                children: day
+              }, undefined, false, undefined, this))
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          jsxDEV_7x81h0kn("tbody", {
+            children: rows.map((rowDates) => jsxDEV_7x81h0kn("tr", {
+              children: rowDates.map((cellDate) => jsxDEV_7x81h0kn("td", {
+                role: "gridcell",
+                class: cn(classes?.cell),
+                children: jsxDEV_7x81h0kn(DayCell, {
+                  cellDate,
+                  displayMonth,
+                  now,
+                  mode,
+                  value,
+                  minDate,
+                  maxDate,
+                  disabled,
+                  classes,
+                  onSelect: selectDate
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this))
+            }, undefined, false, undefined, this))
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+var ComposedCalendar = ComposedCalendarRoot;
+
+export { ComposedCalendar };

package/dist/shared/chunk-crym07yc.js

@@ -0,0 +1,264 @@
+import {
+  createDismiss
+} from "./chunk-a6wp8c32.js";
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  createFloatingPosition,
+  resolveLayoutElement
+} from "./chunk-vef3sepw.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+import {
+  Keys,
+  handleListNavigation,
+  isKey
+} from "./chunk-7867pr13.js";
+
+// src/menu/menu-composed.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { createContext, ref, useContext } from "@vertz/ui";
+var MenuContext = createContext(undefined, "@vertz/ui-primitives::MenuContext");
+function useMenuContext(componentName) {
+  const ctx = useContext(MenuContext);
+  if (!ctx) {
+    throw new Error(`<Menu.${componentName}> must be used inside <Menu>. ` + "Ensure it is a direct or nested child of the Menu root component.");
+  }
+  return ctx;
+}
+function MenuTrigger({ children }) {
+  const ctx = useMenuContext("Trigger");
+  return jsxDEV_7x81h0kn("span", {
+    style: { display: "contents" },
+    "data-menu-trigger": "",
+    "aria-haspopup": "menu",
+    "aria-controls": ctx.contentId,
+    "aria-expanded": "false",
+    "data-state": "closed",
+    onClick: () => ctx.toggle(),
+    onKeydown: (event) => {
+      if (isKey(event, Keys.ArrowDown, Keys.Enter, Keys.Space)) {
+        event.preventDefault();
+        if (!ctx.isOpen())
+          ctx.open(true);
+      }
+    },
+    children
+  }, undefined, false, undefined, this);
+}
+function MenuContent({ children, className: cls, class: classProp }) {
+  const ctx = useMenuContext("Content");
+  const instanceIndex = ctx._contentCount.value++;
+  if (instanceIndex > 0) {
+    console.warn("Duplicate <Menu.Content> detected – only the first is used");
+  }
+  return jsxDEV_7x81h0kn("div", {
+    ref: ctx.contentRef,
+    role: "menu",
+    tabindex: "-1",
+    id: ctx.contentId,
+    "data-menu-content": "",
+    "aria-hidden": "true",
+    "data-state": "closed",
+    style: { display: "none" },
+    class: cn(ctx.classes?.content, cls ?? classProp),
+    onKeydown: (event) => {
+      if (isKey(event, Keys.Escape)) {
+        event.preventDefault();
+        ctx.close();
+        return;
+      }
+      const el = event.currentTarget ?? event.target;
+      const items = [...el.querySelectorAll('[role="menuitem"]')];
+      const focusedIdx = items.indexOf(document.activeElement);
+      if (isKey(event, Keys.Enter, Keys.Space)) {
+        event.preventDefault();
+        const active = items[focusedIdx];
+        if (active) {
+          const val = active.getAttribute("data-value");
+          if (val !== null) {
+            ctx.onSelect?.(val);
+            ctx.close();
+          }
+        }
+        return;
+      }
+      handleListNavigation(event, items, { orientation: "vertical" });
+      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)
+          match.focus();
+      }
+    },
+    onClick: (event) => {
+      const target = event.target.closest('[role="menuitem"]');
+      if (target)
+        ctx.close();
+    },
+    children
+  }, undefined, false, undefined, this);
+}
+function MenuItem({ value, children, className: cls, class: classProp }) {
+  const ctx = useMenuContext("Item");
+  return jsxDEV_7x81h0kn("div", {
+    role: "menuitem",
+    "data-value": value,
+    tabindex: "-1",
+    class: cn(ctx.classes?.item, cls ?? classProp),
+    onClick: () => {
+      ctx.onSelect?.(value);
+      ctx.close();
+    },
+    children
+  }, undefined, false, undefined, this);
+}
+function MenuGroup({ label, children, className: cls, class: classProp }) {
+  const ctx = useMenuContext("Group");
+  return jsxDEV_7x81h0kn("div", {
+    role: "group",
+    "aria-label": label,
+    class: cn(ctx.classes?.group, cls ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function MenuLabel({ children, className: cls, class: classProp }) {
+  const { classes } = useMenuContext("Label");
+  return jsxDEV_7x81h0kn("div", {
+    role: "none",
+    class: cn(classes?.label, cls ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function MenuSeparator({ className: cls, class: classProp }) {
+  const { classes } = useMenuContext("Separator");
+  return jsxDEV_7x81h0kn("hr", {
+    role: "separator",
+    class: cn(classes?.separator, cls ?? classProp)
+  }, undefined, false, undefined, this);
+}
+function ComposedMenuRoot({
+  children,
+  classes,
+  onSelect,
+  onOpenChange,
+  positioning
+}) {
+  const ids = linkedIds("menu");
+  const contentRef = ref();
+  let isOpen = false;
+  const state = { activeIndex: -1, floatingCleanup: null, dismissCleanup: null };
+  function getContentEl() {
+    return contentRef.current ?? null;
+  }
+  function getItems() {
+    const content = getContentEl();
+    if (!content)
+      return [];
+    return [...content.querySelectorAll('[role="menuitem"]')];
+  }
+  function getTriggerEl() {
+    const content = getContentEl();
+    const triggerSpan = content?.parentElement?.querySelector("[data-menu-trigger]");
+    if (!triggerSpan)
+      return null;
+    return resolveLayoutElement(triggerSpan);
+  }
+  function updateActiveItem(items, index) {
+    items.forEach((item, i) => {
+      item.setAttribute("tabindex", i === index ? "0" : "-1");
+    });
+  }
+  function syncContentAttrs() {
+    const contentEl = getContentEl();
+    if (!contentEl)
+      return;
+    const open2 = isOpen;
+    contentEl.style.display = open2 ? "" : "none";
+    contentEl.setAttribute("aria-hidden", open2 ? "false" : "true");
+    contentEl.setAttribute("data-state", open2 ? "open" : "closed");
+    const triggerEl = getTriggerEl();
+    if (triggerEl) {
+      triggerEl.setAttribute("aria-expanded", open2 ? "true" : "false");
+      triggerEl.setAttribute("data-state", open2 ? "open" : "closed");
+    }
+  }
+  function open(activateFirst = false) {
+    isOpen = true;
+    state.activeIndex = -1;
+    syncContentAttrs();
+    onOpenChange?.(true);
+    const contentEl = getContentEl();
+    const triggerEl = getTriggerEl();
+    if (!contentEl)
+      return;
+    {
+      const floatingOpts = positioning ?? { placement: "bottom-start", offset: 4 };
+      const refEl = floatingOpts.referenceElement ?? triggerEl ?? contentEl;
+      contentEl.style.position = "fixed";
+      const result = createFloatingPosition(refEl, contentEl, floatingOpts);
+      state.floatingCleanup = result.cleanup;
+      state.dismissCleanup = createDismiss({
+        onDismiss: close,
+        insideElements: [refEl, contentEl, ...triggerEl ? [triggerEl] : []],
+        escapeKey: false
+      });
+    }
+    const items = getItems();
+    if (activateFirst && items.length > 0) {
+      state.activeIndex = 0;
+      updateActiveItem(items, 0);
+      items[0]?.focus();
+    } else {
+      updateActiveItem(items, -1);
+      contentEl.focus();
+    }
+  }
+  function close() {
+    isOpen = false;
+    syncContentAttrs();
+    state.floatingCleanup?.();
+    state.floatingCleanup = null;
+    state.dismissCleanup?.();
+    state.dismissCleanup = null;
+    onOpenChange?.(false);
+    getTriggerEl()?.focus();
+  }
+  function toggle() {
+    if (isOpen)
+      close();
+    else
+      open();
+  }
+  const ctx = {
+    isOpen: () => isOpen,
+    contentId: ids.contentId,
+    contentRef,
+    classes,
+    onSelect,
+    open,
+    close,
+    toggle,
+    _contentCount: { value: 0 }
+  };
+  return jsxDEV_7x81h0kn(MenuContext.Provider, {
+    value: ctx,
+    children: jsxDEV_7x81h0kn("span", {
+      style: { display: "contents" },
+      "data-menu-root": "",
+      children
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+var ComposedMenu = Object.assign(ComposedMenuRoot, {
+  Trigger: MenuTrigger,
+  Content: MenuContent,
+  Item: MenuItem,
+  Group: MenuGroup,
+  Label: MenuLabel,
+  Separator: MenuSeparator
+});
+
+export { ComposedMenu };