@particle-academy/react-fancy 5.64.0 → 5.64.1

package/CHANGELOG.md

@@ -11,6 +11,36 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [5.64.1] - 2026-10-27
+
+### Fixed
+
+- **`Dropdown`: the menu can be driven from the keyboard again.** Its
+  arrow-key listener was attached in an effect keyed on `open` that returned
+  early while the menu element was still null (the menu mounts a render later,
+  behind `useAnimation`, and `Portal` takes one more), and nothing in its
+  dependencies changed once the element appeared, so it never re-ran.
+  ArrowDown did nothing and no item of any Dropdown was reachable by keyboard.
+  Found building the showcase's Features menu. Keys are now handled on the menu
+  element itself, and the element is tracked as state, so the timing cannot
+  recur. The menu now follows the WAI-ARIA menu button pattern:
+  - On the trigger, Enter, Space or ArrowDown opens the menu on its first
+    enabled item and ArrowUp on its last. A non-button trigger (an avatar
+    `span` with `tabIndex`) opens on Enter / Space too.
+  - In the menu, ArrowDown / ArrowUp move and wrap, Home / End jump, a typed
+    character jumps to the next item starting with it, and disabled items are
+    skipped.
+  - Escape closes the menu (still through the `useEscapeKey` layer stack, so
+    only the innermost layer closes) and returns focus to the trigger. Tab
+    closes it and continues from the trigger's place in the tab order.
+    Activating an item returns focus to the trigger unless its `onClick`
+    moved focus somewhere else.
+
+  Nothing to do as a consumer: the props are unchanged, and opening by mouse
+  still leaves focus on the trigger. If you worked around this with your own
+  arrow-key handler, you can delete it. `DropdownContextValue` gains
+  `focusTrigger`, plus two `@internal` refs.
+
 ## [5.64.0] - 2026-10-26
 
 ### Added

package/dist/chunk-BXPLERIJ.js

