fancy-ui-react 0.2.0

package/dist/components/confetti/Confetti.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, useCallback, useImperativeHandle, useMemo, useEffect } from "react";
+import confettiModule from "canvas-confetti";
+import { useLiveRef } from "../../internals/dom/use-live-ref.js";
+import { ConfettiReactContext } from "./context.js";
+const Confetti = forwardRef(
+  ({ options = {}, globalOptions = {}, manualStart = false, className = "", children }, ref) => {
+    const canvasRef = useRef(null);
+    const instanceRef = useRef(null);
+    const optionsRef = useLiveRef(options);
+    const globalOptionsRef = useLiveRef(globalOptions);
+    const manualStartRef = useLiveRef(manualStart);
+    const fire = useCallback((opts = {}) => {
+      instanceRef.current?.({ ...optionsRef.current, ...opts });
+    }, [optionsRef]);
+    useImperativeHandle(ref, () => ({ fire }), [fire]);
+    const context = useMemo(() => ({ fire }), [fire]);
+    useEffect(() => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      instanceRef.current = confettiModule.create(canvas, {
+        ...globalOptionsRef.current,
+        resize: true
+      });
+      if (!manualStartRef.current) {
+        fire();
+      }
+      return () => {
+        if (instanceRef.current) {
+          instanceRef.current.reset();
+          instanceRef.current = null;
+        }
+      };
+    }, [fire, globalOptionsRef, manualStartRef]);
+    return /* @__PURE__ */ jsx(ConfettiReactContext.Provider, { value: context, children: /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className, "aria-hidden": "true" }),
+      children
+    ] }) });
+  }
+);
+Confetti.displayName = "Confetti";
+export {
+  Confetti
+};

package/dist/components/confetti/ConfettiButton.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+import type { Options as ConfettiOptions } from "canvas-confetti";
+export interface ConfettiButtonProps {
+    /** Confetti options for this button, merged over the surrounding root's options. */
+    options?: ConfettiOptions;
+    /** Button content. */
+    children?: ReactNode;
+    /**
+     * Plays the matching interface cue through the sound controller. Off by
+     * default; only audible once the user has enabled sound.
+     */
+    sound?: boolean;
+}
+/**
+ * Button that fires confetti from its own centre.
+ *
+ * Inside a `Confetti` it paints on that component's canvas; outside one it falls
+ * back to the module-level confetti and its full-page canvas.
+ *
+ * Rest props are not spread and no `className` is accepted: the Svelte source
+ * declares only `options`, `children` and `sound`.
+ */
+export declare function ConfettiButton({ options, children, sound }: ConfettiButtonProps): import("react").JSX.Element;

package/dist/components/confetti/ConfettiButton.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import confettiModule from "canvas-confetti";
+import { useSoundCue } from "../../sound/use-sound.js";
+import { ConfettiReactContext } from "./context.js";
+function ConfettiButton({ options = {}, children, sound = false }) {
+  const confettiContext = ConfettiReactContext.useOptional();
+  const playCue = useSoundCue(sound);
+  function handleClick(event) {
+    playCue("press");
+    const target = event.currentTarget;
+    const rect = target.getBoundingClientRect();
+    const x = rect.left + rect.width / 2;
+    const y = rect.top + rect.height / 2;
+    const origin = {
+      x: x / window.innerWidth,
+      y: y / window.innerHeight
+    };
+    if (confettiContext) {
+      confettiContext.fire({ ...options, origin });
+    } else {
+      confettiModule({ ...options, origin });
+    }
+  }
+  return /* @__PURE__ */ jsx("button", { onClick: handleClick, children });
+}
+export {
+  ConfettiButton
+};

package/dist/components/confetti/context.d.ts

