react-morpheus 0.1.1 → 0.1.4

package/README.md

@@ -3,11 +3,16 @@
 A controlled React component for morphing one UI state into another.
 
 `Morpheus` does not manage its own open state. Keep the `expanded` boolean in
-your app state, render your trigger wherever it belongs, and pass the same
-source content to `collapsedContent` so Morpheus can measure and morph from it.
+your app state and pass your trigger to `collapsedContent` so Morpheus can
+render, measure, and morph from it. Opening is the responsibility of the source
+component's own click handler.
+Overlay clicks call `onClose`; update your controlled state there. Use
+`beforeClose` and `afterClose` for work that should run around the closing
+animation.
 
 ```tsx
 import { Morpheus, MorphAnchor } from "react-morpheus";
+import "react-morpheus/style.css";
 
 function Example() {
   const [expanded, setExpanded] = useState(false);
@@ -18,25 +23,35 @@ function Example() {
   );
 
   return (
-    <>
-      {source}
-      <Morpheus
-        direction="bottom"
-        anchor={MorphAnchor.TopMiddle}
-        expanded={expanded}
-        onClose={() => setExpanded(false)}
-        collapsedContent={source}
-        expandedContent={<div>Expanded content</div>}
-      />
-    </>
+    <Morpheus
+      direction="bottom"
+      anchor={MorphAnchor.TopMiddle}
+      expanded={expanded}
+      onClose={() => setExpanded(false)}
+      beforeClose={() => console.log("closing")}
+      afterClose={() => console.log("closed")}
+      collapsedContent={source}
+      expandedContent={<div>Expanded content</div>}
+      overlayZIndex={1200}
+    />
   );
 }
 ```
 
+`overlayZIndex` controls the expanded morph surface. The overlay renders one
+layer below it so apps can move the whole morphing stack above their own
+chrome. Without this prop, Morpheus uses surface `1000` and overlay `999`.
+
+Do not place Morpheus inside a container that clips overflow, such as
+`overflow: hidden`, `overflow: clip`, or scroll containers. The expanded surface
+is positioned from the local source element and can extend outside its original
+container while animating.
+
 ## Scripts
 
 - `bun run build` builds declarations and bundled ESM output.
-- `bun run tag` creates an annotated git tag for the current package version.
-- `bun run tag:push` pushes tags to `origin`.
-- `bun run deploy:npm` builds and publishes to npm.
-- `bun run release:npm` builds, creates the version tag, and publishes to npm.
+- `bun run check` runs TypeScript without emitting files.
+- `bun run publish:npm` builds and publishes to npm.
+- `bun run release:patch` bumps the patch version, builds, tags, and publishes.
+- `bun run release:minor` bumps the minor version, builds, tags, and publishes.
+- `bun run release:major` bumps the major version, builds, tags, and publishes.

package/dist/index.d.ts

