@slithy/modal-kit 0.1.2

package/README.md

@@ -0,0 +1,239 @@
+# @slithy/modal-kit
+
+The headless React layer for the `@slithy` modal system. Provides primitives, behavior hooks, and a renderer — everything needed to build a fully functional modal UI with no animation dependency.
+
+`modal-kit` + `modal-core` are sufficient for a production modal system. Add `@slithy/modal-spring` (or a custom adapter) only if you need animated transitions.
+
+---
+
+## Installation
+
+```bash
+pnpm add @slithy/modal-core @slithy/modal-kit
+```
+
+---
+
+## Minimal Setup (no animation)
+
+```tsx
+import { useModalStore } from '@slithy/modal-core'
+import { Modal, ModalRenderer } from '@slithy/modal-kit'
+
+// Render once at your app root
+export function App() {
+  const { backdropId, modals } = useModalStore(({ backdropId, modals }) => ({
+    backdropId,
+    modals,
+  }))
+  const showBackdrop = !!backdropId && modals.length > 0
+
+  return (
+    <>
+      <main>{/* your app */}</main>
+      <ModalRenderer
+        renderBackdrop={() => showBackdrop ? <ModalBackdrop /> : null}
+      />
+    </>
+  )
+}
+
+// Open a modal from anywhere
+useModalStore.getState().openModal(
+  <Modal aria-label="My Modal">
+    <p>Content</p>
+  </Modal>,
+  { triggerEvent: event }
+)
+```
+
+---
+
+## Primitives
+
+These are the building blocks. Each owns its CSS via `styleDedup` and can be composed directly or wrapped by animation adapters.
+
+### `ModalContainer`
+
+Fixed-position layout shell. Handles horizontal alignment and scroll behavior.
+
+```tsx
+<ModalContainer alignX="center" scrollable modalId={id}>
+  {/* ModalContent, etc. */}
+</ModalContainer>
+```
+
+| Prop | Type | Default |
+|---|---|---|
+| `alignX` | `'center' \| 'left' \| 'right'` | `'center'` |
+| `scrollable` | `boolean` | — |
+| `modalId` | `string` | — |
+| `onBackdropClick` | `() => void` | — |
+| `className` | `string` | — |
+
+### `ModalContent`
+
+Content wrapper. Controls vertical alignment, pointer events during close, and the `data-disable-opacity` toggle.
+
+```tsx
+<ModalContent alignY="middle" modalState={modalState} disableOpacityTransition>
+  {/* ModalDialog, etc. */}
+</ModalContent>
+```
+
+| Prop | Type | Default |
+|---|---|---|
+| `alignY` | `'middle' \| 'top' \| 'bottom'` | — |
+| `modalState` | `ModalState` | — |
+| `disableOpacityTransition` | `boolean` | — |
+| `style` | `CSSProperties` | — |
+
+### `ModalDialog`
+
+The `<dialog open>` element with correct ARIA attributes, focus target, and `modal-dialog` styles.
+
+```tsx
+<ModalDialog
+  ref={contentRef}
+  aria-label="My Modal"
+  onKeyDown={onKeyDown}
+>
+  {children}
+</ModalDialog>
+```
+
+| Prop | Type |
+|---|---|
+| `aria-label` | `string` |
+| `className` | `string` |
+| `onKeyDown` | `(e: KeyboardEvent<HTMLDialogElement>) => void` |
+| `style` | `CSSProperties` |
+
+### `ModalBackdrop`
+
+Fixed-position backdrop with click handling via `usePointerClick`.
+
+```tsx
+<ModalBackdrop onClick={handleClose} />
+```
+
+| Prop | Type |
+|---|---|
+| `onClick` | `() => void` |
+| `className` | `string` |
+| `style` | `CSSProperties` |
+
+---
+
+## Components
+
+### `Modal`
+
+Reference implementation. Composes all four primitives into a functional non-animated modal. Use it directly for a no-animation setup, or as a reference when building a custom adapter.
+
+```tsx
+<Modal
+  aria-label="Settings"
+  alignX="center"
+  alignY="middle"
+  contentClassName="my-card"
+  dismissible
+>
+  {children}
+</Modal>
+```
+
+### `ModalRenderer`
+
+Renders all open modals from the store. Place once at the app root.
+
+```tsx
+<ModalRenderer
+  renderBackdrop={() => showBackdrop ? <ModalBackdrop /> : null}
+  renderLayer={(children) => <LayerProvider>{children}</LayerProvider>}
+  renderPortal={(children) => <Portal>{children}</Portal>}
+/>
+```
+
+| Prop | Type | Description |
+|---|---|---|
+| `renderBackdrop` | `() => ReactNode` | Backdrop; caller controls visibility and animation |
+| `renderLayer` | `(children) => ReactNode` | Wrap all modals in a layer context |
+| `renderPortal` | `(children) => ReactNode` | Wrap each modal in a portal |
+
+---
+
+## Hooks
+
+### `useModalLogic`
+
+The core modal hook. Manages registration, lifecycle, focus, and Escape key. Called by `Modal` and by animation adapters.
+
+```ts
+const {
+  contentRef,       // ref to attach to <dialog>
+  handleCloseModal, // call to begin the close sequence
+  isTopModal,       // whether this is the frontmost modal
+  layerIsActive,    // whether this modal's layer is active
+  markAtRest,       // call after enter animation completes (when delayAtRest: true)
+  modalId,          // this modal's store ID
+  modalState,       // 'opening' | 'open' | 'closing' | 'closed'
+  skipAnimation,    // whether to skip animation for this instance
+} = useModalLogic({
+  afterClose,
+  afterOpen,
+  delayAtRest,      // when true, caller must call markAtRest() to unblock closing
+  layerIsActive,    // pass from useLayerState for full layer coordination
+  onLeave,          // (done) => void — call done() after leave animation
+})
+```
+
+### `useDialogKeyDown`
+
+Composes the Escape-key close handler and `useTrapFocus` into a single `onKeyDown` for a `<dialog>`.
+
+```ts
+const onKeyDown = useDialogKeyDown({
+  dismissible,
+  handleCloseModal,
+  isTopModal,
+  layerIsActive,
+  onKeyDown: trapFocus.onKeyDown,
+})
+```
+
+---
+
+## Building an Adapter
+
+An adapter:
+
+1. Calls `useModalLogic` (with `delayAtRest: true` if it animates)
+2. Wraps `ModalContent`, `ModalDialog`, etc. with its animation library (e.g. `animated(ModalDialog)`)
+3. Calls `markAtRest()` when the enter animation completes
+4. Passes `onLeave` to play the leave animation before calling `done()`
+5. Wraps `ModalRenderer` with `renderBackdrop` to inject an animated backdrop
+
+See `@slithy/modal-spring` for a complete example.
+
+---
+
+## Exports
+
+| Export | Description |
+|---|---|
+| `Modal` | Reference non-animated modal component |
+| `ModalBackdrop` | Fixed-position backdrop primitive |
+| `ModalContainer` | Layout shell primitive |
+| `ModalContent` | Content wrapper primitive |
+| `ModalDialog` | `<dialog>` element primitive |
+| `ModalRenderer` | Renders all open modals from the store |
+| `useDialogKeyDown` | Escape + trapFocus key handler hook |
+| `useModalLogic` | Core lifecycle and behavior hook |
+| `ModalBackdropProps` | — |
+| `ModalContentProps` | — |
+| `ModalDialogProps` | — |
+| `ModalProps` | — |
+| `ModalRendererProps` | — |
+| `UseModalLogicOptions` | — |
+| `UseModalLogicResult` | — |

