@rtzll/reflow 0.3.0 → 0.5.0

package/dist/drawer.js

@@ -0,0 +1,228 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "remix/component/jsx-runtime";
+import { on, ref } from 'remix/component';
+import { Button } from './basic.js';
+import { Icon } from './icon.js';
+// A release past this share of the panel's size, or faster than this many
+// pixels per millisecond, closes it; anything less springs back.
+const closeShare = 0.25;
+const flickVelocity = 0.4;
+const interactive = 'button, a, input, select, textarea, label, [contenteditable], [role="slider"]';
+/**
+ * A panel that slides in from an edge of the screen, for navigation on small
+ * screens, filters, details or a short task. It is a modal dialog built on
+ * the native element, like Dialog: it traps focus, closes on Escape or a
+ * click on the backdrop, and returns focus to its trigger. It follows a drag
+ * toward its edge and closes past a quarter of its size or on a quick flick;
+ * a drag the other way resists.
+ */
+export function Drawer(handle) {
+    let dialog = null;
+    let invoker = null;
+    let internalOpen = handle.props.defaultOpen ?? false;
+    let pressedBackdrop = false;
+    let drag;
+    const id = handle.id;
+    const titleId = `${id}-title`;
+    const descriptionId = `${id}-description`;
+    const open = () => handle.props.open ?? internalOpen;
+    const side = () => handle.props.side ?? 'bottom';
+    const dismissible = () => handle.props.dismissible ?? true;
+    function requestOpen(next) {
+        if (open() === next)
+            return;
+        internalOpen = next;
+        handle.props.onOpenChange?.(next);
+        void handle.update();
+    }
+    function close() {
+        requestOpen(false);
+    }
+    function sync() {
+        if (!dialog?.isConnected || dialog.open === open())
+            return;
+        if (open()) {
+            setDrag(dialog, 0);
+            dialog.showModal();
+        }
+        else
+            dialog.close();
+    }
+    function setDrag(element, offset, size = 1) {
+        element.style.setProperty('--rf-drawer-drag', `${Math.round(offset)}px`);
+        element.style.setProperty('--rf-drawer-progress', String(Math.min(1, Math.max(0, offset / size))));
+    }
+    function outsidePanel(event, element) {
+        if (event.target !== element)
+            return false;
+        const rect = element.getBoundingClientRect();
+        return (event.clientX < rect.left ||
+            event.clientX > rect.right ||
+            event.clientY < rect.top ||
+            event.clientY > rect.bottom);
+    }
+    // Whether the content under the pointer would scroll instead: a drag
+    // toward the edge belongs to a scroller that is not at its start.
+    function scrollsFirst(target, element) {
+        const vertical = side() === 'bottom' || side() === 'top';
+        for (let node = target; node; node = node.parentElement) {
+            if (node instanceof HTMLElement) {
+                const style = getComputedStyle(node);
+                const overflow = vertical ? style.overflowY : style.overflowX;
+                if (/auto|scroll/.test(overflow)) {
+                    if (side() === 'bottom' && node.scrollTop > 0)
+                        return true;
+                    if (side() === 'top' && node.scrollTop + node.clientHeight < node.scrollHeight - 1)
+                        return true;
+                    if (side() === 'right' && node.scrollLeft > 0)
+                        return true;
+                    if (side() === 'left' && node.scrollLeft + node.clientWidth < node.scrollWidth - 1)
+                        return true;
+                }
+            }
+            if (node === element)
+                break;
+        }
+        return false;
+    }
+    // How far the pointer has moved toward the drawer's edge, and across it.
+    function travel(event, start) {
+        const dx = event.clientX - start.x;
+        const dy = event.clientY - start.y;
+        switch (side()) {
+            case 'bottom':
+                return [dy, dx];
+            case 'top':
+                return [-dy, dx];
+            case 'right':
+                return [dx, dy];
+            case 'left':
+                return [-dx, dy];
+        }
+    }
+    function endDrag(event, element) {
+        if (!drag || drag.pointer !== event.pointerId)
+            return;
+        const current = drag;
+        drag = undefined;
+        if (!current.started)
+            return;
+        element.removeAttribute('data-dragging');
+        const now = performance.now();
+        // Held still before letting go, the throw has no speed left.
+        const velocity = now - current.time > 100
+            ? 0
+            : (current.offset - current.previousOffset) /
+                Math.max(1, current.time - current.previousTime);
+        if (current.offset > 0 &&
+            (current.offset > current.size * closeShare || velocity > flickVelocity)) {
+            close();
+            return;
+        }
+        setDrag(element, 0);
+    }
+    const dialogMix = ref((element, signal) => {
+        if (!(element instanceof HTMLDialogElement))
+            return;
+        dialog = element;
+        const options = { signal };
+        element.addEventListener('cancel', (event) => {
+            event.preventDefault();
+            if (dismissible())
+                close();
+        }, options);
+        element.addEventListener('close', () => {
+            if (element.open)
+                return;
+            close();
+            const target = invoker;
+            invoker = null;
+            if (target?.isConnected &&
+                element.ownerDocument.activeElement === element.ownerDocument.body)
+                target.focus({ preventScroll: true });
+        }, options);
+        element.addEventListener('pointerdown', (event) => {
+            pressedBackdrop = outsidePanel(event, element);
+            if (pressedBackdrop || !dismissible() || event.button !== 0)
+                return;
+            const target = event.target;
+            if (!(target instanceof Element) || target.closest(interactive))
+                return;
+            if (scrollsFirst(target, element))
+                return;
+            const rect = element.getBoundingClientRect();
+            const now = performance.now();
+            drag = {
+                pointer: event.pointerId,
+                x: event.clientX,
+                y: event.clientY,
+                started: false,
+                offset: 0,
+                size: side() === 'bottom' || side() === 'top' ? rect.height : rect.width,
+                time: now,
+                previousTime: now,
+                previousOffset: 0,
+            };
+        }, options);
+        element.addEventListener('pointermove', (event) => {
+            if (!drag || drag.pointer !== event.pointerId)
+                return;
+            const [along, across] = travel(event, drag);
+            if (!drag.started) {
+                if (Math.abs(along) < 4 && Math.abs(across) < 4)
+                    return;
+                // Sideways first, it is a selection or a scroll, not a drag.
+                if (Math.abs(across) > Math.abs(along)) {
+                    drag = undefined;
+                    return;
+                }
+                drag.started = true;
+                element.setAttribute('data-dragging', '');
+                try {
+                    element.setPointerCapture(event.pointerId);
+                }
+                catch {
+                    // Synthetic pointers have nothing to capture.
+                }
+            }
+            // Toward the edge it follows the pointer; away from it, it resists.
+            const offset = along >= 0 ? along : along / (1 + Math.abs(along) / 24);
+            drag.previousOffset = drag.offset;
+            drag.previousTime = drag.time;
+            drag.offset = offset;
+            drag.time = performance.now();
+            setDrag(element, offset, drag.size);
+        }, options);
+        element.addEventListener('pointerup', (event) => endDrag(event, element), options);
+        element.addEventListener('pointercancel', (event) => endDrag(event, element), options);
+        element.addEventListener('click', (event) => {
+            if (pressedBackdrop && outsidePanel(event, element) && dismissible())
+                close();
+            pressedBackdrop = false;
+        }, options);
+        signal.addEventListener('abort', () => {
+            if (dialog === element)
+                dialog = null;
+        }, { once: true });
+    });
+    return () => {
+        const props = handle.props;
+        handle.queueTask(sync);
+        const footer = typeof props.footer === 'function' ? props.footer(close) : props.footer;
+        const vertical = side() === 'bottom' || side() === 'top';
+        const showHandle = props.handle ?? (vertical && dismissible());
+        const showClose = props.showCloseButton ?? (!vertical && !props.flush);
+        const triggerProps = {
+            'aria-haspopup': 'dialog',
+            'aria-expanded': open(),
+            'aria-controls': id,
+            mix: on('click', (event) => {
+                if (event.currentTarget instanceof HTMLElement)
+                    invoker = event.currentTarget;
+                requestOpen(true);
+            }),
+        };
+        return (_jsxs(_Fragment, { children: [props.renderTrigger
+                    ? props.renderTrigger(triggerProps)
+                    : props.trigger != null && (_jsx(Button, { variant: props.triggerVariant ?? 'tertiary', size: props.triggerSize, ...triggerProps, children: props.trigger })), _jsxs("dialog", { id: id, class: props.class ? `rf-drawer ${props.class}` : 'rf-drawer', "data-side": side(), "data-flush": props.flush || undefined, "aria-modal": "true", "aria-labelledby": titleId, "aria-describedby": props.description ? descriptionId : undefined, mix: dialogMix, children: [showHandle && _jsx("div", { class: "rf-drawer-handle", "aria-hidden": "true" }), _jsxs("header", { class: "rf-drawer-header", children: [_jsx("h2", { id: titleId, children: props.title }), props.description && _jsx("p", { id: descriptionId, children: props.description })] }), props.children != null && _jsx("div", { class: "rf-drawer-body", children: props.children }), footer != null && _jsx("footer", { class: "rf-drawer-footer", children: footer }), showClose && (_jsx(Button, { variant: "ghost", size: "icon-compact", class: "rf-drawer-close", "aria-label": "Close drawer", mix: on('click', close), children: _jsx(Icon, { name: "x", size: 14 }) }))] })] }));
+    };
+}

