fancy-ui-react 0.2.0

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

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+export interface DropdownMenuContentProps {
+    /** The `DropdownMenuItem`/`DropdownMenuSeparator`/`DropdownMenuLabel`/`DropdownMenuSub` 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.
+ *
+ * The source declares `ref = $bindable(null)`, so the panel element arrives
+ * through the ref channel rather than a prop.
+ */
+export declare const DropdownMenuContent: import("react").ForwardRefExoticComponent<DropdownMenuContentProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,111 @@
+"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 { useLiveRef } from "../../internals/dom/use-live-ref.js";
+import { anchored, originFor } from "../../internals/motion/anchored.js";
+import { usePresence } from "../../internals/motion/presence.js";
+import { createOpenSubRegistry, handleMenuContentKeydown } from "./menu-shared.js";
+import { useDropdownMenuRoot, MENU_KEY } from "./types.js";
+const DropdownMenuContent = forwardRef(
+  function DropdownMenuContent2({ children, className }, forwardedRef) {
+    const root = useDropdownMenuRoot();
+    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.triggerRef,
+      side: root.side,
+      align: root.align,
+      offset: root.offset
+    });
+    useDismissable(panel, {
+      onDismiss: () => root.close(),
+      exclude: () => [root.triggerRef],
+      active: root.open
+    });
+    const closeRoot = root.close;
+    const closeAll = useCallback(
+      (options) => {
+        closeRoot(options);
+      },
+      [closeRoot]
+    );
+    const menuContext = useMemo(
+      () => ({
+        focus,
+        itemTextClass: "text-[13px]",
+        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;
+    const focusEdgeRef = useLiveRef(root.focusEdge);
+    useEffect(() => {
+      if (!open || !mounted) return;
+      focus.moveToEdge(focusEdgeRef.current);
+    }, [open, mounted, focus, focusEdgeRef]);
+    function handleKeydown(event) {
+      if (!event.currentTarget.contains(event.target)) return;
+      handleMenuContentKeydown(event, menuContext, {
+        // Tab is never `preventDefault`ed — the browser's own traversal is
+        // what moves focus on, and it moves on from wherever focus SITS.
+        // This panel is portalled to `document.body`, so the item holding
+        // focus is a DOM sibling of the whole app: a Tab resuming from
+        // there (or from `<body>`, once the panel is gone) walks straight
+        // past every control that follows the trigger. Handing focus back
+        // to the trigger synchronously, inside the keydown, is what gives
+        // the default action the right starting point — forward to the
+        // control after the trigger, backward to the one before it.
+        //
+        // Divergence from the Svelte source, which passes
+        // `returnFocus: false` here and leaves the same gap.
+        onTab: () => root.close()
+      });
+    }
+    const panelRef = useComposedRefs(
+      setPanelNode,
+      forwardedRef,
+      presence.register(anchored, (entering) => ({ side: resolvedSide, entering }))
+    );
+    const classes = cn(
+      "ft-dropdown-menu-content flex w-max min-w-[180px] flex-col gap-[1px] rounded-[10px] border border-border bg-popover p-[5px] text-[13px] 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",
+        "aria-labelledby": root.triggerId,
+        tabIndex: -1,
+        className: classes,
+        "data-state": presence.surfaceState,
+        "data-side": resolvedSide,
+        "data-align": root.align,
+        style: { transformOrigin: originFor(resolvedSide, resolvedAlign) },
+        onKeyDown: handleKeydown,
+        children
+      }
+    ) : null }) });
+  }
+);
+DropdownMenuContent.displayName = "DropdownMenuContent";
+export {
+  DropdownMenuContent
+};

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

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+export interface DropdownMenuItemProps {
+    /** Called when the item is selected, by click or (in a real browser) by Enter/Space while it holds focus. */
+    onSelect?: () => void;
+    /** Disables the item: skipped by keyboard navigation and typeahead, inert to click. */
+    disabled?: boolean;
+    /** Visual/semantic variant. `"destructive"` renders in the destructive color. */
+    variant?: "default" | "destructive";
+    /** Display-only keyboard shortcut, rendered as a trailing `<kbd>`. This component binds no global keys for it. */
+    shortcut?: string;
+    /** Whether selecting the item closes the whole menu. Defaults to true. */
+    closeOnSelect?: boolean;
+    /** Leading icon. */
+    icon?: ReactNode;
+    /** The item's label. */
+    children?: ReactNode;
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * One selectable row.
+ *
+ * No `forwardRef`: the source exposes no `ref` binding for an item, and the
+ * Svelte API surface is the contract, per-component.
+ */
+export declare function DropdownMenuItem({ onSelect, disabled, variant, shortcut, closeOnSelect, icon, children, className, }: DropdownMenuItemProps): import("react").JSX.Element;

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

@@ -0,0 +1,74 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { cn } from "../../utils.js";
+import { useMenuItemRef } from "../../internals/menu.js";
+import { useComposedRefs } from "../../internals/dom/use-composed-refs.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+import { useMenuContext } from "./types.js";
+function DropdownMenuItem({
+  onSelect,
+  disabled = false,
+  variant = "default",
+  shortcut,
+  closeOnSelect = true,
+  icon,
+  children,
+  className
+}) {
+  const ctx = useMenuContext();
+  const itemRef = useRef(null);
+  const registerRef = useMenuItemRef(ctx.focus);
+  const ref = useComposedRefs(itemRef, registerRef);
+  const playCue = useSoundCue(ctx.sound);
+  function handleClick() {
+    if (disabled) return;
+    playCue("select");
+    if (itemRef.current) ctx.focus.focusItem(itemRef.current);
+    onSelect?.();
+    if (closeOnSelect) ctx.closeAll({ silent: true });
+  }
+  function handleMouseEnter() {
+    if (disabled || !itemRef.current) return;
+    ctx.focus.focusItem(itemRef.current);
+  }
+  const classes = cn(
+    "ft-dropdown-menu-item flex w-full cursor-pointer items-center justify-between gap-[10px] rounded-[6px] px-[10px] py-[7px] text-left text-foreground outline-none",
+    "hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground",
+    "disabled:pointer-events-none disabled:opacity-50",
+    variant === "destructive" && "text-destructive hover:bg-destructive/10 hover:text-destructive focus-visible:bg-destructive/10 focus-visible:text-destructive",
+    className
+  );
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      type: "button",
+      role: "menuitem",
+      tabIndex: -1,
+      disabled,
+      "aria-disabled": disabled ? "true" : void 0,
+      "data-variant": variant,
+      className: classes,
+      onClick: handleClick,
+      onMouseEnter: handleMouseEnter,
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-[10px]", children: [
+          icon ? /* @__PURE__ */ jsx("span", { className: "ft-dropdown-menu-item-icon", "aria-hidden": "true", children: icon }) : null,
+          /* @__PURE__ */ jsx("span", { children })
+        ] }),
+        shortcut ? /* @__PURE__ */ jsx(
+          "kbd",
+          {
+            "aria-hidden": "true",
+            className: "ft-dropdown-menu-item-shortcut text-muted-foreground font-mono text-[10px]",
+            children: shortcut
+          }
+        ) : null
+      ]
+    }
+  );
+}
+export {
+  DropdownMenuItem
+};

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

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+export interface DropdownMenuLabelProps {
+    /** The label's text. */
+    children?: ReactNode;
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * A group heading, not a menuitem: never registered with the menu-focus core,
+ * never focusable, skipped entirely by arrow-key navigation and typeahead.
+ * Real text content (not `aria-hidden`), so it still reads to assistive tech
+ * as part of the menu — the same non-interactive-but-audible treatment
+ * `DropdownMenuItem`'s own label gets, just without a role.
+ */
+export declare function DropdownMenuLabel({ children, className }: DropdownMenuLabelProps): import("react").JSX.Element;

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

@@ -0,0 +1,18 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils.js";
+function DropdownMenuLabel({ children, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "ft-dropdown-menu-label text-muted-foreground px-[8px] py-[4px] text-[10px] font-semibold tracking-[0.08em] uppercase opacity-60",
+        className
+      ),
+      children
+    }
+  );
+}
+export {
+  DropdownMenuLabel
+};

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

