@slithy/modal-spring 0.1.2

package/README.md

@@ -0,0 +1,102 @@
+# @slithy/modal-spring
+
+Animated modal adapter for `@slithy/modal-kit`, built on react-spring and @use-gesture/react.
+
+Provides animated enter/leave transitions, an animated backdrop, and drag-to-close gesture support. For full usage documentation see [`docs/modal-implementation-guide.md`](../../docs/modal-implementation-guide.md).
+
+---
+
+## Installation
+
+```bash
+pnpm add @slithy/modal-core @slithy/modal-kit @slithy/modal-spring
+pnpm add @react-spring/web @use-gesture/react
+```
+
+`@react-spring/web` and `@use-gesture/react` are peer dependencies.
+
+---
+
+## Setup
+
+```tsx
+import { LayerProvider, LayerStackPriority } from '@slithy/layers'
+import { Portal } from '@slithy/portal'
+import { SpringModalRenderer } from '@slithy/modal-spring'
+
+export function App() {
+  return (
+    <LayerProvider id="app" zIndex={LayerStackPriority.Base}>
+      <main>{/* your app */}</main>
+      <SpringModalRenderer
+        renderLayer={(children) => (
+          <LayerProvider id="modal" zIndex={LayerStackPriority.Modal}>
+            {children}
+          </LayerProvider>
+        )}
+        renderPortal={(children) => <Portal>{children}</Portal>}
+      />
+    </LayerProvider>
+  )
+}
+```
+
+---
+
+## Usage
+
+```tsx
+import { useModalStore } from '@slithy/modal-core'
+import { SpringModal } from '@slithy/modal-spring'
+
+function MyButton() {
+  const open = (event: React.MouseEvent) => {
+    useModalStore.getState().openModal(
+      <SpringModal aria-label="My Modal">
+        <p>Content</p>
+      </SpringModal>,
+      { triggerEvent: event }
+    )
+  }
+  return <button onClick={open}>Open</button>
+}
+```
+
+---
+
+## SpringModal Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `aria-label` | `string` | — | Accessible name for the dialog |
+| `alignX` | `'center' \| 'left' \| 'right'` | `'center'` | Horizontal position |
+| `alignY` | `'middle' \| 'top' \| 'bottom'` | `'middle'` | Vertical position |
+| `dismissible` | `boolean` | `true` | Allow Escape and backdrop-click to close |
+| `contentClassName` | `string` | — | Class on the `<dialog>` element |
+| `contentStyle` | `CSSProperties` | — | Static styles on the `<dialog>` element |
+| `contentTransitions` | `{ from, enter, leave }` | — | Spring transition values |
+| `disableOpacityTransition` | `boolean` | — | Skip the default opacity fade |
+| `dragDirection` | `DragDirection` | — | Enable drag-to-close |
+| `containerScrolling` | `boolean` | `true` | Allow container scroll |
+| `layerIsActive` | `boolean` | `true` | Pass from `useLayerState` for layer coordination |
+| `springConfig` | `SpringConfig` | — | Override the default spring config |
+| `afterOpen` | `() => void` | — | Fires after enter animation completes |
+| `afterClose` | `() => void` | — | Fires after modal is removed |
+
+---
+
+## Exports
+
+| Export | Description |
+|---|---|
+| `SpringModal` | Animated modal component |
+| `SpringModalRenderer` | Renders all open modals with animated backdrop |
+| `DragHandle` | Drag-to-close gesture wrapper |
+| `useModalDrag` | Low-level drag hook |
+| `Backdrop` | Animated backdrop (used by `SpringModalRenderer`) |
+| `defaultSpring` | Default spring config |
+| `iosSheetSpring` | iOS-feel spring config |
+| `useModalDragging` | Internal drag spring hook |
+| `DragDirection` | `'up' \| 'down' \| 'left' \| 'right'` |
+| `DragStyles` | Spring transform values from drag |
+| `SpringModalProps` | — |

package/dist/index.d.ts