@@ -0,0 +1,293 @@
+import { useAnimation } from './chunk-3K2CEAI7.js';
+import { useFloatingPosition } from './chunk-MQ6VGG62.js';
+import { Portal } from './chunk-RBCMKPBX.js';
+import { useOutsideClick } from './chunk-RGANGU7X.js';
+import { useEscapeKey } from './chunk-YX6FTJ6N.js';
+import { cn } from './chunk-MMW2JGKZ.js';
+import { createContext, useState, useRef, useCallback, useMemo, useEffect, useContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var DropdownContext = createContext(null);
+function useDropdown() {
+  const ctx = useContext(DropdownContext);
+  if (!ctx) {
+    throw new Error(
+      "Dropdown compound components must be used within <Dropdown>"
+    );
+  }
+  return ctx;
+}
+
+// src/components/Dropdown/dropdown-focus.ts
+function menuItems(menu) {
+  if (!menu) return [];
+  return Array.from(
+    menu.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"]):not([disabled])')
+  );
+}
+function focusMenuItem(menu, move) {
+  const items = menuItems(menu);
+  if (items.length === 0) return -1;
+  const current = items.indexOf(document.activeElement);
+  let next;
+  if (move === "first") next = 0;
+  else if (move === "last") next = items.length - 1;
+  else if (current === -1) next = move === "next" ? 0 : items.length - 1;
+  else next = (current + (move === "next" ? 1 : -1) + items.length) % items.length;
+  items[next].focus();
+  return next;
+}
+function focusByChar(menu, char) {
+  const items = menuItems(menu);
+  if (items.length === 0) return -1;
+  const needle = char.toLowerCase();
+  const start = items.indexOf(document.activeElement);
+  for (let step = 1; step <= items.length; step++) {
+    const i = (start + step + items.length) % items.length;
+    if ((items[i].textContent ?? "").trim().toLowerCase().startsWith(needle)) {
+      items[i].focus();
+      return i;
+    }
+  }
+  return -1;
+}
+function activatesNatively(el) {
+  if (!(el instanceof HTMLElement)) return false;
+  const tag = el.tagName;
+  if (tag === "BUTTON" || tag === "SUMMARY") return true;
+  if (tag === "A") return el.hasAttribute("href");
+  if (tag === "INPUT") {
+    const type = el.type;
+    return type === "button" || type === "submit" || type === "reset" || type === "image";
+  }
+  return false;
+}
+function DropdownTrigger({ children }) {
+  const { setOpen, open, anchorRef, pendingFocusRef, menuRef } = useDropdown();
+  const onKeyDown = (e) => {
+    if (e.defaultPrevented) return;
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      const target = e.key === "ArrowDown" ? "first" : "last";
+      if (open && menuRef.current) {
+        focusMenuItem(menuRef.current, target);
+        return;
+      }
+      pendingFocusRef.current = target;
+      setOpen(true);
+      return;
+    }
+    if (e.key === "Enter" || e.key === " ") {
+      if (!open) pendingFocusRef.current = "first";
+      if (activatesNatively(e.target)) return;
+      e.preventDefault();
+      if (open) pendingFocusRef.current = null;
+      setOpen(!open);
+    }
+  };
+  const onClick = (_e) => {
+    if (open) pendingFocusRef.current = null;
+    setOpen(!open);
+  };
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref: anchorRef,
+      "data-react-fancy-dropdown-trigger": "",
+      className: "inline-flex",
+      onClick,
+      onKeyDown,
+      "aria-expanded": open,
+      "aria-haspopup": "menu",
+      children
+    }
+  );
+}
+DropdownTrigger.displayName = "DropdownTrigger";
+function DropdownItems({ children, className }) {
+  const {
+    open,
+    setOpen,
+    anchorRef,
+    setActiveIndex,
+    placement,
+    offset,
+    pendingFocusRef,
+    menuRef,
+    focusTrigger
+  } = useDropdown();
+  const floatingRef = useRef(null);
+  const outsideRef = useRef(null);
+  const position = useFloatingPosition(anchorRef, floatingRef, {
+    placement,
+    offset,
+    enabled: open
+  });
+  const close = useCallback(() => {
+    pendingFocusRef.current = null;
+    setOpen(false);
+    setActiveIndex(-1);
+  }, [setOpen, setActiveIndex, pendingFocusRef]);
+  useOutsideClick(outsideRef, close, open, anchorRef);
+  useEscapeKey(() => {
+    close();
+    focusTrigger();
+  }, open);
+  const { mounted, className: animClass, ref: animRef } = useAnimation({
+    open,
+    enterClass: "fancy-scale-in",
+    exitClass: "fancy-fade-out"
+  });
+  const [menuEl, setMenuEl] = useState(null);
+  const setMenuRef = useCallback(
+    (node) => {
+      outsideRef.current = node;
+      floatingRef.current = node;
+      animRef.current = node;
+      menuRef.current = node;
+      setMenuEl(node);
+    },
+    [animRef, menuRef]
+  );
+  useEffect(() => {
+    if (!open || !menuEl) return;
+    const target = pendingFocusRef.current;
+    if (!target) return;
+    pendingFocusRef.current = null;
+    setActiveIndex(focusMenuItem(menuEl, target));
+  }, [open, menuEl, pendingFocusRef, setActiveIndex]);
+  const onKeyDown = (e) => {
+    const menu = e.currentTarget;
+    const moves = {
+      ArrowDown: "next",
+      ArrowUp: "prev",
+      Home: "first",
+      End: "last"
+    };
+    const move = moves[e.key];
+    if (move) {
+      e.preventDefault();
+      setActiveIndex(focusMenuItem(menu, move));
+      return;
+    }
+    if (e.key === "Tab") {
+      close();
+      focusTrigger();
+      return;
+    }
+    if (e.key.length === 1 && e.key !== " " && !e.ctrlKey && !e.metaKey && !e.altKey) {
+      const i = focusByChar(menu, e.key);
+      if (i >= 0) setActiveIndex(i);
+    }
+  };
+  if (!mounted) return null;
+  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: setMenuRef,
+      "data-react-fancy-dropdown": "",
+      role: "menu",
+      onKeyDown,
+      className: cn(
+        "fixed z-50 min-w-[8rem] rounded-xl border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] p-1 shadow-lg dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]",
+        animClass,
+        className
+      ),
+      style: { left: position.x, top: position.y },
+      children
+    }
+  ) });
+}
+DropdownItems.displayName = "DropdownItems";
+function DropdownItem({
+  children,
+  onClick,
+  disabled = false,
+  danger = false,
+  className
+}) {
+  const { setOpen, focusTrigger } = useDropdown();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      "data-react-fancy-dropdown-item": "",
+      type: "button",
+      role: "menuitem",
+      disabled,
+      "aria-disabled": disabled,
+      className: cn(
+        "flex w-full items-center rounded-lg px-3 py-2 text-left text-sm transition-colors",
+        danger ? "text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950" : "text-[color:var(--fancy-text-soft,var(--color-zinc-700))] hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))] dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]",
+        disabled && "cursor-not-allowed opacity-50",
+        className
+      ),
+      onClick: (e) => {
+        if (disabled) return;
+        const hadFocus = document.activeElement === e.currentTarget;
+        onClick?.();
+        setOpen(false);
+        if (hadFocus && document.activeElement === e.currentTarget) focusTrigger();
+      },
+      children
+    }
+  );
+}
+DropdownItem.displayName = "DropdownItem";
+function DropdownSeparator({ className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-react-fancy-dropdown-separator": "",
+      role: "separator",
+      className: cn(
+        "my-1 h-px bg-[color:var(--fancy-border,var(--color-zinc-200))] dark:bg-[color:var(--fancy-border-dark,var(--color-zinc-700))]",
+        className
+      )
+    }
+  );
+}
+DropdownSeparator.displayName = "DropdownSeparator";
+var TRIGGER_FOCUSABLE = 'button:not([disabled]), a[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function DropdownRoot({
+  children,
+  placement = "bottom-start",
+  offset = 4
+}) {
+  const [open, setOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const anchorRef = useRef(null);
+  const pendingFocusRef = useRef(null);
+  const menuRef = useRef(null);
+  const focusTrigger = useCallback(() => {
+    const anchor = anchorRef.current;
+    if (!anchor) return;
+    const target = anchor.querySelector(TRIGGER_FOCUSABLE) ?? (anchor.tabIndex >= 0 ? anchor : null);
+    target?.focus();
+  }, []);
+  const ctx = useMemo(
+    () => ({
+      open,
+      setOpen,
+      anchorRef,
+      activeIndex,
+      setActiveIndex,
+      placement,
+      offset,
+      pendingFocusRef,
+      menuRef,
+      focusTrigger
+    }),
+    [open, anchorRef, activeIndex, placement, offset, focusTrigger]
+  );
+  return /* @__PURE__ */ jsx(DropdownContext.Provider, { value: ctx, children });
+}
+var Dropdown = Object.assign(DropdownRoot, {
+  Trigger: DropdownTrigger,
+  Items: DropdownItems,
+  Item: DropdownItem,
+  Separator: DropdownSeparator
+});
+
+export { Dropdown, useDropdown };
+//# sourceMappingURL=chunk-BXPLERIJ.js.map
+//# sourceMappingURL=chunk-BXPLERIJ.js.map

package/dist/chunk-BXPLERIJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Dropdown/Dropdown.context.ts","../src/components/Dropdown/dropdown-focus.ts","../src/components/Dropdown/DropdownTrigger.tsx","../src/components/Dropdown/DropdownItems.tsx","../src/components/Dropdown/DropdownItem.tsx","../src/components/Dropdown/DropdownSeparator.tsx","../src/components/Dropdown/Dropdown.tsx"],"names":["jsx","useState","useRef","useCallback"],"mappings":"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","file":"chunk-BXPLERIJ.js","sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { DropdownContextValue } from \"./Dropdown.types\";\n\nexport const DropdownContext = createContext<DropdownContextValue | null>(null);\n\nexport function useDropdown(): DropdownContextValue {\n  const ctx = useContext(DropdownContext);\n  if (!ctx) {\n    throw new Error(\n      \"Dropdown compound components must be used within <Dropdown>\",\n    );\n  }\n  return ctx;\n}\n","/** Enabled menu items, in DOM order. Disabled items are skipped. */\nexport function menuItems(menu: HTMLElement | null): HTMLElement[] {\n  if (!menu) return [];\n  return Array.from(\n    menu.querySelectorAll<HTMLElement>('[role=\"menuitem\"]:not([aria-disabled=\"true\"]):not([disabled])'),\n  );\n}\n\nexport type FocusMove = \"first\" | \"last\" | \"next\" | \"prev\";\n\n/**\n * Focus an item relative to the one that currently has focus, wrapping at both\n * ends. Returns the index focused, or -1 when the menu has no enabled item.\n */\nexport function focusMenuItem(menu: HTMLElement | null, move: FocusMove): number {\n  const items = menuItems(menu);\n  if (items.length === 0) return -1;\n  const current = items.indexOf(document.activeElement as HTMLElement);\n  let next: number;\n  if (move === \"first\") next = 0;\n  else if (move === \"last\") next = items.length - 1;\n  else if (current === -1) next = move === \"next\" ? 0 : items.length - 1;\n  else next = (current + (move === \"next\" ? 1 : -1) + items.length) % items.length;\n  items[next]!.focus();\n  return next;\n}\n\n/**\n * Typeahead: focus the next enabled item (after the focused one, wrapping)\n * whose text starts with `char`. Returns the index focused, or -1 for no match.\n */\nexport function focusByChar(menu: HTMLElement | null, char: string): number {\n  const items = menuItems(menu);\n  if (items.length === 0) return -1;\n  const needle = char.toLowerCase();\n  const start = items.indexOf(document.activeElement as HTMLElement);\n  for (let step = 1; step <= items.length; step++) {\n    const i = (start + step + items.length) % items.length;\n    if ((items[i]!.textContent ?? \"\").trim().toLowerCase().startsWith(needle)) {\n      items[i]!.focus();\n      return i;\n    }\n  }\n  return -1;\n}\n","import type { KeyboardEvent, MouseEvent } from \"react\";\nimport { useDropdown } from \"./Dropdown.context\";\nimport { focusMenuItem } from \"./dropdown-focus\";\nimport type { DropdownTriggerProps } from \"./Dropdown.types\";\n\n/**\n * Elements the browser itself turns Enter / Space into a click on. For these\n * the trigger lets the native click open the menu; for anything else (an\n * avatar span with `tabIndex`) it opens the menu itself.\n */\nfunction activatesNatively(el: EventTarget | null): boolean {\n  if (!(el instanceof HTMLElement)) return false;\n  const tag = el.tagName;\n  if (tag === \"BUTTON\" || tag === \"SUMMARY\") return true;\n  if (tag === \"A\") return el.hasAttribute(\"href\");\n  if (tag === \"INPUT\") {\n    const type = (el as HTMLInputElement).type;\n    return type === \"button\" || type === \"submit\" || type === \"reset\" || type === \"image\";\n  }\n  return false;\n}\n\nexport function DropdownTrigger({ children }: DropdownTriggerProps) {\n  const { setOpen, open, anchorRef, pendingFocusRef, menuRef } = useDropdown();\n\n  // WAI-ARIA menu button: Enter / Space / ArrowDown open the menu on its first\n  // item, ArrowUp on its last.\n  const onKeyDown = (e: KeyboardEvent<HTMLSpanElement>) => {\n    if (e.defaultPrevented) return;\n\n    if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n      e.preventDefault();\n      const target = e.key === \"ArrowDown\" ? \"first\" : \"last\";\n      if (open && menuRef.current) {\n        focusMenuItem(menuRef.current, target);\n        return;\n      }\n      pendingFocusRef.current = target;\n      setOpen(true);\n      return;\n    }\n\n    if (e.key === \"Enter\" || e.key === \" \") {\n      if (!open) pendingFocusRef.current = \"first\";\n      if (activatesNatively(e.target)) return; // its click toggles the menu\n      e.preventDefault();\n      if (open) pendingFocusRef.current = null;\n      setOpen(!open);\n    }\n  };\n\n  const onClick = (_e: MouseEvent<HTMLSpanElement>) => {\n    if (open) pendingFocusRef.current = null;\n    setOpen(!open);\n  };\n\n  return (\n    <span\n      ref={anchorRef as React.RefObject<HTMLSpanElement>}\n      data-react-fancy-dropdown-trigger=\"\"\n      className=\"inline-flex\"\n      onClick={onClick}\n      onKeyDown={onKeyDown}\n      aria-expanded={open}\n      aria-haspopup=\"menu\"\n    >\n      {children}\n    </span>\n  );\n}\n\nDropdownTrigger.displayName = \"DropdownTrigger\";\n","import { useCallback, useEffect, useRef, useState } from \"react\";\nimport { focusByChar, focusMenuItem, type FocusMove } from \"./dropdown-focus\";\nimport { cn } from \"../../utils/cn\";\nimport { Portal } from \"../Portal\";\nimport { useDropdown } from \"./Dropdown.context\";\nimport { useFloatingPosition } from \"../../hooks/use-floating-position\";\nimport { useOutsideClick } from \"../../hooks/use-outside-click\";\nimport { useEscapeKey } from \"../../hooks/use-escape-key\";\nimport { useAnimation } from \"../../hooks/use-animation\";\nimport type { DropdownItemsProps } from \"./Dropdown.types\";\n\nexport function DropdownItems({ children, className }: DropdownItemsProps) {\n  const {\n    open,\n    setOpen,\n    anchorRef,\n    setActiveIndex,\n    placement,\n    offset,\n    pendingFocusRef,\n    menuRef,\n    focusTrigger,\n  } = useDropdown();\n  const floatingRef = useRef<HTMLDivElement>(null);\n  const outsideRef = useRef<HTMLDivElement>(null);\n\n  const position = useFloatingPosition(anchorRef, floatingRef, {\n    placement,\n    offset,\n    enabled: open,\n  });\n\n  const close = useCallback(() => {\n    pendingFocusRef.current = null;\n    setOpen(false);\n    setActiveIndex(-1);\n  }, [setOpen, setActiveIndex, pendingFocusRef]);\n\n  useOutsideClick(outsideRef, close, open, anchorRef);\n  // Escape closes THIS menu (the innermost layer) and returns focus to where\n  // the menu came from. An outside click does not move focus: the user put it\n  // somewhere already.\n  useEscapeKey(() => {\n    close();\n    focusTrigger();\n  }, open);\n\n  const { mounted, className: animClass, ref: animRef } = useAnimation({\n    open,\n    enterClass: \"fancy-scale-in\",\n    exitClass: \"fancy-fade-out\",\n  });\n\n  // The menu element, as STATE. It does not exist when `open` first turns true:\n  // `useAnimation` mounts it a render later and `Portal` a render after that.\n  // Before 5.64.1 the key handler lived in an effect keyed on `open` that\n  // returned early while the element was null and never re-ran, so the arrow\n  // keys did nothing in any Dropdown. Keying on the element itself fixes the\n  // timing for good.\n  const [menuEl, setMenuEl] = useState<HTMLDivElement | null>(null);\n\n  const setMenuRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      outsideRef.current = node;\n      floatingRef.current = node;\n      (animRef as React.MutableRefObject<HTMLElement | null>).current = node;\n      menuRef.current = node;\n      setMenuEl(node);\n    },\n    [animRef, menuRef],\n  );\n\n  // Opened from the keyboard: focus the first / last item once it exists.\n  useEffect(() => {\n    if (!open || !menuEl) return;\n    const target = pendingFocusRef.current;\n    if (!target) return;\n    pendingFocusRef.current = null;\n    setActiveIndex(focusMenuItem(menuEl, target));\n  }, [open, menuEl, pendingFocusRef, setActiveIndex]);\n\n  // Keys are handled on the menu itself: focus is inside it while it is driven\n  // from the keyboard, and React delivers the event through the portal.\n  const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    const menu = e.currentTarget;\n    const moves: Record<string, FocusMove> = {\n      ArrowDown: \"next\",\n      ArrowUp: \"prev\",\n      Home: \"first\",\n      End: \"last\",\n    };\n    const move = moves[e.key];\n    if (move) {\n      e.preventDefault();\n      setActiveIndex(focusMenuItem(menu, move));\n      return;\n    }\n    if (e.key === \"Tab\") {\n      // Close, and put focus back on the trigger WITHOUT preventing the\n      // default: the browser's own Tab then moves on from the trigger's place\n      // in the tab order rather than from the end of <body>, where the\n      // portalled menu lives.\n      close();\n      focusTrigger();\n      return;\n    }\n    if (e.key.length === 1 && e.key !== \" \" && !e.ctrlKey && !e.metaKey && !e.altKey) {\n      const i = focusByChar(menu, e.key);\n      if (i >= 0) setActiveIndex(i);\n    }\n  };\n\n  if (!mounted) return null;\n\n  return (\n    <Portal>\n      <div\n        ref={setMenuRef}\n        data-react-fancy-dropdown=\"\"\n        role=\"menu\"\n        onKeyDown={onKeyDown}\n        className={cn(\n          \"fixed z-50 min-w-[8rem] rounded-xl border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] p-1 shadow-lg dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]\",\n          animClass,\n          className,\n        )}\n        style={{ left: position.x, top: position.y }}\n      >\n        {children}\n      </div>\n    </Portal>\n  );\n}\n\nDropdownItems.displayName = \"DropdownItems\";\n","import { cn } from \"../../utils/cn\";\nimport { useDropdown } from \"./Dropdown.context\";\nimport type { DropdownItemProps } from \"./Dropdown.types\";\n\nexport function DropdownItem({\n  children,\n  onClick,\n  disabled = false,\n  danger = false,\n  className,\n}: DropdownItemProps) {\n  const { setOpen, focusTrigger } = useDropdown();\n\n  return (\n    <button\n      data-react-fancy-dropdown-item=\"\"\n      type=\"button\"\n      role=\"menuitem\"\n      disabled={disabled}\n      aria-disabled={disabled}\n      className={cn(\n        \"flex w-full items-center rounded-lg px-3 py-2 text-left text-sm transition-colors\",\n        danger\n          ? \"text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950\"\n          : \"text-[color:var(--fancy-text-soft,var(--color-zinc-700))] hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))] dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\",\n        disabled && \"cursor-not-allowed opacity-50\",\n        className,\n      )}\n      onClick={(e) => {\n        if (disabled) return;\n        const hadFocus = document.activeElement === e.currentTarget;\n        onClick?.();\n        setOpen(false);\n        // The item is about to unmount; without this, focus falls to <body>.\n        // Only when the item held focus, and only if onClick did not move it.\n        if (hadFocus && document.activeElement === e.currentTarget) focusTrigger();\n      }}\n    >\n      {children}\n    </button>\n  );\n}\n\nDropdownItem.displayName = \"DropdownItem\";\n","import { cn } from \"../../utils/cn\";\nimport type { DropdownSeparatorProps } from \"./Dropdown.types\";\n\nexport function DropdownSeparator({ className }: DropdownSeparatorProps) {\n  return (\n    <div\n      data-react-fancy-dropdown-separator=\"\"\n      role=\"separator\"\n      className={cn(\n        \"my-1 h-px bg-[color:var(--fancy-border,var(--color-zinc-200))] dark:bg-[color:var(--fancy-border-dark,var(--color-zinc-700))]\",\n        className,\n      )}\n    />\n  );\n}\n\nDropdownSeparator.displayName = \"DropdownSeparator\";\n","import { useCallback, useMemo, useRef, useState } from \"react\";\nimport { DropdownContext } from \"./Dropdown.context\";\nimport { DropdownTrigger } from \"./DropdownTrigger\";\nimport { DropdownItems } from \"./DropdownItems\";\nimport { DropdownItem } from \"./DropdownItem\";\nimport { DropdownSeparator } from \"./DropdownSeparator\";\nimport type { DropdownProps } from \"./Dropdown.types\";\n\nconst TRIGGER_FOCUSABLE =\n  'button:not([disabled]), a[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\nfunction DropdownRoot({\n  children,\n  placement = \"bottom-start\",\n  offset = 4,\n}: DropdownProps) {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const anchorRef = useRef<HTMLElement>(null);\n  const pendingFocusRef = useRef<\"first\" | \"last\" | null>(null);\n  const menuRef = useRef<HTMLElement | null>(null);\n\n  const focusTrigger = useCallback(() => {\n    const anchor = anchorRef.current;\n    if (!anchor) return;\n    const target =\n      anchor.querySelector<HTMLElement>(TRIGGER_FOCUSABLE) ?? (anchor.tabIndex >= 0 ? anchor : null);\n    target?.focus();\n  }, []);\n\n  const ctx = useMemo(\n    () => ({\n      open,\n      setOpen,\n      anchorRef,\n      activeIndex,\n      setActiveIndex,\n      placement,\n      offset,\n      pendingFocusRef,\n      menuRef,\n      focusTrigger,\n    }),\n    [open, anchorRef, activeIndex, placement, offset, focusTrigger],\n  );\n\n  return (\n    <DropdownContext.Provider value={ctx}>{children}</DropdownContext.Provider>\n  );\n}\n\nexport const Dropdown = Object.assign(DropdownRoot, {\n  Trigger: DropdownTrigger,\n  Items: DropdownItems,\n  Item: DropdownItem,\n  Separator: DropdownSeparator,\n});\n"]}