@@ -77,14 +77,16 @@ type MorphProps = {
     direction: MorphDirection;
     anchor?: MorphAnchor | undefined;
     expanded: boolean;
-    onOpen?: (() => void) | undefined;
     onClose?: (() => void) | undefined;
+    beforeClose?: (() => void) | undefined;
+    afterClose?: (() => void) | undefined;
     collapsedContent: ReactNode;
     expandedContent: ReactNode;
     className?: string;
     overlayColor?: string;
     overlayOpacity?: number;
     overlayBlur?: number;
+    overlayZIndex?: number;
     spring?: Transition;
 };
 type MorphOverlayProps = {
@@ -93,6 +95,7 @@ type MorphOverlayProps = {
     color: string;
     opacity: number;
     blur: number;
+    zIndex: number;
 };
 type MorphMeasurementNodesProps = {
     collapsedRef: RefObject<HTMLDivElement | null>;
@@ -106,6 +109,7 @@ type MorphShellProps = {
     animatedSize: PanelSize;
     visualStyle: PanelVisualStyle;
     overflowVisible: boolean;
+    zIndex: number;
     spring: Transition;
     onMorphComplete: () => void;
     onMorphStart: () => void;
@@ -126,14 +130,12 @@ type MorphContentLayersProps = {
     sourceOpacityTransition: Transition;
     targetTransition: Transition;
     targetOpacityTransition: Transition;
-    onOpen?: (() => void) | undefined;
 };
 type MorphLayerInteractivityProps = {
-    "aria-hidden": boolean;
     inert?: boolean;
 };
 
-declare function Morpheus({ direction, anchor, expanded, onOpen, onClose, collapsedContent, expandedContent, className, overlayColor, overlayOpacity, overlayBlur, spring, }: MorphProps): react.JSX.Element;
+declare function Morpheus({ direction, anchor, expanded, onClose, beforeClose, afterClose, collapsedContent, expandedContent, className, overlayColor, overlayOpacity, overlayBlur, overlayZIndex: zIndex, spring, }: MorphProps): react.JSX.Element;
 
 declare const defaultAnchorByDirection: Record<MorphDirection, MorphAnchor>;
 declare const morphSpringPresets: {

package/dist/index.js

@@ -1,6 +1,6 @@
 // src/component.tsx
 import { motion as motion2 } from "framer-motion";
-import { useEffect, useState as useState2 } from "react";
+import { useEffect, useRef as useRef2, useState as useState2 } from "react";
 
 // src/measurement.ts
 import { useLayoutEffect, useRef, useState } from "react";
@@ -226,7 +226,7 @@ function invertPosition(position) {
   };
 }
 function getLayerInteractivityProps(interactive) {
-  return interactive ? { "aria-hidden": false } : { "aria-hidden": true, inert: true };
+  return interactive ? {} : { inert: true };
 }
 function getMorphMotionState({
   expanded,
@@ -294,14 +294,15 @@ function MorphOverlay({
   onClose,
   color,
   opacity,
-  blur
+  blur,
+  zIndex
 }) {
-  return /* @__PURE__ */ jsx(AnimatePresence, { children: expanded && onClose ? /* @__PURE__ */ jsx(
-    motion.button,
+  const MotionOverlay = onClose ? motion.button : motion.div;
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: expanded ? /* @__PURE__ */ jsx(
+    MotionOverlay,
     {
-      type: "button",
-      "aria-label": "Close morph",
-      className: "fixed inset-0 z-40 cursor-default",
+      ...onClose ? { type: "button", "aria-label": "Close morph" } : { "aria-hidden": true },
+      className: "rmorph:fixed rmorph:inset-0 rmorph:cursor-default",
       initial: {
         opacity: 0
       },
@@ -315,7 +316,8 @@ function MorphOverlay({
       style: {
         backdropFilter: `blur(${blur}px)`,
         backgroundColor: getOverlayBackgroundColor(color, opacity),
-        WebkitBackdropFilter: `blur(${blur}px)`
+        WebkitBackdropFilter: `blur(${blur}px)`,
+        zIndex: zIndex - 1
       },
       onClick: onClose
     }
@@ -324,7 +326,7 @@ function MorphOverlay({
 
 // src/component.tsx
 import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
-var liveSurfaceContentClassName = "absolute [&>*:first-child]:!border-transparent [&>*:first-child]:!bg-transparent [&>*:first-child]:!shadow-none";
+var liveSurfaceContentClassName = "rmorph:absolute";
 function MorphMeasurementNodes({
   collapsedRef,
   expandedRef,
@@ -337,7 +339,7 @@ function MorphMeasurementNodes({
       {
         ref: collapsedRef,
         "aria-hidden": "true",
-        className: "invisible absolute inset-x-0 top-0 pointer-events-none",
+        className: "rmorph:invisible rmorph:absolute rmorph:inset-x-0 rmorph:top-0 rmorph:pointer-events-none",
         children: collapsedContent
       }
     ),
@@ -346,7 +348,7 @@ function MorphMeasurementNodes({
       {
         ref: expandedRef,
         "aria-hidden": "true",
-        className: "invisible absolute inset-x-0 top-0 pointer-events-none",
+        className: "rmorph:invisible rmorph:absolute rmorph:inset-x-0 rmorph:top-0 rmorph:pointer-events-none",
         children: expandedContent
       }
     )
@@ -358,6 +360,7 @@ function MorphShell({
   animatedSize,
   visualStyle,
   overflowVisible,
+  zIndex,
   spring,
   onMorphComplete,
   onMorphStart,
@@ -366,7 +369,7 @@ function MorphShell({
   return /* @__PURE__ */ jsx2(
     motion2.div,
     {
-      className: `absolute shadow-xs ${expanded ? "z-50" : "z-0"}`,
+      className: "rmorph:absolute rmorph:shadow-xs",
       initial: false,
       animate: {
         width: animatedSize.width,
@@ -378,7 +381,8 @@ function MorphShell({
       onAnimationComplete: onMorphComplete,
       onAnimationStart: onMorphStart,
       style: {
-        overflow: overflowVisible ? "visible" : "hidden"
+        overflow: overflowVisible ? "visible" : "hidden",
+        zIndex: expanded ? zIndex : 0
       },
       transition: spring,
       children
@@ -399,8 +403,7 @@ function MorphContentLayers({
   sourceTransition,
   sourceOpacityTransition,
   targetTransition,
-  targetOpacityTransition,
-  onOpen
+  targetOpacityTransition
 }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx2(
@@ -419,7 +422,6 @@ function MorphContentLayers({
           ...sourceTransition,
           opacity: sourceOpacityTransition
         },
-        onClick: expanded ? void 0 : onOpen,
         style: {
           width: collapsedLayerSize.width,
           height: collapsedLayerSize.height,
@@ -460,19 +462,23 @@ function Morpheus({
   direction,
   anchor,
   expanded,
-  onOpen,
   onClose,
+  beforeClose,
+  afterClose,
   collapsedContent,
   expandedContent,
-  className = "relative inline-block align-top",
+  className = "rmorph:relative rmorph:inline-block rmorph:align-top",
   overlayColor = "#05070a",
   overlayOpacity = 0.54,
   overlayBlur = 0,
+  overlayZIndex: zIndex = 1e3,
   spring = defaultPanelSpring
 }) {
   const measurements = useMorphMeasurements();
   const [animationEnabled, setAnimationEnabled] = useState2(false);
   const [shellOverflowVisible, setShellOverflowVisible] = useState2(false);
+  const hasOpenedRef = useRef2(expanded);
+  const beforeCloseCalledRef = useRef2(false);
   useEffect(() => {
     if (!measurements.ready) {
       return;
@@ -499,7 +505,8 @@ function Morpheus({
         onClose,
         color: overlayColor,
         opacity: overlayOpacity,
-        blur: overlayBlur
+        blur: overlayBlur,
+        zIndex
       }
     ),
     /* @__PURE__ */ jsxs("div", { className, "aria-live": "polite", children: [
@@ -512,7 +519,7 @@ function Morpheus({
           expandedContent
         }
       ),
-      /* @__PURE__ */ jsx2("div", { className: "relative mx-auto block w-fit align-top", children: shouldRenderStaticSource ? /* @__PURE__ */ jsx2("div", { className: "inline-block align-top", onClick: onOpen, children: collapsedContent }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx2("div", { className: "rmorph:relative rmorph:mx-auto rmorph:block rmorph:w-fit rmorph:align-top", children: shouldRenderStaticSource ? /* @__PURE__ */ jsx2("div", { className: "rmorph:inline-block rmorph:align-top", children: collapsedContent }) : /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx2(
           "div",
           {
@@ -532,13 +539,27 @@ function Morpheus({
             animatedSize: motionState.animatedSize,
             visualStyle: motionState.visualStyle,
             overflowVisible,
+            zIndex,
             spring: motionState.activeSpring,
             onMorphComplete: () => {
               if (expanded) {
+                hasOpenedRef.current = true;
+                beforeCloseCalledRef.current = false;
                 setShellOverflowVisible(true);
+                return;
               }
+              if (hasOpenedRef.current) {
+                hasOpenedRef.current = false;
+                afterClose?.();
+              }
+            },
+            onMorphStart: () => {
+              if (!expanded && hasOpenedRef.current && !beforeCloseCalledRef.current) {
+                beforeCloseCalledRef.current = true;
+                beforeClose?.();
+              }
+              setShellOverflowVisible(false);
             },
-            onMorphStart: () => setShellOverflowVisible(false),
             children: /* @__PURE__ */ jsx2(
               MorphContentLayers,
               {
@@ -555,8 +576,7 @@ function Morpheus({
                 sourceTransition: motionState.sourceTransition,
                 sourceOpacityTransition: motionState.sourceOpacityTransition,
                 targetTransition: motionState.targetTransition,
-                targetOpacityTransition: motionState.targetOpacityTransition,
-                onOpen
+                targetOpacityTransition: motionState.targetOpacityTransition
               }
             )
           }

package/dist/style.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}.rmorph\:pointer-events-none{pointer-events:none}.rmorph\:invisible{visibility:hidden}.rmorph\:absolute{position:absolute}.rmorph\:fixed{position:fixed}.rmorph\:relative{position:relative}.rmorph\:inset-0{inset:0}.rmorph\:inset-x-0{inset-inline:0}.rmorph\:top-0{top:0}.rmorph\:mx-auto{margin-inline:auto}.rmorph\:block{display:block}.rmorph\:inline-block{display:inline-block}.rmorph\:w-fit{width:fit-content}.rmorph\:cursor-default{cursor:default}.rmorph\:align-top{vertical-align:top}.rmorph\:shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}

package/package.json

@@ -1,10 +1,12 @@
 {
   "name": "react-morpheus",
-  "version": "0.1.1",
+  "version": "0.1.4",
   "description": "A React component for morphing one surface into other.",
   "type": "module",
   "license": "MIT",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "files": [
     "dist",
     "README.md"
@@ -12,16 +14,22 @@
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "style": "./dist/style.css",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./style.css": "./dist/style.css",
     "./package.json": "./package.json"
   },
   "scripts": {
-    "build": "tsup src/index.ts --format esm --dts --external react --external react-dom --external framer-motion --clean",
+    "prepare": "bun run build",
+    "build": "bun run build:js && bun run build:css",
+    "build:js": "tsup src/index.ts --format esm --dts --external react --external react-dom --external framer-motion --clean",
+    "build:css": "tailwindcss -i src/style.css -o dist/style.css --minify",
     "check": "tsc --noEmit",
+    "publish:npm": "bun run scripts/publish.ts",
     "release:minor": "bun run scripts/release.ts minor",
     "release:major": "bun run scripts/release.ts major",
     "release:patch": "bun run scripts/release.ts patch"
@@ -32,12 +40,14 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
+    "@tailwindcss/cli": "^4.3.3",
     "@types/bun": "^1.3.14",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "framer-motion": "^12.42.2",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
+    "tailwindcss": "^4.3.3",
     "tsup": "^8.5.1",
     "typescript": "^6.0.3"
   },