@@ -0,0 +1,21 @@
+/**
+ * The contract `Confetti` publishes to the buttons rendered inside it.
+ *
+ * The Svelte source keys this on the string `"ConfettiContext"` via
+ * `setContext` / `getContext`; React's own context object plays that role
+ * here. It is deliberately NOT re-exported from `index.ts` — the Svelte
+ * `index.ts` exports only the two components, so the key has no public
+ * identity on either side.
+ */
+import type { Options as ConfettiOptions } from "canvas-confetti";
+/** What the canvas root publishes: the one imperative method its children call. */
+export interface ConfettiContextValue {
+    /** Fire the shared canvas instance, merging `opts` over the root's own `options`. */
+    fire: (opts?: ConfettiOptions) => void;
+}
+/**
+ * Read with `ConfettiReactContext.useOptional()` — a `ConfettiButton` rendered
+ * outside a `Confetti` gets `undefined` and falls back to the module-level
+ * confetti, exactly as `getContext` returning `undefined` does on the Svelte side.
+ */
+export declare const ConfettiReactContext: import("../../internals/dom/context.js").InternalContext<ConfettiContextValue>;

package/dist/components/confetti/context.js

@@ -0,0 +1,6 @@
+"use client";
+import { createInternalContext } from "../../internals/dom/context.js";
+const ConfettiReactContext = createInternalContext("ConfettiContext");
+export {
+  ConfettiReactContext
+};

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

@@ -0,0 +1,4 @@
+export { Confetti } from "./Confetti.js";
+export type { ConfettiProps } from "./Confetti.js";
+export { ConfettiButton } from "./ConfettiButton.js";
+export type { ConfettiButtonProps } from "./ConfettiButton.js";

package/dist/components/container-scroll/ContainerScroll.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+export interface ContainerScrollProps {
+    /** Additional CSS classes */
+    className?: string;
+    /** Content rendered in the title area above the card */
+    titleContent?: ReactNode;
+    /** Content rendered inside the tilting card */
+    cardContent?: ReactNode;
+}
+export declare function ContainerScroll({ className, titleContent, cardContent, }: ContainerScrollProps): import("react").JSX.Element;