@@ -0,0 +1,6 @@
+export interface DropdownMenuSeparatorProps {
+    /** Additional CSS classes. */
+    className?: string;
+}
+/** Not a menuitem, never registered with the menu-focus core: purely a visual/semantic divider. */
+export declare function DropdownMenuSeparator({ className }: DropdownMenuSeparatorProps): import("react").JSX.Element;

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

@@ -0,0 +1,15 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils.js";
+function DropdownMenuSeparator({ className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "separator",
+      className: cn("ft-dropdown-menu-separator bg-border my-[4px] h-px", className)
+    }
+  );
+}
+export {
+  DropdownMenuSeparator
+};

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

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+export interface DropdownMenuSubProps {
+    /** The `DropdownMenuSubTrigger` and `DropdownMenuSubContent`. */
+    children?: ReactNode;
+}
+/**
+ * The boundary that owns one submenu's open state and its hover-intent
+ * timers. Renders no DOM of its own.
+ */
+export declare function DropdownMenuSub({ children }: DropdownMenuSubProps): import("react").JSX.Element;

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

@@ -0,0 +1,110 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect, useMemo } from "react";
+import { useFancyId } from "../../internals/use-id.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+import { useMenuContext, SUB_KEY } from "./types.js";
+const CLOSE_INTENT_MS = 200;
+function DropdownMenuSub({ children }) {
+  const parentMenu = useMenuContext();
+  const uid = useFancyId();
+  const contentId = `${uid}-content`;
+  const triggerId = `${uid}-trigger`;
+  const [open, setOpen] = useState(false);
+  const openRef = useRef(false);
+  const triggerRef = useRef(null);
+  const closeTimer = useRef(null);
+  const unregisterOpenSub = useRef(null);
+  const [resolvedSide, setResolvedSide] = useState("right");
+  const [resolvedAlign, setResolvedAlign] = useState("start");
+  const playCue = useSoundCue(parentMenu.sound);
+  const { closeSiblingSubs, registerOpenSub } = parentMenu;
+  const clearCloseTimer = useCallback(() => {
+    if (closeTimer.current !== null) {
+      clearTimeout(closeTimer.current);
+      closeTimer.current = null;
+    }
+  }, []);
+  const closeSub = useCallback(
+    (returnFocus, silent = false) => {
+      clearCloseTimer();
+      if (!openRef.current) return;
+      openRef.current = false;
+      setOpen(false);
+      unregisterOpenSub.current?.();
+      unregisterOpenSub.current = null;
+      if (returnFocus) triggerRef.current?.focus();
+      if (!silent) playCue("close");
+    },
+    [clearCloseTimer, playCue]
+  );
+  const openSub = useCallback(() => {
+    clearCloseTimer();
+    if (openRef.current) return;
+    if (triggerRef.current) closeSiblingSubs(triggerRef.current);
+    openRef.current = true;
+    setOpen(true);
+    if (triggerRef.current) {
+      unregisterOpenSub.current = registerOpenSub(triggerRef.current, () => closeSub(false, true));
+    }
+    playCue("open");
+  }, [clearCloseTimer, closeSiblingSubs, registerOpenSub, closeSub, playCue]);
+  const keepOpen = useCallback(() => {
+    clearCloseTimer();
+  }, [clearCloseTimer]);
+  const scheduleClose = useCallback(() => {
+    clearCloseTimer();
+    closeTimer.current = setTimeout(() => {
+      closeTimer.current = null;
+      closeSub(false);
+    }, CLOSE_INTENT_MS);
+  }, [clearCloseTimer, closeSub]);
+  useEffect(() => {
+    return () => {
+      clearCloseTimer();
+      unregisterOpenSub.current?.();
+    };
+  }, [clearCloseTimer]);
+  const setTriggerRef = useCallback((el) => {
+    triggerRef.current = el;
+  }, []);
+  const setPlacement = useCallback((side, align) => {
+    setResolvedSide(side);
+    setResolvedAlign(align);
+  }, []);
+  const context = useMemo(
+    () => ({
+      open,
+      contentId,
+      triggerId,
+      resolvedSide,
+      resolvedAlign,
+      get triggerRef() {
+        return triggerRef.current;
+      },
+      setTriggerRef,
+      setPlacement,
+      openSub,
+      closeSub,
+      keepOpen,
+      scheduleClose
+    }),
+    [
+      open,
+      contentId,
+      triggerId,
+      resolvedSide,
+      resolvedAlign,
+      setTriggerRef,
+      setPlacement,
+      openSub,
+      closeSub,
+      keepOpen,
+      scheduleClose
+    ]
+  );
+  return /* @__PURE__ */ jsx(SUB_KEY.Provider, { value: context, children });
+}
+export {
+  DropdownMenuSub
+};

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

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+export interface DropdownMenuSubContentProps {
+    /** The `DropdownMenuItem`/`DropdownMenuSeparator`/`DropdownMenuLabel`/nested `DropdownMenuSub` children. */
+    children?: ReactNode;
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * A submenu's own portalled, anchored panel, and the level of menu-focus
+ * wiring its own direct items register with.
+ *
+ * The source declares `ref = $bindable(null)`, so the panel element arrives
+ * through the ref channel rather than a prop.
+ */
+export declare const DropdownMenuSubContent: import("react").ForwardRefExoticComponent<DropdownMenuSubContentProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,139 @@
+"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 "./menu-shared.js";
+import { useMenuContext, useSubContext, MENU_KEY } from "./types.js";
+const DropdownMenuSubContent = forwardRef(
+  function DropdownMenuSubContent2({ children, className }, forwardedRef) {
+    const parentMenu = useMenuContext();
+    const sub = useSubContext();
+    const live = sub.open && parentMenu.rootOpen;
+    const [panel, setPanelNode] = useElementRef();
+    const focus = useMenuFocus();
+    const registry = useConstant(createOpenSubRegistry);
+    const { registerOpenSub, closeSiblingSubs } = registry;
+    const presence = usePresence(live);
+    const setPlacement = sub.setPlacement;
+    useAnchorPosition(panel, {
+      anchor: () => sub.triggerRef,
+      side: "right",
+      align: "start",
+      offset: 2,
+      onPlacement: (side, align) => setPlacement(side, align)
+    });
+    useDismissable(panel, {
+      onDismiss: () => sub.closeSub(true),
+      exclude: () => [sub.triggerRef],
+      active: live
+    });
+    const parentCloseAll = parentMenu.closeAll;
+    const closeAll = useCallback(
+      (options) => {
+        parentCloseAll(options);
+      },
+      [parentCloseAll]
+    );
+    const menuContext = useMemo(
+      () => ({
+        focus,
+        // Forwarded, not re-decided: this level's own density is whatever
+        // the level above it already resolved, all the way down. It has to
+        // travel through context rather than plain CSS inheritance because
+        // a portalled submenu is a DOM sibling of its parent panel, not a
+        // descendant.
+        itemTextClass: parentMenu.itemTextClass,
+        // This level's own liveness, not the root's raw state: a submenu
+        // nested inside THIS one is no more alive than this one is.
+        rootOpen: live,
+        // Copied from the parent level for the same reason as
+        // `itemTextClass`: a submenu's own sound behaviour follows whatever
+        // the root resolved, all the way down through nested submenus.
+        sound: parentMenu.sound,
+        closeAll,
+        registerOpenSub,
+        closeSiblingSubs
+      }),
+      [
+        focus,
+        parentMenu.itemTextClass,
+        parentMenu.sound,
+        live,
+        closeAll,
+        registerOpenSub,
+        closeSiblingSubs
+      ]
+    );
+    const mounted = presence.mounted;
+    const subOpen = sub.open;
+    useEffect(() => {
+      if (!subOpen || !mounted) return;
+      focus.moveToEdge("first");
+    }, [subOpen, mounted, focus]);
+    function handleKeydown(event) {
+      if (!event.currentTarget.contains(event.target)) return;
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        sub.closeSub(true);
+        return;
+      }
+      handleMenuContentKeydown(event, menuContext, {
+        // Tab closes the *whole* tree, not just this level — the browser's
+        // own Tab traversal should leave the entire menu system behind, the
+        // same as it does from the root content, and resume from the root
+        // trigger for the same reason it does there (both panels are
+        // portalled to `document.body`). `closeAll` forwards to the root's
+        // own `close`, so the default `returnFocus` lands on the trigger.
+        onTab: () => parentMenu.closeAll()
+      });
+    }
+    function handleMouseEnter() {
+      sub.keepOpen();
+    }
+    function handleMouseLeave() {
+      sub.scheduleClose();
+    }
+    const panelRef = useComposedRefs(
+      setPanelNode,
+      forwardedRef,
+      presence.register(anchored, (entering) => ({ side: sub.resolvedSide, entering }))
+    );
+    const classes = cn(
+      "ft-dropdown-menu-content flex w-max min-w-[160px] flex-col gap-[1px] rounded-[10px] border border-border bg-popover p-[5px] text-popover-foreground shadow-lg outline-none",
+      parentMenu.itemTextClass,
+      className
+    );
+    return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(MENU_KEY.Provider, { value: menuContext, children: presence.mounted ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: panelRef,
+        id: sub.contentId,
+        role: "menu",
+        "aria-labelledby": sub.triggerId,
+        tabIndex: -1,
+        className: classes,
+        "data-state": presence.surfaceState,
+        "data-side": sub.resolvedSide,
+        "data-align": "start",
+        style: { transformOrigin: originFor(sub.resolvedSide, sub.resolvedAlign) },
+        onKeyDown: handleKeydown,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        children
+      }
+    ) : null }) });
+  }
+);
+DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
+export {
+  DropdownMenuSubContent
+};

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

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+export interface DropdownMenuSubTriggerProps {
+    /** Disables the row: skipped by keyboard navigation and typeahead, inert to click/hover. */
+    disabled?: boolean;
+    /** Leading icon. */
+    icon?: ReactNode;
+    /** The row's label. */
+    children?: ReactNode;
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * The row that opens a submenu — itself a menu item at the *parent* level.
+ *
+ * No `forwardRef`: the source exposes no `ref` binding for this row.
+ */
+export declare function DropdownMenuSubTrigger({ disabled, icon, children, className, }: DropdownMenuSubTriggerProps): import("react").JSX.Element;