fancy-ui-react 0.2.0

package/dist/components/dock/Dock.d.ts

@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+import type { DataOrientation, Direction } from "./types.js";
+export interface DockProps {
+    /** Additional CSS classes */
+    className?: string;
+    /** Maximum size increase in pixels. */
+    magnification?: number;
+    /** Pointer distance over which the magnification falls off. */
+    distance?: number;
+    /** Vertical alignment of the icons. */
+    direction?: Direction;
+    /** Dock orientation. */
+    orientation?: DataOrientation;
+    /**
+     * Accessible name for the toolbar. The dock spreads no rest props, so this
+     * is the only way to name one whose icons carry no label of their own.
+     */
+    ariaLabel?: string;
+    /** The `DockIcon`s and `DockSeparator`s. */
+    children?: ReactNode;
+}
+/**
+ * An icon dock whose items magnify smoothly as the pointer approaches.
+ *
+ * No `ref` prop: the source exposes no bindable ref, and no rest props either —
+ * it reads only these props and spreads nothing.
+ */
+export declare function Dock({ className, magnification, distance, direction, orientation, ariaLabel, children, }: DockProps): import("react").JSX.Element;

package/dist/components/dock/Dock.js

@@ -0,0 +1,80 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useCallback, useMemo } from "react";
+import { cn } from "../../utils.js";
+import { useReducedMotion, useMediaQuery } from "../../internals/motion/media-query.js";
+import { DOCK_CONTEXT_KEY } from "./types.js";
+function Dock({
+  className = "",
+  magnification = 60,
+  distance = 140,
+  direction = "middle",
+  orientation = "horizontal",
+  ariaLabel,
+  children
+}) {
+  const [pointer, setPointer] = useState({
+    x: Infinity,
+    y: Infinity
+  });
+  const reduced = useReducedMotion();
+  const coarse = useMediaQuery("(any-hover: none)");
+  const magnify = !reduced && !coarse;
+  const frames = useRef(/* @__PURE__ */ new Set());
+  useEffect(() => {
+    const pending = frames.current;
+    return () => {
+      for (const id of pending) cancelAnimationFrame(id);
+      pending.clear();
+    };
+  }, []);
+  const schedule = useCallback((x, y) => {
+    const id = requestAnimationFrame(() => {
+      frames.current.delete(id);
+      setPointer({ x, y });
+    });
+    frames.current.add(id);
+  }, []);
+  const context = useMemo(
+    () => ({
+      mouseX: { current: pointer.x },
+      mouseY: { current: pointer.y },
+      magnification,
+      distance,
+      orientation,
+      magnify
+    }),
+    [pointer, magnification, distance, orientation, magnify]
+  );
+  function onPointerMove(e) {
+    if (!magnify) return;
+    if (e.pointerType === "touch" || !e.isPrimary) return;
+    const { clientX, clientY } = e;
+    schedule(clientX, clientY);
+  }
+  function onPointerLeave() {
+    schedule(Infinity, Infinity);
+  }
+  const directionClass = direction === "top" ? "items-start" : direction === "bottom" ? "items-end" : "items-center";
+  return /* @__PURE__ */ jsx(DOCK_CONTEXT_KEY.Provider, { value: context, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "mx-auto flex h-[58px] w-max gap-4 rounded-2xl border p-2 backdrop-blur-md transition-all supports-backdrop-blur:bg-white/10 supports-backdrop-blur:dark:bg-black/10",
+        orientation === "vertical" && "h-max w-[58px] flex-col",
+        directionClass,
+        className
+      ),
+      onPointerMove,
+      onPointerLeave,
+      role: "toolbar",
+      "aria-orientation": orientation,
+      "aria-label": ariaLabel,
+      tabIndex: 0,
+      children
+    }
+  ) });
+}
+export {
+  Dock
+};

package/dist/components/dock/DockIcon.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+export interface DockIconProps {
+    /** Additional CSS classes */
+    className?: string;
+    /** The icon's content. */
+    children?: ReactNode;
+}
+/**
+ * One item in a `Dock`, sized from its distance to the pointer.
+ *
+ * The node arrives through `useElementRef` rather than a plain `useRef`: the
+ * width is computed while rendering, so the component has to re-render once the
+ * element actually exists. Before it does, the distance is `Infinity` and the
+ * icon renders at its resting 40px — which is also the size it has at mount,
+ * with the pointer still at `Infinity`, so nothing moves on that extra render.
+ */
+export declare function DockIcon({ className, children }: DockIconProps): import("react").JSX.Element;