package/dist/components/container-scroll/ContainerScroll.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { useIsomorphicLayoutEffect } from "../../internals/dom/ssr.js";
+import { cn } from "../../utils.js";
+function ContainerScroll({
+  className = "",
+  titleContent,
+  cardContent
+}) {
+  const containerRef = useRef(null);
+  const [isMobile, setIsMobile] = useState(false);
+  const [scrollYProgress, setScrollYProgress] = useState(0);
+  const scaleDimensions = isMobile ? [0.7, 0.9] : [1.05, 1];
+  const rotate = 20 * (1 - scrollYProgress);
+  const scale = scaleDimensions[0] + (scaleDimensions[1] - scaleDimensions[0]) * scrollYProgress;
+  const translateY = -100 * scrollYProgress;
+  useIsomorphicLayoutEffect(() => {
+    function updateIsMobile() {
+      setIsMobile(window.innerWidth <= 768);
+    }
+    function updateScroll() {
+      if (!containerRef.current) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      const windowHeight = window.innerHeight;
+      const progress = 1 - Math.max(0, rect.bottom - window.scrollY) / windowHeight;
+      setScrollYProgress(Math.max(0, Math.min(1, progress)));
+    }
+    updateIsMobile();
+    updateScroll();
+    window.addEventListener("resize", updateIsMobile);
+    window.addEventListener("scroll", updateScroll, { passive: true });
+    window.addEventListener("resize", updateScroll, { passive: true });
+    return () => {
+      window.removeEventListener("resize", updateIsMobile);
+      window.removeEventListener("scroll", updateScroll);
+      window.removeEventListener("resize", updateScroll);
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: cn(
+        "relative flex h-[60rem] items-center justify-center p-2 md:h-[80rem] md:p-20",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "relative w-full py-10 md:py-40", style: { perspective: "1000px" }, children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: { transform: `translateY(${translateY}px)` },
+            className: "mx-auto max-w-5xl text-center",
+            children: titleContent
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              transform: `rotateX(${rotate}deg) scale(${scale})`,
+              boxShadow: "0 0 #0000004d, 0 9px 20px #0000004a, 0 37px 37px #00000042, 0 84px 50px #00000026, 0 149px 60px #0000000a, 0 233px 65px #00000003"
+            },
+            className: "mx-auto -mt-12 h-[30rem] w-full max-w-5xl rounded-[30px] border-4 border-[#6C6C6C] bg-[#222222] p-2 shadow-2xl md:h-[40rem] md:p-6",
+            children: /* @__PURE__ */ jsx("div", { className: "size-full overflow-hidden rounded-2xl bg-gray-100 md:rounded-2xl md:p-4 dark:bg-zinc-900", children: cardContent })
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  ContainerScroll
+};

package/dist/components/container-scroll/index.d.ts

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

package/dist/components/container-text-flip/ContainerTextFlip.d.ts

@@ -0,0 +1,9 @@
+import { type HTMLAttributes } from "react";
+export interface ContainerTextFlipProps extends HTMLAttributes<HTMLParagraphElement> {
+    words?: string[];
+    interval?: number;
+    animationDuration?: number;
+    className?: string;
+    textClass?: string;
+}
+export declare function ContainerTextFlip({ words, interval, animationDuration, className, textClass, ...rest }: ContainerTextFlipProps): import("react").JSX.Element;

package/dist/components/container-text-flip/ContainerTextFlip.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { cn } from "../../utils.js";
+import { useLiveRef } from "../../internals/dom/use-live-ref.js";
+/* empty css                        */
+function ContainerTextFlip({
+  words = ["better", "modern", "beautiful", "awesome"],
+  interval = 3e3,
+  animationDuration = 700,
+  className = "",
+  textClass = "",
+  ...rest
+}) {
+  const [currentWordIndex, setCurrentWordIndex] = useState(0);
+  const currentWord = words[currentWordIndex] ?? "";
+  const letters = currentWord.split("");
+  const wordsRef = useLiveRef(words);
+  const intervalRef = useLiveRef(interval);
+  useEffect(() => {
+    const id = setInterval(() => {
+      setCurrentWordIndex((index) => (index + 1) % wordsRef.current.length);
+    }, intervalRef.current);
+    return () => clearInterval(id);
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: cn(
+        // Port-added anchor for the colocated CSS (the source relied on
+        // Svelte's compiler scoping).
+        "container-text-flip",
+        "relative inline-block rounded-lg px-4 pt-2 pb-3 text-center text-4xl font-bold text-black md:text-7xl dark:text-white",
+        "[background:linear-gradient(to_bottom,#f3f4f6,#e5e7eb)]",
+        "shadow-[inset_0_-1px_#d1d5db,inset_0_0_0_1px_#d1d5db,_0_4px_8px_#d1d5db]",
+        "dark:[background:linear-gradient(to_bottom,#374151,#1f2937)]",
+        "dark:shadow-[inset_0_-1px_#10171e,inset_0_0_0_1px_hsla(205,89%,46%,.24),_0_4px_8px_#00000052]",
+        className
+      ),
+      ...rest,
+      children: /* @__PURE__ */ jsx("span", { className: cn("inline-block", textClass), children: /* @__PURE__ */ jsx("span", { className: "inline-block", children: /* @__PURE__ */ jsx("span", { children: letters.map((letter, index) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "text-flip-letter inline-block",
+          style: {
+            animationDelay: `${index * 0.02}s`,
+            animationDuration: `${animationDuration}ms`
+          },
+          children: letter === " " ? " " : letter
+        },
+        index
+      )) }, currentWord) }) })
+    }
+  );
+}
+export {
+  ContainerTextFlip
+};

package/dist/components/container-text-flip/index.d.ts

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

package/dist/components/context-menu/ContextMenu.d.ts

@@ -0,0 +1,39 @@
+import type { ReactNode } from "react";
+import type { Side, Align } from "../../internals/anchor-position.js";
+export interface ContextMenuProps {
+    /**
+     * 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 pointer to place the menu on. */
+    side?: Side;
+    /** Alignment along the pointer's cross axis. */
+    align?: Align;
+    /** Gap in pixels between the pointer and the menu. */
+    offset?: number;
+    /** Whether arrow-key navigation wraps at the ends. */
+    loop?: boolean;
+    /** The `ContextMenuTrigger` and `ContextMenuContent`. */
+    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 context-menu compound. Publishes the one context its
+ * trigger and content read, and renders the zero-size virtual anchor the
+ * panel positions itself against — exactly the two things the source does.
+ *
+ * No `forwardRef`: the source declares no `ref` binding here, and the Svelte
+ * API surface is the contract, per-component.
+ */
+export declare function ContextMenu({ open: openProp, onOpenChange, side, align, offset, loop, children, sound, }: ContextMenuProps): import("react").JSX.Element;

package/dist/components/context-menu/ContextMenu.js

@@ -0,0 +1,105 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useState, useCallback, useMemo } from "react";
+import { Portal } from "../../internals/Portal.js";
+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 { CONTEXT_MENU_KEY } from "./types.js";
+function ContextMenu({
+  open: openProp,
+  onOpenChange,
+  side = "bottom",
+  align = "start",
+  offset = 2,
+  loop = true,
+  children,
+  sound = false
+}) {
+  const contentId = useFancyId();
+  const anchorRef = useRef(null);
+  const [point, setPoint] = useState({ x: 0, y: 0 });
+  const previouslyFocused = useRef(null);
+  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) && previouslyFocused.current?.isConnected) {
+        previouslyFocused.current.focus();
+      }
+    },
+    [openRef, handleOpenChange, playCue]
+  );
+  const openAt = useCallback(
+    (x, y) => {
+      if (!openRef.current) {
+        previouslyFocused.current = document.activeElement;
+      }
+      setPoint({ x, y });
+      setOpen(true);
+    },
+    [openRef, setOpen]
+  );
+  const close = useCallback(
+    (options = {}) => {
+      setOpen(false, options);
+    },
+    [setOpen]
+  );
+  const setAnchorRef = useCallback((el) => {
+    anchorRef.current = el;
+  }, []);
+  const context = useMemo(
+    () => ({
+      contentId,
+      side,
+      align,
+      offset,
+      loop,
+      open,
+      point,
+      sound,
+      get anchorRef() {
+        return anchorRef.current;
+      },
+      setAnchorRef,
+      openAt,
+      close
+    }),
+    [contentId, side, align, offset, loop, open, point, sound, setAnchorRef, openAt, close]
+  );
+  return /* @__PURE__ */ jsxs(CONTEXT_MENU_KEY.Provider, { value: context, children: [
+    children,
+    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref: setAnchorRef,
+        className: "ft-context-menu-anchor",
+        "aria-hidden": "true",
+        style: {
+          position: "fixed",
+          left: `${point.x}px`,
+          top: `${point.y}px`,
+          width: 0,
+          height: 0,
+          pointerEvents: "none"
+        }
+      }
+    ) })
+  ] });
+}
+export {
+  ContextMenu
+};

