@vertz/ui-primitives 0.2.23 → 0.2.25

package/dist/shared/{chunk-pzx0vpq1.js → chunk-00fqgnq1.js}

@@ -4,7 +4,7 @@ import {
 import {
   createFloatingPosition,
   virtualElement
-} from "./chunk-0mcr52hc.js";
+} from "./chunk-vef3sepw.js";
 import {
   Keys,
   handleListNavigation,
@@ -72,7 +72,7 @@ function ContextMenuRoot(options = {}) {
       } else {
         document.removeEventListener("mousedown", handleClickOutside);
       }
-    }, createItem = function(value, label, parent) {
+    }, createItem = function(value, label) {
       const item = (() => {
         const __el2 = __element("div");
         __el2.setAttribute("role", "menuitem");
@@ -92,7 +92,6 @@ function ContextMenuRoot(options = {}) {
         return __el2;
       })();
       items.push(item);
-      (parent ?? content).appendChild(item);
       return item;
     }, Item = function(value, label) {
       return createItem(value, label);
@@ -107,21 +106,19 @@ function ContextMenuRoot(options = {}) {
         }
         return __el3;
       })();
-      content.appendChild(el);
       return {
         el,
-        Item: (value, itemLabel) => createItem(value, itemLabel, el)
+        Item: (value, itemLabel) => createItem(value, itemLabel)
       };
     }, Separator = function() {
-      const hr = (() => {
+      return (() => {
         const __el4 = __element("hr");
+        __el4.setAttribute("data-v-id", "ContextMenuRoot");
         __el4.setAttribute("role", "separator");
         return __el4;
       })();
-      content.appendChild(hr);
-      return hr;
     }, Label = function(text) {
-      const el = (() => {
+      return (() => {
         const __el5 = __element("div");
         __el5.setAttribute("role", "none");
         __enterChildren(__el5);
@@ -129,8 +126,6 @@ function ContextMenuRoot(options = {}) {
         __exitChildren();
         return __el5;
       })();
-      content.appendChild(el);
-      return el;
     };
     const { onSelect, positioning, ...attrs } = options;
     const state = {

package/dist/shared/chunk-1dx23qnr.js

@@ -0,0 +1,232 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  Keys,
+  handleListNavigation,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  setDataState,
+  setExpanded,
+  setHidden,
+  setHiddenAnimated
+} from "./chunk-vevfhpc9.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+
+// src/accordion/accordion-composed.tsx
+import { computed, signal } from "@vertz/ui";
+import { __append, __attr, __child, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __on, __pushMountFrame } from "@vertz/ui/internals";
+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(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    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: __props.value,
+      triggerId,
+      contentId,
+      contentRef,
+      triggerRef,
+      classes: ctx.classes,
+      isOpen: () => ctx.isOpen(__props.value),
+      toggle: () => {
+        const prevHeight = contentRef.current?.scrollHeight ?? 0;
+        ctx.toggle(__props.value);
+        const nowOpen = ctx.isOpen(__props.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");
+        }
+      }
+    };
+    const __mfResult0 = AccordionItemContext.Provider({ get value() {
+      return itemCtx;
+    }, children: () => (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("data-accordion-item", "");
+      __attr(__el0, "data-value", () => __props.value);
+      {
+        const __v = cn(ctx.classes?.item);
+        if (__v != null && __v !== false)
+          __el0.setAttribute("class", __v === true ? "" : __v);
+      }
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })() });
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function AccordionTrigger(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    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 = computed(() => ctx.isOpen());
+    const __mfResult0 = (() => {
+      const __el0 = __element("button");
+      ctx.triggerRef.current = __el0;
+      __el0.setAttribute("type", "button");
+      __attr(__el0, "id", () => ctx.triggerId);
+      __el0.setAttribute("data-accordion-trigger", "");
+      __attr(__el0, "aria-controls", () => ctx.contentId);
+      __attr(__el0, "data-value", () => ctx.value);
+      __attr(__el0, "aria-expanded", () => initiallyOpen.value ? "true" : "false");
+      __attr(__el0, "data-state", () => initiallyOpen.value ? "open" : "closed");
+      __attr(__el0, "class", () => cn(ctx.classes?.trigger, __props.className ?? __props.class));
+      __on(__el0, "click", () => ctx.toggle());
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function AccordionContent(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    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 = computed(() => (() => {
+      const __el0 = __element("div");
+      ctx.contentRef.current = __el0;
+      __el0.setAttribute("role", "region");
+      __attr(__el0, "id", () => ctx.contentId);
+      __el0.setAttribute("data-accordion-content", "");
+      __attr(__el0, "aria-labelledby", () => ctx.triggerId);
+      __attr(__el0, "class", () => cn(ctx.classes?.content, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, (() => {
+        const __el1 = __element("div");
+        __el1.setAttribute("data-part", "content-inner");
+        __enterChildren(__el1);
+        __append(__el1, __child(() => __props.children));
+        __exitChildren();
+        return __el1;
+      })());
+      __exitChildren();
+      return __el0;
+    })());
+    const isOpen = computed(() => ctx.isOpen());
+    el.value.setAttribute("aria-hidden", isOpen.value ? "false" : "true");
+    el.value.setAttribute("data-state", isOpen.value ? "open" : "closed");
+    if (isOpen.value) {
+      el.value.setAttribute("data-initial", "");
+    } else {
+      el.value.style.display = "none";
+    }
+    const __mfResult0 = el.value;
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function ComposedAccordionRoot(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const multiple = computed(() => __props.type === "multiple");
+    const openValues = signal([...__props.defaultValue ?? []], "openValues");
+    const ctx = {
+      classes: __props.classes,
+      isOpen: (value) => openValues.value.includes(value),
+      toggle: (value) => {
+        const current = [...openValues.value];
+        const idx = current.indexOf(value);
+        if (idx >= 0) {
+          current.splice(idx, 1);
+        } else {
+          if (multiple.value) {
+            current.push(value);
+          } else {
+            current.length = 0;
+            current.push(value);
+          }
+        }
+        openValues.value = current;
+        __props.onValueChange?.(current);
+      }
+    };
+    const __mfResult0 = AccordionContext.Provider({ get value() {
+      return ctx;
+    }, children: () => (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("data-orientation", "vertical");
+      __el0.setAttribute("data-accordion-root", "");
+      __on(__el0, "keydown", (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" });
+        }
+      });
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })() });
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ComposedAccordion = Object.assign(ComposedAccordionRoot, {
+  Item: AccordionItem,
+  Trigger: AccordionTrigger,
+  Content: AccordionContent
+});
+
+export { ComposedAccordion };

package/dist/shared/chunk-1hm0mbke.js

@@ -0,0 +1,258 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+
+// src/resizable-panel/resizable-panel-composed.tsx
+import { computed, signal } from "@vertz/ui";
+import { __append, __attr, __child, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __on, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
+import { createContext, useContext } from "@vertz/ui";
+var _groupCounter = { value: 0 };
+var ResizablePanelContext = createContext(undefined, "@vertz/ui-primitives::ResizablePanelContext");
+function ResizablePanelPanel(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useContext(ResizablePanelContext);
+    if (!ctx) {
+      throw new Error("<ResizablePanel.Panel> must be used inside <ResizablePanel>. " + "Ensure it is a direct or nested child of the ResizablePanel root component.");
+    }
+    const index = computed(() => ctx.registerPanel({ defaultSize: __props.defaultSize, minSize: __props.minSize, maxSize: __props.maxSize }));
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("data-part", "panel");
+      __attr(__el0, "data-group", () => ctx.groupId);
+      __attr(__el0, "style", () => ({ flex: `${ctx.getSizeForPanel(index.value)} 1 0`, minWidth: 0, minHeight: 0 }));
+      __attr(__el0, "class", () => cn(ctx.classes?.panel, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function ResizablePanelHandle(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useContext(ResizablePanelContext);
+    if (!ctx) {
+      throw new Error("<ResizablePanel.Handle> must be used inside <ResizablePanel>. " + "Ensure it is a direct or nested child of the ResizablePanel root component.");
+    }
+    const handleIndex = computed(() => ctx.registerHandle());
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("role", "separator");
+      __el0.setAttribute("tabindex", "0");
+      {
+        const __v = { flexShrink: 0 };
+        if (__v != null && __v !== false)
+          __el0.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      __attr(__el0, "data-group", () => ctx.groupId);
+      __attr(__el0, "data-handle-index", () => String(handleIndex.value));
+      __attr(__el0, "data-orientation", () => ctx.orientation);
+      __el0.setAttribute("data-state", "idle");
+      __attr(__el0, "aria-valuenow", () => String(ctx.getAriaForHandle(handleIndex.value).valuenow));
+      __attr(__el0, "aria-valuemin", () => String(ctx.getAriaForHandle(handleIndex.value).valuemin));
+      __attr(__el0, "aria-valuemax", () => String(ctx.getAriaForHandle(handleIndex.value).valuemax));
+      __attr(__el0, "class", () => cn(ctx.classes?.handle, __props.className ?? __props.class));
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function ComposedResizablePanelRoot(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let recomputeSizes = function() {
+      const configs = _reg.panelConfigs;
+      const panelCount = configs.length;
+      if (panelCount === 0)
+        return;
+      const newSizes = new Array(panelCount).fill(0);
+      const explicitIndices = new Set;
+      for (let i = 0;i < panelCount; i++) {
+        const config = configs[i];
+        if (config && config.defaultSize != null) {
+          newSizes[i] = config.defaultSize;
+          explicitIndices.add(i);
+        }
+      }
+      if (explicitIndices.size === 0) {
+        const equal = 100 / panelCount;
+        for (let i = 0;i < panelCount; i++)
+          newSizes[i] = equal;
+      } else {
+        const used = [...explicitIndices].reduce((sum, i) => sum + (newSizes[i] ?? 0), 0);
+        const unsetCount = panelCount - explicitIndices.size;
+        const each = unsetCount > 0 ? (100 - used) / unsetCount : 0;
+        for (let i = 0;i < newSizes.length; i++) {
+          if (!explicitIndices.has(i))
+            newSizes[i] = each;
+        }
+      }
+      sizes.value = newSizes;
+    }, registerPanel = function(opts) {
+      const idx = _reg.nextPanelIdx++;
+      _reg.panelConfigs.push({
+        defaultSize: opts.defaultSize,
+        minSize: opts.minSize ?? 0,
+        maxSize: opts.maxSize ?? 100
+      });
+      recomputeSizes();
+      return idx;
+    }, registerHandle = function() {
+      return _reg.nextHandleIdx++;
+    }, getSizeForPanel = function(index) {
+      return sizes.value[index] ?? 0;
+    }, getAriaForHandle = function(handleIndex) {
+      const config = _reg.panelConfigs[handleIndex];
+      return {
+        valuenow: Math.round(sizes.value[handleIndex] ?? 0),
+        valuemin: Math.round(config?.minSize ?? 0),
+        valuemax: Math.round(config?.maxSize ?? 100)
+      };
+    }, updateSizes = function(newSizes) {
+      sizes.value = [...newSizes];
+      __props.onResize?.(newSizes);
+    }, handleKeydown = function(e) {
+      const ke = e;
+      const target = ke.target;
+      if (target.getAttribute("role") !== "separator")
+        return;
+      if (target.dataset.group !== groupId)
+        return;
+      const handleIndex = Number(target.dataset.handleIndex ?? -1);
+      if (handleIndex < 0)
+        return;
+      const leftIdx = handleIndex;
+      const rightIdx = handleIndex + 1;
+      const leftConfig = _reg.panelConfigs[leftIdx];
+      const rightConfig = _reg.panelConfigs[rightIdx];
+      if (!leftConfig || !rightConfig)
+        return;
+      const leftStart = sizes.value[leftIdx] ?? 0;
+      const rightStart = sizes.value[rightIdx] ?? 0;
+      const STEP = 5;
+      const growKey = (__props.orientation ?? "horizontal") === "horizontal" ? "ArrowRight" : "ArrowDown";
+      const shrinkKey = (__props.orientation ?? "horizontal") === "horizontal" ? "ArrowLeft" : "ArrowUp";
+      let newLeft = leftStart;
+      let newRight = rightStart;
+      if (ke.key === growKey) {
+        ke.preventDefault();
+        const delta = Math.min(STEP, rightStart - rightConfig.minSize, leftConfig.maxSize - leftStart);
+        newLeft += delta;
+        newRight -= delta;
+      } else if (ke.key === shrinkKey) {
+        ke.preventDefault();
+        const delta = Math.min(STEP, leftStart - leftConfig.minSize, rightConfig.maxSize - rightStart);
+        newLeft -= delta;
+        newRight += delta;
+      } else if (ke.key === "Home") {
+        ke.preventDefault();
+        const delta = leftStart - leftConfig.minSize;
+        newLeft -= delta;
+        newRight += delta;
+      } else if (ke.key === "End") {
+        ke.preventDefault();
+        const delta = rightStart - rightConfig.minSize;
+        newLeft += delta;
+        newRight -= delta;
+      } else {
+        return;
+      }
+      const newSizes = sizes.value.slice();
+      newSizes[leftIdx] = newLeft;
+      newSizes[rightIdx] = newRight;
+      updateSizes(newSizes);
+    }, handlePointerdown = function(e) {
+      const pe = e;
+      const target = pe.target;
+      if (target.getAttribute("role") !== "separator")
+        return;
+      if (target.dataset.group !== groupId)
+        return;
+      pe.preventDefault();
+      target.setPointerCapture(pe.pointerId);
+      target.setAttribute("data-state", "dragging");
+      const handleIndex = Number(target.dataset.handleIndex ?? -1);
+      const rootEl = pe.currentTarget;
+      const startPos = (__props.orientation ?? "horizontal") === "horizontal" ? pe.clientX : pe.clientY;
+      const rootSize = (__props.orientation ?? "horizontal") === "horizontal" ? rootEl.offsetWidth : rootEl.offsetHeight;
+      const startSizes = sizes.value.slice();
+      function onMove(ev) {
+        const currentPos = (__props.orientation ?? "horizontal") === "horizontal" ? ev.clientX : ev.clientY;
+        const delta = (currentPos - startPos) / rootSize * 100;
+        const moveSizes = startSizes.slice();
+        const leftIdx = handleIndex;
+        const rightIdx = handleIndex + 1;
+        const leftConfig = _reg.panelConfigs[leftIdx];
+        const rightConfig = _reg.panelConfigs[rightIdx];
+        if (!leftConfig || !rightConfig)
+          return;
+        const rawLeft = Math.max(leftConfig.minSize, Math.min(leftConfig.maxSize, (startSizes[leftIdx] ?? 0) + delta));
+        const rawRight = Math.max(rightConfig.minSize, Math.min(rightConfig.maxSize, (startSizes[rightIdx] ?? 0) - delta));
+        moveSizes[leftIdx] = rawLeft;
+        moveSizes[rightIdx] = rawRight;
+        updateSizes(moveSizes);
+      }
+      function onUp(ev) {
+        target.releasePointerCapture(ev.pointerId);
+        target.setAttribute("data-state", "idle");
+        target.removeEventListener("pointermove", onMove);
+        target.removeEventListener("pointerup", onUp);
+      }
+      target.addEventListener("pointermove", onMove);
+      target.addEventListener("pointerup", onUp);
+    };
+    const groupId = String(_groupCounter.value++);
+    const _reg = {
+      nextPanelIdx: 0,
+      nextHandleIdx: 0,
+      panelConfigs: []
+    };
+    const sizes = signal([], "sizes");
+    const ctx = {
+      groupId,
+      orientation: __props.orientation ?? "horizontal",
+      classes: __props.classes,
+      registerPanel,
+      registerHandle,
+      getSizeForPanel,
+      getAriaForHandle
+    };
+    const __mfResult0 = ResizablePanelContext.Provider({ get value() {
+      return ctx;
+    }, children: () => (() => {
+      const __el0 = __element("div");
+      __attr(__el0, "style", () => ({ display: "flex", flexDirection: (__props.orientation ?? "horizontal") === "horizontal" ? "row" : "column" }));
+      __attr(__el0, "data-orientation", () => __props.orientation ?? "horizontal");
+      __attr(__el0, "data-panel-count", () => sizes.value.length);
+      __attr(__el0, "class", () => __props.classes?.root);
+      __on(__el0, "keydown", handleKeydown);
+      __on(__el0, "pointerdown", handlePointerdown);
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })() });
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ComposedResizablePanel = Object.assign(ComposedResizablePanelRoot, {
+  Panel: ResizablePanelPanel,
+  Handle: ResizablePanelHandle
+});
+
+export { ComposedResizablePanel };

package/dist/shared/{chunk-ww7k2azn.js → chunk-20kwns82.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-e2v1c9ex.js";
 import {
   createFloatingPosition
-} from "./chunk-0mcr52hc.js";
+} from "./chunk-vef3sepw.js";
 import {
   Keys,
   handleListNavigation,
@@ -196,7 +196,7 @@ function MenubarRoot(options = {}) {
         });
         return __el2;
       })();
-      function createItem(val, itemLabel, parent) {
+      function createItem(val, itemLabel) {
         const item = (() => {
           const __el3 = __element("div");
           __el3.setAttribute("role", "menuitem");
@@ -217,7 +217,6 @@ function MenubarRoot(options = {}) {
           return __el3;
         })();
         menuItems.push(item);
-        (parent ?? content).appendChild(item);
         return item;
       }
       function Item(val, itemLabel) {
@@ -234,25 +233,22 @@ function MenubarRoot(options = {}) {
           }
           return __el4;
         })();
-        content.appendChild(el);
         return {
           el,
-          Item: (val, l) => createItem(val, l, el)
+          Item: (val, l) => createItem(val, l)
         };
       }
       function Separator() {
-        const hr = (() => {
+        return (() => {
           const __el5 = __element("hr");
+          __el5.setAttribute("data-v-id", "MenubarRoot");
           __el5.setAttribute("role", "separator");
           return __el5;
         })();
-        content.appendChild(hr);
-        return hr;
       }
       triggers.push(trigger);
       setRovingTabindex(triggers, 0);
       menus.set(value, { trigger, content, items: menuItems });
-      root.appendChild(trigger);
       return { trigger, content, Item, Group, Separator };
     };
     const { onSelect, positioning, ...attrs } = options;