package/dist/components/dock/DockIcon.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useElementRef } from "../../internals/dom/use-element-ref.js";
+import { useDockContext } from "./types.js";
+function DockIcon({ className = "", children }) {
+  const context = useDockContext();
+  const [node, iconRef] = useElementRef();
+  function calculateDistance() {
+    if (!node) return Infinity;
+    const bounds = node.getBoundingClientRect();
+    if (context.orientation === "vertical") {
+      return context.mouseY.current - bounds.y - bounds.height / 2;
+    }
+    return context.mouseX.current - bounds.x - bounds.width / 2;
+  }
+  function computeIconWidth() {
+    if (!context.magnify) return 40;
+    const distanceCalc = calculateDistance();
+    if (!context.distance || !context.magnification) return 40;
+    if (Math.abs(distanceCalc) < context.distance) {
+      return (1 - Math.abs(distanceCalc) / context.distance) * context.magnification + 40;
+    }
+    return 40;
+  }
+  const iconWidth = computeIconWidth();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: iconRef,
+      className: `flex aspect-square cursor-pointer items-center justify-center rounded-full transition-all duration-200 ease-out ${className}`,
+      style: { width: `${iconWidth}px`, height: `${iconWidth}px` },
+      children
+    }
+  );
+}
+export {
+  DockIcon
+};

package/dist/components/dock/DockSeparator.d.ts

@@ -0,0 +1,6 @@
+export interface DockSeparatorProps {
+    /** Additional CSS classes */
+    className?: string;
+}
+/** A rule between two groups of dock icons, laid across the dock's own axis. */
+export declare function DockSeparator({ className }: DockSeparatorProps): import("react").JSX.Element;

package/dist/components/dock/DockSeparator.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils.js";
+import { useDockContext } from "./types.js";
+function DockSeparator({ className = "" }) {
+  const context = useDockContext();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "bg-secondary relative block",
+        context.orientation === "vertical" ? "h-0.5 w-4/5" : "h-4/5 w-0.5",
+        className
+      )
+    }
+  );
+}
+export {
+  DockSeparator
+};

package/dist/components/dock/index.d.ts

@@ -0,0 +1,7 @@
+export { Dock } from "./Dock.js";
+export type { DockProps } from "./Dock.js";
+export { DockIcon } from "./DockIcon.js";
+export type { DockIconProps } from "./DockIcon.js";
+export { DockSeparator } from "./DockSeparator.js";
+export type { DockSeparatorProps } from "./DockSeparator.js";
+export type { DataOrientation, Direction, DockContext } from "./types.js";

package/dist/components/dock/types.d.ts

@@ -0,0 +1,47 @@
+export type DataOrientation = "vertical" | "horizontal";
+export type Direction = "top" | "middle" | "bottom";
+export interface DockContext {
+    /**
+     * The pointer's page X, in a box rather than as a bare number — the shape
+     * the source publishes, kept verbatim so the exported type is unchanged.
+     *
+     * There the box exists so children can read a reactive update through a
+     * stable object; here the box is REBUILT by `Dock` on every pointer frame,
+     * because a mutated object is invisible to React and the new identity is
+     * exactly what re-renders the icons. Only `Dock` ever writes it.
+     */
+    mouseX: {
+        current: number;
+    };
+    /** The pointer's page Y. Same box treatment as `mouseX`. */
+    mouseY: {
+        current: number;
+    };
+    magnification: number;
+    distance: number;
+    orientation: DataOrientation;
+    /**
+     * False when the visitor asked for reduced motion, or when the device has no
+     * real pointer to track. `Dock` owns the two media queries behind it and
+     * `DockIcon` reads it before doing any measuring, so a device that will
+     * never magnify also never pays for a `getBoundingClientRect()` per icon per
+     * frame. Read-only: only `Dock` may write it.
+     */
+    readonly magnify: boolean;
+}
+/**
+ * The context `DockIcon` and `DockSeparator` read to find their dock. The
+ * source publishes it under a `Symbol` context key; React's own context object
+ * plays that role here, so the name is kept and the value is a `React.Context`
+ * rather than a symbol.
+ *
+ * Not re-exported from `index.ts`, because the source's barrel does not export
+ * its key either.
+ */
+export declare const DOCK_CONTEXT_KEY: import("react").Context<DockContext | undefined>;
+/**
+ * Required, not optional: both children read `context.orientation` with no
+ * guard, so one rendered outside a `Dock` throws either way. A named error says
+ * what went wrong instead of leaving a bare property-of-undefined TypeError.
+ */
+export declare function useDockContext(): DockContext;