package/dist/index.d.ts

@@ -0,0 +1,126 @@
+import * as react from 'react';
+import { CSSProperties, KeyboardEvent } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ModalElement, ModalState } from '@slithy/modal-core';
+
+type ModalBackdropProps = {
+    className?: string;
+    onClick?: () => void;
+    style?: CSSProperties;
+};
+declare const ModalBackdrop: react.ForwardRefExoticComponent<ModalBackdropProps & react.RefAttributes<HTMLDivElement>>;
+
+type ContainerProps = {
+    alignX?: "center" | "left" | "right";
+    children: React.ReactNode;
+    className?: string;
+    modalId?: ModalElement["id"];
+    onBackdropClick?: () => void;
+    scrollable?: boolean;
+};
+declare const ModalContainer: ({ alignX, children, className, modalId, onBackdropClick, scrollable, }: ContainerProps) => react_jsx_runtime.JSX.Element;
+
+type ModalProps = {
+    "aria-label"?: string;
+    afterClose?: () => void;
+    afterOpen?: () => void;
+    alignX?: "center" | "left" | "right";
+    alignY?: "middle" | "top" | "bottom";
+    children?: React.ReactNode;
+    containerScrolling?: boolean;
+    contentClassName?: string;
+    disableOpacityTransition?: boolean;
+    dismissible?: boolean;
+    /**
+     * Called when the modal begins closing, with a `done` callback to invoke
+     * once any leave animation has finished. If omitted, the modal is removed
+     * from the store synchronously.
+     *
+     * Animation adapters provide this to delay removal until their animation
+     * completes.
+     */
+    onLeave?: (done: () => void) => void;
+};
+declare const Modal: ({ "aria-label": ariaLabel, afterClose, afterOpen, alignX, alignY, children, containerScrolling, contentClassName, disableOpacityTransition, dismissible, onLeave, }: ModalProps) => react_jsx_runtime.JSX.Element;
+
+type ModalContentProps = {
+    alignY?: "middle" | "top" | "bottom";
+    children?: React.ReactNode;
+    disableOpacityTransition?: boolean;
+    modalState?: ModalState;
+    style?: CSSProperties;
+};
+declare const ModalContent: react.ForwardRefExoticComponent<ModalContentProps & react.RefAttributes<HTMLDivElement>>;
+
+type ModalDialogProps = {
+    'aria-label'?: string;
+    children?: React.ReactNode;
+    className?: string;
+    onKeyDown?: (e: KeyboardEvent<HTMLDialogElement>) => void;
+    style?: CSSProperties;
+};
+declare const ModalDialog: react.ForwardRefExoticComponent<ModalDialogProps & react.RefAttributes<HTMLDialogElement>>;
+
+type UseDialogKeyDownOptions = {
+    dismissible: boolean;
+    handleCloseModal: () => void;
+    isTopModal: boolean;
+    layerIsActive: boolean;
+    onKeyDown?: (e: KeyboardEvent<HTMLDialogElement>) => void;
+};
+declare function useDialogKeyDown({ dismissible, handleCloseModal, isTopModal, layerIsActive, onKeyDown, }: UseDialogKeyDownOptions): (e: KeyboardEvent<HTMLDialogElement>) => void;
+
+type ModalRendererProps = {
+    /** Render an animated backdrop. Provided by animation adapters. */
+    renderBackdrop?: () => React.ReactNode;
+    /**
+     * Wrap all modal content in a layer context. Pass a `<LayerProvider>` from
+     * `@slithy/layers` for full layer-stack coordination. Defaults to a passthrough.
+     */
+    renderLayer?: (children: React.ReactNode) => React.ReactNode;
+    /**
+     * Wrap each modal in a portal. Pass a `<Portal>` from `@slithy/portal` (or
+     * any portal implementation) to render modals outside the current DOM tree.
+     * Defaults to a passthrough — no portaling.
+     */
+    renderPortal?: (children: React.ReactNode) => React.ReactNode;
+};
+declare const ModalRenderer: ({ renderBackdrop, renderLayer, renderPortal, }?: ModalRendererProps) => react.ReactNode;
+
+type UseModalLogicOptions = {
+    afterClose?: () => void;
+    afterOpen?: () => void;
+    /**
+     * When true, `atRest` (which unblocks close) is NOT set by the internal RAF.
+     * Instead, the caller must invoke the returned `markAtRest` function when the
+     * modal is ready to be closed — e.g. after an enter animation completes.
+     */
+    delayAtRest?: boolean;
+    /**
+     * Whether the modal's layer is currently the active (topmost) layer in the
+     * app. Used to gate Escape key handling when higher layers (dropdowns,
+     * tooltips, etc.) are open on top of the modal.
+     *
+     * Defaults to `true`. Pass a value from `useLayerState` when using
+     * `@slithy/layers` for full layer-stack coordination.
+     */
+    layerIsActive?: boolean;
+    onLeave?: (done: () => void) => void;
+};
+type UseModalLogicResult = {
+    contentRef: React.RefObject<HTMLDialogElement | null>;
+    handleCloseModal: () => void;
+    skipAnimation: boolean | undefined;
+    isTopModal: boolean;
+    layerIsActive: boolean;
+    /**
+     * Only meaningful when `delayAtRest: true` was passed. Call this once the
+     * modal is fully open (e.g. after an enter animation) to allow closing.
+     */
+    markAtRest: () => void;
+    modalId: string;
+    modalState: ModalState;
+};
+declare function useModalLogic({ afterClose, afterOpen, delayAtRest, layerIsActive, onLeave, }: UseModalLogicOptions): UseModalLogicResult;
+
+export { Modal, ModalBackdrop, type ModalBackdropProps, ModalContainer, ModalContent, type ModalContentProps, ModalDialog, type ModalDialogProps, type ModalProps, ModalRenderer, type ModalRendererProps, type UseModalLogicOptions, type UseModalLogicResult, useDialogKeyDown, useModalLogic };

