@ssgoi/react 0.0.7 → 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 p=(o={})=>{const{from:i=0,to:a=1,spring:e={stiffness:300,damping:30}}=o;return{in:r=>({spring:e,tick:n=>{const t=i+(a-i)*n;r.style.opacity=t.toString()}}),out:r=>({spring:e,tick:n=>{const t=i+(a-i)*n;r.style.opacity=t.toString()}})}},g=(o={})=>{const{from:i=0,to:a=1,spring:e={stiffness:300,damping:30}}=o;return{in:r=>({spring:e,tick:n=>{const t=i+(a-i)*n;r.style.transform=`scale(${t})`}}),out:r=>({spring:e,tick:n=>{const t=i+(a-i)*n;r.style.transform=`scale(${t})`}})}},f=(o={})=>{const{direction:i="left",distance:a=100,fade:e=!0,spring:r={stiffness:400,damping:35}}=o,n=t=>{const s=(1-t)*a;switch(i){case"left":return`translateX(${-s}px)`;case"right":return`translateX(${s}px)`;case"up":return`translateY(${-s}px)`;case"down":return`translateY(${s}px)`}};return{in:t=>({spring:r,tick:s=>{t.style.transform=n(s),e&&(t.style.opacity=s.toString())}}),out:t=>({spring:r,tick:s=>{t.style.transform=n(s),e&&(t.style.opacity=s.toString())}})}},u=(o={})=>{const{degrees:i=360,clockwise:a=!0,scale:e=!1,fade:r=!1,spring:n={stiffness:500,damping:25}}=o,t=a?i:-i;return{in:s=>({spring:n,tick:c=>{const l=[`rotate(${c*t}deg)`];e&&l.push(`scale(${c})`),s.style.transform=l.join(" "),r&&(s.style.opacity=c.toString())}}),out:s=>({spring:n,tick:c=>{const l=[`rotate(${c*t}deg)`];e&&l.push(`scale(${c})`),s.style.transform=l.join(" "),r&&(s.style.opacity=c.toString())}})}},y=(o={})=>{const{height:i=20,scale:a=!0,fade:e=!1,spring:r={stiffness:800,damping:15}}=o;return{in:n=>({spring:r,tick:t=>{const s=[],c=Math.sin(t*Math.PI)*i*(1-t);s.push(`translateY(${-c}px)`),a&&s.push(`scale(${.8+t*.2})`),n.style.transform=s.join(" "),e&&(n.style.opacity=t.toString())}}),out:n=>({spring:r,tick:t=>{const s=[],c=Math.sin(t*Math.PI)*i*(1-t);s.push(`translateY(${-c}px)`),a&&s.push(`scale(${.8+t*.2})`),n.style.transform=s.join(" "),e&&(n.style.opacity=t.toString())}})}},d=(o={})=>{const{amount:i=10,scale:a=!1,fade:e=!0,spring:r={stiffness:300,damping:30}}=o;return{in:n=>({spring:r,tick:t=>{const s=[`blur(${(1-t)*i}px)`];n.style.filter=s.join(" "),a&&(n.style.transform=`scale(${.8+t*.2})`),e&&(n.style.opacity=t.toString())}}),out:n=>({spring:r,tick:t=>{const s=[`blur(${(1-t)*i}px)`];n.style.filter=s.join(" "),a&&(n.style.transform=`scale(${.8+t*.2})`),e&&(n.style.opacity=t.toString())}})}},m=(o={})=>{const{spring:i={stiffness:1e3,damping:100}}=o;return{in:a=>({spring:i,tick:e=>{}}),out:a=>({spring:i,tick:e=>{}})}};exports.blur=d;exports.bounce=y;exports.fade=p;exports.none=m;exports.rotate=u;exports.scale=g;exports.slide=f;
+"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 = (o = {}) => {
-  const {
-    from: i = 0,
-    to: a = 1,
-    spring: r = { stiffness: 300, damping: 30 }
-  } = o;
-  return {
-    in: (e) => ({
-      spring: r,
-      tick: (n) => {
-        const t = i + (a - i) * n;
-        e.style.opacity = t.toString();
-      }
-    }),
-    out: (e) => ({
-      spring: r,
-      tick: (n) => {
-        const t = i + (a - i) * n;
-        e.style.opacity = t.toString();
-      }
-    })
-  };
-}, g = (o = {}) => {
-  const {
-    from: i = 0,
-    to: a = 1,
-    spring: r = { stiffness: 300, damping: 30 }
-  } = o;
-  return {
-    in: (e) => ({
-      spring: r,
-      tick: (n) => {
-        const t = i + (a - i) * n;
-        e.style.transform = `scale(${t})`;
-      }
-    }),
-    out: (e) => ({
-      spring: r,
-      tick: (n) => {
-        const t = i + (a - i) * n;
-        e.style.transform = `scale(${t})`;
-      }
-    })
-  };
-}, f = (o = {}) => {
-  const {
-    direction: i = "left",
-    distance: a = 100,
-    fade: r = !0,
-    spring: e = { stiffness: 400, damping: 35 }
-  } = o, n = (t) => {
-    const s = (1 - t) * a;
-    switch (i) {
-      case "left":
-        return `translateX(${-s}px)`;
-      case "right":
-        return `translateX(${s}px)`;
-      case "up":
-        return `translateY(${-s}px)`;
-      case "down":
-        return `translateY(${s}px)`;
-    }
-  };
-  return {
-    in: (t) => ({
-      spring: e,
-      tick: (s) => {
-        t.style.transform = n(s), r && (t.style.opacity = s.toString());
-      }
-    }),
-    out: (t) => ({
-      spring: e,
-      tick: (s) => {
-        t.style.transform = n(s), r && (t.style.opacity = s.toString());
-      }
-    })
-  };
-}, u = (o = {}) => {
-  const {
-    degrees: i = 360,
-    clockwise: a = !0,
-    scale: r = !1,
-    fade: e = !1,
-    spring: n = { stiffness: 500, damping: 25 }
-  } = o, t = a ? i : -i;
-  return {
-    in: (s) => ({
-      spring: n,
-      tick: (c) => {
-        const p = [`rotate(${c * t}deg)`];
-        r && p.push(`scale(${c})`), s.style.transform = p.join(" "), e && (s.style.opacity = c.toString());
-      }
-    }),
-    out: (s) => ({
-      spring: n,
-      tick: (c) => {
-        const p = [`rotate(${c * t}deg)`];
-        r && p.push(`scale(${c})`), s.style.transform = p.join(" "), e && (s.style.opacity = c.toString());
-      }
-    })
-  };
-}, y = (o = {}) => {
-  const {
-    height: i = 20,
-    scale: a = !0,
-    fade: r = !1,
-    spring: e = { stiffness: 800, damping: 15 }
-  } = o;
-  return {
-    in: (n) => ({
-      spring: e,
-      tick: (t) => {
-        const s = [], c = Math.sin(t * Math.PI) * i * (1 - t);
-        s.push(`translateY(${-c}px)`), a && s.push(`scale(${0.8 + t * 0.2})`), n.style.transform = s.join(" "), r && (n.style.opacity = t.toString());
-      }
-    }),
-    out: (n) => ({
-      spring: e,
-      tick: (t) => {
-        const s = [], c = Math.sin(t * Math.PI) * i * (1 - t);
-        s.push(`translateY(${-c}px)`), a && s.push(`scale(${0.8 + t * 0.2})`), n.style.transform = s.join(" "), r && (n.style.opacity = t.toString());
-      }
-    })
-  };
-}, m = (o = {}) => {
-  const {
-    amount: i = 10,
-    scale: a = !1,
-    fade: r = !0,
-    spring: e = { stiffness: 300, damping: 30 }
-  } = o;
-  return {
-    in: (n) => ({
-      spring: e,
-      tick: (t) => {
-        const s = [`blur(${(1 - t) * i}px)`];
-        n.style.filter = s.join(" "), a && (n.style.transform = `scale(${0.8 + t * 0.2})`), r && (n.style.opacity = t.toString());
-      }
-    }),
-    out: (n) => ({
-      spring: e,
-      tick: (t) => {
-        const s = [`blur(${(1 - t) * i}px)`];
-        n.style.filter = s.join(" "), a && (n.style.transform = `scale(${0.8 + t * 0.2})`), r && (n.style.opacity = t.toString());
-      }
-    })
-  };
-}, d = (o = {}) => {
-  const {
-    spring: i = { stiffness: 1e3, damping: 100 }
-  } = o;
-  return {
-    in: (a) => ({
-      spring: i,
-      tick: (r) => {
-      }
-    }),
-    out: (a) => ({
-      spring: i,
-      tick: (r) => {
-      }
-    })
-  };
-};
-export {
-  m as blur,
-  y as bounce,
-  l as fade,
-  d as none,
-  u as rotate,
-  g as scale,
-  f 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 x=require("../utils-DR41YsAh-CN_CfgYX.cjs"),P=(t={})=>{var e,n;const i={stiffness:((e=t.spring)==null?void 0:e.stiffness)??300,damping:((n=t.spring)==null?void 0:n.damping)??30};return{in:r=>({spring:i,tick:l=>{r.style.opacity=l.toString()}}),out:r=>({spring:i,tick:l=>{r.style.opacity=l.toString()},prepare:x.n})}};function E(t,e){return t.querySelector(`[data-hero-key="${e}"]`)}function R(t,e){const n=t.getBoundingClientRect(),i=e.getBoundingClientRect();return new DOMRect(i.left-n.left,i.top-n.top,i.width,i.height)}const B=(t={})=>{var e,n;const i={stiffness:((e=t.spring)==null?void 0:e.stiffness)??300,damping:((n=t.spring)==null?void 0:n.damping)??30},r=t.timeout??300;let l=null,s=null;return{in:async(a,g)=>{const h=a,p=Array.from(h.querySelectorAll("[data-hero-key]"));if(p.length===0)return{spring:i,tick:()=>{}};if(!await new Promise(c=>{l?c(!0):(s=c,setTimeout(()=>{s=null,c(!1)},r))})||!l)return l=null,{spring:i,tick:()=>{}};const f=p.map(c=>{const u=c.getAttribute("data-hero-key");if(!u)return null;const d=E(l,u);if(!d)return null;const o=c,y=R(l,d),m=R(h,o),w=y.left-m.left-g.scrollOffset.x,$=y.top-m.top-g.scrollOffset.y,A=y.width/m.width,S=y.height/m.height,v=o.style.transform,q=o.style.position,M=o.style.transformOrigin;return{toEl:o,dx:w,dy:$,dw:A,dh:S,originalTransform:v,originalPosition:q,originalTransformOrigin:M}}).filter(Boolean);return l=null,f.length===0?{spring:i,tick:()=>{}}:{spring:i,prepare:()=>{f.forEach(({toEl:c})=>{c.style.position="relative",c.style.transformOrigin="top left"})},tick:c=>{f.forEach(({toEl:u,dx:d,dy:o,dw:y,dh:m})=>{u.style.transform=`translate(${(1-c)*d}px,${(1-c)*o}px) scale(${c+(1-c)*y}, ${c+(1-c)*m})`})},onEnd:()=>{f.forEach(({toEl:c,originalTransform:u,originalPosition:d,originalTransformOrigin:o})=>{c.style.transform=u,c.style.position=d,c.style.transformOrigin=o})}}},out:async a=>({onStart:()=>{l=a,s&&(s(!0),s=null)},prepare:g=>{x.n(g),g.style.opacity="0"}})}};function O(t,e){const n=t.getBoundingClientRect(),i=e.getBoundingClientRect();return new DOMRect(i.left-n.left,i.top-n.top,i.width,i.height)}function T({detailRect:t,galleryRect:e,pageRect:n,scrollOffset:i},r){const l=e.left-t.left+(e.width-t.width)/2-i.x,s=e.top-t.top+(e.height-t.height)/2-i.y,a=e.width/t.width,g=e.height/t.height,h=Math.max(a,g),p=t.top/n.height*100,f=(n.width-(t.left+t.width))/n.width*100,c=(n.height-(t.top+t.height))/n.height*100,u=t.left/n.width*100;return r.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`,d=>{const o=1-d,y=p*o,m=f*o,w=c*o,$=u*o;r.style.clipPath=`inset(${y}% ${m}% ${w}% ${$}%)`,r.style.transform=`translate(${l*o}px, ${s*o}px) scale(${1+(h-1)*o})`}}function C({galleryRect:t,detailRect:e,scrollOffset:n},i){const r=e.left-t.left+(e.width-t.width)/2+n.x,l=e.top-t.top+(e.height-t.height)/2+n.y,s=e.width/t.width,a=e.height/t.height,g=Math.max(s,a);return h=>{i.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`;const p=1-h;i.style.transform=`translate(${r*p-n.x}px, ${l*p-n.y}px) scale(${1+(g-1)*p})`,i.style.opacity=`${1-p}`}}function b({galleryRect:t,detailRect:e,scrollOffset:n},i){const r=e.left-t.left+(e.width-t.width)/2-n.x,l=e.top-t.top+(e.height-t.height)/2-n.y,s=e.width/t.width,a=e.height/t.height,g=Math.max(s,a);return h=>{const p=1-h,f=h;i.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`,i.style.transform=`translate(${r*p}px, ${l*p}px) scale(${1+(g-1)*p})`,i.style.opacity=`${f}`}}function D({detailRect:t,galleryRect:e,pageRect:n,scrollOffset:i},r){const l=e.left-t.left+(e.width-t.width)/2+i.x,s=e.top-t.top+(e.height-t.height)/2+i.y,a=e.width/t.width,g=e.height/t.height,h=Math.min(a,g),p=t.top/n.height*100,f=(n.width-(t.left+t.width))/n.width*100,c=(n.height-(t.top+t.height))/n.height*100,u=t.left/n.width*100;return r.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`,d=>{const o=1-d,y=p*o,m=f*o,w=c*o,$=u*o;r.style.clipPath=`inset(${y}% ${m}% ${w}% ${$}%)`,r.style.transform=`translate(${l*o-i.x}px, ${s*o-i.y}px) scale(${1+(h-1)*o})`}}function z(t,e,n){const i=t.querySelector("[data-pinterest-detail-key]"),r=e.querySelector("[data-pinterest-detail-key]");if(t.querySelectorAll("[data-pinterest-detail-key]").length>1||e.querySelectorAll("[data-pinterest-detail-key]").length>1)return null;let l=null,s=null,a=!1;if(!i&&r){s=r;const f=s.getAttribute("data-pinterest-detail-key");if(!f)return null;l=t.querySelector(`[data-pinterest-gallery-key="${f}"]`),l&&(a=!0)}else if(i&&!r){s=i;const f=s.getAttribute("data-pinterest-detail-key");if(!f)return null;l=e.querySelector(`[data-pinterest-gallery-key="${f}"]`),l&&(a=!1)}if(!l||!s)return null;const g=O(a?t:e,l),h=O(a?e:t,s),p=e.getBoundingClientRect();return a?{inAnimation:T({detailRect:h,galleryRect:g,pageRect:p,scrollOffset:n},e),outAnimation:C({galleryRect:g,detailRect:h,scrollOffset:n},t)}:{inAnimation:b({galleryRect:g,detailRect:h,scrollOffset:n},e),outAnimation:D({detailRect:h,galleryRect:g,pageRect:p,scrollOffset:n},t)}}const H=(t={})=>{var e,n;const i={stiffness:((e=t.spring)==null?void 0:e.stiffness)??50,damping:((n=t.spring)==null?void 0:n.damping)??10},r=t.timeout??300;let l=null,s=null,a=null;return{in:async(g,{scrollOffset:h})=>{const p=g;return!await new Promise(f=>{l?f(!0):(s=f,setTimeout(()=>{s=null,f(!1)},r))})||!l?(l=null,{spring:i,tick:()=>{}}):(a=z(l,p,h),a?(l=null,{spring:i,tick:f=>{a&&a.inAnimation(f)}}):{spring:i,tick:()=>{}})},out:async g=>({spring:i,onStart:()=>{l=g,s&&(s(!0),s=null)},prepare:h=>{x.n(h),h.style.zIndex="-1"},tick:h=>{a&&a.outAnimation(h)}})}};function k(t){const e=t.getBoundingClientRect(),n=t.clientHeight,i=50*(window.innerHeight-e.top)/n;return Math.min(Math.max(i,0),100)}const I=(t={})=>{var e,n;const i={stiffness:((e=t.spring)==null?void 0:e.stiffness)??300,damping:((n=t.spring)==null?void 0:n.damping)??200};return{in:r=>{const l=k(r);return{spring:i,tick:s=>{r.style.clipPath=`circle(${s*100}% at 50% ${l}%)`}}},out:r=>{const l=k(r);return{spring:i,tick:s=>{r.style.clipPath=`circle(${s*100}% at 50% ${l}%)`,r.style.zIndex="100"},prepare:x.n}}}};exports.fade=P;exports.hero=B;exports.pinterest=H;exports.ripple=I;
+"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,305 +1 @@
-import { n as x } from "../utils-DR41YsAh-mLT5vDuI.js";
-const D = (t = {}) => {
-  var e, l;
-  const i = {
-    stiffness: ((e = t.spring) == null ? void 0 : e.stiffness) ?? 300,
-    damping: ((l = t.spring) == null ? void 0 : l.damping) ?? 30
-  };
-  return {
-    in: (r) => ({
-      spring: i,
-      tick: (n) => {
-        r.style.opacity = n.toString();
-      }
-    }),
-    out: (r) => ({
-      spring: i,
-      tick: (n) => {
-        r.style.opacity = n.toString();
-      },
-      prepare: x
-    })
-  };
-};
-function M(t, e) {
-  return t.querySelector(`[data-hero-key="${e}"]`);
-}
-function R(t, e) {
-  const l = t.getBoundingClientRect(), i = e.getBoundingClientRect();
-  return new DOMRect(
-    i.left - l.left,
-    i.top - l.top,
-    i.width,
-    i.height
-  );
-}
-const H = (t = {}) => {
-  var e, l;
-  const i = {
-    stiffness: ((e = t.spring) == null ? void 0 : e.stiffness) ?? 300,
-    damping: ((l = t.spring) == null ? void 0 : l.damping) ?? 30
-  }, r = t.timeout ?? 300;
-  let n = null, s = null;
-  return {
-    in: async (a, g) => {
-      const h = a, f = Array.from(h.querySelectorAll("[data-hero-key]"));
-      if (f.length === 0)
-        return {
-          spring: i,
-          tick: () => {
-          }
-          // No hero elements, skip animation
-        };
-      if (!await new Promise((c) => {
-        n ? c(!0) : (s = c, setTimeout(() => {
-          s = null, c(!1);
-        }, r));
-      }) || !n)
-        return n = null, {
-          spring: i,
-          tick: () => {
-          }
-          // No fromNode, skip animation
-        };
-      const p = f.map((c) => {
-        const u = c.getAttribute("data-hero-key");
-        if (!u) return null;
-        const d = M(n, u);
-        if (!d) return null;
-        const o = c, y = R(n, d), m = R(h, o), $ = y.left - m.left - g.scrollOffset.x, w = y.top - m.top - g.scrollOffset.y, A = y.width / m.width, v = y.height / m.height, S = o.style.transform, q = o.style.position, E = o.style.transformOrigin;
-        return {
-          toEl: o,
-          dx: $,
-          dy: w,
-          dw: A,
-          dh: v,
-          originalTransform: S,
-          originalPosition: q,
-          originalTransformOrigin: E
-        };
-      }).filter(Boolean);
-      return n = null, p.length === 0 ? {
-        spring: i,
-        tick: () => {
-        }
-        // No matching hero elements
-      } : {
-        spring: i,
-        prepare: () => {
-          p.forEach(({ toEl: c }) => {
-            c.style.position = "relative", c.style.transformOrigin = "top left";
-          });
-        },
-        tick: (c) => {
-          p.forEach(({ toEl: u, dx: d, dy: o, dw: y, dh: m }) => {
-            u.style.transform = `translate(${(1 - c) * d}px,${(1 - c) * o}px) scale(${c + (1 - c) * y}, ${c + (1 - c) * m})`;
-          });
-        },
-        onEnd: () => {
-          p.forEach(
-            ({
-              toEl: c,
-              originalTransform: u,
-              originalPosition: d,
-              originalTransformOrigin: o
-            }) => {
-              c.style.transform = u, c.style.position = d, c.style.transformOrigin = o;
-            }
-          );
-        }
-      };
-    },
-    out: async (a) => ({
-      onStart: () => {
-        n = a, s && (s(!0), s = null);
-      },
-      prepare: (g) => {
-        x(g), g.style.opacity = "0";
-      }
-    })
-  };
-};
-function k(t, e) {
-  const l = t.getBoundingClientRect(), i = e.getBoundingClientRect();
-  return new DOMRect(
-    i.left - l.left,
-    i.top - l.top,
-    i.width,
-    i.height
-  );
-}
-function P({
-  detailRect: t,
-  galleryRect: e,
-  pageRect: l,
-  scrollOffset: i
-}, r) {
-  const n = e.left - t.left + (e.width - t.width) / 2 - i.x, s = e.top - t.top + (e.height - t.height) / 2 - i.y, a = e.width / t.width, g = e.height / t.height, h = Math.max(a, g), f = t.top / l.height * 100, p = (l.width - (t.left + t.width)) / l.width * 100, c = (l.height - (t.top + t.height)) / l.height * 100, u = t.left / l.width * 100;
-  return r.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`, (d) => {
-    const o = 1 - d, y = f * o, m = p * o, $ = c * o, w = u * o;
-    r.style.clipPath = `inset(${y}% ${m}% ${$}% ${w}%)`, r.style.transform = `translate(${n * o}px, ${s * o}px) scale(${1 + (h - 1) * o})`;
-  };
-}
-function B({
-  galleryRect: t,
-  detailRect: e,
-  scrollOffset: l
-}, i) {
-  const r = e.left - t.left + (e.width - t.width) / 2 + l.x, n = e.top - t.top + (e.height - t.height) / 2 + l.y, s = e.width / t.width, a = e.height / t.height, g = Math.max(s, a);
-  return (h) => {
-    i.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`;
-    const f = 1 - h;
-    i.style.transform = `translate(${r * f - l.x}px, ${n * f - l.y}px) scale(${1 + (g - 1) * f})`, i.style.opacity = `${1 - f}`;
-  };
-}
-function C({
-  galleryRect: t,
-  detailRect: e,
-  scrollOffset: l
-}, i) {
-  const r = e.left - t.left + (e.width - t.width) / 2 - l.x, n = e.top - t.top + (e.height - t.height) / 2 - l.y, s = e.width / t.width, a = e.height / t.height, g = Math.max(s, a);
-  return (h) => {
-    const f = 1 - h, p = h;
-    i.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`, i.style.transform = `translate(${r * f}px, ${n * f}px) scale(${1 + (g - 1) * f})`, i.style.opacity = `${p}`;
-  };
-}
-function T({
-  detailRect: t,
-  galleryRect: e,
-  pageRect: l,
-  scrollOffset: i
-}, r) {
-  const n = e.left - t.left + (e.width - t.width) / 2 + i.x, s = e.top - t.top + (e.height - t.height) / 2 + i.y, a = e.width / t.width, g = e.height / t.height, h = Math.min(a, g), f = t.top / l.height * 100, p = (l.width - (t.left + t.width)) / l.width * 100, c = (l.height - (t.top + t.height)) / l.height * 100, u = t.left / l.width * 100;
-  return r.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`, (d) => {
-    const o = 1 - d, y = f * o, m = p * o, $ = c * o, w = u * o;
-    r.style.clipPath = `inset(${y}% ${m}% ${$}% ${w}%)`, r.style.transform = `translate(${n * o - i.x}px, ${s * o - i.y}px) scale(${1 + (h - 1) * o})`;
-  };
-}
-function b(t, e, l) {
-  const i = t.querySelector(
-    "[data-pinterest-detail-key]"
-  ), r = e.querySelector(
-    "[data-pinterest-detail-key]"
-  );
-  if (t.querySelectorAll("[data-pinterest-detail-key]").length > 1 || e.querySelectorAll("[data-pinterest-detail-key]").length > 1)
-    return null;
-  let n = null, s = null, a = !1;
-  if (!i && r) {
-    s = r;
-    const p = s.getAttribute("data-pinterest-detail-key");
-    if (!p) return null;
-    n = t.querySelector(
-      `[data-pinterest-gallery-key="${p}"]`
-    ), n && (a = !0);
-  } else if (i && !r) {
-    s = i;
-    const p = s.getAttribute("data-pinterest-detail-key");
-    if (!p) return null;
-    n = e.querySelector(
-      `[data-pinterest-gallery-key="${p}"]`
-    ), n && (a = !1);
-  }
-  if (!n || !s)
-    return null;
-  const g = k(a ? t : e, n), h = k(a ? e : t, s), f = e.getBoundingClientRect();
-  return a ? {
-    inAnimation: P(
-      { detailRect: h, galleryRect: g, pageRect: f, scrollOffset: l },
-      e
-    ),
-    outAnimation: B(
-      { galleryRect: g, detailRect: h, scrollOffset: l },
-      t
-    )
-  } : {
-    inAnimation: C(
-      { galleryRect: g, detailRect: h, scrollOffset: l },
-      e
-    ),
-    outAnimation: T(
-      { detailRect: h, galleryRect: g, pageRect: f, scrollOffset: l },
-      t
-    )
-  };
-}
-const I = (t = {}) => {
-  var e, l;
-  const i = {
-    stiffness: ((e = t.spring) == null ? void 0 : e.stiffness) ?? 50,
-    damping: ((l = t.spring) == null ? void 0 : l.damping) ?? 10
-  }, r = t.timeout ?? 300;
-  let n = null, s = null, a = null;
-  return {
-    in: async (g, { scrollOffset: h }) => {
-      const f = g;
-      return !await new Promise((p) => {
-        n ? p(!0) : (s = p, setTimeout(() => {
-          s = null, p(!1);
-        }, r));
-      }) || !n ? (n = null, {
-        spring: i,
-        tick: () => {
-        }
-      }) : (a = b(n, f, h), a ? (n = null, {
-        spring: i,
-        tick: (p) => {
-          a && a.inAnimation(p);
-        }
-      }) : {
-        spring: i,
-        tick: () => {
-        }
-      });
-    },
-    out: async (g) => ({
-      spring: i,
-      onStart: () => {
-        n = g, s && (s(!0), s = null);
-      },
-      prepare: (h) => {
-        x(h), h.style.zIndex = "-1";
-      },
-      tick: (h) => {
-        a && a.outAnimation(h);
-      }
-    })
-  };
-};
-function O(t) {
-  const e = t.getBoundingClientRect(), l = t.clientHeight, i = 50 * (window.innerHeight - e.top) / l;
-  return Math.min(Math.max(i, 0), 100);
-}
-const F = (t = {}) => {
-  var e, l;
-  const i = {
-    stiffness: ((e = t.spring) == null ? void 0 : e.stiffness) ?? 300,
-    damping: ((l = t.spring) == null ? void 0 : l.damping) ?? 200
-  };
-  return {
-    in: (r) => {
-      const n = O(r);
-      return {
-        spring: i,
-        tick: (s) => {
-          r.style.clipPath = `circle(${s * 100}% at 50% ${n}%)`;
-        }
-      };
-    },
-    out: (r) => {
-      const n = O(r);
-      return {
-        spring: i,
-        tick: (s) => {
-          r.style.clipPath = `circle(${s * 100}% at 50% ${n}%)`, r.style.zIndex = "100";
-        },
-        prepare: x
-      };
-    }
-  };
-};
-export {
-  D as fade,
-  H as hero,
-  I as pinterest,
-  F as ripple
-};
+export * from "@ssgoi/core/view-transitions";

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "@ssgoi/react",
-  "version": "0.0.7",
+  "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-DR41YsAh-CN_CfgYX.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.n=n;exports.r=r;

package/dist/utils-DR41YsAh-mLT5vDuI.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 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;
-};
-export {
-  n,
-  r
-};

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>