package/dist/foundations.css

@@ -198,6 +198,12 @@
   --rf-exit-fast: 60ms ease-out;
   --rf-exit-moderate: 120ms ease-out;
   --rf-exit-slow: 160ms ease-out;
+  /* Piles: QueuedStack and the Toaster share these. Each card behind the
+     front one peeks out by the peek and narrows by the scale step; spread
+     out, cards sit a gap apart. */
+  --rf-stack-peek: 6px;
+  --rf-stack-gap: 5px;
+  --rf-stack-scale-step: 0.035;
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -441,38 +447,45 @@
   position: absolute;
   top: 50%;
   left: 50%;
-  width: var(--rf-control-height);
-  height: var(--rf-control-height);
+  width: var(--rf-icon-size);
+  height: var(--rf-icon-size);
   transform: translate(-50%, -50%);
   pointer-events: none;
 }
 
-.rf-button-spinner path {
-  stroke-dasharray: 15 85;
-  animation:
-    rf-button-spinner 2s linear infinite,
-    rf-button-spinner-dash 4s ease-in-out infinite;
+.rf-button-spinner g {
+  transform-box: fill-box;
+  transform-origin: center;
+  animation: rf-button-spinner-turn 1s cubic-bezier(0.65, 0, 0.35, 1) infinite;
+}
+
+.rf-button-spinner circle {
+  /* A nonzero dash keeps Safari's round caps visible as dots. */
+  stroke-dasharray: 0.01 49.99;
+  stroke-dashoffset: -25;
+  animation: rf-button-spinner-breathe 1s cubic-bezier(0.65, 0, 0.35, 1) infinite;
 }
 
-@keyframes rf-button-spinner {
+@keyframes rf-button-spinner-turn {
   to {
-    stroke-dashoffset: -100;
+    transform: rotate(360deg);
   }
 }
 
-@keyframes rf-button-spinner-dash {
+@keyframes rf-button-spinner-breathe {
   0%,
   100% {
-    stroke-dasharray: 15 85;
+    stroke-dasharray: 0.01 49.99;
+    stroke-dashoffset: -25;
   }
   50% {
-    stroke-dasharray: 40 60;
+    stroke-dasharray: 26 24;
+    stroke-dashoffset: -12;
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .rf-button-spinner path {
-    stroke-dasharray: none;
+  .rf-button-spinner :is(g, circle) {
     animation: none;
   }
 }

package/dist/hover-card.d.ts

@@ -0,0 +1,32 @@
+import { type Handle, type MixInput, type RemixNode } from 'remix/component';
+import type { PopoverPlacement } from './popover.tsx';
+export interface HoverCardTriggerProps {
+    mix: MixInput<HTMLElement>;
+}
+export interface HoverCardProps {
+    /** The card's content. */
+    children?: RemixNode;
+    /** Renders the trigger, usually a link. Spread the provided props onto it. */
+    renderTrigger: (props: HoverCardTriggerProps) => RemixNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Which side of the trigger the card opens on. Default bottom. */
+    placement?: PopoverPlacement;
+    /** Distance from the trigger in pixels. Default 8. */
+    offset?: number;
+    /** Milliseconds the pointer rests on the trigger, or focus stays on it, before the card opens. Default 500. */
+    openDelay?: number;
+    /** Milliseconds after the pointer leaves the trigger and the card before it closes. Default 200. */
+    closeDelay?: number;
+    size?: 'default' | 'compact';
+}
+/**
+ * A preview card for a link or a name, such as a profile or a page, shown
+ * while the pointer rests on its trigger or keyboard focus is on it. It is
+ * supplementary: the trigger still works on its own, a tap on a touch screen
+ * follows it, and the card never takes focus or locks scrolling. The pointer
+ * can cross into the card and use its links; it closes once the pointer has
+ * left both, or on Escape. It shares Popover's surface and motion.
+ */
+export declare function HoverCard(handle: Handle<HoverCardProps>): () => import("remix/component").RemixElement;

package/dist/hover-card.js

@@ -0,0 +1,119 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "remix/component/jsx-runtime";
+import { ref } from 'remix/component';
+import { anchor } from '@remix-run/ui/anchor';
+/**
+ * A preview card for a link or a name, such as a profile or a page, shown
+ * while the pointer rests on its trigger or keyboard focus is on it. It is
+ * supplementary: the trigger still works on its own, a tap on a touch screen
+ * follows it, and the card never takes focus or locks scrolling. The pointer
+ * can cross into the card and use its links; it closes once the pointer has
+ * left both, or on Escape. It shares Popover's surface and motion.
+ */
+export function HoverCard(handle) {
+    let trigger = null;
+    let card = null;
+    let localOpen = handle.props.defaultOpen ?? false;
+    let stopAnchor;
+    let openTimer;
+    let closeTimer;
+    const isOpen = () => handle.props.open ?? localOpen;
+    function setOpen(next) {
+        clearTimeout(openTimer);
+        clearTimeout(closeTimer);
+        if (isOpen() === next)
+            return;
+        localOpen = next;
+        handle.props.onOpenChange?.(next);
+        void handle.update();
+    }
+    function scheduleOpen() {
+        clearTimeout(closeTimer);
+        if (isOpen())
+            return;
+        clearTimeout(openTimer);
+        openTimer = setTimeout(() => setOpen(true), Math.max(0, handle.props.openDelay ?? 500));
+    }
+    function scheduleClose() {
+        clearTimeout(openTimer);
+        clearTimeout(closeTimer);
+        if (!isOpen())
+            return;
+        closeTimer = setTimeout(() => setOpen(false), Math.max(0, handle.props.closeDelay ?? 200));
+    }
+    // Shows or hides the card to match the open state, after each render.
+    function sync() {
+        if (!trigger?.isConnected || !card?.isConnected)
+            return;
+        const showing = card.matches(':popover-open');
+        if (isOpen() && !showing) {
+            card.showPopover?.();
+            stopAnchor = anchor(card, trigger, {
+                placement: handle.props.placement ?? 'bottom',
+                offset: handle.props.offset ?? 8,
+            });
+        }
+        else if (!isOpen() && showing) {
+            stopAnchor?.();
+            stopAnchor = undefined;
+            if (card.contains(document.activeElement))
+                trigger.focus({ preventScroll: true });
+            card.hidePopover?.();
+        }
+    }
+    const triggerMix = ref((element, signal) => {
+        if (!(element instanceof HTMLElement))
+            return;
+        trigger = element;
+        const options = { signal };
+        element.addEventListener('pointerenter', (event) => {
+            if (event.pointerType !== 'touch')
+                scheduleOpen();
+        }, options);
+        element.addEventListener('pointerleave', (event) => {
+            if (event.pointerType !== 'touch')
+                scheduleClose();
+        }, options);
+        element.addEventListener('focus', scheduleOpen, options);
+        element.addEventListener('blur', (event) => {
+            // Tabbing on into the card keeps it open.
+            if (!(event.relatedTarget instanceof Node && card?.contains(event.relatedTarget)))
+                scheduleClose();
+        }, options);
+        element.ownerDocument.addEventListener('keydown', (event) => {
+            if (event.key !== 'Escape' || !isOpen())
+                return;
+            setOpen(false);
+        }, options);
+        signal.addEventListener('abort', () => {
+            clearTimeout(openTimer);
+            clearTimeout(closeTimer);
+            stopAnchor?.();
+            if (trigger === element)
+                trigger = null;
+        }, { once: true });
+    });
+    const cardMix = ref((element, signal) => {
+        if (!(element instanceof HTMLElement))
+            return;
+        card = element;
+        const options = { signal };
+        element.addEventListener('pointerenter', () => clearTimeout(closeTimer), options);
+        element.addEventListener('pointerleave', (event) => {
+            if (event.pointerType !== 'touch')
+                scheduleClose();
+        }, options);
+        element.addEventListener('focusout', (event) => {
+            const next = event.relatedTarget;
+            if (!(next instanceof Node && (element.contains(next) || next === trigger)))
+                scheduleClose();
+        }, options);
+        signal.addEventListener('abort', () => {
+            if (card === element)
+                card = null;
+        }, { once: true });
+    });
+    return () => {
+        handle.queueTask(sync);
+        return (_jsxs(_Fragment, { children: [handle.props.renderTrigger({ mix: triggerMix }), _jsx("div", { class: "rf-menu-surface rf-popover-surface rf-hover-card", popover: "manual", "data-density": handle.props.size, mix: cardMix, children: handle.props.children })] }));
+    };
+}

package/dist/index.d.ts

@@ -10,6 +10,11 @@ export * from './flows.tsx';
 export * from './range-color.tsx';
 export * from './color-picker.tsx';
 export * from './breadcrumb.tsx';
+export * from './segmented-control.tsx';
+export * from './popover.tsx';
+export * from './hover-card.tsx';
+export * from './toaster.tsx';
+export * from './drawer.tsx';
 export * from './systems.ts';
 export * from './queued-stack.tsx';
 export * from './scroll-area.tsx';

package/dist/index.js

@@ -10,6 +10,11 @@ export * from './flows.js';
 export * from './range-color.js';
 export * from './color-picker.js';
 export * from './breadcrumb.js';
+export * from './segmented-control.js';
+export * from './popover.js';
+export * from './hover-card.js';
+export * from './toaster.js';
+export * from './drawer.js';
 export * from './systems.js';
 export * from './queued-stack.js';
 export * from './scroll-area.js';

package/dist/overlays.js

@@ -134,10 +134,14 @@ export function Tooltip(handle) {
         internalOpen = next;
         handle.props.onOpenChange?.(next);
     }
+    function menuIsOpen() {
+        return (trigger?.getAttribute('aria-haspopup') === 'menu' &&
+            trigger.getAttribute('aria-expanded') === 'true');
+    }
     // The tooltip is shown when `open` forces it, otherwise when hover or focus asks for it.
     function sync() {
         const visible = handle.props.open ?? internalOpen;
-        if (visible)
+        if (visible && !menuIsOpen())
             open();
         else
             close();
@@ -150,7 +154,7 @@ export function Tooltip(handle) {
     }
     function show() {
         clearTimeout(hideTimer);
-        if (!trigger?.isConnected || !popup?.isConnected || dismissed)
+        if (!trigger?.isConnected || !popup?.isConnected || dismissed || menuIsOpen())
             return;
         setInternal(true);
         sync();
@@ -199,6 +203,14 @@ export function Tooltip(handle) {
         if (!(element instanceof HTMLElement))
             return;
         trigger = element;
+        if (element.getAttribute('aria-haspopup') === 'menu') {
+            const observer = new MutationObserver(() => {
+                if (menuIsOpen())
+                    hide();
+            });
+            observer.observe(element, { attributeFilter: ['aria-expanded'] });
+            signal.addEventListener('abort', () => observer.disconnect(), { once: true });
+        }
         element.addEventListener('pointerenter', (event) => {
             if (event.pointerType === 'touch')
                 return;

package/dist/popover.css

@@ -0,0 +1,69 @@
+/* Popover: a panel anchored to its trigger. It shares the menu surfaces'
+   elevation and motion: it drops 4px and grows from 96% on the fast spring,
+   toward the trigger's side, and leaves on the fast exit. */
+.rf-popover {
+  display: inline-block;
+  max-inline-size: 100%;
+}
+
+.rf-popover-surface {
+  gap: 12px;
+  inline-size: max-content;
+  min-inline-size: 200px;
+  max-inline-size: min(320px, calc(100vw - 16px));
+  padding: 12px;
+  border: 0;
+  outline: none;
+  background: var(--rf-surface-3, white);
+  box-shadow:
+    inset 0 1px light-dark(transparent, rgb(255 255 255 / 2%)),
+    inset 0 0 0 1px light-dark(transparent, rgb(255 255 255 / 2%)),
+    0 0 0 1px light-dark(rgb(0 0 0 / 6%), rgb(0 0 0 / 12%)),
+    0 1px 1px -0.5px light-dark(rgb(0 0 0 / 6%), rgb(0 0 0 / 18%)),
+    0 3px 3px -1.5px light-dark(rgb(0 0 0 / 6%), rgb(0 0 0 / 18%)),
+    0 12px 28px light-dark(rgb(0 0 0 / 10%), rgb(0 0 0 / 24%));
+  font-size: var(--rf-text-body, 13px);
+  line-height: var(--rf-leading-body, 20px);
+}
+/* Only while open: a display value on the closed panel would override the
+   browser's hiding, leaving an invisible panel that catches clicks. */
+.rf-popover-surface:popover-open {
+  display: grid;
+}
+.rf-popover-surface[data-density='compact'] {
+  gap: 8px;
+  padding: 10px;
+}
+
+/* Beside the trigger, the panel slides in sideways instead. */
+.rf-popover-surface[data-anchor-placement^='left'] {
+  --rf-menu-rest-transform: translateX(4px) scaleX(0.96);
+  transform-origin: right;
+}
+.rf-popover-surface[data-anchor-placement^='right'] {
+  --rf-menu-rest-transform: translateX(-4px) scaleX(0.96);
+  transform-origin: left;
+}
+
+.rf-popover-header {
+  display: grid;
+  gap: 4px;
+}
+.rf-popover-title {
+  margin: 0;
+  color: var(--rf-fg);
+  font-size: inherit;
+  line-height: inherit;
+  font-variation-settings: var(--rf-weight-strong);
+}
+.rf-popover-description {
+  margin: 0;
+  color: var(--rf-muted);
+  font-size: var(--rf-text-caption, 12px);
+  line-height: var(--rf-leading-caption, 16px);
+}
+.rf-popover-body {
+  display: grid;
+  gap: 8px;
+  min-inline-size: 0;
+}

package/dist/popover.d.ts

@@ -0,0 +1,38 @@
+import { type Handle, type MixInput, type RemixNode } from 'remix/component';
+import { type ButtonProps } from './basic.tsx';
+export type PopoverPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
+export interface PopoverTriggerProps {
+    'aria-haspopup': 'dialog';
+    'aria-expanded': boolean;
+    'aria-controls': string;
+    mix: MixInput<HTMLElement>;
+}
+export interface PopoverProps {
+    /** Names the panel when it has no visible title. */
+    label?: string;
+    /** A visible heading that names the panel. */
+    title?: RemixNode;
+    description?: RemixNode;
+    children?: RemixNode;
+    /** Contents of the button that opens the panel. */
+    trigger?: RemixNode;
+    triggerVariant?: ButtonProps['variant'];
+    triggerSize?: ButtonProps['size'];
+    /** Renders your own trigger. Spread the provided props onto a focusable element. */
+    renderTrigger?: (props: PopoverTriggerProps) => RemixNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Which side of the trigger the panel opens on. Default bottom. */
+    placement?: PopoverPlacement;
+    /** Distance from the trigger in pixels. Default 8. */
+    offset?: number;
+    size?: 'default' | 'compact';
+}
+/**
+ * A panel anchored to a trigger, for content that needs more room than a
+ * tooltip: a filter, inline settings, a share sheet. A click opens it; Escape
+ * and a click outside close it. It is a non-modal dialog: focus moves to its
+ * first field, or to the panel, on open and returns to the trigger on close.
+ */
+export declare function Popover(handle: Handle<PopoverProps>): () => import("remix/component").RemixElement;