package/dist/components/context-menu/ContextMenuContent.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from "react";
+export interface ContextMenuContentProps {
+    /** The `ContextMenuItem`/`ContextMenuSeparator`/`ContextMenuLabel`/`ContextMenuSub` children. */
+    children?: ReactNode;
+    /** Additional CSS classes, merged onto the panel. */
+    className?: string;
+}
+/**
+ * The portalled, anchored panel, and the level of menu-focus wiring its own
+ * direct items register with.
+ *
+ * Self-gated on the root's `open`, same reasoning as `DropdownMenuContent`.
+ * Not modal: no focus trap, no scroll lock. Positioned against a *virtual*
+ * anchor — `ContextMenu`'s own zero-size anchor span, moved to the last
+ * right-click's coordinates — instead of a real trigger element, but the
+ * positioning core's flip/clamp behaviour needs nothing different for that: a
+ * zero-size `DOMRect` at the pointer flips and clamps at the viewport edges
+ * exactly the same way a real element's rect does — and the growth origin
+ * follows that same resolved side, so a menu that flipped to sit *above* a
+ * click near the bottom of the viewport grows out of its own bottom edge, the
+ * one still touching the pointer, instead of its top. The exit collapses back
+ * into that same corner.
+ *
+ * The source declares `ref = $bindable(null)`, so the panel element arrives
+ * through the ref channel rather than a prop.
+ */
+export declare const ContextMenuContent: import("react").ForwardRefExoticComponent<ContextMenuContentProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/context-menu/ContextMenuContent.js

