@ssgoi/react 0.0.6 → 2.0.0

package/dist/presets/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@ssgoi/core/presets");Object.keys(t).forEach(e=>{e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:()=>t[e]})});

package/dist/presets/index.d.ts

@@ -0,0 +1 @@
+export * from '@ssgoi/core/presets';

package/dist/presets/index.js

@@ -0,0 +1 @@
+export * from "@ssgoi/core/presets";

package/dist/ssgoi-transition.cjs

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),o=require("@ssgoi/core"),s=require("./context.cjs"),r=({children:i,id:t})=>{const e=s.useSsgoi();return n.jsx("div",{ref:o.transition(e(t)),"data-ssgoi-transition":t,children:i})};exports.SsgoiTransition=r;

package/dist/ssgoi-transition.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as r } from "react/jsx-runtime";
+import { transition as s } from "@ssgoi/core";
+import { useSsgoi as n } from "./context.js";
+const f = ({
+  children: t,
+  id: o
+}) => {
+  const i = n();
+  return /* @__PURE__ */ r("div", { ref: s(i(o)), "data-ssgoi-transition": o, children: t });
+};
+export {
+  f as SsgoiTransition
+};

package/dist/ssgoi.cjs

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("react"),i=require("./context.cjs"),n=require("@ssgoi/core"),c=({config:e,children:t})=>{const o=s.useMemo(()=>n.createSggoiTransitionContext(e),[e]);return r.jsx(i.SsgoiProvider,{value:o,children:t})};exports.Ssgoi=c;

package/dist/ssgoi.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as e } from "react/jsx-runtime";
+import { useMemo as i } from "react";
+import { SsgoiProvider as m } from "./context.js";
+import { createSggoiTransitionContext as s } from "@ssgoi/core";
+const x = ({ config: o, children: r }) => {
+  const t = i(
+    () => s(o),
+    [o]
+  );
+  return /* @__PURE__ */ e(m, { value: t, children: r });
+};
+export {
+  x as Ssgoi
+};

package/dist/transition.d.ts

@@ -1,2 +1 @@
-import { transition as _transition } from '@ssgoi/core';
-export declare const transition: typeof _transition;
+export { transition } from '@ssgoi/core';

package/dist/transitions/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=(r={})=>{const{from:i=0,to:c=1,spring:a={stiffness:300,damping:30}}=r;return{in:o=>({spring:a,tick:s=>{const t=i+(c-i)*s;o.style.opacity=t.toString()}}),out:o=>({spring:a,tick:s=>{const t=i+(c-i)*s;o.style.opacity=t.toString()}})}},u=(r={})=>{const{from:i=0,to:c=1,spring:a={stiffness:300,damping:30}}=r;return{in:o=>({spring:a,tick:s=>{const t=i+(c-i)*s;o.style.transform=`scale(${t})`}}),out:o=>({spring:a,tick:s=>{const t=i+(c-i)*s;o.style.transform=`scale(${t})`}})}},y=(r={})=>{const{direction:i="left",distance:c=100,fade:a=!0,spring:o={stiffness:400,damping:35}}=r,s=t=>{const n=(1-t)*c;switch(i){case"left":return`translateX(${-n}px)`;case"right":return`translateX(${n}px)`;case"up":return`translateY(${-n}px)`;case"down":return`translateY(${n}px)`}};return{in:t=>({spring:o,tick:n=>{t.style.transform=s(n),a&&(t.style.opacity=n.toString())}}),out:t=>({spring:o,tick:n=>{t.style.transform=s(n),a&&(t.style.opacity=n.toString())}})}},p=(r={})=>{const{degrees:i=360,clockwise:c=!0,scale:a=!1,fade:o=!1,spring:s={stiffness:500,damping:25}}=r,t=c?i:-i;return{in:n=>({spring:s,tick:e=>{const f=[`rotate(${e*t}deg)`];a&&f.push(`scale(${e})`),n.style.transform=f.join(" "),o&&(n.style.opacity=e.toString())}}),out:n=>({spring:s,tick:e=>{const f=[`rotate(${e*t}deg)`];a&&f.push(`scale(${e})`),n.style.transform=f.join(" "),o&&(n.style.opacity=e.toString())}})}},d=(r={})=>{const{height:i=20,scale:c=!0,fade:a=!1,spring:o={stiffness:800,damping:15}}=r;return{in:s=>({spring:o,tick:t=>{const n=[],e=Math.sin(t*Math.PI)*i*(1-t);n.push(`translateY(${-e}px)`),c&&n.push(`scale(${.8+t*.2})`),s.style.transform=n.join(" "),a&&(s.style.opacity=t.toString())}}),out:s=>({spring:o,tick:t=>{const n=[],e=Math.sin(t*Math.PI)*i*(1-t);n.push(`translateY(${-e}px)`),c&&n.push(`scale(${.8+t*.2})`),s.style.transform=n.join(" "),a&&(s.style.opacity=t.toString())}})}},g=(r={})=>{const{amount:i=10,scale:c=!1,fade:a=!0,spring:o={stiffness:300,damping:30}}=r;return{in:s=>({spring:o,tick:t=>{const e=[`blur(${(1-t)*i}px)`];s.style.filter=e.join(" "),c&&(s.style.transform=`scale(${.8+t*.2})`),a&&(s.style.opacity=t.toString())}}),out:s=>({spring:o,tick:t=>{const e=[`blur(${(1-t)*i}px)`];s.style.filter=e.join(" "),c&&(s.style.transform=`scale(${.8+t*.2})`),a&&(s.style.opacity=t.toString())}})}},m=(r={})=>{const{spring:i={stiffness:1e3,damping:100}}=r;return{in:c=>({spring:i,tick:a=>{}}),out:c=>({spring:i,tick:a=>{}})}};exports.blur=g;exports.bounce=d;exports.fade=l;exports.none=m;exports.rotate=p;exports.scale=u;exports.slide=y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@ssgoi/core/transitions");Object.keys(t).forEach(e=>{e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:()=>t[e]})});

