@vertz/ui-primitives 0.2.38 → 0.2.42

package/dist/shared/chunk-nk55etpp.js

@@ -0,0 +1,65 @@
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+import {
+  setDataState
+} from "./chunk-vevfhpc9.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/toast/toast.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { signal } from "@vertz/ui";
+function RegionElement(politeness) {
+  return jsxDEV_7x81h0kn("div", {
+    role: "status",
+    "aria-live": politeness,
+    "aria-atomic": "false",
+    "data-state": "empty"
+  }, undefined, false, undefined, this);
+}
+function MessageElement(id, content) {
+  return jsxDEV_7x81h0kn("div", {
+    role: "status",
+    "data-toast-id": id,
+    "data-state": "open",
+    children: content
+  }, undefined, false, undefined, this);
+}
+function ToastRoot(options = {}) {
+  const { duration = 5000, politeness = "polite", ...attrs } = options;
+  const state = { messages: signal([]) };
+  const region = RegionElement(politeness);
+  applyAttrs(region, attrs);
+  function announce(content) {
+    const id = uniqueId("toast");
+    const el = MessageElement(id, content);
+    const msg = { id, content, el };
+    state.messages.value = [...state.messages.peek(), msg];
+    region.appendChild(el);
+    setDataState(region, "active");
+    if (duration > 0) {
+      setTimeout(() => dismiss(id), duration);
+    }
+    return msg;
+  }
+  function dismiss(id) {
+    const messages = state.messages.peek().filter((m) => m.id !== id);
+    state.messages.value = messages;
+    const el = region.querySelector(`[data-toast-id="${id}"]`);
+    if (el) {
+      setDataState(el, "closed");
+      el.remove();
+    }
+    if (messages.length === 0) {
+      setDataState(region, "empty");
+    }
+  }
+  return { region, state, announce, dismiss };
+}
+var Toast = {
+  Root: ToastRoot
+};
+
+export { Toast };

