@efolusi/meridian 1.5.0

package/overlay/ContextMenu.js

@@ -0,0 +1,140 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { injectEfCss } from "../forms/Button.js";
+import { Portal } from "./Portal.js";
+import { Icon } from "../icons/Icon.js";
+const CSS = `
+.ef-ctx__panel{position:fixed;min-width:190px;background:var(--surface-card);border:1px solid var(--border-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:4px;z-index:var(--z-dropdown);animation:ef-ctx-in var(--dur-fast) var(--ease-out)}
+@keyframes ef-ctx-in{from{opacity:0;transform:scale(.98)}}
+.ef-ctx__item{display:flex;align-items:center;gap:9px;width:100%;height:32px;padding:0 10px;border:none;border-radius:var(--radius-sm);background:none;cursor:pointer;text-align:left;font-family:var(--font-sans);font-size:var(--text-sm);color:var(--text-primary);transition:background var(--dur-fast) var(--ease-out)}
+.ef-ctx__item:hover:not(:disabled){background:var(--surface-sunken)}
+.ef-ctx__item:disabled{opacity:.4;cursor:not-allowed}
+.ef-ctx__item--danger{color:var(--danger-600)}
+.ef-ctx__item__icon{color:var(--text-muted);display:inline-flex}
+.ef-ctx__item--danger .ef-ctx__item__icon{color:var(--danger-600)}
+.ef-ctx__sep{height:1px;background:var(--border-default);margin:4px 6px}
+.ef-ctx__kbd{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--text-muted)}
+`;
+export function ContextMenu({
+  items,
+  onSelect,
+  children,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-ctx', CSS);
+  const [pos, setPos] = React.useState(null);
+  const panelRef = React.useRef(null);
+  const focusItem = which => {
+    const panel = panelRef.current;
+    const nodes = panel ? Array.from(panel.querySelectorAll('[role="menuitem"]:not(:disabled)')) : [];
+    if (!nodes.length) return;
+    const i = nodes.indexOf(document.activeElement);
+    const next = which === 'first' ? 0 : which === 'last' ? nodes.length - 1 : (i + which + nodes.length) % nodes.length;
+    nodes[next].focus();
+  };
+  // A fixed panel still escapes overflow, but nothing kept it inside the viewport:
+  // right-clicking near the bottom or right edge pushed items off-screen.
+  React.useLayoutEffect(() => {
+    const panel = panelRef.current;
+    if (!pos || !panel) return;
+    const r = panel.getBoundingClientRect();
+    const vw = document.documentElement.clientWidth,
+      vh = document.documentElement.clientHeight,
+      edge = 8;
+    const x = Math.max(edge, Math.min(pos.x, vw - r.width - edge));
+    const y = Math.max(edge, Math.min(pos.y, vh - r.height - edge));
+    if (x !== pos.x || y !== pos.y) setPos({
+      x,
+      y
+    });
+  }, [pos]);
+  const onPanelKey = e => {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      focusItem(1);
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      focusItem(-1);
+    } else if (e.key === 'Home') {
+      e.preventDefault();
+      focusItem('first');
+    } else if (e.key === 'End') {
+      e.preventDefault();
+      focusItem('last');
+    } else if (e.key.length === 1 && /\S/.test(e.key) && !e.metaKey && !e.ctrlKey && !e.altKey) {
+      const nodes = panelRef.current ? Array.from(panelRef.current.querySelectorAll('[role="menuitem"]:not(:disabled)')) : [];
+      const cur = nodes.indexOf(document.activeElement),
+        ch = e.key.toLowerCase();
+      for (let k = 1; k <= nodes.length; k++) {
+        const n = nodes[(cur + k) % nodes.length];
+        if ((n.textContent || '').trim().toLowerCase().startsWith(ch)) {
+          e.preventDefault();
+          n.focus();
+          break;
+        }
+      }
+    }
+  };
+  React.useEffect(() => {
+    if (!pos) return;
+    const first = panelRef.current && panelRef.current.querySelector('[role="menuitem"]:not(:disabled)');
+    if (first) first.focus();
+    const close = () => setPos(null);
+    const key = e => {
+      if (e.key === 'Escape') close();
+    };
+    document.addEventListener('mousedown', close);
+    document.addEventListener('keydown', key);
+    window.addEventListener('blur', close);
+    return () => {
+      document.removeEventListener('mousedown', close);
+      document.removeEventListener('keydown', key);
+      window.removeEventListener('blur', close);
+    };
+  }, [pos]);
+  const openAt = e => {
+    e.preventDefault();
+    setPos({
+      x: e.clientX,
+      y: e.clientY
+    });
+  };
+  return /*#__PURE__*/React.createElement("span", _extends({}, rest, {
+    className: className,
+    style: style,
+    onContextMenu: openAt
+  }), children, pos ? /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement("div", {
+    role: "menu",
+    ref: panelRef,
+    onKeyDown: onPanelKey,
+    className: "ef-ctx__panel",
+    style: {
+      left: pos.x,
+      top: pos.y
+    },
+    onMouseDown: e => e.stopPropagation()
+  }, items.map((it, i) => it === 'separator' ? /*#__PURE__*/React.createElement("div", {
+    key: 's' + i,
+    className: "ef-ctx__sep"
+  }) : /*#__PURE__*/React.createElement("button", {
+    key: it.id,
+    type: "button",
+    role: "menuitem",
+    disabled: it.disabled,
+    className: `ef-ctx__item${it.danger ? ' ef-ctx__item--danger' : ''}`,
+    onClick: () => {
+      setPos(null);
+      if (onSelect) onSelect(it.id);
+      if (it.onClick) it.onClick();
+    }
+  }, it.icon ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-ctx__item__icon"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: it.icon,
+    size: 15
+  })) : null, it.label, it.kbd ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-ctx__kbd"
+  }, it.kbd) : null)))) : null);
+}