@@ -0,0 +1,111 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SpringValues, SpringConfig, SpringValue, UseTransitionProps } from '@react-spring/web';
+import { CSSProperties, RefObject, DOMAttributes } from 'react';
+import { ModalProps as ModalProps$1, ModalRendererProps as ModalRendererProps$1 } from '@slithy/modal-kit';
+import { ModalElement } from '@slithy/modal-core';
+
+type BackdropProps = {
+    className?: string;
+    onClick?: () => void;
+    /** Static CSS overrides applied alongside the animated spring styles. */
+    style?: CSSProperties;
+    /** Animated spring values (or plain CSSProperties for static use). */
+    styles?: SpringValues<CSSProperties> | CSSProperties;
+};
+declare const ModalBackdrop: ({ className, onClick, style, styles, }: BackdropProps) => react_jsx_runtime.JSX.Element;
+
+/** Default spring for modal enter/leave animations. */
+declare const defaultSpring: SpringConfig;
+/**
+ * iOS Sheet / Ionic Framework easing curve.
+ * 500ms duration — well-suited for bottom-sheet style drawers.
+ * cubic-bezier(0.32, 0.72, 0, 1)
+ */
+declare const iosSheetSpring: SpringConfig;
+
+type DragDirection = 'down' | 'up' | 'left' | 'right';
+type DragStyles = {
+    x?: SpringValue<number>;
+    y?: SpringValue<number>;
+};
+type UseModalDraggingResult = {
+    bind: () => DOMAttributes<HTMLElement>;
+    dragStyles: DragStyles;
+};
+declare const useModalDragging: (modalId: ModalElement["id"] | undefined, dragDirection?: DragDirection, cardRef?: RefObject<HTMLElement | null>, dragDismissedRef?: RefObject<boolean>, onFlyOutRest?: () => void) => UseModalDraggingResult;
+
+type DragContextValue = {
+    bind: () => DOMAttributes<HTMLElement>;
+    active: boolean;
+};
+/**
+ * Returns the drag bind function for attaching drag-to-close to a handle
+ * element within a SpringModal.
+ *
+ * @example
+ * const { bind } = useModalDrag()
+ * return <div {...bind()}>Drag handle</div>
+ */
+declare function useModalDrag(): DragContextValue;
+/**
+ * A wrapper component that applies drag-to-close behavior to its children.
+ * Must be rendered inside SpringModal's children.
+ *
+ * @example
+ * <SpringModal>
+ *   <DragHandle>
+ *     <Header>Title</Header>
+ *   </DragHandle>
+ * </SpringModal>
+ */
+declare const DragHandle: ({ children, className, enabled, }: {
+    children?: React.ReactNode;
+    className?: string;
+    enabled?: boolean;
+}) => react_jsx_runtime.JSX.Element;
+
+type ModalProps = {
+    "aria-label"?: string;
+    afterClose?: () => void;
+    afterOpen?: () => void;
+    alignX?: ModalProps$1["alignX"];
+    alignY?: ModalProps$1["alignY"];
+    children?: React.ReactNode;
+    containerScrolling?: boolean;
+    contentClassName?: string;
+    contentStyle?: CSSProperties;
+    /**
+     * Spring transition values for the enter/from/leave animation phases.
+     *
+     * This prop accepts an object, so define it outside the component (or with
+     * `useMemo`) to keep the reference stable across renders.
+     *
+     * @example
+     * const transitions = { from: { y: '100%' }, enter: { y: '0%' }, leave: { y: '100%' } }
+     * <SpringModal contentTransitions={transitions} ... />
+     */
+    contentTransitions?: Pick<UseTransitionProps, "from" | "enter" | "leave">;
+    disableOpacityTransition?: boolean;
+    dismissible?: boolean;
+    dragDirection?: DragDirection;
+    /**
+     * Whether the modal's layer is currently active. Pass a value from
+     * `useLayerState` when using `@slithy/layers` for full layer-stack
+     * coordination. Defaults to `true`.
+     */
+    layerIsActive?: boolean;
+    springConfig?: SpringConfig;
+};
+declare const Modal: ({ "aria-label": ariaLabel, afterClose, afterOpen, alignX, alignY, children, containerScrolling, contentClassName, contentStyle, contentTransitions, disableOpacityTransition, dismissible, dragDirection, layerIsActive: layerIsActiveProp, springConfig, }: ModalProps) => JSX.Element;
+
+type ModalRendererProps = Pick<ModalRendererProps$1, "renderLayer" | "renderPortal"> & {
+    /**
+     * @deprecated `ModalRenderer` manages its own animated backdrop internally.
+     * This prop is accepted for interface parity with `@slithy/modal-kit`'s
+     * `ModalRenderer` but has no effect.
+     */
+    renderBackdrop?: ModalRendererProps$1["renderBackdrop"];
+};
+declare const ModalRenderer: ({ renderLayer, renderPortal, }?: ModalRendererProps) => react_jsx_runtime.JSX.Element;
+
+export { type DragDirection, DragHandle, type DragStyles, Modal, ModalBackdrop, type ModalProps, ModalRenderer, defaultSpring, iosSheetSpring, useModalDrag, useModalDragging };