package/dist/chunk-XZOBGKZL.cjs

@@ -0,0 +1,296 @@
+'use strict';
+
+var chunkFQZE5N2N_cjs = require('./chunk-FQZE5N2N.cjs');
+var chunkJ2DI6RMR_cjs = require('./chunk-J2DI6RMR.cjs');
+var chunkTI7D4QDM_cjs = require('./chunk-TI7D4QDM.cjs');
+var chunk57FQGQJK_cjs = require('./chunk-57FQGQJK.cjs');
+var chunkOUYC6EIL_cjs = require('./chunk-OUYC6EIL.cjs');
+var chunkZU5Q77OT_cjs = require('./chunk-ZU5Q77OT.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var DropdownContext = react.createContext(null);
+function useDropdown() {
+  const ctx = react.useContext(DropdownContext);
+  if (!ctx) {
+    throw new Error(
+      "Dropdown compound components must be used within <Dropdown>"
+    );
+  }
+  return ctx;
+}
+
+// src/components/Dropdown/dropdown-focus.ts
+function menuItems(menu) {
+  if (!menu) return [];
+  return Array.from(
+    menu.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"]):not([disabled])')
+  );
+}
+function focusMenuItem(menu, move) {
+  const items = menuItems(menu);
+  if (items.length === 0) return -1;
+  const current = items.indexOf(document.activeElement);
+  let next;
+  if (move === "first") next = 0;
+  else if (move === "last") next = items.length - 1;
+  else if (current === -1) next = move === "next" ? 0 : items.length - 1;
+  else next = (current + (move === "next" ? 1 : -1) + items.length) % items.length;
+  items[next].focus();
+  return next;
+}
+function focusByChar(menu, char) {
+  const items = menuItems(menu);
+  if (items.length === 0) return -1;
+  const needle = char.toLowerCase();
+  const start = items.indexOf(document.activeElement);
+  for (let step = 1; step <= items.length; step++) {
+    const i = (start + step + items.length) % items.length;
+    if ((items[i].textContent ?? "").trim().toLowerCase().startsWith(needle)) {
+      items[i].focus();
+      return i;
+    }
+  }
+  return -1;
+}
+function activatesNatively(el) {
+  if (!(el instanceof HTMLElement)) return false;
+  const tag = el.tagName;
+  if (tag === "BUTTON" || tag === "SUMMARY") return true;
+  if (tag === "A") return el.hasAttribute("href");
+  if (tag === "INPUT") {
+    const type = el.type;
+    return type === "button" || type === "submit" || type === "reset" || type === "image";
+  }
+  return false;
+}
+function DropdownTrigger({ children }) {
+  const { setOpen, open, anchorRef, pendingFocusRef, menuRef } = useDropdown();
+  const onKeyDown = (e) => {
+    if (e.defaultPrevented) return;
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      const target = e.key === "ArrowDown" ? "first" : "last";
+      if (open && menuRef.current) {
+        focusMenuItem(menuRef.current, target);
+        return;
+      }
+      pendingFocusRef.current = target;
+      setOpen(true);
+      return;
+    }
+    if (e.key === "Enter" || e.key === " ") {
+      if (!open) pendingFocusRef.current = "first";
+      if (activatesNatively(e.target)) return;
+      e.preventDefault();
+      if (open) pendingFocusRef.current = null;
+      setOpen(!open);
+    }
+  };
+  const onClick = (_e) => {
+    if (open) pendingFocusRef.current = null;
+    setOpen(!open);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      ref: anchorRef,
+      "data-react-fancy-dropdown-trigger": "",
+      className: "inline-flex",
+      onClick,
+      onKeyDown,
+      "aria-expanded": open,
+      "aria-haspopup": "menu",
+      children
+    }
+  );
+}
+DropdownTrigger.displayName = "DropdownTrigger";
+function DropdownItems({ children, className }) {
+  const {
+    open,
+    setOpen,
+    anchorRef,
+    setActiveIndex,
+    placement,
+    offset,
+    pendingFocusRef,
+    menuRef,
+    focusTrigger
+  } = useDropdown();
+  const floatingRef = react.useRef(null);
+  const outsideRef = react.useRef(null);
+  const position = chunkJ2DI6RMR_cjs.useFloatingPosition(anchorRef, floatingRef, {
+    placement,
+    offset,
+    enabled: open
+  });
+  const close = react.useCallback(() => {
+    pendingFocusRef.current = null;
+    setOpen(false);
+    setActiveIndex(-1);
+  }, [setOpen, setActiveIndex, pendingFocusRef]);
+  chunk57FQGQJK_cjs.useOutsideClick(outsideRef, close, open, anchorRef);
+  chunkOUYC6EIL_cjs.useEscapeKey(() => {
+    close();
+    focusTrigger();
+  }, open);
+  const { mounted, className: animClass, ref: animRef } = chunkFQZE5N2N_cjs.useAnimation({
+    open,
+    enterClass: "fancy-scale-in",
+    exitClass: "fancy-fade-out"
+  });
+  const [menuEl, setMenuEl] = react.useState(null);
+  const setMenuRef = react.useCallback(
+    (node) => {
+      outsideRef.current = node;
+      floatingRef.current = node;
+      animRef.current = node;
+      menuRef.current = node;
+      setMenuEl(node);
+    },
+    [animRef, menuRef]
+  );
+  react.useEffect(() => {
+    if (!open || !menuEl) return;
+    const target = pendingFocusRef.current;
+    if (!target) return;
+    pendingFocusRef.current = null;
+    setActiveIndex(focusMenuItem(menuEl, target));
+  }, [open, menuEl, pendingFocusRef, setActiveIndex]);
+  const onKeyDown = (e) => {
+    const menu = e.currentTarget;
+    const moves = {
+      ArrowDown: "next",
+      ArrowUp: "prev",
+      Home: "first",
+      End: "last"
+    };
+    const move = moves[e.key];
+    if (move) {
+      e.preventDefault();
+      setActiveIndex(focusMenuItem(menu, move));
+      return;
+    }
+    if (e.key === "Tab") {
+      close();
+      focusTrigger();
+      return;
+    }
+    if (e.key.length === 1 && e.key !== " " && !e.ctrlKey && !e.metaKey && !e.altKey) {
+      const i = focusByChar(menu, e.key);
+      if (i >= 0) setActiveIndex(i);
+    }
+  };
+  if (!mounted) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkTI7D4QDM_cjs.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: setMenuRef,
+      "data-react-fancy-dropdown": "",
+      role: "menu",
+      onKeyDown,
+      className: chunkZU5Q77OT_cjs.cn(
+        "fixed z-50 min-w-[8rem] rounded-xl border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] p-1 shadow-lg dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]",
+        animClass,
+        className
+      ),
+      style: { left: position.x, top: position.y },
+      children
+    }
+  ) });
+}
+DropdownItems.displayName = "DropdownItems";
+function DropdownItem({
+  children,
+  onClick,
+  disabled = false,
+  danger = false,
+  className
+}) {
+  const { setOpen, focusTrigger } = useDropdown();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      "data-react-fancy-dropdown-item": "",
+      type: "button",
+      role: "menuitem",
+      disabled,
+      "aria-disabled": disabled,
+      className: chunkZU5Q77OT_cjs.cn(
+        "flex w-full items-center rounded-lg px-3 py-2 text-left text-sm transition-colors",
+        danger ? "text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950" : "text-[color:var(--fancy-text-soft,var(--color-zinc-700))] hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))] dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]",
+        disabled && "cursor-not-allowed opacity-50",
+        className
+      ),
+      onClick: (e) => {
+        if (disabled) return;
+        const hadFocus = document.activeElement === e.currentTarget;
+        onClick?.();
+        setOpen(false);
+        if (hadFocus && document.activeElement === e.currentTarget) focusTrigger();
+      },
+      children
+    }
+  );
+}
+DropdownItem.displayName = "DropdownItem";
+function DropdownSeparator({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-react-fancy-dropdown-separator": "",
+      role: "separator",
+      className: chunkZU5Q77OT_cjs.cn(
+        "my-1 h-px bg-[color:var(--fancy-border,var(--color-zinc-200))] dark:bg-[color:var(--fancy-border-dark,var(--color-zinc-700))]",
+        className
+      )
+    }
+  );
+}
+DropdownSeparator.displayName = "DropdownSeparator";
+var TRIGGER_FOCUSABLE = 'button:not([disabled]), a[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function DropdownRoot({
+  children,
+  placement = "bottom-start",
+  offset = 4
+}) {
+  const [open, setOpen] = react.useState(false);
+  const [activeIndex, setActiveIndex] = react.useState(-1);
+  const anchorRef = react.useRef(null);
+  const pendingFocusRef = react.useRef(null);
+  const menuRef = react.useRef(null);
+  const focusTrigger = react.useCallback(() => {
+    const anchor = anchorRef.current;
+    if (!anchor) return;
+    const target = anchor.querySelector(TRIGGER_FOCUSABLE) ?? (anchor.tabIndex >= 0 ? anchor : null);
+    target?.focus();
+  }, []);
+  const ctx = react.useMemo(
+    () => ({
+      open,
+      setOpen,
+      anchorRef,
+      activeIndex,
+      setActiveIndex,
+      placement,
+      offset,
+      pendingFocusRef,
+      menuRef,
+      focusTrigger
+    }),
+    [open, anchorRef, activeIndex, placement, offset, focusTrigger]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(DropdownContext.Provider, { value: ctx, children });
+}
+var Dropdown = Object.assign(DropdownRoot, {
+  Trigger: DropdownTrigger,
+  Items: DropdownItems,
+  Item: DropdownItem,
+  Separator: DropdownSeparator
+});
+
+exports.Dropdown = Dropdown;
+exports.useDropdown = useDropdown;
+//# sourceMappingURL=chunk-XZOBGKZL.cjs.map
+//# sourceMappingURL=chunk-XZOBGKZL.cjs.map

package/dist/chunk-XZOBGKZL.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Dropdown/Dropdown.context.ts","../src/components/Dropdown/dropdown-focus.ts","../src/components/Dropdown/DropdownTrigger.tsx","../src/components/Dropdown/DropdownItems.tsx","../src/components/Dropdown/DropdownItem.tsx","../src/components/Dropdown/DropdownSeparator.tsx","../src/components/Dropdown/Dropdown.tsx"],"names":["createContext","useContext","jsx","useRef","useFloatingPosition","useCallback","useOutsideClick","useEscapeKey","useAnimation","useState","useEffect","Portal","cn","useMemo"],"mappings":"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","file":"chunk-XZOBGKZL.cjs","sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { DropdownContextValue } from \"./Dropdown.types\";\n\nexport const DropdownContext = createContext<DropdownContextValue | null>(null);\n\nexport function useDropdown(): DropdownContextValue {\n  const ctx = useContext(DropdownContext);\n  if (!ctx) {\n    throw new Error(\n      \"Dropdown compound components must be used within <Dropdown>\",\n    );\n  }\n  return ctx;\n}\n","/** Enabled menu items, in DOM order. Disabled items are skipped. */\nexport function menuItems(menu: HTMLElement | null): HTMLElement[] {\n  if (!menu) return [];\n  return Array.from(\n    menu.querySelectorAll<HTMLElement>('[role=\"menuitem\"]:not([aria-disabled=\"true\"]):not([disabled])'),\n  );\n}\n\nexport type FocusMove = \"first\" | \"last\" | \"next\" | \"prev\";\n\n/**\n * Focus an item relative to the one that currently has focus, wrapping at both\n * ends. Returns the index focused, or -1 when the menu has no enabled item.\n */\nexport function focusMenuItem(menu: HTMLElement | null, move: FocusMove): number {\n  const items = menuItems(menu);\n  if (items.length === 0) return -1;\n  const current = items.indexOf(document.activeElement as HTMLElement);\n  let next: number;\n  if (move === \"first\") next = 0;\n  else if (move === \"last\") next = items.length - 1;\n  else if (current === -1) next = move === \"next\" ? 0 : items.length - 1;\n  else next = (current + (move === \"next\" ? 1 : -1) + items.length) % items.length;\n  items[next]!.focus();\n  return next;\n}\n\n/**\n * Typeahead: focus the next enabled item (after the focused one, wrapping)\n * whose text starts with `char`. Returns the index focused, or -1 for no match.\n */\nexport function focusByChar(menu: HTMLElement | null, char: string): number {\n  const items = menuItems(menu);\n  if (items.length === 0) return -1;\n  const needle = char.toLowerCase();\n  const start = items.indexOf(document.activeElement as HTMLElement);\n  for (let step = 1; step <= items.length; step++) {\n    const i = (start + step + items.length) % items.length;\n    if ((items[i]!.textContent ?? \"\").trim().toLowerCase().startsWith(needle)) {\n      items[i]!.focus();\n      return i;\n    }\n  }\n  return -1;\n}\n","import type { KeyboardEvent, MouseEvent } from \"react\";\nimport { useDropdown } from \"./Dropdown.context\";\nimport { focusMenuItem } from \"./dropdown-focus\";\nimport type { DropdownTriggerProps } from \"./Dropdown.types\";\n\n/**\n * Elements the browser itself turns Enter / Space into a click on. For these\n * the trigger lets the native click open the menu; for anything else (an\n * avatar span with `tabIndex`) it opens the menu itself.\n */\nfunction activatesNatively(el: EventTarget | null): boolean {\n  if (!(el instanceof HTMLElement)) return false;\n  const tag = el.tagName;\n  if (tag === \"BUTTON\" || tag === \"SUMMARY\") return true;\n  if (tag === \"A\") return el.hasAttribute(\"href\");\n  if (tag === \"INPUT\") {\n    const type = (el as HTMLInputElement).type;\n    return type === \"button\" || type === \"submit\" || type === \"reset\" || type === \"image\";\n  }\n  return false;\n}\n\nexport function DropdownTrigger({ children }: DropdownTriggerProps) {\n  const { setOpen, open, anchorRef, pendingFocusRef, menuRef } = useDropdown();\n\n  // WAI-ARIA menu button: Enter / Space / ArrowDown open the menu on its first\n  // item, ArrowUp on its last.\n  const onKeyDown = (e: KeyboardEvent<HTMLSpanElement>) => {\n    if (e.defaultPrevented) return;\n\n    if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n      e.preventDefault();\n      const target = e.key === \"ArrowDown\" ? \"first\" : \"last\";\n      if (open && menuRef.current) {\n        focusMenuItem(menuRef.current, target);\n        return;\n      }\n      pendingFocusRef.current = target;\n      setOpen(true);\n      return;\n    }\n\n    if (e.key === \"Enter\" || e.key === \" \") {\n      if (!open) pendingFocusRef.current = \"first\";\n      if (activatesNatively(e.target)) return; // its click toggles the menu\n      e.preventDefault();\n      if (open) pendingFocusRef.current = null;\n      setOpen(!open);\n    }\n  };\n\n  const onClick = (_e: MouseEvent<HTMLSpanElement>) => {\n    if (open) pendingFocusRef.current = null;\n    setOpen(!open);\n  };\n\n  return (\n    <span\n      ref={anchorRef as React.RefObject<HTMLSpanElement>}\n      data-react-fancy-dropdown-trigger=\"\"\n      className=\"inline-flex\"\n      onClick={onClick}\n      onKeyDown={onKeyDown}\n      aria-expanded={open}\n      aria-haspopup=\"menu\"\n    >\n      {children}\n    </span>\n  );\n}\n\nDropdownTrigger.displayName = \"DropdownTrigger\";\n","import { useCallback, useEffect, useRef, useState } from \"react\";\nimport { focusByChar, focusMenuItem, type FocusMove } from \"./dropdown-focus\";\nimport { cn } from \"../../utils/cn\";\nimport { Portal } from \"../Portal\";\nimport { useDropdown } from \"./Dropdown.context\";\nimport { useFloatingPosition } from \"../../hooks/use-floating-position\";\nimport { useOutsideClick } from \"../../hooks/use-outside-click\";\nimport { useEscapeKey } from \"../../hooks/use-escape-key\";\nimport { useAnimation } from \"../../hooks/use-animation\";\nimport type { DropdownItemsProps } from \"./Dropdown.types\";\n\nexport function DropdownItems({ children, className }: DropdownItemsProps) {\n  const {\n    open,\n    setOpen,\n    anchorRef,\n    setActiveIndex,\n    placement,\n    offset,\n    pendingFocusRef,\n    menuRef,\n    focusTrigger,\n  } = useDropdown();\n  const floatingRef = useRef<HTMLDivElement>(null);\n  const outsideRef = useRef<HTMLDivElement>(null);\n\n  const position = useFloatingPosition(anchorRef, floatingRef, {\n    placement,\n    offset,\n    enabled: open,\n  });\n\n  const close = useCallback(() => {\n    pendingFocusRef.current = null;\n    setOpen(false);\n    setActiveIndex(-1);\n  }, [setOpen, setActiveIndex, pendingFocusRef]);\n\n  useOutsideClick(outsideRef, close, open, anchorRef);\n  // Escape closes THIS menu (the innermost layer) and returns focus to where\n  // the menu came from. An outside click does not move focus: the user put it\n  // somewhere already.\n  useEscapeKey(() => {\n    close();\n    focusTrigger();\n  }, open);\n\n  const { mounted, className: animClass, ref: animRef } = useAnimation({\n    open,\n    enterClass: \"fancy-scale-in\",\n    exitClass: \"fancy-fade-out\",\n  });\n\n  // The menu element, as STATE. It does not exist when `open` first turns true:\n  // `useAnimation` mounts it a render later and `Portal` a render after that.\n  // Before 5.64.1 the key handler lived in an effect keyed on `open` that\n  // returned early while the element was null and never re-ran, so the arrow\n  // keys did nothing in any Dropdown. Keying on the element itself fixes the\n  // timing for good.\n  const [menuEl, setMenuEl] = useState<HTMLDivElement | null>(null);\n\n  const setMenuRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      outsideRef.current = node;\n      floatingRef.current = node;\n      (animRef as React.MutableRefObject<HTMLElement | null>).current = node;\n      menuRef.current = node;\n      setMenuEl(node);\n    },\n    [animRef, menuRef],\n  );\n\n  // Opened from the keyboard: focus the first / last item once it exists.\n  useEffect(() => {\n    if (!open || !menuEl) return;\n    const target = pendingFocusRef.current;\n    if (!target) return;\n    pendingFocusRef.current = null;\n    setActiveIndex(focusMenuItem(menuEl, target));\n  }, [open, menuEl, pendingFocusRef, setActiveIndex]);\n\n  // Keys are handled on the menu itself: focus is inside it while it is driven\n  // from the keyboard, and React delivers the event through the portal.\n  const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    const menu = e.currentTarget;\n    const moves: Record<string, FocusMove> = {\n      ArrowDown: \"next\",\n      ArrowUp: \"prev\",\n      Home: \"first\",\n      End: \"last\",\n    };\n    const move = moves[e.key];\n    if (move) {\n      e.preventDefault();\n      setActiveIndex(focusMenuItem(menu, move));\n      return;\n    }\n    if (e.key === \"Tab\") {\n      // Close, and put focus back on the trigger WITHOUT preventing the\n      // default: the browser's own Tab then moves on from the trigger's place\n      // in the tab order rather than from the end of <body>, where the\n      // portalled menu lives.\n      close();\n      focusTrigger();\n      return;\n    }\n    if (e.key.length === 1 && e.key !== \" \" && !e.ctrlKey && !e.metaKey && !e.altKey) {\n      const i = focusByChar(menu, e.key);\n      if (i >= 0) setActiveIndex(i);\n    }\n  };\n\n  if (!mounted) return null;\n\n  return (\n    <Portal>\n      <div\n        ref={setMenuRef}\n        data-react-fancy-dropdown=\"\"\n        role=\"menu\"\n        onKeyDown={onKeyDown}\n        className={cn(\n          \"fixed z-50 min-w-[8rem] rounded-xl border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] p-1 shadow-lg dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]\",\n          animClass,\n          className,\n        )}\n        style={{ left: position.x, top: position.y }}\n      >\n        {children}\n      </div>\n    </Portal>\n  );\n}\n\nDropdownItems.displayName = \"DropdownItems\";\n","import { cn } from \"../../utils/cn\";\nimport { useDropdown } from \"./Dropdown.context\";\nimport type { DropdownItemProps } from \"./Dropdown.types\";\n\nexport function DropdownItem({\n  children,\n  onClick,\n  disabled = false,\n  danger = false,\n  className,\n}: DropdownItemProps) {\n  const { setOpen, focusTrigger } = useDropdown();\n\n  return (\n    <button\n      data-react-fancy-dropdown-item=\"\"\n      type=\"button\"\n      role=\"menuitem\"\n      disabled={disabled}\n      aria-disabled={disabled}\n      className={cn(\n        \"flex w-full items-center rounded-lg px-3 py-2 text-left text-sm transition-colors\",\n        danger\n          ? \"text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950\"\n          : \"text-[color:var(--fancy-text-soft,var(--color-zinc-700))] hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))] dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\",\n        disabled && \"cursor-not-allowed opacity-50\",\n        className,\n      )}\n      onClick={(e) => {\n        if (disabled) return;\n        const hadFocus = document.activeElement === e.currentTarget;\n        onClick?.();\n        setOpen(false);\n        // The item is about to unmount; without this, focus falls to <body>.\n        // Only when the item held focus, and only if onClick did not move it.\n        if (hadFocus && document.activeElement === e.currentTarget) focusTrigger();\n      }}\n    >\n      {children}\n    </button>\n  );\n}\n\nDropdownItem.displayName = \"DropdownItem\";\n","import { cn } from \"../../utils/cn\";\nimport type { DropdownSeparatorProps } from \"./Dropdown.types\";\n\nexport function DropdownSeparator({ className }: DropdownSeparatorProps) {\n  return (\n    <div\n      data-react-fancy-dropdown-separator=\"\"\n      role=\"separator\"\n      className={cn(\n        \"my-1 h-px bg-[color:var(--fancy-border,var(--color-zinc-200))] dark:bg-[color:var(--fancy-border-dark,var(--color-zinc-700))]\",\n        className,\n      )}\n    />\n  );\n}\n\nDropdownSeparator.displayName = \"DropdownSeparator\";\n","import { useCallback, useMemo, useRef, useState } from \"react\";\nimport { DropdownContext } from \"./Dropdown.context\";\nimport { DropdownTrigger } from \"./DropdownTrigger\";\nimport { DropdownItems } from \"./DropdownItems\";\nimport { DropdownItem } from \"./DropdownItem\";\nimport { DropdownSeparator } from \"./DropdownSeparator\";\nimport type { DropdownProps } from \"./Dropdown.types\";\n\nconst TRIGGER_FOCUSABLE =\n  'button:not([disabled]), a[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\nfunction DropdownRoot({\n  children,\n  placement = \"bottom-start\",\n  offset = 4,\n}: DropdownProps) {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const anchorRef = useRef<HTMLElement>(null);\n  const pendingFocusRef = useRef<\"first\" | \"last\" | null>(null);\n  const menuRef = useRef<HTMLElement | null>(null);\n\n  const focusTrigger = useCallback(() => {\n    const anchor = anchorRef.current;\n    if (!anchor) return;\n    const target =\n      anchor.querySelector<HTMLElement>(TRIGGER_FOCUSABLE) ?? (anchor.tabIndex >= 0 ? anchor : null);\n    target?.focus();\n  }, []);\n\n  const ctx = useMemo(\n    () => ({\n      open,\n      setOpen,\n      anchorRef,\n      activeIndex,\n      setActiveIndex,\n      placement,\n      offset,\n      pendingFocusRef,\n      menuRef,\n      focusTrigger,\n    }),\n    [open, anchorRef, activeIndex, placement, offset, focusTrigger],\n  );\n\n  return (\n    <DropdownContext.Provider value={ctx}>{children}</DropdownContext.Provider>\n  );\n}\n\nexport const Dropdown = Object.assign(DropdownRoot, {\n  Trigger: DropdownTrigger,\n  Items: DropdownItems,\n  Item: DropdownItem,\n  Separator: DropdownSeparator,\n});\n"]}

