@justanarthur/modo-ui 0.0.0-stage → 0.1.0

package/dist/shared/components-40j34hdb.js

@@ -0,0 +1,986 @@
+import {
+  Elevated
+} from "./components-74c20v2f.js";
+import {
+  SelectionBackgrounds,
+  useMergeSplitBlocks,
+  useSelectionRuns
+} from "./components-rc63qsy6.js";
+import {
+  SizeProvider
+} from "./components-vb033rns.js";
+import {
+  useIcon
+} from "./components-m5br529r.js";
+import {
+  isDisabledRow,
+  popupScrollAreaClass,
+  popupViewportClass
+} from "./components-jw16snbn.js";
+import {
+  ScrollArea
+} from "./components-ed7cmssr.js";
+import {
+  SURFACE_BG,
+  SURFACE_SHADOW,
+  SurfaceProvider,
+  useSurface
+} from "./components-csxz9f52.js";
+import {
+  MorphSurface
+} from "./components-jxgznftn.js";
+import {
+  FluidHoverHighlight
+} from "./components-r22vtgqc.js";
+import {
+  useFluidHover,
+  useRegisterFluidHoverItem
+} from "./components-e46kf6cp.js";
+import {
+  shapeMap
+} from "./components-7zp99w5d.js";
+import {
+  useControllableState
+} from "./components-dg0w8g5p.js";
+import {
+  inPlaceOffset,
+  opensInPlace,
+  useMorph,
+  useMorphOrigin
+} from "./components-7nww01w4.js";
+import {
+  spring
+} from "./components-vc1k7yv2.js";
+import {
+  useSize
+} from "./components-x3rz4cyn.js";
+import {
+  cn
+} from "./components-0f0as45n.js";
+
+// components/overlays/dropdown/index.tsx
+import { Menu } from "@base-ui/react/menu";
+import { AnimatePresence as AnimatePresence2, motion as motion2 } from "motion/react";
+import {
+  Children,
+  cloneElement,
+  createContext as createContext3,
+  forwardRef as forwardRef3,
+  isValidElement,
+  useCallback as useCallback2,
+  useContext as useContext3,
+  useEffect as useEffect3,
+  useImperativeHandle,
+  useMemo as useMemo2,
+  useRef as useRef3,
+  useState as useState2
+} from "react";
+
+// components/overlays/dropdown/dropdown-search.tsx
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DropdownSearchHostContext = createContext(null);
+var DropdownFilterContext = createContext(null);
+var ROW_SELECTOR = [
+  '[role="menuitem"]:not([aria-disabled="true"])',
+  '[role="menuitemradio"]:not([aria-disabled="true"])',
+  '[role="menuitemcheckbox"]:not([aria-disabled="true"])'
+].join(", ");
+function menuRows(from) {
+  const menu = from?.closest('[role="menu"]');
+  return menu ? Array.from(menu.querySelectorAll(ROW_SELECTOR)) : [];
+}
+function useDropdownSearchHost(open, { containerRef, setActiveIndex }) {
+  const handleRef = useRef(null);
+  const [searchMounted, setSearchMounted] = useState(false);
+  const register = useCallback((handle) => {
+    handleRef.current = handle;
+    setSearchMounted(true);
+    return () => {
+      if (handleRef.current === handle) {
+        handleRef.current = null;
+        setSearchMounted(false);
+      }
+    };
+  }, []);
+  const highlightFirst = useCallback(() => {
+    const first = containerRef.current?.querySelector(ROW_SELECTOR);
+    const index = first?.getAttribute("data-fluid-hover-index");
+    setActiveIndex(index != null ? Number(index) : null);
+  }, [containerRef, setActiveIndex]);
+  const isSearchField = useCallback((target) => target !== null && target === handleRef.current?.input, []);
+  const host = useMemo(() => ({ register, open, highlightFirst }), [register, open, highlightFirst]);
+  const onKeyDownCapture = useCallback((e) => {
+    const handle = handleRef.current;
+    if (!handle?.input)
+      return;
+    if (e.target === handle.input)
+      return;
+    if (e.metaKey || e.ctrlKey || e.altKey)
+      return;
+    if (e.key.length === 1 && e.key !== " ") {
+      e.preventDefault();
+      e.stopPropagation();
+      handle.input.focus();
+      handle.append(e.key);
+    } else if (e.key === "Backspace") {
+      e.preventDefault();
+      e.stopPropagation();
+      handle.input.focus();
+      handle.deleteBackward();
+    }
+  }, []);
+  const hasSearch = useCallback(() => handleRef.current !== null, []);
+  return {
+    host,
+    hasSearch,
+    searchMounted,
+    onKeyDownCapture,
+    isSearchField,
+    highlightFirst
+  };
+}
+var DropdownSearch = forwardRef(({
+  value,
+  onValueChange,
+  filter = false,
+  placeholder = "Search…",
+  clearOnClose = true,
+  autoFocus = true,
+  className,
+  onKeyDown,
+  ...props
+}, ref) => {
+  const SearchIcon = useIcon("search");
+  const sizeClasses = useSize();
+  const compact = sizeClasses.variant === "compact";
+  const host = useContext(DropdownSearchHostContext);
+  const open = host?.open ?? true;
+  const panel = useContext(DropdownFilterContext);
+  const managed = filter ? panel : null;
+  const query = managed ? managed.query : value ?? "";
+  const setQuery = useCallback((next) => {
+    managed?.setQuery(next);
+    onValueChange?.(next);
+  }, [managed, onValueChange]);
+  const surface = useSurface();
+  const inputRef = useRef(null);
+  const valueRef = useRef(query);
+  valueRef.current = query;
+  const onValueChangeRef = useRef(setQuery);
+  onValueChangeRef.current = setQuery;
+  const clearOnCloseRef = useRef(clearOnClose);
+  clearOnCloseRef.current = clearOnClose;
+  useEffect(() => {
+    if (!host)
+      return;
+    return host.register({
+      get input() {
+        return inputRef.current;
+      },
+      append: (text) => onValueChangeRef.current(valueRef.current + text),
+      deleteBackward: () => onValueChangeRef.current(valueRef.current.slice(0, -1))
+    });
+  }, [host]);
+  useEffect(() => {
+    if (!open)
+      return;
+    if (clearOnCloseRef.current && valueRef.current !== "") {
+      onValueChangeRef.current("");
+    }
+    if (!autoFocus)
+      return;
+    let inner;
+    const outer = requestAnimationFrame(() => {
+      inner = requestAnimationFrame(() => inputRef.current?.focus());
+    });
+    return () => {
+      cancelAnimationFrame(outer);
+      if (inner !== undefined)
+        cancelAnimationFrame(inner);
+    };
+  }, [open, autoFocus]);
+  useEffect(() => {
+    if (!host || document.activeElement !== inputRef.current)
+      return;
+    host.highlightFirst();
+  }, [host, query]);
+  useEffect(() => () => {
+    if (clearOnCloseRef.current && valueRef.current !== "") {
+      onValueChangeRef.current("");
+    }
+  }, []);
+  const handleKeyDown = (e) => {
+    onKeyDown?.(e);
+    if (e.defaultPrevented)
+      return;
+    if (e.key === "Escape" || e.key === "Tab")
+      return;
+    e.stopPropagation();
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      const rows = menuRows(e.currentTarget);
+      if (rows.length === 0)
+        return;
+      e.preventDefault();
+      (e.key === "ArrowDown" ? rows[0] : rows[rows.length - 1])?.focus();
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      menuRows(e.currentTarget)[0]?.click();
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", {
+    className: cn("group/search sticky top-0 z-20 -mx-1 -mt-1 mb-0.5 flex shrink-0 items-center border-b border-border/60", SURFACE_BG[surface], sizeClasses.control, sizeClasses.gap, compact ? "px-2.5" : "px-3", className),
+    children: [
+      /* @__PURE__ */ jsx(SearchIcon, {
+        size: sizeClasses.icon,
+        strokeWidth: 1.5,
+        className: "shrink-0 text-muted-foreground transition-[color,stroke-width] duration-fast group-focus-within/search:text-foreground group-focus-within/search:stroke-[2]"
+      }),
+      /* @__PURE__ */ jsx("input", {
+        ref: (node) => {
+          inputRef.current = node;
+          if (typeof ref === "function")
+            ref(node);
+          else if (ref)
+            ref.current = node;
+        },
+        type: "text",
+        role: "searchbox",
+        autoComplete: "off",
+        autoCorrect: "off",
+        spellCheck: false,
+        value: query,
+        onChange: (e) => setQuery(e.target.value),
+        onKeyDown: handleKeyDown,
+        placeholder,
+        className: cn("min-w-0 flex-1 rounded-none bg-transparent text-foreground placeholder:text-muted-foreground outline-none font-[inherit]", sizeClasses.text, compact ? "leading-5" : "leading-6"),
+        ...props
+      })
+    ]
+  });
+});
+DropdownSearch.displayName = "DropdownSearch";
+var DropdownEmpty = forwardRef(({ className, ...props }, ref) => {
+  const sizeClasses = useSize();
+  return /* @__PURE__ */ jsx("div", {
+    ref,
+    role: "status",
+    "aria-live": "polite",
+    className: cn("px-2 py-6 text-center text-muted-foreground", sizeClasses.text, className),
+    ...props
+  });
+});
+DropdownEmpty.displayName = "DropdownEmpty";
+
+// components/overlays/dropdown/menu-item.tsx
+import { AnimatePresence, motion } from "motion/react";
+import {
+  createContext as createContext2,
+  forwardRef as forwardRef2,
+  useContext as useContext2,
+  useEffect as useEffect2,
+  useRef as useRef2
+} from "react";
+import { jsx as jsx2, jsxs as jsxs2, Fragment } from "react/jsx-runtime";
+var shape = shapeMap.rounded;
+var DropdownContext = createContext2(null);
+function useDropdown() {
+  const ctx = useContext2(DropdownContext);
+  if (!ctx)
+    throw new Error("useDropdown must be used within a Dropdown");
+  return ctx;
+}
+function useDropdownMaybe() {
+  return useContext2(DropdownContext);
+}
+var MenuItem = forwardRef2(({ icon: Icon, label, index, checked, onSelect, disabled, closeOnClick, sourceIndex, className, onClick, ...props }, ref) => {
+  const internalRef = useRef2(null);
+  const hasMounted = useRef2(false);
+  const {
+    registerItem,
+    activeIndex,
+    checkedIndex,
+    multiple,
+    checkedIndices,
+    renderMenuItem,
+    selfManaged,
+    toggleIndex
+  } = useDropdown();
+  const panelChecked = multiple ? checkedIndices?.includes(index) ?? false : checkedIndex === index;
+  const isChecked = checked ?? (selfManaged ? panelChecked : undefined);
+  const isCheckbox = !!multiple && typeof isChecked === "boolean";
+  useRegisterFluidHoverItem(registerItem, index, internalRef);
+  useEffect2(() => {
+    hasMounted.current = true;
+  }, []);
+  const isActive = activeIndex === index;
+  const skipAnimation = !hasMounted.current;
+  const sizeClasses = useSize();
+  const mergeRef = (node) => {
+    internalRef.current = node;
+    if (typeof ref === "function")
+      ref(node);
+    else if (ref)
+      ref.current = node;
+  };
+  const activate = () => {
+    onSelect?.();
+    if (selfManaged)
+      toggleIndex?.(sourceIndex ?? index);
+  };
+  const handleActivate = disabled ? undefined : (e) => {
+    onClick?.(e);
+    activate();
+  };
+  const itemClassName = cn(`relative z-10 flex ${sizeClasses.control} shrink-0 items-center ${sizeClasses.gap} ${shape.item} ${sizeClasses.itemPx} cursor-pointer outline-none`, disabled && "opacity-50 pointer-events-none", className);
+  const content = /* @__PURE__ */ jsxs2(Fragment, {
+    children: [
+      Icon && /* @__PURE__ */ jsxs2("span", {
+        className: "inline-grid",
+        children: [
+          /* @__PURE__ */ jsx2("span", {
+            className: "col-start-1 row-start-1 invisible",
+            children: /* @__PURE__ */ jsx2(Icon, {
+              size: sizeClasses.icon,
+              strokeWidth: 2
+            })
+          }),
+          /* @__PURE__ */ jsx2(Icon, {
+            size: sizeClasses.icon,
+            strokeWidth: isActive || isChecked ? 2 : 1.5,
+            className: cn("col-start-1 row-start-1 transition-[color,stroke-width] duration-fast", isActive || isChecked ? "text-foreground" : "text-muted-foreground")
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs2("span", {
+        className: cn("inline-grid flex-1", sizeClasses.text),
+        children: [
+          /* @__PURE__ */ jsx2("span", {
+            className: "col-start-1 row-start-1 invisible [text-box:trim-both_cap_alphabetic] weight-semibold",
+            "aria-hidden": "true",
+            children: label
+          }),
+          /* @__PURE__ */ jsx2("span", {
+            className: cn("col-start-1 row-start-1 transition-[color,font-variation-settings] duration-fast [text-box:trim-both_cap_alphabetic]", isActive || isChecked ? "text-foreground" : "text-muted-foreground", isChecked ? "weight-semibold" : "weight-normal"),
+            children: label
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx2(AnimatePresence, {
+        children: isChecked && /* @__PURE__ */ jsx2(motion.svg, {
+          width: sizeClasses.icon,
+          height: sizeClasses.icon,
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: 2,
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          className: "text-foreground shrink-0",
+          initial: { opacity: 1 },
+          animate: { opacity: 1 },
+          exit: { opacity: 1 },
+          children: /* @__PURE__ */ jsx2(motion.path, {
+            d: "M4 12L9 17L20 6",
+            initial: { pathLength: skipAnimation ? 1 : 0 },
+            animate: {
+              pathLength: 1,
+              transition: { duration: spring.fast.duration, ease: "easeOut" }
+            },
+            exit: {
+              pathLength: 0,
+              transition: { duration: 0.04, ease: "easeIn" }
+            }
+          })
+        }, "check")
+      })
+    ]
+  });
+  if (renderMenuItem) {
+    return renderMenuItem({
+      radio: !isCheckbox && typeof isChecked === "boolean",
+      checkbox: isCheckbox,
+      checked: isChecked,
+      value: index,
+      disabled,
+      label,
+      closeOnClick: closeOnClick ?? !multiple,
+      onClick: handleActivate,
+      element: /* @__PURE__ */ jsx2("div", {
+        ref: mergeRef,
+        "data-fluid-hover-index": index,
+        "aria-label": label,
+        className: itemClassName,
+        ...props
+      }),
+      children: content
+    });
+  }
+  return /* @__PURE__ */ jsx2("div", {
+    ref: mergeRef,
+    "data-fluid-hover-index": index,
+    tabIndex: !disabled && index === (checkedIndex ?? checkedIndices?.[0] ?? 0) ? 0 : -1,
+    role: isCheckbox ? "menuitemcheckbox" : typeof isChecked === "boolean" ? "menuitemradio" : "menuitem",
+    "aria-checked": typeof isChecked === "boolean" ? isChecked : undefined,
+    "aria-disabled": disabled || undefined,
+    "aria-label": label,
+    onClick: handleActivate,
+    onKeyDown: (e) => {
+      if (disabled)
+        return;
+      if (e.key === " " || e.key === "Enter") {
+        e.preventDefault();
+        activate();
+      }
+    },
+    className: itemClassName,
+    ...props,
+    children: content
+  });
+});
+MenuItem.displayName = "MenuItem";
+
+// components/overlays/dropdown/index.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var shape2 = shapeMap.rounded;
+var NONE = -1;
+var NO_INDICES = [];
+var NO_RECTS = [];
+function usePanelSelection({
+  checkedIndex,
+  defaultCheckedIndex,
+  onCheckedIndexChange,
+  checkedIndices,
+  defaultCheckedIndices,
+  onCheckedIndicesChange
+}, sourceOf, filtering) {
+  const [single, setSingle] = useControllableState(defaultCheckedIndex === undefined ? checkedIndex ?? NONE : undefined, defaultCheckedIndex ?? NONE, (index) => onCheckedIndexChange?.(index === NONE ? undefined : index));
+  const [many, setMany] = useControllableState(defaultCheckedIndices === undefined ? checkedIndices ?? NO_INDICES : undefined, defaultCheckedIndices ?? NO_INDICES, (indices) => onCheckedIndicesChange?.(indices));
+  const multiple = checkedIndices != null || defaultCheckedIndices != null;
+  const selfManaged = defaultCheckedIndex !== undefined || defaultCheckedIndices !== undefined;
+  const toggleIndex = useCallback2((source) => {
+    if (multiple) {
+      setMany((prev) => prev.includes(source) ? prev.filter((i) => i !== source) : [...prev, source].sort((a, b) => a - b));
+      return;
+    }
+    setSingle(source);
+  }, [multiple, setMany, setSingle]);
+  const renderedIndex = useMemo2(() => {
+    if (single === NONE)
+      return;
+    const i = filtering ? sourceOf.indexOf(single) : single;
+    return i === -1 ? undefined : i;
+  }, [single, filtering, sourceOf]);
+  const renderedIndices = useMemo2(() => {
+    if (!multiple)
+      return;
+    if (!filtering)
+      return many;
+    return many.map((s) => sourceOf.indexOf(s)).filter((i) => i !== -1);
+  }, [multiple, many, filtering, sourceOf]);
+  return {
+    checkedIndex: renderedIndex,
+    checkedIndices: renderedIndices,
+    multiple,
+    selfManaged,
+    toggleIndex
+  };
+}
+function usePanelRows(children) {
+  const [query, setQuery] = useState2("");
+  const filtering = useMemo2(() => Children.toArray(children).some((child) => isValidElement(child) && child.type === DropdownSearch && child.props.filter), [children]);
+  const filterCtx = useMemo2(() => ({ query, setQuery }), [query]);
+  const { content, sourceOf } = useMemo2(() => {
+    if (!filtering)
+      return { content: children, sourceOf: NO_INDICES };
+    const needle = query.trim().toLowerCase();
+    const rendered = [];
+    const empties = [];
+    const sources = [];
+    for (const child of Children.toArray(children)) {
+      if (!isValidElement(child)) {
+        rendered.push(child);
+        continue;
+      }
+      if (child.type === DropdownEmpty) {
+        empties.push(child);
+        continue;
+      }
+      const rowProps = child.props;
+      if (typeof rowProps.label !== "string" || typeof rowProps.index !== "number") {
+        rendered.push(child);
+        continue;
+      }
+      if (needle && !rowProps.label.toLowerCase().includes(needle))
+        continue;
+      rendered.push(cloneElement(child, {
+        index: sources.length,
+        sourceIndex: rowProps.index
+      }));
+      sources.push(rowProps.index);
+    }
+    if (sources.length === 0)
+      rendered.push(...empties);
+    return { content: rendered, sourceOf: sources };
+  }, [children, filtering, query]);
+  return { content, sourceOf, filtering, filterCtx: filtering ? filterCtx : null };
+}
+var Dropdown = forwardRef3(({
+  children,
+  checkedIndex,
+  defaultCheckedIndex,
+  onCheckedIndexChange,
+  checkedIndices,
+  defaultCheckedIndices,
+  onCheckedIndicesChange,
+  size,
+  className,
+  ...props
+}, ref) => {
+  const containerRef = useRef3(null);
+  const hover = useFluidHover(containerRef, { isItemDisabled: isDisabledRow });
+  const { activeIndex, setActiveIndex, itemRects, handlers, registerItem } = hover;
+  const [focusedIndex, setFocusedIndex] = useState2(null);
+  const rows = usePanelRows(children);
+  const selection = usePanelSelection({
+    checkedIndex,
+    defaultCheckedIndex,
+    onCheckedIndexChange,
+    checkedIndices,
+    defaultCheckedIndices,
+    onCheckedIndicesChange
+  }, rows.sourceOf, rows.filtering);
+  const multiple = selection.multiple;
+  const checkedRect = !multiple && selection.checkedIndex != null ? itemRects[selection.checkedIndex] : null;
+  const focusRect = focusedIndex !== null ? itemRects[focusedIndex] : null;
+  const runs = useSelectionRuns(selection.checkedIndices ?? NO_INDICES);
+  const blocks = useMergeSplitBlocks(runs, itemRects, shape2.bgRadius);
+  const panelCtx = useMemo2(() => ({
+    registerItem,
+    activeIndex,
+    checkedIndex: selection.checkedIndex,
+    multiple,
+    checkedIndices: selection.checkedIndices,
+    selfManaged: selection.selfManaged,
+    toggleIndex: selection.toggleIndex
+  }), [
+    registerItem,
+    activeIndex,
+    selection.checkedIndex,
+    multiple,
+    selection.checkedIndices,
+    selection.selfManaged,
+    selection.toggleIndex
+  ]);
+  const panel = /* @__PURE__ */ jsx3(DropdownContext.Provider, {
+    value: panelCtx,
+    children: /* @__PURE__ */ jsx3(DropdownFilterContext.Provider, {
+      value: rows.filterCtx,
+      children: /* @__PURE__ */ jsxs3(Elevated, {
+        offset: 2,
+        shadowLevel: 3,
+        ref: (node) => {
+          containerRef.current = node;
+          if (typeof ref === "function")
+            ref(node);
+          else if (ref)
+            ref.current = node;
+        },
+        onMouseEnter: handlers.onMouseEnter,
+        onMouseMove: handlers.onMouseMove,
+        onMouseLeave: handlers.onMouseLeave,
+        onClick: handlers.onClick,
+        onFocus: (e) => {
+          const indexAttr = e.target.closest("[data-fluid-hover-index]")?.getAttribute("data-fluid-hover-index");
+          if (indexAttr != null) {
+            const idx = Number(indexAttr);
+            setActiveIndex(idx);
+            setFocusedIndex(e.target.matches(":focus-visible") ? idx : null);
+          }
+        },
+        onBlur: (e) => {
+          if (containerRef.current?.contains(e.relatedTarget))
+            return;
+          setFocusedIndex(null);
+          setActiveIndex(null);
+        },
+        onKeyDown: (e) => {
+          const items = Array.from(containerRef.current?.querySelectorAll('[role="menuitem"], [role="menuitemradio"], [role="menuitemcheckbox"]') ?? []);
+          const currentIdx = items.indexOf(e.target);
+          if (currentIdx === -1)
+            return;
+          if (["ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft"].includes(e.key)) {
+            e.preventDefault();
+            const next = ["ArrowDown", "ArrowRight"].includes(e.key) ? (currentIdx + 1) % items.length : (currentIdx - 1 + items.length) % items.length;
+            items[next]?.focus();
+          } else if (e.key === "Home") {
+            e.preventDefault();
+            items[0]?.focus();
+          } else if (e.key === "End") {
+            e.preventDefault();
+            items[items.length - 1]?.focus();
+          }
+        },
+        role: "group",
+        className: cn(`relative flex flex-col w-72 max-w-full  p-1 select-none`, className),
+        ...props,
+        children: [
+          multiple && /* @__PURE__ */ jsx3(SelectionBackgrounds, {
+            blocks
+          }),
+          /* @__PURE__ */ jsx3(AnimatePresence2, {
+            children: checkedRect && /* @__PURE__ */ jsx3(motion2.div, {
+              className: `absolute ${shape2.bg} bg-active pointer-events-none`,
+              initial: false,
+              animate: {
+                top: checkedRect.top,
+                left: checkedRect.left,
+                width: checkedRect.width,
+                height: checkedRect.height,
+                opacity: 1
+              },
+              exit: { opacity: 0, transition: spring.moderate.exit },
+              transition: {
+                ...spring.moderate,
+                opacity: { duration: spring.fast.duration }
+              }
+            })
+          }),
+          /* @__PURE__ */ jsx3(FluidHoverHighlight, {
+            hover,
+            from: checkedRect,
+            className: shape2.bg
+          }),
+          /* @__PURE__ */ jsx3(AnimatePresence2, {
+            children: focusRect && /* @__PURE__ */ jsx3(motion2.div, {
+              className: `absolute ${shape2.focusRing} pointer-events-none z-20 border border-focus-ring`,
+              initial: false,
+              animate: {
+                left: focusRect.left - 2,
+                top: focusRect.top - 2,
+                width: focusRect.width + 4,
+                height: focusRect.height + 4
+              },
+              exit: { opacity: 0, transition: spring.fast.exit },
+              transition: {
+                ...spring.fast,
+                opacity: { duration: spring.fast.duration }
+              }
+            })
+          }),
+          rows.content
+        ]
+      })
+    })
+  });
+  return size ? /* @__PURE__ */ jsx3(SizeProvider, {
+    size,
+    children: panel
+  }) : panel;
+});
+Dropdown.displayName = "Dropdown";
+var DropdownMenuContext = createContext3(null);
+function useDropdownMenuContext() {
+  const ctx = useContext3(DropdownMenuContext);
+  if (!ctx)
+    throw new Error("DropdownMenu compound components must be inside <DropdownMenu>");
+  return ctx;
+}
+function DropdownMenu({
+  children,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  disabled = false,
+  size
+}) {
+  const [internalOpen, setInternalOpen] = useState2(defaultOpen);
+  const open = openProp !== undefined ? openProp : internalOpen;
+  const { origin, capture } = useMorphOrigin();
+  const handleOpenChange = useCallback2((next, details) => {
+    if (next)
+      capture(details);
+    if (openProp === undefined)
+      setInternalOpen(next);
+    onOpenChange?.(next);
+  }, [openProp, onOpenChange, capture]);
+  const ctx = useMemo2(() => ({ open, origin }), [open, origin]);
+  const root = /* @__PURE__ */ jsx3(DropdownMenuContext.Provider, {
+    value: ctx,
+    children: /* @__PURE__ */ jsx3(Menu.Root, {
+      open,
+      onOpenChange: handleOpenChange,
+      disabled,
+      modal: false,
+      children
+    })
+  });
+  return size ? /* @__PURE__ */ jsx3(SizeProvider, {
+    size,
+    children: root
+  }) : root;
+}
+DropdownMenu.displayName = "DropdownMenu";
+var DropdownTrigger = Menu.Trigger;
+var DropdownContent = forwardRef3(({
+  className,
+  children,
+  checkedIndex,
+  defaultCheckedIndex,
+  onCheckedIndexChange,
+  checkedIndices,
+  defaultCheckedIndices,
+  onCheckedIndicesChange,
+  side = "bottom",
+  align = "start",
+  sideOffset = 6,
+  from,
+  effect,
+  hideSource,
+  tier = "moderate"
+}, ref) => {
+  const { open, origin } = useDropdownMenuContext();
+  const morph = useMorph(open, origin, { from, effect, hideSource, tier });
+  useImperativeHandle(ref, () => morph.popup, [morph.popup]);
+  const level = Math.min(useSurface() + 2, 8);
+  const containerRef = useRef3(null);
+  const hover = useFluidHover(containerRef, { isItemDisabled: isDisabledRow });
+  const { activeIndex, setActiveIndex, itemRects, handlers, registerItem, remeasure } = hover;
+  const rows = usePanelRows(children);
+  const selection = usePanelSelection({
+    checkedIndex,
+    defaultCheckedIndex,
+    onCheckedIndexChange,
+    checkedIndices,
+    defaultCheckedIndices,
+    onCheckedIndicesChange
+  }, rows.sourceOf, rows.filtering);
+  const {
+    host: searchHost,
+    hasSearch,
+    searchMounted,
+    onKeyDownCapture: redirectTypingToSearch,
+    isSearchField,
+    highlightFirst
+  } = useDropdownSearchHost(open, { containerRef, setActiveIndex });
+  useEffect3(() => {
+    if (!open)
+      return;
+    let inner;
+    const outer = requestAnimationFrame(() => {
+      inner = requestAnimationFrame(() => {
+        if (hasSearch())
+          return;
+        const container = containerRef.current;
+        if (!container || container.contains(document.activeElement) && document.activeElement !== container)
+          return;
+        const first = container.querySelector('[role="menuitem"]:not([aria-disabled="true"]), [role="menuitemradio"]:not([aria-disabled="true"]), [role="menuitemcheckbox"]:not([aria-disabled="true"])');
+        first?.focus();
+      });
+    });
+    return () => {
+      cancelAnimationFrame(outer);
+      if (inner !== undefined)
+        cancelAnimationFrame(inner);
+    };
+  }, [open, hasSearch]);
+  useEffect3(() => {
+    if (!open)
+      return;
+    remeasure();
+  }, [open, remeasure]);
+  const multiple = selection.multiple;
+  const checkedRect = !multiple && selection.checkedIndex != null ? itemRects[selection.checkedIndex] : null;
+  const runs = useSelectionRuns(selection.checkedIndices ?? NO_INDICES);
+  const blocks = useMergeSplitBlocks(runs, open ? itemRects : NO_RECTS, shape2.bgRadius);
+  const renderMenuItem = useCallback2(({
+    radio,
+    checkbox,
+    checked,
+    value,
+    disabled,
+    label,
+    closeOnClick,
+    onClick,
+    element,
+    children: children2
+  }) => checkbox ? /* @__PURE__ */ jsx3(Menu.CheckboxItem, {
+    checked: !!checked,
+    disabled,
+    label,
+    closeOnClick,
+    onClick,
+    render: element,
+    children: children2
+  }) : radio ? /* @__PURE__ */ jsx3(Menu.RadioItem, {
+    value,
+    disabled,
+    label,
+    closeOnClick,
+    onClick,
+    render: element,
+    children: children2
+  }) : /* @__PURE__ */ jsx3(Menu.Item, {
+    disabled,
+    label,
+    closeOnClick,
+    onClick,
+    render: element,
+    children: children2
+  }), []);
+  const contentCtx = useMemo2(() => ({
+    registerItem,
+    activeIndex,
+    checkedIndex: selection.checkedIndex,
+    multiple,
+    checkedIndices: selection.checkedIndices,
+    inMenu: true,
+    renderMenuItem,
+    selfManaged: selection.selfManaged,
+    toggleIndex: selection.toggleIndex
+  }), [
+    registerItem,
+    activeIndex,
+    selection.checkedIndex,
+    multiple,
+    selection.checkedIndices,
+    selection.selfManaged,
+    selection.toggleIndex,
+    renderMenuItem
+  ]);
+  return /* @__PURE__ */ jsx3(Menu.Portal, {
+    children: /* @__PURE__ */ jsx3(Menu.Positioner, {
+      side,
+      align,
+      sideOffset: opensInPlace({ effect, hideSource }) ? inPlaceOffset : sideOffset,
+      className: "z-50 outline-none",
+      children: /* @__PURE__ */ jsx3(DropdownContext.Provider, {
+        value: contentCtx,
+        children: /* @__PURE__ */ jsx3(DropdownFilterContext.Provider, {
+          value: rows.filterCtx,
+          children: /* @__PURE__ */ jsx3(DropdownSearchHostContext.Provider, {
+            value: searchHost,
+            children: /* @__PURE__ */ jsx3(Menu.Popup, {
+              ref: morph.popupRef,
+              onKeyDownCapture: redirectTypingToSearch,
+              onMouseEnter: handlers.onMouseEnter,
+              onMouseMove: handlers.onMouseMove,
+              onClick: handlers.onClick,
+              onMouseLeave: () => {
+                handlers.onMouseLeave();
+                if (isSearchField(document.activeElement))
+                  highlightFirst();
+              },
+              onFocus: (e) => {
+                const indexAttr = e.target.closest("[data-fluid-hover-index]")?.getAttribute("data-fluid-hover-index");
+                if (indexAttr != null) {
+                  setActiveIndex(Number(indexAttr));
+                } else if (isSearchField(e.target)) {
+                  highlightFirst();
+                } else if (e.target !== e.currentTarget) {
+                  setActiveIndex(null);
+                }
+              },
+              onBlur: (e) => {
+                if (e.currentTarget.contains(e.relatedTarget))
+                  return;
+                setActiveIndex(null);
+              },
+              className: "relative select-none outline-none",
+              children: /* @__PURE__ */ jsx3(SurfaceProvider, {
+                value: level,
+                children: /* @__PURE__ */ jsx3(MorphSurface, {
+                  morph,
+                  bg: SURFACE_BG[level],
+                  shadow: SURFACE_SHADOW[3],
+                  radius: shape2.container,
+                  className: cn(`flex flex-col w-72 max-w-full min-w-[var(--anchor-width)] max-h-[min(480px,var(--available-height))] overflow-hidden ${shape2.container}`, className),
+                  children: /* @__PURE__ */ jsx3(ScrollArea, {
+                    className: popupScrollAreaClass,
+                    viewportClassName: cn(popupViewportClass, !searchMounted && "scroll-fade"),
+                    children: /* @__PURE__ */ jsxs3("div", {
+                      ref: containerRef,
+                      className: "relative flex flex-col p-1",
+                      children: [
+                        multiple && /* @__PURE__ */ jsx3(SelectionBackgrounds, {
+                          blocks
+                        }),
+                        /* @__PURE__ */ jsx3(AnimatePresence2, {
+                          children: checkedRect && /* @__PURE__ */ jsx3(motion2.div, {
+                            className: `absolute ${shape2.bg} bg-active pointer-events-none`,
+                            initial: false,
+                            animate: {
+                              top: checkedRect.top,
+                              left: checkedRect.left,
+                              width: checkedRect.width,
+                              height: checkedRect.height,
+                              opacity: 1
+                            },
+                            exit: { opacity: 0, transition: spring.moderate.exit },
+                            transition: {
+                              ...spring.moderate,
+                              opacity: { duration: spring.fast.duration }
+                            }
+                          })
+                        }),
+                        /* @__PURE__ */ jsx3(FluidHoverHighlight, {
+                          hover,
+                          from: checkedRect,
+                          className: shape2.bg
+                        }),
+                        /* @__PURE__ */ jsx3(Menu.RadioGroup, {
+                          value: selection.checkedIndex ?? null,
+                          className: "contents",
+                          children: rows.content
+                        })
+                      ]
+                    })
+                  })
+                })
+              })
+            })
+          })
+        })
+      })
+    })
+  });
+});
+DropdownContent.displayName = "DropdownContent";
+var DropdownLabel = forwardRef3(({ className, ...props }, ref) => {
+  const compact = useSize().variant === "compact";
+  return /* @__PURE__ */ jsx3("div", {
+    ref,
+    className: cn("px-2 py-1.5 shrink-0 text-muted-foreground", compact ? "text-caption-compact" : "text-caption", className),
+    ...props
+  });
+});
+DropdownLabel.displayName = "DropdownLabel";
+var DropdownSeparator = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx3("div", {
+  ref,
+  role: "separator",
+  className: cn("my-1 -mx-1 h-px shrink-0 bg-border/60", className),
+  ...props
+}));
+DropdownSeparator.displayName = "DropdownSeparator";
+Object.assign(Dropdown, {
+  Menu: DropdownMenu,
+  Trigger: DropdownTrigger,
+  Content: DropdownContent,
+  Item: MenuItem,
+  Label: DropdownLabel,
+  Separator: DropdownSeparator,
+  Search: DropdownSearch,
+  Empty: DropdownEmpty
+});
+var dropdown_default = Dropdown;
+
+export { DropdownSearch, DropdownEmpty, DropdownContext, useDropdown, useDropdownMaybe, MenuItem, Dropdown, DropdownMenu, DropdownTrigger, DropdownContent, DropdownLabel, DropdownSeparator, dropdown_default };