@vertz/ui-primitives 0.2.38 → 0.2.42

package/dist/shared/chunk-yzbmkx4r.js

@@ -0,0 +1,155 @@
+import {
+  Keys,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  setDataState,
+  setValueRange
+} from "./chunk-vevfhpc9.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/resizable-panel/resizable-panel.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { signal } from "@vertz/ui";
+function ResizablePanelRoot(options = {}) {
+  const { orientation = "horizontal", onResize, ...attrs } = options;
+  const state = { sizes: signal([]) };
+  const panels = [];
+  const handles = [];
+  function updateSizes(newSizes) {
+    state.sizes.value = [...newSizes];
+    for (let i = 0;i < panels.length; i++) {
+      const panel = panels[i];
+      if (!panel)
+        continue;
+      const size = newSizes[i] ?? 0;
+      panel.el.style.flex = `0 0 ${size}%`;
+    }
+    for (let i = 0;i < handles.length; i++) {
+      const handle = handles[i];
+      const leftPanel = panels[i];
+      if (handle && leftPanel) {
+        const size = newSizes[i] ?? 0;
+        setValueRange(handle, Math.round(size), Math.round(leftPanel.minSize), Math.round(leftPanel.maxSize));
+      }
+    }
+    onResize?.(newSizes);
+  }
+  const root = jsxDEV_7x81h0kn("div", {
+    style: { display: "flex", flexDirection: orientation === "horizontal" ? "row" : "column" },
+    "data-orientation": orientation
+  }, undefined, false, undefined, this);
+  function Panel(panelOptions = {}) {
+    const { defaultSize, minSize = 0, maxSize = 100 } = panelOptions;
+    const el = jsxDEV_7x81h0kn("div", {
+      "data-panel": ""
+    }, undefined, false, undefined, this);
+    panels.push({ el, minSize, maxSize });
+    const sizes = state.sizes.peek();
+    if (defaultSize != null) {
+      sizes.push(defaultSize);
+    } else {
+      const equalSize = 100 / panels.length;
+      sizes.length = 0;
+      for (let i = 0;i < panels.length; i++) {
+        sizes.push(equalSize);
+      }
+    }
+    updateSizes(sizes);
+    return el;
+  }
+  function Handle() {
+    const handleIndex = handles.length;
+    const handle = jsxDEV_7x81h0kn("div", {
+      role: "separator",
+      tabindex: "0",
+      "data-orientation": orientation,
+      "data-state": "idle",
+      onKeydown: (event) => {
+        const sizes = [...state.sizes.peek()];
+        const leftIdx = handleIndex;
+        const rightIdx = handleIndex + 1;
+        const leftPanel = panels[leftIdx];
+        const rightPanel = panels[rightIdx];
+        if (!leftPanel || !rightPanel)
+          return;
+        let leftSize = sizes[leftIdx] ?? 0;
+        let rightSize = sizes[rightIdx] ?? 0;
+        const STEP = 5;
+        const growKey = orientation === "horizontal" ? Keys.ArrowRight : Keys.ArrowDown;
+        const shrinkKey = orientation === "horizontal" ? Keys.ArrowLeft : Keys.ArrowUp;
+        if (isKey(event, growKey)) {
+          event.preventDefault();
+          const delta = Math.min(STEP, rightSize - rightPanel.minSize, leftPanel.maxSize - leftSize);
+          leftSize += delta;
+          rightSize -= delta;
+        } else if (isKey(event, shrinkKey)) {
+          event.preventDefault();
+          const delta = Math.min(STEP, leftSize - leftPanel.minSize, rightPanel.maxSize - rightSize);
+          leftSize -= delta;
+          rightSize += delta;
+        } else if (isKey(event, Keys.Home)) {
+          event.preventDefault();
+          const delta = leftSize - leftPanel.minSize;
+          leftSize -= delta;
+          rightSize += delta;
+        } else if (isKey(event, Keys.End)) {
+          event.preventDefault();
+          const delta = rightSize - rightPanel.minSize;
+          leftSize += delta;
+          rightSize -= delta;
+        } else {
+          return;
+        }
+        sizes[leftIdx] = leftSize;
+        sizes[rightIdx] = rightSize;
+        updateSizes(sizes);
+      },
+      onPointerdown: (event) => {
+        event.preventDefault();
+        handle.setPointerCapture(event.pointerId);
+        setDataState(handle, "dragging");
+        const startPos = orientation === "horizontal" ? event.clientX : event.clientY;
+        const rootSize = orientation === "horizontal" ? root.offsetWidth : root.offsetHeight;
+        const startSizes = [...state.sizes.peek()];
+        function onMove(e) {
+          const currentPos = orientation === "horizontal" ? e.clientX : e.clientY;
+          const delta = (currentPos - startPos) / rootSize * 100;
+          const sizes = [...startSizes];
+          const leftIdx = handleIndex;
+          const rightIdx = handleIndex + 1;
+          const leftPanel = panels[leftIdx];
+          const rightPanel = panels[rightIdx];
+          if (!leftPanel || !rightPanel)
+            return;
+          let newLeft = (startSizes[leftIdx] ?? 0) + delta;
+          let newRight = (startSizes[rightIdx] ?? 0) - delta;
+          newLeft = Math.max(leftPanel.minSize, Math.min(leftPanel.maxSize, newLeft));
+          newRight = Math.max(rightPanel.minSize, Math.min(rightPanel.maxSize, newRight));
+          sizes[leftIdx] = newLeft;
+          sizes[rightIdx] = newRight;
+          updateSizes(sizes);
+        }
+        function onUp(e) {
+          handle.releasePointerCapture(e.pointerId);
+          setDataState(handle, "idle");
+          handle.removeEventListener("pointermove", onMove);
+          handle.removeEventListener("pointerup", onUp);
+        }
+        handle.addEventListener("pointermove", onMove);
+        handle.addEventListener("pointerup", onUp);
+      }
+    }, undefined, false, undefined, this);
+    handles.push(handle);
+    return handle;
+  }
+  applyAttrs(root, attrs);
+  return { root, state, Panel, Handle };
+}
+var ResizablePanel = {
+  Root: ResizablePanelRoot
+};
+
+export { ResizablePanel };

