@rtzll/reflow 0.3.0 → 0.5.0

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;