package/overlay/Drawer.d.ts

@@ -0,0 +1,14 @@
+export interface DrawerProps {
+  open: boolean;
+  /** Called on ✕, ESC, or overlay click */
+  onClose?: () => void;
+  title: React.ReactNode;
+  /** Right-aligned action row on sunken strip */
+  footer?: React.ReactNode;
+  /** Px @default 400 */
+  width?: number;
+  /** @default 'right' */
+  side?: 'left' | 'right';
+  children?: React.ReactNode;
+}
+export declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLDivElement>>;

package/overlay/Drawer.js

@@ -0,0 +1,99 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { IconButton } from "../forms/IconButton.js";
+import { injectEfCss, mergeRefs } from "../forms/Button.js";
+const CSS = `
+.ef-drawer__overlay{position:fixed;inset:0;background:var(--overlay-scrim);z-index:var(--z-overlay);animation:ef-fade-in var(--dur-med) var(--ease-out)}
+@keyframes ef-fade-in{from{opacity:0}}
+.ef-drawer{position:fixed;top:0;bottom:0;background:var(--surface-card);z-index:var(--z-modal);display:flex;flex-direction:column;box-shadow:var(--shadow-pop)}
+.ef-drawer:focus{outline:none}
+.ef-drawer--right{right:0;border-left:1px solid var(--border-default);animation:ef-drawer-r var(--dur-slow) var(--ease-out)}
+.ef-drawer--left{left:0;border-right:1px solid var(--border-default);animation:ef-drawer-l var(--dur-slow) var(--ease-out)}
+@keyframes ef-drawer-r{from{transform:translateX(24px);opacity:0}}
+@keyframes ef-drawer-l{from{transform:translateX(-24px);opacity:0}}
+.ef-drawer__head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border-default)}
+.ef-drawer__title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-bold);letter-spacing:var(--tracking-tight);flex:1}
+.ef-drawer__body{flex:1;overflow-y:auto;padding:20px}
+.ef-drawer__foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--border-default);background:var(--surface-subtle)}
+`;
+const FOCUSABLE = 'button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])';
+export const Drawer = /*#__PURE__*/React.forwardRef(function Drawer({
+  open,
+  onClose,
+  title,
+  footer,
+  width = 400,
+  side = 'right',
+  children,
+  ...rest
+}, ref) {
+  injectEfCss('ef-css-drawer', CSS);
+  const panelRef = React.useRef(null);
+  const prevFocus = React.useRef(null);
+  const titleId = React.useId();
+  React.useEffect(() => {
+    if (!open) return;
+    prevFocus.current = document.activeElement;
+    const panel = panelRef.current;
+    const first = panel && panel.querySelector(FOCUSABLE);
+    (first || panel).focus();
+    return () => {
+      if (prevFocus.current && prevFocus.current.focus) prevFocus.current.focus();
+    };
+  }, [open]);
+  React.useEffect(() => {
+    if (!open) return;
+    const key = e => {
+      if (e.key === 'Escape') {
+        if (onClose) onClose();
+        return;
+      }
+      if (e.key !== 'Tab') return;
+      const panel = panelRef.current;
+      const f = panel ? Array.from(panel.querySelectorAll(FOCUSABLE)).filter(el => !el.disabled) : [];
+      if (!f.length) {
+        e.preventDefault();
+        return;
+      }
+      const i = f.indexOf(document.activeElement);
+      if (e.shiftKey && i <= 0) {
+        e.preventDefault();
+        f[f.length - 1].focus();
+      } else if (!e.shiftKey && (i === -1 || i === f.length - 1)) {
+        e.preventDefault();
+        f[0].focus();
+      }
+    };
+    document.addEventListener('keydown', key);
+    return () => document.removeEventListener('keydown', key);
+  }, [open, onClose]);
+  if (!open) return null;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "ef-drawer__overlay",
+    onMouseDown: onClose
+  }), /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: `ef-drawer ef-drawer--${side}`,
+    role: "dialog",
+    "aria-modal": "true",
+    ref: mergeRefs(ref, panelRef),
+    tabIndex: -1,
+    "aria-labelledby": title ? titleId : undefined,
+    style: {
+      width
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "ef-drawer__head"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ef-drawer__title",
+    id: titleId
+  }, title), onClose ? /*#__PURE__*/React.createElement(IconButton, {
+    icon: "x",
+    label: "Close",
+    size: "sm",
+    onClick: onClose
+  }) : null), /*#__PURE__*/React.createElement("div", {
+    className: "ef-drawer__body"
+  }, children), footer ? /*#__PURE__*/React.createElement("div", {
+    className: "ef-drawer__foot"
+  }, footer) : null));
+});