@@ -0,0 +1,97 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useMemo, useEffect } from "react";
+import { cn } from "../../utils.js";
+import { Portal } from "../../internals/Portal.js";
+import { useDismissable } from "../../internals/dismissable.js";
+import { useMenuFocus } from "../../internals/menu.js";
+import { useAnchorPosition } from "../../internals/use-anchor-position.js";
+import { useComposedRefs } from "../../internals/dom/use-composed-refs.js";
+import { useConstant } from "../../internals/dom/ssr.js";
+import { useElementRef } from "../../internals/dom/use-element-ref.js";
+import { anchored, originFor } from "../../internals/motion/anchored.js";
+import { usePresence } from "../../internals/motion/presence.js";
+import { createOpenSubRegistry, handleMenuContentKeydown } from "../dropdown-menu/menu-shared.js";
+import { MENU_KEY } from "../dropdown-menu/types.js";
+import { useContextMenuRoot } from "./types.js";
+const ContextMenuContent = forwardRef(
+  function ContextMenuContent2({ children, className }, forwardedRef) {
+    const root = useContextMenuRoot();
+    const [panel, setPanelNode] = useElementRef();
+    const focus = useMenuFocus({ loop: root.loop });
+    const registry = useConstant(createOpenSubRegistry);
+    const { registerOpenSub, closeSiblingSubs } = registry;
+    const presence = usePresence(root.open);
+    const { side: resolvedSide, align: resolvedAlign } = useAnchorPosition(panel, {
+      anchor: () => root.anchorRef,
+      side: root.side,
+      align: root.align,
+      offset: root.offset,
+      recomputeKey: `${root.point.x},${root.point.y}`
+    });
+    useDismissable(panel, {
+      onDismiss: () => root.close(),
+      active: root.open
+    });
+    const closeRoot = root.close;
+    const closeAll = useCallback(
+      (options) => {
+        closeRoot(options);
+      },
+      [closeRoot]
+    );
+    const menuContext = useMemo(
+      () => ({
+        focus,
+        itemTextClass: "text-[12px]",
+        rootOpen: root.open,
+        sound: root.sound,
+        closeAll,
+        registerOpenSub,
+        closeSiblingSubs
+      }),
+      [focus, root.open, root.sound, closeAll, registerOpenSub, closeSiblingSubs]
+    );
+    const mounted = presence.mounted;
+    const open = root.open;
+    useEffect(() => {
+      if (!open || !mounted) return;
+      focus.moveToEdge("first");
+    }, [open, mounted, focus]);
+    function handleKeydown(event) {
+      if (!event.currentTarget.contains(event.target)) return;
+      handleMenuContentKeydown(event, menuContext, {
+        onTab: () => root.close({ returnFocus: false })
+      });
+    }
+    const panelRef = useComposedRefs(
+      setPanelNode,
+      forwardedRef,
+      presence.register(anchored, (entering) => ({ side: resolvedSide, entering }))
+    );
+    const classes = cn(
+      "ft-context-menu-content flex w-max min-w-[180px] flex-col gap-[1px] rounded-[10px] border border-border bg-popover p-[5px] text-[12px] text-popover-foreground shadow-lg outline-none",
+      className
+    );
+    return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(MENU_KEY.Provider, { value: menuContext, children: presence.mounted ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: panelRef,
+        id: root.contentId,
+        role: "menu",
+        tabIndex: -1,
+        className: classes,
+        "data-state": presence.surfaceState,
+        "data-side": resolvedSide,
+        "data-align": root.align,
+        style: { transformOrigin: originFor(resolvedSide, resolvedAlign) },
+        onKeyDown: handleKeydown,
+        children
+      }
+    ) : null }) });
+  }
+);
+ContextMenuContent.displayName = "ContextMenuContent";
+export {
+  ContextMenuContent
+};