package/dist/components/dock/types.js

@@ -0,0 +1,15 @@
+"use client";
+import { createContext, useContext } from "react";
+const DOCK_CONTEXT_KEY = createContext(void 0);
+DOCK_CONTEXT_KEY.displayName = "DockContext";
+function useDockContext() {
+  const context = useContext(DOCK_CONTEXT_KEY);
+  if (context === void 0) {
+    throw new Error("DockContext is missing: this component must be rendered inside a <Dock>.");
+  }
+  return context;
+}
+export {
+  DOCK_CONTEXT_KEY,
+  useDockContext
+};

package/dist/components/drawer/Drawer.d.ts

@@ -0,0 +1,34 @@
+import type { ReactNode } from "react";
+export interface DrawerProps {
+    /** Whether the drawer is open. Controlled when given; the component keeps its own copy either way. */
+    open?: boolean;
+    /** Called with the new value whenever the drawer opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Heading rendered in the header and wired to `aria-labelledby`. */
+    title?: string;
+    /** Supporting text under the title, wired to `aria-describedby`. */
+    description?: string;
+    /** Whether Escape, the scrim and the close button can close the drawer. */
+    dismissible?: boolean;
+    /** Whether dragging the handle down past the threshold closes the drawer. */
+    swipeToClose?: boolean;
+    /** Panel body content. */
+    children?: ReactNode;
+    /** Content pinned below the body, e.g. actions. */
+    footer?: ReactNode;
+    /** Additional CSS classes merged onto the panel. */
+    className?: string;
+    /**
+     * Accessible name for the panel when there is no `title`. A modal dialog
+     * must be named, and `aria-labelledby` can only point at a rendered
+     * heading — pass this when the header is built from `children` instead.
+     */
+    ariaLabel?: string;
+    /**
+     * Plays the `close` cue through the sound controller when the drawer is
+     * dismissed, including a committed swipe. Off by default; only audible
+     * once the user has enabled sound.
+     */
+    sound?: boolean;
+}
+export declare const Drawer: import("react").ForwardRefExoticComponent<DrawerProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/drawer/Drawer.js

