prettier-modals 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 srdavo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,179 @@
+# Prettier Modals
+
+A tiny JavaScript class that brings beautiful open/close animations to native `<dialog>` elements using [GSAP](https://gsap.com/) and its [Flip plugin](https://gsap.com/docs/v3/Plugins/Flip/).
+
+The modal morphs **from** the trigger button and collapses **back into it** when closed — with elastic easing, blur, and fade effects. No frameworks, no dependencies beyond GSAP.
+
+## Features
+
+- Uses the native HTML `<dialog>` element (accessible by default)
+- Smooth elastic open animation with blur fade-in
+- Closing animation with border-radius morph, blur, and fade-out
+- Automatic style injection (no extra CSS file needed)
+- Respects `prefers-reduced-motion`
+- SSR-safe, ships ESM + CJS + TypeScript types
+- Lightweight — GSAP is the only (peer) dependency
+
+## Installation
+
+```bash
+npm install prettier-modals gsap
+```
+
+GSAP is a **peer dependency** (`>=3.12`) — install it alongside Prettier Modals. The package ships ESM, CJS, and TypeScript types.
+
+## Usage
+
+### 1. Register the GSAP plugins
+
+Prettier Modals imports GSAP, `Flip`, and `CustomEase` internally, but GSAP requires the plugins to be registered once in your app:
+
+```js
+import gsap from 'gsap'
+import { Flip } from 'gsap/Flip'
+import { CustomEase } from 'gsap/CustomEase'
+
+gsap.registerPlugin(Flip, CustomEase)
+```
+
+> With a bundler (Vite, webpack, Angular CLI…) this resolves GSAP to a single instance automatically. See [Running without a bundler](#running-without-a-bundler) for the CDN setup.
+
+### 2. Create the instance
+
+```js
+import { PrettyModal } from 'prettier-modals'
+
+const prettyModal = new PrettyModal()
+```
+
+### 3. Add a `<dialog>` and a trigger
+
+The trigger element is **explicit** — pass the element the modal should morph from. From an inline handler, use `this`:
+
+```html
+<button onclick="prettyModal.open('my-modal', { trigger: this })">Open</button>
+
+<dialog id="my-modal">
+  <h1>Hello world!</h1>
+  <button onclick="prettyModal.close('my-modal')">Close</button>
+</dialog>
+```
+
+You can pass either an **id string** or an **`HTMLElement`** for both the dialog and the trigger — handy from frameworks where you hold element references:
+
+```js
+prettyModal.open(dialogEl, { trigger: buttonEl, anchor: 'origin' })
+```
+
+## API
+
+### `new PrettyModal(options?)`
+
+| Option | Type | Default | Description |
+|---|---|---|---|
+| `anchor` | `'center' \| 'origin'` | `'center'` | Where the modal opens from. `origin` positions it near the trigger. |
+| `duration` | `number` | `0.4` | Flip animation duration (seconds). |
+| `ease` | `string` | elastic | `CustomEase` SVG path for the Flip tween. |
+| `respectReducedMotion` | `boolean` | `true` | Skip animation when the user prefers reduced motion. |
+| `onOpen` | `(dialog) => void` | — | Called after the open animation completes. |
+| `onClose` | `(dialog) => void` | — | Called after the close animation completes. |
+
+These act as defaults; any of them (plus `trigger`) can be overridden per call via the second argument of `open`/`close`.
+
+### Methods
+
+| Method | Description |
+|---|---|
+| `open(dialogRef, options?)` | Opens the `<dialog>` (id or element), morphing from `options.trigger`. |
+| `close(dialogRef, options?)` | Closes the `<dialog>`, morphing back into its trigger. |
+| `destroy()` | Removes the injected `<style>` tag. Call when tearing down. |
+
+## How it works
+
+1. **Open** — Pairs the trigger and dialog with a shared `data-flip-id`, captures the trigger's position with `Flip.getState()`, calls `dialog.showModal()`, then uses `Flip.from()` to morph the dialog out of the trigger with an elastic ease.
+2. **Close** — Uses `Flip.to()` to morph the dialog back into its trigger with blur and fade, then calls `dialog.close()`.
+
+CSS keyframe animations handle the blur/fade/border-radius effects during transitions. Styles are auto-injected on instantiation (once per page) so you don't need to import any CSS. The library is SSR-safe — it touches `document`/`window` only in the browser.
+
+## Demo
+
+The demo lives in `demo/` and loads the source directly via an [import map](demo/index.html) (no build step). Because ES modules and import maps require HTTP (not `file://`), serve it with any static server:
+
+```bash
+git clone https://github.com/antuuanyf/prettier-modals.git
+cd prettier-modals
+
+# any static server works, e.g.:
+npx serve .
+# or
+python3 -m http.server 8000
+```
+
+Then open `http://localhost:8000/demo/` (adjust the port) and click the buttons. The demo shows both `anchor: 'origin'` and `anchor: 'center'`.
+
+## Running without a bundler
+
+In a plain `<script type="module">` setup, point an import map at GSAP's combined ESM bundle so `gsap`, `Flip`, and `CustomEase` share **one instance** (separate per-plugin CDN bundles each ship their own GSAP copy and break Flip):
+
+```html
+<script type="importmap">
+{
+  "imports": {
+    "gsap": "https://cdn.jsdelivr.net/npm/gsap@3.14.1/all.js/+esm",
+    "gsap/Flip": "https://cdn.jsdelivr.net/npm/gsap@3.14.1/all.js/+esm",
+    "gsap/CustomEase": "https://cdn.jsdelivr.net/npm/gsap@3.14.1/all.js/+esm"
+  }
+}
+</script>
+```
+
+## Customization
+
+Style your `<dialog>` however you want with regular CSS. Prettier Modals only handles the animation — layout, colors, and sizing are up to you.
+
+```css
+dialog {
+  border: none;
+  border-radius: 24px;
+  width: 100%;
+  height: 100%;
+  max-width: 400px;
+  max-height: 400px;
+}
+```
+
+## Browser Support
+
+Works in all modern browsers that support `<dialog>` and ES modules (Chrome, Firefox, Safari, Edge).
+
+## License
+
+MIT License
+
+Copyright (c) 2026 srdavo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+## Contributing
+
+Contributions are welcome! Feel free to open an issue or submit a pull request.
+
+## Credits
+
+Maintained by [Antonio Monreal Diaz](https://github.com/antuuanyf), based on the original work by [srdavo](https://github.com/srdavo). Powered by [GSAP](https://gsap.com/).

package/dist/PrettyModal.cjs

@@ -0,0 +1,62 @@
+'use strict';var gsap=require('gsap'),Flip=require('gsap/Flip'),CustomEase=require('gsap/CustomEase');var y=s=>{throw TypeError(s)};var S=(s,t,o)=>t.has(s)||y("Cannot "+o);var b=(s,t,o)=>t.has(s)?y("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(s):t.set(s,o);var l=(s,t,o)=>(S(s,t,"access private method"),o);gsap.gsap.registerPlugin(Flip.Flip,CustomEase.CustomEase);var m="pretty-modal-styles",I="M0,0 C0.305,0.206 0.116,0.567 0.3,0.8 0.394,0.921 0.491,1 1,1",i,g,x,f,w,h=class{constructor(t={}){b(this,i);this.defaults={anchor:"center",duration:.4,ease:I,respectReducedMotion:true,onOpen:null,onClose:null,...t},this.state=new WeakMap,typeof document<"u"&&(this.ease=CustomEase.CustomEase.create("pretty-modal-ease",this.defaults.ease),this.injectStyles());}open(t,o={}){let e=l(this,i,g).call(this,t);if(!e||e.open)return;let n={...this.defaults,...o},r=l(this,i,x).call(this,o.trigger);if(!r){console.warn("[PrettyModal] No trigger element found. Pass { trigger } explicitly.");return}if(this.state.get(e)?.animating)return;if(this.state.set(e,{trigger:r,anchor:n.anchor,animating:true}),l(this,i,f).call(this,n)){e.showModal(),this.state.set(e,{trigger:r,anchor:n.anchor,animating:false}),n.onOpen?.(e);return}let a=this.state.get(e).flipId||Math.random().toString(16).slice(2);r.dataset.flipId=a,e.dataset.flipId=a,e.dataset.anchor=n.anchor,this.state.get(e).flipId=a;let d=Flip.Flip.getState(r);e.showModal(),n.anchor==="origin"&&l(this,i,w).call(this,e,r),Flip.Flip.from(d,{targets:e,scale:true,ease:this.ease,toggleClass:"pretty-modal-opening",duration:n.duration,onComplete:()=>{let u=this.state.get(e);u&&(u.animating=false),n.onOpen?.(e);}});}close(t,o={}){let e=l(this,i,g).call(this,t);if(!e||!e.open)return;let n={...this.defaults,...o},r=this.state.get(e),c=r?.trigger;if(l(this,i,f).call(this,n)||!c){e.close(),e.setAttribute("style",""),r&&(r.animating=false),n.onClose?.(e);return}r&&(r.animating=true);let a=Flip.Flip.getState(c);Flip.Flip.to(a,{targets:e,scale:true,ease:this.ease,toggleClass:"pretty-modal-closing",duration:n.duration,onComplete:()=>{e.setAttribute("style",""),e.close(),r&&(r.animating=false),n.onClose?.(e);}});}destroy(){typeof document>"u"||document.getElementById(m)?.remove();}injectStyles(){if(document.getElementById(m))return;let t=`
+            .pretty-modal-opening {
+                animation: pretty-modal-opening 500ms cubic-bezier(.56,.27,0,1);
+            }
+
+            @keyframes pretty-modal-opening {
+                from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: blur(0px); }
+            }
+
+            .pretty-modal-closing {
+                animation:
+                    pretty-modal-closing-border-radius 500ms cubic-bezier(.56,.27,0,1),
+                    pretty-modal-closing-blur 500ms cubic-bezier(.37,.35,0,1),
+                    pretty-modal-closing-fade 700ms cubic-bezier(.56,.27,0,1)
+                ;
+            }
+
+            @keyframes pretty-modal-closing-border-radius {
+                to { border-radius: 400px; }
+            }
+
+            @keyframes pretty-modal-closing-blur {
+                0% { filter: blur(0); } 100% { filter: blur(32px); }
+            }
+
+            @keyframes pretty-modal-closing-fade {
+                from { opacity: 1; } to { opacity: 0; }
+            }
+
+            dialog[open]::backdrop {
+                background: rgba(0,0,0,0.2);
+                backdrop-filter: blur(2px);
+            }
+
+            dialog.pretty-modal-opening::backdrop {
+                animation: pretty-modal-backdrop-in 400ms cubic-bezier(.56,.27,0,1);
+            }
+
+            dialog.pretty-modal-closing::backdrop {
+                animation: pretty-modal-backdrop-out 400ms cubic-bezier(.56,.27,0,1) forwards;
+            }
+
+            @keyframes pretty-modal-backdrop-in {
+                from { background: rgba(0,0,0,0); backdrop-filter: blur(0px); }
+                to   { background: rgba(0,0,0,0.2); backdrop-filter: blur(2px); }
+            }
+
+            @keyframes pretty-modal-backdrop-out {
+                from { background: rgba(0,0,0,0.2); backdrop-filter: blur(2px); }
+                to   { background: rgba(0,0,0,0); backdrop-filter: blur(0px); }
+            }
+
+            @media (prefers-reduced-motion: reduce) {
+                .pretty-modal-opening,
+                .pretty-modal-closing,
+                dialog.pretty-modal-opening::backdrop,
+                dialog.pretty-modal-closing::backdrop {
+                    animation: none;
+                }
+            }
+        `,o=document.createElement("style");o.id=m,o.textContent=t,document.head.appendChild(o);}};i=new WeakSet,g=function(t){return t?typeof t=="string"?document.getElementById(t):t:null},x=function(t){let o=l(this,i,g).call(this,t);return o||(typeof event<"u"&&event?.currentTarget?event.currentTarget:null)},f=function(t){return !t.respectReducedMotion||typeof window>"u"||!window.matchMedia?false:window.matchMedia("(prefers-reduced-motion: reduce)").matches},w=function(t,o){let e=o.getBoundingClientRect(),n=window.innerWidth,r=window.innerHeight;t.style.margin="0",t.style.position="fixed",t.style.inset="auto";let c=t.getBoundingClientRect(),a=c.width,d=c.height,u=n-e.left,C=e.right,M=r-e.top,v=e.bottom;a<=u?t.style.left=`${e.left}px`:a<=C?t.style.right=`${n-e.right}px`:t.style.left=`${Math.max(0,(n-a)/2)}px`,d<=M?t.style.top=`${e.top}px`:d<=v?t.style.bottom=`${r-e.bottom}px`:t.style.top=`${Math.max(0,(r-d)/2)}px`;};exports.PrettyModal=h;//# sourceMappingURL=PrettyModal.cjs.map
+//# sourceMappingURL=PrettyModal.cjs.map

package/dist/PrettyModal.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/PrettyModal.js"],"names":["gsap","Flip","CustomEase","STYLE_ID","EASE","_PrettyModal_instances","resolveEl_fn","resolveTrigger_fn","reducedMotion_fn","positionAtOrigin_fn","PrettyModal","options","__privateAdd","dialogRef","dialog","__privateMethod","opts","trigger","flipId","originState","e","entry","styles","styleSheet","ref","resolved","origin","originRect","vw","vh","dialogRect","dialogW","dialogH","spaceRight","spaceLeft","spaceBelow","spaceAbove"],"mappings":"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","file":"PrettyModal.cjs","sourcesContent":["import { gsap } from 'gsap'\nimport { Flip } from 'gsap/Flip'\nimport { CustomEase } from 'gsap/CustomEase'\n\ngsap.registerPlugin(Flip, CustomEase)\n\nconst STYLE_ID = 'pretty-modal-styles'\nconst EASE = 'M0,0 C0.305,0.206 0.116,0.567 0.3,0.8 0.394,0.921 0.491,1 1,1'\n\nexport class PrettyModal {\n    /**\n     * @param {Object} [options]\n     * @param {'center'|'origin'} [options.anchor='center'] Where the modal opens from.\n     * @param {number} [options.duration=0.4] Animation duration in seconds.\n     * @param {string} [options.ease] CustomEase SVG path used for the Flip tween.\n     * @param {boolean} [options.respectReducedMotion=true] Skip animation when the user prefers reduced motion.\n     * @param {(dialog: HTMLDialogElement) => void} [options.onOpen]\n     * @param {(dialog: HTMLDialogElement) => void} [options.onClose]\n     */\n    constructor(options = {}) {\n        this.defaults = {\n            anchor: 'center',\n            duration: 0.4,\n            ease: EASE,\n            respectReducedMotion: true,\n            onOpen: null,\n            onClose: null,\n            ...options,\n        }\n\n        // Per-dialog state: trigger element + whether it is mid-animation.\n        this.state = new WeakMap()\n\n        if (typeof document !== 'undefined') {\n            this.ease = CustomEase.create('pretty-modal-ease', this.defaults.ease)\n            this.injectStyles()\n        }\n    }\n\n    /**\n     * Open a dialog, morphing from the trigger element.\n     * @param {string|HTMLDialogElement} dialogRef Dialog element or its id.\n     * @param {Object} [options]\n     * @param {string|HTMLElement} [options.trigger] Element to animate from. Defaults to `event.currentTarget` when called from an inline handler.\n     * @param {'center'|'origin'} [options.anchor]\n     * @param {number} [options.duration]\n     * @param {boolean} [options.respectReducedMotion]\n     * @param {(dialog: HTMLDialogElement) => void} [options.onOpen]\n     * @param {(dialog: HTMLDialogElement) => void} [options.onClose]\n     */\n    open(dialogRef, options = {}) {\n        const dialog = this.#resolveEl(dialogRef)\n        if (!dialog || dialog.open) return\n\n        const opts = { ...this.defaults, ...options }\n        const trigger = this.#resolveTrigger(options.trigger)\n        if (!trigger) {\n            console.warn('[PrettyModal] No trigger element found. Pass { trigger } explicitly.')\n            return\n        }\n\n        const entry = this.state.get(dialog)\n        if (entry?.animating) return\n\n        this.state.set(dialog, { trigger, anchor: opts.anchor, animating: true })\n\n        if (this.#reducedMotion(opts)) {\n            dialog.showModal()\n            this.state.set(dialog, { trigger, anchor: opts.anchor, animating: false })\n            opts.onOpen?.(dialog)\n            return\n        }\n\n        // Flip morphs elements that share a data-flip-id, so pair trigger and dialog.\n        const flipId = this.state.get(dialog).flipId || Math.random().toString(16).slice(2)\n        trigger.dataset.flipId = flipId\n        dialog.dataset.flipId = flipId\n        dialog.dataset.anchor = opts.anchor\n        this.state.get(dialog).flipId = flipId\n\n        const originState = Flip.getState(trigger)\n        dialog.showModal()\n\n        if (opts.anchor === 'origin') {\n            this.#positionAtOrigin(dialog, trigger)\n        }\n\n        Flip.from(originState, {\n            targets: dialog,\n            scale: true,\n            ease: this.ease,\n            toggleClass: 'pretty-modal-opening',\n            duration: opts.duration,\n            onComplete: () => {\n                const e = this.state.get(dialog)\n                if (e) e.animating = false\n                opts.onOpen?.(dialog)\n            },\n        })\n    }\n\n    /**\n     * Close a dialog, morphing back into its trigger element.\n     * @param {string|HTMLDialogElement} dialogRef Dialog element or its id.\n     * @param {Object} [options]\n     * @param {number} [options.duration]\n     * @param {boolean} [options.respectReducedMotion]\n     * @param {(dialog: HTMLDialogElement) => void} [options.onClose]\n     */\n    close(dialogRef, options = {}) {\n        const dialog = this.#resolveEl(dialogRef)\n        if (!dialog || !dialog.open) return\n\n        const opts = { ...this.defaults, ...options }\n        const entry = this.state.get(dialog)\n        const trigger = entry?.trigger\n\n        if (this.#reducedMotion(opts) || !trigger) {\n            dialog.close()\n            dialog.setAttribute('style', '')\n            if (entry) entry.animating = false\n            opts.onClose?.(dialog)\n            return\n        }\n\n        if (entry) entry.animating = true\n\n        const originState = Flip.getState(trigger)\n\n        Flip.to(originState, {\n            targets: dialog,\n            scale: true,\n            ease: this.ease,\n            toggleClass: 'pretty-modal-closing',\n            duration: opts.duration,\n            onComplete: () => {\n                dialog.setAttribute('style', '')\n                dialog.close()\n                if (entry) entry.animating = false\n                opts.onClose?.(dialog)\n            },\n        })\n    }\n\n    /** Remove injected styles. Call when tearing down. */\n    destroy() {\n        if (typeof document === 'undefined') return\n        document.getElementById(STYLE_ID)?.remove()\n    }\n\n    // --- internals ---------------------------------------------------------\n\n    #resolveEl(ref) {\n        if (!ref) return null\n        if (typeof ref === 'string') return document.getElementById(ref)\n        return ref\n    }\n\n    #resolveTrigger(trigger) {\n        const resolved = this.#resolveEl(trigger)\n        if (resolved) return resolved\n        // Fallback for inline onclick handlers (Chromium exposes a global event).\n        if (typeof event !== 'undefined' && event?.currentTarget) return event.currentTarget\n        return null\n    }\n\n    #reducedMotion(opts) {\n        if (!opts.respectReducedMotion) return false\n        if (typeof window === 'undefined' || !window.matchMedia) return false\n        return window.matchMedia('(prefers-reduced-motion: reduce)').matches\n    }\n\n    #positionAtOrigin(dialog, origin) {\n        const originRect = origin.getBoundingClientRect()\n        const vw = window.innerWidth\n        const vh = window.innerHeight\n\n        dialog.style.margin = '0'\n        dialog.style.position = 'fixed'\n        dialog.style.inset = 'auto'\n\n        const dialogRect = dialog.getBoundingClientRect()\n        const dialogW = dialogRect.width\n        const dialogH = dialogRect.height\n\n        const spaceRight = vw - originRect.left\n        const spaceLeft = originRect.right\n        const spaceBelow = vh - originRect.top\n        const spaceAbove = originRect.bottom\n\n        if (dialogW <= spaceRight) {\n            dialog.style.left = `${originRect.left}px`\n        } else if (dialogW <= spaceLeft) {\n            dialog.style.right = `${vw - originRect.right}px`\n        } else {\n            dialog.style.left = `${Math.max(0, (vw - dialogW) / 2)}px`\n        }\n\n        if (dialogH <= spaceBelow) {\n            dialog.style.top = `${originRect.top}px`\n        } else if (dialogH <= spaceAbove) {\n            dialog.style.bottom = `${vh - originRect.bottom}px`\n        } else {\n            dialog.style.top = `${Math.max(0, (vh - dialogH) / 2)}px`\n        }\n    }\n\n    injectStyles() {\n        if (document.getElementById(STYLE_ID)) return\n\n        const styles = `\n            .pretty-modal-opening {\n                animation: pretty-modal-opening 500ms cubic-bezier(.56,.27,0,1);\n            }\n\n            @keyframes pretty-modal-opening {\n                from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: blur(0px); }\n            }\n\n            .pretty-modal-closing {\n                animation:\n                    pretty-modal-closing-border-radius 500ms cubic-bezier(.56,.27,0,1),\n                    pretty-modal-closing-blur 500ms cubic-bezier(.37,.35,0,1),\n                    pretty-modal-closing-fade 700ms cubic-bezier(.56,.27,0,1)\n                ;\n            }\n\n            @keyframes pretty-modal-closing-border-radius {\n                to { border-radius: 400px; }\n            }\n\n            @keyframes pretty-modal-closing-blur {\n                0% { filter: blur(0); } 100% { filter: blur(32px); }\n            }\n\n            @keyframes pretty-modal-closing-fade {\n                from { opacity: 1; } to { opacity: 0; }\n            }\n\n            dialog[open]::backdrop {\n                background: rgba(0,0,0,0.2);\n                backdrop-filter: blur(2px);\n            }\n\n            dialog.pretty-modal-opening::backdrop {\n                animation: pretty-modal-backdrop-in 400ms cubic-bezier(.56,.27,0,1);\n            }\n\n            dialog.pretty-modal-closing::backdrop {\n                animation: pretty-modal-backdrop-out 400ms cubic-bezier(.56,.27,0,1) forwards;\n            }\n\n            @keyframes pretty-modal-backdrop-in {\n                from { background: rgba(0,0,0,0); backdrop-filter: blur(0px); }\n                to   { background: rgba(0,0,0,0.2); backdrop-filter: blur(2px); }\n            }\n\n            @keyframes pretty-modal-backdrop-out {\n                from { background: rgba(0,0,0,0.2); backdrop-filter: blur(2px); }\n                to   { background: rgba(0,0,0,0); backdrop-filter: blur(0px); }\n            }\n\n            @media (prefers-reduced-motion: reduce) {\n                .pretty-modal-opening,\n                .pretty-modal-closing,\n                dialog.pretty-modal-opening::backdrop,\n                dialog.pretty-modal-closing::backdrop {\n                    animation: none;\n                }\n            }\n        `\n\n        const styleSheet = document.createElement('style')\n        styleSheet.id = STYLE_ID\n        styleSheet.textContent = styles\n        document.head.appendChild(styleSheet)\n    }\n}\n"]}

package/dist/PrettyModal.d.cts

@@ -0,0 +1,67 @@
+declare class PrettyModal {
+    /**
+     * @param {Object} [options]
+     * @param {'center'|'origin'} [options.anchor='center'] Where the modal opens from.
+     * @param {number} [options.duration=0.4] Animation duration in seconds.
+     * @param {string} [options.ease] CustomEase SVG path used for the Flip tween.
+     * @param {boolean} [options.respectReducedMotion=true] Skip animation when the user prefers reduced motion.
+     * @param {(dialog: HTMLDialogElement) => void} [options.onOpen]
+     * @param {(dialog: HTMLDialogElement) => void} [options.onClose]
+     */
+    constructor(options?: {
+        anchor?: "center" | "origin" | undefined;
+        duration?: number | undefined;
+        ease?: string | undefined;
+        respectReducedMotion?: boolean | undefined;
+        onOpen?: ((dialog: HTMLDialogElement) => void) | undefined;
+        onClose?: ((dialog: HTMLDialogElement) => void) | undefined;
+    });
+    defaults: {
+        anchor: string;
+        duration: number;
+        ease: string;
+        respectReducedMotion: boolean;
+        onOpen: ((dialog: HTMLDialogElement) => void) | null;
+        onClose: ((dialog: HTMLDialogElement) => void) | null;
+    };
+    state: WeakMap<WeakKey, any>;
+    ease: EaseFunction | undefined;
+    /**
+     * Open a dialog, morphing from the trigger element.
+     * @param {string|HTMLDialogElement} dialogRef Dialog element or its id.
+     * @param {Object} [options]
+     * @param {string|HTMLElement} [options.trigger] Element to animate from. Defaults to `event.currentTarget` when called from an inline handler.
+     * @param {'center'|'origin'} [options.anchor]
+     * @param {number} [options.duration]
+     * @param {boolean} [options.respectReducedMotion]
+     * @param {(dialog: HTMLDialogElement) => void} [options.onOpen]
+     * @param {(dialog: HTMLDialogElement) => void} [options.onClose]
+     */
+    open(dialogRef: string | HTMLDialogElement, options?: {
+        trigger?: string | HTMLElement | undefined;
+        anchor?: "center" | "origin" | undefined;
+        duration?: number | undefined;
+        respectReducedMotion?: boolean | undefined;
+        onOpen?: ((dialog: HTMLDialogElement) => void) | undefined;
+        onClose?: ((dialog: HTMLDialogElement) => void) | undefined;
+    }): void;
+    /**
+     * Close a dialog, morphing back into its trigger element.
+     * @param {string|HTMLDialogElement} dialogRef Dialog element or its id.
+     * @param {Object} [options]
+     * @param {number} [options.duration]
+     * @param {boolean} [options.respectReducedMotion]
+     * @param {(dialog: HTMLDialogElement) => void} [options.onClose]
+     */
+    close(dialogRef: string | HTMLDialogElement, options?: {
+        duration?: number | undefined;
+        respectReducedMotion?: boolean | undefined;
+        onClose?: ((dialog: HTMLDialogElement) => void) | undefined;
+    }): void;
+    /** Remove injected styles. Call when tearing down. */
+    destroy(): void;
+    injectStyles(): void;
+    #private;
+}
+
+export { PrettyModal };

package/dist/PrettyModal.d.ts

@@ -0,0 +1,67 @@
+declare class PrettyModal {
+    /**
+     * @param {Object} [options]
+     * @param {'center'|'origin'} [options.anchor='center'] Where the modal opens from.
+     * @param {number} [options.duration=0.4] Animation duration in seconds.
+     * @param {string} [options.ease] CustomEase SVG path used for the Flip tween.
+     * @param {boolean} [options.respectReducedMotion=true] Skip animation when the user prefers reduced motion.
+     * @param {(dialog: HTMLDialogElement) => void} [options.onOpen]
+     * @param {(dialog: HTMLDialogElement) => void} [options.onClose]
+     */
+    constructor(options?: {
+        anchor?: "center" | "origin" | undefined;
+        duration?: number | undefined;
+        ease?: string | undefined;
+        respectReducedMotion?: boolean | undefined;
+        onOpen?: ((dialog: HTMLDialogElement) => void) | undefined;
+        onClose?: ((dialog: HTMLDialogElement) => void) | undefined;
+    });
+    defaults: {
+        anchor: string;
+        duration: number;
+        ease: string;
+        respectReducedMotion: boolean;
+        onOpen: ((dialog: HTMLDialogElement) => void) | null;
+        onClose: ((dialog: HTMLDialogElement) => void) | null;
+    };
+    state: WeakMap<WeakKey, any>;
+    ease: EaseFunction | undefined;
+    /**
+     * Open a dialog, morphing from the trigger element.
+     * @param {string|HTMLDialogElement} dialogRef Dialog element or its id.
+     * @param {Object} [options]
+     * @param {string|HTMLElement} [options.trigger] Element to animate from. Defaults to `event.currentTarget` when called from an inline handler.
+     * @param {'center'|'origin'} [options.anchor]
+     * @param {number} [options.duration]
+     * @param {boolean} [options.respectReducedMotion]
+     * @param {(dialog: HTMLDialogElement) => void} [options.onOpen]
+     * @param {(dialog: HTMLDialogElement) => void} [options.onClose]
+     */
+    open(dialogRef: string | HTMLDialogElement, options?: {
+        trigger?: string | HTMLElement | undefined;
+        anchor?: "center" | "origin" | undefined;
+        duration?: number | undefined;
+        respectReducedMotion?: boolean | undefined;
+        onOpen?: ((dialog: HTMLDialogElement) => void) | undefined;
+        onClose?: ((dialog: HTMLDialogElement) => void) | undefined;
+    }): void;
+    /**
+     * Close a dialog, morphing back into its trigger element.
+     * @param {string|HTMLDialogElement} dialogRef Dialog element or its id.
+     * @param {Object} [options]
+     * @param {number} [options.duration]
+     * @param {boolean} [options.respectReducedMotion]
+     * @param {(dialog: HTMLDialogElement) => void} [options.onClose]
+     */
+    close(dialogRef: string | HTMLDialogElement, options?: {
+        duration?: number | undefined;
+        respectReducedMotion?: boolean | undefined;
+        onClose?: ((dialog: HTMLDialogElement) => void) | undefined;
+    }): void;
+    /** Remove injected styles. Call when tearing down. */
+    destroy(): void;
+    injectStyles(): void;
+    #private;
+}
+
+export { PrettyModal };

package/dist/PrettyModal.js

@@ -0,0 +1,62 @@
+import {gsap}from'gsap';import {Flip}from'gsap/Flip';import {CustomEase}from'gsap/CustomEase';var y=s=>{throw TypeError(s)};var S=(s,t,o)=>t.has(s)||y("Cannot "+o);var b=(s,t,o)=>t.has(s)?y("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(s):t.set(s,o);var l=(s,t,o)=>(S(s,t,"access private method"),o);gsap.registerPlugin(Flip,CustomEase);var m="pretty-modal-styles",I="M0,0 C0.305,0.206 0.116,0.567 0.3,0.8 0.394,0.921 0.491,1 1,1",i,g,x,f,w,h=class{constructor(t={}){b(this,i);this.defaults={anchor:"center",duration:.4,ease:I,respectReducedMotion:true,onOpen:null,onClose:null,...t},this.state=new WeakMap,typeof document<"u"&&(this.ease=CustomEase.create("pretty-modal-ease",this.defaults.ease),this.injectStyles());}open(t,o={}){let e=l(this,i,g).call(this,t);if(!e||e.open)return;let n={...this.defaults,...o},r=l(this,i,x).call(this,o.trigger);if(!r){console.warn("[PrettyModal] No trigger element found. Pass { trigger } explicitly.");return}if(this.state.get(e)?.animating)return;if(this.state.set(e,{trigger:r,anchor:n.anchor,animating:true}),l(this,i,f).call(this,n)){e.showModal(),this.state.set(e,{trigger:r,anchor:n.anchor,animating:false}),n.onOpen?.(e);return}let a=this.state.get(e).flipId||Math.random().toString(16).slice(2);r.dataset.flipId=a,e.dataset.flipId=a,e.dataset.anchor=n.anchor,this.state.get(e).flipId=a;let d=Flip.getState(r);e.showModal(),n.anchor==="origin"&&l(this,i,w).call(this,e,r),Flip.from(d,{targets:e,scale:true,ease:this.ease,toggleClass:"pretty-modal-opening",duration:n.duration,onComplete:()=>{let u=this.state.get(e);u&&(u.animating=false),n.onOpen?.(e);}});}close(t,o={}){let e=l(this,i,g).call(this,t);if(!e||!e.open)return;let n={...this.defaults,...o},r=this.state.get(e),c=r?.trigger;if(l(this,i,f).call(this,n)||!c){e.close(),e.setAttribute("style",""),r&&(r.animating=false),n.onClose?.(e);return}r&&(r.animating=true);let a=Flip.getState(c);Flip.to(a,{targets:e,scale:true,ease:this.ease,toggleClass:"pretty-modal-closing",duration:n.duration,onComplete:()=>{e.setAttribute("style",""),e.close(),r&&(r.animating=false),n.onClose?.(e);}});}destroy(){typeof document>"u"||document.getElementById(m)?.remove();}injectStyles(){if(document.getElementById(m))return;let t=`
+            .pretty-modal-opening {
+                animation: pretty-modal-opening 500ms cubic-bezier(.56,.27,0,1);
+            }
+
+            @keyframes pretty-modal-opening {
+                from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: blur(0px); }
+            }
+
+            .pretty-modal-closing {
+                animation:
+                    pretty-modal-closing-border-radius 500ms cubic-bezier(.56,.27,0,1),
+                    pretty-modal-closing-blur 500ms cubic-bezier(.37,.35,0,1),
+                    pretty-modal-closing-fade 700ms cubic-bezier(.56,.27,0,1)
+                ;
+            }
+
+            @keyframes pretty-modal-closing-border-radius {
+                to { border-radius: 400px; }
+            }
+
+            @keyframes pretty-modal-closing-blur {
+                0% { filter: blur(0); } 100% { filter: blur(32px); }
+            }
+
+            @keyframes pretty-modal-closing-fade {
+                from { opacity: 1; } to { opacity: 0; }
+            }
+
+            dialog[open]::backdrop {
+                background: rgba(0,0,0,0.2);
+                backdrop-filter: blur(2px);
+            }
+
+            dialog.pretty-modal-opening::backdrop {
+                animation: pretty-modal-backdrop-in 400ms cubic-bezier(.56,.27,0,1);
+            }
+
+            dialog.pretty-modal-closing::backdrop {
+                animation: pretty-modal-backdrop-out 400ms cubic-bezier(.56,.27,0,1) forwards;
+            }
+
+            @keyframes pretty-modal-backdrop-in {
+                from { background: rgba(0,0,0,0); backdrop-filter: blur(0px); }
+                to   { background: rgba(0,0,0,0.2); backdrop-filter: blur(2px); }
+            }
+
+            @keyframes pretty-modal-backdrop-out {
+                from { background: rgba(0,0,0,0.2); backdrop-filter: blur(2px); }
+                to   { background: rgba(0,0,0,0); backdrop-filter: blur(0px); }
+            }
+
+            @media (prefers-reduced-motion: reduce) {
+                .pretty-modal-opening,
+                .pretty-modal-closing,
+                dialog.pretty-modal-opening::backdrop,
+                dialog.pretty-modal-closing::backdrop {
+                    animation: none;
+                }
+            }
+        `,o=document.createElement("style");o.id=m,o.textContent=t,document.head.appendChild(o);}};i=new WeakSet,g=function(t){return t?typeof t=="string"?document.getElementById(t):t:null},x=function(t){let o=l(this,i,g).call(this,t);return o||(typeof event<"u"&&event?.currentTarget?event.currentTarget:null)},f=function(t){return !t.respectReducedMotion||typeof window>"u"||!window.matchMedia?false:window.matchMedia("(prefers-reduced-motion: reduce)").matches},w=function(t,o){let e=o.getBoundingClientRect(),n=window.innerWidth,r=window.innerHeight;t.style.margin="0",t.style.position="fixed",t.style.inset="auto";let c=t.getBoundingClientRect(),a=c.width,d=c.height,u=n-e.left,C=e.right,M=r-e.top,v=e.bottom;a<=u?t.style.left=`${e.left}px`:a<=C?t.style.right=`${n-e.right}px`:t.style.left=`${Math.max(0,(n-a)/2)}px`,d<=M?t.style.top=`${e.top}px`:d<=v?t.style.bottom=`${r-e.bottom}px`:t.style.top=`${Math.max(0,(r-d)/2)}px`;};export{h as PrettyModal};//# sourceMappingURL=PrettyModal.js.map
+//# sourceMappingURL=PrettyModal.js.map

package/dist/PrettyModal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/PrettyModal.js"],"names":["gsap","Flip","CustomEase","STYLE_ID","EASE","_PrettyModal_instances","resolveEl_fn","resolveTrigger_fn","reducedMotion_fn","positionAtOrigin_fn","PrettyModal","options","__privateAdd","dialogRef","dialog","__privateMethod","opts","trigger","flipId","originState","e","entry","styles","styleSheet","ref","resolved","origin","originRect","vw","vh","dialogRect","dialogW","dialogH","spaceRight","spaceLeft","spaceBelow","spaceAbove"],"mappings":"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","file":"PrettyModal.js","sourcesContent":["import { gsap } from 'gsap'\nimport { Flip } from 'gsap/Flip'\nimport { CustomEase } from 'gsap/CustomEase'\n\ngsap.registerPlugin(Flip, CustomEase)\n\nconst STYLE_ID = 'pretty-modal-styles'\nconst EASE = 'M0,0 C0.305,0.206 0.116,0.567 0.3,0.8 0.394,0.921 0.491,1 1,1'\n\nexport class PrettyModal {\n    /**\n     * @param {Object} [options]\n     * @param {'center'|'origin'} [options.anchor='center'] Where the modal opens from.\n     * @param {number} [options.duration=0.4] Animation duration in seconds.\n     * @param {string} [options.ease] CustomEase SVG path used for the Flip tween.\n     * @param {boolean} [options.respectReducedMotion=true] Skip animation when the user prefers reduced motion.\n     * @param {(dialog: HTMLDialogElement) => void} [options.onOpen]\n     * @param {(dialog: HTMLDialogElement) => void} [options.onClose]\n     */\n    constructor(options = {}) {\n        this.defaults = {\n            anchor: 'center',\n            duration: 0.4,\n            ease: EASE,\n            respectReducedMotion: true,\n            onOpen: null,\n            onClose: null,\n            ...options,\n        }\n\n        // Per-dialog state: trigger element + whether it is mid-animation.\n        this.state = new WeakMap()\n\n        if (typeof document !== 'undefined') {\n            this.ease = CustomEase.create('pretty-modal-ease', this.defaults.ease)\n            this.injectStyles()\n        }\n    }\n\n    /**\n     * Open a dialog, morphing from the trigger element.\n     * @param {string|HTMLDialogElement} dialogRef Dialog element or its id.\n     * @param {Object} [options]\n     * @param {string|HTMLElement} [options.trigger] Element to animate from. Defaults to `event.currentTarget` when called from an inline handler.\n     * @param {'center'|'origin'} [options.anchor]\n     * @param {number} [options.duration]\n     * @param {boolean} [options.respectReducedMotion]\n     * @param {(dialog: HTMLDialogElement) => void} [options.onOpen]\n     * @param {(dialog: HTMLDialogElement) => void} [options.onClose]\n     */\n    open(dialogRef, options = {}) {\n        const dialog = this.#resolveEl(dialogRef)\n        if (!dialog || dialog.open) return\n\n        const opts = { ...this.defaults, ...options }\n        const trigger = this.#resolveTrigger(options.trigger)\n        if (!trigger) {\n            console.warn('[PrettyModal] No trigger element found. Pass { trigger } explicitly.')\n            return\n        }\n\n        const entry = this.state.get(dialog)\n        if (entry?.animating) return\n\n        this.state.set(dialog, { trigger, anchor: opts.anchor, animating: true })\n\n        if (this.#reducedMotion(opts)) {\n            dialog.showModal()\n            this.state.set(dialog, { trigger, anchor: opts.anchor, animating: false })\n            opts.onOpen?.(dialog)\n            return\n        }\n\n        // Flip morphs elements that share a data-flip-id, so pair trigger and dialog.\n        const flipId = this.state.get(dialog).flipId || Math.random().toString(16).slice(2)\n        trigger.dataset.flipId = flipId\n        dialog.dataset.flipId = flipId\n        dialog.dataset.anchor = opts.anchor\n        this.state.get(dialog).flipId = flipId\n\n        const originState = Flip.getState(trigger)\n        dialog.showModal()\n\n        if (opts.anchor === 'origin') {\n            this.#positionAtOrigin(dialog, trigger)\n        }\n\n        Flip.from(originState, {\n            targets: dialog,\n            scale: true,\n            ease: this.ease,\n            toggleClass: 'pretty-modal-opening',\n            duration: opts.duration,\n            onComplete: () => {\n                const e = this.state.get(dialog)\n                if (e) e.animating = false\n                opts.onOpen?.(dialog)\n            },\n        })\n    }\n\n    /**\n     * Close a dialog, morphing back into its trigger element.\n     * @param {string|HTMLDialogElement} dialogRef Dialog element or its id.\n     * @param {Object} [options]\n     * @param {number} [options.duration]\n     * @param {boolean} [options.respectReducedMotion]\n     * @param {(dialog: HTMLDialogElement) => void} [options.onClose]\n     */\n    close(dialogRef, options = {}) {\n        const dialog = this.#resolveEl(dialogRef)\n        if (!dialog || !dialog.open) return\n\n        const opts = { ...this.defaults, ...options }\n        const entry = this.state.get(dialog)\n        const trigger = entry?.trigger\n\n        if (this.#reducedMotion(opts) || !trigger) {\n            dialog.close()\n            dialog.setAttribute('style', '')\n            if (entry) entry.animating = false\n            opts.onClose?.(dialog)\n            return\n        }\n\n        if (entry) entry.animating = true\n\n        const originState = Flip.getState(trigger)\n\n        Flip.to(originState, {\n            targets: dialog,\n            scale: true,\n            ease: this.ease,\n            toggleClass: 'pretty-modal-closing',\n            duration: opts.duration,\n            onComplete: () => {\n                dialog.setAttribute('style', '')\n                dialog.close()\n                if (entry) entry.animating = false\n                opts.onClose?.(dialog)\n            },\n        })\n    }\n\n    /** Remove injected styles. Call when tearing down. */\n    destroy() {\n        if (typeof document === 'undefined') return\n        document.getElementById(STYLE_ID)?.remove()\n    }\n\n    // --- internals ---------------------------------------------------------\n\n    #resolveEl(ref) {\n        if (!ref) return null\n        if (typeof ref === 'string') return document.getElementById(ref)\n        return ref\n    }\n\n    #resolveTrigger(trigger) {\n        const resolved = this.#resolveEl(trigger)\n        if (resolved) return resolved\n        // Fallback for inline onclick handlers (Chromium exposes a global event).\n        if (typeof event !== 'undefined' && event?.currentTarget) return event.currentTarget\n        return null\n    }\n\n    #reducedMotion(opts) {\n        if (!opts.respectReducedMotion) return false\n        if (typeof window === 'undefined' || !window.matchMedia) return false\n        return window.matchMedia('(prefers-reduced-motion: reduce)').matches\n    }\n\n    #positionAtOrigin(dialog, origin) {\n        const originRect = origin.getBoundingClientRect()\n        const vw = window.innerWidth\n        const vh = window.innerHeight\n\n        dialog.style.margin = '0'\n        dialog.style.position = 'fixed'\n        dialog.style.inset = 'auto'\n\n        const dialogRect = dialog.getBoundingClientRect()\n        const dialogW = dialogRect.width\n        const dialogH = dialogRect.height\n\n        const spaceRight = vw - originRect.left\n        const spaceLeft = originRect.right\n        const spaceBelow = vh - originRect.top\n        const spaceAbove = originRect.bottom\n\n        if (dialogW <= spaceRight) {\n            dialog.style.left = `${originRect.left}px`\n        } else if (dialogW <= spaceLeft) {\n            dialog.style.right = `${vw - originRect.right}px`\n        } else {\n            dialog.style.left = `${Math.max(0, (vw - dialogW) / 2)}px`\n        }\n\n        if (dialogH <= spaceBelow) {\n            dialog.style.top = `${originRect.top}px`\n        } else if (dialogH <= spaceAbove) {\n            dialog.style.bottom = `${vh - originRect.bottom}px`\n        } else {\n            dialog.style.top = `${Math.max(0, (vh - dialogH) / 2)}px`\n        }\n    }\n\n    injectStyles() {\n        if (document.getElementById(STYLE_ID)) return\n\n        const styles = `\n            .pretty-modal-opening {\n                animation: pretty-modal-opening 500ms cubic-bezier(.56,.27,0,1);\n            }\n\n            @keyframes pretty-modal-opening {\n                from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: blur(0px); }\n            }\n\n            .pretty-modal-closing {\n                animation:\n                    pretty-modal-closing-border-radius 500ms cubic-bezier(.56,.27,0,1),\n                    pretty-modal-closing-blur 500ms cubic-bezier(.37,.35,0,1),\n                    pretty-modal-closing-fade 700ms cubic-bezier(.56,.27,0,1)\n                ;\n            }\n\n            @keyframes pretty-modal-closing-border-radius {\n                to { border-radius: 400px; }\n            }\n\n            @keyframes pretty-modal-closing-blur {\n                0% { filter: blur(0); } 100% { filter: blur(32px); }\n            }\n\n            @keyframes pretty-modal-closing-fade {\n                from { opacity: 1; } to { opacity: 0; }\n            }\n\n            dialog[open]::backdrop {\n                background: rgba(0,0,0,0.2);\n                backdrop-filter: blur(2px);\n            }\n\n            dialog.pretty-modal-opening::backdrop {\n                animation: pretty-modal-backdrop-in 400ms cubic-bezier(.56,.27,0,1);\n            }\n\n            dialog.pretty-modal-closing::backdrop {\n                animation: pretty-modal-backdrop-out 400ms cubic-bezier(.56,.27,0,1) forwards;\n            }\n\n            @keyframes pretty-modal-backdrop-in {\n                from { background: rgba(0,0,0,0); backdrop-filter: blur(0px); }\n                to   { background: rgba(0,0,0,0.2); backdrop-filter: blur(2px); }\n            }\n\n            @keyframes pretty-modal-backdrop-out {\n                from { background: rgba(0,0,0,0.2); backdrop-filter: blur(2px); }\n                to   { background: rgba(0,0,0,0); backdrop-filter: blur(0px); }\n            }\n\n            @media (prefers-reduced-motion: reduce) {\n                .pretty-modal-opening,\n                .pretty-modal-closing,\n                dialog.pretty-modal-opening::backdrop,\n                dialog.pretty-modal-closing::backdrop {\n                    animation: none;\n                }\n            }\n        `\n\n        const styleSheet = document.createElement('style')\n        styleSheet.id = STYLE_ID\n        styleSheet.textContent = styles\n        document.head.appendChild(styleSheet)\n    }\n}\n"]}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "prettier-modals",
+  "version": "0.1.0",
+  "description": "Beautiful open/close animations for native <dialog> elements, powered by GSAP Flip.",
+  "type": "module",
+  "main": "./dist/PrettyModal.cjs",
+  "module": "./dist/PrettyModal.js",
+  "types": "./dist/PrettyModal.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/PrettyModal.d.ts",
+      "import": "./dist/PrettyModal.js",
+      "require": "./dist/PrettyModal.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "modal",
+    "dialog",
+    "gsap",
+    "flip",
+    "animation",
+    "vanilla"
+  ],
+  "author": "Antonio Monreal Diaz",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/antuuanyf/prettier-modals.git"
+  },
+  "peerDependencies": {
+    "gsap": ">=3.12"
+  },
+  "devDependencies": {
+    "gsap": "^3.15.0",
+    "happy-dom": "^20.9.0",
+    "tsup": "^8.5.0",
+    "typescript": "^5.7.0",
+    "vitest": "^4.1.7"
+  }
+}

package/src/PrettyModal.js

@@ -0,0 +1,278 @@
+import { gsap } from 'gsap'
+import { Flip } from 'gsap/Flip'
+import { CustomEase } from 'gsap/CustomEase'
+
+gsap.registerPlugin(Flip, CustomEase)
+
+const STYLE_ID = 'pretty-modal-styles'
+const EASE = 'M0,0 C0.305,0.206 0.116,0.567 0.3,0.8 0.394,0.921 0.491,1 1,1'
+
+export class PrettyModal {
+    /**
+     * @param {Object} [options]
+     * @param {'center'|'origin'} [options.anchor='center'] Where the modal opens from.
+     * @param {number} [options.duration=0.4] Animation duration in seconds.
+     * @param {string} [options.ease] CustomEase SVG path used for the Flip tween.
+     * @param {boolean} [options.respectReducedMotion=true] Skip animation when the user prefers reduced motion.
+     * @param {(dialog: HTMLDialogElement) => void} [options.onOpen]
+     * @param {(dialog: HTMLDialogElement) => void} [options.onClose]
+     */
+    constructor(options = {}) {
+        this.defaults = {
+            anchor: 'center',
+            duration: 0.4,
+            ease: EASE,
+            respectReducedMotion: true,
+            onOpen: null,
+            onClose: null,
+            ...options,
+        }
+
+        // Per-dialog state: trigger element + whether it is mid-animation.
+        this.state = new WeakMap()
+
+        if (typeof document !== 'undefined') {
+            this.ease = CustomEase.create('pretty-modal-ease', this.defaults.ease)
+            this.injectStyles()
+        }
+    }
+
+    /**
+     * Open a dialog, morphing from the trigger element.
+     * @param {string|HTMLDialogElement} dialogRef Dialog element or its id.
+     * @param {Object} [options]
+     * @param {string|HTMLElement} [options.trigger] Element to animate from. Defaults to `event.currentTarget` when called from an inline handler.
+     * @param {'center'|'origin'} [options.anchor]
+     * @param {number} [options.duration]
+     * @param {boolean} [options.respectReducedMotion]
+     * @param {(dialog: HTMLDialogElement) => void} [options.onOpen]
+     * @param {(dialog: HTMLDialogElement) => void} [options.onClose]
+     */
+    open(dialogRef, options = {}) {
+        const dialog = this.#resolveEl(dialogRef)
+        if (!dialog || dialog.open) return
+
+        const opts = { ...this.defaults, ...options }
+        const trigger = this.#resolveTrigger(options.trigger)
+        if (!trigger) {
+            console.warn('[PrettyModal] No trigger element found. Pass { trigger } explicitly.')
+            return
+        }
+
+        const entry = this.state.get(dialog)
+        if (entry?.animating) return
+
+        this.state.set(dialog, { trigger, anchor: opts.anchor, animating: true })
+
+        if (this.#reducedMotion(opts)) {
+            dialog.showModal()
+            this.state.set(dialog, { trigger, anchor: opts.anchor, animating: false })
+            opts.onOpen?.(dialog)
+            return
+        }
+
+        // Flip morphs elements that share a data-flip-id, so pair trigger and dialog.
+        const flipId = this.state.get(dialog).flipId || Math.random().toString(16).slice(2)
+        trigger.dataset.flipId = flipId
+        dialog.dataset.flipId = flipId
+        dialog.dataset.anchor = opts.anchor
+        this.state.get(dialog).flipId = flipId
+
+        const originState = Flip.getState(trigger)
+        dialog.showModal()
+
+        if (opts.anchor === 'origin') {
+            this.#positionAtOrigin(dialog, trigger)
+        }
+
+        Flip.from(originState, {
+            targets: dialog,
+            scale: true,
+            ease: this.ease,
+            toggleClass: 'pretty-modal-opening',
+            duration: opts.duration,
+            onComplete: () => {
+                const e = this.state.get(dialog)
+                if (e) e.animating = false
+                opts.onOpen?.(dialog)
+            },
+        })
+    }
+
+    /**
+     * Close a dialog, morphing back into its trigger element.
+     * @param {string|HTMLDialogElement} dialogRef Dialog element or its id.
+     * @param {Object} [options]
+     * @param {number} [options.duration]
+     * @param {boolean} [options.respectReducedMotion]
+     * @param {(dialog: HTMLDialogElement) => void} [options.onClose]
+     */
+    close(dialogRef, options = {}) {
+        const dialog = this.#resolveEl(dialogRef)
+        if (!dialog || !dialog.open) return
+
+        const opts = { ...this.defaults, ...options }
+        const entry = this.state.get(dialog)
+        const trigger = entry?.trigger
+
+        if (this.#reducedMotion(opts) || !trigger) {
+            dialog.close()
+            dialog.setAttribute('style', '')
+            if (entry) entry.animating = false
+            opts.onClose?.(dialog)
+            return
+        }
+
+        if (entry) entry.animating = true
+
+        const originState = Flip.getState(trigger)
+
+        Flip.to(originState, {
+            targets: dialog,
+            scale: true,
+            ease: this.ease,
+            toggleClass: 'pretty-modal-closing',
+            duration: opts.duration,
+            onComplete: () => {
+                dialog.setAttribute('style', '')
+                dialog.close()
+                if (entry) entry.animating = false
+                opts.onClose?.(dialog)
+            },
+        })
+    }
+
+    /** Remove injected styles. Call when tearing down. */
+    destroy() {
+        if (typeof document === 'undefined') return
+        document.getElementById(STYLE_ID)?.remove()
+    }
+
+    // --- internals ---------------------------------------------------------
+
+    #resolveEl(ref) {
+        if (!ref) return null
+        if (typeof ref === 'string') return document.getElementById(ref)
+        return ref
+    }
+
+    #resolveTrigger(trigger) {
+        const resolved = this.#resolveEl(trigger)
+        if (resolved) return resolved
+        // Fallback for inline onclick handlers (Chromium exposes a global event).
+        if (typeof event !== 'undefined' && event?.currentTarget) return event.currentTarget
+        return null
+    }
+
+    #reducedMotion(opts) {
+        if (!opts.respectReducedMotion) return false
+        if (typeof window === 'undefined' || !window.matchMedia) return false
+        return window.matchMedia('(prefers-reduced-motion: reduce)').matches
+    }
+
+    #positionAtOrigin(dialog, origin) {
+        const originRect = origin.getBoundingClientRect()
+        const vw = window.innerWidth
+        const vh = window.innerHeight
+
+        dialog.style.margin = '0'
+        dialog.style.position = 'fixed'
+        dialog.style.inset = 'auto'
+
+        const dialogRect = dialog.getBoundingClientRect()
+        const dialogW = dialogRect.width
+        const dialogH = dialogRect.height
+
+        const spaceRight = vw - originRect.left
+        const spaceLeft = originRect.right
+        const spaceBelow = vh - originRect.top
+        const spaceAbove = originRect.bottom
+
+        if (dialogW <= spaceRight) {
+            dialog.style.left = `${originRect.left}px`
+        } else if (dialogW <= spaceLeft) {
+            dialog.style.right = `${vw - originRect.right}px`
+        } else {
+            dialog.style.left = `${Math.max(0, (vw - dialogW) / 2)}px`
+        }
+
+        if (dialogH <= spaceBelow) {
+            dialog.style.top = `${originRect.top}px`
+        } else if (dialogH <= spaceAbove) {
+            dialog.style.bottom = `${vh - originRect.bottom}px`
+        } else {
+            dialog.style.top = `${Math.max(0, (vh - dialogH) / 2)}px`
+        }
+    }
+
+    injectStyles() {
+        if (document.getElementById(STYLE_ID)) return
+
+        const styles = `
+            .pretty-modal-opening {
+                animation: pretty-modal-opening 500ms cubic-bezier(.56,.27,0,1);
+            }
+
+            @keyframes pretty-modal-opening {
+                from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: blur(0px); }
+            }
+
+            .pretty-modal-closing {
+                animation:
+                    pretty-modal-closing-border-radius 500ms cubic-bezier(.56,.27,0,1),
+                    pretty-modal-closing-blur 500ms cubic-bezier(.37,.35,0,1),
+                    pretty-modal-closing-fade 700ms cubic-bezier(.56,.27,0,1)
+                ;
+            }
+
+            @keyframes pretty-modal-closing-border-radius {
+                to { border-radius: 400px; }
+            }
+
+            @keyframes pretty-modal-closing-blur {
+                0% { filter: blur(0); } 100% { filter: blur(32px); }
+            }
+
+            @keyframes pretty-modal-closing-fade {
+                from { opacity: 1; } to { opacity: 0; }
+            }
+
+            dialog[open]::backdrop {
+                background: rgba(0,0,0,0.2);
+                backdrop-filter: blur(2px);
+            }
+
+            dialog.pretty-modal-opening::backdrop {
+                animation: pretty-modal-backdrop-in 400ms cubic-bezier(.56,.27,0,1);
+            }
+
+            dialog.pretty-modal-closing::backdrop {
+                animation: pretty-modal-backdrop-out 400ms cubic-bezier(.56,.27,0,1) forwards;
+            }
+
+            @keyframes pretty-modal-backdrop-in {
+                from { background: rgba(0,0,0,0); backdrop-filter: blur(0px); }
+                to   { background: rgba(0,0,0,0.2); backdrop-filter: blur(2px); }
+            }
+
+            @keyframes pretty-modal-backdrop-out {
+                from { background: rgba(0,0,0,0.2); backdrop-filter: blur(2px); }
+                to   { background: rgba(0,0,0,0); backdrop-filter: blur(0px); }
+            }
+
+            @media (prefers-reduced-motion: reduce) {
+                .pretty-modal-opening,
+                .pretty-modal-closing,
+                dialog.pretty-modal-opening::backdrop,
+                dialog.pretty-modal-closing::backdrop {
+                    animation: none;
+                }
+            }
+        `
+
+        const styleSheet = document.createElement('style')
+        styleSheet.id = STYLE_ID
+        styleSheet.textContent = styles
+        document.head.appendChild(styleSheet)
+    }
+}