@wow-two-beta/ui 0.0.8 → 0.0.10

package/dist/chunk-ZTHJ5OTI.js

@@ -0,0 +1,697 @@
+import { Portal, AnchoredPositioner, DismissableLayer } from './chunk-YANOG5YR.js';
+import { useControlled } from './chunk-4P2TFUVW.js';
+import { Slot } from './chunk-33IOXQYO.js';
+import { dataAttr, tv } from './chunk-BMBIZLO4.js';
+import { Icon } from './chunk-TDX22OWF.js';
+import { composeRefs } from './chunk-DN7WBRIV.js';
+import { cn } from './chunk-KZ4VFY2T.js';
+import { forwardRef, Fragment, createContext, useId, useRef, useEffect, useCallback, useMemo, useContext, useState } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { FocusScope } from '@radix-ui/react-focus-scope';
+
+var Breadcrumb = forwardRef(
+  ({ items, separator, className, ...props }, ref) => {
+    const sep = separator ?? /* @__PURE__ */ jsx(Icon, { icon: ChevronRight, size: 14 });
+    return /* @__PURE__ */ jsx("nav", { ref, "aria-label": "Breadcrumb", className: cn("text-sm", className), ...props, children: /* @__PURE__ */ jsx("ol", { className: "flex flex-wrap items-center gap-1.5", children: items.map((item, i) => {
+      const isLast = i === items.length - 1;
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("li", { children: item.href && !isLast ? /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: item.href,
+            className: "text-muted-foreground hover:text-foreground hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm",
+            children: item.label
+          }
+        ) : /* @__PURE__ */ jsx("span", { "aria-current": isLast ? "page" : void 0, className: "text-foreground", children: item.label }) }),
+        !isLast && /* @__PURE__ */ jsx("li", { "aria-hidden": "true", className: "text-subtle-foreground", children: sep })
+      ] }, i);
+    }) }) });
+  }
+);
+Breadcrumb.displayName = "Breadcrumb";
+function range(start, end) {
+  return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+}
+function buildPages(total, page, siblings) {
+  if (total <= 1) return [1];
+  const left = Math.max(2, page - siblings);
+  const right = Math.min(total - 1, page + siblings);
+  const pages = [1];
+  if (left > 2) pages.push("ellipsis");
+  pages.push(...range(left, right));
+  if (right < total - 1) pages.push("ellipsis");
+  if (total > 1) pages.push(total);
+  return pages;
+}
+var Pagination = forwardRef(
+  ({ total, page, onPageChange, siblings = 1, className, ...props }, ref) => {
+    const pages = buildPages(total, page, siblings);
+    const go = (p) => onPageChange(Math.min(total, Math.max(1, p)));
+    const baseBtn = "inline-flex h-8 min-w-8 items-center justify-center rounded-md border border-transparent px-2 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50";
+    return /* @__PURE__ */ jsxs("nav", { ref, "aria-label": "Pagination", className: cn("inline-flex items-center gap-1", className), ...props, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Previous page",
+          disabled: page <= 1,
+          onClick: () => go(page - 1),
+          className: cn(baseBtn, "hover:bg-muted"),
+          children: /* @__PURE__ */ jsx(Icon, { icon: ChevronLeft, size: 16 })
+        }
+      ),
+      pages.map(
+        (p, i) => p === "ellipsis" ? /* @__PURE__ */ jsx("span", { className: "px-1 text-muted-foreground", children: "\u2026" }, `e-${i}`) : /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-current": p === page ? "page" : void 0,
+            onClick: () => go(p),
+            className: cn(
+              baseBtn,
+              p === page ? "border-primary bg-primary text-primary-foreground" : "hover:bg-muted"
+            ),
+            children: p
+          },
+          p
+        )
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Next page",
+          disabled: page >= total,
+          onClick: () => go(page + 1),
+          className: cn(baseBtn, "hover:bg-muted"),
+          children: /* @__PURE__ */ jsx(Icon, { icon: ChevronRight, size: 16 })
+        }
+      )
+    ] });
+  }
+);
+Pagination.displayName = "Pagination";
+var SIZE = {
+  sm: "h-8 px-2 text-sm gap-2",
+  md: "h-9 px-2.5 text-sm gap-2.5",
+  lg: "h-11 px-3 text-base gap-3"
+};
+var NavItem = forwardRef(
+  ({ asChild, icon, children, trailing, isActive, size = "md", className, ...props }, ref) => {
+    const Comp = asChild ? Slot : "a";
+    return /* @__PURE__ */ jsxs(
+      Comp,
+      {
+        ref,
+        "aria-current": isActive ? "page" : void 0,
+        "data-active": dataAttr(isActive),
+        className: cn(
+          "group inline-flex w-full items-center rounded-md font-medium text-foreground transition-colors",
+          "hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          "data-[active]:bg-primary-soft data-[active]:text-primary-soft-foreground",
+          SIZE[size],
+          className
+        ),
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground group-data-[active]:text-current", children: icon }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-left", children }),
+          trailing && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: trailing })
+        ]
+      }
+    );
+  }
+);
+NavItem.displayName = "NavItem";
+
+// src/nav/menu/Menu.variants.ts
+var menuVariants = tv({
+  base: "flex min-w-[8rem] flex-col gap-0.5 rounded-md border border-border bg-popover p-1 text-sm text-popover-foreground shadow-md outline-none"
+});
+var menuItemVariants = tv({
+  base: "relative flex w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm outline-none transition-colors focus:bg-muted focus:text-foreground hover:bg-muted hover:text-foreground",
+  variants: {
+    state: {
+      default: "text-popover-foreground",
+      destructive: "text-destructive focus:bg-destructive-soft hover:bg-destructive-soft",
+      disabled: "pointer-events-none opacity-50"
+    }
+  },
+  defaultVariants: { state: "default" }
+});
+var menuLabelVariants = tv({
+  base: "px-2 py-1.5 text-xs font-semibold text-muted-foreground"
+});
+var menuSeparatorVariants = tv({
+  base: "-mx-1 my-1 h-px bg-border"
+});
+var MenuContext = createContext(null);
+function useMenuContext() {
+  const ctx = useContext(MenuContext);
+  if (!ctx) throw new Error("Menu.Item / Group / Label / Separator must be used inside <Menu>");
+  return ctx;
+}
+function Menu({
+  open,
+  anchor,
+  onClose,
+  placement = "bottom-start",
+  offset = 6,
+  "aria-label": ariaLabel,
+  className,
+  children
+}) {
+  const itemsRef = useRef([]);
+  const registerItem = useCallback((entry) => {
+    const idx = itemsRef.current.findIndex((i) => i.id === entry.id);
+    if (idx >= 0) itemsRef.current[idx] = entry;
+    else itemsRef.current.push(entry);
+  }, []);
+  const unregisterItem = useCallback((id) => {
+    itemsRef.current = itemsRef.current.filter((i) => i.id !== id);
+  }, []);
+  const ctx = useMemo(
+    () => ({ registerItem, unregisterItem, itemsRef, onClose }),
+    [registerItem, unregisterItem, onClose]
+  );
+  if (!open) return null;
+  return /* @__PURE__ */ jsx(MenuContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(AnchoredPositioner, { anchor, placement, offset, children: /* @__PURE__ */ jsx(FocusScope, { asChild: true, trapped: true, loop: true, children: /* @__PURE__ */ jsx(
+    DismissableLayer,
+    {
+      onEscape: onClose,
+      onOutsidePointerDown: (e) => {
+        if (anchor?.contains(e.target)) return;
+        onClose();
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "menu",
+          "aria-label": ariaLabel,
+          className: cn(menuVariants(), className),
+          onKeyDown: (e) => {
+            if (e.key === "Tab") {
+              e.preventDefault();
+              onClose();
+            }
+          },
+          children
+        }
+      )
+    }
+  ) }) }) }) });
+}
+var MenuItem = forwardRef(function MenuItem2({ onSelect, disabled = false, state, className, onClick, onKeyDown, children, ...rest }, forwardedRef) {
+  const ctx = useMenuContext();
+  const id = useId();
+  const ref = useRef(null);
+  useEffect(() => {
+    ctx.registerItem({ id, ref: ref.current, disabled });
+    return () => ctx.unregisterItem(id);
+  }, [ctx, id, disabled]);
+  const moveFocus = useCallback(
+    (direction, jump = 1) => {
+      const list = ctx.itemsRef.current.filter((i) => !i.disabled);
+      if (list.length === 0) return;
+      const idx = list.findIndex((i) => i.id === id);
+      let nextIdx = idx + direction * jump;
+      if (idx === -1) nextIdx = direction === 1 ? 0 : list.length - 1;
+      if (nextIdx < 0) nextIdx = list.length - 1;
+      if (nextIdx >= list.length) nextIdx = 0;
+      list[nextIdx]?.ref?.focus();
+    },
+    [ctx, id]
+  );
+  const handleKeyDown = (e) => {
+    onKeyDown?.(e);
+    if (e.defaultPrevented || disabled) return;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        moveFocus(1);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        moveFocus(-1);
+        break;
+      case "Home":
+        e.preventDefault();
+        moveFocus(-1, ctx.itemsRef.current.length);
+        break;
+      case "End":
+        e.preventDefault();
+        moveFocus(1, ctx.itemsRef.current.length);
+        break;
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        onSelect?.();
+        ctx.onClose();
+        break;
+    }
+  };
+  const itemState = state ?? (disabled ? "disabled" : "default");
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref: composeRefs(forwardedRef, ref),
+      type: "button",
+      role: "menuitem",
+      disabled,
+      "aria-disabled": disabled || void 0,
+      "data-disabled": disabled ? "" : void 0,
+      onClick: (e) => {
+        onClick?.(e);
+        if (e.defaultPrevented || disabled) return;
+        onSelect?.();
+        ctx.onClose();
+      },
+      onKeyDown: handleKeyDown,
+      className: cn(menuItemVariants({ state: itemState }), className),
+      ...rest,
+      children
+    }
+  );
+});
+function MenuGroup({ label, children, className, ...rest }) {
+  const labelId = useId();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "group",
+      "aria-labelledby": label ? labelId : void 0,
+      className,
+      ...rest,
+      children: [
+        label && /* @__PURE__ */ jsx("div", { id: labelId, className: menuLabelVariants(), children: label }),
+        children
+      ]
+    }
+  );
+}
+function MenuLabel({
+  children,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn(menuLabelVariants(), className), ...rest, children });
+}
+function MenuSeparator(props) {
+  return /* @__PURE__ */ jsx("div", { role: "separator", className: menuSeparatorVariants(), ...props });
+}
+Menu.Item = MenuItem;
+Menu.Group = MenuGroup;
+Menu.Label = MenuLabel;
+Menu.Separator = MenuSeparator;
+var DropdownMenuContext = createContext(null);
+function useDropdownMenuContext() {
+  const ctx = useContext(DropdownMenuContext);
+  if (!ctx) throw new Error("DropdownMenu.* must be used inside <DropdownMenu>");
+  return ctx;
+}
+function DropdownMenu({
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  placement = "bottom-start",
+  offset = 6,
+  children
+}) {
+  const [open, setOpen] = useControlled({
+    controlled: openProp,
+    default: defaultOpen,
+    onChange: onOpenChange
+  });
+  const triggerRef = useRef(null);
+  const ctx = useMemo(
+    () => ({ open, setOpen, triggerRef, placement, offset }),
+    [open, setOpen, placement, offset]
+  );
+  return /* @__PURE__ */ jsx(DropdownMenuContext.Provider, { value: ctx, children });
+}
+var DropdownMenuTrigger = forwardRef(
+  function DropdownMenuTrigger2({ asChild, onClick, onKeyDown, children, ...rest }, forwardedRef) {
+    const ctx = useDropdownMenuContext();
+    const Component = asChild ? Slot : "button";
+    const handleClick = useCallback(
+      (e) => {
+        onClick?.(e);
+        if (e.defaultPrevented) return;
+        ctx.setOpen(!ctx.open);
+      },
+      [ctx, onClick]
+    );
+    const handleKeyDown = useCallback(
+      (e) => {
+        onKeyDown?.(e);
+        if (e.defaultPrevented) return;
+        if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          ctx.setOpen(true);
+        }
+      },
+      [ctx, onKeyDown]
+    );
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref: composeRefs(forwardedRef, ctx.triggerRef),
+        type: "button",
+        "aria-haspopup": "menu",
+        "aria-expanded": ctx.open,
+        "data-state": ctx.open ? "open" : "closed",
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+function DropdownMenuContent({
+  className,
+  "aria-label": ariaLabel,
+  children
+}) {
+  const ctx = useDropdownMenuContext();
+  return /* @__PURE__ */ jsx(
+    Menu,
+    {
+      open: ctx.open,
+      anchor: ctx.triggerRef.current,
+      onClose: () => {
+        ctx.setOpen(false);
+        requestAnimationFrame(() => ctx.triggerRef.current?.focus());
+      },
+      placement: ctx.placement,
+      offset: ctx.offset,
+      "aria-label": ariaLabel,
+      className,
+      children
+    }
+  );
+}
+DropdownMenu.Trigger = DropdownMenuTrigger;
+DropdownMenu.Content = DropdownMenuContent;
+DropdownMenu.Item = MenuItem;
+DropdownMenu.Group = MenuGroup;
+DropdownMenu.Label = MenuLabel;
+DropdownMenu.Separator = MenuSeparator;
+var ContextMenuContext = createContext(null);
+function useContextMenuContext() {
+  const ctx = useContext(ContextMenuContext);
+  if (!ctx) throw new Error("ContextMenu.* must be used inside <ContextMenu>");
+  return ctx;
+}
+function makeVirtualAnchor(x, y) {
+  const el = document.createElement("div");
+  el.style.position = "fixed";
+  el.style.left = `${x}px`;
+  el.style.top = `${y}px`;
+  el.style.width = "0px";
+  el.style.height = "0px";
+  el.style.pointerEvents = "none";
+  document.body.appendChild(el);
+  return el;
+}
+function ContextMenu({ children }) {
+  const [open, setOpen] = useState(false);
+  const [anchor, setAnchorState] = useState(null);
+  const triggerRef = useRef(null);
+  const setAnchor = useCallback((el) => {
+    setAnchorState((prev) => {
+      if (prev && prev.parentNode === document.body) prev.remove();
+      return el;
+    });
+  }, []);
+  const handleSetOpen = useCallback(
+    (next) => {
+      setOpen(next);
+      if (!next) setAnchor(null);
+    },
+    [setAnchor]
+  );
+  const ctx = useMemo(
+    () => ({ open, setOpen: handleSetOpen, anchor, setAnchor, triggerRef }),
+    [open, handleSetOpen, anchor, setAnchor]
+  );
+  return /* @__PURE__ */ jsx(ContextMenuContext.Provider, { value: ctx, children });
+}
+var ContextMenuTrigger = forwardRef(
+  function ContextMenuTrigger2({ asChild, disabled, onContextMenu, onPointerDown, onPointerCancel, onPointerUp, children, ...rest }, forwardedRef) {
+    const ctx = useContextMenuContext();
+    const longPressTimer = useRef(null);
+    const Component = asChild ? Slot : "div";
+    const handleContextMenu = useCallback(
+      (e) => {
+        onContextMenu?.(e);
+        if (e.defaultPrevented || disabled) return;
+        e.preventDefault();
+        ctx.setAnchor(makeVirtualAnchor(e.clientX, e.clientY));
+        ctx.setOpen(true);
+      },
+      [ctx, disabled, onContextMenu]
+    );
+    const clearLongPress = useCallback(() => {
+      if (longPressTimer.current) clearTimeout(longPressTimer.current);
+      longPressTimer.current = null;
+    }, []);
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref: composeRefs(forwardedRef, ctx.triggerRef),
+        onContextMenu: handleContextMenu,
+        onPointerDown: (e) => {
+          onPointerDown?.(e);
+          if (e.defaultPrevented || disabled || e.pointerType !== "touch") return;
+          const x = e.clientX;
+          const y = e.clientY;
+          longPressTimer.current = setTimeout(() => {
+            ctx.setAnchor(makeVirtualAnchor(x, y));
+            ctx.setOpen(true);
+          }, 600);
+        },
+        onPointerUp: (e) => {
+          onPointerUp?.(e);
+          clearLongPress();
+        },
+        onPointerCancel: (e) => {
+          onPointerCancel?.(e);
+          clearLongPress();
+        },
+        ...rest,
+        children
+      }
+    );
+  }
+);
+function ContextMenuContent({
+  className,
+  placement = "bottom-start",
+  offset = 2,
+  "aria-label": ariaLabel,
+  children
+}) {
+  const ctx = useContextMenuContext();
+  return /* @__PURE__ */ jsx(
+    Menu,
+    {
+      open: ctx.open,
+      anchor: ctx.anchor,
+      onClose: () => ctx.setOpen(false),
+      placement,
+      offset,
+      "aria-label": ariaLabel,
+      className,
+      children
+    }
+  );
+}
+ContextMenu.Trigger = ContextMenuTrigger;
+ContextMenu.Content = ContextMenuContent;
+ContextMenu.Item = MenuItem;
+ContextMenu.Group = MenuGroup;
+ContextMenu.Label = MenuLabel;
+ContextMenu.Separator = MenuSeparator;
+
+// src/nav/menubar/Menubar.variants.ts
+var menubarVariants = tv({
+  base: "flex items-center gap-1 rounded-md border border-border bg-background p-1"
+});
+var menubarTriggerVariants = tv({
+  base: "inline-flex select-none items-center rounded-sm px-3 py-1 text-sm font-medium text-foreground outline-none transition-colors hover:bg-muted focus-visible:bg-muted data-[state=open]:bg-muted"
+});
+var MenubarContext = createContext(null);
+function useMenubarContext() {
+  const ctx = useContext(MenubarContext);
+  if (!ctx) throw new Error("Menubar.* must be used inside <Menubar>");
+  return ctx;
+}
+var MenubarMenuContext = createContext(null);
+function useMenubarMenuContext() {
+  const ctx = useContext(MenubarMenuContext);
+  if (!ctx) throw new Error("Menubar.Trigger / Content must be used inside <Menubar.Menu>");
+  return ctx;
+}
+var Menubar = forwardRef(function Menubar2({ value, defaultValue = null, onValueChange, className, children, ...rest }, ref) {
+  const [activeId, setActiveId] = useControlled({
+    controlled: value,
+    default: defaultValue,
+    onChange: onValueChange
+  });
+  const triggersRef = useRef([]);
+  const registerTrigger = useCallback((id, triggerRef) => {
+    const idx = triggersRef.current.findIndex((t) => t.id === id);
+    if (idx >= 0) triggersRef.current[idx] = { id, ref: triggerRef };
+    else triggersRef.current.push({ id, ref: triggerRef });
+  }, []);
+  const unregisterTrigger = useCallback((id) => {
+    triggersRef.current = triggersRef.current.filter((t) => t.id !== id);
+  }, []);
+  const ctx = useMemo(
+    () => ({ activeId, setActiveId, registerTrigger, unregisterTrigger, triggersRef }),
+    [activeId, setActiveId, registerTrigger, unregisterTrigger]
+  );
+  return /* @__PURE__ */ jsx(MenubarContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "menubar",
+      className: cn(menubarVariants(), className),
+      ...rest,
+      children
+    }
+  ) });
+});
+function MenubarMenu({ value, children }) {
+  const ctx = useMenubarContext();
+  const triggerRef = useRef(null);
+  const open = ctx.activeId === value;
+  const setOpen = useCallback(
+    (next) => {
+      ctx.setActiveId(next ? value : null);
+    },
+    [ctx, value]
+  );
+  const menuCtx = useMemo(
+    () => ({ id: value, open, setOpen, triggerRef }),
+    [value, open, setOpen]
+  );
+  return /* @__PURE__ */ jsx(MenubarMenuContext.Provider, { value: menuCtx, children });
+}
+var MenubarTrigger = forwardRef(
+  function MenubarTrigger2({ className, onClick, onKeyDown, onPointerEnter, children, ...rest }, forwardedRef) {
+    const bar = useMenubarContext();
+    const menu = useMenubarMenuContext();
+    useEffect(() => {
+      bar.registerTrigger(menu.id, menu.triggerRef.current);
+      return () => bar.unregisterTrigger(menu.id);
+    }, [bar, menu.id, menu.triggerRef]);
+    const moveAcross = useCallback(
+      (direction) => {
+        const list = bar.triggersRef.current;
+        const idx = list.findIndex((t) => t.id === menu.id);
+        if (idx === -1) return;
+        let nextIdx = idx + direction;
+        if (nextIdx < 0) nextIdx = list.length - 1;
+        if (nextIdx >= list.length) nextIdx = 0;
+        const next = list[nextIdx];
+        next?.ref?.focus();
+        if (bar.activeId !== null && next) bar.setActiveId(next.id);
+      },
+      [bar, menu.id]
+    );
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: composeRefs(forwardedRef, menu.triggerRef),
+        type: "button",
+        role: "menuitem",
+        "aria-haspopup": "menu",
+        "aria-expanded": menu.open,
+        "data-state": menu.open ? "open" : "closed",
+        onClick: (e) => {
+          onClick?.(e);
+          if (e.defaultPrevented) return;
+          menu.setOpen(!menu.open);
+        },
+        onPointerEnter: (e) => {
+          onPointerEnter?.(e);
+          if (bar.activeId !== null && bar.activeId !== menu.id) {
+            bar.setActiveId(menu.id);
+          }
+        },
+        onKeyDown: (e) => {
+          onKeyDown?.(e);
+          if (e.defaultPrevented) return;
+          switch (e.key) {
+            case "ArrowRight":
+              e.preventDefault();
+              moveAcross(1);
+              break;
+            case "ArrowLeft":
+              e.preventDefault();
+              moveAcross(-1);
+              break;
+            case "ArrowDown":
+            case "Enter":
+            case " ":
+              e.preventDefault();
+              menu.setOpen(true);
+              break;
+            case "Home":
+              e.preventDefault();
+              bar.triggersRef.current[0]?.ref?.focus();
+              break;
+            case "End": {
+              e.preventDefault();
+              const list = bar.triggersRef.current;
+              list[list.length - 1]?.ref?.focus();
+              break;
+            }
+          }
+        },
+        className: cn(menubarTriggerVariants(), className),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+function MenubarContent({
+  className,
+  placement = "bottom-start",
+  offset = 4,
+  "aria-label": ariaLabel,
+  children
+}) {
+  const menu = useMenubarMenuContext();
+  return /* @__PURE__ */ jsx(
+    Menu,
+    {
+      open: menu.open,
+      anchor: menu.triggerRef.current,
+      onClose: () => {
+        menu.setOpen(false);
+        requestAnimationFrame(() => menu.triggerRef.current?.focus());
+      },
+      placement,
+      offset,
+      "aria-label": ariaLabel,
+      className,
+      children
+    }
+  );
+}
+Menubar.Menu = MenubarMenu;
+Menubar.Trigger = MenubarTrigger;
+Menubar.Content = MenubarContent;
+Menubar.Item = MenuItem;
+Menubar.Group = MenuGroup;
+Menubar.Label = MenuLabel;
+Menubar.Separator = MenuSeparator;
+
+export { Breadcrumb, ContextMenu, ContextMenuContent, ContextMenuTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, Menu, MenuGroup, MenuItem, MenuLabel, MenuSeparator, Menubar, MenubarContent, MenubarMenu, MenubarTrigger, NavItem, Pagination, menuItemVariants, menuLabelVariants, menuSeparatorVariants, menuVariants };
+//# sourceMappingURL=chunk-ZTHJ5OTI.js.map
+//# sourceMappingURL=chunk-ZTHJ5OTI.js.map