package/dist/transitions/index.js

@@ -1,173 +1 @@
-const l = (r = {}) => {
-  const {
-    from: i = 0,
-    to: c = 1,
-    spring: a = { stiffness: 300, damping: 30 }
-  } = r;
-  return {
-    in: (o) => ({
-      spring: a,
-      tick: (s) => {
-        const t = i + (c - i) * s;
-        o.style.opacity = t.toString();
-      }
-    }),
-    out: (o) => ({
-      spring: a,
-      tick: (s) => {
-        const t = i + (c - i) * s;
-        o.style.opacity = t.toString();
-      }
-    })
-  };
-}, u = (r = {}) => {
-  const {
-    from: i = 0,
-    to: c = 1,
-    spring: a = { stiffness: 300, damping: 30 }
-  } = r;
-  return {
-    in: (o) => ({
-      spring: a,
-      tick: (s) => {
-        const t = i + (c - i) * s;
-        o.style.transform = `scale(${t})`;
-      }
-    }),
-    out: (o) => ({
-      spring: a,
-      tick: (s) => {
-        const t = i + (c - i) * s;
-        o.style.transform = `scale(${t})`;
-      }
-    })
-  };
-}, y = (r = {}) => {
-  const {
-    direction: i = "left",
-    distance: c = 100,
-    fade: a = !0,
-    spring: o = { stiffness: 400, damping: 35 }
-  } = r, s = (t) => {
-    const n = (1 - t) * c;
-    switch (i) {
-      case "left":
-        return `translateX(${-n}px)`;
-      case "right":
-        return `translateX(${n}px)`;
-      case "up":
-        return `translateY(${-n}px)`;
-      case "down":
-        return `translateY(${n}px)`;
-    }
-  };
-  return {
-    in: (t) => ({
-      spring: o,
-      tick: (n) => {
-        t.style.transform = s(n), a && (t.style.opacity = n.toString());
-      }
-    }),
-    out: (t) => ({
-      spring: o,
-      tick: (n) => {
-        t.style.transform = s(n), a && (t.style.opacity = n.toString());
-      }
-    })
-  };
-}, p = (r = {}) => {
-  const {
-    degrees: i = 360,
-    clockwise: c = !0,
-    scale: a = !1,
-    fade: o = !1,
-    spring: s = { stiffness: 500, damping: 25 }
-  } = r, t = c ? i : -i;
-  return {
-    in: (n) => ({
-      spring: s,
-      tick: (e) => {
-        const f = [`rotate(${e * t}deg)`];
-        a && f.push(`scale(${e})`), n.style.transform = f.join(" "), o && (n.style.opacity = e.toString());
-      }
-    }),
-    out: (n) => ({
-      spring: s,
-      tick: (e) => {
-        const f = [`rotate(${e * t}deg)`];
-        a && f.push(`scale(${e})`), n.style.transform = f.join(" "), o && (n.style.opacity = e.toString());
-      }
-    })
-  };
-}, d = (r = {}) => {
-  const {
-    height: i = 20,
-    scale: c = !0,
-    fade: a = !1,
-    spring: o = { stiffness: 800, damping: 15 }
-  } = r;
-  return {
-    in: (s) => ({
-      spring: o,
-      tick: (t) => {
-        const n = [], e = Math.sin(t * Math.PI) * i * (1 - t);
-        n.push(`translateY(${-e}px)`), c && n.push(`scale(${0.8 + t * 0.2})`), s.style.transform = n.join(" "), a && (s.style.opacity = t.toString());
-      }
-    }),
-    out: (s) => ({
-      spring: o,
-      tick: (t) => {
-        const n = [], e = Math.sin(t * Math.PI) * i * (1 - t);
-        n.push(`translateY(${-e}px)`), c && n.push(`scale(${0.8 + t * 0.2})`), s.style.transform = n.join(" "), a && (s.style.opacity = t.toString());
-      }
-    })
-  };
-}, $ = (r = {}) => {
-  const {
-    amount: i = 10,
-    scale: c = !1,
-    fade: a = !0,
-    spring: o = { stiffness: 300, damping: 30 }
-  } = r;
-  return {
-    in: (s) => ({
-      spring: o,
-      tick: (t) => {
-        const e = [`blur(${(1 - t) * i}px)`];
-        s.style.filter = e.join(" "), c && (s.style.transform = `scale(${0.8 + t * 0.2})`), a && (s.style.opacity = t.toString());
-      }
-    }),
-    out: (s) => ({
-      spring: o,
-      tick: (t) => {
-        const e = [`blur(${(1 - t) * i}px)`];
-        s.style.filter = e.join(" "), c && (s.style.transform = `scale(${0.8 + t * 0.2})`), a && (s.style.opacity = t.toString());
-      }
-    })
-  };
-}, m = (r = {}) => {
-  const {
-    spring: i = { stiffness: 1e3, damping: 100 }
-  } = r;
-  return {
-    in: (c) => ({
-      spring: i,
-      tick: (a) => {
-      }
-    }),
-    out: (c) => ({
-      spring: i,
-      tick: (a) => {
-      }
-    })
-  };
-};
-export {
-  $ as blur,
-  d as bounce,
-  l as fade,
-  m as none,
-  p as rotate,
-  u as scale,
-  y as slide
-};
+export * from "@ssgoi/core/transitions";

