react-morpheus 0.1.1 → 0.1.3

package/README.md

@@ -5,9 +5,13 @@ 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.
+Overlay clicks and Escape key presses call `onCloseIntent`; update your
+controlled state there. Use `afterClose` for work that should run after the
+closing animation completes.
 
 ```tsx
 import { Morpheus, MorphAnchor } from "react-morpheus";
+import "react-morpheus/style.css";
 
 function Example() {
   const [expanded, setExpanded] = useState(false);
@@ -24,7 +28,8 @@ function Example() {
         direction="bottom"
         anchor={MorphAnchor.TopMiddle}
         expanded={expanded}
-        onClose={() => setExpanded(false)}
+        onCloseIntent={() => setExpanded(false)}
+        afterClose={() => console.log("closed")}
         collapsedContent={source}
         expandedContent={<div>Expanded content</div>}
       />

package/dist/index.d.ts

@@ -77,8 +77,8 @@ type MorphProps = {
     direction: MorphDirection;
     anchor?: MorphAnchor | undefined;
     expanded: boolean;
-    onOpen?: (() => void) | undefined;
-    onClose?: (() => void) | undefined;
+    onCloseIntent?: (() => void) | undefined;
+    afterClose?: (() => void) | undefined;
     collapsedContent: ReactNode;
     expandedContent: ReactNode;
     className?: string;
@@ -89,7 +89,7 @@ type MorphProps = {
 };
 type MorphOverlayProps = {
     expanded: boolean;
-    onClose?: (() => void) | undefined;
+    onCloseIntent?: (() => void) | undefined;
     color: string;
     opacity: number;
     blur: number;
@@ -126,14 +126,13 @@ 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, onCloseIntent, afterClose, collapsedContent, expandedContent, className, overlayColor, overlayOpacity, overlayBlur, 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";
@@ -291,12 +291,12 @@ function getOverlayBackgroundColor(color, opacity) {
 }
 function MorphOverlay({
   expanded,
-  onClose,
+  onCloseIntent,
   color,
   opacity,
   blur
 }) {
-  return /* @__PURE__ */ jsx(AnimatePresence, { children: expanded && onClose ? /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: expanded && onCloseIntent ? /* @__PURE__ */ jsx(
     motion.button,
     {
       type: "button",
@@ -317,7 +317,7 @@ function MorphOverlay({
         backgroundColor: getOverlayBackgroundColor(color, opacity),
         WebkitBackdropFilter: `blur(${blur}px)`
       },
-      onClick: onClose
+      onClick: onCloseIntent
     }
   ) : null });
 }
@@ -399,8 +399,7 @@ function MorphContentLayers({
   sourceTransition,
   sourceOpacityTransition,
   targetTransition,
-  targetOpacityTransition,
-  onOpen
+  targetOpacityTransition
 }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx2(
@@ -419,7 +418,6 @@ function MorphContentLayers({
           ...sourceTransition,
           opacity: sourceOpacityTransition
         },
-        onClick: expanded ? void 0 : onOpen,
         style: {
           width: collapsedLayerSize.width,
           height: collapsedLayerSize.height,
@@ -460,8 +458,8 @@ function Morpheus({
   direction,
   anchor,
   expanded,
-  onOpen,
-  onClose,
+  onCloseIntent,
+  afterClose,
   collapsedContent,
   expandedContent,
   className = "relative inline-block align-top",
@@ -473,6 +471,7 @@ function Morpheus({
   const measurements = useMorphMeasurements();
   const [animationEnabled, setAnimationEnabled] = useState2(false);
   const [shellOverflowVisible, setShellOverflowVisible] = useState2(false);
+  const hasOpenedRef = useRef2(expanded);
   useEffect(() => {
     if (!measurements.ready) {
       return;
@@ -480,6 +479,18 @@ function Morpheus({
     const frame = requestAnimationFrame(() => setAnimationEnabled(true));
     return () => cancelAnimationFrame(frame);
   }, [measurements.ready]);
+  useEffect(() => {
+    if (!expanded || !onCloseIntent) {
+      return;
+    }
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape" && !event.repeat) {
+        onCloseIntent();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [expanded, onCloseIntent]);
   const motionState = getMorphMotionState({
     expanded,
     direction,
@@ -496,7 +507,7 @@ function Morpheus({
       MorphOverlay,
       {
         expanded,
-        onClose,
+        onCloseIntent,
         color: overlayColor,
         opacity: overlayOpacity,
         blur: overlayBlur
@@ -512,7 +523,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: "relative mx-auto block w-fit align-top", children: shouldRenderStaticSource ? /* @__PURE__ */ jsx2("div", { className: "inline-block align-top", children: collapsedContent }) : /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx2(
           "div",
           {
@@ -535,7 +546,13 @@ function Morpheus({
             spring: motionState.activeSpring,
             onMorphComplete: () => {
               if (expanded) {
+                hasOpenedRef.current = true;
                 setShellOverflowVisible(true);
+                return;
+              }
+              if (hasOpenedRef.current) {
+                hasOpenedRef.current = false;
+                afterClose?.();
               }
             },
             onMorphStart: () => setShellOverflowVisible(false),
@@ -555,8 +572,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;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:root,:host{--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1)}}@layer utilities{.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:0}.inset-x-0{inset-inline:0}.top-0{top:0}.z-0{z-index:0}.z-40{z-index:40}.z-50{z-index:50}.mx-auto{margin-inline:auto}.block{display:block}.hidden{display:none}.inline-block{display:inline-block}.w-fit{width:fit-content}.cursor-default{cursor:default}.align-top{vertical-align:top}.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)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.\[\&\>\*\:first-child\]\:\!border-transparent>:first-child{border-color:#0000!important}.\[\&\>\*\:first-child\]\:\!bg-transparent>:first-child{background-color:#0000!important}.\[\&\>\*\:first-child\]\:\!shadow-none>:first-child{--tw-shadow:0 0 #0000!important;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)!important}}@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}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}

package/package.json

@@ -1,10 +1,12 @@
 {
   "name": "react-morpheus",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "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,21 @@
   "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",
+    "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 +39,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"
   },