@rtzll/reflow 0.3.0 → 0.5.0

package/dist/basic.js

@@ -4,6 +4,7 @@ import { on, ref } from 'remix/component';
 import { jsx } from 'remix/component/jsx-runtime';
 import { fluidHover } from './interactive.js';
 import { Tooltip } from './overlays.js';
+import { statusIcon } from './status-icon.js';
 export function Button(handle) {
     return () => {
         const props = handle.props;
@@ -13,7 +14,7 @@ export function Button(handle) {
         const iconOnly = props.size === 'icon' || props.size === 'icon-compact';
         const leading = iconOnly ? undefined : props.leadingIcon;
         const trailing = iconOnly ? undefined : props.trailingIcon;
-        const content = (_jsxs(_Fragment, { children: [_jsxs("span", { class: "rf-button-content", children: [leading && (_jsx("span", { class: "rf-button-icon", "aria-hidden": "true", children: leading })), _jsx("span", { class: "rf-button-label", children: props.children }), trailing && (_jsx("span", { class: "rf-button-icon", "aria-hidden": "true", children: trailing }))] }), props.loading && (_jsx("svg", { class: "rf-button-spinner", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M12 12C14 8.5 19 8.5 19 12C19 15.5 14 15.5 12 12C10 8.5 5 8.5 5 12C5 15.5 10 15.5 12 12Z", stroke: "currentColor", "stroke-width": "1.125", "stroke-linecap": "round", pathLength: "100" }) }))] }));
+        const content = (_jsxs(_Fragment, { children: [_jsxs("span", { class: "rf-button-content", children: [leading && (_jsx("span", { class: "rf-button-icon", "aria-hidden": "true", children: leading })), _jsx("span", { class: "rf-button-label", children: props.children }), trailing && (_jsx("span", { class: "rf-button-icon", "aria-hidden": "true", children: trailing }))] }), props.loading && (_jsx("svg", { class: "rf-button-spinner", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("g", { children: _jsx("circle", { cx: "8", cy: "8", r: "6.25", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", pathLength: "100", transform: "rotate(-90 8 8)" }) }) }))] }));
         const appearance = {
             class: classNames,
             'data-slot': 'button',
@@ -308,7 +309,7 @@ export function Banner(handle) {
         if (visible)
             handOff = false;
         wasVisible = visible;
-        return (_jsx("div", { class: "rf-banner-collapse", "data-open": visible ? 'true' : 'false', "data-variant": variant, mix: rootRef, children: _jsx("div", { class: "rf-banner-overflow", inert: !visible, "aria-hidden": !visible || undefined, children: _jsxs("div", { ...props, class: classList('rf-banner', classProp, className), "data-slot": "banner", "data-size": size, "data-status": status, "data-contrast": contrast, role: role ?? (status === 'error' || status === 'warning' ? 'alert' : 'status'), children: [_jsx("span", { class: "rf-banner-icon", "aria-hidden": "true", children: icon ?? bannerIcon(status) }), _jsx("div", { class: "rf-banner-content", children: children }), dismissible && (_jsx("button", { type: "button", class: "rf-banner-dismiss", "aria-label": dismissLabel, mix: on('click', (event) => {
+        return (_jsx("div", { class: "rf-banner-collapse", "data-open": visible ? 'true' : 'false', "data-variant": variant, mix: rootRef, children: _jsx("div", { class: "rf-banner-overflow", inert: !visible, "aria-hidden": !visible || undefined, children: _jsxs("div", { ...props, class: classList('rf-banner', classProp, className), "data-slot": "banner", "data-size": size, "data-status": status, "data-contrast": contrast, role: role ?? (status === 'error' || status === 'warning' ? 'alert' : 'status'), children: [_jsx("span", { class: "rf-banner-icon", "aria-hidden": "true", children: icon ?? statusIcon(status) }), _jsx("div", { class: "rf-banner-content", children: children }), dismissible && (_jsx("button", { type: "button", class: "rf-banner-dismiss", "aria-label": dismissLabel, mix: on('click', (event) => {
                                 handOff = event.currentTarget === document.activeElement;
                                 onDismiss?.();
                                 if (open === undefined) {
@@ -318,12 +319,6 @@ export function Banner(handle) {
                             }), children: _jsx(Icon, { name: "x" }) }))] }) }) }));
     };
 }
-function bannerIcon(status) {
-    if (status === 'default') {
-        return (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", children: [_jsx("circle", { cx: "12", cy: "12", r: "9" }), _jsx("path", { d: "M12 16v-4m0-4h.01" })] }));
-    }
-    return (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", children: [status === 'warning' ? (_jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z", fill: "currentColor", stroke: "currentColor", "stroke-width": "1.5", "stroke-linejoin": "round" })) : (_jsx("circle", { cx: "12", cy: "12", r: "10.5", fill: "currentColor" })), _jsx("g", { stroke: "var(--rf-bg)", "stroke-width": "2.25", "stroke-linecap": "round", "stroke-linejoin": "round", children: status === 'success' ? (_jsx("path", { d: "m8.5 12.25 2.5 2.5 4.5-5" })) : status === 'warning' ? (_jsx("path", { d: "M12 9.5v3.5M12 17h.01" })) : status === 'error' ? (_jsx("path", { d: "M12 7.5v5M12 16.5h.01" })) : (_jsx("path", { d: "M12 16.5v-5M12 7.5h.01" })) })] }));
-}
 export function BannerTitle(handle) {
     return () => {
         const { class: classProp, className, ...props } = handle.props;

package/dist/breadcrumb.css

@@ -33,6 +33,16 @@
   font-size: var(--rf-text-body);
   line-height: var(--rf-leading-body);
 }
+.rf-breadcrumb-measure {
+  position: absolute;
+  inline-size: 0;
+  block-size: 0;
+  overflow: clip;
+  visibility: hidden;
+}
+.rf-breadcrumb-measure > .rf-breadcrumb-list {
+  inline-size: max-content;
+}
 
 /* Steps keep their width; only the current page gives way and truncates. */
 .rf-breadcrumb-item {

package/dist/breadcrumb.js

@@ -11,14 +11,12 @@ const fallbackEllipsisWidth = 44;
  */
 export function Breadcrumb(handle) {
     let list = null;
-    let hidden = 0;
+    let hidden;
     // Natural widths per step, remembered so a hidden step returns as soon as it fits.
     let widths = [];
     let ellipsisWidth = 0;
-    // Steps whose label is cut, by index, read as the pointer or keyboard focus
-    // arrives; and the step whose menu is open, whose full name stays hidden.
+    // Steps whose label is cut, by index, read as the pointer or keyboard focus arrives.
     let cut = new Set();
-    let menuOpen;
     const listRef = ref((node, signal) => {
         if (!(node instanceof HTMLOListElement))
             return;
@@ -26,18 +24,8 @@ export function Breadcrumb(handle) {
         const observer = new ResizeObserver(() => measure());
         if (node.parentElement)
             observer.observe(node.parentElement);
-        const menus = new MutationObserver(() => {
-            const open = node.querySelector('[data-rf-step][aria-expanded="true"]');
-            const next = open ? Number(open.dataset.rfStep) : undefined;
-            if (next === menuOpen)
-                return;
-            menuOpen = next;
-            void handle.update();
-        });
-        menus.observe(node, { subtree: true, attributeFilter: ['aria-expanded'] });
         signal.addEventListener('abort', () => {
             observer.disconnect();
-            menus.disconnect();
             if (list === node)
                 list = null;
         });
@@ -54,34 +42,39 @@ export function Breadcrumb(handle) {
     }
     function measure() {
         const nav = list?.parentElement;
-        if (!list || !nav)
+        if (!list || !nav || !handle.props.collapse)
             return;
         const count = handle.props.items.length;
+        const maxHidden = Math.max(0, count - 3);
         const items = Array.from(list.children);
         const steps = items.filter((item) => !item.hasAttribute('data-ellipsis'));
         const ellipsis = items.find((item) => item.hasAttribute('data-ellipsis'));
         if (ellipsis)
             ellipsisWidth = naturalWidth(ellipsis);
-        // The rendered steps are 0, then hidden + 1 onward.
-        steps.forEach((item, i) => {
-            const index = hidden > 0 && i > 0 ? i + hidden : i;
-            if (index < count)
-                widths[index] = naturalWidth(item);
-        });
+        const measuring = nav.querySelector('.rf-breadcrumb-measure > ol');
+        if (measuring) {
+            widths = Array.from(measuring.children, (item) => item.getBoundingClientRect().width);
+        }
+        else {
+            // The rendered steps are 0, then hidden + 1 onward.
+            const hiddenCount = Math.min(hidden ?? 0, maxHidden);
+            steps.forEach((item, i) => {
+                const index = i === 0 ? i : i + hiddenCount;
+                if (index < count)
+                    widths[index] = naturalWidth(item);
+            });
+        }
         let next = 0;
-        if (handle.props.collapse) {
-            const available = nav.clientWidth;
-            const width = (i) => widths[i] ?? 0;
-            let total = 0;
-            for (let i = 0; i < count; i++)
-                total += width(i);
-            const maxHidden = Math.max(0, count - 3);
-            if (total > available + 0.5) {
-                let shown = total + (ellipsisWidth || fallbackEllipsisWidth);
-                while (next < maxHidden && shown > available + 0.5) {
-                    shown -= width(1 + next);
-                    next++;
-                }
+        const available = nav.clientWidth;
+        const width = (i) => widths[i] ?? 0;
+        let total = 0;
+        for (let i = 0; i < count; i++)
+            total += width(i);
+        if (total > available + 0.5) {
+            let shown = total + (ellipsisWidth || fallbackEllipsisWidth);
+            while (next < maxHidden && shown > available + 0.5) {
+                shown -= width(1 + next);
+                next++;
             }
         }
         if (next !== hidden) {
@@ -110,17 +103,19 @@ export function Breadcrumb(handle) {
     return () => {
         const { items, label = 'Breadcrumb', size, separator, collapse, openOnHover } = handle.props;
         widths.length = items.length;
-        const hide = collapse ? Math.min(hidden, Math.max(0, items.length - 3)) : 0;
+        const maxHidden = Math.max(0, items.length - 3);
+        if (!collapse)
+            hidden = undefined;
+        // Start with the shortest usable trail, then restore the steps that fit.
+        const hide = collapse ? Math.min(hidden ?? maxHidden, maxHidden) : 0;
         // Every render: a label change can change a step's width.
         if (collapse)
             handle.queueTask(() => measure());
         const trailing = separator === null ? null : (_jsx("span", { class: "rf-breadcrumb-separator", "aria-hidden": "true", children: separator ?? _jsx(Icon, { name: "chevron-right" }) }));
         const content = (item) => (_jsxs(_Fragment, { children: [item.icon, _jsx("span", { class: "rf-breadcrumb-label", children: item.label })] }));
         // The full name of a cut step, in the library tooltip under it, as in
-        // the reference. It stays closed while the name fits and while the
-        // step's own menu is open, so it never stacks on the menu. The step is
-        // described by the tooltip only while its name is cut.
-        const withFullName = (item, index, render) => (_jsx(Tooltip, { content: item.label, side: "bottom", open: cut.has(index) && menuOpen !== index ? undefined : false, renderTrigger: (props) => render(cut.has(index) ? props : { 'aria-describedby': '', mix: props.mix }) }));
+        // the reference. The step is described by the tooltip only while its name is cut.
+        const withFullName = (item, index, render) => (_jsx(Tooltip, { content: item.label, side: "bottom", open: cut.has(index) ? undefined : false, renderTrigger: (props) => render(cut.has(index) ? props : { 'aria-describedby': '', mix: props.mix }) }));
         const described = (trigger) => trigger['aria-describedby'] || undefined;
         const step = (item, index) => {
             const last = index === items.length - 1;
@@ -159,6 +154,9 @@ export function Breadcrumb(handle) {
                 fluidHover({ axis: 'x', focusSelector: ':has(:focus-visible)' }),
                 on('pointerover', checkCut),
                 on('focusin', checkCut),
-            ], children: [_jsx("span", { class: "rf-highlight rf-breadcrumb-hover", "aria-hidden": "true", "data-rf-hover-layer": true }), _jsx("span", { class: "rf-highlight rf-focus-ring", "aria-hidden": "true", "data-rf-focus-layer": true }), _jsx("ol", { class: "rf-breadcrumb-list", mix: listRef, children: rows })] }));
+            ], children: [_jsx("span", { class: "rf-highlight rf-breadcrumb-hover", "aria-hidden": "true", "data-rf-hover-layer": true }), _jsx("span", { class: "rf-highlight rf-focus-ring", "aria-hidden": "true", "data-rf-focus-layer": true }), _jsx("ol", { class: "rf-breadcrumb-list", mix: listRef, children: rows }), collapse && hidden === undefined && maxHidden > 0 && (_jsx("div", { class: "rf-breadcrumb-measure", "aria-hidden": "true", inert: true, children: _jsx("ol", { class: "rf-breadcrumb-list", children: items.map((item, index) => {
+                            const last = index === items.length - 1;
+                            return (_jsx("li", { class: "rf-breadcrumb-item", children: _jsxs("span", { class: last ? 'rf-breadcrumb-crumb rf-breadcrumb-page' : 'rf-breadcrumb-crumb', children: [content(item), !last && trailing] }) }, index));
+                        }) }) }))] }));
     };
 }

package/dist/compositions.css

@@ -470,7 +470,7 @@
 }
 .rf-queue {
   --rf-queue-row: 44px;
-  --rf-queue-gap: 5px;
+  --rf-queue-gap: var(--rf-stack-gap);
   position: relative;
   list-style: none;
   padding: 0;
@@ -502,7 +502,7 @@
   padding: 0 8px;
   cursor: grab;
   z-index: calc(3 - var(--rf-queue-depth));
-  scale: calc(1 - var(--rf-queue-depth) * 0.035) 1;
+  scale: calc(1 - var(--rf-queue-depth) * var(--rf-stack-scale-step)) 1;
   transition:
     margin-block-start var(--rf-spring-moderate),
     scale var(--rf-spring-moderate),
@@ -511,7 +511,7 @@
 .rf-queue > li + li {
   margin-block-start: var(
     --rf-queue-spacing,
-    calc(var(--rf-queue-peek, 6px) - var(--rf-queue-row))
+    calc(var(--rf-queue-peek, var(--rf-stack-peek)) - var(--rf-queue-row))
   );
 }
 .rf-queue > li:nth-child(n + 4) {

package/dist/drawer.css

@@ -0,0 +1,240 @@
+/* Drawer: a modal panel attached to one edge of the viewport. It slides in
+   on the moderate spring, which has no bounce, so the panel never lifts off
+   its edge, and leaves on Dialog's exit tween. While dragged it follows
+   --rf-drawer-drag, the distance toward its edge, and the backdrop fades
+   with --rf-drawer-progress. A strip of panel color past the edge covers
+   the gap when a drag pulls it the other way. */
+.rf-drawer {
+  --rf-drawer-bg: var(--rf-surface-5);
+  --rf-drawer-drag: 0px;
+  --rf-drawer-closed: 0 100%;
+  --rf-drawer-tail: 0 32px 0 0 var(--rf-drawer-bg);
+  position: fixed;
+  box-sizing: border-box;
+  inset: auto 0 0;
+  inline-size: 100%;
+  max-inline-size: none;
+  block-size: auto;
+  max-block-size: calc(100dvh - 48px);
+  margin: 0;
+  padding: 24px;
+  border: 0;
+  border-radius: var(--rf-panel-radius) var(--rf-panel-radius) 0 0;
+  outline: none;
+  overflow: auto;
+  overscroll-behavior: contain;
+  background: var(--rf-drawer-bg);
+  color: var(--rf-fg);
+  box-shadow:
+    var(--rf-drawer-tail),
+    0 0 0 1px light-dark(rgb(0 0 0 / 6%), rgb(255 255 255 / 6%)),
+    0 0 24px light-dark(rgb(0 0 0 / 10%), rgb(0 0 0 / 30%));
+  font: var(--rf-text-body) / var(--rf-leading-body) var(--rf-font);
+  translate: var(--rf-drawer-closed);
+  transition:
+    translate var(--rf-exit-slow),
+    overlay 160ms allow-discrete,
+    display 160ms allow-discrete;
+}
+.rf-drawer[open] {
+  translate: 0 var(--rf-drawer-drag);
+  transition:
+    translate var(--rf-spring-moderate),
+    overlay 160ms allow-discrete,
+    display 160ms allow-discrete;
+}
+@starting-style {
+  .rf-drawer[open] {
+    translate: var(--rf-drawer-closed);
+  }
+  .rf-drawer[open]::backdrop {
+    opacity: 0;
+  }
+}
+
+/* Top and bottom drawers keep their content in a readable column. */
+.rf-drawer[data-side='bottom'],
+.rf-drawer[data-side='top'] {
+  padding-inline: max(24px, calc((100% - 560px) / 2));
+}
+.rf-drawer[data-side='top'] {
+  --rf-drawer-closed: 0 -100%;
+  --rf-drawer-tail: 0 -32px 0 0 var(--rf-drawer-bg);
+  inset: 0 0 auto;
+  border-radius: 0 0 var(--rf-panel-radius) var(--rf-panel-radius);
+}
+.rf-drawer[data-side='top'][open] {
+  translate: 0 calc(-1 * var(--rf-drawer-drag));
+}
+.rf-drawer[data-side='right'],
+.rf-drawer[data-side='left'] {
+  inline-size: min(calc(100% - 48px), 400px);
+  block-size: 100dvh;
+  max-block-size: none;
+}
+.rf-drawer[data-side='right'] {
+  --rf-drawer-closed: 100% 0;
+  --rf-drawer-tail: 32px 0 0 0 var(--rf-drawer-bg);
+  inset: 0 0 0 auto;
+  border-radius: var(--rf-panel-radius) 0 0 var(--rf-panel-radius);
+}
+.rf-drawer[data-side='right'][open] {
+  translate: var(--rf-drawer-drag) 0;
+}
+.rf-drawer[data-side='left'] {
+  --rf-drawer-closed: -100% 0;
+  --rf-drawer-tail: -32px 0 0 0 var(--rf-drawer-bg);
+  inset: 0 auto 0 0;
+  border-radius: 0 var(--rf-panel-radius) var(--rf-panel-radius) 0;
+}
+.rf-drawer[data-side='left'][open] {
+  translate: calc(-1 * var(--rf-drawer-drag)) 0;
+}
+.rf-drawer[data-dragging] {
+  cursor: grabbing;
+  user-select: none;
+  transition: none;
+}
+
+.rf-drawer::backdrop {
+  background: rgb(0 0 0 / 40%);
+  opacity: 0;
+  transition:
+    opacity var(--rf-exit-slow),
+    overlay 160ms allow-discrete,
+    display 160ms allow-discrete;
+}
+[data-theme='dark'] .rf-drawer::backdrop {
+  background: rgb(0 0 0 / 70%);
+}
+.rf-drawer[open]::backdrop {
+  opacity: calc(1 - var(--rf-drawer-progress, 0));
+  transition:
+    opacity var(--rf-spring-moderate),
+    overlay 160ms allow-discrete,
+    display 160ms allow-discrete;
+}
+.rf-drawer[data-dragging]::backdrop {
+  transition: none;
+}
+
+.rf-drawer-handle {
+  inline-size: 40px;
+  block-size: 4px;
+  margin: -12px auto 16px;
+  border-radius: 9999px;
+  background: var(--rf-border);
+  cursor: grab;
+}
+.rf-drawer[open] {
+  display: flex;
+  flex-direction: column;
+}
+/* At the top, the handle sits on the edge that pulls away. */
+.rf-drawer[data-side='top'] .rf-drawer-handle {
+  order: 1;
+  margin: 16px auto -12px;
+}
+/* On the sides, the footer stays at the bottom of the panel. */
+.rf-drawer:is([data-side='left'], [data-side='right']) .rf-drawer-body {
+  flex: 1;
+}
+.rf-drawer-handle,
+.rf-drawer-header {
+  touch-action: none;
+}
+.rf-drawer-header {
+  display: grid;
+  gap: 6px;
+  padding-inline-end: 32px;
+}
+.rf-drawer-header h2 {
+  margin: 0;
+  font: 400 var(--rf-text-title) / var(--rf-leading-title) var(--rf-heading-font);
+  font-variation-settings: var(--rf-weight-strong);
+}
+.rf-drawer-header p {
+  margin: 0;
+  color: var(--rf-muted);
+}
+.rf-drawer:not(:has(.rf-drawer-close)) .rf-drawer-header {
+  padding-inline-end: 0;
+}
+.rf-drawer-body {
+  margin-block-start: 16px;
+}
+.rf-drawer-footer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-block-start: 24px;
+}
+.rf-drawer-close {
+  gap: normal;
+  position: absolute;
+  inset-block-start: 12px;
+  inset-inline-end: 12px;
+}
+
+[data-density='compact'] .rf-drawer {
+  padding: 16px;
+}
+[data-density='compact'] .rf-drawer:is([data-side='bottom'], [data-side='top']) {
+  padding-inline: max(16px, calc((100% - 520px) / 2));
+}
+[data-density='compact'] .rf-drawer-handle {
+  margin-block: -6px 12px;
+}
+
+/* Reduced motion: the drawer fades in place; a drag still moves it. */
+@media (prefers-reduced-motion: reduce) {
+  .rf-drawer {
+    translate: none;
+    opacity: 0;
+    transition:
+      opacity var(--rf-exit-slow),
+      overlay 160ms allow-discrete,
+      display 160ms allow-discrete;
+  }
+  .rf-drawer[open] {
+    opacity: 1;
+    transition:
+      opacity var(--rf-spring-moderate),
+      overlay 160ms allow-discrete,
+      display 160ms allow-discrete;
+  }
+  @starting-style {
+    .rf-drawer[open] {
+      translate: none;
+      opacity: 0;
+    }
+  }
+}
+@media (forced-colors: active) {
+  .rf-drawer {
+    border: 1px solid CanvasText;
+  }
+}
+
+/* Flush: the content fills the panel and the title stays for assistive technology. */
+.rf-drawer[data-flush] {
+  padding: 0;
+}
+.rf-drawer[data-flush] .rf-drawer-body {
+  flex: 1;
+  min-block-size: 0;
+  margin: 0;
+}
+.rf-drawer[data-flush] .rf-drawer-header {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+}
+.rf-drawer[data-flush] .rf-drawer-handle {
+  position: absolute;
+  inset-inline: 0;
+  margin-block: 8px;
+}

package/dist/drawer.d.ts

@@ -0,0 +1,45 @@
+import { type Handle, type MixInput, type RemixNode } from 'remix/component';
+import { type ButtonProps } from './basic.tsx';
+export type DrawerSide = 'bottom' | 'top' | 'left' | 'right';
+export interface DrawerTriggerProps {
+    'aria-haspopup': 'dialog';
+    'aria-expanded': boolean;
+    'aria-controls': string;
+    mix: MixInput<HTMLElement>;
+}
+export interface DrawerProps {
+    /** Contents of the button that opens the drawer. */
+    trigger?: RemixNode;
+    triggerVariant?: ButtonProps['variant'];
+    triggerSize?: ButtonProps['size'];
+    /** Renders your own trigger instead of the built-in button. Spread the provided props onto it. */
+    renderTrigger?: (props: DrawerTriggerProps) => RemixNode;
+    title: string;
+    description?: string;
+    children?: RemixNode;
+    /** Footer actions; a callback receives a function that closes the drawer. */
+    footer?: RemixNode | ((close: () => void) => RemixNode);
+    /** The edge the drawer slides in from. Default bottom. */
+    side?: DrawerSide;
+    /** Shows a grab handle. Default true for dismissible top and bottom drawers. */
+    handle?: boolean;
+    /** Shows a close button. Default true for left and right drawers. */
+    showCloseButton?: boolean;
+    /** Whether Escape, a click on the backdrop or a drag can close it. Default true. */
+    dismissible?: boolean;
+    /** Let the content fill the panel edge to edge, and visually hide the title. */
+    flush?: boolean;
+    class?: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+/**
+ * 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 declare function Drawer(handle: Handle<DrawerProps>): () => import("remix/component").RemixElement;