@@ -0,0 +1,237 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useEffect } from "react";
+import { flushSync } from "react-dom";
+import { cn } from "../../utils.js";
+import { Portal } from "../../internals/Portal.js";
+import { useDismissable } from "../../internals/dismissable.js";
+import { useFocusTrap } from "../../internals/focus-trap.js";
+import { useScrollLock } from "../../internals/scroll-lock.js";
+import { useComposedRefs } from "../../internals/dom/use-composed-refs.js";
+import { useElementRef } from "../../internals/dom/use-element-ref.js";
+import { useIsomorphicLayoutEffect } from "../../internals/dom/ssr.js";
+import { useFancyId } from "../../internals/use-id.js";
+import { anchored, prefersReducedMotion } from "../../internals/motion/anchored.js";
+import { DURATIONS, JS_EASINGS } from "../../internals/motion/tokens.js";
+import { usePresence } from "../../internals/motion/presence.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+/* empty css           */
+const DISMISS_THRESHOLD_PX = 96;
+const SPRING_BACK_MS = 200;
+const Drawer = forwardRef(function Drawer2({
+  open: openProp,
+  onOpenChange,
+  title,
+  description,
+  dismissible = true,
+  swipeToClose = true,
+  children,
+  footer,
+  className,
+  ariaLabel,
+  sound = false
+}, forwardedRef) {
+  const [open, setOpenState] = useState(openProp ?? false);
+  const [lastOpenProp, setLastOpenProp] = useState(openProp);
+  if (lastOpenProp !== openProp) {
+    setLastOpenProp(openProp);
+    setOpenState(openProp ?? false);
+  }
+  const playCue = useSoundCue(sound);
+  function close() {
+    if (!open) return;
+    setOpenState(false);
+    playCue("close");
+    onOpenChange?.(false);
+  }
+  const canSwipe = dismissible && swipeToClose;
+  const dragYRef = useRef(0);
+  const draggingRef = useRef(false);
+  const [releasing, setReleasing] = useState(false);
+  const activePointerIdRef = useRef(null);
+  const dragStartYRef = useRef(0);
+  const springBackTimerRef = useRef(void 0);
+  const uid = useFancyId();
+  const titleId = title ? `${uid}-title` : void 0;
+  const descriptionId = description ? `${uid}-description` : void 0;
+  const [panel, setPanelNode] = useElementRef();
+  const trap = useFocusTrap(panel);
+  function drawerSlide(_node, params) {
+    const reduced = prefersReducedMotion();
+    const entering = params?.entering ?? false;
+    const from = entering ? 0 : dragYRef.current;
+    return {
+      delay: 0,
+      // Reduced motion collapses this to 0, which makes `runTransition`
+      // finish synchronously and never touch `element.animate()` — so
+      // the close is exactly as synchronous as it was before the drawer
+      // animated out at all.
+      duration: reduced ? 0 : entering ? DURATIONS.base : DURATIONS.exit,
+      easing: entering ? JS_EASINGS.out : JS_EASINGS.in,
+      css: (t, u) => `transform: translateY(calc(${from}px * ${t} + 100% * ${u}))`
+    };
+  }
+  const presence = usePresence(open, {
+    // The two halves of the focus handshake, at the two moments the
+    // source puts them: `onintrostart` → rearm, `onoutrostart` →
+    // returnFocusNow.
+    //
+    // `returnFocusNow` at the dismiss instant is the whole point: it is
+    // called on EVERY close path (Escape, the scrim, the close button, a
+    // past-threshold swipe, a caller's own `open` write). Waiting for the
+    // trap's own destroy would leave a keyboard user on `<body>` for the
+    // whole length of the slide-out, because the closing panel is made
+    // inert the instant the exit starts.
+    //
+    // `rearm` is the other half. A drawer reopened DURING its exit
+    // reverses instead of remounting, so the trap is never re-created:
+    // without this the panel would come back `aria-modal` and interactive
+    // with focus left on the trigger behind it, and the eager return
+    // already spent for the life of the instance.
+    onEnterStart: () => trap.rearm(),
+    onExitStart: () => trap.returnFocusNow()
+  });
+  useIsomorphicLayoutEffect(() => {
+    if (!open) return;
+    dragYRef.current = 0;
+    if (panel) panel.style.transform = "translateY(0px)";
+  }, [open, panel]);
+  useEffect(() => {
+    return () => {
+      clearTimeout(springBackTimerRef.current);
+    };
+  }, []);
+  useScrollLock(presence.mounted);
+  useDismissable(panel, {
+    onDismiss: close,
+    escape: dismissible,
+    outsideClick: dismissible,
+    active: open
+  });
+  const panelRef = useComposedRefs(
+    setPanelNode,
+    forwardedRef,
+    presence.register("panel", drawerSlide, (entering) => ({ entering }))
+  );
+  const scrimRef = presence.register("scrim", anchored, (entering) => ({
+    entering,
+    scale: false,
+    duration: DURATIONS.base,
+    exitDuration: DURATIONS.exit
+  }));
+  function handlePointerDown(event) {
+    if (!canSwipe) return;
+    if (event.pointerType === "mouse" && event.button !== 0) return;
+    clearTimeout(springBackTimerRef.current);
+    activePointerIdRef.current = event.pointerId;
+    dragStartYRef.current = event.clientY;
+    draggingRef.current = true;
+    setReleasing(false);
+    event.currentTarget.setPointerCapture?.(event.pointerId);
+  }
+  function handlePointerMove(event) {
+    if (!draggingRef.current || event.pointerId !== activePointerIdRef.current) return;
+    dragYRef.current = Math.max(0, event.clientY - dragStartYRef.current);
+    if (panel) panel.style.transform = `translateY(${dragYRef.current}px)`;
+  }
+  function releaseCapture(event) {
+    event.currentTarget.releasePointerCapture?.(event.pointerId);
+  }
+  function springBack() {
+    flushSync(() => {
+      setReleasing(true);
+    });
+    dragYRef.current = 0;
+    if (panel) panel.style.transform = "translateY(0px)";
+    springBackTimerRef.current = setTimeout(() => {
+      setReleasing(false);
+    }, SPRING_BACK_MS);
+  }
+  function handlePointerUp(event) {
+    if (!draggingRef.current || event.pointerId !== activePointerIdRef.current) return;
+    draggingRef.current = false;
+    activePointerIdRef.current = null;
+    releaseCapture(event);
+    if (dragYRef.current > DISMISS_THRESHOLD_PX) {
+      close();
+      return;
+    }
+    springBack();
+  }
+  function handlePointerCancel(event) {
+    if (!draggingRef.current || event.pointerId !== activePointerIdRef.current) return;
+    draggingRef.current = false;
+    activePointerIdRef.current = null;
+    releaseCapture(event);
+    springBack();
+  }
+  const panelClasses = cn(
+    "ft-drawer-panel bg-popover text-popover-foreground fixed inset-x-0 bottom-0 z-50 flex max-h-[85vh] flex-col gap-3 rounded-t-[14px] border-t border-r border-l border-border pt-3.5 pr-5 pb-5 pl-5 shadow-2xl",
+    releasing && "ft-drawer-panel--releasing",
+    className
+  );
+  return /* @__PURE__ */ jsx(Portal, { children: presence.mounted ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: scrimRef,
+        className: "ft-drawer-scrim fixed inset-0 z-50 bg-black/60",
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: panelRef,
+        className: panelClasses,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": titleId ? void 0 : ariaLabel,
+        "aria-labelledby": titleId,
+        "aria-describedby": descriptionId,
+        "data-state": presence.surfaceState,
+        style: { transform: "translateY(0px)" },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "ft-drawer-drag-surface flex flex-col items-center gap-2 pb-1",
+              onPointerDown: handlePointerDown,
+              onPointerMove: handlePointerMove,
+              onPointerUp: handlePointerUp,
+              onPointerCancel: handlePointerCancel,
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "ft-drawer-handle", "aria-hidden": "true" }),
+                title ? /* @__PURE__ */ jsx("h2", { id: titleId, className: "w-full text-[14px] font-semibold", children: title }) : null,
+                description ? /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    id: descriptionId,
+                    className: "text-muted-foreground w-full text-[12px] leading-relaxed",
+                    children: description
+                  }
+                ) : null
+              ]
+            }
+          ),
+          dismissible ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "ft-drawer-close text-muted-foreground hover:text-foreground absolute top-3.5 right-5 cursor-pointer text-[13px] leading-none",
+              "aria-label": "Close",
+              onClick: close,
+              children: "✕"
+            }
+          ) : null,
+          /* @__PURE__ */ jsx("div", { className: "ft-drawer-body flex flex-1 flex-col gap-3 overflow-y-auto", children }),
+          footer ? /* @__PURE__ */ jsx("div", { className: "ft-drawer-footer flex justify-end gap-2", children: footer }) : null
+        ]
+      }
+    )
+  ] }) : null });
+});
+Drawer.displayName = "Drawer";
+export {
+  Drawer
+};