package/dist/shared/chunk-nkh1ks3k.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/dropdown-menu/dropdown-menu-composed.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { createContext, ref, useContext } from "@vertz/ui";
+var DropdownMenuContext = createContext(undefined, "@vertz/ui-primitives::DropdownMenuContext");
+function useDropdownMenuContext(componentName) {
+  const ctx = useContext(DropdownMenuContext);
+  if (!ctx) {
+    throw new Error(`<DropdownMenu.${componentName}> must be used inside <DropdownMenu>. ` + "Ensure it is a direct or nested child of the DropdownMenu root component.");
+  }
+  return ctx;
+}
+function MenuTrigger({ children }) {
+  const ctx = useDropdownMenuContext("Trigger");
+  return jsxDEV_7x81h0kn("span", {
+    style: { display: "contents" },
+    "data-dropdownmenu-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 = useDropdownMenuContext("Content");
+  const instanceIndex = ctx._contentCount.value++;
+  if (instanceIndex > 0) {
+    console.warn("Duplicate <DropdownMenu.Content> detected – only the first is used");
+  }
+  return jsxDEV_7x81h0kn("div", {
+    ref: ctx.contentRef,
+    role: "menu",
+    tabindex: "-1",
+    id: ctx.contentId,
+    "data-dropdownmenu-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 = useDropdownMenuContext("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 = useDropdownMenuContext("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 } = useDropdownMenuContext("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 } = useDropdownMenuContext("Separator");
+  return jsxDEV_7x81h0kn("hr", {
+    role: "separator",
+    class: cn(classes?.separator, cls ?? classProp)
+  }, undefined, false, undefined, this);
+}
+function ComposedDropdownMenuRoot({
+  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-dropdownmenu-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(DropdownMenuContext.Provider, {
+    value: ctx,
+    children: jsxDEV_7x81h0kn("span", {
+      style: { display: "contents" },
+      "data-dropdownmenu-root": "",
+      children
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+var ComposedDropdownMenu = Object.assign(ComposedDropdownMenuRoot, {
+  Trigger: MenuTrigger,
+  Content: MenuContent,
+  Item: MenuItem,
+  Group: MenuGroup,
+  Label: MenuLabel,
+  Separator: MenuSeparator
+});
+
+export { ComposedDropdownMenu };

package/dist/shared/chunk-pgvpvbpe.js

@@ -0,0 +1,26 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+
+// src/button/button-composed.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+function ComposedButtonRoot({
+  classes,
+  className,
+  class: classProp,
+  children,
+  disabled,
+  type,
+  ...rest
+}) {
+  return jsxDEV_7x81h0kn("button", {
+    type: type ?? "button",
+    class: cn(classes?.base, className ?? classProp),
+    disabled: disabled || undefined,
+    ...rest,
+    children
+  }, undefined, false, undefined, this);
+}
+var ComposedButton = ComposedButtonRoot;
+
+export { ComposedButton };

package/dist/shared/chunk-pma8gnv7.js

@@ -0,0 +1,178 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+
+// src/scroll-area/scroll-area-composed.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { ref } from "@vertz/ui";
+function ComposedScrollAreaRoot({
+  children,
+  classes,
+  orientation = "vertical"
+}) {
+  const viewportRef = ref();
+  const scrollbarYRef = ref();
+  const scrollbarXRef = ref();
+  const thumbYRef = ref();
+  const thumbXRef = ref();
+  let isDraggingY = false;
+  let startY = 0;
+  let startScrollTop = 0;
+  let isDraggingX = false;
+  let startX = 0;
+  let startScrollLeft = 0;
+  function syncThumbY() {
+    const vp = viewportRef.current;
+    const thumb = thumbYRef.current;
+    if (!vp || !thumb)
+      return;
+    const { scrollTop, scrollHeight, clientHeight } = vp;
+    if (scrollHeight <= clientHeight) {
+      thumb.style.height = "0";
+      return;
+    }
+    const ratio = clientHeight / scrollHeight;
+    thumb.style.height = `${ratio * 100}%`;
+    const scrollRatio = scrollTop / (scrollHeight - clientHeight);
+    thumb.style.transform = `translateY(${scrollRatio * (1 / ratio - 1) * 100}%)`;
+  }
+  function syncThumbX() {
+    const vp = viewportRef.current;
+    const thumb = thumbXRef.current;
+    if (!vp || !thumb)
+      return;
+    const { scrollLeft, scrollWidth, clientWidth } = vp;
+    if (scrollWidth <= clientWidth) {
+      thumb.style.width = "0";
+      return;
+    }
+    const ratio = clientWidth / scrollWidth;
+    thumb.style.width = `${ratio * 100}%`;
+    const scrollRatio = scrollLeft / (scrollWidth - clientWidth);
+    thumb.style.transform = `translateX(${scrollRatio * (1 / ratio - 1) * 100}%)`;
+  }
+  function handleViewportScroll() {
+    if (orientation === "vertical" || orientation === "both")
+      syncThumbY();
+    if (orientation === "horizontal" || orientation === "both")
+      syncThumbX();
+  }
+  function handleThumbYDown(e) {
+    const vp = viewportRef.current;
+    const thumb = thumbYRef.current;
+    if (!vp || !thumb)
+      return;
+    isDraggingY = true;
+    startY = e.clientY;
+    startScrollTop = vp.scrollTop;
+    thumb.setPointerCapture(e.pointerId);
+    e.preventDefault();
+  }
+  function handleThumbYMove(e) {
+    if (!isDraggingY)
+      return;
+    const vp = viewportRef.current;
+    const scrollbar = scrollbarYRef.current;
+    if (!vp || !scrollbar)
+      return;
+    const delta = e.clientY - startY;
+    const scrollbarHeight = scrollbar.clientHeight;
+    const scrollRange = vp.scrollHeight - vp.clientHeight;
+    if (scrollbarHeight > 0) {
+      vp.scrollTop = startScrollTop + delta / scrollbarHeight * scrollRange;
+    }
+  }
+  function handleThumbYUp(e) {
+    isDraggingY = false;
+    const thumb = thumbYRef.current;
+    if (thumb)
+      thumb.releasePointerCapture(e.pointerId);
+  }
+  function handleThumbXDown(e) {
+    const vp = viewportRef.current;
+    const thumb = thumbXRef.current;
+    if (!vp || !thumb)
+      return;
+    isDraggingX = true;
+    startX = e.clientX;
+    startScrollLeft = vp.scrollLeft;
+    thumb.setPointerCapture(e.pointerId);
+    e.preventDefault();
+  }
+  function handleThumbXMove(e) {
+    if (!isDraggingX)
+      return;
+    const vp = viewportRef.current;
+    const scrollbar = scrollbarXRef.current;
+    if (!vp || !scrollbar)
+      return;
+    const delta = e.clientX - startX;
+    const scrollbarWidth = scrollbar.clientWidth;
+    const scrollRange = vp.scrollWidth - vp.clientWidth;
+    if (scrollbarWidth > 0) {
+      vp.scrollLeft = startScrollLeft + delta / scrollbarWidth * scrollRange;
+    }
+  }
+  function handleThumbXUp(e) {
+    isDraggingX = false;
+    const thumb = thumbXRef.current;
+    if (thumb)
+      thumb.releasePointerCapture(e.pointerId);
+  }
+  const showY = orientation === "vertical" || orientation === "both";
+  const showX = orientation === "horizontal" || orientation === "both";
+  queueMicrotask(() => handleViewportScroll());
+  return jsxDEV_7x81h0kn("div", {
+    "data-part": "scroll-area",
+    style: { position: "relative", overflow: "hidden" },
+    class: cn(classes?.root),
+    children: [
+      jsxDEV_7x81h0kn("div", {
+        ref: viewportRef,
+        "data-part": "scroll-area-viewport",
+        style: { overflow: "scroll", scrollbarWidth: "none" },
+        class: cn(classes?.viewport),
+        onScroll: handleViewportScroll,
+        children: jsxDEV_7x81h0kn("div", {
+          "data-part": "scroll-area-content",
+          children
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      showY && jsxDEV_7x81h0kn("div", {
+        ref: scrollbarYRef,
+        "data-part": "scroll-area-scrollbar",
+        "aria-hidden": "true",
+        "data-orientation": "vertical",
+        style: { position: "absolute", top: "0", right: "0", bottom: "0" },
+        class: cn(classes?.scrollbar),
+        children: jsxDEV_7x81h0kn("div", {
+          ref: thumbYRef,
+          "data-part": "scroll-area-thumb",
+          class: cn(classes?.thumb),
+          onPointerdown: handleThumbYDown,
+          onPointermove: handleThumbYMove,
+          onPointerup: handleThumbYUp
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      showX && jsxDEV_7x81h0kn("div", {
+        ref: scrollbarXRef,
+        "data-part": "scroll-area-scrollbar",
+        "aria-hidden": "true",
+        "data-orientation": "horizontal",
+        style: { position: "absolute", bottom: "0", left: "0", right: "0" },
+        class: cn(classes?.scrollbar),
+        children: jsxDEV_7x81h0kn("div", {
+          ref: thumbXRef,
+          "data-part": "scroll-area-thumb",
+          class: cn(classes?.thumb),
+          onPointerdown: handleThumbXDown,
+          onPointermove: handleThumbXMove,
+          onPointerup: handleThumbXUp
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+var ComposedScrollArea = ComposedScrollAreaRoot;
+
+export { ComposedScrollArea };

package/dist/shared/chunk-q7xv6xze.js

@@ -0,0 +1,131 @@
+import {
+  focusFirst,
+  saveFocus,
+  trapFocus
+} from "./chunk-e2v1c9ex.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+import {
+  Keys,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  setDataState,
+  setDescribedBy,
+  setExpanded,
+  setHidden,
+  setHiddenAnimated,
+  setLabelledBy
+} from "./chunk-vevfhpc9.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/dialog/dialog.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { signal } from "@vertz/ui";
+function DialogRoot(options = {}) {
+  const { modal = true, defaultOpen = false, onOpenChange, ...attrs } = options;
+  const ids = linkedIds("dialog");
+  const titleId = `${ids.contentId}-title`;
+  const descriptionId = `${ids.contentId}-description`;
+  const state = { open: signal(defaultOpen) };
+  let restoreFocus = null;
+  let removeTrap = null;
+  function openDialog() {
+    state.open.value = true;
+    setExpanded(trigger, true);
+    setHidden(overlay, false);
+    setHidden(content, false);
+    setDataState(trigger, "open");
+    setDataState(overlay, "open");
+    setDataState(content, "open");
+    restoreFocus = saveFocus();
+    if (modal) {
+      removeTrap = trapFocus(content);
+    }
+    queueMicrotask(() => focusFirst(content));
+    onOpenChange?.(true);
+  }
+  function closeDialog() {
+    state.open.value = false;
+    setExpanded(trigger, false);
+    setDataState(trigger, "closed");
+    setDataState(overlay, "closed");
+    setDataState(content, "closed");
+    setHiddenAnimated(overlay, true);
+    setHiddenAnimated(content, true);
+    removeTrap?.();
+    removeTrap = null;
+    restoreFocus?.();
+    restoreFocus = null;
+    onOpenChange?.(false);
+  }
+  const trigger = jsxDEV_7x81h0kn("button", {
+    type: "button",
+    id: ids.triggerId,
+    "aria-controls": ids.contentId,
+    "aria-expanded": defaultOpen ? "true" : "false",
+    "data-state": defaultOpen ? "open" : "closed",
+    onClick: () => {
+      if (state.open.peek()) {
+        closeDialog();
+      } else {
+        openDialog();
+      }
+    }
+  }, undefined, false, undefined, this);
+  const overlay = jsxDEV_7x81h0kn("div", {
+    "data-dialog-overlay": "",
+    "aria-hidden": defaultOpen ? "false" : "true",
+    "data-state": defaultOpen ? "open" : "closed",
+    style: { display: defaultOpen ? "" : "none" },
+    onClick: () => closeDialog()
+  }, undefined, false, undefined, this);
+  const content = jsxDEV_7x81h0kn("div", {
+    role: "dialog",
+    id: ids.contentId,
+    "aria-modal": modal ? "true" : undefined,
+    "aria-hidden": defaultOpen ? "false" : "true",
+    "data-state": defaultOpen ? "open" : "closed",
+    style: { display: defaultOpen ? "" : "none" },
+    onKeydown: (event) => {
+      if (isKey(event, Keys.Escape)) {
+        event.preventDefault();
+        event.stopPropagation();
+        closeDialog();
+      }
+    }
+  }, undefined, false, undefined, this);
+  setLabelledBy(content, titleId);
+  setDescribedBy(content, descriptionId);
+  const title = jsxDEV_7x81h0kn("h2", {
+    id: titleId
+  }, undefined, false, undefined, this);
+  const description = jsxDEV_7x81h0kn("p", {
+    id: descriptionId
+  }, undefined, false, undefined, this);
+  const close = jsxDEV_7x81h0kn("button", {
+    type: "button",
+    "aria-label": "Close",
+    onClick: () => closeDialog()
+  }, undefined, false, undefined, this);
+  applyAttrs(content, attrs);
+  return {
+    trigger,
+    overlay,
+    content,
+    title,
+    description,
+    close,
+    state,
+    show: openDialog,
+    hide: closeDialog
+  };
+}
+var Dialog = {
+  Root: DialogRoot
+};
+
+export { Dialog };

package/dist/shared/chunk-qey801nq.js

@@ -0,0 +1,22 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+
+// src/separator/separator-composed.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+function ComposedSeparatorRoot({
+  classes,
+  className,
+  class: classProp,
+  orientation = "horizontal"
+}) {
+  const orientationClass = orientation === "vertical" ? classes?.vertical : classes?.horizontal;
+  return jsxDEV_7x81h0kn("hr", {
+    class: cn(classes?.base, orientationClass, className ?? classProp),
+    role: "separator",
+    "aria-orientation": orientation
+  }, undefined, false, undefined, this);
+}
+var ComposedSeparator = ComposedSeparatorRoot;
+
+export { ComposedSeparator };