package/dist/index.js

@@ -0,0 +1,600 @@
+// src/animated.tsx
+import { animated } from "@react-spring/web";
+import { ModalBackdrop, ModalContent, ModalDialog } from "@slithy/modal-kit";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var DivBase = forwardRef(
+  (props, ref) => /* @__PURE__ */ jsx("div", { ref, ...props })
+);
+var AnimatedDiv = animated(DivBase);
+var AnimatedBackdrop = animated(ModalBackdrop);
+var AnimatedModalContent = animated(ModalContent);
+var ModalDialogBase = forwardRef(
+  (props, ref) => /* @__PURE__ */ jsx(ModalDialog, { ref, ...props })
+);
+var AnimatedModalDialog = animated(ModalDialogBase);
+
+// src/ModalBackdrop.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ModalBackdrop2 = ({
+  className,
+  onClick,
+  style,
+  styles
+}) => /* @__PURE__ */ jsx2(
+  AnimatedBackdrop,
+  {
+    className,
+    onClick,
+    style: { ...style, ...styles }
+  }
+);
+
+// src/spring-configs.ts
+function cubicBezier(x1, y1, x2, y2) {
+  const cx = 3 * x1;
+  const bx = 3 * (x2 - x1) - cx;
+  const ax = 1 - cx - bx;
+  const cy = 3 * y1;
+  const by = 3 * (y2 - y1) - cy;
+  const ay = 1 - cy - by;
+  const sampleX = (t) => ((ax * t + bx) * t + cx) * t;
+  const sampleY = (t) => ((ay * t + by) * t + cy) * t;
+  const sampleDerivativeX = (t) => (3 * ax * t + 2 * bx) * t + cx;
+  const solve = (x) => {
+    let t = x;
+    for (let i = 0; i < 8; i++) {
+      const dx = sampleX(t) - x;
+      if (Math.abs(dx) < 1e-7) return t;
+      const d = sampleDerivativeX(t);
+      if (Math.abs(d) < 1e-6) break;
+      t -= dx / d;
+    }
+    return t;
+  };
+  return (x) => sampleY(solve(x));
+}
+var defaultSpring = {
+  friction: 200,
+  mass: 5,
+  tension: 2e3
+};
+var iosSheetSpring = {
+  duration: 500,
+  easing: cubicBezier(0.32, 0.72, 0, 1)
+};
+
+// src/DragContext.tsx
+import { createContext, useContext, useMemo as useMemo2 } from "react";
+
+// src/useModalDragging.ts
+import { useMemo, useRef } from "react";
+import { useSpring } from "@react-spring/web";
+import { useDrag } from "@use-gesture/react";
+import { useModalStore } from "@slithy/modal-core";
+var snapBackSpring = { friction: 40, tension: 300, mass: 1 };
+var flyOutSpring = { friction: 20, tension: 150, mass: 1, clamp: true };
+var noopModalDragging = {
+  bind: () => ({}),
+  dragStyles: {}
+};
+var useModalDragging = (modalId, dragDirection = "down", cardRef, dragDismissedRef, onFlyOutRest) => {
+  const closeModal = useModalStore((state) => state.closeModal);
+  const isXAxis = dragDirection === "left" || dragDirection === "right";
+  const axis = isXAxis ? "x" : "y";
+  const bounds = useMemo(
+    () => dragDirection === "down" ? { top: 0 } : dragDirection === "up" ? { bottom: 0 } : dragDirection === "right" ? { left: 0 } : { right: 0 },
+    [dragDirection]
+  );
+  const [dragStyles, api] = useSpring(() => ({
+    config: snapBackSpring,
+    x: 0,
+    y: 0
+  }));
+  const multiTouchCancelledRef = useRef(false);
+  const bind = useDrag(
+    ({ down, touches, offset: [offsetX, offsetY], velocity: [velocityX, velocityY], direction: [dirX, dirY] }) => {
+      if (!modalId) return;
+      if (touches > 1) {
+        multiTouchCancelledRef.current = true;
+        api.start({ config: snapBackSpring, immediate: true, x: 0, y: 0 });
+        return;
+      }
+      if (multiTouchCancelledRef.current) {
+        if (!down) multiTouchCancelledRef.current = false;
+        return;
+      }
+      const offset = isXAxis ? offsetX : offsetY;
+      const velocity = isXAxis ? velocityX : velocityY;
+      const dir = isXAxis ? dirX : dirY;
+      const isOutward = offset > 0 ? dragDirection === "down" || dragDirection === "right" : offset < 0 ? dragDirection === "up" || dragDirection === "left" : false;
+      const isMovingOutward = dragDirection === "down" ? dir > 0 : dragDirection === "up" ? dir < 0 : dragDirection === "right" ? dir > 0 : dir < 0;
+      const cardDimension = isXAxis ? cardRef?.current?.offsetWidth ?? 0 : cardRef?.current?.offsetHeight ?? 0;
+      const isDismissing = !down && isOutward && (isMovingOutward && velocity >= 0.5 || cardDimension > 0 && Math.abs(offset) >= cardDimension * 0.5);
+      if (isDismissing) {
+        if (dragDismissedRef) dragDismissedRef.current = true;
+        closeModal(modalId);
+        api.start({
+          config: flyOutSpring,
+          x: dragDirection === "right" ? window.innerWidth : dragDirection === "left" ? -window.innerWidth : 0,
+          y: dragDirection === "down" ? window.innerHeight : dragDirection === "up" ? -window.innerHeight : 0,
+          onRest: onFlyOutRest
+        });
+      } else {
+        api.start({
+          config: snapBackSpring,
+          immediate: down,
+          x: isXAxis ? down ? offsetX : 0 : 0,
+          y: !isXAxis ? down ? offsetY : 0 : 0
+        });
+      }
+    },
+    { axis, bounds, filterTaps: true, from: () => [dragStyles.x.get(), dragStyles.y.get()], rubberband: 0 }
+  );
+  return useMemo(
+    () => modalId ? { bind, dragStyles } : noopModalDragging,
+    [modalId, bind, dragStyles]
+  );
+};
+
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (!css || typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// src/DragHandle.css
+styleInject("[data-slithy=drag-handle][data-enabled] {\n  cursor: grab;\n  user-select: none;\n  -webkit-user-select: none;\n}\n");
+
+// src/DragContext.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var DragContext = createContext({ bind: () => ({}), active: false });
+var ModalDraggingSlot = ({
+  modalId,
+  dragDirection,
+  cardRef,
+  dragDismissedRef,
+  onFlyOutRest,
+  children
+}) => {
+  const { bind, dragStyles } = useModalDragging(modalId, dragDirection, cardRef, dragDismissedRef, onFlyOutRest);
+  const contextValue = useMemo2(() => ({ bind, active: true }), [bind]);
+  return /* @__PURE__ */ jsx3(DragContext.Provider, { value: contextValue, children: children({ dragStyles }) });
+};
+function useModalDrag() {
+  return useContext(DragContext);
+}
+var DragHandle = ({
+  children,
+  className,
+  enabled = true
+}) => {
+  const { bind, active } = useModalDrag();
+  const isActive = enabled && active;
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className,
+      "data-slithy": "drag-handle",
+      "data-enabled": enabled || void 0,
+      ...isActive ? bind() : {},
+      children
+    }
+  );
+};
+
+// ../../node_modules/.pnpm/@react-spring+rafz@9.7.5/node_modules/@react-spring/rafz/dist/react-spring_rafz.modern.mjs
+var updateQueue = makeQueue();
+var raf = (fn) => schedule(fn, updateQueue);
+var writeQueue = makeQueue();
+raf.write = (fn) => schedule(fn, writeQueue);
+var onStartQueue = makeQueue();
+raf.onStart = (fn) => schedule(fn, onStartQueue);
+var onFrameQueue = makeQueue();
+raf.onFrame = (fn) => schedule(fn, onFrameQueue);
+var onFinishQueue = makeQueue();
+raf.onFinish = (fn) => schedule(fn, onFinishQueue);
+var timeouts = [];
+raf.setTimeout = (handler, ms) => {
+  const time = raf.now() + ms;
+  const cancel = () => {
+    const i = timeouts.findIndex((t) => t.cancel == cancel);
+    if (~i)
+      timeouts.splice(i, 1);
+    pendingCount -= ~i ? 1 : 0;
+  };
+  const timeout = { time, handler, cancel };
+  timeouts.splice(findTimeout(time), 0, timeout);
+  pendingCount += 1;
+  start();
+  return timeout;
+};
+var findTimeout = (time) => ~(~timeouts.findIndex((t) => t.time > time) || ~timeouts.length);
+raf.cancel = (fn) => {
+  onStartQueue.delete(fn);
+  onFrameQueue.delete(fn);
+  onFinishQueue.delete(fn);
+  updateQueue.delete(fn);
+  writeQueue.delete(fn);
+};
+raf.sync = (fn) => {
+  sync = true;
+  raf.batchedUpdates(fn);
+  sync = false;
+};
+raf.throttle = (fn) => {
+  let lastArgs;
+  function queuedFn() {
+    try {
+      fn(...lastArgs);
+    } finally {
+      lastArgs = null;
+    }
+  }
+  function throttled(...args) {
+    lastArgs = args;
+    raf.onStart(queuedFn);
+  }
+  throttled.handler = fn;
+  throttled.cancel = () => {
+    onStartQueue.delete(queuedFn);
+    lastArgs = null;
+  };
+  return throttled;
+};
+var nativeRaf = typeof window != "undefined" ? window.requestAnimationFrame : (
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  (() => {
+  })
+);
+raf.use = (impl) => nativeRaf = impl;
+raf.now = typeof performance != "undefined" ? () => performance.now() : Date.now;
+raf.batchedUpdates = (fn) => fn();
+raf.catch = console.error;
+raf.frameLoop = "always";
+raf.advance = () => {
+  if (raf.frameLoop !== "demand") {
+    console.warn(
+      "Cannot call the manual advancement of rafz whilst frameLoop is not set as demand"
+    );
+  } else {
+    update();
+  }
+};
+var ts = -1;
+var pendingCount = 0;
+var sync = false;
+function schedule(fn, queue) {
+  if (sync) {
+    queue.delete(fn);
+    fn(0);
+  } else {
+    queue.add(fn);
+    start();
+  }
+}
+function start() {
+  if (ts < 0) {
+    ts = 0;
+    if (raf.frameLoop !== "demand") {
+      nativeRaf(loop);
+    }
+  }
+}
+function stop() {
+  ts = -1;
+}
+function loop() {
+  if (~ts) {
+    nativeRaf(loop);
+    raf.batchedUpdates(update);
+  }
+}
+function update() {
+  const prevTs = ts;
+  ts = raf.now();
+  const count = findTimeout(ts);
+  if (count) {
+    eachSafely(timeouts.splice(0, count), (t) => t.handler());
+    pendingCount -= count;
+  }
+  if (!pendingCount) {
+    stop();
+    return;
+  }
+  onStartQueue.flush();
+  updateQueue.flush(prevTs ? Math.min(64, ts - prevTs) : 16.667);
+  onFrameQueue.flush();
+  writeQueue.flush();
+  onFinishQueue.flush();
+}
+function makeQueue() {
+  let next = /* @__PURE__ */ new Set();
+  let current = next;
+  return {
+    add(fn) {
+      pendingCount += current == next && !next.has(fn) ? 1 : 0;
+      next.add(fn);
+    },
+    delete(fn) {
+      pendingCount -= current == next && next.has(fn) ? 1 : 0;
+      return next.delete(fn);
+    },
+    flush(arg) {
+      if (current.size) {
+        next = /* @__PURE__ */ new Set();
+        pendingCount -= current.size;
+        eachSafely(current, (fn) => fn(arg) && next.add(fn));
+        pendingCount += next.size;
+        current = next;
+      }
+    }
+  };
+}
+function eachSafely(values, each) {
+  values.forEach((value) => {
+    try {
+      each(value);
+    } catch (e) {
+      raf.catch(e);
+    }
+  });
+}
+
+// src/Modal.tsx
+import { useTransition as useTransition2 } from "@react-spring/web";
+import { useCallback, useRef as useRef2, useState } from "react";
+import {
+  ModalContainer,
+  useDialogKeyDown,
+  useModalLogic
+} from "@slithy/modal-kit";
+import { useMountEffect, useTrapFocus } from "@slithy/utils";
+
+// src/Veil.tsx
+import { useTransition } from "@react-spring/web";
+import { useModalStore as useModalStore2 } from "@slithy/modal-core";
+
+// src/Veil.css
+styleInject("[data-slithy=modal-veil] {\n  background: rgba(0, 0, 0, 0.25);\n  inset: 0;\n  position: absolute;\n  user-select: none;\n  -webkit-user-select: none;\n  z-index: 100;\n}\n");
+
+// src/Veil.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var opaque = 1;
+var transparent = 0;
+var veilTransitions = {
+  config: defaultSpring,
+  from: { opacity: transparent },
+  enter: { opacity: opaque },
+  leave: { opacity: transparent }
+};
+var Veil = ({ modalId, skipAnimation }) => {
+  const { backdropId, topModalId } = useModalStore2(
+    ({ backdropId: backdropId2, topModalId: topModalId2 }) => ({ backdropId: backdropId2, topModalId: topModalId2 })
+  );
+  const transitions = useTransition(
+    backdropId !== modalId && topModalId !== modalId,
+    {
+      ...veilTransitions,
+      immediate: !!skipAnimation
+    }
+  );
+  return transitions(
+    (springStyles, show) => show ? /* @__PURE__ */ jsx4(
+      AnimatedDiv,
+      {
+        "data-slithy": "modal-veil",
+        "data-testid": "modal-veil",
+        style: springStyles
+      }
+    ) : null
+  );
+};
+
+// src/Modal.tsx
+import { jsx as jsx5, jsxs } from "react/jsx-runtime";
+var opaque2 = 1;
+var transparent2 = 0;
+var Modal = ({
+  "aria-label": ariaLabel,
+  afterClose,
+  afterOpen,
+  alignX = "center",
+  alignY = "middle",
+  children,
+  containerScrolling = true,
+  contentClassName,
+  contentStyle,
+  contentTransitions,
+  disableOpacityTransition,
+  dismissible = true,
+  dragDirection,
+  layerIsActive: layerIsActiveProp,
+  springConfig
+}) => {
+  const trapFocus = useTrapFocus();
+  const [springOpen, setSpringOpen] = useState(false);
+  useMountEffect(() => {
+    const cb = () => setSpringOpen(true);
+    raf(cb);
+    return () => raf.cancel(cb);
+  });
+  const [scrollable, setScrollable] = useState(false);
+  const doneRef = useRef2(null);
+  const dragDismissedRef = useRef2(false);
+  const onLeave = useCallback((done) => {
+    doneRef.current = done;
+    setScrollable(false);
+    setSpringOpen(false);
+  }, []);
+  const {
+    contentRef,
+    handleCloseModal,
+    layerIsActive,
+    skipAnimation,
+    isTopModal,
+    markAtRest,
+    modalId,
+    modalState
+  } = useModalLogic({
+    afterClose,
+    // afterOpen is fired from enter.onRest instead of the mount effect
+    afterOpen: void 0,
+    delayAtRest: true,
+    layerIsActive: layerIsActiveProp,
+    onLeave
+  });
+  const onKeyDown = useDialogKeyDown({
+    dismissible,
+    handleCloseModal,
+    isTopModal,
+    layerIsActive,
+    onKeyDown: trapFocus.onKeyDown
+  });
+  const transitions = useTransition2(springOpen, {
+    config: springConfig ?? defaultSpring,
+    from: { opacity: transparent2, ...contentTransitions?.from },
+    enter: {
+      opacity: opaque2,
+      ...contentTransitions?.enter,
+      onRest: () => {
+        if (springOpen) {
+          markAtRest();
+          afterOpen?.();
+          if (containerScrolling) setScrollable(true);
+        }
+      }
+    },
+    leave: {
+      opacity: transparent2,
+      ...dragDismissedRef.current ? { immediate: true } : contentTransitions?.leave,
+      onRest: () => {
+        if (!springOpen && doneRef.current) {
+          if (dragDismissedRef.current) return;
+          doneRef.current();
+          doneRef.current = null;
+        }
+      }
+    },
+    immediate: !!skipAnimation
+  });
+  const renderContent = (dragStyles, styles) => /* @__PURE__ */ jsx5(
+    ModalContainer,
+    {
+      alignX,
+      modalId,
+      onBackdropClick: dismissible ? handleCloseModal : void 0,
+      scrollable,
+      children: /* @__PURE__ */ jsx5(
+        AnimatedModalContent,
+        {
+          alignY,
+          disableOpacityTransition,
+          modalState,
+          style: styles,
+          children: /* @__PURE__ */ jsxs(
+            AnimatedModalDialog,
+            {
+              ref: contentRef,
+              "aria-label": ariaLabel,
+              className: contentClassName,
+              onKeyDown,
+              style: {
+                ...contentStyle,
+                x: dragStyles.x ?? 0,
+                y: dragStyles.y ?? 0
+              },
+              children: [
+                children,
+                /* @__PURE__ */ jsx5(Veil, { modalId, skipAnimation })
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+  return transitions(
+    (styles, show) => show ? dismissible ? /* @__PURE__ */ jsx5(
+      ModalDraggingSlot,
+      {
+        modalId,
+        dragDirection,
+        cardRef: contentRef,
+        dragDismissedRef,
+        onFlyOutRest: () => {
+          if (doneRef.current) {
+            doneRef.current();
+            doneRef.current = null;
+          }
+        },
+        children: ({ dragStyles }) => renderContent(dragStyles, styles)
+      }
+    ) : renderContent({}, styles) : null
+  );
+};
+
+// src/ModalRenderer.tsx
+import { useTransition as useTransition3 } from "@react-spring/web";
+import { useModalStore as useModalStore3 } from "@slithy/modal-core";
+import { ModalRenderer as ModalKitRenderer } from "@slithy/modal-kit";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var opaque3 = 1;
+var transparent3 = 0;
+var backdropTransitions = {
+  config: defaultSpring,
+  from: { opacity: transparent3 },
+  enter: { opacity: opaque3 },
+  leave: { opacity: transparent3 }
+};
+var ModalRenderer = ({
+  renderLayer,
+  renderPortal
+} = {}) => {
+  const { backdropId, modals } = useModalStore3(({ backdropId: backdropId2, modals: modals2 }) => ({
+    backdropId: backdropId2,
+    modals: modals2
+  }));
+  const modalsExist = modals.length > 0;
+  const transitions = useTransition3(!!backdropId && modalsExist, {
+    ...backdropTransitions,
+    immediate: !!modals.at(-1)?.skipAnimation
+  });
+  const renderBackdrop = () => transitions(
+    (styles, show) => show ? /* @__PURE__ */ jsx6(ModalBackdrop2, { styles }) : null
+  );
+  return /* @__PURE__ */ jsx6(
+    ModalKitRenderer,
+    {
+      renderBackdrop,
+      renderLayer,
+      renderPortal
+    }
+  );
+};
+export {
+  DragHandle,
+  Modal,
+  ModalBackdrop2 as ModalBackdrop,
+  ModalRenderer,
+  defaultSpring,
+  iosSheetSpring,
+  useModalDrag,
+  useModalDragging
+};

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@slithy/modal-spring",
+  "version": "0.1.2",
+  "description": "React Spring animation adapter for @slithy/modal-kit.",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "dependencies": {
+    "@slithy/modal-kit": "0.1.2",
+    "@slithy/modal-core": "0.1.2",
+    "@slithy/utils": "0.3.0"
+  },
+  "peerDependencies": {
+    "@react-spring/web": ">=9",
+    "@use-gesture/react": ">=10",
+    "react": "^17 || ^18 || ^19"
+  },
+  "devDependencies": {
+    "@react-spring/rafz": "^9",
+    "@react-spring/web": "^9",
+    "@use-gesture/react": "^10.3.1",
+    "@testing-library/jest-dom": "^6",
+    "@testing-library/react": "^16",
+    "@types/react": "^19",
+    "@vitejs/plugin-react": "^6",
+    "@vitest/coverage-v8": "^4.1.2",
+    "jsdom": "^29.0.1",
+    "react": "^19",
+    "react-dom": "^19",
+    "tsup": "^8",
+    "typescript": "^5",
+    "vitest": "^4.1.2",
+    "@slithy/tsconfig": "0.0.0",
+    "@slithy/eslint-config": "0.0.0"
+  },
+  "author": "mjcampagna",
+  "license": "ISC",
+  "scripts": {
+    "clean": "rm -rf dist",
+    "build": "rm -rf dist && tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}