package/dist/components/drawer/index.d.ts

@@ -0,0 +1,2 @@
+export { Drawer } from "./Drawer.js";
+export type { DrawerProps } from "./Drawer.js";

package/dist/components/dropdown-menu/DropdownMenu.d.ts

@@ -0,0 +1,38 @@
+import type { ReactNode } from "react";
+import type { Side, Align } from "../../internals/anchor-position.js";
+export interface DropdownMenuProps {
+    /**
+     * Whether the menu is open.
+     *
+     * The source declares this `$bindable(false)`; React has no two-way
+     * channel, so the component keeps its own copy either way — seeded from
+     * this prop and re-synced whenever the caller changes it. `onOpenChange`
+     * fires with the same value at the same moment in every call shape.
+     */
+    open?: boolean;
+    /** Called with the new value whenever the menu opens or closes, however the change happened. */
+    onOpenChange?: (open: boolean) => void;
+    /** Side of the trigger to place the menu on. */
+    side?: Side;
+    /** Alignment along the trigger's cross axis. */
+    align?: Align;
+    /** Gap in pixels between the trigger and the menu. */
+    offset?: number;
+    /** Whether arrow-key navigation wraps at the ends. */
+    loop?: boolean;
+    /** The `DropdownMenuTrigger` and `DropdownMenuContent`. */
+    children?: ReactNode;
+    /**
+     * Plays the matching interface cue through the sound controller. Off by
+     * default; only audible once the user has enabled sound.
+     */
+    sound?: boolean;
+}
+/**
+ * The root of the menu compound. Renders no DOM of its own — exactly as the
+ * source does — and publishes the one context its trigger and content read.
+ *
+ * No `forwardRef`: the source declares no `ref` binding here, and the Svelte
+ * API surface is the contract, per-component.
+ */
+export declare function DropdownMenu({ open: openProp, onOpenChange, side, align, offset, loop, children, sound, }: DropdownMenuProps): import("react").JSX.Element;

