@ansh-ui/react 0.2.0

package/dist/chunk-LDCZQP3R.js

@@ -0,0 +1,1185 @@
+import { Slot, usePresence, useFocusTrap, useAutoFocus, useFocusRestore } from './chunk-HO2YSF5O.js';
+import { useAnchoredPosition, useDismiss, Portal, useScrollLock } from './chunk-XEP6P7E6.js';
+import { useControllableState } from './chunk-LXCIXR5T.js';
+import { cx } from './chunk-H34OXXJU.js';
+import { createContext, useState, useRef, useId, useMemo, useEffect, useCallback, useContext } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function score(query, text) {
+  if (query.length === 0) return 0;
+  const q = query.toLowerCase();
+  const t = text.toLowerCase();
+  let queryIndex = 0;
+  let total = 0;
+  let run = 0;
+  for (let i = 0; i < t.length && queryIndex < q.length; i++) {
+    if (t[i] === q[queryIndex]) {
+      run++;
+      total += run * 2 + (i === 0 ? 8 : 0);
+      queryIndex++;
+    } else {
+      run = 0;
+    }
+  }
+  return queryIndex === q.length ? total : -1;
+}
+function CommandPalette({
+  items,
+  open,
+  onOpenChange,
+  placeholder = "Type a command or search\u2026",
+  emptyMessage = "No results found."
+}) {
+  const [query, setQuery] = useState("");
+  const [active, setActive] = useState(0);
+  const inputRef = useRef(null);
+  const dialogRef = useRef(null);
+  const restoreFocusRef = useRef(null);
+  const listId = useId();
+  const results = useMemo(() => {
+    if (query.trim() === "") return [...items];
+    return items.map((item) => ({
+      item,
+      score: Math.max(score(query, item.label), score(query, item.keywords ?? ""))
+    })).filter((entry) => entry.score >= 0).sort((a, b) => b.score - a.score).map((entry) => entry.item);
+  }, [items, query]);
+  useEffect(() => setActive(0), [query, items]);
+  const close = useCallback(() => {
+    onOpenChange(false);
+    setQuery("");
+  }, [onOpenChange]);
+  const select = useCallback(
+    (item) => {
+      if (!item) return;
+      item.onSelect?.();
+      close();
+    },
+    [close]
+  );
+  useEffect(() => {
+    if (!open) return;
+    restoreFocusRef.current = document.activeElement;
+    const raf = requestAnimationFrame(() => inputRef.current?.focus());
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      cancelAnimationFrame(raf);
+      document.body.style.overflow = previousOverflow;
+      restoreFocusRef.current?.focus?.();
+    };
+  }, [open]);
+  const onKeyDown = (event) => {
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        setActive((i) => results.length === 0 ? 0 : (i + 1) % results.length);
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        setActive((i) => results.length === 0 ? 0 : (i - 1 + results.length) % results.length);
+        break;
+      case "Home":
+        event.preventDefault();
+        setActive(0);
+        break;
+      case "End":
+        event.preventDefault();
+        setActive(Math.max(0, results.length - 1));
+        break;
+      case "Enter":
+        event.preventDefault();
+        select(results[active]);
+        break;
+      case "Escape":
+        event.preventDefault();
+        close();
+        break;
+      case "Tab": {
+        event.preventDefault();
+        break;
+      }
+    }
+  };
+  useEffect(() => {
+    if (!open) return;
+    const node = document.getElementById(`${listId}-option-${active}`);
+    node?.scrollIntoView?.({ block: "nearest" });
+  }, [active, listId, open]);
+  if (!open) return null;
+  let lastGroup;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "ansh-cmdk__backdrop",
+      onMouseDown: (event) => {
+        if (event.target === event.currentTarget) close();
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: dialogRef,
+          className: "ansh-cmdk",
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": "Command palette",
+          children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: inputRef,
+                className: "ansh-cmdk__input",
+                value: query,
+                onChange: (event) => setQuery(event.target.value),
+                onKeyDown,
+                placeholder,
+                role: "combobox",
+                "aria-expanded": "true",
+                "aria-controls": listId,
+                "aria-autocomplete": "list",
+                "aria-activedescendant": results.length > 0 ? `${listId}-option-${active}` : void 0,
+                autoComplete: "off",
+                spellCheck: false
+              }
+            ),
+            results.length === 0 ? /* @__PURE__ */ jsx("div", { className: "ansh-cmdk__empty", children: emptyMessage }) : /* @__PURE__ */ jsx("ul", { className: "ansh-cmdk__list", id: listId, role: "listbox", "aria-label": "Commands", children: results.map((item, index) => {
+              const heading = item.group && item.group !== lastGroup ? item.group : null;
+              lastGroup = item.group;
+              return /* @__PURE__ */ jsxs("li", { role: "presentation", children: [
+                heading ? /* @__PURE__ */ jsx("div", { className: "ansh-cmdk__group", role: "presentation", children: heading }) : null,
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    id: `${listId}-option-${index}`,
+                    className: "ansh-cmdk__item",
+                    role: "option",
+                    "aria-selected": index === active,
+                    onMouseEnter: () => setActive(index),
+                    onClick: () => select(item),
+                    children: [
+                      item.icon,
+                      /* @__PURE__ */ jsx("span", { children: item.label }),
+                      item.shortcut ? /* @__PURE__ */ jsx("kbd", { className: "ansh-cmdk__kbd", children: item.shortcut }) : null
+                    ]
+                  }
+                )
+              ] }, item.id);
+            }) })
+          ]
+        }
+      )
+    }
+  );
+}
+function useCommandShortcut(toggle, key = "k") {
+  const toggleRef = useRef(toggle);
+  toggleRef.current = toggle;
+  useEffect(() => {
+    const onKeyDown = (event) => {
+      if (event.key.toLowerCase() === key && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        toggleRef.current();
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [key]);
+}
+var PopoverContext = createContext(null);
+function usePopover(component) {
+  const context = useContext(PopoverContext);
+  if (!context) {
+    throw new Error(`<${component}> must be rendered inside <Popover>.`);
+  }
+  return context;
+}
+function Popover({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  placement = "bottom",
+  offset = 8,
+  modal = false,
+  children
+}) {
+  const [isOpen, setOpen] = useControllableState({
+    value: open,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange
+  });
+  const triggerRef = useRef(null);
+  const contentId = useId();
+  const context = useMemo(
+    () => ({ open: isOpen, setOpen, triggerRef, contentId, placement, offset, modal }),
+    [isOpen, setOpen, contentId, placement, offset, modal]
+  );
+  return /* @__PURE__ */ jsx(PopoverContext.Provider, { value: context, children });
+}
+function PopoverTrigger({ asChild = false, children, ...rest }) {
+  const { open, setOpen, triggerRef, contentId } = usePopover("PopoverTrigger");
+  const Component = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref: triggerRef,
+      ...asChild ? null : { type: "button" },
+      "aria-haspopup": "dialog",
+      "aria-expanded": open,
+      "aria-controls": open ? contentId : void 0,
+      ...rest,
+      onClick: (event) => {
+        rest.onClick?.(event);
+        if (event.defaultPrevented) return;
+        setOpen(!open);
+      },
+      children
+    }
+  );
+}
+function PopoverContent({
+  arrow = false,
+  matchWidth = false,
+  label,
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  const { open, setOpen, triggerRef, contentId, placement, offset, modal } = usePopover("PopoverContent");
+  const contentRef = useRef(null);
+  const { mounted, state } = usePresence(open, contentRef);
+  const position = useAnchoredPosition(triggerRef, contentRef, mounted, {
+    placement,
+    offset,
+    matchWidth,
+    arrowSize: arrow ? 10 : 0
+  });
+  useDismiss(contentRef, open, () => setOpen(false), { ignore: [triggerRef] });
+  useFocusTrap(contentRef, open && modal);
+  useAutoFocus(contentRef, open);
+  useFocusRestore(open);
+  if (!mounted) return null;
+  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: contentRef,
+      id: contentId,
+      role: "dialog",
+      "aria-modal": modal || void 0,
+      ...label ? { "aria-label": label } : null,
+      tabIndex: -1,
+      "data-state": state,
+      "data-side": position.side,
+      className: cx("ansh-popover", className),
+      style: { ...position.style, ...style },
+      ...rest,
+      children: [
+        children,
+        arrow && position.arrowStyle ? /* @__PURE__ */ jsx("span", { className: "ansh-popover__arrow", style: position.arrowStyle, "aria-hidden": "true" }) : null
+      ]
+    }
+  ) });
+}
+function HoverCard({
+  content,
+  openDelay = 500,
+  closeDelay = 200,
+  placement = "bottom",
+  className,
+  children
+}) {
+  const [open, setOpen] = useState(false);
+  const triggerRef = useRef(null);
+  const cardRef = useRef(null);
+  const timerRef = useRef(void 0);
+  const id = useId();
+  const { mounted, state } = usePresence(open, cardRef);
+  const position = useAnchoredPosition(triggerRef, cardRef, mounted, { placement, offset: 8 });
+  const schedule = (next) => {
+    clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => setOpen(next), next ? openDelay : closeDelay);
+  };
+  useEffect(() => () => clearTimeout(timerRef.current), []);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref: triggerRef,
+        className: "ansh-hovercard__trigger",
+        "aria-describedby": open ? id : void 0,
+        onMouseEnter: () => schedule(true),
+        onMouseLeave: () => schedule(false),
+        onFocus: () => setOpen(true),
+        onBlur: () => setOpen(false),
+        children
+      }
+    ),
+    mounted ? /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: cardRef,
+        id,
+        role: "tooltip",
+        "data-state": state,
+        className: cx("ansh-hovercard", className),
+        style: position.style,
+        onMouseEnter: () => schedule(true),
+        onMouseLeave: () => schedule(false),
+        children: content
+      }
+    ) }) : null
+  ] });
+}
+var TooltipGroupContext = createContext(null);
+function TooltipProvider({ delay = 600, children }) {
+  const [active, setActive] = useState(false);
+  const value = useMemo(() => ({ active, setActive, delay }), [active, delay]);
+  return /* @__PURE__ */ jsx(TooltipGroupContext.Provider, { value, children });
+}
+function Tooltip({
+  content,
+  placement = "top",
+  delay,
+  arrow = true,
+  disabled = false,
+  className,
+  children
+}) {
+  const group = useContext(TooltipGroupContext);
+  const [open, setOpen] = useState(false);
+  const triggerRef = useRef(null);
+  const tipRef = useRef(null);
+  const timerRef = useRef(void 0);
+  const id = useId();
+  const { mounted, state } = usePresence(open, tipRef);
+  const position = useAnchoredPosition(triggerRef, tipRef, mounted, {
+    placement,
+    offset: 6,
+    arrowSize: arrow ? 8 : 0
+  });
+  const effectiveDelay = delay ?? group?.delay ?? 600;
+  const show = (immediate = false) => {
+    if (disabled) return;
+    clearTimeout(timerRef.current);
+    if (immediate || group?.active) {
+      setOpen(true);
+      group?.setActive(true);
+      return;
+    }
+    timerRef.current = setTimeout(() => {
+      setOpen(true);
+      group?.setActive(true);
+    }, effectiveDelay);
+  };
+  const hide = () => {
+    clearTimeout(timerRef.current);
+    setOpen(false);
+    timerRef.current = setTimeout(() => group?.setActive(false), 200);
+  };
+  useEffect(() => () => clearTimeout(timerRef.current), []);
+  useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        setOpen(false);
+        group?.setActive(false);
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [open, group]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Slot,
+      {
+        ref: triggerRef,
+        "aria-describedby": open ? id : void 0,
+        onMouseEnter: () => show(),
+        onMouseLeave: hide,
+        onFocus: () => show(true),
+        onBlur: hide,
+        children
+      }
+    ),
+    mounted && !disabled ? /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: tipRef,
+        id,
+        role: "tooltip",
+        "data-state": state,
+        "data-side": position.side,
+        className: cx("ansh-tooltip", className),
+        style: position.style,
+        children: [
+          content,
+          arrow && position.arrowStyle ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "ansh-tooltip__arrow",
+              style: position.arrowStyle,
+              "aria-hidden": "true"
+            }
+          ) : null
+        ]
+      }
+    ) }) : null
+  ] });
+}
+function Dialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  size = "md",
+  footer,
+  showClose = true,
+  dismissable = true,
+  initialFocus,
+  className,
+  children
+}) {
+  const panelRef = useRef(null);
+  const id = useId();
+  const titleId = `${id}-title`;
+  const descriptionId = `${id}-description`;
+  const { mounted, state } = usePresence(open, panelRef);
+  const close = useCallback(() => {
+    if (dismissable) onOpenChange(false);
+  }, [dismissable, onOpenChange]);
+  useDismiss(panelRef, open, close, { outsidePress: dismissable, escapeKey: dismissable });
+  useFocusTrap(panelRef, open);
+  useAutoFocus(panelRef, open, initialFocus);
+  useFocusRestore(open);
+  useScrollLock(open);
+  if (!mounted) return null;
+  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs("div", { className: "ansh-dialog__layer", "data-state": state, children: [
+    /* @__PURE__ */ jsx("div", { className: "ansh-dialog__scrim", "data-state": state, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: panelRef,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": titleId,
+        ...description ? { "aria-describedby": descriptionId } : null,
+        tabIndex: -1,
+        "data-state": state,
+        className: cx("ansh-dialog", `ansh-dialog--${size}`, className),
+        children: [
+          /* @__PURE__ */ jsxs("header", { className: "ansh-dialog__header", children: [
+            /* @__PURE__ */ jsxs("div", { className: "ansh-dialog__heading", children: [
+              /* @__PURE__ */ jsx("h2", { className: "ansh-dialog__title", id: titleId, children: title }),
+              description ? /* @__PURE__ */ jsx("p", { className: "ansh-dialog__description", id: descriptionId, children: description }) : null
+            ] }),
+            showClose ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "ansh-dialog__close ansh-focusable",
+                "aria-label": "Close dialog",
+                onClick: () => onOpenChange(false),
+                children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", width: "14", height: "14", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: "M4 4l8 8M12 4l-8 8",
+                    stroke: "currentColor",
+                    strokeWidth: "1.75",
+                    strokeLinecap: "round",
+                    fill: "none"
+                  }
+                ) })
+              }
+            ) : null
+          ] }),
+          children ? /* @__PURE__ */ jsx("div", { className: "ansh-dialog__body", children }) : null,
+          footer ? /* @__PURE__ */ jsx("footer", { className: "ansh-dialog__footer", children: footer }) : null
+        ]
+      }
+    )
+  ] }) });
+}
+function AlertDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  destructive = false,
+  onConfirm,
+  onCancel,
+  busy = false,
+  className
+}) {
+  const panelRef = useRef(null);
+  const cancelRef = useRef(null);
+  const id = useId();
+  const { mounted, state } = usePresence(open, panelRef);
+  const cancel = useCallback(() => {
+    onCancel?.();
+    onOpenChange(false);
+  }, [onCancel, onOpenChange]);
+  useDismiss(panelRef, open, cancel, { outsidePress: false, escapeKey: true });
+  useFocusTrap(panelRef, open);
+  useAutoFocus(panelRef, open, cancelRef);
+  useFocusRestore(open);
+  useScrollLock(open);
+  if (!mounted) return null;
+  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs("div", { className: "ansh-dialog__layer", "data-state": state, children: [
+    /* @__PURE__ */ jsx("div", { className: "ansh-dialog__scrim", "data-state": state, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: panelRef,
+        role: "alertdialog",
+        "aria-modal": "true",
+        "aria-labelledby": `${id}-title`,
+        "aria-describedby": `${id}-description`,
+        tabIndex: -1,
+        "data-state": state,
+        className: cx("ansh-dialog", "ansh-dialog--sm", "ansh-dialog--alert", className),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "ansh-dialog__body", children: [
+            destructive ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "ansh-dialog__alert-icon ansh-dialog__alert-icon--danger",
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ jsxs(
+                  "svg",
+                  {
+                    viewBox: "0 0 24 24",
+                    width: "20",
+                    height: "20",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "1.75",
+                    children: [
+                      /* @__PURE__ */ jsx("path", { d: "M12 8v5", strokeLinecap: "round" }),
+                      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "16.5", r: "1", fill: "currentColor", stroke: "none" }),
+                      /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          d: "M10.3 3.9L2.6 17.4A2 2 0 004.3 20.4h15.4a2 2 0 001.7-3L13.7 3.9a2 2 0 00-3.4 0z",
+                          strokeLinejoin: "round"
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            ) : null,
+            /* @__PURE__ */ jsx("h2", { className: "ansh-dialog__title", id: `${id}-title`, children: title }),
+            /* @__PURE__ */ jsx("p", { className: "ansh-dialog__description", id: `${id}-description`, children: description })
+          ] }),
+          /* @__PURE__ */ jsxs("footer", { className: "ansh-dialog__footer", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                ref: cancelRef,
+                type: "button",
+                className: "ansh-btn ansh-btn--ghost ansh-btn--sm ansh-focusable",
+                disabled: busy,
+                onClick: cancel,
+                children: cancelLabel
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: cx(
+                  "ansh-btn",
+                  "ansh-btn--sm",
+                  destructive ? "ansh-btn--danger" : "ansh-btn--solid",
+                  "ansh-focusable"
+                ),
+                disabled: busy,
+                onClick: () => void onConfirm(),
+                children: [
+                  busy ? /* @__PURE__ */ jsx("span", { className: "ansh-spinner ansh-spinner--sm", "aria-hidden": "true" }) : null,
+                  confirmLabel
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] }) });
+}
+function DialogFooter({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cx("ansh-dialog__actions", className), children });
+}
+function Drawer({
+  open,
+  onOpenChange,
+  side = "right",
+  title,
+  description,
+  size = "22rem",
+  footer,
+  showClose = true,
+  modal = true,
+  dismissable = true,
+  className,
+  children
+}) {
+  const panelRef = useRef(null);
+  const id = useId();
+  const { mounted, state } = usePresence(open, panelRef);
+  const close = useCallback(() => {
+    if (dismissable) onOpenChange(false);
+  }, [dismissable, onOpenChange]);
+  useDismiss(panelRef, open, close, { outsidePress: dismissable && modal, escapeKey: dismissable });
+  useFocusTrap(panelRef, open && modal);
+  useAutoFocus(panelRef, open);
+  useFocusRestore(open);
+  useScrollLock(open && modal);
+  if (!mounted) return null;
+  const horizontal = side === "left" || side === "right";
+  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx("ansh-drawer__layer", !modal && "ansh-drawer__layer--inline"),
+      "data-state": state,
+      children: [
+        modal ? /* @__PURE__ */ jsx("div", { className: "ansh-dialog__scrim", "data-state": state, "aria-hidden": "true" }) : null,
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: panelRef,
+            role: "dialog",
+            "aria-modal": modal || void 0,
+            "aria-labelledby": `${id}-title`,
+            ...description ? { "aria-describedby": `${id}-description` } : null,
+            tabIndex: -1,
+            "data-state": state,
+            "data-side": side,
+            className: cx("ansh-drawer", `ansh-drawer--${side}`, className),
+            style: {
+              [horizontal ? "width" : "height"]: size,
+              ["--ansh-drawer-size"]: size
+            },
+            children: [
+              /* @__PURE__ */ jsxs("header", { className: "ansh-drawer__header", children: [
+                /* @__PURE__ */ jsxs("div", { className: "ansh-dialog__heading", children: [
+                  /* @__PURE__ */ jsx("h2", { className: "ansh-dialog__title", id: `${id}-title`, children: title }),
+                  description ? /* @__PURE__ */ jsx("p", { className: "ansh-dialog__description", id: `${id}-description`, children: description }) : null
+                ] }),
+                showClose ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "ansh-dialog__close ansh-focusable",
+                    "aria-label": "Close panel",
+                    onClick: () => onOpenChange(false),
+                    children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", width: "14", height: "14", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: "M4 4l8 8M12 4l-8 8",
+                        stroke: "currentColor",
+                        strokeWidth: "1.75",
+                        strokeLinecap: "round",
+                        fill: "none"
+                      }
+                    ) })
+                  }
+                ) : null
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "ansh-drawer__body", children }),
+              footer ? /* @__PURE__ */ jsx("footer", { className: "ansh-drawer__footer", children: footer }) : null
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+}
+function flatten(items) {
+  const rows = [];
+  for (const entry of items) {
+    if ("type" in entry && (entry.type === "separator" || entry.type === "label")) continue;
+    if ("type" in entry && entry.type === "radio") {
+      entry.options.forEach((option, optionIndex) => {
+        rows.push({ entry, optionIndex, disabled: option.disabled ?? false });
+      });
+      continue;
+    }
+    rows.push({ entry, disabled: entry.disabled ?? false });
+  }
+  return rows;
+}
+function DropdownMenu({
+  items,
+  placement = "bottom-start",
+  label = "Menu",
+  className,
+  children,
+  open: controlledOpen,
+  onOpenChange
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+  const open = controlledOpen ?? uncontrolledOpen;
+  const setOpen = useCallback(
+    (next) => {
+      setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    },
+    [onOpenChange]
+  );
+  const triggerRef = useRef(null);
+  const menuRef = useRef(null);
+  const menuId = useId();
+  const { mounted, state } = usePresence(open, menuRef);
+  const position = useAnchoredPosition(triggerRef, menuRef, mounted, { placement, offset: 6 });
+  useDismiss(menuRef, open, () => setOpen(false), { ignore: [triggerRef] });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Slot,
+      {
+        ref: triggerRef,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-controls": open ? menuId : void 0,
+        onClick: () => setOpen(!open),
+        onKeyDown: (event) => {
+          if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+            event.preventDefault();
+            setOpen(true);
+          }
+        },
+        children
+      }
+    ),
+    mounted ? /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+      MenuSurface,
+      {
+        ref: menuRef,
+        id: menuId,
+        items,
+        label,
+        state,
+        style: position.style,
+        className,
+        onClose: () => {
+          setOpen(false);
+          triggerRef.current?.focus?.();
+        }
+      }
+    ) }) : null
+  ] });
+}
+function ContextMenu({
+  items,
+  label = "Context menu",
+  className,
+  children
+}) {
+  const [point, setPoint] = useState(null);
+  const menuRef = useRef(null);
+  const anchorRef = useRef(null);
+  const menuId = useId();
+  const open = point !== null;
+  const { mounted, state } = usePresence(open, menuRef);
+  const position = useAnchoredPosition(anchorRef, menuRef, mounted, {
+    placement: "bottom-start",
+    offset: 2
+  });
+  useDismiss(menuRef, open, () => setPoint(null));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "ansh-contextmenu__area",
+        onContextMenu: (event) => {
+          event.preventDefault();
+          setPoint({ x: event.clientX, y: event.clientY });
+        },
+        onKeyDown: (event) => {
+          if (event.key === "ContextMenu" || event.shiftKey && event.key === "F10") {
+            event.preventDefault();
+            const rect = event.currentTarget.getBoundingClientRect();
+            setPoint({ x: rect.left + 8, y: rect.top + 8 });
+          }
+        },
+        children
+      }
+    ),
+    point ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref: anchorRef,
+        "aria-hidden": "true",
+        style: { position: "fixed", left: point.x, top: point.y, width: 0, height: 0 }
+      }
+    ) : null,
+    mounted ? /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+      MenuSurface,
+      {
+        ref: menuRef,
+        id: menuId,
+        items,
+        label,
+        state,
+        style: position.style,
+        className,
+        onClose: () => setPoint(null)
+      }
+    ) }) : null
+  ] });
+}
+var MenuSurface = function MenuSurface2({
+  ref,
+  id,
+  items,
+  label,
+  state,
+  style,
+  className,
+  onClose
+}) {
+  const rows = flatten(items);
+  const itemRefs = useRef([]);
+  const [active, setActive] = useState(() => rows.findIndex((row) => !row.disabled));
+  const [openSubmenu, setOpenSubmenu] = useState(null);
+  const typeaheadRef = useRef({
+    buffer: "",
+    timer: void 0
+  });
+  useEffect(() => {
+    itemRefs.current[active]?.focus();
+  }, []);
+  const move = (delta) => {
+    if (rows.length === 0) return;
+    let next = active;
+    for (let attempts = 0; attempts < rows.length; attempts++) {
+      next = (next + delta + rows.length) % rows.length;
+      if (!rows[next]?.disabled) break;
+    }
+    setActive(next);
+    itemRefs.current[next]?.focus();
+  };
+  const activate = (index) => {
+    const row = rows[index];
+    if (!row || row.disabled) return;
+    const { entry } = row;
+    if ("type" in entry && entry.type === "submenu") {
+      setOpenSubmenu(index);
+      return;
+    }
+    if ("type" in entry && entry.type === "checkbox") {
+      entry.onChange(!entry.checked);
+      return;
+    }
+    if ("type" in entry && entry.type === "radio") {
+      entry.onChange(entry.options[row.optionIndex].value);
+      onClose();
+      return;
+    }
+    entry.onSelect?.();
+    onClose();
+  };
+  const onKeyDown = (event) => {
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        move(1);
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        move(-1);
+        break;
+      case "Home":
+        event.preventDefault();
+        setActive(0);
+        itemRefs.current[0]?.focus();
+        break;
+      case "End":
+        event.preventDefault();
+        setActive(rows.length - 1);
+        itemRefs.current[rows.length - 1]?.focus();
+        break;
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        activate(active);
+        break;
+      case "ArrowRight": {
+        const row = rows[active];
+        if (row && "type" in row.entry && row.entry.type === "submenu") {
+          event.preventDefault();
+          setOpenSubmenu(active);
+        }
+        break;
+      }
+      case "Escape":
+        event.preventDefault();
+        onClose();
+        break;
+      case "Tab":
+        event.preventDefault();
+        onClose();
+        break;
+      default: {
+        if (event.key.length !== 1) return;
+        const state2 = typeaheadRef.current;
+        clearTimeout(state2.timer);
+        state2.buffer += event.key.toLowerCase();
+        state2.timer = setTimeout(() => {
+          state2.buffer = "";
+        }, 600);
+        const match = rows.findIndex((row, index) => {
+          if (row.disabled || index === active) return false;
+          const text = typeof row.entry.label === "string" ? row.entry.label : "";
+          return text.toLowerCase().startsWith(state2.buffer);
+        });
+        if (match >= 0) {
+          setActive(match);
+          itemRefs.current[match]?.focus();
+        }
+      }
+    }
+  };
+  let rowIndex = -1;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      id,
+      role: "menu",
+      "aria-label": label,
+      "data-state": state,
+      className: cx("ansh-menu", className),
+      style,
+      onKeyDown,
+      children: items.map((entry, entryIndex) => {
+        if ("type" in entry && entry.type === "separator") {
+          return /* @__PURE__ */ jsx("div", { role: "separator", className: "ansh-menu__separator" }, `sep-${entryIndex}`);
+        }
+        if ("type" in entry && entry.type === "label") {
+          return /* @__PURE__ */ jsx("div", { role: "presentation", className: "ansh-menu__label", children: entry.label }, `label-${entryIndex}`);
+        }
+        if ("type" in entry && entry.type === "radio") {
+          return /* @__PURE__ */ jsx("div", { role: "group", className: "ansh-menu__group", children: entry.options.map((option) => {
+            rowIndex++;
+            const index2 = rowIndex;
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                ref: (node) => {
+                  itemRefs.current[index2] = node;
+                },
+                role: "menuitemradio",
+                "aria-checked": entry.value === option.value,
+                "aria-disabled": option.disabled || void 0,
+                tabIndex: index2 === active ? 0 : -1,
+                className: cx(
+                  "ansh-menu__item",
+                  option.disabled && "ansh-menu__item--disabled"
+                ),
+                onClick: () => activate(index2),
+                onMouseEnter: () => !option.disabled && setActive(index2),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cx(
+                        "ansh-menu__indicator",
+                        entry.value === option.value && "ansh-menu__indicator--on"
+                      ),
+                      "aria-hidden": "true"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "ansh-menu__text", children: option.label })
+                ]
+              },
+              option.value
+            );
+          }) }, `radio-${entryIndex}`);
+        }
+        rowIndex++;
+        const index = rowIndex;
+        if ("type" in entry && entry.type === "checkbox") {
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: (node) => {
+                itemRefs.current[index] = node;
+              },
+              role: "menuitemcheckbox",
+              "aria-checked": entry.checked,
+              "aria-disabled": entry.disabled || void 0,
+              tabIndex: index === active ? 0 : -1,
+              className: cx("ansh-menu__item", entry.disabled && "ansh-menu__item--disabled"),
+              onClick: () => activate(index),
+              onMouseEnter: () => !entry.disabled && setActive(index),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cx(
+                      "ansh-menu__indicator",
+                      "ansh-menu__indicator--check",
+                      entry.checked && "ansh-menu__indicator--on"
+                    ),
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 14 14", width: "10", height: "10", children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: "M2.5 7.5l3 3 6-6.5",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        fill: "none"
+                      }
+                    ) })
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "ansh-menu__text", children: entry.label }),
+                entry.shortcut ? /* @__PURE__ */ jsx("kbd", { className: "ansh-menu__shortcut", children: entry.shortcut }) : null
+              ]
+            },
+            entry.id ?? `check-${entryIndex}`
+          );
+        }
+        if ("type" in entry && entry.type === "submenu") {
+          return /* @__PURE__ */ jsx(
+            Submenu,
+            {
+              ref: (node) => {
+                itemRefs.current[index] = node;
+              },
+              entry,
+              active: index === active,
+              open: openSubmenu === index,
+              onOpenChange: (next) => setOpenSubmenu(next ? index : null),
+              onHover: () => setActive(index),
+              onCloseAll: onClose
+            },
+            entry.id ?? `sub-${entryIndex}`
+          );
+        }
+        const action = entry;
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: (node) => {
+              itemRefs.current[index] = node;
+            },
+            role: "menuitem",
+            "aria-disabled": action.disabled || void 0,
+            tabIndex: index === active ? 0 : -1,
+            className: cx(
+              "ansh-menu__item",
+              action.danger && "ansh-menu__item--danger",
+              action.disabled && "ansh-menu__item--disabled"
+            ),
+            onClick: () => activate(index),
+            onMouseEnter: () => !action.disabled && setActive(index),
+            children: [
+              action.icon ? /* @__PURE__ */ jsx("span", { className: "ansh-menu__icon", children: action.icon }) : null,
+              /* @__PURE__ */ jsx("span", { className: "ansh-menu__text", children: action.label }),
+              action.shortcut ? /* @__PURE__ */ jsx("kbd", { className: "ansh-menu__shortcut", children: action.shortcut }) : null
+            ]
+          },
+          action.id ?? `item-${entryIndex}`
+        );
+      })
+    }
+  );
+};
+function Submenu({ ref, entry, active, open, onOpenChange, onHover, onCloseAll }) {
+  const triggerRef = useRef(null);
+  const panelRef = useRef(null);
+  const timerRef = useRef(void 0);
+  const id = useId();
+  const { mounted, state } = usePresence(open, panelRef);
+  const position = useAnchoredPosition(triggerRef, panelRef, mounted, {
+    placement: "right-start",
+    offset: 2
+  });
+  useEffect(() => () => clearTimeout(timerRef.current), []);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: (node) => {
+          triggerRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        role: "menuitem",
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-controls": open ? id : void 0,
+        "aria-disabled": entry.disabled || void 0,
+        tabIndex: active ? 0 : -1,
+        className: cx(
+          "ansh-menu__item",
+          "ansh-menu__item--submenu",
+          entry.disabled && "ansh-menu__item--disabled"
+        ),
+        onMouseEnter: () => {
+          onHover();
+          clearTimeout(timerRef.current);
+          timerRef.current = setTimeout(() => onOpenChange(true), 120);
+        },
+        onMouseLeave: () => {
+          clearTimeout(timerRef.current);
+          timerRef.current = setTimeout(() => onOpenChange(false), 200);
+        },
+        onClick: () => onOpenChange(!open),
+        children: [
+          entry.icon ? /* @__PURE__ */ jsx("span", { className: "ansh-menu__icon", children: entry.icon }) : null,
+          /* @__PURE__ */ jsx("span", { className: "ansh-menu__text", children: entry.label }),
+          /* @__PURE__ */ jsx("span", { className: "ansh-menu__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: "12", height: "12", children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M4.5 2.5L8 6l-3.5 3.5",
+              stroke: "currentColor",
+              strokeWidth: "1.5",
+              fill: "none",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          ) }) })
+        ]
+      }
+    ),
+    mounted ? /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        onMouseEnter: () => clearTimeout(timerRef.current),
+        onMouseLeave: () => {
+          timerRef.current = setTimeout(() => onOpenChange(false), 200);
+        },
+        onKeyDown: (event) => {
+          if (event.key === "ArrowLeft") {
+            event.preventDefault();
+            event.stopPropagation();
+            onOpenChange(false);
+            triggerRef.current?.focus();
+          }
+        },
+        children: /* @__PURE__ */ jsx(
+          MenuSurface,
+          {
+            ref: panelRef,
+            id,
+            items: entry.items,
+            label: typeof entry.label === "string" ? entry.label : "Submenu",
+            state,
+            style: position.style,
+            onClose: onCloseAll
+          }
+        )
+      }
+    ) }) : null
+  ] });
+}
+
+export { AlertDialog, CommandPalette, ContextMenu, Dialog, DialogFooter, Drawer, DropdownMenu, HoverCard, Popover, PopoverContent, PopoverTrigger, Tooltip, TooltipProvider, useCommandShortcut };
+//# sourceMappingURL=chunk-LDCZQP3R.js.map
+//# sourceMappingURL=chunk-LDCZQP3R.js.map