package/dist/view-transitions/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const k=require("../utils-BSgyev81.cjs"),P=(t={})=>{const n={stiffness:t.spring?.stiffness??300,damping:t.spring?.damping??30};return{in:e=>({spring:n,tick:i=>{e.style.opacity=i.toString()}}),out:e=>({spring:n,tick:i=>{e.style.opacity=i.toString()},prepare:k.prepareOutgoing})}};function b(t,n){return t.querySelector(`[data-hero-key="${n}"]`)}function A(t,n){const e=t.getBoundingClientRect(),i=n.getBoundingClientRect();return new DOMRect(i.left-e.left,i.top-e.top,i.width,i.height)}const C=(t={})=>{const n={stiffness:t.spring?.stiffness??300,damping:t.spring?.damping??30},e=t.timeout??300;let i=null,s=null;return{in:async(a,h)=>{const o=a,c=Array.from(o.querySelectorAll("[data-hero-key]"));if(c.length===0)return{spring:n,tick:()=>{}};if(!await new Promise(l=>{i?l(!0):(s=l,setTimeout(()=>{s=null,l(!1)},e))})||!i)return i=null,{spring:n,tick:()=>{}};const r=c.map(l=>{const y=l.getAttribute("data-hero-key");if(!y)return null;const d=b(i,y);if(!d)return null;const p=l,u=A(i,d),f=A(o,p),$=u.left-f.left-h.scrollOffset.x,w=u.top-f.top-h.scrollOffset.y,x=u.width/f.width,M=u.height/f.height,q=p.style.transform,O=p.style.position,T=p.style.transformOrigin;return{toEl:p,dx:$,dy:w,dw:x,dh:M,originalTransform:q,originalPosition:O,originalTransformOrigin:T}}).filter(Boolean);return i=null,r.length===0?{spring:n,tick:()=>{}}:{spring:n,prepare:()=>{r.forEach(({toEl:l})=>{l.style.position="relative",l.style.transformOrigin="top left"})},tick:l=>{r.forEach(({toEl:y,dx:d,dy:p,dw:u,dh:f})=>{y.style.transform=`translate(${(1-l)*d}px,${(1-l)*p}px) scale(${l+(1-l)*u}, ${l+(1-l)*f})`})},onEnd:()=>{r.forEach(({toEl:l,originalTransform:y,originalPosition:d,originalTransformOrigin:p})=>{l.style.transform=y,l.style.position=d,l.style.transformOrigin=p})}}},out:async a=>({onStart:()=>{i=a,s&&(s(!0),s=null)},prepare:h=>{k.prepareOutgoing(h),h.style.opacity="0"}})}};function S(t,n){const e=t.getBoundingClientRect(),i=n.getBoundingClientRect();return new DOMRect(i.left-e.left,i.top-e.top,i.width,i.height)}function E({detailRect:t,galleryRect:n,pageRect:e,scrollOffset:i},s){const a=n.left-t.left+(n.width-t.width)/2-i.x,h=n.top-t.top+(n.height-t.height)/2-i.y,o=n.width/t.width,c=n.height/t.height,g=Math.max(o,c),r=t.top/e.height*100,l=(e.width-(t.left+t.width))/e.width*100,y=(e.height-(t.top+t.height))/e.height*100,d=t.left/e.width*100;return s.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`,p=>{const u=1-p,f=r*u,$=l*u,w=y*u,x=d*u;s.style.clipPath=`inset(${f}% ${$}% ${w}% ${x}%)`,s.style.transform=`translate(${a*u}px, ${h*u}px) scale(${1+(g-1)*u})`}}function D({galleryRect:t,detailRect:n,scrollOffset:e},i){const s=n.left-t.left+(n.width-t.width)/2+e.x,a=n.top-t.top+(n.height-t.height)/2+e.y,h=n.width/t.width,o=n.height/t.height,c=Math.max(h,o);return g=>{i.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`;const r=1-g;i.style.transform=`translate(${s*r-e.x}px, ${a*r-e.y}px) scale(${1+(c-1)*r})`,i.style.opacity=`${1-r}`}}function H({galleryRect:t,detailRect:n,scrollOffset:e},i){const s=n.left-t.left+(n.width-t.width)/2-e.x,a=n.top-t.top+(n.height-t.height)/2-e.y,h=n.width/t.width,o=n.height/t.height,c=Math.max(h,o);return g=>{const r=1-g,l=g;i.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`,i.style.transform=`translate(${s*r}px, ${a*r}px) scale(${1+(c-1)*r})`,i.style.opacity=`${l}`}}function F({detailRect:t,galleryRect:n,pageRect:e,scrollOffset:i},s){const a=n.left-t.left+(n.width-t.width)/2+i.x,h=n.top-t.top+(n.height-t.height)/2+i.y,o=n.width/t.width,c=n.height/t.height,g=Math.min(o,c),r=t.top/e.height*100,l=(e.width-(t.left+t.width))/e.width*100,y=(e.height-(t.top+t.height))/e.height*100,d=t.left/e.width*100;return s.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`,p=>{const u=1-p,f=r*u,$=l*u,w=y*u,x=d*u;s.style.clipPath=`inset(${f}% ${$}% ${w}% ${x}%)`,s.style.transform=`translate(${a*u-i.x}px, ${h*u-i.y}px) scale(${1+(g-1)*u})`}}function I(t,n,e){const i=t.querySelector("[data-pinterest-detail-key]"),s=n.querySelector("[data-pinterest-detail-key]");if(t.querySelectorAll("[data-pinterest-detail-key]").length>1||n.querySelectorAll("[data-pinterest-detail-key]").length>1)return null;let a=null,h=null,o=!1;if(!i&&s){h=s;const l=h.getAttribute("data-pinterest-detail-key");if(!l)return null;a=t.querySelector(`[data-pinterest-gallery-key="${l}"]`),a&&(o=!0)}else if(i&&!s){h=i;const l=h.getAttribute("data-pinterest-detail-key");if(!l)return null;a=n.querySelector(`[data-pinterest-gallery-key="${l}"]`),a&&(o=!1)}if(!a||!h)return null;const c=S(o?t:n,a),g=S(o?n:t,h),r=n.getBoundingClientRect();return o?{inAnimation:E({detailRect:g,galleryRect:c,pageRect:r,scrollOffset:e},n),outAnimation:D({galleryRect:c,detailRect:g,scrollOffset:e},t)}:{inAnimation:H({galleryRect:c,detailRect:g,scrollOffset:e},n),outAnimation:F({detailRect:g,galleryRect:c,pageRect:r,scrollOffset:e},t)}}const L=(t={})=>{const n={stiffness:t.spring?.stiffness??50,damping:t.spring?.damping??10},e=t.timeout??300;let i=null,s=null,a=null;return{in:async(h,{scrollOffset:o})=>{const c=h;return!await new Promise(r=>{i?r(!0):(s=r,setTimeout(()=>{s=null,r(!1)},e))})||!i?(i=null,{spring:n,tick:()=>{}}):(a=I(i,c,o),a?(i=null,{spring:n,tick:r=>{a&&a.inAnimation(r)}}):{spring:n,tick:()=>{}})},out:async h=>({spring:n,onStart:()=>{i=h,s&&(s(!0),s=null)},prepare:o=>{k.prepareOutgoing(o),o.style.zIndex="-1"},tick:o=>{a&&a.outAnimation(o)}})}};function B(t){const n=t.getBoundingClientRect(),e=t.clientHeight,s=50*(window.innerHeight-n.top)/e;return Math.min(Math.max(s,0),100)}const X=(t={})=>{const n={stiffness:t.spring?.stiffness??300,damping:t.spring?.damping??200};return{in:e=>{const i=B(e);return{spring:n,tick:s=>{e.style.clipPath=`circle(${s*100}% at 50% ${i}%)`}}},out:e=>{const i=B(e);return{spring:n,tick:s=>{e.style.clipPath=`circle(${s*100}% at 50% ${i}%)`,e.style.zIndex="100"},prepare:k.prepareOutgoing}}}};exports.fade=P;exports.hero=C;exports.pinterest=L;exports.ripple=X;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@ssgoi/core/view-transitions");Object.keys(t).forEach(e=>{e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:()=>t[e]})});

package/dist/view-transitions/index.js

@@ -1,301 +1 @@
-import { p as k } from "../utils-DR41YsAh.js";
-const I = (t = {}) => {
-  const n = {
-    stiffness: t.spring?.stiffness ?? 300,
-    damping: t.spring?.damping ?? 30
-  };
-  return {
-    in: (e) => ({
-      spring: n,
-      tick: (i) => {
-        e.style.opacity = i.toString();
-      }
-    }),
-    out: (e) => ({
-      spring: n,
-      tick: (i) => {
-        e.style.opacity = i.toString();
-      },
-      prepare: k
-    })
-  };
-};
-function E(t, n) {
-  return t.querySelector(`[data-hero-key="${n}"]`);
-}
-function A(t, n) {
-  const e = t.getBoundingClientRect(), i = n.getBoundingClientRect();
-  return new DOMRect(
-    i.left - e.left,
-    i.top - e.top,
-    i.width,
-    i.height
-  );
-}
-const L = (t = {}) => {
-  const n = {
-    stiffness: t.spring?.stiffness ?? 300,
-    damping: t.spring?.damping ?? 30
-  }, e = t.timeout ?? 300;
-  let i = null, s = null;
-  return {
-    in: async (a, h) => {
-      const o = a, c = Array.from(o.querySelectorAll("[data-hero-key]"));
-      if (c.length === 0)
-        return {
-          spring: n,
-          tick: () => {
-          }
-          // No hero elements, skip animation
-        };
-      if (!await new Promise((l) => {
-        i ? l(!0) : (s = l, setTimeout(() => {
-          s = null, l(!1);
-        }, e));
-      }) || !i)
-        return i = null, {
-          spring: n,
-          tick: () => {
-          }
-          // No fromNode, skip animation
-        };
-      const r = c.map((l) => {
-        const y = l.getAttribute("data-hero-key");
-        if (!y) return null;
-        const d = E(i, y);
-        if (!d) return null;
-        const p = l, u = A(i, d), f = A(o, p), $ = u.left - f.left - h.scrollOffset.x, w = u.top - f.top - h.scrollOffset.y, x = u.width / f.width, M = u.height / f.height, q = p.style.transform, T = p.style.position, C = p.style.transformOrigin;
-        return {
-          toEl: p,
-          dx: $,
-          dy: w,
-          dw: x,
-          dh: M,
-          originalTransform: q,
-          originalPosition: T,
-          originalTransformOrigin: C
-        };
-      }).filter(Boolean);
-      return i = null, r.length === 0 ? {
-        spring: n,
-        tick: () => {
-        }
-        // No matching hero elements
-      } : {
-        spring: n,
-        prepare: () => {
-          r.forEach(({ toEl: l }) => {
-            l.style.position = "relative", l.style.transformOrigin = "top left";
-          });
-        },
-        tick: (l) => {
-          r.forEach(({ toEl: y, dx: d, dy: p, dw: u, dh: f }) => {
-            y.style.transform = `translate(${(1 - l) * d}px,${(1 - l) * p}px) scale(${l + (1 - l) * u}, ${l + (1 - l) * f})`;
-          });
-        },
-        onEnd: () => {
-          r.forEach(
-            ({
-              toEl: l,
-              originalTransform: y,
-              originalPosition: d,
-              originalTransformOrigin: p
-            }) => {
-              l.style.transform = y, l.style.position = d, l.style.transformOrigin = p;
-            }
-          );
-        }
-      };
-    },
-    out: async (a) => ({
-      onStart: () => {
-        i = a, s && (s(!0), s = null);
-      },
-      prepare: (h) => {
-        k(h), h.style.opacity = "0";
-      }
-    })
-  };
-};
-function S(t, n) {
-  const e = t.getBoundingClientRect(), i = n.getBoundingClientRect();
-  return new DOMRect(
-    i.left - e.left,
-    i.top - e.top,
-    i.width,
-    i.height
-  );
-}
-function P({
-  detailRect: t,
-  galleryRect: n,
-  pageRect: e,
-  scrollOffset: i
-}, s) {
-  const a = n.left - t.left + (n.width - t.width) / 2 - i.x, h = n.top - t.top + (n.height - t.height) / 2 - i.y, o = n.width / t.width, c = n.height / t.height, g = Math.max(o, c), r = t.top / e.height * 100, l = (e.width - (t.left + t.width)) / e.width * 100, y = (e.height - (t.top + t.height)) / e.height * 100, d = t.left / e.width * 100;
-  return s.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`, (p) => {
-    const u = 1 - p, f = r * u, $ = l * u, w = y * u, x = d * u;
-    s.style.clipPath = `inset(${f}% ${$}% ${w}% ${x}%)`, s.style.transform = `translate(${a * u}px, ${h * u}px) scale(${1 + (g - 1) * u})`;
-  };
-}
-function D({
-  galleryRect: t,
-  detailRect: n,
-  scrollOffset: e
-}, i) {
-  const s = n.left - t.left + (n.width - t.width) / 2 + e.x, a = n.top - t.top + (n.height - t.height) / 2 + e.y, h = n.width / t.width, o = n.height / t.height, c = Math.max(h, o);
-  return (g) => {
-    i.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`;
-    const r = 1 - g;
-    i.style.transform = `translate(${s * r - e.x}px, ${a * r - e.y}px) scale(${1 + (c - 1) * r})`, i.style.opacity = `${1 - r}`;
-  };
-}
-function H({
-  galleryRect: t,
-  detailRect: n,
-  scrollOffset: e
-}, i) {
-  const s = n.left - t.left + (n.width - t.width) / 2 - e.x, a = n.top - t.top + (n.height - t.height) / 2 - e.y, h = n.width / t.width, o = n.height / t.height, c = Math.max(h, o);
-  return (g) => {
-    const r = 1 - g, l = g;
-    i.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`, i.style.transform = `translate(${s * r}px, ${a * r}px) scale(${1 + (c - 1) * r})`, i.style.opacity = `${l}`;
-  };
-}
-function b({
-  detailRect: t,
-  galleryRect: n,
-  pageRect: e,
-  scrollOffset: i
-}, s) {
-  const a = n.left - t.left + (n.width - t.width) / 2 + i.x, h = n.top - t.top + (n.height - t.height) / 2 + i.y, o = n.width / t.width, c = n.height / t.height, g = Math.min(o, c), r = t.top / e.height * 100, l = (e.width - (t.left + t.width)) / e.width * 100, y = (e.height - (t.top + t.height)) / e.height * 100, d = t.left / e.width * 100;
-  return s.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`, (p) => {
-    const u = 1 - p, f = r * u, $ = l * u, w = y * u, x = d * u;
-    s.style.clipPath = `inset(${f}% ${$}% ${w}% ${x}%)`, s.style.transform = `translate(${a * u - i.x}px, ${h * u - i.y}px) scale(${1 + (g - 1) * u})`;
-  };
-}
-function O(t, n, e) {
-  const i = t.querySelector(
-    "[data-pinterest-detail-key]"
-  ), s = n.querySelector(
-    "[data-pinterest-detail-key]"
-  );
-  if (t.querySelectorAll("[data-pinterest-detail-key]").length > 1 || n.querySelectorAll("[data-pinterest-detail-key]").length > 1)
-    return null;
-  let a = null, h = null, o = !1;
-  if (!i && s) {
-    h = s;
-    const l = h.getAttribute("data-pinterest-detail-key");
-    if (!l) return null;
-    a = t.querySelector(
-      `[data-pinterest-gallery-key="${l}"]`
-    ), a && (o = !0);
-  } else if (i && !s) {
-    h = i;
-    const l = h.getAttribute("data-pinterest-detail-key");
-    if (!l) return null;
-    a = n.querySelector(
-      `[data-pinterest-gallery-key="${l}"]`
-    ), a && (o = !1);
-  }
-  if (!a || !h)
-    return null;
-  const c = S(o ? t : n, a), g = S(o ? n : t, h), r = n.getBoundingClientRect();
-  return o ? {
-    inAnimation: P(
-      { detailRect: g, galleryRect: c, pageRect: r, scrollOffset: e },
-      n
-    ),
-    outAnimation: D(
-      { galleryRect: c, detailRect: g, scrollOffset: e },
-      t
-    )
-  } : {
-    inAnimation: H(
-      { galleryRect: c, detailRect: g, scrollOffset: e },
-      n
-    ),
-    outAnimation: b(
-      { detailRect: g, galleryRect: c, pageRect: r, scrollOffset: e },
-      t
-    )
-  };
-}
-const X = (t = {}) => {
-  const n = {
-    stiffness: t.spring?.stiffness ?? 50,
-    damping: t.spring?.damping ?? 10
-  }, e = t.timeout ?? 300;
-  let i = null, s = null, a = null;
-  return {
-    in: async (h, { scrollOffset: o }) => {
-      const c = h;
-      return !await new Promise((r) => {
-        i ? r(!0) : (s = r, setTimeout(() => {
-          s = null, r(!1);
-        }, e));
-      }) || !i ? (i = null, {
-        spring: n,
-        tick: () => {
-        }
-      }) : (a = O(i, c, o), a ? (i = null, {
-        spring: n,
-        tick: (r) => {
-          a && a.inAnimation(r);
-        }
-      }) : {
-        spring: n,
-        tick: () => {
-        }
-      });
-    },
-    out: async (h) => ({
-      spring: n,
-      onStart: () => {
-        i = h, s && (s(!0), s = null);
-      },
-      prepare: (o) => {
-        k(o), o.style.zIndex = "-1";
-      },
-      tick: (o) => {
-        a && a.outAnimation(o);
-      }
-    })
-  };
-};
-function B(t) {
-  const n = t.getBoundingClientRect(), e = t.clientHeight, s = 50 * (window.innerHeight - n.top) / e;
-  return Math.min(Math.max(s, 0), 100);
-}
-const Y = (t = {}) => {
-  const n = {
-    stiffness: t.spring?.stiffness ?? 300,
-    damping: t.spring?.damping ?? 200
-  };
-  return {
-    in: (e) => {
-      const i = B(e);
-      return {
-        spring: n,
-        tick: (s) => {
-          e.style.clipPath = `circle(${s * 100}% at 50% ${i}%)`;
-        }
-      };
-    },
-    out: (e) => {
-      const i = B(e);
-      return {
-        spring: n,
-        tick: (s) => {
-          e.style.clipPath = `circle(${s * 100}% at 50% ${i}%)`, e.style.zIndex = "100";
-        },
-        prepare: k
-      };
-    }
-  };
-};
-export {
-  I as fade,
-  L as hero,
-  X as pinterest,
-  Y as ripple
-};
+export * from "@ssgoi/core/view-transitions";

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "@ssgoi/react",
-  "version": "0.0.6",
+  "version": "2.0.0",
+  "description": "React bindings for SSGOI - Native app-like page transitions for React applications",
+  "private": false,
   "type": "module",
   "files": [
     "dist",
-    "src"
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
   ],
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -33,10 +36,16 @@
       "import": "./dist/types.js",
       "require": "./dist/types.cjs",
       "default": "./dist/types.js"
+    },
+    "./presets": {
+      "types": "./dist/presets/index.d.ts",
+      "import": "./dist/presets/index.js",
+      "require": "./dist/presets/index.cjs",
+      "default": "./dist/presets/index.js"
     }
   },
   "dependencies": {
-    "@ssgoi/core": "0.0.1"
+    "@ssgoi/core": "2.0.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -51,14 +60,40 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "globals": "^16.3.0",
+    "rollup-plugin-preserve-directives": "^0.4.0",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.35.1",
     "vite": "^7.0.4",
     "vite-plugin-dts": "^4.5.4"
   },
