@ssgoi/react 0.0.1

package/dist/ssgoi-transition.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export declare const SsgoiTransition: ({ children, id, }: {
+    children: ReactNode;
+    id: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/ssgoi.d.ts

@@ -0,0 +1,8 @@
+import { default as React, ReactNode } from 'react';
+import { SsgoiConfig } from './types';
+interface SsgoiProps {
+    config: SsgoiConfig;
+    children: ReactNode;
+}
+export declare const Ssgoi: React.FC<SsgoiProps>;
+export {};

package/dist/transition.d.ts

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

package/dist/transitions/index.cjs

@@ -0,0 +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;

package/dist/transitions/index.d.ts

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

package/dist/transitions/index.js

@@ -0,0 +1,173 @@
+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
+};

package/dist/types.cjs

@@ -0,0 +1 @@
+"use strict";

package/dist/types.d.ts

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

package/dist/types.js

@@ -0,0 +1 @@
+

package/dist/utils-BSgyev81.cjs

@@ -0,0 +1 @@
+"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

@@ -0,0 +1,16 @@
+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/dist/view-transitions/index.cjs

@@ -0,0 +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;

package/dist/view-transitions/index.d.ts

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

package/dist/view-transitions/index.js

@@ -0,0 +1,301 @@
+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
+};

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@ssgoi/react",
+  "version": "0.0.1",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/ssgoi-react.umd.js",
+  "module": "./dist/ssgoi-react.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/ssgoi-react.es.js",
+      "require": "./dist/ssgoi-react.umd.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "package": "vite build",
+    "postpublish": "node scripts/restore-package.js"
+  },
+  "dependencies": {
+    "@ssgoi/core": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.30.1",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react": "^4.6.0",
+    "eslint": "^9.30.1",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.3.0",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.35.1",
+    "vite": "^7.0.4",
+    "vite-plugin-dts": "^4.5.4"
+  }
+}