@rtzll/reflow 0.4.0 → 0.5.0

package/dist/sidebar.css

@@ -926,68 +926,27 @@
   margin-inline-start: 8px;
 }
 
-/* Mobile drawer: below 768px the rail becomes a sheet that slides in from the left. */
+/* Mobile drawer: below 768px the rail moves into a left Drawer, which brings
+   the slide, the drag to close and the backdrop; it keeps the rail's width,
+   surface and shadow. */
 .rf-sidebar-drawer-trigger {
   display: none;
 }
-.rf-sidebar-drawer {
-  position: fixed;
-  inset-block: 0;
-  inset-inline-start: 0;
-  box-sizing: border-box;
-  width: min(288px, 100vw);
-  max-width: none;
-  height: 100dvh;
-  max-height: none;
-  margin: 0;
-  padding: 0;
+.rf-drawer.rf-sidebar-drawer[data-side] {
+  --rf-drawer-bg: var(--rf-surface-2);
+  inline-size: min(288px, 100vw);
   overflow: hidden;
-  border: 0;
-  background: var(--rf-surface-2);
-  box-shadow: var(--rf-sb-surface-shadow);
-  color: var(--rf-fg);
-  translate: -100% 0;
-  transition:
-    translate var(--rf-exit-moderate),
-    display var(--rf-exit-moderate) allow-discrete,
-    overlay var(--rf-exit-moderate) allow-discrete;
-}
-.rf-sidebar-drawer[open] {
-  translate: 0 0;
-  transition:
-    translate var(--rf-spring-moderate),
-    display var(--rf-spring-moderate) allow-discrete,
-    overlay var(--rf-spring-moderate) allow-discrete;
-}
-@starting-style {
-  .rf-sidebar-drawer[open] {
-    translate: -100% 0;
-  }
-}
-.rf-sidebar-drawer::backdrop {
-  background: light-dark(rgb(0 0 0 / 40%), rgb(0 0 0 / 80%));
-  opacity: 0;
-  transition:
-    opacity var(--rf-exit-moderate),
-    display var(--rf-exit-moderate) allow-discrete,
-    overlay var(--rf-exit-moderate) allow-discrete;
-}
-.rf-sidebar-drawer[open]::backdrop {
-  opacity: 1;
-  transition:
-    opacity 160ms ease,
-    display 160ms allow-discrete,
-    overlay 160ms allow-discrete;
+  box-shadow: var(--rf-drawer-tail), var(--rf-sb-surface-shadow);
 }
-@starting-style {
-  .rf-sidebar-drawer[open]::backdrop {
-    opacity: 0;
-  }
+.rf-sidebar-drawer .rf-drawer-body {
+  display: flex;
+  flex-direction: column;
 }
-.rf-sidebar-drawer-content {
-  height: 100%;
+.rf-sidebar-drawer .rf-sidebar-inner {
+  flex: 1;
+  min-block-size: 0;
 }
-.rf-sidebar-drawer-content > .rf-basic-sr-only:focus-visible {
+.rf-sidebar-drawer .rf-drawer-body > .rf-basic-sr-only:focus-visible {
   clip-path: none;
   width: auto;
   height: auto;
@@ -996,8 +955,6 @@
   position: static;
 }
 @media (prefers-reduced-motion: reduce) {
-  .rf-sidebar-drawer,
-  .rf-sidebar-drawer::backdrop,
   .rf-sidebar-layout,
   .rf-sidebar-card {
     transition-duration: 0s !important;

package/dist/sidebar.js

@@ -4,6 +4,7 @@ import { on, ref } from 'remix/component';
 import { Button, Card, CardGroup, CardHeader, CardTitle, CardDescription, CardMedia, CardImage, } from './basic.js';
 import { fluidHover } from './interactive.js';
 import { ScrollArea } from './scroll-area.js';
+import { Drawer } from './drawer.js';
 /** How far past the minimum width a drag has to travel before it previews the collapse. */
 const collapseSlop = 56;
 function SidebarNavigation(handle) {
@@ -113,13 +114,14 @@ export function Sidebar(handle) {
     let exitingPeek;
     let peekTimer;
     let drag;
-    let drawer;
+    let drawerOpen = false;
     const panelId = `${handle.id}-sidebar`;
-    const drawerId = `${panelId}-drawer`;
-    const captureDrawer = ref((node) => {
-        if (node instanceof HTMLDialogElement)
-            drawer = node;
-    });
+    const setDrawer = (open) => {
+        if (drawerOpen === open)
+            return;
+        drawerOpen = open;
+        void handle.update();
+    };
     function limits() {
         const minimum = handle.props.minWidth ?? 160;
         return { minimum, maximum: Math.max(minimum, handle.props.maxWidth ?? 360) };
@@ -375,13 +377,7 @@ export function Sidebar(handle) {
                                                     if (!peeking)
                                                         cancelPeekTimer();
                                                 }),
-                                            ], children: _jsx(Icon, { name: "panel-left" }) }), _jsx(Button, { class: "rf-sidebar-drawer-trigger", variant: "ghost", size: "compact", "aria-controls": drawerId, "aria-haspopup": "dialog", mix: on('click', () => drawer?.showModal()), children: "Open navigation" })] })), toolbar != null && _jsx("div", { class: "rf-sidebar-toolbar-content", children: toolbar })] })), children] }), _jsx("dialog", { id: drawerId, class: "rf-sidebar-drawer", "aria-label": label, mix: [
-                        captureDrawer,
-                        on('click', (event) => {
-                            if (event.target === drawer)
-                                drawer?.close();
-                        }),
-                    ], children: _jsxs("div", { class: "rf-sidebar-drawer-content", children: [_jsx("button", { type: "button", class: "rf-basic-sr-only", mix: on('click', () => drawer?.close()), children: "Close navigation" }), _jsx(SidebarNavigation, { ...navigation, variant: "default", onNavigate: () => drawer?.close() })] }) })] }));
+                                            ], children: _jsx(Icon, { name: "panel-left" }) }), _jsxs(Drawer, { side: "left", title: label, flush: true, class: "rf-sidebar-drawer", open: drawerOpen, onOpenChange: setDrawer, renderTrigger: (trigger) => (_jsx(Button, { class: "rf-sidebar-drawer-trigger", variant: "ghost", size: "compact", ...trigger, children: "Open navigation" })), children: [_jsx("button", { type: "button", class: "rf-basic-sr-only", mix: on('click', () => setDrawer(false)), children: "Close navigation" }), _jsx(SidebarNavigation, { ...navigation, variant: "default", onNavigate: () => setDrawer(false) })] })] })), toolbar != null && _jsx("div", { class: "rf-sidebar-toolbar-content", children: toolbar })] })), children] })] }));
     };
 }
 /** A measured, dismissible pile of real Cards. Keyboard focus opens the inline pile too. */