package/overlay/HoverCard.d.ts

@@ -0,0 +1,17 @@
+export interface HoverCardProps {
+  /** Hover / focus target */
+  trigger: React.ReactNode;
+  /** Panel contents */
+  children: React.ReactNode;
+  /** @default 'bottom' */
+  side?: 'top' | 'bottom';
+  /** Ms before opening @default 350 */
+  openDelay?: number;
+  /** Ms before closing @default 150 */
+  closeDelay?: number;
+  /** Panel width px @default 300 */
+  width?: number;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function HoverCard(props: HoverCardProps): React.JSX.Element;

package/overlay/HoverCard.js

@@ -0,0 +1,74 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { injectEfCss } from "../forms/Button.js";
+import { Portal, useAnchoredStyle } from "./Portal.js";
+const CSS = `
+.ef-hovercard{position:relative;display:inline-flex}
+.ef-hovercard__trigger{display:inline-flex;border-radius:var(--radius-sm)}
+.ef-hovercard__trigger:focus-visible{outline:none;box-shadow:var(--focus-ring)}
+.ef-hovercard__panel{position:absolute;left:0;background:var(--surface-card);border:1px solid var(--border-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:14px;z-index:var(--z-popover);animation:ef-hovercard-in var(--dur-med) var(--ease-out)}
+.ef-hovercard__panel--bottom{top:calc(100% + 8px)}
+.ef-hovercard__panel--top{bottom:calc(100% + 8px)}
+@keyframes ef-hovercard-in{from{opacity:0;transform:translateY(2px)}}
+`;
+export function HoverCard({
+  trigger,
+  side = 'bottom',
+  openDelay = 350,
+  closeDelay = 150,
+  width = 300,
+  children,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-hovercard', CSS);
+  const [open, setOpen] = React.useState(false);
+  const t = React.useRef(null);
+  const ref = React.useRef(null);
+  const panelRef = React.useRef(null);
+  const {
+    style: anchored
+  } = useAnchoredStyle(ref, panelRef, {
+    open,
+    placement: side === 'top' ? 'top' : 'bottom',
+    align: 'start',
+    offset: 8
+  });
+  const enter = () => {
+    clearTimeout(t.current);
+    t.current = setTimeout(() => setOpen(true), openDelay);
+  };
+  const leave = () => {
+    clearTimeout(t.current);
+    t.current = setTimeout(() => setOpen(false), closeDelay);
+  };
+  React.useEffect(() => () => clearTimeout(t.current), []);
+  return /*#__PURE__*/React.createElement("span", _extends({}, rest, {
+    ref: ref,
+    className: `ef-hovercard${className ? ' ' + className : ''}`,
+    style: style,
+    onMouseEnter: enter,
+    onMouseLeave: leave,
+    onKeyDown: e => {
+      if (e.key === 'Escape') {
+        clearTimeout(t.current);
+        setOpen(false);
+      }
+    }
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "ef-hovercard__trigger",
+    tabIndex: 0,
+    onFocus: () => setOpen(true),
+    onBlur: () => setOpen(false)
+  }, trigger), open ? /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement("div", {
+    ref: panelRef,
+    onMouseEnter: enter,
+    onMouseLeave: leave,
+    className: `ef-hovercard__panel ef-hovercard__panel--${side}`,
+    style: {
+      ...anchored,
+      width
+    }
+  }, children)) : null);
+}

package/overlay/Menu.d.ts

@@ -0,0 +1,24 @@
+export interface MenuItem {
+  id: string;
+  label: React.ReactNode;
+  /** Lucide icon name */
+  icon?: string;
+  /** Red destructive styling */
+  danger?: boolean;
+  disabled?: boolean;
+  /** Shortcut hint, e.g. "⌘D" */
+  kbd?: string;
+  onClick?: () => void;
+}
+export interface MenuProps {
+  /** The element that toggles the menu (Button, IconButton, …) */
+  trigger: React.ReactNode;
+  /** Items; the string 'separator' inserts a rule */
+  items: Array<MenuItem | 'separator'>;
+  onSelect?: (id: string) => void;
+  /** Panel edge alignment @default 'left' */
+  align?: 'left' | 'right';
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLSpanElement>>;

package/overlay/Menu.js

@@ -0,0 +1,153 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { Icon } from "../icons/Icon.js";
+import { injectEfCss, mergeRefs } from "../forms/Button.js";
+import { Portal, useAnchoredStyle } from "./Portal.js";
+const CSS = `
+.ef-menu{position:relative;display:inline-flex}
+.ef-menu__panel{position:absolute;top:calc(100% + 6px);min-width:190px;background:var(--surface-card);border:1px solid var(--border-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:4px;z-index:var(--z-dropdown);animation:ef-menu-in var(--dur-fast) var(--ease-out)}
+.ef-menu__panel--left{left:0}
+.ef-menu__panel--right{right:0}
+@keyframes ef-menu-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}
+.ef-menu__item{display:flex;align-items:center;gap:9px;width:100%;height:32px;padding:0 10px;border:none;border-radius:var(--radius-sm);background:none;cursor:pointer;text-align:left;font-family:var(--font-sans);font-size:var(--text-sm);color:var(--text-primary);transition:background var(--dur-fast) var(--ease-out)}
+.ef-menu__item:hover:not(:disabled){background:var(--surface-sunken)}
+.ef-menu__item:focus-visible{outline:none;box-shadow:var(--focus-ring)}
+.ef-menu__item:disabled{opacity:.4;cursor:not-allowed}
+.ef-menu__item--danger{color:var(--danger-600)}
+.ef-menu__item__icon{color:var(--text-muted);display:inline-flex}
+.ef-menu__item--danger .ef-menu__item__icon{color:var(--danger-600)}
+.ef-menu__sep{height:1px;background:var(--border-default);margin:4px 6px}
+.ef-menu__kbd{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--text-muted)}
+`;
+export const Menu = /*#__PURE__*/React.forwardRef(function Menu({
+  trigger,
+  items,
+  onSelect,
+  align = 'left',
+  style,
+  className,
+  ...rest
+}, fRef) {
+  injectEfCss('ef-css-menu', CSS);
+  const [open, setOpen] = React.useState(false);
+  const ref = React.useRef(null);
+  const panelRef = React.useRef(null);
+  const {
+    style: anchored
+  } = useAnchoredStyle(ref, panelRef, {
+    open,
+    placement: 'bottom',
+    align: align === 'right' ? 'end' : 'start'
+  });
+  const focusItem = which => {
+    const panel = panelRef.current;
+    const nodes = panel ? Array.from(panel.querySelectorAll('[role="menuitem"]:not(:disabled)')) : [];
+    if (!nodes.length) return;
+    const i = nodes.indexOf(document.activeElement);
+    const next = which === 'first' ? 0 : which === 'last' ? nodes.length - 1 : (i + which + nodes.length) % nodes.length;
+    nodes[next].focus();
+  };
+  const restoreFocus = () => {
+    const t = ref.current && ref.current.querySelector('button,[href],[tabindex]');
+    if (t) t.focus();
+  };
+  const close = restore => {
+    setOpen(false);
+    if (restore) restoreFocus();
+  };
+  React.useEffect(() => {
+    if (!open) return;
+    focusItem('first');
+    // the panel is portaled, so "outside" means outside the trigger AND the panel
+    const away = e => {
+      const inTrigger = ref.current && ref.current.contains(e.target);
+      const inPanel = panelRef.current && panelRef.current.contains(e.target);
+      if (!inTrigger && !inPanel) setOpen(false);
+    };
+    document.addEventListener('mousedown', away);
+    return () => document.removeEventListener('mousedown', away);
+  }, [open]);
+  const onTriggerKey = e => {
+    if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
+      e.preventDefault();
+      setOpen(true);
+    } else if (e.key === 'Escape' && open) close(true);
+  };
+  const triggerProps = {
+    onClick: e => {
+      if (/*#__PURE__*/React.isValidElement(trigger) && trigger.props.onClick) trigger.props.onClick(e);
+      setOpen(o => !o);
+    },
+    onKeyDown: onTriggerKey,
+    'aria-haspopup': 'menu',
+    'aria-expanded': open
+  };
+  const onPanelKey = e => {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      close(true);
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      focusItem(1);
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      focusItem(-1);
+    } else if (e.key === 'Home') {
+      e.preventDefault();
+      focusItem('first');
+    } else if (e.key === 'End') {
+      e.preventDefault();
+      focusItem('last');
+    } else if (e.key === 'Tab') close(false);else if (e.key.length === 1 && /\S/.test(e.key) && !e.metaKey && !e.ctrlKey && !e.altKey) {
+      const panel = panelRef.current;
+      const nodes = panel ? Array.from(panel.querySelectorAll('[role="menuitem"]:not(:disabled)')) : [];
+      const cur = nodes.indexOf(document.activeElement);
+      const ch = e.key.toLowerCase();
+      for (let k = 1; k <= nodes.length; k++) {
+        const n = nodes[(cur + k) % nodes.length];
+        if ((n.textContent || '').trim().toLowerCase().startsWith(ch)) {
+          e.preventDefault();
+          n.focus();
+          break;
+        }
+      }
+    }
+  };
+  return /*#__PURE__*/React.createElement("span", _extends({}, rest, {
+    ref: mergeRefs(fRef, ref),
+    className: `ef-menu${className ? ' ' + className : ''}`,
+    style: style
+  }), /*#__PURE__*/React.isValidElement(trigger) ? /*#__PURE__*/React.cloneElement(trigger, triggerProps) : /*#__PURE__*/React.createElement("span", _extends({
+    role: "button",
+    tabIndex: 0,
+    style: {
+      display: 'inline-flex'
+    }
+  }, triggerProps), trigger), open && /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement("div", {
+    role: "menu",
+    ref: panelRef,
+    onKeyDown: onPanelKey,
+    style: anchored,
+    className: `ef-menu__panel ef-menu__panel--${align}`
+  }, items.map((it, i) => it === 'separator' ? /*#__PURE__*/React.createElement("div", {
+    key: 's' + i,
+    className: "ef-menu__sep"
+  }) : /*#__PURE__*/React.createElement("button", {
+    key: it.id,
+    role: "menuitem",
+    disabled: it.disabled,
+    className: `ef-menu__item${it.danger ? ' ef-menu__item--danger' : ''}`,
+    onClick: () => {
+      close(true);
+      if (onSelect) onSelect(it.id);
+      if (it.onClick) it.onClick();
+    }
+  }, it.icon ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-menu__item__icon"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: it.icon,
+    size: 15
+  })) : null, it.label, it.kbd ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-menu__kbd"
+  }, it.kbd) : null)))));
+});