package/dist/dropdown.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkA6HWKQ4D_cjs = require('./chunk-A6HWKQ4D.cjs');
+var chunkXZOBGKZL_cjs = require('./chunk-XZOBGKZL.cjs');
 require('./chunk-FQZE5N2N.cjs');
 require('./chunk-J2DI6RMR.cjs');
 require('./chunk-MKHYENKR.cjs');
@@ -13,11 +13,11 @@ require('./chunk-ZU5Q77OT.cjs');
 
 Object.defineProperty(exports, "Dropdown", {
   enumerable: true,
-  get: function () { return chunkA6HWKQ4D_cjs.Dropdown; }
+  get: function () { return chunkXZOBGKZL_cjs.Dropdown; }
 });
 Object.defineProperty(exports, "useDropdown", {
   enumerable: true,
-  get: function () { return chunkA6HWKQ4D_cjs.useDropdown; }
+  get: function () { return chunkXZOBGKZL_cjs.useDropdown; }
 });
 //# sourceMappingURL=dropdown.cjs.map
 //# sourceMappingURL=dropdown.cjs.map

package/dist/dropdown.d.cts

@@ -10,6 +10,16 @@ interface DropdownContextValue {
     setActiveIndex: (index: number) => void;
     placement: Placement;
     offset: number;
+    /**
+     * Which item the menu focuses when it next mounts: set by the trigger when
+     * the menu is opened from the keyboard, consumed by `Dropdown.Items`.
+     * @internal
+     */
+    pendingFocusRef: React.MutableRefObject<"first" | "last" | null>;
+    /** The open menu element, or null while closed. @internal */
+    menuRef: React.MutableRefObject<HTMLElement | null>;
+    /** Move focus back to the trigger (its first focusable element). */
+    focusTrigger: () => void;
 }
 interface DropdownProps {
     children: ReactNode;

package/dist/dropdown.d.ts

@@ -10,6 +10,16 @@ interface DropdownContextValue {
     setActiveIndex: (index: number) => void;
     placement: Placement;
     offset: number;
+    /**
+     * Which item the menu focuses when it next mounts: set by the trigger when
+     * the menu is opened from the keyboard, consumed by `Dropdown.Items`.
+     * @internal
+     */
+    pendingFocusRef: React.MutableRefObject<"first" | "last" | null>;
+    /** The open menu element, or null while closed. @internal */
+    menuRef: React.MutableRefObject<HTMLElement | null>;
+    /** Move focus back to the trigger (its first focusable element). */
+    focusTrigger: () => void;
 }
 interface DropdownProps {
     children: ReactNode;

package/dist/dropdown.js

@@ -1,4 +1,4 @@
-export { Dropdown, useDropdown } from './chunk-JG2DJK5A.js';
+export { Dropdown, useDropdown } from './chunk-BXPLERIJ.js';
 import './chunk-3K2CEAI7.js';
 import './chunk-MQ6VGG62.js';
 import './chunk-5VMILVWD.js';

package/dist/index.cjs

@@ -77,7 +77,7 @@ var chunkFQSSVOVQ_cjs = require('./chunk-FQSSVOVQ.cjs');
 require('./chunk-S3TRSECD.cjs');
 var chunkZ7SQMQTF_cjs = require('./chunk-Z7SQMQTF.cjs');
 var chunkAJPYGRLA_cjs = require('./chunk-AJPYGRLA.cjs');
-var chunkA6HWKQ4D_cjs = require('./chunk-A6HWKQ4D.cjs');
+var chunkXZOBGKZL_cjs = require('./chunk-XZOBGKZL.cjs');
 var chunkATIDUWY6_cjs = require('./chunk-ATIDUWY6.cjs');
 var chunkA2JUTNE6_cjs = require('./chunk-A2JUTNE6.cjs');
 var chunkT6YELZPJ_cjs = require('./chunk-T6YELZPJ.cjs');
@@ -637,11 +637,11 @@ Object.defineProperty(exports, "useDrawer", {
 });
 Object.defineProperty(exports, "Dropdown", {
   enumerable: true,
-  get: function () { return chunkA6HWKQ4D_cjs.Dropdown; }
+  get: function () { return chunkXZOBGKZL_cjs.Dropdown; }
 });
 Object.defineProperty(exports, "useDropdown", {
   enumerable: true,
-  get: function () { return chunkA6HWKQ4D_cjs.useDropdown; }
+  get: function () { return chunkXZOBGKZL_cjs.useDropdown; }
 });
 Object.defineProperty(exports, "Editor", {
   enumerable: true,

package/dist/index.js

@@ -75,7 +75,7 @@ export { Container } from './chunk-VKMPVFQK.js';
 import './chunk-AUTW5O4W.js';
 export { ContextMenu, useContextMenu } from './chunk-NSJBVV7R.js';
 export { Drawer, useDrawer } from './chunk-PXZRYL5I.js';
-export { Dropdown, useDropdown } from './chunk-JG2DJK5A.js';
+export { Dropdown, useDropdown } from './chunk-BXPLERIJ.js';
 export { Editor, useEditor } from './chunk-CAUEKGMR.js';
 export { THEME_STORAGE_KEY, getThemePreference, initTheme, resolveTheme, setThemePreference, subscribeTheme, useId, useNodeRegistry, useTheme } from './chunk-2BXMMVQS.js';
 export { usePanZoom } from './chunk-CPY7NHXM.js';

package/docs/ReorderableGrid.md

@@ -42,6 +42,8 @@ const [order, setOrder] = useState(fields.map((f) => f.id));
 
 Uncontrolled: leave out `value`, optionally pass `defaultValue`, and listen to `onReorder`.
 
+**The cell is already framed.** By default every cell draws its own border, surface and padding, so `renderItem` should return bare content, as above. If you wrap it in your own bordered card you get a frame inside a frame. To draw the cell yourself, pass `unstyled` (drag, keyboard and announcements are unchanged), or adjust the default frame with `cellClassName`.
+
 ## Order: `value` is a list of ids
 
 `items` carries the data and `value` (or `defaultValue`) carries the order. The order is not taken from `items`. This follows the kit's controlled pattern (`value` / `defaultValue`, see `useControllableState`), and it suits the two consumers:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-academy/react-fancy",
-  "version": "5.64.0",
+  "version": "5.64.1",
   "description": "React UI component library for Human+ UX — controlled, agent-bridgeable primitives",
   "repository": {
     "type": "git",

package/dist/chunk-A6HWKQ4D.cjs

@@ -1,172 +0,0 @@
-'use strict';
-
-var chunkFQZE5N2N_cjs = require('./chunk-FQZE5N2N.cjs');
-var chunkJ2DI6RMR_cjs = require('./chunk-J2DI6RMR.cjs');
-var chunkTI7D4QDM_cjs = require('./chunk-TI7D4QDM.cjs');
-var chunk57FQGQJK_cjs = require('./chunk-57FQGQJK.cjs');
-var chunkOUYC6EIL_cjs = require('./chunk-OUYC6EIL.cjs');
-var chunkZU5Q77OT_cjs = require('./chunk-ZU5Q77OT.cjs');
-var react = require('react');
-var jsxRuntime = require('react/jsx-runtime');
-
-var DropdownContext = react.createContext(null);
-function useDropdown() {
-  const ctx = react.useContext(DropdownContext);
-  if (!ctx) {
-    throw new Error(
-      "Dropdown compound components must be used within <Dropdown>"
-    );
-  }
-  return ctx;
-}
-function DropdownTrigger({ children }) {
-  const { setOpen, open, anchorRef } = useDropdown();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    {
-      ref: anchorRef,
-      "data-react-fancy-dropdown-trigger": "",
-      className: "inline-flex",
-      onClick: () => setOpen(!open),
-      "aria-expanded": open,
-      "aria-haspopup": "menu",
-      children
-    }
-  );
-}
-DropdownTrigger.displayName = "DropdownTrigger";
-function DropdownItems({ children, className }) {
-  const { open, setOpen, anchorRef, activeIndex, setActiveIndex, placement, offset } = useDropdown();
-  const floatingRef = react.useRef(null);
-  const outsideRef = react.useRef(null);
-  const position = chunkJ2DI6RMR_cjs.useFloatingPosition(anchorRef, floatingRef, {
-    placement,
-    offset,
-    enabled: open
-  });
-  const close = react.useCallback(() => {
-    setOpen(false);
-    setActiveIndex(-1);
-  }, [setOpen, setActiveIndex]);
-  chunk57FQGQJK_cjs.useOutsideClick(outsideRef, close, open, anchorRef);
-  chunkOUYC6EIL_cjs.useEscapeKey(close, open);
-  const { mounted, className: animClass, ref: animRef } = chunkFQZE5N2N_cjs.useAnimation({
-    open,
-    enterClass: "fancy-scale-in",
-    exitClass: "fancy-fade-out"
-  });
-  react.useEffect(() => {
-    if (!open || !floatingRef.current) return;
-    const handleKeyDown = (e) => {
-      const items = floatingRef.current?.querySelectorAll(
-        '[role="menuitem"]:not([aria-disabled="true"])'
-      );
-      if (!items?.length) return;
-      if (e.key === "ArrowDown") {
-        e.preventDefault();
-        const next = activeIndex < items.length - 1 ? activeIndex + 1 : 0;
-        setActiveIndex(next);
-        items[next]?.focus();
-      } else if (e.key === "ArrowUp") {
-        e.preventDefault();
-        const prev = activeIndex > 0 ? activeIndex - 1 : items.length - 1;
-        setActiveIndex(prev);
-        items[prev]?.focus();
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [open, activeIndex, setActiveIndex]);
-  if (!mounted) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(chunkTI7D4QDM_cjs.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ref: (node) => {
-        outsideRef.current = node;
-        floatingRef.current = node;
-        animRef.current = node;
-      },
-      "data-react-fancy-dropdown": "",
-      role: "menu",
-      className: chunkZU5Q77OT_cjs.cn(
-        "fixed z-50 min-w-[8rem] rounded-xl border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] p-1 shadow-lg dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]",
-        animClass,
-        className
-      ),
-      style: { left: position.x, top: position.y },
-      children
-    }
-  ) });
-}
-DropdownItems.displayName = "DropdownItems";
-function DropdownItem({
-  children,
-  onClick,
-  disabled = false,
-  danger = false,
-  className
-}) {
-  const { setOpen } = useDropdown();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
-    {
-      "data-react-fancy-dropdown-item": "",
-      type: "button",
-      role: "menuitem",
-      disabled,
-      "aria-disabled": disabled,
-      className: chunkZU5Q77OT_cjs.cn(
-        "flex w-full items-center rounded-lg px-3 py-2 text-left text-sm transition-colors",
-        danger ? "text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950" : "text-[color:var(--fancy-text-soft,var(--color-zinc-700))] hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))] dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]",
-        disabled && "cursor-not-allowed opacity-50",
-        className
-      ),
-      onClick: () => {
-        if (disabled) return;
-        onClick?.();
-        setOpen(false);
-      },
-      children
-    }
-  );
-}
-DropdownItem.displayName = "DropdownItem";
-function DropdownSeparator({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-react-fancy-dropdown-separator": "",
-      role: "separator",
-      className: chunkZU5Q77OT_cjs.cn(
-        "my-1 h-px bg-[color:var(--fancy-border,var(--color-zinc-200))] dark:bg-[color:var(--fancy-border-dark,var(--color-zinc-700))]",
-        className
-      )
-    }
-  );
-}
-DropdownSeparator.displayName = "DropdownSeparator";
-function DropdownRoot({
-  children,
-  placement = "bottom-start",
-  offset = 4
-}) {
-  const [open, setOpen] = react.useState(false);
-  const [activeIndex, setActiveIndex] = react.useState(-1);
-  const anchorRef = react.useRef(null);
-  const ctx = react.useMemo(
-    () => ({ open, setOpen, anchorRef, activeIndex, setActiveIndex, placement, offset }),
-    [open, anchorRef, activeIndex, placement, offset]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(DropdownContext.Provider, { value: ctx, children });
-}
-var Dropdown = Object.assign(DropdownRoot, {
-  Trigger: DropdownTrigger,
-  Items: DropdownItems,
-  Item: DropdownItem,
-  Separator: DropdownSeparator
-});
-
-exports.Dropdown = Dropdown;
-exports.useDropdown = useDropdown;
-//# sourceMappingURL=chunk-A6HWKQ4D.cjs.map
-//# sourceMappingURL=chunk-A6HWKQ4D.cjs.map

package/dist/chunk-A6HWKQ4D.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/Dropdown/Dropdown.context.ts","../src/components/Dropdown/DropdownTrigger.tsx","../src/components/Dropdown/DropdownItems.tsx","../src/components/Dropdown/DropdownItem.tsx","../src/components/Dropdown/DropdownSeparator.tsx","../src/components/Dropdown/Dropdown.tsx"],"names":["createContext","useContext","jsx","useRef","useFloatingPosition","useCallback","useOutsideClick","useEscapeKey","useAnimation","useEffect","Portal","cn","useState","useMemo"],"mappings":"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","file":"chunk-A6HWKQ4D.cjs","sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { DropdownContextValue } from \"./Dropdown.types\";\n\nexport const DropdownContext = createContext<DropdownContextValue | null>(null);\n\nexport function useDropdown(): DropdownContextValue {\n  const ctx = useContext(DropdownContext);\n  if (!ctx) {\n    throw new Error(\n      \"Dropdown compound components must be used within <Dropdown>\",\n    );\n  }\n  return ctx;\n}\n","import { useDropdown } from \"./Dropdown.context\";\nimport type { DropdownTriggerProps } from \"./Dropdown.types\";\n\nexport function DropdownTrigger({ children }: DropdownTriggerProps) {\n  const { setOpen, open, anchorRef } = useDropdown();\n\n  return (\n    <span\n      ref={anchorRef as React.RefObject<HTMLSpanElement>}\n      data-react-fancy-dropdown-trigger=\"\"\n      className=\"inline-flex\"\n      onClick={() => setOpen(!open)}\n      aria-expanded={open}\n      aria-haspopup=\"menu\"\n    >\n      {children}\n    </span>\n  );\n}\n\nDropdownTrigger.displayName = \"DropdownTrigger\";\n","import { useCallback, useEffect, useRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Portal } from \"../Portal\";\nimport { useDropdown } from \"./Dropdown.context\";\nimport { useFloatingPosition } from \"../../hooks/use-floating-position\";\nimport { useOutsideClick } from \"../../hooks/use-outside-click\";\nimport { useEscapeKey } from \"../../hooks/use-escape-key\";\nimport { useAnimation } from \"../../hooks/use-animation\";\nimport type { DropdownItemsProps } from \"./Dropdown.types\";\n\nexport function DropdownItems({ children, className }: DropdownItemsProps) {\n  const { open, setOpen, anchorRef, activeIndex, setActiveIndex, placement, offset } =\n    useDropdown();\n  const floatingRef = useRef<HTMLDivElement>(null);\n  const outsideRef = useRef<HTMLDivElement>(null);\n\n  const position = useFloatingPosition(anchorRef, floatingRef, {\n    placement,\n    offset,\n    enabled: open,\n  });\n\n  const close = useCallback(() => {\n    setOpen(false);\n    setActiveIndex(-1);\n  }, [setOpen, setActiveIndex]);\n\n  useOutsideClick(outsideRef, close, open, anchorRef);\n  useEscapeKey(close, open);\n\n  const { mounted, className: animClass, ref: animRef } = useAnimation({\n    open,\n    enterClass: \"fancy-scale-in\",\n    exitClass: \"fancy-fade-out\",\n  });\n\n  useEffect(() => {\n    if (!open || !floatingRef.current) return;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      const items = floatingRef.current?.querySelectorAll<HTMLElement>(\n        '[role=\"menuitem\"]:not([aria-disabled=\"true\"])',\n      );\n      if (!items?.length) return;\n\n      if (e.key === \"ArrowDown\") {\n        e.preventDefault();\n        const next = activeIndex < items.length - 1 ? activeIndex + 1 : 0;\n        setActiveIndex(next);\n        items[next]?.focus();\n      } else if (e.key === \"ArrowUp\") {\n        e.preventDefault();\n        const prev = activeIndex > 0 ? activeIndex - 1 : items.length - 1;\n        setActiveIndex(prev);\n        items[prev]?.focus();\n      }\n    };\n\n    document.addEventListener(\"keydown\", handleKeyDown);\n    return () => document.removeEventListener(\"keydown\", handleKeyDown);\n  }, [open, activeIndex, setActiveIndex]);\n\n  if (!mounted) return null;\n\n  return (\n    <Portal>\n      <div\n        ref={(node) => {\n          outsideRef.current = node;\n          floatingRef.current = node;\n          (animRef as React.MutableRefObject<HTMLElement | null>).current = node;\n        }}\n        data-react-fancy-dropdown=\"\"\n        role=\"menu\"\n        className={cn(\n          \"fixed z-50 min-w-[8rem] rounded-xl border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] p-1 shadow-lg dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]\",\n          animClass,\n          className,\n        )}\n        style={{ left: position.x, top: position.y }}\n      >\n        {children}\n      </div>\n    </Portal>\n  );\n}\n\nDropdownItems.displayName = \"DropdownItems\";\n","import { cn } from \"../../utils/cn\";\nimport { useDropdown } from \"./Dropdown.context\";\nimport type { DropdownItemProps } from \"./Dropdown.types\";\n\nexport function DropdownItem({\n  children,\n  onClick,\n  disabled = false,\n  danger = false,\n  className,\n}: DropdownItemProps) {\n  const { setOpen } = useDropdown();\n\n  return (\n    <button\n      data-react-fancy-dropdown-item=\"\"\n      type=\"button\"\n      role=\"menuitem\"\n      disabled={disabled}\n      aria-disabled={disabled}\n      className={cn(\n        \"flex w-full items-center rounded-lg px-3 py-2 text-left text-sm transition-colors\",\n        danger\n          ? \"text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950\"\n          : \"text-[color:var(--fancy-text-soft,var(--color-zinc-700))] hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))] dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\",\n        disabled && \"cursor-not-allowed opacity-50\",\n        className,\n      )}\n      onClick={() => {\n        if (disabled) return;\n        onClick?.();\n        setOpen(false);\n      }}\n    >\n      {children}\n    </button>\n  );\n}\n\nDropdownItem.displayName = \"DropdownItem\";\n","import { cn } from \"../../utils/cn\";\nimport type { DropdownSeparatorProps } from \"./Dropdown.types\";\n\nexport function DropdownSeparator({ className }: DropdownSeparatorProps) {\n  return (\n    <div\n      data-react-fancy-dropdown-separator=\"\"\n      role=\"separator\"\n      className={cn(\n        \"my-1 h-px bg-[color:var(--fancy-border,var(--color-zinc-200))] dark:bg-[color:var(--fancy-border-dark,var(--color-zinc-700))]\",\n        className,\n      )}\n    />\n  );\n}\n\nDropdownSeparator.displayName = \"DropdownSeparator\";\n","import { useMemo, useRef, useState } from \"react\";\nimport { DropdownContext } from \"./Dropdown.context\";\nimport { DropdownTrigger } from \"./DropdownTrigger\";\nimport { DropdownItems } from \"./DropdownItems\";\nimport { DropdownItem } from \"./DropdownItem\";\nimport { DropdownSeparator } from \"./DropdownSeparator\";\nimport type { DropdownProps } from \"./Dropdown.types\";\n\nfunction DropdownRoot({\n  children,\n  placement = \"bottom-start\",\n  offset = 4,\n}: DropdownProps) {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const anchorRef = useRef<HTMLElement>(null);\n\n  const ctx = useMemo(\n    () => ({ open, setOpen, anchorRef, activeIndex, setActiveIndex, placement, offset }),\n    [open, anchorRef, activeIndex, placement, offset],\n  );\n\n  return (\n    <DropdownContext.Provider value={ctx}>{children}</DropdownContext.Provider>\n  );\n}\n\nexport const Dropdown = Object.assign(DropdownRoot, {\n  Trigger: DropdownTrigger,\n  Items: DropdownItems,\n  Item: DropdownItem,\n  Separator: DropdownSeparator,\n});\n"]}

package/dist/chunk-JG2DJK5A.js

@@ -1,169 +0,0 @@
-import { useAnimation } from './chunk-3K2CEAI7.js';
-import { useFloatingPosition } from './chunk-MQ6VGG62.js';
-import { Portal } from './chunk-RBCMKPBX.js';
-import { useOutsideClick } from './chunk-RGANGU7X.js';
-import { useEscapeKey } from './chunk-YX6FTJ6N.js';
-import { cn } from './chunk-MMW2JGKZ.js';
-import { createContext, useState, useRef, useMemo, useCallback, useEffect, useContext } from 'react';
-import { jsx } from 'react/jsx-runtime';
-
-var DropdownContext = createContext(null);
-function useDropdown() {
-  const ctx = useContext(DropdownContext);
-  if (!ctx) {
-    throw new Error(
-      "Dropdown compound components must be used within <Dropdown>"
-    );
-  }
-  return ctx;
-}
-function DropdownTrigger({ children }) {
-  const { setOpen, open, anchorRef } = useDropdown();
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      ref: anchorRef,
-      "data-react-fancy-dropdown-trigger": "",
-      className: "inline-flex",
-      onClick: () => setOpen(!open),
-      "aria-expanded": open,
-      "aria-haspopup": "menu",
-      children
-    }
-  );
-}
-DropdownTrigger.displayName = "DropdownTrigger";
-function DropdownItems({ children, className }) {
-  const { open, setOpen, anchorRef, activeIndex, setActiveIndex, placement, offset } = useDropdown();
-  const floatingRef = useRef(null);
-  const outsideRef = useRef(null);
-  const position = useFloatingPosition(anchorRef, floatingRef, {
-    placement,
-    offset,
-    enabled: open
-  });
-  const close = useCallback(() => {
-    setOpen(false);
-    setActiveIndex(-1);
-  }, [setOpen, setActiveIndex]);
-  useOutsideClick(outsideRef, close, open, anchorRef);
-  useEscapeKey(close, open);
-  const { mounted, className: animClass, ref: animRef } = useAnimation({
-    open,
-    enterClass: "fancy-scale-in",
-    exitClass: "fancy-fade-out"
-  });
-  useEffect(() => {
-    if (!open || !floatingRef.current) return;
-    const handleKeyDown = (e) => {
-      const items = floatingRef.current?.querySelectorAll(
-        '[role="menuitem"]:not([aria-disabled="true"])'
-      );
-      if (!items?.length) return;
-      if (e.key === "ArrowDown") {
-        e.preventDefault();
-        const next = activeIndex < items.length - 1 ? activeIndex + 1 : 0;
-        setActiveIndex(next);
-        items[next]?.focus();
-      } else if (e.key === "ArrowUp") {
-        e.preventDefault();
-        const prev = activeIndex > 0 ? activeIndex - 1 : items.length - 1;
-        setActiveIndex(prev);
-        items[prev]?.focus();
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [open, activeIndex, setActiveIndex]);
-  if (!mounted) return null;
-  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: (node) => {
-        outsideRef.current = node;
-        floatingRef.current = node;
-        animRef.current = node;
-      },
-      "data-react-fancy-dropdown": "",
-      role: "menu",
-      className: cn(
-        "fixed z-50 min-w-[8rem] rounded-xl border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] p-1 shadow-lg dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]",
-        animClass,
-        className
-      ),
-      style: { left: position.x, top: position.y },
-      children
-    }
-  ) });
-}
-DropdownItems.displayName = "DropdownItems";
-function DropdownItem({
-  children,
-  onClick,
-  disabled = false,
-  danger = false,
-  className
-}) {
-  const { setOpen } = useDropdown();
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      "data-react-fancy-dropdown-item": "",
-      type: "button",
-      role: "menuitem",
-      disabled,
-      "aria-disabled": disabled,
-      className: cn(
-        "flex w-full items-center rounded-lg px-3 py-2 text-left text-sm transition-colors",
-        danger ? "text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950" : "text-[color:var(--fancy-text-soft,var(--color-zinc-700))] hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))] dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]",
-        disabled && "cursor-not-allowed opacity-50",
-        className
-      ),
-      onClick: () => {
-        if (disabled) return;
-        onClick?.();
-        setOpen(false);
-      },
-      children
-    }
-  );
-}
-DropdownItem.displayName = "DropdownItem";
-function DropdownSeparator({ className }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-react-fancy-dropdown-separator": "",
-      role: "separator",
-      className: cn(
-        "my-1 h-px bg-[color:var(--fancy-border,var(--color-zinc-200))] dark:bg-[color:var(--fancy-border-dark,var(--color-zinc-700))]",
-        className
-      )
-    }
-  );
-}
-DropdownSeparator.displayName = "DropdownSeparator";
-function DropdownRoot({
-  children,
-  placement = "bottom-start",
-  offset = 4
-}) {
-  const [open, setOpen] = useState(false);
-  const [activeIndex, setActiveIndex] = useState(-1);
-  const anchorRef = useRef(null);
-  const ctx = useMemo(
-    () => ({ open, setOpen, anchorRef, activeIndex, setActiveIndex, placement, offset }),
-    [open, anchorRef, activeIndex, placement, offset]
-  );
-  return /* @__PURE__ */ jsx(DropdownContext.Provider, { value: ctx, children });
-}
-var Dropdown = Object.assign(DropdownRoot, {
-  Trigger: DropdownTrigger,
-  Items: DropdownItems,
-  Item: DropdownItem,
-  Separator: DropdownSeparator
-});
-
-export { Dropdown, useDropdown };
-//# sourceMappingURL=chunk-JG2DJK5A.js.map
-//# sourceMappingURL=chunk-JG2DJK5A.js.map