+  "keywords": [
+    "react",
+    "page-transition",
+    "animation",
+    "ssgoi",
+    "spring-physics"
+  ],
+  "author": "MeurSyphus <tmdeoans@snu.ac.kr>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/meursyphus/ssgoi.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://ssgoi.dev",
+  "bugs": {
+    "url": "https://github.com/meursyphus/ssgoi/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
   "scripts": {
     "dev": "vite build --watch",
     "build": "tsc -b && vite build",
+    "watch": "vite build --watch",
     "lint": "eslint .",
     "preview": "vite preview",
     "package": "vite build"

package/dist/utils-BSgyev81.cjs

@@ -1 +0,0 @@
-"use strict";const n=e=>{e.style.position="absolute",e.style.width="100%",e.style.top="0",e.style.left="0"},r=e=>{let t=e.parentElement;for(;t&&t!==document.body;){const l=window.getComputedStyle(t),o=l.overflow+l.overflowY+l.overflowX;if(o.includes("auto")||o.includes("scroll")||t.scrollHeight>t.clientHeight||t.scrollWidth>t.clientWidth)return t;t=t.parentElement}return document.documentElement};exports.getScrollingElement=r;exports.prepareOutgoing=n;

package/dist/utils-DR41YsAh.js

@@ -1,16 +0,0 @@
-const n = (e) => {
-  e.style.position = "absolute", e.style.width = "100%", e.style.top = "0", e.style.left = "0";
-}, r = (e) => {
-  let t = e.parentElement;
-  for (; t && t !== document.body; ) {
-    const o = window.getComputedStyle(t), l = o.overflow + o.overflowY + o.overflowX;
-    if (l.includes("auto") || l.includes("scroll") || t.scrollHeight > t.clientHeight || t.scrollWidth > t.clientWidth)
-      return t;
-    t = t.parentElement;
-  }
-  return document.documentElement;
-};
-export {
-  r as g,
-  n as p
-};

package/src/assets/react.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

package/src/lib/context.tsx

@@ -1,14 +0,0 @@
-import { createContext, useContext } from "react";
-import type { SsgoiContext } from "./types";
-
-const SsgoiContextInstance = createContext<SsgoiContext | null>(null);
-
-export const SsgoiProvider = SsgoiContextInstance.Provider;
-
-export const useSsgoi = () => {
-  const context = useContext(SsgoiContextInstance);
-  if (!context) {
-    throw new Error("useSsgoi must be used within SsgoiProvider");
-  }
-  return context;
-};