@ssgoi/react 0.0.7 → 2.1.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 c=require("react/jsx-runtime"),a=require("@ssgoi/core"),u=require("./context.cjs"),g=({children:n,id:t,as:o,className:e,...i})=>{const s=u.useSsgoi(),r=o||"div";return c.jsx(r,{ref:a.transition(s(t)),"data-ssgoi-transition":t,className:e,...i,children:n})};exports.SsgoiTransition=g;

package/dist/ssgoi-transition.d.ts

@@ -1,5 +1,9 @@
-import { ReactNode } from 'react';
-export declare const SsgoiTransition: ({ children, id, }: {
+import { ReactNode, ElementType } from 'react';
+type SsgoiTransitionProps<T extends ElementType = "div"> = {
     children: ReactNode;
     id: string;
-}) => import("react/jsx-runtime").JSX.Element;
+    as?: T;
+    className?: string;
+};
+export declare const SsgoiTransition: <T extends ElementType = "div">({ children, id, as, className, ...rest }: SsgoiTransitionProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ssgoi-transition.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as m } from "react/jsx-runtime";
+import { transition as e } from "@ssgoi/core";
+import { useSsgoi as a } from "./context.js";
+const u = ({
+  children: t,
+  id: o,
+  as: n,
+  className: i,
+  ...r
+}) => {
+  const s = a();
+  return /* @__PURE__ */ m(
+    n || "div",
+    {
+      ref: e(s(o)),
+      "data-ssgoi-transition": o,
+      className: i,
+      ...r,
+      children: t
+    }
+  );
+};
+export {
+  u 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.1.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,25 @@
       "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"
     }
   },
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "tsc -b && vite build",
+    "watch": "vite build --watch",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "package": "vite build",
+    "prepare": "pnpm run build"
+  },
   "dependencies": {
-    "@ssgoi/core": "0.0.1"
+    "@ssgoi/core": "workspace:*"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -51,16 +69,34 @@
     "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"
   },
-  "scripts": {
-    "dev": "vite build --watch",
-    "build": "tsc -b && vite build",
-    "lint": "eslint .",
-    "preview": "vite preview",
-    "package": "vite build"
+  "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"
   }
-}
+}

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;