@ssgoi/react 0.0.6 → 0.0.7

package/dist/view-transitions/index.js

@@ -1,107 +1,109 @@
-import { p as k } from "../utils-DR41YsAh.js";
-const I = (t = {}) => {
-  const n = {
-    stiffness: t.spring?.stiffness ?? 300,
-    damping: t.spring?.damping ?? 30
+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: (e) => ({
-      spring: n,
-      tick: (i) => {
-        e.style.opacity = i.toString();
+    in: (r) => ({
+      spring: i,
+      tick: (n) => {
+        r.style.opacity = n.toString();
       }
     }),
-    out: (e) => ({
-      spring: n,
-      tick: (i) => {
-        e.style.opacity = i.toString();
+    out: (r) => ({
+      spring: i,
+      tick: (n) => {
+        r.style.opacity = n.toString();
       },
-      prepare: k
+      prepare: x
     })
   };
 };
-function E(t, n) {
-  return t.querySelector(`[data-hero-key="${n}"]`);
+function M(t, e) {
+  return t.querySelector(`[data-hero-key="${e}"]`);
 }
-function A(t, n) {
-  const e = t.getBoundingClientRect(), i = n.getBoundingClientRect();
+function R(t, e) {
+  const l = t.getBoundingClientRect(), i = e.getBoundingClientRect();
   return new DOMRect(
-    i.left - e.left,
-    i.top - e.top,
+    i.left - l.left,
+    i.top - l.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;
+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, h) => {
-      const o = a, c = Array.from(o.querySelectorAll("[data-hero-key]"));
-      if (c.length === 0)
+    in: async (a, g) => {
+      const h = a, f = Array.from(h.querySelectorAll("[data-hero-key]"));
+      if (f.length === 0)
         return {
-          spring: n,
+          spring: i,
           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,
+      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 r = c.map((l) => {
-        const y = l.getAttribute("data-hero-key");
-        if (!y) return null;
-        const d = E(i, y);
+      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 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;
+        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: p,
+          toEl: o,
           dx: $,
           dy: w,
-          dw: x,
-          dh: M,
-          originalTransform: q,
-          originalPosition: T,
-          originalTransformOrigin: C
+          dw: A,
+          dh: v,
+          originalTransform: S,
+          originalPosition: q,
+          originalTransformOrigin: E
         };
       }).filter(Boolean);
-      return i = null, r.length === 0 ? {
-        spring: n,
+      return n = null, p.length === 0 ? {
+        spring: i,
         tick: () => {
         }
         // No matching hero elements
       } : {
-        spring: n,
+        spring: i,
         prepare: () => {
-          r.forEach(({ toEl: l }) => {
-            l.style.position = "relative", l.style.transformOrigin = "top left";
+          p.forEach(({ toEl: c }) => {
+            c.style.position = "relative", c.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})`;
+        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: () => {
-          r.forEach(
+          p.forEach(
             ({
-              toEl: l,
-              originalTransform: y,
+              toEl: c,
+              originalTransform: u,
               originalPosition: d,
-              originalTransformOrigin: p
+              originalTransformOrigin: o
             }) => {
-              l.style.transform = y, l.style.position = d, l.style.transformOrigin = p;
+              c.style.transform = u, c.style.position = d, c.style.transformOrigin = o;
             }
           );
         }
@@ -109,193 +111,195 @@ const L = (t = {}) => {
     },
     out: async (a) => ({
       onStart: () => {
-        i = a, s && (s(!0), s = null);
+        n = a, s && (s(!0), s = null);
       },
-      prepare: (h) => {
-        k(h), h.style.opacity = "0";
+      prepare: (g) => {
+        x(g), g.style.opacity = "0";
       }
     })
   };
 };
-function S(t, n) {
-  const e = t.getBoundingClientRect(), i = n.getBoundingClientRect();
+function k(t, e) {
+  const l = t.getBoundingClientRect(), i = e.getBoundingClientRect();
   return new DOMRect(
-    i.left - e.left,
-    i.top - e.top,
+    i.left - l.left,
+    i.top - l.top,
     i.width,
     i.height
   );
 }
 function P({
   detailRect: t,
-  galleryRect: n,
-  pageRect: e,
+  galleryRect: e,
+  pageRect: l,
   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})`;
+}, 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 D({
+function B({
   galleryRect: t,
-  detailRect: n,
-  scrollOffset: e
+  detailRect: e,
+  scrollOffset: l
 }, 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 = 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 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}`;
+    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 H({
+function C({
   galleryRect: t,
-  detailRect: n,
-  scrollOffset: e
+  detailRect: e,
+  scrollOffset: l
 }, 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}`;
+  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 b({
+function T({
   detailRect: t,
-  galleryRect: n,
-  pageRect: e,
+  galleryRect: e,
+  pageRect: l,
   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})`;
+}, 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 O(t, n, e) {
+function b(t, e, l) {
   const i = t.querySelector(
     "[data-pinterest-detail-key]"
-  ), s = n.querySelector(
+  ), r = e.querySelector(
     "[data-pinterest-detail-key]"
   );
-  if (t.querySelectorAll("[data-pinterest-detail-key]").length > 1 || n.querySelectorAll("[data-pinterest-detail-key]").length > 1)
+  if (t.querySelectorAll("[data-pinterest-detail-key]").length > 1 || e.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);
+  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 (!a || !h)
+  if (!n || !s)
     return null;
-  const c = S(o ? t : n, a), g = S(o ? n : t, h), r = n.getBoundingClientRect();
-  return o ? {
+  const g = k(a ? t : e, n), h = k(a ? e : t, s), f = e.getBoundingClientRect();
+  return a ? {
     inAnimation: P(
-      { detailRect: g, galleryRect: c, pageRect: r, scrollOffset: e },
-      n
+      { detailRect: h, galleryRect: g, pageRect: f, scrollOffset: l },
+      e
     ),
-    outAnimation: D(
-      { galleryRect: c, detailRect: g, scrollOffset: e },
+    outAnimation: B(
+      { galleryRect: g, detailRect: h, scrollOffset: l },
       t
     )
   } : {
-    inAnimation: H(
-      { galleryRect: c, detailRect: g, scrollOffset: e },
-      n
+    inAnimation: C(
+      { galleryRect: g, detailRect: h, scrollOffset: l },
+      e
     ),
-    outAnimation: b(
-      { detailRect: g, galleryRect: c, pageRect: r, scrollOffset: e },
+    outAnimation: T(
+      { detailRect: h, galleryRect: g, pageRect: f, scrollOffset: l },
       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;
+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 (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,
+    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 = O(i, c, o), a ? (i = null, {
-        spring: n,
-        tick: (r) => {
-          a && a.inAnimation(r);
+      }) : (a = b(n, f, h), a ? (n = null, {
+        spring: i,
+        tick: (p) => {
+          a && a.inAnimation(p);
         }
       }) : {
-        spring: n,
+        spring: i,
         tick: () => {
         }
       });
     },
-    out: async (h) => ({
-      spring: n,
+    out: async (g) => ({
+      spring: i,
       onStart: () => {
-        i = h, s && (s(!0), s = null);
+        n = g, s && (s(!0), s = null);
       },
-      prepare: (o) => {
-        k(o), o.style.zIndex = "-1";
+      prepare: (h) => {
+        x(h), h.style.zIndex = "-1";
       },
-      tick: (o) => {
-        a && a.outAnimation(o);
+      tick: (h) => {
+        a && a.outAnimation(h);
       }
     })
   };
 };
-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);
+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 Y = (t = {}) => {
-  const n = {
-    stiffness: t.spring?.stiffness ?? 300,
-    damping: t.spring?.damping ?? 200
+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: (e) => {
-      const i = B(e);
+    in: (r) => {
+      const n = O(r);
       return {
-        spring: n,
+        spring: i,
         tick: (s) => {
-          e.style.clipPath = `circle(${s * 100}% at 50% ${i}%)`;
+          r.style.clipPath = `circle(${s * 100}% at 50% ${n}%)`;
         }
       };
     },
-    out: (e) => {
-      const i = B(e);
+    out: (r) => {
+      const n = O(r);
       return {
-        spring: n,
+        spring: i,
         tick: (s) => {
-          e.style.clipPath = `circle(${s * 100}% at 50% ${i}%)`, e.style.zIndex = "100";
+          r.style.clipPath = `circle(${s * 100}% at 50% ${n}%)`, r.style.zIndex = "100";
         },
-        prepare: k
+        prepare: x
       };
     }
   };
 };
 export {
-  I as fade,
-  L as hero,
-  X as pinterest,
-  Y as ripple
+  D as fade,
+  H as hero,
+  I as pinterest,
+  F as ripple
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssgoi/react",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "type": "module",
   "files": [
     "dist",