@vertz/ui-primitives 0.2.41 → 0.2.43

package/dist/shared/chunk-gj4hrssn.js

@@ -0,0 +1,135 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+
+// src/carousel/carousel-composed.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { createContext, useContext } from "@vertz/ui";
+var CarouselContext = createContext(undefined, "@vertz/ui-primitives::CarouselContext");
+function CarouselSlide({ children, className: cls, class: classProp }) {
+  const ctx = useContext(CarouselContext);
+  if (!ctx) {
+    throw new Error("<Carousel.Slide> must be used inside <Carousel>. " + "Ensure it is a direct or nested child of the Carousel root component.");
+  }
+  const index = ctx.registerSlide();
+  return jsxDEV_7x81h0kn("div", {
+    role: "group",
+    "aria-roledescription": "slide",
+    "data-carousel-slide": "",
+    "aria-hidden": String(index !== ctx.currentIndex),
+    "aria-label": `Slide ${index + 1} of ${ctx.getSlideCount()}`,
+    "data-state": index === ctx.currentIndex ? "active" : "inactive",
+    class: cn(ctx.classes?.slide, cls ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function CarouselPrevious({ children }) {
+  const ctx = useContext(CarouselContext);
+  if (!ctx) {
+    throw new Error("<Carousel.Previous> must be used inside <Carousel>. " + "Ensure it is a direct or nested child of the Carousel root component.");
+  }
+  return jsxDEV_7x81h0kn("button", {
+    type: "button",
+    "aria-label": "Previous slide",
+    "data-carousel-prev": "",
+    disabled: !ctx.loop && ctx.currentIndex <= 0,
+    class: cn(ctx.classes?.prevButton),
+    children: children ?? "‹"
+  }, undefined, false, undefined, this);
+}
+function CarouselNext({ children }) {
+  const ctx = useContext(CarouselContext);
+  if (!ctx) {
+    throw new Error("<Carousel.Next> must be used inside <Carousel>. " + "Ensure it is a direct or nested child of the Carousel root component.");
+  }
+  return jsxDEV_7x81h0kn("button", {
+    type: "button",
+    "aria-label": "Next slide",
+    "data-carousel-next": "",
+    disabled: !ctx.loop && ctx.currentIndex >= ctx.getSlideCount() - 1,
+    class: cn(ctx.classes?.nextButton),
+    children: children ?? "›"
+  }, undefined, false, undefined, this);
+}
+function ComposedCarouselRoot({
+  children,
+  classes,
+  orientation = "horizontal",
+  loop = false,
+  defaultIndex = 0,
+  onSlideChange
+}) {
+  let currentIndex = defaultIndex;
+  const _reg = { nextIdx: 0 };
+  let slideCount = 0;
+  function registerSlide() {
+    const idx = _reg.nextIdx++;
+    slideCount = _reg.nextIdx;
+    return idx;
+  }
+  function goTo(index) {
+    const count = _reg.nextIdx;
+    if (count === 0)
+      return;
+    let next = index;
+    if (loop) {
+      next = (index % count + count) % count;
+    } else {
+      next = Math.max(0, Math.min(count - 1, index));
+    }
+    if (next === currentIndex)
+      return;
+    currentIndex = next;
+    onSlideChange?.(next);
+  }
+  function handleClick(e) {
+    const target = e.target;
+    if (target.closest("[data-carousel-prev]"))
+      goTo(currentIndex - 1);
+    if (target.closest("[data-carousel-next]"))
+      goTo(currentIndex + 1);
+  }
+  function handleKeydown(e) {
+    const prevKey = orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
+    const nextKey = orientation === "horizontal" ? "ArrowRight" : "ArrowDown";
+    if (e.key === prevKey) {
+      e.preventDefault();
+      goTo(currentIndex - 1);
+    }
+    if (e.key === nextKey) {
+      e.preventDefault();
+      goTo(currentIndex + 1);
+    }
+  }
+  const ctx = {
+    registerSlide,
+    currentIndex,
+    getSlideCount: () => slideCount,
+    loop,
+    classes
+  };
+  return jsxDEV_7x81h0kn(CarouselContext.Provider, {
+    value: ctx,
+    children: jsxDEV_7x81h0kn("div", {
+      role: "region",
+      "aria-roledescription": "carousel",
+      "data-carousel-root": "",
+      "data-orientation": orientation,
+      class: cn(classes?.root),
+      onClick: handleClick,
+      onKeydown: handleKeydown,
+      children: jsxDEV_7x81h0kn("div", {
+        "data-carousel-viewport": "",
+        class: cn(classes?.viewport),
+        children
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+var ComposedCarousel = Object.assign(ComposedCarouselRoot, {
+  Slide: CarouselSlide,
+  Previous: CarouselPrevious,
+  Next: CarouselNext
+});
+
+export { ComposedCarousel };

package/dist/shared/chunk-gyvq4gk9.js

@@ -0,0 +1,24 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+
+// src/textarea/textarea-composed.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+function ComposedTextareaRoot({
+  classes,
+  className,
+  class: classProp,
+  value,
+  ...props
+}) {
+  const el = jsxDEV_7x81h0kn("textarea", {
+    class: cn(classes?.base, className ?? classProp),
+    ...props
+  }, undefined, false, undefined, this);
+  if (value !== undefined)
+    el.value = value;
+  return el;
+}
+var ComposedTextarea = ComposedTextareaRoot;
+
+export { ComposedTextarea };

package/dist/shared/chunk-hbnps9sq.js

@@ -0,0 +1,229 @@
+import {
+  createDismiss
+} from "./chunk-a6wp8c32.js";
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  createFloatingPosition,
+  virtualElement
+} from "./chunk-vef3sepw.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+import {
+  Keys,
+  handleListNavigation,
+  isKey
+} from "./chunk-7867pr13.js";
+
+// src/context-menu/context-menu-composed.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { createContext, onMount, ref, useContext } from "@vertz/ui";
+var ContextMenuContext = createContext(undefined, "@vertz/ui-primitives::ContextMenuContext");
+function useContextMenuContext(componentName) {
+  const ctx = useContext(ContextMenuContext);
+  if (!ctx) {
+    throw new Error(`<ContextMenu.${componentName}> must be used inside <ContextMenu>. ` + "Ensure it is a direct or nested child of the ContextMenu root component.");
+  }
+  return ctx;
+}
+function ContextMenuTrigger({ children }) {
+  const ctx = useContextMenuContext("Trigger");
+  const el = jsxDEV_7x81h0kn("div", {
+    style: { display: "contents" },
+    "data-part": "trigger",
+    "data-contextmenu-trigger": "",
+    children
+  }, undefined, false, undefined, this);
+  onMount(() => {
+    const triggerEl = el;
+    function handleContextMenu(e) {
+      e.preventDefault();
+      ctx.open(e.clientX, e.clientY);
+    }
+    triggerEl.addEventListener("contextmenu", handleContextMenu);
+    return () => triggerEl.removeEventListener("contextmenu", handleContextMenu);
+  });
+  return el;
+}
+function ContextMenuContent({ children, className: cls, class: classProp }) {
+  const ctx = useContextMenuContext("Content");
+  const instanceIndex = ctx._contentCount.value++;
+  if (instanceIndex > 0) {
+    console.warn("Duplicate <ContextMenu.Content> detected – only the first is used");
+  }
+  const el = jsxDEV_7x81h0kn("div", {
+    ref: ctx.contentRef,
+    role: "menu",
+    tabindex: "-1",
+    id: ctx.contentId,
+    "data-contextmenu-content": "",
+    "aria-hidden": "true",
+    "data-state": "closed",
+    style: { display: "none" },
+    class: cn(ctx.classes?.content, cls ?? classProp),
+    onKeydown: (event) => {
+      if (isKey(event, Keys.Escape, Keys.Tab)) {
+        event.preventDefault();
+        ctx.close();
+        return;
+      }
+      const el2 = event.currentTarget ?? event.target;
+      const items = [...el2.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" });
+    },
+    children
+  }, undefined, false, undefined, this);
+  return el;
+}
+function ContextMenuItem({ value, children, className: cls, class: classProp }) {
+  const ctx = useContextMenuContext("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 ContextMenuGroup({ label, children, className: cls, class: classProp }) {
+  const ctx = useContextMenuContext("Group");
+  return jsxDEV_7x81h0kn("div", {
+    role: "group",
+    "aria-label": label,
+    class: cn(ctx.classes?.group, cls ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function ContextMenuLabel({ children, className: cls, class: classProp }) {
+  const { classes } = useContextMenuContext("Label");
+  return jsxDEV_7x81h0kn("div", {
+    role: "none",
+    class: cn(classes?.label, cls ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function ContextMenuSeparator({ className: cls, class: classProp }) {
+  const { classes } = useContextMenuContext("Separator");
+  return jsxDEV_7x81h0kn("hr", {
+    role: "separator",
+    class: cn(classes?.separator, cls ?? classProp)
+  }, undefined, false, undefined, this);
+}
+function updateContentDOM(el, isOpen) {
+  el.setAttribute("data-state", isOpen ? "open" : "closed");
+  el.setAttribute("aria-hidden", isOpen ? "false" : "true");
+  el.style.display = isOpen ? "" : "none";
+}
+function ComposedContextMenuRoot({
+  children,
+  classes,
+  onSelect,
+  onOpenChange,
+  positioning
+}) {
+  const ids = linkedIds("ctxmenu");
+  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 updateActiveItem(items, index) {
+    items.forEach((item, i) => {
+      item.setAttribute("tabindex", i === index ? "0" : "-1");
+    });
+  }
+  function open(x, y) {
+    isOpen = true;
+    state.activeIndex = -1;
+    onOpenChange?.(true);
+    const contentEl = getContentEl();
+    if (contentEl) {
+      updateContentDOM(contentEl, true);
+    }
+    queueMicrotask(() => {
+      const el = contentEl ?? getContentEl();
+      if (!el)
+        return;
+      const effectivePositioning = {
+        ...positioning ?? {},
+        placement: positioning?.placement ?? "bottom-start"
+      };
+      const result = createFloatingPosition(virtualElement(x, y), el, effectivePositioning);
+      state.floatingCleanup = result.cleanup;
+      state.dismissCleanup = createDismiss({
+        onDismiss: close,
+        insideElements: [el],
+        escapeKey: false
+      });
+      const items = getItems();
+      updateActiveItem(items, -1);
+      el.focus();
+    });
+  }
+  function close() {
+    isOpen = false;
+    state.floatingCleanup?.();
+    state.floatingCleanup = null;
+    state.dismissCleanup?.();
+    state.dismissCleanup = null;
+    onOpenChange?.(false);
+    const contentEl = getContentEl();
+    if (contentEl) {
+      updateContentDOM(contentEl, false);
+    }
+  }
+  const ctx = {
+    isOpen,
+    contentId: ids.contentId,
+    contentRef,
+    classes,
+    onSelect,
+    open,
+    close,
+    _contentCount: { value: 0 }
+  };
+  return jsxDEV_7x81h0kn(ContextMenuContext.Provider, {
+    value: ctx,
+    children: jsxDEV_7x81h0kn("span", {
+      style: { display: "contents" },
+      "data-contextmenu-root": ids.contentId,
+      children
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+var ComposedContextMenu = Object.assign(ComposedContextMenuRoot, {
+  Trigger: ContextMenuTrigger,
+  Content: ContextMenuContent,
+  Item: ContextMenuItem,
+  Group: ContextMenuGroup,
+  Label: ContextMenuLabel,
+  Separator: ContextMenuSeparator
+});
+
+export { ComposedContextMenu };

package/dist/shared/{chunk-fhss32ya.js → chunk-hdmpyeq9.js}

@@ -21,150 +21,61 @@ import {
 } from "./chunk-2db2dnp3.js";
 
 // src/navigation-menu/navigation-menu.tsx
-import { __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __insert, __on, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
 import { signal } from "@vertz/ui";
 function NavMenuList(triggers, orientation) {
-  const __mfDepth = __pushMountFrame();
-  try {
-    const __mfResult0 = (() => {
-      const __el0 = __element("div");
-      __on(__el0, "keydown", (event) => {
-        if (isKey(event, Keys.ArrowLeft, Keys.ArrowRight, Keys.Home, Keys.End)) {
-          handleListNavigation(event, triggers, {
-            orientation: orientation === "horizontal" ? "horizontal" : "vertical"
-          });
-        }
-      });
-      return __el0;
-    })();
-    __flushMountFrame();
-    return __mfResult0;
-  } catch (__mfErr) {
-    __discardMountFrame(__mfDepth);
-    throw __mfErr;
-  }
+  return jsxDEV_7x81h0kn("div", {
+    onKeydown: (event) => {
+      if (isKey(event, Keys.ArrowLeft, Keys.ArrowRight, Keys.Home, Keys.End)) {
+        handleListNavigation(event, triggers, {
+          orientation: orientation === "horizontal" ? "horizontal" : "vertical"
+        });
+      }
+    }
+  }, undefined, false, undefined, this);
 }
 function NavMenuViewport() {
-  const __mfDepth = __pushMountFrame();
-  try {
-    const __mfResult0 = (() => {
-      const __el0 = __element("div");
-      return __el0;
-    })();
-    __flushMountFrame();
-    return __mfResult0;
-  } catch (__mfErr) {
-    __discardMountFrame(__mfDepth);
-    throw __mfErr;
-  }
+  return jsxDEV_7x81h0kn("div", {}, undefined, false, undefined, this);
 }
 function NavMenuNav(list, viewport) {
-  const __mfDepth = __pushMountFrame();
-  try {
-    const __mfResult0 = (() => {
-      const __el0 = __element("nav");
-      __enterChildren(__el0);
-      __insert(__el0, list);
-      __insert(__el0, viewport);
-      __exitChildren();
-      return __el0;
-    })();
-    __flushMountFrame();
-    return __mfResult0;
-  } catch (__mfErr) {
-    __discardMountFrame(__mfDepth);
-    throw __mfErr;
-  }
+  return jsxDEV_7x81h0kn("nav", {
+    children: [
+      list,
+      viewport
+    ]
+  }, undefined, true, undefined, this);
 }
 function NavMenuItemTrigger(triggerId, contentId, value, label, onClick, onMouseenter, onMouseleave, onKeydown) {
-  const __mfDepth = __pushMountFrame();
-  try {
-    const __mfResult0 = (() => {
-      const __el0 = __element("button");
-      __el0.setAttribute("type", "button");
-      {
-        const __v = triggerId;
-        if (__v != null && __v !== false)
-          __el0.setAttribute("id", __v === true ? "" : __v);
-      }
-      {
-        const __v = contentId;
-        if (__v != null && __v !== false)
-          __el0.setAttribute("aria-controls", __v === true ? "" : __v);
-      }
-      {
-        const __v = value;
-        if (__v != null && __v !== false)
-          __el0.setAttribute("data-value", __v === true ? "" : __v);
-      }
-      __el0.setAttribute("aria-expanded", "false");
-      __el0.setAttribute("data-state", "closed");
-      __on(__el0, "click", onClick);
-      __on(__el0, "mouseenter", onMouseenter);
-      __on(__el0, "mouseleave", onMouseleave);
-      __on(__el0, "keydown", onKeydown);
-      __enterChildren(__el0);
-      __insert(__el0, label ?? value);
-      __exitChildren();
-      return __el0;
-    })();
-    __flushMountFrame();
-    return __mfResult0;
-  } catch (__mfErr) {
-    __discardMountFrame(__mfDepth);
-    throw __mfErr;
-  }
+  return jsxDEV_7x81h0kn("button", {
+    type: "button",
+    id: triggerId,
+    "aria-controls": contentId,
+    "data-value": value,
+    "aria-expanded": "false",
+    "data-state": "closed",
+    onClick,
+    onMouseenter,
+    onMouseleave,
+    onKeydown,
+    children: label ?? value
+  }, undefined, false, undefined, this);
 }
 function NavMenuItemContent(contentId, onMouseenter, onMouseleave, onKeydown) {
-  const __mfDepth = __pushMountFrame();
-  try {
-    const __mfResult0 = (() => {
-      const __el0 = __element("div");
-      {
-        const __v = contentId;
-        if (__v != null && __v !== false)
-          __el0.setAttribute("id", __v === true ? "" : __v);
-      }
-      __el0.setAttribute("aria-hidden", "true");
-      __el0.setAttribute("data-state", "closed");
-      {
-        const __v = { display: "none" };
-        if (__v != null && __v !== false)
-          __el0.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
-      }
-      __on(__el0, "mouseenter", onMouseenter);
-      __on(__el0, "mouseleave", onMouseleave);
-      __on(__el0, "keydown", onKeydown);
-      return __el0;
-    })();
-    __flushMountFrame();
-    return __mfResult0;
-  } catch (__mfErr) {
-    __discardMountFrame(__mfDepth);
-    throw __mfErr;
-  }
+  return jsxDEV_7x81h0kn("div", {
+    id: contentId,
+    "aria-hidden": "true",
+    "data-state": "closed",
+    style: { display: "none" },
+    onMouseenter,
+    onMouseleave,
+    onKeydown
+  }, undefined, false, undefined, this);
 }
 function NavMenuLink(href, label) {
-  const __mfDepth = __pushMountFrame();
-  try {
-    const __mfResult0 = (() => {
-      const __el0 = __element("a");
-      {
-        const __v = href;
-        if (__v != null && __v !== false)
-          __el0.setAttribute("href", __v === true ? "" : __v);
-      }
-      __enterChildren(__el0);
-      __insert(__el0, label);
-      __exitChildren();
-      return __el0;
-    })();
-    __flushMountFrame();
-    return __mfResult0;
-  } catch (__mfErr) {
-    __discardMountFrame(__mfDepth);
-    throw __mfErr;
-  }
+  return jsxDEV_7x81h0kn("a", {
+    href,
+    children: label
+  }, undefined, false, undefined, this);
 }
 function NavigationMenuRoot(options = {}) {
   const { orientation = "horizontal", delayOpen = 200, delayClose = 300, ...attrs } = options;