package/dist/components/context-menu/ContextMenuTrigger.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+export interface ContextMenuTriggerProps {
+    /** Disables the region: `contextmenu` is left alone and the browser's native menu shows instead. */
+    disabled?: boolean;
+    /** The wrapped region's content. */
+    children?: ReactNode;
+    /** Additional CSS classes, merged onto the wrapping element. */
+    className?: string;
+}
+/**
+ * The region a right-click opens the menu over.
+ *
+ * The source declares `ref = $bindable(null)`, so the wrapping element
+ * arrives through the ref channel rather than a prop.
+ *
+ * No `role`, and no `aria-haspopup`/`aria-expanded`/`aria-controls` either,
+ * unlike `DropdownMenuTrigger`: `contextmenu` is a pointer gesture with an
+ * OS-level keyboard equivalent (the Menu key, Shift+F10), not a role-driven
+ * interaction an AT user "activates" via Enter/Space the way a button or
+ * link is. There is no ARIA role that describes "right-clickable region",
+ * and inventing one (or borrowing `role="button"`) would claim a keyboard/AT
+ * interaction model this element doesn't actually offer; the three `aria-*`
+ * attributes describe a control a user *activates* to open something, and
+ * this wrapping element isn't one.
+ */
+export declare const ContextMenuTrigger: import("react").ForwardRefExoticComponent<ContextMenuTriggerProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/context-menu/ContextMenuTrigger.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useRef } from "react";
+import { cn } from "../../utils.js";
+import { useComposedRefs } from "../../internals/dom/use-composed-refs.js";
+import { useContextMenuRoot } from "./types.js";
+const ContextMenuTrigger = forwardRef(
+  function ContextMenuTrigger2({ disabled = false, children, className }, forwardedRef) {
+    const ctx = useContextMenuRoot();
+    const node = useRef(null);
+    const ref = useComposedRefs(node, forwardedRef);
+    function handleContextMenu(event) {
+      if (disabled) return;
+      event.preventDefault();
+      const isKeyboardInvoked = event.button !== 2;
+      if (isKeyboardInvoked && node.current) {
+        const rect = node.current.getBoundingClientRect();
+        ctx.openAt(rect.left, rect.top);
+      } else {
+        ctx.openAt(event.clientX, event.clientY);
+      }
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("ft-context-menu-trigger", className),
+        onContextMenu: handleContextMenu,
+        children
+      }
+    );
+  }
+);
+ContextMenuTrigger.displayName = "ContextMenuTrigger";
+export {
+  ContextMenuTrigger
+};

package/dist/components/context-menu/index.d.ts

@@ -0,0 +1,20 @@
+export { ContextMenu } from "./ContextMenu.js";
+export type { ContextMenuProps } from "./ContextMenu.js";
+export { ContextMenuTrigger } from "./ContextMenuTrigger.js";
+export type { ContextMenuTriggerProps } from "./ContextMenuTrigger.js";
+export { ContextMenuContent } from "./ContextMenuContent.js";
+export type { ContextMenuContentProps } from "./ContextMenuContent.js";
+export { DropdownMenuItem as ContextMenuItem } from "../dropdown-menu/DropdownMenuItem.js";
+export type { DropdownMenuItemProps as ContextMenuItemProps } from "../dropdown-menu/DropdownMenuItem.js";
+export { DropdownMenuSeparator as ContextMenuSeparator } from "../dropdown-menu/DropdownMenuSeparator.js";
+export type { DropdownMenuSeparatorProps as ContextMenuSeparatorProps } from "../dropdown-menu/DropdownMenuSeparator.js";
+export { DropdownMenuLabel as ContextMenuLabel } from "../dropdown-menu/DropdownMenuLabel.js";
+export type { DropdownMenuLabelProps as ContextMenuLabelProps } from "../dropdown-menu/DropdownMenuLabel.js";
+export { DropdownMenuSub as ContextMenuSub } from "../dropdown-menu/DropdownMenuSub.js";
+export type { DropdownMenuSubProps as ContextMenuSubProps } from "../dropdown-menu/DropdownMenuSub.js";
+export { DropdownMenuSubTrigger as ContextMenuSubTrigger } from "../dropdown-menu/DropdownMenuSubTrigger.js";
+export type { DropdownMenuSubTriggerProps as ContextMenuSubTriggerProps } from "../dropdown-menu/DropdownMenuSubTrigger.js";
+export { DropdownMenuSubContent as ContextMenuSubContent } from "../dropdown-menu/DropdownMenuSubContent.js";
+export type { DropdownMenuSubContentProps as ContextMenuSubContentProps } from "../dropdown-menu/DropdownMenuSubContent.js";
+export { CONTEXT_MENU_KEY, type ContextMenuRootContext } from "./types.js";
+export { MENU_KEY, type MenuContext, SUB_KEY, type SubContext } from "../dropdown-menu/types.js";