package/dist/components/dropdown-menu/DropdownMenu.js

@@ -0,0 +1,99 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef, useState, useCallback, useMemo } from "react";
+import { useEventCallback } from "../../internals/dom/use-event-callback.js";
+import { useLiveRef } from "../../internals/dom/use-live-ref.js";
+import { useFancyId } from "../../internals/use-id.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+import { DROPDOWN_MENU_KEY } from "./types.js";
+function DropdownMenu({
+  open: openProp,
+  onOpenChange,
+  side = "bottom",
+  align = "start",
+  offset = 4,
+  loop = true,
+  children,
+  sound = false
+}) {
+  const uid = useFancyId();
+  const contentId = `${uid}-content`;
+  const triggerId = `${uid}-trigger`;
+  const triggerRef = useRef(null);
+  const focusEdgeRef = useRef("first");
+  const [open, setOpenState] = useState(openProp ?? false);
+  const [lastOpenProp, setLastOpenProp] = useState(openProp);
+  if (lastOpenProp !== openProp) {
+    setLastOpenProp(openProp);
+    setOpenState(openProp ?? false);
+  }
+  const openRef = useLiveRef(open);
+  const handleOpenChange = useEventCallback(onOpenChange);
+  const playCue = useSoundCue(sound);
+  const setOpen = useCallback(
+    (next, options = {}) => {
+      if (openRef.current === next) return;
+      setOpenState(next);
+      handleOpenChange(next);
+      if (!options.silent) playCue(next ? "open" : "close");
+      if (!next && (options.returnFocus ?? true) && triggerRef.current?.isConnected) {
+        triggerRef.current.focus();
+      }
+    },
+    [openRef, handleOpenChange, playCue]
+  );
+  const setTriggerRef = useCallback((el) => {
+    triggerRef.current = el;
+  }, []);
+  const openWithFocus = useCallback(
+    (edge) => {
+      focusEdgeRef.current = edge;
+      setOpen(true);
+    },
+    [setOpen]
+  );
+  const close = useCallback(
+    (options = {}) => {
+      setOpen(false, options);
+    },
+    [setOpen]
+  );
+  const context = useMemo(
+    () => ({
+      contentId,
+      triggerId,
+      side,
+      align,
+      offset,
+      loop,
+      open,
+      sound,
+      get focusEdge() {
+        return focusEdgeRef.current;
+      },
+      get triggerRef() {
+        return triggerRef.current;
+      },
+      setTriggerRef,
+      openWithFocus,
+      close
+    }),
+    [
+      contentId,
+      triggerId,
+      side,
+      align,
+      offset,
+      loop,
+      open,
+      sound,
+      setTriggerRef,
+      openWithFocus,
+      close
+    ]
+  );
+  return /* @__PURE__ */ jsx(DROPDOWN_MENU_KEY.Provider, { value: context, children });
+}
+export {
+  DropdownMenu
+};