package/overlay/Popover.d.ts

@@ -0,0 +1,16 @@
+export interface PopoverProps {
+  /** The element that toggles the popover */
+  trigger: React.ReactNode;
+  /** Panel content */
+  children?: React.ReactNode;
+  /** @default 'left' */
+  align?: 'left' | 'right';
+  /** Panel width @default 280 */
+  width?: number;
+  /** Controlled open state */
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLSpanElement>>;

package/overlay/Popover.js

@@ -0,0 +1,96 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { injectEfCss, mergeRefs } from "../forms/Button.js";
+import { Portal, useAnchoredStyle } from "./Portal.js";
+const CSS = `
+.ef-popover{position:relative;display:inline-flex}
+.ef-popover__panel{position:absolute;top:calc(100% + 8px);width:280px;background:var(--surface-card);border:1px solid var(--border-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:14px;z-index:var(--z-dropdown);animation:ef-pop-in var(--dur-fast) var(--ease-out)}
+.ef-popover__panel--left{left:0}
+.ef-popover__panel--right{right:0}
+@keyframes ef-pop-in{from{opacity:0;transform:translateY(-3px)}}
+`;
+export const Popover = /*#__PURE__*/React.forwardRef(function Popover({
+  trigger,
+  children,
+  align = 'left',
+  width = 280,
+  open: controlled,
+  onOpenChange,
+  style,
+  className,
+  ...rest
+}, fRef) {
+  injectEfCss('ef-css-popover', CSS);
+  const [inner, setInner] = React.useState(false);
+  const open = controlled != null ? controlled : inner;
+  const setOpen = v => {
+    if (controlled == null) setInner(v);
+    if (onOpenChange) onOpenChange(v);
+  };
+  const ref = React.useRef(null);
+  const panelRef = React.useRef(null);
+  const {
+    style: anchored
+  } = useAnchoredStyle(ref, panelRef, {
+    open,
+    placement: 'bottom',
+    align: align === 'right' ? 'end' : 'start',
+    offset: 8
+  });
+  const restoreFocus = () => {
+    const t = ref.current && ref.current.querySelector('button,[href],[tabindex]');
+    if (t) t.focus();
+  };
+  React.useEffect(() => {
+    if (!open) return;
+    const away = e => {
+      const inTrigger = ref.current && ref.current.contains(e.target);
+      const inPanel = panelRef.current && panelRef.current.contains(e.target);
+      if (!inTrigger && !inPanel) setOpen(false);
+    };
+    const key = e => {
+      if (e.key === 'Escape') {
+        setOpen(false);
+        restoreFocus();
+      }
+    };
+    document.addEventListener('mousedown', away);
+    document.addEventListener('keydown', key);
+    return () => {
+      document.removeEventListener('mousedown', away);
+      document.removeEventListener('keydown', key);
+    };
+  }, [open]);
+  const triggerProps = {
+    onClick: e => {
+      if (/*#__PURE__*/React.isValidElement(trigger) && trigger.props.onClick) trigger.props.onClick(e);
+      setOpen(!open);
+    },
+    onKeyDown: e => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        setOpen(!open);
+      }
+    },
+    'aria-haspopup': 'dialog',
+    'aria-expanded': open
+  };
+  return /*#__PURE__*/React.createElement("span", _extends({}, rest, {
+    ref: mergeRefs(fRef, ref),
+    className: `ef-popover${className ? ' ' + className : ''}`,
+    style: style
+  }), /*#__PURE__*/React.isValidElement(trigger) ? /*#__PURE__*/React.cloneElement(trigger, triggerProps) : /*#__PURE__*/React.createElement("span", _extends({
+    role: "button",
+    tabIndex: 0,
+    style: {
+      display: 'inline-flex'
+    }
+  }, triggerProps), trigger), open && /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement("div", {
+    ref: panelRef,
+    className: `ef-popover__panel ef-popover__panel--${align}`,
+    style: {
+      ...anchored,
+      width
+    }
+  }, children)));
+});

package/overlay/Portal.d.ts

@@ -0,0 +1,10 @@
+export interface PortalProps {
+  children?: React.ReactNode;
+  /** Where to mount. @default document.body */
+  container?: HTMLElement;
+}
+/**
+ * Render children outside the current DOM subtree so they cannot be clipped by
+ * an ancestor's overflow. Used by every floating surface in the system.
+ */
+export declare function Portal(props: PortalProps): React.JSX.Element | null;