package/dist/status-icon.d.ts

@@ -0,0 +1,3 @@
+/** The status glyphs Banner and toasts share. Internal: not exported from the package. */
+export type StatusIconName = 'default' | 'info' | 'success' | 'warning' | 'error';
+export declare function statusIcon(status: StatusIconName): import("remix/component").RemixElement;

package/dist/status-icon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "remix/component/jsx-runtime";
+export function statusIcon(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" })) })] }));
+}

package/dist/styles.css

@@ -12,4 +12,6 @@
 @import './breadcrumb.css';
 @import './segmented-control.css';
 @import './popover.css';
+@import './toaster.css';
+@import './drawer.css';
 @import './systems.css';

package/dist/toaster.css

@@ -0,0 +1,268 @@
+/* Toaster: a pile of toasts fixed to one corner or edge of the viewport.
+   The newest toast sits in front; the ones behind peek out and narrow on
+   QueuedStack's stacking values. Pointed at or focused, the pile spreads
+   out a gap apart. The script writes each toast's depth, height and spread
+   offset; the lift turns offsets upward for the bottom positions. */
+.rf-toaster-region {
+  display: block;
+  outline: none;
+}
+
+.rf-toaster {
+  --rf-toaster-offset: 24px;
+  --rf-toast-width: 356px;
+  --rf-toast-lift: -1;
+  position: fixed;
+  z-index: 2147483000;
+  box-sizing: border-box;
+  inline-size: var(--rf-toast-width);
+  max-inline-size: calc(100vw - 2 * var(--rf-toaster-offset));
+  block-size: var(--rf-toaster-piled-height, 0px);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  color: var(--rf-fg);
+  font: var(--rf-text-body) / var(--rf-leading-body) var(--rf-font);
+  -webkit-font-smoothing: antialiased;
+}
+.rf-toaster[data-expanded] {
+  block-size: var(--rf-toaster-spread-height, 0px);
+}
+.rf-toaster[data-position^='top'] {
+  --rf-toast-lift: 1;
+  top: var(--rf-toaster-offset);
+}
+.rf-toaster[data-position^='bottom'] {
+  bottom: var(--rf-toaster-offset);
+}
+.rf-toaster[data-position$='left'] {
+  left: var(--rf-toaster-offset);
+}
+.rf-toaster[data-position$='right'] {
+  right: var(--rf-toaster-offset);
+}
+.rf-toaster[data-position$='center'] {
+  left: 50%;
+  translate: -50% 0;
+}
+@media (max-width: 600px) {
+  .rf-toaster {
+    --rf-toaster-offset: 16px;
+    inset-inline: var(--rf-toaster-offset);
+    inline-size: auto;
+    translate: none;
+  }
+}
+
+.rf-toast {
+  --rf-status-color: var(--rf-fg);
+  --rf-toast-y: calc(var(--rf-toast-lift) * var(--rf-toast-depth, 0) * var(--rf-stack-peek));
+  position: absolute;
+  inset-inline: 0;
+  z-index: calc(100 - var(--rf-toast-depth, 0));
+  box-sizing: border-box;
+  block-size: var(--rf-toast-front-height, auto);
+  overflow: hidden;
+  border-radius: var(--rf-panel-radius);
+  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%));
+  translate: var(--rf-swipe-x, 0px) calc(var(--rf-toast-y) + var(--rf-swipe-y, 0px));
+  scale: calc(1 - var(--rf-toast-depth, 0) * var(--rf-stack-scale-step)) 1;
+  touch-action: none;
+  transition:
+    translate var(--rf-spring-moderate),
+    scale var(--rf-spring-moderate),
+    block-size var(--rf-spring-moderate),
+    opacity var(--rf-spring-moderate);
+}
+.rf-toaster[data-position^='top'] > .rf-toast {
+  top: 0;
+}
+.rf-toaster[data-position^='bottom'] > .rf-toast {
+  bottom: 0;
+}
+.rf-toast[data-front] {
+  block-size: var(--rf-toast-height, auto);
+}
+.rf-toast:focus-visible {
+  outline: 2px solid var(--rf-accent);
+  outline-offset: 2px;
+}
+/* A new toast slides in from the edge. */
+@starting-style {
+  .rf-toast {
+    --rf-toast-y: calc(var(--rf-toast-lift) * -100%);
+    opacity: 0;
+  }
+}
+
+.rf-toaster[data-expanded] > .rf-toast {
+  --rf-toast-y: calc(var(--rf-toast-lift) * var(--rf-toast-offset, 0px));
+  block-size: var(--rf-toast-height, auto);
+  scale: 1;
+}
+.rf-toast[data-hidden] {
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+}
+.rf-toast[data-swiping] {
+  cursor: grabbing;
+  user-select: none;
+  transition: none;
+}
+/* Leaving, the front toast drops back to its edge; a swiped one carries on
+   the way it was thrown; the others fade where they are. */
+.rf-toast[data-removed] {
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    translate var(--rf-exit-slow),
+    scale var(--rf-exit-slow),
+    opacity var(--rf-exit-moderate);
+}
+.rf-toast[data-removed][data-front]:not([data-swipe-out]) {
+  --rf-toast-y: calc(var(--rf-toast-lift) * -100%);
+}
+
+.rf-toast-inner {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 16px;
+  transition: opacity var(--rf-spring-moderate);
+}
+/* Piled, only the front toast shows its content. */
+.rf-toaster:not([data-expanded]) > .rf-toast:not([data-front]) > .rf-toast-inner {
+  opacity: 0;
+}
+.rf-toast[data-status='info'] {
+  --rf-status-color: light-dark(#3b82f6, var(--rf-info));
+}
+.rf-toast[data-status='success'] {
+  --rf-status-color: light-dark(#22c55e, var(--rf-success));
+}
+.rf-toast[data-status='warning'] {
+  --rf-status-color: light-dark(#f59e0b, var(--rf-warning));
+}
+.rf-toast[data-status='error'] {
+  --rf-status-color: light-dark(#ef4444, var(--rf-danger));
+}
+.rf-toast[data-status='loading'] {
+  --rf-status-color: var(--rf-muted);
+}
+.rf-toast-icon {
+  display: grid;
+  flex: none;
+  place-items: center;
+  inline-size: 20px;
+  block-size: var(--rf-leading-subtitle);
+  color: var(--rf-status-color);
+}
+.rf-toast-icon > svg {
+  inline-size: 20px;
+  block-size: 20px;
+}
+.rf-toast-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-toast-spinner circle {
+  stroke-dasharray: 0.01 49.99;
+  stroke-dashoffset: -25;
+  animation: rf-button-spinner-breathe 1s cubic-bezier(0.65, 0, 0.35, 1) infinite;
+}
+.rf-toast-content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 2px;
+  min-inline-size: 0;
+}
+.rf-toast-title {
+  font-size: var(--rf-text-subtitle);
+  line-height: var(--rf-leading-subtitle);
+  font-variation-settings: var(--rf-weight-strong);
+  overflow-wrap: anywhere;
+}
+.rf-toast-description {
+  color: var(--rf-muted);
+  overflow-wrap: anywhere;
+}
+.rf-toast-action {
+  flex: none;
+  margin-block: calc((var(--rf-leading-subtitle) - 28px) / 2);
+}
+.rf-toast-close {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  inline-size: 28px;
+  block-size: 28px;
+  margin-block: calc((var(--rf-leading-subtitle) - 28px) / 2);
+  margin-inline: -4px -6px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--rf-radius);
+  outline: none;
+  background: transparent;
+  color: var(--rf-muted);
+  cursor: pointer;
+  transition:
+    color var(--rf-fast),
+    background-color var(--rf-fast);
+}
+.rf-toast-close:focus-visible {
+  box-shadow: 0 0 0 1px var(--rf-accent);
+}
+@media (hover: hover) {
+  .rf-toast-close:hover {
+    background: var(--rf-hover);
+    color: var(--rf-fg);
+  }
+}
+.rf-toast-close > svg {
+  inline-size: 15px;
+  block-size: 15px;
+}
+
+[data-density='compact'] .rf-toast-inner {
+  gap: 10px;
+  padding: 12px;
+}
+[data-density='compact'] .rf-toast-icon,
+[data-density='compact'] .rf-toast-icon > svg {
+  inline-size: 16px;
+}
+[data-density='compact'] .rf-toast-icon > svg {
+  block-size: 16px;
+}
+[data-density='compact'] .rf-toast-close > svg {
+  inline-size: 13px;
+  block-size: 13px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .rf-toast,
+  .rf-toast[data-removed] {
+    transition: opacity var(--rf-spring-moderate);
+  }
+  .rf-toast-spinner :is(g, circle) {
+    animation: none;
+  }
+}
+@media (forced-colors: active) {
+  .rf-toast {
+    border: 1px solid CanvasText;
+  }
+}

package/dist/toaster.d.ts

@@ -0,0 +1,79 @@
+import { type Handle, type RemixNode } from 'remix/component';
+export type ToastStatus = 'default' | 'info' | 'success' | 'warning' | 'error' | 'loading';
+export type ToasterPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+export interface ToastAction {
+    label: string;
+    /** Runs on click. The toast then closes, unless the handler calls `event.preventDefault()`. */
+    onClick: (event: MouseEvent) => void;
+}
+export interface ToastOptions {
+    /** Reuse an id to update a toast in place instead of adding another. */
+    id?: string;
+    description?: RemixNode;
+    /** Milliseconds before it closes on its own. `Infinity` keeps it until dismissed. Defaults to the Toaster's duration. */
+    duration?: number;
+    action?: ToastAction;
+    /** Whether a swipe, Escape or the close button can close it. Default true. */
+    dismissible?: boolean;
+    /** Replaces the status icon. */
+    icon?: RemixNode;
+    /** Called when the toast is closed by a swipe, Escape, the close button, an action or `toast.dismiss`. */
+    onDismiss?: (toast: Toast) => void;
+    /** Called when the toast closes on its own after its duration. */
+    onAutoClose?: (toast: Toast) => void;
+}
+export interface Toast extends ToastOptions {
+    id: string;
+    title: RemixNode;
+    status: ToastStatus;
+}
+export interface ToastPromiseMessages<T> {
+    loading: RemixNode;
+    success: RemixNode | ((value: T) => RemixNode);
+    error: RemixNode | ((error: unknown) => RemixNode);
+    description?: RemixNode;
+}
+/**
+ * Raises a toast in the app's `<Toaster>` and returns its id. `toast.success`,
+ * `toast.info`, `toast.warning`, `toast.error` and `toast.loading` set its
+ * status; `toast.promise` follows a promise from loading to its outcome;
+ * `toast.dismiss` closes one toast, or all of them.
+ */
+export declare const toast: ((title: RemixNode, options?: ToastOptions) => string) & {
+    success: (title: RemixNode, options?: ToastOptions) => string;
+    info: (title: RemixNode, options?: ToastOptions) => string;
+    warning: (title: RemixNode, options?: ToastOptions) => string;
+    error: (title: RemixNode, options?: ToastOptions) => string;
+    loading: (title: RemixNode, options?: ToastOptions) => string;
+    promise<T>(promise: Promise<T> | (() => Promise<T>), messages: ToastPromiseMessages<T>, options?: ToastOptions): string;
+    dismiss: (id?: string) => void;
+};
+export interface ToasterProps {
+    /** Where the stack sits. Default bottom-right. */
+    position?: ToasterPosition;
+    /** Show the stack spread out instead of piled. Default false. */
+    expand?: boolean;
+    /** How many toasts stay in view; older ones wait behind them. Default 3. */
+    visibleToasts?: number;
+    /** Milliseconds each toast stays before closing on its own. Default 4000. */
+    duration?: number;
+    /** Give every dismissible toast a close button. Default false. */
+    closeButton?: boolean;
+    /** Moves focus to the newest toast. Default alt+t. */
+    hotkey?: string;
+    /** Names the notifications region. Default "Notifications". */
+    label?: string;
+    /** Distance from the viewport's edges in pixels. Default 24, or 16 on narrow screens. */
+    offset?: number;
+    size?: 'default' | 'compact';
+    class?: string;
+}
+/**
+ * Shows the toasts raised with `toast()`. Place one in the app, outside
+ * anything that scrolls. The newest toast sits in front with up to two
+ * peeking behind it, on QueuedStack's stacking values; pointing at or
+ * focusing the stack spreads it out and pauses the timers. A swipe toward
+ * the nearest edge, Escape, or the close button dismisses a toast, and the
+ * hotkey moves focus to the newest one.
+ */
+export declare function Toaster(handle: Handle<ToasterProps>): () => import("remix/component").RemixElement;