fancy-ui-react 0.2.0

package/dist/components/mosaic-glow/mosaic-glow-core.js

@@ -0,0 +1,190 @@
+"use client";
+function mulberry32(seed) {
+  let a = seed >>> 0;
+  return () => {
+    a = a + 1831565813 >>> 0;
+    let t = a;
+    t = Math.imul(t ^ t >>> 15, t | 1);
+    t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+function hash3(seed, a, b, salt) {
+  let h = seed >>> 0 ^ 2654435769;
+  h = Math.imul(h ^ a + 2135587861, 2246822507);
+  h ^= h >>> 13;
+  h = Math.imul(h ^ b + 374761393, 3266489909);
+  h ^= h >>> 16;
+  h = Math.imul(h ^ salt + 668265263, 2654435761);
+  h ^= h >>> 15;
+  return h >>> 0;
+}
+function tileRandom(seed, col, row, salt) {
+  return mulberry32(hash3(seed, col, row, salt))();
+}
+const AMBIENT_CEILING = 0.4;
+function ambientLevel(u, ambient) {
+  return u * u * u * ambient * AMBIENT_CEILING;
+}
+function createGrid(cols, rows, seed, noise, ambient) {
+  const n = Math.max(0, cols * rows);
+  const weight = new Float32Array(n);
+  const amb = new Float32Array(n);
+  const ambientTarget = new Float32Array(n);
+  const heat = new Float32Array(n);
+  for (let r = 0; r < rows; r++) {
+    for (let c = 0; c < cols; c++) {
+      const i = r * cols + c;
+      weight[i] = 1 - noise * tileRandom(seed, c, r, 1);
+      const a = ambientLevel(tileRandom(seed, c, r, 2), ambient);
+      amb[i] = a;
+      ambientTarget[i] = a;
+    }
+  }
+  return { cols, rows, weight, ambient: amb, ambientTarget, heat };
+}
+function falloff(d) {
+  if (d <= 0) return 1;
+  if (d >= 1) return 0;
+  const s = 1 - d;
+  return s * s * (1 + 2 * d);
+}
+function rate(dt, tau) {
+  if (tau <= 0) return 1;
+  if (dt <= 0) return 0;
+  return 1 - Math.exp(-dt / tau);
+}
+const ATTACK_TAU = 0.04;
+function updateTiles(g, halo, dt, p) {
+  const { cols, rows, weight, heat } = g;
+  const kAttack = rate(dt, p.attackTau);
+  const kRelease = rate(dt, p.releaseTau);
+  const half = p.tile / 2;
+  let maxDelta = 0;
+  if (!halo || halo.r <= 0) {
+    for (let i = 0; i < heat.length; i++) {
+      const h = heat[i];
+      if (h === 0) continue;
+      const next = h - h * kRelease;
+      heat[i] = next < 1e-4 ? 0 : next;
+      if (next > maxDelta) maxDelta = next;
+    }
+    return maxDelta;
+  }
+  const invR2 = 1 / (halo.r * halo.r);
+  for (let r = 0; r < rows; r++) {
+    const dy = r * p.pitch + half - halo.y;
+    const dy2 = dy * dy;
+    for (let c = 0; c < cols; c++) {
+      const i = r * cols + c;
+      const dx = c * p.pitch + half - halo.x;
+      const d2 = (dx * dx + dy2) * invR2;
+      const target = d2 >= 1 ? 0 : falloff(Math.sqrt(d2)) * weight[i];
+      const h = heat[i];
+      const delta = target - h;
+      if (delta === 0) continue;
+      const next = h + delta * (delta > 0 ? kAttack : kRelease);
+      heat[i] = next < 1e-4 ? 0 : next;
+      const rem = Math.abs(target - heat[i]);
+      if (rem > maxDelta) maxDelta = rem;
+    }
+  }
+  return maxDelta;
+}
+function flickerTiles(g, dt, chancePerSec, ambient, rng = Math.random) {
+  const { ambient: amb, ambientTarget } = g;
+  const p = chancePerSec * dt;
+  const k = rate(dt, 0.4);
+  for (let i = 0; i < amb.length; i++) {
+    if (rng() < p) ambientTarget[i] = ambientLevel(rng(), ambient);
+    amb[i] = amb[i] + (ambientTarget[i] - amb[i]) * k;
+  }
+}
+function parseRgb(input) {
+  const s = input.trim();
+  const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(s);
+  if (hex) {
+    let h = hex[1];
+    if (h.length === 3) h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2];
+    const n = Number.parseInt(h, 16);
+    return [n >> 16 & 255, n >> 8 & 255, n & 255];
+  }
+  const rgb = /^rgba?\(\s*(\d{1,3})\s*[, ]\s*(\d{1,3})\s*[, ]\s*(\d{1,3})/i.exec(s);
+  if (rgb) {
+    return [Number(rgb[1]), Number(rgb[2]), Number(rgb[3])].map((v) => Math.min(255, v));
+  }
+  return null;
+}
+function mix(a, b, t) {
+  const u = t < 0 ? 0 : t > 1 ? 1 : t;
+  return [
+    Math.round(a[0] + (b[0] - a[0]) * u),
+    Math.round(a[1] + (b[1] - a[1]) * u),
+    Math.round(a[2] + (b[2] - a[2]) * u)
+  ];
+}
+const DEFAULT_COLOR = [242, 195, 24];
+const DEFAULT_BACKGROUND = [10, 10, 10];
+const LUT_KNEE = 0.55;
+function rgbString(c) {
+  return `rgb(${c[0]}, ${c[1]}, ${c[2]})`;
+}
+function buildLut(background, color, size = 64) {
+  const bg = parseRgb(background) ?? DEFAULT_BACKGROUND;
+  const fg = parseRgb(color) ?? DEFAULT_COLOR;
+  const tileBase = mix(bg, fg, 0.05);
+  const peak = mix(fg, [255, 255, 255], 0.7);
+  const out = new Array(size);
+  for (let i = 0; i < size; i++) {
+    const t = size > 1 ? i / (size - 1) : 0;
+    const c = t <= LUT_KNEE ? mix(tileBase, fg, t / LUT_KNEE) : mix(fg, peak, (t - LUT_KNEE) / (1 - LUT_KNEE));
+    out[i] = rgbString(c);
+  }
+  return out;
+}
+function lutIndex(ambient, heat, intensity, size) {
+  let level = ambient + heat * intensity;
+  if (level > 1) level = 1;
+  else if (level < 0) level = 0;
+  return level * (size - 1) | 0;
+}
+const TWO_PI = Math.PI * 2;
+function driftPoint(t, w, h) {
+  return {
+    x: w * (0.5 + 0.38 * Math.sin(TWO_PI * t / 9 + 1.3)),
+    y: h * (0.5 + 0.32 * Math.sin(TWO_PI * t / 13))
+  };
+}
+function releaseTau(trail) {
+  return 0.05 + 0.7 * clamp01(trail);
+}
+function smoothingTau(smoothing) {
+  return 0.8 * clamp01(smoothing);
+}
+function clamp01(v) {
+  if (!Number.isFinite(v)) return 0;
+  return v < 0 ? 0 : v > 1 ? 1 : v;
+}
+export {
+  AMBIENT_CEILING,
+  ATTACK_TAU,
+  DEFAULT_BACKGROUND,
+  DEFAULT_COLOR,
+  LUT_KNEE,
+  ambientLevel,
+  buildLut,
+  clamp01,
+  createGrid,
+  driftPoint,
+  falloff,
+  flickerTiles,
+  lutIndex,
+  mix,
+  mulberry32,
+  parseRgb,
+  rate,
+  releaseTau,
+  smoothingTau,
+  tileRandom,
+  updateTiles
+};

package/dist/components/navbar/Navbar.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+export interface NavbarProps {
+    /** Accessible name for the `<nav>` landmark. Defaults to `"Main"`. */
+    label?: string;
+    /** Pins the bar to the viewport top with `position: sticky` and a translucent, blurred background. */
+    sticky?: boolean;
+    /** Draws a 1px hairline along the bottom edge. Defaults to `true`. */
+    bordered?: boolean;
+    /** The brand mark / wordmark, on the left. */
+    brand?: ReactNode;
+    /** The navigation links, between the brand and the actions. */
+    children?: ReactNode;
+    /** Actions on the right — search, sign-in, a theme switch. */
+    actions?: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Site-level navigation bar: brand on the left, links in the middle, actions
+ * on the right.
+ *
+ * The root element arrives through the ref channel rather than a `ref` prop,
+ * per PORTING.md — the Svelte source declares `ref = $bindable(null)`.
+ */
+export declare const Navbar: import("react").ForwardRefExoticComponent<NavbarProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/navbar/Navbar.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../utils.js";
+/* empty css           */
+const Navbar = forwardRef(
+  ({ label = "Main", sticky = false, bordered = true, brand, children, actions, className }, ref) => {
+    const classes = cn(
+      "ft-navbar flex h-[52px] w-full items-center gap-5 bg-background px-5",
+      bordered && "border-border border-b",
+      // A translucent fill instead of the opaque default: content scrolling
+      // underneath the pinned bar stays legible through the blur rather than
+      // vanishing behind a flat panel.
+      sticky && "sticky top-0 z-40 bg-background/80 backdrop-blur-md",
+      className
+    );
+    return /* @__PURE__ */ jsxs("nav", { ref, "aria-label": label, className: classes, children: [
+      brand ? /* @__PURE__ */ jsx("div", { className: "ft-navbar-brand flex shrink-0 items-center gap-2 text-sm font-bold", children: brand }) : null,
+      children ? /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center gap-5", children }) : null,
+      actions ? /* @__PURE__ */ jsx("div", { className: "ft-navbar-actions ml-auto flex shrink-0 items-center gap-3", children: actions }) : null
+    ] });
+  }
+);
+Navbar.displayName = "Navbar";
+export {
+  Navbar
+};

package/dist/components/navbar/NavbarLink.d.ts

@@ -0,0 +1,37 @@
+import type { MouseEvent, ReactNode } from "react";
+export interface NavbarLinkProps {
+    /** Destination URL. */
+    href: string;
+    /**
+     * Marks this as the page the visitor is already on: `aria-current="page"`
+     * plus a visible weight/colour change and an accent underline — current
+     * is never conveyed by colour alone.
+     */
+    current?: boolean;
+    /**
+     * Opens the link in a new tab with a safe `rel`, and appends a
+     * visually-hidden "(opens in a new tab)" note to the accessible name.
+     */
+    external?: boolean;
+    /** Strips the link out of the click and keyboard-activation paths. */
+    disabled?: boolean;
+    /** Native click handler. Never called while `disabled`. */
+    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    /** The link's label. */
+    children?: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /**
+     * Plays the select cue through the sound controller. Off by default;
+     * only audible once the user has enabled sound.
+     */
+    sound?: boolean;
+}
+/**
+ * A single navigation link, standalone enough to render anywhere — a mobile
+ * menu, a footer — not only as a `Navbar` descendant.
+ *
+ * The root element arrives through the ref channel rather than a `ref` prop,
+ * per PORTING.md — the Svelte source declares `ref = $bindable(null)`.
+ */
+export declare const NavbarLink: import("react").ForwardRefExoticComponent<NavbarLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/components/navbar/NavbarLink.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../utils.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+/* empty css                */
+const NavbarLink = forwardRef(
+  ({ href, current = false, external = false, disabled = false, onClick, children, className, sound = false }, ref) => {
+    const playCue = useSoundCue(sound);
+    const classes = cn(
+      "ft-navbar-link inline-flex shrink-0 items-center rounded-[4px] px-0.5 pb-[3px] text-[13px] whitespace-nowrap transition-colors",
+      "focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:outline-none",
+      current ? "text-foreground font-medium" : "text-muted-foreground hover:text-foreground",
+      disabled && "pointer-events-none opacity-50",
+      className
+    );
+    function handleClick(event) {
+      if (disabled) {
+        event.preventDefault();
+        return;
+      }
+      if (!current) playCue("select");
+      onClick?.(event);
+    }
+    return /* @__PURE__ */ jsxs(
+      "a",
+      {
+        ref,
+        href: disabled ? void 0 : href,
+        target: external ? "_blank" : void 0,
+        rel: external ? "noopener noreferrer" : void 0,
+        "aria-current": current ? "page" : void 0,
+        "aria-disabled": disabled ? "true" : void 0,
+        tabIndex: disabled ? -1 : void 0,
+        className: classes,
+        onClick: handleClick,
+        children: [
+          children,
+          external ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: " (opens in a new tab)" }) : null
+        ]
+      }
+    );
+  }
+);
+NavbarLink.displayName = "NavbarLink";
+export {
+  NavbarLink
+};

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

@@ -0,0 +1,4 @@
+export { Navbar } from "./Navbar.js";
+export type { NavbarProps } from "./Navbar.js";
+export { NavbarLink } from "./NavbarLink.js";
+export type { NavbarLinkProps } from "./NavbarLink.js";

package/dist/components/navigation-menu/NavigationMenu.d.ts

@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+export interface NavigationMenuProps {
+    /** The open item's value, `""` when every panel is closed. */
+    value?: string;
+    /** Fires whenever the open item changes, from any trigger — pointer, keyboard or dismissal. */
+    onValueChange?: (value: string) => void;
+    /** Accessible name for the `<nav>` landmark. */
+    label?: string;
+    /** Delay in ms before a hovered trigger opens its panel. */
+    openDelay?: number;
+    /** Delay in ms before a panel closes after the pointer leaves it and its trigger. */
+    closeDelay?: number;
+    /** Typically a single `NavigationMenuList`. */
+    children?: ReactNode;
+    /** Additional CSS classes for the `<nav>`. */
+    className?: string;
+}
+/**
+ * Disclosure navigation: a row of triggers, at most one panel open at a time.
+ *
+ * The root element arrives through the ref channel rather than a `ref` prop,
+ * per PORTING.md — the source declares `ref = $bindable(null)`.
+ *
+ * Rest props are not spread: the source reads only these props and has no
+ * rest-props object, so the port carries no wider attribute surface than the
+ * component it mirrors.
+ */
+export declare const NavigationMenu: import("react").ForwardRefExoticComponent<NavigationMenuProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/navigation-menu/NavigationMenu.js

@@ -0,0 +1,202 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useInsertionEffect, useCallback, useEffect } from "react";
+import { cn } from "../../utils.js";
+import { NAVIGATION_MENU_KEY } from "./types.js";
+const NavigationMenu = forwardRef(function NavigationMenu2({
+  value: valueProp,
+  onValueChange,
+  label = "Main",
+  openDelay = 150,
+  closeDelay = 200,
+  children,
+  className
+}, forwardedRef) {
+  const [value, setValueState] = useState(valueProp ?? "");
+  const [lastValueProp, setLastValueProp] = useState(valueProp);
+  if (lastValueProp !== valueProp) {
+    setLastValueProp(valueProp);
+    setValueState(valueProp ?? "");
+  }
+  const valueRef = useRef(value);
+  useInsertionEffect(() => {
+    valueRef.current = value;
+  }, [value]);
+  const [listEl, setListEl] = useState(null);
+  const [registeredOrder, setRegisteredOrder] = useState([]);
+  const [focusedValueState, setFocusedValueState] = useState(null);
+  const [pendingFocusValue, setPendingFocusValue] = useState(null);
+  const openTimer = useRef(void 0);
+  const closeTimer = useRef(void 0);
+  const clearOpenTimer = useCallback(() => {
+    if (openTimer.current !== void 0) {
+      clearTimeout(openTimer.current);
+      openTimer.current = void 0;
+    }
+  }, []);
+  const clearCloseTimer = useCallback(() => {
+    if (closeTimer.current !== void 0) {
+      clearTimeout(closeTimer.current);
+      closeTimer.current = void 0;
+    }
+  }, []);
+  function setValue(next) {
+    clearOpenTimer();
+    clearCloseTimer();
+    if (valueRef.current === next) return;
+    valueRef.current = next;
+    setValueState(next);
+    onValueChange?.(next);
+  }
+  const triggerButtons = useCallback(() => {
+    if (!listEl) return [];
+    return Array.from(listEl.querySelectorAll("[data-ft-nav-trigger]"));
+  }, [listEl]);
+  const getTriggerElement = useCallback(
+    (itemValue) => {
+      return triggerButtons().find((el) => el.dataset.value === itemValue) ?? null;
+    },
+    [triggerButtons]
+  );
+  function open(itemValue) {
+    setValue(itemValue);
+  }
+  function close() {
+    const closing = valueRef.current;
+    setValue("");
+    if (closing) {
+      getTriggerElement(closing)?.focus();
+    }
+  }
+  function toggle(itemValue) {
+    if (valueRef.current === itemValue) {
+      close();
+    } else {
+      open(itemValue);
+    }
+  }
+  function scheduleOpen(itemValue) {
+    clearCloseTimer();
+    if (valueRef.current === itemValue) return;
+    if (valueRef.current !== "") {
+      open(itemValue);
+      return;
+    }
+    clearOpenTimer();
+    openTimer.current = setTimeout(() => setValue(itemValue), openDelay);
+  }
+  function scheduleClose() {
+    clearOpenTimer();
+    if (valueRef.current === "") return;
+    clearCloseTimer();
+    closeTimer.current = setTimeout(() => setValue(""), closeDelay);
+  }
+  function cancelClose() {
+    clearCloseTimer();
+  }
+  const requestFocus = useCallback((itemValue) => {
+    setPendingFocusValue(itemValue);
+  }, []);
+  const consumeFocusRequest = useCallback(
+    (itemValue) => {
+      if (pendingFocusValue !== itemValue) return false;
+      setPendingFocusValue(null);
+      return true;
+    },
+    [pendingFocusValue]
+  );
+  function collapseIfOpen(itemValue) {
+    if (valueRef.current === itemValue) setValue("");
+  }
+  const focus = useCallback((itemValue) => {
+    setFocusedValueState(itemValue);
+  }, []);
+  const registerTrigger = useCallback((itemValue) => {
+    setRegisteredOrder((order) => order.includes(itemValue) ? order : [...order, itemValue]);
+    return () => {
+      setRegisteredOrder((order) => {
+        const i = order.indexOf(itemValue);
+        if (i === -1) return order;
+        const next = order.slice();
+        next.splice(i, 1);
+        return next;
+      });
+    };
+  }, []);
+  const setListRef = useCallback((element) => {
+    setListEl(element);
+  }, []);
+  function goTo(button) {
+    const nextValue = button.dataset.value;
+    if (nextValue === void 0) return;
+    setFocusedValueState(nextValue);
+    button.focus();
+    if (valueRef.current !== "" && valueRef.current !== nextValue) {
+      open(nextValue);
+    }
+  }
+  function move(from, delta) {
+    const buttons = triggerButtons();
+    if (buttons.length === 0) return;
+    const fromIndex = buttons.findIndex((el) => el.dataset.value === from);
+    const base = fromIndex === -1 ? 0 : fromIndex;
+    const nextIndex = ((base + delta) % buttons.length + buttons.length) % buttons.length;
+    goTo(buttons[nextIndex]);
+  }
+  function moveToEdge(edge) {
+    const buttons = triggerButtons();
+    if (buttons.length === 0) return;
+    goTo(edge === "first" ? buttons[0] : buttons[buttons.length - 1]);
+  }
+  let focusedValue = null;
+  if (focusedValueState !== null && registeredOrder.includes(focusedValueState)) {
+    focusedValue = focusedValueState;
+  } else if (registeredOrder.length === 0) {
+    focusedValue = null;
+  } else if (value !== "" && registeredOrder.includes(value)) {
+    focusedValue = value;
+  } else {
+    focusedValue = triggerButtons()[0]?.dataset.value ?? registeredOrder[0];
+  }
+  const context = {
+    value,
+    openDelay,
+    closeDelay,
+    listRef: listEl,
+    focusedValue,
+    setListRef,
+    getTriggerElement,
+    registerTrigger,
+    open,
+    close,
+    toggle,
+    scheduleOpen,
+    scheduleClose,
+    cancelClose,
+    requestFocus,
+    consumeFocusRequest,
+    collapseIfOpen,
+    focus,
+    move,
+    moveToEdge
+  };
+  useEffect(() => {
+    return () => {
+      clearOpenTimer();
+      clearCloseTimer();
+    };
+  }, [clearOpenTimer, clearCloseTimer]);
+  return /* @__PURE__ */ jsx(NAVIGATION_MENU_KEY.Provider, { value: context, children: /* @__PURE__ */ jsx(
+    "nav",
+    {
+      ref: forwardedRef,
+      "aria-label": label,
+      className: cn("ft-navigation-menu relative", className),
+      children
+    }
+  ) });
+});
+NavigationMenu.displayName = "NavigationMenu";
+export {
+  NavigationMenu
+};

