bits-lab 0.0.0-stage → 0.1.2

package/dist/OverlayKit.js

@@ -0,0 +1,466 @@
+'use client';
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cloneElement, isValidElement, useCallback, useEffect, useId, useInsertionEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+const MOTION = {
+  fast: 140,
+  base: 220,
+  slow: 320,
+  easeOut: "cubic-bezier(.2,.9,.25,1)",
+  easeIn: "cubic-bezier(.4,0,1,1)",
+  spring: "cubic-bezier(.3,1.35,.5,1)"
+};
+const STYLE_ID = "bl-overlay-kit";
+const CSS = `
+.bl-ok-layer { --ok-bg: var(--bl-ok-bg, #1a1c2c); --ok-ink: var(--bl-ok-ink, #f4f4f4); --ok-muted: var(--bl-ok-muted, #94b0c2); --ok-line: var(--bl-ok-line, rgba(255,255,255,0.12)); --ok-accent: var(--bl-ok-accent, #73eff7); --ok-hover: var(--bl-ok-hover, rgba(255,255,255,0.07)); --ok-radius: var(--bl-ok-radius, 14px); --ok-backdrop: var(--bl-ok-backdrop, rgba(8,8,16,0.6)); font-family: var(--bl-ok-font, ui-sans-serif, system-ui, sans-serif); color: var(--ok-ink); }
+.bl-ok-surface { background: var(--ok-bg); color: var(--ok-ink); border-radius: var(--ok-radius); box-shadow: 0 0 0 1px var(--ok-line), 0 24px 60px -24px rgba(0,0,0,0.75); outline: none; }
+.bl-ok-backdrop { position: fixed; inset: 0; z-index: 1500; background: var(--ok-backdrop); }
+.bl-ok-backdrop[data-state="open"] { animation: bl-ok-fade ${MOTION.base}ms ${MOTION.easeOut} both; }
+.bl-ok-backdrop[data-state="closed"] { animation: bl-ok-fade ${MOTION.base}ms ${MOTION.easeIn} reverse both; }
+
+.bl-ok-dialog { position: fixed; z-index: 1501; left: 50%; top: 50%; width: min(var(--ok-w, 480px), calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; padding: 22px; transform: translate(-50%, -50%); }
+.bl-ok-dialog[data-state="open"] { animation: bl-ok-pop ${MOTION.slow}ms ${MOTION.spring} both; }
+.bl-ok-dialog[data-state="closed"] { animation: bl-ok-pop ${MOTION.base}ms ${MOTION.easeIn} reverse both; }
+
+.bl-ok-sheet { position: fixed; z-index: 1501; overflow: auto; padding: 22px; border-radius: 0; }
+.bl-ok-sheet[data-side="right"] { top: 0; right: 0; bottom: 0; width: min(var(--ok-w, 380px), 92vw); border-radius: var(--ok-radius) 0 0 var(--ok-radius); }
+.bl-ok-sheet[data-side="left"] { top: 0; left: 0; bottom: 0; width: min(var(--ok-w, 380px), 92vw); border-radius: 0 var(--ok-radius) var(--ok-radius) 0; }
+.bl-ok-sheet[data-side="bottom"] { left: 0; right: 0; bottom: 0; max-height: 85vh; border-radius: var(--ok-radius) var(--ok-radius) 0 0; }
+.bl-ok-sheet[data-side="top"] { left: 0; right: 0; top: 0; max-height: 85vh; border-radius: 0 0 var(--ok-radius) var(--ok-radius); }
+.bl-ok-sheet[data-state="open"] { animation: bl-ok-slide-in ${MOTION.slow}ms ${MOTION.easeOut} both; }
+.bl-ok-sheet[data-state="closed"] { animation: bl-ok-slide-in ${MOTION.base}ms ${MOTION.easeIn} reverse both; }
+.bl-ok-sheet[data-side="right"] { --ok-from: translateX(100%); }
+.bl-ok-sheet[data-side="left"] { --ok-from: translateX(-100%); }
+.bl-ok-sheet[data-side="bottom"] { --ok-from: translateY(100%); }
+.bl-ok-sheet[data-side="top"] { --ok-from: translateY(-100%); }
+
+.bl-ok-title { margin: 0 32px 6px 0; font-size: 1.15em; font-weight: 700; }
+.bl-ok-desc { margin: 0 0 16px; color: var(--ok-muted); font-size: 0.93em; line-height: 1.5; }
+.bl-ok-close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--ok-muted); cursor: pointer; }
+.bl-ok-close:hover { background: var(--ok-hover); color: var(--ok-ink); }
+.bl-ok-close:focus-visible, .bl-ok-item:focus-visible { outline: 2px solid var(--ok-accent); outline-offset: 1px; }
+
+.bl-ok-float[data-state="open"] { animation: bl-ok-float-in ${MOTION.base}ms ${MOTION.spring} both; }
+.bl-ok-float[data-state="closed"] { animation: bl-ok-float-in ${MOTION.fast}ms ${MOTION.easeIn} reverse both; }
+.bl-ok-float[data-side="top"] { --ok-shift: 0, 6px; transform-origin: bottom center; }
+.bl-ok-float[data-side="bottom"] { --ok-shift: 0, -6px; transform-origin: top center; }
+.bl-ok-float[data-side="left"] { --ok-shift: 6px, 0; transform-origin: center right; }
+.bl-ok-float[data-side="right"] { --ok-shift: -6px, 0; transform-origin: center left; }
+
+.bl-ok-tooltip { max-width: 260px; padding: 6px 10px; border-radius: calc(var(--ok-radius) * 0.6); background: var(--bl-ok-tooltip-bg, #f4f4f4); color: var(--bl-ok-tooltip-ink, #1a1c2c); font-size: 13px; line-height: 1.4; box-shadow: 0 8px 24px -10px rgba(0,0,0,0.6); }
+.bl-ok-popover { padding: 14px; width: var(--ok-w, auto); max-width: min(360px, calc(100vw - 16px)); }
+.bl-ok-menu { min-width: 200px; max-width: calc(100vw - 16px); padding: 5px; }
+.bl-ok-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: calc(var(--ok-radius) * 0.55); background: transparent; color: inherit; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
+.bl-ok-item:hover, .bl-ok-item:focus { background: var(--ok-hover); outline: none; }
+.bl-ok-item:focus-visible { box-shadow: inset 0 0 0 2px var(--ok-accent); outline: none; }
+.bl-ok-item[data-danger] { color: var(--bl-ok-danger, #ef7d57); }
+.bl-ok-item:disabled { opacity: 0.4; cursor: not-allowed; }
+.bl-ok-item__label { flex: 1; }
+.bl-ok-item__kbd { color: var(--ok-muted); font-size: 12px; }
+.bl-ok-sep { height: 1px; margin: 5px 4px; background: var(--ok-line); }
+.bl-ok-menu-label { padding: 6px 10px 4px; color: var(--ok-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
+
+@keyframes bl-ok-fade { from { opacity: 0; } }
+@keyframes bl-ok-pop { from { opacity: 0; transform: translate(-50%, -48%) scale(0.95); } }
+@keyframes bl-ok-slide-in { from { transform: var(--ok-from); } }
+@keyframes bl-ok-float-in { from { opacity: 0; transform: translate(var(--ok-shift, 0, 0)) scale(0.96); } }
+@media (prefers-reduced-motion: reduce) {
+  .bl-ok-dialog[data-state], .bl-ok-sheet[data-state], .bl-ok-float[data-state] { animation-name: bl-ok-fade; }
+}
+`;
+function useStyles() {
+  useInsertionEffect(() => {
+    if (typeof document === "undefined") return;
+    const style = document.getElementById(STYLE_ID) ?? Object.assign(document.createElement("style"), { id: STYLE_ID });
+    style.textContent = CSS;
+    if (!style.isConnected) document.head.appendChild(style);
+  }, []);
+}
+function useControllable(open, defaultOpen, onOpenChange) {
+  const [inner, setInner] = useState(defaultOpen ?? false);
+  const value = open ?? inner;
+  const set = useCallback(
+    (next) => {
+      if (open === void 0) setInner(next);
+      onOpenChange?.(next);
+    },
+    [open, onOpenChange]
+  );
+  return [value, set];
+}
+function usePresence(open, exitMs = MOTION.base) {
+  const [mounted, setMounted] = useState(open);
+  useEffect(() => {
+    if (open) {
+      setMounted(true);
+      return void 0;
+    }
+    const timer = setTimeout(() => setMounted(false), exitMs);
+    return () => clearTimeout(timer);
+  }, [open, exitMs]);
+  return [mounted || open, open ? "open" : "closed"];
+}
+const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function useFocusTrap(ref, active, { trap = true, restore = true } = {}) {
+  useEffect(() => {
+    if (!active) return void 0;
+    const node = ref.current;
+    const previous = document.activeElement;
+    const first = node?.querySelector("[data-autofocus]") ?? node?.querySelector(FOCUSABLE) ?? node;
+    first?.focus({ preventScroll: true });
+    const onKey = (event) => {
+      if (!trap || event.key !== "Tab" || !node) return;
+      const items = [...node.querySelectorAll(FOCUSABLE)];
+      if (!items.length) {
+        event.preventDefault();
+        return;
+      }
+      const a = items[0];
+      const z = items[items.length - 1];
+      if (event.shiftKey && (document.activeElement === a || document.activeElement === node)) {
+        event.preventDefault();
+        z.focus();
+      } else if (!event.shiftKey && document.activeElement === z) {
+        event.preventDefault();
+        a.focus();
+      }
+    };
+    node?.addEventListener("keydown", onKey);
+    return () => {
+      node?.removeEventListener("keydown", onKey);
+      if (restore && previous instanceof HTMLElement && (node?.contains(document.activeElement) || document.activeElement === document.body)) previous.focus({ preventScroll: true });
+    };
+  }, [active]);
+}
+function useScrollLock(active) {
+  useEffect(() => {
+    if (!active) return void 0;
+    const { body, documentElement } = document;
+    const previous = { overflow: body.style.overflow, paddingRight: body.style.paddingRight };
+    const gap = window.innerWidth - documentElement.clientWidth;
+    body.style.overflow = "hidden";
+    if (gap > 0) body.style.paddingRight = `${gap}px`;
+    return () => {
+      Object.assign(body.style, previous);
+    };
+  }, [active]);
+}
+function useDismiss(active, refs, onDismiss, { outside = true } = {}) {
+  const latest = useRef(onDismiss);
+  latest.current = onDismiss;
+  useEffect(() => {
+    if (!active) return void 0;
+    const onKey = (event) => {
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        latest.current();
+      }
+    };
+    const onDown = (event) => {
+      if (!outside) return;
+      if (refs.every((ref) => !ref.current?.contains(event.target))) latest.current();
+    };
+    document.addEventListener("keydown", onKey);
+    document.addEventListener("pointerdown", onDown);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.removeEventListener("pointerdown", onDown);
+    };
+  }, [active, outside]);
+}
+function useFloating(anchorRef, floatingRef, active, { side = "bottom", align = "center", offset = 8 }) {
+  const [placed, setPlaced] = useState(side);
+  useLayoutEffect(() => {
+    if (!active) return void 0;
+    const update = () => {
+      const anchor = anchorRef.current;
+      const floating = floatingRef.current;
+      if (!anchor || !floating) return;
+      const a = anchor.getBoundingClientRect();
+      const f = { width: floating.offsetWidth, height: floating.offsetHeight };
+      const vw = window.innerWidth;
+      const vh = window.innerHeight;
+      const opposite = { top: "bottom", bottom: "top", left: "right", right: "left" };
+      const fits = (s2) => s2 === "top" ? a.top - offset - f.height >= 4 : s2 === "bottom" ? a.bottom + offset + f.height <= vh - 4 : s2 === "left" ? a.left - offset - f.width >= 4 : a.right + offset + f.width <= vw - 4;
+      const s = fits(side) || !fits(opposite[side]) ? side : opposite[side];
+      let top;
+      let left;
+      if (s === "top" || s === "bottom") {
+        top = s === "top" ? a.top - offset - f.height : a.bottom + offset;
+        left = align === "start" ? a.left : align === "end" ? a.right - f.width : a.left + a.width / 2 - f.width / 2;
+      } else {
+        left = s === "left" ? a.left - offset - f.width : a.right + offset;
+        top = align === "start" ? a.top : align === "end" ? a.bottom - f.height : a.top + a.height / 2 - f.height / 2;
+      }
+      left = Math.max(8, Math.min(vw - f.width - 8, left));
+      top = Math.max(8, Math.min(vh - f.height - 8, top));
+      floating.style.transform = `translate(${Math.round(left)}px, ${Math.round(top)}px)`;
+      setPlaced(s);
+    };
+    update();
+    window.addEventListener("resize", update);
+    window.addEventListener("scroll", update, true);
+    return () => {
+      window.removeEventListener("resize", update);
+      window.removeEventListener("scroll", update, true);
+    };
+  }, [active, side, align, offset]);
+  return placed;
+}
+function mergeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    }
+  };
+}
+const CloseIcon = () => /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2 2l10 10M12 2 2 12" }) });
+const floatStyle = { position: "fixed", zIndex: 1600, top: 0, left: 0 };
+function Modal({ variant, open, defaultOpen, onOpenChange, trigger, title, description, children, side = "right", width, closeLabel = "Close", className = "", style }) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const [isOpen, setOpen] = useControllable(open, defaultOpen, onOpenChange);
+  const [mounted, state] = usePresence(isOpen);
+  const panelRef = useRef(null);
+  useFocusTrap(panelRef, isOpen && mounted);
+  useScrollLock(isOpen);
+  useDismiss(isOpen, [panelRef], () => setOpen(false), { outside: false });
+  const triggerEl = isValidElement(trigger) ? cloneElement(trigger, {
+    "aria-haspopup": "dialog",
+    "aria-expanded": isOpen,
+    onClick: (event) => {
+      trigger.props.onClick?.(event);
+      setOpen(true);
+    }
+  }) : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    triggerEl,
+    mounted && createPortal(
+      /* @__PURE__ */ jsxs("div", { className: "bl-ok-layer", style: { ...width ? { "--ok-w": `${width}px` } : null, ...style }, children: [
+        /* @__PURE__ */ jsx("div", { className: "bl-ok-backdrop", "data-state": state, onClick: () => setOpen(false), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: panelRef,
+            className: `bl-ok-surface ${variant === "sheet" ? "bl-ok-sheet" : "bl-ok-dialog"} ${className}`,
+            "data-state": state,
+            "data-side": variant === "sheet" ? side : void 0,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": title ? `${uid}-title` : void 0,
+            "aria-describedby": description ? `${uid}-desc` : void 0,
+            tabIndex: -1,
+            children: [
+              title && /* @__PURE__ */ jsx("h2", { id: `${uid}-title`, className: "bl-ok-title", children: title }),
+              description && /* @__PURE__ */ jsx("p", { id: `${uid}-desc`, className: "bl-ok-desc", children: description }),
+              typeof children === "function" ? children({ close: () => setOpen(false) }) : children,
+              /* @__PURE__ */ jsx("button", { type: "button", className: "bl-ok-close", "aria-label": closeLabel, onClick: () => setOpen(false), children: /* @__PURE__ */ jsx(CloseIcon, {}) })
+            ]
+          }
+        )
+      ] }),
+      document.body
+    )
+  ] });
+}
+function Dialog(props) {
+  return /* @__PURE__ */ jsx(Modal, { ...props, variant: "dialog" });
+}
+function Sheet(props) {
+  return /* @__PURE__ */ jsx(Modal, { ...props, variant: "sheet" });
+}
+function Tooltip({ content, children, side = "top", align = "center", delay = 400, closeDelay = 120, className = "", style }) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const [open, setOpen] = useState(false);
+  const [mounted, state] = usePresence(open, MOTION.fast);
+  const anchorRef = useRef(null);
+  const floatRef = useRef(null);
+  const timer = useRef(0);
+  const placed = useFloating(anchorRef, floatRef, mounted, { side, align, offset: 8 });
+  const show = (wait) => {
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => setOpen(true), wait);
+  };
+  const hide = (wait) => {
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => setOpen(false), wait);
+  };
+  useEffect(() => () => clearTimeout(timer.current), []);
+  useDismiss(open, [], () => setOpen(false), { outside: false });
+  if (!isValidElement(children)) return children ?? null;
+  const child = cloneElement(children, {
+    ref: mergeRefs(anchorRef, children.props.ref),
+    "aria-describedby": open ? `${uid}-tip` : children.props["aria-describedby"],
+    onPointerEnter: (event) => {
+      children.props.onPointerEnter?.(event);
+      if (event.pointerType === "mouse") show(delay);
+    },
+    onPointerLeave: (event) => {
+      children.props.onPointerLeave?.(event);
+      hide(closeDelay);
+    },
+    onFocus: (event) => {
+      children.props.onFocus?.(event);
+      show(0);
+    },
+    onBlur: (event) => {
+      children.props.onBlur?.(event);
+      hide(0);
+    }
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    child,
+    mounted && createPortal(
+      /* @__PURE__ */ jsx("div", { ref: floatRef, className: "bl-ok-layer", style: { ...floatStyle, ...style }, onPointerEnter: () => show(0), onPointerLeave: () => hide(closeDelay), children: /* @__PURE__ */ jsx("div", { id: `${uid}-tip`, role: "tooltip", className: `bl-ok-float bl-ok-tooltip ${className}`, "data-state": state, "data-side": placed, children: content }) }),
+      document.body
+    )
+  ] });
+}
+function Popover({ trigger, children, label, open, defaultOpen, onOpenChange, side = "bottom", align = "center", width, className = "", style }) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const [isOpen, setOpen] = useControllable(open, defaultOpen, onOpenChange);
+  const [mounted, state] = usePresence(isOpen, MOTION.fast);
+  const anchorRef = useRef(null);
+  const floatRef = useRef(null);
+  const panelRef = useRef(null);
+  const placed = useFloating(anchorRef, floatRef, mounted, { side, align, offset: 8 });
+  useFocusTrap(panelRef, isOpen && mounted, { trap: false });
+  useDismiss(isOpen, [anchorRef, floatRef], () => setOpen(false));
+  const triggerEl = isValidElement(trigger) ? cloneElement(trigger, {
+    ref: mergeRefs(anchorRef, trigger.props.ref),
+    "aria-haspopup": "dialog",
+    "aria-expanded": isOpen,
+    "aria-controls": mounted ? `${uid}-pop` : void 0,
+    onClick: (event) => {
+      trigger.props.onClick?.(event);
+      setOpen(!isOpen);
+    }
+  }) : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    triggerEl,
+    mounted && createPortal(
+      /* @__PURE__ */ jsx("div", { ref: floatRef, className: "bl-ok-layer", style: { ...floatStyle, ...width ? { "--ok-w": `${width}px` } : null, ...style }, children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: panelRef,
+          id: `${uid}-pop`,
+          role: "dialog",
+          "aria-label": label,
+          tabIndex: -1,
+          className: `bl-ok-surface bl-ok-float bl-ok-popover ${className}`,
+          "data-state": state,
+          "data-side": placed,
+          children: typeof children === "function" ? children({ close: () => setOpen(false) }) : children
+        }
+      ) }),
+      document.body
+    )
+  ] });
+}
+function Dropdown({ trigger, items = [], label = "Menu", side = "bottom", align = "start", className = "", style }) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const [open, setOpen] = useState(false);
+  const [mounted, state] = usePresence(open, MOTION.fast);
+  const anchorRef = useRef(null);
+  const floatRef = useRef(null);
+  const menuRef = useRef(null);
+  const startAt = useRef("first");
+  const typed = useRef({ text: "", at: 0 });
+  const placed = useFloating(anchorRef, floatRef, mounted, { side, align, offset: 6 });
+  const close = (refocus = true) => {
+    setOpen(false);
+    if (refocus) anchorRef.current?.focus({ preventScroll: true });
+  };
+  useDismiss(open, [anchorRef, floatRef], () => close());
+  const menuItems = () => [...menuRef.current?.querySelectorAll('[role="menuitem"]:not(:disabled)') ?? []];
+  useEffect(() => {
+    if (!open || !mounted) return;
+    const list = menuItems();
+    (startAt.current === "last" ? list[list.length - 1] : list[0])?.focus({ preventScroll: true });
+  }, [open, mounted]);
+  const onMenuKey = (event) => {
+    const list = menuItems();
+    const index = list.indexOf(document.activeElement);
+    const move = (to) => {
+      event.preventDefault();
+      list[(to + list.length) % list.length]?.focus();
+    };
+    if (event.key === "ArrowDown") move(index + 1);
+    else if (event.key === "ArrowUp") move(index - 1);
+    else if (event.key === "Home") move(0);
+    else if (event.key === "End") move(list.length - 1);
+    else if (event.key === "Tab") close(false);
+    else if (event.key.length === 1 && /\S/.test(event.key)) {
+      const now = Date.now();
+      typed.current = { text: (now - typed.current.at < 600 ? typed.current.text : "") + event.key.toLowerCase(), at: now };
+      const match = list.findIndex((el, i) => i > index - (typed.current.text.length > 1 ? 1 : 0) && el.textContent.trim().toLowerCase().startsWith(typed.current.text));
+      const fallback = list.findIndex((el) => el.textContent.trim().toLowerCase().startsWith(typed.current.text));
+      if (match >= 0 || fallback >= 0) move(match >= 0 ? match : fallback);
+    }
+  };
+  const triggerEl = isValidElement(trigger) ? cloneElement(trigger, {
+    ref: mergeRefs(anchorRef, trigger.props.ref),
+    "aria-haspopup": "menu",
+    "aria-expanded": open,
+    "aria-controls": mounted ? `${uid}-menu` : void 0,
+    onClick: (event) => {
+      trigger.props.onClick?.(event);
+      startAt.current = "first";
+      setOpen(!open);
+    },
+    onKeyDown: (event) => {
+      trigger.props.onKeyDown?.(event);
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+        startAt.current = event.key === "ArrowUp" ? "last" : "first";
+        setOpen(true);
+      }
+    }
+  }) : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    triggerEl,
+    mounted && createPortal(
+      /* @__PURE__ */ jsx("div", { ref: floatRef, className: "bl-ok-layer", style: { ...floatStyle, ...style }, children: /* @__PURE__ */ jsx("div", { ref: menuRef, id: `${uid}-menu`, role: "menu", "aria-label": label, className: `bl-ok-surface bl-ok-float bl-ok-menu ${className}`, "data-state": state, "data-side": placed, onKeyDown: onMenuKey, children: items.map((item, i) => {
+        if (item.type === "separator") return /* @__PURE__ */ jsx("div", { className: "bl-ok-sep", role: "separator" }, i);
+        if (item.type === "label")
+          return /* @__PURE__ */ jsx("div", { className: "bl-ok-menu-label", role: "presentation", children: item.label }, i);
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "menuitem",
+            tabIndex: -1,
+            className: "bl-ok-item",
+            disabled: item.disabled,
+            "data-danger": item.danger || void 0,
+            onClick: () => {
+              item.onSelect?.();
+              close();
+            },
+            children: [
+              item.icon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: item.icon }),
+              /* @__PURE__ */ jsx("span", { className: "bl-ok-item__label", children: item.label }),
+              item.shortcut && /* @__PURE__ */ jsx("span", { className: "bl-ok-item__kbd", children: item.shortcut })
+            ]
+          },
+          i
+        );
+      }) }) }),
+      document.body
+    )
+  ] });
+}
+var stdin_default = Dialog;
+export {
+  Dialog,
+  Dropdown,
+  MOTION,
+  Popover,
+  Sheet,
+  Tooltip,
+  stdin_default as default
+};

