@vertz/ui-primitives 0.2.41 → 0.2.43

package/dist/shared/chunk-06m8prfg.js

@@ -0,0 +1,52 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+import {
+  Keys,
+  isKey
+} from "./chunk-7867pr13.js";
+
+// src/switch/switch-composed.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+function ComposedSwitchRoot({
+  classes,
+  defaultChecked = false,
+  disabled = false,
+  onCheckedChange
+}) {
+  let checked = defaultChecked;
+  function toggle() {
+    if (disabled)
+      return;
+    checked = !checked;
+    onCheckedChange?.(checked);
+  }
+  return jsxDEV_7x81h0kn("button", {
+    type: "button",
+    role: "switch",
+    id: uniqueId("switch"),
+    "aria-checked": checked ? "true" : "false",
+    "data-state": checked ? "checked" : "unchecked",
+    disabled,
+    "aria-disabled": disabled ? "true" : undefined,
+    class: cn(classes?.root),
+    onClick: toggle,
+    onKeydown: (e) => {
+      if (isKey(e, Keys.Space)) {
+        e.preventDefault();
+        toggle();
+      }
+    },
+    children: jsxDEV_7x81h0kn("span", {
+      "data-part": "thumb",
+      "data-state": checked ? "checked" : "unchecked",
+      class: cn(classes?.thumb)
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+var ComposedSwitch = ComposedSwitchRoot;
+
+export { ComposedSwitch };

package/dist/shared/chunk-0n9jj8xr.js

@@ -0,0 +1,24 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+
+// src/badge/badge-composed.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+function ComposedBadgeRoot({
+  classes,
+  className,
+  class: classProp,
+  children,
+  style,
+  ...rest
+}) {
+  return jsxDEV_7x81h0kn("span", {
+    class: cn(classes?.base, className ?? classProp),
+    style,
+    ...rest,
+    children
+  }, undefined, false, undefined, this);
+}
+var ComposedBadge = ComposedBadgeRoot;
+
+export { ComposedBadge };

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

@@ -0,0 +1,317 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+import {
+  Keys,
+  isKey
+} from "./chunk-7867pr13.js";
+
+// src/navigation-menu/navigation-menu-composed.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { createContext, ref, useContext } from "@vertz/ui";
+var NavigationMenuContext = createContext(undefined, "@vertz/ui-primitives::NavigationMenuContext");
+var NavigationMenuListContext = createContext(undefined, "@vertz/ui-primitives::NavigationMenuListContext");
+var NavigationMenuItemContext = createContext(undefined, "@vertz/ui-primitives::NavigationMenuItemContext");
+function useNavigationMenuContext(componentName) {
+  const ctx = useContext(NavigationMenuContext);
+  if (!ctx) {
+    throw new Error(`<NavigationMenu.${componentName}> must be used inside <NavigationMenu>. ` + "Ensure it is a direct or nested child of the NavigationMenu root component.");
+  }
+  return ctx;
+}
+function useNavigationMenuListContext(componentName) {
+  const ctx = useContext(NavigationMenuListContext);
+  if (ctx === undefined && !useContext(NavigationMenuContext)) {
+    throw new Error(`<NavigationMenu.${componentName}> must be used inside <NavigationMenu.List>. ` + "Ensure it is a direct or nested child of the NavigationMenu.List component.");
+  }
+}
+function useNavigationMenuItemContext(componentName) {
+  const ctx = useContext(NavigationMenuItemContext);
+  if (!ctx) {
+    throw new Error(`<NavigationMenu.${componentName}> must be used inside <NavigationMenu.Item>. ` + "Ensure it is a direct or nested child of the NavigationMenu.Item component.");
+  }
+  return ctx;
+}
+function NavMenuList({ children, className: cls, class: classProp }) {
+  const ctx = useNavigationMenuContext("List");
+  return jsxDEV_7x81h0kn("div", {
+    "data-part": "nav-list",
+    "data-navmenu-list": "",
+    class: cn(ctx.classes?.list, cls ?? classProp),
+    onKeydown: (event) => {
+      if (!isKey(event, Keys.ArrowLeft, Keys.ArrowRight, Keys.Home, Keys.End))
+        return;
+      const listEl = event.currentTarget;
+      const currentTriggers = [
+        ...listEl.querySelectorAll("[data-navmenu-trigger]")
+      ];
+      const focused = document.activeElement;
+      const currentIndex = currentTriggers.indexOf(focused);
+      if (currentIndex < 0)
+        return;
+      let nextIndex = -1;
+      if (isKey(event, Keys.ArrowRight)) {
+        event.preventDefault();
+        nextIndex = (currentIndex + 1) % currentTriggers.length;
+      } else if (isKey(event, Keys.ArrowLeft)) {
+        event.preventDefault();
+        nextIndex = (currentIndex - 1 + currentTriggers.length) % currentTriggers.length;
+      } else if (isKey(event, Keys.Home)) {
+        event.preventDefault();
+        nextIndex = 0;
+      } else if (isKey(event, Keys.End)) {
+        event.preventDefault();
+        nextIndex = currentTriggers.length - 1;
+      }
+      const nextTrigger = currentTriggers[nextIndex];
+      if (nextTrigger) {
+        for (let i = 0;i < currentTriggers.length; i++) {
+          currentTriggers[i]?.setAttribute("tabindex", i === nextIndex ? "0" : "-1");
+        }
+        nextTrigger.focus();
+      }
+    },
+    children
+  }, undefined, false, undefined, this);
+}
+function NavMenuItem({ value, children }) {
+  useNavigationMenuListContext("Item");
+  const ids = linkedIds("nav-menu");
+  const triggerRef = ref();
+  const contentRef = ref();
+  const itemCtx = {
+    value,
+    triggerId: ids.triggerId,
+    contentId: ids.contentId,
+    triggerRef,
+    contentRef
+  };
+  return jsxDEV_7x81h0kn(NavigationMenuItemContext.Provider, {
+    value: itemCtx,
+    children: jsxDEV_7x81h0kn("span", {
+      style: { display: "contents" },
+      "data-navmenu-item": "",
+      "data-value": value,
+      children
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function NavMenuTrigger({ children, className: cls, class: classProp }) {
+  const ctx = useNavigationMenuContext("Trigger");
+  const itemCtx = useNavigationMenuItemContext("Trigger");
+  return jsxDEV_7x81h0kn("button", {
+    ref: itemCtx.triggerRef,
+    type: "button",
+    id: itemCtx.triggerId,
+    "aria-controls": itemCtx.contentId,
+    "data-navmenu-trigger": "",
+    "data-value": itemCtx.value,
+    "aria-expanded": "false",
+    "data-state": "closed",
+    class: cn(ctx.classes?.trigger, cls ?? classProp),
+    onClick: () => {
+      if (ctx.getActiveItem() === itemCtx.value) {
+        ctx.closeAll();
+      } else {
+        ctx.openItem(itemCtx.value);
+      }
+    },
+    onMouseenter: () => {
+      ctx.cancelTimers();
+      ctx.scheduleOpen(itemCtx.value);
+    },
+    onMouseleave: () => {
+      ctx.cancelTimers();
+      ctx.scheduleClose();
+    },
+    onKeydown: (event) => {
+      if (isKey(event, Keys.Enter, Keys.Space)) {
+        event.preventDefault();
+        ctx.openItem(itemCtx.value);
+        queueMicrotask(() => {
+          const content = itemCtx.contentRef.current;
+          if (content) {
+            const first = content.querySelector("a, button, [tabindex]");
+            if (first)
+              first.focus();
+          }
+        });
+      }
+      if (isKey(event, Keys.Escape)) {
+        event.preventDefault();
+        ctx.closeAll();
+      }
+    },
+    children
+  }, undefined, false, undefined, this);
+}
+function NavMenuContent({ children, className: cls, class: classProp }) {
+  const ctx = useNavigationMenuContext("Content");
+  const itemCtx = useNavigationMenuItemContext("Content");
+  return jsxDEV_7x81h0kn("div", {
+    ref: itemCtx.contentRef,
+    id: itemCtx.contentId,
+    "data-part": "nav-content",
+    "data-navmenu-content": "",
+    "data-value": itemCtx.value,
+    "aria-hidden": "true",
+    "data-state": "closed",
+    style: { display: "none" },
+    class: cn(ctx.classes?.content, cls ?? classProp),
+    onMouseenter: () => ctx.cancelTimers(),
+    onMouseleave: () => {
+      ctx.cancelTimers();
+      ctx.scheduleClose();
+    },
+    onKeydown: (event) => {
+      if (isKey(event, Keys.Escape)) {
+        event.preventDefault();
+        event.stopPropagation();
+        ctx.closeAll();
+        const trigger = itemCtx.triggerRef.current;
+        if (trigger)
+          trigger.focus();
+      }
+    },
+    children
+  }, undefined, false, undefined, this);
+}
+function NavMenuLink({ href, children, className: cls, class: classProp }) {
+  const ctx = useNavigationMenuContext("Link");
+  useNavigationMenuListContext("Link");
+  return jsxDEV_7x81h0kn("a", {
+    href,
+    "data-navmenu-link": "",
+    class: cn(ctx.classes?.link, cls ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function NavMenuViewport({ className: cls, class: classProp }) {
+  const ctx = useNavigationMenuContext("Viewport");
+  return jsxDEV_7x81h0kn("div", {
+    "data-part": "nav-viewport",
+    "data-navmenu-viewport": "",
+    class: cn(ctx.classes?.viewport, cls ?? classProp)
+  }, undefined, false, undefined, this);
+}
+function ComposedNavigationMenuRoot({
+  children,
+  classes,
+  orientation = "horizontal",
+  delayOpen = 200,
+  delayClose = 300
+}) {
+  const rootId = `nav-menu-${linkedIds("nav-root").triggerId}`;
+  const rootRef = ref();
+  const state = { activeItem: null, openTimeout: null, closeTimeout: null };
+  function cancelTimers() {
+    if (state.openTimeout) {
+      clearTimeout(state.openTimeout);
+      state.openTimeout = null;
+    }
+    if (state.closeTimeout) {
+      clearTimeout(state.closeTimeout);
+      state.closeTimeout = null;
+    }
+  }
+  function getRootEl() {
+    return rootRef.current ?? null;
+  }
+  function openItem(value) {
+    cancelTimers();
+    const root = getRootEl();
+    if (!root)
+      return;
+    if (state.activeItem && state.activeItem !== value) {
+      const prevTrigger = root.querySelector(`[data-navmenu-trigger][data-value="${state.activeItem}"]`);
+      const prevContent = root.querySelector(`[data-navmenu-content][data-value="${state.activeItem}"]`);
+      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";
+      }
+    }
+    const trigger = root.querySelector(`[data-navmenu-trigger][data-value="${value}"]`);
+    const content = root.querySelector(`[data-navmenu-content][data-value="${value}"]`);
+    if (!trigger || !content)
+      return;
+    state.activeItem = 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 viewport = root.querySelector("[data-navmenu-viewport]");
+    if (viewport && content.parentElement !== viewport) {
+      viewport.appendChild(content);
+    }
+  }
+  function closeAll() {
+    cancelTimers();
+    const root = getRootEl();
+    if (!root || !state.activeItem)
+      return;
+    const trigger = root.querySelector(`[data-navmenu-trigger][data-value="${state.activeItem}"]`);
+    const content = root.querySelector(`[data-navmenu-content][data-value="${state.activeItem}"]`);
+    if (trigger) {
+      trigger.setAttribute("aria-expanded", "false");
+      trigger.setAttribute("data-state", "closed");
+    }
+    if (content) {
+      content.setAttribute("data-state", "closed");
+      content.setAttribute("aria-hidden", "true");
+      content.style.display = "none";
+    }
+    state.activeItem = null;
+  }
+  function scheduleOpen(value) {
+    state.openTimeout = setTimeout(() => {
+      openItem(value);
+      state.openTimeout = null;
+    }, delayOpen);
+  }
+  function scheduleClose() {
+    state.closeTimeout = setTimeout(() => {
+      closeAll();
+      state.closeTimeout = null;
+    }, delayClose);
+  }
+  const ctx = {
+    rootId,
+    rootRef,
+    classes,
+    orientation,
+    getActiveItem: () => state.activeItem,
+    openItem,
+    closeAll,
+    scheduleOpen,
+    scheduleClose,
+    cancelTimers
+  };
+  return jsxDEV_7x81h0kn(NavigationMenuContext.Provider, {
+    value: ctx,
+    children: jsxDEV_7x81h0kn("nav", {
+      ref: rootRef,
+      id: rootId,
+      class: cn(classes?.root),
+      children
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+var ComposedNavigationMenu = Object.assign(ComposedNavigationMenuRoot, {
+  List: NavMenuList,
+  Item: NavMenuItem,
+  Trigger: NavMenuTrigger,
+  Content: NavMenuContent,
+  Link: NavMenuLink,
+  Viewport: NavMenuViewport
+});
+
+export { ComposedNavigationMenu };

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

@@ -0,0 +1,45 @@
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+import {
+  Keys,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/toggle/toggle.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+function ToggleRoot(options = {}) {
+  const { defaultPressed = false, disabled = false, onPressedChange, ...attrs } = options;
+  let pressed = defaultPressed;
+  function toggle() {
+    if (disabled)
+      return;
+    pressed = !pressed;
+    onPressedChange?.(pressed);
+  }
+  const el = jsxDEV_7x81h0kn("button", {
+    type: "button",
+    id: uniqueId("toggle"),
+    "aria-pressed": pressed ? "true" : "false",
+    "data-state": pressed ? "on" : "off",
+    disabled,
+    "aria-disabled": disabled ? "true" : undefined,
+    onClick: toggle,
+    onKeydown: (e) => {
+      if (isKey(e, Keys.Space)) {
+        e.preventDefault();
+        toggle();
+      }
+    }
+  }, undefined, false, undefined, this);
+  applyAttrs(el, attrs);
+  return el;
+}
+var Toggle = {
+  Root: ToggleRoot
+};
+
+export { Toggle };

package/dist/shared/chunk-250hj18f.js

@@ -0,0 +1,243 @@
+import {
+  createDismiss
+} from "./chunk-a6wp8c32.js";
+import {
+  createFloatingPosition
+} from "./chunk-vef3sepw.js";
+import {
+  setRovingTabindex
+} from "./chunk-e2v1c9ex.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+import {
+  Keys,
+  handleListNavigation,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  setDataState,
+  setExpanded,
+  setHidden,
+  setHiddenAnimated
+} from "./chunk-vevfhpc9.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/menubar/menubar.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { signal } from "@vertz/ui";
+function MenubarRoot(options = {}) {
+  const { onSelect, positioning, ...attrs } = options;
+  const state = { activeMenu: signal(null) };
+  const triggers = [];
+  const menus = new Map;
+  let floatingCleanup = null;
+  let dismissCleanup = null;
+  function handleClickOutside(event) {
+    const target = event.target;
+    if (!root.contains(target)) {
+      closeAll();
+    }
+  }
+  function closeAll() {
+    for (const [, menu] of menus) {
+      setExpanded(menu.trigger, false);
+      setDataState(menu.trigger, "closed");
+      setDataState(menu.content, "closed");
+      setHiddenAnimated(menu.content, true);
+    }
+    state.activeMenu.value = null;
+    if (positioning) {
+      floatingCleanup?.();
+      floatingCleanup = null;
+      dismissCleanup?.();
+      dismissCleanup = null;
+    } else {
+      document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }
+  function openMenu(value) {
+    const current = state.activeMenu.peek();
+    if (current && current !== value) {
+      const prev = menus.get(current);
+      if (prev) {
+        setExpanded(prev.trigger, false);
+        setDataState(prev.trigger, "closed");
+        setDataState(prev.content, "closed");
+        setHiddenAnimated(prev.content, true);
+      }
+      if (positioning) {
+        floatingCleanup?.();
+        floatingCleanup = null;
+      }
+    }
+    const menu = menus.get(value);
+    if (!menu)
+      return;
+    state.activeMenu.value = value;
+    setExpanded(menu.trigger, true);
+    setHidden(menu.content, false);
+    setDataState(menu.trigger, "open");
+    setDataState(menu.content, "open");
+    if (positioning) {
+      const result = createFloatingPosition(menu.trigger, menu.content, positioning);
+      floatingCleanup = result.cleanup;
+      if (!dismissCleanup) {
+        dismissCleanup = createDismiss({
+          onDismiss: closeAll,
+          insideElements: [root],
+          escapeKey: false
+        });
+      }
+    } else {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    const firstItem = menu.items[0];
+    if (firstItem) {
+      firstItem.setAttribute("tabindex", "0");
+      firstItem.focus();
+    }
+  }
+  const root = jsxDEV_7x81h0kn("div", {
+    role: "menubar",
+    onKeydown: (event) => {
+      if (isKey(event, Keys.ArrowLeft, Keys.ArrowRight, Keys.Home, Keys.End)) {
+        const focused = document.activeElement;
+        const triggerIndex = triggers.indexOf(focused);
+        if (triggerIndex >= 0) {
+          const result = handleListNavigation(event, triggers, { orientation: "horizontal" });
+          if (result && state.activeMenu.peek()) {
+            const newTrigger = result;
+            const menuValue = newTrigger.getAttribute("data-value");
+            if (menuValue)
+              openMenu(menuValue);
+          }
+        }
+      }
+    }
+  }, undefined, false, undefined, this);
+  function Menu(value, label) {
+    const ids = linkedIds("menubar-menu");
+    const menuItems = [];
+    const trigger = jsxDEV_7x81h0kn("button", {
+      type: "button",
+      role: "menuitem",
+      id: ids.triggerId,
+      "aria-controls": ids.contentId,
+      "aria-haspopup": "menu",
+      "data-value": value,
+      "aria-expanded": "false",
+      "data-state": "closed",
+      onClick: () => {
+        if (state.activeMenu.peek() === value) {
+          closeAll();
+        } else {
+          openMenu(value);
+        }
+      },
+      onKeydown: (event) => {
+        if (isKey(event, Keys.ArrowDown, Keys.Enter, Keys.Space)) {
+          event.preventDefault();
+          openMenu(value);
+        }
+      },
+      children: label ?? value
+    }, undefined, false, undefined, this);
+    setRovingTabindex(triggers.concat(trigger), triggers.length);
+    const content = jsxDEV_7x81h0kn("div", {
+      role: "menu",
+      id: ids.contentId,
+      "aria-hidden": "true",
+      "data-state": "closed",
+      style: { display: "none" },
+      onKeydown: (event) => {
+        if (isKey(event, Keys.Escape)) {
+          event.preventDefault();
+          event.stopPropagation();
+          closeAll();
+          trigger.focus();
+          return;
+        }
+        if (isKey(event, Keys.Enter, Keys.Space)) {
+          event.preventDefault();
+          const active = document.activeElement;
+          const activeItem = menuItems.find((item) => item === active);
+          if (activeItem) {
+            const val = activeItem.getAttribute("data-value");
+            if (val !== null) {
+              onSelect?.(val);
+              closeAll();
+              trigger.focus();
+            }
+          }
+          return;
+        }
+        if (isKey(event, Keys.ArrowLeft, Keys.ArrowRight)) {
+          event.preventDefault();
+          const triggerIdx = triggers.indexOf(trigger);
+          let nextIdx;
+          if (isKey(event, Keys.ArrowRight)) {
+            nextIdx = (triggerIdx + 1) % triggers.length;
+          } else {
+            nextIdx = (triggerIdx - 1 + triggers.length) % triggers.length;
+          }
+          const nextTrigger = triggers[nextIdx];
+          if (nextTrigger) {
+            nextTrigger.focus();
+            const nextValue = nextTrigger.getAttribute("data-value");
+            if (nextValue)
+              openMenu(nextValue);
+          }
+          return;
+        }
+        handleListNavigation(event, menuItems, { orientation: "vertical" });
+      }
+    }, undefined, false, undefined, this);
+    function createItem(val, itemLabel) {
+      const item = jsxDEV_7x81h0kn("div", {
+        role: "menuitem",
+        "data-value": val,
+        tabindex: "-1",
+        onClick: () => {
+          onSelect?.(val);
+          closeAll();
+          trigger.focus();
+        },
+        children: itemLabel ?? val
+      }, undefined, false, undefined, this);
+      menuItems.push(item);
+      return item;
+    }
+    function Item(val, itemLabel) {
+      return createItem(val, itemLabel);
+    }
+    function Group(groupLabel) {
+      const el = jsxDEV_7x81h0kn("div", {
+        role: "group",
+        "aria-label": groupLabel
+      }, undefined, false, undefined, this);
+      return {
+        el,
+        Item: (val, l) => createItem(val, l)
+      };
+    }
+    function Separator() {
+      return jsxDEV_7x81h0kn("hr", {
+        role: "separator"
+      }, undefined, false, undefined, this);
+    }
+    triggers.push(trigger);
+    setRovingTabindex(triggers, 0);
+    menus.set(value, { trigger, content, items: menuItems });
+    return { trigger, content, Item, Group, Separator };
+  }
+  applyAttrs(root, attrs);
+  return { root, state, Menu };
+}
+var Menubar = {
+  Root: MenubarRoot
+};
+
+export { Menubar };