@ansh-ui/vue 0.2.0

package/dist/chunk-2VSROZ2N.js

@@ -0,0 +1,1281 @@
+import { usePresence } from './chunk-6XJOB6LE.js';
+import { useAnchoredPosition, useDismiss, useScrollLock } from './chunk-XZ5ZFLZM.js';
+import { useFocusTrap, useAutoFocus, useFocusRestore } from './chunk-TMG3M6TK.js';
+import { useControllableState } from './chunk-OAQ7MDYX.js';
+import { useId, cx, resolveSlotContent } from './chunk-NJDDNO4C.js';
+import { defineComponent, ref, provide, h, computed, Teleport, onBeforeUnmount, inject, onMounted } from 'vue';
+
+var PopoverKey = /* @__PURE__ */ Symbol("ansh-popover");
+function usePopoverContext(component) {
+  const context = inject(PopoverKey, null);
+  if (!context) throw new Error(`<${component}> must be rendered inside <Popover>.`);
+  return context;
+}
+var Popover = defineComponent({
+  name: "AnshPopover",
+  props: {
+    open: { type: Boolean, default: void 0 },
+    defaultOpen: { type: Boolean, default: false },
+    placement: { type: String, default: "bottom" },
+    /** Gap from the trigger, in px. Default `8`. */
+    offset: { type: Number, default: 8 },
+    /** Trap focus and block interaction behind. Default `false` — most popovers are non-modal. */
+    modal: { type: Boolean, default: false }
+  },
+  emits: ["update:open"],
+  setup(props, { slots, emit }) {
+    const [isOpen, setOpen] = useControllableState(
+      () => props.open,
+      props.defaultOpen,
+      (next) => emit("update:open", next)
+    );
+    const triggerRef = ref(null);
+    const contentId = useId("popover");
+    provide(PopoverKey, {
+      open: isOpen,
+      setOpen,
+      triggerRef,
+      contentId,
+      get placement() {
+        return props.placement;
+      },
+      get offset() {
+        return props.offset;
+      },
+      get modal() {
+        return props.modal;
+      }
+    });
+    return () => slots.default?.();
+  }
+});
+var PopoverTrigger = defineComponent({
+  name: "AnshPopoverTrigger",
+  inheritAttrs: false,
+  props: {
+    /** Tag to render. Default `'button'`. */
+    as: { type: String, default: "button" }
+  },
+  setup(props, { slots, attrs }) {
+    const ctx = usePopoverContext("PopoverTrigger");
+    return () => {
+      const { onClick, ...restAttrs } = attrs;
+      return h(
+        props.as,
+        {
+          ref: ctx.triggerRef,
+          ...props.as === "button" ? { type: "button" } : null,
+          "aria-haspopup": "dialog",
+          "aria-expanded": ctx.open.value,
+          "aria-controls": ctx.open.value ? ctx.contentId : void 0,
+          ...restAttrs,
+          onClick: (event) => {
+            onClick?.(event);
+            if (event.defaultPrevented) return;
+            ctx.setOpen(!ctx.open.value);
+          }
+        },
+        slots.default?.()
+      );
+    };
+  }
+});
+var PopoverContent = defineComponent({
+  name: "AnshPopoverContent",
+  inheritAttrs: false,
+  props: {
+    /** Draw an arrow pointing at the trigger. Default `false`. */
+    arrow: { type: Boolean, default: false },
+    /** Match the trigger's width — for a popover acting as a dropdown panel. */
+    matchWidth: { type: Boolean, default: false },
+    /** Accessible name. Required unless the content contains its own heading. */
+    label: { type: String, default: void 0 }
+  },
+  setup(props, { slots, attrs }) {
+    const ctx = usePopoverContext("PopoverContent");
+    const contentRef = ref(null);
+    const { mounted, state } = usePresence(ctx.open, contentRef);
+    const { position } = useAnchoredPosition(ctx.triggerRef, contentRef, mounted, {
+      placement: ctx.placement,
+      offset: ctx.offset,
+      matchWidth: props.matchWidth,
+      arrowSize: props.arrow ? 10 : 0
+    });
+    useDismiss(contentRef, ctx.open, () => ctx.setOpen(false), { ignore: [ctx.triggerRef] });
+    const trapActive = computed(() => ctx.open.value && ctx.modal);
+    useFocusTrap(contentRef, trapActive);
+    useAutoFocus(contentRef, ctx.open);
+    useFocusRestore(ctx.open);
+    return () => {
+      if (!mounted.value) return null;
+      const { class: attrClass, style: attrStyle, ...restAttrs } = attrs;
+      return h(Teleport, { to: "body" }, [
+        h(
+          "div",
+          {
+            ref: contentRef,
+            id: ctx.contentId,
+            role: "dialog",
+            "aria-modal": ctx.modal || void 0,
+            ...props.label ? { "aria-label": props.label } : null,
+            tabindex: "-1",
+            "data-state": state.value,
+            "data-side": position.value.side,
+            class: cx("ansh-popover", attrClass),
+            style: [position.value.style, attrStyle],
+            ...restAttrs
+          },
+          [
+            slots.default?.(),
+            props.arrow && position.value.arrowStyle ? h("span", {
+              class: "ansh-popover__arrow",
+              style: position.value.arrowStyle,
+              "aria-hidden": "true"
+            }) : null
+          ]
+        )
+      ]);
+    };
+  }
+});
+var HoverCard = defineComponent({
+  name: "AnshHoverCard",
+  props: {
+    /** Delay before opening, in ms. Default `500`. */
+    openDelay: { type: Number, default: 500 },
+    /** Delay before closing, in ms. Default `200`. */
+    closeDelay: { type: Number, default: 200 },
+    placement: { type: String, default: "bottom" }
+  },
+  setup(props, { slots, attrs }) {
+    const open = ref(false);
+    const triggerRef = ref(null);
+    const cardRef = ref(null);
+    const id = useId("hovercard");
+    let timer;
+    const { mounted, state } = usePresence(open, cardRef);
+    const { position } = useAnchoredPosition(triggerRef, cardRef, mounted, {
+      placement: props.placement,
+      offset: 8
+    });
+    const schedule = (next) => {
+      clearTimeout(timer);
+      timer = setTimeout(
+        () => {
+          open.value = next;
+        },
+        next ? props.openDelay : props.closeDelay
+      );
+    };
+    onBeforeUnmount(() => clearTimeout(timer));
+    return () => h("span", { style: { display: "contents" } }, [
+      h(
+        "span",
+        {
+          ref: triggerRef,
+          class: "ansh-hovercard__trigger",
+          // `aria-describedby` rather than `aria-details`: support for details is still patchy,
+          // and a description is the honest relationship for supplementary content.
+          "aria-describedby": open.value ? id : void 0,
+          onMouseenter: () => schedule(true),
+          onMouseleave: () => schedule(false),
+          onFocus: () => {
+            open.value = true;
+          },
+          onBlur: () => {
+            open.value = false;
+          }
+        },
+        slots.default?.()
+      ),
+      mounted.value ? h(Teleport, { to: "body" }, [
+        h(
+          "div",
+          {
+            ref: cardRef,
+            id,
+            role: "tooltip",
+            "data-state": state.value,
+            class: cx("ansh-hovercard", attrs.class),
+            style: position.value.style,
+            // Keeping the card open while the pointer is over it is what makes its contents
+            // clickable at all.
+            onMouseenter: () => schedule(true),
+            onMouseleave: () => schedule(false)
+          },
+          slots.content?.()
+        )
+      ]) : null
+    ]);
+  }
+});
+var TooltipGroupKey = /* @__PURE__ */ Symbol("ansh-tooltip-group");
+var TooltipProvider = defineComponent({
+  name: "AnshTooltipProvider",
+  props: {
+    /** Delay before the first tooltip in a group opens, in ms. Default `600`. */
+    delay: { type: Number, default: 600 }
+  },
+  setup(props, { slots }) {
+    const active = ref(false);
+    provide(TooltipGroupKey, {
+      active,
+      setActive: (next) => {
+        active.value = next;
+      },
+      get delay() {
+        return props.delay;
+      }
+    });
+    return () => slots.default?.();
+  }
+});
+var Tooltip = defineComponent({
+  name: "AnshTooltip",
+  inheritAttrs: false,
+  props: {
+    /** The tooltip text. Keep it short — it is read as one description. */
+    content: { type: [String, Object, Function], required: true },
+    placement: { type: String, default: "top" },
+    /** Override the group delay, in ms. */
+    delay: { type: Number, default: void 0 },
+    /** Draw an arrow. Default `true`. */
+    arrow: { type: Boolean, default: true },
+    disabled: { type: Boolean, default: false }
+  },
+  setup(props, { slots, attrs }) {
+    const group = inject(TooltipGroupKey, null);
+    const open = ref(false);
+    const triggerRef = ref(null);
+    const tipRef = ref(null);
+    let timer;
+    const id = useId("tooltip");
+    const { mounted, state } = usePresence(open, tipRef);
+    const { position } = useAnchoredPosition(triggerRef, tipRef, mounted, {
+      placement: props.placement,
+      offset: 6,
+      arrowSize: props.arrow ? 8 : 0
+    });
+    const effectiveDelay = () => props.delay ?? group?.delay ?? 600;
+    const show = (immediate = false) => {
+      if (props.disabled) return;
+      clearTimeout(timer);
+      if (immediate || group?.active.value) {
+        open.value = true;
+        group?.setActive(true);
+        return;
+      }
+      timer = setTimeout(() => {
+        open.value = true;
+        group?.setActive(true);
+      }, effectiveDelay());
+    };
+    const hide = () => {
+      clearTimeout(timer);
+      open.value = false;
+      timer = setTimeout(() => group?.setActive(false), 200);
+    };
+    onBeforeUnmount(() => clearTimeout(timer));
+    useDismiss(
+      tipRef,
+      open,
+      () => {
+        open.value = false;
+        group?.setActive(false);
+      },
+      { outsidePress: false, escapeKey: true }
+    );
+    return () => {
+      const { class: attrClass, ...restAttrs } = attrs;
+      return h(
+        "span",
+        {
+          // No box of its own — see the module comment on why this wrapper exists at all.
+          style: { display: "contents" }
+        },
+        [
+          h(
+            "span",
+            {
+              ...restAttrs,
+              ref: triggerRef,
+              class: cx("ansh-tooltip-trigger", attrClass),
+              "aria-describedby": open.value ? id : void 0,
+              onMouseenter: () => show(),
+              onMouseleave: hide,
+              onFocusin: () => show(true),
+              onFocusout: hide
+            },
+            slots.default?.()
+          ),
+          mounted.value && !props.disabled ? h(Teleport, { to: "body" }, [
+            h(
+              "div",
+              {
+                ref: tipRef,
+                id,
+                role: "tooltip",
+                "data-state": state.value,
+                "data-side": position.value.side,
+                class: "ansh-tooltip",
+                style: position.value.style
+              },
+              [
+                resolveSlotContent(props.content),
+                props.arrow && position.value.arrowStyle ? h("span", {
+                  class: "ansh-tooltip__arrow",
+                  style: position.value.arrowStyle,
+                  "aria-hidden": "true"
+                }) : null
+              ]
+            )
+          ]) : null
+        ]
+      );
+    };
+  }
+});
+var Dialog = defineComponent({
+  name: "AnshDialog",
+  inheritAttrs: false,
+  props: {
+    open: { type: Boolean, default: void 0 },
+    defaultOpen: { type: Boolean, default: false },
+    /** The dialog's accessible name. Required — a dialog announced as just "dialog" is useless. */
+    title: { type: [String, Object, Function], required: true },
+    /** Supporting text, wired to `aria-describedby`. */
+    description: { type: [String, Object, Function], default: void 0 },
+    size: { type: String, default: "md" },
+    /** Show the close button. Default `true`. */
+    showClose: { type: Boolean, default: true },
+    /** Allow closing via scrim click and Escape. Default `true`. */
+    dismissable: { type: Boolean, default: true },
+    /** Element to focus on open. Defaults to the first tabbable one. */
+    initialFocus: { type: Object, default: void 0 }
+  },
+  emits: ["update:open"],
+  setup(props, { slots, attrs, emit }) {
+    const [isOpen, setOpen] = useControllableState(
+      () => props.open,
+      props.defaultOpen,
+      (next) => emit("update:open", next)
+    );
+    const panelRef = ref(null);
+    const id = useId("dialog");
+    const titleId = `${id}-title`;
+    const descriptionId = `${id}-description`;
+    const { mounted, state } = usePresence(isOpen, panelRef);
+    const close = () => {
+      if (props.dismissable) setOpen(false);
+    };
+    useDismiss(panelRef, isOpen, close, {
+      outsidePress: props.dismissable,
+      escapeKey: props.dismissable
+    });
+    useFocusTrap(panelRef, isOpen);
+    useAutoFocus(panelRef, isOpen, props.initialFocus);
+    useFocusRestore(isOpen);
+    useScrollLock(isOpen);
+    return () => {
+      if (!mounted.value) return null;
+      const { class: attrClass, ...restAttrs } = attrs;
+      return h(Teleport, { to: "body" }, [
+        h("div", { class: "ansh-dialog__layer", "data-state": state.value }, [
+          // The scrim is not a button and takes no focus — it's decorative. Dismissal is handled
+          // by `useDismiss` on a pointerdown outside the panel, which also covers the gap around
+          // the panel that isn't the scrim element itself.
+          h("div", {
+            class: "ansh-dialog__scrim",
+            "data-state": state.value,
+            "aria-hidden": "true"
+          }),
+          h(
+            "div",
+            {
+              ref: panelRef,
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-labelledby": titleId,
+              ...props.description ? { "aria-describedby": descriptionId } : null,
+              tabindex: "-1",
+              "data-state": state.value,
+              class: cx("ansh-dialog", `ansh-dialog--${props.size}`, attrClass),
+              ...restAttrs
+            },
+            [
+              h("header", { class: "ansh-dialog__header" }, [
+                h("div", { class: "ansh-dialog__heading" }, [
+                  h("h2", { class: "ansh-dialog__title", id: titleId }, [
+                    resolveSlotContent(props.title)
+                  ]),
+                  props.description ? h("p", { class: "ansh-dialog__description", id: descriptionId }, [
+                    resolveSlotContent(props.description)
+                  ]) : null
+                ]),
+                props.showClose ? h(
+                  "button",
+                  {
+                    type: "button",
+                    class: "ansh-dialog__close ansh-focusable",
+                    "aria-label": "Close dialog",
+                    onClick: () => setOpen(false)
+                  },
+                  [
+                    h(
+                      "svg",
+                      {
+                        viewBox: "0 0 16 16",
+                        width: "14",
+                        height: "14",
+                        "aria-hidden": "true"
+                      },
+                      [
+                        h("path", {
+                          d: "M4 4l8 8M12 4l-8 8",
+                          stroke: "currentColor",
+                          "stroke-width": "1.75",
+                          "stroke-linecap": "round",
+                          fill: "none"
+                        })
+                      ]
+                    )
+                  ]
+                ) : null
+              ]),
+              slots.default ? h("div", { class: "ansh-dialog__body" }, slots.default()) : null,
+              slots.footer ? h("footer", { class: "ansh-dialog__footer" }, slots.footer()) : null
+            ]
+          )
+        ])
+      ]);
+    };
+  }
+});
+var AlertDialog = defineComponent({
+  name: "AnshAlertDialog",
+  inheritAttrs: false,
+  props: {
+    open: { type: Boolean, default: void 0 },
+    defaultOpen: { type: Boolean, default: false },
+    title: { type: [String, Object, Function], required: true },
+    description: { type: [String, Object, Function], required: true },
+    /** Confirm button text. Default `'Confirm'`. */
+    confirmLabel: { type: String, default: "Confirm" },
+    cancelLabel: { type: String, default: "Cancel" },
+    /** Style the confirm action as destructive. */
+    destructive: { type: Boolean, default: false },
+    /** Disable the buttons while an async confirm runs. */
+    busy: { type: Boolean, default: false }
+  },
+  emits: ["update:open", "confirm", "cancel"],
+  setup(props, { attrs, emit }) {
+    const [isOpen, setOpen] = useControllableState(
+      () => props.open,
+      props.defaultOpen,
+      (next) => emit("update:open", next)
+    );
+    const panelRef = ref(null);
+    const cancelRef = ref(null);
+    const id = useId("alertdialog");
+    const titleId = `${id}-title`;
+    const descriptionId = `${id}-description`;
+    const { mounted, state } = usePresence(isOpen, panelRef);
+    const cancel = () => {
+      emit("cancel");
+      setOpen(false);
+    };
+    useDismiss(panelRef, isOpen, cancel, { outsidePress: false, escapeKey: true });
+    useFocusTrap(panelRef, isOpen);
+    useAutoFocus(panelRef, isOpen, cancelRef);
+    useFocusRestore(isOpen);
+    useScrollLock(isOpen);
+    return () => {
+      if (!mounted.value) return null;
+      const { class: attrClass, ...restAttrs } = attrs;
+      return h(Teleport, { to: "body" }, [
+        h("div", { class: "ansh-dialog__layer", "data-state": state.value }, [
+          h("div", {
+            class: "ansh-dialog__scrim",
+            "data-state": state.value,
+            "aria-hidden": "true"
+          }),
+          h(
+            "div",
+            {
+              ref: panelRef,
+              role: "alertdialog",
+              "aria-modal": "true",
+              "aria-labelledby": titleId,
+              "aria-describedby": descriptionId,
+              tabindex: "-1",
+              "data-state": state.value,
+              class: cx(
+                "ansh-dialog",
+                "ansh-dialog--sm",
+                "ansh-dialog--alert",
+                attrClass
+              ),
+              ...restAttrs
+            },
+            [
+              h("div", { class: "ansh-dialog__body" }, [
+                props.destructive ? h(
+                  "span",
+                  {
+                    class: "ansh-dialog__alert-icon ansh-dialog__alert-icon--danger",
+                    "aria-hidden": "true"
+                  },
+                  [
+                    h(
+                      "svg",
+                      {
+                        viewBox: "0 0 24 24",
+                        width: "20",
+                        height: "20",
+                        fill: "none",
+                        stroke: "currentColor",
+                        "stroke-width": "1.75"
+                      },
+                      [
+                        h("path", { d: "M12 8v5", "stroke-linecap": "round" }),
+                        h("circle", {
+                          cx: "12",
+                          cy: "16.5",
+                          r: "1",
+                          fill: "currentColor",
+                          stroke: "none"
+                        }),
+                        h("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",
+                          "stroke-linejoin": "round"
+                        })
+                      ]
+                    )
+                  ]
+                ) : null,
+                h("h2", { class: "ansh-dialog__title", id: titleId }, [
+                  resolveSlotContent(props.title)
+                ]),
+                h("p", { class: "ansh-dialog__description", id: descriptionId }, [
+                  resolveSlotContent(props.description)
+                ])
+              ]),
+              h("footer", { class: "ansh-dialog__footer" }, [
+                h(
+                  "button",
+                  {
+                    ref: cancelRef,
+                    type: "button",
+                    class: "ansh-btn ansh-btn--ghost ansh-btn--sm ansh-focusable",
+                    disabled: props.busy,
+                    onClick: cancel
+                  },
+                  [props.cancelLabel]
+                ),
+                h(
+                  "button",
+                  {
+                    type: "button",
+                    class: cx(
+                      "ansh-btn",
+                      "ansh-btn--sm",
+                      props.destructive ? "ansh-btn--danger" : "ansh-btn--solid",
+                      "ansh-focusable"
+                    ),
+                    disabled: props.busy,
+                    onClick: () => emit("confirm")
+                  },
+                  [
+                    props.busy ? h("span", { class: "ansh-spinner ansh-spinner--sm", "aria-hidden": "true" }) : null,
+                    props.confirmLabel
+                  ]
+                )
+              ])
+            ]
+          )
+        ])
+      ]);
+    };
+  }
+});
+var DialogFooter = defineComponent({
+  name: "AnshDialogFooter",
+  setup(_props, { slots, attrs }) {
+    return () => h("div", { class: cx("ansh-dialog__actions", attrs.class) }, slots.default?.());
+  }
+});
+var Drawer = defineComponent({
+  name: "AnshDrawer",
+  inheritAttrs: false,
+  props: {
+    open: { type: Boolean, default: void 0 },
+    defaultOpen: { type: Boolean, default: false },
+    /** Which edge it slides from. Default `'right'`. */
+    side: { type: String, default: "right" },
+    title: { type: [String, Object, Function], required: true },
+    description: { type: [String, Object, Function], default: void 0 },
+    /** Width for left/right, height for top/bottom. Default `'22rem'`. */
+    size: { type: String, default: "22rem" },
+    showClose: { type: Boolean, default: true },
+    /** Block interaction behind and lock scroll. Default `true`. */
+    modal: { type: Boolean, default: true },
+    dismissable: { type: Boolean, default: true }
+  },
+  emits: ["update:open"],
+  setup(props, { slots, attrs, emit }) {
+    const [isOpen, setOpen] = useControllableState(
+      () => props.open,
+      props.defaultOpen,
+      (next) => emit("update:open", next)
+    );
+    const panelRef = ref(null);
+    const id = useId("drawer");
+    const titleId = `${id}-title`;
+    const descriptionId = `${id}-description`;
+    const { mounted, state } = usePresence(isOpen, panelRef);
+    const close = () => {
+      if (props.dismissable) setOpen(false);
+    };
+    useDismiss(panelRef, isOpen, close, {
+      outsidePress: props.dismissable && props.modal,
+      escapeKey: props.dismissable
+    });
+    const trapActive = computed(() => isOpen.value && props.modal);
+    useFocusTrap(panelRef, trapActive);
+    useAutoFocus(panelRef, isOpen);
+    useFocusRestore(isOpen);
+    const scrollLockActive = computed(() => isOpen.value && props.modal);
+    useScrollLock(scrollLockActive);
+    return () => {
+      if (!mounted.value) return null;
+      const { class: attrClass, ...restAttrs } = attrs;
+      const horizontal = props.side === "left" || props.side === "right";
+      return h(Teleport, { to: "body" }, [
+        h(
+          "div",
+          {
+            class: cx("ansh-drawer__layer", !props.modal && "ansh-drawer__layer--inline"),
+            "data-state": state.value
+          },
+          [
+            props.modal ? h("div", {
+              class: "ansh-dialog__scrim",
+              "data-state": state.value,
+              "aria-hidden": "true"
+            }) : null,
+            h(
+              "div",
+              {
+                ref: panelRef,
+                role: "dialog",
+                "aria-modal": props.modal || void 0,
+                "aria-labelledby": titleId,
+                ...props.description ? { "aria-describedby": descriptionId } : null,
+                tabindex: "-1",
+                "data-state": state.value,
+                "data-side": props.side,
+                class: cx("ansh-drawer", `ansh-drawer--${props.side}`, attrClass),
+                // The size travels as a custom property so the closed-state transform can be
+                // written in terms of it — `translateX(100%)` alone breaks when the panel has a
+                // max-width.
+                style: {
+                  [horizontal ? "width" : "height"]: props.size,
+                  "--ansh-drawer-size": props.size
+                },
+                ...restAttrs
+              },
+              [
+                h("header", { class: "ansh-drawer__header" }, [
+                  h("div", { class: "ansh-dialog__heading" }, [
+                    h("h2", { class: "ansh-dialog__title", id: titleId }, [
+                      resolveSlotContent(props.title)
+                    ]),
+                    props.description ? h("p", { class: "ansh-dialog__description", id: descriptionId }, [
+                      resolveSlotContent(props.description)
+                    ]) : null
+                  ]),
+                  props.showClose ? h(
+                    "button",
+                    {
+                      type: "button",
+                      class: "ansh-dialog__close ansh-focusable",
+                      "aria-label": "Close panel",
+                      onClick: () => setOpen(false)
+                    },
+                    [
+                      h(
+                        "svg",
+                        {
+                          viewBox: "0 0 16 16",
+                          width: "14",
+                          height: "14",
+                          "aria-hidden": "true"
+                        },
+                        [
+                          h("path", {
+                            d: "M4 4l8 8M12 4l-8 8",
+                            stroke: "currentColor",
+                            "stroke-width": "1.75",
+                            "stroke-linecap": "round",
+                            fill: "none"
+                          })
+                        ]
+                      )
+                    ]
+                  ) : null
+                ]),
+                h("div", { class: "ansh-drawer__body" }, slots.default?.()),
+                slots.footer ? h("footer", { class: "ansh-drawer__footer" }, slots.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;
+}
+var DropdownMenu = defineComponent({
+  name: "AnshDropdownMenu",
+  inheritAttrs: false,
+  props: {
+    items: { type: Array, required: true },
+    placement: { type: String, default: "bottom-start" },
+    /** Accessible name for the menu itself. */
+    label: { type: String, default: "Menu" },
+    open: { type: Boolean, default: void 0 },
+    defaultOpen: { type: Boolean, default: false }
+  },
+  emits: ["update:open"],
+  setup(props, { slots, attrs, emit }) {
+    const [isOpen, setOpen] = useControllableState(
+      () => props.open,
+      props.defaultOpen,
+      (next) => emit("update:open", next)
+    );
+    const triggerRef = ref(null);
+    const menuRef = ref(null);
+    const menuId = useId("menu");
+    const { mounted, state } = usePresence(isOpen, menuRef);
+    const { position } = useAnchoredPosition(triggerRef, menuRef, mounted, {
+      placement: props.placement,
+      offset: 6
+    });
+    useDismiss(menuRef, isOpen, () => setOpen(false), { ignore: [triggerRef] });
+    return () => {
+      const panelClass = attrs.class;
+      return h("span", { style: { display: "contents" } }, [
+        h(
+          "span",
+          {
+            ref: triggerRef,
+            class: "ansh-menu-trigger",
+            "aria-haspopup": "menu",
+            "aria-expanded": isOpen.value,
+            "aria-controls": isOpen.value ? menuId : void 0,
+            onClick: () => setOpen(!isOpen.value),
+            onKeydown: (event) => {
+              if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+                event.preventDefault();
+                setOpen(true);
+              }
+            }
+          },
+          slots.default?.()
+        ),
+        mounted.value ? h(Teleport, { to: "body" }, [
+          h(MenuSurface, {
+            panelRef: menuRef,
+            id: menuId,
+            items: props.items,
+            label: props.label,
+            state: state.value,
+            positionStyle: position.value.style,
+            panelClass,
+            onClose: () => {
+              setOpen(false);
+              triggerRef.value?.focus?.();
+            }
+          })
+        ]) : null
+      ]);
+    };
+  }
+});
+var ContextMenu = defineComponent({
+  name: "AnshContextMenu",
+  inheritAttrs: false,
+  props: {
+    items: { type: Array, required: true },
+    label: { type: String, default: "Context menu" }
+  },
+  setup(props, { slots, attrs }) {
+    const point = ref(null);
+    const menuRef = ref(null);
+    const anchorRef = ref(null);
+    const menuId = useId("contextmenu");
+    const open = computed(() => point.value !== null);
+    const { mounted, state } = usePresence(open, menuRef);
+    const { position } = useAnchoredPosition(anchorRef, menuRef, mounted, {
+      placement: "bottom-start",
+      offset: 2
+    });
+    useDismiss(menuRef, open, () => {
+      point.value = null;
+    });
+    return () => {
+      const panelClass = attrs.class;
+      return h("span", { style: { display: "contents" } }, [
+        h(
+          "span",
+          {
+            class: "ansh-contextmenu__area",
+            onContextmenu: (event) => {
+              event.preventDefault();
+              point.value = { x: event.clientX, y: event.clientY };
+            },
+            onKeydown: (event) => {
+              if (event.key === "ContextMenu" || event.shiftKey && event.key === "F10") {
+                event.preventDefault();
+                const rect = event.currentTarget.getBoundingClientRect();
+                point.value = { x: rect.left + 8, y: rect.top + 8 };
+              }
+            }
+          },
+          slots.default?.()
+        ),
+        // A zero-size anchor placed at the pointer. Cheaper than teaching the positioner about
+        // virtual elements, and it inherits flip/shift behaviour for free.
+        point.value ? h("span", {
+          ref: anchorRef,
+          "aria-hidden": "true",
+          style: {
+            position: "fixed",
+            left: `${point.value.x}px`,
+            top: `${point.value.y}px`,
+            width: "0px",
+            height: "0px"
+          }
+        }) : null,
+        mounted.value ? h(Teleport, { to: "body" }, [
+          h(MenuSurface, {
+            panelRef: menuRef,
+            id: menuId,
+            items: props.items,
+            label: props.label,
+            state: state.value,
+            positionStyle: position.value.style,
+            panelClass,
+            onClose: () => {
+              point.value = null;
+            }
+          })
+        ]) : null
+      ]);
+    };
+  }
+});
+var MenuSurface = defineComponent({
+  name: "AnshMenuSurface",
+  props: {
+    panelRef: { type: Object, required: true },
+    id: { type: String, required: true },
+    items: { type: Array, required: true },
+    label: { type: String, required: true },
+    state: { type: String, required: true },
+    // Named `positionStyle`/`panelClass` rather than `style`/`class` — Vue merges those two
+    // particular prop names onto a component's root element automatically regardless of whether
+    // they're declared, which would double up the class list.
+    positionStyle: { type: Object, required: true },
+    panelClass: { type: String, default: void 0 },
+    onClose: { type: Function, required: true }
+  },
+  setup(props) {
+    const rows = computed(() => flatten(props.items));
+    const itemRefs = ref([]);
+    const active = ref(rows.value.findIndex((row) => !row.disabled));
+    const openSubmenu = ref(null);
+    let typeaheadBuffer = "";
+    let typeaheadTimer;
+    onMounted(() => {
+      itemRefs.value[active.value]?.focus();
+    });
+    onBeforeUnmount(() => clearTimeout(typeaheadTimer));
+    const move = (delta) => {
+      const list = rows.value;
+      if (list.length === 0) return;
+      let next = active.value;
+      for (let attempts = 0; attempts < list.length; attempts++) {
+        next = (next + delta + list.length) % list.length;
+        if (!list[next]?.disabled) break;
+      }
+      active.value = next;
+      itemRefs.value[next]?.focus();
+    };
+    const activate = (index) => {
+      const row = rows.value[index];
+      if (!row || row.disabled) return;
+      const { entry } = row;
+      if ("type" in entry && entry.type === "submenu") {
+        openSubmenu.value = 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);
+        props.onClose();
+        return;
+      }
+      entry.onSelect?.();
+      props.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();
+          active.value = 0;
+          itemRefs.value[0]?.focus();
+          break;
+        case "End":
+          event.preventDefault();
+          active.value = rows.value.length - 1;
+          itemRefs.value[rows.value.length - 1]?.focus();
+          break;
+        case "Enter":
+        case " ":
+          event.preventDefault();
+          activate(active.value);
+          break;
+        case "ArrowRight": {
+          const row = rows.value[active.value];
+          if (row && "type" in row.entry && row.entry.type === "submenu") {
+            event.preventDefault();
+            openSubmenu.value = active.value;
+          }
+          break;
+        }
+        case "Escape":
+          event.preventDefault();
+          props.onClose();
+          break;
+        case "Tab":
+          event.preventDefault();
+          props.onClose();
+          break;
+        default: {
+          if (event.key.length !== 1) return;
+          clearTimeout(typeaheadTimer);
+          typeaheadBuffer += event.key.toLowerCase();
+          typeaheadTimer = setTimeout(() => {
+            typeaheadBuffer = "";
+          }, 600);
+          const match = rows.value.findIndex((row, index) => {
+            if (row.disabled || index === active.value) return false;
+            const text = typeof row.entry.label === "string" ? row.entry.label : "";
+            return text.toLowerCase().startsWith(typeaheadBuffer);
+          });
+          if (match >= 0) {
+            active.value = match;
+            itemRefs.value[match]?.focus();
+          }
+        }
+      }
+    };
+    return () => {
+      let rowIndex = -1;
+      return h(
+        "div",
+        {
+          ref: props.panelRef,
+          id: props.id,
+          role: "menu",
+          "aria-label": props.label,
+          "data-state": props.state,
+          class: cx("ansh-menu", props.panelClass),
+          style: props.positionStyle,
+          onKeydown
+        },
+        props.items.map((entry, entryIndex) => {
+          if ("type" in entry && entry.type === "separator") {
+            return h("div", {
+              key: `sep-${entryIndex}`,
+              role: "separator",
+              class: "ansh-menu__separator"
+            });
+          }
+          if ("type" in entry && entry.type === "label") {
+            return h(
+              "div",
+              { key: `label-${entryIndex}`, role: "presentation", class: "ansh-menu__label" },
+              [resolveSlotContent(entry.label)]
+            );
+          }
+          if ("type" in entry && entry.type === "radio") {
+            return h(
+              "div",
+              { key: `radio-${entryIndex}`, role: "group", class: "ansh-menu__group" },
+              entry.options.map((option) => {
+                rowIndex++;
+                const index2 = rowIndex;
+                return h(
+                  "div",
+                  {
+                    key: option.value,
+                    ref: (node) => {
+                      itemRefs.value[index2] = node;
+                    },
+                    role: "menuitemradio",
+                    "aria-checked": entry.value === option.value,
+                    "aria-disabled": option.disabled || void 0,
+                    tabindex: index2 === active.value ? "0" : "-1",
+                    class: cx("ansh-menu__item", option.disabled && "ansh-menu__item--disabled"),
+                    onClick: () => activate(index2),
+                    onMouseenter: () => {
+                      if (!option.disabled) active.value = index2;
+                    }
+                  },
+                  [
+                    h("span", {
+                      class: cx(
+                        "ansh-menu__indicator",
+                        entry.value === option.value && "ansh-menu__indicator--on"
+                      ),
+                      "aria-hidden": "true"
+                    }),
+                    h("span", { class: "ansh-menu__text" }, [resolveSlotContent(option.label)])
+                  ]
+                );
+              })
+            );
+          }
+          rowIndex++;
+          const index = rowIndex;
+          if ("type" in entry && entry.type === "checkbox") {
+            return h(
+              "div",
+              {
+                key: entry.id ?? `check-${entryIndex}`,
+                ref: (node) => {
+                  itemRefs.value[index] = node;
+                },
+                role: "menuitemcheckbox",
+                "aria-checked": entry.checked,
+                "aria-disabled": entry.disabled || void 0,
+                tabindex: index === active.value ? "0" : "-1",
+                class: cx("ansh-menu__item", entry.disabled && "ansh-menu__item--disabled"),
+                onClick: () => activate(index),
+                onMouseenter: () => {
+                  if (!entry.disabled) active.value = index;
+                }
+              },
+              [
+                h(
+                  "span",
+                  {
+                    class: cx(
+                      "ansh-menu__indicator",
+                      "ansh-menu__indicator--check",
+                      entry.checked && "ansh-menu__indicator--on"
+                    ),
+                    "aria-hidden": "true"
+                  },
+                  [
+                    h("svg", { viewBox: "0 0 14 14", width: "10", height: "10" }, [
+                      h("path", {
+                        d: "M2.5 7.5l3 3 6-6.5",
+                        stroke: "currentColor",
+                        "stroke-width": "2",
+                        "stroke-linecap": "round",
+                        "stroke-linejoin": "round",
+                        fill: "none"
+                      })
+                    ])
+                  ]
+                ),
+                h("span", { class: "ansh-menu__text" }, [resolveSlotContent(entry.label)]),
+                entry.shortcut ? h("kbd", { class: "ansh-menu__shortcut" }, entry.shortcut) : null
+              ]
+            );
+          }
+          if ("type" in entry && entry.type === "submenu") {
+            return h(Submenu, {
+              key: entry.id ?? `sub-${entryIndex}`,
+              entry,
+              active: index === active.value,
+              open: openSubmenu.value === index,
+              onOpenChange: (next) => {
+                openSubmenu.value = next ? index : null;
+              },
+              onHover: () => {
+                active.value = index;
+              },
+              onCloseAll: () => props.onClose(),
+              onItemRef: (node) => {
+                itemRefs.value[index] = node;
+              }
+            });
+          }
+          const action = entry;
+          return h(
+            "div",
+            {
+              key: action.id ?? `item-${entryIndex}`,
+              ref: (node) => {
+                itemRefs.value[index] = node;
+              },
+              role: "menuitem",
+              "aria-disabled": action.disabled || void 0,
+              tabindex: index === active.value ? "0" : "-1",
+              class: cx(
+                "ansh-menu__item",
+                action.danger && "ansh-menu__item--danger",
+                action.disabled && "ansh-menu__item--disabled"
+              ),
+              onClick: () => activate(index),
+              onMouseenter: () => {
+                if (!action.disabled) active.value = index;
+              }
+            },
+            [
+              action.icon ? h("span", { class: "ansh-menu__icon" }, [resolveSlotContent(action.icon)]) : null,
+              h("span", { class: "ansh-menu__text" }, [resolveSlotContent(action.label)]),
+              action.shortcut ? h("kbd", { class: "ansh-menu__shortcut" }, action.shortcut) : null
+            ]
+          );
+        })
+      );
+    };
+  }
+});
+var Submenu = defineComponent({
+  name: "AnshMenuSubmenu",
+  props: {
+    entry: { type: Object, required: true },
+    active: { type: Boolean, required: true },
+    open: { type: Boolean, required: true },
+    onOpenChange: { type: Function, required: true },
+    onHover: { type: Function, required: true },
+    onCloseAll: { type: Function, required: true },
+    /** Reports this submenu's trigger element up so the parent's roving-focus array includes it. */
+    onItemRef: { type: Function, required: true }
+  },
+  setup(props) {
+    const triggerRef = ref(null);
+    const panelRef = ref(null);
+    let timer;
+    const id = useId("submenu");
+    const openRef = computed(() => props.open);
+    const { mounted, state } = usePresence(openRef, panelRef);
+    const { position } = useAnchoredPosition(triggerRef, panelRef, mounted, {
+      placement: "right-start",
+      offset: 2
+    });
+    onBeforeUnmount(() => clearTimeout(timer));
+    return () => h("span", { style: { display: "contents" } }, [
+      h(
+        "div",
+        {
+          ref: (node) => {
+            triggerRef.value = node;
+            props.onItemRef(node);
+          },
+          role: "menuitem",
+          "aria-haspopup": "menu",
+          "aria-expanded": props.open,
+          "aria-controls": props.open ? id : void 0,
+          "aria-disabled": props.entry.disabled || void 0,
+          tabindex: props.active ? "0" : "-1",
+          class: cx(
+            "ansh-menu__item",
+            "ansh-menu__item--submenu",
+            props.entry.disabled && "ansh-menu__item--disabled"
+          ),
+          onMouseenter: () => {
+            props.onHover();
+            clearTimeout(timer);
+            timer = setTimeout(() => props.onOpenChange(true), 120);
+          },
+          onMouseleave: () => {
+            clearTimeout(timer);
+            timer = setTimeout(() => props.onOpenChange(false), 200);
+          },
+          onClick: () => props.onOpenChange(!props.open)
+        },
+        [
+          props.entry.icon ? h("span", { class: "ansh-menu__icon" }, [resolveSlotContent(props.entry.icon)]) : null,
+          h("span", { class: "ansh-menu__text" }, [resolveSlotContent(props.entry.label)]),
+          h("span", { class: "ansh-menu__chevron", "aria-hidden": "true" }, [
+            h("svg", { viewBox: "0 0 12 12", width: "12", height: "12" }, [
+              h("path", {
+                d: "M4.5 2.5L8 6l-3.5 3.5",
+                stroke: "currentColor",
+                "stroke-width": "1.5",
+                fill: "none",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round"
+              })
+            ])
+          ])
+        ]
+      ),
+      mounted.value ? h(Teleport, { to: "body" }, [
+        h(
+          "div",
+          {
+            onMouseenter: () => clearTimeout(timer),
+            onMouseleave: () => {
+              timer = setTimeout(() => props.onOpenChange(false), 200);
+            },
+            onKeydown: (event) => {
+              if (event.key === "ArrowLeft") {
+                event.preventDefault();
+                event.stopPropagation();
+                props.onOpenChange(false);
+                triggerRef.value?.focus();
+              }
+            }
+          },
+          [
+            h(MenuSurface, {
+              panelRef,
+              id,
+              items: props.entry.items,
+              label: typeof props.entry.label === "string" ? props.entry.label : "Submenu",
+              state: state.value,
+              positionStyle: position.value.style,
+              onClose: props.onCloseAll
+            })
+          ]
+        )
+      ]) : null
+    ]);
+  }
+});
+
+export { AlertDialog, ContextMenu, Dialog, DialogFooter, Drawer, DropdownMenu, HoverCard, Popover, PopoverContent, PopoverTrigger, Tooltip, TooltipProvider };
+//# sourceMappingURL=chunk-2VSROZ2N.js.map
+//# sourceMappingURL=chunk-2VSROZ2N.js.map