package/dist/OverlayMenu.d.ts

@@ -0,0 +1,32 @@
+import { type CSSProperties, type MouseEvent as ReactMouseEvent, type ReactNode } from 'react';
+export interface MenuItem {
+    label: string;
+    href?: string;
+    /** A small note at the side. */
+    meta?: ReactNode;
+    onSelect?: (event: ReactMouseEvent<HTMLElement>) => void;
+}
+export interface OverlayMenuProps {
+    items?: MenuItem[];
+    /** Anything under the links. */
+    footer?: ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onNavigate?: (item: MenuItem, event: ReactMouseEvent<HTMLElement>) => void;
+    label?: string;
+    /** Number the links. */
+    numbered?: boolean;
+    /** Maximum link size in px. */
+    fontSize?: number;
+    backgroundColor?: string;
+    textColor?: string;
+    mutedColor?: string;
+    lineColor?: string;
+    chipColor?: string;
+    accentColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function OverlayMenu({ items, footer, open: controlled, defaultOpen, onOpenChange, onNavigate, label, numbered, fontSize, backgroundColor, textColor, mutedColor, lineColor, chipColor, accentColor, fontFamily, className, style }: OverlayMenuProps): import("react").JSX.Element;

package/dist/OverlayMenu.js

@@ -0,0 +1,154 @@
+'use client';
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useInsertionEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+const STYLE_ID = "bl-overlay-menu";
+const CSS = `
+.bl-omenu__toggle { position: relative; z-index: 1801; display: inline-grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 10px; background: var(--bl-chip); color: var(--bl-ink); cursor: pointer; }
+.bl-omenu__toggle:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 2px; }
+.bl-omenu__bars { position: relative; width: 20px; height: 14px; }
+.bl-omenu__bars span { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; transition: transform 240ms steps(4), opacity 160ms steps(2), top 240ms steps(4); }
+.bl-omenu__bars span:nth-child(1) { top: 0; }
+.bl-omenu__bars span:nth-child(2) { top: 6px; }
+.bl-omenu__bars span:nth-child(3) { top: 12px; }
+.bl-omenu__toggle[aria-expanded="true"] .bl-omenu__bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
+.bl-omenu__toggle[aria-expanded="true"] .bl-omenu__bars span:nth-child(2) { opacity: 0; }
+.bl-omenu__toggle[aria-expanded="true"] .bl-omenu__bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }
+.bl-omenu { position: fixed; inset: 0; z-index: 1800; display: grid; grid-template-rows: 1fr auto; overflow-y: auto; padding: 88px max(24px, 6vw) 32px; background: var(--bl-bg); color: var(--bl-ink); font-family: var(--bl-font); clip-path: inset(0 0 0 0); animation: bl-omenu-wipe 420ms steps(8) both; }
+.bl-omenu[data-closing] { animation: bl-omenu-wipe 300ms steps(6) reverse both; }
+.bl-omenu__close { position: absolute; top: 20px; right: max(20px, 5vw); }
+.bl-omenu__list { display: grid; align-content: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
+.bl-omenu__item { opacity: 0; transform: translateY(16px); animation: bl-omenu-drop 360ms cubic-bezier(.2,.9,.3,1.2) forwards; animation-delay: calc(160ms + var(--i) * 55ms); }
+.bl-omenu__link { display: flex; align-items: baseline; gap: 16px; width: 100%; padding: 6px 0; border: 0; background: none; color: inherit; font: inherit; font-size: var(--bl-size); line-height: 1.15; text-align: left; text-decoration: none; cursor: pointer; transition: color 120ms steps(2), transform 160ms steps(3); }
+.bl-omenu__link:hover, .bl-omenu__link:focus-visible { color: var(--bl-accent); transform: translateX(10px); outline: none; }
+.bl-omenu__index { color: var(--bl-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
+.bl-omenu__meta { margin-left: auto; color: var(--bl-muted); font-size: 14px; }
+.bl-omenu__foot { padding-top: 24px; border-top: 1px solid var(--bl-line); color: var(--bl-muted); font-size: 14px; opacity: 0; animation: bl-omenu-drop 360ms ease forwards; animation-delay: calc(200ms + var(--n) * 55ms); }
+@keyframes bl-omenu-wipe { from { clip-path: inset(0 0 100% 0); } }
+@keyframes bl-omenu-drop { to { opacity: 1; transform: none; } }
+@media (prefers-reduced-motion: reduce) { .bl-omenu, .bl-omenu[data-closing], .bl-omenu__item, .bl-omenu__foot { animation: none; opacity: 1; transform: none; } .bl-omenu__bars span { transition: none; } }
+`;
+function useStyles() {
+  useInsertionEffect(() => {
+    if (typeof document === "undefined") return;
+    const style = document.getElementById(STYLE_ID) ?? Object.assign(document.createElement("style"), { id: STYLE_ID });
+    style.textContent = CSS;
+    if (!style.isConnected) document.head.appendChild(style);
+  }, []);
+}
+const Bars = () => /* @__PURE__ */ jsxs("span", { className: "bl-omenu__bars", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("span", {}),
+  /* @__PURE__ */ jsx("span", {}),
+  /* @__PURE__ */ jsx("span", {})
+] });
+function OverlayMenu({
+  items = [],
+  footer,
+  open: controlled,
+  defaultOpen = false,
+  onOpenChange,
+  onNavigate,
+  label = "Menu",
+  numbered = true,
+  fontSize = 44,
+  backgroundColor = "#1a1c2c",
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  lineColor = "#333c57",
+  chipColor = "rgba(255,255,255,0.08)",
+  accentColor = "#ffcd75",
+  fontFamily = "inherit",
+  className = "",
+  style
+}) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const [inner, setInner] = useState(defaultOpen);
+  const open = controlled ?? inner;
+  const [mounted, setMounted] = useState(open);
+  const [closing, setClosing] = useState(false);
+  const toggleRef = useRef(null);
+  const panelRef = useRef(null);
+  const setOpen = (next) => {
+    if (controlled === void 0) setInner(next);
+    onOpenChange?.(next);
+  };
+  useEffect(() => {
+    if (open) {
+      setMounted(true);
+      setClosing(false);
+      return void 0;
+    }
+    if (!mounted) return void 0;
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    setClosing(true);
+    const id = setTimeout(() => {
+      setMounted(false);
+      setClosing(false);
+    }, reduced ? 0 : 300);
+    return () => clearTimeout(id);
+  }, [open]);
+  useEffect(() => {
+    if (!open || !mounted) return void 0;
+    const panel = panelRef.current;
+    const toggle = toggleRef.current;
+    const focusables = () => [...panel.querySelectorAll('a[href], button, [tabindex]:not([tabindex="-1"])')];
+    focusables()[1]?.focus();
+    const onKey = (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        setOpen(false);
+        toggle?.focus();
+      } else if (event.key === "Tab") {
+        const list = focusables();
+        const first = list[0];
+        const last = list[list.length - 1];
+        if (event.shiftKey && document.activeElement === first) {
+          event.preventDefault();
+          last.focus();
+        } else if (!event.shiftKey && document.activeElement === last) {
+          event.preventDefault();
+          first.focus();
+        }
+      }
+    };
+    const overflow = document.documentElement.style.overflow;
+    document.documentElement.style.overflow = "hidden";
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.documentElement.style.overflow = overflow;
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open, mounted]);
+  const vars = { "--bl-size": `clamp(26px, 6vw, ${fontSize}px)`, "--bl-bg": backgroundColor, "--bl-ink": textColor, "--bl-muted": mutedColor, "--bl-line": lineColor, "--bl-chip": chipColor, "--bl-accent": accentColor, "--bl-font": fontFamily };
+  const choose = (item, event) => {
+    item.onSelect?.(event);
+    onNavigate?.(item, event);
+    setOpen(false);
+    toggleRef.current?.focus();
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("button", { ref: toggleRef, type: "button", className: `bl-omenu__toggle ${className}`, "aria-expanded": open, "aria-controls": `${uid}-menu`, "aria-label": open ? `Close ${label}` : `Open ${label}`, onClick: () => setOpen(!open), style: { ...vars, ...style }, children: /* @__PURE__ */ jsx(Bars, {}) }),
+    mounted && typeof document !== "undefined" && createPortal(
+      /* @__PURE__ */ jsxs("div", { ref: panelRef, id: `${uid}-menu`, className: "bl-omenu", role: "dialog", "aria-modal": "true", "aria-label": label, "data-closing": closing || void 0, style: { ...vars, "--n": items.length }, children: [
+        /* @__PURE__ */ jsx("button", { type: "button", className: "bl-omenu__toggle bl-omenu__close", "aria-expanded": "true", "aria-label": `Close ${label}`, onClick: () => {
+          setOpen(false);
+          toggleRef.current?.focus();
+        }, children: /* @__PURE__ */ jsx(Bars, {}) }),
+        /* @__PURE__ */ jsx("nav", { "aria-label": label, children: /* @__PURE__ */ jsx("ul", { className: "bl-omenu__list", children: items.map((item, i) => {
+          const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+            numbered && /* @__PURE__ */ jsx("span", { className: "bl-omenu__index", children: String(i + 1).padStart(2, "0") }),
+            /* @__PURE__ */ jsx("span", { children: item.label }),
+            item.meta && /* @__PURE__ */ jsx("span", { className: "bl-omenu__meta", children: item.meta })
+          ] });
+          return /* @__PURE__ */ jsx("li", { className: "bl-omenu__item", style: { "--i": i }, children: item.href ? /* @__PURE__ */ jsx("a", { className: "bl-omenu__link", href: item.href, onClick: (event) => choose(item, event), children: content }) : /* @__PURE__ */ jsx("button", { type: "button", className: "bl-omenu__link", onClick: (event) => choose(item, event), children: content }) }, item.label);
+        }) }) }),
+        footer && /* @__PURE__ */ jsx("div", { className: "bl-omenu__foot", children: footer })
+      ] }),
+      document.body
+    )
+  ] });
+}
+export {
+  OverlayMenu as default
+};