package/dist/shared/chunk-zaen0ajc.js

@@ -0,0 +1,347 @@
+import {
+  createDismiss
+} from "./chunk-a6wp8c32.js";
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  createFloatingPosition
+} from "./chunk-vef3sepw.js";
+import {
+  linkedIds,
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+import {
+  Keys,
+  isKey
+} from "./chunk-7867pr13.js";
+
+// src/menubar/menubar-composed.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { createContext, onMount, ref, useContext } from "@vertz/ui";
+var MenubarContext = createContext(undefined, "@vertz/ui-primitives::MenubarContext");
+function useMenubarContext(componentName) {
+  const ctx = useContext(MenubarContext);
+  if (!ctx) {
+    throw new Error(`<Menubar.${componentName}> must be used inside <Menubar>. ` + "Ensure it is a direct or nested child of the Menubar root component.");
+  }
+  return ctx;
+}
+var MenuContext = createContext(undefined, "@vertz/ui-primitives::MenubarMenuContext");
+function useMenuContext(componentName) {
+  const ctx = useContext(MenuContext);
+  if (!ctx) {
+    throw new Error(`<Menubar.${componentName}> must be used inside <Menubar.Menu>. ` + "Ensure it is a direct or nested child of a Menubar.Menu component.");
+  }
+  return ctx;
+}
+function MenubarMenu({ value, children }) {
+  const barCtx = useMenubarContext("Menu");
+  const ids = linkedIds("menubar-menu");
+  const menuCtx = {
+    menuValue: value,
+    triggerId: ids.triggerId,
+    contentId: ids.contentId,
+    classes: barCtx.classes
+  };
+  return jsxDEV_7x81h0kn(MenuContext.Provider, {
+    value: menuCtx,
+    children: jsxDEV_7x81h0kn("span", {
+      style: { display: "contents" },
+      "data-menubar-menu": "",
+      children
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function MenubarTrigger({ children, className: cls, class: classProp }) {
+  const menuCtx = useMenuContext("Trigger");
+  const barCtx = useMenubarContext("Trigger");
+  const el = jsxDEV_7x81h0kn("button", {
+    type: "button",
+    role: "menuitem",
+    id: menuCtx.triggerId,
+    "aria-controls": menuCtx.contentId,
+    "aria-haspopup": "menu",
+    "data-menubar-trigger": "",
+    "data-value": menuCtx.menuValue,
+    "aria-expanded": "false",
+    "data-state": "closed",
+    class: cn(menuCtx.classes?.trigger, cls ?? classProp),
+    children: children ?? menuCtx.menuValue
+  }, undefined, false, undefined, this);
+  onMount(() => {
+    const btnEl = el;
+    function handleClick() {
+      if (barCtx.getActiveMenu() === menuCtx.menuValue) {
+        barCtx.closeAll();
+      } else {
+        barCtx.openMenu(menuCtx.menuValue);
+      }
+    }
+    function handleKeydown(event) {
+      if (isKey(event, Keys.ArrowDown, Keys.Enter, Keys.Space)) {
+        event.preventDefault();
+        barCtx.openMenu(menuCtx.menuValue);
+      }
+    }
+    btnEl.addEventListener("click", handleClick);
+    btnEl.addEventListener("keydown", handleKeydown);
+    return () => {
+      btnEl.removeEventListener("click", handleClick);
+      btnEl.removeEventListener("keydown", handleKeydown);
+    };
+  });
+  return el;
+}
+function MenubarContent({ children, className: cls, class: classProp }) {
+  const menuCtx = useMenuContext("Content");
+  const barCtx = useMenubarContext("Content");
+  const el = jsxDEV_7x81h0kn("div", {
+    role: "menu",
+    id: menuCtx.contentId,
+    "data-menubar-content": "",
+    "data-value": menuCtx.menuValue,
+    "aria-hidden": "true",
+    "data-state": "closed",
+    style: { display: "none" },
+    class: cn(menuCtx.classes?.content, cls ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+  onMount(() => {
+    const contentEl = el;
+    function handleKeydown(event) {
+      if (isKey(event, Keys.Escape)) {
+        event.preventDefault();
+        barCtx.closeAll();
+        const root = barCtx.rootRef.current;
+        if (root) {
+          const trigger = root.querySelector(`[data-menubar-trigger][data-value="${menuCtx.menuValue}"]`);
+          trigger?.focus();
+        }
+        return;
+      }
+      if (isKey(event, Keys.Enter, Keys.Space)) {
+        event.preventDefault();
+        const items = [...contentEl.querySelectorAll('[role="menuitem"]')];
+        const active = items.find((item) => item === document.activeElement);
+        if (active) {
+          const val = active.getAttribute("data-value");
+          if (val !== null) {
+            barCtx.getOnSelect()?.(val);
+            barCtx.closeAll();
+          }
+        }
+        return;
+      }
+      if (isKey(event, Keys.ArrowDown, Keys.ArrowUp)) {
+        event.preventDefault();
+        const items = [...contentEl.querySelectorAll('[role="menuitem"]')];
+        if (items.length === 0)
+          return;
+        const currentIdx = items.indexOf(document.activeElement);
+        const direction = isKey(event, Keys.ArrowDown) ? 1 : -1;
+        const nextIdx = ((currentIdx + direction) % items.length + items.length) % items.length;
+        items[nextIdx]?.focus();
+        return;
+      }
+      if (isKey(event, Keys.ArrowRight)) {
+        event.preventDefault();
+        event.stopPropagation();
+        barCtx.navigateMenu(1);
+        return;
+      }
+      if (isKey(event, Keys.ArrowLeft)) {
+        event.preventDefault();
+        event.stopPropagation();
+        barCtx.navigateMenu(-1);
+        return;
+      }
+    }
+    contentEl.addEventListener("keydown", handleKeydown);
+    return () => {
+      contentEl.removeEventListener("keydown", handleKeydown);
+    };
+  });
+  return el;
+}
+function MenubarItem({ value, children, className: cls, class: classProp }) {
+  const barCtx = useMenubarContext("Item");
+  const menuCtx = useMenuContext("Item");
+  return jsxDEV_7x81h0kn("div", {
+    role: "menuitem",
+    "data-menubar-item": "",
+    "data-value": value,
+    tabindex: "-1",
+    class: cn(menuCtx.classes?.item, cls ?? classProp),
+    onClick: () => {
+      barCtx.getOnSelect()?.(value);
+      barCtx.closeAll();
+    },
+    children
+  }, undefined, false, undefined, this);
+}
+function MenubarGroup({ label, children, className: cls, class: classProp }) {
+  const menuCtx = useMenuContext("Group");
+  return jsxDEV_7x81h0kn("div", {
+    role: "group",
+    "aria-label": label,
+    class: cn(menuCtx.classes?.group, cls ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function MenubarLabel({ 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 MenubarSeparator({ 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 ComposedMenubarRoot({ children, classes, onSelect, positioning }) {
+  const rootId = uniqueId("menubar");
+  const rootRef = ref();
+  const state = { activeMenu: null, floatingCleanup: null, dismissCleanup: null };
+  function getRootEl() {
+    return rootRef.current ?? null;
+  }
+  function getMenuItems(contentEl) {
+    return [...contentEl.querySelectorAll('[role="menuitem"]')];
+  }
+  function getMenuValues() {
+    const root = getRootEl();
+    if (!root)
+      return [];
+    const triggers = root.querySelectorAll("[data-menubar-trigger]");
+    return [...triggers].map((t) => t.getAttribute("data-value"));
+  }
+  function closeAll() {
+    const root = getRootEl();
+    if (!root)
+      return;
+    const triggers = root.querySelectorAll("[data-menubar-trigger]");
+    const contents = root.querySelectorAll("[data-menubar-content]");
+    for (const trigger of triggers) {
+      trigger.setAttribute("aria-expanded", "false");
+      trigger.setAttribute("data-state", "closed");
+    }
+    for (const content of contents) {
+      content.setAttribute("data-state", "closed");
+      content.setAttribute("aria-hidden", "true");
+      content.style.display = "none";
+    }
+    state.activeMenu = null;
+    state.floatingCleanup?.();
+    state.floatingCleanup = null;
+    state.dismissCleanup?.();
+    state.dismissCleanup = null;
+  }
+  function openMenu(value) {
+    const root = getRootEl();
+    if (!root)
+      return;
+    const current = state.activeMenu;
+    if (current && current !== value) {
+      const prevTrigger = root.querySelector(`[data-menubar-trigger][data-value="${current}"]`);
+      const prevContent = root.querySelector(`[data-menubar-content][data-value="${current}"]`);
+      if (prevTrigger) {
+        prevTrigger.setAttribute("aria-expanded", "false");
+        prevTrigger.setAttribute("data-state", "closed");
+      }
+      if (prevContent) {
+        prevContent.setAttribute("data-state", "closed");
+        prevContent.setAttribute("aria-hidden", "true");
+        prevContent.style.display = "none";
+      }
+      state.floatingCleanup?.();
+      state.floatingCleanup = null;
+    }
+    const trigger = root.querySelector(`[data-menubar-trigger][data-value="${value}"]`);
+    const content = root.querySelector(`[data-menubar-content][data-value="${value}"]`);
+    if (!trigger || !content)
+      return;
+    state.activeMenu = value;
+    trigger.setAttribute("aria-expanded", "true");
+    trigger.setAttribute("data-state", "open");
+    content.setAttribute("aria-hidden", "false");
+    content.setAttribute("data-state", "open");
+    content.style.display = "";
+    {
+      const floatingOpts = positioning ?? { placement: "bottom-start", offset: 4 };
+      content.style.position = "fixed";
+      const result = createFloatingPosition(trigger, content, floatingOpts);
+      state.floatingCleanup = result.cleanup;
+      if (!state.dismissCleanup) {
+        state.dismissCleanup = createDismiss({
+          onDismiss: closeAll,
+          insideElements: [root],
+          escapeKey: false
+        });
+      }
+    }
+    const items = getMenuItems(content);
+    const firstItem = items[0];
+    if (firstItem) {
+      firstItem.setAttribute("tabindex", "0");
+      firstItem.focus();
+    }
+  }
+  function navigateMenu(direction) {
+    const values = getMenuValues();
+    if (values.length === 0)
+      return;
+    const currentIdx = state.activeMenu ? values.indexOf(state.activeMenu) : -1;
+    const nextIdx = ((currentIdx + direction) % values.length + values.length) % values.length;
+    const nextValue = values[nextIdx];
+    if (nextValue) {
+      openMenu(nextValue);
+    }
+  }
+  const ctx = {
+    rootId,
+    rootRef,
+    classes,
+    getOnSelect: () => onSelect,
+    getPositioning: () => positioning,
+    getActiveMenu: () => state.activeMenu,
+    openMenu,
+    closeAll,
+    navigateMenu
+  };
+  return jsxDEV_7x81h0kn(MenubarContext.Provider, {
+    value: ctx,
+    children: jsxDEV_7x81h0kn("div", {
+      ref: rootRef,
+      role: "menubar",
+      id: rootId,
+      class: cn(classes?.root),
+      onKeydown: (event) => {
+        if (state.activeMenu && isKey(event, Keys.ArrowRight)) {
+          event.preventDefault();
+          navigateMenu(1);
+        } else if (state.activeMenu && isKey(event, Keys.ArrowLeft)) {
+          event.preventDefault();
+          navigateMenu(-1);
+        }
+      },
+      children
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+var ComposedMenubar = Object.assign(ComposedMenubarRoot, {
+  Menu: MenubarMenu,
+  Trigger: MenubarTrigger,
+  Content: MenubarContent,
+  Item: MenubarItem,
+  Group: MenubarGroup,
+  Label: MenubarLabel,
+  Separator: MenubarSeparator
+});
+
+export { ComposedMenubar };

package/dist/src/accordion/accordion-composed.js

@@ -1,6 +1,6 @@
 import {
   ComposedAccordion
-} from "../../shared/chunk-9yb26c0w.js";
+} from "../../shared/chunk-vfknb5ht.js";
 export {
   ComposedAccordion
 };

package/dist/src/accordion/accordion.js

@@ -1,6 +1,6 @@
 import {
   Accordion
-} from "../../shared/chunk-q77y3rg4.js";
+} from "../../shared/chunk-tc5rpvyx.js";
 export {
   Accordion
 };

package/dist/src/alert/alert-composed.js

@@ -1,6 +1,6 @@
 import {
   ComposedAlert
-} from "../../shared/chunk-spng4yb9.js";
+} from "../../shared/chunk-2h4m9c71.js";
 export {
   ComposedAlert
 };

package/dist/src/alert-dialog/alert-dialog-composed.js

@@ -1,6 +1,6 @@
 import {
   ComposedAlertDialog
-} from "../../shared/chunk-hfjtkytb.js";
+} from "../../shared/chunk-7zpjshwz.js";
 export {
   ComposedAlertDialog
 };

package/dist/src/alert-dialog/alert-dialog.js

@@ -1,6 +1,6 @@
 import {
   AlertDialog
-} from "../../shared/chunk-n436p5cb.js";
+} from "../../shared/chunk-jetwnv0w.js";
 export {
   AlertDialog
 };

package/dist/src/avatar/avatar-composed.js

@@ -1,6 +1,6 @@
 import {
   ComposedAvatar
-} from "../../shared/chunk-yfzddvxc.js";
+} from "../../shared/chunk-hzk4wfq9.js";
 export {
   ComposedAvatar
 };

package/dist/src/badge/badge-composed.js

@@ -1,6 +1,6 @@
 import {
   ComposedBadge
-} from "../../shared/chunk-v0b5pkcq.js";
+} from "../../shared/chunk-0n9jj8xr.js";
 export {
   ComposedBadge
 };

package/dist/src/badge/badge.js

@@ -1,6 +1,6 @@
 import {
   Badge
-} from "../../shared/chunk-tn0m98j8.js";
+} from "../../shared/chunk-9pdt5aw7.js";
 export {
   Badge
 };

package/dist/src/breadcrumb/breadcrumb-composed.js

@@ -1,6 +1,6 @@
 import {
   ComposedBreadcrumb
-} from "../../shared/chunk-ev367pq3.js";
+} from "../../shared/chunk-2ye674gr.js";
 export {
   ComposedBreadcrumb
 };

package/dist/src/button/button-composed.js

@@ -1,6 +1,6 @@
 import {
   ComposedButton
-} from "../../shared/chunk-hpvjfj0j.js";
+} from "../../shared/chunk-pgvpvbpe.js";
 export {
   ComposedButton
 };

package/dist/src/button/button.js

@@ -1,6 +1,6 @@
 import {
   Button
-} from "../../shared/chunk-nj420k31.js";
+} from "../../shared/chunk-sq27a4h0.js";
 export {
   Button
 };

package/dist/src/calendar/calendar-composed.js

@@ -1,6 +1,6 @@
 import {
   ComposedCalendar
-} from "../../shared/chunk-3jack97k.js";
+} from "../../shared/chunk-caba5bhd.js";
 export {
   ComposedCalendar
 };

package/dist/src/calendar/calendar.js

@@ -1,6 +1,6 @@
 import {
   Calendar
-} from "../../shared/chunk-b4zzg457.js";
+} from "../../shared/chunk-whq9s8v5.js";
 export {
   Calendar
 };

package/dist/src/card/card-composed.js

@@ -1,6 +1,6 @@
 import {
   ComposedCard
-} from "../../shared/chunk-8t0nm721.js";
+} from "../../shared/chunk-hz0e504p.js";
 export {
   ComposedCard
 };

package/dist/src/carousel/carousel-composed.js

@@ -1,6 +1,6 @@
 import {
   ComposedCarousel
-} from "../../shared/chunk-axpbdpgx.js";
+} from "../../shared/chunk-gj4hrssn.js";
 export {
   ComposedCarousel
 };

package/dist/src/carousel/carousel.js

@@ -1,6 +1,6 @@
 import {
   Carousel
-} from "../../shared/chunk-dvk4h36t.js";
+} from "../../shared/chunk-tqhnjcfp.js";
 export {
   Carousel
 };

package/dist/src/checkbox/checkbox-composed.js

@@ -1,6 +1,6 @@
 import {
   ComposedCheckbox
-} from "../../shared/chunk-rdr0rtpr.js";
+} from "../../shared/chunk-taa5pj15.js";
 export {
   ComposedCheckbox
 };

package/dist/src/checkbox/checkbox.js

@@ -1,6 +1,6 @@
 import {
   Checkbox
-} from "../../shared/chunk-pqskzq8t.js";
+} from "../../shared/chunk-c2f63m5n.js";
 export {
   Checkbox
 };

package/dist/src/collapsible/collapsible-composed.js

@@ -1,6 +1,6 @@
 import {
   ComposedCollapsible
-} from "../../shared/chunk-ktbf6xrt.js";
+} from "../../shared/chunk-6zmnqvh6.js";
 export {
   ComposedCollapsible
 };

package/dist/src/collapsible/collapsible.js

@@ -1,6 +1,6 @@
 import {
   Collapsible
-} from "../../shared/chunk-rnqc7735.js";
+} from "../../shared/chunk-tkftdwnq.js";
 export {
   Collapsible
 };