package/dist/chunk-JG2DJK5A.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/Dropdown/Dropdown.context.ts","../src/components/Dropdown/DropdownTrigger.tsx","../src/components/Dropdown/DropdownItems.tsx","../src/components/Dropdown/DropdownItem.tsx","../src/components/Dropdown/DropdownSeparator.tsx","../src/components/Dropdown/Dropdown.tsx"],"names":["jsx","useRef"],"mappings":"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","file":"chunk-JG2DJK5A.js","sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { DropdownContextValue } from \"./Dropdown.types\";\n\nexport const DropdownContext = createContext<DropdownContextValue | null>(null);\n\nexport function useDropdown(): DropdownContextValue {\n  const ctx = useContext(DropdownContext);\n  if (!ctx) {\n    throw new Error(\n      \"Dropdown compound components must be used within <Dropdown>\",\n    );\n  }\n  return ctx;\n}\n","import { useDropdown } from \"./Dropdown.context\";\nimport type { DropdownTriggerProps } from \"./Dropdown.types\";\n\nexport function DropdownTrigger({ children }: DropdownTriggerProps) {\n  const { setOpen, open, anchorRef } = useDropdown();\n\n  return (\n    <span\n      ref={anchorRef as React.RefObject<HTMLSpanElement>}\n      data-react-fancy-dropdown-trigger=\"\"\n      className=\"inline-flex\"\n      onClick={() => setOpen(!open)}\n      aria-expanded={open}\n      aria-haspopup=\"menu\"\n    >\n      {children}\n    </span>\n  );\n}\n\nDropdownTrigger.displayName = \"DropdownTrigger\";\n","import { useCallback, useEffect, useRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Portal } from \"../Portal\";\nimport { useDropdown } from \"./Dropdown.context\";\nimport { useFloatingPosition } from \"../../hooks/use-floating-position\";\nimport { useOutsideClick } from \"../../hooks/use-outside-click\";\nimport { useEscapeKey } from \"../../hooks/use-escape-key\";\nimport { useAnimation } from \"../../hooks/use-animation\";\nimport type { DropdownItemsProps } from \"./Dropdown.types\";\n\nexport function DropdownItems({ children, className }: DropdownItemsProps) {\n  const { open, setOpen, anchorRef, activeIndex, setActiveIndex, placement, offset } =\n    useDropdown();\n  const floatingRef = useRef<HTMLDivElement>(null);\n  const outsideRef = useRef<HTMLDivElement>(null);\n\n  const position = useFloatingPosition(anchorRef, floatingRef, {\n    placement,\n    offset,\n    enabled: open,\n  });\n\n  const close = useCallback(() => {\n    setOpen(false);\n    setActiveIndex(-1);\n  }, [setOpen, setActiveIndex]);\n\n  useOutsideClick(outsideRef, close, open, anchorRef);\n  useEscapeKey(close, open);\n\n  const { mounted, className: animClass, ref: animRef } = useAnimation({\n    open,\n    enterClass: \"fancy-scale-in\",\n    exitClass: \"fancy-fade-out\",\n  });\n\n  useEffect(() => {\n    if (!open || !floatingRef.current) return;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      const items = floatingRef.current?.querySelectorAll<HTMLElement>(\n        '[role=\"menuitem\"]:not([aria-disabled=\"true\"])',\n      );\n      if (!items?.length) return;\n\n      if (e.key === \"ArrowDown\") {\n        e.preventDefault();\n        const next = activeIndex < items.length - 1 ? activeIndex + 1 : 0;\n        setActiveIndex(next);\n        items[next]?.focus();\n      } else if (e.key === \"ArrowUp\") {\n        e.preventDefault();\n        const prev = activeIndex > 0 ? activeIndex - 1 : items.length - 1;\n        setActiveIndex(prev);\n        items[prev]?.focus();\n      }\n    };\n\n    document.addEventListener(\"keydown\", handleKeyDown);\n    return () => document.removeEventListener(\"keydown\", handleKeyDown);\n  }, [open, activeIndex, setActiveIndex]);\n\n  if (!mounted) return null;\n\n  return (\n    <Portal>\n      <div\n        ref={(node) => {\n          outsideRef.current = node;\n          floatingRef.current = node;\n          (animRef as React.MutableRefObject<HTMLElement | null>).current = node;\n        }}\n        data-react-fancy-dropdown=\"\"\n        role=\"menu\"\n        className={cn(\n          \"fixed z-50 min-w-[8rem] rounded-xl border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] p-1 shadow-lg dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]\",\n          animClass,\n          className,\n        )}\n        style={{ left: position.x, top: position.y }}\n      >\n        {children}\n      </div>\n    </Portal>\n  );\n}\n\nDropdownItems.displayName = \"DropdownItems\";\n","import { cn } from \"../../utils/cn\";\nimport { useDropdown } from \"./Dropdown.context\";\nimport type { DropdownItemProps } from \"./Dropdown.types\";\n\nexport function DropdownItem({\n  children,\n  onClick,\n  disabled = false,\n  danger = false,\n  className,\n}: DropdownItemProps) {\n  const { setOpen } = useDropdown();\n\n  return (\n    <button\n      data-react-fancy-dropdown-item=\"\"\n      type=\"button\"\n      role=\"menuitem\"\n      disabled={disabled}\n      aria-disabled={disabled}\n      className={cn(\n        \"flex w-full items-center rounded-lg px-3 py-2 text-left text-sm transition-colors\",\n        danger\n          ? \"text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950\"\n          : \"text-[color:var(--fancy-text-soft,var(--color-zinc-700))] hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))] dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\",\n        disabled && \"cursor-not-allowed opacity-50\",\n        className,\n      )}\n      onClick={() => {\n        if (disabled) return;\n        onClick?.();\n        setOpen(false);\n      }}\n    >\n      {children}\n    </button>\n  );\n}\n\nDropdownItem.displayName = \"DropdownItem\";\n","import { cn } from \"../../utils/cn\";\nimport type { DropdownSeparatorProps } from \"./Dropdown.types\";\n\nexport function DropdownSeparator({ className }: DropdownSeparatorProps) {\n  return (\n    <div\n      data-react-fancy-dropdown-separator=\"\"\n      role=\"separator\"\n      className={cn(\n        \"my-1 h-px bg-[color:var(--fancy-border,var(--color-zinc-200))] dark:bg-[color:var(--fancy-border-dark,var(--color-zinc-700))]\",\n        className,\n      )}\n    />\n  );\n}\n\nDropdownSeparator.displayName = \"DropdownSeparator\";\n","import { useMemo, useRef, useState } from \"react\";\nimport { DropdownContext } from \"./Dropdown.context\";\nimport { DropdownTrigger } from \"./DropdownTrigger\";\nimport { DropdownItems } from \"./DropdownItems\";\nimport { DropdownItem } from \"./DropdownItem\";\nimport { DropdownSeparator } from \"./DropdownSeparator\";\nimport type { DropdownProps } from \"./Dropdown.types\";\n\nfunction DropdownRoot({\n  children,\n  placement = \"bottom-start\",\n  offset = 4,\n}: DropdownProps) {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const anchorRef = useRef<HTMLElement>(null);\n\n  const ctx = useMemo(\n    () => ({ open, setOpen, anchorRef, activeIndex, setActiveIndex, placement, offset }),\n    [open, anchorRef, activeIndex, placement, offset],\n  );\n\n  return (\n    <DropdownContext.Provider value={ctx}>{children}</DropdownContext.Provider>\n  );\n}\n\nexport const Dropdown = Object.assign(DropdownRoot, {\n  Trigger: DropdownTrigger,\n  Items: DropdownItems,\n  Item: DropdownItem,\n  Separator: DropdownSeparator,\n});\n"]}