package/dist/index.js

@@ -0,0 +1,414 @@
+// src/ModalBackdrop.tsx
+import { usePointerClick } from "@slithy/utils";
+import { forwardRef } from "react";
+
+// #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/ModalBackdrop.css
+styleInject("[data-slithy=modal-backdrop] {\n  background: rgba(0, 0, 0, 0.25);\n  inset: 0;\n  overflow: hidden;\n  position: fixed;\n  user-select: none;\n  -webkit-user-select: none;\n}\n");
+
+// src/ModalBackdrop.tsx
+import { jsx } from "react/jsx-runtime";
+var ModalBackdrop = forwardRef(
+  ({ className, onClick, style }, ref) => {
+    const pointerClick = usePointerClick(onClick);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        ...pointerClick,
+        "aria-hidden": "true",
+        className,
+        "data-slithy": "modal-backdrop",
+        "data-testid": "modal-backdrop",
+        style
+      }
+    );
+  }
+);
+ModalBackdrop.displayName = "ModalBackdrop";
+
+// src/ModalContainer.css
+styleInject('[data-slithy=modal-container] {\n  backface-visibility: hidden;\n  font-size: 0px;\n  inset: 0;\n  line-height: 1em;\n  outline: none;\n  overflow-x: hidden;\n  position: fixed;\n  touch-action: manipulation;\n  -webkit-tap-highlight-color: transparent;\n}\n[data-slithy=modal-container]::before {\n  content: "";\n  display: inline-block;\n  height: 100%;\n  vertical-align: middle;\n  width: 0;\n}\n[data-slithy=modal-container-click-target] {\n  inset: 0;\n  position: fixed;\n}\n');
+
+// src/ModalContainer.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var ModalContainer = ({
+  alignX = "center",
+  children,
+  className,
+  modalId,
+  onBackdropClick,
+  scrollable
+}) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    className,
+    "data-modalid": modalId,
+    "data-slithy": "modal-container",
+    "data-testid": "modal-container",
+    style: { overflowY: scrollable ? "auto" : "hidden", textAlign: alignX },
+    children: [
+      /* @__PURE__ */ jsx2(
+        "div",
+        {
+          "aria-hidden": "true",
+          "data-slithy": "modal-container-click-target",
+          onClick: onBackdropClick
+        }
+      ),
+      children
+    ]
+  }
+);
+
+// src/Modal.tsx
+import { useTrapFocus } from "@slithy/utils";
+
+// src/ModalContent.tsx
+import { forwardRef as forwardRef2 } from "react";
+
+// src/ModalContent.css
+styleInject("[data-slithy=modal-content] {\n  display: inline-block;\n  width: 100%;\n}\n[data-slithy=modal-content][data-disable-opacity] {\n  opacity: 1 !important;\n}\n");
+
+// src/ModalContent.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var ModalContent = forwardRef2(
+  ({ alignY, children, disableOpacityTransition, modalState, style }, ref) => /* @__PURE__ */ jsx3(
+    "div",
+    {
+      ref,
+      "data-disable-opacity": disableOpacityTransition || void 0,
+      "data-slithy": "modal-content",
+      style: {
+        pointerEvents: modalState === "closing" ? "none" : void 0,
+        verticalAlign: alignY,
+        ...style
+      },
+      children
+    }
+  )
+);
+ModalContent.displayName = "ModalContent";
+
+// src/ModalDialog.tsx
+import { forwardRef as forwardRef3 } from "react";
+
+// src/ModalDialog.css
+styleInject("[data-slithy=modal-dialog] {\n  background-color: Canvas;\n  border: none;\n  display: inline-block;\n  font-size: 1rem;\n  line-height: normal;\n  padding: 0;\n  position: relative;\n  text-align: left;\n  touch-action: none;\n}\n[data-slithy=modal-dialog]:focus-visible {\n  outline: none;\n}\n");
+
+// src/ModalDialog.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var ModalDialog = forwardRef3(
+  ({ "aria-label": ariaLabel, children, className, onKeyDown, style }, ref) => /* @__PURE__ */ jsx4(
+    "dialog",
+    {
+      ref,
+      open: true,
+      "aria-label": ariaLabel,
+      "aria-modal": "true",
+      className,
+      "data-slithy": "modal-dialog",
+      onKeyDown,
+      tabIndex: -1,
+      style,
+      children
+    }
+  )
+);
+ModalDialog.displayName = "ModalDialog";
+
+// src/useDialogKeyDown.ts
+import { useCallback } from "react";
+function useDialogKeyDown({
+  dismissible,
+  handleCloseModal,
+  isTopModal,
+  layerIsActive,
+  onKeyDown
+}) {
+  return useCallback(
+    (e) => {
+      if (e.key === "Escape" && dismissible && isTopModal && layerIsActive) {
+        e.preventDefault();
+        e.stopPropagation();
+        handleCloseModal();
+        return;
+      }
+      onKeyDown?.(e);
+    },
+    [dismissible, handleCloseModal, isTopModal, layerIsActive, onKeyDown]
+  );
+}
+
+// src/useModalLogic.ts
+import { useCallback as useCallback2, useEffect as useEffect2, useRef, useState } from "react";
+import { useModalStore } from "@slithy/modal-core";
+import { getFocusableElements, useComponentMounted, usePrevious } from "@slithy/utils";
+
+// src/ModalProvider.tsx
+import { useEffect } from "react";
+import { createStoreContext } from "@slithy/utils";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var {
+  storeContext: ModalStoreContext,
+  useState: useModalState,
+  useStore: useModalContextStore
+} = createStoreContext({
+  defaultState: () => ({
+    enqueuedToClose: false,
+    modalId: "",
+    state: "closed",
+    triggerElement: void 0
+  }),
+  name: "ModalProvider"
+});
+var ModalProvider = ({
+  children,
+  enqueuedToClose = false,
+  modalId,
+  skipAnimation,
+  state = "closed",
+  triggerElement
+}) => {
+  const currentStore = useModalContextStore(void 0, {
+    enqueuedToClose,
+    modalId,
+    skipAnimation,
+    state,
+    triggerElement
+  });
+  useEffect(() => {
+    currentStore.setState({ enqueuedToClose, modalId, skipAnimation, state, triggerElement });
+  }, [currentStore, enqueuedToClose, modalId, skipAnimation, state, triggerElement]);
+  return /* @__PURE__ */ jsx5(ModalStoreContext.Provider, { value: currentStore, children });
+};
+
+// src/useModalLogic.ts
+function useModalLogic({
+  afterClose,
+  afterOpen,
+  delayAtRest = false,
+  layerIsActive = true,
+  onLeave
+}) {
+  const { enqueuedToClose, modalId, state: modalState, triggerElement } = useModalState(
+    ({ enqueuedToClose: enqueuedToClose2, modalId: modalId2, state, triggerElement: triggerElement2 }) => ({
+      enqueuedToClose: enqueuedToClose2,
+      modalId: modalId2,
+      state,
+      triggerElement: triggerElement2
+    })
+  );
+  const { removeModal, setBackdropId, skipAnimation, topModalId } = useModalStore(
+    ({ modals, removeModal: removeModal2, setBackdropId: setBackdropId2, topModalId: topModalId2 }) => ({
+      removeModal: removeModal2,
+      setBackdropId: setBackdropId2,
+      skipAnimation: modals.find((m) => m.id === modalId)?.skipAnimation,
+      topModalId: topModalId2
+    })
+  );
+  const isMounted = useComponentMounted();
+  const [atRest, setAtRest] = useState(false);
+  const isClosingRef = useRef(false);
+  const contentRef = useRef(null);
+  const isTopModal = modalId === topModalId;
+  const previousIsTopModal = usePrevious(isTopModal);
+  const completeClose = useCallback2(() => {
+    removeModal(modalId);
+    afterClose?.();
+  }, [removeModal, modalId, afterClose]);
+  const handleCloseModal = useCallback2(() => {
+    if (!atRest || isClosingRef.current) return;
+    isClosingRef.current = true;
+    useModalStore.getState().updateModalState({ id: modalId, nextState: "closing" });
+    setBackdropId(modalId);
+    setTimeout(() => {
+      if (!triggerElement || !document.contains(triggerElement)) return;
+      triggerElement.focus();
+      if (triggerElement.contains(document.activeElement)) return;
+      const { firstElement } = getFocusableElements(triggerElement);
+      firstElement?.focus();
+    }, 0);
+    if (onLeave) {
+      onLeave(completeClose);
+    } else {
+      completeClose();
+    }
+  }, [atRest, modalId, setBackdropId, triggerElement, onLeave, completeClose]);
+  const handleCloseModalRef = useRef(handleCloseModal);
+  handleCloseModalRef.current = handleCloseModal;
+  useEffect2(() => {
+    if (enqueuedToClose && atRest) {
+      handleCloseModalRef.current();
+    }
+  }, [enqueuedToClose, atRest]);
+  const markAtRest = useCallback2(() => {
+    setAtRest(true);
+  }, []);
+  useEffect2(() => {
+    const open = () => {
+      if (!isMounted.current) return;
+      if (!delayAtRest) setAtRest(true);
+      useModalStore.getState().updateModalState({ id: modalId, nextState: "open" });
+      afterOpen?.();
+      if (contentRef.current && !contentRef.current.contains(document.activeElement)) {
+        contentRef.current.focus();
+      }
+    };
+    const skip = useModalStore.getState().modals.find((m) => m.id === modalId)?.skipAnimation;
+    if (skip) {
+      open();
+      return;
+    }
+    const raf = requestAnimationFrame(open);
+    return () => cancelAnimationFrame(raf);
+  }, []);
+  useEffect2(() => {
+    if (!contentRef.current || !isTopModal) return;
+    if (contentRef.current.contains(document.activeElement)) return;
+    if (!previousIsTopModal) {
+      contentRef.current.focus();
+    }
+  }, [isTopModal, previousIsTopModal]);
+  return {
+    contentRef,
+    handleCloseModal,
+    skipAnimation,
+    isTopModal,
+    layerIsActive,
+    markAtRest,
+    modalId,
+    modalState
+  };
+}
+
+// src/Modal.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var Modal = ({
+  "aria-label": ariaLabel,
+  afterClose,
+  afterOpen,
+  alignX = "center",
+  alignY = "middle",
+  children,
+  containerScrolling = true,
+  contentClassName,
+  disableOpacityTransition,
+  dismissible = true,
+  onLeave
+}) => {
+  const trapFocus = useTrapFocus();
+  const {
+    contentRef,
+    handleCloseModal,
+    isTopModal,
+    layerIsActive,
+    modalId,
+    modalState
+  } = useModalLogic({ afterClose, afterOpen, onLeave });
+  const onKeyDown = useDialogKeyDown({
+    dismissible,
+    handleCloseModal,
+    isTopModal,
+    layerIsActive,
+    onKeyDown: trapFocus.onKeyDown
+  });
+  return /* @__PURE__ */ jsx6(
+    ModalContainer,
+    {
+      alignX,
+      modalId,
+      onBackdropClick: dismissible ? handleCloseModal : void 0,
+      scrollable: containerScrolling,
+      children: /* @__PURE__ */ jsx6(
+        ModalContent,
+        {
+          alignY,
+          disableOpacityTransition,
+          modalState,
+          children: /* @__PURE__ */ jsx6(
+            ModalDialog,
+            {
+              ref: contentRef,
+              "aria-label": ariaLabel,
+              className: contentClassName,
+              onKeyDown,
+              children
+            }
+          )
+        }
+      )
+    }
+  );
+};
+
+// src/ModalRenderer.tsx
+import { Fragment, useLayoutEffect } from "react";
+import { useModalStore as useModalStore2 } from "@slithy/modal-core";
+import { bodyOverflowEffect } from "@slithy/utils";
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+var ModalRenderer = ({
+  renderBackdrop,
+  renderLayer,
+  renderPortal
+} = {}) => {
+  const { enqueuedToClose, modals } = useModalStore2(
+    ({ enqueuedToClose: enqueuedToClose2, modals: modals2 }) => ({ enqueuedToClose: enqueuedToClose2, modals: modals2 })
+  );
+  const modalsExist = modals.length > 0;
+  useLayoutEffect(() => bodyOverflowEffect(modalsExist), [modalsExist]);
+  const wrapLayer = renderLayer ?? ((c) => c);
+  const wrapPortal = renderPortal ?? ((c) => c);
+  return wrapLayer(
+    /* @__PURE__ */ jsxs2(Fragment2, { children: [
+      renderBackdrop?.(),
+      modals.map(({ id, modal, skipAnimation, state, triggerElement }) => {
+        const isEnqueuedToClose = enqueuedToClose.includes(id);
+        return /* @__PURE__ */ jsx7(Fragment, { children: wrapPortal(
+          /* @__PURE__ */ jsx7(
+            ModalProvider,
+            {
+              enqueuedToClose: isEnqueuedToClose,
+              modalId: id,
+              skipAnimation,
+              state,
+              triggerElement,
+              children: modal
+            }
+          )
+        ) }, id);
+      })
+    ] })
+  );
+};
+export {
+  Modal,
+  ModalBackdrop,
+  ModalContainer,
+  ModalContent,
+  ModalDialog,
+  ModalRenderer,
+  useDialogKeyDown,
+  useModalLogic
+};

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@slithy/modal-kit",
+  "version": "0.1.2",
+  "description": "Headless modal React components for @slithy/modal-core.",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "dependencies": {
+    "@slithy/modal-core": "0.1.2",
+    "@slithy/utils": "0.3.0"
+  },
+  "peerDependencies": {
+    "react": "^17 || ^18 || ^19"
+  },
+  "devDependencies": {
+    "@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/eslint-config": "0.0.0",
+    "@slithy/tsconfig": "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"
+  }
+}