package/dist/components/navigation-menu/NavigationMenuContent.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+export interface NavigationMenuContentProps {
+    /** The panel's content — typically a feature tile plus a stack of `NavigationMenuLink`s. */
+    children?: ReactNode;
+    /** Additional CSS classes. */
+    className?: string;
+}
+export declare const NavigationMenuContent: import("react").ForwardRefExoticComponent<NavigationMenuContentProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/navigation-menu/NavigationMenuContent.js

@@ -0,0 +1,77 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../utils.js";
+import { Portal } from "../../internals/Portal.js";
+import { useAnchorPosition } from "../../internals/use-anchor-position.js";
+import { useDismissable } from "../../internals/dismissable.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 { anchored, originFor } from "../../internals/motion/anchored.js";
+import { usePresence } from "../../internals/motion/presence.js";
+import { useNavigationMenuItemContext, useNavigationMenuContext } from "./types.js";
+/* empty css                            */
+const NavigationMenuContent = forwardRef(
+  function NavigationMenuContent2({ children, className }, forwardedRef) {
+    const item = useNavigationMenuItemContext();
+    const root = useNavigationMenuContext();
+    const isOpen = root.value === item.value;
+    const [panel, setPanelNode] = useElementRef();
+    const presence = usePresence(isOpen);
+    const { side: resolvedSide, align: resolvedAlign } = useAnchorPosition(panel, {
+      anchor: root.listRef,
+      side: "bottom",
+      align: "start",
+      offset: 6
+    });
+    useDismissable(panel, {
+      onDismiss: root.close,
+      exclude: () => [root.getTriggerElement(item.value)],
+      active: isOpen
+    });
+    const { consumeFocusRequest } = root;
+    useIsomorphicLayoutEffect(() => {
+      if (!isOpen) return;
+      if (!panel) return;
+      if (!consumeFocusRequest(item.value)) return;
+      const target = panel.querySelector("a[href], button:not([disabled])") ?? panel;
+      target.focus();
+    }, [isOpen, panel, consumeFocusRequest, item.value]);
+    function handleFocusOut(event) {
+      const next = event.relatedTarget;
+      if (next && panel?.contains(next)) return;
+      root.collapseIfOpen(item.value);
+    }
+    const panelRef = useComposedRefs(
+      setPanelNode,
+      forwardedRef,
+      presence.register(anchored, (entering) => ({ side: resolvedSide, entering }))
+    );
+    return /* @__PURE__ */ jsx(Portal, { children: presence.mounted ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: panelRef,
+        id: item.contentId,
+        "aria-labelledby": item.triggerId,
+        tabIndex: -1,
+        className: cn(
+          "ft-navigation-menu-content bg-popover text-popover-foreground border-border grid w-[480px] grid-cols-2 gap-2 rounded-xl border p-3.5 shadow-2xl outline-none",
+          className
+        ),
+        "data-state": presence.surfaceState,
+        "data-side": resolvedSide,
+        "data-align": "start",
+        style: { transformOrigin: originFor(resolvedSide, resolvedAlign) },
+        onPointerEnter: root.cancelClose,
+        onPointerLeave: root.scheduleClose,
+        onBlur: handleFocusOut,
+        children
+      }
+    ) : null });
+  }
+);
+NavigationMenuContent.displayName = "NavigationMenuContent";
+export {
+  NavigationMenuContent
+};

package/dist/components/navigation-menu/NavigationMenuItem.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+export interface NavigationMenuItemProps {
+    /** This item's value — what `NavigationMenu`'s `value` becomes while its panel is open. */
+    value: string;
+    /** A `NavigationMenuTrigger` + `NavigationMenuContent` pair. */
+    children?: ReactNode;
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * One disclosure in the row: its trigger, its panel, and the identity that
+ * ties the two together.
+ *
+ * The source exposes no ref here, so neither does this (PORTING.md's
+ * per-component ref rule).
+ */
+export declare function NavigationMenuItem({ value, children, className }: NavigationMenuItemProps): import("react").JSX.Element;
+export declare namespace NavigationMenuItem {
+    var displayName: string;
+}