meta-mosaic 1.0.9

package/README.md

@@ -0,0 +1,12 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.

package/dist/index.es.js

@@ -0,0 +1,478 @@
+import oe, { useState as _, useEffect as O, useRef as se } from "react";
+var X = { exports: {} }, P = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var K;
+function ae() {
+  if (K) return P;
+  K = 1;
+  var t = Symbol.for("react.transitional.element"), c = Symbol.for("react.fragment");
+  function o(u, s, a) {
+    var d = null;
+    if (a !== void 0 && (d = "" + a), s.key !== void 0 && (d = "" + s.key), "key" in s) {
+      a = {};
+      for (var m in s)
+        m !== "key" && (a[m] = s[m]);
+    } else a = s;
+    return s = a.ref, {
+      $$typeof: t,
+      type: u,
+      key: d,
+      ref: s !== void 0 ? s : null,
+      props: a
+    };
+  }
+  return P.Fragment = c, P.jsx = o, P.jsxs = o, P;
+}
+var y = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var Q;
+function le() {
+  return Q || (Q = 1, process.env.NODE_ENV !== "production" && function() {
+    function t(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === re ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case S:
+          return "Fragment";
+        case I:
+          return "Profiler";
+        case $:
+          return "StrictMode";
+        case R:
+          return "Suspense";
+        case z:
+          return "SuspenseList";
+        case A:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case N:
+            return "Portal";
+          case Y:
+            return (e.displayName || "Context") + ".Provider";
+          case M:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case x:
+            var r = e.render;
+            return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case D:
+            return r = e.displayName || null, r !== null ? r : t(e.type) || "Memo";
+          case g:
+            r = e._payload, e = e._init;
+            try {
+              return t(e(r));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function c(e) {
+      return "" + e;
+    }
+    function o(e) {
+      try {
+        c(e);
+        var r = !1;
+      } catch {
+        r = !0;
+      }
+      if (r) {
+        r = console;
+        var n = r.error, l = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return n.call(
+          r,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          l
+        ), c(e);
+      }
+    }
+    function u(e) {
+      if (e === S) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === g)
+        return "<...>";
+      try {
+        var r = t(e);
+        return r ? "<" + r + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function s() {
+      var e = L.A;
+      return e === null ? null : e.getOwner();
+    }
+    function a() {
+      return Error("react-stack-top-frame");
+    }
+    function d(e) {
+      if (q.call(e, "key")) {
+        var r = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (r && r.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function m(e, r) {
+      function n() {
+        G || (G = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          r
+        ));
+      }
+      n.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: n,
+        configurable: !0
+      });
+    }
+    function E() {
+      var e = t(this.type);
+      return J[e] || (J[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function b(e, r, n, l, k, v, W, U) {
+      return n = v.ref, e = {
+        $$typeof: T,
+        type: e,
+        key: r,
+        props: v,
+        _owner: k
+      }, (n !== void 0 ? n : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: E
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: W
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: U
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function h(e, r, n, l, k, v, W, U) {
+      var i = r.children;
+      if (i !== void 0)
+        if (l)
+          if (te(i)) {
+            for (l = 0; l < i.length; l++)
+              w(i[l]);
+            Object.freeze && Object.freeze(i);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else w(i);
+      if (q.call(r, "key")) {
+        i = t(e);
+        var j = Object.keys(r).filter(function(ne) {
+          return ne !== "key";
+        });
+        l = 0 < j.length ? "{key: someKey, " + j.join(": ..., ") + ": ...}" : "{key: someKey}", Z[i + l] || (j = 0 < j.length ? "{" + j.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          l,
+          i,
+          j,
+          i
+        ), Z[i + l] = !0);
+      }
+      if (i = null, n !== void 0 && (o(n), i = "" + n), d(r) && (o(r.key), i = "" + r.key), "key" in r) {
+        n = {};
+        for (var V in r)
+          V !== "key" && (n[V] = r[V]);
+      } else n = r;
+      return i && m(
+        n,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), b(
+        e,
+        i,
+        v,
+        k,
+        s(),
+        n,
+        W,
+        U
+      );
+    }
+    function w(e) {
+      typeof e == "object" && e !== null && e.$$typeof === T && e._store && (e._store.validated = 1);
+    }
+    var p = oe, T = Symbol.for("react.transitional.element"), N = Symbol.for("react.portal"), S = Symbol.for("react.fragment"), $ = Symbol.for("react.strict_mode"), I = Symbol.for("react.profiler"), M = Symbol.for("react.consumer"), Y = Symbol.for("react.context"), x = Symbol.for("react.forward_ref"), R = Symbol.for("react.suspense"), z = Symbol.for("react.suspense_list"), D = Symbol.for("react.memo"), g = Symbol.for("react.lazy"), A = Symbol.for("react.activity"), re = Symbol.for("react.client.reference"), L = p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, q = Object.prototype.hasOwnProperty, te = Array.isArray, F = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    p = {
+      "react-stack-bottom-frame": function(e) {
+        return e();
+      }
+    };
+    var G, J = {}, B = p["react-stack-bottom-frame"].bind(
+      p,
+      a
+    )(), H = F(u(a)), Z = {};
+    y.Fragment = S, y.jsx = function(e, r, n, l, k) {
+      var v = 1e4 > L.recentlyCreatedOwnerStacks++;
+      return h(
+        e,
+        r,
+        n,
+        !1,
+        l,
+        k,
+        v ? Error("react-stack-top-frame") : B,
+        v ? F(u(e)) : H
+      );
+    }, y.jsxs = function(e, r, n, l, k) {
+      var v = 1e4 > L.recentlyCreatedOwnerStacks++;
+      return h(
+        e,
+        r,
+        n,
+        !0,
+        l,
+        k,
+        v ? Error("react-stack-top-frame") : B,
+        v ? F(u(e)) : H
+      );
+    };
+  }()), y;
+}
+process.env.NODE_ENV === "production" ? X.exports = ae() : X.exports = le();
+var f = X.exports;
+const C = {
+  sm: 600,
+  md: 960,
+  lg: 1280,
+  xl: 1920
+}, ee = (t) => t >= C.xl ? "xl" : t >= C.lg ? "lg" : t >= C.md ? "md" : t >= C.sm ? "sm" : "xs", ie = () => {
+  const [t, c] = _(() => ee(window.innerWidth));
+  return O(() => {
+    const o = () => {
+      c(ee(window.innerWidth));
+    };
+    return window.addEventListener("resize", o), () => window.removeEventListener("resize", o);
+  }, []), {
+    isXs: t === "xs",
+    isSm: t === "sm",
+    isMd: t === "md",
+    isLg: t === "lg",
+    isXl: t === "xl",
+    current: t
+  };
+}, ce = ({
+  image: t,
+  bgImageUrl: c,
+  width: o,
+  height: u,
+  bgPosition: s,
+  onClickCard: a
+}) => {
+  const [d, m] = _(!1);
+  return O(() => {
+    if (!(t != null && t.link)) return;
+    const E = new Image();
+    E.src = t.link, E.onload = () => m(!0), E.onerror = () => m(!1);
+  }, [t]), /* @__PURE__ */ f.jsx("div", { className: "mosaic-cell-wrapper", children: d ? /* @__PURE__ */ f.jsx(
+    "div",
+    {
+      className: "mosaic-cell",
+      style: {
+        backgroundImage: `url(${c})`,
+        backgroundSize: `${o}px ${u}px`,
+        backgroundPosition: s
+      },
+      onClick: () => a(t),
+      children: /* @__PURE__ */ f.jsx(
+        "div",
+        {
+          className: "mosaic-cell-img",
+          style: {
+            backgroundImage: `url(${t.link})`,
+            backgroundSize: "cover"
+          }
+        }
+      )
+    }
+  ) : null }, t.id);
+}, ue = ({
+  image: t,
+  onClose: c,
+  animationType: o = "bottom",
+  position: u,
+  setDialog: s
+  // 🆕 New prop
+}) => {
+  const [a, d] = _(!0), [m, E] = _({}), b = se();
+  O(() => (document.body.style.overflow = "hidden", () => {
+    document.body.style.overflow = "";
+  }), []), O(() => {
+    if (o === "position" && b.current && u) {
+      const { offsetWidth: p, offsetHeight: T } = b.current;
+      E({
+        position: "absolute",
+        left: u.x - p / 2,
+        top: u.y - T / 2
+      });
+    }
+  }, [o, u]);
+  const h = () => {
+    d(!1), setTimeout(() => {
+      c();
+    }, 300);
+  }, w = a ? o === "position" ? "zoom-in" : `slide-in-${o}` : o === "position" ? "zoom-out" : `slide-out-${o}`;
+  return /* @__PURE__ */ f.jsx(
+    "div",
+    {
+      className: "dialog-overlay",
+      onClick: h,
+      style: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        width: "100vw",
+        height: "100vh",
+        backgroundColor: "rgba(0,0,0,0.6)",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        zIndex: 1e3
+      },
+      children: /* @__PURE__ */ f.jsx(
+        "div",
+        {
+          ref: b,
+          className: `dialog-content ${w}`,
+          onClick: (p) => p.stopPropagation(),
+          style: {
+            backgroundColor: "#fff",
+            padding: "20px",
+            borderRadius: "8px",
+            maxWidth: "90%",
+            maxHeight: "90%",
+            overflow: "auto",
+            ...o === "position" ? m : {}
+          },
+          children: typeof s == "function" ? s(t) : /* @__PURE__ */ f.jsxs(f.Fragment, { children: [
+            /* @__PURE__ */ f.jsx("h3", { children: "Image Info" }),
+            /* @__PURE__ */ f.jsx(
+              "img",
+              {
+                src: t.link,
+                alt: "Preview",
+                style: { width: "100%", height: "auto", borderRadius: "4px" }
+              }
+            ),
+            /* @__PURE__ */ f.jsxs("p", { children: [
+              "ID: ",
+              t.id
+            ] })
+          ] })
+        }
+      )
+    }
+  );
+}, de = ({
+  images: t = [],
+  size: c = 14,
+  bgImageUrl: o = null,
+  gridWrapperClassName: u = null,
+  gridWrapperStyle: s = {},
+  width: a = { xs: 350, md: 500, lg: 700 },
+  height: d = { xs: 350, md: 500, lg: 700 },
+  bgPosition: m = "center",
+  setDialog: E = null
+}) => {
+  const [b, h] = _(c), [w, p] = _(!1), [T, N] = _({}), S = (g = null) => {
+    g && N(g), p(!0);
+  }, $ = () => p(!1), { isXs: I, isMd: M, isLg: Y } = ie();
+  let x = 350, R = 350;
+  I && (x = a.xs, R = d.xs), M && (x = a.md || 350, R = d.md || 350), Y && (x = a.lg || 350, R = d.lg || 350), O(() => {
+    c > 0 && h(c);
+  }, [c]), O(() => {
+    if (b * b < t.length) {
+      const A = Math.ceil(Math.sqrt(t.length));
+      A !== b && h(A);
+    }
+  }, [t.length, b]);
+  let z = b, D = b;
+  return /* @__PURE__ */ f.jsxs(
+    "div",
+    {
+      className: `mosaic-grid-wrapper ${u || ""}`,
+      style: {
+        gridTemplateColumns: `repeat(${D}, 1fr)`,
+        gridTemplateRows: `repeat(${z}, 1fr)`,
+        backgroundImage: `url(${o})`,
+        backgroundSize: `${x}px ${R}px`,
+        backgroundPosition: m,
+        width: `${x}px`,
+        height: `${R}px`,
+        ...s
+      },
+      children: [
+        /* @__PURE__ */ f.jsx("div", { className: "mosaic-grid-wrapper-overlay" }),
+        t.map((g) => /* @__PURE__ */ f.jsx(
+          ce,
+          {
+            image: g,
+            bgImageUrl: o,
+            width: x,
+            height: R,
+            bgPosition: m,
+            onClickCard: S
+          }
+        )),
+        w && /* @__PURE__ */ f.jsx(
+          ue,
+          {
+            image: T,
+            onClose: $,
+            animationType: "top",
+            position: "top",
+            setDialog: E
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  de as MetaMosaic
+};

package/dist/index.umd.js

@@ -0,0 +1,22 @@
+(function(_,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],s):(_=typeof globalThis<"u"?globalThis:_||self,s(_.MetaMosaic={},_.React))})(this,function(_,s){"use strict";var N={exports:{}},O={};/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var J;function re(){if(J)return O;J=1;var t=Symbol.for("react.transitional.element"),u=Symbol.for("react.fragment");function o(f,a,l){var m=null;if(l!==void 0&&(m=""+l),a.key!==void 0&&(m=""+a.key),"key"in a){l={};for(var b in a)b!=="key"&&(l[b]=a[b])}else l=a;return a=l.ref,{$$typeof:t,type:f,key:m,ref:a!==void 0?a:null,props:l}}return O.Fragment=u,O.jsx=o,O.jsxs=o,O}var y={};/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var B;function te(){return B||(B=1,process.env.NODE_ENV!=="production"&&function(){function t(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===le?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case P:return"Fragment";case Y:return"Profiler";case M:return"StrictMode";case g:return"Suspense";case L:return"SuspenseList";case C:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case I:return"Portal";case D:return(e.displayName||"Context")+".Provider";case z:return(e._context.displayName||"Context")+".Consumer";case R:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case F:return r=e.displayName||null,r!==null?r:t(e.type)||"Memo";case k:r=e._payload,e=e._init;try{return t(e(r))}catch{}}return null}function u(e){return""+e}function o(e){try{u(e);var r=!1}catch{r=!0}if(r){r=console;var n=r.error,c=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",c),u(e)}}function f(e){if(e===P)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===k)return"<...>";try{var r=t(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function a(){var e=W.A;return e===null?null:e.getOwner()}function l(){return Error("react-stack-top-frame")}function m(e){if(Z.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function b(e,r){function n(){$||($=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}n.isReactWarning=!0,Object.defineProperty(e,"key",{get:n,configurable:!0})}function x(){var e=t(this.type);return K[e]||(K[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function p(e,r,n,c,h,v,V,X){return n=v.ref,e={$$typeof:S,type:e,key:r,props:v,_owner:h},(n!==void 0?n:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:x}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:V}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:X}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function T(e,r,n,c,h,v,V,X){var i=r.children;if(i!==void 0)if(c)if(ce(i)){for(c=0;c<i.length;c++)w(i[c]);Object.freeze&&Object.freeze(i)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else w(i);if(Z.call(r,"key")){i=t(e);var j=Object.keys(r).filter(function(ie){return ie!=="key"});c=0<j.length?"{key: someKey, "+j.join(": ..., ")+": ...}":"{key: someKey}",ee[i+c]||(j=0<j.length?"{"+j.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,c,i,j,i),ee[i+c]=!0)}if(i=null,n!==void 0&&(o(n),i=""+n),m(r)&&(o(r.key),i=""+r.key),"key"in r){n={};for(var G in r)G!=="key"&&(n[G]=r[G])}else n=r;return i&&b(n,typeof e=="function"?e.displayName||e.name||"Unknown":e),p(e,i,v,h,a(),n,V,X)}function w(e){typeof e=="object"&&e!==null&&e.$$typeof===S&&e._store&&(e._store.validated=1)}var E=s,S=Symbol.for("react.transitional.element"),I=Symbol.for("react.portal"),P=Symbol.for("react.fragment"),M=Symbol.for("react.strict_mode"),Y=Symbol.for("react.profiler"),z=Symbol.for("react.consumer"),D=Symbol.for("react.context"),R=Symbol.for("react.forward_ref"),g=Symbol.for("react.suspense"),L=Symbol.for("react.suspense_list"),F=Symbol.for("react.memo"),k=Symbol.for("react.lazy"),C=Symbol.for("react.activity"),le=Symbol.for("react.client.reference"),W=E.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,Z=Object.prototype.hasOwnProperty,ce=Array.isArray,U=console.createTask?console.createTask:function(){return null};E={"react-stack-bottom-frame":function(e){return e()}};var $,K={},Q=E["react-stack-bottom-frame"].bind(E,l)(),q=U(f(l)),ee={};y.Fragment=P,y.jsx=function(e,r,n,c,h){var v=1e4>W.recentlyCreatedOwnerStacks++;return T(e,r,n,!1,c,h,v?Error("react-stack-top-frame"):Q,v?U(f(e)):q)},y.jsxs=function(e,r,n,c,h){var v=1e4>W.recentlyCreatedOwnerStacks++;return T(e,r,n,!0,c,h,v?Error("react-stack-top-frame"):Q,v?U(f(e)):q)}}()),y}process.env.NODE_ENV==="production"?N.exports=re():N.exports=te();var d=N.exports;const A={sm:600,md:960,lg:1280,xl:1920},H=t=>t>=A.xl?"xl":t>=A.lg?"lg":t>=A.md?"md":t>=A.sm?"sm":"xs",ne=()=>{const[t,u]=s.useState(()=>H(window.innerWidth));return s.useEffect(()=>{const o=()=>{u(H(window.innerWidth))};return window.addEventListener("resize",o),()=>window.removeEventListener("resize",o)},[]),{isXs:t==="xs",isSm:t==="sm",isMd:t==="md",isLg:t==="lg",isXl:t==="xl",current:t}},oe=({image:t,bgImageUrl:u,width:o,height:f,bgPosition:a,onClickCard:l})=>{const[m,b]=s.useState(!1);return s.useEffect(()=>{if(!(t!=null&&t.link))return;const x=new Image;x.src=t.link,x.onload=()=>b(!0),x.onerror=()=>b(!1)},[t]),d.jsx("div",{className:"mosaic-cell-wrapper",children:m?d.jsx("div",{className:"mosaic-cell",style:{backgroundImage:`url(${u})`,backgroundSize:`${o}px ${f}px`,backgroundPosition:a},onClick:()=>l(t),children:d.jsx("div",{className:"mosaic-cell-img",style:{backgroundImage:`url(${t.link})`,backgroundSize:"cover"}})}):null},t.id)},se=({image:t,onClose:u,animationType:o="bottom",position:f,setDialog:a})=>{const[l,m]=s.useState(!0),[b,x]=s.useState({}),p=s.useRef();s.useEffect(()=>(document.body.style.overflow="hidden",()=>{document.body.style.overflow=""}),[]),s.useEffect(()=>{if(o==="position"&&p.current&&f){const{offsetWidth:E,offsetHeight:S}=p.current;x({position:"absolute",left:f.x-E/2,top:f.y-S/2})}},[o,f]);const T=()=>{m(!1),setTimeout(()=>{u()},300)},w=l?o==="position"?"zoom-in":`slide-in-${o}`:o==="position"?"zoom-out":`slide-out-${o}`;return d.jsx("div",{className:"dialog-overlay",onClick:T,style:{position:"fixed",top:0,left:0,width:"100vw",height:"100vh",backgroundColor:"rgba(0,0,0,0.6)",display:"flex",justifyContent:"center",alignItems:"center",zIndex:1e3},children:d.jsx("div",{ref:p,className:`dialog-content ${w}`,onClick:E=>E.stopPropagation(),style:{backgroundColor:"#fff",padding:"20px",borderRadius:"8px",maxWidth:"90%",maxHeight:"90%",overflow:"auto",...o==="position"?b:{}},children:typeof a=="function"?a(t):d.jsxs(d.Fragment,{children:[d.jsx("h3",{children:"Image Info"}),d.jsx("img",{src:t.link,alt:"Preview",style:{width:"100%",height:"auto",borderRadius:"4px"}}),d.jsxs("p",{children:["ID: ",t.id]})]})})})},ae=({images:t=[],size:u=14,bgImageUrl:o=null,gridWrapperClassName:f=null,gridWrapperStyle:a={},width:l={xs:350,md:500,lg:700},height:m={xs:350,md:500,lg:700},bgPosition:b="center",setDialog:x=null})=>{const[p,T]=s.useState(u),[w,E]=s.useState(!1),[S,I]=s.useState({}),P=(k=null)=>{k&&I(k),E(!0)},M=()=>E(!1),{isXs:Y,isMd:z,isLg:D}=ne();let R=350,g=350;Y&&(R=l.xs,g=m.xs),z&&(R=l.md||350,g=m.md||350),D&&(R=l.lg||350,g=m.lg||350),s.useEffect(()=>{u>0&&T(u)},[u]),s.useEffect(()=>{if(p*p<t.length){const C=Math.ceil(Math.sqrt(t.length));C!==p&&T(C)}},[t.length,p]);let L=p,F=p;return d.jsxs("div",{className:`mosaic-grid-wrapper ${f||""}`,style:{gridTemplateColumns:`repeat(${F}, 1fr)`,gridTemplateRows:`repeat(${L}, 1fr)`,backgroundImage:`url(${o})`,backgroundSize:`${R}px ${g}px`,backgroundPosition:b,width:`${R}px`,height:`${g}px`,...a},children:[d.jsx("div",{className:"mosaic-grid-wrapper-overlay"}),t.map(k=>d.jsx(oe,{image:k,bgImageUrl:o,width:R,height:g,bgPosition:b,onClickCard:P})),w&&d.jsx(se,{image:S,onClose:M,animationType:"top",position:"top",setDialog:x})]})};_.MetaMosaic=ae,Object.defineProperty(_,Symbol.toStringTag,{value:"Module"})});

package/dist/meta-mosaic.css

@@ -0,0 +1 @@
+.mosaic-grid-wrapper{display:grid;aspect-ratio:1;margin:0 auto;background-color:"#f9f9f9";background-attachment:fixed;background-repeat:no-repeat;position:relative}.mosaic-grid-wrapper-overlay{position:absolute;top:0;right:0;bottom:0;left:0;backdrop-filter:grayscale(1);-webkit-backdrop-filter:grayscale(1);background-color:#fff3}.mosaic-cell-wrapper{position:relative;z-index:2;cursor:pointer}.mosaic-cell{background-attachment:fixed;background-repeat:no-repeat;height:100%;width:100%}.mosaic-cell-img{width:100%;opacity:.4;height:100%;mix-blend-mode:multiply;position:relative;z-index:1}@keyframes slide-in-top{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slide-out-top{0%{transform:translateY(0);opacity:1}to{transform:translateY(-100%);opacity:0}}@keyframes slide-in-right{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slide-out-right{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}@keyframes slide-in-bottom{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slide-out-bottom{0%{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:0}}@keyframes slide-in-left{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slide-out-left{0%{transform:translate(0);opacity:1}to{transform:translate(-100%);opacity:0}}@keyframes zoom-in{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes zoom-out{0%{transform:scale(1);opacity:1}to{transform:scale(.5);opacity:0}}.slide-in-top{animation:slide-in-top .3s forwards}.slide-out-top{animation:slide-out-top .3s forwards}.slide-in-right{animation:slide-in-right .3s forwards}.slide-out-right{animation:slide-out-right .3s forwards}.slide-in-bottom{animation:slide-in-bottom .3s forwards}.slide-out-bottom{animation:slide-out-bottom .3s forwards}.slide-in-left{animation:slide-in-left .3s forwards}.slide-out-left{animation:slide-out-left .3s forwards}.zoom-in{animation:zoom-in .3s forwards}.zoom-out{animation:zoom-out .3s forwards}.custom-mosaic-grid-wrapper{border-radius:.2em;overflow:hidden}.mosaic-cell-wrapper{transition:transform .4s}.mosaic-cell-wrapper:hover{transform:scale(1.1);z-index:3}.mosaic-cell-img{transition:.3s;transition-delay:.5s}.mosaic-cell-wrapper:hover .mosaic-cell-img{opacity:1;mix-blend-mode:normal;transition-delay:0s;border-radius:.1em;z-index:4}

package/dist/vite.svg

@@ -0,0 +1 @@
+<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="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "meta-mosaic",
+  "version": "1.0.9",
+  "description": "A React component library to create interactive image mosaics with metadata popups.",
+  "main": "dist/index.umd.js",
+  "module": "dist/index.es.js",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js"
+    },
+    "./style.css": "./dist/meta-mosaic.css"
+  },
+  "keywords": [
+    "react",
+    "image",
+    "mosaic",
+    "popup",
+    "gallery",
+    "photo viewer",
+    "react library"
+  ],
+  "author": "Arbaj Ansari",
+  "license": "MIT",
+  "scripts": {
+    "build": "vite build"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "vite": "^5.0.0",
+    "@vitejs/plugin-react": "^4.6.0"
+  }
+}